diff --git a/code/frontend/INTEGRATION_GUIDE.md b/code/frontend/INTEGRATION_GUIDE.md deleted file mode 100644 index 45d53cc..0000000 --- a/code/frontend/INTEGRATION_GUIDE.md +++ /dev/null @@ -1,155 +0,0 @@ -# Frontend-Backend Integration Guide - -This guide explains how the frontend has been integrated with the backend API. - -## 🔗 API Integration Status - -### ✅ Completed Integrations - -1. **Upload Endpoint Integration** (`UploadView.tsx`) - - Real file upload to `/api/v1/upload/` - - Backend availability checking - - Error handling and user feedback - - Progress tracking and status updates - -2. **Status Polling Integration** (`ProcessingView.tsx`) - - Real-time status polling from `/api/v1/upload/{task_id}/status` - - Automatic task discovery from uploads - - Progress visualization - - Backend connection status - -3. **API Service Layer** (`services/api.ts`) - - Centralized API communication - - Error handling - - Health checks - - Type-safe API calls - -4. **TypeScript Types** (`types/upload.ts`) - - Backend response interfaces - - Processing task types - - Upload response types - -## 🚀 How It Works - -### Upload Flow -1. User selects files in `UploadView` -2. Files are uploaded via chunked upload: `uploadInit()` → `uploadChunk()` per chunk → `uploadFinalize()` -3. Backend returns task information including `nodeodm_task_id` -4. Upload success triggers a custom event -5. `ProcessingView` listens for the event and adds the task to its queue - -### Status Polling Flow -1. `ProcessingView` polls every 5 seconds for active tasks -2. For each active task, calls `apiService.getTaskStatus(nodeodm_task_id)` -3. Updates task progress and status in real-time -4. Tasks persist in localStorage between sessions - -## 🔧 Configuration - -### Environment Variables -Create a `.env` file in the frontend root: - -```env -# Backend API Configuration -REACT_APP_API_BASE_URL=http://localhost:8001 - -# API Endpoints (optional overrides) -REACT_APP_UPLOAD_ENDPOINT=/api/v1/upload/ -REACT_APP_STATUS_ENDPOINT=/api/v1/upload/{task_id}/status -REACT_APP_HEALTH_ENDPOINT=/health - -# Development Settings -REACT_APP_DEBUG=true -REACT_APP_POLLING_INTERVAL=5000 -``` - -### Backend Requirements -The backend must be running on `http://localhost:8001` with the following endpoints: - -- `POST /api/v1/upload/` - File upload endpoint -- `GET /api/v1/upload/{task_id}/status` - Task status endpoint -- `GET /health` - Health check endpoint - -## 🎯 Key Features - -### Real-time Updates -- Automatic status polling every 5 seconds -- Live progress bars for active tasks -- Backend connection status indicators - -### Error Handling -- Network error detection -- Backend availability checking -- User-friendly error messages -- Graceful degradation when backend is unavailable - -### Data Persistence -- Tasks stored in localStorage -- Survives browser refreshes -- Automatic cleanup of old tasks - -### User Experience -- Loading states during operations -- Disabled buttons when backend unavailable -- Visual feedback for all operations -- Clear error messages - -## 🔍 Monitoring - -### Backend Status -Both components show backend connection status: -- Green dot: Backend connected -- Red dot: Backend disconnected - -### Task Status -Tasks show detailed information: -- Task ID (truncated for display) -- File count -- Creation timestamp -- Current status and progress -- Error messages for failed tasks - -## 🚨 Troubleshooting - -### Backend Not Available -- Ensure backend is running on port 8001 -- Check CORS configuration in backend -- Verify NodeODM is running on port 3000 - -### Upload Failures -- Check file size limits (100MB per file) -- Verify file formats (JPEG, PNG, TIFF) -- Check backend logs for detailed errors - -### Status Polling Issues -- Verify task IDs are valid -- Check backend task status endpoint -- Monitor browser console for errors - -## 📝 Development Notes - -### Event System -The integration uses a custom event system to communicate between components: -- `newUpload` event: Dispatched when upload completes -- Contains full upload response from backend - -### Polling Strategy -- Polls every 5 seconds for active tasks only -- Stops polling when no active tasks -- Handles network errors gracefully - -### Type Safety -- All API responses are typed -- TypeScript interfaces match backend exactly -- Compile-time error checking for API calls - -## 🔮 Future Enhancements - -Potential improvements for the integration: - -1. **WebSocket Support**: Real-time updates instead of polling -2. **Retry Logic**: Automatic retry for failed requests -3. **Batch Operations**: Upload multiple files in batches -4. **Progress Tracking**: More granular upload progress -5. **Task Management**: Cancel/restart failed tasks -6. **Notifications**: Browser notifications for task completion diff --git a/code/frontend/README.md b/code/frontend/README.md deleted file mode 100644 index a8179d9..0000000 --- a/code/frontend/README.md +++ /dev/null @@ -1,229 +0,0 @@ -# Drone Imagery Hub - Frontend - -A React-based web interface for uploading, processing, and viewing drone imagery with image stitching capabilities. - -## 🎨 Design Theme - -- **Color Scheme**: Red and Black -- **Primary Colors**: Red accents (`#dc2626`) on dark backgrounds (`#0f172a`) -- **Typography**: Inter font family for modern, clean appearance -- **Style**: Dark theme with glass effects and smooth transitions - -## 🚀 Getting Started - -### Prerequisites - -- Node.js (version 14 or higher recommended) -- npm or yarn package manager - -### Installation - -1. Navigate to the frontend directory: - ```bash - cd code/frontend - ``` - -2. Install dependencies: - ```bash - npm install - ``` - -3. Start the development server: - ```bash - npm start - ``` - -4. Open your browser to view the app. The app runs at [http://localhost:8000](http://localhost:8000). - -### Port Configuration - -The development server runs on port 8000 by default (so it does not conflict with Node ODM on 3000 or the backend on 8001). To use a different port: - -1. Create a `.env` file in the `code/frontend` directory -2. Add your desired port: - ``` - PORT=3000 - ``` -3. Restart the development server with `npm start` - -The app will then be available at `http://localhost:YOUR_PORT`. - -## 🛠️ Tech Stack - -- **React 18** - UI library with TypeScript support -- **TypeScript** - Type-safe JavaScript -- **Tailwind CSS** - Utility-first CSS framework -- **Create React App** - Build tooling and development server -- **react-pdf** - PDF viewing and rendering library -- **react-dropzone** - Drag-and-drop file upload functionality - -## 📁 Project Structure - -``` -src/ -├── components/ -│ ├── Header.tsx # Application header -│ ├── Sidebar.tsx # Sidebar navigation -│ ├── UploadView.tsx # File upload interface -│ ├── ProcessingView.tsx # Processing queue monitoring -│ ├── GalleryView.tsx # Image gallery with backend integration -│ ├── FieldMapsView.tsx # Field maps visualization -│ └── PesticidePrescriptionsView.tsx # Pesticide prescriptions with spray maps -├── services/ -│ └── api.ts # API service for backend communication -├── types/ -│ ├── upload.ts # Upload-related type definitions -│ └── index.ts # General type definitions -├── App.tsx # Main application component -├── App.css # Custom styles and utilities -├── index.tsx # Application entry point -└── index.css # Global styles and Tailwind imports -``` - -## 🎯 Current Features - -### ✅ Implemented (Sprint 2) -- **Navigation System**: Tab-based navigation between Upload, Gallery, Processing, Field Maps, and Pesticides views -- **Dark Theme**: Red and black color scheme throughout -- **Responsive Design**: Works on desktop, tablet, and mobile -- **Upload Interface**: Drag-and-drop area with visual feedback, task naming, and parameter configuration -- **Gallery View**: Backend-integrated gallery with real processed images, PDF report viewing, and full-screen previews -- **Processing View**: Real-time processing queue monitoring with status updates -- **Field Maps View**: Field maps visualization interface (UI ready, backend integration pending) -- **Pesticide Prescriptions**: Spray map functionality with color-coded levels and grid editing -- **Backend Integration**: Complete API service for upload, processing, and results retrieval -- **PDF Viewing**: PDF report viewing with react-pdf library and page navigation -- **Task Management**: Task naming, metadata display, and organization -- **Real-time Updates**: Automatic status polling and progress tracking - -### ✅ Added Since Sprint 2 (Sprint 4–5 highlights) -- **Path preview workflow**: Upload boundary shapefile, configure heading/robot width/coverage width, and preview the generated snake-pattern path on the map UI. -- **RTK base station support**: UI integrations that work with backend RTK base endpoints for relative/robot-friendly coordinate usage. -- **Improved backend integrations**: Expanded API surface usage for newer pathing + prescription workflows (polling status and saving results). - -## 🎨 UI Components - -### Navigation -- Clean tab-style navigation -- Active state highlighting with red accent -- Smooth hover effects and transitions - -### Upload View -- Large drag-and-drop upload area -- Upload queue management -- File format validation (JPEG, PNG, TIFF) -- Progress indicators - -### Gallery View -- Responsive image grid layout with backend integration -- Real-time task listing from backend API -- Image metadata display with task names -- Lightbox viewer for full-screen image previews -- PDF report viewing with page navigation -- Download functionality for orthophotos and reports -- Empty state handling for no processed tasks - -### Processing View -- Real-time processing queue monitoring -- Task status indicators and progress tracking -- Automatic status polling -- Error handling and display -- Task history and management - -### Pesticide Prescriptions View -- Spray map functionality with interactive grid -- Color-coded spray level selection -- Bulk apply options for spray levels -- Grid initialization based on prescriptions -- Prescription metadata display - -## 🎨 Color Palette - -```css -/* Primary Red Colors */ -primary-500: #dc2626 /* Main red */ -primary-400: #f87171 /* Light red */ -primary-600: #b91c1c /* Dark red */ - -/* Dark Theme Colors */ -dark-900: #0f172a /* Background */ -dark-800: #1e293b /* Cards */ -dark-700: #334155 /* Borders */ -dark-600: #475569 /* Text secondary */ -dark-300: #cbd5e1 /* Text primary */ -``` - -## 📱 Responsive Breakpoints - -- **Mobile**: < 768px -- **Tablet**: 768px - 1024px -- **Desktop**: > 1024px -- **Large Desktop**: > 1280px - -## 🔧 Available Scripts - -- `npm start` - Runs the app in development mode -- `npm build` - Builds the app for production -- `npm test` - Launches the test runner -- `npm eject` - Ejects from Create React App (one-way operation) - -## 🚀 Development Workflow - -1. **Component Development**: Create new components in `src/components/` -2. **Styling**: Use Tailwind classes with custom red/black theme -3. **State Management**: Currently using React useState (can be upgraded to Redux/Zustand) -4. **API Integration**: Complete backend integration via `src/services/api.ts` -5. **Type Safety**: TypeScript types defined in `src/types/` directory -6. **Backend Communication**: API service handles all backend requests with error handling - -## 🔮 Future Enhancements - -- Field maps backend integration -- Pesticide prescription backend integration -- Advanced gallery filters and sorting -- Image annotation tools -- Offline support -- Keyboard shortcuts -- Batch operations for tasks -- Task deletion functionality -- Advanced search and filtering -- User authentication and authorization - -## Sprint 5 Updates - -### New Features / Integrations -- **Deeper pathing integration**: Fields2Cover path generation is integrated into the user workflow for generating and previewing navigation paths. -- **Backend-driven prescription integration (in progress)**: Frontend aligns with new prescription endpoints for status/config/update flows as the pipeline is linked end-to-end. -- **Quality improvements**: Sprint 5 focused on raising confidence via backend unit test coverage and CI; frontend Jest testing is planned next. - -## Sprint 2 Updates - -### New Features -- **Gallery Backend Integration**: Gallery view now fetches and displays real processed tasks from backend -- **PDF Report Viewing**: Full PDF viewing functionality with react-pdf library -- **Task Naming**: Users can name tasks during upload for better organization -- **Enhanced Upload**: Added heading and grid size parameter configuration -- **Spray Map Functionality**: Interactive spray map editing in pesticide prescriptions view -- **Results API Integration**: Complete integration with backend results API -- **Full-Screen Previews**: Lightbox viewer for images and PDF reports -- **Download Functionality**: Download orthophotos and reports directly from gallery - -### Improvements -- Replaced all mock data in Gallery view with real backend data -- Enhanced error handling and user feedback -- Improved loading states and empty state handling -- Better task organization with task names -- Real-time status updates and progress tracking -- Enhanced API service with comprehensive error handling - -## 🤝 Contributing - -1. Follow the existing code style and component structure -2. Use TypeScript for type safety -3. Maintain the red/black theme consistency -4. Test responsive design on multiple screen sizes -5. Add proper error handling and loading states - -## 📄 License - -This project is part of the DroneBasedDevelopment repository. diff --git a/code/frontend/src/components/UploadView.tsx b/code/frontend/src/components/UploadView.tsx index 9c11c69..691b9bd 100644 --- a/code/frontend/src/components/UploadView.tsx +++ b/code/frontend/src/components/UploadView.tsx @@ -102,6 +102,7 @@ const UploadView: React.FC = ({ openSettingsTick }) => { const [isSyncingBoundary, setIsSyncingBoundary] = useState(false); const [uploadError, setUploadError] = useState(null); const [uploadResponse, setUploadResponse] = useState(null); + const [fileUploadProgress, setFileUploadProgress] = useState<{ sent: number; total: number }>({ sent: 0, total: 0 }); const [pathHeading, setPathHeading] = useState(0); const [useDefaultRobotWidth, setUseDefaultRobotWidth] = useState(true); @@ -268,6 +269,7 @@ const UploadView: React.FC = ({ openSettingsTick }) => { setIsUploading(false); return; } + setFileUploadProgress({ sent: 0, total: targets.length }); setUploadFiles((prev) => prev.map((f) => (f.status === 'pending' || f.status === 'error' ? { ...f, status: 'uploading', progress: 0, error: undefined } : f)) @@ -296,6 +298,7 @@ const UploadView: React.FC = ({ openSettingsTick }) => { setUploadFiles((prev) => prev.map((file) => (file.id === uploadFile.id ? { ...file, progress } : file))); }); } + setFileUploadProgress({ sent: fileIdx + 1, total: targets.length }); } const response = await apiService.uploadFinalize(task_id, fileList, fieldName.trim() || undefined); @@ -642,6 +645,25 @@ const UploadView: React.FC = ({ openSettingsTick }) => { ) : null} + {(isUploading || (fileUploadProgress.total > 0 && fileUploadProgress.sent > 0)) && ( +
+
+ Files sent + + {fileUploadProgress.sent} / {fileUploadProgress.total} + +
+
+
0 ? Math.round((fileUploadProgress.sent / fileUploadProgress.total) * 100) : 0}%`, + }} + /> +
+
+ )} + {uploadError ?

{uploadError}

: null} {activeTaskForUpload ? (