Issue multiple dummy nodes formed

src/components/TransformWorkflow/FlowEditor/Components/Canvas.tsx

@@ -208,7 +208,7 @@
             return (
               <KeyboardArrowDown
                 {...props}
-                style={{ color: '#FFFFFF', width: '22px' }}
+                style={{ color: '#FFFFFF', width: '21px' }}
               />
             );
           }}
@@ -219,7 +219,8 @@
             fontSize: '12px',
             border: '1px solid #00897B',
             borderRadius: '6px',
-            minWidth: '8rem',
+            minWidth: '7rem',
+            height: '1.688rem',
             textAlign: 'center',
             boxShadow: '0px 2px 4px 0px ',
           }}
@@ -290,10 +291,10 @@
   setTempLockCanvas,
 }: CanvasProps) => {
   const { data: session } = useSession();
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState([]); //works when we click the node or move it.
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]); //workds when we click the edges.
   const [openOperationConfig, setOpenOperationConfig] =
-    useState<boolean>(false);
+    useState<boolean>(false); // this is the right form with sql operations.
   const { addNodes, setCenter, getZoom } = useReactFlow();
 
   const { canvasAction, setCanvasAction } = useCanvasAction();
@@ -554,6 +555,7 @@
   };
 
   const handlePaneClick = () => {
+    // clicking the background canvas.
     setCanvasAction({ type: 'close-reset-opconfig-panel', data: null });
     setPreviewAction({ type: 'clear-preview', data: null });
   };
@@ -577,7 +579,7 @@
           zIndex: (theme) => theme.zIndex.drawer + 1,
         }}
         open={finalLockCanvas}
-        onClick={() => {}}
+        onClick={() => { }}
       >
         <CircularProgress
           sx={{
@@ -607,12 +609,12 @@
         }}
       >
         <ReactFlow
-          nodes={nodes}
+          nodes={nodes} // are the tables and the operations.
           selectNodesOnDrag={false}
-          edges={edges}
+          edges={edges} // flexible lines connecting tables, table-node.
           onNodeDragStop={onNodeDragStop}
-          onPaneClick={handlePaneClick}
-          onNodesChange={handleNodesChange}
+          onPaneClick={handlePaneClick} //back canvas click.
+          onNodesChange={handleNodesChange} // when node (table or operation) is clicked or moved.
           onEdgesChange={handleEdgesChange}
           onConnect={handleNewConnection}
           nodeTypes={nodeTypes}
@@ -637,6 +639,7 @@
             </ControlButton>
           </Controls>
         </ReactFlow>
+        {/* This is what renders the right form */}
         <OperationConfigLayout
           openPanel={openOperationConfig}
           setOpenPanel={setOpenOperationConfig}

src/components/TransformWorkflow/FlowEditor/Components/OperationConfigLayout.tsx

@@ -14,7 +14,7 @@
   SxProps,
   Typography,
 } from '@mui/material';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import {
   OperationNodeData,
@@ -111,41 +111,8 @@
   [GENERIC_SQL_OP]: GenericSqlOpForm,
 };
 
-const OperationForm = ({
-  operation,
-  node,
-  sx,
-  continueOperationChain,
-  clearAndClosePanel,
-  dummyNodeId,
-  action,
-  setLoading,
-}: OperationFormProps) => {
-  if (operation === null || operation === undefined) {
-    return null;
-  }
-
-  if (operation.slug === 'create-table') {
-    return (
-      <CreateTableForm
-        node={node}
-        operation={operation}
-        sx={sx}
-        continueOperationChain={continueOperationChain}
-        clearAndClosePanel={clearAndClosePanel}
-        dummyNodeId={dummyNodeId}
-        action={action}
-        setLoading={setLoading}
-      />
-    );
-  }
-
-  if (!Object.keys(operationComponentMapping).includes(operation.slug)) {
-    return <>Operation not yet supported</>;
-  }
-
-  const Form = operationComponentMapping[operation.slug];
-  const FormProps = {
+const OperationForm = memo((
+  ({
     operation,
     node,
     sx,
@@ -154,10 +121,47 @@
     dummyNodeId,
     action,
     setLoading,
-  };
+  }: OperationFormProps) => {
+    if (operation === null || operation === undefined) {
+      return null;
+    }
+
+    if (operation.slug === 'create-table') {
+      return (
+        <CreateTableForm
+          node={node}
+          operation={operation}
+          sx={sx}
+          continueOperationChain={continueOperationChain}
+          clearAndClosePanel={clearAndClosePanel}
+          dummyNodeId={dummyNodeId}
+          action={action}
+          setLoading={setLoading}
+        />
+      );
+    }
+
+    if (!Object.keys(operationComponentMapping).includes(operation.slug)) {
+      return <>Operation not yet supported</>;
+    }
+
+    const Form = operationComponentMapping[operation.slug];
+    const FormProps = {
+      operation,
+      node,
+      sx,
+      continueOperationChain,
+      clearAndClosePanel,
+      dummyNodeId,
+      action,
+      setLoading,
+    };
+    return <Form  {...FormProps} />;
+  }
+
+))
+OperationForm.displayName = "OperationForm";
 
-  return <Form key={node?.data.id} {...FormProps} />;
-};
 
 const OperationConfigLayout = ({
   openPanel,
@@ -226,25 +230,35 @@
 
   useEffect(() => {
     if (canvasAction.type === 'open-opconfig-panel') {
-      setOpenPanel(true);
+      setOpenPanel(true); // when a table or node is clicked , this opens the sql ops form.
       setSelectedOp(null);
       panelOpFormState.current = canvasAction.data || 'view';
-      console.log(canvasAction, panelOpFormState);
       if (['view', 'edit'].includes(panelOpFormState.current)) {
         const nodeData = canvasNode?.data as OperationNodeData;
         if (permissions.includes('can_view_dbt_operation')) {
           setSelectedOp(
-            operations.find((op) => op.slug === nodeData.config?.type)
+            operations.find((op) => op.slug === nodeData?.config?.type)
           );
         }
       }
     }
 
+    const nodes = getNodes();
+    const areDummyNodes = nodes.some((node) => node.data?.isDummy === true);
+
+    // if there are dummy nodes and user selects any other node (operational or source), then it deletes the node. So this prevents creation of multiple dummy nodes on the canvas.
+    if (areDummyNodes && !canvasNode?.data.isDummy) {
+      const dummyNodesArr: { id: string }[] = nodes
+        .filter((node) => node.data.isDummy)
+        .map((node) => ({ id: node.id }));
+      dummyNodesArr.push({ id: dummyNodeIdRef.current });
+      deleteElements({ nodes: dummyNodesArr });
+    }
+
     if (canvasAction.type === 'close-reset-opconfig-panel') {
       handleClosePanel();
     }
   }, [canvasAction]);
-
   useEffect(() => {
     if (contentRef.current) {
       contentRef.current.scrollTop = 0;
@@ -255,11 +269,15 @@
 
   const DiscardDialog = ({ handleBackbuttonAction }: any) => {
     return (
-      <Dialog open={showDiscardDialog} onClose={() => setShowDiscardDialog(false)}>
+      <Dialog
+        open={showDiscardDialog}
+        onClose={() => setShowDiscardDialog(false)}
+      >
         <DialogTitle>Discard Changes?</DialogTitle>
         <DialogContent>
           <Typography>
-            All your changes will be discarded. Are you sure you want to continue?
+            All your changes will be discarded. Are you sure you want to
+            continue?
           </Typography>
         </DialogContent>
         <DialogActions>
@@ -271,8 +289,8 @@
           </Button>
         </DialogActions>
       </Dialog>
-    )
-  }
+    );
+  };
 
   const PanelHeader = () => {
     const handleBackbuttonAction = () => {
@@ -518,10 +536,13 @@
 
   const panelState = selectedOp
     ? 'op-form'
-    : showFunctionsList || canvasNode?.type === SRC_MODEL_NODE
+    : showFunctionsList || (canvasNode?.type === SRC_MODEL_NODE)
       ? 'op-list'
       : 'create-table-or-add-function';
 
+
+
+
   return (
     <Box
       sx={{

src/components/TransformWorkflow/FlowEditor/Components/OperationPanel/Forms/AggregationOpForm.tsx

@@ -3,7 +3,6 @@ import { OperationNodeData } from '../../Canvas';
 import { useSession } from 'next-auth/react';
 import { Box, Button } from '@mui/material';
 import { OPERATION_NODE, SRC_MODEL_NODE } from '../../../constant';
-import { DbtSourceModel } from '../../Canvas';
 import { httpGet, httpPost, httpPut } from '@/helpers/http';
 import { ColumnData } from '../../Nodes/DbtSourceModelNode';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
@@ -12,6 +11,7 @@ import { GlobalContext } from '@/contexts/ContextProvider';
 import { errorToast } from '@/components/ToastMessage/ToastHelper';
 import { OperationFormProps } from '../../OperationConfigLayout';
 import { Autocomplete } from '@/components/UI/Autocomplete/Autocomplete';
+import { useOpForm } from '@/customHooks/useOpForm';
 
 export interface AggregateOn {
   column: string;
@@ -45,12 +45,16 @@ const AggregationOpForm = ({
   const [srcColumns, setSrcColumns] = useState<string[]>([]);
   const globalContext = useContext(GlobalContext);
   const [inputModels, setInputModels] = useState<any[]>([]); // used for edit; will have information about the input nodes to the operation being edited
-  const nodeData: any =
-    node?.type === SRC_MODEL_NODE
-      ? (node?.data as DbtSourceModel)
-      : node?.type === OPERATION_NODE
-        ? (node?.data as OperationNodeData)
-        : {};
+  const { parentNode, nodeData } = useOpForm({
+    props: {
+      node,
+      operation,
+      sx,
+      continueOperationChain,
+      action,
+      setLoading,
+    }
+  })
 
   type FormProps = {
     aggregate_on: {
@@ -80,6 +84,7 @@ const AggregationOpForm = ({
   const fetchAndSetSourceColumns = async () => {
     if (node?.type === SRC_MODEL_NODE) {
       try {
+
         const data: ColumnData[] = await httpGet(
           session,
           `warehouse/table_columns/${nodeData.schema}/${nodeData.input_name}`
@@ -96,6 +101,8 @@ const AggregationOpForm = ({
   };
 
   const handleSave = async (data: FormProps) => {
+    const finalNode = node?.data.isDummy ? parentNode : node;
+    const finalAction = node?.data.isDummy ? 'create' : action;
     try {
       const postData: any = {
         op_type: operation.slug,
@@ -107,28 +114,28 @@ const AggregationOpForm = ({
             output_column_name: item.output_column_name,
           })),
         },
-        input_uuid: node?.type === SRC_MODEL_NODE ? node?.data.id : '',
-        target_model_uuid: nodeData?.target_model_id || '',
+        input_uuid: finalNode?.type === SRC_MODEL_NODE ? finalNode?.id : '',
+        target_model_uuid: finalNode?.data.target_model_id || '',
       };
 
       setLoading(true);
       // api call
       let operationNode: any;
-      if (action === 'create') {
+      if (finalAction === 'create') {
         operationNode = await httpPost(
           session,
           `transform/dbt_project/model/`,
           postData
         );
-      } else if (action === 'edit') {
+      } else if (finalAction === 'edit') {
         // need this input to be sent for the first step in chain
         postData.input_uuid =
           inputModels.length > 0 && inputModels[0]?.uuid
             ? inputModels[0].uuid
             : '';
         operationNode = await httpPut(
           session,
-          `transform/dbt_project/model/operations/${node?.id}/`,
+          `transform/dbt_project/model/operations/${finalNode?.id}/`,
           postData
         );
       }
@@ -173,6 +180,7 @@ const AggregationOpForm = ({
   };
 
   useEffect(() => {
+    if (node?.data.isDummy) return;
     if (['edit', 'view'].includes(action)) {
       fetchAndSetConfigForEdit();
     } else {