Show sampling previews on Vue nodes (#5579)

* refactor: simplify preview state provider

- Remove unnecessary event listeners and manual syncing
- Use computed() to directly reference app.nodePreviewImages
- Eliminate data duplication and any types
- Rely on Vue's reactivity for automatic updates
- Follow established patterns from execution state provider

* feat: optimize Vue node preview image display with reactive store

- Move preview display logic from inline ternaries to computed properties
- Add useNodePreviewState composable for preview state management
- Implement reactive store approach using Pinia storeToRefs
- Use VueUse useTimeoutFn for modern timeout management instead of window.setTimeout
- Add v-memo optimization for preview image template rendering
- Maintain proper sync between app.nodePreviewImages and reactive store state

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

* fix: update props usage for Vue 3.5 destructured props syntax

* [refactor] improve code style and architecture based on review feedback

- Replace inject pattern with direct store access in useNodePreviewState
- Use optional chaining for more concise conditional checks
- Use modern Array.at(-1) for accessing last element
- Remove provide/inject for nodePreviewImages in favor of direct store refs
- Update preview image styling: remove rounded borders, use flexible height
- Simplify scheduleRevoke function with optional chaining

Co-authored-by: DrJKL <[email protected]>

* [cleanup] remove unused NodePreviewImagesKey injection key

Addresses knip unused export warning after switching from provide/inject
to direct store access pattern.

* [test] add mock for useNodePreviewState in LGraphNode test

Fixes test failure after adding preview functionality to LGraphNode component.

* [fix] update workflowStore import path after rebase

Updates import to new location: @/platform/workflow/management/stores/workflowStore

---------

Co-authored-by: Claude <[email protected]>
Co-authored-by: DrJKL <[email protected]>

Author: 3 people

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -114,6 +114,18 @@
           :lod-level="lodLevel"
           :image-urls="nodeImageUrls"
         />
+        <!-- Live preview image -->
+        <div
+          v-if="shouldShowPreviewImg"
+          v-memo="[latestPreviewUrl]"
+          class="px-4"
+        >
+          <img
+            :src="latestPreviewUrl"
+            alt="preview"
+            class="w-full max-h-64 object-contain"
+          />
+        </div>
       </div>
     </template>
   </div>
@@ -138,6 +150,7 @@ import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
 import { useNodeExecutionState } from '@/renderer/extensions/vueNodes/execution/useNodeExecutionState'
 import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
 import { LODLevel, useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
+import { useNodePreviewState } from '@/renderer/extensions/vueNodes/preview/useNodePreviewState'
 import { ExecutedWsMessage } from '@/schemas/apiSchema'
 import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -312,6 +325,14 @@ const separatorClasses =
   'bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full'
 const progressClasses = 'h-2 bg-primary-500 transition-all duration-300'
 
+const { latestPreviewUrl, shouldShowPreviewImg } = useNodePreviewState(
+  nodeData.id,
+  {
+    isMinimalLOD,
+    isCollapsed
+  }
+)
+
 // Common condition computations to avoid repetition
 const shouldShowWidgets = computed(
   () => shouldRenderWidgets.value && nodeData.widgets?.length

src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts

@@ -0,0 +1,51 @@
+import { storeToRefs } from 'pinia'
+import { type Ref, computed } from 'vue'
+
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+
+export const useNodePreviewState = (
+  nodeId: string,
+  options?: {
+    isMinimalLOD?: Ref<boolean>
+    isCollapsed?: Ref<boolean>
+  }
+) => {
+  const workflowStore = useWorkflowStore()
+  const { nodePreviewImages } = storeToRefs(useNodeOutputStore())
+
+  const locatorId = computed(() => workflowStore.nodeIdToNodeLocatorId(nodeId))
+
+  const previewUrls = computed(() => {
+    const key = locatorId.value
+    if (!key) return undefined
+    const urls = nodePreviewImages.value[key]
+    return urls?.length ? urls : undefined
+  })
+
+  const hasPreview = computed(() => !!previewUrls.value?.length)
+
+  const latestPreviewUrl = computed(() => {
+    const urls = previewUrls.value
+    return urls?.length ? urls.at(-1) : ''
+  })
+
+  const shouldShowPreviewImg = computed(() => {
+    if (!options?.isMinimalLOD || !options?.isCollapsed) {
+      return hasPreview.value
+    }
+    return (
+      !options.isMinimalLOD.value &&
+      !options.isCollapsed.value &&
+      hasPreview.value
+    )
+  })
+
+  return {
+    locatorId,
+    previewUrls,
+    hasPreview,
+    latestPreviewUrl,
+    shouldShowPreviewImg
+  }
+}

src/stores/imagePreviewStore.ts

@@ -1,3 +1,4 @@
+import { useTimeoutFn } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
@@ -19,6 +20,8 @@ import type { NodeLocatorId } from '@/types/nodeIdentification'
 import { parseFilePath } from '@/utils/formatUtil'
 import { isVideoNode } from '@/utils/litegraphUtil'
 
+const PREVIEW_REVOKE_DELAY_MS = 400
+
 const createOutputs = (
   filenames: string[],
   type: ResultItemType,
@@ -40,9 +43,26 @@ interface SetOutputOptions {
 export const useNodeOutputStore = defineStore('nodeOutput', () => {
   const { nodeIdToNodeLocatorId } = useWorkflowStore()
   const { executionIdToNodeLocatorId } = useExecutionStore()
+  const scheduledRevoke: Record<NodeLocatorId, { stop: () => void }> = {}
+
+  function scheduleRevoke(locator: NodeLocatorId, cb: () => void) {
+    scheduledRevoke[locator]?.stop()
+
+    const { stop } = useTimeoutFn(() => {
+      delete scheduledRevoke[locator]
+      cb()
+    }, PREVIEW_REVOKE_DELAY_MS)
+
+    scheduledRevoke[locator] = { stop }
+  }
 
   const nodeOutputs = ref<Record<string, ExecutedWsMessage['output']>>({})
 
+  // Reactive state for node preview images - mirrors app.nodePreviewImages
+  const nodePreviewImages = ref<Record<string, string[]>>(
+    app.nodePreviewImages || {}
+  )
+
   function getNodeOutputs(
     node: LGraphNode
   ): ExecutedWsMessage['output'] | undefined {
@@ -196,8 +216,12 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   ) {
     const nodeLocatorId = executionIdToNodeLocatorId(executionId)
     if (!nodeLocatorId) return
-
+    if (scheduledRevoke[nodeLocatorId]) {
+      scheduledRevoke[nodeLocatorId].stop()
+      delete scheduledRevoke[nodeLocatorId]
+    }
     app.nodePreviewImages[nodeLocatorId] = previewImages
+    nodePreviewImages.value[nodeLocatorId] = previewImages
   }
 
   /**
@@ -212,7 +236,12 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     previewImages: string[]
   ) {
     const nodeLocatorId = nodeIdToNodeLocatorId(nodeId)
+    if (scheduledRevoke[nodeLocatorId]) {
+      scheduledRevoke[nodeLocatorId].stop()
+      delete scheduledRevoke[nodeLocatorId]
+    }
     app.nodePreviewImages[nodeLocatorId] = previewImages
+    nodePreviewImages.value[nodeLocatorId] = previewImages
   }
 
   /**
@@ -224,8 +253,9 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   function revokePreviewsByExecutionId(executionId: string) {
     const nodeLocatorId = executionIdToNodeLocatorId(executionId)
     if (!nodeLocatorId) return
-
-    revokePreviewsByLocatorId(nodeLocatorId)
+    scheduleRevoke(nodeLocatorId, () =>
+      revokePreviewsByLocatorId(nodeLocatorId)
+    )
   }
 
   /**
@@ -243,6 +273,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     }
 
     delete app.nodePreviewImages[nodeLocatorId]
+    delete nodePreviewImages.value[nodeLocatorId]
   }
 
   /**
@@ -259,6 +290,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
       }
     }
     app.nodePreviewImages = {}
+    nodePreviewImages.value = {}
   }
 
   /**
@@ -293,6 +325,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     // Clear preview images
     if (app.nodePreviewImages[nodeLocatorId]) {
       delete app.nodePreviewImages[nodeLocatorId]
+      delete nodePreviewImages.value[nodeLocatorId]
     }
 
     return hadOutputs
@@ -318,6 +351,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     removeNodeOutputs,
 
     // State
-    nodeOutputs
+    nodeOutputs,
+    nodePreviewImages
   }
 })

tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts

@@ -56,6 +56,13 @@ vi.mock(
   })
 )
 
+vi.mock('@/renderer/extensions/vueNodes/preview/useNodePreviewState', () => ({
+  useNodePreviewState: vi.fn(() => ({
+    latestPreviewUrl: computed(() => ''),
+    shouldShowPreviewImg: computed(() => false)
+  }))
+}))
+
 const i18n = createI18n({
   legacy: false,
   locale: 'en',