debugging 2

src/components/ui/chart.tsx

@@ -106,7 +106,7 @@ ${colorConfig
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
 interface PayloadItem {
-  dataKey?: string;
+  dataKey?: string | number;
   name?: string;
   value?: number;
   payload?: {
@@ -125,7 +125,8 @@ interface CustomTooltipProps extends Omit<TooltipProps<ValueType, NameType>, 'fo
   labelKey?: string;
   labelClassName?: string;
   color?: string;
-  formatter?: (value: ValueType, name: string, props: PayloadItem, index: number, payload: PayloadItem) => React.ReactNode;
+  formatter?: (value: ValueType, name: string, props: PayloadItem, index: number, payload: PayloadItem[]) => React.ReactNode;
+  payload?: PayloadItem[];
 }
 
 const getPayloadConfigFromPayload = (config: ChartConfig, payload: PayloadItem, key: string) => {
@@ -205,7 +206,7 @@ const ChartTooltipContent = React.forwardRef<HTMLDivElement, CustomTooltipProps>
       >
         {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
-          {payload.map((item: PayloadItem, index: number) => {
+          {payload.map((item, index) => {
             const key = `${nameKey || item.name || item.dataKey || 'value'}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
             const indicatorColor = color || (item.payload?.fill || item.color);
@@ -219,7 +220,7 @@ const ChartTooltipContent = React.forwardRef<HTMLDivElement, CustomTooltipProps>
                 )}
               >
                 {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item)
+                  formatter(item.value, item.name, item, index, payload)
                 ) : (
                   <>
                     {itemConfig?.icon ? (

src/pages/NetworkVisualization.tsx

@@ -2,11 +2,12 @@ import { useRef, useEffect, useState, useCallback } from 'react';
 import { characterNetwork } from '../data/character-network';
 import { CharacterNode, Relationship, BookNode } from '../types/character-network';
 import { Box, Typography, Paper, Grid, IconButton, Tooltip, Chip, Divider, Container, CircularProgress, Fade } from '@mui/material';
-import { ForceGraph2D, ForceGraphMethods } from 'react-force-graph';
+import { ForceGraph2D as ForceGraph } from 'react-force-graph';
 import { ArrowBack, Help, ZoomIn, ZoomOut, CenterFocusStrong } from '@mui/icons-material';
 import * as d3 from 'd3';
 
-interface NetworkNode extends d3.SimulationNodeDatum {
+// Base node interface extending SimulationNodeDatum
+interface BaseNetworkNode extends d3.SimulationNodeDatum {
   id: string;
   name: string;
   type: 'protagonist' | 'antagonist' | 'supporting' | 'book' | 'character';
@@ -21,23 +22,37 @@ interface NetworkNode extends d3.SimulationNodeDatum {
   fy?: number;
 }
 
-interface NetworkLink {
+// Book-specific node interface
-  source: string;
+interface NetworkBookNode extends BaseNetworkNode {
-  target: string;
+  type: 'book';
+  year: string;
+}
+
+// Character-specific node interface
+interface NetworkCharacterNode extends BaseNetworkNode {
+  type: 'protagonist' | 'antagonist' | 'supporting' | 'character';
+}
+
+// Union type for all possible node types
+type NetworkNode = NetworkBookNode | NetworkCharacterNode;
+
+interface NetworkLink extends d3.SimulationLinkDatum<NetworkNode> {
+  source: string | NetworkNode;
+  target: string | NetworkNode;
   type: string;
   color: string;
 }
 
 // Proper typing for ForceGraph methods
-interface ForceGraphMethods {
+interface ForceGraphMethods<NodeType extends d3.SimulationNodeDatum = NetworkNode, LinkType extends d3.SimulationLinkDatum<NodeType> = NetworkLink> {
   zoom: (k?: number) => number;
   zoomToFit: (duration?: number, padding?: number) => void;
-  d3Force: (forceName: string, force?: d3.Force<d3.SimulationNodeDatum, undefined>) => void;
+  d3Force: (forceName: string, force?: d3.Force<NodeType, LinkType>) => void;
   d3ReheatSimulation: () => void;
   getZoom: () => number;
 }
 
-type ForceGraphInstance = ForceGraphMethods;
+type ForceGraphInstance = ForceGraphMethods<NetworkNode, NetworkLink>;
 
 // Add sage theme colors after the interface definitions
 const sageColors = {
@@ -75,11 +90,11 @@ const getPentagonPoint = (index: number, total: number, radius: number, centerX:
 };
 
 export default function NetworkVisualization() {
-  const [selectedNode, setSelectedNode] = useState<CharacterNode | BookNode | null>(null);
+  const [selectedNode, setSelectedNode] = useState<NetworkNode | null>(null);
   const [selectedRelationships, setSelectedRelationships] = useState<Relationship[]>([]);
   const [selectedBook, setSelectedBook] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  const fgRef = useRef<ForceGraphMethods>(null);
+  const fgRef = useRef<ForceGraphMethods<NetworkNode, NetworkLink>>();
   const [isLoading, setIsLoading] = useState(true);
   const [isGraphReady, setIsGraphReady] = useState(false);
   const [dimensions, setDimensions] = useState({ width: 800, height: 700 });
@@ -118,41 +133,27 @@ export default function NetworkVisualization() {
   }, []);
 
   // Update the node interaction handlers
-  const handleNodeClick = (node: NetworkNode) => {
+  const handleNodeClick = useCallback((node: NetworkNode) => {
-    // Book node click
     if (node.type === 'book') {
-      const bookNode = characterNetwork.books.find(b => b.id === node.id);
+      const bookNode: NetworkBookNode = {
-      if (bookNode) {
+        ...node,
-        // Update all states synchronously
+        year: (node as NetworkBookNode).year
-        setSelectedBook(node.id);
+      };
-        setSelectedNode(bookNode);
+      setSelectedBook(node.id);
-        setSelectedRelationships([]);
+      setSelectedNode(bookNode);
-
+      setSelectedRelationships([]);
-        // Trigger force simulation update after state changes
+    } else {
-        requestAnimationFrame(() => {
+      const characterNode: NetworkCharacterNode = {
-          if (fgRef.current) {
+        ...node,
-            fgRef.current.d3ReheatSimulation();
+        type: node.type as 'protagonist' | 'antagonist' | 'supporting' | 'character'
-          }
+      };
-        });
+      const relations = characterNetwork.relationships.filter(
-      }
+        (rel) => rel.source === node.id || rel.target === node.id
-      return;
+      );
+      setSelectedNode(characterNode);
+      setSelectedRelationships(relations);
     }
-
+  }, []);
-    // Character node click - only process if we're in a book view
-    if (selectedBook) {
-      const characterNode = characterNetwork.nodes.find(n => n.id === node.id);
-      if (characterNode) {
-        // Get relationships first
-        const relations = characterNetwork.relationships.filter(
-          r => r.source === node.id || r.target === node.id
-        );
-
-        // Update states synchronously
-        setSelectedNode(characterNode);
-        setSelectedRelationships(relations);
-      }
-    }
-  };
 
   const handleBackClick = () => {
     setSelectedBook(null);
@@ -533,7 +534,7 @@ export default function NetworkVisualization() {
               {/* Graph container */}
               <Fade in={!isLoading && isGraphReady} timeout={500}>
                 <Box sx={{ width: '100%', height: '100%' }}>
-                  <ForceGraph2D
+                  <ForceGraph
                     ref={fgRef}
                     graphData={getGraphData()}
                     onNodeClick={handleNodeClick}