mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +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)
83 lines
1.8 KiB
TypeScript
83 lines
1.8 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
|
|
import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
|
|
|
|
import { buildVirtualJobRows } from './buildVirtualJobRows'
|
|
|
|
function buildJob(id: string): JobListItem {
|
|
return {
|
|
id,
|
|
title: `Job ${id}`,
|
|
meta: 'meta',
|
|
state: 'completed'
|
|
}
|
|
}
|
|
|
|
describe('buildVirtualJobRows', () => {
|
|
it('flattens grouped jobs into headers and rows in display order', () => {
|
|
const displayedJobGroups: JobGroup[] = [
|
|
{
|
|
key: 'today',
|
|
label: 'Today',
|
|
items: [buildJob('job-1'), buildJob('job-2')]
|
|
},
|
|
{
|
|
key: 'yesterday',
|
|
label: 'Yesterday',
|
|
items: [buildJob('job-3')]
|
|
}
|
|
]
|
|
|
|
expect(buildVirtualJobRows(displayedJobGroups)).toEqual([
|
|
{
|
|
key: 'header-today',
|
|
type: 'header',
|
|
label: 'Today'
|
|
},
|
|
{
|
|
key: 'job-job-1',
|
|
type: 'job',
|
|
job: displayedJobGroups[0].items[0]
|
|
},
|
|
{
|
|
key: 'job-job-2',
|
|
type: 'job',
|
|
job: displayedJobGroups[0].items[1]
|
|
},
|
|
{
|
|
key: 'header-yesterday',
|
|
type: 'header',
|
|
label: 'Yesterday'
|
|
},
|
|
{
|
|
key: 'job-job-3',
|
|
type: 'job',
|
|
job: displayedJobGroups[1].items[0]
|
|
}
|
|
])
|
|
})
|
|
|
|
it('keeps a single group flattened without extra row metadata', () => {
|
|
const displayedJobGroups: JobGroup[] = [
|
|
{
|
|
key: 'today',
|
|
label: 'Today',
|
|
items: [buildJob('job-1')]
|
|
}
|
|
]
|
|
|
|
expect(buildVirtualJobRows(displayedJobGroups)).toEqual([
|
|
{
|
|
key: 'header-today',
|
|
type: 'header',
|
|
label: 'Today'
|
|
},
|
|
{
|
|
key: 'job-job-1',
|
|
type: 'job',
|
|
job: displayedJobGroups[0].items[0]
|
|
}
|
|
])
|
|
})
|
|
})
|