diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx index 126f201a..86d3f78e 100644 --- a/public/pages/workflow_detail/resizable_workspace.tsx +++ b/public/pages/workflow_detail/resizable_workspace.tsx @@ -6,7 +6,6 @@ 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 { @@ -14,16 +13,13 @@ import { 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
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} /> diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx index 5f60b537..031f34b8 100644 --- 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([]); 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 = {