Dr.Lt.Data
175e085fcf
"Fix node (recreate)" rewired the inputs of the new node with src_node.connect(link.origin_slot, dest.id, input.name). LGraphNode.connect() looks its target up by id only when the id is a number, so on a frontend whose node ids are strings the id was taken for the node itself: the entry threw "findInputSlot is not a function" and, because the original is removed only afterwards, left the wired original and an unwired replacement on the canvas. - Pass the node to connect(), as the output loop below already does - Add a Playwright spec that clicks the entry in the node context menu and checks the page errors and what every KSampler is wired to, with node ids as the frontend issues them and with ids rewritten to strings - Add a CHANGELOG entry Port of #3443 to v4 (#3126).
ComfyUI-Manager: Frontend (js)
This directory contains the JavaScript frontend implementation for ComfyUI-Manager, providing the user interface components that interact with the backend API.
Core Components
- comfyui-manager.js: Main entry point that initializes the manager UI and integrates with ComfyUI.
- custom-nodes-manager.js: Implements the UI for browsing, installing, and managing custom nodes.
- model-manager.js: Handles the model management interface for downloading and organizing AI models.
- components-manager.js: Manages reusable workflow components system.
- snapshot.js: Implements the snapshot system for backing up and restoring installations.
Sharing Components
- comfyui-share-common.js: Base functionality for workflow sharing features.
- comfyui-share-youml.js: Integration with the YouML sharing platform.
Utility Components
- cm-api.js: Client-side API wrapper for communication with the backend.
- common.js: Shared utilities and helper functions used across the frontend.
- node_fixer.js: Utilities for fixing disconnected links and repairing malformed nodes by recreating them while preserving connections.
- popover-helper.js: UI component for popup tooltips and contextual information.
- turbogrid.esm.js: Grid component library - https://github.com/cenfun/turbogrid
- workflow-metadata.js: Handles workflow metadata parsing, validation and cross-repository compatibility including versioning, dependencies tracking, and resource management.
Architecture
The frontend follows a modular component-based architecture:
- Integration Layer: Connects with ComfyUI's existing UI system
- Manager Components: Individual functional UI components (node manager, model manager, etc.)
- Sharing Components: Platform-specific sharing implementations
- Utility Layer: Reusable UI components and helpers
Implementation Details
- The frontend integrates directly with ComfyUI's UI system through
app.js - Dialog-based UI for most manager functions to avoid cluttering the main interface
- Asynchronous API calls to handle backend operations without blocking the UI
Styling
CSS files are included for specific components:
- custom-nodes-manager.css: Styling for the node management UI
- model-manager.css: Styling for the model management UI
This frontend implementation provides a comprehensive yet user-friendly interface for managing the ComfyUI ecosystem.