fix memory leak by putting setInterval() in a useeffect

app/commonVars.ts

@@ -0,0 +1,10 @@
+import { IfcPVWSRequest, PVWSRequestType } from "@/app/types";
+
+export const instListPV = "CS:INSTLIST";
+export const socketURL =
+  process.env.NEXT_PUBLIC_WS_URL || "ws://localhost:8080/pvws/pv";
+
+export const instListSubscription: IfcPVWSRequest = {
+  type: PVWSRequestType.subscribe,
+  pvs: [instListPV],
+};

app/components/InstrumentPage.test.ts

@@ -1,4 +1,9 @@
-import { ConfigOutput, IfcBlock, IfcPVWSRequest } from "@/app/types";
+import {
+  ConfigOutput,
+  IfcBlock,
+  IfcPVWSRequest,
+  PVWSRequestType,
+} from "@/app/types";
 import {
   getGroupsWithBlocksFromConfigOutput,
   RC_ENABLE,
@@ -14,7 +19,7 @@ test("subscribeToBlockPVs subscribes to all run control PVs", () => {
   subscribeToBlockPVs(mockSendJsonMessage, aBlock);
   expect(mockSendJsonMessage.mock.calls.length).toBe(1);
   const expectedCall: IfcPVWSRequest = {
-    type: "subscribe",
+    type: PVWSRequestType.subscribe,
     pvs: [aBlock, aBlock + RC_ENABLE, aBlock + RC_INRANGE, aBlock + SP_RBV],
   };
   expect(JSON.stringify(mockSendJsonMessage.mock.calls[0][0])).toBe(

app/components/InstrumentPage.tsx

@@ -3,23 +3,28 @@ import React, { useEffect, useState } from "react";
 import TopBar from "./TopBar";
 import Groups from "./Groups";
 import useWebSocket from "react-use-websocket";
-import { dehex_and_decompress } from "./dehex_and_decompress";
+import {
+  dehex_and_decompress,
+  instListFromBytes,
+} from "./dehex_and_decompress";
 import { findPVInDashboard, Instrument } from "./Instrument";
 import { useSearchParams } from "next/navigation";
 import {
   ConfigOutput,
   ConfigOutputBlock,
   IfcBlock,
   IfcGroup,
-  IfcPV,
   IfcPVWSMessage,
   IfcPVWSRequest,
+  instList,
+  PVWSRequestType,
 } from "@/app/types";
 import {
-  findPVByAddress,
   ExponentialOnThresholdFormat,
+  findPVByAddress,
 } from "@/app/components/PVutils";
 import CheckToggle from "@/app/components/CheckToggle";
+import { instListPV, instListSubscription, socketURL } from "@/app/commonVars";
 
 let lastUpdate: string = "";
 
@@ -46,7 +51,7 @@ export function subscribeToBlockPVs(
    * Subscribes to a block and its associated run control PVs
    */
   sendJsonMessage({
-    type: "subscribe",
+    type: PVWSRequestType.subscribe,
     pvs: [
       block_address,
       block_address + RC_ENABLE,
@@ -101,15 +106,12 @@ export function toPrecision(
 
 function InstrumentData({ instrumentName }: { instrumentName: string }) {
   const [showHiddenBlocks, setShowHiddenBlocks] = useState(false);
-  const [showSetpoints, setShowSetpoints] = useState(false);
-  const [showTimestamps, setShowTimestamps] = useState(false);
   const CONFIG_DETAILS = "CS:BLOCKSERVER:GET_CURR_CONFIG_DETAILS";
-  const [instlist, setInstlist] = useState<Array<any> | null>(null);
+  const [instlist, setInstlist] = useState<instList | null>(null);
   const [currentInstrument, setCurrentInstrument] = useState<Instrument | null>(
     null,
   );
-  const socketURL =
-    process.env.NEXT_PUBLIC_WS_URL || "ws://localhost:8080/pvws/pv";
+
   const instName = instrumentName;
 
   useEffect(() => {
@@ -130,10 +132,7 @@ function InstrumentData({ instrumentName }: { instrumentName: string }) {
 
   useEffect(() => {
     // This is an initial useEffect to subscribe to lots of PVs including the instlist.
-    sendJsonMessage({
-      type: "subscribe",
-      pvs: ["CS:INSTLIST"],
-    });
+    sendJsonMessage(instListSubscription);
 
     if (instName == "" || instName == null || instlist == null) {
       return;
@@ -142,8 +141,8 @@ function InstrumentData({ instrumentName }: { instrumentName: string }) {
     let prefix = "";
 
     for (const item of instlist) {
-      if (item["name"] == instName.toUpperCase()) {
-        prefix = item["pvPrefix"];
+      if (item.name == instName.toUpperCase()) {
+        prefix = item.pvPrefix;
       }
     }
     if (!prefix) {
@@ -156,15 +155,18 @@ function InstrumentData({ instrumentName }: { instrumentName: string }) {
       setCurrentInstrument(instrument);
 
       sendJsonMessage({
-        type: "subscribe",
+        type: PVWSRequestType.subscribe,
         pvs: [`${prefix}${CONFIG_DETAILS}`],
       });
 
       // subscribe to dashboard and run info PVs
       for (const pv of instrument.runInfoPVs.concat(
         instrument.dashboard.flat(3),
       )) {
-        sendJsonMessage({ type: "subscribe", pvs: [pv.pvaddress] });
+        sendJsonMessage({
+          type: PVWSRequestType.subscribe,
+          pvs: [pv.pvaddress],
+        });
       }
     }
   }, [instlist, instName, sendJsonMessage, currentInstrument]);
@@ -178,11 +180,8 @@ function InstrumentData({ instrumentName }: { instrumentName: string }) {
     const updatedPVName: string = updatedPV.pv;
     const updatedPVbytes: string | null | undefined = updatedPV.b64byt;
 
-    if (updatedPVName == "CS:INSTLIST" && updatedPVbytes != null) {
-      const dehexedInstList = dehex_and_decompress(atob(updatedPVbytes));
-      if (dehexedInstList != null && typeof dehexedInstList == "string") {
-        setInstlist(JSON.parse(dehexedInstList));
-      }
+    if (updatedPVName == instListPV && updatedPVbytes != null) {
+      setInstlist(instListFromBytes(updatedPVbytes));
     }
 
     if (!currentInstrument) {
@@ -200,9 +199,6 @@ function InstrumentData({ instrumentName }: { instrumentName: string }) {
       }
       lastUpdate = updatedPVbytes;
       const res = dehex_and_decompress(atob(updatedPVbytes));
-      if (res == null || typeof res != "string") {
-        return;
-      }
       currentInstrument.groups = getGroupsWithBlocksFromConfigOutput(
         JSON.parse(res),
         sendJsonMessage,