Address PR review feedback for node batching

- Fix cluster dragging bug: use setHoveredNodeId (singular) instead of
  setHoveredNodeIds for compatibility with Cluster.tsx drag-disable logic
- Fix silent data loss: add maxNodeCount prop (default: 10000) with
  console.warn when node count exceeds limit
- Expose maxNodeCount prop through GraphScene.tsx
- Remove unused hoveredNodeIds state from store

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: amcdnl

src/GraphScene.tsx

@@ -191,6 +191,13 @@ export interface GraphSceneProps {
    */
   webWorkers?: boolean;
 
+  /**
+   * Maximum number of instanced nodes for batched rendering.
+   * Nodes beyond this limit won't render. A warning will be logged
+   * if this limit is exceeded. Default: 10000
+   */
+  maxNodeCount?: number;
+
   /**
    * When a node was clicked.
    */
@@ -461,6 +468,7 @@ export const GraphScene = forwardRef<GraphSceneRef, GraphSceneProps>(
           renderNode={renderNode}
           contextMenu={contextMenu}
           defaultNodeSize={rest.defaultNodeSize}
+          maxNodeCount={rest.maxNodeCount}
           onClick={onNodeClick}
           onDoubleClick={onNodeDoubleClick}
           onContextMenu={onNodeContextMenu}
@@ -484,7 +492,8 @@ export const GraphScene = forwardRef<GraphSceneRef, GraphSceneProps>(
         onNodePointerOut,
         onNodePointerOver,
         renderNode,
-        rest.defaultNodeSize
+        rest.defaultNodeSize,
+        rest.maxNodeCount
       ]
     );
 

src/store.ts

@@ -33,8 +33,6 @@ export interface GraphState {
   selections?: string[];
   // The node that is currently hovered, used to disable cluster dragging
   hoveredNodeId?: string;
-  // The nodes that are currently hovered over (for batched node rendering)
-  hoveredNodeIds?: string[];
   // The edges that are currently hovered over, required for cases when animation is disabled
   hoveredEdgeIds?: string[];
   edgeContextMenus?: Set<string>;
@@ -57,7 +55,6 @@ export interface GraphState {
   setActives: (actives: string[]) => void;
   setSelections: (selections: string[]) => void;
   setHoveredNodeId: (hoveredNodeId: string | null) => void;
-  setHoveredNodeIds: (hoveredNodeIds: string[] | null) => void;
   setHoveredEdgeIds: (hoveredEdgeIds: string[] | null) => void;
   setNodes: (nodes: InternalGraphNode[]) => void;
   setEdges: (edges: InternalGraphEdge[]) => void;
@@ -92,7 +89,6 @@ export const createStore = ({
     draggingIds: [],
     actives,
     hoveredEdgeIds: [],
-    hoveredNodeIds: [],
     edgeContextMenus: new Set(),
     nodeContextMenus: new Set(),
     edgeMeshes: [],
@@ -126,8 +122,6 @@ export const createStore = ({
     setSelections: selections => set(state => ({ ...state, selections })),
     setHoveredNodeId: hoveredNodeId =>
       set(state => ({ ...state, hoveredNodeId })),
-    setHoveredNodeIds: hoveredNodeIds =>
-      set(state => ({ ...state, hoveredNodeIds })),
     setHoveredEdgeIds: hoveredEdgeIds =>
       set(state => ({ ...state, hoveredEdgeIds })),
     setNodes: nodes =>

src/symbols/nodes/Nodes.tsx

@@ -29,6 +29,9 @@ import { createIndexToNodeIdMap, useNodeEvents } from './useNodeEvents';
 // LOD: Maximum camera distance at which node labels are visible
 const LABEL_VISIBILITY_DISTANCE = 15000;
 
+// Default maximum number of instanced nodes
+const DEFAULT_MAX_NODE_COUNT = 10000;
+
 export interface NodesProps {
   /** Nodes to render */
   nodes: InternalGraphNode[];
@@ -48,6 +51,8 @@ export interface NodesProps {
   contextMenu?: (event: ContextMenuEvent) => ReactNode;
   /** Default node size */
   defaultNodeSize?: number;
+  /** Maximum number of instanced nodes (default: 10000). Nodes beyond this limit won't render. */
+  maxNodeCount?: number;
   /** Click handler */
   onClick?: (
     node: InternalGraphNode,
@@ -93,6 +98,7 @@ export const Nodes: FC<NodesProps> = ({
   renderNode,
   contextMenu,
   defaultNodeSize = 7,
+  maxNodeCount = DEFAULT_MAX_NODE_COUNT,
   onClick,
   onDoubleClick,
   onContextMenu,
@@ -121,7 +127,18 @@ export const Nodes: FC<NodesProps> = ({
   );
 
   // Create instanced mesh for sphere nodes
-  const instancing = useNodeInstancing(5000);
+  const instancing = useNodeInstancing(maxNodeCount);
+
+  // Warn if nodes exceed the maximum count
+  useEffect(() => {
+    if (sphereNodes.length > maxNodeCount) {
+      console.warn(
+        `[reagraph] Node count (${sphereNodes.length}) exceeds maxNodeCount (${maxNodeCount}). ` +
+        `${sphereNodes.length - maxNodeCount} nodes will not be rendered. ` +
+        `Increase maxNodeCount prop to render all nodes.`
+      );
+    }
+  }, [sphereNodes.length, maxNodeCount]);
 
   // Create index-to-nodeId map for raycasting
   const indexToNodeId = useMemo(

src/symbols/nodes/useNodeEvents.ts

@@ -100,8 +100,8 @@ export function useNodeEvents(
   const hoveredNodeIdRef = useRef<string | null>(null);
   const lastIntersectTimeRef = useRef(0);
 
-  // Store for updating hovered state
-  const setHoveredNodeIds = useStore(state => state.setHoveredNodeIds);
+  // Store for updating hovered state (use singular for Cluster.tsx compatibility)
+  const setHoveredNodeId = useStore(state => state.setHoveredNodeId);
   const nodeContextMenus = useStore(state => state.nodeContextMenus);
   const setNodeContextMenus = useStore(state => state.setNodeContextMenus);
 
@@ -255,9 +255,9 @@ export function useNodeEvents(
         eventsRef.current.onPointerOver(intersectedNode!);
       }
 
-      // Update hovered state
+      // Update hovered state (singular for Cluster.tsx compatibility)
       hoveredNodeIdRef.current = currentHoveredId;
-      setHoveredNodeIds?.(currentHoveredId ? [currentHoveredId] : []);
+      setHoveredNodeId?.(currentHoveredId);
     }
   });