Added flops gauges (d715d5e5) · Commits · ExaDigiT / sim-dashboard

src/App.tsx

+4 −3

Original line number	Diff line number	Diff line
		@@ -30,11 +30,11 @@ kc.init({
		if (auth) {
		if (kc.token) {
		localStorage.setItem("exadigitAuthToken", kc.token);
		axios.defaults.baseURL = import.meta.env.VITE_BASE_PATH;
		axios.defaults.withCredentials = true;
		axios.defaults.headers.common = {
		Authorization: `Bearer ${kc.token}`,
		};
		axios.defaults.baseURL = import.meta.env.VITE_BASE_PATH;
		axios.defaults.withCredentials = true;
		}
		}
		},
		@@ -69,6 +69,7 @@ export const AppContext = createContext<{
		}>({ AuthToken: kc.token, theme: null, setTheme: () => {} });

		function App() {
		const authToken = localStorage.getItem("exadigitAuthToken") \|\| undefined;
		const theme = localStorage.getItem("theme");
		const [_theme, setTheme] = useState(theme);

		@@ -97,7 +98,7 @@ function App() {

		return (
		<AppContext.Provider
		value={{ AuthToken: kc.token, theme: _theme, setTheme: onThemeSwitch }}
		value={{ AuthToken: authToken, theme: _theme, setTheme: onThemeSwitch }}
		>
		<QueryClientProvider client={queryClient}>
		<RouterProvider router={router} basepath={basepath} />

src/components/simulations/details/gauges.tsx

+51 −17

Original line number	Diff line number	Diff line
		@@ -10,6 +10,7 @@ import {
		LabelList,
		} from "recharts";
		import colors from "tailwindcss/colors";
		import { SimulationStatistic } from "../../../models/SimulationStatistic.model";

		function GaugeWrapper(props: { children: React.ReactNode }) {
		return (
		@@ -32,7 +33,13 @@ const pieChartFills = [
		colors.purple[500],
		];

		export function SimulationGauges({ metrics }: { metrics?: CoolingCDU[] }) {
		export function SimulationGauges({
		metrics,
		statistics,
		}: {
		metrics?: CoolingCDU[];
		statistics?: SimulationStatistic;
		}) {
		return (
		<>
		<div className="flex flex-col">
		@@ -90,22 +97,49 @@ export function SimulationGauges({ metrics }: { metrics?: CoolingCDU[] }) {
		/>
		</GaugeWrapper>
		</div>
		<div className="flex h-full w-full items-center justify-center">
		<ResponsiveContainer>
		<PieChart>
		<Pie data={tempData} dataKey="value" valueKey="name">
		<LabelList dataKey={"name"} />
		{tempData.map((d, i) => (
		<Cell
		style={{ outline: "none" }}
		key={d.name}
		fill={pieChartFills[i]}
		<div className="flex flex-col">
		<GaugeWrapper>
		<GraphHeader>P Flops</GraphHeader>
		<Gauge
		minValue={0}
		maxValue={2000}
		value={statistics?.p_flops}
		labels={{
		tickLabels: {
		type: "outer",
		ticks: [{ value: 500 }, { value: 1000 }, { value: 1500 }],
		},
		valueLabel: {
		formatTextValue: (value) => value,
		},
		}}
		arc={{
		colorArray: ["#5BE12C"],
		subArcs: [{ color: "#5BE12C", limit: 2000 }],
		}}
		/>
		</GaugeWrapper>
		<GaugeWrapper>
		<GraphHeader>G Flops</GraphHeader>
		<Gauge
		minValue={0}
		maxValue={2000}
		value={statistics?.g_flops_w}
		labels={{
		tickLabels: {
		type: "outer",
		ticks: [{ value: 500 }, { value: 1000 }, { value: 1500 }],
		},
		valueLabel: {
		formatTextValue: (value) => value,
		},
		}}
		arc={{
		colorArray: ["#5BE12C"],
		subArcs: [{ color: "#5BE12C", limit: 2000 }],
		}}
		/>
		))}
		</Pie>
		<Tooltip />
		</PieChart>
		</ResponsiveContainer>
		</GaugeWrapper>
		</div>
		<div className="flex flex-col">
		<GaugeWrapper>

src/models/SimulationStatistic.model.ts

+2 −0

Original line number	Diff line number	Diff line
		@@ -12,4 +12,6 @@ export interface SimulationStatistic {
		total_energy_consumed: number;
		carbon_emissions: number;
		total_cost: number;
		p_flops: number;
		g_flops_w: number;
		}

src/routes/simulations.$simulationId.summary.tsx

+4 −1

Original line number	Diff line number	Diff line
		@@ -80,7 +80,10 @@ function SimulationSummary() {
		{isLoadingMetrics ? (
		<LoadingSpinner />
		) : (
		<SimulationGauges metrics={currentMetrics} />
		<SimulationGauges
		metrics={currentMetrics}
		statistics={currentStatistics}
		/>
		)}
		</Section>
		<Section header={isFinal ? "Final Projections" : "Latest Projections"}>

src/routes/simulations.index.tsx

+4 −1

Original line number	Diff line number	Diff line
		import { createFileRoute } from "@tanstack/react-router";
		import { useState } from "react";
		import { useContext, useState } from "react";
		import { SimulationListControls } from "../components/simulations/list/SimulationListControls";
		import { SimulationsDataGrid } from "../components/simulations/list/SimulationsDataGrid";
		import { columns as SimulationColumns } from "../components/simulations/list/SimulationsGridColumns";
		@@ -8,6 +8,7 @@ import axios from "axios";
		import { Simulation } from "../models/Simulation.model";
		import { operatorCombinator, sortCombinator } from "../util/filterCombinator";
		import { ListResponse } from "../util/queryOptions";
		import { AppContext } from "../App";

		export const Route = createFileRoute("/simulations/")({
		component: SimulationList,
		@@ -17,6 +18,7 @@ const pageLimit = 18;

		function SimulationList() {
		const [columns, setColumns] = useState(structuredClone(SimulationColumns));
		const { AuthToken } = useContext(AppContext);

		const {
		data,
		@@ -49,6 +51,7 @@ function SimulationList() {
		? allPages.length
		: undefined,
		refetchOnWindowFocus: false,
		enabled: !!AuthToken,
		});

		const onSort = (

Admin message