DurableDashboard.Components.Workflow.FlowGraph (DurableDashboard v0.1.0-rc)

Copy Markdown View Source

LiveComponent that wraps the ReactFlow island defined in assets/src/react/flow_graph.tsx (mounted by the JS hook in assets/src/hooks/flow_graph.ts).

Communication contract

  • LV → JS: Initial graph passes through data-graph (JSON in the host element's dataset). Subsequent updates use push_event/3:
    • "<id>:replace" %{graph: %{nodes: [...], edges: [...]}}
    • "<id>:patch-node" %{id: node_id, patch: %{...}} — partial updates for status overlays (defer real wiring to phase 5 polish).
  • JS → LV: step-clicked — fired when the user clicks a step node; payload %{"step_name" => name}. The LC resolves the matching StepExecution from assigns.steps and opens the inspector sheet.

Why a LiveComponent

Each instance owns a graph version + a JS hook id; render-time identity matters. Stateful → LC. Function-component would force every parent LV to track the version assign manually — exactly the duplication we're avoiding.