Upgrade reactflow to version 11 (#4236)

2023-01-20 15:44:12 +01:00 · 2023-01-20 15:44:12 +01:00 · cb02c5fe73
commit cb02c5fe73
parent a01682b090
8 changed files with 326 additions and 96 deletions
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -12,8 +12,6 @@ updates:
    ignore:
      - dependency-name: react-hook-form
        update-types: ["version-update:semver-major"]
-      - dependency-name: react-flow-renderer
-        update-types: ["version-update:semver-major"]
      - dependency-name: react
        update-types: ["version-update:semver-major"]
      - dependency-name: react-dom
--- a/apps/admin-ui/package.json
+++ b/apps/admin-ui/package.json
@ -72,12 +72,12 @@
    "react-dom": "^17.0.2",
    "react-dropzone": "^14.2.3",
    "react-error-boundary": "^3.1.4",
-    "react-flow-renderer": "^10.3.17",
    "react-hook-form": "^6.15.8",
    "react-hook-form-v7": "npm:react-hook-form@^7.35.1",
    "react-i18next": "^12.0.0",
    "react-router-dom": "^6.6.2",
    "react-use-localstorage": "^3.5.3",
+    "reactflow": "^11.4.2",
    "use-react-router-breadcrumbs": "^4.0.1"
  },
  "devDependencies": {
--- a/apps/admin-ui/src/authentication/components/FlowDiagram.tsx
+++ b/apps/admin-ui/src/authentication/components/FlowDiagram.tsx
@ -9,7 +9,7 @@ import {
  DrawerPanelContent,
 } from "@patternfly/react-core";
 import { MouseEvent as ReactMouseEvent, useMemo, useState } from "react";
-import ReactFlow, {
+import {
  Background,
  Controls,
  Edge,
@ -19,10 +19,11 @@ import ReactFlow, {
  NodeMouseHandler,
  NodeTypes,
  Position,
+  ReactFlow,
  ReactFlowInstance,
  useEdgesState,
  useNodesState,
-} from "react-flow-renderer";
+} from "reactflow";
 import { useUpdateEffect } from "../../utils/useUpdateEffect";

 import type { ExecutionList, ExpandableExecution } from "../execution-model";
@ -32,6 +33,7 @@ import { ButtonEdge, ButtonEdges } from "./diagram/ButtonEdge";
 import { ConditionalNode } from "./diagram/ConditionalNode";
 import { EndSubFlowNode, StartSubFlowNode } from "./diagram/SubFlowNode";

+import "reactflow/dist/style.css";
 import "./flow-diagram.css";

 type FlowDiagramProps = {
--- a/apps/admin-ui/src/authentication/components/diagram/ButtonEdge.tsx
+++ b/apps/admin-ui/src/authentication/components/diagram/ButtonEdge.tsx
@ -1,12 +1,6 @@
 import { PlusIcon } from "@patternfly/react-icons";
 import { ComponentType, MouseEvent as ReactMouseEvent } from "react";
-import {
-  EdgeProps,
-  getBezierPath,
-  getEdgeCenter,
-  getMarkerEnd,
-  MarkerType,
-} from "react-flow-renderer";
+import { EdgeProps, getBezierPath, getMarkerEnd, MarkerType } from "reactflow";

 export type ButtonEdges = {
  [key: string]: ComponentType<ButtonEdgeProps>;
@ -39,7 +33,7 @@ export const ButtonEdge = ({
  selected,
  data: { onEdgeClick },
 }: ButtonEdgeProps) => {
-  const edgePath = getBezierPath({
+  const [edgePath, edgeLabelX, edgeLabelY] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
@ -48,12 +42,6 @@ export const ButtonEdge = ({
    targetPosition,
  });
  const markerEnd = getMarkerEnd(markerType, markerEndId);
-  const [edgeCenterX, edgeCenterY] = getEdgeCenter({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-  });

  return (
    <>
@ -68,8 +56,8 @@ export const ButtonEdge = ({
        <foreignObject
          width={foreignObjectSize}
          height={foreignObjectSize}
-          x={edgeCenterX - foreignObjectSize / 2}
-          y={edgeCenterY - foreignObjectSize / 2}
+          x={edgeLabelX - foreignObjectSize / 2}
+          y={edgeLabelY - foreignObjectSize / 2}
          className="edgebutton-foreignobject"
          requiredExtensions="http://www.w3.org/1999/xhtml"
        >
--- a/apps/admin-ui/src/authentication/components/diagram/ConditionalNode.tsx
+++ b/apps/admin-ui/src/authentication/components/diagram/ConditionalNode.tsx
@ -1,5 +1,5 @@
 import { memo } from "react";
-import { Handle, Position } from "react-flow-renderer";
+import { Handle, Position } from "reactflow";

 type ConditionalNodeProps = {
  data: { label: string };
--- a/apps/admin-ui/src/authentication/components/diagram/SubFlowNode.tsx
+++ b/apps/admin-ui/src/authentication/components/diagram/SubFlowNode.tsx
@ -1,5 +1,5 @@
 import { memo } from "react";
-import { Handle, Position } from "react-flow-renderer";
+import { Handle, Position } from "reactflow";

 type NodeProps = {
  data: { label: string };
--- a/apps/admin-ui/src/authentication/components/diagram/auto-layout.ts
+++ b/apps/admin-ui/src/authentication/components/diagram/auto-layout.ts
@ -1,5 +1,5 @@
 import { graphlib, layout } from "dagre";
-import { Edge, Node, Position } from "react-flow-renderer";
+import { Edge, Node, Position } from "reactflow";

 const dagreGraph = new graphlib.Graph();
 dagreGraph.setDefaultEdgeLabel(() => ({}));
--- a/package-lock.json
+++ b/package-lock.json
@ -151,12 +151,12 @@
        "react-dom": "^17.0.2",
        "react-dropzone": "^14.2.3",
        "react-error-boundary": "^3.1.4",
-        "react-flow-renderer": "^10.3.17",
        "react-hook-form": "^6.15.8",
        "react-hook-form-v7": "npm:react-hook-form@^7.35.1",
        "react-i18next": "^12.0.0",
        "react-router-dom": "^6.6.2",
        "react-use-localstorage": "^3.5.3",
+        "reactflow": "^11.4.2",
        "use-react-router-breadcrumbs": "^4.0.1"
      },
      "devDependencies": {
@ -3862,6 +3862,177 @@
        "url": "https://opencollective.com/unts"
      }
    },
+    "node_modules/@reactflow/background": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.1.2.tgz",
+      "integrity": "sha512-A/Hfah+l9C7mzZ4IG2Kw9phOTLUPIie2zRFE59EXEwHUmSS91SPaFE464ydclj1Y4+OEYZb7cTiaHiKEzp3OkA==",
+      "dependencies": {
+        "@reactflow/core": "11.4.2",
+        "classcat": "^5.0.3",
+        "zustand": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/background/node_modules/zustand": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.2.tgz",
+      "integrity": "sha512-rd4haDmlwMTVWVqwvgy00ny8rtti/klRoZjFbL/MAcDnmD5qSw/RZc+Vddstdv90M5Lv6RPgWvm1Hivyn0QgJw==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "immer": ">=9.0",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/controls": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.1.2.tgz",
+      "integrity": "sha512-XyZuMOxSmqYnH+MpRxMiZS8uCdPqaWg4Ju4Sv4B1WW6ae5YsgqG9MGgHF1mOc63BhK6gchRtxV9mW+EJoB+6Pg==",
+      "dependencies": {
+        "@reactflow/core": "11.4.2",
+        "classcat": "^5.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/core": {
+      "version": "11.4.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.4.2.tgz",
+      "integrity": "sha512-JVKFNJ3LTVyQXkZCnk5X5bGo01k4uCyYLlenkCEHL7HZ65v9k6WjD+tY4mdO/t1LIZ18t3j7wlhEhvTrjupN9Q==",
+      "dependencies": {
+        "@types/d3": "^7.4.0",
+        "@types/d3-drag": "^3.0.1",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/core/node_modules/zustand": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.2.tgz",
+      "integrity": "sha512-rd4haDmlwMTVWVqwvgy00ny8rtti/klRoZjFbL/MAcDnmD5qSw/RZc+Vddstdv90M5Lv6RPgWvm1Hivyn0QgJw==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "immer": ">=9.0",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/minimap": {
+      "version": "11.3.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.3.2.tgz",
+      "integrity": "sha512-tdzV+pJqNxfEdLMZIgIBOhdIxM04PWsWUKx9RdZlZBmo+28RV/lVNh77Qu4L74eNuDTn9CrKH3UmRPy9H0LlfQ==",
+      "dependencies": {
+        "@reactflow/core": "11.4.2",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/minimap/node_modules/zustand": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.2.tgz",
+      "integrity": "sha512-rd4haDmlwMTVWVqwvgy00ny8rtti/klRoZjFbL/MAcDnmD5qSw/RZc+Vddstdv90M5Lv6RPgWvm1Hivyn0QgJw==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "immer": ">=9.0",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/node-toolbar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.1.2.tgz",
+      "integrity": "sha512-zzG+s5jY9F1VbBh0na71AuarlQi8BHnkbd6mUCWJf50DPnmk05sEdurky7C9oNccm7wxEYBirBLyW4+1vnn4Nw==",
+      "dependencies": {
+        "@reactflow/core": "11.4.2",
+        "classcat": "^5.0.3",
+        "zustand": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-toolbar/node_modules/zustand": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.2.tgz",
+      "integrity": "sha512-rd4haDmlwMTVWVqwvgy00ny8rtti/klRoZjFbL/MAcDnmD5qSw/RZc+Vddstdv90M5Lv6RPgWvm1Hivyn0QgJw==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "immer": ">=9.0",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@remix-run/router": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
@ -4832,11 +5003,6 @@
        "@types/react": "^17"
      }
    },
-    "node_modules/@types/resize-observer-browser": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz",
-      "integrity": "sha512-G9eN0Sn0ii9PWQ3Vl72jDPgeJwRWhv2Qk/nQkJuWmRmOB4HX3/BhD5SE1dZs/hzPZL/WKnvF0RHdTSG54QJFyg=="
-    },
    "node_modules/@types/resolve": {
      "version": "1.20.2",
      "dev": true,
@ -12979,29 +13145,6 @@
        "react": ">=16.13.1"
      }
    },
-    "node_modules/react-flow-renderer": {
-      "version": "10.3.17",
-      "resolved": "https://registry.npmjs.org/react-flow-renderer/-/react-flow-renderer-10.3.17.tgz",
-      "integrity": "sha512-bywiqVErlh5kCDqw3x0an5Ur3mT9j9CwJsDwmhmz4i1IgYM1a0SPqqEhClvjX+s5pU4nHjmVaGXWK96pwsiGcQ==",
-      "deprecated": "react-flow-renderer has been renamed to reactflow, please use this package from now on https://reactflow.dev/docs/guides/migrate-to-v11/",
-      "dependencies": {
-        "@babel/runtime": "^7.18.9",
-        "@types/d3": "^7.4.0",
-        "@types/resize-observer-browser": "^0.1.7",
-        "classcat": "^5.0.3",
-        "d3-drag": "^3.0.0",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "zustand": "^3.7.2"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "react": "16 || 17 || 18",
-        "react-dom": "16 || 17 || 18"
-      }
-    },
    "node_modules/react-hook-form": {
      "version": "6.15.8",
      "license": "MIT",
@ -13087,6 +13230,22 @@
        "react": ">=16.8.1"
      }
    },
+    "node_modules/reactflow": {
+      "version": "11.4.2",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.4.2.tgz",
+      "integrity": "sha512-kedccI6S/+/Fj+MFqEqb5bUncyTsr5DTxeAG5TZ6QB6wwNEE6KG3UFsqRaa1wbOtKnEWwOOupq0fDPE1ePUAZQ==",
+      "dependencies": {
+        "@reactflow/background": "11.1.2",
+        "@reactflow/controls": "11.1.2",
+        "@reactflow/core": "11.4.2",
+        "@reactflow/minimap": "11.3.2",
+        "@reactflow/node-toolbar": "1.1.2"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
    "node_modules/readable-stream": {
      "version": "2.3.7",
      "license": "MIT",
@ -15170,6 +15329,14 @@
        "react-router-dom": ">=6.0.0"
      }
    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/util": {
      "version": "0.11.1",
      "dev": true,
@ -16321,22 +16488,6 @@
      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
      "dev": true,
      "optional": true
-    },
-    "node_modules/zustand": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
-      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==",
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        }
-      }
    }
  },
  "dependencies": {
@ -18531,6 +18682,105 @@
        "tslib": "^2.4.0"
      }
    },
+    "@reactflow/background": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.1.2.tgz",
+      "integrity": "sha512-A/Hfah+l9C7mzZ4IG2Kw9phOTLUPIie2zRFE59EXEwHUmSS91SPaFE464ydclj1Y4+OEYZb7cTiaHiKEzp3OkA==",
+      "requires": {
+        "@reactflow/core": "11.4.2",
+        "classcat": "^5.0.3",
+        "zustand": "^4.3.1"
+      },
+      "dependencies": {
+        "zustand": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.2.tgz",
+          "integrity": "sha512-rd4haDmlwMTVWVqwvgy00ny8rtti/klRoZjFbL/MAcDnmD5qSw/RZc+Vddstdv90M5Lv6RPgWvm1Hivyn0QgJw==",
+          "requires": {
+            "use-sync-external-store": "1.2.0"
+          }
+        }
+      }
+    },
+    "@reactflow/controls": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.1.2.tgz",
+      "integrity": "sha512-XyZuMOxSmqYnH+MpRxMiZS8uCdPqaWg4Ju4Sv4B1WW6ae5YsgqG9MGgHF1mOc63BhK6gchRtxV9mW+EJoB+6Pg==",
+      "requires": {
+        "@reactflow/core": "11.4.2",
+        "classcat": "^5.0.3"
+      }
+    },
+    "@reactflow/core": {
+      "version": "11.4.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.4.2.tgz",
+      "integrity": "sha512-JVKFNJ3LTVyQXkZCnk5X5bGo01k4uCyYLlenkCEHL7HZ65v9k6WjD+tY4mdO/t1LIZ18t3j7wlhEhvTrjupN9Q==",
+      "requires": {
+        "@types/d3": "^7.4.0",
+        "@types/d3-drag": "^3.0.1",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.3.1"
+      },
+      "dependencies": {
+        "zustand": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.2.tgz",
+          "integrity": "sha512-rd4haDmlwMTVWVqwvgy00ny8rtti/klRoZjFbL/MAcDnmD5qSw/RZc+Vddstdv90M5Lv6RPgWvm1Hivyn0QgJw==",
+          "requires": {
+            "use-sync-external-store": "1.2.0"
+          }
+        }
+      }
+    },
+    "@reactflow/minimap": {
+      "version": "11.3.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.3.2.tgz",
+      "integrity": "sha512-tdzV+pJqNxfEdLMZIgIBOhdIxM04PWsWUKx9RdZlZBmo+28RV/lVNh77Qu4L74eNuDTn9CrKH3UmRPy9H0LlfQ==",
+      "requires": {
+        "@reactflow/core": "11.4.2",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.3.1"
+      },
+      "dependencies": {
+        "zustand": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.2.tgz",
+          "integrity": "sha512-rd4haDmlwMTVWVqwvgy00ny8rtti/klRoZjFbL/MAcDnmD5qSw/RZc+Vddstdv90M5Lv6RPgWvm1Hivyn0QgJw==",
+          "requires": {
+            "use-sync-external-store": "1.2.0"
+          }
+        }
+      }
+    },
+    "@reactflow/node-toolbar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.1.2.tgz",
+      "integrity": "sha512-zzG+s5jY9F1VbBh0na71AuarlQi8BHnkbd6mUCWJf50DPnmk05sEdurky7C9oNccm7wxEYBirBLyW4+1vnn4Nw==",
+      "requires": {
+        "@reactflow/core": "11.4.2",
+        "classcat": "^5.0.3",
+        "zustand": "^4.3.1"
+      },
+      "dependencies": {
+        "zustand": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.2.tgz",
+          "integrity": "sha512-rd4haDmlwMTVWVqwvgy00ny8rtti/klRoZjFbL/MAcDnmD5qSw/RZc+Vddstdv90M5Lv6RPgWvm1Hivyn0QgJw==",
+          "requires": {
+            "use-sync-external-store": "1.2.0"
+          }
+        }
+      }
+    },
    "@remix-run/router": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
@ -19305,11 +19555,6 @@
        "@types/react": "^17"
      }
    },
-    "@types/resize-observer-browser": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz",
-      "integrity": "sha512-G9eN0Sn0ii9PWQ3Vl72jDPgeJwRWhv2Qk/nQkJuWmRmOB4HX3/BhD5SE1dZs/hzPZL/WKnvF0RHdTSG54QJFyg=="
-    },
    "@types/resolve": {
      "version": "1.20.2",
      "dev": true
@ -19830,12 +20075,12 @@
        "react-dom": "^17.0.2",
        "react-dropzone": "^14.2.3",
        "react-error-boundary": "^3.1.4",
-        "react-flow-renderer": "^10.3.17",
        "react-hook-form": "^6.15.8",
        "react-hook-form-v7": "npm:react-hook-form@^7.35.1",
        "react-i18next": "^12.0.0",
        "react-router-dom": "^6.6.2",
        "react-use-localstorage": "^3.5.3",
+        "reactflow": "^11.4.2",
        "ts-node": "^10.9.1",
        "use-react-router-breadcrumbs": "^4.0.1",
        "vite": "^3.2.5",
@ -25118,21 +25363,6 @@
        "@babel/runtime": "^7.12.5"
      }
    },
-    "react-flow-renderer": {
-      "version": "10.3.17",
-      "resolved": "https://registry.npmjs.org/react-flow-renderer/-/react-flow-renderer-10.3.17.tgz",
-      "integrity": "sha512-bywiqVErlh5kCDqw3x0an5Ur3mT9j9CwJsDwmhmz4i1IgYM1a0SPqqEhClvjX+s5pU4nHjmVaGXWK96pwsiGcQ==",
-      "requires": {
-        "@babel/runtime": "^7.18.9",
-        "@types/d3": "^7.4.0",
-        "@types/resize-observer-browser": "^0.1.7",
-        "classcat": "^5.0.3",
-        "d3-drag": "^3.0.0",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "zustand": "^3.7.2"
-      }
-    },
    "react-hook-form": {
      "version": "6.15.8",
      "requires": {}
@ -25179,6 +25409,18 @@
      "version": "3.5.3",
      "requires": {}
    },
+    "reactflow": {
+      "version": "11.4.2",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.4.2.tgz",
+      "integrity": "sha512-kedccI6S/+/Fj+MFqEqb5bUncyTsr5DTxeAG5TZ6QB6wwNEE6KG3UFsqRaa1wbOtKnEWwOOupq0fDPE1ePUAZQ==",
+      "requires": {
+        "@reactflow/background": "11.1.2",
+        "@reactflow/controls": "11.1.2",
+        "@reactflow/core": "11.4.2",
+        "@reactflow/minimap": "11.3.2",
+        "@reactflow/node-toolbar": "1.1.2"
+      }
+    },
    "readable-stream": {
      "version": "2.3.7",
      "requires": {
@ -26577,6 +26819,12 @@
      "integrity": "sha512-Zbcy0KvWt1JePFcUHJAnTr7Z+AeO9WxmPs6A5Q/xqOVoi8edPKzpqHF87WB2opXwie/QjCxrEyTB7kFg7fgXvQ==",
      "requires": {}
    },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
+    },
    "util": {
      "version": "0.11.1",
      "dev": true,
@ -27337,12 +27585,6 @@
          "optional": true
        }
      }
-    },
-    "zustand": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
-      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==",
-      "requires": {}
    }
  }
 }