add edit mode for draggable items

sc420 · Nov 2, 2023 · 84eb521 · 84eb521
1 parent 3498997
commit 84eb521
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 10 deletions.
diff --git a/interactive-computational-graph/src/components/AddNodesPanel.tsx b/interactive-computational-graph/src/components/AddNodesPanel.tsx
@@ -19,12 +19,14 @@ import DraggableItem from "./DraggableItem";
 interface AddNodesPanelProps {
   onAddNode: (featureNodeType: FeatureNodeType) => void;
   onAddOperation: () => void;
+  onEditOperation: (featureNodeType: FeatureNodeType) => void;
   featureOperations: FeatureOperation[];
 }
 
 const AddNodesPanel: FunctionComponent<AddNodesPanelProps> = ({
   onAddNode,
   onAddOperation,
+  onEditOperation,
   featureOperations,
 }) => {
   const simpleOperations = featureOperations.filter(
@@ -66,12 +68,16 @@ const AddNodesPanel: FunctionComponent<AddNodesPanelProps> = ({
             <DraggableItem
               featureNodeType={{ nodeType: "CONSTANT" }}
               text="Constant"
-              onClick={onAddNode}
+              isEditing={false}
+              onClickItem={onAddNode}
+              onClickEditIcon={onEditOperation}
             />
             <DraggableItem
               featureNodeType={{ nodeType: "VARIABLE" }}
               text="Variable"
-              onClick={onAddNode}
+              isEditing={false}
+              onClickItem={onAddNode}
+              onClickEditIcon={onEditOperation}
             />
           </List>
         </AccordionDetails>
@@ -96,7 +102,9 @@ const AddNodesPanel: FunctionComponent<AddNodesPanelProps> = ({
                   operationId: operation.id,
                 }}
                 text={operation.text}
-                onClick={onAddNode}
+                isEditing={false}
+                onClickItem={onAddNode}
+                onClickEditIcon={onEditOperation}
               />
             ))}
           </List>
@@ -122,7 +130,9 @@ const AddNodesPanel: FunctionComponent<AddNodesPanelProps> = ({
                   operationId: operation.id,
                 }}
                 text={operation.text}
-                onClick={onAddNode}
+                isEditing={true}
+                onClickItem={onAddNode}
+                onClickEditIcon={onEditOperation}
               />
             ))}
             {/* Add operation */}

diff --git a/interactive-computational-graph/src/components/DraggableItem.tsx b/interactive-computational-graph/src/components/DraggableItem.tsx
@@ -1,5 +1,7 @@
 import DragHandleIcon from "@mui/icons-material/DragHandle";
+import EditIcon from "@mui/icons-material/Edit";
 import {
+  Icon,
   IconButton,
   ListItem,
   ListItemButton,
@@ -11,13 +13,17 @@ import type FeatureNodeType from "../features/FeatureNodeType";
 interface DraggableItemProps {
   featureNodeType: FeatureNodeType;
   text: string;
-  onClick: (featureNodeType: FeatureNodeType) => void;
+  isEditing: boolean;
+  onClickItem: (featureNodeType: FeatureNodeType) => void;
+  onClickEditIcon: (featureNodeType: FeatureNodeType) => void;
 }
 
 const DraggableItem: FunctionComponent<DraggableItemProps> = ({
   featureNodeType,
   text,
-  onClick,
+  isEditing,
+  onClickItem,
+  onClickEditIcon,
 }) => {
   const handleDragStart = useCallback(
     (event: DragEvent): void => {
@@ -34,9 +40,21 @@ const DraggableItem: FunctionComponent<DraggableItemProps> = ({
     <ListItem
       disablePadding
       secondaryAction={
-        <IconButton edge="end">
-          <DragHandleIcon />
-        </IconButton>
+        isEditing ? (
+          <IconButton
+            edge="end"
+            size="small"
+            onClick={() => {
+              onClickEditIcon(featureNodeType);
+            }}
+          >
+            <EditIcon />
+          </IconButton>
+        ) : (
+          <Icon color="action">
+            <DragHandleIcon />
+          </Icon>
+        )
       }
     >
       <ListItemButton
@@ -46,7 +64,7 @@ const DraggableItem: FunctionComponent<DraggableItemProps> = ({
           handleDragStart(event);
         }}
         onClick={() => {
-          onClick(featureNodeType);
+          onClickItem(featureNodeType);
         }}
       >
         <ListItemText primary={text} />

diff --git a/interactive-computational-graph/src/components/FeaturePanel.tsx b/interactive-computational-graph/src/components/FeaturePanel.tsx
@@ -17,6 +17,7 @@ interface FeaturePanelProps {
   explainDerivativeData: ExplainDerivativeData[];
   onAddNode: (featureNodeType: FeatureNodeType) => void;
   onAddOperation: () => void;
+  onEditOperation: (featureNodeType: FeatureNodeType) => void;
   onClearSelection: () => void;
   onSelectNode: (nodeId: string) => void;
 }
@@ -29,6 +30,7 @@ const FeaturePanel: FunctionComponent<FeaturePanelProps> = ({
   explainDerivativeData,
   onAddNode,
   onAddOperation,
+  onEditOperation,
   onClearSelection,
   onSelectNode,
 }) => {
@@ -40,6 +42,7 @@ const FeaturePanel: FunctionComponent<FeaturePanelProps> = ({
             featureOperations={featureOperations}
             onAddNode={onAddNode}
             onAddOperation={onAddOperation}
+            onEditOperation={onEditOperation}
           />
         );
       case "view-nodes":
@@ -60,6 +63,7 @@ const FeaturePanel: FunctionComponent<FeaturePanelProps> = ({
             featureOperations={featureOperations}
             onAddNode={onAddNode}
             onAddOperation={onAddOperation}
+            onEditOperation={onEditOperation}
           />
         );
       case "examples":

diff --git a/interactive-computational-graph/src/components/GraphContainer.tsx b/interactive-computational-graph/src/components/GraphContainer.tsx
@@ -280,6 +280,14 @@ const GraphContainer: FunctionComponent<GraphContainerProps> = ({
     setNextOperationId((nextOperationId) => nextOperationId + 1);
   }, [nextOperationId]);
 
+  const handleEditOperation = useCallback(
+    (featureNodeType: FeatureNodeType) => {
+      // TODO(sc420): Open edit operation modal
+      console.log(featureNodeType);
+    },
+    [],
+  );
+
   const handleClearSelection = useCallback(() => {
     setReactFlowNodes((nodes) => deselectAllNodes(nodes));
   }, []);
@@ -586,6 +594,7 @@ const GraphContainer: FunctionComponent<GraphContainerProps> = ({
               explainDerivativeData={explainDerivativeData}
               onAddNode={handleAddNode}
               onAddOperation={handleAddOperation}
+              onEditOperation={handleEditOperation}
               onClearSelection={handleClearSelection}
               onSelectNode={handleSelectNode}
             />