fix(randomizer): defer UI updates until workflow completion (fixes #824)

vue-widgets/src/components/LoraRandomizerWidget.vue

@@ -51,6 +51,7 @@ type RandomizerWidget = ComponentWidget<RandomizerConfig>
 const props = defineProps<{
   widget: RandomizerWidget
   node: { id: number; inputs?: any[]; widgets?: any[]; graph?: any }
+  api?: any
 }>()
 
 // State management
@@ -65,6 +66,13 @@ const currentLoras = ref<LoraEntry[]>([])
 // Track if component is mounted to avoid early watch triggers
 const isMounted = ref(false)
 
+interface PendingExecution {
+  loras?: LoraEntry[]
+  lastUsed?: LoraEntry[] | null
+}
+
+const pendingExecutions: PendingExecution[] = []
+
 // Computed property to check if we can reuse last
 const canReuseLast = computed(() => {
   const lastUsed = state.lastUsed.value
@@ -265,18 +273,20 @@ onMounted(async () => {
   ;(props.node as any).onExecuted = function(output: any) {
     console.log("[LoraRandomizerWidget] Node executed with output:", output)
 
-    // Update last_used from backend
+    const pendingUpdate: PendingExecution = {}
+
     if (output?.last_used !== undefined) {
-      state.lastUsed.value = output.last_used
-      console.log(`[LoraRandomizerWidget] Updated last_used: ${output.last_used ? output.last_used.length : 0} LoRAs`)
+      pendingUpdate.lastUsed = output.last_used
+      console.log(`[LoraRandomizerWidget] Queued last_used update: ${output.last_used ? output.last_used.length : 0} LoRAs`)
     }
 
-    // Update loras widget if backend provided new loras
-    const lorasWidget = props.node.widgets?.find((w: any) => w.name === 'loras')
-    if (lorasWidget && output?.loras && Array.isArray(output.loras)) {
-      console.log("[LoraRandomizerWidget] Received loras data from backend:", output.loras)
-      lorasWidget.value = output.loras
-      currentLoras.value = output.loras
+    if (output?.loras && Array.isArray(output.loras)) {
+      pendingUpdate.loras = output.loras
+      console.log("[LoraRandomizerWidget] Queued loras data from backend:", output.loras)
+    }
+
+    if (pendingUpdate.lastUsed !== undefined || pendingUpdate.loras !== undefined) {
+      pendingExecutions.push(pendingUpdate)
     }
 
     // Call original onExecuted if it exists
@@ -284,6 +294,44 @@ onMounted(async () => {
       return originalOnExecuted(output)
     }
   }
+
+  if (props.api) {
+    const handleExecutionComplete = () => {
+      if (pendingExecutions.length === 0) {
+        return
+      }
+
+      const pending = pendingExecutions.shift()!
+
+      if (pending.lastUsed !== undefined) {
+        state.lastUsed.value = pending.lastUsed
+      }
+
+      if (pending.loras !== undefined) {
+        const lorasWidget = props.node.widgets?.find((w: any) => w.name === 'loras')
+        if (lorasWidget) {
+          lorasWidget.value = pending.loras
+        }
+        currentLoras.value = pending.loras
+      }
+    }
+
+    props.api.addEventListener('execution_success', handleExecutionComplete)
+    props.api.addEventListener('execution_error', handleExecutionComplete)
+    props.api.addEventListener('execution_interrupted', handleExecutionComplete)
+
+    const apiCleanup = () => {
+      props.api.removeEventListener('execution_success', handleExecutionComplete)
+      props.api.removeEventListener('execution_error', handleExecutionComplete)
+      props.api.removeEventListener('execution_interrupted', handleExecutionComplete)
+    }
+
+    const existingCleanup = (props.widget as any).onRemoveCleanup
+    ;(props.widget as any).onRemoveCleanup = () => {
+      existingCleanup?.()
+      apiCleanup()
+    }
+  }
 })
 </script>
 

vue-widgets/src/main.ts

@@ -201,7 +201,8 @@ function createLoraRandomizerWidget(node) {
 
   const vueApp = createApp(LoraRandomizerWidget, {
     widget,
-    node
+    node,
+    api
   })
 
   vueApp.use(PrimeVue, {

vue-widgets/tests/integration/loraRandomizerDeferredUpdate.test.ts

@@ -0,0 +1,96 @@
+import { nextTick } from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import LoraRandomizerWidget from '@/components/LoraRandomizerWidget.vue'
+import type { LoraEntry, RandomizerConfig } from '@/composables/types'
+
+function createApiMock() {
+  const target = new EventTarget()
+  return {
+    addEventListener: target.addEventListener.bind(target),
+    removeEventListener: target.removeEventListener.bind(target),
+    dispatchEvent: target.dispatchEvent.bind(target)
+  }
+}
+
+function createDefaultConfig(): RandomizerConfig {
+  return {
+    count_mode: 'range',
+    count_fixed: 3,
+    count_min: 2,
+    count_max: 5,
+    model_strength_min: 0,
+    model_strength_max: 1,
+    use_same_clip_strength: true,
+    clip_strength_min: 0,
+    clip_strength_max: 1,
+    roll_mode: 'always',
+    use_recommended_strength: false,
+    recommended_strength_scale_min: 0.5,
+    recommended_strength_scale_max: 1
+  }
+}
+
+describe('LoraRandomizerWidget deferred execution updates', () => {
+  it('applies backend loras and last_used only after workflow completion', async () => {
+    const initialLoras: LoraEntry[] = [
+      {
+        name: 'initial.safetensors',
+        strength: 0.8,
+        clipStrength: 0.8,
+        active: true,
+        expanded: false,
+        locked: false
+      }
+    ]
+    const deferredLoras: LoraEntry[] = [
+      {
+        name: 'deferred.safetensors',
+        strength: 1,
+        clipStrength: 1,
+        active: true,
+        expanded: false,
+        locked: false
+      }
+    ]
+    const lorasWidget = { name: 'loras', value: initialLoras }
+    const node = {
+      id: 101,
+      widgets: [lorasWidget],
+      onExecuted: vi.fn()
+    }
+    const widget = {
+      value: createDefaultConfig()
+    }
+    const api = createApiMock()
+
+    const wrapper = shallowMount(LoraRandomizerWidget, {
+      props: {
+        widget,
+        node,
+        api
+      }
+    })
+
+    await nextTick()
+
+    const settingsView = wrapper.findComponent({ name: 'LoraRandomizerSettingsView' })
+    expect(settingsView.exists()).toBe(true)
+    expect(settingsView.props('lastUsed')).toBeNull()
+
+    ;(node as any).onExecuted({
+      loras: deferredLoras,
+      last_used: deferredLoras
+    })
+    await nextTick()
+
+    expect(lorasWidget.value).toEqual(initialLoras)
+    expect(settingsView.props('lastUsed')).toBeNull()
+
+    api.dispatchEvent(new Event('execution_success'))
+    await nextTick()
+
+    expect(lorasWidget.value).toEqual(deferredLoras)
+    expect(settingsView.props('lastUsed')).toEqual(deferredLoras)
+  })
+})