Merge pull request #156 from ISISComputingGroup/batched

Batched

Author: ISISBuilder

app/components/Block.tsx

@@ -24,23 +24,16 @@ export default function Block({
     string | number | undefined
   >();
   const [showAdvanced, setShowAdvanced] = useState(false);
+  const [justChanged, setJustChanged] = useState(false);
   if (!pv.visible && !showHiddenBlocks) {
     return null;
   }
   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");
+    setJustChanged(true);
     setTimeout(() => {
-      pvChangedIndicator.classList.remove("text-green-500");
-      pvChangedIndicator.classList.add("text-transparent");
-    }, 2000);
+      setJustChanged(false);
+    }, 1000);
   }
 
   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
@@ -79,7 +72,10 @@ export default function Block({
             </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"
+              className={
+                "min-w-2 min-h-2 max-w-2 max-h-2 transition-opacity text-green-500 " +
+                (justChanged ? "opacity-100" : "opacity-0")
+              }
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
               viewBox="0 0 24 24"

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

@@ -1,14 +1,17 @@
 import Block from "./Block";
 import { checkIfAllBlocksInGroupAreHidden } from "./GroupUtils";
 
-import { IfcGroup } from "@/app/types";
+import { tBlockMapping } from "@/app/types";
+import { memo } from "react";
 
-export default function Group({
+const Group = memo(function Group({
   group,
+  blocks,
   instName,
   showHiddenBlocks,
 }: {
-  group: IfcGroup;
+  group: string;
+  blocks: tBlockMapping;
   instName: string;
   showHiddenBlocks: boolean;
 }) {
@@ -17,14 +20,14 @@ export default function Group({
   }
 
   // Check if all the blocks in this group are hidden. If so, hide the group.
-  if (checkIfAllBlocksInGroupAreHidden(group) && !showHiddenBlocks) {
+  if (checkIfAllBlocksInGroupAreHidden(blocks) && !showHiddenBlocks) {
     return null;
   }
 
   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}
+        {group}
       </h1>
       <table className="text-sm table-fixed">
         <thead className="sticky">
@@ -35,7 +38,7 @@ export default function Group({
           </tr>
         </thead>
         <tbody className="text-gray-200 sticky">
-          {group.blocks.map((pv) => {
+          {Array.from(blocks.values()).map((pv) => {
             return (
               <Block
                 key={pv.human_readable_name}
@@ -49,4 +52,6 @@ export default function Group({
       </table>
     </div>
   );
-}
+});
+
+export default Group;

app/components/GroupUtils.test.ts

@@ -1,31 +1,25 @@
 import { checkIfAllBlocksInGroupAreHidden } from "./GroupUtils";
 
-import { IfcBlock, IfcGroup } from "@/app/types";
+import { tBlockMapping } from "@/app/types";
 
 test("group with all hidden blocks returns true", () => {
-  const aHiddenBlock: IfcBlock = { pvaddress: "", visible: false };
-  let group: IfcGroup = { name: "testing", blocks: [aHiddenBlock] };
-  const result = checkIfAllBlocksInGroupAreHidden(group);
+  let blocks: tBlockMapping = new Map();
+  blocks.set("testing", { pvaddress: "", visible: false });
+  const result = checkIfAllBlocksInGroupAreHidden(blocks);
   expect(result).toBe(true);
 });
 
-test("group with all visible blocks returns true", () => {
-  let group: IfcGroup = {
-    name: "testing",
-    blocks: [{ pvaddress: "", visible: true }],
-  };
-  const result = checkIfAllBlocksInGroupAreHidden(group);
+test("group with all visible blocks returns false", () => {
+  let blocks: tBlockMapping = new Map();
+  blocks.set("testing", { pvaddress: "testing", visible: true });
+  const result = checkIfAllBlocksInGroupAreHidden(blocks);
   expect(result).toBe(false);
 });
 
-test("group with mixed visible blocks returns true", () => {
-  let group: IfcGroup = {
-    name: "testing",
-    blocks: [
-      { pvaddress: "", visible: false },
-      { pvaddress: "", visible: true },
-    ],
-  };
-  const result = checkIfAllBlocksInGroupAreHidden(group);
+test("group with mixed visible blocks returns false", () => {
+  let blocks: tBlockMapping = new Map();
+  blocks.set("block1", { pvaddress: "block1", visible: false });
+  blocks.set("block2", { pvaddress: "block2", visible: true });
+  const result = checkIfAllBlocksInGroupAreHidden(blocks);
   expect(result).toBe(false);
 });

app/components/GroupUtils.ts

@@ -1,5 +1,7 @@
-import { IfcGroup } from "@/app/types";
+import { tBlockMapping } from "@/app/types";
 
-export function checkIfAllBlocksInGroupAreHidden(group: IfcGroup): boolean {
-  return group.blocks.map((block) => block.visible).every((v) => v === false);
+export function checkIfAllBlocksInGroupAreHidden(
+  blocks: tBlockMapping,
+): boolean {
+  return Array.from(blocks.values()).every((block) => block.visible === false);
 }

app/components/Groups.test.tsx

@@ -1,41 +1,34 @@
 import { render } from "@testing-library/react";
 import Groups from "@/app/components/Groups";
-import { IfcGroup } from "@/app/types";
+import { tBlockMapping, tGroups } from "@/app/types";
 
 it("renders groups correctly with hidden and non hidden groups", () => {
-  const shownGroupWithTwoBlocks: IfcGroup = {
-    name: "group1",
-    blocks: [
-      {
-        pvaddress: "A:SHOWN:BLOCK",
-        human_readable_name: "aShownBlock",
-        value: 2.344,
-        visible: true,
-      },
-      {
-        pvaddress: "ADIFF:SHOWN:BLOCK",
-        human_readable_name: "aDifferentShownBlock",
-        value: 3.14,
-        visible: true,
-      },
-    ],
-  };
-  const hiddenGroupWithOneBlock: IfcGroup = {
-    name: "group2",
-    blocks: [
-      {
-        pvaddress: "A:HIDDEN:BLOCK",
-        human_readable_name: "aHiddenBlock",
-        visible: false,
-      },
-    ],
-  };
+  let groups: tGroups = new Map();
+  let blocksForGroup1: tBlockMapping = new Map();
+  blocksForGroup1.set("A:SHOWN:BLOCK", {
+    pvaddress: "A:SHOWN:BLOCK",
+    human_readable_name: "aShownBlock",
+    value: 2.344,
+    visible: true,
+  });
+  blocksForGroup1.set("ADIFF:SHOWN:BLOCK", {
+    pvaddress: "ADIFF:SHOWN:BLOCK",
+    human_readable_name: "aDifferentShownBlock",
+    value: 3.14,
+    visible: true,
+  });
+  groups.set("group1", blocksForGroup1);
+
+  let blocksForGroup2: tBlockMapping = new Map();
+  blocksForGroup2.set("A:HIDDEN:BLOCK", {
+    pvaddress: "A:HIDDEN:BLOCK",
+    human_readable_name: "aHiddenBlock",
+    visible: false,
+  });
+  groups.set("group2", blocksForGroup2);
+
   const { container } = render(
-    <Groups
-      instName={"TESTING"}
-      showHiddenBlocks={false}
-      groupsMap={[shownGroupWithTwoBlocks, hiddenGroupWithOneBlock]}
-    />,
+    <Groups instName={"TESTING"} showHiddenBlocks={false} groupsMap={groups} />,
   );
   expect(container).toMatchSnapshot();
 });

app/components/Groups.tsx

@@ -1,23 +1,23 @@
 import Group from "./Group";
-
-import { IfcGroup } from "@/app/types";
+import { tGroups } from "@/app/types";
 
 export default function Groups({
   groupsMap,
   instName,
   showHiddenBlocks,
 }: {
-  groupsMap: Array<IfcGroup>;
+  groupsMap: tGroups;
   instName: string;
   showHiddenBlocks: boolean;
 }) {
   return (
     <div className="rounded-xl grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mt-2">
-      {groupsMap.map((group) => {
+      {Array.from(groupsMap.entries()).map(([group, blocks]) => {
         return (
           <Group
-            key={group.name}
+            key={group}
             group={group}
+            blocks={blocks}
             instName={instName}
             showHiddenBlocks={showHiddenBlocks}
           />