feat: remove dagre and elkjs infiniflow#918 (infiniflow#1506)

### What problem does this PR solve? feat: remove dagre and elkjs infiniflow#918 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
Halfknow · Jul 15, 2024 · 525ccc7 · 525ccc7
1 parent ed5a799
commit 525ccc7
Show file tree

Hide file tree

Showing 5 changed files with 0 additions and 154 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -26,10 +26,8 @@
     "antd": "^5.12.7",
     "axios": "^1.6.3",
     "classnames": "^2.5.1",
-    "dagre": "^0.8.5",
     "dayjs": "^1.11.10",
     "dompurify": "^3.1.6",
-    "elkjs": "^0.9.3",
     "eventsource-parser": "^1.1.2",
     "human-id": "^4.1.1",
     "i18next": "^23.7.16",
@@ -63,7 +61,6 @@
     "@redux-devtools/extension": "^3.3.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
-    "@types/dagre": "^0.7.52",
     "@types/dompurify": "^3.0.5",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.202",

diff --git a/web/src/pages/flow/elk-hooks.ts b/web/src/pages/flow/elk-hooks.ts
diff --git a/web/src/pages/flow/elk-utils.ts b/web/src/pages/flow/elk-utils.ts
diff --git a/web/src/pages/flow/utils.ts b/web/src/pages/flow/utils.ts
@@ -1,6 +1,5 @@
 import { DSLComponents } from '@/interfaces/database/flow';
 import { removeUselessFieldsFromValues } from '@/utils/form';
-import dagre from 'dagre';
 import { humanId } from 'human-id';
 import { curry, sample } from 'lodash';
 import pipe from 'lodash/fp/pipe';
@@ -80,48 +79,6 @@ export const buildNodesAndEdgesFromDSLComponents = (data: DSLComponents) => {
   return { nodes, edges };
 };
 
-const dagreGraph = new dagre.graphlib.Graph();
-dagreGraph.setDefaultEdgeLabel(() => ({}));
-
-const nodeWidth = 172;
-const nodeHeight = 36;
-
-export const getLayoutedElements = (
-  nodes: Node[],
-  edges: Edge[],
-  direction = 'TB',
-) => {
-  const isHorizontal = direction === 'LR';
-  dagreGraph.setGraph({ rankdir: direction });
-
-  nodes.forEach((node) => {
-    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
-  });
-
-  edges.forEach((edge) => {
-    dagreGraph.setEdge(edge.source, edge.target);
-  });
-
-  dagre.layout(dagreGraph);
-
-  nodes.forEach((node) => {
-    const nodeWithPosition = dagreGraph.node(node.id);
-    node.targetPosition = isHorizontal ? Position.Left : Position.Top;
-    node.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
-
-    // We are shifting the dagre node position (anchor=center center) to the top left
-    // so it matches the React Flow node anchor point (top left).
-    node.position = {
-      x: nodeWithPosition.x - nodeWidth / 2,
-      y: nodeWithPosition.y - nodeHeight / 2,
-    };
-
-    return node;
-  });
-
-  return { nodes, edges };
-};
-
 const buildComponentDownstreamOrUpstream = (
   edges: Edge[],
   nodeId: string,