fix(editor): Inline expression previews are not displayed in NDV (#14475)

packages/frontend/editor-ui/src/components/NodeDetailsView.vue

@@ -78,6 +78,9 @@ const { APP_Z_INDEXES } = useStyles();
 
 const settingsEventBus = createEventBus();
 const redrawRequired = ref(false);
+const runInputIndex = ref(-1);
+const runOutputIndex = ref(-1);
+const isLinkingEnabled = ref(true);
 const selectedInput = ref<string | undefined>();
 const triggerWaitingWarningEnabled = ref(false);
 const isDragging = ref(false);
@@ -245,6 +248,12 @@ const maxOutputRun = computed(() => {
 	return 0;
 });
 
+const outputRun = computed(() =>
+	runOutputIndex.value === -1
+		? maxOutputRun.value
+		: Math.min(runOutputIndex.value, maxOutputRun.value),
+);
+
 const maxInputRun = computed(() => {
 	if (inputNode.value === null || activeNode.value === null) {
 		return 0;
@@ -281,23 +290,15 @@ const maxInputRun = computed(() => {
 	return 0;
 });
 
-const isLinkingEnabled = computed(() => ndvStore.isRunIndexLinkingEnabled);
-
-const outputRun = computed(() =>
-	ndvStore.output.run === -1
-		? maxOutputRun.value
-		: Math.min(ndvStore.output.run, maxOutputRun.value),
-);
-
 const inputRun = computed(() => {
 	if (isLinkingEnabled.value && maxOutputRun.value === maxInputRun.value) {
 		return outputRun.value;
 	}
-	if (ndvStore.input.run === -1) {
+	if (runInputIndex.value === -1) {
 		return maxInputRun.value;
 	}
 
-	return Math.min(ndvStore.input.run, maxInputRun.value);
+	return Math.min(runInputIndex.value, maxInputRun.value);
 });
 
 const canLinkRuns = computed(
@@ -442,13 +443,13 @@ const onPanelsInit = (e: { position: number }) => {
 };
 
 const onLinkRunToOutput = () => {
-	ndvStore.setRunIndexLinkingEnabled(true);
+	isLinkingEnabled.value = true;
 	trackLinking('output');
 };
 
 const onUnlinkRun = (pane: string) => {
-	ndvStore.setInputRunIndex(outputRun.value);
-	ndvStore.setRunIndexLinkingEnabled(false);
+	runInputIndex.value = runOutputIndex.value;
+	isLinkingEnabled.value = false;
 	trackLinking(pane);
 };
 
@@ -475,8 +476,8 @@ const trackLinking = (pane: string) => {
 };
 
 const onLinkRunToInput = () => {
-	ndvStore.setOutputRunIndex(inputRun.value);
-	ndvStore.setRunIndexLinkingEnabled(true);
+	runOutputIndex.value = runInputIndex.value;
+	isLinkingEnabled.value = true;
 	trackLinking('input');
 };
 
@@ -552,12 +553,15 @@ const trackRunChange = (run: number, pane: string) => {
 };
 
 const onRunOutputIndexChange = (run: number) => {
-	ndvStore.setOutputRunIndex(run);
+	runOutputIndex.value = run;
 	trackRunChange(run, 'output');
 };
 
 const onRunInputIndexChange = (run: number) => {
-	ndvStore.setInputRunIndex(run);
+	runInputIndex.value = run;
+	if (linked.value) {
+		runOutputIndex.value = run;
+	}
 	trackRunChange(run, 'input');
 };
 
@@ -566,8 +570,8 @@ const onOutputTableMounted = (e: { avgRowHeight: number }) => {
 };
 
 const onInputNodeChange = (value: string, index: number) => {
-	ndvStore.setInputRunIndex(-1);
-	ndvStore.setRunIndexLinkingEnabled(true);
+	runInputIndex.value = -1;
+	isLinkingEnabled.value = true;
 	selectedInput.value = value;
 
 	telemetry.track('User changed ndv input dropdown', {
@@ -617,6 +621,9 @@ watch(
 		}
 
 		if (node && node.name !== oldNode?.name && !isActiveStickyNode.value) {
+			runInputIndex.value = -1;
+			runOutputIndex.value = -1;
+			isLinkingEnabled.value = true;
 			selectedInput.value = undefined;
 			triggerWaitingWarningEnabled.value = false;
 			avgOutputRowHeight.value = 0;
@@ -667,12 +674,26 @@ watch(
 	{ immediate: true },
 );
 
+watch(maxOutputRun, () => {
+	runOutputIndex.value = -1;
+});
+
+watch(maxInputRun, () => {
+	runInputIndex.value = -1;
+});
+
 watch(inputNodeName, (nodeName) => {
 	setTimeout(() => {
 		ndvStore.setInputNodeName(nodeName);
 	}, 0);
 });
 
+watch(inputRun, (inputRun) => {
+	setTimeout(() => {
+		ndvStore.setInputRunIndex(inputRun);
+	}, 0);
+});
+
 onMounted(() => {
 	dataPinningEventBus.on('data-pinning-discovery', setIsTooltipVisible);
 });