plotId

bencherdev · Nov 24, 2024 · ade8aad · ade8aad
1 parent 4768bc2
commit ade8aad
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 3 deletions.
diff --git a/services/console/src/components/console/perf/PerfFrame.tsx b/services/console/src/components/console/perf/PerfFrame.tsx
@@ -25,11 +25,12 @@ import type { Theme } from "../../navbar/theme/theme";
 import PerfPlot from "./plot/PerfPlot";
 
 export interface Props {
-	children?: any;
+	children?: any | undefined;
 	apiUrl: string;
 	user: JsonAuthUser;
 	isConsole?: boolean;
 	isEmbed?: boolean;
+	plotId?: string;
 	theme: Accessor<Theme>;
 	project?: Resource<JsonProject>;
 	project_slug: Accessor<string | undefined>;
@@ -135,6 +136,7 @@ const PerfFrame = (props: Props) => {
 			theme={props.theme}
 			isConsole={props.isConsole === true}
 			isEmbed={props.isEmbed === true}
+			plotId={props.plotId}
 			measuresIsEmpty={props.measuresIsEmpty}
 			branchesIsEmpty={props.branchesIsEmpty}
 			testbedsIsEmpty={props.testbedsIsEmpty}

diff --git a/services/console/src/components/console/perf/plot/PerfPlot.tsx b/services/console/src/components/console/perf/plot/PerfPlot.tsx
@@ -26,6 +26,7 @@ export interface Props {
 	theme: Accessor<Theme>;
 	isConsole: boolean;
 	isEmbed: boolean;
+	plotId: string | undefined;
 	measuresIsEmpty: Accessor<boolean>;
 	branchesIsEmpty: Accessor<boolean>;
 	testbedsIsEmpty: Accessor<boolean>;
@@ -106,6 +107,7 @@ const PerfPlot = (props: Props) => {
 									theme={props.theme}
 									isConsole={props.isConsole}
 									isEmbed={props.isEmbed}
+									plotId={props.plotId}
 									x_axis={props.x_axis}
 									lower_value={props.lower_value}
 									upper_value={props.upper_value}

diff --git a/services/console/src/components/console/perf/plot/Plot.tsx b/services/console/src/components/console/perf/plot/Plot.tsx
@@ -16,6 +16,7 @@ export interface Props {
 	theme: Accessor<Theme>;
 	isConsole: boolean;
 	isEmbed: boolean;
+	plotId: string | undefined;
 	x_axis: Accessor<XAxis>;
 	lower_value: Accessor<boolean>;
 	upper_value: Accessor<boolean>;
@@ -69,6 +70,7 @@ const Plot = (props: Props) => {
 				<LinePlot
 					theme={props.theme}
 					isConsole={props.isConsole}
+					plotId={props.plotId}
 					perfData={props.perfData}
 					x_axis={props.x_axis}
 					lower_value={props.lower_value}

diff --git a/services/console/src/components/console/perf/plot/line/LinePlot.tsx b/services/console/src/components/console/perf/plot/line/LinePlot.tsx
@@ -30,6 +30,7 @@ const SIREN_URL = "https://s3.amazonaws.com/public.bencher.dev/perf/siren.png";
 export interface Props {
 	theme: Accessor<Theme>;
 	isConsole: boolean;
+	plotId: string | undefined;
 	perfData: Resource<JsonPerf>;
 	x_axis: Accessor<XAxis>;
 	lower_value: Accessor<boolean>;
@@ -112,6 +113,7 @@ const LinePlot = (props: Props) => {
 
 	const [isPlotted, setIsPlotted] = createSignal(false);
 	const [y_label_area_size, set_y_label_area_size] = createSignal(512);
+	const plotId = createMemo(() => props.plotId ?? "line-plot");
 
 	const [x_axis, setRange] = createSignal(props.x_axis());
 	const [lower_value, setLowerValue] = createSignal(props.lower_value());
@@ -125,8 +127,9 @@ const LinePlot = (props: Props) => {
 
 	createEffect(() => {
 		if (isPlotted()) {
+			const plotIdEscaped = CSS.escape(plotId());
 			const y_axis = document.querySelector(
-				"svg [aria-label='y-axis tick label']",
+				`#${plotIdEscaped} svg [aria-label='y-axis tick label']`,
 			);
 			if (!y_axis) {
 				return;
@@ -410,7 +413,7 @@ const LinePlot = (props: Props) => {
 		if (metrics_found) {
 			return (
 				<>
-					<div>
+					<div id={plotId()}>
 						{addTooltips(
 							Plot.plot({
 								x: {

diff --git a/services/console/src/components/console/plots/PinnedFrame.tsx b/services/console/src/components/console/plots/PinnedFrame.tsx
@@ -89,6 +89,7 @@ const PinnedFrame = (props: Props) => {
 				user={props.user}
 				isConsole={props.isConsole}
 				isEmbed={true}
+				plotId={props.plot?.uuid}
 				theme={theme}
 				project_slug={props.project_slug}
 				measuresIsEmpty={measuresIsEmpty}