@principal-ai/subsystems-react 0.42.0 → 0.43.1

package/dist/subsystem/SubsystemComponentGraph.js

@@ -20,7 +20,7 @@ import { ReactFlow, ReactFlowProvider, useReactFlow, useViewport, applyNodeChang
 import { useTheme } from '@principal-ade/industry-theme';
 import { FileText, X } from 'lucide-react';
 import { IndustryMarkdownSlide } from 'themed-markdown';
-import { buildSubsystemGraph, deriveGraphEdges, isConstructsOnlyModel, moduleGroupNodeId, isRelationMechanism, isWalkthroughMechanism, edgeColor, MECHANISM_DESCRIPTIONS, subsystemGraphLayoutKey, walkthroughStepGraphEdgeId, } from './model';
+import { buildSubsystemGraph, deriveGraphEdges, isConstructsOnlyModel, moduleGroupNodeId, isWalkthroughMechanism, edgeColor, MECHANISM_DESCRIPTIONS, subsystemGraphLayoutKey, walkthroughStepGraphEdgeId, } from './model';
 import { ConstructsCatalog } from './ConstructsCatalog';
 import { SubsystemAgentsPanel, } from './AgentsPanel';
 import { MaintainLivePanel, } from '../components/maintain-events/MaintainLivePanel';
@@ -122,14 +122,14 @@ const WalkthroughDrawerContent = memo(function WalkthroughDrawerContent({ render
             onSymbolClick,
         }) }));
 });
-function Inner({ components, relations, walkthroughs, graphifyRelations, orderByLine, initialWalkthroughId, onReorderWalkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, walkthroughFocusDurationMs = 300, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, hideDrawer = false, persistKey, liveEvents, agentsPanel }) {
+function Inner({ components, walkthroughs, graphifyRelations, orderByLine, initialWalkthroughId, onReorderWalkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, moduleNesting, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, walkthroughFocusDurationMs = 300, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, hideDrawer = false, persistKey, liveEvents, agentsPanel }) {
     const { theme } = useTheme();
-    const { fitView, fitBounds } = useReactFlow();
+    const { fitView, fitBounds, screenToFlowPosition } = useReactFlow();
     const viewport = useViewport();
     // Restored once per mount from `localStorage` (see `readViewState`). Each
     // graph is its own tab/mount, so `persistKey` is stable for a mount.
     const persisted = useMemo(() => readViewState(persistKey), [persistKey]);
-    const graphEdges = useMemo(() => deriveGraphEdges({ relations, walkthroughs }), [relations, walkthroughs]);
+    const graphEdges = useMemo(() => deriveGraphEdges({ walkthroughs }), [walkthroughs]);
     const [built, setBuilt] = useState({
         nodes: [],
         edges: [],
@@ -149,6 +149,71 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
     const pendingFocusFitRef = useRef(null);
     // Component the pointer is over (null on leave) → transient tree highlight.
     const [hoveredComponentAlias, setHoveredComponentId] = useState(null);
+    // Boundary frame hovered on the canvas → highlight the matching folder row in
+    // the sidebar file tree, so a frame's place in the repo tree is visible.
+    const [hoveredRegion, setHoveredRegion] = useState(null);
+    const hoveredBoundaryPath = hoveredRegion && (hoveredRegion.kind === 'module' || hoveredRegion.kind === 'directory')
+        ? hoveredRegion.key
+        : null;
+    // Path frames (module / directory) as absolute flow-coord rects, hit-tested
+    // on pointer move. A pointer hit-test keeps the frames' interior hoverable
+    // WITHOUT an overlay that would block edges / child nodes.
+    const pathFrameRects = useMemo(() => {
+        const out = [];
+        for (const n of built.nodes) {
+            if (n.type !== 'subsystem-group')
+                continue;
+            const region = n.data?.region;
+            if (!region?.key || (region.kind !== 'module' && region.kind !== 'directory'))
+                continue;
+            const r = built.absoluteRects.get(n.id);
+            if (!r)
+                continue;
+            out.push({ kind: region.kind, key: region.key, x: r.x, y: r.y, w: r.width, h: r.height });
+        }
+        return out;
+    }, [built.nodes, built.absoluteRects]);
+    useEffect(() => {
+        if (pathFrameRects.length === 0)
+            return;
+        let raf = 0;
+        let last = null;
+        const overCanvas = (e) => e.composedPath().some((el) => el instanceof HTMLElement && el.classList.contains(GRAPH_CANVAS_CLASS));
+        const onMove = (e) => {
+            if (!overCanvas(e)) {
+                last = null;
+                setHoveredRegion((prev) => (prev == null ? prev : null));
+                return;
+            }
+            last = { x: e.clientX, y: e.clientY };
+            if (raf)
+                return;
+            raf = window.requestAnimationFrame(() => {
+                raf = 0;
+                if (!last)
+                    return;
+                const p = screenToFlowPosition(last);
+                let best = null;
+                let bestArea = Number.POSITIVE_INFINITY;
+                for (const f of pathFrameRects) {
+                    if (p.x >= f.x && p.x <= f.x + f.w && p.y >= f.y && p.y <= f.y + f.h) {
+                        const area = f.w * f.h;
+                        if (area < bestArea) {
+                            bestArea = area;
+                            best = { kind: f.kind, key: f.key };
+                        }
+                    }
+                }
+                setHoveredRegion((prev) => prev?.kind === best?.kind && prev?.key === best?.key ? prev : best);
+            });
+        };
+        window.addEventListener('mousemove', onMove);
+        return () => {
+            window.removeEventListener('mousemove', onMove);
+            if (raf)
+                cancelAnimationFrame(raf);
+        };
+    }, [pathFrameRects, screenToFlowPosition]);
     // Walkthrough focus — selected flow (or step) is full strength; other
     // opened-flow members stay visible but dimmed; everything else is hidden.
     // Restored from the persisted view state when a `persistKey` is set.
@@ -165,24 +230,19 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
     const [sidebarView, setSidebarView] = useState(() => persisted.sidebarView ?? (walkthroughs?.length ? 'walkthroughs' : 'files'));
     // Diagnostics area tab: issues list vs the Maintain agent pipeline.
     const [diagnosticsTab, setDiagnosticsTab] = useState(() => persisted.diagnosticsTab ?? 'issues');
-    // Temporary edge-vocabulary override. Focusing a relation finding whose edge
-    // belongs to the *other* vocabulary flips the canvas so the edge is actually
-    // visible; it reverts when the focus is undone (see `unfocusIssueTarget`) or
-    // when the diagnostics list closes. Null = use the host-pinned / tab view.
-    const [edgeViewOverride, setEdgeViewOverride] = useState(null);
-    // One edge vocabulary at a time. When the caller doesn't pick, the sidebar's
-    // Files / Walkthroughs tab picks: Files draws topology relation edges,
+    // One edge source at a time. When the caller doesn't pick, the sidebar's
+    // Files / Walkthroughs tab picks: Files draws graphify static edges,
     // Walkthroughs draws runtime hop edges. Without visible tabs (no walkthroughs,
-    // or a sidebar-less embed) fall back to the model: a flow-only graph defaults
-    // to walkthrough edges rather than empty, everything else to relations.
+    // or a sidebar-less embed) fall back to walkthrough edges.
     const sidebarTabsVisible = !hideSidebar && (walkthroughs?.length ?? 0) > 0;
-    const resolvedEdgeView = edgeViewOverride ??
-        edgeView ??
+    const resolvedEdgeView = edgeView ??
         (sidebarTabsVisible
-            ? (sidebarView === 'walkthroughs' ? 'walkthroughs' : 'relations')
-            : relations.length === 0 && (walkthroughs?.length ?? 0) > 0
+            ? (sidebarView === 'walkthroughs' ? 'walkthroughs' : 'graphify')
+            : (walkthroughs?.length ?? 0) > 0
                 ? 'walkthroughs'
-                : 'relations');
+                : (graphifyRelations?.length ?? 0) > 0
+                    ? 'graphify'
+                    : 'walkthroughs');
     // Walkthrough flows the user has expanded (via the title row). Closed by
     // default so a graph with several flows doesn't dump every step list at once.
     // Restored from the persisted view state when a `persistKey` is set.
@@ -381,13 +441,11 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
     // Pass 1: build with estimated widths so React Flow can measure the DOM.
     // The pane stays hidden until Pass 2 completes. Key off layout-affecting
     // fields only — declarationRef updates after verify must not re-run ELK.
-    const layoutKey = useMemo(() => subsystemGraphLayoutKey({ components, relations, walkthroughs, graphifyRelations }), [components, relations, walkthroughs, graphifyRelations]);
+    const layoutKey = useMemo(() => subsystemGraphLayoutKey({ components, walkthroughs, graphifyRelations }), [components, walkthroughs, graphifyRelations]);
     const componentsRef = useRef(components);
-    const relationsRef = useRef(relations);
     const walkthroughsRef = useRef(walkthroughs);
     const graphifyRelationsRef = useRef(graphifyRelations);
     componentsRef.current = components;
-    relationsRef.current = relations;
     walkthroughsRef.current = walkthroughs;
     graphifyRelationsRef.current = graphifyRelations;
     // Track measured dimensions from React Flow's dimension changes.
@@ -406,13 +464,13 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         pass2GenRef.current += 1;
         const doc = {
             components: componentsRef.current,
-            relations: relationsRef.current,
             walkthroughs: walkthroughsRef.current,
         };
         void buildSubsystemGraph(doc, {
             maxNodeWidth,
             showEdgeLabels,
             showSingletonFrames,
+            moduleNesting,
             graphifyRelations: graphifyRelationsRef.current,
             orderByLine,
         })
@@ -438,7 +496,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
             setLayoutReady(true);
         });
         return () => { alive = false; };
-    }, [layoutKey, maxNodeWidth, showEdgeLabels]);
+    }, [layoutKey, maxNodeWidth, showEdgeLabels, moduleNesting]);
     // Pass 2: once every leaf node has a measured dimension, re-run ELK.
     // Group parents are sized by ELK, not measured — exclude them or pass 2
     // would wait forever for dimensions that never arrive.
@@ -465,7 +523,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         const measuredWidths = new Map(leafNodes.map((n) => [n.id, dims.get(n.id).width]));
         const measuredHeights = new Map(leafNodes.map((n) => [n.id, dims.get(n.id).height]));
         const gen = ++pass2GenRef.current;
-        void buildSubsystemGraph({ components, relations, walkthroughs }, { maxNodeWidth, showEdgeLabels, measuredWidths, measuredHeights, showSingletonFrames, graphifyRelations, orderByLine })
+        void buildSubsystemGraph({ components, walkthroughs }, { maxNodeWidth, showEdgeLabels, measuredWidths, measuredHeights, showSingletonFrames, moduleNesting, graphifyRelations, orderByLine })
             .then(({ nodes, edges: e, absoluteRects }) => {
             if (gen !== pass2GenRef.current)
                 return;
@@ -479,7 +537,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
             // Reveal Pass 1 layout rather than leaving the cover up forever.
             setLayoutReady(true);
         });
-    }, [built.nodes, components, relations, walkthroughs, graphifyRelations, orderByLine, maxNodeWidth, showEdgeLabels]);
+    }, [built.nodes, components, walkthroughs, graphifyRelations, orderByLine, maxNodeWidth, showEdgeLabels, moduleNesting]);
     // After Pass 1 commits, try Pass 2 immediately with retained measurements.
     // Same-id live updates often get no new React Flow `dimensions` events, so
     // waiting only on onNodesChange leaves the cover stuck.
@@ -559,7 +617,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
     const baseEdges = convertedEdges;
     // Resolve an issue's component target to the matching node. `id` is the
     // stable alias; `label` may be an alias, name, or symbol. Non-component
-    // targets (relation / module / flow / repo) have no single node → null.
+    // targets (module / flow / repo) have no single node → null.
     const issueComponent = useCallback((issue) => {
         const target = issue.target;
         if (target?.kind !== 'component')
@@ -569,26 +627,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
             c.name === target.label ||
             c.symbol === target.label) ?? null);
     }, [components]);
-    // Resolve a `relation` issue target to the display edge it flags. The target
-    // names the two endpoints (`from → to`); match an edge joining both, in
-    // either direction, preferring the target's `detail` mechanism when it names
-    // one. Null when no display edge matches.
-    const issueEdge = useCallback((issue) => {
-        const target = issue.target;
-        if (target?.kind !== 'relation')
-            return null;
-        const parts = `${target.id ?? ''} → ${target.label}`
-            .split('→')
-            .map((p) => p.replace(/\(\)$/, '').trim())
-            .filter(Boolean);
-        const joins = (e) => parts.includes(e.source) && parts.includes(e.target);
-        const matches = baseEdges.filter(joins);
-        const byMechanism = target.detail
-            ? matches.filter((e) => e.data?.mechanism ===
-                target.detail)
-            : matches;
-        return byMechanism[0] ?? matches[0] ?? null;
-    }, [baseEdges]);
     // A `module` issue target names a boundary frame, so focusing the card frames
     // that region on the canvas. Null when the target names no frame (a singleton
     // dropped from the layout, or a region key nothing declares).
@@ -692,7 +730,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
     // the canvas keeps while everything else dims. Derived from each finding's
     // target:
     //   component   → that node
-    //   relation    → the edge it flags (+ its two endpoint nodes)
     //   module      → every component in that module
     //   walkthrough → the flow's nodes + its hop edges
     //   repo        → every component of that repo
@@ -717,23 +754,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
                 if (a)
                     nodeIds.add(a);
             }
-            else if (t.kind === 'relation') {
-                // The target names the two endpoints (`from → to`); light the edge and
-                // its endpoints. Falls back to endpoints alone if no edge matches.
-                const edge = issueEdge(issue);
-                if (edge) {
-                    edgeIds.add(edge.id);
-                    nodeIds.add(edge.source);
-                    nodeIds.add(edge.target);
-                }
-                else {
-                    for (const part of `${t.id ?? ''} → ${t.label}`.split('→')) {
-                        const a = resolveAlias(part);
-                        if (a)
-                            nodeIds.add(a);
-                    }
-                }
-            }
             else if (t.kind === 'module') {
                 const key = t.id ?? t.label;
                 const prefix = `${key.replace(/\/$/, '')}/`;
@@ -773,7 +793,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
                 edgeIds.add(e.id);
         }
         return { nodeIds, edgeIds };
-    }, [issues, expandedIssueCategories, components, walkthroughs, baseEdges, resolveAlias, issueEdge]);
+    }, [issues, expandedIssueCategories, components, walkthroughs, resolveAlias]);
     const issueFocusNodeIds = issueFocus?.nodeIds ?? null;
     const issueFocusEdgeIds = issueFocus?.edgeIds ?? null;
     // When an edge is selected, dim every other edge + its label to focus it.
@@ -1016,13 +1036,13 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
             };
         };
         // Edges outside the selected view are hidden entirely (labels included).
-        // graphify-native edges belong to the relations view (they are static
+        // graphify-native edges belong to the graphify view (they are static
         // topology, not runtime hops) regardless of their verb.
         const edgeInView = (e) => {
             const d = e.data;
             const mechanism = d?.mechanism ?? 'uses';
-            if (resolvedEdgeView === 'relations') {
-                return d?.provenance === 'graphify' || isRelationMechanism(mechanism);
+            if (resolvedEdgeView === 'graphify') {
+                return d?.provenance === 'graphify';
             }
             return isWalkthroughMechanism(mechanism);
         };
@@ -1103,7 +1123,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         setSelectedEdgeId(null);
         setFocusedWalkthroughId(null);
         setFocusedStepIndex(null);
-        setEdgeViewOverride(null);
         issueModuleFocusRef.current = null;
     }, []);
     // Sidebar file trees — one per repo on multi-repo graphs, each under its
@@ -1123,7 +1142,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
     useEffect(() => {
         if (!issuesActive) {
             setExpandedIssueCategories([]);
-            setEdgeViewOverride(null);
         }
     }, [issuesActive]);
     const toggleIssues = () => {
@@ -1551,9 +1569,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         if (playable.length === 0)
             return;
         // Only run the cycles that can actually be shown in the current edge view.
-        const inView = playable.filter((tl) => tl.steps.some((s) => resolvedEdgeView === 'relations'
-            ? isRelationMechanism(s.mechanism)
-            : isWalkthroughMechanism(s.mechanism)));
+        const inView = playable.filter((tl) => tl.steps.some((s) => isWalkthroughMechanism(s.mechanism)));
         if (inView.length === 0)
             return;
         const cyc = inView;
@@ -1706,15 +1722,13 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         onSelect?.(comp.alias);
     }, [components, onSelect]);
     // Issue click → select + frame the target on the canvas. Component targets
-    // frame their node; relation targets frame their edge (endpoints + the routed
-    // line); other kinds (module / flow / repo) have no single element and just
-    // forward. Selections / focus that would hide the target are cleared first,
-    // then the camera flies to it on the next frame. The host's `onSelectIssue`
-    // still fires afterwards for its own detail.
+    // frame their node; other kinds (module / flow / repo) have no single element
+    // and just forward. Selections / focus that would hide the target are cleared
+    // first, then the camera flies to it on the next frame. The host's
+    // `onSelectIssue` still fires afterwards for its own detail.
     const focusIssueTarget = useCallback((issue) => {
         const comp = issueComponent(issue);
-        const edge = comp ? null : issueEdge(issue);
-        const step = comp || edge ? null : issueStep(issue);
+        const step = comp ? null : issueStep(issue);
         if (comp) {
             setSelected(comp);
             setSelectedEdgeId(null);
@@ -1733,24 +1747,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
                 });
             });
         }
-        else if (edge) {
-            setSelected(null);
-            setFocusedWalkthroughId(null);
-            setFocusedStepIndex(null);
-            setHoveredWalkthroughStep(null);
-            setSelectedEdgeId(edge.id);
-            issueModuleFocusRef.current = null;
-            // Flip to the vocabulary this edge belongs to, so a hop flagged in the
-            // relations view (or vice versa) is actually drawn while focused.
-            const d = edge.data;
-            const mechanism = d?.mechanism ?? 'uses';
-            setEdgeViewOverride(d?.provenance === 'graphify' || isRelationMechanism(mechanism)
-                ? 'relations'
-                : 'walkthroughs');
-            requestAnimationFrame(() => {
-                fitFocusBounds(new Set([edge.id]));
-            });
-        }
         else if (step) {
             // A step finding focuses the step itself, through the same entry point
             // the walkthrough panel uses — so the drawer, the step numbering, the
@@ -1778,14 +1774,12 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         onSelectIssue?.(issue);
     }, [
         issueComponent,
-        issueEdge,
         issueStep,
         issueModuleNodeId,
         focusWalkthroughStep,
         onSelect,
         onSelectIssue,
         fitView,
-        fitFocusBounds,
         fitNodeRects,
     ]);
     // Collapsing the issue card again undoes the focus: drop the node / edge
@@ -1803,16 +1797,9 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
             setSelectedEdgeId(null);
         }
         else {
-            const edge = issueEdge(issue);
-            const step = edge ? null : issueStep(issue);
-            const moduleNodeId = edge || step ? null : issueModuleNodeId(issue);
-            if (edge) {
-                if (selectedEdgeIdRef.current !== edge.id)
-                    return;
-                setSelectedEdgeId(null);
-                setEdgeViewOverride(null);
-            }
-            else if (step) {
+            const step = issueStep(issue);
+            const moduleNodeId = step ? null : issueModuleNodeId(issue);
+            if (step) {
                 // Only unwind a step focus this card still owns. A dim-mode graph
                 // keeps its step focus in hover state instead (owned by the pointer,
                 // not the card), and correctly leaves that alone here.
@@ -1838,7 +1825,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         requestAnimationFrame(() => {
             fitView({ padding: 0.1, duration: 300, minZoom: 0.05, maxZoom: 2 });
         });
-    }, [issueComponent, issueEdge, issueStep, issueModuleNodeId, fitView]);
+    }, [issueComponent, issueStep, issueModuleNodeId, fitView]);
     // Construct tokens inside a walkthrough snippet. A step's line is an edge
     // between its `from`/`to` components, so a token naming either of those
     // constructs should navigate to that construct's declaration. Index the
@@ -2037,7 +2024,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 borderTop: i > 0 ? `1px solid ${theme.colors.border}` : undefined,
-                                            }, children: [repoGroups.multiRepo && (_jsx(RepoGroupHeader, { group: group, collapsed: collapsed, onToggle: () => toggleRepoCollapsed(groupKey) })), !collapsed && (_jsx(SubsystemFileTree, { files: group.entries.map((e) => e.displayPath), selectedFile: selected?.file ?? openFile, hoveredFile: hoveredFile, onSelectFile: onTreeSelectFile, headerless: repoGroups.multiRepo }))] }, groupKey));
+                                            }, children: [repoGroups.multiRepo && (_jsx(RepoGroupHeader, { group: group, collapsed: collapsed, onToggle: () => toggleRepoCollapsed(groupKey) })), !collapsed && (_jsx(SubsystemFileTree, { files: group.entries.map((e) => e.displayPath), selectedFile: selected?.file ?? openFile, hoveredFile: hoveredFile, onSelectFile: onTreeSelectFile, hoveredFolder: hoveredBoundaryPath, headerless: repoGroups.multiRepo }))] }, groupKey));
                                     }) })) : null] })) }))] })), !hideSidebar && (title || description || diagnostic || issuesActive || sidebarExtra || sidebarAfterDescription || treeFilePaths.length > 0 || hasWalkthroughs) && (_jsx("div", { onMouseDown: onSidebarResizeStart, "aria-label": "Resize sidebar", title: "Drag to resize", style: {
                     width: 3,
                     flexShrink: 0,
@@ -2326,7 +2313,6 @@ export function SubsystemComponentGraph(props) {
     }, []);
     const constructsOnly = isConstructsOnlyModel({
         components: props.components,
-        relations: props.relations,
         walkthroughs: props.walkthroughs,
         graphifyRelations: props.graphifyRelations,
     });