mirror of
https://github.com/harivansh-afk/Austens-Wedding-Guide.git
synced 2026-04-15 06:04:39 +00:00
parent
8ee24fd762
commit
4670866249
8 changed files with 35 additions and 78 deletions
|
|
@ -1,19 +0,0 @@
|
|||
import { FC } from 'react';
|
||||
import { Box, Typography } from '@mui/material';
|
||||
import type { CharacterAnalysis as CharacterAnalysisType } from '../types/character-analysis';
|
||||
|
||||
interface Props {
|
||||
analysis: CharacterAnalysisType;
|
||||
}
|
||||
|
||||
const CharacterAnalysis: FC<Props> = ({ analysis }) => {
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5">{analysis.name}</Typography>
|
||||
<Typography>{analysis.description}</Typography>
|
||||
{/* Add more UI elements as needed */}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default CharacterAnalysis;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Typography, Paper, Grid, Tooltip, Card, CardContent, Chip, Dialog, DialogTitle, DialogContent, Divider } from '@mui/material';
|
||||
import { SocialClass, Character } from '../types/timeline';
|
||||
|
||||
|
|
|
|||
|
|
@ -407,16 +407,3 @@ export const VENDOR_LISTINGS: VendorListing[] = [
|
|||
]
|
||||
}
|
||||
];
|
||||
|
||||
export type VendorCategory =
|
||||
| 'food'
|
||||
| 'clothing'
|
||||
| 'transport'
|
||||
| 'stationery'
|
||||
| 'other'
|
||||
| 'venue'
|
||||
| 'catering'
|
||||
| 'flowers'
|
||||
| 'matchmaking'
|
||||
| 'modiste'
|
||||
| 'music';
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ interface LiteraryDevice {
|
|||
effect: string;
|
||||
}
|
||||
|
||||
export interface NovelAnalysis {
|
||||
interface NovelAnalysis {
|
||||
title: string;
|
||||
publicationYear: number;
|
||||
mainThemes: ThematicElement[];
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { useRef, useEffect, useState, useCallback } from 'react';
|
||||
import React, { useState, useCallback, useRef, useEffect } 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 } from 'react-force-graph';
|
||||
import { ArrowBack, Help, ZoomIn, ZoomOut, CenterFocusStrong } from '@mui/icons-material';
|
||||
import * as d3 from 'd3';
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ export default function NetworkVisualization() {
|
|||
const [selectedRelationships, setSelectedRelationships] = useState<Relationship[]>([]);
|
||||
const [selectedBook, setSelectedBook] = useState<string | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const fgRef = useRef<ForceGraphMethods>(null);
|
||||
const graphRef = useRef<ForceGraphInstance>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isGraphReady, setIsGraphReady] = useState(false);
|
||||
const [dimensions, setDimensions] = useState({ width: 800, height: 700 });
|
||||
|
|
@ -95,10 +95,10 @@ export default function NetworkVisualization() {
|
|||
|
||||
// Track when graph is ready
|
||||
useEffect(() => {
|
||||
if (fgRef.current) {
|
||||
if (graphRef.current) {
|
||||
setIsGraphReady(true);
|
||||
}
|
||||
}, [fgRef.current]);
|
||||
}, [graphRef.current]);
|
||||
|
||||
// Add a useEffect to handle container resizing
|
||||
useEffect(() => {
|
||||
|
|
@ -118,7 +118,7 @@ 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);
|
||||
|
|
@ -130,8 +130,8 @@ export default function NetworkVisualization() {
|
|||
|
||||
// Trigger force simulation update after state changes
|
||||
requestAnimationFrame(() => {
|
||||
if (fgRef.current) {
|
||||
fgRef.current.d3ReheatSimulation();
|
||||
if (graphRef.current) {
|
||||
graphRef.current.d3ReheatSimulation();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -152,7 +152,7 @@ export default function NetworkVisualization() {
|
|||
setSelectedRelationships(relations);
|
||||
}
|
||||
}
|
||||
};
|
||||
}, [selectedBook]);
|
||||
|
||||
const handleBackClick = () => {
|
||||
setSelectedBook(null);
|
||||
|
|
@ -377,49 +377,49 @@ export default function NetworkVisualization() {
|
|||
);
|
||||
|
||||
const handleZoomIn = () => {
|
||||
if (fgRef.current) {
|
||||
const currentZoom = fgRef.current.zoom();
|
||||
fgRef.current.zoom(currentZoom * 1.2);
|
||||
if (graphRef.current) {
|
||||
const currentZoom = graphRef.current.zoom();
|
||||
graphRef.current.zoom(currentZoom * 1.2);
|
||||
}
|
||||
};
|
||||
|
||||
const handleZoomOut = () => {
|
||||
if (fgRef.current) {
|
||||
const currentZoom = fgRef.current.zoom();
|
||||
fgRef.current.zoom(currentZoom / 1.2);
|
||||
if (graphRef.current) {
|
||||
const currentZoom = graphRef.current.zoom();
|
||||
graphRef.current.zoom(currentZoom / 1.2);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCenterGraph = () => {
|
||||
if (fgRef.current) {
|
||||
fgRef.current.zoomToFit(400);
|
||||
if (graphRef.current) {
|
||||
graphRef.current.zoomToFit(400);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (fgRef.current) {
|
||||
if (graphRef.current) {
|
||||
// Clear existing forces
|
||||
fgRef.current.d3Force('charge', undefined);
|
||||
fgRef.current.d3Force('center', undefined);
|
||||
fgRef.current.d3Force('link', undefined);
|
||||
graphRef.current.d3Force('charge', undefined);
|
||||
graphRef.current.d3Force('center', undefined);
|
||||
graphRef.current.d3Force('link', undefined);
|
||||
|
||||
// Add stable forces with minimal movement
|
||||
fgRef.current.d3Force('charge', d3.forceManyBody().strength(-100));
|
||||
fgRef.current.d3Force('center', d3.forceCenter(dimensions.width / 2, dimensions.height / 2).strength(0.05));
|
||||
fgRef.current.d3Force('link', d3.forceLink().distance(80).strength(0.2));
|
||||
graphRef.current.d3Force('charge', d3.forceManyBody().strength(-100));
|
||||
graphRef.current.d3Force('center', d3.forceCenter(dimensions.width / 2, dimensions.height / 2).strength(0.05));
|
||||
graphRef.current.d3Force('link', d3.forceLink().distance(80).strength(0.2));
|
||||
|
||||
// Reduce simulation intensity
|
||||
fgRef.current.d3Force('x', d3.forceX(dimensions.width / 2).strength(0.05));
|
||||
fgRef.current.d3Force('y', d3.forceY(dimensions.height / 2).strength(0.05));
|
||||
graphRef.current.d3Force('x', d3.forceX(dimensions.width / 2).strength(0.05));
|
||||
graphRef.current.d3Force('y', d3.forceY(dimensions.height / 2).strength(0.05));
|
||||
}
|
||||
}, [dimensions, selectedBook]);
|
||||
|
||||
// Add useEffect to center the graph on mount and dimension changes
|
||||
useEffect(() => {
|
||||
if (fgRef.current) {
|
||||
if (graphRef.current) {
|
||||
// Center the graph with animation
|
||||
requestAnimationFrame(() => {
|
||||
fgRef.current?.zoomToFit(400, 100); // Increased padding for better centering
|
||||
graphRef.current?.zoomToFit(400, 100); // Increased padding for better centering
|
||||
});
|
||||
}
|
||||
}, [dimensions, selectedBook]);
|
||||
|
|
@ -534,7 +534,7 @@ export default function NetworkVisualization() {
|
|||
<Fade in={!isLoading && isGraphReady} timeout={500}>
|
||||
<Box sx={{ width: '100%', height: '100%' }}>
|
||||
<ForceGraph2D
|
||||
ref={fgRef}
|
||||
ref={graphRef}
|
||||
graphData={getGraphData()}
|
||||
onNodeClick={handleNodeClick}
|
||||
nodeCanvasObject={renderNodeCanvas}
|
||||
|
|
@ -557,12 +557,12 @@ export default function NetworkVisualization() {
|
|||
}
|
||||
}}
|
||||
warmupTicks={0}
|
||||
nodeLabel={() => ''}
|
||||
nodeLabel={(node: NetworkNode) => ''}
|
||||
linkCurvature={0.3}
|
||||
linkDirectionalParticles={0}
|
||||
onEngineStop={() => {
|
||||
// Ensure graph is centered after layout stabilizes
|
||||
fgRef.current?.zoomToFit(400, 100);
|
||||
graphRef.current?.zoomToFit(400, 100);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import React from 'react';
|
||||
import { Typography, Paper, Grid, Chip, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import SocialClassView from '../components/SocialClassView';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Typography, Paper, Grid, Chip } from '@mui/material';
|
||||
import { TimelineEvent } from '../types/timeline';
|
||||
import InteractiveTimeline from '../components/timeline/InteractiveTimeline';
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
export interface CharacterAnalysis {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
traits: string[];
|
||||
relationships: {
|
||||
character: string;
|
||||
relationship: string;
|
||||
}[];
|
||||
development: string;
|
||||
significance: string;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue