Alexander Brown
5fe4b0cea7
ComfyUI_frontend is moving to one LGraph instance per workflow tab (Comfy-Org/ComfyUI_frontend#21571), and app.clean() clears the new graph before any extension hook fires. The instance patch on app.graph.clear only reaches the graph that existed at startup, so components would not be reloaded for later workflows. Patch clear on the graph prototype and reload components when the cleared graph is the current root graph. This also stops a subgraph clear from clearing the root graph, which the old wrapper did by always calling orig_clear on app.graph. Amp-Thread-ID: https://ampcode.com/threads/T-d545a10a-f002-4dc5-9a74-f6402a836919
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.
- node-usage-analyzer.js: Implements the UI for analyzing node usage in workflows.
Sharing Components
- comfyui-share-common.js: Base functionality for workflow sharing features.
- comfyui-share-copus.js: Integration with the ComfyUI Copus sharing platform.
- comfyui-share-openart.js: Integration with the OpenArt sharing platform.
- 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
- node-usage-analyzer.css: Styling for the node usage analyzer UI
This frontend implementation provides a comprehensive yet user-friendly interface for managing the ComfyUI ecosystem.