fix bug in wall display - states sometimes not updating because setSt…

…ate not called - https://react.dev/learn/updating-arrays-in-state#replacing-items-in-an-array
ISISComputingGroup · Nov 27, 2024 · d2df494 · d2df494
1 parent 1e0e121
commit d2df494
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 123 deletions.
diff --git a/app/types.ts b/app/types.ts
@@ -141,3 +141,8 @@ export interface ConfigOutputIocMacro {
   name: string;
   value: string;
 }
+
+export interface targetStation {
+  targetStation: string;
+  instruments: Array<IfcInstrumentStatus>;
+}
diff --git a/app/wall/components/ShowHideBeamInfo.tsx b/app/wall/components/ShowHideBeamInfo.tsx
@@ -23,8 +23,9 @@ export default function ShowHideBeamInfo() {
           <Image
             src={`https://www.isis.stfc.ac.uk/Gallery/beam-status/ISIS_Status.jpg?t=${date}`}
             alt="beam info"
-            height={600}
-            width={600}
+            height={400}
+            width={0}
+            className={"w-auto"}
           />
         </span>
       </label>

diff --git a/app/wall/page.tsx b/app/wall/page.tsx
@@ -1,104 +1,102 @@
 "use client";
-import { Inter } from "next/font/google";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import useWebSocket from "react-use-websocket";
 import { dehex_and_decompress } from "../components/dehex_and_decompress";
 import InstrumentGroup from "./components/InstrumentGroup";
 import ShowHideBeamInfo from "./components/ShowHideBeamInfo";
 import JenkinsJobIframe from "./components/JenkinsJobsIframe";
-import {
-  IfcInstrumentStatus,
-  IfcPVWSMessage,
-  IfcPVWSRequest,
-} from "@/app/types";
-
-const inter = Inter({ subsets: ["latin"] });
+import { IfcPVWSMessage, IfcPVWSRequest, targetStation } from "@/app/types";
 
 export default function WallDisplay() {
   const runstatePV = "DAE:RUNSTATE_STR";
   const instListPV = "CS:INSTLIST";
 
-  const [TS1Data] = useState<Array<IfcInstrumentStatus>>(
-    [
-      { name: "ALF" },
-      { name: "CRISP" },
-      { name: "EMMA-A" },
-      { name: "EMU" },
-      { name: "ENGINX" },
-      { name: "GEM" },
-      {
-        name: "HIFI-CRYOMAG",
-      },
-      { name: "HRPD" },
-      { name: "INES" },
-      { name: "IRIS" },
-      { name: "LOQ" },
-      { name: "MAPS" },
-      { name: "MARI" },
-      { name: "MERLIN" },
-      { name: "MUONFE" },
-      { name: "MUSR" },
-      { name: "OSIRIS" },
-      { name: "PEARL" },
-      { name: "POLARIS" },
-      { name: "RIKENFE" },
-      { name: "SANDALS" },
-      { name: "SCIDEMO" },
-      { name: "SURF" },
-      { name: "SXD" },
-      { name: "TOSCA" },
-      { name: "VESUVIO" },
-    ].sort((a, b) => a.name.localeCompare(b.name)),
-  );
-  const [TS2Data] = useState<Array<IfcInstrumentStatus>>(
-    [
-      { name: "CHIPIR" },
-      { name: "IMAT" },
-      { name: "INTER" },
-      { name: "LARMOR" },
-      { name: "LET" },
-      { name: "NIMROD" },
-      { name: "OFFSPEC" },
-      { name: "POLREF" },
-      { name: "SANS2D" },
-      { name: "WISH" },
-      { name: "ZOOM" },
-    ].sort((a, b) => a.name.localeCompare(b.name)),
-  );
-  const [miscData] = useState<Array<IfcInstrumentStatus>>(
-    [
-      { name: "ARGUS" },
-      { name: "CHRONUS" },
-      {
-        name: "CRYOLAB_R80",
-      },
-      { name: "DCLAB" },
-      { name: "DEMO" },
-      { name: "DETMON" },
-      {
-        name: "ENGINX_SETUP",
-      },
-      { name: "HIFI" },
-      {
-        name: "HRPD_SETUP",
-      },
-      {
-        name: "IBEXGUITEST",
-      },
-      {
-        name: "IRIS_SETUP",
-      },
-      { name: "MOTION" },
-      {
-        name: "PEARL_SETUP",
-      },
-      { name: "SELAB" },
-      { name: "SOFTMAT" },
-      {
-        name: "WISH_SETUP",
-      },
-    ].sort((a, b) => a.name.localeCompare(b.name)),
-  );
+  const [data, setData] = useState<Array<targetStation>>([
+    {
+      targetStation: "Target Station 1",
+      instruments: [
+        { name: "ALF" },
+        { name: "CRISP" },
+        { name: "EMMA-A" },
+        { name: "EMU" },
+        { name: "ENGINX" },
+        { name: "GEM" },
+        {
+          name: "HIFI-CRYOMAG",
+        },
+        { name: "HRPD" },
+        { name: "INES" },
+        { name: "IRIS" },
+        { name: "LOQ" },
+        { name: "MAPS" },
+        { name: "MARI" },
+        { name: "MERLIN" },
+        { name: "MUONFE" },
+        { name: "MUSR" },
+        { name: "OSIRIS" },
+        { name: "PEARL" },
+        { name: "POLARIS" },
+        { name: "RIKENFE" },
+        { name: "SANDALS" },
+        { name: "SCIDEMO" },
+        { name: "SURF" },
+        { name: "SXD" },
+        { name: "TOSCA" },
+        { name: "VESUVIO" },
+      ].sort((a, b) => a.name.localeCompare(b.name)),
+    },
+    {
+      targetStation: "Target Station 2",
+      instruments: [
+        { name: "CHIPIR" },
+        { name: "IMAT" },
+        { name: "INTER" },
+        { name: "LARMOR" },
+        { name: "LET" },
+        { name: "NIMROD" },
+        { name: "OFFSPEC" },
+        { name: "POLREF" },
+        { name: "SANS2D" },
+        { name: "WISH" },
+        { name: "ZOOM" },
+      ].sort((a, b) => a.name.localeCompare(b.name)),
+    },
+    {
+      targetStation: "Miscellaneous",
+      instruments: [
+        { name: "ARGUS" },
+        { name: "CHRONUS" },
+        {
+          name: "CRYOLAB_R80",
+        },
+        { name: "DCLAB" },
+        { name: "DEMO" },
+        { name: "DETMON" },
+        {
+          name: "ENGINX_SETUP",
+        },
+        { name: "HIFI" },
+        {
+          name: "HRPD_SETUP",
+        },
+        {
+          name: "IBEXGUITEST",
+        },
+        {
+          name: "IRIS_SETUP",
+        },
+        { name: "MOTION" },
+        {
+          name: "PEARL_SETUP",
+        },
+        { name: "SELAB" },
+        { name: "SOFTMAT" },
+        {
+          name: "WISH_SETUP",
+        },
+      ].sort((a, b) => a.name.localeCompare(b.name)),
+    },
+  ]);
 
   const socketURL = process.env.NEXT_PUBLIC_WS_URL!;
 
@@ -140,32 +138,45 @@ export default function WallDisplay() {
           // Iterate through the instlist, find their associated object in the ts1data, ts2data or miscData arrays, get the runstate PV and subscribe
           const instName = item["name"];
           const instPrefix = item["pvPrefix"];
-          const foundInstrument = [...TS1Data, ...TS2Data, ...miscData].find(
-            (instrument) => instrument.name === instName,
-          );
-          if (foundInstrument) {
-            // Subscribe to the instrument's runstate PV
-            foundInstrument.pv = instPrefix + runstatePV;
-            sendJsonMessage({ type: "subscribe", pvs: [foundInstrument.pv] });
-          }
+          setData((prev) => {
+            const newData: Array<targetStation> = [...prev];
+            newData.map((targetStation) => {
+              const foundInstrument = targetStation.instruments.find(
+                (instrument) => instrument.name === instName,
+              );
+              if (foundInstrument) {
+                // Subscribe to the instrument's runstate PV
+                foundInstrument.pv = instPrefix + runstatePV;
+                sendJsonMessage({
+                  type: "subscribe",
+                  pvs: [foundInstrument.pv],
+                });
+              }
+            });
+            return newData;
+          });
         }
       }
-    } else {
-      // An instrument's runstate has changed. Find the instrument and update its status (if there is one!).
-      const foundInstrument = [...TS1Data, ...TS2Data, ...miscData].find(
-        (instrument) => instrument.pv === updatedPVName,
-      );
-      if (updatedPVvalue && foundInstrument) {
-        foundInstrument.status = updatedPVvalue;
-      }
+    } else if (updatedPVvalue) {
+      setData((prev) => {
+        const newData: Array<targetStation> = [...prev];
+        newData.map((targetStation) => {
+          const foundInstrument = targetStation.instruments.findIndex(
+            (instrument) => instrument.pv === updatedPVName,
+          );
+          if (foundInstrument >= 0)
+            targetStation.instruments[foundInstrument].status = updatedPVvalue;
+        });
+        return newData;
+      });
     }
-  }, [lastJsonMessage, TS1Data, TS2Data, miscData, sendJsonMessage]);
+  }, [lastJsonMessage, sendJsonMessage]);
 
   return (
     <main
-      className={`flex min-h-screen bg-white dark:bg-zinc-800 flex-col items-center justify-between ${inter.className}`}
+      className={`flex min-h-screen bg-white dark:bg-zinc-800 flex-col items-center justify-between`}
     >
-      <section className=" rounded-xl w-full  w-full  md:px-0 md:w-11/12 my-4 ">
+      <section className=" rounded-xl w-full md:px-0 md:w-11/12 my-4 ">
         <div className="mx-auto  ">
           <ShowHideBeamInfo />
           <div className="w-full mx-auto text-left flex justify-center items-center p-8 dark:bg-zinc-900 rounded-xl">
@@ -176,18 +187,16 @@ export default function WallDisplay() {
               <h1 className="w-full text-left text-black dark:text-white font-semibold text-2xl   ">
                 Instrument Status:
               </h1>
-              <InstrumentGroup
-                groupName={"Target Station 1"}
-                data={TS1Data}
-              ></InstrumentGroup>
-              <InstrumentGroup
-                groupName={"Target Station 2"}
-                data={TS2Data}
-              ></InstrumentGroup>
-              <InstrumentGroup
-                groupName={"Miscellaneous"}
-                data={miscData}
-              ></InstrumentGroup>
+
+              {data.map((targetStation) => {
+                return (
+                  <InstrumentGroup
+                    key={targetStation.targetStation}
+                    groupName={targetStation.targetStation}
+                    data={targetStation.instruments}
+                  />
+                );
+              })}
             </div>
           </div>
           <hr className="h-[2px] rounded my-4 bg-gray-200 border-0 dark:bg-gray-600" />