feat(editor): update expressions display (#4171)

* N8n 4673 expressions res1 (#4149)

* hide hints if necessary

* refactor out parameter input

* refactor param input in creds

* remove any

* add expression result before

* update case

* add types

* fix spacing

* update types

* update expr

* update parameter input

* update param input

* update param input

* remove import

* fix typo

* update value

* fix drop for rl

* add state to track hovering item

* add hover behavior to resolve values

* update index

* fix run selector bug

* add run item to eval expr

* add paired item mappings

* fix rec bug

* Fix for loops

* handle pinned data

* add missing pinned

* fix bug

* support parent

* add input

* map back from output

* clean up

* fix output bug

* fix branching bug

* update preview

* only if expr

* fix output

* fix expr eval for outputs

* add default hover state

* fix hover state

* fix branching

* hide hint if expr

* remove duplicate logic

* update style

* allow opening expr in demo

* update expr

* update row hover

* update param name

* clean up

* update hovering state

* update default output

* fix duplicate import

* update hover behavior

* update package lock

* fix pinned data case

* address case when no input

packages/editor-ui/src/components/RunData.vue

@@ -220,8 +220,11 @@
 				:distanceFromActive="distanceFromActive"
 				:showMappingHint="showMappingHint"
 				:runIndex="runIndex"
+				:pageOffset="currentPageOffset"
 				:totalRuns="maxRunIndex"
+				:hasDefaultHoverState="paneType === 'input'"
 				@mounted="$emit('tableMounted', $event)"
+				@activeRowChanged="onItemHover"
 			/>
 
 			<run-data-json
@@ -419,7 +422,7 @@ export default mixins(
 				type: String,
 			},
 			overrideOutputs: {
-				type: Array,
+				type: Array as PropType<number[]>,
 			},
 			mappingEnabled: {
 				type: Boolean,
@@ -463,6 +466,10 @@ export default mixins(
 					this.showPinDataDiscoveryTooltip(this.jsonData);
 				}
 			}
+			this.$store.commit('ui/setNDVBranchIndex', {
+				pane: this.paneType,
+				branchIndex: this.currentOutputIndex,
+			});
 		},
 		destroyed() {
 			this.hidePinDataDiscoveryTooltip();
@@ -561,6 +568,9 @@ export default mixins(
 
 				return 0;
 			},
+			currentPageOffset(): number {
+				return this.pageSize * (this.currentPage - 1);
+			},
 			maxRunIndex (): number {
 				if (this.node === null) {
 					return 0;
@@ -662,6 +672,17 @@ export default mixins(
 			},
 		},
 		methods: {
+			onItemHover(itemIndex: number | null) {
+				if (itemIndex === null) {
+					this.$emit('itemHover', null);
+
+					return;
+				}
+				this.$emit('itemHover', {
+					outputIndex: this.currentOutputIndex,
+					itemIndex,
+				});
+			},
 			onClickDataPinningDocsLink() {
 				this.$telemetry.track('User clicked ndv link', {
 					workflow_id: this.$store.getters.workflowId,
@@ -1094,6 +1115,12 @@ export default mixins(
 					this.onDisplayModeChange('table');
 				}
 			},
+			currentOutputIndex(branchIndex: number) {
+				this.$store.commit('ui/setNDVBranchIndex', {
+					pane: this.paneType,
+					branchIndex,
+				});
+			},
 		},
 	});
 </script>