Egutierrez
881a1b9716
Frontend web de lectura del vault osint + agenda/calendario Xandikos. - Stack: React 19 + Vite 6 + TypeScript + Mantine v9 (React 19 obligatorio para que Mantine v9 monte). Grafo con sigma v3 + graphology + forceatlas2 en web worker. Markdown con react-markdown, calendario con @mantine/dates. - AppShell con navbar de 4 secciones + botón global de refresco (POST /api/refresh). - GraphView: force-directed, color por tipo, tamaño por grado, panel lateral con toggles de tipo + dangling + buscador (centra el nodo). Guard de WebGL: si el navegador no lo expone, avisa en vez de crashear. - TablesView: una pestaña por tipo, tabla ordenable/filtrable con columnas del frontmatter. Click en fila -> ficha. - NodeCard (modal): frontmatter clave-valor (fechas europeas), cuerpo Markdown, galería de imágenes con lightbox, PDFs/docs como enlace, wikilinks navegables. - ContactsView: agenda con buscador + detalle (teléfonos, correos, bloque osint, nota). CalendarView: mini-calendario con días marcados + eventos agrupados por día (hora local). - Vite proxya /api -> 127.0.0.1:8470. Verificado end-to-end contra el backend real: 1199 nodos / 618 aristas, 539 personas en tabla, 1064 contactos, 98 eventos; grafo renderiza con WebGL y NodeCard abre con frontmatter+body. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
75 lines
3.8 KiB
Markdown
75 lines
3.8 KiB
Markdown
# Frontend de osint_web
|
|
|
|
Frontend web local del explorador OSINT. Lee el backend FastAPI (`../server/main.py`,
|
|
escucha solo en `127.0.0.1:8470`) y ofrece cinco vistas de lectura sobre el vault
|
|
de Obsidian `osint` + la agenda/calendario del servidor Xandikos.
|
|
|
|
## Stack
|
|
|
|
- **React 19 + Vite 6 + TypeScript + Mantine v9**. Mantine v9 exige React 19 (con
|
|
React 18 compila pero no monta — error "s is not a function"); por eso el
|
|
`package.json` pina React 19. Iconos de `@tabler/icons-react`. Theming con
|
|
`createTheme()` (`src/theme.ts`), sin Tailwind ni CSS variables custom (regla
|
|
`frontend_theming.md`).
|
|
- **Grafo**: `sigma` (v3) + `graphology` + `graphology-layout-forceatlas2` (las
|
|
únicas deps fuera de Mantine; KISS). Layout force-directed en un **web worker**
|
|
(no bloquea la UI con 1199 nodos), pausable.
|
|
- **Markdown** de las fichas con `react-markdown`. **Calendario** con
|
|
`@mantine/dates` (que usa `dayjs`).
|
|
- Vite proxya `/api` → `http://127.0.0.1:8470` en dev (sobrescribible con
|
|
`VITE_API_BASE`).
|
|
|
|
## Vistas
|
|
|
|
| Vista | Archivo | Endpoint(s) | Qué muestra |
|
|
|---|---|---|---|
|
|
| **Grafo** | `src/views/GraphView.tsx` | `GET /api/graph`, `GET /api/search` | sigma.js force-directed; color por `tipo`, tamaño por grado; panel lateral con toggles de tipos + dangling + buscador (centra el nodo). Click en nodo → ficha. Layout pausable + reset de cámara. |
|
|
| **Tablas** | `src/views/TablesView.tsx` | `GET /api/graph`, `GET /api/nodes?tipo=` | una pestaña por tipo real; `Table` Mantine con columnas deducidas del frontmatter, ordenable y filtrable. Click en fila → ficha. |
|
|
| **Ficha** | `src/views/NodeCard.tsx` | `GET /api/node/<slug>`, `GET /api/attachment` | modal: frontmatter clave-valor (fechas europeas DD/MM/AAAA), cuerpo Markdown, galería de imágenes con lightbox, documentos/PDFs como enlace, wikilinks navegables. |
|
|
| **Contactos** | `src/views/ContactsView.tsx` | `GET /api/contacts` | agenda: lista + buscador (nombre/alias/tel/email); detalle con teléfonos, correos, bloque `osint` (dni/país/sexo…) y nota. |
|
|
| **Calendario** | `src/views/CalendarView.tsx` | `GET /api/calendar` | mini-calendario `@mantine/dates` con punto en días con eventos + lista de eventos del mes/día agrupados por fecha (hora local, lugar, descripción). |
|
|
|
|
Botón global **Refrescar** (header) → `POST /api/refresh` + recarga de la vista activa.
|
|
|
|
## Arrancar (dev)
|
|
|
|
Necesitas backend + frontend a la vez:
|
|
|
|
```bash
|
|
# Terminal 1 — backend (escucha solo en 127.0.0.1)
|
|
cd projects/osint/apps/osint_web
|
|
.venv/bin/python server/main.py --vault /home/enmanuel/Obsidian/osint --port 8470
|
|
|
|
# Terminal 2 — frontend
|
|
cd projects/osint/apps/osint_web/frontend
|
|
pnpm install # primera vez
|
|
pnpm dev # http://127.0.0.1:5173
|
|
```
|
|
|
|
Abrir **http://127.0.0.1:5173**. El proxy de Vite reenvía `/api` al backend, así
|
|
que no hay que tocar CORS. Solo localhost (datos sensibles del vault: DNIs, fotos).
|
|
|
|
## Build
|
|
|
|
```bash
|
|
cd projects/osint/apps/osint_web/frontend
|
|
pnpm install
|
|
pnpm build # tsc -b && vite build → dist/
|
|
```
|
|
|
|
### Gotcha pnpm 10/11 (esbuild)
|
|
|
|
pnpm bloquea por seguridad los scripts de build de dependencias. `esbuild` (el
|
|
bundler nativo de Vite) necesita su `postinstall`. El `pnpm-workspace.yaml` lo
|
|
permite con `allowBuilds: { esbuild: true }`. Si `pnpm build` falla con
|
|
"esbuild ... was not found", ejecuta `pnpm rebuild esbuild`.
|
|
|
|
## Notas
|
|
|
|
- **Grafo sin WebGL**: si el navegador no expone WebGL (headless sin GPU), la vista
|
|
Grafo muestra un aviso en vez de crashear; el resto de la app sigue funcionando.
|
|
- **Contactos/Calendario** dependen del servidor Xandikos: si no responde, esas dos
|
|
vistas muestran un aviso naranja y el grafo/tablas siguen operativos (offline).
|
|
- Las fechas se presentan en **europeo** (`src/format.ts`): ISO de Obsidian
|
|
`2026-06-07` → `07/06/2026`; iCal `20220829T133000Z` → hora local `15:30`.
|