working graphs and toggles

typescript/Frontend/src/Login.tsx

@@ -40,7 +40,6 @@ const Login = ({ setToken, setLanguage }: I_LoginProps) => {
             .then(() => {
               setToken(data.token);
               saveCurrentUser(data.user);
-              console.log(data.user);
               setLoading(false);
               setLanguage(data.user.language);
             })

typescript/Frontend/src/ResetPassword.tsx

@@ -34,7 +34,6 @@ const ResetPassword = () => {
         })
         .then((res) => {
           saveCurrentUser(res.data);
-          console.log(res.data);
           setLoading(false);
         })
         .catch((err) => setError(err));

typescript/Frontend/src/components/Context/LogContextProvider.tsx

@@ -0,0 +1,39 @@
+import { createContext, ReactNode, SetStateAction, useState } from "react";
+import { TreeElement, ToggleElement } from "../Installations/Log/CheckboxTree";
+import React from "react";
+
+interface LogContextProviderProps {
+  toggles: TreeElement[] | null;
+  setToggles: (value: TreeElement[]) => void;
+  checkedToggles: ToggleElement | null;
+  setCheckedToggles: React.Dispatch<SetStateAction<ToggleElement | null>>;
+}
+
+export const LogContext = createContext<LogContextProviderProps>({
+  toggles: [],
+  setToggles: () => {},
+  checkedToggles: {},
+  setCheckedToggles: () => {},
+});
+
+const LogContextProvider = ({ children }: { children: ReactNode }) => {
+  const [toggles, setToggles] = useState<TreeElement[] | null>(null);
+  const [checkedToggles, setCheckedToggles] = useState<ToggleElement | null>(
+    null
+  );
+  console.log("provider", toggles);
+  return (
+    <LogContext.Provider
+      value={{
+        toggles,
+        setToggles,
+        checkedToggles,
+        setCheckedToggles,
+      }}
+    >
+      {children}
+    </LogContext.Provider>
+  );
+};
+
+export default LogContextProvider;

typescript/Frontend/src/components/Context/UsersContextProvider.tsx

@@ -90,7 +90,6 @@ const UsersContextProvider = ({ children }: { children: ReactNode }) => {
 
   const fetchAvailableUsers = async (): Promise<void> => {
     return axiosConfig.get("/GetAllChildUsers").then((res) => {
-      console.log(res);
       setAvailableUsers(res.data);
     });
   };

typescript/Frontend/src/components/Installations/Installations.tsx

@@ -8,30 +8,35 @@ import InstallationContextProvider from "../Context/InstallationContextProvider"
 import SearchSidebar from "../Layout/Search";
 import InstallationList from "./InstallationList";
 import Installation from "./Installation";
+import CheckboxTree from "./Log/CheckboxTree";
+import LogContextProvider from "../Context/LogContextProvider";
 
 const Installations = () => {
   return (
     <InstallationContextProvider>
-      <Grid container spacing={2} height="100%">
-        <Grid item xs={3}>
-          <SearchSidebar
-            id="installations-search-sidebar"
-            listComponent={InstallationList}
-          />
-        </Grid>
-        <Grid item xs={9}>
-          <InstallationTabs />
-          <Routes>
-            <Route
-              path={routes.installation + ":id"}
-              element={<Installation />}
-              index
+      <LogContextProvider>
+        <Grid container spacing={2} height="100%">
+          <Grid item xs={3}>
+            <SearchSidebar
+              id="installations-search-sidebar"
+              listComponent={InstallationList}
             />
-            <Route path={routes.alarms + ":id"} element={<Alarms />} />
-            <Route path={routes.log + ":id"} element={<Log />} />
-          </Routes>
+            <CheckboxTree />
+          </Grid>
+          <Grid item xs={9}>
+            <InstallationTabs />
+            <Routes>
+              <Route
+                path={routes.installation + ":id"}
+                element={<Installation />}
+                index
+              />
+              <Route path={routes.alarms + ":id"} element={<Alarms />} />
+              <Route path={routes.log + ":id"} element={<Log />} />
+            </Routes>
+          </Grid>
         </Grid>
-      </Grid>
+      </LogContextProvider>
     </InstallationContextProvider>
   );
 };

typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx

@@ -0,0 +1,110 @@
+import { TreeItem, TreeView } from "@mui/lab";
+import { Checkbox, Divider } from "@mui/material";
+import { useContext, ReactNode } from "react";
+import { LogContext } from "../../Context/LogContextProvider";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import useRouteMatch from "../../../hooks/useRouteMatch";
+import routes from "../../../routes.json";
+
+export interface ToggleElement {
+  [key: string]: boolean;
+}
+
+export interface TreeElement {
+  id: string;
+  name: string;
+  children: TreeElement[];
+  checked?: boolean;
+}
+
+const CheckboxTree = () => {
+  const { toggles, setCheckedToggles, checkedToggles } = useContext(LogContext);
+  const routeMatch = useRouteMatch([
+    routes.installations + routes.list + routes.log + ":id",
+  ]);
+
+  const getNodes = (element: TreeElement): null | ReactNode => {
+    return element.children.length > 0 ? renderTree(element.children) : null;
+  };
+
+  const handleCheckChildren = (children: TreeElement[], checked?: boolean) => {
+    if (children.length > 0) {
+      children.forEach((child) => {
+        setCheckedToggles((prevState) => ({
+          ...prevState,
+          [child.id]: !checked,
+        }));
+        if (child.children.length > 0) {
+          handleCheckChildren(child.children, checked);
+        }
+      });
+    }
+  };
+
+  const handleClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    element: TreeElement,
+    checked?: boolean
+  ) => {
+    event.stopPropagation();
+    handleCheckChildren([element], checked);
+  };
+
+  const handleExpandClick = (
+    event: React.MouseEvent<HTMLLIElement, MouseEvent>
+  ) => {
+    event.stopPropagation();
+  };
+
+  const renderTree = (data: TreeElement[]): ReactNode => {
+    return data.map((element) => {
+      const checked = checkedToggles?.[element.id];
+      const splitName = element.name.split("/");
+      return (
+        <TreeItem
+          id={"checkbox-tree-" + element.name}
+          key={element.name}
+          nodeId={element.name}
+          onClick={handleExpandClick}
+          label={
+            <>
+              <Checkbox
+                checked={checked}
+                onClick={(e) => handleClick(e, element, checked)}
+              />
+              {splitName[splitName.length - 1]}
+            </>
+          }
+          sx={{
+            ".MuiTreeItem-content": { paddingY: "5px" },
+          }}
+        >
+          {getNodes(element)}
+        </TreeItem>
+      );
+    });
+  };
+  return (
+    <>
+      <Divider sx={{ mt: 2 }} />
+      {toggles !== null && routeMatch !== null && (
+        <TreeView
+          aria-label="rich object"
+          defaultCollapseIcon={<ExpandMoreIcon />}
+          defaultExpandIcon={<ChevronRightIcon />}
+          sx={{
+            height: 480,
+            flexGrow: 1,
+            overflow: "auto",
+            overflowX: "hidden",
+          }}
+        >
+          {renderTree(toggles)}
+        </TreeView>
+      )}
+    </>
+  );
+};
+
+export default CheckboxTree;

typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx

@@ -1,15 +1,15 @@
 import Plot from "react-plotly.js";
 import { RecordSeries } from "../../../dataCache/data";
-import { parseCsv, transformToGraphData } from "../../../util/graph.util";
+import { GraphData, mergeDeep, parseCsv } from "../../../util/graph.util";
 import { TimeRange, TimeSpan, UnixTime } from "../../../dataCache/time";
-import { ReactNode, useEffect, useMemo, useState } from "react";
+import { 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 { TreeItem, TreeView } from "@mui/lab";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import { Checkbox } from "@mui/material";
+
+import { LogContext } from "../../Context/LogContextProvider";
+import { TreeElement, ToggleElement } from "./CheckboxTree";
+import { isDefined } from "../../../dataCache/utils/maybe";
 
 export const createTimes = (
   range: TimeRange,
@@ -27,16 +27,19 @@ const NUMBER_OF_NODES = 100;
 
 const ScalarGraph = () => {
   const timeRange = createTimes(
-    UnixTime.fromTicks(1682085650).rangeBefore(TimeSpan.fromDays(1)),
+    UnixTime.fromTicks(1682085650).rangeBefore(TimeSpan.fromDays(4)),
     NUMBER_OF_NODES
   );
   const [timeSeries, setTimeSeries] = useState<RecordSeries>([]);
-  const [uiRevision, setUiRevision] = useState(Math.random());
   const [range, setRange] = useState([
     timeRange[0].toDate(),
     timeRange[timeRange.length - 1].toDate(),
   ]);
-  const [toggles, setToggles] = useState<TreeElement[] | null>(null);
+  const [uiRevision, setUiRevision] = useState(Math.random());
+  const [plotTitles, setPlotTitles] = useState<string[]>([]);
+
+  const { toggles, setToggles, setCheckedToggles, checkedToggles } =
+    useContext(LogContext);
 
   const times$ = useMemo(() => new BehaviorSubject(timeRange), []);
 
@@ -49,23 +52,37 @@ const ScalarGraph = () => {
     ""
   );
 
-  function insert(
+  const insert = (
     children: TreeElement[] = [],
     [head, ...tail]: string[]
-  ): TreeElement[] {
+  ): TreeElement[] => {
     let child = children.find((child) => child.name === head);
-    if (!child)
+
+    if (!child) {
       children.push(
         (child = {
-          id: head + tail.join("_"),
+          id: head,
           name: head,
-          checked: false,
           children: [],
         })
       );
-    if (tail.length > 0) insert(child.children, tail);
+    }
+    if (tail.length > 0) {
+      insert(child.children, tail);
+    }
     return children;
-  }
+  };
+
+  const flattenToggles = (toggles: TreeElement[]): ToggleElement => {
+    return toggles.reduce((acc, current) => {
+      if (current.children.length > 0) {
+        acc[current.id] = false;
+        return { ...acc, ...flattenToggles(current.children) };
+      }
+      acc[current.id] = false;
+      return acc;
+    }, {} as ToggleElement);
+  };
 
   useEffect(() => {
     const subscription = cache.gotData
@@ -78,79 +95,34 @@ const ScalarGraph = () => {
         const timeSeries = cache.getSeries(times);
         setTimeSeries(timeSeries);
         const toggleValues = timeSeries.find((timeStamp) => timeStamp.value);
-
         if (toggles === null && toggleValues && toggleValues.value) {
-          setToggles(
-            Object.keys(toggleValues.value)
-              .map((path) => path.split("/").slice(1))
-              .reduce(
-                (children, path) => insert(children, path),
-                [] as TreeElement[]
-              )
-          );
+          console.log("toggles inside", toggles);
+          const treeElements = Object.keys(toggleValues.value)
+            .map((path) => {
+              return path
+                .split("/")
+                .map(
+                  (split, i) =>
+                    "/" +
+                    path
+                      .split("/")
+                      .slice(1, i + 1)
+                      .join("/")
+                )
+                .slice(1);
+            })
+            .reduce(
+              (children, path) => insert(children, path),
+              [] as TreeElement[]
+            );
+          console.log("elements", treeElements);
+          setToggles(treeElements);
+          setCheckedToggles(flattenToggles(treeElements));
         }
       });
 
     return () => subscription.unsubscribe();
-  }, []);
-
-  interface TreeElement {
-    id: string;
-    name: string;
-    children: TreeElement[];
-    checked: boolean;
-  }
-
-  const getNodes = (element: TreeElement): null | ReactNode => {
-    return element.children.length > 0 ? renderTree(element.children) : null;
-  };
-
-  const renderTree = (data: TreeElement[]): ReactNode => {
-    return data.map((element) => {
-      return (
-        <TreeItem
-          id={"checkbox-tree-" + element.name}
-          key={element.name}
-          nodeId={element.name}
-          label={
-            <>
-              <Checkbox
-                checked={element.checked}
-                onClick={() => {
-                  if (toggles) {
-                    const togglesValue = toggles;
-                    const index = toggles?.findIndex((toggle) => {
-                      return element.id === toggle.id;
-                    });
-                    if (index > 0) {
-                      togglesValue[index] = {
-                        ...element,
-                        checked: !element.checked,
-                      };
-                      setToggles(togglesValue);
-                    }
-                  }
-                }}
-              />
-              {element.name}
-            </>
-          }
-          sx={{
-            ".MuiTreeItem-content": { paddingY: "12px" },
-          }}
-        >
-          {getNodes(element)}
-        </TreeItem>
-      );
-    });
-  };
-
-  const round = (date: Date) => {
-    const minutes = 30;
-    const ms = 1000 * 60 * minutes;
-
-    return new Date(Math.round(date.getTime() / ms) * ms);
-  };
+  }, [toggles]);
 
   const fetchData = (
     timestamp: UnixTime
@@ -179,81 +151,111 @@ const ScalarGraph = () => {
     []
   );
 
-  const renderGraphs = () => {
-    const coordinateTimeSeries = transformToGraphData(timeSeries);
-    return Object.keys(coordinateTimeSeries).map((path) => {
-      const data = coordinateTimeSeries[path] ?? { x: [], y: [] };
-      return (
-        <Plot
-          data={[
-            {
-              ...data,
-              type: "scatter",
-              mode: "lines+markers",
-              marker: { color: "red" },
-            },
-          ]}
-          layout={{
-            width: 1000,
-            height: 500,
-            title: path,
-            uirevision: uiRevision,
-            xaxis: {
-              autorange: false,
-              range: range,
-              type: "date",
-            },
-          }}
-          config={{
-            modeBarButtonsToRemove: [
-              "lasso2d",
-              "select2d",
-              "pan2d",
-              "autoScale2d",
-            ],
-          }}
-          onRelayout={(params) => {
-            const xaxisRange0 = params["xaxis.range[0]"];
-            const xaxisRange1 = params["xaxis.range[1]"];
-
-            if (xaxisRange0 && xaxisRange1) {
-              setRange([new Date(xaxisRange0), new Date(xaxisRange1)]);
-              setUiRevision(Math.random());
-              const times = createTimes(
-                TimeRange.fromTimes(
-                  UnixTime.fromDate(new Date(xaxisRange0)),
-                  UnixTime.fromDate(new Date(xaxisRange1))
-                ),
-                NUMBER_OF_NODES
-              );
-              cache.getSeries(times);
-              times$.next(times);
+  const transformToGraphData = (timeStampData: RecordSeries) => {
+    const graphData = timeStampData.reduce((acc, curr) => {
+      if (isDefined(curr.value)) {
+        const timeStampObj = Object.keys(curr.value).reduce(
+          (pathAcc, currPath) => {
+            if (currPath) {
+              return {
+                ...pathAcc,
+                [currPath]: {
+                  x: [new Date(curr.time.ticks * 1000)],
+                  y: [curr.value ? curr.value[currPath] : 0],
+                },
+              };
             }
-          }}
-        />
-      );
-    });
+            return pathAcc;
+          },
+          {} as GraphData
+        );
+        if (plotTitles.length === 0) {
+          setPlotTitles(Object.keys(curr.value));
+        }
+        return mergeDeep(acc, timeStampObj);
+      }
+      return acc;
+    }, {} as GraphData);
+
+    if (Object.keys(graphData).length > 0) {
+      return graphData;
+    }
+    return plotTitles.reduce(
+      (acc, curr) => ({
+        ...acc,
+        [curr]: {
+          x: [],
+          y: [],
+        },
+      }),
+      {} as GraphData
+    );
   };
 
-  return (
-    <>
-      {renderGraphs()}
-      {toggles !== null && (
-        <TreeView
-          aria-label="rich object"
-          defaultCollapseIcon={<ExpandMoreIcon />}
-          defaultExpandIcon={<ChevronRightIcon />}
-          sx={{
-            height: 480,
-            flexGrow: 1,
-            overflow: "auto",
-            overflowX: "hidden",
-          }}
-        >
-          {renderTree(toggles)}
-        </TreeView>
-      )}
-    </>
-  );
+  const renderGraphs = () => {
+    if (checkedToggles) {
+      const coordinateTimeSeries = transformToGraphData(timeSeries);
+      console.log("coordinateTimeSeries", coordinateTimeSeries, checkedToggles);
+      return Object.keys(coordinateTimeSeries)
+        .filter((path) => {
+          return checkedToggles[path];
+        })
+        .map((path) => {
+          const data = coordinateTimeSeries[path] ?? { x: [], y: [] };
+          return (
+            <Plot
+              key={path}
+              data={[
+                {
+                  ...data,
+                  type: "scatter",
+                  mode: "lines+markers",
+                  marker: { color: "red" },
+                },
+              ]}
+              layout={{
+                width: 1000,
+                height: 500,
+                title: path,
+                uirevision: uiRevision,
+                xaxis: {
+                  autorange: false,
+                  range: range,
+                  type: "date",
+                },
+              }}
+              config={{
+                modeBarButtonsToRemove: [
+                  "lasso2d",
+                  "select2d",
+                  "pan2d",
+                  "autoScale2d",
+                ],
+              }}
+              onRelayout={(params) => {
+                const xaxisRange0 = params["xaxis.range[0]"];
+                const xaxisRange1 = params["xaxis.range[1]"];
+
+                if (xaxisRange0 && xaxisRange1) {
+                  setRange([new Date(xaxisRange0), new Date(xaxisRange1)]);
+                  setUiRevision(Math.random());
+                  const times = createTimes(
+                    TimeRange.fromTimes(
+                      UnixTime.fromDate(new Date(xaxisRange0)),
+                      UnixTime.fromDate(new Date(xaxisRange1))
+                    ),
+                    NUMBER_OF_NODES
+                  );
+                  console.log("times", times);
+                  cache.getSeries(times);
+                  times$.next(times);
+                }
+              }}
+            />
+          );
+        });
+    }
+  };
+  return <>{renderGraphs()}</>;
 };
 export default ScalarGraph;

typescript/Frontend/src/components/Layout/Search.tsx

@@ -12,7 +12,7 @@ const SearchSidebar = (props: SearchSidebarProps) => {
   const intl = useIntl();
 
   return (
-    <div style={{ height: "100%" }}>
+    <div style={{ height: "500px", overflow: "hidden" }}>
       <TextField
         id={id}
         label={intl.formatMessage({

typescript/Frontend/src/util/graph.util.tsx

@@ -22,30 +22,6 @@ export const mergeDeep = (...objects: any[]) => {
   }, {} as GraphData);
 };
 
-export const transformToGraphData = (timeStampData: RecordSeries) => {
-  return timeStampData.reduce((acc, curr) => {
-    if (isDefined(curr.value)) {
-      const timeStampObj = Object.keys(curr.value).reduce(
-        (pathAcc, currPath) => {
-          if (currPath) {
-            return {
-              ...pathAcc,
-              [currPath]: {
-                x: [new Date(curr.time.ticks * 1000)],
-                y: [curr.value ? curr.value[currPath] : 0],
-              },
-            };
-          }
-          return pathAcc;
-        },
-        {} as GraphData
-      );
-      return mergeDeep(acc, timeStampObj);
-    }
-    return acc;
-  }, {} as GraphData);
-};
-
 export interface GraphCoordinates {
   x: Datum[] | Datum[][] | TypedArray;
   y: Datum[] | Datum[][] | TypedArray;