bar

Author: Tom-Willemsen

app/components/Block.tsx

@@ -23,18 +23,6 @@ export default function Block({
   }
   if (pv.value != currentValue) {
     setCurrentValue(pv.value);
-    // Let the user know a change has occurred by lighting up the green dot next to the value
-    const pvChangedIndicator = document.getElementById(
-      pv.human_readable_name + "_CIRCLE",
-    );
-    if (!pvChangedIndicator) return;
-    if (pvChangedIndicator.classList.contains("text-green-500")) return;
-    pvChangedIndicator.classList.remove("text-transparent");
-    pvChangedIndicator.classList.add("text-green-500");
-    setTimeout(() => {
-      pvChangedIndicator.classList.remove("text-green-500");
-      pvChangedIndicator.classList.add("text-transparent");
-    }, 2000);
   }
 
   const minimum_date_to_be_shown = 631152000; // This is what PVWS thinks epoch time is for some reason. don't bother showing it as the instrument wasn't running EPICS on 01/01/1990
@@ -71,15 +59,6 @@ export default function Block({
               {showAdvanced && "Readback: "}
               {pv.value} {pv.units != null && pv.units}
             </span>
-            <svg
-              id={pv.human_readable_name + "_CIRCLE"}
-              className="min-w-2 min-h-2 max-w-2 max-h-2 transition-all text-transparent"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <circle cx="12" cy="12" r="12" />
-            </svg>
           </div>
 
           {showAdvanced && (

app/components/CheckToggle.tsx

@@ -1,6 +1,7 @@
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useCallback } from "react";
+import { memo } from "react";
 
-export default function CheckToggle({
+const CheckToggle = memo(function CheckToggle({
   checked,
   setChecked,
   text,
@@ -11,20 +12,24 @@ export default function CheckToggle({
   text: string;
   textColour?: string;
 }) {
+  const callback = useCallback(() => {
+    setChecked(!checked);
+  }, [checked, setChecked]);
+
   return (
     <div className="pt-4">
       <label className="inline-flex items-center cursor-pointer">
         <input
           type="checkbox"
           checked={checked}
-          onChange={() => {
-            setChecked(!checked);
-          }}
+          onChange={callback}
           className="sr-only peer"
         />
         <div className="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
         <span className={"ms-3 text-sm font-medium " + textColour}>{text}</span>
       </label>
     </div>
   );
-}
+});
+
+export default CheckToggle;

app/components/Group.tsx

@@ -2,8 +2,9 @@ import Block from "./Block";
 import { checkIfAllBlocksInGroupAreHidden } from "./GroupUtils";
 
 import { tBlockMapping } from "@/app/types";
+import { memo } from "react";
 
-export default function Group({
+const Group = memo(function Group({
   group,
   blocks,
   instName,
@@ -51,4 +52,6 @@ export default function Group({
       </table>
     </div>
   );
-}
+});
+
+export default Group;

app/components/Instrument.ts

@@ -161,6 +161,14 @@ export class Instrument {
     );
   }
 
+  clone(): Instrument {
+    let cloned = new Instrument(this.prefix);
+    cloned.groups = structuredClone(this.groups);
+    cloned.runInfoPVs = structuredClone(this.runInfoPVs);
+    cloned.dashboard = structuredClone(this.dashboard);
+    return cloned;
+  }
+
   getAllBlockPVs(): Array<string> {
     const blocksPerGroup = Array.from(this.groups.values());
     return Array.from(blocksPerGroup)

app/components/InstrumentData.tsx

@@ -1,5 +1,5 @@
 "use client";
-import {useEffect, useRef, useState} from "react";
+import { RefObject, useEffect, useRef, useState } from "react";
 import { IfcPVWSMessage, IfcPVWSRequest, PVWSRequestType } from "@/app/types";
 import {
   findPVInGroups,
@@ -46,7 +46,7 @@ export function InstrumentData({ instrumentName }: { instrumentName: string }) {
     }
   }, [instName]);
 
-  let messageQueue = useRef([]);
+  let messageQueue: RefObject<Array<MessageEvent>> = useRef([]);
 
   const {
     sendJsonMessage,
@@ -67,6 +67,7 @@ export function InstrumentData({ instrumentName }: { instrumentName: string }) {
         const prefix = getPrefix(instListFromBytes(updatedPVbytes), instName);
         const instrument = new Instrument(prefix);
         setCurrentInstrument(instrument);
+        messageQueue.current = [];
 
         // subscribe to dashboard and run info PVs
         sendJsonMessage({
@@ -78,29 +79,29 @@ export function InstrumentData({ instrumentName }: { instrumentName: string }) {
         return;
       }
 
-      if (!currentInstrument) {
-        return;
-      }
-
       if (
+        currentInstrument &&
         updatedPVName == `${currentInstrument.prefix}${CONFIG_DETAILS}` &&
         updatedPVbytes != null
       ) {
         // config change, reset instrument groups
-        if (updatedPVbytes == lastUpdate) {
+        if (updatedPVbytes == lastUpdate || !currentInstrument) {
           // config hasnt actually changed so do nothing
           return;
         }
-        setLastUpdate(updatedPVbytes);
-        currentInstrument.groups = getGroupsWithBlocksFromConfigOutput(
-          currentInstrument.prefix,
+        let newInstrument = currentInstrument.clone();
+        newInstrument.groups = getGroupsWithBlocksFromConfigOutput(
+          newInstrument.prefix,
           JSON.parse(dehex_and_decompress(atob(updatedPVbytes))),
         );
 
         sendJsonMessage({
           type: PVWSRequestType.subscribe,
-          pvs: currentInstrument.getAllBlockPVs(),
+          pvs: newInstrument.getAllBlockPVs(),
         });
+
+        setLastUpdate(updatedPVbytes);
+        setCurrentInstrument(newInstrument);
       } else {
         messageQueue.current.push(m);
       }
@@ -118,9 +119,17 @@ export function InstrumentData({ instrumentName }: { instrumentName: string }) {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      console.log("Process " + messageQueue.current.length + " queued messages");
+      if (currentInstrument == null) {
+        return;
+      }
+      console.log(
+        "Process " + messageQueue.current.length + " queued messages",
+      );
+
+      let newInstrument = currentInstrument.clone();
+
       while (true) {
-        const m = messageQueue.current.pop();
+        const m = messageQueue.current.shift();
         if (m === undefined) {
           break;
         }
@@ -130,15 +139,18 @@ export function InstrumentData({ instrumentName }: { instrumentName: string }) {
         const pvVal = getPvValue(updatedPV);
 
         if (pvVal == undefined) {
-          console.debug(`initial/blank message from ${updatedPVName}`);
-          return;
+          console.debug(
+            `initial/blank message from ${updatedPVName}: ${m.data}`,
+          );
+          continue;
         }
 
         // Check if this is a dashboard, run info, or block PV update.
         const pv =
-          currentInstrument.dashboard.get(updatedPVName) ||
-          currentInstrument.runInfoPVs.get(updatedPVName) ||
-          findPVInGroups(currentInstrument.groups, updatedPVName);
+          newInstrument.dashboard.get(updatedPVName) ||
+          newInstrument.runInfoPVs.get(updatedPVName) ||
+          findPVInGroups(newInstrument.groups, updatedPVName);
+
         if (pv) {
           storePrecision(updatedPV, pv);
           pv.value = toPrecision(pv, pvVal);
@@ -150,21 +162,21 @@ export function InstrumentData({ instrumentName }: { instrumentName: string }) {
           // its object such as its run control status or SP:RBV
           if (updatedPVName.endsWith(RC_INRANGE)) {
             const underlyingBlock = findPVInGroups(
-              currentInstrument.groups,
+              newInstrument.groups,
               updatedPVName.replace(RC_INRANGE, ""),
             );
             if (underlyingBlock)
               underlyingBlock.runcontrol_inrange = yesToBoolean(pvVal);
           } else if (updatedPVName.endsWith(RC_ENABLE)) {
             const underlyingBlock = findPVInGroups(
-              currentInstrument.groups,
+              newInstrument.groups,
               updatedPVName.replace(RC_ENABLE, ""),
             );
             if (underlyingBlock)
               underlyingBlock.runcontrol_enabled = yesToBoolean(pvVal);
           } else if (updatedPVName.endsWith(SP_RBV)) {
             const underlyingBlock = findPVInGroups(
-              currentInstrument.groups,
+              newInstrument.groups,
               updatedPVName.replace(SP_RBV, ""),
             );
             if (underlyingBlock)
@@ -176,7 +188,8 @@ export function InstrumentData({ instrumentName }: { instrumentName: string }) {
           }
         }
       }
-    }, 5000);
+      setCurrentInstrument(newInstrument);
+    }, 1000);
     return () => clearInterval(interval);
   }, [currentInstrument]);
 

app/components/TopBar.tsx

@@ -6,6 +6,7 @@ import {
 
 import { tBlockMapping } from "@/app/types";
 import { DASHBOARD } from "@/app/components/Instrument";
+import { memo } from "react";
 
 export const runStateStr = "Run state";
 export const configName = "Config name";
@@ -18,7 +19,7 @@ export function getRunstate(prefix: string, runInfoPVs: tBlockMapping): string {
   return UNREACHABLE;
 }
 
-export default function TopBar({
+const TopBar = memo(function TopBar({
   dashboard,
   instName,
   runInfoPVs,
@@ -151,4 +152,6 @@ export default function TopBar({
       </div>
     </div>
   );
-}
+});
+
+export default TopBar;

next.config.ts

@@ -6,6 +6,15 @@ const nextConfig: NextConfig = {
   images: {
     unoptimized: true,
   },
+  // compress: false,
+  // webpack(webpackConfig) {
+  //   return {
+  //     ...webpackConfig,
+  //     optimization: {
+  //       minimize: false,
+  //     },
+  //   };
+  // },
 };
 
 module.exports = nextConfig;