changing date range when zooming airflow

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#9c0f668d4a56b8216dd71a44c3110a818aaf3541",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#0aa61453c8641cf5ede545949a5f2f89f6c393ec",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }

src/gate/GateDeltaTempGraph.tsx

@@ -110,7 +110,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

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;
@@ -75,11 +75,12 @@ export default function GateFlowGraph(props: Props) {
   //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
       }
 
@@ -146,7 +147,11 @@ export default function GateFlowGraph(props: Props) {
           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

@@ -102,17 +102,18 @@ 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();
+    // let range = GetDefaultDateRange();
-    range.start = newStartDate;
+    // range.start = newStartDate;
-    range.end = newEndDate;
+    // range.end = newEndDate;
     setStartDate(newStartDate);
     setEndDate(newEndDate);
   };
 
-  const zoomOut = () => {
+  // const zoomOut = () => {
-    setXDomain(["dataMin", "dataMax"]);
+  //   setXDomain(["dataMin", "dataMax"]);
-    setZoomed(false);
+
-  };
+  //   setZoomed(false);
+  // };
 
   const lineGraph = (
     unitMeasurement: UnitMeasurement,
@@ -177,6 +178,7 @@ export default function GateGraphs(props: Props) {
           multiGraphZoom={domain => {
             setXDomain(domain);
             setZoomed(true);
+            //set new start and end here as well
           }}
           multiGraphZoomOut
         />
@@ -241,6 +243,7 @@ export default function GateGraphs(props: Props) {
           multiGraphZoom={domain => {
             setXDomain(domain);
             setZoomed(true);
+            //update the start and end here as well
           }}
           multiGraphZoomOut
         />
@@ -250,7 +253,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 (
@@ -360,13 +362,25 @@ export default function GateGraphs(props: Props) {
           //   setPCAState(state);
           // }}
           multiGraphZoom={domain => {
-            setXDomain(domain);
+            //need to update the dateRange here so that the graph re-loads data
-            setZoomed(true);
+            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]))
+            }
           }}
         />
         {/* 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}
+
+            />
         }
       </Box>
     );
@@ -387,13 +401,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>