mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 21:54:50 +00:00
aeafff1ead
## Summary Virtualize the shared job queue history list so opening the jobs panel does not eagerly mount the full history on cloud. ## Changes - **What**: Virtualize the shared queue history list used by the overlay and sidebar, flatten date headers plus job rows into a single virtual stream, and preserve hover/menu behavior with updated queue list tests. - **Why `@tanstack/vue-virtual` instead of Reka virtualizers**: the installed `reka-ui@2.5.0` does not expose a generic list virtualizer. It only exposes `ListboxVirtualizer`, `ComboboxVirtualizer`, and `TreeVirtualizer`, and those components inject `ListboxRoot`/`TreeRoot` context and carry listbox or tree selection/keyboard semantics. The job history UI is a flat grouped action list, not a selectable listbox or navigable tree, so this uses the same TanStack virtualizer layer directly without forcing the wrong semantics onto the component. ## Review Focus Please verify the virtual row sizing and inter-group spacing behavior across date headers and the last row in each group. > [!TIP] > Diff reads much cleaner through vscode's unified view with show leading/trailing whitespace differences enabled Linear: COM-304 https://tanstack.com/virtual/latest/docs/api/virtualizer ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10592-fix-virtualize-cloud-job-queue-history-list-3306d73d3650819d956bf4b2d8b59a40) by [Unito](https://www.unito.io)
109 lines
3.1 KiB
Vue
109 lines
3.1 KiB
Vue
<template>
|
|
<div class="flex w-full flex-col gap-4">
|
|
<QueueOverlayHeader
|
|
:header-title="headerTitle"
|
|
:queued-count="queuedCount"
|
|
@clear-history="$emit('clearHistory')"
|
|
@clear-queued="$emit('clearQueued')"
|
|
/>
|
|
|
|
<JobFiltersBar
|
|
:selected-job-tab="selectedJobTab"
|
|
:selected-workflow-filter="selectedWorkflowFilter"
|
|
:selected-sort-mode="selectedSortMode"
|
|
:has-failed-jobs="hasFailedJobs"
|
|
@show-assets="$emit('showAssets')"
|
|
@update:selected-job-tab="$emit('update:selectedJobTab', $event)"
|
|
@update:selected-workflow-filter="
|
|
$emit('update:selectedWorkflowFilter', $event)
|
|
"
|
|
@update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
|
|
/>
|
|
|
|
<div class="min-h-0 flex-1">
|
|
<JobAssetsList
|
|
:displayed-job-groups="displayedJobGroups"
|
|
@cancel-item="onCancelItemEvent"
|
|
@delete-item="onDeleteItemEvent"
|
|
@view-item="$emit('viewItem', $event)"
|
|
@menu="onMenuItem"
|
|
/>
|
|
</div>
|
|
|
|
<JobContextMenu
|
|
ref="jobContextMenuRef"
|
|
:entries="jobMenuEntries"
|
|
@action="onJobMenuAction"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
import type {
|
|
JobGroup,
|
|
JobListItem,
|
|
JobSortMode,
|
|
JobTab
|
|
} from '@/composables/queue/useJobList'
|
|
import type { MenuEntry } from '@/composables/queue/useJobMenu'
|
|
import { useJobMenu } from '@/composables/queue/useJobMenu'
|
|
import { useErrorHandling } from '@/composables/useErrorHandling'
|
|
|
|
import QueueOverlayHeader from './QueueOverlayHeader.vue'
|
|
import JobContextMenu from './job/JobContextMenu.vue'
|
|
import JobAssetsList from './job/JobAssetsList.vue'
|
|
import JobFiltersBar from './job/JobFiltersBar.vue'
|
|
|
|
defineProps<{
|
|
headerTitle: string
|
|
queuedCount: number
|
|
selectedJobTab: JobTab
|
|
selectedWorkflowFilter: 'all' | 'current'
|
|
selectedSortMode: JobSortMode
|
|
displayedJobGroups: JobGroup[]
|
|
hasFailedJobs: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'showAssets'): void
|
|
(e: 'clearHistory'): void
|
|
(e: 'clearQueued'): void
|
|
(e: 'update:selectedJobTab', value: JobTab): void
|
|
(e: 'update:selectedWorkflowFilter', value: 'all' | 'current'): void
|
|
(e: 'update:selectedSortMode', value: JobSortMode): void
|
|
(e: 'cancelItem', item: JobListItem): void
|
|
(e: 'deleteItem', item: JobListItem): void
|
|
(e: 'viewItem', item: JobListItem): void
|
|
}>()
|
|
|
|
const currentMenuItem = ref<JobListItem | null>(null)
|
|
const jobContextMenuRef = ref<InstanceType<typeof JobContextMenu> | null>(null)
|
|
const { wrapWithErrorHandlingAsync } = useErrorHandling()
|
|
|
|
const { jobMenuEntries } = useJobMenu(
|
|
() => currentMenuItem.value,
|
|
(item) => emit('viewItem', item)
|
|
)
|
|
|
|
const onCancelItemEvent = (item: JobListItem) => {
|
|
emit('cancelItem', item)
|
|
}
|
|
|
|
const onDeleteItemEvent = (item: JobListItem) => {
|
|
emit('deleteItem', item)
|
|
}
|
|
|
|
const onMenuItem = (item: JobListItem, event: Event) => {
|
|
currentMenuItem.value = item
|
|
jobContextMenuRef.value?.open(event)
|
|
}
|
|
|
|
const onJobMenuAction = wrapWithErrorHandlingAsync(async (entry: MenuEntry) => {
|
|
if (entry.kind === 'divider') return
|
|
if (entry.onClick) await entry.onClick()
|
|
jobContextMenuRef.value?.hide()
|
|
})
|
|
</script>
|