Merge pull request #45 from sc420/33-show-help-text-when-mouse-hovers…

…-on-operation-in-add-nodes-panel show tooltip
sc420 · Jan 17, 2024 · 5c7de08 · 5c7de08
2 parents a250d77 + f853d42
commit 5c7de08
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 27 deletions.
diff --git a/interactive-computational-graph/src/components/AddNodesPanel.tsx b/interactive-computational-graph/src/components/AddNodesPanel.tsx
@@ -106,13 +106,15 @@ const AddNodesPanel: FunctionComponent<AddNodesPanelProps> = ({
             <DraggableItem
               featureNodeType={{ nodeType: "CONSTANT" }}
               text="Constant"
+              helpText="Set a constant value"
               editable={false}
               onClickItem={onAddNode}
               onClickEditIcon={null}
             />
             <DraggableItem
               featureNodeType={{ nodeType: "VARIABLE" }}
               text="Variable"
+              helpText="Set a variable"
               editable={false}
               onClickItem={onAddNode}
               onClickEditIcon={null}
@@ -157,6 +159,7 @@ const AddNodesPanel: FunctionComponent<AddNodesPanelProps> = ({
                       operationId: operation.id,
                     }}
                     text={operation.text}
+                    helpText={operation.helpText}
                     editable
                     onClickItem={onAddNode}
                     onClickEditIcon={() => {
@@ -189,6 +192,7 @@ const AddNodesPanel: FunctionComponent<AddNodesPanelProps> = ({
                   operationId: operation.id,
                 }}
                 text={operation.text}
+                helpText={operation.helpText}
                 editable
                 onClickItem={onAddNode}
                 onClickEditIcon={() => {

diff --git a/interactive-computational-graph/src/components/DraggableItem.test.tsx b/interactive-computational-graph/src/components/DraggableItem.test.tsx
@@ -10,6 +10,7 @@ test("should trigger event when clicking item", () => {
     <DraggableItem
       featureNodeType={featureNodeType}
       text="Constant"
+      helpText="Set a constant value"
       editable={false}
       onClickItem={handleClickItem}
       onClickEditIcon={handleClickEditIcon}
@@ -29,6 +30,7 @@ test("should trigger event when clicking the edit icon", () => {
     <DraggableItem
       featureNodeType={featureNodeType}
       text="Constant"
+      helpText="Set a constant value"
       editable
       onClickItem={handleClickItem}
       onClickEditIcon={handleClickEditIcon}

diff --git a/interactive-computational-graph/src/components/DraggableItem.tsx b/interactive-computational-graph/src/components/DraggableItem.tsx
@@ -4,13 +4,15 @@ import {
   ListItem,
   ListItemButton,
   ListItemText,
+  Tooltip,
 } from "@mui/material";
 import { useCallback, type DragEvent, type FunctionComponent } from "react";
 import type FeatureNodeType from "../features/FeatureNodeType";
 
 interface DraggableItemProps {
   featureNodeType: FeatureNodeType;
   text: string;
+  helpText: string;
   editable: boolean;
   onClickItem: (featureNodeType: FeatureNodeType) => void;
   onClickEditIcon: ((featureNodeType: FeatureNodeType) => void) | null;
@@ -19,6 +21,7 @@ interface DraggableItemProps {
 const DraggableItem: FunctionComponent<DraggableItemProps> = ({
   featureNodeType,
   text,
+  helpText,
   editable,
   onClickItem,
   onClickEditIcon,
@@ -42,34 +45,36 @@ const DraggableItem: FunctionComponent<DraggableItemProps> = ({
   }, [featureNodeType, onClickEditIcon]);
 
   return (
-    <ListItem
-      disablePadding
-      secondaryAction={
-        editable ? (
-          <IconButton
-            edge="end"
-            size="small"
-            onClick={handleClickEditIcon}
-            aria-label={`Edit ${text}`}
-          >
-            <EditIcon />
-          </IconButton>
-        ) : null
-      }
-    >
-      <ListItemButton
-        dense
-        draggable
-        onDragStart={(event) => {
-          handleDragStart(event);
-        }}
-        onClick={() => {
-          onClickItem(featureNodeType);
-        }}
+    <Tooltip title={helpText} placement="right">
+      <ListItem
+        disablePadding
+        secondaryAction={
+          editable ? (
+            <IconButton
+              edge="end"
+              size="small"
+              onClick={handleClickEditIcon}
+              aria-label={`Edit ${text}`}
+            >
+              <EditIcon />
+            </IconButton>
+          ) : null
+        }
       >
-        <ListItemText primary={text} />
-      </ListItemButton>
-    </ListItem>
+        <ListItemButton
+          dense
+          draggable
+          onDragStart={(event) => {
+            handleDragStart(event);
+          }}
+          onClick={() => {
+            onClickItem(featureNodeType);
+          }}
+        >
+          <ListItemText primary={text} />
+        </ListItemButton>
+      </ListItem>
+    </Tooltip>
   );
 };