Wissensgraph: Live-Simulation wie Obsidian + Regler für Kräfte und Größen #123

New Issue

fable-5 · 2026-07-15T10:53:59+02:00

fable-5 commented

2026-07-15 10:53:59 +02:00

UI-Überarbeitung (Stefans Feedback nach dem Vault-Import-Test mit echtem Vault: unübersichtliches Knäuel, statisches Verhalten)

Heute rechnet ForceGraph das Layout einmalig synchron (tick(250), dann eingefroren); Ziehen verschiebt nur den einen Knoten, Nachbarn reagieren nicht. Knotengröße und Schriftgröße sind hart kodiert.

Änderungen:

Live-Simulation: persistente d3-force-Simulation; Ziehen pinnt den Knoten (fx/fy) und reheatet (alphaTarget) → Nachbarn ziehen mit, alles pendelt aus (wichtig auch für Playwright-Stabilität). SVG + data-testids/Klassen bleiben (e2e-Vertrag).
Regler auf der Graph-Seite: Anziehung, Abstoßung, Knotengröße, Schriftgröße; persistent je Teich (ui.graph.settings.<pondId> via usePersistentState) + Zurücksetzen.
Lokaler Graph (Seiten-Panel, #113): gleiche Live-Simulation, übernimmt die Regler-Werte des großen Graphen (keine eigenen Regler); die Hop-Buttons „Direkte Nachbarn/Zwei Ebenen" werden durch einen Schieberegler 1–5 ersetzt.
graph.spec: Slider-Bedienung + Wirkung der Regler pinnen.

**UI-Überarbeitung** (Stefans Feedback nach dem Vault-Import-Test mit echtem Vault: unübersichtliches Knäuel, statisches Verhalten) Heute rechnet `ForceGraph` das Layout einmalig synchron (`tick(250)`, dann eingefroren); Ziehen verschiebt nur den einen Knoten, Nachbarn reagieren nicht. Knotengröße und Schriftgröße sind hart kodiert. **Änderungen:** - **Live-Simulation:** persistente d3-force-Simulation; Ziehen pinnt den Knoten (fx/fy) und reheatet (`alphaTarget`) → Nachbarn ziehen mit, alles pendelt aus (wichtig auch für Playwright-Stabilität). SVG + data-testids/Klassen bleiben (e2e-Vertrag). - **Regler** auf der Graph-Seite: Anziehung, Abstoßung, Knotengröße, Schriftgröße; persistent je Teich (`ui.graph.settings.<pondId>` via usePersistentState) + Zurücksetzen. - **Lokaler Graph** (Seiten-Panel, #113): gleiche Live-Simulation, übernimmt die Regler-Werte des großen Graphen (keine eigenen Regler); die Hop-Buttons „Direkte Nachbarn/Zwei Ebenen" werden durch einen **Schieberegler 1–5** ersetzt. - graph.spec: Slider-Bedienung + Wirkung der Regler pinnen.

fable-5 added this to the M14 — UI-Überarbeitung nach Vault-Import-Test milestone 2026-07-15 10:53:59 +02:00

fable-5 added the

frontend

label 2026-07-15 10:53:59 +02:00

fable-5 referenced this issue from a commit

2026-07-15 11:30:33 +02:00

Knowledge graph: live Obsidian-like simulation with tunable physics

fable-5 closed this issue

2026-07-15 11:30:33 +02:00

fable-5 commented

2026-07-15 11:43:44 +02:00

Erledigt in 1781f12.

Live-Simulation: die d3-force-Simulation bleibt am Leben — React rendert die SVG-Struktur (testids/Klassen = e2e-Vertrag unverändert), jeder Tick schreibt Positionen imperativ in Element-Refs (kein React-Re-Render pro Frame, bis zur 500er-Kappe). Ziehen pinnt den Knoten (fx/fy) und reheatet (alphaTarget(0.3)) → Nachbarn ziehen mit; Loslassen löst den Pin, alles pendelt aus (alpha-Decay 0.04 → Ruhe nach ~2 s, wichtig für Playwrights Stabilitäts-Wartezeit). Klick (ohne Drag) öffnet weiter die Seite, Phantom-Klick legt weiter Seiten an. Bestehende Positionen überleben Daten-Refreshs (Phantom→Seite ruckelt nur, statt neu zu würfeln). Schwaches forceX/forceY-Homing hält lose Komponenten im Bild.
Regler auf der Graph-Seite: Anziehung (Link-Stärke relativ zum d3-Default), Abstoßung (many-body), Knotengröße, Schriftgröße + Zurücksetzen; persistent je Teich (ui.graph.settings.<pondId>, innere Komponente keyed by pond.id wegen der #108-usePersistentState-Falle).
Lokaler Graph: gleiche Live-Physik, übernimmt die Regler-Werte des großen Graphen (keine eigenen Slider); die Hop-Buttons sind ein Umkreis-Slider 1–5.
Nebenfund: Playwright-Klicks trafen die ungemalte Lücke zwischen Punkt und Label (Bounding-Box-Mitte) — jeder Knoten hat jetzt eine unsichtbare Hit-Fläche (r = nodeRadius+12), die auch Nutzern das Greifen erleichtert.

graph-Pack (inkl. neuer Regler-Assertions + Slider-Bedienung) 3× flaky-frei lokal, CI grün auf 1781f12.

Erledigt in `1781f12`. - **Live-Simulation:** die d3-force-Simulation bleibt am Leben — React rendert die SVG-Struktur (testids/Klassen = e2e-Vertrag unverändert), jeder Tick schreibt Positionen imperativ in Element-Refs (kein React-Re-Render pro Frame, bis zur 500er-Kappe). Ziehen pinnt den Knoten (`fx/fy`) und reheatet (`alphaTarget(0.3)`) → Nachbarn ziehen mit; Loslassen löst den Pin, alles pendelt aus (alpha-Decay 0.04 → Ruhe nach ~2 s, wichtig für Playwrights Stabilitäts-Wartezeit). Klick (ohne Drag) öffnet weiter die Seite, Phantom-Klick legt weiter Seiten an. Bestehende Positionen überleben Daten-Refreshs (Phantom→Seite ruckelt nur, statt neu zu würfeln). Schwaches forceX/forceY-Homing hält lose Komponenten im Bild. - **Regler** auf der Graph-Seite: Anziehung (Link-Stärke relativ zum d3-Default), Abstoßung (many-body), Knotengröße, Schriftgröße + Zurücksetzen; persistent je Teich (`ui.graph.settings.<pondId>`, innere Komponente keyed by pond.id wegen der #108-usePersistentState-Falle). - **Lokaler Graph:** gleiche Live-Physik, übernimmt die Regler-Werte des großen Graphen (keine eigenen Slider); die Hop-Buttons sind ein **Umkreis-Slider 1–5**. - **Nebenfund:** Playwright-Klicks trafen die ungemalte Lücke zwischen Punkt und Label (Bounding-Box-Mitte) — jeder Knoten hat jetzt eine unsichtbare Hit-Fläche (`r = nodeRadius+12`), die auch Nutzern das Greifen erleichtert. graph-Pack (inkl. neuer Regler-Assertions + Slider-Bedienung) 3× flaky-frei lokal, CI grün auf `1781f12`.

fable-5 referenced this issue

2026-07-15 14:34:44 +02:00

Gesamtgraph: Box auf Viewport-Höhe begrenzen — Mausrad-Zoom scrollt die Seite mit #131

Sign in to join this conversation.