From 5403fe33922ca63c7ce1203484f30af4936c4f4c Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Wed, 14 May 2025 08:51:50 -0600
Subject: [PATCH 01/29] changing background colour of highlighted/toggled
 button

---
 src/common/ButtonGroup.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/common/ButtonGroup.tsx b/src/common/ButtonGroup.tsx
index f23bc0a..f1d80f4 100644
--- a/src/common/ButtonGroup.tsx
+++ b/src/common/ButtonGroup.tsx
@@ -72,14 +72,14 @@ const useStyles = makeStyles((theme: Theme) => {
       marginLeft: theme.spacing(0.05),
       marginRight: theme.spacing(0.05),
       "&:hover": {
-        backgroundColor: getSecondaryColour(), //use the colour of the whitelabel
-        //backgroundColor: "gold",
+        //backgroundColor: getSecondaryColour(), //use the colour of the whitelabel
+        backgroundColor: "gold", //for now Dustin just wants it to be gold
         color: "black",
       }
     },
     buttonToggled: {
-      backgroundColor: getSecondaryColour(), //use the colour of the whitelabel
-      //backgroundColor: "gold",
+      //backgroundColor: getSecondaryColour(), //use the colour of the whitelabel
+      backgroundColor: "gold", //for now Dustin just wants it to be gold
       color: "black",
       borderRadius: 24,
       fontWeight: "bold"

From 3fd614479f85fb78296c56296eb3bd73a88a76b2 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Wed, 14 May 2025 12:36:31 -0600
Subject: [PATCH 02/29] fixed the gate page and svg

---
 src/gate/GateDevice.tsx | 8 +++++++-
 src/gate/GateSVG.tsx    | 6 +++---
 src/pages/Gate.tsx      | 1 +
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/gate/GateDevice.tsx b/src/gate/GateDevice.tsx
index 3deef9e..955aa50 100644
--- a/src/gate/GateDevice.tsx
+++ b/src/gate/GateDevice.tsx
@@ -31,6 +31,8 @@ interface Props {
   drawerView?: boolean;
 }
 
+
+
 export default function GateDevice(props: Props) {
   const { gate, comprehensiveDevice, linkedCompList, drawerView } = props;
   const [{as}] = useGlobalState();
@@ -234,6 +236,7 @@ export default function GateDevice(props: Props) {
     return (
       <Select
         id="ambientSelect"
+        variant="standard"
         value={ambientKey}
         style={{ fontSize: 8 }}
         onChange={e => {
@@ -266,6 +269,7 @@ export default function GateDevice(props: Props) {
     return (
       <Select
         id="tempSelect"
+        variant="standard"
         value={tempKey}
         style={{ fontSize: 8 }}
         onChange={e => {
@@ -300,6 +304,7 @@ export default function GateDevice(props: Props) {
     return (
       <Select
         id="pressureSelect"
+        variant="standard"
         value={pressureKey}
         style={{ fontSize: 8 }}
         onChange={e => {
@@ -335,9 +340,10 @@ export default function GateDevice(props: Props) {
       container
       direction="row"
       alignContent="center"
+      width="100%"
       //alignItems="center"
       >
-      <Grid size={{ sm: 12, lg: isMobile || drawerView ? 12 : 8}} style={{ padding: 10 }}>
+      <Grid size={{ sm: 12, lg: isMobile || drawerView ? 12 : 4}} style={{ padding: 10 }}>
         <Box
           paddingLeft={1}
           display="flex"
diff --git a/src/gate/GateSVG.tsx b/src/gate/GateSVG.tsx
index 4dd5e74..3fc3422 100644
--- a/src/gate/GateSVG.tsx
+++ b/src/gate/GateSVG.tsx
@@ -355,13 +355,13 @@ export default function GateSVG(props: Props) {
             {renderValues()}
           </g>
           <foreignObject height={20} width={120} x={10} y={83}>
-            <Box style={{ position: "fixed" }}>{ambientSelector()}</Box>
+            <Box sx={{ position: "fixed" }}>{ambientSelector()}</Box>
           </foreignObject>
           <foreignObject height={20} width={120} x={10} y={118}>
-            <Box style={{ position: "fixed" }}>{tempChainSelector()}</Box>
+            <Box sx={{ position: "fixed" }}>{tempChainSelector()}</Box>
           </foreignObject>
           <foreignObject height={20} width={120} x={10} y={153}>
-            <Box style={{ position: "fixed" }}>{pressureChainSelector()}</Box>
+            <Box sx={{ position: "fixed" }}>{pressureChainSelector()}</Box>
           </foreignObject>
           {pcaRed()}
           {pcaGreen()}
diff --git a/src/pages/Gate.tsx b/src/pages/Gate.tsx
index c873a76..d29dde4 100644
--- a/src/pages/Gate.tsx
+++ b/src/pages/Gate.tsx
@@ -339,6 +339,7 @@ export default function Gate(props: Props) {
                   }}
                   style={{ height: 150, width: "100%", margin: -15 }}>
                   <Grid
+                    width="100%"
                     container
                     direction="row"
                     spacing={2}

From 39a90c93cbf4ab49c63d9ebf984a5c703a0f54cd Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Wed, 14 May 2025 15:25:51 -0600
Subject: [PATCH 03/29] changing the font to open sans for typography in
 theme.ts, and making the toggled one bold

---
 src/common/ButtonGroup.tsx |  4 ++--
 src/theme/theme.ts         | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/common/ButtonGroup.tsx b/src/common/ButtonGroup.tsx
index f1d80f4..dfadd58 100644
--- a/src/common/ButtonGroup.tsx
+++ b/src/common/ButtonGroup.tsx
@@ -148,9 +148,9 @@ export default function ButtonGroup(props: Props){
           }}>
           {b.icon 
           ? 
-            b.icon 
+            b.icon
           : 
-            <Typography sx={{fontSize: textSize}}>
+            <Typography sx={{fontSize: textSize ?? 13, fontWeight: checkToggled(i) ? 650 : 500}}>
               {b.title}
             </Typography>
           }
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 0f2affe..3b2883a 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -17,6 +17,20 @@ const baseTheme: ThemeOptions = {
       paper: '#f5f5f5',
     },
   },
+  typography: {
+    fontFamily: [
+      "Open Sans",
+      "-apple-system",
+      "BlinkMacSystemFont",
+      '"Segoe UI"',
+      '"Helvetica Neue"',
+      "Arial",
+      "sans-serif",
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"'
+    ].join(",")
+  }
   // Add other options if needed
 };
 

From 2c2fda48176261001d145f11a60abd02d6da3e3d Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Thu, 15 May 2025 09:23:44 -0600
Subject: [PATCH 04/29] fix the switch on controller cards prevent default was
 stopping the onChange from firing properly

---
 src/component/ComponentActions.tsx | 2 +-
 src/component/ComponentCard.tsx    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/component/ComponentActions.tsx b/src/component/ComponentActions.tsx
index f633240..58c131d 100644
--- a/src/component/ComponentActions.tsx
+++ b/src/component/ComponentActions.tsx
@@ -140,7 +140,7 @@ export default function ComponentActions(props: Props) {
         {canEdit && (
           <MenuItem dense onClick={() => {
               openComponentSettingsDialog("remove")
-              closeMoreMenu()
+              setAnchorEl(null);
             }}>
             <ListItemIcon>
               <DeleteOutline  className={classes.red} />
diff --git a/src/component/ComponentCard.tsx b/src/component/ComponentCard.tsx
index 19482bc..a2231a6 100644
--- a/src/component/ComponentCard.tsx
+++ b/src/component/ComponentCard.tsx
@@ -254,15 +254,15 @@ export default function ComponentCard(props: Props) {
                     size="small"
                     onTouchStart={event => {
                       event.stopPropagation();
-                      event.preventDefault();
+                      //event.preventDefault();
                     }}
                     onMouseDown={event => {
                       event.stopPropagation();
-                      event.preventDefault();
+                      //event.preventDefault();
                     }}
                     onClick={event => {
                       event.stopPropagation();
-                      event.preventDefault();
+                      //event.preventDefault();
                     }}
                     disabled={!canEdit}
                     onChange={(_, checked) => updateControllerState(checked)}

From a7ed8ccb2183cde67e26bfe74b20b33079061ca4 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Thu, 15 May 2025 14:37:20 -0600
Subject: [PATCH 05/29] moved the dispatch call to change as to be after the
 navigation

---
 src/user/AccessObject.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/user/AccessObject.tsx b/src/user/AccessObject.tsx
index b44630f..d774789 100644
--- a/src/user/AccessObject.tsx
+++ b/src/user/AccessObject.tsx
@@ -80,24 +80,24 @@ export default function AccessObject(props: Props) {
 
   const getAccess = (key: number | string, name: string, url: string, useImitation = false) => {
     user.settings.useTeam = false;
-    dispatch({ key: "as", value: "" });
     userAPI.updateUser(user.id(), user.protobuf()).then(() => {
       info("Will no longer view as team by default");
       permissionAPI
-        .shareObject(
-          newScope(kind, key.toString()),
-          user.settings.email,
-          [
-            pond.Permission.PERMISSION_USERS,
-            pond.Permission.PERMISSION_READ,
-            pond.Permission.PERMISSION_WRITE,
-            pond.Permission.PERMISSION_SHARE
-          ],
-          useImitation
+      .shareObject(
+        newScope(kind, key.toString()),
+        user.settings.email,
+        [
+          pond.Permission.PERMISSION_USERS,
+          pond.Permission.PERMISSION_READ,
+          pond.Permission.PERMISSION_WRITE,
+          pond.Permission.PERMISSION_SHARE
+        ],
+        useImitation
         )
         .then((_response: any) => {
           // history.push(url);
           navigate(url)
+          dispatch({ key: "as", value: "" });
           close();
         })
         .catch((_err: any) => {

From f0295c74809df1325d4469bdd225b093b7603a32 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Thu, 15 May 2025 15:19:46 -0600
Subject: [PATCH 06/29] changing the use effect to make the call to the
 dispatch to change as to view as the user but is recording who they were
 viewing as, if they close without selecting an abject it will restore the
 previous team to the dispatch

---
 src/user/AccessObject.tsx | 39 +++++++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/user/AccessObject.tsx b/src/user/AccessObject.tsx
index d774789..1eba09e 100644
--- a/src/user/AccessObject.tsx
+++ b/src/user/AccessObject.tsx
@@ -73,31 +73,36 @@ export default function AccessObject(props: Props) {
   const [teamsTotal, setTeamsTotal] = useState<number>(0);
   const [devicesOffset, setDevicesOffset] = useState<number>(0);
   const [devicesTotal, setDevicesTotal] = useState<number>(0);
+  const [prevAs, setPrevAs] = useState("")
 
-  const close = () => {
+
+  const close = (restoreAs?: boolean) => {
+    if(restoreAs){
+      dispatch({ key: "as", value: prevAs });
+    }
     closeDialogCallback();
   };
 
   const getAccess = (key: number | string, name: string, url: string, useImitation = false) => {
     user.settings.useTeam = false;
+    //dispatch({ key: "as", value: "" });
     userAPI.updateUser(user.id(), user.protobuf()).then(() => {
       info("Will no longer view as team by default");
       permissionAPI
-      .shareObject(
-        newScope(kind, key.toString()),
-        user.settings.email,
-        [
-          pond.Permission.PERMISSION_USERS,
-          pond.Permission.PERMISSION_READ,
-          pond.Permission.PERMISSION_WRITE,
-          pond.Permission.PERMISSION_SHARE
-        ],
-        useImitation
+        .shareObject(
+          newScope(kind, key.toString()),
+          user.settings.email,
+          [
+            pond.Permission.PERMISSION_USERS,
+            pond.Permission.PERMISSION_READ,
+            pond.Permission.PERMISSION_WRITE,
+            pond.Permission.PERMISSION_SHARE
+          ],
+          useImitation
         )
         .then((_response: any) => {
           // history.push(url);
           navigate(url)
-          dispatch({ key: "as", value: "" });
           close();
         })
         .catch((_err: any) => {
@@ -258,6 +263,12 @@ export default function AccessObject(props: Props) {
 
   useEffect(() => {
     if (isOpen && (prevSearchValue !== searchValue || prevKind !== kind || isOpen !== prevOpen)) {
+      //if the user is viewing as a team record who it was
+      if(as){
+        setPrevAs(as)
+      }
+      //change as so the user is viewing as themself
+      dispatch({ key: "as", value: "" });
       load();
     }
   }, [
@@ -350,12 +361,12 @@ export default function AccessObject(props: Props) {
   return (
     <ResponsiveDialog
       open={isOpen}
-      onClose={close}
+      onClose={() => close(true)}
       aria-labelledby="access-object-dialog"
       fullScreen>
       <AppBar position="sticky">
         <Toolbar>
-          <IconButton edge="start" color="inherit" onClick={close} aria-label="close">
+          <IconButton edge="start" color="inherit" onClick={() => close(true)} aria-label="close">
             <CloseIcon />
           </IconButton>
           <Typography variant="h6" noWrap>

From ebf6bdb71a2d2765b0e7fd1d1d4b15cd01de150d Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 16 May 2025 10:53:26 -0600
Subject: [PATCH 07/29] fixed navigation bug in devices page; added option to
 seperate dust from sen5x to different column

---
 src/common/StatusSen5x.tsx         | 61 +++++++++++----------------
 src/component/ComponentActions.tsx |  3 +-
 src/pages/Device.tsx               |  1 -
 src/pages/Devices.tsx              | 68 ++++++++++++++++++++++++------
 src/providers/http.tsx             |  9 +---
 5 files changed, 82 insertions(+), 60 deletions(-)

diff --git a/src/common/StatusSen5x.tsx b/src/common/StatusSen5x.tsx
index 912f128..887fd10 100644
--- a/src/common/StatusSen5x.tsx
+++ b/src/common/StatusSen5x.tsx
@@ -5,8 +5,10 @@ import { Device } from "models";
 import PulseBox from "./PulseBox";
 import { or } from "utils";
 import { useEffect, useState } from "react";
+
 interface Props {
   device: Device
+  noDust?: boolean;
 }
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -19,8 +21,8 @@ const useStyles = makeStyles((theme: Theme) => {
       padding: theme.spacing(0.75),
       marginRight: "auto",
       margin: theme.spacing(1),
-      width: "72px",
-      height: "50px",
+      width: theme.spacing(16),
+      height: theme.spacing(11),
     },
     carouselContainer: {
       position: 'relative',
@@ -48,7 +50,7 @@ const useStyles = makeStyles((theme: Theme) => {
 })
 
 export default function StatusPlenum(props: Props) {
-  const { device } = props;
+  const { device, noDust } = props;
   const classes = useStyles()
 
   const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
@@ -73,8 +75,9 @@ export default function StatusPlenum(props: Props) {
 
   // Auto-cycle through measurements every 3 seconds
   useEffect(() => {
+    if (noDust) return
     const interval = setInterval(() => {
-      setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
     }, 3000); // Adjust timing as needed (3000ms = 3s)
 
     return () => clearInterval(interval); // Cleanup on unmount
@@ -125,66 +128,52 @@ export default function StatusPlenum(props: Props) {
           >
             <Grid2>
               <Typography variant="body2" style={{ color: orange[700]}}>
-                {device.status.sen5x?.temperature.toFixed(1)}°C
+                Temp: {device.status.sen5x?.temperature.toFixed(1)}°C
               </Typography>
             </Grid2>
             <Grid2>
               <Typography variant="body2" style={{ color: blue[700]}}>
-                {device.status.sen5x?.humidity.toFixed(1)}%
+                Humidity: {device.status.sen5x?.humidity.toFixed(1)}%
+              </Typography>
+            </Grid2>
+            <Grid2>
+              <Typography variant="body2" style={{ color: blue[300]}}>
+                Voc: {device.status.sen5x?.voc.toFixed(1)}%
+              </Typography>
+            </Grid2>
+            <Grid2>
+              <Typography variant="body2" style={{ color: blue[400]}}>
+                Nox: {device.status.sen5x?.nox.toFixed(1)}%
               </Typography>
             </Grid2>
           </Grid2>
           
-          <Grid2 container direction="column" 
+          {!noDust && <Grid2 container direction="column" 
             className={`${classes.carouselItem} ${
               1 === currentIndex ? classes.active : classes.inactive
             }`}
           >
             <Grid2>
               <Typography variant="body2" style={{ color: green[300]}}>
-                {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
+                {"<1um:"} {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
               </Typography>
             </Grid2>
             <Grid2>
               <Typography variant="body2" style={{ color: green[400]}}>
-                {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
+                {"<2.5um:"} {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
               </Typography>
             </Grid2>
-          </Grid2>
-
-          <Grid2 container direction="column" 
-            className={`${classes.carouselItem} ${
-              2 === currentIndex ? classes.active : classes.inactive
-            }`}
-          >
             <Grid2>
               <Typography variant="body2" style={{ color: green[500]}}>
-                {device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
+                {"<4um: "}{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
               </Typography>
             </Grid2>
             <Grid2>
               <Typography variant="body2" style={{ color: green[600]}}>
-                {device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
+                {"<10um: "}{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
               </Typography>
             </Grid2>
-          </Grid2>
-
-          <Grid2 container direction="column" 
-            className={`${classes.carouselItem} ${
-              3 === currentIndex ? classes.active : classes.inactive
-            }`}
-          >
-            <Grid2>
-              <Typography variant="body2" style={{ color: blue[300]}}>
-                V: {device.status.sen5x?.voc.toFixed(1)}%
-              </Typography>
-            </Grid2>
-            <Grid2>
-              <Typography variant="body2" style={{ color: blue[400]}}>
-                N: {device.status.sen5x?.nox.toFixed(1)}%
-              </Typography>
-            </Grid2>
-          </Grid2>
+          </Grid2>}
         </Grid2>
       </PulseBox>
     </Tooltip>
diff --git a/src/component/ComponentActions.tsx b/src/component/ComponentActions.tsx
index f633240..3d1ebc9 100644
--- a/src/component/ComponentActions.tsx
+++ b/src/component/ComponentActions.tsx
@@ -17,7 +17,7 @@ import { isController, isSource } from "pbHelpers/ComponentType";
 import { DeviceAvailabilityMap, OffsetAvailabilityMap } from "pbHelpers/DeviceAvailability";
 import { pond } from "protobuf-ts/pond";
 import { useGlobalState } from "providers";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { or } from "utils/types";
 import ComponentSettings from "./ComponentSettings";
 import { green, teal } from "@mui/material/colors";
@@ -94,6 +94,7 @@ export default function ComponentActions(props: Props) {
   };
 
   const openComponentSettingsDialog = (mode: string) => {
+    console.log("delete")
     setIsComponentSettingsOpen(true);
     setComponentSettingsMode(or(mode, ""));
   };
diff --git a/src/pages/Device.tsx b/src/pages/Device.tsx
index 911e9f0..eabaf80 100644
--- a/src/pages/Device.tsx
+++ b/src/pages/Device.tsx
@@ -14,7 +14,6 @@ import { pond, quack } from "protobuf-ts/pond";
 import { cloneDeep } from "lodash";
 import DeviceOverview from "device/DeviceOverview";
 import { DeviceAvailabilityMap, FindAvailablePositions, OffsetAvailabilityMap } from "pbHelpers/DeviceAvailability";
-import AddComponentManualDialog from "component/AddComponentManualDialog"; 
 import ComponentCard from "component/ComponentCard";
 import { sameComponentID, sortComponents } from "pbHelpers/Component";
 import { isController } from "pbHelpers/ComponentType";
diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index c4239c5..21edc95 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -24,6 +24,7 @@ import { Tag as TagUI } from "common/Tag";
 import moment from "moment";
 import StatusPlenum from "common/StatusPlenum";
 import StatusSen5x from "common/StatusSen5x";
+import StatusDust from "common/StatusDust";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -122,6 +123,7 @@ export default function Devices() {
   const [groupSettingsIsOpen, setGroupSettingsIsOpen] = useState<boolean>(false);
 
   const [fieldContains, setFieldContains] = useState<Map<string, string>>(new Map<string, string>())
+  const [seperateDust, setSeperateDust] = useState(true)
 
   const [{ as }] = useGlobalState()
 
@@ -250,12 +252,8 @@ export default function Devices() {
     ).then(resp => {
       let newDevices: Device[] = []
       resp.data.devices.forEach(device => {
-        if (device.status?.plenum?.temperature) {
-          setHasPlenums(true)
-        }
-        if (device.status?.sen5x?.temperature) {
-          setHasSen5x(true)
-        }
+        if (device.status?.plenum?.temperature) setHasPlenums(true)
+        if (device.status?.sen5x?.temperature) setHasSen5x(true)
         newDevices.push(Device.create(device))
       })
       setDevices(newDevices)
@@ -277,15 +275,41 @@ export default function Devices() {
     setLimit(event.target.value);
   };
 
-  const prependToUrl = (prependage: number | string) => {
-    const basePath = location.pathname.replace(/\/$/, ""); 
-    return(`/${prependage}/${basePath}`.replace(/\/{2,}/g, "/").replace(/(\/[^/]+)\/\1+/g, "$1"));
-  };
+  // const prependToUrl = (prependage: number | string) => {
+  //   const basePath = location.pathname.replace(/\/$/, ""); 
+  //   return(`/${prependage}/${basePath}`.replace(/\/{2,}/g, "/").replace(/(\/[^/]+)\/\1+/g, "$1"));
+  // };
+
+  function insertGroupContext(groupID: string, deviceID: string): string {
+    const path = location.pathname
+    console.log(path)
+    const segments = path.split('/').filter(Boolean);
+    const deviceIndex = segments.findIndex(segment => segment === 'devices');
+
+    if (deviceIndex === -1) {
+      throw new Error('Path does not contain "devices"');
+    }
+
+    // Build the new segments
+    const newSegments = [
+      ...segments.slice(0, deviceIndex),
+      'groups',
+      groupID,
+      ...segments.slice(deviceIndex),
+      deviceID
+    ];
+
+    return '/' + newSegments.join('/');
+  }
 
   const toDevice = (device: Device) => {
-    let url = prependToUrl(getGroup() ? "groups/" + getGroup().id() : "")
-    url = url + "/" + device.id()
-    navigate(url, { replace: true, state: {device: device} })
+
+    let url = getGroup() ? insertGroupContext(getGroup().id().toString(), device.id().toString()) : ""
+    console.log(url)
+    if (url.length < 1) url = device.id().toString()
+    // url = url + "/" + device.id()
+    // navigate(url, { replace: true, state: {device: device} })
+    navigate(url, { state: {device: device} })
   };
 
   const handleTabChange = (_event: React.SyntheticEvent, newValue: string) => {
@@ -384,7 +408,23 @@ export default function Devices() {
           if (device.status.sen5x?.temperature) {
             return (
               <Box sx={{ marginLeft: 1 }}>
-                <StatusSen5x device={device} />
+                <StatusSen5x device={device} noDust={seperateDust} />
+              </Box>
+            )
+          } else {
+            return (
+              <></>
+            )
+          }
+        }
+      })
+      if (seperateDust) columns.push({
+        title: "Dust",
+        render: (device: Device) => {
+          if (device.status.sen5x?.temperature) {
+            return (
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusDust device={device} />
               </Box>
             )
           } else {
diff --git a/src/providers/http.tsx b/src/providers/http.tsx
index 6811355..c4d9f64 100644
--- a/src/providers/http.tsx
+++ b/src/providers/http.tsx
@@ -1,14 +1,9 @@
 import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
-// import { useAuth } from "hooks";
 import moment from "moment";
 import { createContext, PropsWithChildren, useContext } from "react";
-// import BillingProvider from "./billing";
-// import GitlabProvider from "./gitlab";
 import PondProvider from "./pond/pond";
 import { useAuth0 } from "@auth0/auth0-react";
 import SnackbarProvider from "./Snackbar";
-// import SecurityProvider from "./security";
-// import { useAuth0 } from "@auth0/auth0-react";
 
 interface IHTTPContext {
   get: <T>(url: string, spreadOptions?: AxiosRequestConfig) => Promise<AxiosResponse<T>>;
@@ -78,9 +73,7 @@ export default function HTTPProvider(props: Props) {
   }
 
   function get<T>(url: string, spreadOptions?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
-    if (isTokenExpired(token)) {
-      loginWithRedirect()
-    }
+    if (isTokenExpired(token)) loginWithRedirect()
     return axios.get(url, {...defaultOptions(), ...spreadOptions});
   }
 

From 33988e368466a3f2917df98fc8455c5b2b942422 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 16 May 2025 11:33:25 -0600
Subject: [PATCH 08/29] added optional element to responsive table to render an
 element before the search bar

---
 src/common/ResponsiveTable.tsx | 11 ++++++++---
 src/pages/Devices.tsx          | 35 ++++++++++++++++++++++++++++------
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx
index de23f1b..dea576a 100644
--- a/src/common/ResponsiveTable.tsx
+++ b/src/common/ResponsiveTable.tsx
@@ -92,6 +92,7 @@ interface Props<T> {
   customElement?: JSX.Element //element that will be placed in the table head between the table actions and the column header rows
   mobileView?: boolean //can be used to force the table to use its mobile view for narrow containing elements ie, drawer
   hidePagination?: boolean //when passed in will hide the pagination at the bottom of the table
+  endTitleElement?: string | JSX.Element | (() => string | JSX.Element);
 }
 
 export default function ResponsiveTable<T extends Object>(props: Props<T>) {
@@ -126,6 +127,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
   const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle
   const title = typeof(props.title) === "function" ? props.title() : props.title
+  const endTitleElement = typeof(props.endTitleElement) === "function" ? props.endTitleElement() : props.endTitleElement
 
   const isMobile = useMobile()
 
@@ -307,11 +309,13 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
 
   if (isMobile || mobileView) return (
     <Box>
+      
       <Box className={classes.mobileTitleBox}>
         {renderTitle()}
         {renderSubtitle()}
         {setSearchText && searchBar()}
       </Box>
+      
       {rows.map((row, index) => {
         return (
           <Card className={classNames(classes.card)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
@@ -375,10 +379,9 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
 
 
   return (
-      <TableContainer className={classes.tableContainer} component={Paper}>
+    <TableContainer className={classes.tableContainer} component={Paper}>
       <Table>
         <TableHead>
-          
           <TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}>
             <TableCell colSpan={10000} sx={{ border: "none" }}>
               <Grid2 container justifyContent="space-between">
@@ -393,6 +396,9 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                     <Grid2>
                       {actions && actions}
                     </Grid2>
+                    <Grid2>
+                      {endTitleElement}
+                    </Grid2>
                     <Grid2>
                       {setSearchText &&<Box className={classes.searchContainer}>
                         {searchBar()}
@@ -418,7 +424,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
               </TableCell>
             </TableRow>
           }
-
         
           <TableRow sx={ hideKeys ? { display: "none" } : undefined } >
             { rowSelect && <TableCell></TableCell> }
diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index 21edc95..d4518fe 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -1,5 +1,5 @@
-import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon } from "@mui/icons-material";
-import { Box, Chip, Grid2, IconButton, Skeleton, Tab, Tabs, Theme, Tooltip, Typography, useTheme } from "@mui/material";
+import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon, Tune } from "@mui/icons-material";
+import { Box, Chip, Dialog, DialogTitle, Grid2, IconButton, Menu, MenuItem, Skeleton, Tab, Tabs, Theme, Tooltip, Typography, useTheme } from "@mui/material";
 import { blue, green, orange } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
@@ -125,6 +125,8 @@ export default function Devices() {
   const [fieldContains, setFieldContains] = useState<Map<string, string>>(new Map<string, string>())
   const [seperateDust, setSeperateDust] = useState(true)
 
+  const [preferencesAnchor, setPreferencesAnchor] = useState<any>(null)
+
   const [{ as }] = useGlobalState()
 
   const updateGroups = (newGroups: Group[]) => {
@@ -282,7 +284,6 @@ export default function Devices() {
 
   function insertGroupContext(groupID: string, deviceID: string): string {
     const path = location.pathname
-    console.log(path)
     const segments = path.split('/').filter(Boolean);
     const deviceIndex = segments.findIndex(segment => segment === 'devices');
 
@@ -305,10 +306,7 @@ export default function Devices() {
   const toDevice = (device: Device) => {
 
     let url = getGroup() ? insertGroupContext(getGroup().id().toString(), device.id().toString()) : ""
-    console.log(url)
     if (url.length < 1) url = device.id().toString()
-    // url = url + "/" + device.id()
-    // navigate(url, { replace: true, state: {device: device} })
     navigate(url, { state: {device: device} })
   };
 
@@ -527,6 +525,29 @@ export default function Devices() {
     )
   }
 
+  const preferencesButton = () => {
+    return (
+      <IconButton onClick={(event) => setPreferencesAnchor(event.currentTarget)}>
+        <Tune />
+      </IconButton>
+    )
+  }
+
+  const preferencesMenu = () => {
+    return (
+      <Menu
+        id="userMenu"
+        anchorEl={preferencesAnchor}
+        open={preferencesAnchor !== null}
+        onClose={() => setPreferencesAnchor(null)}
+        disableAutoFocusItem>
+          <MenuItem>
+            hi
+          </MenuItem>
+      </Menu>
+    )
+  }
+
   return(
     <PageContainer padding={isMobile ? 0 : 2}>
       <Box 
@@ -572,6 +593,7 @@ export default function Devices() {
         setSearchText={setSearch}
         isLoading={devicesLoading}
         actions={getGroup() && <GroupActions removeCallback={removeGroupCallback} group={getGroup()} permissions={groupPermissions} devices={devices} refreshCallback={loadDevices}/>}
+        endTitleElement={preferencesButton}
       />
       <ProvisionDevice
         isOpen={isProvisionDialogOpen}
@@ -590,6 +612,7 @@ export default function Devices() {
         removeGroupCallback={removeGroupCallback}
         addGroupCallback={addGroupCallback}
       />
+      {preferencesMenu()}
     </PageContainer>
   )
 }
\ No newline at end of file

From c19974edd9109d1cec66751f261e83266a8e4229 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 16 May 2025 11:58:22 -0600
Subject: [PATCH 09/29] made a preferences element to group/ungroup sen5x stuff

---
 src/pages/Devices.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index d4518fe..562ca25 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -1,5 +1,5 @@
 import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon, Tune } from "@mui/icons-material";
-import { Box, Chip, Dialog, DialogTitle, Grid2, IconButton, Menu, MenuItem, Skeleton, Tab, Tabs, Theme, Tooltip, Typography, useTheme } from "@mui/material";
+import { Box, Checkbox, Chip, Grid2, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Skeleton, Tab, Tabs, Theme, Tooltip, Typography, useTheme } from "@mui/material";
 import { blue, green, orange } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
@@ -123,7 +123,7 @@ export default function Devices() {
   const [groupSettingsIsOpen, setGroupSettingsIsOpen] = useState<boolean>(false);
 
   const [fieldContains, setFieldContains] = useState<Map<string, string>>(new Map<string, string>())
-  const [seperateDust, setSeperateDust] = useState(true)
+  const [seperateDust, setSeperateDust] = useState(false)
 
   const [preferencesAnchor, setPreferencesAnchor] = useState<any>(null)
 
@@ -533,6 +533,8 @@ export default function Devices() {
     )
   }
 
+
+
   const preferencesMenu = () => {
     return (
       <Menu
@@ -541,8 +543,17 @@ export default function Devices() {
         open={preferencesAnchor !== null}
         onClose={() => setPreferencesAnchor(null)}
         disableAutoFocusItem>
-          <MenuItem>
-            hi
+          <MenuItem 
+            onClick={() => setSeperateDust(!seperateDust)}
+            sx={{ marginLeft: -0.75 }}
+            dense
+          >
+            <ListItemIcon>
+              <Checkbox 
+                checked={seperateDust}
+              />
+            </ListItemIcon>
+            <ListItemText primary={"Seperate Dust"} />
           </MenuItem>
       </Menu>
     )

From 2a578a947e36a019b7594e12952771c61aaf0527 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 16 May 2025 12:27:22 -0600
Subject: [PATCH 10/29] fixed sen5x status component not rotating after
 switching setting

---
 src/common/StatusSen5x.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/common/StatusSen5x.tsx b/src/common/StatusSen5x.tsx
index 887fd10..632709e 100644
--- a/src/common/StatusSen5x.tsx
+++ b/src/common/StatusSen5x.tsx
@@ -52,7 +52,7 @@ const useStyles = makeStyles((theme: Theme) => {
 export default function StatusPlenum(props: Props) {
   const { device, noDust } = props;
   const classes = useStyles()
-
+  // console.log(noDust)
   const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
   const messages = or(device.status.sen5x?.overlays.map(overlay => overlay.message), []);
 
@@ -73,15 +73,19 @@ export default function StatusPlenum(props: Props) {
 
   const [currentIndex, setCurrentIndex] = useState(0);
 
-  // Auto-cycle through measurements every 3 seconds
+  // Auto-cycle through measurements every 5 seconds
   useEffect(() => {
-    if (noDust) return
+    if (noDust) {
+      setCurrentIndex(0)
+      return
+    }
     const interval = setInterval(() => {
-      setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
-    }, 3000); // Adjust timing as needed (3000ms = 3s)
+      console.log(noDust)
+      if (!noDust) setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
+    }, 5000); 
 
     return () => clearInterval(interval); // Cleanup on unmount
-  }, []);
+  }, [noDust]);
 
   const tooltip = () => {
     if (messages.length === 0) return null

From abde5c6499ed74487219ffff5fa19afe60aaa96f Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 16 May 2025 13:26:17 -0600
Subject: [PATCH 11/29] separateDust setting will persist in local storage

---
 src/common/StatusDust.tsx  | 149 +++++++++++++++++++++++++++++++++++++
 src/common/StatusSen5x.tsx |   1 -
 src/pages/Devices.tsx      |  19 +++--
 3 files changed, 162 insertions(+), 7 deletions(-)
 create mode 100644 src/common/StatusDust.tsx

diff --git a/src/common/StatusDust.tsx b/src/common/StatusDust.tsx
new file mode 100644
index 0000000..2333318
--- /dev/null
+++ b/src/common/StatusDust.tsx
@@ -0,0 +1,149 @@
+import { Box, Grid2, Theme, Tooltip, Typography } from "@mui/material";
+import { green } from "@mui/material/colors";
+import { makeStyles } from "@mui/styles";
+import { Device } from "models";
+import PulseBox from "./PulseBox";
+import { or } from "utils";
+import { useEffect, useState } from "react";
+interface Props {
+  device: Device
+}
+
+const useStyles = makeStyles((theme: Theme) => {
+  const lightMode = theme.palette?.mode === "light";
+  return ({
+    box: {
+      display: "inline-block",
+      borderRadius: "6px",
+      backgroundColor: lightMode ? "rgb(210, 210, 210)" : "rgb(50, 50, 50)",
+      padding: theme.spacing(0.75),
+      marginRight: "auto",
+      margin: theme.spacing(1),
+      width: theme.spacing(16),
+      height: theme.spacing(11),
+    },
+    carouselContainer: {
+      position: 'relative',
+      height: '40px',
+      overflow: 'hidden',
+      textAlign: "center",
+    },
+    carouselItem: {
+      opacity: 0,
+      transform: 'translateX(100%)',
+      transition: 'opacity 0.5s ease, transform 0.5s ease',
+      position: 'absolute',
+      width: '100%',
+      overflow: "hidden",
+      // height: '100%',
+    },
+    active: {
+      opacity: 1,
+      transform: 'translateX(0)',
+    },
+    inactive: {
+      transform: 'translateX(-100%)',
+    },
+  })
+})
+
+export default function StatusDust(props: Props) {
+  const { device } = props;
+  const classes = useStyles()
+
+  const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
+  const messages = or(device.status.sen5x?.overlays.map(overlay => overlay.message), []);
+
+  const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
+  const [, setColorIndex] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setColorIndex(prevIndex => {
+        const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
+        setColor(colors[newIndex]); // Use the new index here
+        return newIndex;
+      });
+    }, 7500);
+    
+    return () => clearInterval(interval);
+  }, []);
+
+  // const [currentIndex, setCurrentIndex] = useState(0);
+
+  // Auto-cycle through measurements every 3 seconds
+  // useEffect(() => {
+  //   const interval = setInterval(() => {
+  //     setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
+  //   }, 3000); // Adjust timing as needed (3000ms = 3s)
+
+  //   return () => clearInterval(interval); // Cleanup on unmount
+  // }, []);
+
+  const tooltip = () => {
+    if (messages.length === 0) return null
+    if (messages.length < 2) return (
+      messages[0]
+    )
+    return (
+      <Grid2 container direction={"column"}>
+        <Grid2 container direction="row">
+          <Typography fontWeight={"bold"} variant="caption">
+            Overlay Messages
+          </Typography>
+        </Grid2>
+        {messages.map((message, index) => {
+          return (
+            <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignItems={"center"}>
+              <Box
+                sx={{
+                  width: 10, // Size of the square
+                  height: 10,
+                  backgroundColor: colors[index], // Passed color prop
+                  borderRadius: 1, // Optional: slight rounding, remove for sharp square
+                  border: "1px solid black",
+                }}
+              />
+              <Typography variant="caption" sx={{ marginLeft: 1 }}>
+                {message}
+              </Typography>
+            </Grid2>
+          )
+        })}
+      </Grid2>
+    )
+  }
+
+  return (
+    <Tooltip title={tooltip()}>
+      <PulseBox color={color} className={classes.box} >
+        <Grid2 container direction="column" >
+          <Grid2 container direction="column" 
+            className={`${classes.carouselItem} ${classes.active }`}
+          >
+            <Grid2>
+              <Typography variant="body2" style={{ color: green[300]}}>
+                {"<1um:"} {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
+              </Typography>
+            </Grid2>
+            <Grid2>
+              <Typography variant="body2" style={{ color: green[400]}}>
+                {"<2.5um:"} {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
+              </Typography>
+            </Grid2>
+            <Grid2>
+              <Typography variant="body2" style={{ color: green[500]}}>
+                {"<4um: "}{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
+              </Typography>
+            </Grid2>
+            <Grid2>
+              <Typography variant="body2" style={{ color: green[600]}}>
+                {"<10um: "}{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
+              </Typography>
+            </Grid2>
+          </Grid2>
+        </Grid2>
+      </PulseBox>
+    </Tooltip>
+  )
+}
\ No newline at end of file
diff --git a/src/common/StatusSen5x.tsx b/src/common/StatusSen5x.tsx
index 632709e..8d32f35 100644
--- a/src/common/StatusSen5x.tsx
+++ b/src/common/StatusSen5x.tsx
@@ -80,7 +80,6 @@ export default function StatusPlenum(props: Props) {
       return
     }
     const interval = setInterval(() => {
-      console.log(noDust)
       if (!noDust) setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
     }, 5000); 
 
diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index 562ca25..a394d18 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -123,7 +123,15 @@ export default function Devices() {
   const [groupSettingsIsOpen, setGroupSettingsIsOpen] = useState<boolean>(false);
 
   const [fieldContains, setFieldContains] = useState<Map<string, string>>(new Map<string, string>())
-  const [seperateDust, setSeperateDust] = useState(false)
+  
+  const [separateDust, setSeparateDust] = useState(() => {
+    const stored = localStorage.getItem('separateDust');
+    return stored !== null ? stored === 'true' : false;
+  });
+
+  useEffect(() => {
+    localStorage.setItem('separateDust', separateDust.toString());
+  }, [separateDust]);
 
   const [preferencesAnchor, setPreferencesAnchor] = useState<any>(null)
 
@@ -304,7 +312,6 @@ export default function Devices() {
   }
 
   const toDevice = (device: Device) => {
-
     let url = getGroup() ? insertGroupContext(getGroup().id().toString(), device.id().toString()) : ""
     if (url.length < 1) url = device.id().toString()
     navigate(url, { state: {device: device} })
@@ -406,7 +413,7 @@ export default function Devices() {
           if (device.status.sen5x?.temperature) {
             return (
               <Box sx={{ marginLeft: 1 }}>
-                <StatusSen5x device={device} noDust={seperateDust} />
+                <StatusSen5x device={device} noDust={separateDust} />
               </Box>
             )
           } else {
@@ -416,7 +423,7 @@ export default function Devices() {
           }
         }
       })
-      if (seperateDust) columns.push({
+      if (separateDust) columns.push({
         title: "Dust",
         render: (device: Device) => {
           if (device.status.sen5x?.temperature) {
@@ -544,13 +551,13 @@ export default function Devices() {
         onClose={() => setPreferencesAnchor(null)}
         disableAutoFocusItem>
           <MenuItem 
-            onClick={() => setSeperateDust(!seperateDust)}
+            onClick={() => setSeparateDust(!separateDust)}
             sx={{ marginLeft: -0.75 }}
             dense
           >
             <ListItemIcon>
               <Checkbox 
-                checked={seperateDust}
+                checked={separateDust}
               />
             </ListItemIcon>
             <ListItemText primary={"Seperate Dust"} />

From 6dc181b24cccdc087a83cbcefdef3e4c5b5f98b2 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Wed, 21 May 2025 13:49:00 -0600
Subject: [PATCH 12/29] status card for gas readings

---
 package-lock.json          |   4 +-
 package.json               |   2 +-
 src/common/StatusGas.tsx   | 162 +++++++++++++++++++++++++++++++++++++
 src/common/StatusSen5x.tsx |   2 +-
 src/pages/Devices.tsx      |  85 +++++++++++++++++++
 5 files changed, 251 insertions(+), 4 deletions(-)
 create mode 100644 src/common/StatusGas.tsx

diff --git a/package-lock.json b/package-lock.json
index e369745..a656312 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,7 @@
         "mui-tel-input": "^7.0.0",
         "notistack": "^3.0.1",
         "openweathermap-ts": "^1.2.10",
-        "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#master",
+        "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging",
         "react": "^18.3.1",
         "react-beautiful-dnd": "^13.1.1",
         "react-color": "^2.19.3",
@@ -10864,7 +10864,7 @@
     },
     "node_modules/protobuf-ts": {
       "version": "1.0.0",
-      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#f8704561c094b208029340cdf2ce0c510ef1eb12",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#cead0be8708fa2c6679c77ed38f51239341c4ed4",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }
diff --git a/package.json b/package.json
index 8e3ebd3..5a32392 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "mui-tel-input": "^7.0.0",
     "notistack": "^3.0.1",
     "openweathermap-ts": "^1.2.10",
-    "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#master",
+    "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging",
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-color": "^2.19.3",
diff --git a/src/common/StatusGas.tsx b/src/common/StatusGas.tsx
new file mode 100644
index 0000000..b0ebb85
--- /dev/null
+++ b/src/common/StatusGas.tsx
@@ -0,0 +1,162 @@
+import { Box, Grid2, Theme, Tooltip, Typography } from "@mui/material";
+import { blue, deepOrange, green, grey, orange, teal } from "@mui/material/colors";
+import { makeStyles } from "@mui/styles";
+import { Device } from "models";
+import PulseBox from "./PulseBox";
+import { or } from "utils";
+import { useEffect, useState } from "react";
+
+interface Props {
+  device: Device
+  // noDust?: boolean;
+  gasType: "co2" | "co" | "no2" | "o2" | "all"
+}
+
+const useStyles = makeStyles((theme: Theme) => {
+  const lightMode = theme.palette?.mode === "light";
+  return ({
+    box: {
+      display: "inline-block",
+      borderRadius: "6px",
+      backgroundColor: lightMode ? "rgb(210, 210, 210)" : "rgb(50, 50, 50)",
+      padding: theme.spacing(0.75),
+      marginRight: "auto",
+      margin: theme.spacing(1),
+      width: theme.spacing(14),
+      height: theme.spacing(6),
+    },
+    carouselContainer: {
+      position: 'relative',
+      height: '40px',
+      overflow: 'hidden',
+      textAlign: "center",
+    },
+    carouselItem: {
+      opacity: 0,
+      transform: 'translateX(100%)',
+      transition: 'opacity 0.5s ease, transform 0.5s ease',
+      position: 'absolute',
+      width: '100%',
+      overflow: "hidden",
+      // height: '100%',
+    },
+    active: {
+      opacity: 1,
+      transform: 'translateX(0)',
+    },
+    inactive: {
+      transform: 'translateX(-100%)',
+    },
+  })
+})
+
+export default function StatusGas(props: Props) {
+  const { device, gasType } = props;
+  const classes = useStyles()
+  // console.log(noDust)
+  // const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
+  // const messages = or(device.status.sen5x?.overlays.map(overlay => overlay.message), []);
+
+  // const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
+  // const [, setColorIndex] = useState(0)
+
+  // useEffect(() => {
+  //   const interval = setInterval(() => {
+  //     setColorIndex(prevIndex => {
+  //       const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
+  //       setColor(colors[newIndex]); // Use the new index here
+  //       return newIndex;
+  //     });
+  //   }, 7500);
+    
+  //   return () => clearInterval(interval);
+  // }, []);
+
+  // const [currentIndex, setCurrentIndex] = useState(0);
+
+  // Auto-cycle through measurements every 5 seconds
+  // useEffect(() => {
+    // if (noDust) {
+    //   setCurrentIndex(0)
+    //   return
+    // }
+    // const interval = setInterval(() => {
+      // if (!noDust) setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
+      // setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
+    // }, 5000); 
+
+    // return () => clearInterval(interval); // Cleanup on unmount
+  // }, [noDust]);
+
+  // const tooltip = () => {
+  //   if (messages.length === 0) return null
+  //   if (messages.length < 2) return (
+  //     messages[0]
+  //   )
+  //   return (
+  //     <Grid2 container direction={"column"}>
+  //       <Grid2 container direction="row">
+  //         <Typography fontWeight={"bold"} variant="caption">
+  //           Overlay Messages
+  //         </Typography>
+  //       </Grid2>
+  //       {messages.map((message, index) => {
+  //         return (
+  //           <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignItems={"center"}>
+  //             <Box
+  //               sx={{
+  //                 width: 10, // Size of the square
+  //                 height: 10,
+  //                 backgroundColor: colors[index], // Passed color prop
+  //                 borderRadius: 1, // Optional: slight rounding, remove for sharp square
+  //                 border: "1px solid black",
+  //               }}
+  //             />
+  //             <Typography variant="caption" sx={{ marginLeft: 1 }}>
+  //               {message}
+  //             </Typography>
+  //           </Grid2>
+  //         )
+  //       })}
+  //     </Grid2>
+  //   )
+  // }
+
+  const gasDisplay = () => {
+    if (gasType !== "all") {
+      return(
+        // <Tooltip title={tooltip()}>
+          <PulseBox color="" className={classes.box} >
+            <Grid2 container direction="column" >
+              <Grid2 container direction="column">
+                <Grid2>
+                  {gasType !== "o2" ? 
+                    <Typography variant="body2" style={{ color: teal[500]}}>
+                      Gas: {device.status[gasType]?.ppm.toFixed(1)}ppm
+                    </Typography>
+                  :
+                    <Typography variant="body2" style={{ color: blue[500]}}>
+                      Gas: {(device.status[gasType]?.ppm!/10000).toFixed(1)}%
+                    </Typography>
+                  }
+                </Grid2>
+                <Grid2>
+                  <Typography variant="body2" style={{ color: deepOrange[800]}}>
+                    Volt: {device.status[gasType]?.millivolts.toFixed(1)}mV
+                  </Typography>
+                </Grid2>
+              </Grid2>
+            </Grid2>
+          </PulseBox>
+        // </Tooltip>
+      )
+      
+    }
+  }
+
+  return (
+    <>
+      {gasDisplay()}
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/common/StatusSen5x.tsx b/src/common/StatusSen5x.tsx
index 8d32f35..288eb10 100644
--- a/src/common/StatusSen5x.tsx
+++ b/src/common/StatusSen5x.tsx
@@ -49,7 +49,7 @@ const useStyles = makeStyles((theme: Theme) => {
   })
 })
 
-export default function StatusPlenum(props: Props) {
+export default function StatusSen5x(props: Props) {
   const { device, noDust } = props;
   const classes = useStyles()
   // console.log(noDust)
diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index a394d18..dcd2c1c 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -25,6 +25,7 @@ import moment from "moment";
 import StatusPlenum from "common/StatusPlenum";
 import StatusSen5x from "common/StatusSen5x";
 import StatusDust from "common/StatusDust";
+import StatusGas from "common/StatusGas";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -101,6 +102,10 @@ export default function Devices() {
   const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState<boolean>(false);
   const [hasPlenums, setHasPlenums] = useState(false)
   const [hasSen5x, setHasSen5x] = useState(false)
+  const [hasCo, setHasCo] = useState(false)
+  const [hasCo2, setHasCo2] = useState(false)
+  const [hasNo2, setHasNo2] = useState(false)
+  const [hasO2, setHasO2] = useState(false)
 
   const [groupsLoading, setGroupsLoading] = useState(false)
   const [groups, setGroups] = useState<Group[]>([]);
@@ -264,6 +269,10 @@ export default function Devices() {
       resp.data.devices.forEach(device => {
         if (device.status?.plenum?.temperature) setHasPlenums(true)
         if (device.status?.sen5x?.temperature) setHasSen5x(true)
+        if (device.status?.o2) setHasO2(true)
+        if (device.status?.co) setHasCo(true)
+        if (device.status?.co2) setHasCo2(true)
+        if (device.status?.no2) setHasNo2(true)
         newDevices.push(Device.create(device))
       })
       setDevices(newDevices)
@@ -311,6 +320,10 @@ export default function Devices() {
     return '/' + newSegments.join('/');
   }
 
+  useEffect(() => {
+    console.log(devices)
+  }, [devices])
+
   const toDevice = (device: Device) => {
     let url = getGroup() ? insertGroupContext(getGroup().id().toString(), device.id().toString()) : ""
     if (url.length < 1) url = device.id().toString()
@@ -440,6 +453,78 @@ export default function Devices() {
         }
       })
     }
+    if (hasCo) {
+      columns.push({
+        title: "CO",
+        render: (device: Device) => {
+          if (device.status.co) {
+            return (
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusGas device={device} gasType={"co"}/>
+              </Box>
+            )
+          } else {
+            return (
+              <></>
+            )
+          }
+        }
+      })
+    }
+    if (hasCo2) {
+      columns.push({
+        title: "CO2",
+        render: (device: Device) => {
+          if (device.status.co2) {
+            return (
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusGas device={device} gasType={"co2"}/>
+              </Box>
+            )
+          } else {
+            return (
+              <></>
+            )
+          }
+        }
+      })
+    }
+    if (hasNo2) {
+      columns.push({
+        title: "NO2",
+        render: (device: Device) => {
+          if (device.status.no2) {
+            return (
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusGas device={device} gasType={"no2"}/>
+              </Box>
+            )
+          } else {
+            return (
+              <></>
+            )
+          }
+        }
+      })
+    }
+    if (hasCo2) {
+      columns.push({
+        title: "O2",
+        render: (device: Device) => {
+          if (device.status.o2) {
+            return (
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusGas device={device} gasType={"o2"}/>
+              </Box>
+            )
+          } else {
+            return (
+              <></>
+            )
+          }
+        }
+      })
+    }
     return columns
   }
 

From f39c0d1102b9b50bd1a899ecc59084eebcc5f4f6 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Thu, 22 May 2025 13:31:37 -0600
Subject: [PATCH 13/29] updated the platform stuff to include the ethernet blue
 board

---
 package-lock.json                |  4 ++--
 package.json                     |  2 +-
 src/firmware/UploadFirmware.tsx  |  6 +++++-
 src/models/Device.ts             |  6 +++++-
 src/pages/DeviceSupport.tsx      |  3 +++
 src/pbHelpers/Connectivity.tsx   |  2 ++
 src/pbHelpers/DevicePlatform.tsx | 16 ++++++++++++++--
 7 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e369745..64aa39b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,7 @@
         "mui-tel-input": "^7.0.0",
         "notistack": "^3.0.1",
         "openweathermap-ts": "^1.2.10",
-        "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#master",
+        "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging",
         "react": "^18.3.1",
         "react-beautiful-dnd": "^13.1.1",
         "react-color": "^2.19.3",
@@ -10864,7 +10864,7 @@
     },
     "node_modules/protobuf-ts": {
       "version": "1.0.0",
-      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#f8704561c094b208029340cdf2ce0c510ef1eb12",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#3f9a71a350651fb151d18514f990794f62a8e0cc",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }
diff --git a/package.json b/package.json
index 8e3ebd3..5a32392 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "mui-tel-input": "^7.0.0",
     "notistack": "^3.0.1",
     "openweathermap-ts": "^1.2.10",
-    "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#master",
+    "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging",
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-color": "^2.19.3",
diff --git a/src/firmware/UploadFirmware.tsx b/src/firmware/UploadFirmware.tsx
index d985f7a..aa5aa41 100644
--- a/src/firmware/UploadFirmware.tsx
+++ b/src/firmware/UploadFirmware.tsx
@@ -79,7 +79,8 @@ class UploadFirmware extends React.Component<Props, State> {
       pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLACK,
       pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_GREEN,
       pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLUE,
-      pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_BLUE
+      pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_BLUE,
+      pond.DevicePlatform.DEVICE_PLATFORM_V2_ETHERNET_BLUE
     ].includes(platform);
     var isChannelValid = [
       pond.UpgradeChannel.UPGRADE_CHANNEL_ALPHA,
@@ -229,6 +230,9 @@ class UploadFirmware extends React.Component<Props, State> {
             </MenuItem>
             <MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_BLUE}>
               V2 Wifi Blue
+            </MenuItem>            
+            <MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_ETHERNET_BLUE}>
+              V2 Ethernet Blue
             </MenuItem>
           </TextField>
           <TextField
diff --git a/src/models/Device.ts b/src/models/Device.ts
index b99510e..b201407 100644
--- a/src/models/Device.ts
+++ b/src/models/Device.ts
@@ -14,6 +14,7 @@ interface FeatureVersionByPlatform {
   v2CellGreen: string;
   v2WifiBlue: string;
   v2CellBlue: string;
+  v2EthBlue: string;
 }
 
 const featureVersions: Map<string, FeatureVersionByPlatform> = new Map([
@@ -29,7 +30,8 @@ const featureVersions: Map<string, FeatureVersionByPlatform> = new Map([
       v2CellBlack: "2.0.44",
       v2CellGreen: "2.0.44",
       v2WifiBlue: "2.0.44",
-      v2CellBlue: "2.0.44"
+      v2CellBlue: "2.0.44",
+      v2EthBlue: "2.0.44"
     }
   ]
 ]);
@@ -118,6 +120,8 @@ export class Device {
         return this.status.firmwareVersion >= versions.v2WifiBlue;
       case pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLUE:
         return this.status.firmwareVersion >= versions.v2CellBlue;
+      case pond.DevicePlatform.DEVICE_PLATFORM_V2_ETHERNET_BLUE:
+        return this.status.firmwareVersion >= versions.v2EthBlue;
       default:
         return false;
     }
diff --git a/src/pages/DeviceSupport.tsx b/src/pages/DeviceSupport.tsx
index 20bf476..a6a19de 100644
--- a/src/pages/DeviceSupport.tsx
+++ b/src/pages/DeviceSupport.tsx
@@ -301,6 +301,9 @@ export default function DeviceSupport() {
 									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLUE}>
 										V2 Cellular Blue
 									</MenuItem>
+									<MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_V2_ETHERNET_BLUE}>
+										V2 Ethernet Blue
+									</MenuItem>
 								</Select>
 							</FormControl>
 							<Button color="primary" onClick={() => updateDevicePlatform(platform)}>
diff --git a/src/pbHelpers/Connectivity.tsx b/src/pbHelpers/Connectivity.tsx
index 3a6795d..17da3bc 100644
--- a/src/pbHelpers/Connectivity.tsx
+++ b/src/pbHelpers/Connectivity.tsx
@@ -73,6 +73,8 @@ function getTooltip(platform: pond.DevicePlatform): string {
     case pond.DevicePlatform.DEVICE_PLATFORM_PHOTON ||
       pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_S3:
       return "Communicates via Wi-Fi";
+    case pond.DevicePlatform.DEVICE_PLATFORM_V2_ETHERNET_BLUE:
+      return "Communicates view Ethernet"
     default:
       return "";
   }
diff --git a/src/pbHelpers/DevicePlatform.tsx b/src/pbHelpers/DevicePlatform.tsx
index 319f82b..6090265 100644
--- a/src/pbHelpers/DevicePlatform.tsx
+++ b/src/pbHelpers/DevicePlatform.tsx
@@ -4,7 +4,9 @@ import {
   SignalCellular4Bar,
   SignalWifi4Bar,
   SignalCellularOff,
-  SignalWifiOff
+  SignalWifiOff,
+  Cable,
+  DoNotDisturb
 } from "@mui/icons-material";
 import { pond } from "protobuf-ts/pond";
 
@@ -98,6 +100,15 @@ const V2_Wifi_Blue: DevicePlatformDescriber = {
   platformName: "v2wifiblue"
 };
 
+const V2_Ethernet_Blue: DevicePlatformDescriber = {
+  platform: pond.DevicePlatform.DEVICE_PLATFORM_V2_ETHERNET_BLUE,
+  label: "V2 Ethernet Blue",
+  description: "Communicates via ethernet",
+  icon: <Cable style={{ color: "#fff" }} />,
+  offlineIcon: <DoNotDisturb style={{ color: "#fff" }} />,
+  platformName: "v2ethernetblue"
+};
+
 const map = new Map<pond.DevicePlatform, DevicePlatformDescriber>([
   [pond.DevicePlatform.DEVICE_PLATFORM_INVALID, Default],
   [pond.DevicePlatform.DEVICE_PLATFORM_PHOTON, Photon],
@@ -107,7 +118,8 @@ const map = new Map<pond.DevicePlatform, DevicePlatformDescriber>([
   [pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLACK, V2_Cell_Black],
   [pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_GREEN, V2_Cell_Green],
   [pond.DevicePlatform.DEVICE_PLATFORM_V2_CELLULAR_BLUE, V2_Cell_Blue],
-  [pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_BLUE, V2_Wifi_Blue]
+  [pond.DevicePlatform.DEVICE_PLATFORM_V2_WIFI_BLUE, V2_Wifi_Blue],
+  [pond.DevicePlatform.DEVICE_PLATFORM_V2_ETHERNET_BLUE, V2_Ethernet_Blue]
 ]);
 
 export function getDevicePlatformDescriber(platform: pond.DevicePlatform): DevicePlatformDescriber {

From 0223354f54d5c7da6502523eadc724af3dd10299 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 11:22:32 -0600
Subject: [PATCH 14/29] re-added the product types and svgs for MiVent and
 Streamline

---
 src/device/deviceSVG.tsx                  | 931 ++++++++++++++++++++++
 src/products/Bindapt/BindaptDescriber.ts  |  32 +
 src/products/DeviceProduct.ts             |  11 +-
 src/products/MiVent/MiVentAvailability.ts |  61 ++
 src/products/MiVent/MiVentDescriber.ts    |  29 +
 5 files changed, 1062 insertions(+), 2 deletions(-)
 create mode 100644 src/products/MiVent/MiVentAvailability.ts
 create mode 100644 src/products/MiVent/MiVentDescriber.ts

diff --git a/src/device/deviceSVG.tsx b/src/device/deviceSVG.tsx
index d6399f7..e279268 100644
--- a/src/device/deviceSVG.tsx
+++ b/src/device/deviceSVG.tsx
@@ -5204,6 +5204,933 @@ export default function DeviceSVG(props: Props) {
     );
   };
 
+  const streamlineMonitorSVG = () => {
+    return (
+      <svg id="streamlineMonitor" version="1.1" viewBox="0 0 224.2 224.2">
+        <g>
+          <rect
+            className={classes.boxBorder}
+            x="4.5"
+            y=".5"
+            width="214.5"
+            height="222.6"
+            rx="10.7"
+            ry="10.7"
+          />
+          <path
+            className={classes.grayLine}
+            d="M216,122.9l-21.6-13.4c-2.5-1.6-5.7-1.6-8.3,0l-21.6,13.4c-2.3,1.4-3.7,3.9-3.7,6.7v6l-4.5-2.8c-2.3-1.4-5.1-1.4-7.3,0l-18.9,11.7c-2.1,1.3-3.3,3.5-3.3,5.9v6l-4.8-3c-2.1-1.3-4.6-1.3-6.7,0l-17,10.5c-1.9,1.2-3,3.2-3,5.4v54.3h5.1v-2.5c0-1.3,1-2.3,2.3-2.3h11.1c1.3,0,2.3,1,2.3,2.3v2.5h5.1v-2.5c0-1.3,1-2.3,2.3-2.3h3.3v4.8h5.5v-4.8h2.3c1.3,0,2.3,1,2.3,2.3v2.5h5.1v-18.3h5.3c1.5,0,2.6,1.2,2.6,2.6v15.6h5.5v-15.6c0-1.5,1.2-2.6,2.6-2.6h2.8v18.3h6.1v-18.3h3.5c1.5,0,2.6,1.2,2.6,2.6v15.6h5.5v-31.4h5.6c1.7,0,3.1,1.4,3.1,3.1v28.3h6.1v-28.3c0-1.7,1.4-3.1,3.1-3.1h14.1c1.7,0,3.1,1.4,3.1,3.1v26.9l2.2-1.5.4-.3c.2-.2.4-.4.6-.7v-.2c.6-.7,1.1-1.5,1.5-2.2.4-.8.8-1.5,1.3-2.1v-.2c.1,0,.1-85.4.1-85.4,0-2.7-1.4-5.2-3.7-6.7ZM123.3,217.4c-2.1,0-3.8,1.7-3.8,3.8v1.1h-2.2v-1.1c0-2.1-1.7-3.8-3.8-3.8h-11.1c-2.1,0-3.8,1.7-3.8,3.8v1.1h-2.2v-52.8c0-1.7.9-3.2,2.3-4.1l17-10.5c1.6-1,3.5-1,5.1,0l5.6,3.5v59.2h-3.3ZM140.4,222.2h-2.2v-1.1c0-2.1-1.7-3.8-3.8-3.8h-2.3v-9.3c0-1.5,1.2-2.6,2.6-2.6h5.6v16.8ZM158,203.9c-2.3,0-4.1,1.8-4.1,4.1v14.1h-2.6v-14.1c0-2.3-1.8-4.1-4.1-4.1h-12.3c-2.3,0-4.1,1.8-4.1,4.1v14.1h-2.6v-71.7c0-1.9,1-3.7,2.6-4.7l18.9-11.7c1.8-1.1,4-1.1,5.8,0l5.3,3.3v66.6h-2.8ZM177,222.2h-2.6v-14.1c0-2.3-1.8-4.1-4.1-4.1h-3.5v-8.6c0-1.7,1.4-3.1,3.1-3.1h7v30ZM218.2,214.6c-.5.7-.9,1.4-1.3,2.1-.4.7-.8,1.4-1.3,2.1h-.1c-.1.3-.3.5-.5.6h0c0,0,0-24,0-24,0-2.5-2.1-4.6-4.6-4.6h-14.1c-2.5,0-4.6,2.1-4.6,4.6v26.8h-3.1v-26.8c0-2.5-2.1-4.6-4.6-4.6h-14.1c-2.5,0-4.6,2.1-4.6,4.6v26.8h-3.1v-92.6c0-2.2,1.1-4.3,3-5.4l21.6-13.4c2.1-1.3,4.6-1.3,6.7,0l21.6,13.4c1.9,1.2,3,3.2,3,5.4v85Z"
+          />
+          <g>
+            <path
+              className={classes.whiteLine}
+              d="M63.3,202.8l-.8.8c.7.7,1,1.5,1,2.5s-.4,1.8-1,2.5c-1.4,1.4-3.6,1.4-4.9,0-1.4-1.4-1.4-3.6,0-4.9l-.8-.8c-1.8,1.8-1.8,4.8,0,6.6.9.9,2.1,1.4,3.3,1.4s2.4-.5,3.3-1.4c.9-.9,1.4-2,1.4-3.3s-.5-2.4-1.4-3.3Z"
+            />
+            <rect className={classes.whiteLine} x="59.4" y="201.2" width="1.2" height="5.5" />
+          </g>
+          <g>
+            <g>
+              <path
+                className={classes.whiteLine}
+                d="M17.8,77.5l3.1-.6v6.5h-1.5v-4.9l-1.6.4v-1.3Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M20.2,116.3c.2-.2.3-.4.4-.5.1-.2.2-.3.3-.5,0-.1,0-.3,0-.5s0-.2,0-.3c0,0,0-.2-.2-.3s-.2-.1-.3-.2c-.1,0-.2,0-.4,0s-.4,0-.5.1c-.1,0-.3.2-.3.4,0,.2-.1.4-.1.6h-1.5c0-.5,0-.9.3-1.2.2-.4.5-.7.9-.9.4-.2.8-.3,1.4-.3s.7,0,1,.2c.3.1.6.3.8.5.2.2.4.4.5.7s.2.5.2.7c0,.3,0,.7-.3,1s-.4.6-.7.8l-1.5,1.3h2.6v1.4h-5.4l2.8-2.9Z"
+              />
+            </g>
+            <g>
+              <path
+                className={classes.whiteLine}
+                d="M20.7,38.1c-3.5,0-6.3,2.8-6.3,6.3s2.8,6.3,6.3,6.3,6.3-2.8,6.3-6.3-2.8-6.3-6.3-6.3ZM20.7,48.3c-2.2,0-4-1.8-4-4s1.8-4,4-4,4,1.8,4,4-1.8,4-4,4Z"
+              />
+              <circle className={classes.whiteLine} cx="20.7" cy="44.3" r="2.3" />
+            </g>
+          </g>
+          <g>
+            <path
+              className={classes.whiteLine}
+              d="M188,153.2c0-2.8-1.1-5.3-3-7.3-.8-.8-2-.8-2.8,0-.8.8-.8,2,0,2.8,1.2,1.2,1.9,2.8,1.9,4.5s-.7,3.3-1.9,4.5c-.4.4-.6.9-.6,1.4s.2,1,.6,1.4c.8.8,2,.8,2.8,0,1.9-1.9,3-4.5,3-7.3ZM194.4,153.2c0-4.5-1.7-8.7-4.9-11.8-.8-.8-2-.8-2.8,0-.8.8-.8,2,0,2.8,2.4,2.4,3.8,5.6,3.8,9.1s-1.3,6.6-3.8,9.1c-.4.4-.6.9-.6,1.4s.2,1,.6,1.4c.8.8,2,.8,2.8,0,3.2-3.2,4.9-7.4,4.9-11.8ZM194.1,169.6c4.4-4.4,6.8-10.2,6.8-16.4s-2.4-12-6.8-16.4c-.8-.8-2-.8-2.8,0-.4.4-.6.9-.6,1.4s.2,1,.6,1.4c3.6,3.6,5.6,8.5,5.6,13.6s-2,10-5.6,13.6c-.8.8-.8,2,0,2.8.8.8,2,.8,2.8,0Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M179.5,148.8c-.6-.6-1.8-.6-2.4,0-.7.7-.7,1.7,0,2.4.5.5.8,1.2.8,2s-.3,1.5-.8,2c-.3.3-.5.8-.5,1.2s.2.9.5,1.2c.3.3.8.5,1.2.5s.9-.2,1.2-.5c1.2-1.2,1.8-2.7,1.8-4.4s-.6-3.2-1.8-4.4Z"
+            />
+          </g>
+          <g>
+            <g>
+              <g>
+                <path
+                  className={classes.whiteLine}
+                  d="M128.5,103.6v.9c0,.4.3.8.7.8v.9h.2v-.9c.4,0,.7-.4.7-.8v-.9l-.8.7-.8-.7ZM129.9,104.6c0,.3-.2.6-.5.6v-.3h-.2v.3c-.3,0-.5-.3-.5-.6v-.5l.6.5.6-.5v.5Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M128.5,102.2v.9c0,.5.4.8.8.8s.8-.4.8-.8v-.9l-.8.7-.8-.7ZM129.9,103.1c0,.3-.2.6-.5.6v-.3h-.2v.3c-.3,0-.5-.3-.5-.6v-.5l.6.5.6-.5v.5Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M128.5,100.7v.9c0,.5.4.8.8.8s.8-.4.8-.8v-.9l-.8.7-.8-.7ZM129.9,101.7c0,.3-.2.6-.5.6v-.3h-.2v.3c-.3,0-.5-.3-.5-.6v-.5l.6.5.6-.5v.5Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M129.3,101.1h0s0,0,0,0c0,0,.4,0,.5-.3.1-.3,0-.6-.4-1.1h0c0,0,0,0,0,0-.4.5-.5.8-.4,1.1.1.3.5.3.5.3ZM129.3,99.9c.3.4.4.7.3.8,0,.1-.1.2-.2.2v-.3h-.2v.3c0,0-.2,0-.2-.2,0-.1,0-.4.3-.8Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M144,103.4h-2.5v1c-.2.1-.5.2-.8.2-.9,0-1.7-.8-1.7-1.7s.8-1.7,1.7-1.7,1.7.7,1.7,1.6h1.6c0-1.8-1.5-3.3-3.3-3.3s-2.8,1-3.2,2.5c-.4-1.4-1.7-2.5-3.2-2.5s-3.3,1.5-3.3,3.3,1.5,3.3,3.3,3.3,1.2-.2,1.7-.5v.5h1.6v-2.1c.5,1.2,1.7,2.1,3.1,2.1s1.2-.2,1.7-.5v.5h1.6v-2.9h0ZM134.2,104.6c-.9,0-1.7-.8-1.7-1.7s.8-1.7,1.7-1.7,1.7.8,1.7,1.7-.8,1.7-1.7,1.7Z"
+                />
+              </g>
+              <g>
+                <path
+                  className={classes.whiteLine}
+                  d="M146.9,102.6l-.3-.6h-.9l-.3.6h-.4l1.2-2.5,1.1,2.5h-.4ZM145.9,101.7h.7l-.2-.5s0,0,0-.1c0,0,0,0,0-.2,0,0,0,.1,0,.1,0,0,0,0,0,.1l-.2.5Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M148.1,102.6v-2.4h.5c.3,0,.6,0,.7,0,.1,0,.3,0,.4.2.1.1.2.2.3.4,0,.2.1.4.1.6s0,.4-.1.6c0,.2-.2.3-.3.4-.1,0-.2.1-.4.2-.1,0-.3,0-.6,0h-.6ZM148.5,102.3h.3c.2,0,.3,0,.4,0,0,0,.2,0,.2-.1,0,0,.2-.2.2-.3,0-.1,0-.2,0-.4s0-.3,0-.4c0-.1-.1-.2-.2-.3,0,0-.1,0-.2-.1,0,0-.2,0-.4,0h-.3v1.7Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M152.6,102.6l-.3-.6h-.9l-.3.6h-.4l1.2-2.5,1.1,2.5h-.4ZM151.5,101.7h.7l-.2-.5s0,0,0-.1c0,0,0,0,0-.2,0,0,0,.1,0,.1,0,0,0,0,0,.1l-.2.5Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M154.1,101.6v1.1h-.4v-2.4h.6c.2,0,.3,0,.4,0,0,0,.2,0,.2,0,0,0,.1.1.2.2,0,0,0,.2,0,.3s0,.2,0,.3c0,0-.1.2-.2.2,0,0-.1,0-.2,0,0,0-.2,0-.4,0h-.2ZM154.1,101.3h0c.2,0,.4,0,.4,0s.1-.1.1-.2,0-.2-.1-.3c0,0-.2,0-.4,0h0v.7Z"
+                />
+                <path className={classes.whiteLine} d="M156.8,100.6v2h-.4v-2h-.6v-.3h1.6v.3h-.6Z" />
+                <path className={classes.whiteLine} d="M158.3,102.6v-2.4h.4v2.4h-.4Z" />
+                <path
+                  className={classes.whiteLine}
+                  d="M160.5,102.7l-1.1-2.5h.4l.5,1.3c0,0,0,.1,0,.2,0,0,0,.1,0,.2,0,0,0-.1,0-.2,0,0,0-.1,0-.2l.5-1.3h.4l-1.1,2.5Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M162.3,102.6v-2.4h1.3v.3h-.9v.6h.9v.3h-.9v.8h.9v.3h-1.3Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M146.9,106.2l-.3-.6h-.9l-.3.6h-.4l1.2-2.5,1.1,2.5h-.4ZM145.9,105.2h.7l-.2-.5s0,0,0-.1c0,0,0,0,0-.2,0,0,0,.1,0,.1,0,0,0,0,0,.1l-.2.5Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M149.3,105h.9s0,0,0,0c0,0,0,.1,0,.2,0,.3,0,.6-.3.8s-.5.3-.8.3-.4,0-.5,0c-.2,0-.3-.1-.4-.3-.1-.1-.2-.2-.3-.4,0-.2,0-.3,0-.5s0-.3,0-.5c0-.2.2-.3.3-.4.1-.1.3-.2.4-.3.2,0,.3,0,.5,0s.4,0,.5.1c.1,0,.3.2.4.3l-.3.2c0,0-.2-.2-.3-.2-.1,0-.2,0-.3,0-.3,0-.5,0-.6.2-.2.2-.2.4-.2.6s0,.5.2.7c.2.2.4.3.6.3s.4,0,.5-.2c.1-.1.2-.2.2-.4h0s-.6,0-.6,0v-.3Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M151.6,105.1v1.1h-.4v-2.4h.5c.2,0,.3,0,.4,0,0,0,.2,0,.2.1,0,0,.1.1.2.2,0,0,0,.2,0,.3,0,.2,0,.3-.1.4,0,.1-.2.2-.4.2l.8,1.1h-.4l-.8-1.1h0ZM151.6,104.8h0c.2,0,.3,0,.4,0,0,0,.1-.1.1-.3s0-.2-.1-.3c0,0-.2,0-.4,0h0v.7Z"
+                />
+                <path className={classes.whiteLine} d="M153.6,106.2v-2.4h.4v2.4h-.4Z" />
+                <path
+                  className={classes.whiteLine}
+                  d="M157,104.4c-.1,0-.2-.2-.3-.2-.1,0-.2,0-.4,0-.3,0-.5,0-.6.2-.2.2-.2.4-.2.6s0,.5.2.6c.2.2.4.2.6.2s.3,0,.4,0c.1,0,.2-.1.4-.2v.4c-.1,0-.2.1-.3.2-.1,0-.3,0-.4,0s-.3,0-.5,0-.3-.1-.4-.3c-.1-.1-.2-.2-.3-.4,0-.2,0-.3,0-.5s0-.3,0-.5c0-.2.2-.3.3-.4.1-.1.3-.2.4-.3.2,0,.3,0,.5,0s.3,0,.4,0,.2.1.4.2v.4Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M158,103.8h.4v1.4c0,.2,0,.4.1.5,0,.1.2.2.4.2s.3,0,.4-.2c0-.1.1-.3.1-.5v-1.4h.4v1.5c0,.3,0,.6-.2.7-.2.2-.4.2-.7.2s-.6,0-.7-.2c-.2-.2-.2-.4-.2-.7v-1.5Z"
+                />
+                <path className={classes.whiteLine} d="M161,106.2v-2.4h.4v2h.9v.3h-1.2Z" />
+                <path className={classes.whiteLine} d="M163.7,104.1v2h-.4v-2h-.6v-.3h1.6v.3h-.6Z" />
+                <path
+                  className={classes.whiteLine}
+                  d="M165.1,103.8h.4v1.4c0,.2,0,.4.1.5,0,.1.2.2.4.2s.3,0,.4-.2c0-.1.1-.3.1-.5v-1.4h.4v1.5c0,.3,0,.6-.2.7s-.4.2-.7.2-.6,0-.7-.2c-.2-.2-.2-.4-.2-.7v-1.5Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M168.5,105.1v1.1h-.4v-2.4h.5c.2,0,.3,0,.4,0,0,0,.2,0,.2.1,0,0,.1.1.2.2,0,0,0,.2,0,.3,0,.2,0,.3-.1.4,0,.1-.2.2-.4.2l.8,1.1h-.4l-.8-1.1h0ZM168.5,104.8h0c.2,0,.3,0,.4,0,0,0,.1-.1.1-.3s0-.2-.1-.3c0,0-.2,0-.4,0h0v.7Z"
+                />
+                <path
+                  className={classes.whiteLine}
+                  d="M170.5,106.2v-2.4h1.3v.3h-.9v.6h.9v.3h-.9v.8h.9v.3h-1.3Z"
+                />
+              </g>
+            </g>
+            <g>
+              <path
+                className={classes.whiteLine}
+                d="M100.4,99.1v3h-.6v-3h.6ZM99.9,100.3h2.2v.6h-2.2v-.6ZM102.4,99.1v3h-.6v-3h.6Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M103.4,101.7s0,0,.1,0c0,0,.1,0,.2,0s.2,0,.2,0c0,0,.1,0,.2-.2,0,0,0-.2,0-.2v.3c0,.1,0,.2,0,.3s-.2.2-.3.2c-.1,0-.2,0-.3,0s-.2,0-.3,0c-.1,0-.2-.1-.3-.2,0,0,0-.2,0-.3,0-.2,0-.3.2-.5.1-.1.3-.2.6-.2s.2,0,.3,0c0,0,.2,0,.2,0,0,0,.1,0,.1.1v.3c0,0-.2-.1-.3-.1,0,0-.2,0-.3,0s-.2,0-.2,0c0,0,0,0-.1,0,0,0,0,0,0,.1s0,.1,0,.1ZM103,100.4c.1,0,.2-.1.4-.2s.3,0,.5,0,.3,0,.5,0c.1,0,.2.1.3.2,0,0,.1.2.1.3v1.4h-.5v-1.3c0,0,0-.1,0-.1,0,0,0,0,0,0,0,0,0,0-.1,0,0,0-.1,0-.2,0,0,0-.2,0-.3,0,0,0-.2,0-.2,0,0,0-.1,0-.1,0l-.2-.4Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M105.8,102.2h-.6v-2h.6v2ZM106.3,100.7s0,0-.1,0-.1,0-.2,0c0,0,0,0-.1.2,0,0,0,.2,0,.2l-.2-.2c0-.2,0-.3,0-.4,0-.1.1-.2.2-.3,0,0,.2-.1.3-.1s.1,0,.2,0c0,0,.1,0,.2.1l-.3.5s0,0-.1,0Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M107,100.6c0-.2.2-.3.4-.4.1,0,.3-.1.5-.1s.3,0,.4.1c.1,0,.2.2.3.4s.1.3.1.6,0,.4-.1.6-.2.3-.3.4c-.1,0-.3.1-.4.1s-.3,0-.5-.1c-.1,0-.3-.2-.4-.4,0-.2-.1-.3-.1-.6s0-.4.1-.6ZM107.5,101.5c0,0,.1.2.2.2,0,0,.2,0,.3,0s.2,0,.2,0c0,0,.1-.1.2-.2,0,0,0-.2,0-.3s0-.2,0-.3c0,0-.1-.2-.2-.2,0,0-.2,0-.2,0s-.2,0-.3,0c0,0-.2.1-.2.2,0,0,0,.2,0,.3s0,.2,0,.3ZM109,98.8v3.4h-.6v-3.4h.6Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M109.9,100.2l.4,1.1.6-1.3.6,1.3.4-1.1h.6l-1,2.1-.6-1.3-.6,1.3-1-2.1h.6Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M113.2,101.7s0,0,.1,0c0,0,.1,0,.2,0s.2,0,.2,0c0,0,.1,0,.2-.2,0,0,0-.2,0-.2v.3c0,.1,0,.2,0,.3s-.2.2-.3.2c-.1,0-.2,0-.3,0s-.2,0-.3,0c-.1,0-.2-.1-.3-.2,0,0,0-.2,0-.3,0-.2,0-.3.2-.5.1-.1.3-.2.6-.2s.2,0,.3,0c0,0,.2,0,.2,0,0,0,.1,0,.1.1v.3c0,0-.2-.1-.3-.1,0,0-.2,0-.3,0s-.2,0-.2,0c0,0,0,0-.1,0,0,0,0,0,0,.1s0,.1,0,.1ZM112.7,100.4c.1,0,.2-.1.4-.2s.3,0,.5,0,.3,0,.5,0c.1,0,.2.1.3.2,0,0,.1.2.1.3v1.4h-.5v-1.3c0,0,0-.1,0-.1,0,0,0,0,0,0,0,0,0,0-.1,0,0,0-.1,0-.2,0,0,0-.2,0-.3,0,0,0-.2,0-.2,0,0,0-.1,0-.1,0l-.2-.4Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M115.6,102.2h-.6v-2h.6v2ZM116,100.7s0,0-.1,0-.1,0-.2,0c0,0,0,0-.1.2,0,0,0,.2,0,.2l-.2-.2c0-.2,0-.3,0-.4,0-.1.1-.2.2-.3,0,0,.2-.1.3-.1s.1,0,.2,0c0,0,.1,0,.2.1l-.3.5s0,0-.1,0Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M117,102.1c-.2,0-.3-.2-.4-.4,0-.2-.1-.3-.1-.5s0-.4.1-.6c0-.2.2-.3.4-.4.2,0,.4-.1.6-.1s.4,0,.6.1.3.2.4.3.1.3.1.5,0,0,0,0c0,0,0,0,0,0h-1.8v-.3h1.3l-.2.2s0,0,0,0c0,0,0,0,0,0,0,0,0-.2,0-.3,0,0,0-.1-.2-.2,0,0-.1,0-.2,0s-.2,0-.3,0c0,0-.1.1-.2.2,0,0,0,.2,0,.3,0,.1,0,.2,0,.3,0,0,0,.2.2.2,0,0,.2,0,.3,0s.2,0,.3,0,.2-.1.2-.2l.5.2c-.1.2-.2.3-.4.4-.2,0-.4.1-.6.1s-.4,0-.6-.1Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M120.9,102.2h-.6v-3.4h.6v3.4ZM122.4,101.7c0,.2-.2.3-.4.4s-.3.1-.5.1-.3,0-.4-.1c-.1,0-.2-.2-.3-.4s-.1-.3-.1-.6,0-.4.1-.6.2-.3.3-.4c.1,0,.3-.1.4-.1s.3,0,.5.1.3.2.4.4c0,.2.1.3.1.6s0,.4-.1.6ZM121.9,100.9c0,0-.1-.2-.2-.2s-.2,0-.3,0-.2,0-.2,0c0,0-.1.1-.2.2s0,.2,0,.3,0,.2,0,.3.1.2.2.2c0,0,.2,0,.2,0s.2,0,.3,0,.1-.1.2-.2c0,0,0-.2,0-.3s0-.2,0-.3Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M123.5,103.1h-.6l.5-1.2-.8-1.8h.6l.6,1.6h-.3s.6-1.6.6-1.6h.6l-1.3,3Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M125.2,100c0,0,.2-.1.3-.1s.2,0,.3.1c0,0,.1.2.1.2s0,.2-.1.2c0,0-.2.1-.3.1s-.2,0-.3-.1c0,0-.1-.2-.1-.2s0-.2.1-.2ZM125.2,101.7c0,0,.2-.1.3-.1s.2,0,.3.1c0,0,.1.2.1.3s0,.2-.1.2c0,0-.2.1-.3.1s-.2,0-.3-.1c0,0-.1-.2-.1-.2s0-.2.1-.3Z"
+              />
+            </g>
+            <rect className={classes.whiteLine} x="79.3" y="95.3" width="92.3" height=".8" />
+            <polygon
+              className={classes.whiteLine}
+              points="90.1 92 90.1 93.8 92.6 95.7 90.1 97.7 90.1 99.4 94.7 95.7 90.1 92"
+            />
+            <polygon
+              className={classes.whiteLine}
+              points="85.6 92 85.6 93.8 88.1 95.7 85.6 97.7 85.6 99.4 90.3 95.7 85.6 92"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M62.7,103.1c-.2,0-.5,0-.7,0-.2,0-.3-.1-.4-.3s0-.3,0-.5h0c.5-1,1.2-1.8,2.2-2.3,1-.5,2-.7,3.1-.6.2,0,.3.1.4.3s0,.3,0,.5c-.5,1-1.2,1.8-2.2,2.3-.7.4-1.6.6-2.4.6ZM62.1,102.6h0ZM62.2,102.5c.9,0,1.7,0,2.5-.5.8-.4,1.4-1,1.8-1.8-.9,0-1.7,0-2.5.5-.8.4-1.4,1-1.8,1.8Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M67.7,97.1s0,0-.1,0c-1.1,0-2.1-.4-3-1-.1-.1-.2-.3-.2-.4s0-.3.2-.4h0c.9-.6,1.9-.9,3-.9,1.1,0,2.1.4,3,1,.1.1.2.3.2.4,0,.2,0,.3-.2.4-.9.6-1.9.9-2.9.9ZM65.1,95.6c.7.5,1.6.8,2.5.8.9,0,1.7-.2,2.5-.7-.7-.5-1.6-.8-2.5-.8-.9,0-1.7.2-2.5.7Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M79.1,95.5c-1,0-1.9-.3-2.7-.8-.9-.6-1.6-1.4-2-2.4s0-.3,0-.5c0-.1.2-.2.4-.2h0c1.1,0,2.1.2,3,.8.9.6,1.6,1.4,2,2.4,0,.2,0,.3,0,.5,0,.1-.2.2-.4.2-.1,0-.2,0-.3,0ZM75.1,92.2c.4.8.9,1.5,1.7,2,.7.5,1.6.7,2.5.7-.4-.8-.9-1.5-1.7-2-.7-.5-1.6-.7-2.5-.7ZM74.9,92.2h0Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M75,99.9c-.1,0-.2,0-.3,0-.2,0-.3-.1-.4-.2,0-.1-.1-.3,0-.5.4-1,1.1-1.8,2-2.4.9-.6,2-.9,3-.8.2,0,.3.1.4.2s.1.3,0,.5c-.4,1-1.1,1.8-2,2.4-.8.5-1.8.8-2.7.8ZM74.9,99.3c.9,0,1.7-.2,2.5-.7.7-.5,1.3-1.2,1.7-2-.9,0-1.7.2-2.5.7-.7.5-1.3,1.2-1.7,2Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M74.1,95.5c-1,0-1.9-.3-2.7-.8-.9-.6-1.6-1.4-2-2.4,0-.2,0-.3,0-.5,0-.1.2-.2.4-.2h0c1.1,0,2.1.2,3,.8.9.6,1.6,1.4,2,2.4,0,.2,0,.3,0,.5,0,.1-.2.2-.4.2-.1,0-.2,0-.3,0ZM70,92.2c.4.8.9,1.5,1.7,2,.7.5,1.6.7,2.5.7-.4-.8-.9-1.5-1.7-2s-1.6-.7-2.5-.7ZM69.8,92.2h0Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M70,99.9c-.1,0-.2,0-.3,0-.2,0-.3-.1-.4-.2,0-.1-.1-.3,0-.5.4-1,1.1-1.8,2-2.4.9-.6,2-.9,3-.8.2,0,.3.1.4.2,0,.1.1.3,0,.5-.4,1-1.1,1.8-2,2.4-.8.5-1.8.8-2.7.8ZM69.9,99.3c.9,0,1.7-.2,2.5-.7.7-.5,1.3-1.2,1.7-2-.9,0-1.7.2-2.5.7-.7.5-1.3,1.2-1.7,2ZM74.2,96.6h0,0ZM74.1,96.5h0s0,0,0,0Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M84.2,95.5c-1,0-1.9-.3-2.7-.8-.9-.6-1.6-1.4-2-2.4,0-.2,0-.3,0-.5,0-.1.2-.2.4-.2h0c1.1,0,2.1.2,3,.8.9.6,1.6,1.4,2,2.4,0,.2,0,.3,0,.5,0,.1-.2.2-.4.2-.1,0-.2,0-.3,0ZM80.2,92.2c.4.8.9,1.5,1.7,2,.7.5,1.6.7,2.5.7-.4-.8-.9-1.5-1.7-2s-1.6-.7-2.5-.7ZM80,92.2h0Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M80.1,99.9c-.1,0-.2,0-.3,0-.2,0-.3-.1-.4-.2,0-.1-.1-.3,0-.5.4-1,1.1-1.8,2-2.4.9-.6,2-.9,3-.8.2,0,.3.1.4.2,0,.1.1.3,0,.5-.4,1-1.1,1.8-2,2.4-.8.5-1.8.8-2.7.8ZM80,99.3c.9,0,1.7-.2,2.5-.7.7-.5,1.3-1.2,1.7-2-.9,0-1.7.2-2.5.7-.7.5-1.3,1.2-1.7,2ZM84.4,96.6h0,0ZM84.2,96.5h0s0,0,0,0Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M60.8,97.8c-.7,0-1.4-.1-2-.4-1-.4-1.8-1.1-2.4-2.1,0-.1,0-.3,0-.5s.2-.3.4-.3c1.1-.2,2.1-.1,3.1.3,1,.4,1.8,1.1,2.4,2.1,0,.1,0,.3,0,.5,0,.2-.2.3-.4.3-.4,0-.8.1-1.1.1ZM57.1,95.2c.5.7,1.2,1.3,2,1.7.8.3,1.7.4,2.6.3-.5-.7-1.2-1.3-2-1.7-.8-.3-1.7-.4-2.6-.3ZM56.9,95.2h0,0Z"
+            />
+            <g>
+              <path
+                className={classes.whiteLine}
+                d="M64.8,86.5c0,2.1-1.7,3.3-4.2,3.3s-3.4-.6-4.3-1.2l1-2c.9.5,2.1,1,3.3,1s1.6-.2,1.6-.8c0-1.5-5.4-.5-5.5-4.1,0-2,1.6-3.3,4.2-3.3s2.5.4,3.5.9l-.9,2c-.9-.4-2-.7-2.7-.7s-1.4.4-1.4.8c0,1.6,5.6.3,5.6,4.1Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M76.7,81.8h-3v7.8h-2.6v-7.8h-3v-2.3h8.5v2.3Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M85.2,86.7h-2v2.9h-2.6v-10.1h5.4c2.4,0,3.8,1.5,3.8,3.5s-.7,2.6-1.9,3.3l2.5,3.3h-3.1l-2-2.9ZM83.1,84.4h2.2c1.3,0,1.7-.6,1.7-1.4s-.5-1.3-1.6-1.3h-2.3v2.7Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M96,83.4h5.1v2.2h-5.1v1.7h5.6v2.3h-8.2v-10.1h8.1v2.3h-5.6v1.6Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M111.5,88.1h-4.6l-.6,1.5h-2.8l4.5-10.1h2.5l4.5,10.1h-2.8l-.6-1.5ZM110.6,85.9l-1.2-2.9-.2-.7-.2.7-1.2,2.9h2.9Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M129.2,89.6h-2.6v-6l-.2.3-2.4,2.9h-.6l-2.4-2.9-.2-.3v6h-2.6v-10.1h1.9l3.4,3.8.3.4.3-.4,3.4-3.8h1.9v10.1Z"
+              />
+              <path className={classes.whiteLine} d="M140.5,89.6h-7.4v-10.1h2.6v7.8h4.8v2.3Z" />
+              <path className={classes.whiteLine} d="M146.3,89.6h-2.6v-10.1h2.6v10.1Z" />
+              <path
+                className={classes.whiteLine}
+                d="M160.5,89.6h-1.9l-4.9-5.9-.2-.4v6.3h-2.6v-10.1h2.3l4.6,5.5.2.4v-5.9h2.6v10.1Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M166.9,83.4h5.1v2.2h-5.1v1.7h5.6v2.3h-8.2v-10.1h8.1v2.3h-5.6v1.6Z"
+              />
+            </g>
+          </g>
+        </g>
+        <g>
+          <g>
+            <path
+              className={classes.whiteLine}
+              d="M16,186.5h10.7c.4,0,.6.3.6.6v6.6c0,.8-.7,1.5-1.5,1.5h-9c-.8,0-1.5-.7-1.5-1.5v-6.6c0-.4.3-.6.6-.6Z"
+            />
+            <path
+              className={classes.boxBorder}
+              d="M17.8,186.9v-1.6c0-1.9,1.6-3.5,3.5-3.5h0c1.9,0,3.5,1.6,3.5,3.5v1.6"
+            />
+          </g>
+          <g>
+            <path
+              className={classes.whiteLine}
+              d="M16,149.9h10.7c.4,0,.6.3.6.6v6.6c0,.8-.7,1.5-1.5,1.5h-9c-.8,0-1.5-.7-1.5-1.5v-6.6c0-.4.3-.6.6-.6Z"
+            />
+            <path
+              className={classes.boxBorder}
+              d="M17.8,150.4v-1.6c0-1.9,1.6-3.5,3.5-3.5h0c1.9,0,3.5,1.6,3.5,3.5v1.6"
+            />
+          </g>
+          <g>
+            <path
+              className={classes.whiteLine}
+              d="M93,203.8h10.7c.4,0,.6.3.6.6v6.6c0,.8-.7,1.5-1.5,1.5h-9c-.8,0-1.5-.7-1.5-1.5v-6.6c0-.4.3-.6.6-.6Z"
+            />
+            <path
+              className={classes.boxBorder}
+              d="M94.8,204.2v-1.6c0-1.9,1.6-3.5,3.5-3.5h0c1.9,0,3.5,1.6,3.5,3.5v1.6"
+            />
+          </g>
+          <g>
+            <path
+              className={classes.whiteLine}
+              d="M134.8,203.8h10.7c.4,0,.6.3.6.6v6.6c0,.8-.7,1.5-1.5,1.5h-9c-.8,0-1.5-.7-1.5-1.5v-6.6c0-.4.3-.6.6-.6Z"
+            />
+            <path
+              className={classes.boxBorder}
+              d="M136.7,204.2v-1.6c0-1.9,1.6-3.5,3.5-3.5h0c1.9,0,3.5,1.6,3.5,3.5v1.6"
+            />
+          </g>
+          <g>
+            <path
+              className={classes.whiteLine}
+              d="M176.7,203.8h10.7c.4,0,.6.3.6.6v6.6c0,.8-.7,1.5-1.5,1.5h-9c-.8,0-1.5-.7-1.5-1.5v-6.6c0-.4.3-.6.6-.6Z"
+            />
+            <path
+              className={classes.boxBorder}
+              d="M178.5,204.2v-1.6c0-1.9,1.6-3.5,3.5-3.5h0c1.9,0,3.5,1.6,3.5,3.5v1.6"
+            />
+          </g>
+        </g>
+        {/* buttons for port selection */}
+        {/* I2C PORTS */}
+        <ellipse
+          onClick={e => {
+            openMenu(e, {
+              address: 0, //address here is not important for I2C, the restrictions are per component not per port
+              addressType: quack.AddressType.ADDRESS_TYPE_I2C,
+              label: "1",
+              autoDetectable: false
+            });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="20.5"
+          cy="44"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* CONFIGURABLE PIN PORTS - Note input Ports 3 and 4 and all control ports are locked for the monitor */}
+        {/* PORT 1 */}
+        <ellipse
+          onClick={e => {
+            openMenu(e, {
+              address: 1,
+              addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+              label: "1",
+              autoDetectable: true
+            });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="20"
+          cy="80"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* PORT 2 */}
+        <ellipse
+          onClick={e => {
+            openMenu(e, {
+              address: 2,
+              addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+              label: "2",
+              autoDetectable: true
+            });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="20.5"
+          cy="116"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* PORT 3 */}
+        <ellipse
+          onClick={e => {
+            setLockOpen(true);
+            // openMenu(e, {
+            //   address: 4,
+            //   addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+            //   label: "3",
+            //   autoDetectable: true
+            // });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="21.5"
+          cy="153"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* Port 4 */}
+        <ellipse
+          onClick={e => {
+            setLockOpen(true);
+            // openMenu(e, {
+            //   address: 8,
+            //   addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+            //   label: "3",
+            //   autoDetectable: true
+            // });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="21.5"
+          cy="189"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* Controller ports - note these are all locked for monitor devices */}
+        {/* PORT C1 */}
+        <ellipse
+          onClick={e => {
+            setLockOpen(true);
+            // openMenu(e, {
+            //   address: 2,
+            //   addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+            //   label: "2",
+            //   autoDetectable: true
+            // });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="98"
+          cy="206"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* PORT C2 */}
+        <ellipse
+          onClick={e => {
+            setLockOpen(true);
+            // openMenu(e, {
+            //   address: 4,
+            //   addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+            //   label: "3",
+            //   autoDetectable: true
+            // });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="140"
+          cy="206"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* Port C3 */}
+        <ellipse
+          onClick={e => {
+            setLockOpen(true);
+            // openMenu(e, {
+            //   address: 8,
+            //   addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+            //   label: "3",
+            //   autoDetectable: true
+            // });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="182"
+          cy="206"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+      </svg>
+    );
+  };
+
+  const streamlineAutomateSVG = () => {
+    return (
+      <svg id="StreamlineAutomate" version="1.1" viewBox="0 0 216 224.09">
+        <rect
+          className={classes.boxBorder}
+          x=".74"
+          y=".74"
+          width="214.53"
+          height="222.62"
+          rx="10.71"
+          ry="10.71"
+        />
+        <path
+          className={classes.grayLine}
+          d="M212.22,123.15l-21.63-13.37c-2.55-1.57-5.71-1.57-8.25,0l-21.63,13.37c-2.33,1.44-3.72,3.94-3.72,6.68v6.01l-4.52-2.79c-2.26-1.4-5.06-1.4-7.32,0l-18.95,11.71c-2.07,1.28-3.3,3.49-3.3,5.93v5.96l-4.85-3c-2.05-1.27-4.61-1.27-6.66,0l-17.04,10.53c-1.88,1.16-3.01,3.18-3.01,5.39v54.29h5.11v-2.53c0-1.27,1.03-2.3,2.31-2.3h11.1c1.27,0,2.3,1.03,2.3,2.3v2.53h5.11v-2.53c0-1.27,1.03-2.3,2.3-2.3h3.32v4.83h5.52v-4.83h2.27c1.27,0,2.3,1.03,2.3,2.3v2.53h5.11v-18.25h5.31c1.46,0,2.64,1.19,2.64,2.65v15.61h5.52v-15.61c0-1.46,1.19-2.65,2.64-2.65h2.78v18.25h6.09v-18.25h3.48c1.46,0,2.64,1.19,2.64,2.65v15.61h5.52v-31.43h5.58c1.72,0,3.12,1.4,3.12,3.12v28.31h6.09v-28.31c0-1.72,1.4-3.12,3.12-3.12h14.1c1.72,0,3.12,1.4,3.12,3.12v26.88l2.19-1.49.36-.31c.2-.19.39-.39.63-.68l.14-.18c.5-.72.92-1.47,1.33-2.2.43-.76.83-1.47,1.31-2.15l.14-.19v-85.42c0-2.74-1.39-5.24-3.72-6.68ZM119.57,217.55c-2.08,0-3.78,1.69-3.78,3.78v1.06h-2.17v-1.06c0-2.08-1.69-3.78-3.78-3.78h-11.1c-2.08,0-3.78,1.69-3.78,3.78v1.06h-2.17v-52.82c0-1.7.86-3.25,2.31-4.14l17.04-10.53c1.58-.97,3.53-.98,5.11,0l5.62,3.47v59.18h-3.32ZM136.61,222.38h-2.17v-1.06c0-2.08-1.69-3.78-3.78-3.78h-2.27v-9.3c0-1.46,1.19-2.65,2.64-2.65h5.56v16.78ZM154.2,204.13c-2.27,0-4.12,1.85-4.12,4.12v14.14h-2.58v-14.14c0-2.27-1.85-4.12-4.12-4.12h-12.35c-2.27,0-4.12,1.85-4.12,4.12v14.14h-2.57v-71.71c0-1.92.97-3.67,2.61-4.67l18.95-11.71c1.78-1.1,3.99-1.1,5.77,0l5.29,3.27v66.56h-2.78ZM173.24,222.38h-2.58v-14.14c0-2.27-1.85-4.12-4.12-4.12h-3.48v-8.58c0-1.72,1.4-3.12,3.12-3.12h7.05v29.96ZM214.47,214.78c-.46.68-.86,1.39-1.25,2.08-.4.7-.8,1.42-1.26,2.08l-.1.14c-.15.17-.29.33-.46.48l-.07.06v-24.07c0-2.53-2.06-4.6-4.59-4.6h-14.1c-2.53,0-4.6,2.06-4.6,4.6v26.83h-3.15v-26.83c0-2.53-2.06-4.6-4.59-4.6h-14.1c-2.53,0-4.59,2.06-4.59,4.6v26.83h-3.15v-92.56c0-2.23,1.13-4.25,3.03-5.42l21.63-13.37c2.07-1.28,4.64-1.28,6.7,0l21.63,13.37c1.89,1.17,3.03,3.2,3.03,5.43v84.96Z"
+        />
+        <g>
+          <path
+            className={classes.whiteLine}
+            d="M59.52,202.99l-.82.82c.66.66,1.02,1.53,1.02,2.46s-.36,1.81-1.02,2.46c-1.36,1.36-3.57,1.36-4.93,0-1.36-1.36-1.36-3.57,0-4.93l-.82-.82c-1.81,1.81-1.81,4.76,0,6.57.91.91,2.1,1.36,3.28,1.36s2.38-.45,3.28-1.36c.88-.88,1.36-2.04,1.36-3.28s-.48-2.41-1.36-3.28Z"
+          />
+          <rect className={classes.whiteLine} x="55.66" y="201.4" width="1.16" height="5.47" />
+        </g>
+        <g>
+          <path
+            className={classes.whiteLine}
+            d="M91,208.58c.18.28.41.5.7.64.29.15.61.22.95.22.3,0,.57-.04.8-.12s.44-.18.62-.31c.18-.13.34-.26.48-.41v1.66c-.26.2-.53.36-.84.47-.3.12-.69.17-1.16.17-.51,0-.98-.08-1.41-.24s-.8-.39-1.11-.68c-.31-.3-.55-.65-.72-1.06-.17-.41-.26-.86-.26-1.36s.08-.95.26-1.36c.17-.41.41-.76.72-1.06.31-.3.68-.53,1.11-.68.43-.16.9-.24,1.41-.24.47,0,.85.06,1.16.17.3.12.58.27.84.47v1.66c-.14-.15-.3-.28-.48-.41-.18-.13-.39-.23-.62-.31s-.5-.11-.8-.11c-.35,0-.66.07-.95.22s-.52.36-.7.64c-.18.28-.26.62-.26,1.01s.09.72.26,1.01Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M96.04,204.89l3.06-.62v6.5h-1.49v-4.93l-1.58.39v-1.34Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M132.85,208.58c.18.28.41.5.7.64.29.15.61.22.95.22.3,0,.57-.04.8-.12s.44-.18.62-.31c.18-.13.34-.26.48-.41v1.66c-.26.2-.53.36-.84.47-.3.12-.69.17-1.16.17-.51,0-.98-.08-1.41-.24s-.8-.39-1.11-.68c-.31-.3-.55-.65-.72-1.06-.17-.41-.26-.86-.26-1.36s.08-.95.26-1.36c.17-.41.41-.76.72-1.06.31-.3.68-.53,1.11-.68.43-.16.9-.24,1.41-.24.47,0,.85.06,1.16.17.3.12.58.27.84.47v1.66c-.14-.15-.3-.28-.48-.41-.18-.13-.39-.23-.62-.31s-.5-.11-.8-.11c-.35,0-.66.07-.95.22s-.52.36-.7.64c-.18.28-.26.62-.26,1.01s.09.72.26,1.01Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M140.31,207.82c.17-.19.32-.36.44-.51.12-.15.22-.3.28-.45.06-.15.1-.31.1-.48,0-.1-.02-.19-.05-.29-.04-.1-.09-.18-.16-.26s-.16-.14-.27-.18c-.11-.05-.24-.07-.38-.07-.19,0-.37.05-.51.15-.15.1-.26.23-.34.41-.08.18-.11.38-.11.61h-1.51c0-.46.09-.87.28-1.25.19-.38.47-.68.85-.9.38-.22.84-.34,1.39-.34.39,0,.74.06,1.05.18.3.12.56.28.76.47.2.2.36.41.46.65.1.24.15.48.15.72,0,.35-.08.66-.26.95-.17.29-.39.55-.67.79l-1.49,1.33h2.55v1.41h-5.4l2.84-2.94Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M176.05,208.58c.18.28.41.5.7.64.29.15.61.22.95.22.3,0,.57-.04.8-.12s.44-.18.62-.31c.18-.13.34-.26.48-.41v1.66c-.26.2-.53.36-.84.47-.3.12-.69.17-1.16.17-.51,0-.98-.08-1.41-.24s-.8-.39-1.11-.68c-.31-.3-.55-.65-.72-1.06-.17-.41-.26-.86-.26-1.36s.08-.95.26-1.36c.17-.41.41-.76.72-1.06.31-.3.68-.53,1.11-.68.43-.16.9-.24,1.41-.24.47,0,.85.06,1.16.17.3.12.58.27.84.47v1.66c-.14-.15-.3-.28-.48-.41-.18-.13-.39-.23-.62-.31s-.5-.11-.8-.11c-.35,0-.66.07-.95.22s-.52.36-.7.64c-.18.28-.26.62-.26,1.01s.09.72.26,1.01Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M182.34,210.74c-.3-.11-.56-.28-.77-.48s-.37-.44-.48-.7-.17-.53-.17-.81h1.51c0,.21.05.38.14.52.09.14.21.24.37.31.15.07.32.1.49.1.18,0,.34-.03.48-.08.14-.05.24-.14.32-.26s.12-.27.12-.45c0-.13-.03-.26-.08-.36s-.14-.2-.25-.29-.25-.14-.42-.19c-.17-.04-.37-.06-.6-.06v-.78c.42,0,.8.03,1.15.1s.65.18.92.33c.26.15.46.34.6.57.14.23.21.51.21.83,0,.37-.1.7-.3.98-.2.28-.49.5-.86.67-.37.16-.82.24-1.34.24-.38,0-.73-.06-1.03-.17ZM182.98,206.98c.18,0,.34-.02.48-.07s.27-.11.37-.19c.11-.08.19-.17.24-.27.05-.1.08-.21.08-.33,0-.12-.03-.23-.08-.33-.05-.1-.13-.17-.24-.22-.1-.05-.24-.08-.4-.08-.24,0-.44.07-.6.21-.16.14-.24.32-.24.55h-1.41c0-.38.09-.72.28-1.02.19-.3.45-.54.79-.71.34-.17.74-.26,1.18-.26.48,0,.89.08,1.22.24.33.16.59.37.76.64s.26.56.26.89c0,.36-.12.67-.36.91-.24.24-.56.43-.97.55-.41.12-.86.18-1.37.18v-.69Z"
+          />
+        </g>
+        <g>
+          <g>
+            <path
+              className={classes.whiteLine}
+              d="M14.08,77.72l3.06-.62v6.5h-1.49v-4.93l-1.58.39v-1.34Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M16.48,116.47c.17-.19.32-.36.44-.51.12-.15.22-.3.28-.45.06-.15.1-.31.1-.48,0-.1-.02-.19-.05-.29-.04-.1-.09-.18-.16-.26s-.16-.14-.27-.18c-.11-.05-.24-.07-.38-.07-.19,0-.37.05-.51.15-.15.1-.26.23-.34.41-.08.18-.11.38-.11.61h-1.51c0-.46.09-.87.28-1.25.19-.38.47-.68.85-.9.38-.22.84-.34,1.39-.34.39,0,.74.06,1.05.18.3.12.56.28.76.47.2.2.36.41.46.65s.15.48.15.72c0,.35-.08.66-.26.95s-.39.55-.67.79l-1.49,1.33h2.55v1.41h-5.4l2.84-2.94Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M15.32,155.21c-.3-.12-.56-.28-.77-.48-.21-.21-.37-.44-.48-.7s-.17-.53-.17-.81h1.51c0,.21.05.38.14.52s.21.24.37.31.32.1.49.1c.18,0,.34-.03.48-.08.14-.05.24-.14.32-.26.08-.12.12-.27.12-.45,0-.13-.03-.26-.08-.36-.05-.11-.14-.2-.25-.29s-.25-.14-.42-.19c-.17-.04-.37-.06-.6-.06v-.78c.42,0,.8.03,1.15.1.35.07.65.18.92.33.26.15.46.34.6.57.14.23.21.51.21.83,0,.37-.1.7-.3.98-.2.28-.49.5-.86.67s-.82.24-1.34.24c-.38,0-.73-.06-1.03-.17ZM15.96,151.45c.18,0,.34-.02.48-.07.14-.05.27-.11.37-.19s.19-.17.24-.27.08-.21.08-.33c0-.12-.03-.23-.08-.33s-.13-.17-.24-.22c-.1-.05-.24-.08-.4-.08-.24,0-.44.07-.6.21-.16.14-.24.32-.24.55h-1.41c0-.38.09-.72.28-1.02.19-.3.45-.54.79-.71.34-.17.74-.26,1.18-.26.48,0,.89.08,1.22.24.33.16.59.37.76.64.17.27.26.56.26.89,0,.36-.12.67-.36.91-.24.24-.56.43-.97.55-.41.12-.86.18-1.37.18v-.69Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M17.28,184.68h1.15v6.38h-1.6v-1.6l.17-.1v-2.44l-1.38,1.9h2.35l.15-.2h1.3v1.31h-5.85l3.7-5.25Z"
+            />
+          </g>
+          <g>
+            <path
+              className={classes.whiteLine}
+              d="M16.95,38.26c-3.47,0-6.28,2.81-6.28,6.28s2.81,6.28,6.28,6.28,6.28-2.81,6.28-6.28-2.81-6.28-6.28-6.28ZM16.95,48.51c-2.2,0-3.98-1.78-3.98-3.98s1.78-3.98,3.98-3.98,3.98,1.78,3.98,3.98-1.78,3.98-3.98,3.98Z"
+            />
+            <circle className={classes.whiteLine} cx="16.95" cy="44.53" r="2.33" />
+          </g>
+        </g>
+        <g>
+          <path
+            className={classes.whiteLine}
+            d="M184.22,153.42c0-2.75-1.07-5.34-3.02-7.28-.76-.76-2-.76-2.76,0-.76.76-.76,2,0,2.76,1.21,1.21,1.87,2.81,1.87,4.52s-.66,3.31-1.87,4.52c-.38.38-.57.88-.57,1.38s.19,1,.57,1.38c.76.76,2,.76,2.76,0,1.95-1.94,3.02-4.53,3.02-7.28ZM190.65,153.42c0-4.47-1.74-8.67-4.9-11.83-.76-.76-2-.76-2.76,0-.76.76-.76,2,0,2.76,2.42,2.42,3.76,5.64,3.76,9.07s-1.33,6.65-3.76,9.07c-.38.38-.57.88-.57,1.38s.19,1,.57,1.38c.76.76,2,.76,2.76,0,3.16-3.16,4.9-7.36,4.9-11.83ZM190.31,169.82c4.38-4.38,6.79-10.2,6.79-16.39s-2.41-12.02-6.79-16.39c-.76-.76-2-.76-2.76,0-.38.38-.57.88-.57,1.38s.19,1,.57,1.38c3.64,3.64,5.65,8.48,5.65,13.63s-2.01,9.99-5.65,13.63c-.76.76-.76,2,0,2.76.76.76,2,.76,2.76,0Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M175.74,149.01c-.62-.62-1.8-.62-2.41,0-.67.67-.67,1.75,0,2.42.53.53.83,1.24.83,2s-.29,1.46-.83,2c-.32.32-.5.75-.5,1.21s.18.88.5,1.21c.32.32.75.5,1.21.5s.88-.18,1.21-.5c1.18-1.18,1.83-2.74,1.83-4.41s-.65-3.23-1.83-4.41Z"
+          />
+        </g>
+        <g>
+          <g>
+            <g>
+              <path
+                className={classes.whiteLine}
+                d="M124.72,103.81v.94c0,.42.32.77.73.82v.86h.2v-.86c.41-.05.73-.4.73-.82v-.94l-.83.71-.83-.71ZM126.17,104.75c0,.31-.23.57-.53.62v-.3h-.2v.3c-.3-.05-.53-.31-.53-.62v-.51l.63.54.63-.54v.51Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M124.72,102.37v.94c0,.46.37.83.83.83s.83-.37.83-.83v-.94l-.83.71-.83-.71ZM126.17,103.31c0,.31-.23.57-.53.62v-.3h-.2v.3c-.3-.05-.53-.31-.53-.62v-.51l.63.54.63-.54v.51Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M124.72,100.91v.94c0,.46.37.83.83.83s.83-.37.83-.83v-.94l-.83.71-.83-.71ZM126.17,101.85c0,.31-.23.57-.53.62v-.3h-.2v.3c-.3-.05-.53-.31-.53-.62v-.51l.63.54.63-.54v.51Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M125.54,101.3h.01s.01,0,.01,0c.01,0,.36-.05.48-.33.11-.27-.03-.63-.41-1.09l-.08-.09-.08.09c-.38.46-.52.82-.41,1.09.11.29.46.33.48.33ZM125.55,100.1c.34.43.36.67.31.8-.04.1-.14.16-.22.19v-.28h-.2v.27c-.07-.03-.16-.08-.2-.18-.05-.12-.03-.36.31-.8Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M140.2,103.6h-2.45v.99c-.25.14-.54.23-.85.23-.93,0-1.69-.76-1.69-1.69s.76-1.69,1.69-1.69,1.67.73,1.69,1.65h1.64c-.02-1.82-1.51-3.29-3.33-3.29-1.54,0-2.83,1.04-3.22,2.46-.38-1.42-1.68-2.46-3.22-2.46-1.84,0-3.34,1.49-3.34,3.34s1.49,3.34,3.34,3.34c.62,0,1.2-.17,1.69-.46v.46h1.64v-2.11c.49,1.24,1.69,2.11,3.1,2.11.62,0,1.2-.17,1.69-.46v.46h1.64v-2.87h-.03ZM130.46,104.82c-.93,0-1.69-.76-1.69-1.69s.76-1.69,1.69-1.69,1.69.76,1.69,1.69-.76,1.69-1.69,1.69Z"
+              />
+            </g>
+            <g>
+              <path
+                className={classes.whiteLine}
+                d="M143.16,102.83l-.27-.61h-.94l-.28.61h-.41l1.15-2.47,1.15,2.47h-.41ZM142.09,101.9h.66l-.24-.54s-.03-.07-.04-.12c-.02-.04-.03-.09-.05-.15-.01.05-.03.1-.04.15-.01.04-.03.09-.04.12l-.24.54Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M144.32,102.83v-2.38h.52c.34,0,.58.02.71.05.14.03.26.09.36.17.14.1.24.24.31.4.07.16.11.35.11.56s-.04.4-.11.56c-.07.16-.17.3-.31.4-.1.08-.22.14-.35.17-.13.03-.34.05-.62.05h-.62ZM144.71,102.49h.32c.18,0,.31-.01.4-.04.09-.02.17-.06.23-.12.09-.08.16-.17.2-.29.04-.11.07-.25.07-.4s-.02-.28-.07-.4c-.04-.11-.11-.21-.2-.29-.07-.06-.15-.1-.24-.12-.09-.02-.24-.04-.44-.04h-.28v1.68Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M148.82,102.83l-.27-.61h-.94l-.28.61h-.41l1.15-2.47,1.15,2.47h-.41ZM147.76,101.9h.66l-.24-.54s-.03-.07-.04-.12c-.02-.04-.03-.09-.05-.15-.01.05-.03.1-.04.15-.01.04-.03.09-.04.12l-.24.54Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M150.35,101.77v1.07h-.36v-2.38h.58c.17,0,.3,0,.38.03.08.02.15.05.21.09.07.06.13.13.18.22.04.09.06.2.06.31s-.02.22-.06.31c-.04.1-.1.17-.18.22-.06.04-.13.07-.21.09-.08.02-.21.03-.38.03h-.22ZM150.37,101.45h.1c.21,0,.36-.02.43-.07s.11-.13.11-.25c0-.13-.04-.22-.11-.27-.08-.05-.22-.08-.42-.08h-.1v.66Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M153.05,100.79v2.05h-.39v-2.05h-.63v-.33h1.65v.33h-.63Z"
+              />
+              <path className={classes.whiteLine} d="M154.52,102.83v-2.38h.39v2.38h-.39Z" />
+              <path
+                className={classes.whiteLine}
+                d="M156.74,102.93l-1.06-2.47h.4l.53,1.27c.03.07.06.14.08.2.02.06.04.12.05.18.01-.06.03-.12.05-.18.02-.06.05-.13.08-.2l.53-1.27h.4l-1.06,2.47Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M158.57,102.83v-2.38h1.33v.33h-.94v.6h.94v.34h-.94v.77h.94v.35h-1.33Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M143.16,106.36l-.27-.61h-.94l-.28.61h-.41l1.15-2.47,1.15,2.47h-.41ZM142.09,105.43h.66l-.24-.54s-.03-.07-.04-.12c-.02-.04-.03-.09-.05-.15-.01.05-.03.1-.04.15-.01.04-.03.09-.04.12l-.24.54Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M145.58,105.15h.94s0,.04,0,.07c0,.08,0,.13,0,.16,0,.33-.1.59-.29.78s-.46.28-.81.28c-.19,0-.37-.03-.52-.09-.15-.06-.29-.14-.4-.26-.11-.11-.2-.25-.26-.4-.06-.15-.09-.32-.09-.5s.03-.35.09-.5c.06-.15.15-.29.27-.4.12-.11.25-.2.41-.26.16-.06.32-.09.5-.09.19,0,.35.03.5.1.15.07.28.17.4.31l-.28.21c-.08-.09-.17-.16-.27-.21-.1-.05-.21-.07-.34-.07-.26,0-.47.08-.63.25-.16.16-.24.38-.24.64s.08.49.24.65c.16.17.37.25.63.25.22,0,.39-.05.52-.15.13-.1.19-.24.19-.42v-.03h-.57v-.33Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M147.83,105.3v1.06h-.36v-2.38h.54c.16,0,.28.01.37.03.09.02.16.05.22.1.07.06.13.13.17.22.04.09.06.19.06.3,0,.19-.05.34-.14.45-.09.11-.23.17-.41.19l.82,1.08h-.44l-.79-1.06h-.04ZM147.85,105h.07c.2,0,.34-.02.41-.07.07-.05.1-.13.1-.25,0-.13-.04-.22-.11-.28-.07-.05-.21-.08-.4-.08h-.07v.68Z"
+              />
+              <path className={classes.whiteLine} d="M149.86,106.36v-2.38h.39v2.38h-.39Z" />
+              <path
+                className={classes.whiteLine}
+                d="M153.24,104.57c-.11-.09-.22-.16-.35-.21-.12-.05-.25-.07-.38-.07-.26,0-.47.08-.63.25-.16.17-.24.38-.24.65s.08.47.24.63c.16.17.36.25.6.25.14,0,.27-.02.4-.07.13-.05.25-.12.37-.23v.44c-.1.07-.22.13-.34.17-.12.04-.25.06-.4.06-.18,0-.35-.03-.5-.09s-.29-.15-.41-.26c-.12-.11-.2-.25-.27-.4-.06-.15-.09-.32-.09-.49s.03-.34.09-.49c.06-.15.15-.29.27-.4.12-.12.25-.21.41-.27.15-.06.32-.09.49-.09.14,0,.27.02.4.06s.25.1.37.18l-.02.39Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M154.24,103.99h.38v1.44c0,.21.05.38.15.48.1.11.25.16.44.16s.34-.05.44-.16c.1-.11.15-.27.15-.48v-1.44h.39v1.48c0,.32-.08.56-.24.72-.16.16-.41.24-.73.24s-.57-.08-.73-.24c-.16-.16-.24-.4-.24-.72v-1.48Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M157.26,106.36v-2.38h.39v2.03h.86v.35h-1.25Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M159.94,104.32v2.05h-.39v-2.05h-.63v-.33h1.65v.33h-.63Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M161.38,103.99h.38v1.44c0,.21.05.38.15.48.1.11.25.16.44.16s.34-.05.44-.16c.1-.11.15-.27.15-.48v-1.44h.39v1.48c0,.32-.08.56-.24.72s-.41.24-.73.24-.57-.08-.73-.24c-.16-.16-.24-.4-.24-.72v-1.48Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M164.76,105.3v1.06h-.36v-2.38h.54c.16,0,.28.01.37.03.09.02.16.05.22.1.07.06.13.13.17.22.04.09.06.19.06.3,0,.19-.05.34-.14.45-.09.11-.23.17-.41.19l.82,1.08h-.44l-.79-1.06h-.04ZM164.78,105h.07c.2,0,.34-.02.41-.07.07-.05.1-.13.1-.25,0-.13-.04-.22-.11-.28-.07-.05-.21-.08-.4-.08h-.07v.68Z"
+              />
+              <path
+                className={classes.whiteLine}
+                d="M166.79,106.36v-2.38h1.33v.33h-.94v.6h.94v.34h-.94v.77h.94v.35h-1.33Z"
+              />
+            </g>
+          </g>
+          <g>
+            <path
+              className={classes.whiteLine}
+              d="M96.59,99.33v3.04h-.62v-3.04h.62ZM96.18,100.47h2.23v.56h-2.23v-.56ZM98.63,99.33v3.04h-.62v-3.04h.62Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M99.68,101.9s.07.07.12.1c.05.02.11.03.17.03.09,0,.16-.02.23-.05.07-.04.13-.09.17-.16.04-.07.06-.15.06-.25l.07.26c0,.13-.04.23-.11.32s-.16.15-.27.2c-.11.04-.23.07-.35.07s-.24-.02-.35-.07c-.11-.05-.19-.12-.26-.22-.07-.09-.1-.21-.1-.35,0-.19.07-.35.2-.46.14-.11.33-.17.58-.17.13,0,.24.01.34.04.1.03.18.06.25.1.07.04.11.07.14.11v.26c-.08-.06-.17-.1-.26-.13-.1-.03-.2-.04-.31-.04-.09,0-.16.01-.21.03-.06.02-.1.05-.12.09-.03.04-.04.09-.04.15s.01.11.04.15ZM99.21,100.55c.1-.05.23-.11.38-.16s.32-.08.5-.08c.17,0,.32.02.46.07.13.05.24.12.31.21.08.09.11.21.11.35v1.42h-.54v-1.3c0-.06,0-.1-.03-.14-.02-.04-.04-.07-.08-.1-.04-.03-.08-.04-.13-.06-.05-.01-.1-.02-.17-.02-.09,0-.18.01-.26.03-.08.02-.16.04-.22.07-.06.03-.11.05-.13.07l-.21-.38Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M102.05,102.37h-.55v-2h.55v2ZM102.52,100.88s-.09-.03-.15-.03c-.07,0-.13.02-.18.06-.05.04-.09.09-.11.16-.02.07-.04.15-.04.25l-.16-.16c0-.16.03-.3.09-.42.06-.12.14-.22.24-.3.1-.07.2-.11.3-.11.07,0,.14.01.21.04.06.03.12.07.16.12l-.26.48s-.08-.06-.12-.08Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M103.19,100.8c.09-.15.21-.27.36-.35.15-.08.3-.12.47-.12s.32.04.45.13c.13.08.23.2.3.36s.11.34.11.56-.04.4-.11.56-.18.28-.3.36c-.13.08-.28.13-.45.13s-.32-.04-.47-.12c-.15-.08-.27-.2-.36-.36-.09-.16-.13-.34-.13-.56s.04-.41.13-.57ZM103.71,101.68c.05.09.12.15.2.2.08.05.17.07.27.07.08,0,.17-.02.25-.07.08-.04.14-.11.2-.2.05-.09.08-.19.08-.31s-.03-.23-.08-.31c-.05-.09-.12-.15-.2-.2-.08-.04-.16-.07-.25-.07-.1,0-.19.02-.27.07-.08.05-.15.11-.2.2-.05.09-.07.19-.07.31s.02.22.07.31ZM105.26,98.98v3.39h-.56v-3.39h.56Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M106.11,100.37l.44,1.11.56-1.26.59,1.26.44-1.11h.59l-.98,2.13-.64-1.27-.62,1.27-.98-2.13h.6Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M109.44,101.9s.07.07.12.1c.05.02.11.03.17.03.09,0,.16-.02.23-.05.07-.04.13-.09.17-.16.04-.07.06-.15.06-.25l.07.26c0,.13-.04.23-.11.32s-.16.15-.27.2c-.11.04-.23.07-.35.07s-.24-.02-.35-.07c-.11-.05-.19-.12-.26-.22-.07-.09-.1-.21-.1-.35,0-.19.07-.35.2-.46.14-.11.33-.17.58-.17.13,0,.24.01.34.04.1.03.18.06.25.1.07.04.11.07.14.11v.26c-.08-.06-.17-.1-.26-.13-.1-.03-.2-.04-.31-.04-.09,0-.16.01-.21.03-.06.02-.1.05-.12.09-.03.04-.04.09-.04.15s.01.11.04.15ZM108.98,100.55c.1-.05.23-.11.38-.16s.32-.08.5-.08c.17,0,.32.02.46.07.13.05.24.12.31.21.08.09.11.21.11.35v1.42h-.54v-1.3c0-.06,0-.1-.03-.14-.02-.04-.04-.07-.08-.1-.04-.03-.08-.04-.13-.06-.05-.01-.1-.02-.17-.02-.09,0-.18.01-.26.03-.08.02-.16.04-.22.07-.06.03-.11.05-.13.07l-.21-.38Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M111.82,102.37h-.55v-2h.55v2ZM112.29,100.88s-.09-.03-.15-.03c-.07,0-.13.02-.18.06-.05.04-.09.09-.11.16-.02.07-.04.15-.04.25l-.16-.16c0-.16.03-.3.09-.42.06-.12.14-.22.24-.3.1-.07.2-.11.3-.11.07,0,.14.01.21.04.07.03.12.07.16.12l-.26.48s-.08-.06-.11-.08Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M113.27,102.28c-.16-.09-.29-.21-.38-.36-.09-.15-.13-.34-.13-.55s.04-.4.13-.55c.09-.15.21-.27.38-.36.16-.09.35-.13.57-.13s.41.04.56.12.27.2.35.35.12.34.12.55c0,.03,0,.05,0,.08,0,.03,0,.05,0,.07h-1.79v-.35h1.3l-.15.2s.02-.04.03-.07c.01-.03.02-.06.02-.08,0-.1-.02-.18-.05-.25-.04-.07-.09-.12-.15-.17-.07-.04-.14-.06-.23-.06-.11,0-.2.02-.28.07-.07.05-.13.12-.17.21-.04.09-.06.21-.06.35,0,.13.02.25.06.34.04.09.1.16.18.21.08.05.17.07.28.07.12,0,.23-.02.32-.07s.16-.12.22-.21l.49.15c-.1.19-.24.33-.41.42-.17.09-.38.14-.62.14-.22,0-.41-.04-.57-.13Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M117.16,102.37h-.56v-3.39h.56v3.39ZM118.66,101.93c-.09.16-.21.28-.35.36s-.3.12-.47.12-.31-.04-.44-.13c-.13-.08-.23-.2-.31-.36s-.11-.34-.11-.56.04-.4.11-.56.18-.27.31-.36c.13-.08.28-.13.44-.13s.32.04.47.12.26.2.35.35c.09.16.13.34.13.57s-.04.41-.13.56ZM118.14,101.06c-.05-.09-.11-.15-.2-.2s-.17-.07-.27-.07c-.08,0-.17.02-.25.07-.08.04-.14.11-.2.2s-.08.19-.08.31.03.23.08.31.12.15.2.2c.08.05.16.07.25.07.1,0,.19-.02.27-.07s.15-.11.2-.2c.05-.09.07-.19.07-.31s-.02-.22-.07-.31Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M119.75,103.32h-.58l.5-1.15-.83-1.8h.63l.64,1.59h-.28s.63-1.59.63-1.59h.59l-1.3,2.95Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M121.46,100.23c.07-.07.15-.1.25-.1s.19.03.26.1c.07.07.1.15.1.25s-.03.18-.1.25c-.07.07-.15.1-.26.1s-.19-.03-.25-.1c-.07-.07-.1-.15-.1-.25s.03-.18.1-.25ZM121.46,101.86c.07-.07.15-.1.25-.1s.19.03.26.1c.07.07.1.15.1.25,0,.09-.03.17-.1.24-.07.07-.15.1-.26.1s-.19-.03-.25-.1c-.07-.07-.1-.15-.1-.24,0-.1.03-.18.1-.25Z"
+            />
+          </g>
+          <rect className={classes.whiteLine} x="75.58" y="95.54" width="92.26" height=".81" />
+          <polygon
+            className={classes.whiteLine}
+            points="86.33 92.24 86.33 93.96 88.81 95.94 86.33 97.92 86.33 99.64 90.96 95.94 86.33 92.24"
+          />
+          <polygon
+            className={classes.whiteLine}
+            points="81.86 92.24 81.86 93.96 84.33 95.94 81.86 97.92 81.86 99.64 86.49 95.94 81.86 92.24"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M58.9,103.34c-.23,0-.46-.02-.69-.05-.16-.02-.31-.12-.39-.27s-.08-.33-.01-.48h0c.47-.97,1.22-1.76,2.18-2.27.95-.51,2.02-.71,3.1-.56.16.02.31.12.39.27s.08.33.01.48c-.47.97-1.22,1.76-2.18,2.27-.75.4-1.57.61-2.4.61ZM58.38,102.82h0ZM58.46,102.67c.88.09,1.75-.09,2.53-.51.78-.42,1.41-1.05,1.82-1.83-.88-.09-1.75.09-2.53.51-.78.42-1.41,1.05-1.82,1.83Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M63.9,97.27s-.07,0-.1,0c-1.08-.02-2.11-.38-2.97-1.03-.13-.1-.21-.26-.21-.43s.09-.33.22-.42h0c.89-.62,1.91-.94,3.01-.91,1.08.02,2.11.38,2.97,1.03.13.1.21.26.21.43,0,.17-.09.33-.22.42-.86.6-1.86.91-2.91.91ZM61.36,95.83c.72.5,1.57.78,2.45.8.91.02,1.74-.22,2.48-.7-.72-.5-1.57-.78-2.45-.8-.89-.02-1.74.22-2.48.7Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M75.39,95.72c-.97,0-1.91-.27-2.73-.8-.91-.58-1.61-1.42-2-2.42-.06-.15-.04-.33.05-.47.09-.14.24-.23.41-.24h0c1.08-.07,2.13.21,3.05.79.91.58,1.61,1.42,2,2.42.06.15.04.33-.05.47-.09.14-.24.23-.41.24-.11,0-.21.01-.32.01ZM71.33,92.42c.35.81.93,1.48,1.68,1.96.75.48,1.6.71,2.49.69-.35-.81-.93-1.48-1.68-1.96-.75-.48-1.59-.71-2.49-.69ZM71.15,92.43h0Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M71.29,100.11c-.11,0-.21,0-.32-.01-.16,0-.32-.1-.41-.24-.09-.14-.11-.32-.05-.47.4-1.01,1.09-1.84,2-2.43.91-.58,1.96-.85,3.05-.79.17.01.32.1.41.24s.11.32.05.47c-.4,1.01-1.09,1.84-2,2.42-.82.52-1.76.8-2.73.8ZM71.18,99.46c.89.02,1.74-.22,2.49-.69.75-.48,1.33-1.15,1.68-1.96-.88-.01-1.74.22-2.49.69-.75.48-1.33,1.15-1.68,1.96Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M70.32,95.72c-.97,0-1.91-.27-2.73-.8-.91-.58-1.61-1.42-2-2.42-.06-.15-.04-.33.05-.47.09-.14.24-.23.41-.24h0c1.08-.07,2.13.21,3.05.79.91.58,1.61,1.42,2,2.42.06.15.04.33-.05.47-.09.14-.24.23-.41.24-.11,0-.21.01-.32.01ZM66.25,92.42c.35.81.93,1.48,1.68,1.96.75.48,1.59.7,2.49.69-.35-.81-.93-1.48-1.68-1.96s-1.61-.71-2.49-.69ZM66.08,92.43h0Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M66.22,100.11c-.11,0-.21,0-.32-.01-.16,0-.32-.1-.41-.24-.09-.14-.11-.32-.05-.47.4-1.01,1.09-1.84,2-2.43.91-.58,1.96-.85,3.05-.79.17.01.32.1.41.24.09.14.11.32.05.47-.4,1-1.09,1.84-2,2.42-.82.52-1.76.8-2.73.8ZM66.11,99.46c.88.02,1.74-.22,2.49-.69.75-.48,1.33-1.15,1.68-1.96-.88-.01-1.74.22-2.49.69-.75.48-1.33,1.15-1.68,1.96ZM70.45,96.82h0,0ZM70.35,96.65h0s0,0,0,0Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M80.46,95.72c-.97,0-1.91-.27-2.73-.8-.91-.58-1.61-1.42-2-2.42-.06-.15-.04-.33.05-.47.09-.14.24-.23.41-.24h0c1.09-.07,2.13.21,3.05.79.91.58,1.61,1.42,2,2.42.06.15.04.33-.05.47-.09.14-.24.23-.41.24-.11,0-.21.01-.32.01ZM76.4,92.42c.35.81.93,1.48,1.68,1.96.75.48,1.59.7,2.49.69-.35-.81-.93-1.48-1.68-1.96s-1.61-.71-2.49-.69ZM76.22,92.43h0Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M76.36,100.11c-.11,0-.21,0-.32-.01-.16,0-.32-.1-.41-.24-.09-.14-.11-.32-.05-.47.4-1.01,1.09-1.84,2-2.43.91-.58,1.97-.85,3.05-.79.17.01.32.1.41.24.09.14.11.32.05.47-.4,1-1.09,1.84-2,2.42-.82.52-1.76.8-2.73.8ZM76.25,99.46c.88.02,1.74-.22,2.49-.69.75-.48,1.33-1.15,1.68-1.96-.87-.01-1.74.22-2.49.69-.75.48-1.33,1.15-1.68,1.96ZM80.59,96.82h0,0ZM80.49,96.65h0s0,0,0,0Z"
+          />
+          <path
+            className={classes.whiteLine}
+            d="M57.02,98.03c-.68,0-1.36-.14-2-.41-1-.43-1.81-1.14-2.37-2.07-.09-.14-.1-.32-.03-.48s.2-.27.36-.31c1.05-.24,2.14-.14,3.13.28,1,.43,1.81,1.14,2.37,2.07.09.14.1.32.03.47-.07.16-.2.27-.36.31-.38.09-.76.13-1.14.13ZM53.3,95.36c.48.74,1.16,1.31,1.98,1.66.82.35,1.7.45,2.57.28-.48-.74-1.16-1.31-1.98-1.66-.82-.35-1.7-.44-2.57-.28ZM53.13,95.4h0,0Z"
+          />
+          <g>
+            <path
+              className={classes.whiteLine}
+              d="M61.04,86.66c0,2.09-1.71,3.3-4.23,3.3-1.83,0-3.37-.63-4.33-1.24l1.01-2.04c.92.52,2.13,1.02,3.3,1.02.69,0,1.6-.17,1.6-.81,0-1.54-5.44-.49-5.51-4.1-.03-1.99,1.6-3.27,4.17-3.27,1.37,0,2.46.36,3.45.89l-.94,2.01c-.92-.45-1.97-.71-2.75-.71-.92,0-1.35.39-1.35.82,0,1.58,5.58.33,5.58,4.12Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M72.92,81.95h-2.96v7.82h-2.59v-7.82h-2.96v-2.26h8.52v2.26Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M81.4,86.86h-2.01v2.91h-2.59v-10.07h5.38c2.42,0,3.77,1.47,3.77,3.47,0,1.41-.66,2.63-1.93,3.27l2.46,3.34h-3.07l-2.01-2.91ZM79.39,84.61h2.25c1.28,0,1.67-.65,1.67-1.4,0-.88-.5-1.27-1.64-1.27h-2.27v2.66Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M92.28,83.56h5.11v2.2h-5.11v1.74h5.61v2.26h-8.18v-10.07h8.15v2.26h-5.58v1.61Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M107.73,88.27h-4.65l-.6,1.5h-2.79l4.48-10.07h2.5l4.48,10.07h-2.81l-.6-1.5ZM106.86,86.09l-1.19-2.94-.24-.66-.24.66-1.19,2.94h2.88Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M125.4,89.76h-2.59v-6l-.19.33-2.43,2.89h-.63l-2.43-2.89-.2-.35v6.02h-2.59v-10.07h1.86l3.38,3.83.3.45.29-.45,3.38-3.83h1.86v10.07Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M136.7,89.76h-7.38v-10.07h2.59v7.82h4.79v2.26Z"
+            />
+            <path className={classes.whiteLine} d="M142.56,89.76h-2.59v-10.07h2.59v10.07Z" />
+            <path
+              className={classes.whiteLine}
+              d="M156.7,89.76h-1.91l-4.94-5.94-.2-.39v6.33h-2.59v-10.07h2.26l4.59,5.51.2.37v-5.89h2.59v10.07Z"
+            />
+            <path
+              className={classes.whiteLine}
+              d="M163.11,83.56h5.11v2.2h-5.11v1.74h5.61v2.26h-8.18v-10.07h8.15v2.26h-5.58v1.61Z"
+            />
+          </g>
+        </g>
+        {/* buttons for port selection */}
+        {/* I2C PORTS */}
+        <ellipse
+          onClick={e => {
+            openMenu(e, {
+              address: 0, //address here is not important for I2C, the restrictions are per component not per port
+              addressType: quack.AddressType.ADDRESS_TYPE_I2C,
+              label: "1",
+              autoDetectable: false
+            });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="17"
+          cy="44"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* CONFIGURABLE PIN PORTS - Note input Ports 3 and 4 and all control ports are locked for the monitor */}
+        {/* PORT 1 */}
+        <ellipse
+          onClick={e => {
+            openMenu(e, {
+              address: 1,
+              addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+              label: "1",
+              autoDetectable: true
+            });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="17"
+          cy="80"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* PORT 2 */}
+        <ellipse
+          onClick={e => {
+            openMenu(e, {
+              address: 2,
+              addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+              label: "2",
+              autoDetectable: true
+            });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="17"
+          cy="116"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* PORT 3 */}
+        <ellipse
+          onClick={e => {
+            openMenu(e, {
+              address: 4,
+              addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+              label: "3",
+              autoDetectable: true
+            });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="17"
+          cy="152"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* Port 4 */}
+        <ellipse
+          onClick={e => {
+            openMenu(e, {
+              address: 8,
+              addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+              label: "4",
+              autoDetectable: true
+            });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="17"
+          cy="188"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* Controller ports - note these are all locked for monitor devices */}
+        {/* PORT C1 */}
+        <ellipse
+          onClick={e => {
+            openMenu(e, {
+              address: 2,
+              addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+              label: "C1",
+              autoDetectable: true
+            });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="95"
+          cy="207"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* PORT C2 */}
+        <ellipse
+          onClick={e => {
+            openMenu(e, {
+              address: 4,
+              addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+              label: "C2",
+              autoDetectable: true
+            });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="138"
+          cy="207"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+        {/* Port C3 */}
+        <ellipse
+          onClick={e => {
+            openMenu(e, {
+              address: 8,
+              addressType: quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY,
+              label: "C3",
+              autoDetectable: true
+            });
+          }}
+          className={classes.testButton}
+          id="button"
+          cx="180"
+          cy="207"
+          rx={buttonSize.rxLarge}
+          ry={buttonSize.ryLarge}
+        />
+      </svg>
+    );
+  };
+
   const getProductSVG = () => {
     switch (device.settings.product) {
       case pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_PRO:
@@ -5232,6 +6159,10 @@ export default function DeviceSVG(props: Props) {
         return miVentSVG();
       case pond.DeviceProduct.DEVICE_PRODUCT_MIVENT_V2:
         return miVentSVG(true);
+      case pond.DeviceProduct.DEVICE_PRODUCT_STREAMLINE_MONITOR:
+        return streamlineMonitorSVG();
+      case pond.DeviceProduct.DEVICE_PRODUCT_STREAMLINE_AUTOMATE:
+        return streamlineAutomateSVG();
     }
   };
 
diff --git a/src/products/Bindapt/BindaptDescriber.ts b/src/products/Bindapt/BindaptDescriber.ts
index 2bb4b63..b7f39f3 100644
--- a/src/products/Bindapt/BindaptDescriber.ts
+++ b/src/products/Bindapt/BindaptDescriber.ts
@@ -191,6 +191,38 @@ export const BindaptV2Automate: DeviceProductDescriber = {
   // ])
 };
 
+export const StreamlineMonitor: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_STREAMLINE_MONITOR,
+  label: "Streamline Monitor",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? BindaptPlusDarkIcon : BindaptPlusLightIcon;
+  },
+  view: "controller",
+  tabs: getBindaptTabs(),
+  availability: BindaptV2MonitorAvailability
+  //TODO not sure what the default address map for these should be yet
+  // defaultAddressMap: new Map<string, string[]>([
+  //   ["plenum", ["9-2-64"]],
+  //   ["heatersFans", ["3-1-512"]] //refers to heaters and fans
+  // ])
+};
+
+export const StreamlineAutomate: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_STREAMLINE_AUTOMATE,
+  label: "Streamline Automate",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? BindaptPlusDarkIcon : BindaptPlusLightIcon;
+  },
+  view: "controller",
+  tabs: getBindaptTabs(),
+  availability: BindaptV2AutomateAvailability
+  //TODO not sure what the default address map for these should be yet
+  // defaultAddressMap: new Map<string, string[]>([
+  //   ["plenum", ["9-2-64"]],
+  //   ["heatersFans", ["3-1-512"]] //refers to heaters and fans
+  // ])
+};
+
 export function IsBindaptDevice(product?: pond.DeviceProduct): boolean {
   const bindaptProducts: pond.DeviceProduct[] = [
     pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_MINI,
diff --git a/src/products/DeviceProduct.ts b/src/products/DeviceProduct.ts
index ce910ec..792be79 100644
--- a/src/products/DeviceProduct.ts
+++ b/src/products/DeviceProduct.ts
@@ -11,7 +11,9 @@ import {
   BindaptV2Automate,
   BinHalo,
   BinMonitor,
-  BinUltimate
+  BinUltimate,
+  StreamlineMonitor,
+  StreamlineAutomate
 } from "./Bindapt/BindaptDescriber";
 import { NexusST } from "./Nexus/NexusDescriber";
 import { MiPCAV2, OmniAir } from "./OmniAir/OmniAirDescriber";
@@ -19,6 +21,7 @@ import { ConfigurablePin } from "pbHelpers/AddressTypes";
 import { useTheme } from "@mui/material";
 import { Device } from "models";
 import { or } from "utils";
+import { MiVent, MiVentV2 } from "./MiVent/MiVentDescriber";
 
 export type ProductTab = "components" | "presets";
 
@@ -87,7 +90,11 @@ const DEVICE_PRODUCT_MAP = new Map<pond.DeviceProduct, DeviceProductDescriber>([
   [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_MOD, BindaptPlusMod],
   [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_PRO_MOD, BindaptPlusProMod],
   [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_V2_MONITOR, BindaptV2Monitor],
-  [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_V2_AUTOMATE, BindaptV2Automate]
+  [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_V2_AUTOMATE, BindaptV2Automate],
+  [pond.DeviceProduct.DEVICE_PRODUCT_MIVENT, MiVent],
+  [pond.DeviceProduct.DEVICE_PRODUCT_MIVENT_V2, MiVentV2],
+  [pond.DeviceProduct.DEVICE_PRODUCT_STREAMLINE_MONITOR, StreamlineMonitor],
+  [pond.DeviceProduct.DEVICE_PRODUCT_STREAMLINE_AUTOMATE, StreamlineAutomate]
 ]);
 
 export function ListDeviceProductDescribers(): DeviceProductDescriber[] {
diff --git a/src/products/MiVent/MiVentAvailability.ts b/src/products/MiVent/MiVentAvailability.ts
new file mode 100644
index 0000000..4002627
--- /dev/null
+++ b/src/products/MiVent/MiVentAvailability.ts
@@ -0,0 +1,61 @@
+import { ConfigurablePin } from "pbHelpers/AddressTypes";
+import { DeviceAvailabilityMap, DevicePositions } from "pbHelpers/DeviceAvailability";
+import { quack } from "protobuf-ts/pond";
+
+const MiVentV1Pins: ConfigurablePin[] = [
+  { address: 4, label: "1" },
+  { address: 8, label: "2" },
+  { address: 16, label: "3" },
+  { address: 512, label: "C1" },
+  { address: 1024, label: "C2" }
+];
+
+export const MiVentV1Availability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, MiVentV1Pins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      [quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]],
+      [quack.ComponentType.COMPONENT_TYPE_AIRFLOW, [0x2a]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);
+
+/*---V2 Stuff starts here---*/
+
+const MiVentV2Pins: ConfigurablePin[] = [
+  { address: 1, label: "1" },
+  { address: 2, label: "2" },
+  { address: 4, label: "3" },
+  { address: 256, label: "L1" },
+  { address: 512, label: "L2" }
+];
+
+export const MiVentV2Availability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, MiVentV2Pins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      [quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]],
+      [quack.ComponentType.COMPONENT_TYPE_AIRFLOW, [0x2a]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);
diff --git a/src/products/MiVent/MiVentDescriber.ts b/src/products/MiVent/MiVentDescriber.ts
new file mode 100644
index 0000000..05592ec
--- /dev/null
+++ b/src/products/MiVent/MiVentDescriber.ts
@@ -0,0 +1,29 @@
+import { DeviceProductDescriber } from "products/DeviceProduct";
+import { pond } from "protobuf-ts/pond";
+import DeviceDarkIcon from "assets/products/Ag/device 1.png";
+import DeviceLightIcon from "assets/products/Ag/device 2.png";
+import { MiVentV1Availability, MiVentV2Availability } from "./MiVentAvailability";
+
+export const MiVent: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_MIVENT,
+  label: "MiVent V1",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? DeviceDarkIcon : DeviceLightIcon;
+  },
+  view: "controller",
+  tabs: ["components"],
+  availability: MiVentV1Availability
+};
+
+/*---V2 Stuff starts here---*/
+
+export const MiVentV2: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_MIVENT_V2,
+  label: "MiVent V2",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? DeviceDarkIcon : DeviceLightIcon;
+  },
+  view: "controller",
+  tabs: ["components"],
+  availability: MiVentV2Availability
+};

From 13b875ce4673e3a278b03cc84e378e14c93cf710 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 11:31:51 -0600
Subject: [PATCH 15/29] adding lel subtype

---
 src/pbHelpers/ComponentTypes/DragerGasDongle.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pbHelpers/ComponentTypes/DragerGasDongle.ts b/src/pbHelpers/ComponentTypes/DragerGasDongle.ts
index c605718..cb2b3c6 100644
--- a/src/pbHelpers/ComponentTypes/DragerGasDongle.ts
+++ b/src/pbHelpers/ComponentTypes/DragerGasDongle.ts
@@ -87,6 +87,11 @@ export function dragerGasDongle(subtype: number = 0): ComponentTypeExtension {
         key: quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_H2S,
         value: "DRAGER_GAS_DONGLE_SUBTYPE_H2S",
         friendlyName: "Drager Gas H2S"
+      },
+      {
+        key: quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_LEL,
+        value: "DRAGER_GAS_DONGLE_SUBTYPE_LEL",
+        friendlyName: "Drager Gas LEL"
       }
     ],
     friendlyName: "Drager Gas",

From 2ea86105256857dd94a94d2ddf06ea74c5643294 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 11:32:45 -0600
Subject: [PATCH 16/29] adding differential pressure subtype

---
 src/pbHelpers/ComponentTypes/Pressure.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pbHelpers/ComponentTypes/Pressure.ts b/src/pbHelpers/ComponentTypes/Pressure.ts
index 3da52c4..c246f69 100644
--- a/src/pbHelpers/ComponentTypes/Pressure.ts
+++ b/src/pbHelpers/ComponentTypes/Pressure.ts
@@ -45,6 +45,11 @@ export function Pressure(subtype: number = 0): ComponentTypeExtension {
         key: quack.PressureSubtype.PRESSURE_SUBTYPE_FROG,
         value: "PRESSURE_SUBTYPE_FROG",
         friendlyName: "Pressure (Frog)"
+      } as Subtype,
+      {
+        key: quack.PressureSubtype.PRESSURE_SUBTYPE_DIFFERENTIAL_PRESSURE,
+        value: "PRESSURE_SUBTYPE_DIFFERENTIAL_PRESSURE",
+        friendlyName: "Pressure Differential"
       } as Subtype
     ],
     friendlyName: "Pressure",

From ee4ecb00365ec1af737f50252d6e96f1f59be24a Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 11:34:55 -0600
Subject: [PATCH 17/29] making the LEL display as a percent the same as O2

---
 src/pbHelpers/ComponentTypes/DragerGasDongle.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pbHelpers/ComponentTypes/DragerGasDongle.ts b/src/pbHelpers/ComponentTypes/DragerGasDongle.ts
index cb2b3c6..a8f2090 100644
--- a/src/pbHelpers/ComponentTypes/DragerGasDongle.ts
+++ b/src/pbHelpers/ComponentTypes/DragerGasDongle.ts
@@ -167,7 +167,8 @@ export function dragerGasDongle(subtype: number = 0): ComponentTypeExtension {
         lines: [],
         average: []
       };
-      if (subtype === quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_O2) {
+      //sets the value as a percent for the chart data
+      if (subtype === quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_O2 || subtype === quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_LEL) {
         let firstTime: Moment | undefined;
         let lastTime: Moment | undefined;
         let valMap: Map<number, number[]> = new Map<number, number[]>();

From b604481d43791776f053961f74b3f0d0bd3f098e Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 11:38:18 -0600
Subject: [PATCH 18/29] missed the measurement describer part

---
 src/pbHelpers/MeasurementDescriber.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pbHelpers/MeasurementDescriber.ts b/src/pbHelpers/MeasurementDescriber.ts
index ee45c8f..a364b77 100644
--- a/src/pbHelpers/MeasurementDescriber.ts
+++ b/src/pbHelpers/MeasurementDescriber.ts
@@ -334,6 +334,7 @@ export class MeasurementDescriber {
                 this.details.unit = "mV";
                 break;
               case quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_O2:
+              case quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_LEL:
                 this.details.colour = blue["400"];
                 this.details.decimals = 1;
                 this.details.unit = "%";
@@ -342,7 +343,7 @@ export class MeasurementDescriber {
                   mode: "toStored" | "toDisplay"
                 ): number => {
                   if (mode === "toStored") {
-                    //for O2 dragers the display is in percentage so convert the percent to ppm
+                    //for O2/LEL dragers the display is in percentage so convert the percent to ppm
                     return value * 10000;
                   }
                   return value / 10000;

From 32c2fbdb6e2be17e07a2c79c9d7f812b1aec82dc Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 12:13:10 -0600
Subject: [PATCH 19/29] StatusGas now displays overlays and can be grouped

---
 src/common/StatusGas.tsx | 172 ++++++++++++++++++++-------------------
 src/pages/Devices.tsx    |  44 +++++++---
 2 files changed, 120 insertions(+), 96 deletions(-)

diff --git a/src/common/StatusGas.tsx b/src/common/StatusGas.tsx
index b0ebb85..a714ba5 100644
--- a/src/common/StatusGas.tsx
+++ b/src/common/StatusGas.tsx
@@ -5,6 +5,7 @@ import { Device } from "models";
 import PulseBox from "./PulseBox";
 import { or } from "utils";
 import { useEffect, useState } from "react";
+import { pond } from "protobuf-ts/pond";
 
 interface Props {
   device: Device
@@ -54,104 +55,107 @@ export default function StatusGas(props: Props) {
   const { device, gasType } = props;
   const classes = useStyles()
   // console.log(noDust)
-  // const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
-  // const messages = or(device.status.sen5x?.overlays.map(overlay => overlay.message), []);
+  const colors = or(device.status.o2?.overlays.map(overlay => overlay.color), []);
+  const messages = or(device.status.o2?.overlays.map(overlay => overlay.message), []);
 
-  // const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
-  // const [, setColorIndex] = useState(0)
+  const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
+  const [, setColorIndex] = useState(0)
 
-  // useEffect(() => {
-  //   const interval = setInterval(() => {
-  //     setColorIndex(prevIndex => {
-  //       const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
-  //       setColor(colors[newIndex]); // Use the new index here
-  //       return newIndex;
-  //     });
-  //   }, 7500);
+  const gasTypes: ("o2" | "no2" | "co2" | "co")[] = ["o2", "no2", "co2", "co"]
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setColorIndex(prevIndex => {
+        const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
+        setColor(colors[newIndex]); // Use the new index here
+        return newIndex;
+      });
+    }, 7500);
     
-  //   return () => clearInterval(interval);
-  // }, []);
+    return () => clearInterval(interval);
+  }, []);
 
-  // const [currentIndex, setCurrentIndex] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState(0);
 
   // Auto-cycle through measurements every 5 seconds
-  // useEffect(() => {
-    // if (noDust) {
-    //   setCurrentIndex(0)
-    //   return
-    // }
-    // const interval = setInterval(() => {
-      // if (!noDust) setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
-      // setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
-    // }, 5000); 
+  useEffect(() => {
+    if (gasType !== "all") {
+      setCurrentIndex(0)
+      return
+    }
+    const interval = setInterval(() => {
+      if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
+    }, 5000); 
 
-    // return () => clearInterval(interval); // Cleanup on unmount
-  // }, [noDust]);
+    return () => clearInterval(interval); // Cleanup on unmount
+  }, [gasType]);
 
-  // const tooltip = () => {
-  //   if (messages.length === 0) return null
-  //   if (messages.length < 2) return (
-  //     messages[0]
-  //   )
-  //   return (
-  //     <Grid2 container direction={"column"}>
-  //       <Grid2 container direction="row">
-  //         <Typography fontWeight={"bold"} variant="caption">
-  //           Overlay Messages
-  //         </Typography>
-  //       </Grid2>
-  //       {messages.map((message, index) => {
-  //         return (
-  //           <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignItems={"center"}>
-  //             <Box
-  //               sx={{
-  //                 width: 10, // Size of the square
-  //                 height: 10,
-  //                 backgroundColor: colors[index], // Passed color prop
-  //                 borderRadius: 1, // Optional: slight rounding, remove for sharp square
-  //                 border: "1px solid black",
-  //               }}
-  //             />
-  //             <Typography variant="caption" sx={{ marginLeft: 1 }}>
-  //               {message}
-  //             </Typography>
-  //           </Grid2>
-  //         )
-  //       })}
-  //     </Grid2>
-  //   )
-  // }
+  const tooltip = () => {
+    if (messages.length === 0) return null
+    if (messages.length < 2) return (
+      messages[0]
+    )
+    return (
+      <Grid2 container direction={"column"}>
+        <Grid2 container direction="row">
+          <Typography fontWeight={"bold"} variant="caption">
+            Overlay Messages
+          </Typography>
+        </Grid2>
+        {messages.map((message, index) => {
+          return (
+            <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignItems={"center"}>
+              <Box
+                sx={{
+                  width: 10, // Size of the square
+                  height: 10,
+                  backgroundColor: colors[index], // Passed color prop
+                  borderRadius: 1, // Optional: slight rounding, remove for sharp square
+                  border: "1px solid black",
+                }}
+              />
+              <Typography variant="caption" sx={{ marginLeft: 1 }}>
+                {message}
+              </Typography>
+            </Grid2>
+          )
+        })}
+      </Grid2>
+    )
+  }
 
   const gasDisplay = () => {
-    if (gasType !== "all") {
-      return(
-        // <Tooltip title={tooltip()}>
-          <PulseBox color="" className={classes.box} >
-            <Grid2 container direction="column" >
-              <Grid2 container direction="column">
-                <Grid2>
-                  {gasType !== "o2" ? 
-                    <Typography variant="body2" style={{ color: teal[500]}}>
-                      Gas: {device.status[gasType]?.ppm.toFixed(1)}ppm
-                    </Typography>
-                  :
-                    <Typography variant="body2" style={{ color: blue[500]}}>
-                      Gas: {(device.status[gasType]?.ppm!/10000).toFixed(1)}%
-                    </Typography>
-                  }
-                </Grid2>
-                <Grid2>
-                  <Typography variant="body2" style={{ color: deepOrange[800]}}>
-                    Volt: {device.status[gasType]?.millivolts.toFixed(1)}mV
+    const gas = gasType === "all" ? gasTypes[currentIndex] : gasType
+    // if (gasType !== "all") {
+    return (
+      <Tooltip title={tooltip()}>
+        <PulseBox color={color} className={classes.box} >
+          <Grid2 container direction="column" >
+            <Grid2 container direction="column">
+              <Grid2>
+                {gas !== "o2" ? 
+                  <Typography variant="body2" style={{ color: teal[500]}}>
+                    Gas: {device.status[gas]?.ppm.toFixed(1)}ppm
                   </Typography>
-                </Grid2>
+                :
+                  <Typography variant="body2" style={{ color: blue[500]}}>
+                    Gas: {(device.status[gas]?.ppm!/10000).toFixed(1)}%
+                  </Typography>
+                }
+              </Grid2>
+              <Grid2>
+                <Typography variant="body2" style={{ color: deepOrange[800]}}>
+                  Volt: {device.status[gas]?.millivolts.toFixed(1)}mV
+                </Typography>
               </Grid2>
             </Grid2>
-          </PulseBox>
-        // </Tooltip>
-      )
+          </Grid2>
+        </PulseBox>
+      </Tooltip>
+    )
       
-    }
+    // }
   }
 
   return (
diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index dcd2c1c..bc43773 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -138,6 +138,15 @@ export default function Devices() {
     localStorage.setItem('separateDust', separateDust.toString());
   }, [separateDust]);
 
+  const [groupGas, setGroupGas] = useState(() => {
+    const stored = localStorage.getItem('groupGas');
+    return stored !== null ? stored === 'true' : false;
+  });
+
+  useEffect(() => {
+    localStorage.setItem('groupGas', groupGas.toString());
+  }, [groupGas]);
+
   const [preferencesAnchor, setPreferencesAnchor] = useState<any>(null)
 
   const [{ as }] = useGlobalState()
@@ -320,9 +329,9 @@ export default function Devices() {
     return '/' + newSegments.join('/');
   }
 
-  useEffect(() => {
-    console.log(devices)
-  }, [devices])
+  // useEffect(() => {
+  //   console.log(devices)
+  // }, [devices])
 
   const toDevice = (device: Device) => {
     let url = getGroup() ? insertGroupContext(getGroup().id().toString(), device.id().toString()) : ""
@@ -455,12 +464,12 @@ export default function Devices() {
     }
     if (hasCo) {
       columns.push({
-        title: "CO",
+        title: groupGas ? "Gas" : "CO",
         render: (device: Device) => {
           if (device.status.co) {
             return (
               <Box sx={{ marginLeft: 1 }}>
-                <StatusGas device={device} gasType={"co"}/>
+                <StatusGas device={device} gasType={groupGas ? "all" : "co"}/>
               </Box>
             )
           } else {
@@ -471,7 +480,7 @@ export default function Devices() {
         }
       })
     }
-    if (hasCo2) {
+    if (hasCo2 && !groupGas) {
       columns.push({
         title: "CO2",
         render: (device: Device) => {
@@ -489,7 +498,7 @@ export default function Devices() {
         }
       })
     }
-    if (hasNo2) {
+    if (hasNo2 && !groupGas) {
       columns.push({
         title: "NO2",
         render: (device: Device) => {
@@ -507,7 +516,7 @@ export default function Devices() {
         }
       })
     }
-    if (hasCo2) {
+    if (hasO2 && !groupGas) {
       columns.push({
         title: "O2",
         render: (device: Device) => {
@@ -625,8 +634,6 @@ export default function Devices() {
     )
   }
 
-
-
   const preferencesMenu = () => {
     return (
       <Menu
@@ -642,10 +649,23 @@ export default function Devices() {
           >
             <ListItemIcon>
               <Checkbox 
-                checked={separateDust}
+                checked={!separateDust}
               />
             </ListItemIcon>
-            <ListItemText primary={"Seperate Dust"} />
+            <ListItemText primary={"Group Dust"} />
+          </MenuItem>
+          <MenuItem 
+            onClick={() => setGroupGas(!groupGas)}
+            sx={{ marginLeft: -0.75 }}
+            dense
+          >
+            <ListItemIcon>
+              <Checkbox 
+                checked={groupGas}
+
+              />
+            </ListItemIcon>
+            <ListItemText primary={"Group Gas"} />
           </MenuItem>
       </Menu>
     )

From 7d1081ea505947d7b0385809aa011555c171e05f Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 13:13:37 -0600
Subject: [PATCH 20/29] gas status now rotates through overlays properly, shows
 the correct readings when grouped

---
 src/common/StatusGas.tsx | 69 +++++++++++++++++++++++++++++-----------
 1 file changed, 51 insertions(+), 18 deletions(-)

diff --git a/src/common/StatusGas.tsx b/src/common/StatusGas.tsx
index a714ba5..dd9737f 100644
--- a/src/common/StatusGas.tsx
+++ b/src/common/StatusGas.tsx
@@ -26,6 +26,16 @@ const useStyles = makeStyles((theme: Theme) => {
       width: theme.spacing(14),
       height: theme.spacing(6),
     },
+    boxTall: {
+      display: "inline-block",
+      borderRadius: "6px",
+      backgroundColor: lightMode ? "rgb(210, 210, 210)" : "rgb(50, 50, 50)",
+      padding: theme.spacing(0.75),
+      marginRight: "auto",
+      margin: theme.spacing(1),
+      width: theme.spacing(14),
+      height: theme.spacing(8),
+    },
     carouselContainer: {
       position: 'relative',
       height: '40px',
@@ -55,8 +65,21 @@ export default function StatusGas(props: Props) {
   const { device, gasType } = props;
   const classes = useStyles()
   // console.log(noDust)
-  const colors = or(device.status.o2?.overlays.map(overlay => overlay.color), []);
-  const messages = or(device.status.o2?.overlays.map(overlay => overlay.message), []);
+  let colors: string[] = []
+  let messages: string[] = []
+  if (gasType === "all") {
+    colors = or(device.status.o2?.overlays.map(overlay => overlay.color), []);
+    colors.push(...or(device.status.co2?.overlays.map(overlay => overlay.color), []));
+    colors.push(...or(device.status.no2?.overlays.map(overlay => overlay.color), []));
+    colors.push(...or(device.status.co?.overlays.map(overlay => overlay.color), []));
+    messages = or(device.status.o2?.overlays.map(overlay => overlay.message), []);
+    messages.push(...or(device.status.co2?.overlays.map(overlay => overlay.message), []));
+    messages.push(...or(device.status.no2?.overlays.map(overlay => overlay.message), []));
+    messages.push(...or(device.status.co?.overlays.map(overlay => overlay.message), []));
+  } else {
+    colors = or(device.status[gasType]?.overlays.map(overlay => overlay.color), []);
+    messages = or(device.status[gasType]?.overlays.map(overlay => overlay.message), []);
+  }
 
   const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
   const [, setColorIndex] = useState(0)
@@ -85,8 +108,8 @@ export default function StatusGas(props: Props) {
     }
     const interval = setInterval(() => {
       if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
-      setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
-    }, 5000); 
+      else setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
+    }, 6000); 
 
     return () => clearInterval(interval); // Cleanup on unmount
   }, [gasType]);
@@ -105,19 +128,24 @@ export default function StatusGas(props: Props) {
         </Grid2>
         {messages.map((message, index) => {
           return (
-            <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignItems={"center"}>
-              <Box
-                sx={{
-                  width: 10, // Size of the square
-                  height: 10,
-                  backgroundColor: colors[index], // Passed color prop
-                  borderRadius: 1, // Optional: slight rounding, remove for sharp square
-                  border: "1px solid black",
-                }}
-              />
-              <Typography variant="caption" sx={{ marginLeft: 1 }}>
-                {message}
-              </Typography>
+            <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignContent={"center"}>
+              <Grid2 size={{xs: 1}} alignContent={"center"}>
+                <Box
+                  sx={{
+                    width: 12, // Size of the square
+                    height: 12,
+                    backgroundColor: colors[index], // Passed color prop
+                    borderRadius: 3, // Optional: slight rounding, remove for sharp square
+                    border: "1px solid black",
+                    marginBottom: 0.4
+                  }}
+                />
+              </Grid2>
+              <Grid2 size={{ xs: 11 }} alignContent={"center"}>
+                <Typography variant="caption">
+                  {message}
+                </Typography>
+              </Grid2>
             </Grid2>
           )
         })}
@@ -130,8 +158,13 @@ export default function StatusGas(props: Props) {
     // if (gasType !== "all") {
     return (
       <Tooltip title={tooltip()}>
-        <PulseBox color={color} className={classes.box} >
+        <PulseBox color={color} className={gasType === "all" ? classes.boxTall : classes.box}>
           <Grid2 container direction="column" >
+            { gasType === "all" &&
+              <Typography variant="body2">
+                {gas.toUpperCase()}
+              </Typography>
+            }
             <Grid2 container direction="column">
               <Grid2>
                 {gas !== "o2" ? 

From eacc32352b702be1b478be8daffa69c373188e4b Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 13:30:26 -0600
Subject: [PATCH 21/29] minor styling change, got rid of code warnings

---
 src/common/StatusGas.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/common/StatusGas.tsx b/src/common/StatusGas.tsx
index dd9737f..7b40e60 100644
--- a/src/common/StatusGas.tsx
+++ b/src/common/StatusGas.tsx
@@ -1,11 +1,10 @@
 import { Box, Grid2, Theme, Tooltip, Typography } from "@mui/material";
-import { blue, deepOrange, green, grey, orange, teal } from "@mui/material/colors";
+import { blue, deepOrange, teal } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import { Device } from "models";
 import PulseBox from "./PulseBox";
 import { or } from "utils";
 import { useEffect, useState } from "react";
-import { pond } from "protobuf-ts/pond";
 
 interface Props {
   device: Device
@@ -34,7 +33,7 @@ const useStyles = makeStyles((theme: Theme) => {
       marginRight: "auto",
       margin: theme.spacing(1),
       width: theme.spacing(14),
-      height: theme.spacing(8),
+      height: theme.spacing(8.5),
     },
     carouselContainer: {
       position: 'relative',

From bad50e21910149495fce56740a45fd6f9fd794b4 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 13:57:04 -0600
Subject: [PATCH 22/29] saving and loading order and orderBy to and from
 session storage

---
 src/pages/Devices.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index 09c9ae6..429c296 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -92,8 +92,30 @@ export default function Devices() {
   const [devicesLoading, setDevicesLoading] = useState(false)
   const [limit, setLimit] = useState(10);
   const [page, setPage] = useState(0);
-  const [order, setOrder] = useState<"asc" | "desc">("asc");
-  const [orderBy, setOrderBy] = useState("name");
+
+  const [order, setOrder] = useState<"asc" | "desc">(() => {
+    // Load from sessionStorage on initial render
+    const savedOrder = sessionStorage.getItem('order');
+    return (savedOrder === "asc" || savedOrder === "desc") ? savedOrder : "asc";
+  });
+
+  // Save to sessionStorage whenever order changes
+  useEffect(() => {
+    sessionStorage.setItem('order', order);
+  }, [order]);
+
+  const [orderBy, setOrderBy] = useState(() => {
+    // Load from sessionStorage on initial render
+    const savedOrder = sessionStorage.getItem('orderBy');
+    return (savedOrder && savedOrder?.length > 0) ? savedOrder : "name";
+  });
+
+  // Save to sessionStorage whenever order changes
+  useEffect(() => {
+    sessionStorage.setItem('orderBy', orderBy);
+  }, [orderBy]);
+
+  // const [orderBy, setOrderBy] = useState("name");
   const [search, setSearch] = useState("");
   const [total, setTotal] = useState(0);
   const [devices, setDevices] = useState<Device[]>([])

From 6f2c6ca255434fc3402e520b3f3e07c9dd7d9ac7 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 14:12:08 -0600
Subject: [PATCH 23/29] clicking new column always starts in ascending, cycling
 the same column can turn off sorting

---
 src/common/ResponsiveTable.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx
index 3f637d3..cd16f01 100644
--- a/src/common/ResponsiveTable.tsx
+++ b/src/common/ResponsiveTable.tsx
@@ -387,8 +387,21 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   const columnClick = (column: Column<T>) => {
     const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase()
     // console.log(column.sortKey)
-    if (setOrderBy) setOrderBy(sortKey)
-    if (setOrder && order) setOrder(order === "asc" ? "desc" : "asc")
+    if (setOrderBy) {
+      if (orderBy === sortKey && setOrder && order) {
+        console.log(order)
+        if (order === "desc") {
+          setOrder("asc")
+        } else {
+          setOrderBy("")
+        }
+        // setOrder(order === "asc" ? "desc" : "asc")
+      } else {
+        if (setOrder) setOrder("desc")
+        setOrderBy(sortKey)
+      }
+    }
+    // if (setOrder && order) setOrder(order === "asc" ? "desc" : "asc")
   }
 
   const showOrderIcon = (column: Column<T>) => {

From 6598c8e14c15aab0950fb2b909b1dba7d4bb26b5 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 14:15:33 -0600
Subject: [PATCH 24/29] git rid of debug output

---
 src/common/ResponsiveTable.tsx | 1 -
 src/pages/Devices.tsx          | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx
index cd16f01..cf8bcc4 100644
--- a/src/common/ResponsiveTable.tsx
+++ b/src/common/ResponsiveTable.tsx
@@ -389,7 +389,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     // console.log(column.sortKey)
     if (setOrderBy) {
       if (orderBy === sortKey && setOrder && order) {
-        console.log(order)
         if (order === "desc") {
           setOrder("asc")
         } else {
diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index 429c296..325af59 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -315,10 +315,6 @@ export default function Devices() {
     if (newValue === "never") openGroupSettings(undefined, "add");
   };
 
-  useEffect(() => {
-    console.log(devices)
-  }, [devices])
-
   const columns = (): Column<Device>[] => {
     let columns: Column<Device>[] = [
       {

From 76fdc36e5386823ef7ea958b73e4204da244e794 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 15:04:27 -0600
Subject: [PATCH 25/29] fixed circle graph for offline devices

---
 src/device/DevicesSummary.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/device/DevicesSummary.tsx b/src/device/DevicesSummary.tsx
index e09a5e6..827ffbb 100644
--- a/src/device/DevicesSummary.tsx
+++ b/src/device/DevicesSummary.tsx
@@ -4,7 +4,7 @@ import {
   Check, 
   PermScanWifi,
 } from "@mui/icons-material";
-import { Card, Grid2, Skeleton, Theme, Typography, useTheme } from "@mui/material";
+import { Card, Grid2, Theme, Typography } from "@mui/material";
 import { green } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import classNames from "classnames";
@@ -41,7 +41,7 @@ interface Props {
 export default function DevicesSummary(props: Props) {
   const { setFieldContains, group } = props;
   const deviceAPI = useDeviceAPI()
-  const theme = useTheme()
+  // const theme = useTheme()
   const classes = useStyles()
   
   const [stats, setStats] = useState<pond.DeviceStatistics>(pond.DeviceStatistics.create())
@@ -205,7 +205,7 @@ export default function DevicesSummary(props: Props) {
             <Grid2>
               <CircleGraphIcon 
                 sx={{ marginRight: 1, marginLeft: 1 }} 
-                progress={!loadingStats ? getPercent(stats.warning) : undefined} 
+                progress={!loadingStats ? getPercent(stats.offline) : undefined} 
                 color={green[50]} 
                 icon={<PermScanWifi />}
               />

From d6a76203ef522827f8175ebc8ad0a2b1631dbc5d Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 15:15:55 -0600
Subject: [PATCH 26/29] added load more function to the responsive table for
 mobile view

---
 src/common/ResponsiveTable.tsx | 26 ++++++++++++++++----------
 src/pages/DeviceComponent.tsx  | 28 +++++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx
index ec1c317..945444b 100644
--- a/src/common/ResponsiveTable.tsx
+++ b/src/common/ResponsiveTable.tsx
@@ -1,6 +1,6 @@
-import { Box, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
+import { Box, Button, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { ArrowDownward, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
+import { ArrowDownward, ArrowLeft, ArrowRight, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
 import { useEffect, useState } from "react";
 import React from "react";
 import { useMobile } from "hooks";
@@ -98,7 +98,7 @@ interface Props<T> {
   setOrderBy?: React.Dispatch<React.SetStateAction<string>>;
   order?: string;
   setOrder?: React.Dispatch<React.SetStateAction<"asc" | "desc">>;
-  endTitleElement?: string | JSX.Element | (() => string | JSX.Element);
+  loadMore?: () => void
 }
 
 export default function ResponsiveTable<T extends Object>(props: Props<T>) {
@@ -131,14 +131,14 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     orderBy,
     setOrderBy,
     order, 
-    setOrder
+    setOrder,
+    loadMore
   } = props
   const classes = useStyles();
   const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
   const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle
   const title = typeof(props.title) === "function" ? props.title() : props.title
   // const order = props.order ? props.order : "asc"
-  const endTitleElement = typeof(props.endTitleElement) === "function" ? props.endTitleElement() : props.endTitleElement
 
   const isMobile = useMobile()
 
@@ -320,13 +320,11 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
 
   if (isMobile || mobileView) return (
     <Box>
-      
       <Box className={classes.mobileTitleBox}>
         {renderTitle()}
         {renderSubtitle()}
         {setSearchText && searchBar()}
       </Box>
-      
       {rows.map((row, index) => {
         return (
           <Card className={classNames(classes.card)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
@@ -375,6 +373,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
           </Box>
         )
       }
+      {(loadMore && rows.length < total) &&
+        <Box>
+          <Button 
+            onClick={loadMore}
+            color="primary"
+            sx={{width: "100%"}} 
+            variant="contained">
+              Load More
+          </Button>
+        </Box>
+      }
     </Box>
   )
 
@@ -426,9 +435,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                     <Grid2>
                       {actions && actions}
                     </Grid2>
-                    <Grid2>
-                      {endTitleElement}
-                    </Grid2>
                     <Grid2>
                       {setSearchText &&<Box className={classes.searchContainer}>
                         {searchBar()}
diff --git a/src/pages/DeviceComponent.tsx b/src/pages/DeviceComponent.tsx
index 424de58..c04a1b2 100644
--- a/src/pages/DeviceComponent.tsx
+++ b/src/pages/DeviceComponent.tsx
@@ -23,6 +23,7 @@ import {
 } from "hooks";
 import InteractionChip from "interactions/InteractionChip";
 import InteractionSettings from "interactions/InteractionSettings";
+import { cloneDeep } from "lodash";
 // import MaterialTable from "material-table";
 import { Component, Device, deviceScope, Group, Interaction } from "models";
 import { convertedUnitMeasurement, MeasurementsFor, UnitMeasurement } from "models/UnitMeasurement";
@@ -450,7 +451,6 @@ export default function DeviceComponent() {
       // });
     })
     .catch((err: any) => {
-      
       // resolve({
       //   data: [],
       //   page: 0,
@@ -613,6 +613,32 @@ export default function DeviceComponent() {
           pageSize={pageSize}
           setPage={setPage}
           handleRowsPerPageChange={handleRowsPerPageChange}
+          loadMore={() => {
+            let currentRows = cloneDeep(rows)
+            let newOffset = rows.length
+            componentAPI.listUnitMeasurements(      
+              deviceID,
+              componentID,
+              startDate,
+              endDate,
+              pageSize,
+              newOffset,
+              order,
+              undefined,
+              getContextKeys(),
+              getContextTypes(),
+              showErrors,
+              as)
+              .then(resp => {
+                  let newRows = UnitMeasurement.convertMeasurements(
+                  resp.data.measurements.map(um => UnitMeasurement.any(um, user))
+                )
+                setRows(currentRows.concat(newRows))
+              }).catch(err => {
+                
+              })
+            
+          }}
         />
       </Grid>
     );

From 159a0638e75f96a756bc582e9740772a3a024d8c Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 15:23:19 -0600
Subject: [PATCH 27/29] merging issues resolved

---
 src/common/ResponsiveTable.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx
index d371ebd..628836c 100644
--- a/src/common/ResponsiveTable.tsx
+++ b/src/common/ResponsiveTable.tsx
@@ -1,6 +1,6 @@
 import { Box, Button, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { ArrowDownward, ArrowLeft, ArrowRight, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
+import { ArrowDownward, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
 import { useEffect, useState } from "react";
 import React from "react";
 import { useMobile } from "hooks";
@@ -98,6 +98,7 @@ interface Props<T> {
   setOrderBy?: React.Dispatch<React.SetStateAction<string>>;
   order?: string;
   setOrder?: React.Dispatch<React.SetStateAction<"asc" | "desc">>;
+  endTitleElement?: string | JSX.Element | (() => string | JSX.Element);
   loadMore?: () => void
 }
 
@@ -139,6 +140,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle
   const title = typeof(props.title) === "function" ? props.title() : props.title
   // const order = props.order ? props.order : "asc"
+  const endTitleElement = typeof(props.endTitleElement) === "function" ? props.endTitleElement() : props.endTitleElement
 
   const isMobile = useMobile()
 
@@ -447,6 +449,9 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                     <Grid2>
                       {actions && actions}
                     </Grid2>
+                    <Grid2>
+                      {endTitleElement}
+                    </Grid2>
                     <Grid2>
                       {setSearchText &&<Box className={classes.searchContainer}>
                         {searchBar()}

From 3368a9112f3e358d8de90753b0988bc67331e3d2 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Fri, 23 May 2025 16:13:39 -0600
Subject: [PATCH 28/29] adding load more functionality to the devices and teams
 mobile tables

---
 src/pages/Devices.tsx  | 36 ++++++++++++++++++++++++++++++++++++
 src/teams/TeamList.tsx | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+)

diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index faf2f6d..77fe11d 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -26,6 +26,7 @@ import StatusPlenum from "common/StatusPlenum";
 import StatusSen5x from "common/StatusSen5x";
 import StatusDust from "common/StatusDust";
 import StatusGas from "common/StatusGas";
+import { cloneDeep } from "lodash";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -751,6 +752,41 @@ export default function Devices() {
         orderBy={orderBy}
         setOrderBy={setOrderBy}
         endTitleElement={preferencesButton}
+        loadMore={()=>{
+          let currentRows = cloneDeep(devices)
+          deviceAPI.list(
+            limit, 
+            currentRows.length,
+            order, 
+            orderBy, 
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            getKeys(),
+            getTypes(),
+            fieldContains,
+            search,
+            as
+          ).then(resp => {
+            let newDevices: Device[] = []
+            resp.data.devices.forEach(device => {
+              if (device.status?.plenum?.temperature) setHasPlenums(true)
+              if (device.status?.sen5x?.temperature) setHasSen5x(true)
+              if (device.status?.o2) setHasO2(true)
+              if (device.status?.co) setHasCo(true)
+              if (device.status?.co2) setHasCo2(true)
+              if (device.status?.no2) setHasNo2(true)
+              newDevices.push(Device.create(device))
+            })
+            setDevices(currentRows.concat(newDevices))
+          }).catch(err => {
+
+          })
+        }}
       />
       <ProvisionDevice
         isOpen={isProvisionDialogOpen}
diff --git a/src/teams/TeamList.tsx b/src/teams/TeamList.tsx
index 6bb313f..7742033 100644
--- a/src/teams/TeamList.tsx
+++ b/src/teams/TeamList.tsx
@@ -251,6 +251,47 @@ export default function TeamList() {
       isLoading={loading}
       renderGutter={isMobile ? renderGutter : undefined}
       hideKeys
+      loadMore={() => {
+        let current = cloneDeep(teams)
+        setLoading(true);
+        let newTeamPerms: Map<string | number, pond.Permission[]> = new Map();
+        let newTeamPrefs: Map<string | number, pond.TeamPreferences> = new Map();
+        let viewAs: string | undefined = as
+        if (as === team.key()) {
+          viewAs = undefined
+        }
+        teamAPI
+      .listTeams(limit, current.length, undefined, "name", undefined, undefined, " ", search)
+      .then(resp => {
+        setTotal(resp.data.total ? resp.data.total : 0);
+        let newTeams: Team[] = []
+        resp.data.teams.forEach(team => {
+          let u = viewAs ? viewAs : user.id();
+          let t = Team.create(team)
+          if (team.settings && u !== "") {
+            userAPI
+              .getUser(u, teamScope(team.settings.key))
+              .then(resp => {
+                newTeamPerms.set(t.key(), resp.permissions)
+                newTeamPrefs.set(t.key(), resp.preferences)
+                t.preferences = cloneDeep(resp.preferences)
+                t.permissions = cloneDeep(resp.permissions)
+              }).catch(() => {
+                snackbar.error("Error loading teams.")
+              })
+              .finally(() => {
+                setTeamPerms(newTeamPerms);
+                setTeamPrefs(newTeamPrefs);
+              });
+          }
+          newTeams.push(t)
+        });
+        setTeams(current.concat(newTeams));
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+      }}
     />
     <TeamSettings
       teamDialogOpen={teamDialogOpen}

From 48d792d76d298bf83911d15dd31d76d1a278f010 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Mon, 26 May 2025 09:42:39 -0600
Subject: [PATCH 29/29] fixed column sizing when all gas readings are visible

---
 src/pages/Devices.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index bc43773..334115d 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -59,14 +59,14 @@ const useStyles = makeStyles((theme: Theme) => {
       margin: theme.spacing(1),
       marginLeft: theme.spacing(2),
       display: "flex",
-      width: theme.spacing(32)
+      // width: theme.spacing(26)
       // justifyContent: "center",
     },
     tagsCellContainer: {
       margin: theme.spacing(1),
       marginLeft: theme.spacing(2),
       display: "flex",
-      width: theme.spacing(24)
+      width: theme.spacing(18)
       // justifyContent: "center",
     },
     green: {
@@ -382,12 +382,13 @@ export default function Devices() {
         title: "Description",
         render: (device: Device) => {
           const description = device.settings?.description ?? ""
+          let size = (hasCo2 && !groupGas) ? 26 : 36
           return (
-            <Box className={classes.descriptionCellContainer}>
-              <Tooltip title={device.settings?.description}>
+            <Box className={classes.descriptionCellContainer} width={size*6}>
+              <Tooltip title={description}>
                 <span>
-                  {description.length > 36
-                    ? description.substring(0, 36) + "..."
+                  {description.length > size
+                    ? description.substring(0, size) + "..."
                     : description}
                 </span>
               </Tooltip>