Added Edit Process Functionality

src/components/DataflowCanvas.jsx

@@ -310,7 +310,18 @@ const CustomEdge = ({ id, source, target, sourceX, sourceY, targetX, targetY, so
 };
 
 // Process Node (represents ETL or data transformation)
-const ProcessNode = ({ data }) => {
+const ProcessNode = ({ data, id }) => {
+  // Function to handle process edit
+  const handleProcessEdit = () => {
+    // Find the process in the mock data
+    const process = mockApiData.processes.find(p => p.slug === id);
+    if (process) {
+      // We'll use window.processEditCallback which will be set in the main component
+      if (window.processEditCallback) {
+        window.processEditCallback(process);
+      }
+    }
+  };
   // Determine status color
   const statusColor = data.status === 'active' ? '#52c41a' : '#ff4d4f';
   const isActive = data.status === 'active';
@@ -393,15 +404,20 @@ const ProcessNode = ({ data }) => {
       />
       
       {/* Process Icon with integrated content */}
-      <div style={{ 
+      <div 
-        position: 'relative',
+        onClick={handleProcessEdit}
-        display: 'flex',
+        style={{ 
-        justifyContent: 'center',
+          position: 'relative',
-        alignItems: 'center',
+          display: 'flex',
-        filter: isActive 
+          justifyContent: 'center',
-          ? 'drop-shadow(0 0 8px rgba(250, 140, 22, 0.3))' 
+          alignItems: 'center',
-          : 'drop-shadow(0 0 5px rgba(170, 170, 170, 0.2))'
+          filter: isActive 
-      }}>
+            ? 'drop-shadow(0 0 8px rgba(250, 140, 22, 0.3))' 
+            : 'drop-shadow(0 0 5px rgba(170, 170, 170, 0.2))',
+          cursor: 'pointer',
+          zIndex: 100
+        }}
+      >
         {getProcessIcon()}
         
         {/* Status indicator (small dot) */}
@@ -633,6 +649,20 @@ const DataflowCanvas = () => {
   const [showProcessForm, setShowProcessForm] = useState(false);
   const [selectedProcessForEdit, setSelectedProcessForEdit] = useState(null);
   
+  // Set up a global callback for process editing
+  // This is used by the ProcessNode component
+  useEffect(() => {
+    window.processEditCallback = (process) => {
+      setSelectedProcessForEdit(process);
+      setShowProcessForm(true);
+    };
+    
+    return () => {
+      // Clean up when component unmounts
+      window.processEditCallback = null;
+    };
+  }, []);
+  
   // Define node types
   const nodeTypes = useMemo(() => ({
     table: TableNode,
@@ -1717,7 +1747,7 @@ const DataflowCanvas = () => {
                   alignItems: 'center',
                   gap: '5px'
                 }}>
-                  <FaDatabase size={12} /> Source Tables
+                  <CustomDatabaseIcon width="16" height="16" /> Source Tables
                 </h4>
                 <ul style={{ 
                   margin: 0, 
@@ -1749,7 +1779,7 @@ const DataflowCanvas = () => {
                   alignItems: 'center',
                   gap: '5px'
                 }}>
-                  <FaDatabase size={12} /> Destination Tables
+                  <CustomDatabaseIcon width="16" height="16" /> Destination Tables
                 </h4>
                 <ul style={{ 
                   margin: 0,