Merge pull request #48 from sc420/36-add-tooltip-when-hovering-on-the…

…-collapsed-feature-icons show tooltip when collapsed
sc420 · Jan 20, 2024 · e8af247 · e8af247
2 parents 9099861 + 9bf53d4
commit e8af247
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 20 deletions.
diff --git a/interactive-computational-graph/src/App.tsx b/interactive-computational-graph/src/App.tsx
@@ -102,6 +102,7 @@ const App: FunctionComponent = () => {
         {/* Sidebar */}
         <Sidebar isSidebarOpen={isSidebarOpen} onToggleSidebar={toggleSidebar}>
           <FeatureNavigator
+            isSidebarOpen={isSidebarOpen}
             selectedItem={selectedFeature}
             onItemClick={toggleFeature}
           />

diff --git a/interactive-computational-graph/src/components/FeatureNavigator.test.tsx b/interactive-computational-graph/src/components/FeatureNavigator.test.tsx
@@ -4,7 +4,11 @@ import FeatureNavigator from "./FeatureNavigator";
 test("should render the selected item", () => {
   const handleItemClick = jest.fn();
   render(
-    <FeatureNavigator selectedItem="add-nodes" onItemClick={handleItemClick} />,
+    <FeatureNavigator
+      isSidebarOpen={true}
+      selectedItem="add-nodes"
+      onItemClick={handleItemClick}
+    />,
   );
 
   const addNodesItem = screen.getByText("Add Nodes");
@@ -14,7 +18,11 @@ test("should render the selected item", () => {
 test("should trigger event when clicking the non-selected item", () => {
   const handleItemClick = jest.fn();
   render(
-    <FeatureNavigator selectedItem={null} onItemClick={handleItemClick} />,
+    <FeatureNavigator
+      isSidebarOpen={true}
+      selectedItem={null}
+      onItemClick={handleItemClick}
+    />,
   );
 
   const addNodesItem = screen.getByText("Add Nodes");
@@ -25,7 +33,11 @@ test("should trigger event when clicking the non-selected item", () => {
 test("should trigger event when clicking the selected item", () => {
   const handleItemClick = jest.fn();
   render(
-    <FeatureNavigator selectedItem="add-nodes" onItemClick={handleItemClick} />,
+    <FeatureNavigator
+      isSidebarOpen={true}
+      selectedItem="add-nodes"
+      onItemClick={handleItemClick}
+    />,
   );
 
   const addNodesItem = screen.getByText("Add Nodes");

diff --git a/interactive-computational-graph/src/components/FeatureNavigator.tsx b/interactive-computational-graph/src/components/FeatureNavigator.tsx
@@ -9,11 +9,13 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  Tooltip,
 } from "@mui/material";
-import { type FunctionComponent } from "react";
+import { useCallback, type FunctionComponent } from "react";
 import type SelectedFeature from "../features/SelectedFeature";
 
 interface FeatureNavigatorProps {
+  isSidebarOpen: boolean;
   selectedItem: string | null;
   onItemClick: (item: SelectedFeature | null) => void;
 }
@@ -25,6 +27,7 @@ interface FeatureItem {
 }
 
 const FeatureNavigator: FunctionComponent<FeatureNavigatorProps> = ({
+  isSidebarOpen,
   selectedItem,
   onItemClick,
 }) => {
@@ -61,25 +64,42 @@ const FeatureNavigator: FunctionComponent<FeatureNavigatorProps> = ({
     },
   ];
 
-  const handleItemClick = (id: SelectedFeature): void => {
-    const newSelectedItem = id !== selectedItem ? id : null;
-    onItemClick(newSelectedItem);
-  };
+  const handleItemClick = useCallback(
+    (id: SelectedFeature): void => {
+      const newSelectedItem = id !== selectedItem ? id : null;
+      onItemClick(newSelectedItem);
+    },
+    [onItemClick, selectedItem],
+  );
 
   return (
     <List component="nav">
-      {featureItems.map((item) => (
-        <ListItemButton
-          key={item.id}
-          selected={selectedItem === item.id}
-          onClick={() => {
-            handleItemClick(item.id);
-          }}
-        >
-          <ListItemIcon>{item.icon}</ListItemIcon>
-          <ListItemText primary={item.text} />
-        </ListItemButton>
-      ))}
+      {featureItems.map((item) =>
+        isSidebarOpen ? (
+          <ListItemButton
+            key={item.id}
+            selected={selectedItem === item.id}
+            onClick={() => {
+              handleItemClick(item.id);
+            }}
+          >
+            <ListItemIcon>{item.icon}</ListItemIcon>
+            <ListItemText primary={item.text} />
+          </ListItemButton>
+        ) : (
+          <Tooltip key={item.id} title={item.text} placement="right">
+            <ListItemButton
+              selected={selectedItem === item.id}
+              onClick={() => {
+                handleItemClick(item.id);
+              }}
+            >
+              <ListItemIcon>{item.icon}</ListItemIcon>
+              <ListItemText primary={item.text} />
+            </ListItemButton>
+          </Tooltip>
+        ),
+      )}
     </List>
   );
 };