From 70671348e7bc7349eeb2fb5e3ecbafad95c03d1c Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Fri, 20 Sep 2024 14:23:14 +0200
Subject: [PATCH] fix(ui-study): tree not displaying after MUI update

---
 .../Singlestudy/explore/Debug/Tree/index.tsx  |   3 +-
 .../App/Singlestudy/explore/Debug/utils.ts    |  20 ---
 .../src/components/App/Studies/StudyTree.tsx  | 116 ++++++------------
 webapp/src/utils/pathUtils.ts                 |  15 +++
 4 files changed, 54 insertions(+), 100 deletions(-)
 create mode 100644 webapp/src/utils/pathUtils.ts

diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Tree/index.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Tree/index.tsx
index 6e53e09dbe..cc4e0e3a1f 100644
--- a/webapp/src/components/App/Singlestudy/explore/Debug/Tree/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Debug/Tree/index.tsx
@@ -1,6 +1,7 @@
 import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
 import FileTreeItem from "./FileTreeItem";
-import { getParentPaths, type TreeFolder } from "../utils";
+import type { TreeFolder } from "../utils";
+import { getParentPaths } from "../../../../../../utils/pathUtils";
 
 interface Props {
   data: TreeFolder;
diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/utils.ts b/webapp/src/components/App/Singlestudy/explore/Debug/utils.ts
index 86be694f83..fb48f910a6 100644
--- a/webapp/src/components/App/Singlestudy/explore/Debug/utils.ts
+++ b/webapp/src/components/App/Singlestudy/explore/Debug/utils.ts
@@ -84,23 +84,3 @@ export function getFileType(treeData: TreeData): FileType {
   }
   return isFolder(treeData) ? "folder" : "text";
 }
-
-////////////////////////////////////////////////////////////////
-// Tree
-////////////////////////////////////////////////////////////////
-
-/**
- * Get parent paths of a given path.
- *
- * @example
- * getParentPaths("a/b/c/d"); // Returns: ["a", "a/b", "a/b/c"]
- *
- * @param path - The path from which to get the parent paths.
- * @returns The parent paths.
- */
-export function getParentPaths(path: string) {
-  return path
-    .split("/")
-    .slice(0, -1) // Remove the last item
-    .map((_, index, arr) => arr.slice(0, index + 1).join("/"));
-}
diff --git a/webapp/src/components/App/Studies/StudyTree.tsx b/webapp/src/components/App/Studies/StudyTree.tsx
index e4876e8790..9a30303b8e 100644
--- a/webapp/src/components/App/Studies/StudyTree.tsx
+++ b/webapp/src/components/App/Studies/StudyTree.tsx
@@ -1,99 +1,57 @@
-import { useCallback, Fragment } from "react";
-import { Typography } from "@mui/material";
-import TreeView from "@mui/lab/TreeView";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import TreeItem from "@mui/lab/TreeItem";
 import { StudyTreeNode } from "./utils";
 import useAppSelector from "../../../redux/hooks/useAppSelector";
 import { getStudiesTree, getStudyFilters } from "../../../redux/selectors";
 import useAppDispatch from "../../../redux/hooks/useAppDispatch";
 import { updateStudyFilters } from "../../../redux/ducks/studies";
+import TreeItemEnhanced from "../../common/TreeItemEnhanced";
+import {
+  SimpleTreeView,
+  type SimpleTreeViewProps,
+} from "@mui/x-tree-view/SimpleTreeView";
+import { getParentPaths } from "../../../utils/pathUtils";
+import * as R from "ramda";
 
 function StudyTree() {
-  const folder = useAppSelector((state) => getStudyFilters(state).folder);
+  const folder = useAppSelector((state) => getStudyFilters(state).folder, R.T);
   const studiesTree = useAppSelector(getStudiesTree);
   const dispatch = useAppDispatch();
 
-  const getExpandedTab = (nodeId: string): string[] => {
-    const expandedTab: string[] = [];
-    const tab = nodeId.split("/");
-    let lastnodeId = "";
-    for (let i = 0; i < tab.length; i += 1) {
-      lastnodeId += i === 0 ? tab[i] : `/${tab[i]}`;
-      expandedTab.push(lastnodeId);
-    }
-    return expandedTab;
-  };
+  ////////////////////////////////////////////////////////////////
+  // Event Handlers
+  ////////////////////////////////////////////////////////////////
+
+  const handleSelectedItemsChange: SimpleTreeViewProps<false>["onSelectedItemsChange"] =
+    (event, itemId) => {
+      if (itemId) {
+        dispatch(updateStudyFilters({ folder: itemId }));
+      }
+    };
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  const buildTree = (children: StudyTreeNode[], parentId?: string) => {
+    return children.map((elm) => {
+      const newId = parentId ? `${parentId}/${elm.name}` : elm.name;
 
-  const buildTree = (children: StudyTreeNode[], parentId: string) =>
-    children.map((elm) => {
-      const newId = `${parentId}/${elm.name}`;
       return (
-        <Fragment key={newId}>
-          <TreeItem
-            key={`treeitem-${newId}`}
-            nodeId={newId}
-            label={
-              <Typography
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  dispatch(updateStudyFilters({ folder: newId }));
-                }}
-              >
-                {elm.name}
-              </Typography>
-            }
-            collapseIcon={
-              elm.children.length > 0 ? <ExpandMoreIcon /> : undefined
-            }
-            expandIcon={
-              elm.children.length > 0 ? <ChevronRightIcon /> : undefined
-            }
-          >
-            {buildTree((elm as StudyTreeNode).children, newId)}
-          </TreeItem>
-        </Fragment>
+        <TreeItemEnhanced key={newId} itemId={newId} label={elm.name}>
+          {buildTree(elm.children, newId)}
+        </TreeItemEnhanced>
       );
     });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const getDefaultSelected = useCallback(() => [folder], []);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const getDefaultExpanded = useCallback(() => getExpandedTab(folder), []);
+  };
 
   return (
-    <TreeView
-      aria-label="Study tree"
-      defaultSelected={getDefaultSelected()}
-      defaultExpanded={getDefaultExpanded()}
-      selected={[folder]}
-      sx={{ flexGrow: 1, height: 0, width: "100%", py: 1 }}
+    <SimpleTreeView
+      defaultExpandedItems={[...getParentPaths(folder), folder]}
+      defaultSelectedItems={folder}
+      sx={{ flexGrow: 1, height: 0, width: 1, py: 1 }}
+      onSelectedItemsChange={handleSelectedItemsChange}
     >
-      <TreeItem
-        nodeId={studiesTree.name}
-        label={
-          <Typography
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              dispatch(updateStudyFilters({ folder: studiesTree.name }));
-            }}
-          >
-            {studiesTree.name}
-          </Typography>
-        }
-        collapseIcon={
-          studiesTree.children.length > 0 ? <ExpandMoreIcon /> : undefined
-        }
-        expandIcon={
-          studiesTree.children.length > 0 ? <ChevronRightIcon /> : undefined
-        }
-      >
-        {buildTree(studiesTree.children, studiesTree.name)}
-      </TreeItem>
-    </TreeView>
+      {buildTree([studiesTree])}
+    </SimpleTreeView>
   );
 }
 
diff --git a/webapp/src/utils/pathUtils.ts b/webapp/src/utils/pathUtils.ts
new file mode 100644
index 0000000000..fa0da85b90
--- /dev/null
+++ b/webapp/src/utils/pathUtils.ts
@@ -0,0 +1,15 @@
+/**
+ * Get parent paths of a given path.
+ *
+ * @example
+ * getParentPaths("a/b/c/d"); // Returns: ["a", "a/b", "a/b/c"]
+ *
+ * @param path - The path from which to get the parent paths.
+ * @returns The parent paths.
+ */
+export function getParentPaths(path: string) {
+  return path
+    .split("/")
+    .slice(0, -1) // Remove the last item
+    .map((_, index, arr) => arr.slice(0, index + 1).join("/"));
+}