more cleanup

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · May 28, 2024 · cbadb67 · cbadb67
1 parent 89388ac
commit cbadb67
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 46 deletions.
diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx
@@ -6,24 +6,20 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import { useReactFlow } from 'reactflow';
 import { Form, Formik, FormikProps } from 'formik';
 import * as yup from 'yup';
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
   EuiResizableContainer,
-  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import { getCore } from '../../services';
 
 import {
   Workflow,
-  ReactFlowComponent,
   WORKFLOW_STATE,
-  ReactFlowEdge,
   WorkflowFormValues,
   WorkflowSchema,
   WorkflowConfig,
@@ -107,12 +103,6 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
     setIsToolsPanelOpen(!isToolsPanelOpen);
   };
 
-  // Selected component state
-  const reactFlowInstance = useReactFlow();
-  const [selectedComponent, setSelectedComponent] = useState<
-    ReactFlowComponent
-  >();
-
   // Save/provision/deprovision button state
   const isSaveable =
     props.workflow !== undefined && (isFirstSave ? true : isDirty);
@@ -168,19 +158,6 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
     }
   }, [props.workflow]);
 
-  // Hook to updated the selected ReactFlow component
-  useEffect(() => {
-    reactFlowInstance?.setNodes((nodes: ReactFlowComponent[]) =>
-      nodes.map((node) => {
-        node.data = {
-          ...node.data,
-          selected: node.id === selectedComponent?.id ? true : false,
-        };
-        return node;
-      })
-    );
-  }, [selectedComponent]);
-
   // Initialize the form state to an existing workflow, if applicable.
   useEffect(() => {
     if (workflow?.ui_metadata?.config) {
@@ -191,10 +168,6 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
     }
   }, [workflow]);
 
-  // TODO: leave as a placeholder for now. Current functionality is the workflow
-  // is readonly and only reacts/changes when the underlying form is updated.
-  function onNodesChange(nodes: ReactFlowComponent[]): void {}
-
   /**
    * Function to pass down to the Formik <Form> components as a listener to propagate
    * form changes to this parent component to re-enable save button, etc.
@@ -362,7 +335,6 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                                     id="ingest"
                                     workflow={workflow}
                                     readonly={false}
-                                    onNodesChange={onNodesChange}
                                   />
                                 </EuiFlexItem>
                               </EuiFlexGroup>

diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx
@@ -11,18 +11,11 @@ import ReactFlow, {
   useEdgesState,
   addEdge,
   BackgroundVariant,
-  useStore,
-  useReactFlow,
   MarkerType,
 } from 'reactflow';
 import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { setDirty, useAppDispatch } from '../../../store';
-import {
-  IComponentData,
-  ReactFlowComponent,
-  Workflow,
-  WorkflowConfig,
-} from '../../../../common';
+import { IComponentData, Workflow, WorkflowConfig } from '../../../../common';
 import {
   IngestGroupComponent,
   SearchGroupComponent,
@@ -40,7 +33,6 @@ import './workspace_edge/deletable-edge-styles.scss';
 interface WorkspaceProps {
   workflow?: Workflow;
   readonly: boolean;
-  onNodesChange: (nodes: ReactFlowComponent[]) => void;
   id: string;
 }
 
@@ -56,18 +48,9 @@ export function Workspace(props: WorkspaceProps) {
 
   // ReactFlow state
   const reactFlowWrapper = useRef(null);
-  const reactFlowInstance = useReactFlow();
   const [nodes, setNodes, onNodesChange] = useNodesState<IComponentData>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  // Listener for node additions or deletions to propagate to parent component
-  const nodesLength = useStore(
-    (state) => Array.from(state.nodeInternals.values()).length || 0
-  );
-  useEffect(() => {
-    props.onNodesChange(nodes);
-  }, [nodesLength]);
-
   const onConnect = useCallback(
     (params) => {
       const edge = {