vegard 5b3cc1c400 Legg til fase 27: tankekart — radial grafvisning

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>

2026-03-18 16:19:34 +00:00

3.2 KiB

Raw Blame History

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

Bruker åpner tankekart-panel i arbeidsflaten
Rotnoden er kontekst-headerens aktive node (eller manuelt valgt)
Relaterte noder (1-2 hopp) hentes og vises radialt
Klikk på en node → den blir ny rot (zoom inn)
Dobbeltklikk → åpne noden i editor/detalj
Drag fra node til node → opprett edge
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:

{
  "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

3.2 KiB Raw Blame History