Delete and duplicate buttons (buggy)

SakkiWakki · SakkiWakki · commit b3b63df025a6 · 2025-10-26T20:43:35.000-04:00
diff --git a/src/App.jsx b/src/App.jsx
@@ -341,6 +341,7 @@ const DnDFlow = () => {
 
       // Create node data with label and initialize all expected fields as empty strings
       let nodeData = {
+        id: newNodeId,
         label: `${type} ${newNodeId}`,
         nodeColor: '#DDE6ED' // Default node color
       };
@@ -1094,45 +1095,62 @@ const DnDFlow = () => {
   }, [selectedEdge, selectedNode, copiedNode, duplicateNode, setCopyFeedback]);
 
   return (
-    <div style={{ width: '100vw', height: '100vh', display: 'flex', flexDirection: 'column' }}>
-
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
       {/* Tab Navigation */}
-      <TopBar activeTab={activeTab} setActiveTab={setActiveTab} versionInfo={versionInfo} />
+      <TopBar
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        versionInfo={versionInfo}
+      />
 
       {/* Graph Editor Tab */}
-      {activeTab === 'graph' && (
-        <div style={{ display: 'flex', flex: 1, height: 'calc(100vh - 50px)', overflow: 'hidden' }}>
+      {activeTab === "graph" && (
+        <div
+          style={{
+            display: "flex",
+            flex: 1,
+            height: "calc(100vh - 50px)",
+            overflow: "hidden",
+          }}
+        >
           {/* Sidebar */}
           <div
-            data-sidebar-state={sidebarVisible ? 'expanded' : 'collapsed'}
+            data-sidebar-state={sidebarVisible ? "expanded" : "collapsed"}
             className="sidebar-container"
             style={{
-              position: 'relative',
-              width: sidebarVisible ? '250px' : '0px',
-              height: '100%',
-              transition: 'width 0.5s ease',
-              overflow: 'hidden'
+              position: "relative",
+              width: sidebarVisible ? "250px" : "0px",
+              height: "100%",
+              transition: "width 0.5s ease",
+              overflow: "hidden",
             }}
           >
             <div
               style={{
-                position: 'fixed',
-                left: sidebarVisible ? '0px' : '-250px',
-                top: '50px', // Account for top bar height
-                width: '250px',
-                height: 'calc(100vh - 50px)',
-                transition: 'left 0.5s ease',
+                position: "fixed",
+                left: sidebarVisible ? "0px" : "-250px",
+                top: "50px", // Account for top bar height
+                width: "250px",
+                height: "calc(100vh - 50px)",
+                transition: "left 0.5s ease",
                 zIndex: 10,
-                borderRight: '1px solid #ccc',
-                backgroundColor: '#1e1e2f'
+                borderRight: "1px solid #ccc",
+                backgroundColor: "#1e1e2f",
               }}
             >
               <Sidebar />
             </div>
           </div>
 
           {/* Main content area that moves with sidebar */}
-          <div style={{ position: 'relative', flex: 1, height: '100%' }}>
+          <div style={{ position: "relative", flex: 1, height: "100%" }}>
             <GraphView
               refEl={ref}
               reactFlowWrapperRef={reactFlowWrapper}
@@ -1153,13 +1171,23 @@ const DnDFlow = () => {
               duplicateNode={duplicateNode}
               copyFeedback={copyFeedback}
               ui={{
-                selectedNode, selectedEdge,
-                deleteSelectedNode, deleteSelectedEdge,
-                saveGraph, loadGraph, resetGraph, saveToPython, runPathsim,
+                selectedNode,
+                selectedEdge,
+                deleteSelectedNode,
+                deleteSelectedEdge,
+                saveGraph,
+                loadGraph,
+                resetGraph,
+                saveToPython,
+                runPathsim,
                 shareGraphURL,
-                dockOpen, setDockOpen, onToggleLogs,
-                showKeyboardShortcuts, setShowKeyboardShortcuts,
-                sidebarVisible, setSidebarVisible,
+                dockOpen,
+                setDockOpen,
+                onToggleLogs,
+                showKeyboardShortcuts,
+                setShowKeyboardShortcuts,
+                sidebarVisible,
+                setSidebarVisible,
               }}
             />
 
@@ -1197,42 +1225,38 @@ const DnDFlow = () => {
       )}
 
       {/* Events tab */}
-      {activeTab === 'events' && <EventsTab events={events} setEvents={setEvents} />}
+      {activeTab === "events" && (
+        <EventsTab events={events} setEvents={setEvents} />
+      )}
 
       {/* Solver Parameters Tab */}
-      {
-        activeTab === 'solver' && (
-          <SolverPanel
-            solverParams={solverParams}
-            setSolverParams={setSolverParams}
-            setActiveTab={setActiveTab}
-          />
-        )
-      }
+      {activeTab === "solver" && (
+        <SolverPanel
+          solverParams={solverParams}
+          setSolverParams={setSolverParams}
+          setActiveTab={setActiveTab}
+        />
+      )}
 
       {/* Global Variables Tab */}
-      {
-        activeTab === 'globals' && (
-          <GlobalVariablesTab
-            globalVariables={globalVariables}
-            setGlobalVariables={setGlobalVariables}
-            setActiveTab={setActiveTab}
-            pythonCode={pythonCode}
-            setPythonCode={setPythonCode}
-          />
-        )
-      }
+      {activeTab === "globals" && (
+        <GlobalVariablesTab
+          globalVariables={globalVariables}
+          setGlobalVariables={setGlobalVariables}
+          setActiveTab={setActiveTab}
+          pythonCode={pythonCode}
+          setPythonCode={setPythonCode}
+        />
+      )}
 
       {/* Results Tab */}
-      {
-        activeTab === 'results' && (
-          <ResultsPanel
-            simulationResults={simulationResults}
-            downloadHtml={downloadHtml}
-            downloadCsv={downloadCsv}
-          />
-        )
-      }
+      {activeTab === "results" && (
+        <ResultsPanel
+          simulationResults={simulationResults}
+          downloadHtml={downloadHtml}
+          downloadCsv={downloadCsv}
+        />
+      )}
 
       {/* Share URL Modal */}
       <ShareModal
@@ -1241,8 +1265,7 @@ const DnDFlow = () => {
         shareableURL={shareableURL}
         urlMetadata={urlMetadata}
       />
-
-    </div >
+    </div>
   );
 }
 
diff --git a/src/components/GraphView.jsx b/src/components/GraphView.jsx
@@ -1,5 +1,6 @@
 import { ReactFlow, Controls, MiniMap, Background } from '@xyflow/react';
 import ContextMenu from './ContextMenu';
+import { NodeActionsCtx } from './nodes/nodecomponents/NodeActionsContext';
 
 export default function GraphView(props) {
     const {
@@ -11,37 +12,59 @@ export default function GraphView(props) {
     } = props;
 
     return (
-        <div className="dndflow" style={{ flex: 1, position: 'relative' }}>
-            <div className="reactflow-wrapper" ref={reactFlowWrapperRef} style={{ width: '100%', height: '100%' }}>
-                <ReactFlow
-                    ref={refEl}
-                    nodes={nodes}
-                    edges={edges}
-                    onNodesChange={onNodesChange}
-                    onEdgesChange={onEdgesChange}
-                    onConnect={onConnect}
-                    onNodeClick={onNodeClick}
-                    onEdgeClick={onEdgeClick}
-                    onPaneClick={onPaneClick}
-                    onNodeContextMenu={onNodeContextMenu}
-                    nodeTypes={nodeTypes}
-                    onDrop={onDrop}
-                    onDragStart={onDragStart}
-                    onDragOver={onDragOver}
-                    fitView
-                >
-                    <Controls />
-                    <MiniMap />
-                    <Background variant="dots" gap={12} size={1} />
+      <div className="dndflow" style={{ flex: 1, position: "relative" }}>
+        <div
+          className="reactflow-wrapper"
+          ref={reactFlowWrapperRef}
+          style={{ width: "100%", height: "100%" }}
+        >
+          <NodeActionsCtx.Provider value={
+            {
+              deleteSelectedNode: ui.deleteSelectedNode, 
+              duplicateNode:      duplicateNode
+            }
+          }
+          >
+            <ReactFlow
+              ref={refEl}
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              onConnect={onConnect}
+              onNodeClick={onNodeClick}
+              onEdgeClick={onEdgeClick}
+              onPaneClick={onPaneClick}
+              onNodeContextMenu={onNodeContextMenu}
+              nodeTypes={nodeTypes}
+              onDrop={onDrop}
+              onDragStart={onDragStart}
+              onDragOver={onDragOver}
+              fitView
+            >
+              <Controls />
+              <MiniMap />
+              <Background variant="dots" gap={12} size={1} />
 
-                    {menu && <ContextMenu onClick={onPaneClick} onDuplicate={duplicateNode} {...menu} />}
+              {menu && (
+                <ContextMenu
+                  onClick={onPaneClick}
+                  onDuplicate={duplicateNode}
+                  {...menu}
+                />
+              )}
 
-                    <FloatingButtons {...ui} />
-                    <CopyToast copyFeedback={copyFeedback} />
-                    {ui.showKeyboardShortcuts && <KeyboardShortcuts onClose={() => ui.setShowKeyboardShortcuts(false)} />}
-                </ReactFlow>
-            </div>
+              <FloatingButtons {...ui} />
+              <CopyToast copyFeedback={copyFeedback} />
+              {ui.showKeyboardShortcuts && (
+                <KeyboardShortcuts
+                  onClose={() => ui.setShowKeyboardShortcuts(false)}
+                />
+              )}
+            </ReactFlow>
+          </NodeActionsCtx.Provider>
         </div>
+      </div>
     );
 }
 
diff --git a/src/components/nodes/nodecomponents/NodeActionsContext.jsx b/src/components/nodes/nodecomponents/NodeActionsContext.jsx
@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const NodeActionsCtx = createContext(null);
diff --git a/src/components/nodes/nodecomponents/NodeTop.jsx b/src/components/nodes/nodecomponents/NodeTop.jsx
@@ -1,24 +1,34 @@
 // Icons from Reshot
 import trashcan from "$assets/trashcan.svg";
 import duplicate from "$assets/duplicate.svg";
+import { useContext } from "react";
+import { NodeActionsCtx } from "./NodeActionsContext";
 
 
-function TopButton({icon}) {
+function TopButton({icon, callback}) {
     // TODO: Link button side with wrapper size
     return (
-      <button className="bg-transparent my-auto px-0.5 py-0">
+      <button className="bg-transparent my-auto px-0.5 py-0" onClick={callback}>
         <img src={icon} className="w-3 h-3"></img>
       </button>
     );
 }
 
 export default function NodeTop({ data }) {
+  // TODO: The delete node and duplicate node feature should be rewritten in future refactor work
+  //       to directly use the nodes id
+  const { deleteSelectedNode, duplicateNode } = useContext(NodeActionsCtx);
   return (
     <div className="bg-inherit flex">
       <div className="text-xs m-auto">{data.label}</div>
       <div className="flex justify-end w-10">
-        <TopButton icon={duplicate} />
-        <TopButton icon={trashcan} />
+        <TopButton
+          icon={duplicate}
+          callback={() => {
+            duplicateNode(data.id);
+          }}
+        />
+        <TopButton icon={trashcan} callback={deleteSelectedNode} />
       </div>
     </div>
   );

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { createContext } from "react";`
	`2`	`+`
	`3`	`+export const NodeActionsCtx = createContext(null);`