status_bar

bencherdev · Nov 15, 2023 · 4457ee9 · 4457ee9
1 parent c656652
commit 4457ee9
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 23 deletions.
diff --git a/services/console/src/components/console/perf/plot/LinePlot.tsx b/services/console/src/components/console/perf/plot/LinePlot.tsx
@@ -1,6 +1,11 @@
 import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
-import { type Accessor, createEffect, createSignal } from "solid-js";
+import {
+	type Accessor,
+	type Resource,
+	createEffect,
+	createSignal,
+} from "solid-js";
 import { PerfRange } from "../../../../config/types";
 import {
 	AlertStatus,
@@ -16,7 +21,7 @@ const WARNING_URL = "https://s3.amazonaws.com/public.bencher.dev/warning.png";
 const SIREN_URL = "https://s3.amazonaws.com/public.bencher.dev/siren.png";
 
 export interface Props {
-	perfData: Accessor<JsonPerf>;
+	perfData: Resource<JsonPerf>;
 	range: Accessor<PerfRange>;
 	lower_value: Accessor<boolean>;
 	upper_value: Accessor<boolean>;
@@ -104,11 +109,12 @@ const LinePlot = (props: Props) => {
 	});
 
 	const plotted = () => {
-		const json_perf: JsonPerf = props.perfData();
+		const json_perf = props.perfData();
 		// console.log(json_perf);
 
 		if (
 			typeof json_perf !== "object" ||
+			json_perf === undefined ||
 			json_perf === null ||
 			!Array.isArray(json_perf.results)
 		) {

diff --git a/services/console/src/components/console/perf/plot/PerfPlot.tsx b/services/console/src/components/console/perf/plot/PerfPlot.tsx
@@ -1,4 +1,4 @@
-import { type Accessor, type Resource, Show } from "solid-js";
+import { type Accessor, Match, type Resource, Show, Switch } from "solid-js";
 import { type PerfRange, type PerfTab } from "../../../../config/types";
 import type {
 	JsonAuthUser,
@@ -30,7 +30,7 @@ export interface Props {
 	start_date: Accessor<undefined | string>;
 	end_date: Accessor<undefined | string>;
 	refresh: () => void;
-	perfData: Accessor<JsonPerf>;
+	perfData: Resource<JsonPerf>;
 	tab: Accessor<PerfTab>;
 	key: Accessor<boolean>;
 	range: Accessor<PerfRange>;
@@ -109,8 +109,7 @@ const PerfPlot = (props: Props) => {
 						handleUpperBoundary={props.handleUpperBoundary}
 					/>
 					<div class="panel-block">
-						<Show
-							when={props.isPlotInit()}
+						<Switch
 							fallback={
 								<Plot
 									range={props.range}
@@ -124,14 +123,23 @@ const PerfPlot = (props: Props) => {
 								/>
 							}
 						>
-							<PlotInit
-								metric_kinds={props.metric_kinds}
-								branches={props.branches}
-								testbeds={props.testbeds}
-								benchmarks={props.benchmarks}
-								handleTab={props.handleTab}
-							/>
-						</Show>
+							<Match when={props.isPlotInit()}>
+								<PlotInit
+									metric_kinds={props.metric_kinds}
+									branches={props.branches}
+									testbeds={props.testbeds}
+									benchmarks={props.benchmarks}
+									handleTab={props.handleTab}
+								/>
+							</Match>
+							<Match when={props.perfData.loading}>
+								<progress
+									class="progress is-primary"
+									style="margin-top: 8rem; margin-bottom: 12rem;"
+									max="100"
+								></progress>
+							</Match>
+						</Switch>
 					</div>
 					<Show when={!props.isEmbed}>
 						<PlotTab

diff --git a/services/console/src/components/console/perf/plot/Plot.tsx b/services/console/src/components/console/perf/plot/Plot.tsx
@@ -1,18 +1,23 @@
 import { createElementSize } from "@solid-primitives/resize-observer";
-import { type Accessor, createMemo, createResource } from "solid-js";
+import {
+	type Accessor,
+	type Resource,
+	createMemo,
+	createResource,
+} from "solid-js";
 import { createStore } from "solid-js/store";
+import type { PerfRange } from "../../../../config/types";
+import type { JsonPerf } from "../../../../types/bencher";
 import LinePlot from "./LinePlot";
 import PlotKey from "./PlotKey";
-import type { JsonPerf } from "../../../../types/bencher";
-import type { PerfRange } from "../../../../config/types";
 
 export interface Props {
 	range: Accessor<PerfRange>;
 	lower_value: Accessor<boolean>;
 	upper_value: Accessor<boolean>;
 	lower_boundary: Accessor<boolean>;
 	upper_boundary: Accessor<boolean>;
-	perfData: Accessor<JsonPerf>;
+	perfData: Resource<JsonPerf>;
 	key: Accessor<boolean>;
 	handleKey: (key: boolean) => void;
 }

diff --git a/services/console/src/components/console/perf/plot/PlotKey.tsx b/services/console/src/components/console/perf/plot/PlotKey.tsx
@@ -1,11 +1,11 @@
 import * as d3 from "d3";
-import { Accessor, For, Show } from "solid-js";
+import { type Accessor, For, type Resource, Show } from "solid-js";
 import type { JsonPerf } from "../../../../types/bencher";
 
 export interface Props {
 	key: Accessor<boolean>;
 	handleKey: (key: boolean) => void;
-	perfData: Accessor<JsonPerf>;
+	perfData: Resource<JsonPerf>;
 	perfActive: boolean[];
 	handlePerfActive: (index: number) => void;
 }
@@ -34,7 +34,7 @@ const PlotKey = (props: Props) => {
 };
 
 const ExpandedKey = (props: {
-	perfData: Accessor<JsonPerf>;
+	perfData: Resource<JsonPerf>;
 	handleKey: (key: boolean) => void;
 	perfActive: boolean[];
 	handlePerfActive: (index: number) => void;
@@ -73,7 +73,7 @@ const ExpandedKey = (props: {
 };
 
 const MinimizedKey = (props: {
-	perfData: Accessor<JsonPerf>;
+	perfData: Resource<JsonPerf>;
 	handleKey: (key: boolean) => void;
 	perfActive: boolean[];
 	handlePerfActive: (index: number) => void;