feat: React Flow migration for flow editor canvas #82

2026-02-19T02:48:18Z

chihlasm commented

2026-02-19 02:48:18 +00:00

(Migrated from github.com)

Summary

Replace hand-built CSS flexbox tree canvas with @xyflow/react for zoom/pan, dagre auto-layout, collapsible minimap, and side-panel node editing
Add compact custom node cards (decision/action/solution + answer stub with inline type picker) and a 400px right-side NodeEditorPanel that reuses existing form components
Wire into TreeEditorLayout/TreeEditorPage with single-panel-at-a-time rule (node editor vs metadata panel) and dark theme CSS overrides

New Files

frontend/src/lib/dagreLayout.ts — pure dagre layout utility
frontend/src/components/tree-editor/FlowCanvas.tsx — main React Flow canvas
frontend/src/components/tree-editor/FlowCanvasNode.tsx — compact node card
frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx — answer stub card
frontend/src/components/tree-editor/NodeEditorPanel.tsx — right-side editing panel
frontend/src/components/tree-editor/useTreeLayout.ts — tree-to-ReactFlow conversion hook

Modified Files

TreeEditorLayout.tsx — Flow mode uses FlowCanvas + NodeEditorPanel
TreeEditorPage.tsx — panel state management, single-panel-at-a-time
index.ts (barrel) — new component exports
index.css — React Flow dark theme overrides

Test Plan

Open any troubleshooting tree in Flow mode → React Flow canvas with nodes
Ctrl+scroll zooms, click+drag pans, scroll pans vertically
Click node → right panel opens with correct form, canvas shrinks
Edit + Save → node card updates; Cancel discards changes
Delete node → removed, edges cleaned up
Collapse/expand chevron hides/shows subtrees
Minimap visible + toggle works
Zoom controls in bottom-left work
Metadata button → metadata panel opens, node editor closes
Switch to Code mode → canvas replaced, node editor closes
Answer stub → click → type picker → pick type → panel opens with form
Publish guard blocks answer stubs
Large tree renders without overlap

🤖 Generated with Claude Code

## Summary - Replace hand-built CSS flexbox tree canvas with @xyflow/react for zoom/pan, dagre auto-layout, collapsible minimap, and side-panel node editing - Add compact custom node cards (decision/action/solution + answer stub with inline type picker) and a 400px right-side NodeEditorPanel that reuses existing form components - Wire into TreeEditorLayout/TreeEditorPage with single-panel-at-a-time rule (node editor vs metadata panel) and dark theme CSS overrides ## New Files - `frontend/src/lib/dagreLayout.ts` — pure dagre layout utility - `frontend/src/components/tree-editor/FlowCanvas.tsx` — main React Flow canvas - `frontend/src/components/tree-editor/FlowCanvasNode.tsx` — compact node card - `frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx` — answer stub card - `frontend/src/components/tree-editor/NodeEditorPanel.tsx` — right-side editing panel - `frontend/src/components/tree-editor/useTreeLayout.ts` — tree-to-ReactFlow conversion hook ## Modified Files - `TreeEditorLayout.tsx` — Flow mode uses FlowCanvas + NodeEditorPanel - `TreeEditorPage.tsx` — panel state management, single-panel-at-a-time - `index.ts` (barrel) — new component exports - `index.css` — React Flow dark theme overrides ## Test Plan - [ ] Open any troubleshooting tree in Flow mode → React Flow canvas with nodes - [ ] Ctrl+scroll zooms, click+drag pans, scroll pans vertically - [ ] Click node → right panel opens with correct form, canvas shrinks - [ ] Edit + Save → node card updates; Cancel discards changes - [ ] Delete node → removed, edges cleaned up - [ ] Collapse/expand chevron hides/shows subtrees - [ ] Minimap visible + toggle works - [ ] Zoom controls in bottom-left work - [ ] Metadata button → metadata panel opens, node editor closes - [ ] Switch to Code mode → canvas replaced, node editor closes - [ ] Answer stub → click → type picker → pick type → panel opens with form - [ ] Publish guard blocks answer stubs - [ ] Large tree renders without overlap 🤖 Generated with [Claude Code](https://claude.com/claude-code)

railway-app[bot] commented

2026-02-19 02:48:36 +00:00

(Migrated from github.com)

🚅 Deployed to the patherly-pr-82 environment in selfless-grace

Service	Status	Web	Updated (UTC)
hopeful-liberation	✅ Success (View Logs)	Web	Feb 19, 2026 at 5:32 am
patherly	✅ Success (View Logs)	Web	Feb 19, 2026 at 5:31 am

🚅 Deployed to the [patherly-pr-82](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134?environmentId=3e75e7da-f4bb-4b8d-917b-801887d098c1) environment in **[selfless-grace](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134)** | **Service** | **Status** | **Web** | **Updated** (UTC) | | :--- | :--- | :--- | :--- | | hopeful-liberation | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/e1db2ee3-d241-4f45-abe4-c9c5fdf483d5?id=8589a3ff-140a-46b4-b50b-66a33a9303a7&environmentId=3e75e7da-f4bb-4b8d-917b-801887d098c1)) | [Web](https://hopeful-liberation-patherly-pr-82.up.railway.app) | Feb 19, 2026 at 5:32 am | | patherly | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/95f556ff-5264-4116-a0c2-618a2fc53ba4?id=b8391c31-28ad-4b97-a4ed-29db868b1448&environmentId=3e75e7da-f4bb-4b8d-917b-801887d098c1)) | [Web](https://patherly-patherly-pr-82.up.railway.app) | Feb 19, 2026 at 5:31 am |

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: chihlasm/resolutionflow#82