@principal-ai/principal-view-react 0.14.4 → 0.14.6

package/dist/utils/elkLayout.js

@@ -0,0 +1,281 @@
+/**
+ * ELK (Eclipse Layout Kernel) Layout Utility
+ *
+ * Provides sophisticated edge routing with orthogonal (circuit-board style) paths
+ * that don't overlap and run parallel to each other.
+ */
+import ELK from 'elkjs/lib/elk.bundled.js';
+// Create ELK instance lazily to avoid issues in test environments
+let elkInstance = null;
+function getElkInstance() {
+    if (!elkInstance) {
+        elkInstance = new ELK();
+    }
+    return elkInstance;
+}
+/**
+ * Convert bend points to SVG path string
+ * @public Exported for testing
+ */
+export function pointsToPath(points) {
+    if (points.length === 0)
+        return '';
+    if (points.length === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        path += ` L ${points[i].x} ${points[i].y}`;
+    }
+    return path;
+}
+/**
+ * Convert bend points to smooth orthogonal path with rounded corners
+ * @public Exported for testing
+ */
+export function pointsToSmoothPath(points, cornerRadius = 8) {
+    if (points.length === 0)
+        return '';
+    if (points.length === 1)
+        return `M ${points[0].x} ${points[0].y}`;
+    if (points.length === 2) {
+        return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+    }
+    let path = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length - 1; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        const next = points[i + 1];
+        // Calculate distances
+        const d1 = Math.sqrt(Math.pow(curr.x - prev.x, 2) + Math.pow(curr.y - prev.y, 2));
+        const d2 = Math.sqrt(Math.pow(next.x - curr.x, 2) + Math.pow(next.y - curr.y, 2));
+        // Limit corner radius to half the shorter segment
+        const maxRadius = Math.min(d1, d2) / 2;
+        const radius = Math.min(cornerRadius, maxRadius);
+        if (radius < 1) {
+            // Too short for curve, just draw line
+            path += ` L ${curr.x} ${curr.y}`;
+            continue;
+        }
+        // Calculate direction vectors
+        const dir1 = { x: (curr.x - prev.x) / d1, y: (curr.y - prev.y) / d1 };
+        const dir2 = { x: (next.x - curr.x) / d2, y: (next.y - curr.y) / d2 };
+        // Calculate arc start and end points
+        const arcStart = {
+            x: curr.x - dir1.x * radius,
+            y: curr.y - dir1.y * radius,
+        };
+        const arcEnd = {
+            x: curr.x + dir2.x * radius,
+            y: curr.y + dir2.y * radius,
+        };
+        // Draw line to arc start, then quadratic curve to arc end
+        path += ` L ${arcStart.x} ${arcStart.y}`;
+        path += ` Q ${curr.x} ${curr.y} ${arcEnd.x} ${arcEnd.y}`;
+    }
+    // Final line to last point
+    const last = points[points.length - 1];
+    path += ` L ${last.x} ${last.y}`;
+    return path;
+}
+/**
+ * Calculate the midpoint of a path for label positioning
+ * @public Exported for testing
+ */
+export function calculatePathMidpoint(points) {
+    if (points.length === 0)
+        return { x: 0, y: 0 };
+    if (points.length === 1)
+        return points[0];
+    // Calculate total path length
+    let totalLength = 0;
+    const segmentLengths = [];
+    for (let i = 1; i < points.length; i++) {
+        const len = Math.sqrt(Math.pow(points[i].x - points[i - 1].x, 2) + Math.pow(points[i].y - points[i - 1].y, 2));
+        segmentLengths.push(len);
+        totalLength += len;
+    }
+    // Find midpoint
+    const targetLength = totalLength / 2;
+    let currentLength = 0;
+    for (let i = 0; i < segmentLengths.length; i++) {
+        if (currentLength + segmentLengths[i] >= targetLength) {
+            // Midpoint is on this segment
+            const remaining = targetLength - currentLength;
+            const ratio = remaining / segmentLengths[i];
+            return {
+                x: points[i].x + (points[i + 1].x - points[i].x) * ratio,
+                y: points[i].y + (points[i + 1].y - points[i].y) * ratio,
+            };
+        }
+        currentLength += segmentLengths[i];
+    }
+    // Fallback to last point
+    return points[points.length - 1];
+}
+/**
+ * Get ELK layout options based on configuration
+ */
+function getElkOptions(options) {
+    const { routingStyle = 'orthogonal', nodeSpacing = 50, edgeSpacing = 8, edgeNodeSpacing = 10, direction = 'RIGHT', } = options;
+    const baseOptions = {
+        'elk.algorithm': 'layered',
+        'elk.direction': direction,
+        'elk.spacing.nodeNode': String(nodeSpacing),
+        'elk.spacing.edgeEdge': String(edgeSpacing),
+        'elk.spacing.edgeNode': String(edgeNodeSpacing),
+        'elk.layered.spacing.edgeEdgeBetweenLayers': String(edgeSpacing),
+        'elk.layered.spacing.edgeNodeBetweenLayers': String(edgeNodeSpacing),
+    };
+    // Set edge routing style
+    switch (routingStyle) {
+        case 'orthogonal':
+            baseOptions['elk.edgeRouting'] = 'ORTHOGONAL';
+            break;
+        case 'splines':
+            baseOptions['elk.edgeRouting'] = 'SPLINES';
+            break;
+        case 'polyline':
+            baseOptions['elk.edgeRouting'] = 'POLYLINE';
+            break;
+    }
+    return baseOptions;
+}
+/**
+ * Compute ELK layout for nodes and edges
+ *
+ * @param nodes - xyflow nodes
+ * @param edges - xyflow edges
+ * @param options - Layout options
+ * @returns Layout result with edge paths
+ */
+export async function computeElkLayout(nodes, edges, options = {}) {
+    const { preserveNodePositions = true } = options;
+    // Convert nodes to ELK format - simple, no ports
+    const elkNodes = nodes.map((node) => {
+        const width = node.measured?.width ?? node.width ?? 200;
+        const height = node.measured?.height ?? node.height ?? 100;
+        return {
+            id: node.id,
+            width,
+            height,
+            x: node.position.x,
+            y: node.position.y,
+        };
+    });
+    // Convert edges to ELK format - simple node references
+    const elkEdges = edges.map((edge) => ({
+        id: edge.id,
+        sources: [edge.source],
+        targets: [edge.target],
+    }));
+    // Create ELK graph
+    const elkGraph = {
+        id: 'root',
+        layoutOptions: getElkOptions(options),
+        children: elkNodes,
+        edges: elkEdges,
+    };
+    // Run ELK layout
+    const layoutedGraph = await getElkInstance().layout(elkGraph);
+    // Build a map of original node positions (what we passed in)
+    const originalPositions = new Map();
+    for (const node of elkNodes) {
+        originalPositions.set(node.id, { x: node.x ?? 0, y: node.y ?? 0 });
+    }
+    // Build a map of ELK-computed node positions
+    const elkPositions = new Map();
+    if (layoutedGraph.children) {
+        for (const child of layoutedGraph.children) {
+            elkPositions.set(child.id, { x: child.x ?? 0, y: child.y ?? 0 });
+        }
+    }
+    // Extract results
+    const edgePaths = new Map();
+    const edgeLabelPositions = new Map();
+    // Process edges
+    if (layoutedGraph.edges) {
+        for (const edge of layoutedGraph.edges) {
+            if (edge.sections && edge.sections.length > 0) {
+                // Get source and target nodes for this edge
+                const sourceId = edges.find(e => e.id === edge.id)?.source;
+                const targetId = edges.find(e => e.id === edge.id)?.target;
+                // Calculate offset needed to translate from ELK positions to original positions
+                // We need to figure out which node each point is closest to and offset accordingly
+                const sourceOriginal = sourceId ? originalPositions.get(sourceId) : null;
+                const sourceElk = sourceId ? elkPositions.get(sourceId) : null;
+                const targetOriginal = targetId ? originalPositions.get(targetId) : null;
+                const targetElk = targetId ? elkPositions.get(targetId) : null;
+                // Collect all points from sections
+                const allPoints = [];
+                for (const section of edge.sections) {
+                    allPoints.push(section.startPoint);
+                    if (section.bendPoints) {
+                        allPoints.push(...section.bendPoints);
+                    }
+                    allPoints.push(section.endPoint);
+                }
+                // If preserving positions, we need to offset the edge points
+                // The edge path is relative to ELK's layout, so we translate it
+                if (preserveNodePositions && sourceOriginal && sourceElk && targetOriginal && targetElk) {
+                    // Calculate the offset from ELK space to original space
+                    // For the start point, use source node offset
+                    // For the end point, use target node offset
+                    // For middle points, interpolate based on x position
+                    const sourceOffset = {
+                        x: sourceOriginal.x - sourceElk.x,
+                        y: sourceOriginal.y - sourceElk.y,
+                    };
+                    const targetOffset = {
+                        x: targetOriginal.x - targetElk.x,
+                        y: targetOriginal.y - targetElk.y,
+                    };
+                    // Get the x-range of the path for interpolation
+                    const minX = Math.min(...allPoints.map(p => p.x));
+                    const maxX = Math.max(...allPoints.map(p => p.x));
+                    const xRange = maxX - minX || 1;
+                    // Offset each point - interpolate between source and target offset based on x position
+                    for (let i = 0; i < allPoints.length; i++) {
+                        const t = (allPoints[i].x - minX) / xRange; // 0 at source, 1 at target
+                        allPoints[i] = {
+                            x: allPoints[i].x + sourceOffset.x + (targetOffset.x - sourceOffset.x) * t,
+                            y: allPoints[i].y + sourceOffset.y + (targetOffset.y - sourceOffset.y) * t,
+                        };
+                    }
+                }
+                // Convert to path
+                const path = options.routingStyle === 'orthogonal'
+                    ? pointsToSmoothPath(allPoints, 8)
+                    : pointsToPath(allPoints);
+                edgePaths.set(edge.id, path);
+                // Calculate label position
+                const labelPos = calculatePathMidpoint(allPoints);
+                edgeLabelPositions.set(edge.id, labelPos);
+            }
+        }
+    }
+    // Process nodes (update positions if not preserving)
+    const resultNodes = preserveNodePositions
+        ? nodes
+        : nodes.map((node) => {
+            const elkNode = layoutedGraph.children?.find((n) => n.id === node.id);
+            if (elkNode && elkNode.x !== undefined && elkNode.y !== undefined) {
+                return {
+                    ...node,
+                    position: { x: elkNode.x, y: elkNode.y },
+                };
+            }
+            return node;
+        });
+    return {
+        nodes: resultNodes,
+        edgePaths,
+        edgeLabelPositions,
+    };
+}
+/**
+ * Hook-friendly version that returns a layout function
+ */
+export function createElkLayouter(options = {}) {
+    return (nodes, edges) => computeElkLayout(nodes, edges, options);
+}
+//# sourceMappingURL=elkLayout.js.map

package/dist/utils/elkLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elkLayout.js","sourceRoot":"","sources":["../../src/utils/elkLayout.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/principal-view-react",
-  "version": "0.14.4",
+  "version": "0.14.6",
   "description": "React components for graph-based principal view framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@xyflow/react": "12.0.0",
+    "elkjs": "^0.11.1",
     "hast-util-sanitize": "^5.0.2",
     "highlight.js": "^11.11.1",
     "js-yaml": "4.1.1",
@@ -31,12 +32,12 @@
   },
   "peerDependencies": {
     "@principal-ade/industry-theme": "^0.1.7",
-    "@principal-ai/principal-view-core": "^0.25.0",
+    "@principal-ai/principal-view-core": "^0.26.5",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@principal-ai/principal-view-core": "0.25.0",
+    "@principal-ai/principal-view-core": "0.26.5",
     "@principal-ade/industry-theme": "0.1.7",
     "@storybook/addon-docs": "10.1.2",
     "@storybook/addon-links": "10.1.2",

package/src/components/GraphRenderer.tsx

@@ -7,7 +7,6 @@ import React, {
   useRef,
   useImperativeHandle,
   forwardRef,
-  createContext,
 } from 'react';
 import {
   ReactFlow,
@@ -59,6 +58,7 @@ import {
   convertToXYFlowNodes,
   convertToXYFlowEdges,
 } from '../utils/graphConverter';
+import { useElkLayout, applyElkPathsToEdges } from '../hooks/useElkLayout';
 import {
   getCanvasBounds,
   calculateInitialViewport,
@@ -66,13 +66,10 @@ import {
 } from '../utils/canvasBounds';
 import { GraphEditProvider } from '../contexts/GraphEditContext';
 import { useUndoRedo, type HistoryEntry } from '../hooks/useUndoRedo';
+import { TooltipPortalContext } from '../contexts/TooltipPortalContext';
 
-/**
- * Context for providing a portal target for tooltips.
- * This allows tooltips to be rendered within the graph container
- * instead of document.body, so they hide properly when tabs switch.
- */
-export const TooltipPortalContext = createContext<HTMLElement | null>(null);
+// Re-export for backwards compatibility
+export { TooltipPortalContext };
 
 /** Position change event for tracking node movements */
 export interface NodePositionChange {
@@ -277,6 +274,35 @@ interface GraphRendererBaseProps {
    */
   containerHeight?: number;
 
+  /**
+   * ELK layout configuration for circuit-board style edge routing.
+   * When enabled, edges are routed with orthogonal paths that don't overlap.
+   */
+  elkLayout?: {
+    /**
+     * Whether ELK layout is enabled
+     * @default false
+     */
+    enabled: boolean;
+    /**
+     * Edge routing style
+     * - 'orthogonal': Circuit-board style with 90-degree angles (default)
+     * - 'splines': Smooth curved edges
+     * - 'polyline': Straight line segments
+     */
+    routingStyle?: 'orthogonal' | 'splines' | 'polyline';
+    /**
+     * Minimum spacing between parallel edges in pixels
+     * @default 15
+     */
+    edgeSpacing?: number;
+    /**
+     * Spacing between edges and nodes in pixels
+     * @default 20
+     */
+    edgeNodeSpacing?: number;
+  };
+
 }
 
 /** GraphRenderer props - canvas format only */
@@ -535,6 +561,13 @@ interface GraphRendererInnerProps {
   onCopy?: (selectedNodeIds: string[]) => void;
   /** Pre-calculated initial viewport to avoid zoom animation on mount */
   initialViewport?: Viewport;
+  /** ELK layout configuration for circuit-board style edge routing */
+  elkLayout?: {
+    enabled: boolean;
+    routingStyle?: 'orthogonal' | 'splines' | 'polyline';
+    edgeSpacing?: number;
+    edgeNodeSpacing?: number;
+  };
 }
 
 /**
@@ -575,6 +608,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
   onNodeDragStop: onNodeDragStopProp,
   onCopy,
   initialViewport,
+  elkLayout,
 }) => {
   const { fitView, fitBounds, getNodes } = useReactFlow();
   const updateNodeInternals = useUpdateNodeInternals();
@@ -2151,31 +2185,52 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
     });
   }, [edges, configuration, violations, animationState.edgeAnimations, showTooltips, selectedEdgeIds, shiftKeyPressed, activeNodeIds, hiddenNodeIds]);
 
+  // ELK layout for circuit-board style edge routing
+  const { edgePaths: elkEdgePaths, edgeLabelPositions: elkLabelPositions } = useElkLayout(
+    xyflowNodesBase,
+    xyflowEdgesBase,
+    {
+      enabled: elkLayout?.enabled ?? false,
+      routingStyle: elkLayout?.routingStyle ?? 'orthogonal',
+      edgeSpacing: elkLayout?.edgeSpacing ?? 5,
+      edgeNodeSpacing: elkLayout?.edgeNodeSpacing ?? 10,
+      preserveNodePositions: true,
+    }
+  );
+
+  // Apply ELK paths to edges when ELK layout is enabled
+  const xyflowEdgesWithElk = useMemo(() => {
+    if (!elkLayout?.enabled || elkEdgePaths.size === 0) {
+      return xyflowEdgesBase;
+    }
+    return applyElkPathsToEdges(xyflowEdgesBase, elkEdgePaths, elkLabelPositions);
+  }, [elkLayout?.enabled, xyflowEdgesBase, elkEdgePaths, elkLabelPositions]);
+
   // Local xyflow edges state for reconnection
-  const [xyflowLocalEdges, setXyflowLocalEdges] = useState<Edge<CustomEdgeData>[]>(xyflowEdgesBase);
+  const [xyflowLocalEdges, setXyflowLocalEdges] = useState<Edge<CustomEdgeData>[]>(xyflowEdgesWithElk);
 
   // Sync when base edges change (structure changes like add/remove)
   const prevBaseEdgesKeyRef2 = useRef(baseEdgesKey);
   useEffect(() => {
     if (prevBaseEdgesKeyRef2.current !== baseEdgesKey) {
       prevBaseEdgesKeyRef2.current = baseEdgesKey;
-      setXyflowLocalEdges(xyflowEdgesBase);
+      setXyflowLocalEdges(xyflowEdgesWithElk);
     }
-  }, [baseEdgesKey, xyflowEdgesBase]);
+  }, [baseEdgesKey, xyflowEdgesWithElk]);
 
   // Set the reset visual state function for use by resetEditState
   // This resets both nodes and edges to their original state
   useEffect(() => {
     resetVisualStateRef.current = () => {
       setXyflowLocalNodes(xyflowNodesBase);
-      setXyflowLocalEdges(xyflowEdgesBase);
+      setXyflowLocalEdges(xyflowEdgesWithElk);
       // Notify parent that changes have been cleared
       onPendingChangesChange?.(false);
     };
-  }, [xyflowNodesBase, xyflowEdgesBase, onPendingChangesChange]);
+  }, [xyflowNodesBase, xyflowEdgesWithElk, onPendingChangesChange]);
 
   // Use local edges in edit mode, base edges otherwise
-  const xyflowEdges = editable ? xyflowLocalEdges : xyflowEdgesBase;
+  const xyflowEdges = editable ? xyflowLocalEdges : xyflowEdgesWithElk;
 
   // Handle edge changes (selection, reconnection, etc.)
   const handleEdgesChange = useCallback(
@@ -2645,6 +2700,7 @@ export const GraphRenderer = forwardRef<GraphRendererHandle, GraphRendererProps>
     height = '100%',
     containerWidth,
     containerHeight,
+    elkLayout,
   } = props;
   const { theme } = useTheme();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -2867,6 +2923,7 @@ export const GraphRenderer = forwardRef<GraphRendererHandle, GraphRendererProps>
             onNodeDragStop={onNodeDragStop}
             onCopy={onCopy}
             initialViewport={initialViewport}
+            elkLayout={elkLayout}
           />
         </ReactFlowProvider>
       </TooltipPortalContext.Provider>

package/src/components/NodeTooltip.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { useTheme } from '@principal-ade/industry-theme';
 import { IndustryMarkdownSlide } from 'themed-markdown';
-import { TooltipPortalContext } from './GraphRenderer';
+import { TooltipPortalContext } from '../contexts/TooltipPortalContext';
 
 export interface OtelInfo {
   kind: 'type' | 'service' | 'instance';

package/src/contexts/TooltipPortalContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+/**
+ * Context for providing a portal target for tooltips.
+ * This allows tooltips to be rendered within the graph container
+ * instead of document.body, so they hide properly when tabs switch.
+ */
+export const TooltipPortalContext = createContext<HTMLElement | null>(null);

package/src/edges/CustomEdge.tsx

@@ -17,6 +17,10 @@ export interface CustomEdgeData extends Record<string, unknown> {
   tooltipsEnabled?: boolean;
   // Whether shift key is currently pressed (for tooltip control)
   shiftKeyPressed?: boolean;
+  // ELK-computed path (circuit-board style routing)
+  elkPath?: string;
+  // ELK-computed label position
+  elkLabelPosition?: { x: number; y: number };
 }
 
 /**
@@ -46,6 +50,8 @@ export const CustomEdge: React.FC<EdgeProps<Edge<CustomEdgeData>>> = ({
     animationDirection = 'forward',
     tooltipsEnabled = true,
     shiftKeyPressed = false,
+    elkPath,
+    elkLabelPosition,
   } = edgeProps || ({} as CustomEdgeData);
 
   const [particlePosition, setParticlePosition] = useState(0);
@@ -77,8 +83,8 @@ export const CustomEdge: React.FC<EdgeProps<Edge<CustomEdgeData>>> = ({
   const color = hasViolations ? '#D0021B' : edgeColor || typeDefinition.color || '#888';
   const width = typeDefinition.width || 2;
 
-  // Get SmoothStep path (orthogonal routing with rounded corners)
-  const [edgePath, labelX, labelY] = getSmoothStepPath({
+  // Get edge path - use ELK path if available, otherwise fall back to SmoothStep
+  const [defaultPath, defaultLabelX, defaultLabelY] = getSmoothStepPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -89,6 +95,11 @@ export const CustomEdge: React.FC<EdgeProps<Edge<CustomEdgeData>>> = ({
     offset: 20,
   });
 
+  // Use ELK-computed path for circuit-board style routing when available
+  const edgePath = elkPath || defaultPath;
+  const labelX = elkLabelPosition?.x ?? defaultLabelX;
+  const labelY = elkLabelPosition?.y ?? defaultLabelY;
+
   // Style based on edge type
   const getStrokeStyle = () => {
     switch (typeDefinition.style) {