using the expiry time in the gate status for whehter its missing or not

package-lock.json

@@ -11205,7 +11205,7 @@
     },
     "node_modules/protobuf-ts": {
       "version": "1.0.0",
-      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#0aa61453c8641cf5ede545949a5f2f89f6c393ec",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#29d9765ce93c04ad70d795b80e9873fc2fc5f600",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }

src/gate/GateDeltaTempGraph.tsx

@@ -20,6 +20,7 @@ interface Props {
   ambient?: Component
   start: Moment;
   end: Moment;
+  multiGraphZoom?: (domain: number[] | string[]) => void;
 }
 
 export default function GateDeltaTempGraph(props: Props){
@@ -28,7 +29,8 @@ export default function GateDeltaTempGraph(props: Props){
     ambient, 
     deviceID,
     start,
-    end
+    end,
+    multiGraphZoom
   } = props
   const [data, setData] = useState<SSAreaDataPoint[]>([])
   const [{user}] = useGlobalState()
@@ -216,7 +218,8 @@ export default function GateDeltaTempGraph(props: Props){
         tooltipUnit={user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? " °F" : " °C"} 
         yAxisLabel={"Delta T" + (user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? " °F" : " °C")} 
         colourAboveZero={{colour: warmingColour, label: "Heating"}} 
-        colourBelowZero={{colour: coolingColour, label: "Cooling"}}/>
+        colourBelowZero={{colour: coolingColour, label: "Cooling"}}
+        multiGraphZoom={multiGraphZoom}/>
     </Card>
   )
 

src/gate/GateFlowGraph.tsx

@@ -25,7 +25,6 @@ interface Props {
   ambient?: string;
   newXDomain?: number[] | string[];
   pressureComponent?: string;
-  // setPCAState: (state: boolean) => void;
   multiGraphZoom?: (domain: number[] | string[]) => void;
 }
 
@@ -55,7 +54,6 @@ export default function GateFlowGraph(props: Props) {
     device,
     ambient,
     pressureComponent,
-    // setPCAState,
     start,
     end,
     newXDomain,
@@ -132,15 +130,6 @@ export default function GateFlowGraph(props: Props) {
               }
             });
             setRuntime(moment.duration(runtime));
-            // let state = false;
-            // if (
-            //   data.length > 1 &&
-            //   data[data.length - 1].value > gate.lowerFlow() &&
-            //   data[data.length - 1].value < gate.upperFlow()
-            // ) {
-            //   state = true;
-            // }
-            // setPCAState(state);
           }
           setFlowData(data);
           setLoadingChartData(false);

src/gate/GateGraphs.tsx

@@ -101,19 +101,24 @@ export default function GateGraphs(props: Props) {
       });
   }, [gate, endDate, gateAPI, startDate, as]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const updateDateRange = (newStartDate: any, newEndDate: any) => {
-    // let range = GetDefaultDateRange();
-    // range.start = newStartDate;
-    // range.end = newEndDate;
+  const updateDateRange = (newStartDate: moment.Moment, newEndDate: moment.Moment) => {
     setStartDate(newStartDate);
     setEndDate(newEndDate);
   };
 
-  // const zoomOut = () => {
-  //   setXDomain(["dataMin", "dataMax"]);
+  const zoomGraphs = (domain: string[] | number[]) => {
+    setZoomed(true)
+    if((domain[0] && !isNaN(parseInt(domain[0] as string))) && (domain[1] && !isNaN(parseInt(domain[1] as string)))){
+      updateDateRange(moment(domain[0]),moment(domain[1]))
+    }
+  }
 
-  //   setZoomed(false);
-  // };
+  const zoomOut = () => {
+    let d = GetDefaultDateRange()
+    setStartDate(d.start)
+    setEndDate(d.end)
+    setZoomed(false);
+  };
 
   const lineGraph = (
     unitMeasurement: UnitMeasurement,
@@ -176,9 +181,7 @@ export default function GateGraphs(props: Props) {
           tooltip
           newXDomain={xDomain}
           multiGraphZoom={domain => {
-            setXDomain(domain);
-            setZoomed(true);
-            //set new start and end here as well
+            zoomGraphs(domain)
           }}
           multiGraphZoomOut
         />
@@ -241,9 +244,7 @@ export default function GateGraphs(props: Props) {
           tooltip
           newXDomain={xDomain}
           multiGraphZoom={domain => {
-            setXDomain(domain);
-            setZoomed(true);
-            //update the start and end here as well
+            zoomGraphs(domain)
           }}
           multiGraphZoomOut
         />
@@ -358,17 +359,8 @@ export default function GateGraphs(props: Props) {
           gate={gate}
           ambient={ambient}
           pressureComponent={pressure}
-          // setPCAState={(state: boolean) => {
-          //   setPCAState(state);
-          // }}
           multiGraphZoom={domain => {
-            //need to update the dateRange here so that the graph re-loads data
-            if(domain[0] && !isNaN(parseInt(domain[0] as string))){
-              setStartDate(moment(domain[0]))
-            }
-            if(domain[1] && !isNaN(parseInt(domain[1] as string))){
-              setEndDate(moment(domain[1]))
-            }
+            zoomGraphs(domain)
           }}
         />
         {/* add a new chart here for the delta temp over time */}
@@ -379,7 +371,9 @@ export default function GateGraphs(props: Props) {
             end={endDate} 
             tempComponent={tempComp} 
             ambient={ambientComp}
-
+            multiGraphZoom={domain => {
+              zoomGraphs(domain)
+            }}
             />
         }
       </Box>
@@ -401,13 +395,13 @@ export default function GateGraphs(props: Props) {
     <React.Fragment>
       <Box display="flex" justifyContent="space-between" alignItems="center" marginBottom={2}>
         <TimeBar updateDateRange={updateDateRange} startDate={startDate} endDate={endDate} />
-        {/* {zoomed && (
+        {zoomed && (
           <Tooltip title="Zoom Out Graphs">
             <Button variant="outlined" onClick={zoomOut}>
               <ZoomOut />
             </Button>
           </Tooltip>
-        )} */}
+        )}
       </Box>
       {loading ? <LinearProgress /> : showGraphs()}
     </React.Fragment>

src/gate/GateList.tsx

@@ -272,7 +272,12 @@ export default function GateList(props: Props) {
         // cellStyle: {width: 100000},
         // sortKey: "state",
         render: gate => {
-          const deviceStateHelper = getDeviceStateHelper(gate.status.pcaDeviceState);
+          let deviceStateHelper = getDeviceStateHelper(pond.DeviceState.DEVICE_STATE_UNKNOWN);
+          if(moment().isAfter(moment(gate.status.deviceStateExpires).add(1, 'hour'))){
+            deviceStateHelper = getDeviceStateHelper(pond.DeviceState.DEVICE_STATE_MISSING)
+          }else{
+            deviceStateHelper = getDeviceStateHelper(gate.status.pcaDeviceState)
+          }
           return (
             <Box className={classes.cellContainer}>
               <Tooltip title={deviceStateHelper.description}>{deviceStateHelper.icon}</Tooltip>