fix(editor): Provide correct node output runData information in new canvas (no-changelog) (#10691)

packages/editor-ui/src/__tests__/data/canvas.ts

@@ -6,6 +6,7 @@ import type {
 	CanvasNodeEventBusEvents,
 	CanvasNodeHandleInjectionData,
 	CanvasNodeInjectionData,
+	ExecutionOutputMapData,
 } from '@/types';
 import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
 import { NodeConnectionType } from 'n8n-workflow';
@@ -25,7 +26,7 @@ export function createCanvasNodeData({
 	execution = { running: false },
 	issues = { items: [], visible: false },
 	pinnedData = { count: 0, visible: false },
-	runData = { count: 0, visible: false },
+	runData = { outputMap: {}, iterations: 0, visible: false },
 	render = {
 		type: CanvasNodeRenderType.Default,
 		options: { configurable: false, configuration: false, trigger: false },
@@ -119,6 +120,8 @@ export function createCanvasHandleProvide({
 	label = 'Handle',
 	mode = CanvasConnectionMode.Input,
 	type = NodeConnectionType.Main,
+	index = 0,
+	runData,
 	isConnected = false,
 	isConnecting = false,
 	isReadOnly = false,
@@ -126,6 +129,8 @@ export function createCanvasHandleProvide({
 	label?: string;
 	mode?: CanvasConnectionMode;
 	type?: NodeConnectionType;
+	index?: number;
+	runData?: ExecutionOutputMapData;
 	isConnected?: boolean;
 	isConnecting?: boolean;
 	isReadOnly?: boolean;
@@ -135,8 +140,10 @@ export function createCanvasHandleProvide({
 			label: ref(label),
 			mode: ref(mode),
 			type: ref(type),
+			index: ref(index),
 			isConnected: ref(isConnected),
 			isConnecting: ref(isConnecting),
+			runData: ref(runData),
 			isReadOnly: ref(isReadOnly),
 		} satisfies CanvasNodeHandleInjectionData,
 	};

packages/editor-ui/src/components/canvas/elements/handles/CanvasHandleRenderer.vue

@@ -3,7 +3,6 @@
 import { computed, h, provide, toRef, useCssModule } from 'vue';
 import type { CanvasConnectionPort, CanvasElementPortWithRenderData } from '@/types';
 import { CanvasConnectionMode } from '@/types';
-
 import type { ValidConnectionFunc } from '@vue-flow/core';
 import { Handle } from '@vue-flow/core';
 import { NodeConnectionType } from 'n8n-workflow';
@@ -13,6 +12,7 @@ import CanvasHandleNonMainInput from '@/components/canvas/elements/handles/rende
 import CanvasHandleNonMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleNonMainOutput.vue';
 import { CanvasNodeHandleKey } from '@/constants';
 import { createCanvasConnectionHandleString } from '@/utils/canvasUtilsV2';
+import { useCanvasNode } from '@/composables/useCanvasNode';
 
 const props = defineProps<{
 	mode: CanvasConnectionMode;
@@ -59,6 +59,18 @@ const isConnectableEnd = computed(() => {
 
 const handleClasses = computed(() => [style.handle, style[props.type], style[props.mode]]);
 
+/**
+ * Run data
+ */
+
+const { runDataOutputMap } = useCanvasNode();
+
+const runData = computed(() =>
+	props.mode === CanvasConnectionMode.Output
+		? runDataOutputMap.value[props.type]?.[props.index]
+		: undefined,
+);
+
 /**
  * Render additional elements
  */
@@ -103,11 +115,14 @@ const isConnecting = toRef(props, 'isConnecting');
 const isReadOnly = toRef(props, 'isReadOnly');
 const mode = toRef(props, 'mode');
 const type = toRef(props, 'type');
+const index = toRef(props, 'index');
 
 provide(CanvasNodeHandleKey, {
 	label,
 	mode,
 	type,
+	index,
+	runData,
 	isConnected,
 	isConnecting,
 	isReadOnly,

packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.spec.ts

@@ -31,4 +31,36 @@ describe('CanvasHandleMainOutput', () => {
 
 		expect(queryByTestId('canvas-handle-plus')).not.toBeInTheDocument();
 	});
+
+	it('should render run data label', async () => {
+		const runData = {
+			total: 1,
+			iterations: 1,
+		};
+		const { getByText } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasHandleProvide({ label: '', runData }),
+				},
+			},
+		});
+		expect(getByText('1 item')).toBeInTheDocument();
+	});
+
+	it('should not render run data label if output label is available', async () => {
+		const runData = {
+			total: 1,
+			iterations: 1,
+		};
+		const { getByText } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasHandleProvide({ label: 'Output', runData }),
+				},
+			},
+		});
+
+		expect(() => getByText('1 item')).toThrow();
+		expect(getByText('Output')).toBeInTheDocument();
+	});
 });

packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue

@@ -3,28 +3,41 @@ import { useCanvasNodeHandle } from '@/composables/useCanvasNodeHandle';
 import { useCanvasNode } from '@/composables/useCanvasNode';
 import { computed, ref } from 'vue';
 import type { CanvasNodeDefaultRender } from '@/types';
+import { useI18n } from '@/composables/useI18n';
 
 const emit = defineEmits<{
 	add: [];
 }>();
 
+const i18n = useI18n();
 const { render } = useCanvasNode();
-const { label, isConnected, isConnecting, isReadOnly } = useCanvasNodeHandle();
+const { label, isConnected, isConnecting, isReadOnly, runData } = useCanvasNodeHandle();
 
 const handleClasses = 'source';
 const isHovered = ref(false);
 
 const renderOptions = computed(() => render.value.options as CanvasNodeDefaultRender['options']);
 
+const runDataLabel = computed(() =>
+	runData.value
+		? i18n.baseText('ndv.output.items', {
+				adjustToNumber: runData.value.total,
+				interpolate: { count: String(runData.value.total) },
+			})
+		: '',
+);
+
 const isHandlePlusVisible = computed(() => !isConnecting.value || isHovered.value);
 
+const plusState = computed(() => (runData.value ? 'success' : 'default'));
+
 const plusLineSize = computed(
 	() =>
 		({
 			small: 46,
 			medium: 66,
 			large: 80,
-		})[renderOptions.value.outputs?.labelSize ?? 'small'],
+		})[renderOptions.value.outputs?.labelSize ?? runData.value ? 'large' : 'small'],
 );
 
 function onMouseEnter() {
@@ -41,7 +54,8 @@ function onClickAdd() {
 </script>
 <template>
 	<div :class="['canvas-node-handle-main-output', $style.handle]">
-		<div :class="[$style.label]">{{ label }}</div>
+		<div v-if="label" :class="[$style.label, $style.outputLabel]">{{ label }}</div>
+		<div v-else-if="runData" :class="[$style.label, $style.runDataLabel]">{{ runDataLabel }}</div>
 		<CanvasHandleDot :handle-classes="handleClasses" />
 		<Transition name="canvas-node-handle-main-output">
 			<CanvasHandlePlus
@@ -50,6 +64,7 @@ function onClickAdd() {
 				data-test-id="canvas-handle-plus"
 				:line-size="plusLineSize"
 				:handle-classes="handleClasses"
+				:state="plusState"
 				@mouseenter="onMouseEnter"
 				@mouseleave="onMouseLeave"
 				@click:plus="onClickAdd"
@@ -68,11 +83,6 @@ function onClickAdd() {
 
 .label {
 	position: absolute;
-	top: 50%;
-	left: var(--spacing-m);
-	transform: translate(0, -50%);
-	font-size: var(--font-size-2xs);
-	color: var(--color-foreground-xdark);
 	background: var(--color-canvas-label-background);
 	z-index: 1;
 	max-width: calc(100% - var(--spacing-m) - 24px);
@@ -80,6 +90,23 @@ function onClickAdd() {
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
+
+.outputLabel {
+	top: 50%;
+	left: var(--spacing-m);
+	transform: translate(0, -50%);
+	font-size: var(--font-size-2xs);
+	color: var(--color-foreground-xdark);
+}
+
+.runDataLabel {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	font-size: var(--font-size-xs);
+	color: var(--color-success);
+}
 </style>
 
 <style lang="scss">

packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.spec.ts

@@ -40,6 +40,14 @@ describe('CanvasHandlePlus', () => {
 		});
 	});
 
+	it('should apply correct classes based on state', () => {
+		const { container } = renderComponent({
+			props: { state: 'success' },
+		});
+
+		expect(container.firstChild).toHaveClass('success');
+	});
+
 	it('should render SVG elements correctly', () => {
 		const { container } = renderComponent();
 

packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue

@@ -7,12 +7,14 @@ const props = withDefaults(
 		handleClasses?: string;
 		plusSize?: number;
 		lineSize?: number;
+		state?: 'success' | 'default';
 	}>(),
 	{
 		position: 'right',
 		handleClasses: undefined,
 		plusSize: 24,
 		lineSize: 46,
+		state: 'default',
 	},
 );
 
@@ -22,7 +24,12 @@ const emit = defineEmits<{
 
 const style = useCssModule();
 
-const classes = computed(() => [style.wrapper, style[props.position], props.handleClasses]);
+const classes = computed(() => [
+	style.wrapper,
+	style[props.position],
+	style[props.state],
+	props.handleClasses,
+]);
 
 const viewBox = computed(() => {
 	switch (props.position) {
@@ -91,7 +98,7 @@ function onClick(event: MouseEvent) {
 <template>
 	<svg :class="classes" :viewBox="`0 0 ${viewBox.width} ${viewBox.height}`" :style="styles">
 		<line
-			:class="handleClasses"
+			:class="[handleClasses, $style.line]"
 			:x1="linePosition[0][0]"
 			:y1="linePosition[0][1]"
 			:x2="linePosition[1][0]"
@@ -127,6 +134,10 @@ function onClick(event: MouseEvent) {
 <style lang="scss" module>
 .wrapper {
 	position: relative;
+
+	&.success .line {
+		stroke: var(--color-success);
+	}
 }
 
 .plus {

packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandleDiamond.spec.ts.snap

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CanvasHandleDiamond > should render with default props 1`] = `
-"<svg class="wrapper right" viewBox="0 0 70 24" style="width: 70px; height: 24px;">
+"<svg class="wrapper right default" viewBox="0 0 70 24" style="width: 70px; height: 24px;">
-  <line class="" x1="0" y1="12" x2="47" y2="12" stroke="var(--color-foreground-xdark)" stroke-width="2"></line>
+  <line class="line" x1="0" y1="12" x2="47" y2="12" stroke="var(--color-foreground-xdark)" stroke-width="2"></line>
   <g class="plus clickable" transform="translate(46, 0)">
     <rect class="clickable" x="2" y="2" width="20" height="20" stroke="var(--color-foreground-xdark)" stroke-width="2" rx="4" fill="#ffffff"></rect>
     <path class="clickable" fill="var(--color-foreground-xdark)" d="m16.40655,10.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z"></path>

packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandlePlus.spec.ts.snap

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CanvasHandlePlus > should render with default props 1`] = `
-"<svg class="wrapper right" viewBox="0 0 70 24" style="width: 70px; height: 24px;">
+"<svg class="wrapper right default" viewBox="0 0 70 24" style="width: 70px; height: 24px;">
-  <line class="" x1="0" y1="12" x2="47" y2="12" stroke="var(--color-foreground-xdark)" stroke-width="2"></line>
+  <line class="line" x1="0" y1="12" x2="47" y2="12" stroke="var(--color-foreground-xdark)" stroke-width="2"></line>
   <g class="plus clickable" transform="translate(46, 0)">
     <rect class="clickable" x="2" y="2" width="20" height="20" stroke="var(--color-foreground-xdark)" stroke-width="2" rx="4" fill="#ffffff"></rect>
     <path class="clickable" fill="var(--color-foreground-xdark)" d="m16.40655,10.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z"></path>

packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.spec.ts

@@ -31,7 +31,9 @@ describe('CanvasNodeStatusIcons', () => {
 	it('should render correctly for a node that ran successfully', () => {
 		const { getByTestId } = renderComponent({
 			global: {
-				provide: createCanvasNodeProvide({ data: { runData: { count: 15, visible: true } } }),
+				provide: createCanvasNodeProvide({
+					data: { runData: { outputMap: {}, iterations: 15, visible: true } },
+				}),
 			},
 		});
 

packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue

@@ -14,7 +14,7 @@ const {
 	executionWaiting,
 	executionRunning,
 	hasRunData,
-	runDataCount,
+	runDataIterations,
 } = useCanvasNode();
 
 const hideNodeIssues = computed(() => false); // @TODO Implement this
@@ -67,7 +67,7 @@ const hideNodeIssues = computed(() => false); // @TODO Implement this
 		:class="[$style.status, $style.runData]"
 	>
 		<FontAwesomeIcon icon="check" />
-		<span v-if="runDataCount > 1" :class="$style.count"> {{ runDataCount }}</span>
+		<span v-if="runDataIterations > 1" :class="$style.count"> {{ runDataIterations }}</span>
 	</div>
 </template>
 

packages/editor-ui/src/composables/useCanvasMapping.spec.ts

@@ -2,18 +2,18 @@ import type { Ref } from 'vue';
 import { ref } from 'vue';
 import { NodeConnectionType } from 'n8n-workflow';
 import type { Workflow } from 'n8n-workflow';
-import { createPinia, setActivePinia } from 'pinia';
+import { setActivePinia } from 'pinia';
 
 import { useCanvasMapping } from '@/composables/useCanvasMapping';
 import type { INodeUi } from '@/Interface';
 import {
+	createTestNode,
 	createTestWorkflowObject,
 	mockNode,
 	mockNodes,
 	mockNodeTypeDescription,
 } from '@/__tests__/mocks';
-import { MANUAL_TRIGGER_NODE_TYPE, SET_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
+import { MANUAL_TRIGGER_NODE_TYPE, SET_NODE_TYPE, STICKY_NODE_TYPE, STORES } from '@/constants';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import {
 	createCanvasConnectionHandleString,
@@ -21,19 +21,32 @@ import {
 } from '@/utils/canvasUtilsV2';
 import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
 import { MarkerType } from '@vue-flow/core';
+import { createTestingPinia } from '@pinia/testing';
+import { mockedStore } from '@/__tests__/utils';
 
 beforeEach(() => {
-	const pinia = createPinia();
+	const pinia = createTestingPinia({
-	setActivePinia(pinia);
+		initialState: {
-
+			[STORES.WORKFLOWS]: {
-	useNodeTypesStore().setNodeTypes([
+				workflowExecutionData: {},
-		mockNodeTypeDescription({
+			},
+			[STORES.NODE_TYPES]: {
+				nodeTypes: {
+					[MANUAL_TRIGGER_NODE_TYPE]: {
+						1: mockNodeTypeDescription({
 							name: MANUAL_TRIGGER_NODE_TYPE,
 						}),
-		mockNodeTypeDescription({
+					},
+					[SET_NODE_TYPE]: {
+						1: mockNodeTypeDescription({
 							name: SET_NODE_TYPE,
 						}),
-	]);
+					},
+				},
+			},
+		},
+	});
+	setActivePinia(pinia);
 });
 
 afterEach(() => {
@@ -61,6 +74,7 @@ describe('useCanvasMapping', () => {
 
 	describe('nodes', () => {
 		it('should map nodes to canvas nodes', () => {
+			const workflowsStore = mockedStore(useWorkflowsStore);
 			const manualTriggerNode = mockNode({
 				name: 'Manual Trigger',
 				type: MANUAL_TRIGGER_NODE_TYPE,
@@ -79,6 +93,8 @@ describe('useCanvasMapping', () => {
 				workflowObject: ref(workflowObject) as Ref<Workflow>,
 			});
 
+			workflowsStore.isNodeExecuting.mockReturnValue(false);
+
 			expect(mappedNodes.value).toEqual([
 				{
 					id: manualTriggerNode.id,
@@ -106,7 +122,8 @@ describe('useCanvasMapping', () => {
 							visible: false,
 						},
 						runData: {
-							count: 0,
+							iterations: 0,
+							outputMap: {},
 							visible: false,
 						},
 						inputs: [
@@ -169,6 +186,7 @@ describe('useCanvasMapping', () => {
 		});
 
 		it('should handle execution state', () => {
+			const workflowsStore = mockedStore(useWorkflowsStore);
 			const manualTriggerNode = mockNode({
 				name: 'Manual Trigger',
 				type: MANUAL_TRIGGER_NODE_TYPE,
@@ -181,7 +199,7 @@ describe('useCanvasMapping', () => {
 				connections,
 			});
 
-			useWorkflowsStore().addExecutingNode(manualTriggerNode.name);
+			workflowsStore.isNodeExecuting.mockReturnValue(true);
 
 			const { nodes: mappedNodes } = useCanvasMapping({
 				nodes: ref(nodes),
@@ -336,6 +354,195 @@ describe('useCanvasMapping', () => {
 				});
 			});
 		});
+
+		describe('runData', () => {
+			describe('nodeExecutionRunDataOutputMapById', () => {
+				it('should return an empty object when there is no run data', () => {
+					const workflowsStore = mockedStore(useWorkflowsStore);
+					const nodes: INodeUi[] = [];
+					const connections = {};
+					const workflowObject = createTestWorkflowObject({
+						nodes,
+						connections,
+					});
+
+					workflowsStore.getWorkflowResultDataByNodeName.mockReturnValue(null);
+
+					const { nodeExecutionRunDataOutputMapById } = useCanvasMapping({
+						nodes: ref(nodes),
+						connections: ref(connections),
+						workflowObject: ref(workflowObject) as Ref<Workflow>,
+					});
+
+					expect(nodeExecutionRunDataOutputMapById.value).toEqual({});
+				});
+
+				it('should calculate iterations and total correctly for single node', () => {
+					const workflowsStore = mockedStore(useWorkflowsStore);
+					const nodes = [createTestNode({ name: 'Node 1' })];
+					const connections = {};
+					const workflowObject = createTestWorkflowObject({
+						nodes,
+						connections,
+					});
+
+					workflowsStore.getWorkflowResultDataByNodeName.mockReturnValue([
+						{
+							startTime: 0,
+							executionTime: 0,
+							source: [],
+							data: {
+								[NodeConnectionType.Main]: [[{ json: {} }, { json: {} }]],
+							},
+						},
+					]);
+
+					const { nodeExecutionRunDataOutputMapById } = useCanvasMapping({
+						nodes: ref(nodes),
+						connections: ref(connections),
+						workflowObject: ref(workflowObject) as Ref<Workflow>,
+					});
+
+					expect(nodeExecutionRunDataOutputMapById.value).toEqual({
+						[nodes[0].id]: {
+							[NodeConnectionType.Main]: {
+								0: {
+									iterations: 1,
+									total: 2,
+								},
+							},
+						},
+					});
+				});
+
+				it('should handle multiple nodes with different connection types', () => {
+					const workflowsStore = mockedStore(useWorkflowsStore);
+					const nodes = [
+						createTestNode({ id: 'node1', name: 'Node 1' }),
+						createTestNode({ id: 'node2', name: 'Node 2' }),
+					];
+					const connections = {};
+					const workflowObject = createTestWorkflowObject({
+						nodes,
+						connections,
+					});
+
+					workflowsStore.getWorkflowResultDataByNodeName.mockImplementation((nodeName: string) => {
+						if (nodeName === 'Node 1') {
+							return [
+								{
+									startTime: 0,
+									executionTime: 0,
+									source: [],
+									data: {
+										[NodeConnectionType.Main]: [[{ json: {} }]],
+										[NodeConnectionType.AiAgent]: [[{ json: {} }, { json: {} }]],
+									},
+								},
+							];
+						} else if (nodeName === 'Node 2') {
+							return [
+								{
+									startTime: 0,
+									executionTime: 0,
+									source: [],
+									data: {
+										[NodeConnectionType.Main]: [[{ json: {} }, { json: {} }, { json: {} }]],
+									},
+								},
+							];
+						}
+
+						return null;
+					});
+
+					const { nodeExecutionRunDataOutputMapById } = useCanvasMapping({
+						nodes: ref(nodes),
+						connections: ref(connections),
+						workflowObject: ref(workflowObject) as Ref<Workflow>,
+					});
+
+					expect(nodeExecutionRunDataOutputMapById.value).toEqual({
+						node1: {
+							[NodeConnectionType.Main]: {
+								0: {
+									iterations: 1,
+									total: 1,
+								},
+							},
+							[NodeConnectionType.AiAgent]: {
+								0: {
+									iterations: 1,
+									total: 2,
+								},
+							},
+						},
+						node2: {
+							[NodeConnectionType.Main]: {
+								0: {
+									iterations: 1,
+									total: 3,
+								},
+							},
+						},
+					});
+				});
+
+				it('handles multiple iterations correctly', () => {
+					const workflowsStore = mockedStore(useWorkflowsStore);
+					const nodes = [createTestNode({ name: 'Node 1' })];
+					const connections = {};
+					const workflowObject = createTestWorkflowObject({
+						nodes,
+						connections,
+					});
+
+					workflowsStore.getWorkflowResultDataByNodeName.mockReturnValue([
+						{
+							startTime: 0,
+							executionTime: 0,
+							source: [],
+							data: {
+								[NodeConnectionType.Main]: [[{ json: {} }]],
+							},
+						},
+						{
+							startTime: 0,
+							executionTime: 0,
+							source: [],
+							data: {
+								[NodeConnectionType.Main]: [[{ json: {} }, { json: {} }, { json: {} }]],
+							},
+						},
+						{
+							startTime: 0,
+							executionTime: 0,
+							source: [],
+							data: {
+								[NodeConnectionType.Main]: [[{ json: {} }, { json: {} }]],
+							},
+						},
+					]);
+
+					const { nodeExecutionRunDataOutputMapById } = useCanvasMapping({
+						nodes: ref(nodes),
+						connections: ref(connections),
+						workflowObject: ref(workflowObject) as Ref<Workflow>,
+					});
+
+					expect(nodeExecutionRunDataOutputMapById.value).toEqual({
+						[nodes[0].id]: {
+							[NodeConnectionType.Main]: {
+								0: {
+									iterations: 3,
+									total: 6,
+								},
+							},
+						},
+					});
+				});
+			});
+		});
 	});
 
 	describe('connections', () => {

packages/editor-ui/src/composables/useCanvasMapping.ts

@@ -18,11 +18,13 @@ import type {
 	CanvasNodeDefaultRender,
 	CanvasNodeDefaultRenderLabelSize,
 	CanvasNodeStickyNoteRender,
+	ExecutionOutputMap,
 } from '@/types';
 import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
 import {
 	mapLegacyConnectionsToCanvasConnections,
 	mapLegacyEndpointsToCanvasConnectionPort,
+	parseCanvasConnectionHandleString,
 } from '@/utils/canvasUtilsV2';
 import type {
 	ExecutionStatus,
@@ -241,6 +243,39 @@ export function useCanvasMapping({
 		}, {}),
 	);
 
+	const nodeExecutionRunDataOutputMapById = computed(() =>
+		Object.keys(nodeExecutionRunDataById.value).reduce<Record<string, ExecutionOutputMap>>(
+			(acc, nodeId) => {
+				acc[nodeId] = {};
+
+				const outputData = { iterations: 0, total: 0 };
+				for (const runIteration of nodeExecutionRunDataById.value[nodeId] ?? []) {
+					const data = runIteration.data ?? {};
+
+					for (const connectionType of Object.keys(data)) {
+						const connectionTypeData = data[connectionType] ?? {};
+						acc[nodeId][connectionType] = acc[nodeId][connectionType] ?? {};
+
+						for (const outputIndex of Object.keys(connectionTypeData)) {
+							const parsedOutputIndex = parseInt(outputIndex, 10);
+							const connectionTypeOutputIndexData = connectionTypeData[parsedOutputIndex] ?? [];
+
+							acc[nodeId][connectionType][outputIndex] = acc[nodeId][connectionType][
+								outputIndex
+							] ?? { ...outputData };
+							acc[nodeId][connectionType][outputIndex].iterations += 1;
+							acc[nodeId][connectionType][outputIndex].total +=
+								connectionTypeOutputIndexData.length;
+						}
+					}
+				}
+
+				return acc;
+			},
+			{},
+		),
+	);
+
 	const nodeIssuesById = computed(() =>
 		nodes.value.reduce<Record<string, string[]>>((acc, node) => {
 			const issues: string[] = [];
@@ -359,7 +394,8 @@ export function useCanvasMapping({
 					running: nodeExecutionRunningById.value[node.id],
 				},
 				runData: {
-					count: nodeExecutionRunDataById.value[node.id]?.length ?? 0,
+					outputMap: nodeExecutionRunDataOutputMapById.value[node.id],
+					iterations: nodeExecutionRunDataById.value[node.id]?.length ?? 0,
 					visible: !!nodeExecutionRunDataById.value[node.id],
 				},
 				render: renderTypeByNodeId.value[node.id] ?? { type: 'default', options: {} },
@@ -426,7 +462,6 @@ export function useCanvasMapping({
 
 	function getConnectionLabel(connection: CanvasConnection): string {
 		const fromNode = nodes.value.find((node) => node.name === connection.data?.fromNodeName);
-
 		if (!fromNode) {
 			return '';
 		}
@@ -438,10 +473,13 @@ export function useCanvasMapping({
 				interpolate: { count: String(pinnedDataCount) },
 			});
 		} else if (nodeExecutionRunDataById.value[fromNode.id]) {
-			const runDataCount = nodeExecutionRunDataById.value[fromNode.id]?.length ?? 0;
+			const { type, index } = parseCanvasConnectionHandleString(connection.sourceHandle);
+			const runDataTotal =
+				nodeExecutionRunDataOutputMapById.value[fromNode.id]?.[type]?.[index]?.total ?? 0;
+
 			return i18n.baseText('ndv.output.items', {
-				adjustToNumber: runDataCount,
+				adjustToNumber: runDataTotal,
-				interpolate: { count: String(runDataCount) },
+				interpolate: { count: String(runDataTotal) },
 			});
 		}
 
@@ -449,6 +487,7 @@ export function useCanvasMapping({
 	}
 
 	return {
+		nodeExecutionRunDataOutputMapById,
 		connections: mappedConnections,
 		nodes: mappedNodes,
 	};

packages/editor-ui/src/composables/useCanvasNode.spec.ts

@@ -27,7 +27,8 @@ describe('useCanvasNode', () => {
 		expect(result.isSelected.value).toBeUndefined();
 		expect(result.pinnedDataCount.value).toBe(0);
 		expect(result.hasPinnedData.value).toBe(false);
-		expect(result.runDataCount.value).toBe(0);
+		expect(result.runDataOutputMap.value).toEqual({});
+		expect(result.runDataIterations.value).toBe(0);
 		expect(result.hasRunData.value).toBe(false);
 		expect(result.issues.value).toEqual([]);
 		expect(result.hasIssues.value).toBe(false);
@@ -54,7 +55,7 @@ describe('useCanvasNode', () => {
 				},
 				issues: { items: ['issue1'], visible: true },
 				execution: { status: 'running', waiting: 'waiting', running: true },
-				runData: { count: 1, visible: true },
+				runData: { outputMap: {}, iterations: 1, visible: true },
 				pinnedData: { count: 1, visible: true },
 				render: {
 					type: CanvasNodeRenderType.Default,
@@ -86,7 +87,8 @@ describe('useCanvasNode', () => {
 		expect(result.isSelected.value).toBe(true);
 		expect(result.pinnedDataCount.value).toBe(1);
 		expect(result.hasPinnedData.value).toBe(true);
-		expect(result.runDataCount.value).toBe(1);
+		expect(result.runDataOutputMap.value).toEqual({});
+		expect(result.runDataIterations.value).toBe(1);
 		expect(result.hasRunData.value).toBe(true);
 		expect(result.issues.value).toEqual(['issue1']);
 		expect(result.hasIssues.value).toBe(true);

packages/editor-ui/src/composables/useCanvasNode.ts

@@ -10,9 +10,10 @@ import { CanvasNodeRenderType, CanvasConnectionMode } from '@/types';
 
 export function useCanvasNode() {
 	const node = inject(CanvasNodeKey);
-	const data = computed<CanvasNodeData>(
+	const data = computed(
 		() =>
-			node?.data.value ?? {
+			node?.data.value ??
+			({
 				id: '',
 				name: '',
 				subtitle: '',
@@ -27,12 +28,12 @@ export function useCanvasNode() {
 				execution: {
 					running: false,
 				},
-				runData: { count: 0, visible: false },
+				runData: { iterations: 0, outputMap: {}, visible: false },
 				render: {
 					type: CanvasNodeRenderType.Default,
 					options: {},
 				},
-			},
+			} satisfies CanvasNodeData),
 	);
 
 	const id = computed(() => node?.id.value ?? '');
@@ -58,7 +59,8 @@ export function useCanvasNode() {
 	const executionWaiting = computed(() => data.value.execution.waiting);
 	const executionRunning = computed(() => data.value.execution.running);
 
-	const runDataCount = computed(() => data.value.runData.count);
+	const runDataOutputMap = computed(() => data.value.runData.outputMap);
+	const runDataIterations = computed(() => data.value.runData.iterations);
 	const hasRunData = computed(() => data.value.runData.visible);
 
 	const render = computed(() => data.value.render);
@@ -79,7 +81,8 @@ export function useCanvasNode() {
 		isSelected,
 		pinnedDataCount,
 		hasPinnedData,
-		runDataCount,
+		runDataIterations,
+		runDataOutputMap,
 		hasRunData,
 		issues,
 		hasIssues,

packages/editor-ui/src/composables/useCanvasNodeHandle.ts

@@ -14,9 +14,11 @@ export function useCanvasNodeHandle() {
 	const label = computed(() => handle?.label.value ?? '');
 	const isConnected = computed(() => handle?.isConnected.value ?? false);
 	const isConnecting = computed(() => handle?.isConnecting.value ?? false);
+	const isReadOnly = computed(() => handle?.isReadOnly.value);
 	const type = computed(() => handle?.type.value ?? NodeConnectionType.Main);
 	const mode = computed(() => handle?.mode.value ?? CanvasConnectionMode.Input);
-	const isReadOnly = computed(() => handle?.isReadOnly.value);
+	const index = computed(() => handle?.index.value ?? 0);
+	const runData = computed(() => handle?.runData.value);
 
 	return {
 		label,
@@ -25,5 +27,7 @@ export function useCanvasNodeHandle() {
 		isReadOnly,
 		type,
 		mode,
+		index,
+		runData,
 	};
 }

packages/editor-ui/src/types/canvas.ts

@@ -103,7 +103,8 @@ export interface CanvasNodeData {
 		running: boolean;
 	};
 	runData: {
-		count: number;
+		outputMap: ExecutionOutputMap;
+		iterations: number;
 		visible: boolean;
 	};
 	render: CanvasNodeDefaultRender | CanvasNodeStickyNoteRender | CanvasNodeAddNodesRender;
@@ -163,11 +164,24 @@ export interface CanvasNodeHandleInjectionData {
 	label: Ref<string | undefined>;
 	mode: Ref<CanvasConnectionMode>;
 	type: Ref<NodeConnectionType>;
+	index: Ref<number>;
 	isConnected: Ref<boolean | undefined>;
 	isConnecting: Ref<boolean | undefined>;
 	isReadOnly: Ref<boolean | undefined>;
+	runData: Ref<ExecutionOutputMapData | undefined>;
 }
 
 export type ConnectStartEvent = { handleId: string; handleType: string; nodeId: string };
 
 export type CanvasNodeMoveEvent = { id: string; position: CanvasNode['position'] };
+
+export type ExecutionOutputMapData = {
+	total: number;
+	iterations: number;
+};
+
+export type ExecutionOutputMap = {
+	[connectionType: string]: {
+		[outputIndex: string]: ExecutionOutputMapData;
+	};
+};