Spaces:
Running on CPU Upgrade
Running on CPU Upgrade
File size: 3,501 Bytes
61d29fc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | # Open Navigator - Frontend
React + TypeScript web interface for the Open Navigator application.
## Projects
### Main Application
React + TypeScript web interface with maps, charts, and data visualization.
**Location:** `frontend/` (this directory)
### Policy Accountability Dashboards
Evidence-based accountability dashboards for policy advocacy.
**Location:** `frontend/policy-dashboards/`
**Documentation:** [Policy Dashboards README](policy-dashboards/README.md)
## Tech Stack
- **React 18.2** - UI framework
- **TypeScript** - Type safety
- **Vite** - Build tool
- **Tailwind CSS** - Styling
- **React Router** - Navigation
- **TanStack Query** - Data fetching
- **Recharts** - Charts
- **Leaflet** - Interactive maps
## Development
```bash
# Install dependencies
npm install
# Run dev server (hot reload)
npm run dev
# Opens http://localhost:3000
# Build for production
npm run build
# Outputs to ../api/static/
# Type check
npm run type-check
# Lint
npm run lint
```
## Project Structure
```
src/
├── components/
│ └── Layout.tsx # Main layout with sidebar
├── pages/
│ ├── Dashboard.tsx # Statistics and charts
│ ├── Heatmap.tsx # Interactive map
│ ├── Documents.tsx # Document browser
│ ├── Opportunities.tsx # Opportunity manager
│ └── Settings.tsx # Configuration
├── App.tsx # Root component with routing
├── main.tsx # Entry point
└── index.css # Global styles
```
## Pages
### Dashboard (`/`)
- Total documents, opportunities, states monitored
- Topic distribution charts (bar and pie)
- Recent opportunities table
### Heatmap (`/heatmap`)
- Interactive Leaflet map
- Color-coded urgency markers
- State and topic filters
- Popup details
### Documents (`/documents`)
- Searchable document list
- Pagination
- Topic tags
- Source links
### Opportunities (`/opportunities`)
- Filterable by urgency
- Generate advocacy emails
- Talking points display
- Confidence scores
### Settings (`/settings`)
- Target state selection
- Policy topic configuration
- Notification preferences
- Agent status monitoring
## Environment
The frontend proxies API requests to the backend:
```typescript
// vite.config.ts
server: {
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
},
},
}
```
## Building
Production builds are output to `../api/static/` so the FastAPI backend can serve them:
```typescript
// vite.config.ts
build: {
outDir: '../api/static',
emptyOutDir: true,
}
```
## Styling
Uses Tailwind CSS with custom utility classes:
```css
/* index.css */
.card { @apply bg-white rounded-lg shadow-md p-6; }
.btn-primary { @apply bg-primary-600 hover:bg-primary-700 text-white ... }
.btn-secondary { @apply bg-gray-200 hover:bg-gray-300 text-gray-800 ... }
```
## Data Fetching
Uses TanStack Query for server state management:
```typescript
const { data, isLoading } = useQuery({
queryKey: ['opportunities', state, topic],
queryFn: async () => {
const response = await axios.get('/api/opportunities', { params: { state, topic } })
return response.data
},
})
```
## Deployment
The built frontend is automatically included when deploying to Databricks Apps:
```bash
# Build frontend
npm run build
# Deploy entire app
cd ..
./scripts/deploy-databricks-app.sh
```
## License
Apache License 2.0 - See LICENSE file for details
|