[WIP] working on graph bug

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 getCacheSeries = useCallback(
-    const times = createTimes(
+    (xaxisRange0: Date, xaxisRange1: Date) => {
-      TimeRange.fromTimes(
+      const times = createTimes(
-        UnixTime.fromDate(xaxisRange0),
+        TimeRange.fromTimes(
-        UnixTime.fromDate(xaxisRange1)
+          UnixTime.fromDate(xaxisRange0),
-      ),
+          UnixTime.fromDate(xaxisRange1)
-      NUMBER_OF_NODES
+        ),
-    );
+        NUMBER_OF_NODES
-    cache.getSeries(times);
+      );
-    times$.next(times);
+      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) => {
+            onRelayout={handleRelayout}
-              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);
-              }
-            }}
           />
         </div>
       );

typescript/Frontend/src/dataCache/dataCache.ts

@@ -109,6 +109,7 @@ export default class DataCache<T extends Record<string, CsvEntry>> {
     //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) {

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] } };