From 9a4ed6d9700a994ef09de2fe75beae74cf09c9dc Mon Sep 17 00:00:00 2001 From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" Date: Fri, 3 Jul 2026 11:46:51 +0100 Subject: [PATCH 1/5] modified meter component to take in limits prop --- package.json | 2 +- src/ui/widgets/Meter/meter.tsx | 9 ++++++--- src/ui/widgets/Meter/meterUtilities.test.ts | 22 ++++++++++++++------- src/ui/widgets/Meter/meterUtilities.ts | 11 ++++++----- 4 files changed, 28 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 343b338a..807809a6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@diamondlightsource/cs-web-lib", "type": "module", - "version": "0.10.19", + "version": "0.10.20", "description": "Control system web library", "main": "./dist/index.cjs", "scripts": { diff --git a/src/ui/widgets/Meter/meter.tsx b/src/ui/widgets/Meter/meter.tsx index 126b6275..fe769cfa 100644 --- a/src/ui/widgets/Meter/meter.tsx +++ b/src/ui/widgets/Meter/meter.tsx @@ -39,13 +39,15 @@ export const MeterProps = { font: FontPropOpt, transparent: BoolPropOpt, showUnits: BoolPropOpt, - showValue: BoolPropOpt + showValue: BoolPropOpt, + showLimits: BoolPropOpt }; export type MeterComponentProps = InferWidgetProps & PVComponent; export const MeterComponent = (props: MeterComponentProps): JSX.Element => { + console.log("MeterComponent props:", props); const [ref, size] = useMeasuredSize(240, 120); const [style, newProps] = useStyle( @@ -60,7 +62,8 @@ export const MeterComponent = (props: MeterComponentProps): JSX.Element => { limitsFromPv = true, precision = undefined, showUnits = true, - showValue = true + showValue = true, + showLimits = true } = newProps as MeterComponentProps; const { value } = getPvValueAndName(pvData); @@ -149,7 +152,7 @@ export const MeterComponent = (props: MeterComponentProps): JSX.Element => { arc={{ padding: 0, cornerRadius: 0, - subArcs: buildSubArcs( + subArcs: buildSubArcs(showLimits, style?.colors?.color as string, minimum, maximum, diff --git a/src/ui/widgets/Meter/meterUtilities.test.ts b/src/ui/widgets/Meter/meterUtilities.test.ts index 0f9d04d3..1f41073b 100644 --- a/src/ui/widgets/Meter/meterUtilities.test.ts +++ b/src/ui/widgets/Meter/meterUtilities.test.ts @@ -167,7 +167,7 @@ describe("formatValue", () => { describe("buildSubArcs", () => { it("should build sub arcs with all ranges defined", () => { - const subArcs = buildSubArcs("blue", 0, 100, 10, 20, 80, 90); + const subArcs = buildSubArcs(true, "blue", 0, 100, 10, 20, 80, 90); expect(subArcs).toHaveLength(5); expect(subArcs[0].limit).toBe(10); @@ -187,7 +187,7 @@ describe("buildSubArcs", () => { }); it("should build sub arcs with only warning ranges", () => { - const subArcs = buildSubArcs("green", 0, 100, undefined, 20, 80, undefined); + const subArcs = buildSubArcs(true, "green", 0, 100, undefined, 20, 80, undefined); expect(subArcs).toHaveLength(3); expect(subArcs[0].limit).toBe(20); @@ -201,7 +201,7 @@ describe("buildSubArcs", () => { }); it("should build sub arcs with only alarm ranges", () => { - const subArcs = buildSubArcs("red", 0, 100, 10, undefined, undefined, 90); + const subArcs = buildSubArcs(true, "red", 0, 100, 10, undefined, undefined, 90); expect(subArcs).toHaveLength(3); expect(subArcs[0].limit).toBe(10); @@ -215,7 +215,7 @@ describe("buildSubArcs", () => { }); it("should build sub arcs when low value alarm range greater then low value warning range", () => { - const subArcs = buildSubArcs("green", 0, 100, 20, 10, 80, 90); + const subArcs = buildSubArcs(true, "green", 0, 100, 20, 10, 80, 90); expect(subArcs).toHaveLength(4); expect(subArcs[0].limit).toBe(20); @@ -232,7 +232,7 @@ describe("buildSubArcs", () => { }); it("should build sub arcs when high value alarm range lower than high value warning range", () => { - const subArcs = buildSubArcs("green", 0, 100, 10, 20, 80, 70); + const subArcs = buildSubArcs(true, "green", 0, 100, 10, 20, 80, 70); expect(subArcs).toHaveLength(4); expect(subArcs[0].limit).toBe(10); @@ -249,7 +249,7 @@ describe("buildSubArcs", () => { }); it("should build sub arcs with no ranges", () => { - const subArcs = buildSubArcs( + const subArcs = buildSubArcs(true, "purple", 0, 100, @@ -265,11 +265,19 @@ describe("buildSubArcs", () => { }); it("should clamp values to min/max bounds", () => { - const subArcs = buildSubArcs("blue", 50, 150, 0, 60, 160, 200); + const subArcs = buildSubArcs(true, "blue", 50, 150, 0, 60, 160, 200); expect(subArcs[0].limit).toBe(60); // upper limit of low value alarm range expect(subArcs[2].limit).toBe(150); // Maximum value }); + + it("should not build sub arcs when showLimits is false", () => { + const subArcs = buildSubArcs(false, "blue", 0, 100, 10, 20, 80, 90); + + expect(subArcs).toHaveLength(1); + expect(subArcs[0].limit).toBe(100); + expect(subArcs[0].color).toBe("blue"); + }); }); describe("createIntervals", () => { diff --git a/src/ui/widgets/Meter/meterUtilities.ts b/src/ui/widgets/Meter/meterUtilities.ts index aabe6097..58bd8f28 100644 --- a/src/ui/widgets/Meter/meterUtilities.ts +++ b/src/ui/widgets/Meter/meterUtilities.ts @@ -98,6 +98,7 @@ export const formatValue = * @returns An array of sub arc for the meter */ export const buildSubArcs = ( + showLimits: boolean, foregroundColor: string, minimum: number, maximum: number, @@ -111,7 +112,7 @@ export const buildSubArcs = ( const withinBounds = (value: number) => Math.min(maximum, Math.max(minimum, value)); - if (alarmRangeMin && alarmRangeMin > minimum) { + if ((alarmRangeMin && alarmRangeMin > minimum) && showLimits) { subArcs.push({ limit: withinBounds(alarmRangeMin), width: 0.04, @@ -120,7 +121,7 @@ export const buildSubArcs = ( }); } - if (warningRangeMin && warningRangeMin > (alarmRangeMin ?? minimum)) { + if ((warningRangeMin && warningRangeMin > (alarmRangeMin ?? minimum)) && showLimits) { subArcs.push({ limit: withinBounds(warningRangeMin), width: 0.04, @@ -130,7 +131,7 @@ export const buildSubArcs = ( } subArcs.push({ - limit: withinBounds( + limit: withinBounds(!showLimits ? maximum : Math.min(warningRangeMax ?? maximum, alarmRangeMax ?? maximum) ), width: 0.02, @@ -138,7 +139,7 @@ export const buildSubArcs = ( color: foregroundColor }); - if (warningRangeMax && warningRangeMax < (alarmRangeMax ?? maximum)) { + if ((warningRangeMax && warningRangeMax < (alarmRangeMax ?? maximum)) && showLimits) { subArcs.push({ limit: withinBounds(alarmRangeMax ?? maximum), width: 0.04, @@ -147,7 +148,7 @@ export const buildSubArcs = ( }); } - if (alarmRangeMax && alarmRangeMax < maximum) { + if ((alarmRangeMax && alarmRangeMax < maximum) && showLimits) { subArcs.push({ limit: withinBounds(maximum), width: 0.04, From 42e082ed248322e1ea2a8485544c3b24dec94cea Mon Sep 17 00:00:00 2001 From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" Date: Fri, 3 Jul 2026 11:52:42 +0100 Subject: [PATCH 2/5] lint fix --- src/ui/widgets/Meter/meter.tsx | 3 ++- src/ui/widgets/Meter/meterUtilities.test.ts | 25 ++++++++++++++++++--- src/ui/widgets/Meter/meterUtilities.ts | 22 +++++++++++++----- 3 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/ui/widgets/Meter/meter.tsx b/src/ui/widgets/Meter/meter.tsx index fe769cfa..7bc720c1 100644 --- a/src/ui/widgets/Meter/meter.tsx +++ b/src/ui/widgets/Meter/meter.tsx @@ -152,7 +152,8 @@ export const MeterComponent = (props: MeterComponentProps): JSX.Element => { arc={{ padding: 0, cornerRadius: 0, - subArcs: buildSubArcs(showLimits, + subArcs: buildSubArcs( + showLimits, style?.colors?.color as string, minimum, maximum, diff --git a/src/ui/widgets/Meter/meterUtilities.test.ts b/src/ui/widgets/Meter/meterUtilities.test.ts index 1f41073b..f328a710 100644 --- a/src/ui/widgets/Meter/meterUtilities.test.ts +++ b/src/ui/widgets/Meter/meterUtilities.test.ts @@ -187,7 +187,16 @@ describe("buildSubArcs", () => { }); it("should build sub arcs with only warning ranges", () => { - const subArcs = buildSubArcs(true, "green", 0, 100, undefined, 20, 80, undefined); + const subArcs = buildSubArcs( + true, + "green", + 0, + 100, + undefined, + 20, + 80, + undefined + ); expect(subArcs).toHaveLength(3); expect(subArcs[0].limit).toBe(20); @@ -201,7 +210,16 @@ describe("buildSubArcs", () => { }); it("should build sub arcs with only alarm ranges", () => { - const subArcs = buildSubArcs(true, "red", 0, 100, 10, undefined, undefined, 90); + const subArcs = buildSubArcs( + true, + "red", + 0, + 100, + 10, + undefined, + undefined, + 90 + ); expect(subArcs).toHaveLength(3); expect(subArcs[0].limit).toBe(10); @@ -249,7 +267,8 @@ describe("buildSubArcs", () => { }); it("should build sub arcs with no ranges", () => { - const subArcs = buildSubArcs(true, + const subArcs = buildSubArcs( + true, "purple", 0, 100, diff --git a/src/ui/widgets/Meter/meterUtilities.ts b/src/ui/widgets/Meter/meterUtilities.ts index 58bd8f28..f9075fc7 100644 --- a/src/ui/widgets/Meter/meterUtilities.ts +++ b/src/ui/widgets/Meter/meterUtilities.ts @@ -112,7 +112,7 @@ export const buildSubArcs = ( const withinBounds = (value: number) => Math.min(maximum, Math.max(minimum, value)); - if ((alarmRangeMin && alarmRangeMin > minimum) && showLimits) { + if (alarmRangeMin && alarmRangeMin > minimum && showLimits) { subArcs.push({ limit: withinBounds(alarmRangeMin), width: 0.04, @@ -121,7 +121,11 @@ export const buildSubArcs = ( }); } - if ((warningRangeMin && warningRangeMin > (alarmRangeMin ?? minimum)) && showLimits) { + if ( + warningRangeMin && + warningRangeMin > (alarmRangeMin ?? minimum) && + showLimits + ) { subArcs.push({ limit: withinBounds(warningRangeMin), width: 0.04, @@ -131,15 +135,21 @@ export const buildSubArcs = ( } subArcs.push({ - limit: withinBounds(!showLimits ? maximum : - Math.min(warningRangeMax ?? maximum, alarmRangeMax ?? maximum) + limit: withinBounds( + !showLimits + ? maximum + : Math.min(warningRangeMax ?? maximum, alarmRangeMax ?? maximum) ), width: 0.02, showTick: false, color: foregroundColor }); - if ((warningRangeMax && warningRangeMax < (alarmRangeMax ?? maximum)) && showLimits) { + if ( + warningRangeMax && + warningRangeMax < (alarmRangeMax ?? maximum) && + showLimits + ) { subArcs.push({ limit: withinBounds(alarmRangeMax ?? maximum), width: 0.04, @@ -148,7 +158,7 @@ export const buildSubArcs = ( }); } - if ((alarmRangeMax && alarmRangeMax < maximum) && showLimits) { + if (alarmRangeMax && alarmRangeMax < maximum && showLimits) { subArcs.push({ limit: withinBounds(maximum), width: 0.04, From c77e45e73ed7e92923fb2e41eac05eea14c19b36 Mon Sep 17 00:00:00 2001 From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" Date: Fri, 3 Jul 2026 11:54:45 +0100 Subject: [PATCH 3/5] removed console.log --- src/ui/widgets/Meter/meter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/widgets/Meter/meter.tsx b/src/ui/widgets/Meter/meter.tsx index 7bc720c1..62570617 100644 --- a/src/ui/widgets/Meter/meter.tsx +++ b/src/ui/widgets/Meter/meter.tsx @@ -47,7 +47,7 @@ export type MeterComponentProps = InferWidgetProps & PVComponent; export const MeterComponent = (props: MeterComponentProps): JSX.Element => { - console.log("MeterComponent props:", props); + const [ref, size] = useMeasuredSize(240, 120); const [style, newProps] = useStyle( From 82f2f36179ffa045df2950ac5ce561e348323389 Mon Sep 17 00:00:00 2001 From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" Date: Fri, 3 Jul 2026 11:57:36 +0100 Subject: [PATCH 4/5] linting fix, again! --- src/ui/widgets/Meter/meter.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/widgets/Meter/meter.tsx b/src/ui/widgets/Meter/meter.tsx index 62570617..13af3e8b 100644 --- a/src/ui/widgets/Meter/meter.tsx +++ b/src/ui/widgets/Meter/meter.tsx @@ -47,7 +47,6 @@ export type MeterComponentProps = InferWidgetProps & PVComponent; export const MeterComponent = (props: MeterComponentProps): JSX.Element => { - const [ref, size] = useMeasuredSize(240, 120); const [style, newProps] = useStyle( From 9fa56901d0cc6075e3540f576c534a44bd5e8b50 Mon Sep 17 00:00:00 2001 From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" Date: Fri, 3 Jul 2026 12:02:23 +0100 Subject: [PATCH 5/5] fixed meter test --- src/ui/widgets/Meter/meter.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/widgets/Meter/meter.test.tsx b/src/ui/widgets/Meter/meter.test.tsx index 67d3d117..7e1b0334 100644 --- a/src/ui/widgets/Meter/meter.test.tsx +++ b/src/ui/widgets/Meter/meter.test.tsx @@ -159,6 +159,7 @@ describe("MeterComponent", () => { render(); expect(meterUtilities.buildSubArcs).toHaveBeenCalledWith( + true, "rgba(0,0,0,1)", 0, 100,