From f96d1184b17871a360a6fc8725470c17ba67cad1 Mon Sep 17 00:00:00 2001 From: csawatzky Date: Wed, 22 Apr 2026 10:38:51 -0600 Subject: [PATCH 1/2] changing date range when zooming airflow --- package-lock.json | 2 +- src/gate/GateDeltaTempGraph.tsx | 1 - src/gate/GateFlowGraph.tsx | 13 +++++++---- src/gate/GateGraphs.tsx | 40 ++++++++++++++++++++++----------- 4 files changed, 37 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2cd53e8..9ca1dff 100644 --- a/package-lock.json +++ b/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" } diff --git a/src/gate/GateDeltaTempGraph.tsx b/src/gate/GateDeltaTempGraph.tsx index b5baef1..6cd8a08 100644 --- a/src/gate/GateDeltaTempGraph.tsx +++ b/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 diff --git a/src/gate/GateFlowGraph.tsx b/src/gate/GateFlowGraph.tsx index b9a85b1..2e254e7 100644 --- a/src/gate/GateFlowGraph.tsx +++ b/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; @@ -74,12 +74,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 } @@ -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) { diff --git a/src/gate/GateGraphs.tsx b/src/gate/GateGraphs.tsx index 5a3a039..9858b0c 100644 --- a/src/gate/GateGraphs.tsx +++ b/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(); - range.start = newStartDate; - range.end = newEndDate; + // let range = GetDefaultDateRange(); + // range.start = newStartDate; + // range.end = newEndDate; setStartDate(newStartDate); setEndDate(newEndDate); }; - const zoomOut = () => { - setXDomain(["dataMin", "dataMax"]); - setZoomed(false); - }; + // const zoomOut = () => { + // setXDomain(["dataMin", "dataMax"]); + + // 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); - setZoomed(true); + //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])) + } }} /> {/* add a new chart here for the delta temp over time */} {tempComp && - + } ); @@ -387,13 +401,13 @@ export default function GateGraphs(props: Props) { - {zoomed && ( + {/* {zoomed && ( - )} + )} */} {loading ? : showGraphs()} From 6565b854b6ed7c97f125eb775012aeecae7c26b5 Mon Sep 17 00:00:00 2001 From: csawatzky Date: Wed, 22 Apr 2026 14:52:06 -0600 Subject: [PATCH 2/2] using the expiry time in the gate status for whehter its missing or not --- package-lock.json | 2 +- src/gate/GateDeltaTempGraph.tsx | 7 +++-- src/gate/GateFlowGraph.tsx | 11 -------- src/gate/GateGraphs.tsx | 48 +++++++++++++++------------------ src/gate/GateList.tsx | 7 ++++- 5 files changed, 33 insertions(+), 42 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9ca1dff..a8d3068 100644 --- a/package-lock.json +++ b/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" } diff --git a/src/gate/GateDeltaTempGraph.tsx b/src/gate/GateDeltaTempGraph.tsx index 6cd8a08..d4a4465 100644 --- a/src/gate/GateDeltaTempGraph.tsx +++ b/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([]) 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}/> ) diff --git a/src/gate/GateFlowGraph.tsx b/src/gate/GateFlowGraph.tsx index 2e254e7..458d377 100644 --- a/src/gate/GateFlowGraph.tsx +++ b/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); diff --git a/src/gate/GateGraphs.tsx b/src/gate/GateGraphs.tsx index 9858b0c..319b137 100644 --- a/src/gate/GateGraphs.tsx +++ b/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) + }} /> } @@ -401,13 +395,13 @@ export default function GateGraphs(props: Props) { - {/* {zoomed && ( + {zoomed && ( - )} */} + )} {loading ? : showGraphs()} diff --git a/src/gate/GateList.tsx b/src/gate/GateList.tsx index ba521cc..a2f4f77 100644 --- a/src/gate/GateList.tsx +++ b/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 ( {deviceStateHelper.icon}