Demonstrate ReactFlow 11.11.0 bug

Signed-off-by: Drew Hess <[email protected]>
hackworthltd · Apr 10, 2024 · 5ea182d · 5ea182d
1 parent a76dc84
commit 5ea182d
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.2",
     "react-router-dom": "^6.22.3",
-    "reactflow": "^11.10.3",
+    "reactflow": "^11.11.0",
     "universal-cookie": "^7.1.4",
     "uuid": "^9.0.1",
     "zod": "^3.22.4"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/EvalFull/index.tsx b/src/components/EvalFull/index.tsx
@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { NodeChange, ReactFlowProvider, useReactFlow } from "reactflow";
+import { useState, useCallback } from "react";
+import { Node, NodeChange, ReactFlowProvider, useReactFlow, applyNodeChanges } from "reactflow";
 import { EvalFullResp, GlobalName, Level } from "@/primer-api";
 import { SelectMenu, TreeReactFlowOne } from "@/components";
 import {
@@ -27,9 +27,14 @@ const Evaluated = (p: {
 }) => {
   const padding = 1.0;
   const { fitView } = useReactFlow();
-  const onNodesChange = (_: NodeChange[]) => {
-    fitView({ padding });
-  };
+  const [_, setNodes] = useState<Node[]>([]);
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      setNodes((oldNodes: Node[]) => applyNodeChanges(changes, oldNodes));
+      fitView({ padding });
+    },
+    [setNodes, fitView]
+  );
 
   return (
     <TreeReactFlowOne

diff --git a/src/components/SelectionInfo/index.tsx b/src/components/SelectionInfo/index.tsx
@@ -1,4 +1,5 @@
-import { NodeChange, ReactFlowProvider, useReactFlow } from "reactflow";
+import { useState, useCallback } from "react";
+import { Node, NodeChange, ReactFlowProvider, useReactFlow, applyNodeChanges } from "reactflow";
 import { Tree, Level, TypeOrKind } from "@/primer-api";
 import { TreeReactFlowOne } from "@/components";
 import {
@@ -19,9 +20,14 @@ const TypeOrKindTree = (p: {
 }) => {
   const padding = 1.0;
   const { fitView } = useReactFlow();
-  const onNodesChange = (_: NodeChange[]) => {
-    fitView({ padding });
-  };
+  const [_, setNodes] = useState<Node[]>([]);
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      setNodes((oldNodes: Node[]) => applyNodeChanges(changes, oldNodes));
+      fitView({ padding });
+    },
+    [setNodes, fitView]
+  );
 
   return (
     <TreeReactFlowOne