From 19b399806c9b529aafe1ceec3666fd46ee4cac36 Mon Sep 17 00:00:00 2001
From: Sina Blattmann <sina.blattmann@noser.com>
Date: Fri, 17 Mar 2023 10:19:05 +0100
Subject: [PATCH] temporary solution for tree bug

---
 .../src/components/Groups/Tree/GroupTree.tsx       | 14 +++++++-------
 .../src/components/Groups/Tree/TreeNode.tsx        |  8 ++++++++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
index c05dd63ac..e9ebab1e8 100644
--- a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
+++ b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useState, useContext, useRef } from "react";
+import { useEffect, useState, useContext } from "react";
 import axiosConfig from "../../../config/axiosConfig";
 import { I_Folder, I_Installation } from "../../../util/types";
-import { Alert, Button, CircularProgress, Grid } from "@mui/material";
+import { Alert, CircularProgress, Grid } from "@mui/material";
 import { DndProvider } from "react-dnd";
 import {
   MultiBackend,
@@ -67,7 +67,7 @@ const GroupTree = () => {
         <ScrollingComponent className={styles.treeContainer}>
           <Tree<I_Installation | I_Folder>
             tree={tree}
-            rootId={-1}
+            rootId={0}
             dragPreviewRender={(monitorProps) => (
               <DragPreview monitorProps={monitorProps} />
             )}
@@ -94,10 +94,10 @@ const GroupTree = () => {
               tree: NodeModel<I_Folder | I_Installation>[],
               options: DropOptions<I_Folder | I_Installation>
             ) => handleDrop(tree, options)}
-            onChangeOpen={(nodes) => {
-              console.log(nodes);
-              setOpenNodes(nodes);
-            }}
+            onChangeOpen={(nodeIds: (number | string)[]) =>
+              setOpenNodes(nodeIds)
+            }
+            initialOpen={openNodes}
           />
         </ScrollingComponent>
         <InnovenergySnackbar
diff --git a/typescript/Frontend/src/components/Groups/Tree/TreeNode.tsx b/typescript/Frontend/src/components/Groups/Tree/TreeNode.tsx
index 3c5ca4101..dda33fd53 100644
--- a/typescript/Frontend/src/components/Groups/Tree/TreeNode.tsx
+++ b/typescript/Frontend/src/components/Groups/Tree/TreeNode.tsx
@@ -34,6 +34,13 @@ const TreeNode = (props: TreeNodeProps) => {
   const isSelected = routeMatch?.params.id === node.data?.id.toString();
 
   const handleToggle = (e: React.MouseEvent) => {
+    setTimeout(
+      () =>
+        document
+          .getElementById(node.id.toString())
+          ?.scrollIntoView({ block: "center" }),
+      0
+    );
     e.stopPropagation();
     onToggle(node.id);
   };
@@ -46,6 +53,7 @@ const TreeNode = (props: TreeNodeProps) => {
 
   return (
     <div
+      id={node.id.toString()}
       className={`tree-node ${styles.root} ${
         isSelected ? styles.selected : ""
       }`}