@cyoda/workflow-viewer 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/components/WorkflowViewer.tsx
-import { useMemo, useState as useState2 } from "react";
+import { useEffect, useMemo, useState as useState2 } from "react";
+import { computeHighlightSet, inspectGraphFocus, projectToGraph } from "@cyoda/workflow-graph";
 
 // src/theme/tokens.ts
 var workflowPalette = {
@@ -125,6 +126,29 @@ function simpleLayout(graph) {
   }
   return { positions, width: maxWidth + 24, height: yCursor };
 }
+function nudgeLabels(items) {
+  const sorted = [...items].sort((a, b) => a.midX - b.midX || a.midY - b.midY);
+  const placed = [];
+  const result = /* @__PURE__ */ new Map();
+  for (const item of sorted) {
+    const { midX } = item;
+    let { midY } = item;
+    const halfW = item.pillW / 2;
+    const halfH = item.pillH / 2;
+    let attempts = 0;
+    while (attempts < 20) {
+      const overlaps = placed.some(
+        (p) => midX + halfW > p.x - p.w / 2 && midX - halfW < p.x + p.w / 2 && midY + halfH > p.y - p.h / 2 && midY - halfH < p.y + p.h / 2
+      );
+      if (!overlaps) break;
+      midY += item.pillH + 4;
+      attempts++;
+    }
+    placed.push({ x: midX, y: midY, w: item.pillW, h: item.pillH });
+    result.set(item.id, { midX, midY });
+  }
+  return result;
+}
 function groupByWorkflow(nodes) {
   const out = /* @__PURE__ */ new Map();
   for (const n of nodes) {
@@ -245,8 +269,7 @@ function laneColor(edge, opts) {
   return e.automated;
 }
 function laneDashArray(edge) {
-  if (edge.disabled) return "3 2";
-  if (edge.isLoopback) return "6 4";
+  if (edge.manual) return "2 4";
   return void 0;
 }
 
@@ -261,9 +284,9 @@ function polylineToPath(points) {
 }
 function computeEdgeGeometry(edge, source, target) {
   const sx = source.x + source.width / 2;
-  const sy = source.y + source.height / 2;
+  const sy = source.y + source.height;
   const tx = target.x + target.width / 2;
-  const ty = target.y + target.height / 2;
+  const ty = target.y;
   if (edge.isSelf) {
     const rightX = source.x + source.width;
     const topY = source.y + source.height / 3;
@@ -299,7 +322,6 @@ function EdgePath({
   const d = route && route.points.length >= 2 ? polylineToPath(route.points) : computeEdgeGeometry(edge, source, target).d;
   const strokeWidth = selected || highlighted ? geometry.edge.strokeWidth + 0.8 : edge.isLoopback ? geometry.edge.loopStrokeWidth : geometry.edge.strokeWidth;
   const opacity = dimmed ? 0.25 : 1;
-  const isManualSolid = edge.manual && !edge.disabled && !edge.isLoopback;
   return /* @__PURE__ */ jsxs(
     "g",
     {
@@ -324,16 +346,6 @@ function EdgePath({
             strokeDasharray: dash,
             markerEnd: `url(#wf-arrow-${colorKey(color)})`
           }
-        ),
-        isManualSolid && /* @__PURE__ */ jsx(
-          "path",
-          {
-            d,
-            fill: "none",
-            stroke: workflowPalette.neutrals.white,
-            strokeWidth: 0.6,
-            pointerEvents: "none"
-          }
         )
       ]
     }
@@ -422,6 +434,7 @@ function StartMarker({ position }) {
   return /* @__PURE__ */ jsx3("g", { "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
     "circle",
     {
+      "data-testid": "start-marker",
       cx,
       cy,
       r,
@@ -437,7 +450,7 @@ function roleCategoryLabel(node) {
   if (node.role === "initial" || node.role === "initial-terminal") return "INITIAL";
   if (node.role === "terminal") return "TERMINAL";
   if (node.category === "MANUAL_REVIEW") return "MANUAL REVIEW";
-  if (node.category === "PROCESSING_STATE") return "PROCESSING STATE";
+  if (node.category === "PROCESSING_STATE") return "PROCESSING";
   return "STATE";
 }
 
@@ -454,7 +467,6 @@ function paletteFor(node) {
 // src/theme/badges.ts
 function badgesFor(summary, flags) {
   const out = [];
-  if (flags.manual) out.push({ key: "manual", label: "Manual" });
   if (summary.processor) {
     if (summary.processor.kind === "single") {
       out.push({ key: "processor", label: summary.processor.name });
@@ -470,11 +482,6 @@ function badgesFor(summary, flags) {
       out.push({ key: "criterion", label: "Criterion" });
     }
   }
-  if (summary.execution?.kind === "sync") {
-    out.push({ key: "execution", label: "SYNC" });
-  } else if (summary.execution?.kind === "asyncSameTx") {
-    out.push({ key: "execution", label: "ASYNC_SAME_TX" });
-  }
   if (flags.disabled) out.push({ key: "disabled", label: "Disabled" });
   return out;
 }
@@ -718,25 +725,47 @@ function pickBadgePalette(key) {
 // src/components/WorkflowViewer.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function WorkflowViewer({
-  graph,
+  graph: graphInput,
+  document,
   layout,
   width = "100%",
   height = "100%",
   selectedId,
   onSelectionChange,
+  surface = "website",
+  layoutMode,
+  viewerLayout,
+  interaction = "hover-highlight",
+  onInspect,
+  showStartMarker = false,
   className
 }) {
+  const graph = useMemo(() => {
+    if (graphInput) return graphInput;
+    if (document) return projectToGraph(document);
+    throw new Error("WorkflowViewer requires either graph or document.");
+  }, [graphInput, document]);
+  const visibleGraph = useMemo(() => {
+    if (showStartMarker) return graph;
+    return {
+      ...graph,
+      nodes: graph.nodes.filter((node) => node.kind !== "startMarker"),
+      edges: graph.edges.filter((edge) => edge.kind !== "startMarker")
+    };
+  }, [graph, showStartMarker]);
+  const graphLayout = typeof layout === "string" ? void 0 : layout;
+  const productLayout = viewerLayout ?? layoutMode ?? (typeof layout === "string" ? layout : void 0) ?? "embedded";
   const effectiveLayout = useMemo(
-    () => layout ?? simpleLayout(graph),
-    [graph, layout]
+    () => normalizeLayoutForVisibleGraph(graphLayout, visibleGraph) ?? simpleLayout(visibleGraph),
+    [graphLayout, visibleGraph]
   );
   const pan = usePanZoom();
   const [internalSelection, setInternalSelection] = useState2(null);
   const [hovered, setHovered] = useState2(null);
   const selection = selectedId ?? internalSelection;
   const stateNodes = useMemo(
-    () => graph.nodes.filter((n) => n.kind === "state"),
-    [graph.nodes]
+    () => visibleGraph.nodes.filter((n) => n.kind === "state"),
+    [visibleGraph.nodes]
   );
   const stateById = useMemo(() => {
     const m = /* @__PURE__ */ new Map();
@@ -744,22 +773,71 @@ function WorkflowViewer({
     return m;
   }, [stateNodes]);
   const transitionEdges = useMemo(
-    () => graph.edges.filter((e) => e.kind === "transition"),
-    [graph.edges]
-  );
-  const highlightSet = useMemo(
-    () => computeHighlightSet(hovered ?? selection, graph.nodes, graph.edges),
-    [hovered, selection, graph.nodes, graph.edges]
+    () => visibleGraph.edges.filter((e) => e.kind === "transition"),
+    [visibleGraph.edges]
   );
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production" || graphLayout) return;
+    const sourceCounts = /* @__PURE__ */ new Map();
+    for (const e of graph.edges) {
+      if (e.kind !== "transition") continue;
+      sourceCounts.set(e.sourceId, (sourceCounts.get(e.sourceId) ?? 0) + 1);
+    }
+    if ([...sourceCounts.values()].some((n) => n > 1)) {
+      console.warn(
+        "[WorkflowViewer] Rendering without an ELK layout \u2014 branching graphs may not look polished. Pass a layout from `layoutGraph()` (@cyoda/workflow-layout) for best results."
+      );
+    }
+  }, [graphLayout, visibleGraph.edges]);
+  const fallbackLabelPositions = useMemo(() => {
+    if (effectiveLayout.edges) return null;
+    const CHAR_W = 6.5;
+    const PILL_H = 24;
+    const items = transitionEdges.flatMap((edge) => {
+      const source = effectiveLayout.positions.get(edge.sourceId);
+      const target = effectiveLayout.positions.get(edge.targetId);
+      if (!source || !target) return [];
+      const { midX, midY } = computeEdgeGeometry(edge, source, target);
+      const pillW = Math.max(40, edge.summary.display.length * CHAR_W + 12);
+      return [{ id: edge.id, midX, midY, pillW, pillH: PILL_H }];
+    });
+    return nudgeLabels(items);
+  }, [effectiveLayout, transitionEdges]);
+  const focusId = hovered ?? selection;
+  const highlightSet = useMemo(() => {
+    if (interaction === "none") return null;
+    if (interaction === "select") {
+      return computeHighlightSet(selection, visibleGraph.nodes, visibleGraph.edges);
+    }
+    return computeHighlightSet(focusId, visibleGraph.nodes, visibleGraph.edges);
+  }, [interaction, focusId, selection, visibleGraph.nodes, visibleGraph.edges]);
   const anythingFocused = highlightSet !== null;
   const handleSelect = (id) => {
+    if (interaction === "none") return;
     setInternalSelection(id);
     onSelectionChange?.(id);
   };
   const handleBackgroundClick = () => {
+    if (interaction === "none") return;
     setInternalSelection(null);
     onSelectionChange?.(null);
   };
+  const handleHoverEnter = (id) => {
+    if (interaction === "hover-highlight" || interaction === "hover-path") {
+      setHovered(id);
+    }
+    if (interaction === "hover-path") {
+      onInspect?.(inspectGraphFocus(visibleGraph, id));
+    }
+  };
+  const handleHoverLeave = () => {
+    if (interaction === "hover-highlight" || interaction === "hover-path") {
+      setHovered(null);
+    }
+    if (interaction === "hover-path") {
+      onInspect?.(null);
+    }
+  };
   return /* @__PURE__ */ jsxs5(
     "svg",
     {
@@ -777,8 +855,12 @@ function WorkflowViewer({
       style: {
         background: workflowPalette.neutrals.white,
         fontFamily: "inherit",
-        userSelect: "none"
+        userSelect: "none",
+        ...productLayout === "fullWidth" ? { display: "block", width: "100%", height: "100%" } : null
       },
+      "data-surface": surface,
+      "data-layout": productLayout,
+      "data-interaction": interaction,
       "data-testid": "workflow-viewer",
       children: [
         /* @__PURE__ */ jsx6(Defs, {}),
@@ -808,8 +890,8 @@ function WorkflowViewer({
                     dimmed: isDimmed,
                     selected: isEdgeSelected,
                     onSelect: handleSelect,
-                    onHoverEnter: setHovered,
-                    onHoverLeave: () => setHovered(null)
+                    onHoverEnter: handleHoverEnter,
+                    onHoverLeave: handleHoverLeave
                   },
                   edge.id
                 );
@@ -819,7 +901,7 @@ function WorkflowViewer({
                 const target = effectiveLayout.positions.get(edge.targetId);
                 if (!source || !target) return null;
                 const route = effectiveLayout.edges?.get(edge.id);
-                const labelPos = route ? { midX: route.labelX, midY: route.labelY } : computeEdgeGeometry(edge, source, target);
+                const labelPos = route ? { midX: route.labelX, midY: route.labelY } : fallbackLabelPositions?.get(edge.id) ?? computeEdgeGeometry(edge, source, target);
                 const isHighlighted = highlightSet?.has(edge.id) ?? false;
                 const isDimmed = anythingFocused && !isHighlighted;
                 return /* @__PURE__ */ jsx6(
@@ -835,13 +917,13 @@ function WorkflowViewer({
                   `label-${edge.id}`
                 );
               }),
-              graph.nodes.map((node) => renderNode(node, effectiveLayout, {
+              visibleGraph.nodes.map((node) => renderNode(node, effectiveLayout, {
                 selection,
                 highlightSet,
                 anythingFocused,
                 onSelect: handleSelect,
-                onHoverEnter: setHovered,
-                onHoverLeave: () => setHovered(null)
+                onHoverEnter: handleHoverEnter,
+                onHoverLeave: handleHoverLeave
               }))
             ]
           }
@@ -850,6 +932,30 @@ function WorkflowViewer({
     }
   );
 }
+function normalizeLayoutForVisibleGraph(layout, graph) {
+  if (!layout) return void 0;
+  const visibleNodeIds = new Set(graph.nodes.map((node) => node.id));
+  const positions = new Map(
+    Array.from(layout.positions.entries()).filter(([nodeId]) => visibleNodeIds.has(nodeId))
+  );
+  const visibleEdgeIds = new Set(graph.edges.map((edge) => edge.id));
+  const edges = layout.edges ? new Map(Array.from(layout.edges.entries()).filter(([edgeId]) => visibleEdgeIds.has(edgeId))) : void 0;
+  return {
+    ...layout,
+    positions,
+    edges,
+    width: computeLayoutBound(positions, "x"),
+    height: computeLayoutBound(positions, "y")
+  };
+}
+function computeLayoutBound(positions, axis) {
+  let max = 0;
+  for (const position of positions.values()) {
+    const bound = axis === "x" ? position.x + position.width : position.y + position.height;
+    if (bound > max) max = bound;
+  }
+  return Math.max(max + 24, 72);
+}
 function renderNode(node, layout, ctx) {
   const pos = layout.positions.get(node.id);
   if (!pos) return null;
@@ -883,29 +989,6 @@ function smallPositionForMarker(pos) {
     height: size
   };
 }
-function computeHighlightSet(focusedId, nodes, edges) {
-  if (!focusedId) return null;
-  const set = /* @__PURE__ */ new Set();
-  set.add(focusedId);
-  const node = nodes.find((n) => n.id === focusedId);
-  if (node) {
-    for (const e of edges) {
-      if (e.kind !== "transition") continue;
-      if (e.sourceId === focusedId || e.targetId === focusedId) {
-        set.add(e.id);
-        set.add(e.sourceId);
-        set.add(e.targetId);
-      }
-    }
-    return set;
-  }
-  const edge = edges.find((e) => e.id === focusedId);
-  if (edge && edge.kind === "transition") {
-    set.add(edge.sourceId);
-    set.add(edge.targetId);
-  }
-  return set;
-}
 export {
   WorkflowViewer,
   simpleLayout