Add placeholders when group is selected; add node type enums

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Mar 29, 2024 · 840454c · 840454c
1 parent b387b60
commit 840454c
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 28 deletions.
diff --git a/common/utils.ts b/common/utils.ts
@@ -16,6 +16,7 @@ import {
   WorkflowTemplate,
   DATE_FORMAT_PATTERN,
   COMPONENT_CATEGORY,
+  NODE_CATEGORY,
 } from './';
 
 // TODO: implement this and remove hardcoded return values
@@ -55,7 +56,7 @@ export function toWorkspaceFlow(
     {
       id: ingestGroupId,
       position: { x: 400, y: 400 },
-      type: 'ingest',
+      type: NODE_CATEGORY.INGEST_GROUP,
       data: { label: COMPONENT_CATEGORY.INGEST },
       style: {
         width: 900,
@@ -64,7 +65,7 @@ export function toWorkspaceFlow(
         overflowY: 'auto',
       },
       className: 'reactflow__group-node__ingest',
-      selectable: false,
+      selectable: true,
     },
     {
       id: ingestId1,
@@ -73,7 +74,7 @@ export function toWorkspaceFlow(
         new TextEmbeddingTransformer().toObj(),
         ingestId1
       ),
-      type: 'customComponent',
+      type: NODE_CATEGORY.CUSTOM,
       parentNode: ingestGroupId,
       extent: 'parent',
       draggable: true,
@@ -82,7 +83,7 @@ export function toWorkspaceFlow(
       id: ingestId2,
       position: { x: 500, y: 70 },
       data: initComponentData(new KnnIndexer().toObj(), ingestId2),
-      type: 'customComponent',
+      type: NODE_CATEGORY.CUSTOM,
       parentNode: ingestGroupId,
       extent: 'parent',
       draggable: true,
@@ -93,7 +94,7 @@ export function toWorkspaceFlow(
     {
       id: searchGroupId,
       position: { x: 400, y: 1000 },
-      type: 'search',
+      type: NODE_CATEGORY.SEARCH_GROUP,
       data: { label: COMPONENT_CATEGORY.SEARCH },
       style: {
         width: 900,
@@ -102,7 +103,7 @@ export function toWorkspaceFlow(
         overflowY: 'auto',
       },
       className: 'reactflow__group-node__search',
-      selectable: false,
+      selectable: true,
     },
     {
       id: searchId1,
@@ -111,7 +112,7 @@ export function toWorkspaceFlow(
         new TextEmbeddingTransformer().toObj(),
         searchId1
       ),
-      type: 'customComponent',
+      type: NODE_CATEGORY.CUSTOM,
       parentNode: searchGroupId,
       extent: 'parent',
       draggable: true,
@@ -120,7 +121,7 @@ export function toWorkspaceFlow(
       id: searchId2,
       position: { x: 500, y: 70 },
       data: initComponentData(new KnnIndexer().toObj(), searchId2),
-      type: 'customComponent',
+      type: NODE_CATEGORY.CUSTOM,
       parentNode: searchGroupId,
       extent: 'parent',
       draggable: true,

diff --git a/public/pages/workflow_detail/component_details/component_inputs.tsx b/public/pages/workflow_detail/component_details/component_inputs.tsx
@@ -4,26 +4,55 @@
  */
 
 import React from 'react';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { InputFieldList } from './input_field_list';
-import { ReactFlowComponent } from '../../../../common';
+import { NODE_CATEGORY, ReactFlowComponent } from '../../../../common';
 
 interface ComponentInputsProps {
   selectedComponent: ReactFlowComponent;
   onFormChange: () => void;
 }
 
 export function ComponentInputs(props: ComponentInputsProps) {
-  return (
-    <>
-      <EuiTitle size="m">
-        <h2>{props.selectedComponent.data.label || ''}</h2>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <InputFieldList
-        selectedComponent={props.selectedComponent}
-        onFormChange={props.onFormChange}
-      />
-    </>
-  );
+  // Have custom layouts for parent/group flows
+  if (props.selectedComponent.type === NODE_CATEGORY.INGEST_GROUP) {
+    return (
+      <>
+        <EuiTitle size="m">
+          <h2>Ingest flow</h2>
+        </EuiTitle>
+        <EuiSpacer size="m" />
+        <EuiText size="s">
+          Configure a flow to transform your data as it is ingested into
+          OpenSearch.
+        </EuiText>
+      </>
+    );
+  } else if (props.selectedComponent.type === NODE_CATEGORY.SEARCH_GROUP) {
+    return (
+      <>
+        <EuiTitle size="m">
+          <h2>Search flow</h2>
+        </EuiTitle>
+        <EuiSpacer size="m" />
+        <EuiText size="s">
+          Configure a flow to transform input when searching against your
+          OpenSearch cluster.
+        </EuiText>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <EuiTitle size="m">
+          <h2>{props.selectedComponent.data.label || ''}</h2>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <InputFieldList
+          selectedComponent={props.selectedComponent}
+          onFormChange={props.onFormChange}
+        />
+      </>
+    );
+  }
 }
diff --git a/public/pages/workflow_detail/workspace/reactflow-styles.scss b/public/pages/workflow_detail/workspace/reactflow-styles.scss
@@ -40,7 +40,7 @@ $handle-color-invalid: $euiColorDanger;
 // Overriding the styling for the reactflow node when it is selected.
 // We need to use important tag to override ReactFlow's wrapNode that sets the box-shadow.
 // Ref: https://github.com/wbkd/react-flow/blob/main/packages/core/src/components/Nodes/wrapNode.tsx#L187
-.reactflow-workspace .react-flow__node-customComponent.selected {
+.reactflow-workspace .react-flow__node-custom.selected {
   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   &:focus {

diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx
@@ -45,9 +45,9 @@ interface WorkspaceProps {
 }
 
 const nodeTypes = {
-  customComponent: WorkspaceComponent,
-  ingest: IngestGroupComponent,
-  search: SearchGroupComponent,
+  custom: WorkspaceComponent,
+  ingestGroup: IngestGroupComponent,
+  searchGroup: SearchGroupComponent,
 };
 const edgeTypes = { customEdge: DeletableEdge };
 

diff --git a/public/pages/workflow_detail/workspace/workspace_components/group_component.tsx b/public/pages/workflow_detail/workspace/workspace_components/group_component.tsx
@@ -16,8 +16,10 @@ interface GroupComponentProps {
  */
 export function GroupComponent(props: GroupComponentProps) {
   return (
+    // TODO: investigate having custom bounds of child nodes to prevent
+    // overlapping the group node title
     <EuiFlexGroup direction="column">
-      <EuiFlexItem style={{ backgroundColor: 'black' }}>
+      <EuiFlexItem style={{ backgroundColor: 'transparent' }}>
         <EuiTitle size="l">
           <h2 style={{ marginLeft: '8px' }}>{props.data.label}</h2>
         </EuiTitle>

diff --git a/public/pages/workflow_detail/workspace/workspace_components/workspace_component.tsx b/public/pages/workflow_detail/workspace/workspace_components/workspace_component.tsx
@@ -10,7 +10,6 @@ import {
   EuiCard,
   EuiText,
   EuiTitle,
-  EuiButtonIcon,
 } from '@elastic/eui';
 import { setDirty } from '../../../../store';
 import { IComponentData } from '../../../../component_types';
@@ -36,6 +35,7 @@ export function WorkspaceComponent(props: WorkspaceComponentProps) {
   const component = props.data;
   const reactFlowInstance = useReactFlow();
 
+  // TODO: re-enable deletion
   const deleteNode = (nodeId: string) => {
     reactFlowInstance.setNodes(
       reactFlowInstance.getNodes().filter((node: Node) => node.id !== nodeId)

diff --git a/public/utils/constants.ts b/public/utils/constants.ts
@@ -32,6 +32,12 @@ export enum COMPONENT_CATEGORY {
   SEARCH = 'Search',
 }
 
+export enum NODE_CATEGORY {
+  CUSTOM = 'custom',
+  INGEST_GROUP = 'ingestGroup',
+  SEARCH_GROUP = 'searchGroup',
+}
+
 // TODO: subject to change
 /**
  * A base set of component classes / types.