cleanup

Author: kahboom

src/components/Visualization.tsx

@@ -110,10 +110,7 @@ const Visualization = ({ toggleCatalog }: IVisualization) => {
 
     // if there are no steps, or if the first step isn't a source,
     // create a dummy placeholder step
-    // if (steps.length === 0 || (steps.length > 0 && steps[0].type !== 'START')) {
-    //   steps[0] = { name: 'ADD A STEP' };
-    // }
-    if (!steps.length || (steps.length > 0 && steps[0].type !== 'START')) {
+    if (steps.length === 0 || (steps.length > 0 && steps[0].type !== 'START')) {
       // @ts-ignore
       steps.unshift({ name: 'ADD A STEP' });
     }
@@ -170,6 +167,7 @@ const Visualization = ({ toggleCatalog }: IVisualization) => {
           UUID: step.UUID,
           onDropChange,
           onElementClick,
+          onElementClickAdd,
         },
         id: getId(),
         position: { x: 0, y: window.innerHeight / 2 },
@@ -182,7 +180,7 @@ const Visualization = ({ toggleCatalog }: IVisualization) => {
         stepEdge.id = 'e' + previousStep.id + '-' + inputStep.id;
         stepEdge.source = previousStep.id;
 
-        // even the last step needs to build the step edge above it, with itself as the target
+        // even the last step needs to build the step edge before it, with itself as the target
         stepEdge.target = inputStep.id;
       }
 
@@ -280,6 +278,11 @@ const Visualization = ({ toggleCatalog }: IVisualization) => {
     setIsPanelExpanded(!isPanelExpanded);
   };
 
+  const onElementClickAdd = (_e: any, element: any) => {
+    console.log('clicked!', element);
+    // add mini catalog
+  };
+
   const onElementsRemove = (elementsToRemove: Elements<IVizStepProps[]>) =>
     setElements((els) => removeElements(elementsToRemove, els));
 

src/components/VisualizationStep.tsx

@@ -16,34 +16,31 @@ const VisualizationStep = ({ data }: any) => {
 
   const onDropChange = (event: any) => data.onDropChange(event, data);
   const onElementClick = (event: any) => data.onElementClick(event, data);
+  const onElementClickAdd = (event: any) => data.onElementClickAdd(event, data);
 
   return (
     <div
       className={'stepNode'}
       style={{ border: '2px solid ' + borderColor, borderRadius: '50%' }}
-      onClick={onElementClick}
       onDrop={onDropChange}
     >
       {data.connectorType !== 'END' && !isLastNode && (
         <Handle type="source" position={Position.Right} id="b" style={{ borderRadius: 0 }} />
       )}
       {data.connectorType !== 'END' && isLastNode && (
-        <div
-          className={'stepNode__Add'}
-          onClick={() => {
-            console.log('clicked!');
-          }}
-        >
+        <div className={'stepNode__Add'} onClick={onElementClickAdd}>
           <PlusCircleIcon />
         </div>
       )}
-      <div className={'stepNode__Icon'}>
+      <div className={'stepNode__Icon'} onClick={onElementClick}>
         <img src={data.icon} className="nodrag" alt={data.label} />
       </div>
       {data.connectorType !== 'START' && (
         <Handle type="target" position={Position.Left} id="a" style={{ borderRadius: 0 }} />
       )}
-      <div className={'stepNode__Label'}>{data.label}</div>
+      <div className={'stepNode__Label'} onClick={onElementClick}>
+        {data.label}
+      </div>
     </div>
   );
 };