+ Dashboards you've been invited to +
+ )} + + {invited.map((org) => ( + + ))} + + + + + + {owned.map((org) => ( + + ))} + + + + +*:first-child]` reset outranks the `[&>*]` inset below and
+ // would silently apply it to one cell only.
+ "max-md:[&>*:first-child]:pb-10 max-md:[&>*:last-child]:pt-10",
+ // Side by side: equal space either side of the vertical rule.
+ "md:[&>*:first-child]:pr-10 md:[&>*:last-child]:pl-10",
+ "lg:[&>*:first-child]:pr-16 lg:[&>*:last-child]:pl-16",
+ // Applied to both cells, so the row's own edges stay level.
+ insetTop && "md:[&>*]:pt-10 lg:[&>*]:pt-16",
+ insetBottom && "md:[&>*]:pb-10 lg:[&>*]:pb-16",
+ className,
+ )}
+ >
+ {children}
+
+ );
+}
diff --git a/webapp/src/components/chart-section.tsx b/webapp/src/components/chart-section.tsx
new file mode 100644
index 000000000..09f4e2183
--- /dev/null
+++ b/webapp/src/components/chart-section.tsx
@@ -0,0 +1,44 @@
+import { cn } from "@/helpers/utils";
+
+/*
+ * A titled block of the dashboard: heading, a line saying what it is for, and
+ * whatever action belongs to it, above the thing itself.
+ *
+ * The charts each drew this by hand inside a `Card`. They share it now, so the
+ * page reads as one surface with sections on it rather than a wall of boxes, and
+ * the three headings cannot drift apart. It carries no border or fill of its own:
+ * the panels behind the redesign are the page, not the card.
+ */
+export default function ChartSection({
+ title,
+ description,
+ action,
+ className,
+ children,
+}: Readonly<{
+ title: string;
+ description?: string;
+ /** Sits on the title's row, at its end. */
+ action?: React.ReactNode;
+ className?: string;
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+ {children}
+
+
+ {description && (
+ + {title} +
+ {action} ++ {description} +
+ )} +-
+ {gauges.map((gauge) => (
+
-
+
+
+ ))}
+
+
+
+
+
+
+ ) : (
-
+ {
+ if (!emissionTimeSeries) return;
+ exportEmissionsTimeSeriesCsv(
+ emissionTimeSeries,
+ projectName,
+ experimentName,
+ );
+ }}
+ loadingMessage="Exporting time series..."
+ successMessage="Time series exported successfully"
+ errorMessage="Failed to export time series"
+ />
+ )
+ }
+ >
+
+
+
+ format(new Date(value), tickFmt)
+ }
+ />
+ {
+ const tooltipPayload = payload as
+ | TimeSeriesTooltipPayload
+ | undefined;
+ const point =
+ tooltipPayload?.[0]?.payload;
+
+ if (!point) {
+ return "";
+ }
+
+ return format(
+ new Date(point.ts),
+ "MMM d, yyyy HH:mm:ss",
+ );
+ }}
+ />
+ }
+ />
+
+
+
+
+
-
- {emissionTimeSeries.metadata.gpu_model && (
-
-
- )}
+
+ {Object.keys(chartConfig).map((key) => {
+ const chart = key as keyof typeof chartConfig;
+ return (
+
+ );
+ })}
+
+
+
-
-
-
-
+ {experimentsReportData.length > 0 ? (
+
+ value.slice(0, 3)}
+ />
+
+ ) : (
+
-
-
- {experimentsReportData.length > 0 ? (
-
- value.slice(0, 3)}
- />
-
- ) : (
-
-
-
+
+
);
}
diff --git a/webapp/src/components/export-csv-button.tsx b/webapp/src/components/export-csv-button.tsx
index d480114b4..cce269d0e 100644
--- a/webapp/src/components/export-csv-button.tsx
+++ b/webapp/src/components/export-csv-button.tsx
@@ -1,5 +1,5 @@
-import { Button } from "@/components/ui/button";
-import { Download, Loader2 } from "lucide-react";
+import { Loader2 } from "lucide-react";
+import { DownloadIcon } from "@/components/icons/download-icon";
import { useState } from "react";
import { toast } from "sonner";
import {
@@ -45,19 +45,19 @@ export function ExportCsvButton({
-
+
+
+
+
+ {/*
+ * The design's status note. It reads "(Invited unnaccepted yet)",
+ * which nothing in the API can tell us — adding a member subscribes
+ * an existing account immediately, so there is no pending state. The
+ * slot instead carries the one thing the membership does record,
+ * which is whether they administer the organization.
+ */}
+
+ {member.is_admin && (
+
+ (Admin)
+
+ )}
+
+
+ {/* Only as wide as its trigger. */}
+
+
+
+
+
+ {/*
+ * The design fills this menu with "Resend invite", which has
+ * no endpoint behind it. It keeps the two actions the page
+ * has always offered on a member instead, and they stay
+ * disabled while they stay unimplemented — as they were
+ * before the redesign.
+ */}
+
+
+
+
+
+
+
+ );
+}
diff --git a/webapp/src/components/mobile-header.tsx b/webapp/src/components/mobile-header.tsx
deleted file mode 100644
index ba7d3c91a..000000000
--- a/webapp/src/components/mobile-header.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { Organization } from "@/api/schemas";
-import { Menu } from "lucide-react";
-import { Link } from "react-router-dom";
-import { useState } from "react";
-import NavBar from "./navbar";
-
-export default function MobileHeader({
- orgs,
-}: {
- orgs: Organization[] | undefined;
-}) {
- const [isSheetOpen, setSheetOpened] = useState(false);
-
- return (
-
- {/* Drawer that shows only on small screens */}
-
- setSheetOpened(true)}>
-
-
-
-
-
-
- );
-}
diff --git a/webapp/src/components/nav-item.tsx b/webapp/src/components/nav-item.tsx
deleted file mode 100644
index 8f9f4f103..000000000
--- a/webapp/src/components/nav-item.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Button } from "./ui/button";
-
-export default function NavItem({
- isSelected,
- onClick,
- icon,
- children,
- paddingY = 3,
-}: {
- isSelected: boolean;
- onClick?: () => void;
- icon?: React.ReactNode;
- children: React.ReactNode;
- paddingY?: number;
-}) {
- return (
-
- );
-}
diff --git a/webapp/src/components/navbar.tsx b/webapp/src/components/navbar.tsx
deleted file mode 100644
index a1431db8f..000000000
--- a/webapp/src/components/navbar.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import { Organization } from "@/api/schemas";
-import { SelectGroup } from "@radix-ui/react-select";
-import {
- AreaChart,
- Building,
- Home,
- LogOutIcon,
- UserIcon,
- Users,
-} from "lucide-react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
-import NavItem from "./nav-item";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectLabel,
- SelectTrigger,
- SelectValue,
-} from "./ui/select";
-import CreateOrganizationModal from "./createOrganizationModal";
-import { getOrganizations } from "@/api/organizations";
-import { Button } from "./ui/button";
-import { useModal } from "@/hooks/useModal";
-
-const USER_PROFILE_URL = import.meta.env.VITE_OIDC_PROFILE_URL;
-export default function NavBar({
- orgs,
- setSheetOpened,
-}: Readonly<{
- orgs: Organization[] | undefined;
- setSheetOpened?: (value: boolean) => void;
-}>) {
- const [selected, setSelected] = useState(null);
- const navigate = useNavigate();
- const [selectedOrg, setSelectedOrg] = useState(() => {
- try {
- return localStorage.getItem("organizationId");
- } catch {
- return null;
- }
- });
- const iconStyles = "h-4 w-4 flex-shrink-0 text-muted-foreground";
- const { pathname } = useLocation();
- const newOrgModal = useModal();
- const [organizationList, setOrganizationList] = useState<
- Organization[] | undefined
- >([]);
- const [isDropdownOpen, setDropdownOpen] = useState(false);
-
- useEffect(() => {
- if (pathname.includes("/members")) {
- setSelected("members");
- } else if (pathname.includes("/profile")) {
- setSelected("profile");
- } else if (pathname.includes("/projects")) {
- setSelected("projects");
- return;
- } else {
- setSelected("home");
- }
- }, [pathname, orgs]);
-
- useEffect(() => {
- if (orgs) {
- setOrganizationList(orgs);
- }
- }, [orgs]);
-
- useEffect(() => {
- if (!organizationList?.length) {
- setSelectedOrg(null);
- return;
- }
- const routeOrgId = pathname.split("/")[1];
- if (organizationList.some((org) => org.id === routeOrgId)) {
- setSelectedOrg(routeOrgId);
- } else if (!organizationList.some((org) => org.id === selectedOrg)) {
- setSelectedOrg(organizationList[0].id);
- }
- }, [pathname, organizationList, selectedOrg]);
-
- useEffect(() => {
- if (!selectedOrg) return;
- try {
- localStorage.setItem("organizationId", selectedOrg);
- const organizationName = organizationList?.find(
- (organization) => organization.id === selectedOrg,
- )?.name;
- if (organizationName) {
- localStorage.setItem("organizationName", organizationName);
- }
- } catch (error) {
- console.error("Error writing to localStorage:", error);
- }
- }, [selectedOrg, organizationList]);
-
- const handleNewOrgClick = async () => {
- newOrgModal.open();
- setDropdownOpen(false); // Close the dropdown menu
- };
-
- const refreshOrgList = async () => {
- // Fetch the updated list of organizations from the server
- const orgs = await getOrganizations();
- setOrganizationList(orgs);
- };
-
- return (
- ;
+ /** Runs after the settings dialog saves; defaults to a full refresh. */
+ onProjectUpdated?: () => void | Promise;
+ className?: string;
+}>) {
+ const settingsModal = useModal();
+ const [isExporting, setIsExporting] = useState(false);
+ const [isRefreshing, setIsRefreshing] = useState(false);
+
+ const handleRefresh = async () => {
+ setIsRefreshing(true);
+ try {
+ await onRefresh();
+ } finally {
+ setIsRefreshing(false);
+ }
+ };
+
+ const handleJsonExport = () => {
+ if (isExporting) return;
+
+ setIsExporting(true);
+
+ toast.promise(
+ (async () => {
+ // Prepare the experiments data with runs for each experiment
+ const experimentsWithRuns = await Promise.all(
+ experimentsReportData.map(async (exp) => {
+ // Fetch runs for each experiment
+ const runs = await getRunEmissionsByExperiment(
+ exp.experiment_id,
+ runData.startDate,
+ runData.endDate,
+ );
+
+ // Fetch metadata and emissions for each run
+ const runsWithDetails = await Promise.all(
+ runs.map(async (run) => {
+ // Get emissions time series data (includes metadata)
+ const emissionsData =
+ await getEmissionsTimeSeries(run.runId);
+
+ // Return run with metadata and emissions
+ return {
+ ...run,
+ emissions_value: run.emissions,
+ emissions:
+ emissionsData?.emissions || undefined,
+ metadata:
+ emissionsData.metadata || undefined,
+ };
+ }),
+ );
+
+ // Return experiment data with its enhanced runs
+ return {
+ experiment_id: exp.experiment_id,
+ name: exp.name,
+ emissions: exp.emissions,
+ energy_consumed: exp.energy_consumed,
+ duration: exp.duration,
+ runs: runsWithDetails,
+ };
+ }),
+ );
+
+ // Format the project data according to the requested structure
+ const formattedData = {
+ projects: [
+ {
+ // Include all project properties
+ id: project.id,
+ name: project.name,
+ description: project.description,
+ public: project.public,
+ organizationId: project.organizationId,
+ experiments: experimentsWithRuns,
+
+ // Add extra metadata
+ date_range: {
+ startDate: runData.startDate,
+ endDate: runData.endDate,
+ },
+ },
+ ],
+ };
+
+ exportToJson(formattedData);
+ // Small delay to make the loading state visible
+ await new Promise((resolve) => setTimeout(resolve, 500));
+ setIsExporting(false);
+ })(),
+ {
+ loading: "Exporting JSON data...",
+ success: "JSON data exported successfully",
+ error: "Failed to export JSON data",
+ },
+ );
+ };
+
+ return (
+
+
+ {emissionTimeSeries.metadata.gpu_model && (
-
-
- OS:{" "}
- {emissionTimeSeries.metadata.os}
-
-
- Python:{" "}
- {emissionTimeSeries.metadata.python_version}
-
-
- Region:{" "}
- {emissionTimeSeries.metadata.region}
-
+ )}
+
+
-
-
-
-
+
+
);
}
diff --git a/webapp/src/components/equivalence-list.tsx b/webapp/src/components/equivalence-list.tsx
new file mode 100644
index 000000000..d6ceda295
--- /dev/null
+++ b/webapp/src/components/equivalence-list.tsx
@@ -0,0 +1,113 @@
+import { cn } from "@/helpers/utils";
+
+/*
+ * The "Equal to" list: an icon, the figure it stands for, and a caption saying
+ * what the figure means.
+ *
+ * One component for both dashboards, since the design draws the same item in
+ * each. Only the direction differs: the global dashboard spreads them across the
+ * width of its section, and the project dashboard stacks them in a column beside
+ * its gauges. That is the `direction` prop, and it is the only thing a caller
+ * decides — an item always looks the same.
+ *
+ * The captions wrap to two lines at the measure the design gives them, so the
+ * column keeps its shape rather than stretching to the longest caption.
+ */
+export type Equivalence = {
+ icon: string;
+ alt: string;
+ value: string;
+ caption: string;
+};
+
+/*
+ * The icon, wording and unit for each equivalence, declared once.
+ *
+ * Both dashboards compute these from the same helpers, so they must read the
+ * same. They did not: the two pages had drifted to different captions for the
+ * same number, and one of them rendered kilometres with no unit at all.
+ *
+ * The caption for the first is per-capita emissions, not household energy — that
+ * is what `getEquivalentCitizenPercentage` divides by (a US citizen's yearly
+ * CO2e, over 52 weeks). The design's own copy says "an american household weekly
+ * energy consumption", which describes neither half of that.
+ */
+export function equivalences({
+ citizen,
+ transportation,
+ tvTime,
+}: {
+ /** Percentage of a citizen's weekly emissions, already rounded. */
+ citizen: string;
+ /** Kilometres, already rounded. */
+ transportation: string;
+ /** Days, already rounded. */
+ tvTime: string;
+}): Equivalence[] {
+ return [
+ {
+ icon: "/icons/household_consumption.svg",
+ alt: "Household consumption icon",
+ value: `${citizen}%`,
+ caption: "Of a U.S. citizen's weekly emissions",
+ },
+ {
+ icon: "/icons/transportation.svg",
+ alt: "Transportation icon",
+ value: `${transportation} km`,
+ caption: "Kilometers ridden",
+ },
+ {
+ icon: "/icons/tv.svg",
+ alt: "TV icon",
+ value: `${tvTime} days`,
+ caption: "Of watching TV",
+ },
+ ];
+}
+
+export default function EquivalenceList({
+ items,
+ direction = "row",
+ className,
+}: Readonly<{
+ items: Equivalence[];
+ direction?: "row" | "column";
+ className?: string;
+}>) {
+ return (
+
- {
- if (!emissionTimeSeries) return;
- exportEmissionsTimeSeriesCsv(
- emissionTimeSeries,
- projectName,
- experimentName,
- );
- }}
- loadingMessage="Exporting time series..."
- successMessage="Time series exported successfully"
- errorMessage="Failed to export time series"
- />
- )}
-
+
- Emissions Time Series
-
- Showing emissions rate and energy consumed
- over time
-
-
- {!isPublicView && (
-
+ OS:{" "}
+ {emissionTimeSeries.metadata.os}
-
- {Object.keys(chartConfig).map((key) => {
- const chart = key as keyof typeof chartConfig;
- return (
-
- );
- })}
+
-
-
-
- format(new Date(value), tickFmt)
- }
- />
- {
- const tooltipPayload = payload as
- | TimeSeriesTooltipPayload
- | undefined;
- const point =
- tooltipPayload?.[0]?.payload;
-
- if (!point) {
- return "";
- }
-
- return format(
- new Date(point.ts),
- "MMM d, yyyy HH:mm:ss",
- );
- }}
- />
- }
- />
-
-
-
-
-
+
+ Python:{" "}
+ {emissionTimeSeries.metadata.python_version}
-
-
+ Region:{" "}
+ {emissionTimeSeries.metadata.region}
+
+ -
+ {items.map((item) => (
+
-
+
+
+++ {item.value} +
++ {item.caption} +
+
+ ))}
+
- Project experiment runs
-
- Click an experiment to see the runs on the chart on the
- right
-
-
- {!isPublicView && (
+
+
)}
- + No data available +
+
-
- )}
- - No data available -
-Download .csv export
diff --git a/webapp/src/components/icons/account-circle-icon.tsx b/webapp/src/components/icons/account-circle-icon.tsx new file mode 100644 index 000000000..2f18adee2 --- /dev/null +++ b/webapp/src/components/icons/account-circle-icon.tsx @@ -0,0 +1,24 @@ +import { FigmaIconProps } from "./types"; + +/* + * Account in circle icon — a head and shoulders inside a circle. + */ + +export function AccountCircleIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/account-icon.tsx b/webapp/src/components/icons/account-icon.tsx new file mode 100644 index 000000000..88cd957bf --- /dev/null +++ b/webapp/src/components/icons/account-icon.tsx @@ -0,0 +1,62 @@ +import { FigmaIconProps } from "./types"; + +/* + * Account icon — a head and shoulders in a circle, drawn in the same pixel-art + * style as the rail's other icons. + */ + +export function AccountIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/arrow-back-ios-icon.tsx b/webapp/src/components/icons/arrow-back-ios-icon.tsx new file mode 100644 index 000000000..aa4f30d2d --- /dev/null +++ b/webapp/src/components/icons/arrow-back-ios-icon.tsx @@ -0,0 +1,24 @@ +import { FigmaIconProps } from "./types"; + +/* + * Back icon — a chevron pointing left. + */ + +export function ArrowBackIosIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/download-icon.tsx b/webapp/src/components/icons/download-icon.tsx new file mode 100644 index 000000000..aee4d1183 --- /dev/null +++ b/webapp/src/components/icons/download-icon.tsx @@ -0,0 +1,24 @@ +import { FigmaIconProps } from "./types"; + +/* + * Download icon — an arrow pointing down onto a line, drawn in the same + * pixel-art style as the rail's icons. + */ + +export function DownloadIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/global-icon.tsx b/webapp/src/components/icons/global-icon.tsx new file mode 100644 index 000000000..648369142 --- /dev/null +++ b/webapp/src/components/icons/global-icon.tsx @@ -0,0 +1,33 @@ +import { FigmaIconProps } from "./types"; + +/* + * Global icon — a globe, drawn in the same pixel-art style as the rail's other + * icons. + */ + +export function GlobalIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/glossary-icon.tsx b/webapp/src/components/icons/glossary-icon.tsx new file mode 100644 index 000000000..5efda6241 --- /dev/null +++ b/webapp/src/components/icons/glossary-icon.tsx @@ -0,0 +1,39 @@ +import { FigmaIconProps } from "./types"; + +/* + * Glossary icon — an org chart with a smiling robot at the top branching down + * to three nodes, drawn in the same pixel-art style as the rail's other icons. + */ + +export function GlossaryIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/lock-icon.tsx b/webapp/src/components/icons/lock-icon.tsx new file mode 100644 index 000000000..04ab6c302 --- /dev/null +++ b/webapp/src/components/icons/lock-icon.tsx @@ -0,0 +1,23 @@ +import { FigmaIconProps } from "./types"; + +/* + * Lock icon — a closed padlock, drawn in the same pixel-art style as the rail's + * icons. + */ + +export function LockIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/logout-icon.tsx b/webapp/src/components/icons/logout-icon.tsx new file mode 100644 index 000000000..b8d2b1cd4 --- /dev/null +++ b/webapp/src/components/icons/logout-icon.tsx @@ -0,0 +1,24 @@ +import { FigmaIconProps } from "./types"; + +/* + * Log-out icon — an arrow leaving through a doorway, drawn in the same pixel-art + * style as the rail's icons. + */ + +export function LogoutIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/members-icon.tsx b/webapp/src/components/icons/members-icon.tsx new file mode 100644 index 000000000..837ef4eba --- /dev/null +++ b/webapp/src/components/icons/members-icon.tsx @@ -0,0 +1,73 @@ +import { FigmaIconProps } from "./types"; + +/* + * Members icon — three figures side by side, middle one popping out, + * drawn in the same pixel-art style as the rail's other icons. + */ + +export function MembersIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/more-vert-icon.tsx b/webapp/src/components/icons/more-vert-icon.tsx new file mode 100644 index 000000000..cf3b0ecb9 --- /dev/null +++ b/webapp/src/components/icons/more-vert-icon.tsx @@ -0,0 +1,22 @@ +import { FigmaIconProps } from "./types"; + +/* + * Vertical more icon — three dots in a vertical line, pixel-art style. + */ + +export function MoreVertIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/organization-icon.tsx b/webapp/src/components/icons/organization-icon.tsx new file mode 100644 index 000000000..1f9dfc74d --- /dev/null +++ b/webapp/src/components/icons/organization-icon.tsx @@ -0,0 +1,72 @@ +import { FigmaIconProps } from "./types"; + +/* + * Organization icon — an office building. + */ + +export function OrganizationIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/plus-icon.tsx b/webapp/src/components/icons/plus-icon.tsx new file mode 100644 index 000000000..f82fe3574 --- /dev/null +++ b/webapp/src/components/icons/plus-icon.tsx @@ -0,0 +1,24 @@ +import { FigmaIconProps } from "./types"; + +/* + * Plus icon — a plus sign. + */ + +export function PlusIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/projects-icon.tsx b/webapp/src/components/icons/projects-icon.tsx new file mode 100644 index 000000000..23877c57e --- /dev/null +++ b/webapp/src/components/icons/projects-icon.tsx @@ -0,0 +1,35 @@ +import { FigmaIconProps } from "./types"; + +/* + * Projects icon — two magazine files with documents standing in them, a smiley face + * on the front one, drawn in the same pixel-art style as the rail's other icons. + */ + +export function ProjectsIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/refresh-icon.tsx b/webapp/src/components/icons/refresh-icon.tsx new file mode 100644 index 000000000..425f362da --- /dev/null +++ b/webapp/src/components/icons/refresh-icon.tsx @@ -0,0 +1,24 @@ +import { FigmaIconProps } from "./types"; + +/* + * Refresh icon — two arrows chasing each other in a circle, drawn in the same + * pixel-art style as the rail's icons. + */ + +export function RefreshIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/settings-icon.tsx b/webapp/src/components/icons/settings-icon.tsx new file mode 100644 index 000000000..b5c6663f8 --- /dev/null +++ b/webapp/src/components/icons/settings-icon.tsx @@ -0,0 +1,23 @@ +import { FigmaIconProps } from "./types"; + +/* + * Settings icon — a cog, drawn in the same pixel-art style as the rail's icons. + */ + +export function SettingsIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/share-icon.tsx b/webapp/src/components/icons/share-icon.tsx new file mode 100644 index 000000000..8a4487b67 --- /dev/null +++ b/webapp/src/components/icons/share-icon.tsx @@ -0,0 +1,23 @@ +import { FigmaIconProps } from "./types"; + +/* + * Share icon — three nodes joined by lines, drawn in the same pixel-art style as + * the rail's icons. + */ + +export function ShareIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/icons/types.ts b/webapp/src/components/icons/types.ts new file mode 100644 index 000000000..124b7fad1 --- /dev/null +++ b/webapp/src/components/icons/types.ts @@ -0,0 +1,16 @@ +/* + * Single declaration of the contract for every icon in this directory. + * + * An icon takes nothing but a class: it draws with `currentColor` and at the + * size its caller gives it, so state colour and dimensions belong to the + * control around it rather than to the glyph. + * + * Named for where the set comes from: nearly all of these are exported verbatim + * from the Code Carbon Figma file. A few were not in the Figma and were + * designed apart from the rest, but in the same style, and they share this same + * contract. Seeing `FigmaIconProps` in a module is the quiet signal that the + * icon was added during the dashboard redesign. + */ +export type FigmaIconProps = { + className?: string; +}; diff --git a/webapp/src/components/icons/user-single-aim-icon.tsx b/webapp/src/components/icons/user-single-aim-icon.tsx new file mode 100644 index 000000000..89ccf1a04 --- /dev/null +++ b/webapp/src/components/icons/user-single-aim-icon.tsx @@ -0,0 +1,52 @@ +import { FigmaIconProps } from "./types"; + +/* + * User single aim icon — one figure inside a targeting reticle, drawn in + * pixel-art style. + */ + +export function UserSingleAimIcon({ className }: FigmaIconProps) { + return ( + + ); +} diff --git a/webapp/src/components/member-row.tsx b/webapp/src/components/member-row.tsx new file mode 100644 index 000000000..92a3eafb7 --- /dev/null +++ b/webapp/src/components/member-row.tsx @@ -0,0 +1,125 @@ +import { OrganizationUser } from "@/api/schemas"; +import { cn } from "@/helpers/utils"; +import { MoreVertIcon } from "./icons/more-vert-icon"; +import { UserSingleAimIcon } from "./icons/user-single-aim-icon"; +import { DropdownMenu, DropdownMenuTrigger } from "./ui/dropdown-menu"; +import { MenuItem, MenuPanel } from "./ui/menu"; +import { TableCell, TableRow } from "./ui/table"; + +/* + * One member of the organization: an avatar, their name and email, their + * standing in it, and a menu of the actions that apply to them. + * + * Unlike a project row this is not a link — there is no member page to open — + * so nothing lights on hover and the overflow menu is its only control. + * + * The avatar is decorative: no API field can fill the design's photo circle, so + * it renders the design's member glyph and the name beside it is the identity. + */ + +/* + * The trigger's padding, and the gap its menu keeps from the glyph. Radix + * anchors to the trigger's whole box, so both are cancelled to bring the panel + * back to the dots. Same values as a project row's, because it is the same + * control. + */ +const TRIGGER_INSET = 20; +const MENU_GAP = 4; + +export default function MemberRow({ + member, + onSettings, + onDelete, +}: Readonly<{ + member: OrganizationUser; + /** Undefined leaves the action in the menu but inert, as it is today. */ + onSettings?: () => void; + onDelete?: () => void; +}>) { + /* The API's name can come back empty; the email is the only field always + present, so it becomes the row's title when there is nothing above it. */ + const name = member.name?.trim(); + + return ( +
+
+ {/* Wraps rather than overflows: an email address is long
+ and a narrow screen has to hold it. */}
+
+
+ {name && (
+
+ {name}
+
+ )}
+
+ {member.email}
+
+
+
- setSheetOpened(false)}
- className="flex flex-1 justify-center items-center gap-2 pt-6 font-semibold"
- >
- 
-
-
-
-
-
-
-
- );
-}
diff --git a/webapp/src/components/project-actions.tsx b/webapp/src/components/project-actions.tsx
new file mode 100644
index 000000000..427eb30d3
--- /dev/null
+++ b/webapp/src/components/project-actions.tsx
@@ -0,0 +1,216 @@
+import { useState } from "react";
+import { toast } from "sonner";
+
+import {
+ getEmissionsTimeSeries,
+ getRunEmissionsByExperiment,
+} from "@/api/runs";
+import { ExperimentReport, Project } from "@/api/schemas";
+import { useModal } from "@/hooks/useModal";
+import { cn } from "@/helpers/utils";
+import { exportToJson } from "@/utils/export";
+import ProjectSettingsModal from "./project-settings-modal";
+import { DownloadIcon } from "./icons/download-icon";
+import { RefreshIcon } from "./icons/refresh-icon";
+import { SettingsIcon } from "./icons/settings-icon";
+import ShareProjectButton from "./share-project-button";
+import { IconButton } from "./ui/icon-button";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "./ui/tooltip";
+
+/*
+ * The actions that apply to a project as a whole: refresh, share, export, and
+ * settings.
+ *
+ * Its own component so it can sit in the page's heading, beside the project's
+ * name, rather than inside the panels below — the dashboard's data flows down,
+ * but these controls belong to the project, not to any panel. It owns the state
+ * only it uses (the refresh and export spinners, the settings dialog).
+ *
+ * The controls are square outlined icon buttons, so they carry the same radius
+ * and the same hover as every other control in the app.
+ */
+export default function ProjectActions({
+ project,
+ experimentsReportData,
+ runData,
+ onRefresh,
+ onProjectUpdated,
+ className,
+}: Readonly<{
+ project: Project;
+ experimentsReportData: ExperimentReport[];
+ runData: { experimentId: string; startDate: string; endDate: string };
+ /** Refetches the dashboard, behind the refresh control. */
+ onRefresh: () => void | Promise
+
+ );
+}
diff --git a/webapp/src/components/project-dashboard-base.tsx b/webapp/src/components/project-dashboard-base.tsx
index d26e19272..0a35b269b 100644
--- a/webapp/src/components/project-dashboard-base.tsx
+++ b/webapp/src/components/project-dashboard-base.tsx
@@ -1,5 +1,4 @@
import { DateRangePicker } from "@/components/date-range-picker";
-import { Separator } from "@/components/ui/separator";
import { getDefaultDateRange } from "@/helpers/date-utils";
import {
ExperimentReport,
@@ -10,10 +9,13 @@ import {
} from "@/api/schemas";
import { lazy, ReactNode, Suspense, useState } from "react";
import { DateRange } from "react-day-picker";
+import ChartRow from "./chart-row";
import ChartSkeleton from "./chart-skeleton";
-import CreateExperimentModal from "./createExperimentModal";
-import { Button } from "./ui/button";
-import { Card, CardContent } from "./ui/card";
+import ConsumedEnergyGauges from "./consumed-energy-gauges";
+import { PlusIcon } from "./icons/plus-icon";
+import { PrimaryButton } from "./ui/primary-button";
+import EquivalenceList, { equivalences } from "./equivalence-list";
+import CreateExperimentModal from "./create-experiment-modal";
import {
Select,
SelectContent,
@@ -29,7 +31,6 @@ import { toast } from "sonner";
// experiment dropdown. Radix Select forbids an empty string as an item value.
const ALL_EXPERIMENTS = "__all__";
-const RadialChart = lazy(() => import("@/components/radial-chart"));
const ExperimentsBarChart = lazy(
() => import("@/components/experiment-bar-chart"),
);
@@ -107,20 +108,17 @@ export default function ProjectDashboardBase({
};
return (
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Refresh data
+Download JSON export
+
-
- {headerContent ? (
- headerContent
- ) : (
-
-
- )}
- {project.name}
-- {project.description} -
-
+ /*
+ * No gap on this column: the charts below are separated by rules that have
+ * to meet, and a gap here would push the horizontal one away from the
+ * vertical ones. Each block carries its own space instead.
+ */
+
+
+ {headerContent}
+
onDateChange(newDate || getDefaultDateRange())
@@ -128,234 +126,145 @@ export default function ProjectDashboardBase({
/>
-
-
-
-
- ) : (
-
-
+
+ {/* The name takes half the table, which is what starts the secondary
+ text at its own column. */}
+
+
+ {project.name}
+
+
+
+
+ {project.description && (
+
+ {project.description}
+
+ )}
+
+
+ {/* Only as wide as its trigger. */}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/webapp/src/components/project-settings-modal.tsx b/webapp/src/components/project-settings-modal.tsx
index 0befd0ba9..d7025e24f 100644
--- a/webapp/src/components/project-settings-modal.tsx
+++ b/webapp/src/components/project-settings-modal.tsx
@@ -1,22 +1,29 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { updateProject } from "@/api/projects";
import { Project } from "@/api/schemas";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import {
- Dialog,
- DialogContent,
- DialogHeader,
- DialogTitle,
- DialogDescription,
- DialogFooter,
-} from "@/components/ui/dialog";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ProjectTokensTable } from "./projectTokens/projectTokenTable";
-import { updateProject } from "@/api/projects";
-import { toast } from "sonner";
-import { Loader2 } from "lucide-react";
+import ShareProjectButton from "./share-project-button";
+import { Dialog, DialogContent } from "./ui/dialog";
+import ModalHeader from "./ui/modal-header";
+import { FormField } from "./ui/form-field";
+import { PrimaryButton } from "./ui/primary-button";
+import { Switch } from "./ui/switch";
+import { TabNavList, TabNavTrigger } from "./ui/tab-nav";
+import { Tabs, TabsContent } from "./ui/tabs";
+
+/*
+ * Project settings: the Create-project modal's panel, fields and button, wider
+ * because it also holds the API-tokens table. The design has no frame for this
+ * dialog, so it is the redesign's vocabulary applied to the controls it had.
+ *
+ * The fields save on submit; the public toggle saves the moment it is flipped,
+ * which is what lets the sharing link it controls appear and disappear with it.
+ * Only a failed submit keeps the dialog open, so edits that did not save are
+ * still there to retry.
+ */
interface ProjectSettingsModalProps {
open: boolean;
@@ -37,12 +44,51 @@ export default function ProjectSettingsModal({
const [isSaving, setIsSaving] = useState(false);
const [activeTab, setActiveTab] = useState("general");
- // Update form when project changes
+ /*
+ * The dialog stays mounted between openings, so the tab it was left on would
+ * otherwise still be showing the next time it opens. Settings starts on
+ * General; the tokens tab is somewhere you go, not somewhere you resume.
+ */
+ useEffect(() => {
+ if (open) setActiveTab("general");
+ }, [open]);
+
+ /*
+ * Reset the form when the dialog moves to a *different* project, keyed on the
+ * id rather than the object. The toggle below saves as it is flipped, which
+ * refreshes the project and hands this component a new object; keying on the
+ * object would make that refresh overwrite whatever the user had typed.
+ */
useEffect(() => {
setName(project.name || "");
setDescription(project.description || "");
setIsPublic(project.public || false);
- }, [project]);
+ }, [project.id, project.name, project.description, project.public]);
+
+ /*
+ * The public toggle saves on its own, so the sharing link it controls appears
+ * and disappears with it rather than waiting for the form to be submitted.
+ *
+ * It writes only the flag: the name and description it sends are the *saved*
+ * ones, not what is currently in the fields, so flipping the switch never
+ * quietly commits half-typed text. The switch moves first and rolls back if
+ * the write fails, so it always shows what is actually stored.
+ */
+ const handlePublicChange = async (next: boolean) => {
+ setIsPublic(next);
+ try {
+ await updateProject(project.id, {
+ name: project.name,
+ description: project.description,
+ public: next,
+ });
+ onProjectUpdated();
+ } catch (error) {
+ console.error("Error updating project visibility:", error);
+ setIsPublic(!next);
+ toast.error("Failed to change project visibility");
+ }
+ };
const handleSave = async () => {
setIsSaving(true);
@@ -54,95 +100,107 @@ export default function ProjectSettingsModal({
});
toast.success("Project settings updated successfully");
onProjectUpdated();
+ onOpenChange(false);
} catch (error) {
+ // Left open on failure, so the edits that failed to save are still
+ // there to retry rather than being discarded.
console.error("Error updating project:", error);
toast.error("Failed to update project settings");
} finally {
setIsSaving(false);
- onOpenChange(false);
}
};
return (
- {isLoading ? (
- <>
-
-
-
-
- 
-
-
-
-
- - {convertedValues.citizen} % -
-- Of a U.S citizen weekly energy emissions -
-
-
-
- 
-
-
-
-
- - {convertedValues.transportation} -
-- Kilometers ridden -
-
-
-
- )}
-
- 
-
-
-
-
- - {convertedValues.tvTime} days -
-- Of watching TV -
-
- {isLoading ? (
-
-
-
-
- ) : (
-
-
-
-
- }
- >
-
- )}
-
-
- {isLoading ? (
-
-
-
-
- ) : (
-
-
-
-
- }
- >
-
- )}
-
-
+
-
+ {isLoading ? (
+
+
-
-
-
+
-
-
-
- }
- >
-
+
+
+
+ ) : (
+ + Consumed energy +
{isLoading ? ( -
+
) : (
-
-
);
diff --git a/webapp/src/components/project-dashboard.tsx b/webapp/src/components/project-dashboard.tsx
index c5714f3b7..1efee919e 100644
--- a/webapp/src/components/project-dashboard.tsx
+++ b/webapp/src/components/project-dashboard.tsx
@@ -1,31 +1,15 @@
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
- Tooltip,
- TooltipContent,
- TooltipProvider,
- TooltipTrigger,
-} from "@/components/ui/tooltip";
-import {
- getEmissionsTimeSeries,
- getRunEmissionsByExperiment,
-} from "@/api/runs";
import { ProjectDashboardProps } from "@/api/schemas";
-import { exportToJson } from "@/utils/export";
-import {
- Download,
- LockIcon,
- RefreshCw,
- SettingsIcon,
- Share2Icon,
-} from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
import ProjectDashboardBase from "./project-dashboard-base";
-import ProjectSettingsModal from "./project-settings-modal";
-import ShareProjectButton from "./share-project-button";
-import { useModal } from "@/hooks/useModal";
+/*
+ * The private project dashboard: the shared panels, wired to the authenticated
+ * data.
+ *
+ * The project's own controls — refresh, share, export, settings — used to live
+ * here as a header row passed down to the base. They now sit in the page's
+ * heading beside the project's name, as `ProjectActions`, so nothing about the
+ * project's identity is rendered from inside its panels.
+ */
export default function ProjectDashboard({
project,
date,
@@ -39,229 +23,26 @@ export default function ProjectDashboard({
selectedRunId,
onExperimentClick,
onRunClick,
- onSettingsClick,
onRefresh,
isLoading,
}: ProjectDashboardProps) {
- const settingsModal = useModal();
- const [isExporting, setIsExporting] = useState(false);
- const [isRefreshing, setIsRefreshing] = useState(false);
-
- const handleRefresh = async () => {
- setIsRefreshing(true);
- try {
- await onRefresh();
- } finally {
- setIsRefreshing(false);
- }
- };
-
- const handleJsonExport = () => {
- if (isExporting) return;
-
- setIsExporting(true);
-
- toast.promise(
- (async () => {
- // Prepare the experiments data with runs for each experiment
- const experimentsWithRuns = await Promise.all(
- experimentsReportData.map(async (exp) => {
- // Fetch runs for each experiment
- const runs = await getRunEmissionsByExperiment(
- exp.experiment_id,
- runData.startDate,
- runData.endDate,
- );
-
- // Fetch metadata and emissions for each run
- const runsWithDetails = await Promise.all(
- runs.map(async (run) => {
- // Get emissions time series data (includes metadata)
- const emissionsData =
- await getEmissionsTimeSeries(run.runId);
-
- // Return run with metadata and emissions
- return {
- ...run,
- emissions_value: run.emissions,
- emissions:
- emissionsData?.emissions || undefined,
- metadata:
- emissionsData.metadata || undefined,
- };
- }),
- );
-
- // Return experiment data with its enhanced runs
- return {
- experiment_id: exp.experiment_id,
- name: exp.name,
- emissions: exp.emissions,
- energy_consumed: exp.energy_consumed,
- duration: exp.duration,
- runs: runsWithDetails,
- };
- }),
- );
-
- // Format the project data according to the requested structure
- const formattedData = {
- projects: [
- {
- // Include all project properties
- id: project.id,
- name: project.name,
- description: project.description,
- public: project.public,
- organizationId: project.organizationId,
- experiments: experimentsWithRuns,
-
- // Add extra metadata
- date_range: {
- startDate: runData.startDate,
- endDate: runData.endDate,
- },
- },
- ],
- };
-
- exportToJson(formattedData);
- // Small delay to make the loading state visible
- await new Promise((resolve) => setTimeout(resolve, 500));
- setIsExporting(false);
- })(),
- {
- loading: "Exporting JSON data...",
- success: "JSON data exported successfully",
- error: "Failed to export JSON data",
- },
- );
- };
-
- const headerContent = (
-
- {projectExperiments.length === 0
- ? isPublicView
- ? "No experiment data in the selected date range" // This is because for public projects we show only the experiments that have runs, but for private projects we show in this list as well the projects created but without runs yet
- : "No experiments have been created yet."
- : "Set of experiments included in this project"}
+
+ {isPublicView
+ ? // Public projects list only experiments that have
+ // runs; private ones also list those created without
+ // any runs yet.
+ "No experiment data in the selected date range"
+ : "No experiments have been created yet."}
+ {selectedExperiment.description}
+
- {selectedExperiment.description}
-
+ Experiments
+
+
+ {projectExperiments.length === 0 && (
+
+ {projectExperiments.length !== 0 && (
+
- {projectExperiments.length !== 0 && (
-
+
+ {selectedExperiment && (
+
+ )}
+
{!isPublicView && (
-
+ {selectedExperiment.description && (
+
+ )}
+
+
+ Experiment id
+
+
+ )}
+
+ {selectedExperiment.id}
+
+
+
-
+
+
)}
-
- {selectedExperiment && (
-
- )}
-
-
-
- Experiment id
-
-
- )}
-
- {selectedExperiment.id}
-
-
-
+
+
+
{selectedRunId && selectedRunId != "" && (
- <>
-
- {isLoading ? (
-
-
+
+ {isLoading ? (
+
)}
-
- );
-
return (
-
-
- - Project {project.name} -
- {project.public !== undefined && ( -
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Refresh data
-Download JSON export
-
- {
- // Call the original onSettingsClick to refresh the data
- onSettingsClick();
- }}
- />
-
- );
-}
-
-export function ProjectVisibilityBadge({ isPublic }: { isPublic: boolean }) {
- return isPublic ? (
-