mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-04 05:02:17 +00:00
feat(minimap): add node execution status visualization (#9187)
## Summary Added visual indicators (colored borders) to the MiniMap to display the real-time execution status (running, executed, or error) of nodes. ## Changes - **What**: Added visual feedback to the MiniMap to show node execution states (green for running/executed, red for errors) by integrating with `useExecutionStore` and updating the canvas renderer. ## Review Focus Confirmed that relying on the array `.includes()` check for `executingNodeIds` in the data sources avoids unnecessary `Set` allocations during frequent redraws. ## Screenshots <img width="540" height="446" alt="14949d48035db5c64cceb11f7f7f94a3" src="https://github.com/user-attachments/assets/cac53a80-9882-43fd-a725-7003fe3fd21a" /> <img width="562" height="464" alt="7e922f54dea2cea4e6b66202d2ad0dd3" src="https://github.com/user-attachments/assets/e178b981-3af0-417f-8e21-a706f192fabf" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9187-feat-minimap-add-node-execution-status-visualization-3126d73d3650816eb7b3ca415cf6a8f1) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -1,8 +1,11 @@
|
||||
import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
|
||||
import { useExecutionStore } from '@/stores/executionStore'
|
||||
|
||||
import type { MinimapNodeData } from '../types'
|
||||
import { AbstractMinimapDataSource } from './AbstractMinimapDataSource'
|
||||
|
||||
let executionStore: ReturnType<typeof useExecutionStore> | null = null
|
||||
|
||||
/**
|
||||
* Layout Store data source implementation
|
||||
*/
|
||||
@@ -11,12 +14,19 @@ export class LayoutStoreDataSource extends AbstractMinimapDataSource {
|
||||
const allNodes = layoutStore.getAllNodes().value
|
||||
if (allNodes.size === 0) return []
|
||||
|
||||
if (!executionStore) {
|
||||
executionStore = useExecutionStore()
|
||||
}
|
||||
const nodeProgressStates = executionStore.nodeLocationProgressStates
|
||||
|
||||
const nodes: MinimapNodeData[] = []
|
||||
|
||||
for (const [nodeId, layout] of allNodes) {
|
||||
// Find corresponding LiteGraph node for additional properties
|
||||
const graphNode = this.graph?._nodes?.find((n) => String(n.id) === nodeId)
|
||||
|
||||
const executionState = nodeProgressStates[nodeId]?.state ?? null
|
||||
|
||||
nodes.push({
|
||||
id: nodeId,
|
||||
x: layout.position.x,
|
||||
@@ -25,7 +35,8 @@ export class LayoutStoreDataSource extends AbstractMinimapDataSource {
|
||||
height: layout.size.height,
|
||||
bgcolor: graphNode?.bgcolor,
|
||||
mode: graphNode?.mode,
|
||||
hasErrors: graphNode?.has_errors
|
||||
hasErrors: graphNode?.has_errors,
|
||||
executionState
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user