Onboard custom node type to Workspace

common/index.ts

@@ -5,4 +5,4 @@
 
 export * from './constants';
 export * from './interfaces';
-export { IComponent } from '../public/component_types';
+export * from '../public/component_types';

public/component_types/indices/knn_index.ts

@@ -80,8 +80,4 @@ export class KnnIndex implements IComponent {
       },
     ];
   }
-
-  async init(): Promise<any> {
-    return new KnnIndex();
-  }
 }

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<any>;
 }

public/component_types/processors/text_embedding_processor.ts

@@ -70,8 +70,4 @@ export class TextEmbeddingProcessor implements IComponent {
       },
     ];
   }
-
-  async init(): Promise<any> {
-    return new TextEmbeddingProcessor();
-  }
 }

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) {
               <ReactFlow
                 nodes={nodes}
                 edges={edges}
+                nodeTypes={nodeTypes}
                 onNodesChange={onNodesChange}
                 onEdgesChange={onEdgesChange}
                 onConnect={onConnect}
@@ -143,21 +148,3 @@ export function Workspace(props: WorkspaceProps) {
     </EuiFlexItem>
   );
 }
-
-// TODO: remove later, leaving for reference
-
-// export function Workspace() {
-//   const { components } = useSelector((state: AppState) => state.workspace);
-
-//   return (
-//     <EuiFlexGroup direction="row">
-//       {components.map((component, idx) => {
-//         return (
-//           <EuiFlexItem key={idx}>
-//             <WorkspaceComponent component={component} />
-//           </EuiFlexItem>
-//         );
-//       })}
-//     </EuiFlexGroup>
-//   );
-// }

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<string>('existing');
 

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[];