Skip to content

Cluster root updates #2931

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 20, 2025
Merged

Cluster root updates #2931

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d423d66
1652-replace cluster root check through variable with new clusterRoot…
katarina-cala Aug 19, 2025
3d1171b
1652-filter clusterElementTypes through mainRoot's type and actionClu…
katarina-cala Aug 19, 2025
69f357d
1652-PR fixes
katarina-cala Aug 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/src/pages/platform/cluster-element-editor/hooks/useClusterElementsLayout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ const useClusterElementsLayout = () => {
clusterRootId: rootClusterElementNodeData.workflowNodeName,
currentNodePositions: nodePositions,
nestedClusterRootsDefinitions: nestedClusterRootsDefinitions || {},
operationName: rootClusterElementNodeData.operationName,
});

nodes.push(...clusterElementNodes);
Expand Down
76 changes: 71 additions & 5 deletions client/src/pages/platform/cluster-element-editor/utils/clusterElementsUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,49 @@
import {ROOT_CLUSTER_HANDLE_STEP, ROOT_CLUSTER_WIDTH} from '@/shared/constants';
import {ComponentDefinition} from '@/shared/middleware/platform/configuration';
import {ComponentDefinition, WorkflowTask} from '@/shared/middleware/platform/configuration';
import {ClusterElementItemType, ClusterElementsType, WorkflowNodeType} from '@/shared/types';

export function initializeClusterElementsObject(
clusterElementsData: ClusterElementsType,
rootClusterElementDefinition: ComponentDefinition
) {
interface InitializeClusterElementsObjectProps {
clusterElementsData: ClusterElementsType;
mainClusterRootTask: WorkflowTask;
rootClusterElementDefinition: ComponentDefinition;
}

export function initializeClusterElementsObject({
clusterElementsData,
mainClusterRootTask,
rootClusterElementDefinition,
}: InitializeClusterElementsObjectProps) {
const clusterElements: ClusterElementsType = {};

if (!rootClusterElementDefinition.clusterElementTypes) {
return clusterElements;
}

const mainClusterRootType = mainClusterRootTask.type?.split('/')[2];

const filteredClusterElementTypes = (() => {
if (
rootClusterElementDefinition.actionClusterElementTypes &&
Object.keys(rootClusterElementDefinition.actionClusterElementTypes).length > 0 &&
mainClusterRootType
) {
return rootClusterElementDefinition.actionClusterElementTypes[mainClusterRootType] || [];
} else {
return rootClusterElementDefinition.clusterElementTypes.map((type) => type.name);
}
})();

rootClusterElementDefinition.clusterElementTypes.forEach((elementType) => {
const matchingType = filteredClusterElementTypes.some((type) => {
return type === elementType.name;
});

if (!matchingType) {
return;
}

const clusterElementType = convertNameToCamelCase(elementType.name || '');

const elementData = clusterElementsData?.[clusterElementType];

if (elementType.multipleElements) {
Expand Down Expand Up @@ -135,6 +165,42 @@ export function extractClusterElementComponentOperations(
}, existingClusterElementsOperations);
}

interface GetClusterElementTypesCountProps {
clusterRootComponentDefinition: ComponentDefinition;
operationName?: string;
}

export function getClusterElementTypesCount({
clusterRootComponentDefinition,
operationName,
}: GetClusterElementTypesCountProps): number {
if (!clusterRootComponentDefinition.clusterElementTypes) {
return 0;
}

if (!operationName) {
return clusterRootComponentDefinition.clusterElementTypes.length;
}

const actionTypes = clusterRootComponentDefinition.actionClusterElementTypes;

if (!actionTypes || Object.keys(actionTypes).length === 0) {
return clusterRootComponentDefinition.clusterElementTypes.length;
}

const operationElementTypes = actionTypes[operationName];

if (!operationElementTypes || operationElementTypes.length === 0) {
return clusterRootComponentDefinition.clusterElementTypes.length;
}

const filteredElementTypes = clusterRootComponentDefinition.clusterElementTypes.filter((elementType) =>
operationElementTypes.includes(elementType.name || '')
);

return filteredElementTypes.length;
}

export function calculateNodeWidth(handleCount: number): number {
const baseWidth = ROOT_CLUSTER_WIDTH;
const handleStep = ROOT_CLUSTER_HANDLE_STEP;
Expand Down
36 changes: 32 additions & 4 deletions client/src/pages/platform/cluster-element-editor/utils/createClusterElementsNodes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@ import {ClusterElementsType} from '@/shared/types';
import {Node} from '@xyflow/react';

import {createMultipleElementsNode, createPlaceholderNode, createSingleElementsNode} from './clusterElementsNodesUtils';
import {convertNameToCamelCase, isPlainObject} from './clusterElementsUtils';
import {convertNameToCamelCase, getClusterElementTypesCount, isPlainObject} from './clusterElementsUtils';

interface CreateClusterElementNodesProps {
clusterElements: ClusterElementsType;
clusterRootComponentDefinition: ComponentDefinition;
clusterRootId: string;
currentNodePositions: Record<string, {x: number; y: number}>;
nestedClusterRootsDefinitions: Record<string, ComponentDefinition>;
operationName?: string;
}

export default function createClusterElementNodes({
Expand All @@ -19,15 +20,42 @@ export default function createClusterElementNodes({
clusterRootId,
currentNodePositions = {},
nestedClusterRootsDefinitions,
operationName = '',
}: CreateClusterElementNodesProps) {
if (!clusterRootComponentDefinition?.clusterElementTypes || !clusterElements) {
if (!clusterRootComponentDefinition || !clusterRootComponentDefinition.clusterElementTypes || !clusterElements) {
return [];
}

const createdNodes: Node[] = [];
const totalClusterElementTypeCount = clusterRootComponentDefinition.clusterElementTypes.length;

clusterRootComponentDefinition.clusterElementTypes.forEach((clusterElementType, clusterElementTypeIndex) => {
const totalClusterElementTypeCount = getClusterElementTypesCount({
clusterRootComponentDefinition,
operationName,
});

if (totalClusterElementTypeCount === 0) {
return [];
}

const elementTypesToUse = clusterRootComponentDefinition.clusterElementTypes!.filter((elementType) => {
if (!operationName) {
return true;
}

const actionTypes = clusterRootComponentDefinition.actionClusterElementTypes;
if (!actionTypes || Object.keys(actionTypes).length === 0) {
return true;
}

const operationElementTypes = actionTypes[operationName];
if (!operationElementTypes || operationElementTypes.length === 0) {
return true;
}

return operationElementTypes.includes(elementType.name || '');
});

elementTypesToUse.forEach((clusterElementType, clusterElementTypeIndex) => {
const clusterElementTypeName = convertNameToCamelCase(clusterElementType.name || '');
const clusterElementTypeLabel = clusterElementType.label || '';
const isMultipleClusterElementsNode = clusterElementType.multipleElements;
Expand Down
11 changes: 5 additions & 6 deletions client/src/pages/platform/workflow-editor/WorkflowEditorLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {useWorkflowEditor} from '@/pages/platform/workflow-editor/providers/work
import useRightSidebarStore from '@/pages/platform/workflow-editor/stores/useRightSidebarStore';
import useWorkflowEditorStore from '@/pages/platform/workflow-editor/stores/useWorkflowEditorStore';
import {useCopilotStore} from '@/shared/components/copilot/stores/useCopilotStore';
import {ROOT_CLUSTER_ELEMENT_NAMES} from '@/shared/constants';
import {XIcon} from 'lucide-react';
import {Suspense, lazy, useEffect} from 'react';
import {twMerge} from 'tailwind-merge';
Expand Down Expand Up @@ -87,13 +86,13 @@ const WorkflowEditorLayout = ({includeComponents, runDisabled, showWorkflowInput

const {invalidateWorkflowQueries, updateWorkflowMutation} = useWorkflowEditor();

const isRootClusterElement = ROOT_CLUSTER_ELEMENT_NAMES.includes(currentComponent?.componentName as string);
const isMainRootClusterElement = currentNode?.clusterRoot && !currentNode.isNestedClusterRoot;

useEffect(() => {
if (currentNode?.rootClusterElement) {
if (isMainRootClusterElement) {
setRootClusterElementNodeData(currentNode);
}
}, [currentNode, setRootClusterElementNodeData]);
}, [isMainRootClusterElement, setRootClusterElementNodeData, currentNode]);

return (
<ReactFlowProvider>
Expand Down Expand Up @@ -136,7 +135,7 @@ const WorkflowEditorLayout = ({includeComponents, runDisabled, showWorkflowInput
)}
</div>

{currentComponent && !isRootClusterElement && (
{currentComponent && !isMainRootClusterElement && (
<Suspense fallback={<WorkflowNodeDetailsPanelSkeleton />}>
<WorkflowNodeDetailsPanel
invalidateWorkflowQueries={invalidateWorkflowQueries!}
Expand Down Expand Up @@ -211,7 +210,7 @@ const WorkflowEditorLayout = ({includeComponents, runDisabled, showWorkflowInput

{workflow.id && <WorkflowTestChatPanel />}

{currentComponent && !isRootClusterElement && dataPillPanelOpen && (
{currentComponent && !isMainRootClusterElement && dataPillPanelOpen && (
<Suspense fallback={<DataPillPanelSkeleton />}>
<DataPillPanel
previousComponentDefinitions={previousComponentDefinitions}
Expand Down
27 changes: 23 additions & 4 deletions client/src/pages/platform/workflow-editor/components/WorkflowNodeDetailsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import {twMerge} from 'tailwind-merge';
import {useShallow} from 'zustand/shallow';

import {
convertNameToSnakeCase,
extractClusterElementComponentOperations,
getClusterElementsLabel,
} from '../../cluster-element-editor/utils/clusterElementsUtils';
Expand Down Expand Up @@ -494,6 +495,20 @@ const WorkflowNodeDetailsPanel = ({
);
}, [clusterElementsCanvasOpen, currentWorkflowNode, isClusterElement]);

const filteredClusterElementOperations = useMemo(() => {
if (currentComponentDefinition?.clusterElement && currentNode?.clusterElementType) {
return currentComponentDefinition?.clusterElements?.filter((clusterElement) => {
return clusterElement.type === convertNameToSnakeCase(currentNode.clusterElementType as string);
});
}

return currentComponentDefinition?.clusterElements;
}, [
currentComponentDefinition?.clusterElement,
currentComponentDefinition?.clusterElements,
currentNode?.clusterElementType,
]);

const handleOperationSelectChange = useCallback(
async (newOperationName: string) => {
if (currentOperationName === newOperationName) {
Expand Down Expand Up @@ -900,7 +915,7 @@ const WorkflowNodeDetailsPanel = ({
(workflowNode) => workflowNode.workflowNodeName === currentNode?.workflowNodeName
);
} else if (clusterElementsCanvasOpen) {
if (currentNode?.rootClusterElement) {
if (currentNode?.clusterRoot && !currentNode.isNestedClusterRoot) {
currentWorkflowNode = workflowNodes.find(
(workflowNodeType) => workflowNodeType.workflowNodeName === currentNode?.workflowNodeName
);
Expand Down Expand Up @@ -950,8 +965,12 @@ const WorkflowNodeDetailsPanel = ({
return;
}

if (clusterElementsCanvasOpen && currentComponentDefinition?.clusterElement) {
if (!!currentComponentDefinition.clusterElements && !!matchingOperation) {
if (
clusterElementsCanvasOpen &&
currentComponentDefinition?.clusterElement &&
currentNode?.parentClusterRootId
) {
if (matchingOperation) {
fetchClusterElementDefinition();
} else {
setCurrentActionDefinition(undefined);
Expand Down Expand Up @@ -1049,7 +1068,7 @@ const WorkflowNodeDetailsPanel = ({
(currentNode?.trigger
? currentComponentDefinition?.triggers
: clusterElementsCanvasOpen && currentComponentDefinition?.clusterElement
? currentComponentDefinition?.clusterElements
? filteredClusterElementOperations
: currentComponentDefinition?.actions)!
}
triggerSelect={currentNode?.trigger}
Expand Down
21 changes: 10 additions & 11 deletions ...t/src/pages/platform/workflow-editor/components/WorkflowNodesPopoverMenuOperationList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import {ROOT_CLUSTER_ELEMENT_NAMES} from '@/shared/constants';
import {useAnalytics} from '@/shared/hooks/useAnalytics';
import {
ActionDefinition,
Expand Down Expand Up @@ -87,7 +86,8 @@ const WorkflowNodesPopoverMenuOperationList = ({

const queryClient = useQueryClient();

const {actions, clusterElement, clusterElements, icon, name, title, triggers, version} = componentDefinition;
const {actions, clusterElement, clusterElements, clusterRoot, icon, name, title, triggers, version} =
componentDefinition;

const clusterElementOperations = useMemo(() => {
if (!clusterElementType) {
Expand All @@ -110,10 +110,8 @@ const WorkflowNodesPopoverMenuOperationList = ({
(operation: ClickedOperationType, definition: ActionDefinition | TriggerDefinition) => {
const {componentLabel, componentName, icon, operationName, version} = operation;

const isRootClusterElement = ROOT_CLUSTER_ELEMENT_NAMES.includes(componentName);

return {
...(isRootClusterElement
...(clusterRoot
? {
clusterElements: {},
}
Expand All @@ -138,7 +136,7 @@ const WorkflowNodesPopoverMenuOperationList = ({
workflowNodeName: trigger ? 'trigger_1' : getFormattedName(componentName),
};
},
[trigger]
[clusterRoot, trigger]
);

const saveNodeToWorkflow = useCallback(
Expand Down Expand Up @@ -197,10 +195,11 @@ const WorkflowNodesPopoverMenuOperationList = ({
{}
);

const clusterElements = initializeClusterElementsObject(
mainClusterRootTask?.clusterElements || {},
rootClusterElementDefinition
);
const clusterElements = initializeClusterElementsObject({
clusterElementsData: mainClusterRootTask?.clusterElements || {},
mainClusterRootTask,
rootClusterElementDefinition,
});

const updatedClusterElements = processClusterElementsHierarchy({
clusterElementData,
Expand Down Expand Up @@ -236,7 +235,7 @@ const WorkflowNodesPopoverMenuOperationList = ({
metadata,
} as typeof rootClusterElementNodeData);

if (currentNode?.rootClusterElement) {
if (currentNode?.clusterRoot && !currentNode.isNestedClusterRoot) {
setCurrentNode({
...currentNode,
clusterElements: updatedClusterElements.nestedClusterElements,
Expand Down
4 changes: 2 additions & 2 deletions client/src/pages/platform/workflow-editor/components/node-details-tabs/DescriptionTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const DescriptionTab = ({invalidateWorkflowQueries, nodeDefinition, updateWorkfl
return;
}

if (currentNode.clusterElementType || currentNode.rootClusterElement) {
if (currentNode.clusterElementType || currentNode.clusterRoot) {
saveClusterElementFieldChange({
currentComponentDefinition: nodeDefinition as ComponentDefinition,
fieldUpdate: {
Expand Down Expand Up @@ -130,7 +130,7 @@ const DescriptionTab = ({invalidateWorkflowQueries, nodeDefinition, updateWorkfl
return;
}

if (currentNode.clusterElementType || currentNode.rootClusterElement) {
if (currentNode.clusterElementType || currentNode.clusterRoot) {
saveClusterElementFieldChange({
currentComponentDefinition: nodeDefinition as ComponentDefinition,
fieldUpdate: {
Expand Down
2 changes: 1 addition & 1 deletion client/src/pages/platform/workflow-editor/hooks/useNodeClick.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default function useNodeClick(data: NodeDataType, id: NodeProps['id'], ac
setActiveTab(activeTab ?? 'description');
setCurrentNode({...data, description: ''});

if (data.rootClusterElement && !clusterElementsCanvasOpen) {
if (!!data.clusterRoot && !clusterElementsCanvasOpen) {
setClusterElementsCanvasOpen(true);

setCurrentComponent(undefined);
Expand Down
Loading
Loading