Reduce number of inits: only keep the model that computes it, not the ones that map into the variable

Author: VEZY

frontend/src/App.tsx

@@ -33,6 +33,10 @@ export function DependencyEdge({
     offset: 28,
   });
 
+  if (!data) {
+    return <BaseEdge id={id} path={path} markerEnd={markerEnd} style={style} interactionWidth={18} />;
+  }
+
   const label = data?.label;
   const renamed = data?.sourceVariable && data?.targetVariable && data.sourceVariable !== data.targetVariable;
   const isCallEdge = data?.kind === "hard_dependency" && !data.sourcePort && !data.targetPort;

frontend/src/DependencyEdge.tsx

@@ -1,13 +1,20 @@
 import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
 import { Clock3, GitBranch, Layers3, Link2, PhoneCall } from "lucide-react";
 import type { GraphPort, RuntimeGraphNodeData } from "./types";
+import { nodeWidth } from "./nodeSizing";
 
 type ModelFlowNode = Node<RuntimeGraphNodeData, "model">;
 
 export function ModelNode({ data, selected }: NodeProps<ModelFlowNode>) {
   const cyclic = Boolean(data.cyclic);
+  const dimmed = Boolean(data.dimmed);
+  const focused = Boolean(data.focused);
   return (
-    <section className={`model-node ${data.role} ${cyclic ? "cyclic" : ""} ${selected ? "selected" : ""}`} data-scale={data.scale}>
+    <section
+      className={`model-node ${data.role} ${cyclic ? "cyclic" : ""} ${selected ? "selected" : ""} ${focused ? "focused" : ""} ${dimmed ? "dimmed" : ""}`}
+      data-scale={data.scale}
+      style={{ width: nodeWidth(data) }}
+    >
       <Handle className="call-handle call-target" id={`${data.id}:call-target`} type="target" position={Position.Left} />
       <Handle className="call-handle call-source" id={`${data.id}:call-source`} type="source" position={Position.Right} />
       <header className="node-header">
@@ -41,13 +48,14 @@ export function ModelNode({ data, selected }: NodeProps<ModelFlowNode>) {
 
 function PortColumn({ title, ports, side, data }: { title: string; ports: GraphPort[]; side: "input" | "output"; data: RuntimeGraphNodeData }) {
   const highlighted = new Set(data.highlightedPortIds ?? []);
+  const focused = new Set(data.focusedPortIds ?? []);
   const requiredInputs = new Set(data.requiredInputPortIds ?? []);
   return (
     <div className={`port-column ${side}`}>
       <div className="port-title">{title}</div>
       {ports.map((port) => (
         <div
-          className={`port ${port.mappingMode ? "mapped" : ""} ${requiredInputs.has(port.id) ? "required-input" : ""} ${port.previousTimeStep ? "previous" : ""} ${highlighted.has(port.id) ? "highlighted" : ""} ${data.activePortId === port.id ? "active" : ""}`}
+          className={`port ${port.mappingMode ? "mapped" : ""} ${requiredInputs.has(port.id) ? "required-input" : ""} ${port.previousTimeStep ? "previous" : ""} ${focused.has(port.id) ? "focused" : ""} ${highlighted.has(port.id) ? "highlighted" : ""} ${data.activePortId === port.id ? "active" : ""}`}
           key={port.id}
           data-default={`${requiredInputs.has(port.id) ? "Required initialization" : portValueLabel(port)}: ${port.default}`}
           aria-label={`${port.name}, ${side}, ${requiredInputs.has(port.id) ? "required initialization" : portValueLabel(port).toLowerCase()} ${port.default}`}

frontend/src/ModelNode.tsx

@@ -1,25 +1,19 @@
 import ELK from "elkjs/lib/elk.bundled.js";
 import type { Edge, Node } from "@xyflow/react";
 import type { GraphEdgeData, GraphPort, RuntimeGraphNodeData } from "./types";
+import { nodeWidth } from "./nodeSizing";
 
 const elk = new ELK();
-const NODE_WIDTH = 312;
+export type LayoutMode = "data_flow" | "compact" | "scale_grouped" | "call_stack";
 
-export async function layoutGraph(nodes: Node<RuntimeGraphNodeData>[], edges: Edge<GraphEdgeData>[]) {
+export async function layoutGraph(nodes: Node<RuntimeGraphNodeData>[], edges: Edge<GraphEdgeData>[], mode: LayoutMode = "data_flow") {
+  const layoutEdges = mode === "call_stack" ? edges.filter((edge) => isCallEdge(edge.data)) : edges;
   const graph = {
     id: "root",
-    layoutOptions: {
-      "elk.algorithm": "layered",
-      "elk.direction": "RIGHT",
-      "elk.spacing.nodeNode": "58",
-      "elk.layered.spacing.nodeNodeBetweenLayers": "110",
-      "elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
-      "elk.layered.crossingMinimization.semiInteractive": "true",
-      "elk.edgeRouting": "ORTHOGONAL",
-    },
+    layoutOptions: layoutOptions(mode),
     children: nodes.map((node) => ({
       id: node.id,
-      width: NODE_WIDTH,
+      width: nodeWidth(node.data),
       height: nodeHeight(node.data),
       ports: [
         elkCallPort(node.id, "target"),
@@ -31,7 +25,7 @@ export async function layoutGraph(nodes: Node<RuntimeGraphNodeData>[], edges: Ed
         "org.eclipse.elk.portConstraints": "FIXED_ORDER",
       },
     })),
-    edges: edges.map((edge) => ({
+    edges: layoutEdges.map((edge) => ({
       id: edge.id,
       sources: [edge.sourceHandle ?? edge.source],
       targets: [edge.targetHandle ?? edge.target],
@@ -40,11 +34,62 @@ export async function layoutGraph(nodes: Node<RuntimeGraphNodeData>[], edges: Ed
 
   const result = await elk.layout(graph);
   const positions = new Map((result.children ?? []).map((child) => [child.id, { x: child.x ?? 0, y: child.y ?? 0 }]));
+  const scaleOffsets = mode === "scale_grouped" ? scaleBandOffsets(nodes) : new Map<string, number>();
+
+  return nodes.map((node) => {
+    const position = positions.get(node.id) ?? node.position;
+    return {
+      ...node,
+      position: {
+        x: position.x,
+        y: position.y + (scaleOffsets.get(node.data.scale) ?? 0),
+      },
+    };
+  });
+}
+
+function layoutOptions(mode: LayoutMode): Record<string, string> {
+  if (mode === "compact") {
+    return {
+      "elk.algorithm": "layered",
+      "elk.direction": "RIGHT",
+      "elk.spacing.nodeNode": "28",
+      "elk.layered.spacing.nodeNodeBetweenLayers": "52",
+      "elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+      "elk.layered.crossingMinimization.semiInteractive": "true",
+      "elk.edgeRouting": "ORTHOGONAL",
+    };
+  }
+
+  if (mode === "call_stack") {
+    return {
+      "elk.algorithm": "layered",
+      "elk.direction": "DOWN",
+      "elk.spacing.nodeNode": "46",
+      "elk.layered.spacing.nodeNodeBetweenLayers": "76",
+      "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+      "elk.edgeRouting": "ORTHOGONAL",
+    };
+  }
+
+  return {
+    "elk.algorithm": "layered",
+    "elk.direction": "RIGHT",
+    "elk.spacing.nodeNode": mode === "scale_grouped" ? "72" : "58",
+    "elk.layered.spacing.nodeNodeBetweenLayers": mode === "scale_grouped" ? "130" : "110",
+    "elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+    "elk.layered.crossingMinimization.semiInteractive": "true",
+    "elk.edgeRouting": "ORTHOGONAL",
+  };
+}
+
+function scaleBandOffsets(nodes: Node<RuntimeGraphNodeData>[]) {
+  const scales = [...new Set(nodes.map((node) => node.data.scale))].sort();
+  return new Map(scales.map((scale, index) => [scale, index * 260]));
+}
 
-  return nodes.map((node) => ({
-    ...node,
-    position: positions.get(node.id) ?? node.position,
-  }));
+function isCallEdge(edge?: GraphEdgeData) {
+  return edge?.kind === "hard_dependency" && !edge.sourcePort && !edge.targetPort;
 }
 
 function nodeHeight(node: RuntimeGraphNodeData) {

frontend/src/layout.ts

@@ -0,0 +1,28 @@
+import type { RuntimeGraphNodeData } from "./types";
+
+const MIN_NODE_WIDTH = 312;
+const MAX_NODE_WIDTH = 620;
+const CARD_PADDING = 24;
+const GRID_GAP = 10;
+const PORT_HORIZONTAL_PADDING = 26;
+const MONO_CHAR_WIDTH = 8.1;
+
+export function nodeWidth(node: RuntimeGraphNodeData) {
+  const longestInput = longestPortName(node.inputs);
+  const longestOutput = longestPortName(node.outputs);
+  const inputWidth = portColumnWidth(longestInput);
+  const outputWidth = portColumnWidth(longestOutput);
+  return clamp(Math.ceil(CARD_PADDING + inputWidth + GRID_GAP + outputWidth), MIN_NODE_WIDTH, MAX_NODE_WIDTH);
+}
+
+function longestPortName(ports: RuntimeGraphNodeData["inputs"]) {
+  return ports.reduce((longest, port) => Math.max(longest, port.name.length), 0);
+}
+
+function portColumnWidth(characters: number) {
+  return Math.ceil(PORT_HORIZONTAL_PADDING + characters * MONO_CHAR_WIDTH);
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, value));
+}