diff --git a/common/utils.ts b/common/utils.ts
index aadbc073..2e5bf2d9 100644
--- 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
index cae794df..3d9f076e 100644
--- a/public/pages/workflow_detail/component_details/component_inputs.tsx
+++ b/public/pages/workflow_detail/component_details/component_inputs.tsx
@@ -4,9 +4,9 @@
*/
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;
@@ -14,16 +14,45 @@ interface ComponentInputsProps {
}
export function ComponentInputs(props: ComponentInputsProps) {
- return (
- <>
-
- {props.selectedComponent.data.label || ''}
-
-
-
- >
- );
+ // Have custom layouts for parent/group flows
+ if (props.selectedComponent.type === NODE_CATEGORY.INGEST_GROUP) {
+ return (
+ <>
+
+ Ingest flow
+
+
+
+ Configure a flow to transform your data as it is ingested into
+ OpenSearch.
+
+ >
+ );
+ } else if (props.selectedComponent.type === NODE_CATEGORY.SEARCH_GROUP) {
+ return (
+ <>
+
+ Search flow
+
+
+
+ Configure a flow to transform input when searching against your
+ OpenSearch cluster.
+
+ >
+ );
+ } else {
+ return (
+ <>
+
+ {props.selectedComponent.data.label || ''}
+
+
+
+ >
+ );
+ }
}
diff --git a/public/pages/workflow_detail/workspace/reactflow-styles.scss b/public/pages/workflow_detail/workspace/reactflow-styles.scss
index e287d264..900bdc45 100644
--- 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
index 50852b54..72162e66 100644
--- 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
index c2c18ed5..3f34c958 100644
--- 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
-
+
{props.data.label}
diff --git a/public/pages/workflow_detail/workspace/workspace_components/workspace_component.tsx b/public/pages/workflow_detail/workspace/workspace_components/workspace_component.tsx
index 21eeda30..6822592c 100644
--- 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
index eb078018..e7f9f800 100644
--- 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.