vegard
5b3cc1c400
3 oppgaver: MindMap Svelte-komponent med radial layout, BlockShell-panel, og mindmap-trait for samlinger. Feature-spec i docs/features/tankekart.md. Ren frontend-visning av eksisterende grafdata — ingen ny backend. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
108 lines
3.2 KiB
Markdown
108 lines
3.2 KiB
Markdown
# Feature: Tankekart (radial grafvisning)
|
|
|
|
## Konsept
|
|
|
|
Tankekart-panelet viser noder og edges i radial layout — en
|
|
rotnode i sentrum, relaterte noder rundt, edges som linjer.
|
|
Det er kunnskapsgrafen i en annen layout: radial i stedet
|
|
for force-directed.
|
|
|
|
Ingen ny backend. Ingen nye tabeller. Ren frontend-visning
|
|
av eksisterende grafdata via WebSocket.
|
|
|
|
## Brukeropplevelse
|
|
|
|
1. Bruker åpner tankekart-panel i arbeidsflaten
|
|
2. Rotnoden er kontekst-headerens aktive node (eller manuelt valgt)
|
|
3. Relaterte noder (1-2 hopp) hentes og vises radialt
|
|
4. Klikk på en node → den blir ny rot (zoom inn)
|
|
5. Dobbeltklikk → åpne noden i editor/detalj
|
|
6. Drag fra node til node → opprett edge
|
|
7. Drag node ut av kartet → opprett ny node (universell overføring)
|
|
|
|
## Layout
|
|
|
|
```
|
|
┌─ Episode 42
|
|
│
|
|
┌─ Podcast ──── Episode 41
|
|
│ │
|
|
│ └─ Show notes
|
|
│
|
|
Sidelinja ─── Redaksjonen ─── Kanban
|
|
│
|
|
│ ┌─ Vegard
|
|
└─ Team ──┤
|
|
└─ Trond
|
|
```
|
|
|
|
Radial: rot i sentrum, barn i sirkel rundt, barnebarn lenger ut.
|
|
Alternativt: tree-layout (hierarkisk, topp-bunn).
|
|
|
|
## Datakilder
|
|
|
|
- Noder og edges fra WebSocket (sanntid, allerede tilgjengelig)
|
|
- Filtrer på edge-typer: `belongs_to`, `mentions`, `member_of`,
|
|
`source_material` — konfigurerbart per bruker
|
|
- Dybde: 1-3 hopp fra rot (konfigurerbart)
|
|
|
|
## Interaksjon
|
|
|
|
| Handling | Resultat |
|
|
|----------|---------|
|
|
| Klikk node | Ny rotnode (re-layout rundt denne) |
|
|
| Dobbeltklikk | Åpne i editor/detalj |
|
|
| Drag node → node | Opprett edge (mentions) |
|
|
| Drag node → utenfor | Universell overføring |
|
|
| Scroll/pinch | Zoom inn/ut |
|
|
| Drag bakgrunn | Pan |
|
|
| Hover node | Vis tittel + node_kind + antall edges |
|
|
|
|
## Visuell stil
|
|
|
|
- Noder som sirkler/bokser, fargekodet etter `node_kind`
|
|
- Edges som linjer, stiplede for `mentions`, heltrukne for `belongs_to`
|
|
- Rotnode visuelt fremhevet (større, annen farge)
|
|
- Privacy-markering: 🔒 på private noder (se `docs/features/nodereferanser.md`)
|
|
- Animert overgang ved rot-bytte
|
|
|
|
## Trait
|
|
|
|
`mindmap`-trait på samlingsnoder:
|
|
|
|
```jsonc
|
|
{
|
|
"traits": {
|
|
"mindmap": {
|
|
"default_depth": 2,
|
|
"layout": "radial",
|
|
"edge_types": ["belongs_to", "mentions", "source_material"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Også tilgjengelig som frittstående panel i arbeidsflaten
|
|
(uten trait — bare velg en node som rot).
|
|
|
|
## Hva det IKKE er
|
|
|
|
- Ikke et tegneverktøy (det er whiteboard)
|
|
- Ikke fri plassering (det er canvas/arbeidsflaten)
|
|
- Ikke force-directed graf (det er kunnskapsgraf-visningen)
|
|
- Det er en **automatisk layoutet graf med rot** — data-drevet
|
|
|
|
## Teknisk
|
|
|
|
- Svelte-komponent med SVG eller Canvas
|
|
- Layout: `d3-hierarchy` for tree, trigonometri for radial
|
|
- Data fra eksisterende WebSocket-stores
|
|
- BlockShell-panel med fullskjerm/resize
|
|
- Responsivt: på mobil vises som vertikal trevisning
|
|
|
|
## Bygger på
|
|
- `docs/features/canvas_primitiv.md` — pan/zoom
|
|
- `docs/features/kunnskapsgraf_og_relasjoner.md` — grafdata
|
|
- `docs/features/universell_overfoering.md` — drag ut av kart
|
|
- `docs/retninger/interaksjonsmodell.md` — drag-and-drop grammatikk
|
|
- `docs/features/nodereferanser.md` — privacy-markering
|