fix: charts data mismatch & project api key generation

SaboniAmine · SaboniAmine · commit 2edef9d365ee · 2026-06-07T19:46:27.000+02:00
diff --git a/webapp/src/api/schemas.ts b/webapp/src/api/schemas.ts
@@ -47,16 +47,25 @@ export const ProjectInputsSchema = z.object({
 });
 export type ProjectInputs = z.infer<typeof ProjectInputsSchema>;
 
+// `token` is only populated on creation; list responses serialize it as null.
 export const ProjectTokenSchema = z.object({
     id: z.string(),
     project_id: z.string(),
-    last_used: z.string().nullable(),
-    name: z.string(),
-    token: z.string(),
+    last_used: z.string().nullish(),
+    name: z.string().nullish(),
+    token: z.string().nullish(),
     access: z.number(),
+    revoked: z.boolean().nullish(),
 });
 export type IProjectToken = z.infer<typeof ProjectTokenSchema>;
 
+export const AccessLevel = {
+    READ: 1,
+    WRITE: 2,
+    READ_WRITE: 3,
+} as const;
+export type AccessLevel = (typeof AccessLevel)[keyof typeof AccessLevel];
+
 // Backend's `Optional[...]` fields are serialized as JSON `null` (Pydantic
 // default, no `exclude_none`). Zod's `.optional()` accepts `undefined`
 // only — `.nullish()` accepts `null | undefined`, which is what we need
diff --git a/webapp/src/components/createExperimentModal.tsx b/webapp/src/components/createExperimentModal.tsx
@@ -24,7 +24,7 @@ export default function CreateExperimentModal({
     projectId: string;
     isOpen: boolean;
     onClose: () => void;
-    onExperimentCreated: () => void;
+    onExperimentCreated?: () => void | Promise<void>;
 }) {
     const [isCopied, setIsCopied] = useState(false);
     const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -82,7 +82,7 @@ export default function CreateExperimentModal({
             const newExperiment = await createExperiment(experimentData);
             setCreatedExperiment(newExperiment);
             setIsCreated(true);
-            await onExperimentCreated();
+            await onExperimentCreated?.();
             toast.success(
                 `Experiment ${experimentData.name} created successfully`,
             );
diff --git a/webapp/src/components/emissions-time-series.tsx b/webapp/src/components/emissions-time-series.tsx
@@ -18,6 +18,7 @@ import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
 import { ExportCsvButton } from "@/components/export-csv-button";
 import { getEmissionsTimeSeries } from "@/api/runs";
 import { exportEmissionsTimeSeriesCsv } from "@/utils/export";
+import { format } from "date-fns";
 import { Cpu, HardDrive, Server } from "lucide-react";
 
 interface EmissionsTimeSeriesChartProps {
@@ -48,26 +49,31 @@ export default function EmissionsTimeSeriesChart({
         React.useState<keyof typeof chartConfig>("emissions_rate");
     const [emissionTimeSeries, setEmissionTimeSeries] =
         React.useState<EmissionsTimeSeries | null>(null);
-    const [isLoading, setIsLoading] = React.useState(true);
+    const [isLoading, setIsLoading] = React.useState(false);
 
     React.useEffect(() => {
-        async function fetchData() {
+        if (!runId) return;
+        let cancelled = false;
+        (async () => {
             setIsLoading(true);
             try {
                 const data = await getEmissionsTimeSeries(runId);
-                setEmissionTimeSeries(data);
+                if (!cancelled) setEmissionTimeSeries(data);
             } catch (error) {
                 console.error("Failed to fetch emissions time series:", error);
             } finally {
-                setIsLoading(false);
+                if (!cancelled) setIsLoading(false);
             }
-        }
-
-        if (runId) {
-            fetchData();
-        }
+        })();
+        return () => {
+            cancelled = true;
+        };
     }, [runId]);
 
+    if (!runId) {
+        return null;
+    }
+
     if (isLoading) {
         return <div>Loading...</div>;
     }
@@ -196,13 +202,9 @@ export default function EmissionsTimeSeriesChart({
                                 axisLine={false}
                                 tickMargin={8}
                                 minTickGap={32}
-                                tickFormatter={(value) => {
-                                    const date = new Date(value);
-                                    return date.toLocaleDateString("en-US", {
-                                        month: "short",
-                                        day: "numeric",
-                                    });
-                                }}
+                                tickFormatter={(value) =>
+                                    format(new Date(value), "MMM d, HH:mm")
+                                }
                             />
                             <YAxis
                                 tickLine={false}
@@ -213,15 +215,12 @@ export default function EmissionsTimeSeriesChart({
                                 content={
                                     <ChartTooltipContent
                                         className="w-[150px]"
-                                        labelFormatter={(value) => {
-                                            return new Date(
-                                                value,
-                                            ).toLocaleDateString("en-US", {
-                                                month: "short",
-                                                day: "numeric",
-                                                year: "numeric",
-                                            });
-                                        }}
+                                        labelFormatter={(value) =>
+                                            format(
+                                                new Date(value),
+                                                "MMM d, yyyy HH:mm",
+                                            )
+                                        }
                                     />
                                 }
                             />
diff --git a/webapp/src/components/experiment-bar-chart.tsx b/webapp/src/components/experiment-bar-chart.tsx
@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/chart";
 import { exportExperimentsToCsv } from "@/utils/export";
 import { Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useMemo, useState } from "react";
 import { ExportCsvButton } from "./export-csv-button";
 
 interface ExperimentsBarChartProps {
@@ -47,37 +47,38 @@ export default function ExperimentsBarChart({
     localLoading = false,
     projectName,
 }: ExperimentsBarChartProps) {
-    const [selectedBar, setSelectedBar] = useState(0);
     const [isExporting, setIsExporting] = useState(false);
 
-    const handleBarClick = (data: ExperimentReport, index: number) => {
-        onExperimentClick(data.experiment_id);
-    };
-    useEffect(() => {
-        const highlightedBar = experimentsReportData.findIndex(
-            (experiment) => experiment.experiment_id === selectedExperimentId,
-        );
-        setSelectedBar(highlightedBar);
-    }, [selectedExperimentId, experimentsReportData]);
+    const selectedBar = useMemo(
+        () =>
+            experimentsReportData.findIndex(
+                (experiment) =>
+                    experiment.experiment_id === selectedExperimentId,
+            ),
+        [experimentsReportData, selectedExperimentId],
+    );
 
-    const CustomBar = (props: any) => {
-        const { fill, x, y, width, height, index } = props;
-        const barFill =
-            selectedBar === index
-                ? "var(--color-desktop)"
-                : "var(--color-mobile)";
-        return (
-            <rect
-                x={x}
-                y={y}
-                width={width}
-                height={height}
-                fill={barFill}
-                onClick={() => handleBarClick(props.payload, index)}
-                cursor="pointer"
-            />
-        );
-    };
+    const CustomBar = useMemo(
+        () => (props: any) => {
+            const { x, y, width, height, index, payload } = props;
+            const barFill =
+                selectedBar === index
+                    ? "var(--color-desktop)"
+                    : "var(--color-mobile)";
+            return (
+                <rect
+                    x={x}
+                    y={y}
+                    width={width}
+                    height={height}
+                    fill={barFill}
+                    onClick={() => onExperimentClick(payload.experiment_id)}
+                    cursor="pointer"
+                />
+            );
+        },
+        [selectedBar, onExperimentClick],
+    );
     return (
         <Card>
             <CardHeader className="flex flex-row items-center justify-between">
diff --git a/webapp/src/components/project-dashboard-base.tsx b/webapp/src/components/project-dashboard-base.tsx
@@ -56,6 +56,7 @@ export interface ProjectDashboardBaseProps {
     selectedRunId: string;
     onExperimentClick: (experimentId: string) => void;
     onRunClick: (runId: string) => void;
+    onExperimentCreated?: () => void;
     headerContent?: ReactNode;
     isLoading?: boolean;
 }
@@ -74,6 +75,7 @@ export default function ProjectDashboardBase({
     selectedRunId,
     onExperimentClick,
     onRunClick,
+    onExperimentCreated,
     headerContent,
     isLoading = false,
 }: ProjectDashboardBaseProps) {
@@ -83,12 +85,6 @@ export default function ProjectDashboardBase({
         setIsExperimentModalOpen(true);
     };
 
-    const refreshExperimentList = async () => {
-        // In Vite+React Router, we don't have router.refresh()
-        // The parent component handles data refresh via callbacks
-        window.location.reload();
-    };
-
     const experimentName = experimentsReportData.find(
         (experiment) => experiment.experiment_id === selectedExperimentId,
     )?.name;
@@ -289,7 +285,7 @@ export default function ProjectDashboardBase({
                                 projectId={project.id}
                                 isOpen={isExperimentModalOpen}
                                 onClose={() => setIsExperimentModalOpen(false)}
-                                onExperimentCreated={refreshExperimentList}
+                                onExperimentCreated={onExperimentCreated}
                             />
                         </div>
                     )}
diff --git a/webapp/src/components/project-dashboard.tsx b/webapp/src/components/project-dashboard.tsx
@@ -227,6 +227,7 @@ export default function ProjectDashboard({
                 selectedRunId={selectedRunId}
                 onExperimentClick={onExperimentClick}
                 onRunClick={onRunClick}
+                onExperimentCreated={onRefresh}
                 projectExperiments={projectExperiments}
                 headerContent={headerContent}
                 isLoading={isLoading}
diff --git a/webapp/src/components/projectTokens/custom-row-token.tsx b/webapp/src/components/projectTokens/custom-row-token.tsx
@@ -44,8 +44,8 @@ export default function CustomRowToken({
     return (
         <CustomRow
             rowKey={projectToken.id}
-            firstColumn={projectToken.name}
-            secondColumn={projectToken.token}
+            firstColumn={projectToken.name ?? "-"}
+            secondColumn={projectToken.token ?? "•••••••• (hidden)"}
             onDelete={() => handleDelete(projectToken)}
             deleteDisabled={isDeleting}
         />
diff --git a/webapp/src/components/projectTokens/projectTokenTable.tsx b/webapp/src/components/projectTokens/projectTokenTable.tsx
@@ -1,9 +1,9 @@
 import { Card } from "@/components/ui/card";
 import { Table, TableBody } from "@/components/ui/table";
-import { IProjectToken } from "@/api/schemas";
+import { AccessLevel, IProjectToken } from "@/api/schemas";
 import { getProjectTokens, createProjectToken } from "@/api/projectTokens";
 import CustomRowToken from "@/components/projectTokens/custom-row-token";
-import { useState, useEffect, useRef } from "react";
+import { useMemo, useState, useEffect, useRef } from "react";
 import { Loader2, ClipboardCopy, ClipboardCheck } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -43,23 +43,21 @@ export const ProjectTokensTable = ({ projectId }: { projectId: string }) => {
         if (isSubmitting) return;
 
         setIsSubmitting(true);
-
         try {
-            const access = 2;
-            const newToken = await toast
-                .promise(createProjectToken(projectId, tokenName, access), {
-                    loading: `Creating token ${tokenName}...`,
-                    success: `Token ${tokenName} created successfully`,
-                    error: (error) =>
-                        `Failed to create token: ${error instanceof Error ? error.message : "Unknown error"}`,
-                })
-                .unwrap();
-
-            setCreatedToken(newToken.token);
+            const newToken = await createProjectToken(
+                projectId,
+                tokenName,
+                AccessLevel.WRITE,
+            );
+            toast.success(`Token ${tokenName} created successfully`);
+            setCreatedToken(newToken.token ?? null);
             setTokenName("");
             refreshTokens();
         } catch (error) {
             console.error("Failed to create token:", error);
+            toast.error(
+                `Failed to create token: ${error instanceof Error ? error.message : "Unknown error"}`,
+            );
         } finally {
             setIsSubmitting(false);
         }
@@ -89,6 +87,20 @@ export const ProjectTokensTable = ({ projectId }: { projectId: string }) => {
         setIsCreatingToken(false);
     };
 
+    const sortedTokens = useMemo(
+        () =>
+            tokens
+                ? tokens
+                      .slice()
+                      .sort((a, b) =>
+                          (a.name ?? "")
+                              .toLowerCase()
+                              .localeCompare((b.name ?? "").toLowerCase()),
+                      )
+                : null,
+        [tokens],
+    );
+
     return (
         <div className="flex-col p-4 md:gap-8 md:p-4 justify-between">
             <div className="flex-1 mb-4">
@@ -176,15 +188,15 @@ export const ProjectTokensTable = ({ projectId }: { projectId: string }) => {
             <Card>
                 <Table>
                     <TableBody>
-                        {tokens === null ? (
+                        {sortedTokens === null ? (
                             <tr>
                                 <td colSpan={3} className="text-center py-6">
                                     <div className="flex justify-center">
                                         <Loader2 className="h-8 w-8 animate-spin text-primary" />
                                     </div>
                                 </td>
                             </tr>
-                        ) : tokens.length === 0 ? (
+                        ) : sortedTokens.length === 0 ? (
                             <tr>
                                 <td colSpan={3} className="text-center py-6">
                                     <p className="text-muted-foreground">
@@ -197,19 +209,13 @@ export const ProjectTokensTable = ({ projectId }: { projectId: string }) => {
                                 </td>
                             </tr>
                         ) : (
-                            tokens
-                                .sort((a, b) =>
-                                    a.name
-                                        .toLowerCase()
-                                        .localeCompare(b.name.toLowerCase()),
-                                )
-                                .map((projectToken, index) => (
-                                    <CustomRowToken
-                                        key={index}
-                                        projectToken={projectToken}
-                                        onTokenDeleted={refreshTokens}
-                                    />
-                                ))
+                            sortedTokens.map((projectToken) => (
+                                <CustomRowToken
+                                    key={projectToken.id}
+                                    projectToken={projectToken}
+                                    onTokenDeleted={refreshTokens}
+                                />
+                            ))
                         )}
                     </TableBody>
                 </Table>
diff --git a/webapp/src/components/radial-chart.tsx b/webapp/src/components/radial-chart.tsx
diff --git a/webapp/src/pages/PublicProjectPage.tsx b/webapp/src/pages/PublicProjectPage.tsx
