Add initial logic to generate ReactFlow workspace (#160) (#161)

Signed-off-by: Tyler Ohlsen <[email protected]> (cherry picked from commit 73930ab) Co-authored-by: Tyler Ohlsen <[email protected]>
opensearch-project · May 20, 2024 · 8f1f02b · 8f1f02b
1 parent 628c4ee
commit 8f1f02b
Show file tree

Hide file tree

Showing 5 changed files with 612 additions and 174 deletions.
diff --git a/public/component_types/other/results.tsx b/public/component_types/other/results.tsx
@@ -16,5 +16,6 @@ export class Results extends BaseComponent {
     this.type = COMPONENT_CLASS.RESULTS;
     this.label = 'Results';
     this.description = 'OpenSearch results';
+    this.inputs = [{ id: 'input', label: 'Input', acceptMultiple: false }];
   }
 }
diff --git a/public/component_types/transformer/index.ts b/public/component_types/transformer/index.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+export * from './ml_transformer';
 export * from './text_embedding_transformer';
 export * from './sparse_encoder_transformer';
 export * from './results_transformer';

diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx
@@ -23,13 +23,15 @@ import {
   ReactFlowComponent,
   ReactFlowEdge,
   Workflow,
+  WorkflowConfig,
 } from '../../../../common';
 import {
   IngestGroupComponent,
   SearchGroupComponent,
   WorkspaceComponent,
 } from './workspace_components';
 import { DeletableEdge } from './workspace_edge';
+import { uiConfigToWorkspaceFlow } from '../../../utils';
 
 // styling
 import 'reactflow/dist/style.css';
@@ -107,12 +109,15 @@ export function Workspace(props: WorkspaceProps) {
     [setEdges]
   );
 
-  // Initialization. Set the nodes and edges to an existing workflow state,
+  // Initialization. Generate the nodes and edges based on the workflow config.
   useEffect(() => {
     const workflow = { ...props.workflow };
-    if (workflow?.ui_metadata?.workspace_flow) {
-      setNodes(workflow.ui_metadata.workspace_flow.nodes);
-      setEdges(workflow.ui_metadata.workspace_flow.edges);
+    if (workflow?.ui_metadata?.config) {
+      const proposedWorkspaceFlow = uiConfigToWorkspaceFlow(
+        workflow.ui_metadata?.config as WorkflowConfig
+      );
+      setNodes(proposedWorkspaceFlow.nodes);
+      setEdges(proposedWorkspaceFlow.edges);
     }
   }, [props.workflow]);
 
@@ -141,6 +146,7 @@ export function Workspace(props: WorkspaceProps) {
               onConnect={onConnect}
               className="reactflow-workspace"
               fitView
+              minZoom={0.2}
               edgesUpdatable={!props.readonly}
               edgesFocusable={!props.readonly}
               nodesDraggable={!props.readonly}