diff --git a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx index 156227f3e..f62a55487 100644 --- a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx +++ b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx @@ -11,13 +11,20 @@ import { transformToBarGraphData, } from "../../../util/graph.util"; import { TimeRange, TimeSpan, UnixTime } from "../../../dataCache/time"; -import { memo, useContext, useEffect, useMemo, useState } from "react"; +import { + memo, + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from "react"; import { BehaviorSubject, startWith, throttleTime, withLatestFrom } from "rxjs"; import { S3Access } from "../../../dataCache/S3/S3Access"; import DataCache, { FetchResult } from "../../../dataCache/dataCache"; import { LogContext } from "../../Context/LogContextProvider"; import { isDefined } from "../../../dataCache/utils/maybe"; -import { Data, Layout } from "plotly.js"; +import { Data, Layout, PlotRelayoutEvent } from "plotly.js"; import { VariableSizeList as List, areEqual } from "react-window"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { FormattedMessage } from "react-intl"; @@ -503,6 +510,7 @@ export const fetchData = ( return Promise.resolve(FetchResult.notAvailable); } else if (r.status === 200) { const text = await r.text(); + console.log("csv", parseCsv(text)); return parseCsv(text); } else { console.error("unexpected status code"); @@ -597,17 +605,35 @@ const ScalarGraph = () => { ); }; - const getCacheSeries = (xaxisRange0: Date, xaxisRange1: Date) => { - const times = createTimes( - TimeRange.fromTimes( - UnixTime.fromDate(xaxisRange0), - UnixTime.fromDate(xaxisRange1) - ), - NUMBER_OF_NODES - ); - cache.getSeries(times); - times$.next(times); - }; + const getCacheSeries = useCallback( + (xaxisRange0: Date, xaxisRange1: Date) => { + const times = createTimes( + TimeRange.fromTimes( + UnixTime.fromDate(xaxisRange0), + UnixTime.fromDate(xaxisRange1) + ), + NUMBER_OF_NODES + ); + cache.getSeries(times); + times$.next(times); + }, + [cache, times$] + ); + + const handleRelayout = useCallback( + (params: PlotRelayoutEvent) => { + const xaxisRange0 = params["xaxis.range[0]"]; + const xaxisRange1 = params["xaxis.range[1]"]; + if (xaxisRange0 && xaxisRange1) { + const range0 = new Date(xaxisRange0); + const range1 = new Date(xaxisRange1); + setRange([range0, range1]); + setUiRevision(Math.random()); + getCacheSeries(range0, range1); + } + }, + [getCacheSeries] + ); const Row = memo((props: any) => { const { data, index, style } = props; @@ -643,7 +669,6 @@ const ScalarGraph = () => { height: 500, autosize: true, title: visibleGraphs[index], - uirevision: uiRevision, xaxis: { autorange: false, range: range, @@ -662,31 +687,7 @@ const ScalarGraph = () => { "autoScale2d", ], }} - onUpdate={(params) => { - console.log("event onupdate", params); - }} - onSliderChange={(params) => { - console.log("event sliderchange", params); - }} - onRestyle={(params) => { - console.log("event restyle", params); - }} - onRelayout={(params) => { - console.log("event relayout", params); - - const xaxisRange0 = params["xaxis.range[0]"]; - const xaxisRange1 = params["xaxis.range[1]"]; - console.log("relayout", xaxisRange0, xaxisRange1); - if (xaxisRange0 && xaxisRange1) { - console.log("relayout", xaxisRange0, xaxisRange1); - const range0 = new Date(xaxisRange0); - const range1 = new Date(xaxisRange1); - - setRange([range0, range1]); - setUiRevision(Math.random()); - getCacheSeries(range0, range1); - } - }} + onRelayout={handleRelayout} /> ); diff --git a/typescript/Frontend/src/dataCache/dataCache.ts b/typescript/Frontend/src/dataCache/dataCache.ts index 3bfeda572..c23a1966d 100644 --- a/typescript/Frontend/src/dataCache/dataCache.ts +++ b/typescript/Frontend/src/dataCache/dataCache.ts @@ -109,6 +109,7 @@ export default class DataCache> { //What about string nodes? like Alarms for (const k of Object.keys(dataBefore)) { const beforeData = dataBefore[k].value; + console.log(dataAfter[k]); const afterData = Number(dataAfter[k].value); let foo = interpolated[k]; if (foo) { diff --git a/typescript/Frontend/src/util/graph.util.tsx b/typescript/Frontend/src/util/graph.util.tsx index 1693e21c7..34f5cde19 100644 --- a/typescript/Frontend/src/util/graph.util.tsx +++ b/typescript/Frontend/src/util/graph.util.tsx @@ -198,10 +198,10 @@ export const parseCsv = (text: string): DataRecord => { .map((l) => { return l.split(";"); }); - const x = y .map((fields) => { if (isNaN(Number(fields[1]))) { + console.log("fields", fields[1]); return { [fields[0]]: { value: fields[1], unit: fields[2] } }; } return { [fields[0]]: { value: parseFloat(fields[1]), unit: fields[2] } };