From 9609248b696af0506cd37079eed7a1c5920a1204 Mon Sep 17 00:00:00 2001 From: rathi Date: Wed, 4 Dec 2024 12:53:36 -0500 Subject: [PATCH] navbar improvements and removed dear jane --- TECHNICAL_DOCUMENTATION.md | 174 +++++++++++++++++++++- src/App.tsx | 2 - src/components/Navbar.tsx | 55 ++++--- src/data/dear-jane.ts | 156 -------------------- src/pages/DearJane.tsx | 290 ------------------------------------- src/pages/Home.tsx | 10 -- 6 files changed, 201 insertions(+), 486 deletions(-) delete mode 100644 src/data/dear-jane.ts delete mode 100644 src/pages/DearJane.tsx diff --git a/TECHNICAL_DOCUMENTATION.md b/TECHNICAL_DOCUMENTATION.md index 47bcd77..09207ca 100644 --- a/TECHNICAL_DOCUMENTATION.md +++ b/TECHNICAL_DOCUMENTATION.md @@ -30,7 +30,6 @@ src/ │ ├── Navbar.tsx │ ├── Pagination.tsx │ ├── QuoteDisplay.tsx -│ ├── Routes.tsx │ ├── ShareButtons.tsx │ └── theme-provider.tsx │ @@ -38,22 +37,21 @@ src/ │ ├── blog-posts.ts # Character blog content │ ├── quotes.ts # Austen quotes │ ├── quiz.ts # Character quiz data -│ ├── dear-jane.ts # Advice column content │ ├── success-stories.ts │ ├── literary-analysis.ts # Literary analysis data +│ ├── comparative-analysis.ts # Comparative analysis data │ └── vendors.ts │ ├── pages/ │ ├── BlogPost/ -│ ├── Advice.tsx │ ├── Analysis.tsx # Literary analysis page │ ├── Blogs.tsx -│ ├── DearJane.tsx │ ├── Home.tsx │ ├── MarketCalculator.tsx │ ├── Quiz.tsx │ ├── Stories.tsx │ ├── SuccessStories.tsx +│ ├── ComparativeAnalysis.tsx # Comparative analysis page │ └── Vendors.tsx ``` @@ -67,20 +65,22 @@ The application uses React Router for navigation with the following route struct } /> } /> } /> - } /> } /> } /> } /> } /> + } /> + } /> ``` ### Navigation Updates - Main navigation in `Navbar.tsx` includes: - - Primary navigation links - - Literary Analysis link with distinct styling - - Responsive design for all screen sizes + - Primary navigation group with consistent button styling + - Secondary navigation group for analysis features + - Visual separation between groups using border + - All buttons styled with sage color scheme - Home page features: - Literary Analysis card in featured sections - Direct link to analysis content @@ -92,6 +92,8 @@ The application uses React Router for navigation with the following route struct ### Route Integration - Analysis page is directly accessible via `/analysis` +- Comparative analysis accessible via `/comparative` +- Character network visualization via `/network` - Integrated into main navigation flow - Maintains consistent layout and styling - Proper error handling and loading states @@ -123,6 +125,8 @@ The application uses React Router for navigation with the following route struct - Pagination for content lists - Market calculator - **New: Literary analysis with themed tabs and novel selection** +- **New: Comparative analysis for cross-novel exploration** +- **New: Character network visualization** ### 4. Performance Considerations @@ -297,3 +301,157 @@ const novelAnalyses = { 5. Content management system integration 6. **New: Additional novel analysis features** 7. **New: Comparative analysis tools** + +## Character Network Feature + +### Interactive Graph Component + +The character network visualization is implemented using a force-directed graph with the following features: + +```typescript +interface CharacterNode { + id: string; + name: string; + novel: string; + class: string; + type: "protagonist" | "antagonist" | "supporting"; +} + +interface GraphConfig { + nodeRelSize: number; + nodeVal: number; + width: number; + height: number; + staticGraph: boolean; + enableNodeDrag: boolean; + enableZoom: boolean; +} +``` + +#### Key Features + +1. **Static Node Positioning** + + - Nodes are arranged in a circular layout + - Fixed positions prevent unwanted movement + - Calculated using mathematical formulas for even distribution + +2. **Interaction Handling** + + - Single-click node selection + - Debounced click handling (300ms) + - Click processing state management + - Cleanup of timeouts on unmount + +3. **Visual Configuration** + + - Node colors based on character type: + - Protagonist: Green (#4CAF50) + - Antagonist: Red (#f44336) + - Supporting: Blue (#2196F3) + - Node size: 8 units (nodeRelSize) + - Link width: 2 units + - Link opacity: 0.6 + +4. **Performance Optimizations** + + - Disabled force simulation cooldown + - Zero warmup ticks + - Removed hover effects and tooltips + - Static graph configuration + +5. **UI Components** + - Main graph container (600x600px) + - Right-side information panel (300px width) + - Smooth transitions for panel visibility + - Responsive layout with flex container + +### Implementation Details + +```javascript +// Node Click Handler +const handleNodeClick = useCallback( + (node) => { + if (!node || isProcessingClick) return; + setIsProcessingClick(true); + setSelectedNode(node); + onNodeSelect(node); + // Reset after 300ms + clickTimeoutRef.current = setTimeout(() => { + setIsProcessingClick(false); + }, 300); + }, + [onNodeSelect, isProcessingClick] +); + +// Graph Configuration +const graphConfig = { + staticGraph: true, + enableNodeDrag: false, + enableZoom: true, + minZoom: 0.5, + maxZoom: 2.5, + cooldownTime: 0, + warmupTicks: 0, + nodeLabel: null, + enableNodeHover: false, +}; +``` + +### Styling + +The component uses a flex layout with the following structure: + +```css +// Container + { + display: flex; + gap: 20px; + width: 100%; + maxwidth: 1000px; + margin: 0 auto; +} + +// Graph Container + { + width: 600px; + height: 600px; + border: 1px solid #eee; + position: relative; +} + +// Information Panel + { + width: 300px; + padding: 20px; + backgroundcolor: #fff; + border: 1px solid #eee; + borderradius: 4px; + transition: opacity 0.2s ease-in-out; +} +``` + +### Best Practices + +1. **State Management** + + - Use of React hooks for state + - Proper cleanup of timeouts + - Controlled component updates + +2. **Performance** + + - Debounced click handling + - Static node positioning + - Minimal re-renders + +3. **User Experience** + + - Smooth transitions + - Clear visual feedback + - Responsive layout + +4. **Code Organization** + - Modular component structure + - Clear configuration objects + - Type-safe interfaces diff --git a/src/App.tsx b/src/App.tsx index a72c9dd..02dc15d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,7 +12,6 @@ import NetworkVisualization from './pages/NetworkVisualization'; // Lazy load other pages const Quiz = React.lazy(() => import('./pages/Quiz')); -const Advice = React.lazy(() => import('./pages/Advice')); const Vendors = React.lazy(() => import('./pages/Vendors')); const MarketCalculator = React.lazy(() => import('./pages/MarketCalculator')); @@ -27,7 +26,6 @@ function App() { } /> } /> } /> - } /> } /> } /> } /> diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 101c1b0..ccb5d4b 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -11,26 +11,41 @@ const Navbar = () => { Austen's Wedding Guide -