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>
This commit is contained in:
vegard 2026-03-18 16:19:34 +00:00
parent 74ad7d7011
commit 5b3cc1c400
3 changed files with 120 additions and 0 deletions

108
docs/features/tankekart.md Normal file
View file

@ -0,0 +1,108 @@
# 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

View file

@ -44,6 +44,7 @@ declare -A PHASE_DEPS=(
[24]="23"
[25]="24"
[26]="25"
[27]="26"
)
# --- Finn blokkerte faser ---

View file

@ -47,6 +47,7 @@ Fase 22 → Fase 23 (validering — alle faser)
Fase 23 → Fase 24 (orkestrering)
Fase 24 → Fase 25 (web clipper)
Fase 25 → Fase 26 (epost)
Fase 26 → Fase 27 (tankekart)
```
Hvis en oppgave er `[?]` eller `[!]`, hoppes den over — og alle
@ -348,3 +349,13 @@ sidelinja.org, vegard.info) ruter til samme bruker basert på username.
- [ ] 26.5 `synops-mail --receive`: Rust CLI som leser raw epost fra stdin. Sjekk 1: avsender-epost matcher `auth_identities.email`? Sjekk 2: innhold starter med "Kjære vaktmester" (eller konfigurerbar frase)? Begge må matche. Opprett `content`-node i brukerens innboks med epostinnholdet. Alt annet → /dev/null, ingen bounce.
- [ ] 26.6 Domene-alias: `vegard@synops.no`, `vegard@sidelinja.org`, `vegard@vegard.info` ruter alle til samme bruker via username-oppslag i PG. Domenet er irrelevant.
- [ ] 26.7 Utgående varsler: vaktmesteren kan sende epost-varsler til brukere (ny oppgave tildelt, innsendt artikkel godkjent, etc.) via `synops-mail --send`. Konfigurerbart per bruker i metadata.preferences.
## Fase 27: Tankekart — radial grafvisning
Ref: `docs/features/tankekart.md`. Tankekart-panel som viser noder og edges
i radial layout med en rotnode i sentrum. Ingen ny backend — ren frontend-
visning av eksisterende grafdata.
- [ ] 27.1 MindMap Svelte-komponent: radial/tree-layout av noder rundt en rotnode. Hent relaterte noder (1-2 hopp) via WebSocket. d3-hierarchy eller trigonometri for layout. Pan/zoom via canvas-primitiv. Klikk node = ny rot, dobbeltklikk = åpne i editor.
- [ ] 27.2 BlockShell-panel: MindMap som BlockShell-panel i arbeidsflaten med fullskjerm, resize, drag-handle. Rotnode fra kontekst-header. Responsivt.
- [ ] 27.3 MindMap-trait: `mindmap`-trait for samlingsnoder. Vises i trait-velger ved opprettelse. Konfigurasjon: default dybde (1-3 hopp), layout-stil (radial/tree).