Furnic/graph view by nfurfaro · Pull Request #14 · essential-contributions/spec-forest

nfurfaro · 2026-04-02T21:23:07Z

adds back a graph view with different filters and search.

- Remove fitView prop from ReactFlow (was re-fitting on every node update) - Only fitView on initial layout, not on subsequent data changes - Use ref for fitView to avoid effect dependency loop

- Replace ELK layered algorithm with stress (force-directed) - Tighter node spacing, nodes cluster naturally around connections - Remove partition assignment (not needed for stress layout)

- Remove zoom-based adaptive labels (too noisy on dense graphs) - Only show label below the clicked/selected dot - Position detail popover near the clicked node instead of fixed bottom-left

- Use ELK mrtree algorithm for clean hierarchical tree layout - Replace straight edges + arrowheads with smoothstep curves - Remove arrowhead markers for cleaner look - Adaptive spacing based on node count

…tric rings - Replace ELK mrtree with custom radial layout algorithm - BFS from roots assigns depth, nodes placed in concentric rings - Ring spacing adapts to tree depth - Switch to bezier edges for organic curves - Drop elkjs dependency from layout (pure JS now)

- Each parent gets an angular wedge proportional to its subtree size - Children placed within parent's wedge, keeping them close - Fills space more evenly, avoids crossing edges - Straight edges while iterating on layout

…highlights in graph

…esolution

…r, and color modes - nodeRadius from layout overrides entropy-based sizing - isCollapsed shows dashed border ring - colorMode: state (default), children (blue→red by child count), entropy (blue→red by subtree entropy)

… view - Depth pills (1/2/3/4/All) re-layout with maxDepth, collapsed nodes show dashed ring - Color mode toggle: State (default), Children (heatmap by child count), Entropy (heatmap by subtree entropy) - Pass layout-computed nodeRadius, isCollapsed, childCount, subtreeEntropy to DotNode - Edges filtered to only include visible (laid-out) nodes - Removed Re-layout button (depth change auto-relayouts)

- Use fixed base distance per hop (120px) instead of fraction of global radius - Smaller nodes (6-16px radius vs 8-20px) to reduce clutter - More overlap resolution iterations (20) - Children always placed at consistent distance from parent - Larger subtrees get only slight distance bonus (not 3x variation)

- Few children (1-3) stay close (60px), many children (12+) spread wider (150px) - Prevents sparse layouts at depth 1 with few nodes - Prevents cramped layouts at depth 2+ with many siblings

…eters

- Dot sits at top of flex column, use radius for Y offset instead of half height - Fixes edges connecting to wrong point when label is visible

…clicked node

… DotNode

…ructure changes - Use stable fingerprint of node IDs + edge IDs + maxDepth - Polling creates new array references every 2s but same content - Layout only re-runs when nodes/edges are actually added or removed

- 4-stop gradient: deep purple → cyan → yellow → red-orange - Log scaling so leaf nodes (0) are clearly distinct from 1-2 children - Much higher perceptual contrast on dark backgrounds

…ual zoom

…dark red

…llow depths

- Compute maxChildCount and maxSubtreeEntropy from actual data - Pass to DotNode so colors use full gradient range - Use sqrt scaling for perceptual evenness - Fixes entropy heatmap looking uniform when values are in narrow range

…dient spread - Compute min and max of both childCount and subtreeEntropy from dataset - Linear interpolation between min and max ensures full color range used - Fixes all nodes looking the same color when values cluster in narrow range

freesig

Left inline comments on two issues — see threads on GraphView.tsx lines 377 and 133.

freesig · 2026-04-07T00:33:53Z

+        {selectedNode && popoverPos && (
+          <div
+            className="absolute w-72 bg-gray-900 border border-gray-700 rounded-lg shadow-xl p-3 z-50"
+            style={{ left: popoverPos.x + 16, top: popoverPos.y - 8 }}


This popover position isn't clamped to the viewport. If you click a node near the right edge or bottom of the canvas, the 288px-wide popover will overflow off-screen and be partially or fully hidden.

Consider clamping against containerRef.current.getBoundingClientRect() so it stays within bounds — e.g. flip to the left of the cursor when there isn't room on the right, and above when near the bottom.

freesig · 2026-04-07T00:34:03Z

+  searchQuery: string,
+  activeStates: Set<NodeState>,
+): boolean {
+  if (activeStates.size > 0 && !activeStates.has(node.state)) return false


The toggle semantics here can be confusing. When activeStates is empty (no pills toggled), everything is visible. When you toggle one pill (e.g. unanswered), it switches to "show only unanswered" — which hides states you didn't explicitly ask to hide.

Users are more likely to expect subtractive filtering: "I toggled unanswered, so hide unanswered nodes." The current behavior is additive ("show only these"), which is the opposite mental model.

Consider either:

Inverting the logic — pills start active (all on), toggling one OFF fades that state, or

Adding a visual cue (e.g. "Showing only: unanswered") so the current mode is clear.

freesig

A few review comments.

freesig · 2026-04-07T00:34:38Z

+
+export type ColorMode = "state" | "children" | "entropy"
+
+export interface DotNodeData {


STATE_COLORS is duplicated here and in GraphView.tsx. Consider extracting it to a shared constants file (e.g. graph-constants.ts) so they stay in sync.

freesig · 2026-04-07T00:34:38Z

+    const q = searchQuery.toLowerCase()
+    if (!node.question.toLowerCase().includes(q) && !(node.answer?.toLowerCase().includes(q) ?? false)) return false
+  }
+  return true


proOptions={{ hideAttribution: true }} requires a React Flow Pro subscription. If you're on the free tier this flag is silently ignored and may log console warnings. Verify you have a valid license, or remove it and style around the attribution badge.

freesig · 2026-04-07T00:34:38Z

@@ -0,0 +1,425 @@
+import { useState, useCallback, useEffect, useMemo, useRef } from "react"


We have e2e tests in web/e2e/ — would be good to add at least one e2e test that toggles the graph view on/off and verifies basic rendering (canvas appears, a node is visible, switching back to focus view works).

nfurfaro added 30 commits April 2, 2026 11:17

chore: update gitignore

7c00f19

docs: design and impl plans

781ee6b

feat(web): add @xyflow/react and elkjs dependencies

c1beaa7

feat(web): create DotNode custom React Flow node component

fc7f074

feat(web): create ELK graph layout helper

5b76469

feat(web): create GraphView component with React Flow + ELK layout

315ba9f

feat(web): wire GraphView toggle into Workspace header

67fea77

fix(web): prevent graph view from auto-zooming out on interaction

c26bf29

- Remove fitView prop from ReactFlow (was re-fitting on every node update) - Only fitView on initial layout, not on subsequent data changes - Use ref for fitView to avoid effect dependency loop

feat(web): switch graph to stress layout for dense, radial clustering

008ad5e

- Replace ELK layered algorithm with stress (force-directed) - Tighter node spacing, nodes cluster naturally around connections - Remove partition assignment (not needed for stress layout)

fix(web): show labels only on selected node, position popover near click

1a14921

- Remove zoom-based adaptive labels (too noisy on dense graphs) - Only show label below the clicked/selected dot - Position detail popover near the clicked node instead of fixed bottom-left

feat(web): switch to tree layout with smooth edges

c5daf23

- Use ELK mrtree algorithm for clean hierarchical tree layout - Replace straight edges + arrowheads with smoothstep curves - Remove arrowhead markers for cleaner look - Adaptive spacing based on node count

feat(web): wedge-based radial layout to minimize edge crossings

b59d989

- Each parent gets an angular wedge proportional to its subtree size - Children placed within parent's wedge, keeping them close - Fills space more evenly, avoids crossing edges - Straight edges while iterating on layout

fix(web): sync graph selection with outliner — selecting in outliner …

cc53c72

…highlights in graph

feat(web): visually distinguish root nodes with larger size and halo

5e76870

feat(web): organic radial layout with variable distance and overlap r…

ab0a4c0

…esolution

fix(web): adaptive ring distance based on sibling count

7efc5c4

- Few children (1-3) stay close (60px), many children (12+) spread wider (150px) - Prevents sparse layouts at depth 1 with few nodes - Prevents cramped layouts at depth 2+ with many siblings

feat(web): custom RadialEdge with gentle curves clipped at node perim…

e05ff3e

…eters

fix(web): RadialEdge connects to dot center, not wrapper center

45a9ad8

- Dot sits at top of flex column, use radius for Y offset instead of half height - Fixes edges connecting to wrong point when label is visible

fix(web): clear node label on pane click — only show label for graph-…

d393aa0

…clicked node

docs: impl plan

fe49ae4

fix(web): use showLabel (not selected) to control label visibility in…

3c2e370

… DotNode

fix(web): prevent graph flicker from polling — only re-layout when st…

c228a5d

…ructure changes - Use stable fingerprint of node IDs + edge IDs + maxDepth - Polling creates new array references every 2s but same content - Layout only re-runs when nodes/edges are actually added or removed

fix(web): vivid heatmap gradient with log scaling for better contrast

d64a322

- 4-stop gradient: deep purple → cyan → yellow → red-orange - Log scaling so leaf nodes (0) are clearly distinct from 1-2 children - Much higher perceptual contrast on dark backgrounds

fix(web): only fitView on initial load and depth change, preserve man…

5175d48

…ual zoom

fix(web): semantic heatmap gradient — cool blue → purple → magenta → …

2957227

…dark red

fix(web): reduce root node halo glow to avoid giant dark blobs at sha…

c11c448

…llow depths

nfurfaro added 2 commits April 2, 2026 15:21

freesig reviewed Apr 7, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Furnic/graph view#14

Furnic/graph view#14
nfurfaro wants to merge 32 commits into
mainfrom
furnic/graph-view

nfurfaro commented Apr 2, 2026

Uh oh!

freesig left a comment

Uh oh!

freesig Apr 7, 2026

Uh oh!

freesig Apr 7, 2026

Uh oh!

freesig left a comment

Uh oh!

freesig Apr 7, 2026

Uh oh!

freesig Apr 7, 2026

Uh oh!

freesig Apr 7, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		export type ColorMode = "state" \| "children" \| "entropy"

		export interface DotNodeData {

		@@ -0,0 +1,425 @@
		import { useState, useCallback, useEffect, useMemo, useRef } from "react"

Conversation

nfurfaro commented Apr 2, 2026

Uh oh!

freesig left a comment

Choose a reason for hiding this comment

Uh oh!

freesig Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

freesig Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

freesig left a comment

Choose a reason for hiding this comment

Uh oh!

freesig Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

freesig Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

freesig Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

freesig Apr 7, 2026 •

edited

Loading