feat(editor): Highlight nodes in canvas on card hover in setup panel (#25862)

Author: RicardoE105

packages/frontend/editor-ui/src/features/setupPanel/components/NodeSetupCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from '@n8n/i18n';
 import { N8nButton, N8nIcon, N8nText, N8nTooltip } from '@n8n/design-system';
 
@@ -8,8 +8,9 @@ import CredentialPicker from '@/features/credentials/components/CredentialPicker
 import SetupCredentialLabel from './SetupCredentialLabel.vue';
 import { useNodeTypesStore } from '@/app/stores/nodeTypes.store';
 import { useWorkflowsStore } from '@/app/stores/workflows.store';
+import { useSetupPanelStore } from '../setupPanel.store';
 
-import type { NodeSetupState } from '../setupPanel.types';
+import type { NodeCredentialRequirement, NodeSetupState } from '../setupPanel.types';
 import { useNodeExecution } from '@/app/composables/useNodeExecution';
 import { useTelemetry } from '@/app/composables/useTelemetry';
 
@@ -28,6 +29,7 @@ const i18n = useI18n();
 const telemetry = useTelemetry();
 const nodeTypesStore = useNodeTypesStore();
 const workflowsStore = useWorkflowsStore();
+const setupPanelStore = useSetupPanelStore();
 
 const nodeRef = computed(() => props.state.node);
 const { isExecuting, buttonLabel, buttonIcon, disabledReason, hasIssues, execute } =
@@ -51,6 +53,27 @@ const tooltipText = computed(() => {
 	return disabledReason.value;
 });
 
+const onCardMouseEnter = () => {
+	setupPanelStore.setHighlightedNodes([props.state.node.id]);
+};
+
+const onSharedNodesHintEnter = (requirement: NodeCredentialRequirement) => {
+	const ids: string[] = [props.state.node.id];
+	for (const name of requirement.nodesWithSameCredential) {
+		const node = workflowsStore.getNodeByName(name);
+		if (node) ids.push(node.id);
+	}
+	setupPanelStore.setHighlightedNodes(ids);
+};
+
+const onSharedNodesHintLeave = () => {
+	setupPanelStore.setHighlightedNodes([props.state.node.id]);
+};
+
+const onCardMouseLeave = () => {
+	setupPanelStore.clearHighlightedNodes();
+};
+
 const onHeaderClick = () => {
 	expanded.value = !expanded.value;
 };
@@ -120,6 +143,10 @@ onMounted(() => {
 		expanded.value = false;
 	}
 });
+
+onBeforeUnmount(() => {
+	setupPanelStore.clearHighlightedNodes();
+});
 </script>
 
 <template>
@@ -133,6 +160,8 @@ onMounted(() => {
 				[$style['no-content']]: !state.credentialRequirements.length,
 			},
 		]"
+		@mouseenter="onCardMouseEnter"
+		@mouseleave="onCardMouseLeave"
 	>
 		<header data-test-id="node-setup-card-header" :class="$style.header" @click="onHeaderClick">
 			<N8nIcon
@@ -182,6 +211,8 @@ onMounted(() => {
 						:node-name="state.node.name"
 						:credential-type="requirement.credentialType"
 						:nodes-with-same-credential="requirement.nodesWithSameCredential"
+						@hint-mouse-enter="onSharedNodesHintEnter(requirement)"
+						@hint-mouse-leave="onSharedNodesHintLeave"
 					/>
 					<CredentialPicker
 						create-button-type="secondary"

packages/frontend/editor-ui/src/features/setupPanel/components/SetupCredentialLabel.vue

@@ -8,6 +8,11 @@ defineProps<{
 	nodesWithSameCredential: string[];
 }>();
 
+const emit = defineEmits<{
+	hintMouseEnter: [];
+	hintMouseLeave: [];
+}>();
+
 const i18n = useI18n();
 </script>
 
@@ -24,7 +29,12 @@ const i18n = useI18n();
 			<template #content>
 				{{ nodesWithSameCredential.join(', ') }}
 			</template>
-			<span data-test-id="node-setup-card-shared-nodes-hint" :class="$style['shared-nodes-hint']">
+			<span
+				data-test-id="node-setup-card-shared-nodes-hint"
+				:class="$style['shared-nodes-hint']"
+				@mouseenter="emit('hintMouseEnter')"
+				@mouseleave="emit('hintMouseLeave')"
+			>
 				{{
 					i18n.baseText('setupPanel.usedInNodes', {
 						interpolate: {

packages/frontend/editor-ui/src/features/setupPanel/setupPanel.store.ts

@@ -2,7 +2,7 @@ import { usePostHog } from '@/app/stores/posthog.store';
 import { STORES } from '@n8n/stores';
 import { SETUP_PANEL } from '@/app/constants';
 import { defineStore } from 'pinia';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 export const useSetupPanelStore = defineStore(STORES.SETUP_PANEL, () => {
 	const posthogStore = usePostHog();
@@ -11,7 +11,23 @@ export const useSetupPanelStore = defineStore(STORES.SETUP_PANEL, () => {
 		return posthogStore.getVariant(SETUP_PANEL.name) === SETUP_PANEL.variant;
 	});
 
+	const highlightedNodeIds = ref(new Set<string>());
+
+	const isHighlightActive = computed(() => highlightedNodeIds.value.size > 0);
+
+	function setHighlightedNodes(nodeIds: string[]) {
+		highlightedNodeIds.value = new Set(nodeIds);
+	}
+
+	function clearHighlightedNodes() {
+		highlightedNodeIds.value = new Set();
+	}
+
 	return {
 		isFeatureEnabled,
+		highlightedNodeIds,
+		isHighlightActive,
+		setHighlightedNodes,
+		clearHighlightedNodes,
 	};
 });

packages/frontend/editor-ui/src/features/workflows/canvas/components/Canvas.vue

@@ -66,6 +66,7 @@ import { type ContextMenuAction } from '@/features/shared/contextMenu/composable
 import { useFocusedNodesStore } from '@/features/ai/assistant/focusedNodes.store';
 import { useChatPanelStore } from '@/features/ai/assistant/chatPanel.store';
 import { useChatPanelStateStore } from '@/features/ai/assistant/chatPanelState.store';
+import { useSetupPanelStore } from '@/features/setupPanel/setupPanel.store';
 
 const $style = useCssModule();
 
@@ -164,6 +165,7 @@ const experimentalNdvStore = useExperimentalNdvStore();
 const focusedNodesStore = useFocusedNodesStore();
 const chatPanelStore = useChatPanelStore();
 const chatPanelStateStore = useChatPanelStateStore();
+const setupPanelStore = useSetupPanelStore();
 
 const isExperimentalNdvActive = computed(() => experimentalNdvStore.isActive(viewport.value.zoom));
 
@@ -212,6 +214,7 @@ const classes = computed(() => ({
 	[$style.canvas]: true,
 	[$style.ready]: !props.loading && isPaneReady.value,
 	[$style.isExperimentalNdvActive]: isExperimentalNdvActive.value,
+	spotlightActive: setupPanelStore.isHighlightActive,
 }));
 
 /**
@@ -1054,6 +1057,7 @@ defineExpose({
 					:event-bus="eventBus"
 					:hovered="nodesHoveredById[nodeProps.id]"
 					:nearby-hovered="nodeProps.id === hoveredTriggerNode.id.value"
+					:highlighted="setupPanelStore.highlightedNodeIds.has(nodeProps.id)"
 					@delete="onDeleteNode"
 					@run="onRunNode"
 					@select="onSelectNode"
@@ -1169,4 +1173,20 @@ defineExpose({
 .minimap-leave-to {
 	opacity: 0;
 }
+
+.spotlightActive {
+	:deep(.vue-flow__edges) {
+		opacity: 0.2;
+		transition: opacity 0.15s ease;
+	}
+
+	:deep(.vue-flow__node) {
+		opacity: 0.2;
+		transition: opacity 0.15s ease;
+	}
+
+	:deep(.vue-flow__node:has(.highlighted)) {
+		opacity: 1;
+	}
+}
 </style>

packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/CanvasNode.vue

@@ -41,6 +41,7 @@ type Props = NodeProps<CanvasNodeData> & {
 	eventBus?: EventBus<CanvasEventBusEvents>;
 	hovered?: boolean;
 	nearbyHovered?: boolean;
+	highlighted?: boolean;
 };
 
 const slots = defineSlots<{
@@ -102,6 +103,7 @@ const classes = computed(() => ({
 	[style.canvasNode]: true,
 	[style.showToolbar]: showToolbar.value,
 	hovered: props.hovered,
+	highlighted: props.highlighted,
 	selected: props.selected,
 	waiting: props.data.execution.waiting || props.data.execution.status === 'waiting',
 	running: props.data.execution.running || props.data.execution.waitingForNext,