update: Replace reactflow with @xyflow/react and Update Dependencies (#8940)

## Description: This pull request includes the following changes: 1. **Dependency Update**: - Added `@xyflow/react` as a dependency. - Replaced imports from `reactflow` with `@xyflow/react` in multiple components. 2. **Dependency Removal**: - Removed `reactflow` dependency and its related code from the project. 3. **Type Definitions Update**: - Updated type definitions for nodes and edges to align with the new library. 4. **Code Refactoring**: - Minor refactoring for improved code clarity and consistency in the following components: - `SettingsDataModelOverview` - `SettingsDataModelOverviewEffect` - `SettingsDataModelOverviewField` - `SettingsDataModelOverviewObject` 5. **Dependency Files Update**: - Updated `package.json` and `yarn.lock` to reflect the changes in dependencies. ## Additional Notes: - These changes ensure that the project is now using the `@xyflow/react` library instead of `reactflow`. - The refactoring improves code readability and maintains consistency across the components. - Please review the changes and provide any feedback or suggestions. ## Testing: - The changes have been tested locally and verified to work as expected. ## Checklist: - [x] Added `@xyflow/react` as a dependency. - [x] Replaced `reactflow` imports with `@xyflow/react`. - [x] Removed `reactflow` dependency. - [x] Updated type definitions for nodes and edges. - [x] Refactored components for improved clarity and consistency. - [x] Updated `package.json` and `yarn.lock`. - [x] Tested the changes locally. ## Related Issue Fixes #6662
2024-12-10 14:51:01 +05:30
parent 28ff5610f0
commit 49c3250519
8 changed files with 77 additions and 336 deletions
--- a/package.json
+++ b/package.json
@ -60,6 +60,7 @@
    "@types/nodemailer": "^6.4.14",
    "@types/passport-microsoft": "^1.0.3",
    "@wyw-in-js/vite": "^0.5.3",
+    "@xyflow/react": "^12.3.5",
    "add": "^2.0.6",
    "addressparser": "^1.0.1",
    "afterframe": "^1.0.2",
@ -168,7 +169,6 @@
    "react-router-dom": "^6.4.4",
    "react-textarea-autosize": "^8.4.1",
    "react-tooltip": "^5.13.1",
-    "reactflow": "^11.11.3",
    "recoil": "^0.7.7",
    "rehype-slug": "^6.0.0",
    "remark-behead": "^3.1.0",
--- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx
@ -3,11 +3,14 @@ import { SettingsDataModelOverviewObject } from '@/settings/data-model/graph-ove
 import { SettingsDataModelOverviewRelationMarkers } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewRelationMarkers';
 import { calculateHandlePosition } from '@/settings/data-model/graph-overview/utils/calculateHandlePosition';
 import styled from '@emotion/styled';
-import { useCallback, useState } from 'react';
-import ReactFlow, {
+import {
  Background,
-  EdgeChange,
-  NodeChange,
+  Edge,
+  Node,
+  NodeTypes,
+  OnEdgesChange,
+  OnNodesChange,
+  ReactFlow,
  applyEdgeChanges,
  applyNodeChanges,
  getIncomers,
@ -15,7 +18,8 @@ import ReactFlow, {
  useEdgesState,
  useNodesState,
  useReactFlow,
-} from 'reactflow';
+} from '@xyflow/react';
+import { useCallback, useState } from 'react';
 import {
  Button,
  IconButtonGroup,
@ -28,7 +32,7 @@ import {
 } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';

-const NodeTypes = {
+const nodeTypes: NodeTypes = {
  object: SettingsDataModelOverviewObject,
 };
 const StyledContainer = styled.div`
@ -67,25 +71,25 @@ const StyledCloseButton = styled.div`
 export const SettingsDataModelOverview = () => {
  const { fitView, zoomIn, zoomOut } = useReactFlow();

-  const [nodes, setNodes] = useNodesState([]);
-  const [edges, setEdges] = useEdgesState([]);
+  const [nodes, setNodes] = useNodesState<Node>([]);
+  const [edges, setEdges] = useEdgesState<Edge>([]);
  const [isInteractive, setInteractive] = useState(true);

-  const onNodesChange = useCallback(
-    (changes: NodeChange[]) =>
-      setNodes((nds) => applyNodeChanges(changes, nds)),
+  const onNodesChange: OnNodesChange = useCallback(
+    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [setNodes],
  );
-  const onEdgesChange = useCallback(
-    (changes: EdgeChange[]) =>
-      setEdges((eds) => applyEdgeChanges(changes, eds)),
+  const onEdgesChange: OnEdgesChange = useCallback(
+    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    [setEdges],
  );

-  const handleNodesChange = useCallback(
-    (nodeChanges: any[]) => {
+  const handleNodesChange: OnNodesChange = useCallback(
+    (nodeChanges) => {
      nodeChanges.forEach((nodeChange) => {
-        const node = nodes.find((node) => node.id === nodeChange.id);
+        const node = nodes.find(
+          (node) => node.id === (nodeChange as { id: string }).id,
+        );
        if (!node) {
          return;
        }
@ -119,8 +123,8 @@ export const SettingsDataModelOverview = () => {
                    newXPos,
                    'target',
                  );
-                  const sourceHandle = `${edge.data.sourceField}-${sourcePosition}`;
-                  const targetHandle = `${edge.data.targetField}-${targetPosition}`;
+                  const sourceHandle = `${edge.data?.sourceField}-${sourcePosition}`;
+                  const targetHandle = `${edge.data?.targetField}-${targetPosition}`;
                  ed.sourceHandle = sourceHandle;
                  ed.targetHandle = targetHandle;
                  ed.markerEnd = 'marker';
@ -157,8 +161,8 @@ export const SettingsDataModelOverview = () => {
                    'target',
                  );

-                  const sourceHandle = `${edge.data.sourceField}-${sourcePosition}`;
-                  const targetHandle = `${edge.data.targetField}-${targetPosition}`;
+                  const sourceHandle = `${edge.data?.sourceField}-${sourcePosition}`;
+                  const targetHandle = `${edge.data?.targetField}-${targetPosition}`;

                  ed.sourceHandle = sourceHandle;
                  ed.targetHandle = targetHandle;
@ -193,7 +197,7 @@ export const SettingsDataModelOverview = () => {
        nodes={nodes}
        edges={edges}
        onEdgesChange={onEdgesChange}
-        nodeTypes={NodeTypes}
+        nodeTypes={nodeTypes}
        onNodesChange={handleNodesChange}
        nodesDraggable={isInteractive}
        elementsSelectable={isInteractive}
--- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewEffect.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewEffect.tsx
@ -1,7 +1,7 @@
 import dagre from '@dagrejs/dagre';
 import { useTheme } from '@emotion/react';
+import { Edge, Node } from '@xyflow/react';
 import { useEffect } from 'react';
-import { Edge, Node } from 'reactflow';
 import { useRecoilValue } from 'recoil';

 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
--- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx
@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Handle, Position } from 'reactflow';
+import { Handle, Position } from '@xyflow/react';
 import { useRecoilValue } from 'recoil';
 import { useIcons } from 'twenty-ui';

--- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { Node, NodeProps } from '@xyflow/react';
 import { Link } from 'react-router-dom';
-import { NodeProps } from 'reactflow';
 import { IconChevronDown, IconChevronUp, useIcons } from 'twenty-ui';

 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@ -14,10 +14,12 @@ import { FieldMetadataType } from '~/generated/graphql';
 import { capitalize } from '~/utils/string/capitalize';

 import { ObjectFieldRowWithoutRelation } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation';
-import '@reactflow/node-resizer/dist/style.css';
+import '@xyflow/react/dist/style.css';
 import { useState } from 'react';

-type SettingsDataModelOverviewObjectProps = NodeProps<ObjectMetadataItem>;
+type SettingsDataModelOverviewObjectNode = Node<ObjectMetadataItem, 'object'>;
+type SettingsDataModelOverviewObjectProps =
+  NodeProps<SettingsDataModelOverviewObjectNode>;

 const StyledNode = styled.div`
  background-color: ${({ theme }) => theme.background.secondary};
@ -135,7 +137,7 @@ export const SettingsDataModelOverviewObject = ({
        {fields
          .filter((x) => x.type === FieldMetadataType.Relation)
          .map((field) => (
-            <StyledCardRow>
+            <StyledCardRow key={field.id}>
              <ObjectFieldRow field={field} />
            </StyledCardRow>
          ))}
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectOverview.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectOverview.tsx
@ -1,4 +1,4 @@
-import { ReactFlowProvider } from 'reactflow';
+import { ReactFlowProvider } from '@xyflow/react';

 import { SettingsDataModelOverview } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverview';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
--- a/packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx
+++ b/packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx
@ -38,6 +38,7 @@ export const IconButtonGroup = ({

      return (
        <IconButton
+          key={index}
          accent={accent}
          Icon={Icon}
          onClick={onClick}
--- a/yarn.lock
+++ b/yarn.lock
@ -11197,102 +11197,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@reactflow/background@npm:11.3.14":
-  version: 11.3.14
-  resolution: "@reactflow/background@npm:11.3.14"
-  dependencies:
-    "@reactflow/core": "npm:11.11.4"
-    classcat: "npm:^5.0.3"
-    zustand: "npm:^4.4.1"
-  peerDependencies:
-    react: ">=17"
-    react-dom: ">=17"
-  checksum: 10c0/a4ef8ca38f9cfd72d578dd2b2672d5bf841410f5a399e0c1d7bf4ea10e5d76003dec2fee15f927d4d5f121fc4414c811f2c4b9e702d28e31a4bd9399fc8cbe29
-  languageName: node
-  linkType: hard
-
-"@reactflow/controls@npm:11.2.14":
-  version: 11.2.14
-  resolution: "@reactflow/controls@npm:11.2.14"
-  dependencies:
-    "@reactflow/core": "npm:11.11.4"
-    classcat: "npm:^5.0.3"
-    zustand: "npm:^4.4.1"
-  peerDependencies:
-    react: ">=17"
-    react-dom: ">=17"
-  checksum: 10c0/6cd79e66590e301e5b3034dccfa1dcfb01fe27bbd1b8aadf8afaa8a0f68e3abe1c3d4a90a6e1ea54eecf5acb019073ead7379fbbf1252af06a63e413f82a74dc
-  languageName: node
-  linkType: hard
-
-"@reactflow/core@npm:11.11.4":
-  version: 11.11.4
-  resolution: "@reactflow/core@npm:11.11.4"
-  dependencies:
-    "@types/d3": "npm:^7.4.0"
-    "@types/d3-drag": "npm:^3.0.1"
-    "@types/d3-selection": "npm:^3.0.3"
-    "@types/d3-zoom": "npm:^3.0.1"
-    classcat: "npm:^5.0.3"
-    d3-drag: "npm:^3.0.0"
-    d3-selection: "npm:^3.0.0"
-    d3-zoom: "npm:^3.0.0"
-    zustand: "npm:^4.4.1"
-  peerDependencies:
-    react: ">=17"
-    react-dom: ">=17"
-  checksum: 10c0/895a0c1491ba81a6ed06ee9f2619870083753c6faf26ad6cb37a5c27f2f2fa80ab88d4be5c77fb7cad17ba6b20b212ea3171a976f3817056196cf85f6d90e86c
-  languageName: node
-  linkType: hard
-
-"@reactflow/minimap@npm:11.7.14":
-  version: 11.7.14
-  resolution: "@reactflow/minimap@npm:11.7.14"
-  dependencies:
-    "@reactflow/core": "npm:11.11.4"
-    "@types/d3-selection": "npm:^3.0.3"
-    "@types/d3-zoom": "npm:^3.0.1"
-    classcat: "npm:^5.0.3"
-    d3-selection: "npm:^3.0.0"
-    d3-zoom: "npm:^3.0.0"
-    zustand: "npm:^4.4.1"
-  peerDependencies:
-    react: ">=17"
-    react-dom: ">=17"
-  checksum: 10c0/5bc99ab12e4daafacfb3d60e36c7d2253cfd7cd7ba5765a9ff7c35a3a6835c49cae9aa1acde181baf5b2de3e2c48226758f5a61125ecf7014a9d58fe6ef62bb6
-  languageName: node
-  linkType: hard
-
-"@reactflow/node-resizer@npm:2.2.14":
-  version: 2.2.14
-  resolution: "@reactflow/node-resizer@npm:2.2.14"
-  dependencies:
-    "@reactflow/core": "npm:11.11.4"
-    classcat: "npm:^5.0.4"
-    d3-drag: "npm:^3.0.0"
-    d3-selection: "npm:^3.0.0"
-    zustand: "npm:^4.4.1"
-  peerDependencies:
-    react: ">=17"
-    react-dom: ">=17"
-  checksum: 10c0/094905bc9eb4ec9e20ebe732983a44895822f7fae56c8d348b478bbee776342b286f08578c57eeeb5408a931febced32a5fef68163755b37fc19ca523b78e0dd
-  languageName: node
-  linkType: hard
-
-"@reactflow/node-toolbar@npm:1.3.14":
-  version: 1.3.14
-  resolution: "@reactflow/node-toolbar@npm:1.3.14"
-  dependencies:
-    "@reactflow/core": "npm:11.11.4"
-    classcat: "npm:^5.0.3"
-    zustand: "npm:^4.4.1"
-  peerDependencies:
-    react: ">=17"
-    react-dom: ">=17"
-  checksum: 10c0/cd29257969a11feb273849d3aa540d534513b292115ebf697db1357fae704426be899dcf882ea36e13a33d49073b6c2b44fc67c4ddbc779bf2dcd49ba87053a3
-  languageName: node
-  linkType: hard
-
 "@redis/bloom@npm:1.2.0, @redis/bloom@npm:^1.2.0":
  version: 1.2.0
  resolution: "@redis/bloom@npm:1.2.0"
@ -15538,38 +15442,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/d3-array@npm:*":
-  version: 3.2.1
-  resolution: "@types/d3-array@npm:3.2.1"
-  checksum: 10c0/38bf2c778451f4b79ec81a2288cb4312fe3d6449ecdf562970cc339b60f280f31c93a024c7ff512607795e79d3beb0cbda123bb07010167bce32927f71364bca
-  languageName: node
-  linkType: hard
-
-"@types/d3-axis@npm:*":
-  version: 3.0.6
-  resolution: "@types/d3-axis@npm:3.0.6"
-  dependencies:
-    "@types/d3-selection": "npm:*"
-  checksum: 10c0/d756d42360261f44d8eefd0950c5bb0a4f67a46dd92069da3f723ac36a1e8cb2b9ce6347d836ef19d5b8aef725dbcf8fdbbd6cfbff676ca4b0642df2f78b599a
-  languageName: node
-  linkType: hard
-
-"@types/d3-brush@npm:*":
-  version: 3.0.6
-  resolution: "@types/d3-brush@npm:3.0.6"
-  dependencies:
-    "@types/d3-selection": "npm:*"
-  checksum: 10c0/fd6e2ac7657a354f269f6b9c58451ffae9d01b89ccb1eb6367fd36d635d2f1990967215ab498e0c0679ff269429c57fad6a2958b68f4d45bc9f81d81672edc01
-  languageName: node
-  linkType: hard
-
-"@types/d3-chord@npm:*":
-  version: 3.0.6
-  resolution: "@types/d3-chord@npm:3.0.6"
-  checksum: 10c0/c5a25eb5389db01e63faec0c5c2ec7cc41c494e9b3201630b494c4e862a60f1aa83fabbc33a829e7e1403941e3c30d206c741559b14406ac2a4239cfdf4b4c17
-  languageName: node
-  linkType: hard
-
 "@types/d3-color@npm:*, @types/d3-color@npm:^3.0.0":
  version: 3.1.3
  resolution: "@types/d3-color@npm:3.1.3"
@ -15577,31 +15449,14 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/d3-contour@npm:*":
-  version: 3.0.6
-  resolution: "@types/d3-contour@npm:3.0.6"
-  dependencies:
-    "@types/d3-array": "npm:*"
-    "@types/geojson": "npm:*"
-  checksum: 10c0/e7d83e94719af4576ceb5ac7f277c5806f83ba6c3631744ae391cffc3641f09dfa279470b83053cd0b2acd6784e8749c71141d05bdffa63ca58ffb5b31a0f27c
-  languageName: node
-  linkType: hard
-
-"@types/d3-delaunay@npm:*, @types/d3-delaunay@npm:^6.0.4":
+"@types/d3-delaunay@npm:^6.0.4":
  version: 6.0.4
  resolution: "@types/d3-delaunay@npm:6.0.4"
  checksum: 10c0/d154a8864f08c4ea23ecb9bdabcef1c406a25baa8895f0cb08a0ed2799de0d360e597552532ce7086ff0cdffa8f3563f9109d18f0191459d32bb620a36939123
  languageName: node
  linkType: hard

-"@types/d3-dispatch@npm:*":
-  version: 3.0.6
-  resolution: "@types/d3-dispatch@npm:3.0.6"
-  checksum: 10c0/405eb7d0ec139fbf72fa6a43b0f3ca8a1f913bb2cb38f607827e63fca8d4393f021f32f3b96b33c93ddbd37789453a0b3624f14f504add5308fd9aec8a46dda0
-  languageName: node
-  linkType: hard
-
-"@types/d3-drag@npm:*, @types/d3-drag@npm:^3.0.1, @types/d3-drag@npm:^3.0.7":
+"@types/d3-drag@npm:^3.0.7":
  version: 3.0.7
  resolution: "@types/d3-drag@npm:3.0.7"
  dependencies:
@ -15610,43 +15465,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/d3-dsv@npm:*":
-  version: 3.0.7
-  resolution: "@types/d3-dsv@npm:3.0.7"
-  checksum: 10c0/c0f01da862465594c8a28278b51c850af3b4239cc22b14fd1a19d7a98f93d94efa477bf59d8071beb285dca45bf614630811451e18e7c52add3a0abfee0a1871
-  languageName: node
-  linkType: hard
-
-"@types/d3-ease@npm:*":
-  version: 3.0.2
-  resolution: "@types/d3-ease@npm:3.0.2"
-  checksum: 10c0/aff5a1e572a937ee9bff6465225d7ba27d5e0c976bd9eacdac2e6f10700a7cb0c9ea2597aff6b43a6ed850a3210030870238894a77ec73e309b4a9d0333f099c
-  languageName: node
-  linkType: hard
-
-"@types/d3-fetch@npm:*":
-  version: 3.0.7
-  resolution: "@types/d3-fetch@npm:3.0.7"
-  dependencies:
-    "@types/d3-dsv": "npm:*"
-  checksum: 10c0/3d147efa52a26da1a5d40d4d73e6cebaaa964463c378068062999b93ea3731b27cc429104c21ecbba98c6090e58ef13429db6399238c5e3500162fb3015697a0
-  languageName: node
-  linkType: hard
-
-"@types/d3-force@npm:*":
-  version: 3.0.10
-  resolution: "@types/d3-force@npm:3.0.10"
-  checksum: 10c0/c82b459079a106b50e346c9b79b141f599f2fc4f598985a5211e72c7a2e20d35bd5dc6e91f306b323c8bfa325c02c629b1645f5243f1c6a55bd51bc85cccfa92
-  languageName: node
-  linkType: hard
-
-"@types/d3-format@npm:*":
-  version: 3.0.4
-  resolution: "@types/d3-format@npm:3.0.4"
-  checksum: 10c0/3ac1600bf9061a59a228998f7cd3f29e85cbf522997671ba18d4d84d10a2a1aff4f95aceb143fa9960501c3ec351e113fc75884e6a504ace44dc1744083035ee
-  languageName: node
-  linkType: hard
-
 "@types/d3-format@npm:^1.4.1":
  version: 1.4.5
  resolution: "@types/d3-format@npm:1.4.5"
@ -15654,22 +15472,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/d3-geo@npm:*":
-  version: 3.1.0
-  resolution: "@types/d3-geo@npm:3.1.0"
-  dependencies:
-    "@types/geojson": "npm:*"
-  checksum: 10c0/3745a93439038bb5b0b38facf435f7079812921d46406f5d38deaee59e90084ff742443c7ea0a8446df81a0d81eaf622fe7068cf4117a544bd4aa3b2dc182f88
-  languageName: node
-  linkType: hard
-
-"@types/d3-hierarchy@npm:*":
-  version: 3.1.7
-  resolution: "@types/d3-hierarchy@npm:3.1.7"
-  checksum: 10c0/873711737d6b8e7b6f1dda0bcd21294a48f75024909ae510c5d2c21fad2e72032e0958def4d9f68319d3aaac298ad09c49807f8bfc87a145a82693b5208613c7
-  languageName: node
-  linkType: hard
-
 "@types/d3-interpolate@npm:*":
  version: 3.0.4
  resolution: "@types/d3-interpolate@npm:3.0.4"
@ -15686,35 +15488,14 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/d3-polygon@npm:*":
-  version: 3.0.2
-  resolution: "@types/d3-polygon@npm:3.0.2"
-  checksum: 10c0/f46307bb32b6c2aef8c7624500e0f9b518de8f227ccc10170b869dc43e4c542560f6c8d62e9f087fac45e198d6e4b623e579c0422e34c85baf56717456d3f439
-  languageName: node
-  linkType: hard
-
-"@types/d3-quadtree@npm:*":
-  version: 3.0.6
-  resolution: "@types/d3-quadtree@npm:3.0.6"
-  checksum: 10c0/7eaa0a4d404adc856971c9285e1c4ab17e9135ea669d847d6db7e0066126a28ac751864e7ce99c65d526e130f56754a2e437a1617877098b3bdcc3ef23a23616
-  languageName: node
-  linkType: hard
-
-"@types/d3-random@npm:*":
-  version: 3.0.3
-  resolution: "@types/d3-random@npm:3.0.3"
-  checksum: 10c0/5f4fea40080cd6d4adfee05183d00374e73a10c530276a6455348983dda341003a251def28565a27c25d9cf5296a33e870e397c9d91ff83fb7495a21c96b6882
-  languageName: node
-  linkType: hard
-
-"@types/d3-scale-chromatic@npm:*, @types/d3-scale-chromatic@npm:^3.0.0":
+"@types/d3-scale-chromatic@npm:^3.0.0":
  version: 3.0.3
  resolution: "@types/d3-scale-chromatic@npm:3.0.3"
  checksum: 10c0/2f48c6f370edba485b57b73573884ded71914222a4580140ff87ee96e1d55ccd05b1d457f726e234a31269b803270ac95d5554229ab6c43c7e4a9894e20dd490
  languageName: node
  linkType: hard

-"@types/d3-scale@npm:*, @types/d3-scale@npm:^4.0.8":
+"@types/d3-scale@npm:^4.0.8":
  version: 4.0.8
  resolution: "@types/d3-scale@npm:4.0.8"
  dependencies:
@ -15723,14 +15504,14 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/d3-selection@npm:*, @types/d3-selection@npm:^3.0.10, @types/d3-selection@npm:^3.0.3":
+"@types/d3-selection@npm:*, @types/d3-selection@npm:^3.0.10":
  version: 3.0.10
  resolution: "@types/d3-selection@npm:3.0.10"
  checksum: 10c0/de1f99ab186a08999bf394a645fd76911add1b02316270d4c07616c8383903a2b068d7e02b73b6a99a1f26bb49a2e99ef4b55a5d2ddfa165f6f3c53144897920
  languageName: node
  linkType: hard

-"@types/d3-shape@npm:*, @types/d3-shape@npm:^3.1.6":
+"@types/d3-shape@npm:^3.1.6":
  version: 3.1.6
  resolution: "@types/d3-shape@npm:3.1.6"
  dependencies:
@ -15739,13 +15520,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/d3-time-format@npm:*":
-  version: 4.0.3
-  resolution: "@types/d3-time-format@npm:4.0.3"
-  checksum: 10c0/9ef5e8e2b96b94799b821eed5d61a3d432c7903247966d8ad951b8ce5797fe46554b425cb7888fa5bf604b4663c369d7628c0328ffe80892156671c58d1a7f90
-  languageName: node
-  linkType: hard
-
 "@types/d3-time-format@npm:^2.3.1":
  version: 2.3.4
  resolution: "@types/d3-time-format@npm:2.3.4"
@ -15774,14 +15548,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/d3-timer@npm:*":
-  version: 3.0.2
-  resolution: "@types/d3-timer@npm:3.0.2"
-  checksum: 10c0/c644dd9571fcc62b1aa12c03bcad40571553020feeb5811f1d8a937ac1e65b8a04b759b4873aef610e28b8714ac71c9885a4d6c127a048d95118f7e5b506d9e1
-  languageName: node
-  linkType: hard
-
-"@types/d3-transition@npm:*, @types/d3-transition@npm:^3.0.8":
+"@types/d3-transition@npm:^3.0.8":
  version: 3.0.8
  resolution: "@types/d3-transition@npm:3.0.8"
  dependencies:
@ -15790,7 +15557,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/d3-zoom@npm:*, @types/d3-zoom@npm:^3.0.1, @types/d3-zoom@npm:^3.0.8":
+"@types/d3-zoom@npm:^3.0.8":
  version: 3.0.8
  resolution: "@types/d3-zoom@npm:3.0.8"
  dependencies:
@ -15800,44 +15567,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/d3@npm:^7.4.0":
-  version: 7.4.3
-  resolution: "@types/d3@npm:7.4.3"
-  dependencies:
-    "@types/d3-array": "npm:*"
-    "@types/d3-axis": "npm:*"
-    "@types/d3-brush": "npm:*"
-    "@types/d3-chord": "npm:*"
-    "@types/d3-color": "npm:*"
-    "@types/d3-contour": "npm:*"
-    "@types/d3-delaunay": "npm:*"
-    "@types/d3-dispatch": "npm:*"
-    "@types/d3-drag": "npm:*"
-    "@types/d3-dsv": "npm:*"
-    "@types/d3-ease": "npm:*"
-    "@types/d3-fetch": "npm:*"
-    "@types/d3-force": "npm:*"
-    "@types/d3-format": "npm:*"
-    "@types/d3-geo": "npm:*"
-    "@types/d3-hierarchy": "npm:*"
-    "@types/d3-interpolate": "npm:*"
-    "@types/d3-path": "npm:*"
-    "@types/d3-polygon": "npm:*"
-    "@types/d3-quadtree": "npm:*"
-    "@types/d3-random": "npm:*"
-    "@types/d3-scale": "npm:*"
-    "@types/d3-scale-chromatic": "npm:*"
-    "@types/d3-selection": "npm:*"
-    "@types/d3-shape": "npm:*"
-    "@types/d3-time": "npm:*"
-    "@types/d3-time-format": "npm:*"
-    "@types/d3-timer": "npm:*"
-    "@types/d3-transition": "npm:*"
-    "@types/d3-zoom": "npm:*"
-  checksum: 10c0/a9c6d65b13ef3b42c87f2a89ea63a6d5640221869f97d0657b0cb2f1dac96a0f164bf5605643c0794e0de3aa2bf05df198519aaf15d24ca135eb0e8bd8a9d879
-  languageName: node
-  linkType: hard
-
 "@types/debug@npm:^4.0.0, @types/debug@npm:^4.1.12":
  version: 4.1.12
  resolution: "@types/debug@npm:4.1.12"
@ -16065,13 +15794,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/geojson@npm:*":
-  version: 7946.0.14
-  resolution: "@types/geojson@npm:7946.0.14"
-  checksum: 10c0/54f3997708fa2970c03eeb31f7e4540a0eb6387b15e9f8a60513a1409c23cafec8d618525404573468b59c6fecbfd053724b3327f7fca416729c26271d799f55
-  languageName: node
-  linkType: hard
-
 "@types/glob@npm:^7.1.3":
  version: 7.2.0
  resolution: "@types/glob@npm:7.2.0"
@ -18159,6 +17881,20 @@ __metadata:
  languageName: node
  linkType: hard

+"@xyflow/react@npm:^12.3.5":
+  version: 12.3.5
+  resolution: "@xyflow/react@npm:12.3.5"
+  dependencies:
+    "@xyflow/system": "npm:0.0.46"
+    classcat: "npm:^5.0.3"
+    zustand: "npm:^4.4.0"
+  peerDependencies:
+    react: ">=17"
+    react-dom: ">=17"
+  checksum: 10c0/f4eb2f8ed31454aa2bbc7fef3b3e9592093cbf238ca7ba572d002a0bd5fac267d488b6d560d173ee610c83e02ca0e9505c35083bdedc9890c1a65f52297f8c1c
+  languageName: node
+  linkType: hard
+
 "@xyflow/system@npm:0.0.37":
  version: 0.0.37
  resolution: "@xyflow/system@npm:0.0.37"
@ -18174,6 +17910,21 @@ __metadata:
  languageName: node
  linkType: hard

+"@xyflow/system@npm:0.0.46":
+  version: 0.0.46
+  resolution: "@xyflow/system@npm:0.0.46"
+  dependencies:
+    "@types/d3-drag": "npm:^3.0.7"
+    "@types/d3-selection": "npm:^3.0.10"
+    "@types/d3-transition": "npm:^3.0.8"
+    "@types/d3-zoom": "npm:^3.0.8"
+    d3-drag: "npm:^3.0.0"
+    d3-selection: "npm:^3.0.0"
+    d3-zoom: "npm:^3.0.0"
+  checksum: 10c0/973886c03a389e96d504ef6e8ff350949688d7a82f159549ac2a38f7f11ebed2ce5b65b52c70bd7d9f344247c913dc751c79b737953d8759d7d13e98a5ee512d
+  languageName: node
+  linkType: hard
+
 "@yarnpkg/esbuild-plugin-pnp@npm:^3.0.0-rc.10":
  version: 3.0.0-rc.15
  resolution: "@yarnpkg/esbuild-plugin-pnp@npm:3.0.0-rc.15"
@ -21934,7 +21685,7 @@ __metadata:
  languageName: node
  linkType: hard

-"classcat@npm:^5.0.3, classcat@npm:^5.0.4":
+"classcat@npm:^5.0.3":
  version: 5.0.5
  resolution: "classcat@npm:5.0.5"
  checksum: 10c0/ff8d273055ef9b518529cfe80fd0486f7057a9917373807ff802d75ceb46e8f8e148f41fa094ee7625c8f34642cfaa98395ff182d9519898da7cbf383d4a210d
@ -39925,23 +39676,6 @@ __metadata:
  languageName: node
  linkType: hard

-"reactflow@npm:^11.11.3":
-  version: 11.11.4
-  resolution: "reactflow@npm:11.11.4"
-  dependencies:
-    "@reactflow/background": "npm:11.3.14"
-    "@reactflow/controls": "npm:11.2.14"
-    "@reactflow/core": "npm:11.11.4"
-    "@reactflow/minimap": "npm:11.7.14"
-    "@reactflow/node-resizer": "npm:2.2.14"
-    "@reactflow/node-toolbar": "npm:1.3.14"
-  peerDependencies:
-    react: ">=17"
-    react-dom: ">=17"
-  checksum: 10c0/5faf9895db29d39c190b78a6113a4f97430d576086efeb3570deec81035559297823dd9ca96b9dd7daeb17159a12ac9117e399e71696485e6ccf43e9f98c1f35
-  languageName: node
-  linkType: hard
-
 "read-cmd-shim@npm:^2.0.0":
  version: 2.0.0
  resolution: "read-cmd-shim@npm:2.0.0"
@ -44473,6 +44207,7 @@ __metadata:
    "@vitejs/plugin-react-swc": "npm:^3.5.0"
    "@vitest/ui": "npm:1.4.0"
    "@wyw-in-js/vite": "npm:^0.5.3"
+    "@xyflow/react": "npm:^12.3.5"
    add: "npm:^2.0.6"
    addressparser: "npm:^1.0.1"
    afterframe: "npm:^1.0.2"
@ -44613,7 +44348,6 @@ __metadata:
    react-router-dom: "npm:^6.4.4"
    react-textarea-autosize: "npm:^8.4.1"
    react-tooltip: "npm:^5.13.1"
-    reactflow: "npm:^11.11.3"
    recoil: "npm:^0.7.7"
    rehype-slug: "npm:^6.0.0"
    remark-behead: "npm:^3.1.0"
@ -47649,7 +47383,7 @@ __metadata:
  languageName: node
  linkType: hard

-"zustand@npm:^4.4.0, zustand@npm:^4.4.1":
+"zustand@npm:^4.4.0":
  version: 4.5.4
  resolution: "zustand@npm:4.5.4"
  dependencies: