chore: upgrade reactflow to version 12 for new features (#4228)

block · Jan 29, 2025 · 8ea824d · 8ea824d
1 parent d7394ea
commit 8ea824d
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 365 deletions.
diff --git a/frontend/console/package.json b/frontend/console/package.json
@@ -26,9 +26,13 @@
     "find-deadcode": "npx ts-prune --project tsconfig.json"
   },
   "lint-staged": {
-    "*.(js|cjs|tsx|ts)": ["pnpm run lint:fix"]
+    "*.(js|cjs|tsx|ts)": [
+      "pnpm run lint:fix"
+    ]
   },
-  "browserslist": ["> 2%"],
+  "browserslist": [
+    "> 2%"
+  ],
   "source": "index.html",
   "dependencies": {
     "@bufbuild/protobuf": "^1.10.0",
@@ -48,6 +52,7 @@
     "@uiw/codemirror-theme-atomone": "^4.22.0",
     "@uiw/codemirror-theme-github": "^4.22.0",
     "@vitejs/plugin-react": "^4.0.4",
+    "@xyflow/react": "^12.4.2",
     "codemirror-json-schema": "0.7.0",
     "codemirror-json5": "^1.0.3",
     "dagre": "^0.8.5",
@@ -60,7 +65,6 @@
     "react-dom": "19.0.0",
     "react-router-dom": "7.1.3",
     "react-use": "^17.5.0",
-    "reactflow": "11.11.4",
     "tailwindcss": "^3.3.3",
     "type-fest": "^4.18.2"
   },

diff --git a/frontend/console/src/features/graph/DeclNode.tsx b/frontend/console/src/features/graph/DeclNode.tsx
@@ -1,3 +1,4 @@
+import { Handle, type NodeProps, Position } from '@xyflow/react'
 import {
   BubbleChatIcon,
   CodeCircleIcon,
@@ -8,7 +9,6 @@ import {
   Settings02Icon,
   SquareLock02Icon,
 } from 'hugeicons-react'
-import { Handle, type NodeProps, Position } from 'reactflow'
 
 interface Props extends NodeProps {
   data: {

diff --git a/frontend/console/src/features/graph/GraphPane.tsx b/frontend/console/src/features/graph/GraphPane.tsx
@@ -1,13 +1,14 @@
+import { Background, BackgroundVariant, Controls, type Edge, ReactFlow as Flow, type Node, ReactFlowProvider } from '@xyflow/react'
 import dagre from 'dagre'
 import { useCallback, useMemo, useState } from 'react'
 import type React from 'react'
-import ReactFlow, { Background, Controls, type Edge, type Node } from 'reactflow'
 import { useUserPreferences } from '../../shared/providers/user-preferences-provider'
 import { useStreamModules } from '../modules/hooks/use-stream-modules'
 import { DeclNode } from './DeclNode'
 import { GroupNode } from './GroupNode'
 import { type FTLNode, getGraphData } from './graph-utils'
-import 'reactflow/dist/style.css'
+import '@xyflow/react/dist/style.css'
+import './graph.css'
 
 const NODE_TYPES = {
   groupNode: GroupNode,
@@ -48,10 +49,10 @@ const getLayoutedElements = (nodes: Node[], edges: Edge[], direction = 'LR') =>
   // Group nodes by their parent module
   const nodesByModule = new Map<string, Node[]>()
   for (const node of nonGroupNodes) {
-    if (node.parentNode) {
-      const nodes = nodesByModule.get(node.parentNode) || []
+    if (node.parentId) {
+      const nodes = nodesByModule.get(node.parentId) || []
       nodes.push(node)
-      nodesByModule.set(node.parentNode, nodes)
+      nodesByModule.set(node.parentId, nodes)
     }
   }
 
@@ -61,8 +62,8 @@ const getLayoutedElements = (nodes: Node[], edges: Edge[], direction = 'LR') =>
 
   // First, assign ranks to modules based on their connections
   for (const edge of edges) {
-    const sourceModule = nonGroupNodes.find((n) => n.id === edge.source)?.parentNode
-    const targetModule = nonGroupNodes.find((n) => n.id === edge.target)?.parentNode
+    const sourceModule = nonGroupNodes.find((n) => n.id === edge.source)?.parentId
+    const targetModule = nonGroupNodes.find((n) => n.id === edge.target)?.parentId
 
     if (sourceModule && targetModule && sourceModule !== targetModule) {
       if (!moduleRanks.has(sourceModule)) {
@@ -122,8 +123,8 @@ const getLayoutedElements = (nodes: Node[], edges: Edge[], direction = 'LR') =>
 
   // Add edges with increased weight for vertical separation
   for (const edge of edges) {
-    const sourceModule = nonGroupNodes.find((n) => n.id === edge.source)?.parentNode
-    const targetModule = nonGroupNodes.find((n) => n.id === edge.target)?.parentNode
+    const sourceModule = nonGroupNodes.find((n) => n.id === edge.source)?.parentId
+    const targetModule = nonGroupNodes.find((n) => n.id === edge.target)?.parentId
 
     // If edge crosses module boundaries, give it more weight
     const weight = sourceModule && targetModule && sourceModule !== targetModule ? 5 : 2
@@ -260,7 +261,7 @@ export const GraphPane: React.FC<GraphPaneProps> = ({ onTapped }) => {
   const onNodeClick = useCallback(
     (_event: React.MouseEvent, node: Node) => {
       setSelectedNodeId(node.id)
-      onTapped?.(node.data.item, node.id)
+      onTapped?.(node.data?.item as FTLNode, node.id)
     },
     [onTapped],
   )
@@ -278,7 +279,7 @@ export const GraphPane: React.FC<GraphPaneProps> = ({ onTapped }) => {
       } else {
         // Otherwise select the source node
         setSelectedNodeId(sourceNode?.id || null)
-        onTapped?.(sourceNode?.data?.item || null, sourceNode?.id || null)
+        onTapped?.((sourceNode?.data?.item as FTLNode) || null, sourceNode?.id || null)
       }
     },
     [onTapped, layoutedNodes, selectedNodeId],
@@ -290,24 +291,27 @@ export const GraphPane: React.FC<GraphPaneProps> = ({ onTapped }) => {
   }, [onTapped])
 
   return (
-    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
-      <ReactFlow
-        nodes={layoutedNodes}
-        edges={layoutedEdges}
-        nodeTypes={NODE_TYPES}
-        onNodeClick={onNodeClick}
-        onEdgeClick={onEdgeClick}
-        onPaneClick={onPaneClick}
-        fitView
-        minZoom={0.1}
-        maxZoom={2}
-        proOptions={{ hideAttribution: true }}
-        nodesDraggable={false}
-        nodesConnectable={false}
-      >
-        <Background />
-        <Controls />
-      </ReactFlow>
-    </div>
+    <ReactFlowProvider>
+      <div className={isDarkMode ? 'dark' : 'light'} style={{ width: '100%', height: '100%', position: 'relative' }}>
+        <Flow
+          nodes={layoutedNodes}
+          edges={layoutedEdges}
+          nodeTypes={NODE_TYPES}
+          onNodeClick={onNodeClick}
+          onEdgeClick={onEdgeClick}
+          onPaneClick={onPaneClick}
+          fitView
+          minZoom={0.1}
+          maxZoom={2}
+          proOptions={{ hideAttribution: true }}
+          nodesDraggable={false}
+          nodesConnectable={false}
+          colorMode={isDarkMode ? 'dark' : 'light'}
+        >
+          <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
+          <Controls />
+        </Flow>
+      </div>
+    </ReactFlowProvider>
   )
 }
diff --git a/frontend/console/src/features/graph/GroupNode.tsx b/frontend/console/src/features/graph/GroupNode.tsx
@@ -1,4 +1,4 @@
-import type { NodeProps } from 'reactflow'
+import type { NodeProps } from '@xyflow/react'
 
 interface Props extends NodeProps {
   data: {

diff --git a/frontend/console/src/features/graph/graph-utils.ts b/frontend/console/src/features/graph/graph-utils.ts
@@ -1,4 +1,4 @@
-import type { Edge, Node } from 'reactflow'
+import type { Edge, Node } from '@xyflow/react'
 import type { Config, Data, Database, Enum, Module, Secret, Topic, Verb } from '../../protos/xyz/block/ftl/console/v1/console_pb'
 import type { StreamModulesResult } from '../modules/hooks/use-stream-modules'
 import { getNodeBackgroundColor } from './graph-styles'
@@ -16,15 +16,15 @@ const createNode = (
   type: 'groupNode' | 'declNode',
   nodeType: string,
   position: { x: number; y: number } | undefined,
-  parentNode: string | undefined,
+  parentId: string | undefined,
   item: FTLNode,
   isDarkMode: boolean,
   isSelected: boolean,
 ): Node => ({
   id,
   type,
   position: position || { x: 0, y: 0 },
-  ...(parentNode && { parentNode }),
+  ...(parentId && { parentId }),
   data: {
     title: label,
     selected: isSelected,

diff --git a/frontend/console/src/features/graph/graph.css b/frontend/console/src/features/graph/graph.css
@@ -0,0 +1,10 @@
+.react-flow.dark {
+  --xy-background-color-default: #1f2937; /* Tailwind gray-800 */
+  --xy-background-pattern-dots-color-default: #4b5563; /* Tailwind gray-600 for better contrast */
+
+  /* Controls styling */
+  --xy-controls-button-background-color-default: #374151; /* Tailwind gray-700 */
+  --xy-controls-button-background-color-hover-default: #4b5563; /* Tailwind gray-600 */
+  --xy-controls-button-color-default: #f3f4f6; /* Tailwind gray-100 */
+  --xy-controls-button-border-color-default: #4b5563; /* Tailwind gray-600 */
+}