Missing node dialog revamp (#322)

* Basic rework of load workflow warning dialog

* Better style

* Add vue jest support

* Mock vue component in jest test

* nit

* Make dialog maximizable
This commit is contained in:
Chenlei Hu
2024-08-06 20:11:05 -04:00
committed by GitHub
parent 6fe2297cc1
commit 79469bd2b1
10 changed files with 599 additions and 55 deletions

View File

@@ -43,6 +43,7 @@ import {
} from '@/stores/nodeDefStore'
import { Vector2 } from '@comfyorg/litegraph'
import _ from 'lodash'
import { showLoadWorkflowWarning } from '@/services/dialogService'
export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
@@ -2123,62 +2124,13 @@ export class ComfyApp {
}
showMissingNodesError(missingNodeTypes, hasAddedNodes = true) {
let seenTypes = new Set()
if (this.vueAppReady)
showLoadWorkflowWarning({
missingNodeTypes,
hasAddedNodes,
maximizable: true
})
this.ui.dialog.show(
$el('div.comfy-missing-nodes', [
$el('span', {
textContent:
'When loading the graph, the following node types were not found: '
}),
$el(
'ul',
Array.from(new Set(missingNodeTypes))
.map((t) => {
let children = []
if (typeof t === 'object') {
// @ts-expect-error
if (seenTypes.has(t.type)) return null
// @ts-expect-error
seenTypes.add(t.type)
// @ts-expect-error
children.push($el('span', { textContent: t.type }))
// @ts-expect-error
if (t.hint) {
// @ts-expect-error
children.push($el('span', { textContent: t.hint }))
}
// @ts-expect-error
if (t.action) {
children.push(
$el('button', {
// @ts-expect-error
onclick: t.action.callback,
// @ts-expect-error
textContent: t.action.text
})
)
}
} else {
if (seenTypes.has(t)) return null
seenTypes.add(t)
// @ts-expect-error
children.push($el('span', { textContent: t }))
}
return $el('li', children)
})
.filter(Boolean)
),
...(hasAddedNodes
? [
$el('span', {
textContent:
'Nodes that have failed to load will show as red on the graph.'
})
]
: [])
])
)
this.logging.addEntry('Comfy.App', 'warn', {
MissingNodes: missingNodeTypes
})