formatting

app/NavBar.tsx

@@ -2,8 +2,6 @@ import Link from "next/link";
 import Image from "next/image";
 
 export default function NavBar() {
-
-
   return (
     <header className="items-center bg-white dark:bg-zinc-900 py-4 px-8 shadow-xl justify-between sm:flex hidden">
       <Link
@@ -62,7 +60,6 @@ export default function NavBar() {
             <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
           </svg>
         </Link>
-
       </div>
     </header>
   );

app/_app.tsx

@@ -2,6 +2,6 @@
 import "./globals.css";
 import { AppProps } from "next/app";
 
-export default function App({ Component, pageProps } :AppProps) {
+export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;
 }

app/components/Group.tsx

@@ -23,7 +23,9 @@ export default function Group({
 
   return (
     <div className="w-full bg-gray-700 shadow-md rounded-xl flex flex-col overflow-x-auto">
-      <h1 className="p-4 bg-gray-600 rounded-t-lg min-w-full text-white">{group.name}</h1>
+      <h1 className="p-4 bg-gray-600 rounded-t-lg min-w-full text-white">
+        {group.name}
+      </h1>
       <table className="text-sm table-fixed">
         <thead>
           <tr className="bg-blue-gray-100 text-gray-100">

app/components/GroupUtils.test.ts

@@ -3,7 +3,7 @@ import { IfcGroup } from "./IfcGroup";
 
 class MockGroup implements IfcGroup {
   blocks: MockBlock[];
-  name:string;
+  name: string;
   constructor(blocks: Array<MockBlock>) {
     this.blocks = blocks;
     this.name = "test";

app/components/IfcGroup.ts

@@ -1,4 +1,4 @@
 export interface IfcGroup {
-    name:string;
-    blocks:Array<any>
-}
+  name: string;
+  blocks: Array<any>;
+}

app/components/InstList.ts

@@ -1,4 +1,3 @@
-
 import useWebSocket from "react-use-websocket";
 import { dehex_and_decompress } from "./dehex_and_decompress";
 
@@ -15,14 +14,14 @@ export default function InstList() {
 
   let instList = null;
 
-    if (lastJsonMessage) {
-      if (lastJsonMessage.b64byt && typeof lastJsonMessage.b64byt == "string") {
-        const response: any = dehex_and_decompress(atob(lastJsonMessage.b64byt));
-        if (typeof response == "string") {
-          instList = JSON.parse(response);
-        }
+  if (lastJsonMessage) {
+    if (lastJsonMessage.b64byt && typeof lastJsonMessage.b64byt == "string") {
+      const response: any = dehex_and_decompress(atob(lastJsonMessage.b64byt));
+      if (typeof response == "string") {
+        instList = JSON.parse(response);
       }
     }
+  }
 
   if (!instList) {
     return;

app/components/Instrument.ts

@@ -12,15 +12,15 @@ export class Instrument {
   runInfoPVs: Map<any, any>;
   configname: string;
   groups: Array<IfcGroup>;
-  constructor(prefix:string) {
+  constructor(prefix: string) {
     this.prefix = prefix;
     this.dashboard_prefix = `${this.prefix}${DASHBOARD}`;
 
     this.columnZeroPVs = new Map(
       Object.entries({
         [`${this.prefix}DAE:TITLE`]: "Title:",
         [`${this.prefix}DAE:_USERNAME`]: "Users:",
-      })
+      }),
     );
 
     this.dictLongerInstPVs = new Map(
@@ -31,7 +31,7 @@ export class Instrument {
         [`${this.dashboard_prefix}1:2:LABEL`]: `${this.dashboard_prefix}1:2:VALUE`,
         [`${this.dashboard_prefix}2:2:LABEL`]: `${this.dashboard_prefix}2:2:VALUE`,
         [`${this.dashboard_prefix}3:2:LABEL`]: `${this.dashboard_prefix}3:2:VALUE`,
-      })
+      }),
     );
 
     // PV name: [human readable name, column in top bar(null is monitor but don't show)]
@@ -67,7 +67,7 @@ export class Instrument {
         [`${this.prefix}DAE:RUNDURATION_PD`]: "Period Run Time",
         [`${this.prefix}DAE:PERIODSEQ`]: "Period Sequence",
         [`${this.prefix}DAE:DAEMEMORYUSED`]: "DAE Memory Used",
-      })
+      }),
     );
 
     // (label) PV address  : [row, col, label, value]

app/components/InstrumentData.tsx

@@ -1,39 +1,51 @@
-"use client"
+"use client";
 import React from "react";
 import TopBar from "./TopBar";
 import Groups from "./Groups";
 import { useEffect, useState } from "react";
 import useWebSocket from "react-use-websocket";
 import { dehex_and_decompress } from "./dehex_and_decompress";
 import { Instrument } from "./Instrument";
-import {PV} from "./PV";
+import { PV } from "./PV";
 import { PVWSMessage } from "./IfcPVWSMessage";
 
 let lastUpdate: string = "";
 
-export default function InstrumentData({instrumentName}: {instrumentName:string} ) {
+export default function InstrumentData({
+  instrumentName,
+}: {
+  instrumentName: string;
+}) {
   // set up the different states for the instrument data
 
-  const socketURL = process.env.NEXT_PUBLIC_WS_URL || "ws://localhost:8080/pvws/pv";
+  const socketURL =
+    process.env.NEXT_PUBLIC_WS_URL || "ws://localhost:8080/pvws/pv";
 
-  const instName = instrumentName ;
+  const instName = instrumentName;
 
-  const { sendJsonMessage, lastJsonMessage }: {sendJsonMessage:any,lastJsonMessage:PVWSMessage} = useWebSocket(socketURL, {
-    shouldReconnect: (closeEvent) => true,
-  });
+  const {
+    sendJsonMessage,
+    lastJsonMessage,
+  }: { sendJsonMessage: any; lastJsonMessage: PVWSMessage } = useWebSocket(
+    socketURL,
+    {
+      shouldReconnect: (closeEvent) => true,
+    },
+  );
 
   const CONFIG_DETAILS = "CS:BLOCKSERVER:GET_CURR_CONFIG_DETAILS";
-  const [instlist, setInstlist] = useState<Array<any>|null>(null);
-  const [currentInstrument, setCurrentInstrument] = useState<Instrument|null>(null);
+  const [instlist, setInstlist] = useState<Array<any> | null>(null);
+  const [currentInstrument, setCurrentInstrument] = useState<Instrument | null>(
+    null,
+  );
 
   useEffect(() => {
     sendJsonMessage({
       type: "subscribe",
       pvs: ["CS:INSTLIST"],
     });
 
-
-    if (instName == "" || instName == null || instlist == null ) {
+    if (instName == "" || instName == null || instlist == null) {
       return;
     }
 
@@ -81,10 +93,10 @@ export default function InstrumentData({instrumentName}: {instrumentName:string}
     }
     const updatedPV: PVWSMessage = lastJsonMessage;
     const updatedPVName: string = updatedPV.pv;
-    const updatedPVbytes: string|null|undefined = updatedPV.b64byt;
+    const updatedPVbytes: string | null | undefined = updatedPV.b64byt;
 
     if (updatedPVName == "CS:INSTLIST" && updatedPVbytes != null) {
-      const dehexedInstList = dehex_and_decompress(atob(updatedPVbytes))
+      const dehexedInstList = dehex_and_decompress(atob(updatedPVbytes));
       if (dehexedInstList != null && typeof dehexedInstList == "string") {
         setInstlist(JSON.parse(dehexedInstList));
       }
@@ -135,7 +147,7 @@ export default function InstrumentData({instrumentName}: {instrumentName:string}
           });
 
           for (const block of groupBlocks) {
-            const newBlock = blocks.find((b:any) => b.name === block);
+            const newBlock = blocks.find((b: any) => b.name === block);
 
             const completePV = new PV(newBlock.pv);
             completePV.human_readable_name = newBlock.name;
@@ -181,7 +193,7 @@ export default function InstrumentData({instrumentName}: {instrumentName:string}
         // This is a top bar label PV
         if (!currentInstrument.topBarPVs.has(updatedPVName) && updatedPV.text) {
           let prefixRemoved = updatedPVName.split(
-            currentInstrument.dashboard_prefix
+            currentInstrument.dashboard_prefix,
           )[1];
           let row = prefixRemoved[0];
           let col = prefixRemoved[2];
@@ -198,11 +210,15 @@ export default function InstrumentData({instrumentName}: {instrumentName:string}
             pvs: [value_pv],
           });
         }
-      } else if (currentInstrument.columnZeroPVs.has(updatedPVName) && updatedPVbytes != null ) {
+      } else if (
+        currentInstrument.columnZeroPVs.has(updatedPVName) &&
+        updatedPVbytes != null
+      ) {
         // this is a top bar column zero value
         const row = updatedPVName.endsWith("TITLE") ? 0 : 1; // if title, column 1
-        // Both of these are base64 encoded. PVWS gives a null byte back if there is no value, so replace with null. 
-        const value = atob(updatedPVbytes) != "\x00" ? atob(updatedPVbytes) : null;
+        // Both of these are base64 encoded. PVWS gives a null byte back if there is no value, so replace with null.
+        const value =
+          atob(updatedPVbytes) != "\x00" ? atob(updatedPVbytes) : null;
         currentInstrument.topBarPVs.set(updatedPVName, [
           row,
           0,
@@ -211,7 +227,7 @@ export default function InstrumentData({instrumentName}: {instrumentName:string}
         ]);
       } else if (
         Array.from(currentInstrument.dictLongerInstPVs.values()).includes(
-          updatedPVName
+          updatedPVName,
         )
       ) {
         // this is a top bar value
@@ -223,7 +239,7 @@ export default function InstrumentData({instrumentName}: {instrumentName:string}
       } else if (currentInstrument.runInfoMap.has(updatedPVName)) {
         currentInstrument.runInfoPVs.set(
           currentInstrument.runInfoMap.get(updatedPVName),
-          pvVal
+          pvVal,
         );
       } else {
         // This is a block - check if in groups
@@ -256,7 +272,7 @@ export default function InstrumentData({instrumentName}: {instrumentName:string}
               }
 
               const pv = document.getElementById(
-                block.human_readable_name + "_CIRCLE"
+                block.human_readable_name + "_CIRCLE",
               );
 
               if (!pv) return;
@@ -287,7 +303,7 @@ export default function InstrumentData({instrumentName}: {instrumentName:string}
     setShowHiddenBlocks(!showHiddenBlocks);
   };
 
-  if (!instName || instName==null|| !currentInstrument) {
+  if (!instName || instName == null || !currentInstrument) {
     return <h1>Loading...</h1>;
   }
   return (

app/components/InstrumentWallCard.tsx

@@ -2,13 +2,13 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 import { getForegroundColor, getStatusColor } from "./getRunstateColours";
 
-export default function WallCard({ instrument }: {instrument:any}) {
+export default function WallCard({ instrument }: { instrument: any }) {
   return (
     <motion.div
       whileHover={{ y: -10 }}
       className={`flex items-center justify-between p-3  rounded-lg shadow-sm border-2 border-gray-700 dark:border-gray-200 hover:shadow-lg hover:border-black dark:hover:border-gray-700 transition-all duration-200
       ${getStatusColor(instrument.status)} ${getForegroundColor(
-        instrument.status
+        instrument.status,
       )}`}
     >
       <Link

app/components/TopBar.tsx

@@ -3,8 +3,22 @@ import { getForegroundColor, getStatusColor } from "./getRunstateColours";
 const runStateStr = "Run state";
 const configName = "Config name";
 
-const TopBar = ({ monitoredPVs, instName, runInfoPVs }: {monitoredPVs: Map<string, any>, instName:string, runInfoPVs:Map<string, any> }) => {
-  if (!monitoredPVs || !monitoredPVs.size || !runInfoPVs || !runInfoPVs.size|| !instName) {
+const TopBar = ({
+  monitoredPVs,
+  instName,
+  runInfoPVs,
+}: {
+  monitoredPVs: Map<string, any>;
+  instName: string;
+  runInfoPVs: Map<string, any>;
+}) => {
+  if (
+    !monitoredPVs ||
+    !monitoredPVs.size ||
+    !runInfoPVs ||
+    !runInfoPVs.size ||
+    !instName
+  ) {
     return (
       <h1 className="text-lg w-full text-white bg-gray-400 border-gray-500 border-2 p-3 font-semibold px-7 animate-pulse">
         Loading...
@@ -56,7 +70,7 @@ const TopBar = ({ monitoredPVs, instName, runInfoPVs }: {monitoredPVs: Map<strin
           <table className="text-sm w-full table-fixed flex">
             <tbody className="text-gray-200 ">
               <tr>
-                {[0, 1, 2].map((index:number) => (
+                {[0, 1, 2].map((index: number) => (
                   <th key={index} id={index.toString()}>
                     {getMonitoredPVs(index, monitoredPVs)}
                   </th>
@@ -90,7 +104,7 @@ const TopBar = ({ monitoredPVs, instName, runInfoPVs }: {monitoredPVs: Map<strin
  * @param {*} monitoredPVs array structure of top bar PVs
  * @returns a dom array which is rendered.
  */
-function getMonitoredPVs(index:number, monitoredPVs:any) {
+function getMonitoredPVs(index: number, monitoredPVs: any) {
   let dom = [];
 
   for (var i = 0; i <= 3; i++) {
@@ -110,7 +124,9 @@ function getMonitoredPVs(index:number, monitoredPVs:any) {
           >
             <td className="py-1 px-4 flex">{label}</td>
             <td className="py-1 px-4 flex justify-between items-center">
-              <span className="font-light">{value!=null?value:"Hidden/unknown"}</span>
+              <span className="font-light">
+                {value != null ? value : "Hidden/unknown"}
+              </span>
               <svg
                 id={label + "_VALUE"}
                 className="min-w-2 min-h-2 max-w-2 max-h-2 transition-all text-transparent text-sm"

app/layout.tsx

@@ -1,26 +1,24 @@
-import "./globals.css"
+import "./globals.css";
 import NavBar from "./NavBar";
 import Footer from "./Footer";
 
 export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
-}
+  title: "Next.js",
+  description: "Generated by Next.js",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
-
       <body className="dark">
         <NavBar />
         {children}
         <Footer />
       </body>
-
     </html>
-  )
+  );
 }

app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { Inter } from "next/font/google";
 import Link from "next/link";
 import { motion } from "framer-motion";

app/wall/IfcInstrumentStatus.ts

@@ -1,5 +1,5 @@
 export interface IfcInstrumentStatus {
-  name: string,
-  status: string,
-  pv: string
+  name: string;
+  status: string;
+  pv: string;
 }