n8n/packages/editor-ui/src/components/RunDataTable.vue

<script setup lang="ts">
import { useExternalHooks } from '@/composables/useExternalHooks';
import type { INodeUi, IRunDataDisplayMode, ITableData } from '@/Interface';
import { useNDVStore } from '@/stores/ndv.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { getMappedExpression } from '@/utils/mappingUtils';
import { getPairedItemId } from '@/utils/pairedItemUtils';
import { shorten } from '@/utils/typesUtils';
import type { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
import { computed, onMounted, ref, watch } from 'vue';
import Draggable from './Draggable.vue';
import MappingPill from './MappingPill.vue';
import TextWithHighlights from './TextWithHighlights.vue';
import { useI18n } from '@/composables/useI18n';
import { useTelemetry } from '@/composables/useTelemetry';
import { N8nInfoTip, N8nTooltip, N8nTree } from 'n8n-design-system';
import { storeToRefs } from 'pinia';

const MAX_COLUMNS_LIMIT = 40;

type DraggableRef = InstanceType<typeof Draggable>;

type Props = {
	node: INodeUi;
	inputData: INodeExecutionData[];
	distanceFromActive: number;
	pageOffset: number;
	runIndex?: number;
	outputIndex?: number;
	totalRuns?: number;
	mappingEnabled?: boolean;
	hasDefaultHoverState?: boolean;
	search?: string;
};

const props = withDefaults(defineProps<Props>(), {
	runIndex: 0,
	outputIndex: 0,
	totalRuns: 0,
	mappingEnabled: false,
	hasDefaultHoverState: false,
	search: '',
});
const emit = defineEmits<{
	activeRowChanged: [row: number | null];
	displayModeChange: [mode: IRunDataDisplayMode];
	mounted: [data: { avgRowHeight: number }];
}>();

const externalHooks = useExternalHooks();
const activeColumn = ref(-1);
const forceShowGrip = ref(false);
const draggedColumn = ref(false);
const draggingPath = ref<string | null>(null);
const hoveringPath = ref<string | null>(null);
const activeRow = ref<number | null>(null);
const columnLimit = ref(MAX_COLUMNS_LIMIT);
const columnLimitExceeded = ref(false);
const draggableRef = ref<DraggableRef>();

const ndvStore = useNDVStore();
const workflowsStore = useWorkflowsStore();

const i18n = useI18n();
const telemetry = useTelemetry();

const {
	hoveringItem,
	focusedMappableInput,
	highlightDraggables: highlight,
} = storeToRefs(ndvStore);
const pairedItemMappings = computed(() => workflowsStore.workflowExecutionPairedItemMappings);
const tableData = computed(() => convertToTable(props.inputData));

onMounted(() => {
	if (tableData.value?.columns && draggableRef.value) {
		const tbody = draggableRef.value.$refs.wrapper as HTMLElement;
		if (tbody) {
			emit('mounted', {
				avgRowHeight: tbody.offsetHeight / tableData.value.data.length,
			});
		}
	}
});

function isHoveringRow(row: number): boolean {
	if (row === activeRow.value) {
		return true;
	}

	const itemIndex = props.pageOffset + row;
	if (
		itemIndex === 0 &&
		!hoveringItem.value &&
		props.hasDefaultHoverState &&
		props.distanceFromActive === 1
	) {
		return true;
	}
	const itemNodeId = getPairedItemId(
		props.node?.name ?? '',
		props.runIndex || 0,
		props.outputIndex || 0,
		itemIndex,
	);
	if (!hoveringItem.value || !pairedItemMappings.value[itemNodeId]) {
		return false;
	}

	const hoveringItemId = getPairedItemId(
		hoveringItem.value.nodeName,
		hoveringItem.value.runIndex,
		hoveringItem.value.outputIndex,
		hoveringItem.value.itemIndex,
	);
	return pairedItemMappings.value[itemNodeId].has(hoveringItemId);
}

function onMouseEnterCell(e: MouseEvent) {
	const target = e.target;
	if (target && props.mappingEnabled) {
		const col = (target as HTMLElement).dataset.col;
		if (col && !isNaN(parseInt(col, 10))) {
			activeColumn.value = parseInt(col, 10);
		}
	}

	if (target) {
		const row = (target as HTMLElement).dataset.row;
		if (row && !isNaN(parseInt(row, 10))) {
			activeRow.value = parseInt(row, 10);
			emit('activeRowChanged', props.pageOffset + activeRow.value);
		}
	}
}

function onMouseLeaveCell() {
	activeColumn.value = -1;
	activeRow.value = null;
	emit('activeRowChanged', null);
}

function onMouseEnterKey(path: Array<string | number>, colIndex: number) {
	hoveringPath.value = getCellExpression(path, colIndex);
}

function onMouseLeaveKey() {
	hoveringPath.value = null;
}

function isHovering(path: Array<string | number>, colIndex: number) {
	const expr = getCellExpression(path, colIndex);

	return hoveringPath.value === expr;
}

function getExpression(column: string) {
	if (!props.node) {
		return '';
	}

	return getMappedExpression({
		nodeName: props.node.name,
		distanceFromActive: props.distanceFromActive,
		path: [column],
	});
}

function getPathNameFromTarget(el?: HTMLElement) {
	if (!el) {
		return '';
	}
	return el.dataset.name;
}

function getCellPathName(path: Array<string | number>, colIndex: number) {
	const lastKey = path[path.length - 1];
	if (typeof lastKey === 'string') {
		return lastKey;
	}
	if (path.length > 1) {
		const prevKey = path[path.length - 2];
		return `${prevKey}[${lastKey}]`;
	}
	const column = tableData.value.columns[colIndex];
	return `${column}[${lastKey}]`;
}

function getCellExpression(path: Array<string | number>, colIndex: number) {
	if (!props.node) {
		return '';
	}
	const column = tableData.value.columns[colIndex];
	return getMappedExpression({
		nodeName: props.node.name,
		distanceFromActive: props.distanceFromActive,
		path: [column, ...path],
	});
}

function isEmpty(value: unknown): boolean {
	return (
		value === '' ||
		(Array.isArray(value) && value.length === 0) ||
		(typeof value === 'object' && value !== null && Object.keys(value).length === 0) ||
		value === null ||
		value === undefined
	);
}

function getValueToRender(value: unknown): string {
	if (value === '') {
		return i18n.baseText('runData.emptyString');
	}
	if (typeof value === 'string') {
		return value;
	}
	if (Array.isArray(value) && value.length === 0) {
		return i18n.baseText('runData.emptyArray');
	}
	if (typeof value === 'object' && value !== null && Object.keys(value).length === 0) {
		return i18n.baseText('runData.emptyObject');
	}
	if (value === null || value === undefined) {
		return `[${value}]`;
	}
	if (value === true || value === false || typeof value === 'number') {
		return value.toString();
	}
	return JSON.stringify(value);
}

function onDragStart() {
	draggedColumn.value = true;
	ndvStore.resetMappingTelemetry();
}

function onCellDragStart(el: HTMLElement) {
	if (el?.dataset.value) {
		draggingPath.value = el.dataset.value;
	}

	onDragStart();
}

function onCellDragEnd(el: HTMLElement) {
	draggingPath.value = null;

	onDragEnd(el.dataset.name ?? '', 'tree', el.dataset.depth ?? '0');
}

function isDraggingKey(path: Array<string | number>, colIndex: number) {
	if (!draggingPath.value) {
		return;
	}

	return draggingPath.value === getCellExpression(path, colIndex);
}

function onDragEnd(column: string, src: string, depth = '0') {
	setTimeout(() => {
		const mappingTelemetry = ndvStore.mappingTelemetry;
		const telemetryPayload = {
			src_node_type: props.node.type,
			src_field_name: column,
			src_nodes_back: props.distanceFromActive,
			src_run_index: props.runIndex,
			src_runs_total: props.totalRuns,
			src_field_nest_level: parseInt(depth, 10),
			src_view: 'table',
			src_element: src,
			success: false,
			...mappingTelemetry,
		};

		void externalHooks.run('runDataTable.onDragEnd', telemetryPayload);

		telemetry.track('User dragged data for mapping', telemetryPayload, {
			withPostHog: true,
		});
	}, 1000); // ensure dest data gets set if drop
}

function isSimple(data: GenericValue): data is string | number | boolean | null | undefined {
	return (
		typeof data !== 'object' ||
		data === null ||
		(Array.isArray(data) && data.length === 0) ||
		(typeof data === 'object' && Object.keys(data).length === 0)
	);
}

function isObject(data: GenericValue): data is Record<string, unknown> {
	return !isSimple(data);
}

function hasJsonInColumn(colIndex: number): boolean {
	return tableData.value.hasJson[tableData.value.columns[colIndex]];
}

function convertToTable(inputData: INodeExecutionData[]): ITableData {
	const resultTableData: GenericValue[][] = [];
	const tableColumns: string[] = [];
	let leftEntryColumns: string[], entryRows: GenericValue[];
	// Go over all entries
	let entry: IDataObject;
	const hasJson: { [key: string]: boolean } = {};
	inputData.forEach((data) => {
		if (!data.hasOwnProperty('json')) {
			return;
		}
		entry = data.json;

		// Go over all keys of entry
		entryRows = [];
		const entryColumns = Object.keys(entry || {});

		if (entryColumns.length > MAX_COLUMNS_LIMIT) {
			columnLimitExceeded.value = true;
			leftEntryColumns = entryColumns.slice(0, MAX_COLUMNS_LIMIT);
		} else {
			leftEntryColumns = entryColumns;
		}

		// Go over all the already existing column-keys
		tableColumns.forEach((key) => {
			if (entry.hasOwnProperty(key)) {
				// Entry does have key so add its value
				entryRows.push(entry[key]);
				// Remove key so that we know that it got added
				leftEntryColumns.splice(leftEntryColumns.indexOf(key), 1);

				hasJson[key] =
					hasJson[key] ||
					(typeof entry[key] === 'object' && Object.keys(entry[key] ?? {}).length > 0) ||
					false;
			} else {
				// Entry does not have key so add undefined
				entryRows.push(undefined);
			}
		});

		// Go over all the columns the entry has but did not exist yet
		leftEntryColumns.forEach((key) => {
			// Add the key for all runs in the future
			tableColumns.push(key);
			// Add the value
			entryRows.push(entry[key]);
			hasJson[key] =
				hasJson[key] ||
				(typeof entry[key] === 'object' && Object.keys(entry[key] ?? {}).length > 0) ||
				false;
		});

		// Add the data of the entry
		resultTableData.push(entryRows);
	});

	// Make sure that all entry-rows have the same length
	resultTableData.forEach((rows) => {
		if (tableColumns.length > rows.length) {
			// Has fewer entries so add the missing ones
			rows.push(...new Array(tableColumns.length - rows.length));
		}
	});

	return {
		hasJson,
		columns: tableColumns,
		data: resultTableData,
	};
}

function switchToJsonView() {
	emit('displayModeChange', 'json');
}

watch(focusedMappableInput, (curr) => {
	setTimeout(
		() => {
			forceShowGrip.value = !!focusedMappableInput.value;
		},
		curr ? 300 : 150,
	);
});
</script>

<template>
	<div :class="[$style.dataDisplay, { [$style.highlight]: highlight }]">
		<table v-if="tableData.columns && tableData.columns.length === 0" :class="$style.table">
			<thead>
				<tr>
					<th :class="$style.emptyCell"></th>
					<th :class="$style.tableRightMargin"></th>
				</tr>
			</thead>
			<tbody>
				<tr
					v-for="(_, index1) in tableData.data"
					:key="index1"
					:class="{ [$style.hoveringRow]: isHoveringRow(index1) }"
				>
					<td
						:data-row="index1"
						:data-col="0"
						@mouseenter="onMouseEnterCell"
						@mouseleave="onMouseLeaveCell"
					>
						<N8nInfoTip>{{ i18n.baseText('runData.emptyItemHint') }}</N8nInfoTip>
					</td>
					<td :class="$style.tableRightMargin"></td>
				</tr>
			</tbody>
		</table>
		<table v-else :class="$style.table">
			<thead>
				<tr>
					<th v-for="(column, i) in tableData.columns || []" :key="column">
						<N8nTooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000">
							<template #content>
								<div>
									<img src="/static/data-mapping-gif.gif" />
									{{ i18n.baseText('dataMapping.dragColumnToFieldHint') }}
								</div>
							</template>
							<Draggable
								type="mapping"
								:data="getExpression(column)"
								:disabled="!mappingEnabled"
								@dragstart="onDragStart"
								@dragend="(column) => onDragEnd(column?.textContent ?? '', 'column')"
							>
								<template #preview="{ canDrop }">
									<MappingPill :html="shorten(column, 16, 2)" :can-drop="canDrop" />
								</template>
								<template #default="{ isDragging }">
									<div
										:class="{
											[$style.header]: true,
											[$style.draggableHeader]: mappingEnabled,
											[$style.activeHeader]:
												(i === activeColumn || forceShowGrip) && mappingEnabled,
											[$style.draggingHeader]: isDragging,
										}"
									>
										<TextWithHighlights
											:content="getValueToRender(column || '')"
											:search="search"
										/>
										<div :class="$style.dragButton">
											<font-awesome-icon icon="grip-vertical" />
										</div>
									</div>
								</template>
							</Draggable>
						</N8nTooltip>
					</th>
					<th v-if="columnLimitExceeded" :class="$style.header">
						<N8nTooltip placement="bottom-end">
							<template #content>
								<div>
									<i18n-t tag="span" keypath="dataMapping.tableView.tableColumnsExceeded.tooltip">
										<template #columnLimit>{{ columnLimit }}</template>
										<template #link>
											<a @click="switchToJsonView">{{
												i18n.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link')
											}}</a>
										</template>
									</i18n-t>
								</div>
							</template>
							<span>
								<font-awesome-icon
									:class="$style['warningTooltip']"
									icon="exclamation-triangle"
								></font-awesome-icon>
								{{ i18n.baseText('dataMapping.tableView.tableColumnsExceeded') }}
							</span>
						</N8nTooltip>
					</th>
					<th :class="$style.tableRightMargin"></th>
				</tr>
			</thead>
			<Draggable
				ref="draggableRef"
				tag="tbody"
				type="mapping"
				target-data-key="mappable"
				:disabled="!mappingEnabled"
				@dragstart="onCellDragStart"
				@dragend="onCellDragEnd"
			>
				<template #preview="{ canDrop, el }">
					<MappingPill
						:html="shorten(getPathNameFromTarget(el) || '', 16, 2)"
						:can-drop="canDrop"
					/>
				</template>
				<tr
					v-for="(row, index1) in tableData.data"
					:key="index1"
					:class="{ [$style.hoveringRow]: isHoveringRow(index1) }"
					:data-test-id="isHoveringRow(index1) ? 'hovering-item' : undefined"
				>
					<td
						v-for="(data, index2) in row"
						:key="index2"
						:data-row="index1"
						:data-col="index2"
						:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
						@mouseenter="onMouseEnterCell"
						@mouseleave="onMouseLeaveCell"
					>
						<TextWithHighlights
							v-if="isSimple(data)"
							:content="getValueToRender(data)"
							:search="search"
							:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
						/>
						<N8nTree v-else-if="isObject(data)" :node-class="$style.nodeClass" :value="data">
							<template #label="{ label, path }">
								<span
									:class="{
										[$style.hoveringKey]: mappingEnabled && isHovering(path, index2),
										[$style.draggingKey]: isDraggingKey(path, index2),
										[$style.dataKey]: true,
										[$style.mappable]: mappingEnabled,
									}"
									data-target="mappable"
									:data-name="getCellPathName(path, index2)"
									:data-value="getCellExpression(path, index2)"
									:data-depth="path.length"
									@mouseenter="() => onMouseEnterKey(path, index2)"
									@mouseleave="onMouseLeaveKey"
									>{{ label || i18n.baseText('runData.unnamedField') }}</span
								>
							</template>

							<template #value="{ value }">
								<TextWithHighlights
									:content="getValueToRender(value)"
									:search="search"
									:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
								/>
							</template>
						</N8nTree>
					</td>
					<td v-if="columnLimitExceeded"></td>
					<td :class="$style.tableRightMargin"></td>
				</tr>
			</Draggable>
		</table>
	</div>
</template>

<style lang="scss" module>
.dataDisplay {
	position: absolute;
	top: 0;
	left: 0;
	padding-left: var(--spacing-s);
	right: 0;
	overflow-y: auto;
	line-height: 1.5;
	word-break: normal;
	height: 100%;
	padding-bottom: var(--spacing-3xl);
}

.table {
	border-collapse: separate;
	text-align: left;
	width: calc(100%);
	font-size: var(--font-size-s);

	th {
		background-color: var(--color-background-base);
		border-top: var(--border-base);
		border-bottom: var(--border-base);
		border-left: var(--border-base);
		position: sticky;
		top: 0;
		color: var(--color-text-dark);
		z-index: 1;
	}

	td {
		vertical-align: top;
		padding: var(--spacing-2xs) var(--spacing-2xs) var(--spacing-2xs) var(--spacing-3xs);
		border-bottom: var(--border-base);
		border-left: var(--border-base);
		overflow-wrap: break-word;
		white-space: pre-wrap;
		vertical-align: top;
	}

	td:first-child,
	td:nth-last-child(2) {
		position: relative;
		z-index: 0;

		&:after {
			// add border without shifting content
			content: '';
			position: absolute;
			height: 100%;
			width: 2px;
			top: 0;
		}
	}

	td:nth-last-child(2):after {
		right: -1px;
	}

	td:first-child:after {
		left: -1px;
	}

	th:last-child,
	td:last-child {
		border-right: var(--border-base);
	}
}

.nodeClass {
	margin-bottom: var(--spacing-5xs);
}

.emptyCell {
	height: 32px;
}

.header {
	display: flex;
	align-items: center;
	padding: var(--spacing-2xs);

	span {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		flex-grow: 1;
	}
}

.draggableHeader {
	&:hover {
		cursor: grab;
		background-color: var(--color-foreground-base);

		.dragButton {
			opacity: 1;
		}
	}
}

.highlight .draggableHeader {
	color: var(--color-primary);
}

.draggingHeader {
	color: var(--color-primary);
	background-color: var(--color-primary-tint-2);
}

.activeHeader {
	.dragButton {
		opacity: 1;
	}
}

.dragButton {
	opacity: 0;
	margin-left: var(--spacing-2xs);
}

.dataKey {
	color: var(--color-text-dark);
	line-height: 1.7;
	font-weight: var(--font-weight-bold);
	border-radius: var(--border-radius-base);
	padding: 0 var(--spacing-5xs) 0 var(--spacing-5xs);
	margin-right: var(--spacing-5xs);
}

.value {
	line-height: var(--font-line-height-regular);
}

.nestedValue {
	composes: value;
	margin-left: var(--spacing-4xs);
}

.mappable {
	cursor: grab;
}

.empty {
	color: var(--color-danger);
}

.limitColWidth {
	max-width: 300px;
}

.minColWidth {
	min-width: 240px;
}

.hoveringKey {
	background-color: var(--color-foreground-base);
}

.draggingKey {
	background-color: var(--color-primary-tint-2);
}

.tableRightMargin {
	// becomes necessary with large tables
	background-color: var(--color-background-base) !important;
	width: var(--spacing-s);
	border-right: none !important;
	border-top: none !important;
	border-bottom: none !important;
}

.hoveringRow {
	td:first-child:after,
	td:nth-last-child(2):after {
		background-color: var(--color-secondary);
	}
}

.warningTooltip {
	color: var(--color-warning);
}
</style>