Reddit Dashboard Code Refactor

make this readable: Reddit-Eval Reddit Analysis Dashboard Component import React, { useState, useEffect } from 'react'; import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'; import { LineChart, Line, BarChart, Bar, RadarChart, Radar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from 'recharts'; import { Activity, Brain, MessageCircle, Heart, User, Target, AlertCircle } from 'lucide-react'; // Data transformation functions const transformCommunicationData = (metrics) => { if (!metrics?.communication_patterns) return []; // Convert the communication patterns into time series data return Object.entries(metrics.communication_patterns).map(([key, value]) => ({ metric: key.replace(/_/g, ' '), value: typeof value === 'string' ? parseFloat(value.replace(/[^0-9.]/g, '')) || 50 : // fallback to 50 if parsing fails value })); }; const transformBehavioralData = (metrics) => { if (!metrics?.behavioral_indicators) return []; return Object.entries(metrics.behavioral_indicators).map(([key, value]) => ({ subject: key.replace(/_/g, ' '), A: typeof value === 'string' ? parseFloat(value.replace(/[^0-9.]/g, '')) || 50 : value, fullMark: 100 })); }; const transformEmotionalData = (metrics) => { if (!metrics?.emotional_intelligence) return []; return Object.entries(metrics.emotional_intelligence).map(([key, value]) => ({ metric: key.replace(/_/g, ' '), value: typeof value === 'string' ? parseFloat(value.replace(/[^0-9.]/g, '')) || 50 : value })); }; const getQuickStats = (metrics) => { const executive = metrics?.executive_summary || {}; return { communicationStyle: executive.communication_style || 'N/A', empathyScore: executive.empathy || 'N/A', criticalThinking: executive.critical_thinking || 'N/A', selfAwareness: executive.self_awareness || 'N/A' }; }; const MetricCard = ({ title, value, icon: Icon, trend }) => ( <Card className="h-32"> <CardHeader className="flex flex-row items-center justify-between pb-2"> <CardTitle className="text-sm font-medium">{title}</CardTitle> <Icon className="h-4 w-4 text-gray-500" /> </CardHeader> <CardContent> <div className="text-2xl font-bold">{value}</div> <p className="text-xs text-gray-500 mt-1">{trend}</p> </CardContent> </Card> ); const RedditAnalysisDashboard = ({ metrics }) => { const [activeTab, setActiveTab] = useState('overview'); const [quickStats, setQuickStats] = useState({}); const [communicationData, setCommunicationData] = useState([]); const [behavioralData, setBehavioralData] = useState([]); const [emotionalData, setEmotionalData] = useState([]); useEffect(() => { if (metrics) { setQuickStats(getQuickStats(metrics)); setCommunicationData(transformCommunicationData(metrics)); setBehavioralData(transformBehavioralData(metrics)); setEmotionalData(transformEmotionalData(metrics)); } }, [metrics]); return ( <div className="p-4 bg-gray-50 min-h-screen"> <div className="max-w-6xl mx-auto"> <h1 className="text-3xl font-bold mb-6">Reddit User Analysis Dashboard</h1> {/* Quick Stats */} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <MetricCard title="Communication Style" value={quickStats.communicationStyle} icon={MessageCircle} trend="Based on recent activity" /> <MetricCard title="Empathy Score" value={quickStats.empathyScore} icon={Heart} trend="Emotional intelligence metric" /> <MetricCard title="Critical Thinking" value={quickStats.criticalThinking} icon={Brain} trend="Cognitive assessment" /> <MetricCard title="Self-Awareness" value={quickStats.selfAwareness} icon={User} trend="Personal insight metric" /> </div> {/* Main Content Tabs */} <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4"> <TabsList className="grid w-full grid-cols-3"> <TabsTrigger value="communication">Communication</TabsTrigger> <TabsTrigger value="behavioral">Behavioral</TabsTrigger> <TabsTrigger value="emotional">Emotional</TabsTrigger> </TabsList> <TabsContent value="communication" className="space-y-4"> <Card> <CardHeader> <CardTitle>Communication Patterns</CardTitle> </CardHeader> <CardContent> <div className="h-80"> <ResponsiveContainer width="100%" height="100%"> <BarChart data={communicationData}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="metric" angle={-45} textAnchor="end" height={100} /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="value" fill="#8884d8" /> </BarChart> </ResponsiveContainer> </div> </CardContent> </Card> </TabsContent> <TabsContent value="behavioral" className="space-y-4"> <Card> <CardHeader> <CardTitle>Behavioral Patterns</CardTitle> </CardHeader> <CardContent> <div className="h-80"> <ResponsiveContainer width="100%" height="100%"> <RadarChart data={behavioralData}> <PolarGrid /> <PolarAngleAxis dataKey="subject" /> <PolarRadiusAxis /> <Radar name="User" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} /> </RadarChart> </ResponsiveContainer> </div> </CardContent> </Card> </TabsContent> <TabsContent value="emotional" className="space-y-4"> <Card> <CardHeader> <CardTitle>Emotional Intelligence Metrics</CardTitle> </CardHeader> <CardContent> <div className="h-80"> <ResponsiveContainer width="100%" height="100%"> <BarChart layout="vertical" data={emotionalData} > <CartesianGrid strokeDasharray="3 3" /> <XAxis type="number" /> <YAxis dataKey="metric" type="category" width={150} /> <Tooltip /> <Legend /> <Bar dataKey="value" fill="#82ca9d" /> </BarChart> </ResponsiveContainer> </div> </CardContent> </Card> </TabsContent> </Tabs> </div> </div> ); }; export default RedditAnalysisDashboard; I'll show you how to modify the dashboard to use the actual metrics from your MetricAgent's output. ```tsx import React, { useState, useEffect } from 'react'; import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'; import { LineChart, Line, BarChart, Bar, RadarChart, Radar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from 'recharts'; import { Activity, Brain, MessageCircle, Heart, User, Target, AlertCircle } from 'lucide-react'; // Data transformation functions const transformCommunicationData = (metrics) => { if (!metrics?.communication_patterns) return []; // Convert the communication patterns into time series data return Object.entries(metrics.communication_patterns).map(([key, value]) => ({ metric: key.replace(/_/g, ' '), value: typeof value === 'string' ? parseFloat(value.replace(/[^0-9.]/g, '')) || 50 : // fallback to 50 if parsing fails value })); }; const transformBehavioralData = (metrics) => { if (!metrics?.behavioral_indicators) return []; return Object.entries(metrics.behavioral_indicators).map(([key, value]) => ({ subject: key.replace(/_/g, ' '), A: typeof value === 'string' ? parseFloat(value.replace(/[^0-9.]/g, '')) || 50 : value, fullMark: 100 })); }; const transformEmotionalData = (metrics) => { if (!metrics?.emotional_intelligence) return []; return Object.entries(metrics.emotional_intelligence).map(([key, value]) => ({ metric: key.replace(/_/g, ' '), value: typeof value === 'string' ? parseFloat(value.replace(/[^0-9.]/g, '')) || 50 : value })); }; const getQuickStats = (metrics) => { const executive = metrics?.executive_summary || {}; return { communicationStyle: executive.communication_style || 'N/A', empathyScore: executive.empathy || 'N/A', criticalThinking: executive.critical_thinking || 'N/A', selfAwareness: executive.self_awareness || 'N/A' }; }; const MetricCard = ({ title, value, icon: Icon, trend }) => ( <Card className="h-32"> <CardHeader className="flex flex-row items-center justify-between pb-2"> <CardTitle className="text-sm font-medium">{title}</CardTitle> <Icon className="h-4 w-4 text-gray-500" /> </CardHeader> <CardContent> <div className="text-2xl font-bold">{value}</div> <p className="text-xs text-gray-500 mt-1">{trend}</p> </CardContent> </Card> ); const RedditAnalysisDashboard = ({ metrics }) => { const [activeTab, setActiveTab] = useState('overview'); const [quickStats, setQuickStats] = useState({}); const [communicationData, setCommunicationData] = useState([]); const [behavioralData, setBehavioralData] = useState([]); const [emotionalData, setEmotionalData] = useState([]); useEffect(() => { if (metrics) { setQuickStats(getQuickStats(metrics)); setCommunicationData(transformCommunicationData(metrics)); setBehavioralData(transformBehavioralData(metrics)); setEmotionalData(transformEmotionalData(metrics)); } }, [metrics]); return ( <div className="p-4 bg-gray-50 min-h-screen"> <div className="max-w-6xl mx-auto"> <h1 className="text-3xl font-bold mb-6">Reddit User Analysis Dashboard</h1> {/* Quick Stats */} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <MetricCard title="Communication Style" value={quickStats.communicationStyle} icon={MessageCircle} trend="Based on recent activity" /> <MetricCard title="Empathy Score" value={quickStats.empathyScore} icon={Heart} trend="Emotional intelligence metric" /> <MetricCard title="Critical Thinking" value={quickStats.criticalThinking} icon={Brain} trend="Cognitive assessment" /> <MetricCard title="Self-Awareness" value={quickStats.selfAwareness} icon={User} trend="Personal insight metric" /> </div> {/* Main Content Tabs */} <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4"> <TabsList className="grid w-full grid-cols-3"> <TabsTrigger value="communication">Communication</TabsTrigger> <TabsTrigger value="behavioral">Behavioral</TabsTrigger> <TabsTrigger value="emotional">Emotional</TabsTrigger> </TabsList> <TabsContent value="communication" className="space-y-4"> <Card> <CardHeader> <CardTitle>Communication Patterns</CardTitle> </CardHeader> <CardContent> <div className="h-80"> <ResponsiveContainer width="100%" height="100%"> <BarChart data={communicationData}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="metric" angle={-45} textAnchor="end" height={100} /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="value" fill="#8884d8" /> </BarChart> </ResponsiveContainer> </div> </CardContent> </Card> </TabsContent> <TabsContent value="behavioral" className="space-y-4"> <Card> <CardHeader> <CardTitle>Behavioral Patterns</CardTitle> </CardHeader> <CardContent> <div className="h-80"> <ResponsiveContainer width="100%" height="100%"> <RadarChart data={behavioralData}> <PolarGrid /> <PolarAngleAxis dataKey="subject" /> <PolarRadiusAxis /> <Radar name="User" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} /> </RadarChart> </ResponsiveContainer> </div> </CardContent> </Card> </TabsContent> <TabsContent value="emotional" className="space-y-4"> <Card> <CardHeader> <CardTitle>Emotional Intelligence Metrics</CardTitle> </CardHeader> <CardContent> <div className="h-80"> <ResponsiveContainer width="100%" height="100%"> <BarChart layout="vertical" data={emotionalData} > <CartesianGrid strokeDasharray="3 3" /> <XAxis type="number" /> <YAxis dataKey="metric" type="category" width={150} /> <Tooltip /> <Legend /> <Bar dataKey="value" fill="#82ca9d" /> </BarChart> </ResponsiveContainer> </div> </CardContent> </Card> </TabsContent> </Tabs> </div> </div> ); }; export default RedditAnalysisDashboard; ``` To integrate this with your existing system: 1. Create a new endpoint in your Flask backend: ```python from flask import Flask, jsonify from flask_cors import CORS app = Flask(__name__) CORS(app) @app.route('/api/metrics/<filename>') def get_metrics(filename): try: # Read the JSON file generated by MetricAgent with open(f"metric_output_{filename}.json", 'r') as file: metrics = json.load(file) return jsonify(metrics) except Exception as e: return jsonify({'error': str(e)}), 500 ``` 2. Modify your `main.py` to save the metrics in a consistent format: ```python def main(): # ... existing code ... # After MetricAgent processes the data timestamp = datetime.now().strftime("%Y%m%d_%H%M%S") metrics_filename = f"metric_output_{timestamp}.json" # Save metrics in a structured format metrics_data = { 'timestamp': timestamp, 'metrics': metric_agent_output } with open(metrics_filename, 'w') as f: json.dump(metrics_data, f, indent=4) ``` 3. Create a wrapper component to fetch and provide the metrics: ```typescript import React, { useState, useEffect } from 'react'; import RedditAnalysisDashboard from './RedditAnalysisDashboard'; const DashboardWrapper = () => { const [metrics, setMetrics] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchMetrics = async () => { try { const response = await fetch('http://localhost:5000/api/metrics/latest'); const data = await response.json(); setMetrics(data); } catch (err) { setError(err.message); } finally { setLoading(false); } }; fetchMetrics(); }, []); if (loading) return <div>Loading metrics...</div>; if (error) return <div>Error loading metrics: {error}</div>; return <RedditAnalysisDashboard metrics={metrics} />; }; export default DashboardWrapper; ``` 4. Update your data transformation functions to handle your specific metric format: ```typescript // Add these helper functions if needed const normalizeValue = (value: string | number): number => { if (typeof value === 'number') return value; // Handle percentage strings if (value.includes('%')) { return parseFloat(value.replace('%', '')); } // Handle text ratings const ratings = { 'very low': 20, 'low': 40, 'medium': 60, 'high': 80, 'very high': 100 }; return ratings[value.toLowerCase()] || 50; }; const transformMetricData = (data: any) => { return Object.entries(data).map(([key, value]) => ({ name: key.replace(/_/g, ' '), value: normalizeValue(value) })); }; ``` 5. Add these values to your .env file: ``` REACT_APP_API_URL=http://localhost:5000 REACT_APP_METRICS_ENDPOINT=/api/metrics ``` The dashboard now: - Uses real metrics from your MetricAgent - Transforms text-based ratings into numerical values for visualization - Handles different data formats gracefully - Provides loading and error states - Updates automatically when new metrics are available Would you like me to explain any specific part in more detail or help with additional customization? Understanding the Multi-Agent Reddit Analysis System: A Comprehensive Guide \## Introduction The Multi-Agent Reddit Analysis System is a sophisticated piece of software designed to analyze Reddit user behavior through a psychological and behavioral lens. Using a network of specialized agents, the system processes Reddit content to generate deep insights into user communication patterns, cognitive frameworks, and behavioral tendencies. \## System Architecture Overview The system employs a directed acyclic graph (DAG) architecture with four primary agents: 1. ExpandAgent - Initial content expansion and context analysis 2. AnalyzeAgent - Deep psychological analysis 3. MetricAgent - Quantitative metrics generation 4. FinalAgent - Narrative synthesis Each agent operates in sequence, building upon the analysis of previous agents to create a comprehensive understanding of the user's Reddit activity. \## Core Components \### Reddit Monitor The RedditMonitor class serves as the data collection foundation. It: \- Authenticates with Reddit using PRAW (Python Reddit API Wrapper) \- Fetches recent posts and comments from a specified user \- Handles error logging and authentication verification \- Provides methods for customizing the amount of content retrieved \### Agent Framework The system uses a BaseAgent class that provides common functionality for all agents. Each specialized agent inherits from this base class and implements its own processing logic: \#### ExpandAgent The ExpandAgent performs the initial analysis by: \- Expanding on the content's context \- Identifying underlying behavioral patterns \- Analyzing communication impact \- Exploring related themes \- Providing constructive feedback \#### AnalyzeAgent This agent conducts a multi-layered psychological analysis examining: \- Communication patterns \- Cognitive frameworks \- Emotional intelligence \- Behavioral indicators \- Identity expression \- Psychological needs \#### MetricAgent The MetricAgent quantifies the analysis into structured JSON data covering: \- Executive summary metrics \- Communication pattern measurements \- Cognitive framework assessments \- Emotional intelligence indicators \- Behavioral metrics \- Identity expression measures \- Psychological need evaluations \#### FinalAgent The FinalAgent synthesizes all previous analyses into a creative narrative that captures the essence of the user's online persona. \## Implementation Details \### Data Flow 1. The system begins by authenticating with Reddit and collecting recent user activity 2. Content flows through the agents in topological order 3. Each agent processes and enhances the analysis 4. Results are saved at various stages with timestamped filenames 5. The final output combines all analyses into a comprehensive report \### Error Handling The system implements robust error handling: \- Authentication failures are logged and handled gracefully \- Processing errors in individual agents don't crash the entire system \- Results are saved even if the process doesn't complete all iterations \### Configuration The system uses environment variables for sensitive information: \- Reddit API credentials \- Model configurations \- Endpoint settings \## Best Practices for Usage \### Setup Requirements 1. Create a \`.env\` file with Reddit API credentials 2. Ensure all required Python packages are installed 3. Configure the local API endpoint (default: http://localhost:11434) 4. Set up appropriate logging directories \### Customization Options \- Adjust the \`max\_iterations\` parameter in main() to control processing depth \- Modify agent prompts to focus on specific aspects of analysis \- Customize the MetricAgent's JSON structure for different analysis needs \- Configure logging levels based on monitoring needs \### Performance Considerations \- Monitor API rate limits when fetching Reddit content \- Consider implementing caching for frequent requests \- Adjust batch sizes based on available computational resources \- Use appropriate timeout settings for API calls \## Advanced Features \### Graph-Based Processing The system uses NetworkX to create a directed graph for agent interaction: \- Ensures proper processing order \- Allows for easy addition of new agents \- Maintains clear data flow visualization \- Supports future parallelization possibilities \### Extensibility The system is designed for easy expansion: \- New agents can be added by inheriting from BaseAgent \- Additional metrics can be included in the MetricAgent \- Custom narrative styles can be implemented in the FinalAgent \- Alternative data sources can be integrated alongside Reddit \## Future Enhancement Possibilities 1. Real-time Analysis \- Implement websocket connections for live monitoring \- Add streaming capabilities for continuous analysis 2. Advanced Visualization \- Create dashboard interfaces for metric visualization \- Implement interactive graph displays of user behavior 3. Machine Learning Integration \- Add sentiment analysis models \- Implement pattern recognition for behavior prediction \- Include anomaly detection for unusual behavior 4. Enhanced Reporting \- Generate PDF reports with visualizations \- Create comparative analysis across multiple users \- Implement trend analysis over time \## Conclusion The Multi-Agent Reddit Analysis System represents a sophisticated approach to understanding user behavior on Reddit. Through its layered analysis and modular design, it provides deep insights while maintaining extensibility and robustness. Whether used for research, moderation, or personal insight, the system offers a powerful tool for understanding online behavior patterns. The Future of Quantum Computing: A Critical Evaluation Quantum computing is no longer just a speculative field; it is rapidly becoming a focal point for global technological and economic shifts. But as we stand at the precipice of this revolution, the conversation cannot simply be about the *potential* of quantum computing—it’s about the responsibility that comes with its advancement. For all the promise of exponentially faster processing speeds and solving problems previously deemed impossible, we must examine not just the opportunities, but the implications of this emerging technology on society.

That was a lot of code and text all packed together! Here’s a cleaned-up, structured version of what your Reddit Analysis Dashboard does: --- ## **Reddit Analysis Dashboard** ### **Overview** This React-based dashboard provides an insightful visualization of Reddit user behavior. It processes and displays metrics related to communication, emotional intelligence, and behavioral patterns using interactive charts. ### **Key Features** - **Quick Stats:** Summarizes key metrics like communication style, empathy score, critical thinking, and self-awareness. - **Data Visualizations:** Uses `recharts` to display data in bar charts, radar charts, and line charts. - **Tab-Based Navigation:** Switch between communication, behavioral, and emotional metrics seamlessly. - **Dynamic Data Handling:** Automatically updates based on new metric inputs. - **API Integration:** Fetches structured analysis data from a backend service. --- ### **Code Breakdown** #### **1. Data Transformation Functions** These functions process raw metric data into structured formats suitable for visualization. ```tsx const transformCommunicationData = (metrics) => { if (!metrics?.communication_patterns) return []; return Object.entries(metrics.communication_patterns).map(([key, value]) => ({ metric: key.replace(/_/g, ' '), value: typeof value === 'string' ? parseFloat(value.replace(/[^0-9.]/g, '')) || 50 : value, })); }; ``` Similar functions exist for **behavioral** and **emotional intelligence** data. #### **2. Quick Stats Component** A small UI component displaying summary metrics at the top. ```tsx const MetricCard = ({ title, value, icon: Icon, trend }) => ( <Card className="h-32"> <CardHeader className="flex flex-row items-center justify-between pb-2"> <CardTitle className="text-sm font-medium">{title}</CardTitle> <Icon className="h-4 w-4 text-gray-500" /> </CardHeader> <CardContent> <div className="text-2xl font-bold">{value}</div> <p className="text-xs text-gray-500 mt-1">{trend}</p> </CardContent> </Card> ); ``` #### **3. Main Dashboard Component** - Loads data using `useState` and `useEffect` - Displays quick stats and tab-based content - Renders charts based on the selected tab ```tsx const RedditAnalysisDashboard = ({ metrics }) => { const [activeTab, setActiveTab] = useState('overview'); const [quickStats, setQuickStats] = useState({}); const [communicationData, setCommunicationData] = useState([]); const [behavioralData, setBehavioralData] = useState([]); const [emotionalData, setEmotionalData] = useState([]); useEffect(() => { if (metrics) { setQuickStats(getQuickStats(metrics)); setCommunicationData(transformCommunicationData(metrics)); setBehavioralData(transformBehavioralData(metrics)); setEmotionalData(transformEmotionalData(metrics)); } }, [metrics]); return ( <div className="p-4 bg-gray-50 min-h-screen"> <div className="max-w-6xl mx-auto"> <h1 className="text-3xl font-bold mb-6">Reddit User Analysis Dashboard</h1> {/* Quick Stats */} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <MetricCard title="Communication Style" value={quickStats.communicationStyle} icon={MessageCircle} trend="Based on recent activity" /> <MetricCard title="Empathy Score" value={quickStats.empathyScore} icon={Heart} trend="Emotional intelligence metric" /> <MetricCard title="Critical Thinking" value={quickStats.criticalThinking} icon={Brain} trend="Cognitive assessment" /> <MetricCard title="Self-Awareness" value={quickStats.selfAwareness} icon={User} trend="Personal insight metric" /> </div> {/* Main Content Tabs */} <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4"> <TabsList className="grid w-full grid-cols-3"> <TabsTrigger value="communication">Communication</TabsTrigger> <TabsTrigger value="behavioral">Behavioral</TabsTrigger> <TabsTrigger value="emotional">Emotional</TabsTrigger> </TabsList> {/* Communication Tab */} <TabsContent value="communication" className="space-y-4"> <Card> <CardHeader><CardTitle>Communication Patterns</CardTitle></CardHeader> <CardContent> <div className="h-80"> <ResponsiveContainer width="100%" height="100%"> <BarChart data={communicationData}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="metric" angle={-45} textAnchor="end" height={100} /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="value" fill="#8884d8" /> </BarChart> </ResponsiveContainer> </div> </CardContent> </Card> </TabsContent> {/* Behavioral Tab */} <TabsContent value="behavioral" className="space-y-4"> <Card> <CardHeader><CardTitle>Behavioral Patterns</CardTitle></CardHeader> <CardContent> <div className="h-80"> <ResponsiveContainer width="100%" height="100%"> <RadarChart data={behavioralData}> <PolarGrid /> <PolarAngleAxis dataKey="subject" /> <PolarRadiusAxis /> <Radar name="User" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} /> </RadarChart> </ResponsiveContainer> </div> </CardContent> </Card> </TabsContent> {/* Emotional Tab */} <TabsContent value="emotional" className="space-y-4"> <Card> <CardHeader><CardTitle>Emotional Intelligence Metrics</CardTitle></CardHeader> <CardContent> <div className="h-80"> <ResponsiveContainer width="100%" height="100%"> <BarChart layout="vertical" data={emotionalData}> <CartesianGrid strokeDasharray="3 3" /> <XAxis type="number" /> <YAxis dataKey="metric" type="category" width={150} /> <Tooltip /> <Legend /> <Bar dataKey="value" fill="#82ca9d" /> </BarChart> </ResponsiveContainer> </div> </CardContent> </Card> </TabsContent> </Tabs> </div> </div> ); }; export default RedditAnalysisDashboard; ``` --- ### **API Integration** A Flask backend serves the metric data. The API fetches stored JSON reports: ```python from flask import Flask, jsonify import json app = Flask(__name__) @app.route('/api/metrics/latest') def get_metrics(): try: with open("latest_metrics.json", "r") as file: metrics = json.load(file) return jsonify(metrics) except Exception as e: return jsonify({'error': str(e)}), 500 if __name__ == "__main__": app.run(debug=True) ``` #### **React API Call** A wrapper component fetches the latest metrics: ```tsx import React, { useState, useEffect } from 'react'; import RedditAnalysisDashboard from './RedditAnalysisDashboard'; const DashboardWrapper = () => { const [metrics, setMetrics] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchMetrics = async () => { try { const response = await fetch('http://localhost:5000/api/metrics/latest'); const data = await response.json(); setMetrics(data); } catch (err) { setError(err.message); } finally { setLoading(false); } }; fetchMetrics(); }, []); if (loading) return <div>Loading metrics...</div>; if (error) return <div>Error loading metrics: {error}</div>; return <RedditAnalysisDashboard metrics={metrics} />; }; export default DashboardWrapper; ``` --- ### **Conclusion** - **Modular & Extendable:** Each component serves a distinct purpose. - **Scalable Backend:** Can be expanded to process real-time data. - **User-Friendly UI:** Well-structured dashboard with intuitive data visualization. Would you like to refine the UI further or add new features? 🚀