Skip to content

reasoning.md

Latest commit

 

History

History
84 lines (61 loc) · 2.85 KB

reasoning.md

File metadata and controls

84 lines (61 loc) · 2.85 KB

Reasoning & Design Decisions – App Graph Builder

Overview

The goal of this task was to build an interactive, canvas-based graph editor using ReactFlow, with clean state management and a clear separation between UI components and business logic.

The application allows users to:

  • Add and drag nodes on a canvas
  • Connect nodes using edges
  • Select a node and edit its properties via an inspector panel
  • Keep the canvas and inspector in sync reliably

Key Technology Choices

React + Vite + TypeScript

  • Chosen for fast development, strong typing, and modern tooling
  • TypeScript helps catch UI and state mismatches early

ReactFlow (xyflow)

  • Used for rendering the interactive graph canvas
  • Provides built-in support for dragging, connecting nodes, zooming, and fitView
  • Custom logic is layered on top using controlled nodes and edges

Zustand for State Management

  • A centralized store (useGraphStore) manages nodes, edges, and selection state
  • Avoids prop-drilling and keeps the canvas, sidebar, and inspector synchronized
  • Simple, predictable state updates using immutable patterns

Architecture & State Flow

Central Store (useGraphStore)

The global store manages:

  • nodes and edges
  • Selected node ID
  • Node updates (label, status, load, config)
  • ReactFlow callbacks (onNodesChange, onEdgesChange, onConnect)

All graph mutations flow through this store, ensuring a single source of truth.

GraphCanvas

  • Renders the ReactFlow canvas
  • Receives nodes, edges, and callbacks directly from the store
  • Handles user interactions like dragging and connecting nodes

Inspector Panel

  • Reacts to the currently selected node
  • Displays editable fields (name, status, load)
  • Updates node data via store actions
  • Demonstrates controlled inputs and two-way data binding

Sidebar

  • Contains global actions like adding a node and fitting the view
  • Keeps canvas interactions intuitive and discoverable

UI/UX Decisions

  • Inspector is only active when a node is selected to reduce clutter
  • Default node data is provided to avoid empty or invalid states
  • Dashed animated edges help visually distinguish connections
  • Layout keeps canvas as the primary focus with secondary controls on the side

Trade-offs & Constraints

  • Focused on correctness, clarity, and maintainability rather than advanced styling
  • Avoided unnecessary abstractions to keep the code readable
  • Designed to be easily extensible (custom node types, persistence, validation)

Conclusion

This solution demonstrates:

  • Clean separation of concerns
  • Correct usage of ReactFlow as a controlled canvas
  • Thoughtful state management using Zustand
  • Practical UI decisions aligned with real-world graph editors

The architecture is intentionally simple, predictable, and easy to reason about, making it suitable for further extension in production scenarios.