Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-09 17:40:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhancements to the queue image feed (#646)

Browse Source 
* Enhancements to the queue image feed
 - Change flat list icon
 - Add cover/contain mode
 - Add right click -> go to node
 - Add go to node link on detail

* Add loading spinner

* resolve comments

---------

Co-authored-by: huchenlei <chenlei.hu@mail.utoronto.ca>
This commit is contained in:
pythongosssss
2024-08-27 02:57:23 +01:00
committed by GitHub
parent 84662ada9e
commit 9cdefca481
10 changed files with 207 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/stores/queueStore.ts
View File

@@ -9,7 +9,7 @@ import type {
TaskOutput,
ResultItem
} from '@/types/apiTypes'
import type { NodeId } from '@/types/comfyWorkflow'
import type { ComfyNode, NodeId } from '@/types/comfyWorkflow'
import { plainToClass } from 'class-transformer'
import _ from 'lodash'
import { defineStore } from 'pinia'
@@ -253,6 +253,7 @@ interface State {
pendingTasks: TaskItemImpl[]
historyTasks: TaskItemImpl[]
maxHistoryItems: number
isLoading: boolean
}
export const useQueueStore = defineStore('queue', {
@@ -260,7 +261,8 @@ export const useQueueStore = defineStore('queue', {
runningTasks: [],
pendingTasks: [],
historyTasks: [],
maxHistoryItems: 64
maxHistoryItems: 64,
isLoading: false
}),
getters: {
tasks(state) {
@@ -280,43 +282,48 @@ export const useQueueStore = defineStore('queue', {
actions: {
// Fetch the queue data from the API
async update() {
const [queue, history] = await Promise.all([
api.getQueue(),
api.getHistory(this.maxHistoryItems)
])
this.isLoading = true
try {
const [queue, history] = await Promise.all([
api.getQueue(),
api.getHistory(this.maxHistoryItems)
])
const toClassAll = (tasks: TaskItem[]): TaskItemImpl[] =>
tasks
.map(
(task: TaskItem) =>
new TaskItemImpl(
task.taskType,
task.prompt,
task['status'],
task['outputs'] || {}
)
)
// Desc order to show the latest tasks first
.sort((a, b) => b.queueIndex - a.queueIndex)
const toClassAll = (tasks: TaskItem[]): TaskItemImpl[] =>
tasks
.map(
(task: TaskItem) =>
new TaskItemImpl(
task.taskType,
task.prompt,
task['status'],
task['outputs'] || {}
)
)
// Desc order to show the latest tasks first
.sort((a, b) => b.queueIndex - a.queueIndex)
this.runningTasks = toClassAll(queue.Running)
this.pendingTasks = toClassAll(queue.Pending)
this.runningTasks = toClassAll(queue.Running)
this.pendingTasks = toClassAll(queue.Pending)
// Process history items
const allIndex = new Set(
history.History.map((item: TaskItem) => item.prompt[0])
)
const newHistoryItems = toClassAll(
history.History.filter(
(item) => item.prompt[0] > this.lastHistoryQueueIndex
// Process history items
const allIndex = new Set(
history.History.map((item: TaskItem) => item.prompt[0])
)
)
const existingHistoryItems = this.historyTasks.filter(
(item: TaskItemImpl) => allIndex.has(item.queueIndex)
)
this.historyTasks = [...newHistoryItems, ...existingHistoryItems]
.slice(0, this.maxHistoryItems)
.sort((a, b) => b.queueIndex - a.queueIndex)
const newHistoryItems = toClassAll(
history.History.filter(
(item) => item.prompt[0] > this.lastHistoryQueueIndex
)
)
const existingHistoryItems = this.historyTasks.filter(
(item: TaskItemImpl) => allIndex.has(item.queueIndex)
)
this.historyTasks = [...newHistoryItems, ...existingHistoryItems]
.slice(0, this.maxHistoryItems)
.sort((a, b) => b.queueIndex - a.queueIndex)
} finally {
this.isLoading = false
}
},
async clear() {
await Promise.all(