harivansh-afk/Austens-Wedding-Guide
1
0
Fork 0
mirror of https://github.com/harivansh-afk/Austens-Wedding-Guide.git synced 2026-04-15 07:04:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

debugging 3

Browse source
This commit is contained in:
Harivansh Rathi 2024-12-04 22:43:06 -05:00
parent 4870fb5e92
commit 4d087fc3ce
1 changed files with 17 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/pages/NetworkVisualization.tsx
View file

@ -2,7 +2,7 @@ import { useRef, useEffect, useState, useCallback } from 'react';
import { characterNetwork } from '../data/character-network'; import { characterNetwork } from '../data/character-network';
import { CharacterNode, Relationship, BookNode } from '../types/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 { Box, Typography, Paper, Grid, IconButton, Tooltip, Chip, Divider, Container, CircularProgress, Fade } from '@mui/material';
import { ForceGraph2D as ForceGraph } from 'react-force-graph'; import { ForceGraph2D as ForceGraph, NodeObject, LinkObject } from 'react-force-graph';
import { ArrowBack, Help, ZoomIn, ZoomOut, CenterFocusStrong } from '@mui/icons-material'; import { ArrowBack, Help, ZoomIn, ZoomOut, CenterFocusStrong } from '@mui/icons-material';
import * as d3 from 'd3'; import * as d3 from 'd3';
@ -25,7 +25,7 @@ interface BaseNetworkNode extends d3.SimulationNodeDatum {
// Book-specific node interface // Book-specific node interface
interface NetworkBookNode extends BaseNetworkNode { interface NetworkBookNode extends BaseNetworkNode {
type: 'book'; type: 'book';
year: string; year: number;
} }
// Character-specific node interface // Character-specific node interface
@ -36,20 +36,29 @@ interface NetworkCharacterNode extends BaseNetworkNode {
// Union type for all possible node types // Union type for all possible node types
type NetworkNode = NetworkBookNode | NetworkCharacterNode; type NetworkNode = NetworkBookNode | NetworkCharacterNode;
// Updated NetworkLink interface to match D3's expectations
interface NetworkLink extends d3.SimulationLinkDatum<NetworkNode> { interface NetworkLink extends d3.SimulationLinkDatum<NetworkNode> {
source: string | NetworkNode; source: string | number | NetworkNode;
target: string | NetworkNode; target: string | number | NetworkNode;
type: string; type: string;
color: string; color: string;
} }
// Proper typing for ForceGraph methods // Complete ForceGraph methods interface
interface ForceGraphMethods<NodeType extends d3.SimulationNodeDatum = NetworkNode, LinkType extends d3.SimulationLinkDatum<NodeType> = NetworkLink> { interface ForceGraphMethods<NodeType = NodeObject<NetworkNode>, LinkType = LinkObject<NetworkNode, NetworkLink>> {
zoom: (k?: number) => number; zoom: (k?: number) => number;
zoomToFit: (duration?: number, padding?: number) => void; zoomToFit: (duration?: number, padding?: number) => void;
d3Force: (forceName: string, force?: d3.Force<NodeType, LinkType>) => void; d3Force: (forceName: string, force?: d3.Force<NodeType, LinkType>) => void;
d3ReheatSimulation: () => void; d3ReheatSimulation: () => void;
getZoom: () => number; getZoom: () => number;
emitParticle: (particle: any) => void;
pauseAnimation: () => void;
resumeAnimation: () => void;
centerAt: (x?: number, y?: number, duration?: number) => void;
// Add other required methods
width: () => number;
height: () => number;
refresh: () => void;
} }
type ForceGraphInstance = ForceGraphMethods<NetworkNode, NetworkLink>; type ForceGraphInstance = ForceGraphMethods<NetworkNode, NetworkLink>;
@ -94,7 +103,7 @@ export default function NetworkVisualization() {
const [selectedRelationships, setSelectedRelationships] = useState<Relationship[]>([]); const [selectedRelationships, setSelectedRelationships] = useState<Relationship[]>([]);
const [selectedBook, setSelectedBook] = useState<string | null>(null); const [selectedBook, setSelectedBook] = useState<string | null>(null);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const fgRef = useRef<ForceGraphMethods<NetworkNode, NetworkLink>>(); const fgRef = useRef<ForceGraphMethods>();
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [isGraphReady, setIsGraphReady] = useState(false); const [isGraphReady, setIsGraphReady] = useState(false);
const [dimensions, setDimensions] = useState({ width: 800, height: 700 }); const [dimensions, setDimensions] = useState({ width: 800, height: 700 });
@ -756,7 +765,7 @@ export default function NetworkVisualization() {
<Typography color="text.secondary" gutterBottom sx={{ <Typography color="text.secondary" gutterBottom sx={{
fontFamily: '"Lato", sans-serif' fontFamily: '"Lato", sans-serif'
}}> }}>
{selectedNode.type === 'book' ? `Published: ${(selectedNode as BookNode).year}` : selectedNode.novel} {selectedNode.type === 'book' ? `Published: ${selectedNode.year}` : selectedNode.novel}
</Typography> </Typography>
<Typography variant="body1" paragraph sx={{ <Typography variant="body1" paragraph sx={{
mt: 2, mt: 2,