ellipsis long labels, increase node width, add comment on why it is hard to support auto sized nodes

koonpeng · koonpeng · commit 430a61a1cb8b · 2025-07-29T04:40:19.000Z
Signed-off-by: Teo Koon Peng &lt;teokoonpeng@gmail.com&gt;
diff --git a/diagram-editor/frontend/add-operation.tsx b/diagram-editor/frontend/add-operation.tsx
@@ -111,8 +111,6 @@ function createNodeChange(
           data: {
             namespace: joinNamespaces(namespace, scopeId),
           },
-          width: LAYOUT_OPTIONS.nodeWidth,
-          height: LAYOUT_OPTIONS.nodeHeight,
           parentId: scopeId,
         },
       },
@@ -128,8 +126,6 @@ function createNodeChange(
           data: {
             namespace: joinNamespaces(namespace, scopeId),
           },
-          width: LAYOUT_OPTIONS.nodeWidth,
-          height: LAYOUT_OPTIONS.nodeHeight,
           parentId: scopeId,
         },
       },
@@ -174,8 +170,7 @@ function createNodeChange(
           opId: uuidv4(),
           op,
         },
-        width: LAYOUT_OPTIONS.nodeWidth,
-        height: LAYOUT_OPTIONS.nodeHeight,
+
         parentId,
       },
     },
diff --git a/diagram-editor/frontend/nodes/base-node.tsx b/diagram-editor/frontend/nodes/base-node.tsx
@@ -1,6 +1,7 @@
-import { Button, type ButtonProps, Paper } from '@mui/material';
+import { Box, Button, type ButtonProps, Paper } from '@mui/material';
 import { Handle, type NodeProps, Position } from '@xyflow/react';
 import React from 'react';
+import { LAYOUT_OPTIONS } from '../utils/layout';
 
 export interface BaseNodeProps extends NodeProps {
   color?: ButtonProps['color'];
@@ -18,8 +19,6 @@ function BaseNode({
   selected,
   sourcePosition = Position.Bottom,
   targetPosition = Position.Top,
-  width,
-  height,
 }: BaseNodeProps) {
   const icon =
     typeof materialIconOrSymbol === 'string' ? (
@@ -28,7 +27,7 @@ function BaseNode({
       materialIconOrSymbol
     );
   return (
-    <Paper sx={{ minWidth: 100 }}>
+    <Paper>
       {(variant === 'input' || variant === 'inputOutput') && (
         <Handle
           type="target"
@@ -37,17 +36,28 @@ function BaseNode({
         />
       )}
       <Button
+        title={label}
         color={color}
         fullWidth
         startIcon={icon}
         variant={selected ? 'contained' : 'outlined'}
         sx={{
           textTransform: 'none',
-          width,
-          height,
+          width: LAYOUT_OPTIONS.nodeWidth,
+          height: LAYOUT_OPTIONS.nodeHeight,
         }}
       >
-        {label}
+        <Box
+          component="span"
+          sx={{
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {label}
+        </Box>
       </Button>
       {(variant === 'output' || variant === 'inputOutput') && (
         <Handle
diff --git a/diagram-editor/frontend/nodes/start-node.tsx b/diagram-editor/frontend/nodes/start-node.tsx
@@ -1,13 +1,12 @@
 import { Button, Paper } from '@mui/material';
 import type { NodeProps } from '@xyflow/react';
 import { Handle, Position } from '@xyflow/react';
+import { LAYOUT_OPTIONS } from '../utils/layout';
 import type { BuiltinNode } from '.';
 
 function StartNode({
   isConnectable,
   sourcePosition = Position.Bottom,
-  width,
-  height,
 }: NodeProps<BuiltinNode>) {
   return (
     <Paper sx={{ minWidth: 100 }}>
@@ -16,8 +15,8 @@ function StartNode({
         variant="outlined"
         disabled
         sx={{
-          width,
-          height,
+          width: LAYOUT_OPTIONS.nodeWidth,
+          height: LAYOUT_OPTIONS.nodeHeight,
         }}
       >
         Start
diff --git a/diagram-editor/frontend/nodes/terminate-node.tsx b/diagram-editor/frontend/nodes/terminate-node.tsx
@@ -1,12 +1,11 @@
 import { Button, Paper } from '@mui/material';
 import { Handle, type NodeProps, Position } from '@xyflow/react';
+import { LAYOUT_OPTIONS } from '../utils/layout';
 import type { BuiltinNode } from '.';
 
 function TerminateNode({
   isConnectable,
   targetPosition = Position.Top,
-  width,
-  height,
 }: NodeProps<BuiltinNode>) {
   return (
     <Paper>
@@ -20,8 +19,8 @@ function TerminateNode({
         variant="outlined"
         disabled
         sx={{
-          width,
-          height,
+          width: LAYOUT_OPTIONS.nodeWidth,
+          height: LAYOUT_OPTIONS.nodeHeight,
         }}
       >
         Terminate
diff --git a/diagram-editor/frontend/utils/auto-layout.ts b/diagram-editor/frontend/utils/auto-layout.ts
@@ -24,8 +24,7 @@ export function autoLayout(
   const dagreGraph = new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   dagreGraph.setGraph({
     rankdir: 'TB',
-    marginx: options.nodeWidth / 2,
-    marginy: options.nodeHeight / 2,
+    ranksep: options.nodeHeight,
   });
 
   const scopeChildrens: Record<string, DiagramEditorNode[]> = {};
@@ -43,6 +42,15 @@ export function autoLayout(
     // exclude scope node from auto layout
     if (!isScopeNode(node)) {
       dagreGraph.setNode(node.id, {
+        // dagre requires the node dimensions to be known, the easy solution is to only use
+        // fixed size nodes. The complex alternative is to delay auto layout until ReactFlow
+        // finishes measuring the nodes, this is complex because
+        //   1. There is no hook for when ReactFlow finishes measurements
+        //   2. ReactFlow does not delay updating the DOM until the measurements are complete.
+        //     2.1. This means that when loading a new diagram, there will be a short period where the layout is not yet computed.
+        //   3. Measurements of a node may change multiple times before it "stabilizes".
+        //     3.1. This means that even if all nodes have measurements, they may not be final measurements.
+        //          If the measurements change after the layout is computed, the layout will be wrong.
         width: options.nodeWidth,
         height: options.nodeHeight,
       });
diff --git a/diagram-editor/frontend/utils/layout.ts b/diagram-editor/frontend/utils/layout.ts
@@ -10,7 +10,7 @@ export interface LayoutOptions {
 }
 
 export const LAYOUT_OPTIONS: LayoutOptions = {
-  nodeWidth: 125,
+  nodeWidth: 200,
   nodeHeight: 50,
   scopePadding: {
     leftRight: 75,
diff --git a/diagram-editor/frontend/utils/load-diagram.ts b/diagram-editor/frontend/utils/load-diagram.ts
@@ -10,7 +10,6 @@ import {
 import type { Diagram, DiagramOperation, SectionTemplate } from '../types/api';
 import { getSchema } from './ajv';
 import { exportDiagram } from './export-diagram';
-import { LAYOUT_OPTIONS } from './layout';
 import { joinNamespaces, ROOT_NAMESPACE } from './namespace';
 import { buildEdges, isBuiltin } from './operation';
 
@@ -47,17 +46,13 @@ export function loadEmpty(): Graph {
         position: { x: 0, y: 0 },
         selectable: false,
         data: { namespace: ROOT_NAMESPACE },
-        width: LAYOUT_OPTIONS.nodeWidth,
-        height: LAYOUT_OPTIONS.nodeHeight,
       },
       {
         id: joinNamespaces(ROOT_NAMESPACE, TERMINATE_ID),
         type: 'terminate',
         position: { x: 0, y: 400 },
         selectable: false,
         data: { namespace: ROOT_NAMESPACE },
-        width: LAYOUT_OPTIONS.nodeWidth,
-        height: LAYOUT_OPTIONS.nodeHeight,
       },
     ],
     edges: [],
@@ -103,17 +98,13 @@ function buildGraph(diagram: Diagram): Graph {
         position: { x: 0, y: 0 },
         data: { namespace: joinNamespaces(namespace, opId) },
         parentId: id,
-        width: LAYOUT_OPTIONS.nodeWidth,
-        height: LAYOUT_OPTIONS.nodeHeight,
       });
       nodes.push({
         id: joinNamespaces(namespace, opId, TERMINATE_ID),
         type: 'terminate',
         position: { x: 0, y: 0 },
         data: { namespace: joinNamespaces(namespace, opId) },
         parentId: id,
-        width: LAYOUT_OPTIONS.nodeWidth,
-        height: LAYOUT_OPTIONS.nodeHeight,
       });
 
       for (const [innerOpId, innerOp] of Object.entries(op.ops)) {
@@ -131,8 +122,6 @@ function buildGraph(diagram: Diagram): Graph {
         position: { x: 0, y: 0 },
         data: { namespace, opId, op },
         parentId,
-        width: LAYOUT_OPTIONS.nodeWidth,
-        height: LAYOUT_OPTIONS.nodeHeight,
       });
     }
   }
@@ -185,8 +174,6 @@ export function loadTemplate(template: SectionTemplate): Graph {
             remappedId: input,
             targetId: input,
           },
-          width: LAYOUT_OPTIONS.nodeWidth,
-          height: LAYOUT_OPTIONS.nodeHeight,
         });
       }
     } else {
@@ -200,8 +187,6 @@ export function loadTemplate(template: SectionTemplate): Graph {
             remappedId,
             targetId,
           },
-          width: LAYOUT_OPTIONS.nodeWidth,
-          height: LAYOUT_OPTIONS.nodeHeight,
         });
       }
     }
@@ -219,8 +204,6 @@ export function loadTemplate(template: SectionTemplate): Graph {
             remappedId: buffer,
             targetId: buffer,
           },
-          width: LAYOUT_OPTIONS.nodeWidth,
-          height: LAYOUT_OPTIONS.nodeHeight,
         });
       }
     } else {
@@ -234,8 +217,6 @@ export function loadTemplate(template: SectionTemplate): Graph {
             remappedId,
             targetId,
           },
-          width: LAYOUT_OPTIONS.nodeWidth,
-          height: LAYOUT_OPTIONS.nodeHeight,
         });
       }
     }
@@ -252,8 +233,6 @@ export function loadTemplate(template: SectionTemplate): Graph {
           remappedId: output,
           targetId: output,
         },
-        width: LAYOUT_OPTIONS.nodeWidth,
-        height: LAYOUT_OPTIONS.nodeHeight,
       });
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export interface LayoutOptions {`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`export const LAYOUT_OPTIONS: LayoutOptions = {`
`13`		`- nodeWidth: 125,`
	`13`	`+ nodeWidth: 200,`
`14`	`14`	`nodeHeight: 50,`
`15`	`15`	`scopePadding: {`
`16`	`16`	`leftRight: 75,`