Eng 2450 fix node layout algo (#1029)

* Improves layout algorithm for DAG nodes.
RunLLM · Feb 28, 2023 · 4d725a7 · 4d725a7
1 parent 69ea604
commit 4d725a7
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 79 deletions.
diff --git a/src/ui/common/src/components/workflows/ReactFlowCanvas.tsx b/src/ui/common/src/components/workflows/ReactFlowCanvas.tsx
@@ -27,11 +27,30 @@ const ReactFlowCanvas: React.FC<ReactFlowCanvasProps> = ({
 
   const { edges, nodes } = dagPositionState.result ?? { edges: [], nodes: [] };
 
+  const canvasEdges = edges.map((edge) => {
+    return {
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      type: edge.type,
+      container: 'root',
+    };
+  });
+
+  const canvasNodes = nodes.map((node) => {
+    return {
+      id: node.id,
+      type: node.type,
+      data: node.data,
+      position: node.position,
+    };
+  });
+
   return (
     <ReactFlow
       onPaneClick={onPaneClicked}
-      nodes={nodes}
-      edges={edges}
+      nodes={canvasNodes}
+      edges={canvasEdges}
       onNodeClick={switchSideSheet}
       nodeTypes={nodeTypes}
       connectionLineStyle={connectionLineStyle}
@@ -40,6 +59,7 @@ const ReactFlowCanvas: React.FC<ReactFlowCanvasProps> = ({
       defaultZoom={1}
       edgeTypes={EdgeTypes}
       minZoom={0.25}
+      fitView={true}
     />
   );
 };

diff --git a/src/ui/common/src/components/workflows/nodes/BaseNode.styles.tsx b/src/ui/common/src/components/workflows/nodes/BaseNode.styles.tsx
@@ -9,10 +9,10 @@ const BaseNode = styled(Box)({
   borderRadius: '8px',
   borderStyle: 'solid',
   borderWidth: '2px',
-  padding: '10px',
-  maxWidth: '250px',
-  minHeight: '140px',
-  maxHeight: '250px',
+  width: '310px',
+  height: '160px',
+  maxWidth: '310px',
+  maxHeight: '160px',
 });
 
 export { BaseNode };
diff --git a/src/ui/common/src/components/workflows/nodes/CheckOperatorNode.tsx b/src/ui/common/src/components/workflows/nodes/CheckOperatorNode.tsx
@@ -92,9 +92,6 @@ const CheckOperatorNode: React.FC<Props> = ({ data, isConnectable }) => {
         color: textColor,
         borderColor: borderColor,
         '&:hover': { backgroundColor: hoverColor },
-        minHeight: 'unset',
-        minWidth: '240px',
-        padding: '0px',
       }}
     >
       <Box

diff --git a/src/ui/common/src/components/workflows/nodes/MetricOperatorNode.tsx b/src/ui/common/src/components/workflows/nodes/MetricOperatorNode.tsx
@@ -93,9 +93,6 @@ const MetricOperatorNode: React.FC<Props> = ({ data, isConnectable }) => {
         color: textColor,
         borderColor: borderColor,
         '&:hover': { backgroundColor: hoverColor },
-        minHeight: 'unset',
-        minWidth: '240px',
-        padding: '0px',
       }}
     >
       <Box

diff --git a/src/ui/common/src/components/workflows/nodes/Node.tsx b/src/ui/common/src/components/workflows/nodes/Node.tsx
@@ -84,25 +84,31 @@ export const Node: React.FC<Props> = ({
         '&:hover': { backgroundColor: hoverColor },
       }}
     >
-      {icon && (
-        <Box sx={{ fontSize: '50px', mb: '2px' }}>
-          <FontAwesomeIcon icon={icon} />
-        </Box>
-      )}
-
-      <Typography
-        sx={{
-          fontSize: '18px',
-          maxWidth: '200px',
-          minWidth: '140px',
-          overflow: 'clip',
-          overflowWrap: 'break-word',
-          textAlign: 'center',
-        }}
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        sx={{ width: '100%' }}
       >
-        {label}
-      </Typography>
+        {icon && (
+          <Box sx={{ fontSize: '32px', ml: '8px', mr: '8px' }}>
+            <FontAwesomeIcon icon={icon} />
+          </Box>
+        )}
 
+        <Typography
+          sx={{
+            fontSize: '18px',
+            maxWidth: '80%',
+            width: '80%',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
+        >
+          {label}
+        </Typography>
+      </Box>
       <Handle
         type="source"
         id="db-source-id"

diff --git a/src/ui/common/src/components/workflows/nodes/NodeStatus.tsx b/src/ui/common/src/components/workflows/nodes/NodeStatus.tsx
diff --git a/src/ui/common/src/reducers/workflow.ts b/src/ui/common/src/reducers/workflow.ts
@@ -484,11 +484,10 @@ export const handleGetSelectDagPosition = createAsyncThunk<
       const mappedNodes = collapsedPosition.nodes.map((node) => {
         return {
           id: node.id,
-          // Width and height set not only the node width/height, but also how far apart we want to position these nodes.
-          // So using a value of just the width and the height of the node will result in no spacing in between.
-          // Elk (eclipse layout kernel) also provides many knobs to tweak this as well.
+          // width of the node in px.
           width: 300,
-          height: 300,
+          // height of the node in px.
+          height: 150,
         };
       });
 
@@ -497,15 +496,9 @@ export const handleGetSelectDagPosition = createAsyncThunk<
         layoutOptions: {
           'elk.algorithm': 'layered',
           'elk.direction': 'RIGHT',
-          'elk.alignment': 'CENTER',
-          'elk.spacing.nodeNode': '80',
-          'elk.layered.spacing.nodeNodeBetweenLayers': '80',
-          // https://www.eclipse.org/elk/reference/options/org-eclipse-elk-layered-nodePlacement-strategy.html
-          'nodePlacement.strategy': 'NETWORK_SIMPLEX',
-          'org.eclipse.elk.edgeRouting': 'SPLINES',
-          //https://www.eclipse.org/elk/reference/options/org-eclipse-elk-layered-nodePlacement-strategy.html
-          'crossingMinimization.strategy': 'INTERACTIVE',
-          'crossingMinimization.forceNodeModelOrder': true,
+          'elk.spacing.nodeNode': '300',
+          'elk.layered.spacing.nodeNodeBetweenLayers': '300',
+          'elk.layered.nodePlacement.strategy': 'INTERACTIVE',
         },
         children: mappedNodes,
         edges: collapsedPosition.edges,