Update histroy for new outputs, spinner for active

A spinner is now displayed when  a job is actively executing
- Spinner has slightly incorrect sizing
- Only one spinner is displayed regardless of output count

History tracking change makes me very unhappy. I want to clean this up
to correctly leverage vue reactivity in the future, but required
functionality comes first
This commit is contained in:
Austin Mroz
2025-12-29 11:16:58 -08:00
parent 5e740c6efe
commit 79bd8a4dd2
2 changed files with 11 additions and 9 deletions

View File

@@ -211,7 +211,7 @@ const onStatus = async (e: CustomEvent<StatusWsMessageStatus>) => {
await queueStore.update()
// Only update assets if the assets sidebar is currently open
// When sidebar is closed, AssetsSidebarTab.vue will refresh on mount
if (sidebarTabStore.activeSidebarTabId === 'assets') {
if (sidebarTabStore.activeSidebarTabId === 'assets' || linearMode.value) {
await assetsStore.updateHistory()
}
}

View File

@@ -34,16 +34,19 @@ import { app } from '@/scripts/app'
import { useCommandStore } from '@/stores/commandStore'
import { useExecutionStore } from '@/stores/executionStore'
import { useNodeOutputStore } from '@/stores/imagePreviewStore'
import { useQueueSettingsStore } from '@/stores/queueStore'
import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
import { cn } from '@/utils/tailwindUtil'
const commandStore = useCommandStore()
const executionStore = useExecutionStore()
const outputs = useMediaAssets('output')
const nodeOutputStore = useNodeOutputStore()
const queueStore = useQueueStore()
const { isActiveSubscription } = useSubscription()
const workflowStore = useWorkflowStore()
const isRunning = computed(() => queueStore.runningTasks.length > 0)
const graphNodes = shallowRef<LGraphNode[]>(app.rootGraph.nodes)
useEventListener(
app.rootGraph.events,
@@ -327,15 +330,13 @@ function handleCenterWheel(e: WheelEvent) {
ref="outputsRef"
class="h-full min-w-24 grow-1 p-3 overflow-y-auto border-r-1 border-node-component-border flex flex-col items-center"
>
<linear-job v-if="isRunning" class="py-3 w-full aspect-square px-1">
<ProgressSpinner class="size-full" />
</linear-job>
<linear-job
v-for="(item, index) in outputs.media.value"
:key="index"
:class="
cn(
'py-3 border-border-subtle flex flex-col w-full px-1',
index !== 0 && 'border-t-2'
)
"
class="py-3 border-border-subtle flex flex-col w-full px-1 first:border-t-0 border-t-2"
>
<img
v-for="(output, key) in allOutputs(item)"
@@ -393,7 +394,8 @@ function handleCenterWheel(e: WheelEvent) {
v-if="
activeLoad[0] === -1 &&
activeLoad[1] === -1 &&
nodeOutputStore.latestPreview[0]
nodeOutputStore.latestPreview[0] &&
isRunning
"
:src="nodeOutputStore.latestPreview[0]"
v-bind="slotProps"