From 8138f32243704af17b115be8cb0d208dfd39c6a5 Mon Sep 17 00:00:00 2001
From: Jack Harper <jack.harper@stfc.ac.uk>
Date: Tue, 12 Nov 2024 11:26:47 +0000
Subject: [PATCH] remove runcontrol table header and make blockname/value
 bigger, make 4 cols the default on large screen, remove whitespace at top of
 page by getting rid of instName(duplicated) and moving config name under
 runstate

---
 app/components/Block.tsx                      | 49 +++++++++++-------
 app/components/Group.tsx                      |  4 +-
 app/components/Groups.tsx                     |  2 +-
 app/components/InstrumentPage.tsx             |  2 +-
 app/components/TopBar.test.ts                 |  2 +-
 app/components/TopBar.tsx                     | 35 ++++++-------
 .../__snapshots__/Block.test.tsx.snap         | 50 +++++++++++--------
 .../__snapshots__/TopBar.test.ts.snap         | 42 ++++++----------
 8 files changed, 96 insertions(+), 90 deletions(-)

diff --git a/app/components/Block.tsx b/app/components/Block.tsx
index dc9ad0d..8df995d 100644
--- a/app/components/Block.tsx
+++ b/app/components/Block.tsx
@@ -37,6 +37,7 @@ export default function Block({
     }, 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
   return (
     <tr
       key={pv.human_readable_name}
@@ -45,7 +46,7 @@ export default function Block({
         setShowAdvanced(!showAdvanced);
       }}
     >
-      <td className="py-1 px-2 w-1/3">
+      <td className="py-1 px-2 w-1/3 flex-row">
         <a
           className="underline"
           href={
@@ -60,17 +61,29 @@ export default function Block({
         </a>
       </td>
 
-      <td className="py-1 px-2 w-1/3">
-        <span id={pv.human_readable_name + "_VALUE"}>
-          {showAdvanced && "Readback: "}
-          {pv.value} {pv.units != null && pv.units}
+      <td className="py-1 px-2 w-7/12">
+        <span id={pv.human_readable_name + "_VALUE_ROW"}>
+          <div className="flex justify-between">
+            <span id={pv.human_readable_name + "_VALUE"}>
+              {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>
           {pv.severity != "NONE" ? (
             <a
               href="https://github.com/ISISComputingGroup/ibex_user_manual/wiki/Blocks#alarms"
               className="text-red-600"
             >
-              <br />
-              {pv.severity}
+              Alarm: {pv.severity}
             </a>
           ) : null}
           {showAdvanced && (
@@ -82,8 +95,10 @@ export default function Block({
                   <hr />
                 </span>
               ) : null}
-              {pv.updateSeconds != null ? (
+              {pv.updateSeconds != null &&
+              pv.updateSeconds > minimum_date_to_be_shown ? (
                 <span id={pv.human_readable_name + "_TIMESTAMP"}>
+                  {/*Multiply by 1000 here as Date() expects milliseconds*/}
                   {`Last update: ${new Date(pv.updateSeconds * 1000).toLocaleString()}`}
                 </span>
               ) : null}
@@ -92,19 +107,17 @@ export default function Block({
         </span>
       </td>
       <td className="py-1 px-2  flex justify-between items-center">
-        <span id={pv.human_readable_name + "_VALUE_RC"}>
+        <span
+          id={pv.human_readable_name + "_VALUE_RC"}
+          title={"Run control in-range?"}
+        >
           {pv.runcontrol_enabled && (pv.runcontrol_inrange ? "✅" : "❌")}
         </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"
+
+        <span
+          className={"cursor-pointer font-bold"}
+          title={"Show/Hide advanced statuses"}
         >
-          <circle cx="12" cy="12" r="12" />
-        </svg>
-        <span className={"cursor-pointer font-bold"}>
           {showAdvanced ? "-" : "+"}
         </span>
       </td>
diff --git a/app/components/Group.tsx b/app/components/Group.tsx
index 7928d2a..d9837a6 100644
--- a/app/components/Group.tsx
+++ b/app/components/Group.tsx
@@ -31,8 +31,8 @@ export default function Group({
         <thead className="sticky">
           <tr className="bg-blue-gray-100 text-gray-100 border-b-2 border-b-gray-400">
             <th className="py-2 px-2 text-left w-1/3">Block</th>
-            <th className="py-2 px-2 text-left w-1/3">Value</th>
-            <th className="py-2 px-2 text-left w-1/3">In-Range</th>
+            <th className="py-2 px-2 text-left w-7/12">Value</th>
+            <th className="py-2 px-2 text-left"></th>
           </tr>
         </thead>
         <tbody className="text-gray-200 sticky">
diff --git a/app/components/Groups.tsx b/app/components/Groups.tsx
index b9c74a1..389dc22 100644
--- a/app/components/Groups.tsx
+++ b/app/components/Groups.tsx
@@ -17,7 +17,7 @@ export default function Groups({
   }
 
   return (
-    <div className="rounded-xl grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3  gap-4 mt-2">
+    <div className="rounded-xl grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mt-2">
       {groupsMap.map((group) => {
         return (
           <Group
diff --git a/app/components/InstrumentPage.tsx b/app/components/InstrumentPage.tsx
index 7e989ab..c5c67dd 100644
--- a/app/components/InstrumentPage.tsx
+++ b/app/components/InstrumentPage.tsx
@@ -264,7 +264,7 @@ function InstrumentData({ instrumentName }: { instrumentName: string }) {
     return <h1>Loading...</h1>;
   }
   return (
-    <div className="p-2 md:p-8 w-full mx-auto">
+    <div className="p-2 w-full mx-auto">
       <TopBar
         dashboard={currentInstrument.dashboard}
         instName={instName}
diff --git a/app/components/TopBar.test.ts b/app/components/TopBar.test.ts
index 2a8fad0..962be43 100644
--- a/app/components/TopBar.test.ts
+++ b/app/components/TopBar.test.ts
@@ -47,7 +47,7 @@ it("draws instName expectedly", () => {
       runInfoPVs: instrument.runInfoPVs,
     }),
   );
-  expect(container.querySelector("#instNameSpan")!.innerHTML).toBe(
+  expect(container.querySelector("#instNameLabel")!.innerHTML).toContain(
     instName.toUpperCase(),
   );
 });
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 458b051..1e87c20 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -42,22 +42,6 @@ export default function TopBar({
       id="top_bar"
       className="w-full bg-white  shadow-lg text-black rounded-xl text-md"
     >
-      <div className="text-left mb-4 p-4">
-        <h1 className="text-black text-2xl">
-          Instrument:{" "}
-          <span id={"instNameSpan"} className="font-semibold">
-            {instName.toUpperCase()}
-          </span>
-        </h1>
-        <h1 className="text-black text-lg">
-          Config:{" "}
-          <span id={"configNameSpan"} className="font-semibold">
-            {findPVByHumanReadableName(runInfoPVs, configName)
-              ? findPVByHumanReadableName(runInfoPVs, configName)!.value
-              : "UNKNOWN"}
-          </span>
-        </h1>
-      </div>
       <div
         id="instNameDiv"
         className="w-full flex justify-center items-center flex-col"
@@ -69,11 +53,21 @@ export default function TopBar({
            ${getForegroundColour(getRunstate(runInfoPVs))}
           
           `}
+          id={"instNameLabel"}
         >
           {instName.toUpperCase()} is{" "}
           <span id={"runStateSpan"}>{getRunstate(runInfoPVs)}</span>
         </h2>
-        <div className="bg-gray-50 border-2 border-gray-800 m-4 p-4 shadow-md flex flex-col">
+        <h3 className="text-black text-wrap max-w-full break-all">
+          Config:{" "}
+          <span id={"configNameSpan"} className="font-semibold">
+            {findPVByHumanReadableName(runInfoPVs, configName)
+              ? findPVByHumanReadableName(runInfoPVs, configName)!.value
+              : "UNKNOWN"}
+          </span>
+        </h3>
+
+        <div className="bg-gray-50 border-2 border-gray-800 shadow-md flex flex-col">
           <table
             id={"dashboardTable"}
             className="text-sm w-full table-fixed flex divide-x divide-gray-200 "
@@ -98,11 +92,14 @@ export default function TopBar({
           </table>
         </div>
 
-        <label id={"runInfoLabel"}>
+        <label
+          id={"runInfoLabel"}
+          className="pt-2 max-w-full break-all text-wrap"
+        >
           <input className="peer/showLabel absolute scale-0" type="checkbox" />
           <span className="block max-h-14 overflow-hidden rounded-lg bg-gray-50 hover:bg-gray-800 hover:text-white px-4 py-0 mb-2  shadow-lg transition-all duration-300 peer-checked/showLabel:max-h-fit cursor-pointer">
             <h3 className="flex h-14 cursor-pointer items-center font-bold ">
-              Click to show/hide all run information
+              Show/hide all run information
             </h3>
             {runInfoPVs.map((runInfoPV) => (
               <p className="mb-2" key={runInfoPV.human_readable_name}>
diff --git a/app/components/__snapshots__/Block.test.tsx.snap b/app/components/__snapshots__/Block.test.tsx.snap
index 2731fa3..7d70fa6 100644
--- a/app/components/__snapshots__/Block.test.tsx.snap
+++ b/app/components/__snapshots__/Block.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renders topbar unchanged 1`] = `
     class="border-b border-blue-gray-200 transition duration-100 hover:bg-gray-100 hover:text-black"
   >
     <td
-      class="py-1 px-2 w-1/3"
+      class="py-1 px-2 w-1/3 flex-row"
     >
       <a
         class="underline"
@@ -15,19 +15,40 @@ exports[`renders topbar unchanged 1`] = `
       />
     </td>
     <td
-      class="py-1 px-2 w-1/3"
+      class="py-1 px-2 w-7/12"
     >
       <span
-        id="undefined_VALUE"
+        id="undefined_VALUE_ROW"
       >
-        123
-         
-        mm
+        <div
+          class="flex justify-between"
+        >
+          <span
+            id="undefined_VALUE"
+          >
+            123
+             
+            mm
+          </span>
+          <svg
+            class="min-w-2 min-h-2 max-w-2 max-h-2 transition-all text-transparent"
+            fill="currentColor"
+            id="undefined_CIRCLE"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              cx="12"
+              cy="12"
+              r="12"
+            />
+          </svg>
+        </div>
         <a
           class="text-red-600"
           href="https://github.com/ISISComputingGroup/ibex_user_manual/wiki/Blocks#alarms"
         >
-          <br />
+          Alarm: 
         </a>
       </span>
     </td>
@@ -36,22 +57,11 @@ exports[`renders topbar unchanged 1`] = `
     >
       <span
         id="undefined_VALUE_RC"
+        title="Run control in-range?"
       />
-      <svg
-        class="min-w-2 min-h-2 max-w-2 max-h-2 transition-all text-transparent"
-        fill="currentColor"
-        id="undefined_CIRCLE"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="12"
-          cy="12"
-          r="12"
-        />
-      </svg>
       <span
         class="cursor-pointer font-bold"
+        title="Show/Hide advanced statuses"
       >
         +
       </span>
diff --git a/app/components/__snapshots__/TopBar.test.ts.snap b/app/components/__snapshots__/TopBar.test.ts.snap
index b8dcccd..d80096e 100644
--- a/app/components/__snapshots__/TopBar.test.ts.snap
+++ b/app/components/__snapshots__/TopBar.test.ts.snap
@@ -6,32 +6,6 @@ exports[`renders topbar unchanged 1`] = `
     class="w-full bg-white  shadow-lg text-black rounded-xl text-md"
     id="top_bar"
   >
-    <div
-      class="text-left mb-4 p-4"
-    >
-      <h1
-        class="text-black text-2xl"
-      >
-        Instrument:
-         
-        <span
-          class="font-semibold"
-          id="instNameSpan"
-        >
-          INSTRUMENT
-        </span>
-      </h1>
-      <h1
-        class="text-black text-lg"
-      >
-        Config:
-         
-        <span
-          class="font-semibold"
-          id="configNameSpan"
-        />
-      </h1>
-    </div>
     <div
       class="w-full flex justify-center items-center flex-col"
       id="instNameDiv"
@@ -43,6 +17,7 @@ exports[`renders topbar unchanged 1`] = `
            text-black
           
           "
+        id="instNameLabel"
       >
         INSTRUMENT
          is
@@ -53,8 +28,18 @@ exports[`renders topbar unchanged 1`] = `
           UNKNOWN
         </span>
       </h2>
+      <h3
+        class="text-black text-wrap max-w-full break-all"
+      >
+        Config:
+         
+        <span
+          class="font-semibold"
+          id="configNameSpan"
+        />
+      </h3>
       <div
-        class="bg-gray-50 border-2 border-gray-800 m-4 p-4 shadow-md flex flex-col"
+        class="bg-gray-50 border-2 border-gray-800 shadow-md flex flex-col"
       >
         <table
           class="text-sm w-full table-fixed flex divide-x divide-gray-200 "
@@ -207,6 +192,7 @@ exports[`renders topbar unchanged 1`] = `
         </table>
       </div>
       <label
+        class="pt-2 max-w-full break-all text-wrap"
         id="runInfoLabel"
       >
         <input
@@ -219,7 +205,7 @@ exports[`renders topbar unchanged 1`] = `
           <h3
             class="flex h-14 cursor-pointer items-center font-bold "
           >
-            Click to show/hide all run information
+            Show/hide all run information
           </h3>
           <p
             class="mb-2"