fix: align figure layout dimensions

web/apps/console/src/presentation/figures/InteractiveFigure.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent }
 import { ReactFlow, ReactFlowProvider, Handle, Position, useReactFlow, type Node, type Edge, type NodeTypes } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import type { FigureCatalogDefinition, FigureNodeKind } from "./model.js";
-import { layoutFigure, NODE_WIDTH, NODE_HEIGHT, type PositionedFigure } from "./layout.js";
+import { layoutFigure, type FigureLayoutSize, type PositionedFigure } from "./layout.js";
 import { nextFigureNodeId, type FigureDirection } from "./navigation.js";
 import {
   popFigureFocus,
@@ -99,7 +99,7 @@ const InteractiveFigureInner = ({
     () => resolveFigureFocus(catalog, focusPath),
     [catalog, focusPath],
   );
-  const layout = useMemo(() => layoutFigure(focus.figure), [focus.figure]);
+  const layout = useMemo(() => layoutFigure(focus.figure, size), [focus.figure, size]);
   const containerRef = useRef<HTMLDivElement>(null);
   const initialFocusedNodeId = activeNodeId ?? focus.figure.nodes[0]?.id ?? "";
   const [focusedNodeId, setFocusedNodeId] = useState(initialFocusedNodeId);

web/apps/console/src/presentation/figures/interactive-figure.css

@@ -5,6 +5,8 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
+  --figure-node-width: 236px;
+  --figure-node-height: 102px;
 }
 
 .interactive-figure__canvas {
@@ -69,8 +71,8 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
-  width: 236px;
+  width: var(--figure-node-width);
-  height: 102px;
+  height: var(--figure-node-height);
   padding: 10px 14px;
   border: 2px solid oklch(0.75 0.01 65);
   border-radius: 4px;
@@ -117,6 +119,8 @@
 }
 
 .interactive-figure[data-figure-size="stage"] {
+  --figure-node-width: 256px;
+  --figure-node-height: 112px;
   overflow-x: auto;
   overflow-y: hidden;
   padding: 0 0 0.45rem;
@@ -142,8 +146,6 @@
 }
 
 .interactive-figure[data-figure-size="stage"] .figure-node {
-  width: 256px;
-  height: 112px;
   padding: 12px 16px;
 }
 

web/apps/console/src/presentation/figures/layout.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, it } from "vitest";
 import type { FigureDefinition, FigureNodeDefinition } from "./model.js";
-import { layoutFigure, type PositionedFigure } from "./layout.js";
+import {
+  FIGURE_NODE_DIMENSIONS,
+  layoutFigure,
+  type PositionedFigure,
+} from "./layout.js";
 
 const position = (layout: PositionedFigure, nodeId: string) => {
   const node = layout.nodes.find((n) => n.id === nodeId);
@@ -33,6 +37,19 @@ describe("layoutFigure", () => {
     expect(layoutFigure(layeredFigure)).toEqual(layoutFigure(layeredFigure));
     expect(layeredFigure).toEqual(before);
   });
+
+  it("uses stage node dimensions when laying out stage figures", () => {
+    const standard = layoutFigure(flowFigure, "standard");
+    const stage = layoutFigure(flowFigure, "stage");
+
+    const standardDelta = position(standard, "repair").x - position(standard, "discover").x;
+    const stageDelta = position(stage, "repair").x - position(stage, "discover").x;
+
+    expect(FIGURE_NODE_DIMENSIONS.stage).toEqual({ width: 256, height: 112 });
+    expect(stageDelta - standardDelta).toBe(
+      FIGURE_NODE_DIMENSIONS.stage.width - FIGURE_NODE_DIMENSIONS.standard.width,
+    );
+  });
 });
 
 const layeredFigure: FigureDefinition = {

web/apps/console/src/presentation/figures/layout.ts

@@ -15,12 +15,26 @@ export type PositionedFigure = {
   readonly edges: readonly FigureEdgeDefinition[];
 };
 
-export const NODE_WIDTH = 236;
+export type FigureLayoutSize = "standard" | "wide" | "stage";
-export const NODE_HEIGHT = 102;
+
+export const FIGURE_NODE_DIMENSIONS: Record<FigureLayoutSize, {
+  readonly width: number;
+  readonly height: number;
+}> = {
+  standard: { width: 236, height: 102 },
+  wide: { width: 236, height: 102 },
+  stage: { width: 256, height: 112 },
+};
+
+export const NODE_WIDTH = FIGURE_NODE_DIMENSIONS.standard.width;
+export const NODE_HEIGHT = FIGURE_NODE_DIMENSIONS.standard.height;
 const NODESEP = 56;
 const RANKSEP = 88;
 
-export const layoutFigure = (figure: FigureDefinition): PositionedFigure => {
+export const layoutFigure = (
+  figure: FigureDefinition,
+  size: FigureLayoutSize = "standard",
+): PositionedFigure => {
   if (figure.layout.kind === "explicit") {
     const { positions } = figure.layout;
     const nodes: PositionedFigureNode[] = figure.nodes.map((node) => {
@@ -32,10 +46,13 @@ export const layoutFigure = (figure: FigureDefinition): PositionedFigure => {
     });
     return { definition: figure, nodes, edges: figure.edges };
   }
-  return layoutDagre(figure);
+  return layoutDagre(figure, FIGURE_NODE_DIMENSIONS[size]);
 };
 
-const layoutDagre = (figure: FigureDefinition): PositionedFigure => {
+const layoutDagre = (
+  figure: FigureDefinition,
+  dimensions: { readonly width: number; readonly height: number },
+): PositionedFigure => {
   const g = new Dagre.graphlib.Graph();
   g.setGraph({
     rankdir: figure.layout.kind === "flow" ? "LR" : "TB",
@@ -46,7 +63,7 @@ const layoutDagre = (figure: FigureDefinition): PositionedFigure => {
 
   const sortedNodes = [...figure.nodes].sort((a, b) => a.id.localeCompare(b.id));
   for (const node of sortedNodes) {
-    g.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+    g.setNode(node.id, { width: dimensions.width, height: dimensions.height });
   }
 
   const sortedEdges = [...figure.edges].sort((a, b) => a.id.localeCompare(b.id));
@@ -61,8 +78,8 @@ const layoutDagre = (figure: FigureDefinition): PositionedFigure => {
     return {
       ...node,
       position: {
-        x: dagreNode.x - NODE_WIDTH / 2,
+        x: dagreNode.x - dimensions.width / 2,
-        y: dagreNode.y - NODE_HEIGHT / 2,
+        y: dagreNode.y - dimensions.height / 2,
       },
     };
   });