Spaces:
Runtime error
Runtime error
| import React from 'react'; | |
| import { motion } from 'framer-motion'; | |
| import { | |
| BookOpen, | |
| Database, | |
| Zap, | |
| Target, | |
| MousePointerClick | |
| } from 'lucide-react'; | |
| import { | |
| AreaChart, | |
| Area, | |
| XAxis, | |
| YAxis, | |
| CartesianGrid, | |
| Tooltip, | |
| ResponsiveContainer, | |
| PieChart, | |
| Pie, | |
| Cell, | |
| LineChart, | |
| Line, | |
| ScatterChart, | |
| Scatter, | |
| ZAxis | |
| } from 'recharts'; | |
| import { | |
| ANALYTICS_DATA, | |
| TOPIC_DISTRIBUTION, | |
| COLORS, | |
| PR_CURVE_DATA, | |
| EMBEDDING_DATA | |
| } from '../../constants'; | |
| export function StatCard({ i, stat }) { | |
| return ( | |
| <motion.div | |
| initial={{ opacity: 0, y: 20 }} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ delay: i * 0.1 }} | |
| className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[2rem] shadow-sm hover:shadow-xl transition-all group" | |
| > | |
| <div className="flex items-center justify-between mb-4"> | |
| <div className={`p-3 ${stat.bg} dark:bg-brand/10 rounded-2xl group-hover:scale-110 transition-transform`}> | |
| <stat.icon className={`w-5 h-5 ${stat.color}`} /> | |
| </div> | |
| <div className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{stat.label}</div> | |
| </div> | |
| <div className="space-y-1"> | |
| <h3 className="text-3xl font-display font-bold text-slate-900 dark:text-white tracking-tighter">{stat.value}</h3> | |
| <div className="flex items-center gap-1"> | |
| <span className={`text-[10px] font-bold ${stat.trend.startsWith('+') ? 'text-emerald-500' : 'text-blue-500'}`}> | |
| {stat.trend} | |
| </span> | |
| <span className="text-[10px] text-slate-400 font-medium">Since last epoch</span> | |
| </div> | |
| </div> | |
| </motion.div> | |
| ); | |
| } | |
| export function OverviewTab({ isDarkMode, stats }) { | |
| return ( | |
| <div className="space-y-8"> | |
| {/* Top Row: CTR + Precision + Latency */} | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| {[ | |
| { label: 'CTR (CLICK-THROUGH)', value: '24.8%', trend: '+1.2%', icon: MousePointerClick, color: 'text-brand', bg: 'bg-brand/5' }, | |
| { label: 'PRECISION INDEX', value: '0.982', trend: '+0.002', icon: Target, color: 'text-indigo-500', bg: 'bg-indigo-50' }, | |
| { label: 'LATENCY (AVG)', value: '84ms', trend: '-14ms', icon: Zap, color: 'text-amber-500', bg: 'bg-amber-50' }, | |
| ].map((stat, i) => ( | |
| <StatCard key={i} i={i} stat={stat} /> | |
| ))} | |
| </div> | |
| {/* Middle Row: Query Trends + Topics */} | |
| <div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| {/* Query Trends Chart */} | |
| <div className="lg:col-span-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[2.5rem] p-8 shadow-sm"> | |
| <div className="flex items-center justify-between mb-8"> | |
| <div> | |
| <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-1">Query Trends</h3> | |
| <p className="text-xs text-slate-400 font-medium">Daily search volume vs AI usage</p> | |
| </div> | |
| <div className="flex gap-6"> | |
| <div className="flex items-center gap-2"> | |
| <div className="w-2.5 h-2.5 rounded-full bg-brand" /> | |
| <span className="text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">Searches</span> | |
| </div> | |
| <div className="flex items-center gap-2"> | |
| <div className="w-2.5 h-2.5 rounded-full bg-indigo-400" /> | |
| <span className="text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">AI Compute</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="h-[320px]"> | |
| <ResponsiveContainer width="100%" height="100%"> | |
| <AreaChart data={ANALYTICS_DATA} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}> | |
| <defs> | |
| <linearGradient id="colorSearches" x1="0" y1="0" x2="0" y2="1"> | |
| <stop offset="5%" stopColor="#534AB7" stopOpacity={0.1}/> | |
| <stop offset="95%" stopColor="#534AB7" stopOpacity={0}/> | |
| </linearGradient> | |
| <linearGradient id="colorAI" x1="0" y1="0" x2="0" y2="1"> | |
| <stop offset="5%" stopColor="#818CF8" stopOpacity={0.1}/> | |
| <stop offset="95%" stopColor="#818CF8" stopOpacity={0}/> | |
| </linearGradient> | |
| </defs> | |
| <CartesianGrid strokeDasharray="3 3" vertical={false} stroke={isDarkMode ? "#1E293B" : "#F1F5F9"} /> | |
| <XAxis | |
| dataKey="name" | |
| axisLine={false} | |
| tickLine={false} | |
| tick={{ fontSize: 10, fill: isDarkMode ? '#64748B' : '#94A3B8', fontWeight: 'bold' }} | |
| dy={10} | |
| /> | |
| <YAxis | |
| axisLine={false} | |
| tickLine={false} | |
| tick={{ fontSize: 10, fill: isDarkMode ? '#64748B' : '#94A3B8', fontWeight: 'bold' }} | |
| /> | |
| <Tooltip | |
| contentStyle={{ borderRadius: '20px', border: 'none', backgroundColor: isDarkMode ? '#0F172A' : '#FFFFFF', boxShadow: '0 10px 25px rgba(0,0,0,0.3)', padding: '16px' }} | |
| itemStyle={{ fontWeight: 'bold', fontSize: '11px', color: isDarkMode ? '#F8FAFC' : '#0F172A' }} | |
| /> | |
| <Area type="monotone" dataKey="searches" stroke="#534AB7" strokeWidth={3} fillOpacity={1} fill="url(#colorSearches)" /> | |
| <Area type="monotone" dataKey="ai" stroke="#818CF8" strokeWidth={3} fillOpacity={1} fill="url(#colorAI)" /> | |
| </AreaChart> | |
| </ResponsiveContainer> | |
| </div> | |
| </div> | |
| {/* Density Chart (Topics) */} | |
| <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[2.5rem] p-8 shadow-sm flex flex-col items-center"> | |
| <h3 className="text-base font-bold text-slate-900 dark:text-white mb-6 w-full text-left">Topics</h3> | |
| <div className="h-[200px] w-full"> | |
| <ResponsiveContainer width="100%" height="100%"> | |
| <PieChart> | |
| <Pie | |
| data={stats?.topic_distribution || TOPIC_DISTRIBUTION} | |
| cx="50%" | |
| cy="50%" | |
| innerRadius={60} | |
| outerRadius={80} | |
| paddingAngle={8} | |
| dataKey="value" | |
| > | |
| {(stats?.topic_distribution || TOPIC_DISTRIBUTION).map((entry, index) => ( | |
| <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> | |
| ))} | |
| </Pie> | |
| <Tooltip /> | |
| </PieChart> | |
| </ResponsiveContainer> | |
| </div> | |
| <div className="w-full space-y-3 mt-6"> | |
| {(stats?.topic_distribution || TOPIC_DISTRIBUTION).map((topic, i) => ( | |
| <div key={topic.name} className="flex items-center justify-between"> | |
| <div className="flex items-center gap-2"> | |
| <div className="w-2 h-2 rounded-full" style={{ backgroundColor: COLORS[i % COLORS.length] }} /> | |
| <span className="text-[11px] font-bold text-slate-500 dark:text-slate-400 uppercase">{topic.name}</span> | |
| </div> | |
| <span className="text-xs font-bold text-slate-900 dark:text-white">{topic.value}</span> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </div> | |
| {/* Bottom Row: Relevance + Embedding Visualization */} | |
| <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| {/* PR Curve */} | |
| <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[2.5rem] p-8 shadow-sm"> | |
| <div className="mb-6"> | |
| <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-1">Relevance</h3> | |
| <p className="text-xs text-slate-400 font-medium">Precision-Recall Curve</p> | |
| </div> | |
| <div className="h-[250px]"> | |
| <ResponsiveContainer width="100%" height="100%"> | |
| <LineChart data={PR_CURVE_DATA} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}> | |
| <CartesianGrid strokeDasharray="3 3" vertical={false} stroke={isDarkMode ? "#1E293B" : "#F1F5F9"} /> | |
| <XAxis | |
| dataKey="recall" | |
| type="number" | |
| domain={[0, 100]} | |
| axisLine={false} | |
| tickLine={false} | |
| tick={{ fontSize: 10, fill: isDarkMode ? '#64748B' : '#94A3B8', fontWeight: 'bold' }} | |
| dy={10} | |
| /> | |
| <YAxis | |
| axisLine={false} | |
| tickLine={false} | |
| tick={{ fontSize: 10, fill: isDarkMode ? '#64748B' : '#94A3B8', fontWeight: 'bold' }} | |
| /> | |
| <Tooltip | |
| contentStyle={{ borderRadius: '20px', border: 'none', backgroundColor: isDarkMode ? '#0F172A' : '#FFFFFF', boxShadow: '0 10px 25px rgba(0,0,0,0.3)', padding: '16px' }} | |
| itemStyle={{ fontWeight: 'bold', fontSize: '11px', color: isDarkMode ? '#F8FAFC' : '#0F172A' }} | |
| /> | |
| <Line type="monotone" dataKey="precision" stroke="#10B981" strokeWidth={3} dot={false} /> | |
| </LineChart> | |
| </ResponsiveContainer> | |
| </div> | |
| </div> | |
| {/* Embedding Scatter Plot */} | |
| <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[2.5rem] p-8 shadow-sm"> | |
| <div className="mb-6"> | |
| <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-1">Embedding Visualization</h3> | |
| <p className="text-xs text-slate-400 font-medium">2D PCA projection of vector space</p> | |
| </div> | |
| <div className="h-[250px]"> | |
| <ResponsiveContainer width="100%" height="100%"> | |
| <ScatterChart margin={{ top: 10, right: 10, left: 0, bottom: 0 }}> | |
| <CartesianGrid strokeDasharray="3 3" stroke={isDarkMode ? "#1E293B" : "#F1F5F9"} /> | |
| <XAxis type="number" dataKey="x" name="PCA1" axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: isDarkMode ? '#64748B' : '#94A3B8' }} /> | |
| <YAxis type="number" dataKey="y" name="PCA2" axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: isDarkMode ? '#64748B' : '#94A3B8' }} /> | |
| <ZAxis type="number" dataKey="z" range={[50, 200]} /> | |
| <Tooltip | |
| cursor={{ strokeDasharray: '3 3' }} | |
| contentStyle={{ borderRadius: '16px', border: 'none', backgroundColor: isDarkMode ? '#0F172A' : '#FFFFFF', boxShadow: '0 10px 25px rgba(0,0,0,0.3)' }} | |
| /> | |
| <Scatter name="Algebra" data={EMBEDDING_DATA.filter(d => d.cluster === 'Algebra')} fill="#534AB7" /> | |
| <Scatter name="Calculus" data={EMBEDDING_DATA.filter(d => d.cluster === 'Calculus')} fill="#7C3AED" /> | |
| <Scatter name="Statistics" data={EMBEDDING_DATA.filter(d => d.cluster === 'Statistics')} fill="#10B981" /> | |
| </ScatterChart> | |
| </ResponsiveContainer> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |