FlowTree — React Flow + Dagre Tree Studio

A production-ready Vite + React + TypeScript application demonstrating bidirectional transformation between a flat adjacency-list JSON format and React Flow's node/edge schema, with automatic Dagre tree layout and scalable logic separated via custom hooks.

Stack

• @xyflow/react v12 — the modern interactive flowchart library
• dagre — automatic tree layout engine
• uuid — collision-free node ID generation
• Vite + TypeScript + React 18

Getting Started

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open http://localhost:5173 in your browser.

Project Explanation

FlowTree is designed to simplify viewing and editing hierarchical data models. It treats a flat JSON array of objects (with id and parentId) as the source of truth, converting it to interactive UI nodes.

Architecture Highlights

• Custom Hook Logic (useFlow): All React Flow state handlers, layout calculations, node modifications, and synchronizations are wrapped cleanly in a single useFlow hook. This keeps App.tsx highly readable and maintainable.
• Dagre Auto-Layout: Instead of manually managing (x, y) coordinate constraints, node coordinates are inferred via Dagre on load, layout swap, and new node addition.
• Bidirectional Sync: Drag, drop, add, or delete nodes on the canvas, and the JSON sidebar automatically updates. Edit the JSON string in the sidebar, and the nodes redraw themselves.

Key Hooks & Utility Functions

useFlow() — Core application logic

Encapsulates all nodes and edges state and provides callable actions.

import { useFlow } from './hooks/useFlow';

function SequenceViewer() {
  const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useFlow();

  return (
    <ReactFlow 
      nodes={nodes} 
      edges={edges} 
      onNodesChange={onNodesChange} 
      onEdgesChange={onEdgesChange} 
      onConnect={onConnect} 
    />
  );
}

transformToFlow(data: TreeNode[]) — Flatten for UI

Converts your backend's flat adjacency list into React Flow nodes + edges, then runs Dagre to assign precise x/y coordinates for a perfect tree layout.

const { nodes, edges } = transformToFlow([
  { id: '1', name: 'Root',    parentId: null },
  { id: '2', name: 'Child A', parentId: '1'  },
  { id: '3', name: 'Child B', parentId: '1'  },
]);

transformToJSON(nodes, edges) — Serialize for Storage

Reconstructs the original flat format by inspecting edge targets to recover parentId relationships.

const treeData = transformToJSON(nodes, edges);
// → [{ id, name, parentId }, ...]

applyDagreLayout(nodes, edges, direction) — Re-layout

Can be called any time to re-run Dagre. Supports 'TB' (top-down) and 'LR' (left-right).

Features

Feature	Description
Separation of Concerns	Application logic uses useFlow custom hook rather than polluting the component.
Auto-layout	Dagre positions nodes symmetrically on load and after adding nodes
Add nodes	Modal lets you pick a name and parent
Delete nodes	Select a node → press Delete
Connect nodes	Drag from a handle to another node to create an edge
Live JSON panel	Sidebar shows the serialized tree in real-time; supports editing and re-importing
Layout toggle	Switch between top-down and left-right tree orientations
Depth coloring	Nodes are color-coded by depth level

Project Structure

src/
  types.ts                # TreeNode, FlowNodeData interfaces
  utils/
    transform.ts          # transformToFlow, transformToJSON, applyDagreLayout
    sampleData.ts         # Initial demo tree
  hooks/
    useFlow.ts            # Custom hook handling logic, nodes state, and handlers
  components/
    TreeNode.tsx          # Custom RF node with depth-aware styling
    JsonPanel.tsx         # Live serialized JSON viewer/editor
    AddNodeModal.tsx      # Modal for adding nodes
  App.tsx                 # Main layout and tree rendering view
  main.tsx                # Entry React root