mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
521019d173
## Summary Muted and bypassed nodes are excluded from execution but were still triggering missing model/media/node warnings. This PR makes the error system mode-aware: muted/bypassed nodes no longer produce missing asset errors, and all error lifecycle events (mode toggle, deletion, paste, undo, tab switch) are handled consistently. - Fixes Comfy-Org/ComfyUI#13256 ## Behavioral notes - **Tab switch overlay suppression (intentional)**: Switching back to a workflow with missing assets no longer re-shows the error overlay. This reverses the behavior introduced in #10190. The error state is still restored silently in the errors tab — users can access it via the properties panel without being interrupted by the overlay on every tab switch. ## Changes ### 1. Scan filtering - `scanAllModelCandidates`, `scanAllMediaCandidates`, `scanMissingNodes`: skip nodes with `mode === NEVER || BYPASS` - `collectMissingNodes` (serialized data): skip error reporting for muted/bypassed nodes while still calling `sanitizeNodeName` for safe `configure()` - `collectEmbeddedModelsWithSource`: skip muted/bypassed nodes; workflow-level `graphData.models` only create candidates when active nodes exist - `enrichWithEmbeddedMetadata`: filter unmatched workflow-level models when all referencing nodes are inactive ### 2. Realtime mode change handling - `useErrorClearingHooks.ts` chains `graph.onTrigger` to detect `node:property:changed` (mode) - Deactivation (active → muted/bypassed): remove missing model/media/node errors for the node - Activation (muted/bypassed → active): scan the node and add confirmed errors, show overlay - Subgraph container deactivation: remove all interior node errors (execution ID prefix match) - Subgraph container activation: scan all active interior nodes recursively - Subgraph interior mode change: resolve node via `localGraph.getNodeById()` then compute execution ID from root graph ### 3. Node deletion - `graph.onNodeRemoved`: remove missing model/media/node errors for the deleted node - Handle `node.graph === null` at callback time by using `String(node.id)` for root-level nodes ### 4. Node paste/duplicate - `graph.onNodeAdded`: scan via `queueMicrotask` (deferred until after `node.configure()` restores widget values) - Guard: skip during `ChangeTracker.isLoadingGraph` (undo/redo/tab switch handled by pipeline) - Guard: skip muted/bypassed nodes ### 5. Workflow tab switch optimization - `skipAssetScans` option in `loadGraphData`: skip full pipeline on tab switch - Cache missing model/media/node state per workflow via `PendingWarnings` - `beforeLoadNewGraph`: save current store state to outgoing workflow's `pendingWarnings` - `showPendingWarnings`: restore cached errors silently (no overlay), always sync missing nodes store (even when null) - Preserve UI state (`fileSizes`, `urlInputs`) on tab switch by using `setMissingModels([])` instead of `clearMissingModels()` - `MissingModelRow.vue`: fetch file size on mount via `fetchModelMetadata` memory cache ### 6. Undo/redo overlay suppression - `silentAssetErrors` option propagated through pipeline → `surfaceMissingModels`/`surfaceMissingMedia` `{ silent }` option - `showPendingWarnings` `{ silent }` option for missing nodes overlay - `changeTracker.ts`: pass `silentAssetErrors: true` on undo/redo ### 7. Error tab node filtering - Selected node filters missing model/media card contents (not just group visibility) - `isAssetErrorInSelection`: resolve execution ID → graph node for selection matching - Missing nodes intentionally unfiltered (pack-level scope) - `hasMissingMediaSelected` added to `RightSidePanel.vue` error tab visibility - Download All button: show only when 2+ downloadable models exist ### 8. New store functions - `missingModelStore`: `addMissingModels`, `removeMissingModelsByNodeId` - `missingMediaStore`: `addMissingMedia`, `removeMissingMediaByNodeId` - `missingNodesErrorStore`: `removeMissingNodesByNodeId` - `missingModelScan`: `scanNodeModelCandidates` (extracted single-node scan) - `missingMediaScan`: `scanNodeMediaCandidates` (extracted single-node scan) ### 9. Test infrastructure improvements - `data-testid` on `RightSidePanel.vue` tabs (`panel-tab-{value}`) - Error-related TestIds moved from `dialogs` to `errorsTab` namespace in `selectors.ts` - Removed unused `TestIdValue` type - Extracted `cleanupFakeModel` to shared `ErrorsTabHelper.ts` - Renamed `openErrorsTabViaSeeErrors` → `loadWorkflowAndOpenErrorsTab` - Added `aria-label` to pencil edit button and subgraph toggle button ## Test plan ### Unit tests (41 new) - Store functions: `addMissing*`, `removeMissing*ByNodeId` - `executionErrorStore`: `surfaceMissing*` silent option - Scan functions: muted/bypassed filtering, `scanNodeModelCandidates`, `scanNodeMediaCandidates` - `workflowService`: `showPendingWarnings` silent, `beforeLoadNewGraph` caching ### E2E tests (17 new in `errorsTabModeAware.spec.ts`) **Missing nodes** - [x] Deleting a missing node removes its error from the errors tab - [x] Undo after bypass restores error without showing overlay **Missing models** - [x] Loading a workflow with all nodes bypassed shows no errors - [x] Bypassing a node hides its error, un-bypassing restores it - [x] Deleting a node with missing model removes its error - [x] Undo after bypass restores error without showing overlay - [x] Pasting a node with missing model increases referencing node count - [x] Pasting a bypassed node does not add a new error - [x] Selecting a node filters errors tab to only that node **Missing media** - [x] Loading a workflow with all nodes bypassed shows no errors - [x] Bypassing a node hides its error, un-bypassing restores it - [x] Pasting a bypassed node does not add a new error - [x] Selecting a node filters errors tab to only that node **Subgraph** - [x] Bypassing a subgraph hides interior errors, un-bypassing restores them - [x] Bypassing a node inside a subgraph hides its error, un-bypassing restores it **Workflow switching** - [x] Does not resurface error overlay when switching back to workflow with missing nodes - [x] Restores missing nodes in errors tab when switching back to workflow # Screenshots https://github.com/user-attachments/assets/e0a5bcb8-69ba-4120-ab7f-5c83e4cfc3c5 ## Follow-up work - Extract error-detection computed properties from `RightSidePanel.vue` into a composable (e.g. `useErrorsTabVisibility`) --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: GitHub Action <action@github.com>
220 lines
7.8 KiB
TypeScript
220 lines
7.8 KiB
TypeScript
/**
|
|
* Centralized test selectors for browser tests.
|
|
* Use data-testid attributes for stable selectors.
|
|
*/
|
|
|
|
export const TestIds = {
|
|
sidebar: {
|
|
toolbar: 'side-toolbar',
|
|
nodeLibrary: 'node-library-tree',
|
|
nodeLibrarySearch: 'node-library-search',
|
|
workflows: 'workflows-sidebar',
|
|
modeToggle: 'mode-toggle'
|
|
},
|
|
tree: {
|
|
folder: 'tree-folder',
|
|
leaf: 'tree-leaf',
|
|
node: 'tree-node'
|
|
},
|
|
canvas: {
|
|
main: 'graph-canvas',
|
|
contextMenu: 'canvas-context-menu',
|
|
toggleMinimapButton: 'toggle-minimap-button',
|
|
closeMinimapButton: 'close-minimap-button',
|
|
minimapContainer: 'minimap-container',
|
|
minimapCanvas: 'minimap-canvas',
|
|
minimapViewport: 'minimap-viewport',
|
|
minimapInteractionOverlay: 'minimap-interaction-overlay',
|
|
toggleLinkVisibilityButton: 'toggle-link-visibility-button',
|
|
zoomControlsButton: 'zoom-controls-button',
|
|
zoomInAction: 'zoom-in-action',
|
|
zoomOutAction: 'zoom-out-action',
|
|
zoomToFitAction: 'zoom-to-fit-action',
|
|
zoomPercentageInput: 'zoom-percentage-input'
|
|
},
|
|
dialogs: {
|
|
settings: 'settings-dialog',
|
|
settingsContainer: 'settings-container',
|
|
settingsTabAbout: 'settings-tab-about',
|
|
confirm: 'confirm-dialog',
|
|
errorOverlay: 'error-overlay',
|
|
errorOverlaySeeErrors: 'error-overlay-see-errors',
|
|
errorOverlayDismiss: 'error-overlay-dismiss',
|
|
errorOverlayMessages: 'error-overlay-messages',
|
|
runtimeErrorPanel: 'runtime-error-panel',
|
|
missingNodeCard: 'missing-node-card',
|
|
errorCardFindOnGithub: 'error-card-find-on-github',
|
|
errorCardCopy: 'error-card-copy',
|
|
errorDialog: 'error-dialog',
|
|
errorDialogShowReport: 'error-dialog-show-report',
|
|
errorDialogContactSupport: 'error-dialog-contact-support',
|
|
errorDialogCopyReport: 'error-dialog-copy-report',
|
|
errorDialogFindIssues: 'error-dialog-find-issues',
|
|
about: 'about-panel',
|
|
whatsNewSection: 'whats-new-section',
|
|
missingNodePacksGroup: 'error-group-missing-node',
|
|
missingModelsGroup: 'error-group-missing-model',
|
|
missingModelExpand: 'missing-model-expand',
|
|
missingModelLocate: 'missing-model-locate',
|
|
missingModelCopyName: 'missing-model-copy-name',
|
|
missingModelCopyUrl: 'missing-model-copy-url',
|
|
missingModelDownload: 'missing-model-download',
|
|
missingModelImportUnsupported: 'missing-model-import-unsupported',
|
|
missingMediaGroup: 'error-group-missing-media',
|
|
missingMediaRow: 'missing-media-row',
|
|
missingMediaUploadDropzone: 'missing-media-upload-dropzone',
|
|
missingMediaLibrarySelect: 'missing-media-library-select',
|
|
missingMediaStatusCard: 'missing-media-status-card',
|
|
missingMediaConfirmButton: 'missing-media-confirm-button',
|
|
missingMediaCancelButton: 'missing-media-cancel-button',
|
|
missingMediaLocateButton: 'missing-media-locate-button',
|
|
publishTabPanel: 'publish-tab-panel'
|
|
},
|
|
keybindings: {
|
|
presetMenu: 'keybinding-preset-menu'
|
|
},
|
|
topbar: {
|
|
queueButton: 'queue-button',
|
|
queueModeMenuTrigger: 'queue-mode-menu-trigger',
|
|
saveButton: 'save-workflow-button',
|
|
subscribeButton: 'topbar-subscribe-button'
|
|
},
|
|
nodeLibrary: {
|
|
bookmarksSection: 'node-library-bookmarks-section'
|
|
},
|
|
propertiesPanel: {
|
|
root: 'properties-panel',
|
|
errorsTab: 'panel-tab-errors'
|
|
},
|
|
subgraphEditor: {
|
|
toggle: 'subgraph-editor-toggle',
|
|
shownSection: 'subgraph-editor-shown-section',
|
|
hiddenSection: 'subgraph-editor-hidden-section',
|
|
widgetToggle: 'subgraph-widget-toggle',
|
|
widgetLabel: 'subgraph-widget-label',
|
|
iconLink: 'icon-link',
|
|
iconEye: 'icon-eye',
|
|
widgetActionsMenuButton: 'widget-actions-menu-button'
|
|
},
|
|
node: {
|
|
titleInput: 'node-title-input',
|
|
pinIndicator: 'node-pin-indicator',
|
|
innerWrapper: 'node-inner-wrapper',
|
|
mainImage: 'main-image'
|
|
},
|
|
selectionToolbox: {
|
|
colorPickerButton: 'color-picker-button',
|
|
colorPickerCurrentColor: 'color-picker-current-color',
|
|
colorBlue: 'blue',
|
|
colorRed: 'red'
|
|
},
|
|
menu: {
|
|
moreMenuContent: 'more-menu-content'
|
|
},
|
|
widgets: {
|
|
container: 'node-widgets',
|
|
widget: 'node-widget',
|
|
decrement: 'decrement',
|
|
increment: 'increment',
|
|
domWidgetTextarea: 'dom-widget-textarea',
|
|
subgraphEnterButton: 'subgraph-enter-button'
|
|
},
|
|
builder: {
|
|
footerNav: 'builder-footer-nav',
|
|
saveButton: 'builder-save-button',
|
|
saveAsButton: 'builder-save-as-button',
|
|
saveGroup: 'builder-save-group',
|
|
saveAsChevron: 'builder-save-as-chevron',
|
|
ioItem: 'builder-io-item',
|
|
ioItemTitle: 'builder-io-item-title',
|
|
ioItemSubtitle: 'builder-io-item-subtitle',
|
|
widgetActionsMenu: 'widget-actions-menu',
|
|
opensAs: 'builder-opens-as',
|
|
widgetItem: 'builder-widget-item',
|
|
widgetLabel: 'builder-widget-label',
|
|
outputPlaceholder: 'builder-output-placeholder',
|
|
connectOutputPopover: 'builder-connect-output-popover'
|
|
},
|
|
outputHistory: {
|
|
outputs: 'linear-outputs',
|
|
welcome: 'linear-welcome',
|
|
outputInfo: 'linear-output-info',
|
|
activeQueue: 'linear-job',
|
|
queueBadge: 'linear-job-badge',
|
|
inProgressItem: 'linear-in-progress-item',
|
|
historyItem: 'linear-history-item',
|
|
skeleton: 'linear-skeleton',
|
|
latentPreview: 'linear-latent-preview',
|
|
imageOutput: 'linear-image-output',
|
|
videoOutput: 'linear-video-output',
|
|
cancelRun: 'linear-cancel-run',
|
|
headerProgressBar: 'linear-header-progress-bar',
|
|
itemProgressBar: 'linear-item-progress-bar',
|
|
progressOverall: 'linear-progress-overall',
|
|
progressNode: 'linear-progress-node'
|
|
},
|
|
appMode: {
|
|
widgetItem: 'app-mode-widget-item',
|
|
welcome: 'linear-welcome',
|
|
emptyWorkflow: 'linear-welcome-empty-workflow',
|
|
buildApp: 'linear-welcome-build-app',
|
|
backToWorkflow: 'linear-welcome-back-to-workflow',
|
|
loadTemplate: 'linear-welcome-load-template'
|
|
},
|
|
breadcrumb: {
|
|
subgraph: 'subgraph-breadcrumb'
|
|
},
|
|
templates: {
|
|
content: 'template-workflows-content',
|
|
workflowCard: (id: string) => `template-workflow-${id}`
|
|
},
|
|
user: {
|
|
currentUserIndicator: 'current-user-indicator'
|
|
},
|
|
queue: {
|
|
overlayToggle: 'queue-overlay-toggle',
|
|
clearHistoryAction: 'clear-history-action'
|
|
},
|
|
errors: {
|
|
imageLoadError: 'error-loading-image',
|
|
videoLoadError: 'error-loading-video'
|
|
},
|
|
loading: {
|
|
overlay: 'loading-overlay'
|
|
},
|
|
load3dViewer: {
|
|
sidebar: 'load3d-viewer-sidebar'
|
|
}
|
|
} as const
|
|
|
|
/**
|
|
* Helper type for accessing nested TestIds (excludes function values)
|
|
*/
|
|
export type TestIdValue =
|
|
| (typeof TestIds.sidebar)[keyof typeof TestIds.sidebar]
|
|
| (typeof TestIds.tree)[keyof typeof TestIds.tree]
|
|
| (typeof TestIds.canvas)[keyof typeof TestIds.canvas]
|
|
| (typeof TestIds.dialogs)[keyof typeof TestIds.dialogs]
|
|
| (typeof TestIds.keybindings)[keyof typeof TestIds.keybindings]
|
|
| (typeof TestIds.topbar)[keyof typeof TestIds.topbar]
|
|
| (typeof TestIds.nodeLibrary)[keyof typeof TestIds.nodeLibrary]
|
|
| (typeof TestIds.propertiesPanel)[keyof typeof TestIds.propertiesPanel]
|
|
| (typeof TestIds.node)[keyof typeof TestIds.node]
|
|
| (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
|
|
| (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
|
|
| (typeof TestIds.builder)[keyof typeof TestIds.builder]
|
|
| (typeof TestIds.outputHistory)[keyof typeof TestIds.outputHistory]
|
|
| (typeof TestIds.appMode)[keyof typeof TestIds.appMode]
|
|
| (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
|
|
| Exclude<
|
|
(typeof TestIds.templates)[keyof typeof TestIds.templates],
|
|
(id: string) => string
|
|
>
|
|
| (typeof TestIds.user)[keyof typeof TestIds.user]
|
|
| (typeof TestIds.menu)[keyof typeof TestIds.menu]
|
|
| (typeof TestIds.subgraphEditor)[keyof typeof TestIds.subgraphEditor]
|
|
| (typeof TestIds.queue)[keyof typeof TestIds.queue]
|
|
| (typeof TestIds.errors)[keyof typeof TestIds.errors]
|
|
| (typeof TestIds.loading)[keyof typeof TestIds.loading]
|
|
| (typeof TestIds.load3dViewer)[keyof typeof TestIds.load3dViewer]
|