🧹 Refactor React Flow Node types in graphStore

frontend/package.json

@@ -11,6 +11,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.59.0",
     "@xyflow/react": "^12.0.0",
     "dagre": "^0.8.5",
     "html-to-image": "^1.11.13",

frontend/src/components/CustomNode.tsx

@@ -1,6 +1,6 @@
 import { memo, useMemo } from 'react';
 import { Handle, Position, type NodeProps } from '@xyflow/react';
-import { useGraphStore, type GraphNodeData } from '../store/graphStore';
+import { useGraphStore, type CustomNodeType, type GraphNodeData } from '../store/graphStore';
 
 // Node type icons
 const NODE_ICONS: Record<string, string> = {
@@ -45,7 +45,7 @@ function getHeatmapColor(normalizedValue: number): string {
 export const CustomNode = memo(function CustomNode({
     data,
     selected,
-}: NodeProps<GraphNodeData>) {
+}: NodeProps<CustomNodeType>) {
     const viewMode = useGraphStore((state) => state.viewMode);
     const nodes = useGraphStore((state) => state.nodes);
 

frontend/src/components/GraphCanvas.tsx

@@ -11,8 +11,8 @@ import {
 } from '@xyflow/react';
 import dagre from 'dagre';
 import { CustomNode } from './CustomNode';
-import { useGraphStore, type GraphNodeData } from '../store/graphStore';
-import type { Node, Edge } from '@xyflow/react';
+import { useGraphStore, type GraphNodeData, type CustomNodeType } from '../store/graphStore';
+import type { Edge } from '@xyflow/react';
 
 const nodeTypes: NodeTypes = {
     custom: CustomNode,
@@ -22,10 +22,10 @@ const NODE_WIDTH = 220;
 const NODE_HEIGHT = 80;
 
 function getLayoutedElements(
-    nodes: Node<GraphNodeData>[],
+    nodes: CustomNodeType[],
     edges: Edge[],
     direction = 'TB'
-): { nodes: Node<GraphNodeData>[]; edges: Edge[] } {
+): { nodes: CustomNodeType[]; edges: Edge[] } {
     if (nodes.length === 0) {
         return { nodes: [], edges: [] };
     }
@@ -68,8 +68,8 @@ function getLayoutedElements(
 
 export function GraphCanvas() {
     const { nodes: storeNodes, edges: storeEdges, selectNode, selectedNodeId } = useGraphStore();
-    const [nodes, setNodes, onNodesChange] = useNodesState<GraphNodeData>([]);
-    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    const [nodes, setNodes, onNodesChange] = useNodesState<CustomNodeType>([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
     const { fitView } = useReactFlow();
 
     // Track previous node count to detect actual changes
@@ -109,7 +109,7 @@ export function GraphCanvas() {
     }, [storeNodes, storeEdges]); // Remove setNodes, setEdges, fitView from deps
 
     const onNodeClick = useCallback(
-        (_: React.MouseEvent, node: Node<GraphNodeData>) => {
+        (_: React.MouseEvent, node: CustomNodeType) => {
             selectNode(node.id);
         },
         [selectNode]

frontend/src/store/graphStore.ts

@@ -22,7 +22,7 @@ export interface TensorStats {
     num_inf: number;
 }
 
-export interface GraphNodeData {
+export interface GraphNodeData extends Record<string, unknown> {
     id: string;
     label: string;
     module_type: string;
@@ -40,10 +40,10 @@ export interface GraphNodeData {
     error_message: string | null;
     tensor_stats: TensorStats | null;  // v0.2.0
     extra_info: Record<string, unknown>;
-    // Index signature for React Flow Node compatibility
-    [key: string]: unknown;
 }
 
+export type CustomNodeType = Node<GraphNodeData, 'custom'>;
+
 export interface ExecutionGraph {
     nodes: Record<string, GraphNodeData>;
     edges: Array<{
@@ -64,7 +64,7 @@ export type ViewMode = 'normal' | 'profiling' | 'gradients';
 
 interface GraphStore {
     // Graph data (React Flow format)
-    nodes: Node<GraphNodeData>[];
+    nodes: CustomNodeType[];
     edges: Edge[];
 
     // Original data from backend
@@ -91,8 +91,8 @@ interface GraphStore {
 }
 
 // Convert backend graph to React Flow format
-function convertToReactFlow(graph: ExecutionGraph): { nodes: Node<GraphNodeData>[]; edges: Edge[] } {
-    const nodes: Node<GraphNodeData>[] = Object.values(graph.nodes).map((node, index) => ({
+function convertToReactFlow(graph: ExecutionGraph): { nodes: CustomNodeType[]; edges: Edge[] } {
+    const nodes: CustomNodeType[] = Object.values(graph.nodes).map((node) => ({
         id: node.id,
         type: 'custom',
         position: { x: 0, y: 0 }, // Will be calculated by layout
@@ -110,7 +110,7 @@ function convertToReactFlow(graph: ExecutionGraph): { nodes: Node<GraphNodeData>
     return { nodes, edges };
 }
 
-export const useGraphStore = create<GraphStore>((set, get) => ({
+export const useGraphStore = create<GraphStore>((set) => ({
     nodes: [],
     edges: [],
     graphData: null,
@@ -133,14 +133,14 @@ export const useGraphStore = create<GraphStore>((set, get) => ({
         set((state) => {
             // Add or update node
             const existingIndex = state.nodes.findIndex((n) => n.id === nodeData.id);
-            const newNode: Node<GraphNodeData> = {
+            const newNode: CustomNodeType = {
                 id: nodeData.id,
                 type: 'custom',
                 position: { x: 0, y: 0 },
                 data: nodeData,
             };
 
-            let newNodes: Node<GraphNodeData>[];
+            let newNodes: CustomNodeType[];
             if (existingIndex >= 0) {
                 newNodes = [...state.nodes];
                 newNodes[existingIndex] = newNode;
@@ -158,7 +158,7 @@ export const useGraphStore = create<GraphStore>((set, get) => ({
             const nodeMap = new Map(state.nodes.map(n => [n.id, n]));
 
             for (const nodeData of nodesData) {
-                const newNode: Node<GraphNodeData> = {
+                const newNode: CustomNodeType = {
                     id: nodeData.id,
                     type: 'custom',
                     position: { x: 0, y: 0 },