From 5eea0848622d00c54e702d6148ff3291abde2ff6 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Mon, 2 Oct 2023 13:28:50 -0700 Subject: [PATCH] Onboard custom nodetype (#47) (#48) Signed-off-by: Tyler Ohlsen (cherry picked from commit bc60dc09c32b39b15d0197cea359bd0b782339a4) Co-authored-by: Tyler Ohlsen --- common/index.ts | 2 +- public/component_types/indices/knn_index.ts | 4 -- public/component_types/interfaces.ts | 2 - .../processors/text_embedding_processor.ts | 4 -- .../workflow_detail/workspace/workspace.tsx | 23 +++-------- .../workspace_component.tsx | 11 +++--- public/store/reducers/workflows_reducer.ts | 38 ++++++++----------- 7 files changed, 26 insertions(+), 58 deletions(-) diff --git a/common/index.ts b/common/index.ts index 47f29dc4..483a6933 100644 --- a/common/index.ts +++ b/common/index.ts @@ -5,4 +5,4 @@ export * from './constants'; export * from './interfaces'; -export { IComponent } from '../public/component_types'; +export * from '../public/component_types'; diff --git a/public/component_types/indices/knn_index.ts b/public/component_types/indices/knn_index.ts index 3a35a595..acf81a66 100644 --- a/public/component_types/indices/knn_index.ts +++ b/public/component_types/indices/knn_index.ts @@ -80,8 +80,4 @@ export class KnnIndex implements IComponent { }, ]; } - - async init(): Promise { - return new KnnIndex(); - } } diff --git a/public/component_types/interfaces.ts b/public/component_types/interfaces.ts index eacb7242..676f9824 100644 --- a/public/component_types/interfaces.ts +++ b/public/component_types/interfaces.ts @@ -81,6 +81,4 @@ export interface IComponent { // the user needs to fill out createFields?: IComponentField[]; outputs?: IComponentOutput[]; - // we will need some init function when the component is drug into the workspace - init?(): Promise; } diff --git a/public/component_types/processors/text_embedding_processor.ts b/public/component_types/processors/text_embedding_processor.ts index 7356f1fa..539eb3aa 100644 --- a/public/component_types/processors/text_embedding_processor.ts +++ b/public/component_types/processors/text_embedding_processor.ts @@ -70,8 +70,4 @@ export class TextEmbeddingProcessor implements IComponent { }, ]; } - - async init(): Promise { - return new TextEmbeddingProcessor(); - } } diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx index 576a8361..56acab1e 100644 --- a/public/pages/workflow_detail/workspace/workspace.tsx +++ b/public/pages/workflow_detail/workspace/workspace.tsx @@ -15,6 +15,7 @@ import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui'; import { rfContext } from '../../../store'; import { Workflow } from '../../../../common'; import { getCore } from '../../../services'; +import { WorkspaceComponent } from '../workspace_component'; // styling import 'reactflow/dist/style.css'; @@ -24,6 +25,9 @@ interface WorkspaceProps { workflow?: Workflow; } +const nodeTypes = { customComponent: WorkspaceComponent }; +// TODO: probably have custom edge types here too + export function Workspace(props: WorkspaceProps) { const reactFlowWrapper = useRef(null); const { reactFlowInstance, setReactFlowInstance } = useContext(rfContext); @@ -125,6 +129,7 @@ export function Workspace(props: WorkspaceProps) { ); } - -// TODO: remove later, leaving for reference - -// export function Workspace() { -// const { components } = useSelector((state: AppState) => state.workspace); - -// return ( -// -// {components.map((component, idx) => { -// return ( -// -// -// -// ); -// })} -// -// ); -// } diff --git a/public/pages/workflow_detail/workspace_component/workspace_component.tsx b/public/pages/workflow_detail/workspace_component/workspace_component.tsx index a69a5d0e..7c8b8dcf 100644 --- a/public/pages/workflow_detail/workspace_component/workspace_component.tsx +++ b/public/pages/workflow_detail/workspace_component/workspace_component.tsx @@ -16,17 +16,16 @@ import { InputFieldList } from './input_field_list'; import { NewOrExistingTabs } from './new_or_existing_tabs'; interface WorkspaceComponentProps { - component: IComponent; + data: IComponent; } /** - * TODO: This will be the ReactFlow node in the drag-and-drop workspace. It will take in the data passed - * to it from the workspace and render it appropriately (inputs / params / outputs / etc.) - * Similar to Flowise's CanvasNode - see - * https://github.com/FlowiseAI/Flowise/blob/main/packages/ui/src/views/canvas/CanvasNode.js + * The React component in the drag-and-drop workspace. It will take in the component data passed + * to it from the workspace and render it appropriately (inputs / params / outputs / etc.). + * As users interact with it (input data, add connections), the stored IComponent data will update. */ export function WorkspaceComponent(props: WorkspaceComponentProps) { - const { component } = props; + const component = props.data; const [selectedTabId, setSelectedTabId] = useState('existing'); diff --git a/public/store/reducers/workflows_reducer.ts b/public/store/reducers/workflows_reducer.ts index d181ebf8..4da54a13 100644 --- a/public/store/reducers/workflows_reducer.ts +++ b/public/store/reducers/workflows_reducer.ts @@ -4,35 +4,27 @@ */ import { createSlice } from '@reduxjs/toolkit'; -import { Workflow, ReactFlowComponent, ReactFlowEdge } from '../../../common'; +import { + Workflow, + ReactFlowComponent, + ReactFlowEdge, + KnnIndex, + TextEmbeddingProcessor, +} from '../../../common'; // TODO: remove after fetching from server-side const dummyNodes = [ { - id: 'semantic-search', - position: { x: 40, y: 10 }, - data: { label: 'Semantic Search' }, - type: 'group', - style: { - height: 110, - width: 700, - }, - }, - { - id: 'model', - position: { x: 25, y: 25 }, - data: { label: 'Deployed Model ID' }, - type: 'default', - parentNode: 'semantic-search', - extent: 'parent', + id: 'text-embedding-processor', + position: { x: 0, y: 500 }, + data: new TextEmbeddingProcessor(), + type: 'customComponent', }, { - id: 'ingest-pipeline', - position: { x: 262, y: 25 }, - data: { label: 'Ingest Pipeline Name' }, - type: 'default', - parentNode: 'semantic-search', - extent: 'parent', + id: 'knn-index', + position: { x: 500, y: 500 }, + data: new KnnIndex(), + type: 'customComponent', }, ] as ReactFlowComponent[];