Merge pull request #129 from DiamondLightSource/128-add-support-for-multiple-pvs-per-widget

128 add support for multiple PVs per widget

Author: GregJHarris

src/redux/csState.ts

@@ -27,6 +27,14 @@ export interface PvState {
   readonly: boolean;
 }
 
+export type PvDatum = PvState & {
+  effectivePvName: string;
+};
+
+export type PvDataCollection = {
+  pvData: PvDatum[];
+};
+
 export interface FullPvState extends PvState {
   initializingPvName: string;
 }

src/types/props.ts

@@ -15,6 +15,7 @@ export type GenericProp =
   | boolean
   | number
   | PV
+  | { pvName: PV }[]
   | Color
   | Font
   | Border

src/ui/hooks/useConnection.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { useSubscription } from "./useSubscription";
 import { useSelector } from "react-redux";
-import { CsState } from "../../redux/csState";
+import { CsState, PvDataCollection } from "../../redux/csState";
 import { pvStateSelector, PvArrayResults, pvStateComparator } from "./utils";
 import { SubscriptionType } from "../../connection/plugin";
 import { DType } from "../../types/dtypes";
@@ -27,6 +27,7 @@ export function useConnection(
   let readonly = false;
   let value = undefined;
   let effectivePvName = "undefined";
+
   if (pvName !== undefined) {
     const [pvState, effPvName] = pvResults[pvName];
     effectivePvName = effPvName;
@@ -36,5 +37,35 @@ export function useConnection(
       value = pvState.value;
     }
   }
+
   return [effectivePvName, connected, readonly, value];
 }
+
+export const useConnectionMultiplePv = (
+  id: string,
+  pvNames: string[],
+  type?: SubscriptionType
+): PvDataCollection => {
+  const pvNameArray = pvNames.filter(x => !!x);
+  const typeArray = !type ? [] : [type];
+
+  useSubscription(id, pvNameArray, typeArray);
+
+  const pvResults = useSelector(
+    (state: CsState): PvArrayResults => pvStateSelector(pvNameArray, state),
+    pvStateComparator
+  );
+
+  return {
+    pvData: pvNameArray.map(pvName => {
+      const [pvState, effPvName] = pvResults[pvName];
+
+      return {
+        effectivePvName: effPvName,
+        connected: pvState?.connected ?? false,
+        readonly: pvState?.readonly ?? false,
+        value: pvState?.value
+      };
+    })
+  };
+};

src/ui/widgets/BoolButton/boolButton.test.tsx

@@ -5,6 +5,7 @@ import { DType } from "../../../types/dtypes";
 import { Color } from "../../../types";
 import { ThemeProvider } from "@mui/material";
 import { phoebusTheme } from "../../../phoebusTheme";
+import { PvDatum } from "../../../redux/csState";
 
 const BoolButtonRenderer = (boolButtonProps: any): JSX.Element => {
   return (
@@ -14,8 +15,15 @@ const BoolButtonRenderer = (boolButtonProps: any): JSX.Element => {
   );
 };
 
+const TEST_PVDATUM = {
+  effectivePvName: "TEST:PV",
+  connected: true,
+  readonly: true,
+  value: new DType({ doubleValue: 1 })
+} as Partial<PvDatum> as PvDatum;
+
 const TEST_PROPS = {
-  value: new DType({ doubleValue: 1 }),
+  pvData: [TEST_PVDATUM],
   width: 45,
   height: 20,
   onColor: Color.fromRgba(0, 235, 10),
@@ -116,7 +124,7 @@ describe("<BoolButton />", (): void => {
   test("on click change led colour if no text ", async (): Promise<void> => {
     const boolButtonProps = {
       ...TEST_PROPS,
-      value: new DType({ doubleValue: 0 }),
+      pvData: [{ ...TEST_PVDATUM, value: new DType({ doubleValue: 0 }) }],
       onLabel: "",
       offLabel: "",
       showLed: true

src/ui/widgets/BoolButton/boolButton.tsx

@@ -17,6 +17,7 @@ import { writePv } from "../../hooks/useSubscription";
 import { DType } from "../../../types/dtypes";
 import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser";
 import { Button as MuiButton, styled, useTheme } from "@mui/material";
+import { getPvValueAndName } from "../utils";
 
 // For HTML button, these are the sizes of the buffer on
 // width and height. Must take into account when allocating
@@ -88,8 +89,7 @@ export const BoolButtonComponent = (
     height = WIDGET_DEFAULT_SIZES["bool_button"][1],
     foregroundColor = theme.palette.primary.contrastText,
     backgroundColor = theme.palette.primary.main,
-    pvName,
-    value,
+    pvData,
     onState = 1,
     offState = 0,
     onColor = Color.fromRgba(0, 255, 0),
@@ -100,6 +100,7 @@ export const BoolButtonComponent = (
     labelsFromPv = false,
     enabled = true
   } = props;
+  const { value, effectivePvName: pvName } = getPvValueAndName(pvData);
 
   const font = props.font?.css() ?? theme.typography;
 

src/ui/widgets/ByteMonitor/byteMonitor.test.tsx

@@ -7,6 +7,7 @@ import {
 import { Color } from "../../../types";
 import renderer, { ReactTestRendererJSON } from "react-test-renderer";
 import { DType } from "../../../types/dtypes";
+import { PvDatum } from "../../../redux/csState";
 
 const ByteMonitorRenderer = (byteMonitorProps: any): ReactTestRendererJSON => {
   return renderer
@@ -17,7 +18,14 @@ const ByteMonitorRenderer = (byteMonitorProps: any): ReactTestRendererJSON => {
 describe("<ByteMonitorComponent />", (): void => {
   test("default properties are added to bytemonitor component", (): void => {
     const byteMonitorProps = {
-      value: new DType({ doubleValue: 15 }),
+      pvData: [
+        {
+          effectivePvName: "TEST:PV",
+          connected: true,
+          readonly: true,
+          value: new DType({ doubleValue: 15 })
+        } as Partial<PvDatum> as PvDatum
+      ],
       height: 40,
       width: 40
     };
@@ -33,7 +41,14 @@ describe("<ByteMonitorComponent />", (): void => {
   });
   test("overwrite bytemonitor default values", (): void => {
     const byteMonitorProps = {
-      value: new DType({ doubleValue: 2 }),
+      pvData: [
+        {
+          effectivePvName: "TEST:PV",
+          connected: true,
+          readonly: true,
+          value: new DType({ doubleValue: 2 })
+        } as Partial<PvDatum> as PvDatum
+      ],
       height: 50,
       width: 50,
       startBit: 8,

src/ui/widgets/ByteMonitor/byteMonitor.tsx

@@ -11,6 +11,7 @@ import { registerWidget } from "../register";
 import classes from "./byteMonitor.module.css";
 import { Color } from "../../../types/color";
 import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser";
+import { getPvValueAndName } from "../utils";
 
 export const ByteMonitorProps = {
   width: IntPropOpt,
@@ -41,7 +42,7 @@ export const ByteMonitorComponent = (
   props: ByteMonitorComponentProps
 ): JSX.Element => {
   const {
-    value,
+    pvData,
     startBit = 0,
     horizontal = true,
     bitReverse = false,
@@ -54,6 +55,7 @@ export const ByteMonitorComponent = (
     width = WIDGET_DEFAULT_SIZES["byte_monitor"][0],
     height = WIDGET_DEFAULT_SIZES["byte_monitor"][1]
   } = props;
+  const { value } = getPvValueAndName(pvData);
 
   // Check for a value, otherwise set to 0
   const doubleValue = value?.getDoubleValue() || 0;

src/ui/widgets/Checkbox/checkbox.tsx

@@ -17,6 +17,7 @@ import {
 } from "@mui/material";
 import { writePv } from "../../hooks/useSubscription";
 import { DType } from "../../../types";
+import { getPvValueAndName } from "../utils";
 
 export const CheckboxProps = {
   label: StringPropOpt,
@@ -65,7 +66,8 @@ export const CheckboxComponent = (
   props: CheckboxComponentProps
 ): JSX.Element => {
   const theme = useTheme();
-  const { enabled = true, label = "Label", value, pvName } = props;
+  const { enabled = true, label = "Label", pvData } = props;
+  const { value, effectivePvName: pvName } = getPvValueAndName(pvData);
   const checked = Boolean(value?.getDoubleValue());
 
   const handleChange = (event: any): void => {

src/ui/widgets/ChoiceButton/choiceButton.test.tsx

@@ -5,6 +5,7 @@ import { DDisplay, DType } from "../../../types/dtypes";
 import { Color, Font } from "../../../types";
 import { ThemeProvider } from "@mui/material";
 import { phoebusTheme } from "../../../phoebusTheme";
+import { PvDatum } from "../../../redux/csState";
 
 const ChoiceButtonRenderer = (choiceButtonProps: any): JSX.Element => {
   return (
@@ -17,7 +18,14 @@ const ChoiceButtonRenderer = (choiceButtonProps: any): JSX.Element => {
 describe("<ChoiceButton />", (): void => {
   test("it renders ChoiceButton with default props", (): void => {
     const choiceButtonProps = {
-      value: null
+      pvData: [
+        {
+          effectivePvName: "TEST:PV",
+          connected: true,
+          readonly: true,
+          value: undefined
+        } as Partial<PvDatum> as PvDatum
+      ]
     };
     const { getAllByRole } = render(ChoiceButtonRenderer(choiceButtonProps));
     const buttons = getAllByRole("button") as Array<HTMLButtonElement>;
@@ -37,7 +45,14 @@ describe("<ChoiceButton />", (): void => {
 
   test("pass props to widget", (): void => {
     const choiceButtonProps = {
-      value: new DType({ doubleValue: 0 }),
+      pvData: [
+        {
+          effectivePvName: "TEST:PV",
+          connected: true,
+          readonly: true,
+          value: new DType({ doubleValue: 0 })
+        } as Partial<PvDatum> as PvDatum
+      ],
       width: 60,
       height: 140,
       font: new Font(12),
@@ -68,12 +83,19 @@ describe("<ChoiceButton />", (): void => {
 
   test("pass props to widget, using itemsFromPv", (): void => {
     const choiceButtonProps = {
-      value: new DType(
-        { doubleValue: 0 },
-        undefined,
-        undefined,
-        new DDisplay({ choices: ["hi", "Hello"] })
-      ),
+      pvData: [
+        {
+          effectivePvName: "TEST:PV",
+          connected: true,
+          readonly: true,
+          value: new DType(
+            { doubleValue: 0 },
+            undefined,
+            undefined,
+            new DDisplay({ choices: ["hi", "Hello"] })
+          )
+        } as Partial<PvDatum> as PvDatum
+      ],
       items: ["one", "two", "three"],
       horizontal: false,
       itemsFromPv: true,
@@ -90,7 +112,7 @@ describe("<ChoiceButton />", (): void => {
 
   test("selecting a button", (): void => {
     const choiceButtonProps = {
-      value: null
+      pvData: []
     };
     const { getAllByRole } = render(ChoiceButtonRenderer(choiceButtonProps));
     const buttons = getAllByRole("button") as Array<HTMLButtonElement>;

src/ui/widgets/ChoiceButton/choiceButton.tsx

@@ -21,6 +21,7 @@ import {
   useTheme
 } from "@mui/material";
 import { Color } from "../../../types";
+import { getPvValueAndName } from "../utils";
 
 const ChoiceButtonProps = {
   pvName: StringPropOpt,
@@ -71,16 +72,17 @@ export const ChoiceButtonComponent = (
   const {
     width = 100,
     height = 43,
-    value = null,
+    pvData,
     enabled = true,
     itemsFromPv = true,
-    pvName,
     items = ["Item 1", "Item 2"],
     horizontal = true,
     foregroundColor = theme.palette.primary.contrastText,
     backgroundColor = theme.palette.primary.main,
     selectedColor = Color.fromRgba(200, 200, 200)
   } = props;
+  const { value, effectivePvName: pvName } = getPvValueAndName(pvData);
+
   const font = props.font?.css() ?? theme.typography;
   const [selected, setSelected] = useState(value?.getDoubleValue());