merged device dashboard status stuff with websockets

package-lock.json

@@ -43,7 +43,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#staging",
+        "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#dev",
         "query-string": "^9.2.1",
         "react": "^18.3.1",
         "react-beautiful-dnd": "^13.1.1",
@@ -11967,7 +11967,7 @@
     },
     "node_modules/protobuf-ts": {
       "version": "1.0.0",
-      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#bcf085706791036841f7047a5b37f00c18e54574",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#40e15b5ed18b10c97125260a2d53a81d1eec398e",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }

src/bin/BinControllerDisplay.tsx

@@ -0,0 +1,168 @@
+import { Component } from "models"
+import React, { useEffect, useState } from "react"
+import { makeStyles } from "@mui/styles";
+import { Box, Button, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
+import AerationFanIcon from "products/AgIcons/AerationFanIcon";
+import { quack } from "protobuf-ts/quack";
+import { useComponentAPI, useMobile, useSnackbar } from "hooks";
+import ButtonGroup from "common/ButtonGroup";
+import ObjectHeaterIcon from "products/Construction/ObjectHeaterIcon";
+import ResponsiveDialog from "common/ResponsiveDialog";
+
+
+interface Props {
+  deviceID: number
+  component: Component
+  currentState?: boolean
+}
+
+const useStyles = makeStyles(() => {
+  return ({
+      controllerDisplay: {
+      display: "flex",
+      justifyContent: "space-between",
+      paddingLeft: 5,
+      paddingRight: 5
+    },
+  })
+})
+
+export default function BinControllerDisplay(props: Props) {
+  const {component, deviceID, currentState} = props
+  const [controllerState, setControllerState] = useState(0)
+  const [openDialog, setOpenDialog] = useState(false)
+  const [newOutputState, setNewOutputState] = useState(0)
+  const {openSnack} = useSnackbar()
+  const componentAPI = useComponentAPI()
+  const isMobile = useMobile()
+  const classes = useStyles()
+
+  useEffect(()=>{
+    setControllerState(component.settings.defaultOutputState)
+  },[component])
+
+
+  const controllerIcon = () => {
+    if(component.subType() === quack.BooleanOutputSubtype.BOOLEAN_OUTPUT_SUBTYPE_HEATER){
+      return <ObjectHeaterIcon />
+    }else{
+      return <AerationFanIcon />
+    }
+  }
+
+  const setController = () => {
+    let newSettings = component.settings
+    newSettings.defaultOutputState = newOutputState
+    componentAPI.update(deviceID, newSettings).then(resp => {
+      openSnack("Updated controllers output state")
+      setControllerState(newOutputState)
+    }).catch(err => {
+      openSnack("There was a problem updating the controller")
+    }).finally(() => {
+      setOpenDialog(false)
+    })
+  }
+
+  const controllerDialog = () => {
+    return (
+      <ResponsiveDialog open={openDialog} onClose={() => {setOpenDialog(false)}}>
+        <DialogTitle>Set Controller State</DialogTitle>
+        <DialogContent>
+          This Action will change the output state of the controller
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={()=>{setOpenDialog(false)}}>Cancel</Button>
+          <Button onClick={()=>{setController()}} variant="contained" color="primary">Confirm</Button>
+        </DialogActions>
+      </ResponsiveDialog>
+    )
+  }
+
+  const componentOn = () => {
+    if(currentState){
+      return currentState
+    }else{
+      let state = false
+      component.status.lastGoodMeasurement.forEach(um => {
+        if(um.type === quack.MeasurementType.MEASUREMENT_TYPE_BOOLEAN){
+          if(um.values.length > 0){
+            let readings = um.values
+            if(readings[readings.length-1].values.length > 0){
+              let nodes = readings[readings.length-1].values
+              if (nodes[nodes.length -1] === 1){
+                state = true
+              }
+            }
+          }
+        }
+      })
+      return state
+    }
+  }
+
+  return (
+    <React.Fragment>
+    {controllerDialog()}
+    <Box className={classes.controllerDisplay} key={component.key()} marginTop={1} marginBottom={1}>
+        <Box display="flex" marginY="auto">
+          <Box margin="auto">
+            {controllerIcon()}
+          </Box>
+          <Typography
+            align="center"
+            style={{
+              marginBottom: "auto",
+              marginTop: "auto",
+              paddingLeft: 5,
+              fontSize: isMobile ? "0.85rem" : "1.0rem",
+              fontWeight: 650
+            }}>
+            {component.name()}
+          </Typography>
+        </Box>
+        <Box display="flex">
+          <ButtonGroup
+            buttons={[
+              {
+                title: "Auto",
+                function: () => {
+                  setNewOutputState(0)
+                  setOpenDialog(true)
+                }
+              },
+              {
+                title: "On",
+                function: () => {
+                  setNewOutputState(1)
+                  setOpenDialog(true)
+                }
+              },
+              {
+                title: "Off",
+                function: () => {
+                  setNewOutputState(2)
+                  setOpenDialog(true)
+                }
+              }
+            ]}
+            toggledButtons={[controllerState]}
+            toggle
+          />
+          <Typography
+            style={{
+              minWidth: 30,
+              marginLeft: "10px",
+              marginBottom: "auto",
+              marginTop: "auto",
+              fontSize: isMobile ? "0.85rem" : "1.0rem",
+              fontWeight: 650,
+              color: componentOn() ? "green" : "orange"
+            }}>
+            {componentOn() ? "ON" : "OFF"}
+          </Typography>
+          </Box>
+      </Box>
+      </React.Fragment>
+  )
+
+}

src/bin/BinVisualizerV2.tsx

@@ -31,7 +31,7 @@ import { round } from "lodash";
 import { Bin, Component, Device } from "models";
 import { GetComponentIcon } from "pbHelpers/ComponentType";
 import { describeMeasurement } from "pbHelpers/MeasurementDescriber";
-import { useMobile } from "hooks";
+import { useComponentAPI, useMobile } from "hooks";
 import { pond } from "protobuf-ts/pond";
 import { quack } from "protobuf-ts/quack";
 import { useGlobalState, useSnackbar } from "providers";
@@ -71,6 +71,7 @@ import { makeStyles } from "@mui/styles";
 import ButtonGroup from "common/ButtonGroup";
 import ModeChangeDialog from "./conditioning/modeChangeDialog";
 import CustomGrainSelector from "grain/CustomGrainSelector";
+import BinControllerDisplay from "./BinControllerDisplay";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -180,7 +181,7 @@ interface Props {
   bin: Bin;
   loading: boolean;
   components: Map<string, Component>;
-  componentDevices?: Map<string, number>;
+  componentDevices: Map<string, number>;
   devices: Device[];
   plenums?: Plenum[];
   ambient?: Ambient;
@@ -289,6 +290,8 @@ export default function BinVisualizer(props: Props) {
   const [modeChangeInProgress, setModeChangeInProgress] = useState(false)
   const [newGrainSettings, setNewGrainSettings] = useState<pond.GrainSettings>()
 
+  const [filteredComponents, setFilteredComponents] = useState<Component[]>([])
+
   useEffect(() => {
     setModeTime(moment(bin.status.lastModeChange));
   }, [bin.status.lastModeChange]);
@@ -1413,13 +1416,21 @@ export default function BinVisualizer(props: Props) {
                 coldestNodeTemp={valueDisplay === "low" ? lowNodeConditions?.tempC : undefined}
                 cableNodeClicked={(cable, fillNode) => {
                   if (cable) {
-                    let devId = componentDevices?.get(cable.key());
+                    let devId = componentDevices.get(cable.key());
                     if (devId) {
                       let device = devMap.get(devId);
                       if (device) {
                         setSelectedCable(cable);
                         setSelectedNode(fillNode);
                         setCableDevice(device);
+                        //need to set the filtered components so that components on other devices do not show up as options in interaction settings
+                        let filtered: Component[] = []
+                        components.forEach((component, key) => {
+                          if(componentDevices.get(key) === devId){
+                            filtered.push(component)
+                          }
+                        })
+                        setFilteredComponents(filtered)
                         setOpenNodeDialog(true);
                       }
                     }
@@ -1544,54 +1555,24 @@ export default function BinVisualizer(props: Props) {
           Controllers
         </Typography>
         <Box className={classes.displayBox}>
-          {bin.status.fans.map(fan => (
+          {bin.status.fans.map(fan => {
-            <Box className={classes.controllerDisplay} key={fan.key}>
+            let fanComp = components.get(fan.key)
-              <Box display="flex">
+            let device = componentDevices.get(fan.key)
-                <AerationFanIcon />
+            if(fanComp && device){
-                <Typography
+              return (
-                  align="center"
+                <BinControllerDisplay key={fanComp.key()} component={fanComp} deviceID={device} currentState={fan.state}/>
-                  style={{
+              )
-                    paddingLeft: 5,
+            }
-                    fontSize: isMobile ? "0.85rem" : "1.0rem",
+          })}
-                    fontWeight: 650
+          {bin.status.heaters.map(heater => {
-                  }}>
+            let heaterComp = components.get(heater.key)
-                  {fan.name}
+            let device = componentDevices.get(heater.key)
-                </Typography>
+            if(heaterComp && device){
-              </Box>
+              return (
-              <Typography
+                <BinControllerDisplay key={heaterComp.key()} component={heaterComp} deviceID={device} currentState={heater.state}/>
-                style={{
+              )
-                  fontSize: isMobile ? "0.85rem" : "1.0rem",
+            }
-                  fontWeight: 650,
+          })}
-                  color: fan.state ? "green" : "orange"
-                }}>
-                {fan.state ? "ON" : "OFF"}
-              </Typography>
-            </Box>
-          ))}
-          {bin.status.heaters.map(heater => (
-            <Box className={classes.controllerDisplay} key={heater.key}>
-              <Box display="flex">
-                <ObjectHeaterIcon />
-                <Typography
-                  align="center"
-                  style={{
-                    paddingLeft: 5,
-                    fontSize: isMobile ? "0.85rem" : "1.0rem",
-                    fontWeight: 650
-                  }}>
-                  {heater.name}
-                </Typography>
-              </Box>
-              <Typography
-                style={{
-                  fontSize: isMobile ? "0.85rem" : "1.0rem",
-                  fontWeight: 650,
-                  color: heater.state ? "green" : "orange"
-                }}>
-                {heater.state ? "ON" : "OFF"}
-              </Typography>
-            </Box>
-          ))}
         </Box>
       </Box>
     );
@@ -2098,7 +2079,7 @@ export default function BinVisualizer(props: Props) {
       {selectedCable && cableDevice && (
         <GrainNodeInteractions
           binKey={bin.key()}
-          interactionComponents={Array.from(components.values())}
+          interactionComponents={filteredComponents}
           grain={bin.grain()}
           cable={selectedCable}
           open={openNodeDialog}

src/common/ButtonGroup.tsx

@@ -49,6 +49,10 @@ interface Props {
    * @default undefined
    */
   toggledButtons?: number[]
+  /**
+   * This can be used to set which button starts toggled by default, and from there it will be controlled internally, toggledButtons will override this
+   */ 
+  defaultToggle?: number
   /**
    * Numerical value for the size of the text for buttons that dont use the icon
    */
@@ -97,7 +101,7 @@ const useStyles = makeStyles((theme: Theme) => {
 })
 
 export default function ButtonGroup(props: Props){
-  const { buttons, toggle, toggledButtons, multiToggle, textSize, disableAll } = props
+  const { buttons, toggle, toggledButtons, defaultToggle, multiToggle, textSize, disableAll } = props
   const classes = useStyles()
   const [currentToggle, setCurrentToggle] = useState<number[]>([])
 
@@ -107,6 +111,8 @@ export default function ButtonGroup(props: Props){
       let toggled: number [] = [0]
       if(toggledButtons){
         toggled = toggledButtons
+      } else if(defaultToggle){
+        toggled = [defaultToggle]
       }
       setCurrentToggle(toggled)
     }

src/common/RelativeTimestamp.tsx

@@ -0,0 +1,38 @@
+import { Typography } from "@mui/material";
+import moment from "moment";
+import { useEffect, useState } from "react";
+
+interface Props {
+  /** RFC3339 timestamp string */
+  timestamp: string;
+}
+
+/**
+ * Displays a timestamp as relative time (e.g. "a minute ago", "5 seconds ago").
+ * Uses a subtle, muted typography style.
+ * Refreshes every 60 seconds to keep the relative text current.
+ */
+export default function RelativeTimestamp({ timestamp }: Props) {
+  const [, setTick] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => setTick((t) => t + 1), 60000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const date = moment(timestamp);
+  if (!date.isValid()) return null;
+
+  return (
+    <Typography
+      variant="caption"
+      sx={{
+        opacity: 0.7,
+        fontSize: "0.7rem",
+        fontStyle: "italic",
+      }}
+    >
+      {date.fromNow()}
+    </Typography>
+  );
+}

src/common/StatusDust.tsx

@@ -3,10 +3,13 @@ import { green } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import { Device } from "models";
 import PulseBox from "./PulseBox";
+import RelativeTimestamp from "./RelativeTimestamp";
 import { or } from "utils";
 import { useEffect, useState } from "react";
+
 interface Props {
-  device: Device
+  device: Device;
+  showTimestamp?: boolean;
 }
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -48,7 +51,7 @@ const useStyles = makeStyles((theme: Theme) => {
 })
 
 export default function StatusDust(props: Props) {
-  const { device } = props;
+  const { device, showTimestamp } = props;
   const classes = useStyles()
 
   const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
@@ -165,6 +168,11 @@ export default function StatusDust(props: Props) {
               </Typography>
             </Grid2>
           </Grid2>
+          {showTimestamp && device.status.sen5x?.timestamp && (
+            <Grid2>
+              <RelativeTimestamp timestamp={device.status.sen5x.timestamp} />
+            </Grid2>
+          )}
         </Grid2>
       </PulseBox>
     </Tooltip>

src/common/StatusGas.tsx

@@ -3,13 +3,14 @@ import { blue, deepOrange, teal } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import { Device } from "models";
 import PulseBox from "./PulseBox";
+import RelativeTimestamp from "./RelativeTimestamp";
 import { or } from "utils";
 import { useEffect, useState } from "react";
 
 interface Props {
-  device: Device
+  device: Device;
-  // noDust?: boolean;
+  gasType: "co2" | "co" | "no2" | "o2" | "lel" | "h2s" | "all";
-  gasType: "co2" | "co" | "no2" | "o2" | "all"
+  showTimestamp?: boolean;
 }
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -23,7 +24,7 @@ const useStyles = makeStyles((theme: Theme) => {
       marginRight: "auto",
       margin: theme.spacing(1),
       width: theme.spacing(14),
-      height: theme.spacing(6),
+      minHeight: theme.spacing(6),
     },
     boxTall: {
       display: "inline-block",
@@ -33,7 +34,7 @@ const useStyles = makeStyles((theme: Theme) => {
       marginRight: "auto",
       margin: theme.spacing(1),
       width: theme.spacing(14),
-      height: theme.spacing(8.5),
+      minHeight: theme.spacing(8.5),
     },
     carouselContainer: {
       position: 'relative',
@@ -61,29 +62,33 @@ const useStyles = makeStyles((theme: Theme) => {
 })
 
 export default function StatusGas(props: Props) {
-  const { device, gasType } = props;
+  const { device, gasType, showTimestamp } = props;
   const classes = useStyles()
   // console.log(noDust)
   let colors: string[] = []
   let messages: string[] = []
   if (gasType === "all") {
-    colors = or(device.status.o2?.overlays.map(overlay => overlay.color), []);
+    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.co2?.overlays?.map(overlay => overlay.color), []));
-    colors.push(...or(device.status.no2?.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), []));
+    colors.push(...or(device.status.co?.overlays?.map(overlay => overlay.color), []));
-    messages = or(device.status.o2?.overlays.map(overlay => overlay.message), []);
+    colors.push(...or(device.status.lel?.overlays?.map(overlay => overlay.color), []));
-    messages.push(...or(device.status.co2?.overlays.map(overlay => overlay.message), []));
+    colors.push(...or(device.status.h2s?.overlays?.map(overlay => overlay.color), []));
-    messages.push(...or(device.status.no2?.overlays.map(overlay => overlay.message), []));
+    messages = or(device.status.o2?.overlays?.map(overlay => overlay.message), []);
-    messages.push(...or(device.status.co?.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), []));
+    messages.push(...or(device.status.lel?.overlays?.map(overlay => overlay.message), []));
+    messages.push(...or(device.status.h2s?.overlays?.map(overlay => overlay.message), []));
   } else {
-    colors = or(device.status[gasType]?.overlays.map(overlay => overlay.color), []);
+    colors = or(device.status[gasType]?.overlays?.map(overlay => overlay.color), []);
-    messages = or(device.status[gasType]?.overlays.map(overlay => overlay.message), []);
+    messages = or(device.status[gasType]?.overlays?.map(overlay => overlay.message), []);
   }
 
   const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
   const [, setColorIndex] = useState(0)
 
-  const gasTypes: ("o2" | "no2" | "co2" | "co")[] = ["o2", "no2", "co2", "co"]
+  const gasTypes: ("o2" | "no2" | "co2" | "co" | "lel" | "h2s")[] = ["o2", "no2", "co2", "co", "lel", "h2s"]
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -106,8 +111,7 @@ export default function StatusGas(props: Props) {
       return
     }
     const interval = setInterval(() => {
-      if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
+      if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % gasTypes.length);
-      else setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
     }, 6000); 
 
     return () => clearInterval(interval); // Cleanup on unmount
@@ -188,14 +192,14 @@ export default function StatusGas(props: Props) {
             }
             <Grid2 container direction="column">
               <Grid2>
-                {gas !== "o2" ? 
+                {(gas === "o2" || gas === "lel") ? 
-                  <Typography variant="body2" style={{ color: teal[500]}}>
-                    Gas: {device.status[gas]?.ppm.toFixed(1)}ppm
-                  </Typography>
-                :
                   <Typography variant="body2" style={{ color: blue[500]}}>
                     Gas: {(device.status[gas]?.ppm!/10000).toFixed(1)}%
                   </Typography>
+                :
+                  <Typography variant="body2" style={{ color: teal[500]}}>
+                    Gas: {device.status[gas]?.ppm.toFixed(1)}ppm
+                  </Typography>
                 }
               </Grid2>
               <Grid2>
@@ -203,6 +207,11 @@ export default function StatusGas(props: Props) {
                   Volt: {device.status[gas]?.millivolts.toFixed(1)}mV
                 </Typography>
               </Grid2>
+              {showTimestamp && device.status[gas]?.timestamp && (
+                <Grid2>
+                  <RelativeTimestamp timestamp={device.status[gas].timestamp} />
+                </Grid2>
+              )}
             </Grid2>
           </Grid2>
         </PulseBox>

src/common/StatusPlenum.tsx

@@ -3,11 +3,13 @@ import { blue, orange } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import { Device } from "models";
 import PulseBox from "./PulseBox";
+import RelativeTimestamp from "./RelativeTimestamp";
 import { or } from "utils";
 import { useEffect, useState } from "react";
 
 interface Props {
-  device: Device
+  device: Device;
+  showTimestamp?: boolean;
 }
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -25,7 +27,7 @@ const useStyles = makeStyles((theme: Theme) => {
 })
 
 export default function StatusPlenum(props: Props) {
-  const { device } = props;
+  const { device, showTimestamp } = props;
   const classes = useStyles()
 
   const colors = or(device.status.plenum?.overlays.map(overlay => overlay.color), []);
@@ -117,6 +119,11 @@ export default function StatusPlenum(props: Props) {
               {device.status.plenum?.humidity.toFixed(1)}%
             </Typography>
           </Grid2>
+          {showTimestamp && device.status.plenum?.timestamp && (
+            <Grid2>
+              <RelativeTimestamp timestamp={device.status.plenum.timestamp} />
+            </Grid2>
+          )}
         </Grid2>
       </PulseBox>
     </Tooltip>

src/common/StatusSen5x.tsx

@@ -3,12 +3,14 @@ import { blue, green, orange } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import { Device } from "models";
 import PulseBox from "./PulseBox";
+import RelativeTimestamp from "./RelativeTimestamp";
 import { or } from "utils";
 import { useEffect, useState } from "react";
 
 interface Props {
-  device: Device
+  device: Device;
   noDust?: boolean;
+  showTimestamp?: boolean;
 }
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -50,7 +52,7 @@ const useStyles = makeStyles((theme: Theme) => {
 })
 
 export default function StatusSen5x(props: Props) {
-  const { device, noDust } = props;
+  const { device, noDust, showTimestamp } = props;
   const classes = useStyles()
   // console.log(noDust)
   const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
@@ -200,6 +202,11 @@ export default function StatusSen5x(props: Props) {
               </Typography>
             </Grid2>
           </Grid2>}
+          {showTimestamp && device.status.sen5x?.timestamp && (
+            <Grid2>
+              <RelativeTimestamp timestamp={device.status.sen5x.timestamp} />
+            </Grid2>
+          )}
         </Grid2>
       </PulseBox>
     </Tooltip>

src/device/DeviceOverview.tsx

@@ -1,5 +1,5 @@
 import { Chip, Grid2 as Grid, Theme, Tooltip, Skeleton } from "@mui/material";
-import { DataUsage, SimCard, Launch } from "@mui/icons-material";
+import { DataUsage, SimCard, Launch, DeviceHub } from "@mui/icons-material";
 import StatusChip from "common/StatusChip";
 import DeviceTags from "device/DeviceTags";
 import VersionChip from "device/VersionChip";
@@ -233,6 +233,17 @@ export default function DeviceOverview(props: Props) {
             <StatusChip status="pending" />
           </Grid>
         )}
+        {device.settings.needsBusControl && (
+          <Grid>
+            <Tooltip title="Device needs the Bus Control component to power the I2C port">
+              <Chip
+                variant="outlined"
+                label={"I2C Bus"}
+                icon={<DeviceHub />}
+              />
+            </Tooltip>
+          </Grid>
+        )}
         {<DeviceTags device={device} disableAdd={disableAddTag} />}
       </Grid>
     );

src/device/DeviceSettings.tsx

@@ -235,6 +235,12 @@ export default function DeviceSettings(props: Props) {
     setDeviceForm(updatedForm);
   };
 
+  const toggleBusRequired = (event: any) => {
+    let updatedForm = Device.clone(deviceForm);
+    updatedForm.settings.needsBusControl = event.target.checked;
+    setDeviceForm(updatedForm);
+  };
+
   const toggleSleeps = (event: any) => {
     let updatedForm = Device.clone(deviceForm);
     let updatedSleeps = event.target.checked;
@@ -500,7 +506,8 @@ export default function DeviceSettings(props: Props) {
             </Grid>
           )}
           {user.hasAdmin() && (
-            <Grid size={{ xs: 12, sm: 12 }}>
+            <React.Fragment>
+            <Grid size={{ xs: 12, sm: 6 }}>
               <FormControlLabel
                 control={
                   <Switch
@@ -516,6 +523,23 @@ export default function DeviceSettings(props: Props) {
                 labelPlacement="end"
               />
             </Grid>
+            <Grid size={{ xs: 12, sm: 6 }}>
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={deviceForm.settings.needsBusControl}
+                    onChange={toggleBusRequired}
+                    name="needsI2CBus"
+                    aria-label="needsI2CBus"
+                    color="secondary"
+                  />
+                }
+                disabled={!canEdit}
+                label="I2C Bus Required"
+                labelPlacement="end"
+              />
+            </Grid>
+            </React.Fragment>
           )}
         </Grid>
       </React.Fragment>

src/gate/GateDevice.tsx

@@ -126,9 +126,24 @@ export default function GateDevice(props: Props) {
     }
   }, [comprehensiveDevice, gate, linkedCompList, user]);
 
-  const gateComponentUpdate = (componentKey: string, gateCompType: pond.GateComponentType) => {
+  const gateComponentUpdate = (oldKey: string, componentKey: string, gateCompType: pond.GateComponentType) => {
+    let promises: any[] = []
+    if (oldKey !== "") {
+      //the promise for removing the pref from the old component
+      promises.push(gateAPI
+        .updatePrefs(
+          gate.key,
+          "component",
+          device.id() + ":" + oldKey,
+          pond.GateComponentType.GATE_COMPONENT_TYPE_UNKNOWN,
+          [gate.key],
+          ["gate"],
+          as
+        ))
+    }
     if (componentKey !== "") {
-      gateAPI
+      //the promise for adding the pref to the new component
+      promises.push(gateAPI
         .updatePrefs(
           gate.key,
           "component",
@@ -137,11 +152,17 @@ export default function GateDevice(props: Props) {
           [gate.key],
           ["gate"],
           as
-        )
+        ))
-        .then(resp => {
-          openSnack("Component Prefence Updated");
-        });
     }
+    Promise.all(promises).then(resp => {
+        openSnack("Component Prefence Updated");
+        let clone = cloneDeep(gate.preferences)
+        clone[oldKey] = pond.GateComponentType.GATE_COMPONENT_TYPE_UNKNOWN
+        clone[componentKey] = gateCompType
+        gate.preferences = clone
+
+      }).catch(
+      );
   };
 
   useEffect(() => {
@@ -205,7 +226,7 @@ export default function GateDevice(props: Props) {
         style={{ fontSize: 8 }}
         onChange={e => {
           var key = e.target.value as string;
-          gateComponentUpdate(key, pond.GateComponentType.GATE_COMPONENT_TYPE_AMBIENT);
+          gateComponentUpdate(ambientKey, key, pond.GateComponentType.GATE_COMPONENT_TYPE_AMBIENT);
           setAmbientKey(key);
           if (tempKey === key) {
             setTempKey("");
@@ -238,6 +259,7 @@ export default function GateDevice(props: Props) {
         style={{ fontSize: 8 }}
         onChange={e => {
           gateComponentUpdate(
+            tempKey,
             e.target.value as string,
             pond.GateComponentType.GATE_COMPONENT_TYPE_TEMP
           );
@@ -273,6 +295,7 @@ export default function GateDevice(props: Props) {
         style={{ fontSize: 8 }}
         onChange={e => {
           gateComponentUpdate(
+            pressureKey,
             e.target.value as string,
             pond.GateComponentType.GATE_COMPONENT_TYPE_PRESSURE
           );

src/gate/GateDeviceInteraction.tsx

@@ -93,15 +93,14 @@ export default function GateDeviceInteraction(props: Props) {
     compDevice.components.forEach(comp => {
       let component = Component.any(comp);
       //checks the address for the LED components to get the red and green LED's
-
       if (component.locationString() === redAddr && component.subType() === 1) {
         setRedComponent(component);
       } else if (component.locationString() === greenAddr && component.subType() === 1) {
         setGreenComponent(component);
-      } else if (component.type() === quack.ComponentType.COMPONENT_TYPE_PRESSURE_CABLE) {
+      } else if (
-        if (
           gate.preferences[component.key()] === pond.GateComponentType.GATE_COMPONENT_TYPE_PRESSURE
         ) {
+          console.log(component)
           setPressureComponent(component);
           setPressureSource(
               quack.ComponentID.create({
@@ -111,13 +110,13 @@ export default function GateDeviceInteraction(props: Props) {
             })
           )
         }
-      }
+      
     });
 
     if(compDevice.device){
       setDevice(Device.create(compDevice.device))
     }
-  }, [gate, densityTemp, user, compDevice]);
+  }, [gate, densityTemp, user, compDevice, gate.preferences]);
 
   const buttonDisabled = () => {
     if (greenComponent === undefined) return true
@@ -129,13 +128,13 @@ export default function GateDeviceInteraction(props: Props) {
 
   const createInteractions = async () => {
     //the interactions to be made
-
     if (
       greenComponent !== undefined &&
       redComponent !== undefined &&
       pressureComponent !== undefined
     ) {
-      
+      //get the number of nodes in the pressure components
+      let nodes = pressureComponent.numNodes()
       let lightInteractions: pond.InteractionSettings[] = []
       //making variables for the parameters of the interactions
       const redSink = quack.ComponentID.create({
@@ -163,19 +162,18 @@ export default function GateDeviceInteraction(props: Props) {
         source: pressureSource,
         conditions: [
           pond.InteractionCondition.create({
-            comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN,
+            comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN,
-            value: -highDelta,
+            value: highDelta,
             measurementType: quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE
           }),
           pond.InteractionCondition.create({
-            comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN,
+            comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN,
-            value: -lowDelta,
+            value: lowDelta,
             measurementType: quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE
           })
         ],
-        nodeOne: 2,
+        nodeOne: nodes,
-        nodeTwo: 1,
+        subtype: nodes+1,
-        subtype: 18,
         schedule: lightSchedule,
         result: pond.InteractionResult.create({
           type: quack.InteractionResultType.INTERACTION_RESULT_TYPE_TOGGLE,
@@ -201,14 +199,13 @@ export default function GateDeviceInteraction(props: Props) {
           source: pressureSource,
           conditions: [
             pond.InteractionCondition.create({
-              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN,
+              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN,
-              value: -highDelta,
+              value: highDelta,
               measurementType: quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE
             })
           ],
-          nodeOne: 2,
+        nodeOne: nodes,
-          nodeTwo: 1,
+        subtype: nodes+1,
-          subtype: 18,
           schedule: lightSchedule,
           result: pond.InteractionResult.create({
             type: quack.InteractionResultType.INTERACTION_RESULT_TYPE_SET,
@@ -221,19 +218,18 @@ export default function GateDeviceInteraction(props: Props) {
           source: pressureSource,
           conditions: [
             pond.InteractionCondition.create({
-              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN,
+              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN,
-              value: -highDelta,
+              value: highDelta,
               measurementType: quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE
             }),
             pond.InteractionCondition.create({
-              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN,
+              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN,
-              value: -lowDelta,
+              value: lowDelta,
               measurementType: quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE
             })
           ],
-          nodeOne: 2,
+        nodeOne: nodes,
-          nodeTwo: 1,
+        subtype: nodes+1,
-          subtype: 18,
           schedule: lightSchedule,
           result: pond.InteractionResult.create({
             type: quack.InteractionResultType.INTERACTION_RESULT_TYPE_SET,
@@ -246,19 +242,18 @@ export default function GateDeviceInteraction(props: Props) {
           source: pressureSource,
           conditions: [
             pond.InteractionCondition.create({
-              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN,
+              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN,
-              value: -lowDelta,
+              value: lowDelta,
               measurementType: quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE
             }),
             pond.InteractionCondition.create({
-              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN,
+              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN,
-              value: -thresholdPascals,
+              value: thresholdPascals,
               measurementType: quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE
             }),
           ],
-          nodeOne: 2,
+        nodeOne: nodes,
-          nodeTwo: 1,
+        subtype: nodes+1,
-          subtype: 18,
           schedule: lightSchedule,
           result: pond.InteractionResult.create({
             type: quack.InteractionResultType.INTERACTION_RESULT_TYPE_SET,
@@ -276,7 +271,8 @@ export default function GateDeviceInteraction(props: Props) {
               measurementType: quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE
             }),
           ],
-          subtype: 1,
+          nodeOne: nodes,
+          subtype: nodes+1,
           schedule: lightSchedule,
           result: pond.InteractionResult.create({
             type: quack.InteractionResultType.INTERACTION_RESULT_TYPE_SET,
@@ -291,19 +287,18 @@ export default function GateDeviceInteraction(props: Props) {
           source: pressureSource,
           conditions: [
             pond.InteractionCondition.create({
-              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN,
+              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN,
-              value: -highDelta,
+              value: highDelta,
               measurementType: quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE
             }),
             pond.InteractionCondition.create({
-              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_LESS_THAN,
+              comparison: quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN,
-              value: -lowDelta,
+              value: lowDelta,
               measurementType: quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE
             })
           ],
-          nodeOne: 2,
+          nodeOne: nodes,
-          nodeTwo: 1,
+          subtype: nodes+1,
-          subtype: 18,
           schedule: lightSchedule,
           result: pond.InteractionResult.create({
             type: quack.InteractionResultType.INTERACTION_RESULT_TYPE_TOGGLE,
@@ -393,7 +388,6 @@ export default function GateDeviceInteraction(props: Props) {
           color="primary"
           onClick={() => {
             //TODO: Once we figure out how to fix the backend to handle rapid addition/removal of interactions
-            //removeCurrentInteractions();
             setAdding(true);
             interactionsAPI.clearInteractions(device.id(), [pressureSource]).then(resp => {
               createInteractions();
@@ -401,7 +395,8 @@ export default function GateDeviceInteraction(props: Props) {
               console.error(err)
             })
           }}
-          disabled={buttonDisabled()}>
+          disabled={buttonDisabled()}
+          >
           {adding ? "Adding Interaction" : "Create Interaction"}
         </Button>
       </DialogActions>

src/gate/GateList.tsx

@@ -1,5 +1,5 @@
 import { Gate } from "models/Gate";
-import { Box, Card, IconButton, List, ListItem, ListItemText, Theme, Typography } from "@mui/material";
+import { Box, Card, IconButton, List, ListItem, ListItemText, Theme, Tooltip, Typography } from "@mui/material";
 import React, { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useMobile } from "hooks";
@@ -20,6 +20,7 @@ import { quack } from "protobuf-ts/quack";
 import { getTemperatureUnit } from "utils";
 import { teal } from "@mui/material/colors";
 import { react } from "@babel/types";
+import { getDeviceStateHelper } from "pbHelpers/DeviceState";
 
 interface Props {
   //gates: Gate[];
@@ -42,6 +43,12 @@ const useStyles = makeStyles((theme: Theme) => ({
     gateCard: {
       marginBottom: 10,
       paddingLeft: 15
+    },
+    cellContainer: {
+      margin: theme.spacing(1),
+      marginLeft: theme.spacing(2),
+      display: "flex",
+      width: theme.spacing(10)
     }
   }));
 
@@ -100,13 +107,33 @@ export default function GateList(props: Props) {
   const displayPCAStatus = (state: pond.PCAState) => {
     switch(state){
       case pond.PCAState.PCA_STATE_IN_BOUNDS:
-        return <CheckCircleOutline sx={{color: "green"}}/> 
+        return (
+          <Box display="flex">
+            <CheckCircleOutline sx={{color: "green"}}/>
+            <Typography paddingLeft={2}>PCA in threshold</Typography>
+          </Box>
+        )
       case pond.PCAState.PCA_STATE_OUT_BOUNDS:
-        return <ErrorOutline sx={{color: "red"}} />
+        return (
+          <Box display="flex">
+            <ErrorOutline sx={{color: "red"}} />
+            <Typography paddingLeft={2}>PCA out of threshold</Typography>
+          </Box>
+        )
       case pond.PCAState.PCA_STATE_OFF:
-        return <DoNotDisturb />
+        return (
+          <Box display="flex">
+            <DoNotDisturb />
+            <Typography paddingLeft={2}>PCA off</Typography>
+          </Box>
+        )
       default:
-        return <HelpOutlineOutlined />
+        return (
+          <Box display="flex">
+            <HelpOutlineOutlined />
+            <Typography paddingLeft={2}>PCA device not found</Typography>
+          </Box>
+        )
     }
   }
 
@@ -166,7 +193,7 @@ export default function GateList(props: Props) {
   const conditionDisplay = (gate: Gate) => {
     let display = ""
     if(gate.status.pcaState === pond.PCAState.PCA_STATE_OFF){
-      display = "Inactive"
+      display = "PCA Off"
     } else if (gate.status.pcaState === pond.PCAState.PCA_STATE_UNKNOWN){
       display = "--"
     } else { //the pca is currently active calulate the delta temp (outlet - ambient)
@@ -241,6 +268,19 @@ export default function GateList(props: Props) {
           </Box>
         )
       },
+      {
+        title: "Device State",
+        // cellStyle: {width: 100000},
+        // sortKey: "state",
+        render: gate => {
+          const deviceStateHelper = getDeviceStateHelper(gate.status.pcaDeviceState);
+          return (
+            <Box className={classes.cellContainer}>
+              <Tooltip title={deviceStateHelper.description}>{deviceStateHelper.icon}</Tooltip>
+            </Box>
+          )
+        }
+      },
       {
         title: "PCA Status",
         render: gate => {
@@ -324,6 +364,7 @@ export default function GateList(props: Props) {
   }
 
   const gutter = (gate: Gate) => {
+    const deviceStateHelper = getDeviceStateHelper(gate.status.pcaDeviceState)
     return(
       <Box>
         <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
@@ -334,6 +375,12 @@ export default function GateList(props: Props) {
           <Typography>Delta Temperature:</Typography>
           {conditionDisplay(gate)}
         </Box>
+        <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
+          <Typography>Device State:</Typography>
+          <Box>
+            {deviceStateHelper.icon}
+          </Box>
+        </Box>
         {/* taking these out for now because we are not sure if the customer wants them */}
         {/* <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
           <Typography>Estimated Temp:</Typography>

src/hooks/useDeviceStatusStreams.ts

@@ -0,0 +1,138 @@
+import { pond } from "protobuf-ts/pond";
+import { useEffect, useRef, useCallback, useMemo } from "react";
+
+/**
+ * Derives the WebSocket base URL from VITE_APP_API_URL.
+ * Matches the logic in useWebSocket.ts.
+ */
+function getWsBaseUrl(): string {
+  const apiUrl = import.meta.env.VITE_APP_API_URL;
+  if (apiUrl) {
+    return apiUrl.replace(/^http/, "ws");
+  }
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  return `${protocol}//${window.location.host}`;
+}
+
+export interface UseDeviceStatusStreamsOptions {
+  /** Device IDs to stream status for (e.g. from the visible devices list) */
+  deviceIds: string[];
+  /** Called when a device status update is received */
+  onStatusUpdate: (deviceId: string, status: pond.DeviceStatus) => void;
+  /** Auth token passed as ?token= query param */
+  token?: string;
+  /** Whether the connections should be active. Default true. */
+  enabled?: boolean;
+}
+
+/**
+ * Subscribes to live device status streams for multiple devices.
+ * Uses the /v1/live/devices/:device/status endpoint per device.
+ * Readings (plenum, sen5x, co, co2, no2, o2, etc.) stream in real time.
+ */
+export function useDeviceStatusStreams(options: UseDeviceStatusStreamsOptions) {
+  const { deviceIds, onStatusUpdate, token, enabled = true } = options;
+
+  const onStatusUpdateRef = useRef(onStatusUpdate);
+  onStatusUpdateRef.current = onStatusUpdate;
+
+  const wsMapRef = useRef<Map<string, WebSocket>>(new Map());
+  const retriesRef = useRef<Map<string, number>>(new Map());
+  const reconnectTimeoutsRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  const connect = useCallback(
+    (deviceId: string) => {
+      if (!token || !deviceId) return;
+
+      const params = new URLSearchParams();
+      params.set("token", token);
+
+      const path = `/live/devices/${deviceId}/status`;
+      const url = `${getWsBaseUrl()}${path}?${params.toString()}`;
+      const ws = new WebSocket(url);
+      wsMapRef.current.set(deviceId, ws);
+
+      ws.onopen = () => {
+        console.debug(`[ws] connected: ${path}`);
+        retriesRef.current.set(deviceId, 0);
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const raw = JSON.parse(event.data);
+          const status = pond.DeviceStatus.fromObject(raw ?? {});
+          onStatusUpdateRef.current(deviceId, status);
+        } catch (err) {
+          console.warn(`[ws] failed to parse device status for ${deviceId}:`, err);
+        }
+      };
+
+      ws.onerror = () => {
+        console.warn(`[ws] error on ${path}`);
+      };
+
+      ws.onclose = (event) => {
+        wsMapRef.current.delete(deviceId);
+
+        // Don't reconnect on clean close or auth rejection
+        if (event.code === 1000 || event.code === 4001 || event.code === 4003) {
+          return;
+        }
+
+        const retries = retriesRef.current.get(deviceId) ?? 0;
+        const delay = Math.min(1000 * Math.pow(2, retries), 30000);
+        retriesRef.current.set(deviceId, retries + 1);
+        console.debug(`[ws] reconnecting ${path} in ${delay}ms...`);
+
+        const timeout = setTimeout(() => connect(deviceId), delay);
+        reconnectTimeoutsRef.current.set(deviceId, timeout);
+      };
+    },
+    [token]
+  );
+
+  // Normalize for stable comparison: same set of IDs = same string regardless of order
+  const deviceIdsKey = useMemo(
+    () => [...new Set(deviceIds)].sort().join(","),
+    [deviceIds.join(",")]
+  );
+
+  useEffect(() => {
+    if (!enabled || !token || deviceIds.length === 0) {
+      wsMapRef.current.forEach((ws) => ws.close(1000, "disabled"));
+      wsMapRef.current.clear();
+      reconnectTimeoutsRef.current.forEach((t) => clearTimeout(t));
+      reconnectTimeoutsRef.current.clear();
+      return;
+    }
+
+    const currentIds = new Set(deviceIds);
+
+    // Connect to new devices
+    deviceIds.forEach((id) => {
+      if (!wsMapRef.current.has(id)) {
+        connect(id);
+      }
+    });
+
+    // Disconnect from devices no longer in the list
+    wsMapRef.current.forEach((ws, id) => {
+      if (!currentIds.has(id)) {
+        ws.close(1000, "device removed");
+        wsMapRef.current.delete(id);
+        const t = reconnectTimeoutsRef.current.get(id);
+        if (t) {
+          clearTimeout(t);
+          reconnectTimeoutsRef.current.delete(id);
+        }
+      }
+    });
+
+    return () => {
+      wsMapRef.current.forEach((ws) => ws.close(1000, "cleanup"));
+      wsMapRef.current.clear();
+      reconnectTimeoutsRef.current.forEach((t) => clearTimeout(t));
+      reconnectTimeoutsRef.current.clear();
+    };
+  }, [enabled, token, deviceIdsKey, deviceIds.length, connect]);
+}

src/pages/Devices.tsx

@@ -6,7 +6,9 @@ import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import ProvisionDevice from "device/ProvisionDevice";
 import { pond } from "protobuf-ts/pond";
 import { useDeviceAPI, useGlobalState, useGroupAPI, useTeamAPI } from "providers";
-import { useCallback, useEffect, useState } from "react";
+import { useHTTP } from "hooks";
+import { useDeviceStatusStreams } from "hooks/useDeviceStatusStreams";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import PageContainer from "./PageContainer";
 import { useMobile } from "hooks";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
@@ -141,6 +143,8 @@ export default function Devices() {
   const [hasCo2, setHasCo2] = useState(false)
   const [hasNo2, setHasNo2] = useState(false)
   const [hasO2, setHasO2] = useState(false)
+  const [hasLel, setHasLel] = useState(false)
+  const [hasH2S, setHasH2S] = useState(false)
 
   const [groupsLoading, setGroupsLoading] = useState(false)
   const [groups, setGroups] = useState<Group[]>([]);
@@ -188,9 +192,38 @@ export default function Devices() {
     localStorage.setItem('groupGas', groupGas.toString());
   }, [groupGas]);
 
+  const [showTimestamp, setShowTimestamp] = useState(() => {
+    const stored = localStorage.getItem('showTimestamp');
+    return stored !== null ? stored === 'true' : false;
+  });
+
+  useEffect(() => {
+    localStorage.setItem('showTimestamp', showTimestamp.toString());
+  }, [showTimestamp]);
+
   const [preferencesAnchor, setPreferencesAnchor] = useState<any>(null)
 
   const [{ as, team }] = useGlobalState()
+  const { token } = useHTTP()
+
+  const deviceIds = useMemo(() => devices.map((d) => d.id().toString()), [devices])
+  const handleStatusUpdate = useCallback((deviceId: string, status: pond.DeviceStatus) => {
+    setDevices((prev) =>
+      prev.map((d) => {
+        if (d.id().toString() !== deviceId) return d
+        const updated = Device.clone(d)
+        updated.status = status
+        return updated
+      })
+    )
+  }, [])
+
+  useDeviceStatusStreams({
+    deviceIds,
+    onStatusUpdate: handleStatusUpdate,
+    token,
+    enabled: devices.length > 0 && !!token,
+  })
 
   const updateGroups = (newGroups: Group[]) => {
     setGroups(newGroups);
@@ -242,7 +275,7 @@ export default function Devices() {
         const now = new Date();
         const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
         if (compareTimestamps(device.status.sen5x?.timestamp, oneDayAgo.toISOString()) > 0) {
-          // console.log("timestamp success " + device.settings?.deviceId)
+          // console.log("timestamp success " + device.settings?.deviceId + ": " + device.status.sen5x?.timestamp)
           return true
         } else {
           // console.log("timestamp fail " + device.settings?.deviceId)
@@ -265,15 +298,33 @@ export default function Devices() {
 
   const doesDeviceHaveO2 = (device: pond.Device) => {
     if (device.status?.o2?.ppm && device.status?.o2?.timestamp) {
-      if (device.status.sen5x?.timestamp) {
       const now = new Date();
       const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
       if (compareTimestamps(device.status.o2?.timestamp, oneDayAgo.toISOString()) > 0) {
         return true
       }
-      } else {
+    }
     return false
   }
+
+  const doesDeviceHaveLel = (device: pond.Device) => {
+    if (device.status?.lel?.ppm && device.status?.lel?.timestamp) {
+      const now = new Date();
+      const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+      if (compareTimestamps(device.status.lel?.timestamp, oneDayAgo.toISOString()) > 0) {
+        return true
+      }
+    }
+    return false
+  }
+
+  const doesDeviceHaveH2S = (device: pond.Device) => {
+    if (device.status?.h2s?.ppm && device.status?.h2s?.timestamp) {
+      const now = new Date();
+      const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+      if (compareTimestamps(device.status.h2s?.timestamp, oneDayAgo.toISOString()) > 0) {
+        return true
+      }
     }
     return false
   }
@@ -455,6 +506,8 @@ export default function Devices() {
       let hasCo = false
       let hasCo2 = false
       let hasNo2 = false
+      let hasLel = false
+      let hasH2S = false
       resp.data.devices.forEach(device => {
         setHasPlenums(doesDeviceHavePlenum(device))
         if (doesDeviceHavePlenum(device)) hasPlenum = true
@@ -464,6 +517,8 @@ export default function Devices() {
         if (doesDeviceHaveCo(device)) hasCo = true
         if (doesDeviceHaveCo2(device)) hasCo2 = true
         if (doesDeviceHaveNo2(device)) hasNo2 = true
+        if (doesDeviceHaveLel(device)) hasLel = true
+        if (doesDeviceHaveH2S(device)) hasH2S = true
         newDevices.push(Device.create(device))
       })
       setHasPlenums(hasPlenum)
@@ -472,6 +527,8 @@ export default function Devices() {
       setHasCo(hasCo)
       setHasCo2(hasCo2)
       setHasNo2(hasNo2)
+      setHasLel(hasLel)
+      setHasH2S(hasH2S)
       setDevices(newDevices)
       setTotal(resp.data.total)
     }).finally(() => {
@@ -624,7 +681,7 @@ export default function Devices() {
           if (device.status.plenum?.temperature) {
             return (
               <Box sx={{ marginLeft: 1 }}>
-                <StatusPlenum device={device} />
+                <StatusPlenum device={device} showTimestamp={showTimestamp} />
               </Box>
             )
           } else {
@@ -644,7 +701,7 @@ export default function Devices() {
           if (device.status.sen5x?.temperature) {
             return (
               <Box sx={{ marginLeft: 1 }}>
-                <StatusSen5x device={device} noDust={separateDust} />
+                <StatusSen5x device={device} noDust={separateDust} showTimestamp={showTimestamp} />
               </Box>
             )
           } else {
@@ -660,7 +717,7 @@ export default function Devices() {
           if (device.status.sen5x?.temperature) {
             return (
               <Box sx={{ marginLeft: 1 }}>
-                <StatusDust device={device} />
+                <StatusDust device={device} showTimestamp={showTimestamp} />
               </Box>
             )
           } else {
@@ -678,7 +735,7 @@ export default function Devices() {
           if (device.status.co) {
             return (
               <Box sx={{ marginLeft: 1 }}>
-                <StatusGas device={device} gasType={groupGas ? "all" : "co"}/>
+                <StatusGas device={device} gasType={groupGas ? "all" : "co"} showTimestamp={showTimestamp} />
               </Box>
             )
           } else {
@@ -696,7 +753,7 @@ export default function Devices() {
           if (device.status.co2) {
             return (
               <Box sx={{ marginLeft: 1 }}>
-                <StatusGas device={device} gasType={"co2"}/>
+                <StatusGas device={device} gasType={"co2"} showTimestamp={showTimestamp} />
               </Box>
             )
           } else {
@@ -714,7 +771,7 @@ export default function Devices() {
           if (device.status.no2) {
             return (
               <Box sx={{ marginLeft: 1 }}>
-                <StatusGas device={device} gasType={"no2"}/>
+                <StatusGas device={device} gasType={"no2"} showTimestamp={showTimestamp} />
               </Box>
             )
           } else {
@@ -732,7 +789,43 @@ export default function Devices() {
           if (device.status.o2) {
             return (
               <Box sx={{ marginLeft: 1 }}>
-                <StatusGas device={device} gasType={"o2"}/>
+                <StatusGas device={device} gasType={"o2"} showTimestamp={showTimestamp} />
+              </Box>
+            )
+          } else {
+            return (
+              <></>
+            )
+          }
+        }
+      })
+    }
+    if (hasLel && !groupGas) {
+      columns.push({
+        title: "LEL",
+        render: (device: Device) => {
+          if (device.status.lel) {
+            return (
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusGas device={device} gasType={"lel"} showTimestamp={showTimestamp} />
+              </Box>
+            )
+          } else {
+            return (
+              <></>
+            )
+          }
+        }
+      })
+    }
+    if (hasH2S && !groupGas) {
+      columns.push({
+        title: "H2S",
+        render: (device: Device) => {
+          if (device.status.h2s) {
+            return (
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusGas device={device} gasType={"h2s"} showTimestamp={showTimestamp} />
               </Box>
             )
           } else {
@@ -872,6 +965,16 @@ export default function Devices() {
             </ListItemIcon>
             <ListItemText primary={"Group Gas"} />
           </MenuItem>
+          <MenuItem 
+            onClick={() => setShowTimestamp(!showTimestamp)}
+            sx={{ marginLeft: -0.75 }}
+            dense
+          >
+            <ListItemIcon>
+              <Checkbox checked={showTimestamp} />
+            </ListItemIcon>
+            <ListItemText primary={"Show Timestamp"} />
+          </MenuItem>
       </Menu>
     )
   }
@@ -959,6 +1062,8 @@ export default function Devices() {
             let hasCo = false
             let hasCo2 = false
             let hasNo2 = false
+            let hasLel = false
+            let hasH2S = false
             resp.data.devices.forEach(device => {
               setHasPlenums(doesDeviceHavePlenum(device))
               if (doesDeviceHavePlenum(device)) hasPlenum = true
@@ -968,6 +1073,8 @@ export default function Devices() {
               if (doesDeviceHaveCo(device)) hasCo = true
               if (doesDeviceHaveCo2(device)) hasCo2 = true
               if (doesDeviceHaveNo2(device)) hasNo2 = true
+              if (doesDeviceHaveLel(device)) hasLel = true
+              if (doesDeviceHaveH2S(device)) hasH2S = true
               newDevices.push(Device.create(device))
             })
             setHasPlenums(hasPlenum)
@@ -976,6 +1083,8 @@ export default function Devices() {
             setHasCo(hasCo)
             setHasCo2(hasCo2)
             setHasNo2(hasNo2)
+            setHasLel(hasLel)
+            setHasH2S(hasH2S)
             setDevices(currentRows.concat(newDevices))
           }).catch(_err => {
 

src/pbHelpers/ComponentTypes/DragerGasDongle.ts

@@ -92,6 +92,11 @@ export function dragerGasDongle(subtype: number = 0): ComponentTypeExtension {
         key: quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_LEL,
         value: "DRAGER_GAS_DONGLE_SUBTYPE_LEL",
         friendlyName: "Drager Gas LEL"
+      },
+      {
+        key: quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_AMMONIA,
+        value: "DRAGER_GAS_DONGLE_SUBTYPE_AMMONIA",
+        friendlyName: "Drager Gas Ammonia"
       }
     ],
     friendlyName: "Drager Gas",