Refactor and simplify reactflow component data/state (#158) (#159)

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

Hide file tree

Showing 40 changed files with 271 additions and 1,354 deletions.
diff --git a/common/interfaces.ts b/common/interfaces.ts
@@ -6,12 +6,7 @@
 import { Node, Edge } from 'reactflow';
 import { FormikValues } from 'formik';
 import { ObjectSchema } from 'yup';
-import {
-  COMPONENT_CLASS,
-  COMPONENT_CATEGORY,
-  PROCESSOR_TYPE,
-  MODEL_TYPE,
-} from './constants';
+import { COMPONENT_CLASS, PROCESSOR_TYPE, MODEL_TYPE } from './constants';
 
 export type Index = {
   name: string;
@@ -106,17 +101,17 @@ export type WorkspaceSchemaObj = {
 };
 export type WorkspaceSchema = ObjectSchema<WorkspaceSchemaObj>;
 
-/**
- * Represents a single base class as an input handle for a component.
- * It may accept multiples of that class.
- */
 export interface IComponentInput {
   id: string;
   label: string;
-  baseClass: COMPONENT_CLASS;
   acceptMultiple: boolean;
 }
 
+export interface IComponentOutput {
+  id: string;
+  label: string;
+}
+
 /**
  * An input field for a component. Specifies enough configuration for the
  * UI node to render it properly (help text, links, etc.)
@@ -132,36 +127,14 @@ export interface IComponentField {
   selectType?: SelectType;
 }
 
-/**
- * Represents the list of base classes as a single output handle for
- * a component.
- */
-export interface IComponentOutput {
-  label: string;
-  baseClasses: COMPONENT_CLASS[];
-}
-
 /**
  * The base interface the components will implement.
  */
 export interface IComponent {
   type: COMPONENT_CLASS;
   label: string;
   description: string;
-  // will be used for grouping together in the drag-and-drop component library
-  // and determining which flows the component can be drug into the workspace flows
-  categories: COMPONENT_CATEGORY[];
-  // determines if this component allows for new creation. this means to
-  // allow a "create" option on the UI component, as well as potentially
-  // include in the use case template construction ('provisioning' flow)
-  allowsCreation: boolean;
-  // the list of base classes that will be used in the component output
-  baseClasses?: COMPONENT_CLASS[];
   inputs?: IComponentInput[];
-  fields?: IComponentField[];
-  // if the component supports creation, we will have a different set of input fields
-  // the user needs to fill out
-  createFields?: IComponentField[];
   outputs?: IComponentOutput[];
 }
 

diff --git a/public/component_types/base_component.tsx b/public/component_types/base_component.tsx
@@ -4,10 +4,8 @@
  */
 
 import {
-  COMPONENT_CATEGORY,
   COMPONENT_CLASS,
   IComponent,
-  IComponentField,
   IComponentInput,
   IComponentOutput,
 } from '../../common';
@@ -19,16 +17,14 @@ export abstract class BaseComponent implements IComponent {
   type: COMPONENT_CLASS;
   label: string;
   description: string;
-  categories: COMPONENT_CATEGORY[];
-  allowsCreation: boolean;
-  baseClasses: COMPONENT_CLASS[];
   inputs?: IComponentInput[];
-  fields?: IComponentField[];
-  createFields?: IComponentField[];
   outputs?: IComponentOutput[];
 
   // No-op constructor. If there are general / defaults for field values, add in here.
-  constructor() {}
+  constructor() {
+    this.inputs = [];
+    this.outputs = [];
+  }
 
   // Persist a standard toObj() fn that all component classes can use. This is necessary
   // so we have standard JS Object when serializing comoponent state in redux.

diff --git a/public/component_types/indexer/base_indexer.ts b/public/component_types/indexer/base_indexer.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { COMPONENT_CLASS } from '../../../common';
+import { BaseComponent } from '../base_component';
+
+/**
+ * A base indexer UI component
+ */
+export abstract class BaseIndexer extends BaseComponent {
+  constructor() {
+    super();
+    this.type = COMPONENT_CLASS.INDEXER;
+    this.label = 'Indexer';
+    this.description = 'A general indexer';
+    this.inputs = [
+      {
+        id: 'input',
+        label: 'Input',
+        acceptMultiple: false,
+      },
+    ];
+    this.outputs = [
+      {
+        id: 'output',
+        label: 'Output',
+      },
+    ];
+  }
+}
diff --git a/public/component_types/indexer/index.ts b/public/component_types/indexer/index.ts
@@ -3,5 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export * from './indexer';
 export * from './knn_indexer';
diff --git a/public/component_types/indexer/indexer.ts b/public/component_types/indexer/indexer.ts
diff --git a/public/component_types/indexer/knn_indexer.ts b/public/component_types/indexer/knn_indexer.ts
@@ -4,28 +4,16 @@
  */
 
 import { COMPONENT_CLASS } from '../../../common';
-import { Indexer } from './indexer';
+import { BaseIndexer } from './base_indexer';
 
 /**
  * A specialized indexer component for vector/K-NN indices
  */
-export class KnnIndexer extends Indexer {
+export class KnnIndexer extends BaseIndexer {
   constructor() {
     super();
     this.type = COMPONENT_CLASS.KNN_INDEXER;
     this.label = 'K-NN Index';
     this.description = 'A specialized indexer for K-NN indices';
-    this.baseClasses = [...this.baseClasses, this.type];
-    this.createFields = [
-      // @ts-ignore
-      ...this.createFields,
-      // TODO: finalize what to expose / what to have for defaults here
-      // {
-      //   label: 'K-NN Settings',
-      //   id: 'knnSettings',
-      //   type: 'json',
-      //   placeholder: 'Enter K-NN settings JSON blob...',
-      // },
-    ];
   }
 }
diff --git a/public/component_types/other/document.tsx b/public/component_types/other/document.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { COMPONENT_CATEGORY, COMPONENT_CLASS } from '../../../common';
+import { COMPONENT_CLASS } from '../../../common';
 import { BaseComponent } from '../base_component';
 
 /**
@@ -16,14 +16,10 @@ export class Document extends BaseComponent {
     this.type = COMPONENT_CLASS.DOCUMENT;
     this.label = 'Document';
     this.description = 'A document to be ingested';
-    this.categories = [COMPONENT_CATEGORY.INGEST];
-    this.allowsCreation = false;
-    this.baseClasses = [this.type];
-    this.inputs = [];
     this.outputs = [
       {
-        label: this.label,
-        baseClasses: this.baseClasses,
+        id: 'output',
+        label: 'Output',
       },
     ];
   }

diff --git a/public/component_types/other/query/match_query.tsx b/public/component_types/other/query/match_query.tsx
@@ -16,13 +16,5 @@ export class MatchQuery extends Query {
     this.type = COMPONENT_CLASS.MATCH_QUERY;
     this.label = 'Match Query';
     this.description = 'An OpenSearch match query';
-    this.inputs = [];
-    this.baseClasses = [...this.baseClasses, this.type];
-    this.outputs = [
-      {
-        label: this.label,
-        baseClasses: this.baseClasses,
-      },
-    ];
   }
 }
diff --git a/public/component_types/other/query/neural_query.tsx b/public/component_types/other/query/neural_query.tsx
@@ -16,13 +16,5 @@ export class NeuralQuery extends Query {
     this.type = COMPONENT_CLASS.NEURAL_QUERY;
     this.label = 'Neural query';
     this.description = 'An OpenSearch neural query';
-    this.inputs = [];
-    this.baseClasses = [...this.baseClasses, this.type];
-    this.outputs = [
-      {
-        label: this.label,
-        baseClasses: this.baseClasses,
-      },
-    ];
   }
 }
diff --git a/public/component_types/other/query/query.tsx b/public/component_types/other/query/query.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { COMPONENT_CATEGORY, COMPONENT_CLASS } from '../../../../common';
+import { COMPONENT_CLASS } from '../../../../common';
 import { BaseComponent } from '../../base_component';
 
 /**
@@ -16,10 +16,11 @@ export abstract class Query extends BaseComponent {
     this.type = COMPONENT_CLASS.QUERY;
     this.label = 'Query';
     this.description = 'An OpenSearch query';
-    this.categories = [COMPONENT_CATEGORY.SEARCH];
-    this.allowsCreation = false;
-    this.baseClasses = [this.type];
-    this.inputs = [];
-    this.outputs = [];
+    this.outputs = [
+      {
+        id: 'output',
+        label: 'Output',
+      },
+    ];
   }
 }
diff --git a/public/component_types/other/results.tsx b/public/component_types/other/results.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { COMPONENT_CATEGORY, COMPONENT_CLASS } from '../../../common';
+import { COMPONENT_CLASS } from '../../../common';
 import { BaseComponent } from '../base_component';
 
 /**
@@ -16,15 +16,5 @@ export class Results extends BaseComponent {
     this.type = COMPONENT_CLASS.RESULTS;
     this.label = 'Results';
     this.description = 'OpenSearch results';
-    this.categories = [COMPONENT_CATEGORY.SEARCH];
-    this.allowsCreation = false;
-    this.baseClasses = [this.type];
-    this.inputs = [];
-    this.outputs = [
-      {
-        label: this.label,
-        baseClasses: this.baseClasses,
-      },
-    ];
   }
 }
diff --git a/public/component_types/transformer/base_transformer.ts b/public/component_types/transformer/base_transformer.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { COMPONENT_CATEGORY, COMPONENT_CLASS } from '../../../common';
+import { COMPONENT_CLASS } from '../../../common';
 import { BaseComponent } from '../base_component';
 
 /**
@@ -14,8 +14,18 @@ export abstract class BaseTransformer extends BaseComponent {
     super();
     this.type = COMPONENT_CLASS.TRANSFORMER;
     this.label = 'Transformer';
-    this.categories = [COMPONENT_CATEGORY.INGEST, COMPONENT_CATEGORY.SEARCH];
-    this.allowsCreation = false;
-    this.baseClasses = [this.type];
+    this.inputs = [
+      {
+        id: 'input',
+        label: 'Input',
+        acceptMultiple: false,
+      },
+    ];
+    this.outputs = [
+      {
+        id: 'output',
+        label: 'Output',
+      },
+    ];
   }
 }
diff --git a/public/component_types/transformer/index.ts b/public/component_types/transformer/index.ts
@@ -3,7 +3,6 @@
  * 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/component_types/transformer/ml_transformer.ts b/public/component_types/transformer/ml_transformer.ts
@@ -15,6 +15,5 @@ export class MLTransformer extends BaseTransformer {
     this.type = COMPONENT_CLASS.ML_TRANSFORMER;
     this.label = 'ML Transformer';
     this.description = 'A general ML transformer';
-    this.baseClasses = [...this.baseClasses, this.type];
   }
 }