Merge pull request #63 from ProjectLighthouseCAU/monitor-filter

fwcd · web-flow · commit c1fb03df8631 · 2025-02-27T03:19:34.000Z
Add support for monitoring arbitrary properties visually
diff --git a/src/screens/home/admin/MonitorInspector.tsx b/src/screens/home/admin/MonitorInspector.tsx
@@ -1,21 +1,34 @@
 import { LampV2Metrics } from '@luna/contexts/api/model/types';
 import { FlatRoomV2Metrics } from '@luna/screens/home/admin/helpers/FlatRoomV2Metrics';
+import { MonitorCriterion } from '@luna/screens/home/admin/helpers/MonitorCriterion';
 import { MonitorInspectorLampsCard } from '@luna/screens/home/admin/MonitorInspectorLampsCard';
 import { MonitorInspectorRoomCard } from '@luna/screens/home/admin/MonitorInspectorRoomCard';
 
 export interface MonitorInspectorProps {
+  criterion?: MonitorCriterion;
+  setCriterion: (criterion?: MonitorCriterion) => void;
   flatRoomMetrics?: FlatRoomV2Metrics;
   lampMetrics?: LampV2Metrics[];
 }
 
 export function MonitorInspector({
+  criterion,
+  setCriterion,
   flatRoomMetrics,
   lampMetrics,
 }: MonitorInspectorProps) {
   return (
     <div className="flex flex-col space-y-3">
-      <MonitorInspectorRoomCard metrics={flatRoomMetrics} />
-      <MonitorInspectorLampsCard metrics={lampMetrics ?? []} />
+      <MonitorInspectorRoomCard
+        criterion={criterion?.type === 'room' ? criterion : undefined}
+        setCriterion={setCriterion}
+        metrics={flatRoomMetrics}
+      />
+      <MonitorInspectorLampsCard
+        criterion={criterion?.type === 'lamp' ? criterion : undefined}
+        setCriterion={setCriterion}
+        metrics={lampMetrics ?? []}
+      />
     </div>
   );
 }
diff --git a/src/screens/home/admin/MonitorInspectorLampsCard.tsx b/src/screens/home/admin/MonitorInspectorLampsCard.tsx
@@ -1,10 +1,13 @@
 import { TitledCard } from '@luna/components/TitledCard';
 import { LampV2Metrics } from '@luna/contexts/api/model/types';
+import { MonitorLampCriterion } from '@luna/screens/home/admin/helpers/MonitorCriterion';
 import { MonitorInspectorTable } from '@luna/screens/home/admin/MonitorInspectorTable';
 import { MonitorInspectorValue } from '@luna/screens/home/admin/MonitorInspectorValue';
 import { IconCheck, IconLamp } from '@tabler/icons-react';
 
 export interface MonitorInspectorLampsCardProps {
+  criterion?: MonitorLampCriterion;
+  setCriterion: (criterion?: MonitorLampCriterion) => void;
   metrics: LampV2Metrics[];
 }
 
@@ -19,6 +22,8 @@ const names: { [Property in keyof LampV2Metrics]: string } = {
 };
 
 export function MonitorInspectorLampsCard({
+  criterion,
+  setCriterion,
   metrics,
 }: MonitorInspectorLampsCardProps) {
   return (
@@ -27,6 +32,10 @@ export function MonitorInspectorLampsCard({
         <MonitorInspectorTable
           metrics={metrics}
           names={names}
+          selection={criterion?.key}
+          onSelect={key =>
+            setCriterion(key ? { type: 'lamp', key } : undefined)
+          }
           render={(value, prop) => (
             <MonitorInspectorLampValue value={value} prop={prop} />
           )}
diff --git a/src/screens/home/admin/MonitorInspectorRoomCard.tsx b/src/screens/home/admin/MonitorInspectorRoomCard.tsx
@@ -1,11 +1,14 @@
 import { TitledCard } from '@luna/components/TitledCard';
 import { FlatRoomV2Metrics } from '@luna/screens/home/admin/helpers/FlatRoomV2Metrics';
+import { MonitorRoomCriterion } from '@luna/screens/home/admin/helpers/MonitorCriterion';
 import { MonitorInspectorTable } from '@luna/screens/home/admin/MonitorInspectorTable';
 import { MonitorInspectorValue } from '@luna/screens/home/admin/MonitorInspectorValue';
 import { IconDoor } from '@tabler/icons-react';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
 export interface MonitorInspectorRoomCardProps {
+  criterion?: MonitorRoomCriterion;
+  setCriterion: (criterion?: MonitorRoomCriterion) => void;
   metrics?: FlatRoomV2Metrics;
 }
 
@@ -37,9 +40,10 @@ const units: { [Property in keyof FlatRoomV2Metrics]?: string } = {
 };
 
 export function MonitorInspectorRoomCard({
+  criterion,
+  setCriterion,
   metrics,
 }: MonitorInspectorRoomCardProps) {
-  const [selection, setSelection] = useState<keyof FlatRoomV2Metrics>();
   const renderedMetrics = useMemo<FlatRoomV2Metrics[]>(
     () => (metrics ? [metrics] : []),
     [metrics]
@@ -51,8 +55,10 @@ export function MonitorInspectorRoomCard({
         <MonitorInspectorTable
           metrics={renderedMetrics}
           names={names}
-          selection={selection}
-          onSelect={setSelection}
+          selection={criterion?.key}
+          onSelect={key =>
+            setCriterion(key ? { type: 'room', key } : undefined)
+          }
           render={(value, prop) => (
             <MonitorInspectorRoomValue value={value} prop={prop} />
           )}
diff --git a/src/screens/home/admin/MonitorView.tsx b/src/screens/home/admin/MonitorView.tsx
@@ -4,18 +4,16 @@ import { LaserMetrics, RoomV2Metrics } from '@luna/contexts/api/model/types';
 import { Breakpoint, useBreakpoint } from '@luna/hooks/useBreakpoint';
 import { useEventListener } from '@luna/hooks/useEventListener';
 import { flattenRoomV2Metrics } from '@luna/screens/home/admin/helpers/FlatRoomV2Metrics';
+import { MonitorCriterion } from '@luna/screens/home/admin/helpers/MonitorCriterion';
 import { MonitorInspector } from '@luna/screens/home/admin/MonitorInspector';
 import { HomeContent } from '@luna/screens/home/HomeContent';
+import * as rgb from '@luna/utils/rgb';
 import { throttle } from '@luna/utils/schedule';
 import { Vec2 } from '@luna/utils/vec2';
 import { Button } from '@heroui/react';
 import { IconRefresh } from '@tabler/icons-react';
 import { Set } from 'immutable';
-import {
-  LIGHTHOUSE_COLOR_CHANNELS,
-  LIGHTHOUSE_COLS,
-  LIGHTHOUSE_FRAME_BYTES,
-} from 'nighthouse/browser';
+import { LIGHTHOUSE_COLS, LIGHTHOUSE_FRAME_BYTES } from 'nighthouse/browser';
 import {
   useCallback,
   useContext,
@@ -24,6 +22,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { Bounded, isBounded } from '@luna/utils/bounded';
 
 export function MonitorView() {
   const [maxSize, setMaxSize] = useState({ width: 0, height: 0 });
@@ -58,6 +57,7 @@ export function MonitorView() {
 
   const [focusedRoom, setSelectedRoom] = useState<number>();
   const [hoveredRoom, setHoveredRoom] = useState<number>();
+  const [criterion, setCriterion] = useState<MonitorCriterion>();
 
   const getLatestMetrics = useCallback(async () => {
     // setMetrics(testMetrics); // TODO: change back from test data to fetched data
@@ -75,7 +75,10 @@ export function MonitorView() {
   }, [getLatestMetrics]);
 
   const roomMetrics = useMemo(
-    () => (metrics?.rooms ?? []) as RoomV2Metrics[],
+    () =>
+      (metrics?.rooms ?? []).filter(
+        room => room.api_version === 2
+      ) as RoomV2Metrics[],
     [metrics?.rooms]
   );
 
@@ -84,40 +87,108 @@ export function MonitorView() {
     [roomMetrics]
   );
 
+  const valueToNumberOrNull = useCallback(
+    (value: number | string | boolean | Bounded<number> | null | undefined) => {
+      if (value === null || value === undefined) {
+        return null;
+      }
+      if (typeof value === 'object' && isBounded(value)) {
+        return value.value;
+      }
+      return +value;
+    },
+    []
+  );
+
+  const criterionValues = useMemo(() => {
+    if (criterion === undefined) return undefined;
+    switch (criterion.type) {
+      case 'room':
+        return flatRoomMetrics.flatMap(room =>
+          [...Array(room.responsive_lamps.total)].map(() =>
+            valueToNumberOrNull(room[criterion.key])
+          )
+        );
+      case 'lamp':
+        return roomMetrics.flatMap(room =>
+          room.lamp_metrics.map(lamp =>
+            valueToNumberOrNull(lamp[criterion.key])
+          )
+        );
+    }
+  }, [criterion, flatRoomMetrics, roomMetrics, valueToNumberOrNull]);
+
+  const normalizedCriterionValues = useMemo(() => {
+    if (criterionValues === undefined) return undefined;
+    if (criterionValues.length === 0) return [];
+    const nonNulls = criterionValues.filter(v => v !== null) as number[];
+    const min = nonNulls.reduce((x, y) => Math.min(x, y));
+    const max = nonNulls.reduce((x, y) => Math.max(x, y));
+    return criterionValues.map(x => (x === null ? 0 : (x - min) / (max - min)));
+  }, [criterionValues]);
+
+  const criterionColormap = useMemo(() => {
+    if (criterion !== undefined) {
+      switch (criterion.type) {
+        case 'room':
+          switch (criterion.key) {
+            case 'board_temperature':
+            case 'core_temperature':
+              return [rgb.BLUE, rgb.RED];
+            case 'responding':
+              return [rgb.GREEN, rgb.RED];
+          }
+          break;
+        case 'lamp':
+          switch (criterion.key) {
+            case 'responding':
+            case 'fuse_tripped':
+              return [rgb.GREEN, rgb.RED];
+          }
+          break;
+      }
+    }
+    return [rgb.BLACK, rgb.RED, rgb.YELLOW, rgb.WHITE];
+  }, [criterion]);
+
   // fill the frame with colors according to the metrics data
   const frame = useMemo(() => {
     const frame = new Uint8Array(LIGHTHOUSE_FRAME_BYTES);
-    // alternate between light and dark color to visualize room borders
-    let parity = false;
-    let i = 0;
-    for (const room of roomMetrics) {
-      if (room.api_version !== 2) continue;
-      const endIdx = i + LIGHTHOUSE_COLOR_CHANNELS * room.lamp_metrics.length;
-      // controller works?
-      if (room.controller_metrics.responding) {
-        let lampIdx = 0;
-        for (; i < endIdx; i += LIGHTHOUSE_COLOR_CHANNELS) {
-          // lamp works?
-          if (room.lamp_metrics[lampIdx].responding) {
-            frame[i + 1] = parity ? 255 : 128; // green
-          } else {
-            // lamp down -> magenta
-            frame[i] = parity ? 255 : 128;
-            frame[i + 2] = parity ? 255 : 128;
+    let windowIdx = 0;
+
+    const hasActiveCriterion = normalizedCriterionValues !== undefined;
+    if (hasActiveCriterion) {
+      for (const value of normalizedCriterionValues as number[]) {
+        const color = rgb.lerpMultiple(criterionColormap, value);
+        rgb.setAt(windowIdx, color, frame);
+        windowIdx++;
+      }
+    } else {
+      // alternate between light and dark color to visualize room borders
+      let parity = false;
+      const parityDim = (c: rgb.Color) => rgb.scale(c, parity ? 1 : 0.6);
+      for (const room of roomMetrics) {
+        const lampCount = room.lamp_metrics.length;
+        // controller works?
+        if (room.controller_metrics.responding) {
+          for (let lampIdx = 0; lampIdx < lampCount; lampIdx++) {
+            // lamp works?
+            const color = parityDim(
+              room.lamp_metrics[lampIdx].responding ? rgb.GREEN : rgb.MAGENTA
+            );
+            rgb.setAt(windowIdx + lampIdx, color, frame);
           }
-          lampIdx++;
-        }
-      } else {
-        // controller down
-        for (; i < endIdx; i += 3) {
-          frame[i] = parity ? 255 : 128; // red
+        } else {
+          // controller down
+          rgb.fillAt(windowIdx, lampCount, parityDim(rgb.RED), frame);
         }
+        windowIdx += lampCount;
+        parity = !parity;
       }
-      parity = !parity;
     }
 
     return frame;
-  }, [roomMetrics]);
+  }, [criterionColormap, normalizedCriterionValues, roomMetrics]);
 
   const [roomsByWindow, windowsByRoom] = useMemo<[number[], number[][]]>(() => {
     const roomsByWindow: number[] = [];
@@ -207,6 +278,8 @@ export function MonitorView() {
           className={isCompact ? '' : 'flex flex-row justify-end grow-0 w-1/3'}
         >
           <MonitorInspector
+            criterion={criterion}
+            setCriterion={setCriterion}
             flatRoomMetrics={focusedFlatRoomMetrics}
             lampMetrics={focusedLampMetrics}
           />
diff --git a/src/screens/home/admin/helpers/MonitorCriterion.ts b/src/screens/home/admin/helpers/MonitorCriterion.ts
@@ -0,0 +1,14 @@
+import { LampV2Metrics } from '@luna/contexts/api/model/types';
+import { FlatRoomV2Metrics } from '@luna/screens/home/admin/helpers/FlatRoomV2Metrics';
+
+export interface MonitorRoomCriterion {
+  type: 'room';
+  key: keyof FlatRoomV2Metrics;
+}
+
+export interface MonitorLampCriterion {
+  type: 'lamp';
+  key: keyof LampV2Metrics;
+}
+
+export type MonitorCriterion = MonitorRoomCriterion | MonitorLampCriterion;
diff --git a/src/utils/rgb.ts b/src/utils/rgb.ts
