feat(ui-debug): allow to expand/collapse the tree without selecting

AntaresSimulatorTeam · Sep 17, 2024 · 7cfa296 · 7cfa296
1 parent 552f535
commit 7cfa296
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Tree/FileTreeItem.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Tree/FileTreeItem.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@mui/material";
-import { TreeItem } from "@mui/x-tree-view/TreeItem";
+import { TreeItem, type TreeItemProps } from "@mui/x-tree-view/TreeItem";
 import { TreeData, getFileType, getFileIcon, isFolder } from "../utils";
 import DebugContext from "../DebugContext";
 import { useContext } from "react";
@@ -20,7 +20,15 @@ function FileTreeItem({ name, treeData, path }: Props) {
   // Event handlers
   ////////////////////////////////////////////////////////////////
 
-  const handleClick = () => {
+  const handleClick: TreeItemProps["onClick"] = ({ target }) => {
+    // The item is not selected if the click is on the expand/collapse icon
+    if (
+      target instanceof Element &&
+      target.closest(".MuiTreeItem-iconContainer")
+    ) {
+      return;
+    }
+
     setSelectedFile({ fileType, filename: name, filePath, treeData });
   };
 
@@ -38,6 +46,12 @@ function FileTreeItem({ name, treeData, path }: Props) {
         </Box>
       }
       onClick={handleClick}
+      sx={{
+        // Expand/collapse icon
+        ".MuiTreeItem-iconContainer:hover": {
+          backgroundColor: "rgb(0 0 0 / 50%)",
+        },
+      }}
     >
       {isFolder(treeData) &&
         Object.keys(treeData).map((childName) => (

diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Tree/index.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Tree/index.tsx
@@ -1,10 +1,12 @@
 import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+import ArrowRightIcon from "@mui/icons-material/ArrowRight";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import FileTreeItem from "./FileTreeItem";
 import { getParentPaths, type TreeFolder } from "../utils";
 
 interface Props {
   data: TreeFolder;
-  // `currentPath` must not be undefined to make `SimpleTreeView` controlled
+  // `currentPath` must not be `undefined` to make `SimpleTreeView` controlled
   currentPath: string | null;
   expandedItems: string[];
   setExpandedItems: React.Dispatch<React.SetStateAction<string[]>>;
@@ -42,6 +44,10 @@ function Tree(props: Props) {
           : expandedItems
       }
       onExpandedItemsChange={handleExpandedItemsChange}
+      slots={{
+        expandIcon: ArrowRightIcon,
+        collapseIcon: ArrowDropDownIcon,
+      }}
     >
       {Object.keys(data).map((filename) => (
         <FileTreeItem