Page optimization

dashboard/src/components/dashboard/experiments-status-chart.tsx

@@ -41,49 +41,52 @@ export function ExperimentsStatusChart({ experiments }: ExperimentsStatusChartPr
       .sort((a, b) => b.value - a.value); // Sort by count descending
   }, [experiments]);
 
-  if (chartData.length === 0) {
-    return (
-      <div className="flex h-full items-center justify-center text-muted-foreground">
-        No data available
-      </div>
-    );
-  }
-
   // Calculate total for percentages
   const total = chartData.reduce((sum, item) => sum + item.value, 0);
 
   return (
-    <div className="space-y-3">
-      <h3 className="text-sm font-semibold">Experiments Distribution</h3>
-      <ResponsiveContainer width="100%" height={240}>
-        <PieChart>
-          <Pie
-            data={chartData}
-            dataKey="value"
-            nameKey="name"
-            cx="50%"
-            cy="50%"
-            outerRadius={75}
-            labelLine={false}
-            label={(entry) => `${((entry.value / total) * 100).toFixed(1)}%`}
-            style={{ fontSize: '11px' }}
-          >
-            {chartData.map((entry, index) => (
-              <Cell key={`cell-${index}`} fill={entry.color} />
-            ))}
-          </Pie>
-          <Tooltip
-            formatter={(value: number) => [value, 'Count']}
-            contentStyle={{
-              backgroundColor: 'hsl(var(--card))',
-              border: '1px solid hsl(var(--border))',
-              borderRadius: '6px',
-              fontSize: '11px',
-            }}
-          />
-          <Legend wrapperStyle={{ fontSize: '11px' }} />
-        </PieChart>
-      </ResponsiveContainer>
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold">Experiments Distribution</h3>
+        <div className="text-xs text-muted-foreground">
+          Total: {total}
+        </div>
+      </div>
+      {chartData.length === 0 ? (
+        <div className="flex items-center justify-center h-[240px] text-sm text-muted-foreground">
+          No data available
+        </div>
+      ) : (
+        <ResponsiveContainer width="100%" height={240}>
+          <PieChart>
+            <Pie
+              data={chartData}
+              dataKey="value"
+              nameKey="name"
+              cx="50%"
+              cy="50%"
+              outerRadius={75}
+              labelLine={false}
+              label={(entry) => `${((entry.value / total) * 100).toFixed(1)}%`}
+              style={{ fontSize: '11px' }}
+            >
+              {chartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color} />
+              ))}
+            </Pie>
+            <Tooltip
+              formatter={(value: number) => [value, 'Count']}
+              contentStyle={{
+                backgroundColor: 'hsl(var(--card))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: '6px',
+                fontSize: '11px',
+              }}
+            />
+            <Legend wrapperStyle={{ fontSize: '11px' }} />
+          </PieChart>
+        </ResponsiveContainer>
+      )}
     </div>
   );
 }

dashboard/src/components/dashboard/experiments-timeline-chart.tsx

@@ -75,7 +75,12 @@ export function ExperimentsTimelineChart({ experiments, timeRange }: Experiments
         </div>
       </div>
 
-      <ResponsiveContainer width="100%" height={240}>
+      {chartData.length === 0 ? (
+        <div className="flex items-center justify-center h-[240px] text-sm text-muted-foreground">
+          No experiments data available for this time range
+        </div>
+      ) : (
+        <ResponsiveContainer width="100%" height={240}>
         <LineChart data={chartData} margin={{ left: 10, right: 15, top: 10, bottom: 5 }}>
           <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" opacity={0.5} />
           <XAxis
@@ -138,6 +143,7 @@ export function ExperimentsTimelineChart({ experiments, timeRange }: Experiments
           />
         </LineChart>
       </ResponsiveContainer>
+      )}
     </div>
   );
 }

dashboard/src/components/dashboard/model-distribution-chart.tsx

@@ -27,54 +27,57 @@ const COLORS = [
 ];
 
 export function ModelDistributionChart({ data }: ModelDistributionChartProps) {
-  if (!data || data.length === 0) {
-    return (
-      <div className="flex items-center justify-center h-80 text-sm text-muted-foreground">
-        No model data available
-      </div>
-    );
-  }
-
   // Calculate total for percentages
-  const total = data.reduce((sum, item) => sum + item.count, 0);
+  const total = data && data.length > 0 ? data.reduce((sum, item) => sum + item.count, 0) : 0;
 
   // Format data for the pie chart
-  const chartData = data.map((item) => ({
+  const chartData = data && data.length > 0 ? data.map((item) => ({
     name: item.model,
     value: item.count,
-  }));
+  })) : [];
 
   return (
-    <div className="space-y-3">
-      <h3 className="text-sm font-semibold">Model Distribution</h3>
-      <ResponsiveContainer width="100%" height={240}>
-        <PieChart>
-          <Pie
-            data={chartData}
-            cx="50%"
-            cy="50%"
-            labelLine={false}
-            label={(entry) => `${((entry.value / total) * 100).toFixed(1)}%`}
-            outerRadius={75}
-            dataKey="value"
-            style={{ fontSize: '11px' }}
-          >
-            {chartData.map((entry, index) => (
-              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-            ))}
-          </Pie>
-          <Tooltip
-            formatter={(value: number) => [value, 'Count']}
-            contentStyle={{
-              backgroundColor: 'hsl(var(--card))',
-              border: '1px solid hsl(var(--border))',
-              borderRadius: '6px',
-              fontSize: '11px',
-            }}
-          />
-          <Legend wrapperStyle={{ fontSize: '11px' }} />
-        </PieChart>
-      </ResponsiveContainer>
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold">Model Distribution</h3>
+        <div className="text-xs text-muted-foreground">
+          Total: {total}
+        </div>
+      </div>
+      {!data || data.length === 0 ? (
+        <div className="flex items-center justify-center h-[240px] text-sm text-muted-foreground">
+          No model data available
+        </div>
+      ) : (
+        <ResponsiveContainer width="100%" height={240}>
+          <PieChart>
+            <Pie
+              data={chartData}
+              cx="50%"
+              cy="50%"
+              labelLine={false}
+              label={(entry) => `${((entry.value / total) * 100).toFixed(1)}%`}
+              outerRadius={75}
+              dataKey="value"
+              style={{ fontSize: '11px' }}
+            >
+              {chartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+              ))}
+            </Pie>
+            <Tooltip
+              formatter={(value: number) => [value, 'Count']}
+              contentStyle={{
+                backgroundColor: 'hsl(var(--card))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: '6px',
+                fontSize: '11px',
+              }}
+            />
+            <Legend wrapperStyle={{ fontSize: '11px' }} />
+          </PieChart>
+        </ResponsiveContainer>
+      )}
     </div>
   );
 }

dashboard/src/pages/dashboard/index.tsx

@@ -173,12 +173,8 @@ export function DashboardPage() {
             <CardContent className="p-4">
               {experimentsLoading ? (
                 <Skeleton className="h-72 w-full" />
-              ) : filteredExperiments && filteredExperiments.length > 0 ? (
-                <ExperimentsStatusChart experiments={filteredExperiments} />
               ) : (
-                <div className="flex h-72 items-center justify-center text-sm text-muted-foreground">
-                  No experiments data available for this time range
-                </div>
+                <ExperimentsStatusChart experiments={filteredExperiments || []} />
               )}
             </CardContent>
           </Card>
@@ -188,12 +184,8 @@ export function DashboardPage() {
             <CardContent className="p-4">
               {experimentsLoading ? (
                 <Skeleton className="h-72 w-full" />
-              ) : filteredExperiments && filteredExperiments.length > 0 ? (
-                <ExperimentsTimelineChart experiments={filteredExperiments} timeRange={timeRange} />
               ) : (
-                <div className="flex h-72 items-center justify-center text-sm text-muted-foreground">
-                  No experiments data available for this time range
-                </div>
+                <ExperimentsTimelineChart experiments={filteredExperiments || []} timeRange={timeRange} />
               )}
             </CardContent>
           </Card>
@@ -206,12 +198,8 @@ export function DashboardPage() {
             <CardContent className="p-4">
               {modelDistributionsLoading ? (
                 <Skeleton className="h-72 w-full" />
-              ) : modelDistributions && modelDistributions.length > 0 ? (
-                <ModelDistributionChart data={modelDistributions} />
               ) : (
-                <div className="flex items-center justify-center h-72 text-sm text-muted-foreground">
-                  No model distribution data available
-                </div>
+                <ModelDistributionChart data={modelDistributions || []} />
               )}
             </CardContent>
           </Card>

dashboard/static/index.html

@@ -6,8 +6,8 @@
     <link rel="icon" type="image/png" href="/static/assets/logo-D6hHn9pX.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AlphaTrion</title>
-  <script type="module" crossorigin src="/static/assets/index-BT9mQZGg.js"></script>
-  <link rel="stylesheet" crossorigin href="/static/assets/index-w66dPa7K.css">
+  <script type="module" crossorigin src="/static/assets/index-K_s21zBY.js"></script>
+  <link rel="stylesheet" crossorigin href="/static/assets/index-Cc2sXRHQ.css">
 </head>
 
 <body>