# 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