Merge branch 'staging_environment'

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()
@@ -110,7 +112,6 @@ export default function GateDeltaTempGraph(props: Props){
       end.toISOString(), 
       500
     ).then(resp => {
-      console.log(resp)
       if(resp.data.measurements){
         let tempCompMeasurements = resp.data.measurements.map(um => UnitMeasurement.any(um, user));
         //if there is an ambient component, then treat the temp component like a single sensor and not a chain, and use the ambient measurements as the inlet
@@ -217,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

@@ -15,7 +15,7 @@ import { Gate } from "models/Gate";
 import moment, { Moment } from "moment";
 import { pond } from "protobuf-ts/pond";
 import { useGateAPI, useGlobalState } from "providers";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 interface Props {
   gate: Gate;
@@ -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,
@@ -74,12 +72,13 @@ export default function GateFlowGraph(props: Props) {
   const eventThreshold = 5; //the threshold that if crossed from one measurement to the next during a flow event will end the current flow event and start a new one
   //const idleFlow = 3.5; //the mass air flow that must be crossed in order to start a flow event, anything below this will not start an event but must go below this to end an event
   const [idleFlow, setIdleFlow] = useState(3.5)
-  
+
-  useEffect(() => {
+  const loadData = useCallback(()=>{
     if (loadingChartData) return;
     if (ambient && pressureComponent) {
       let gateIdle = idleFlow
       if(gate.settings.idleFlow){
+        setIdleFlow(gate.settings.idleFlow)
         gateIdle = gate.settings.idleFlow
       }
 
@@ -131,22 +130,17 @@ 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);
           setRecent(recent);
         });
     }
-  }, [gateAPI, gate, ambient, pressureComponent, start, end, device, as]); // eslint-disable-line react-hooks/exhaustive-deps
+  },[gateAPI, gate, ambient, pressureComponent, start, end, device, as])
+  
+  useEffect(() => {
+    loadData()
+  }, [loadData]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const loadFlowEvents = () => {
     if (ambient && pressureComponent) {

src/gate/GateGraphs.tsx

@@ -101,16 +101,22 @@ export default function GateGraphs(props: Props) {
       });
   }, [gate, endDate, gateAPI, startDate, as]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const updateDateRange = (newStartDate: any, newEndDate: any) => {
+  const updateDateRange = (newStartDate: moment.Moment, newEndDate: moment.Moment) => {
-    let range = GetDefaultDateRange();
-    range.start = newStartDate;
-    range.end = newEndDate;
     setStartDate(newStartDate);
     setEndDate(newEndDate);
   };
 
+  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]))
+    }
+  }
+
   const zoomOut = () => {
-    setXDomain(["dataMin", "dataMax"]);
+    let d = GetDefaultDateRange()
+    setStartDate(d.start)
+    setEndDate(d.end)
     setZoomed(false);
   };
 
@@ -175,8 +181,7 @@ export default function GateGraphs(props: Props) {
           tooltip
           newXDomain={xDomain}
           multiGraphZoom={domain => {
-            setXDomain(domain);
+            zoomGraphs(domain)
-            setZoomed(true);
           }}
           multiGraphZoomOut
         />
@@ -239,8 +244,7 @@ export default function GateGraphs(props: Props) {
           tooltip
           newXDomain={xDomain}
           multiGraphZoom={domain => {
-            setXDomain(domain);
+            zoomGraphs(domain)
-            setZoomed(true);
           }}
           multiGraphZoomOut
         />
@@ -250,7 +254,6 @@ export default function GateGraphs(props: Props) {
 
   const graphHeader = (comp: Component) => {
     const componentIcon = GetComponentIcon(comp.settings.type, comp.settings.subtype, themeType);
-    console.log(comp)
     let measurement = cloneDeep(comp.status.measurement)
     let umArray = measurement.map(um => UnitMeasurement.create(um, user))
     return (
@@ -356,17 +359,22 @@ export default function GateGraphs(props: Props) {
           gate={gate}
           ambient={ambient}
           pressureComponent={pressure}
-          // setPCAState={(state: boolean) => {
-          //   setPCAState(state);
-          // }}
           multiGraphZoom={domain => {
-            setXDomain(domain);
+            zoomGraphs(domain)
-            setZoomed(true);
           }}
         />
         {/* add a new chart here for the delta temp over time */}
         {tempComp &&
-          <GateDeltaTempGraph deviceID={device} start={startDate} end={endDate} tempComponent={tempComp} ambient={ambientComp}/>
+          <GateDeltaTempGraph 
+            deviceID={device} 
+            start={startDate} 
+            end={endDate} 
+            tempComponent={tempComp} 
+            ambient={ambientComp}
+            multiGraphZoom={domain => {
+              zoomGraphs(domain)
+            }}
+            />
         }
       </Box>
     );

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>