FrontendSeptember 25, 2025
CaseFlow
Interactive investigation canvas & state model
Engineering Overview & Positioning
An interactive investigation system coordinating heterogeneous clues, spatial organization, graph relationships, editing, history, and JSON export through React Flow state controlled by application-level model hooks.
Data & State Flow Architecture
React Flow Canvas
Nodes, Edges & Spatial Interaction
Model Hooks
State Handlers & Reordering Logic
Snapshot History
Undo & Redo for Nodes and Edges
JSON Export
React Flow State Serialization
Execution Sequence:Canvas Interaction ➔ Model Hook Handler ➔ React Flow State Transformation ➔ Snapshot History & JSON Export
Engineering Focus & Core Themes
- The board as both graph structure and spatial document
- Stable identity preservation while clues move or change container context
- Explicit content variants (text, image, audio, video) using discriminated unions
- Direct manipulation backed by organized state transformations
- Hook-based separation between state transformations and presentational rendering
Key Engineering Trade-offs & Decisions
- Separated stateful model hooks from presentational view components across the canvas and node features
- Modeled clues using Zod discriminated unions ensuring strict type safety across text, image, audio, and video variants
- Engineered custom snapshot-based undo/redo history for node movement, edge changes, and clue reordering
- Optimized React Flow viewport rendering to preserve responsiveness during complex graph interactions
Verified Implementation Evidence
- Drag-and-drop clue reordering within and between visual groups
- Edge creation, target reconnection and deletion, plus inline group-title editing
- Support for four heterogeneous clue variants with React Flow state serialization and JSON export
Verified Technology Stack
- React Flow Canvas
- MVVM-Inspired Structure
- Strict TypeScript
- Zod Discriminated Unions
- Custom Snapshot History
- Memoized Viewport Rendering
- React Flow JSON Export
Project Scope
- Focuses on interactive investigation workflows, spatial clue organization, heterogeneous clue modeling, hook-based Model/View separation, snapshot history, and JSON export.