mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-03 12:42:01 +00:00
feat: improve essentials tab blueprint support and display names (#10113)
## Changes
### Essential nodes
- Include blueprint nodes in essentials tab via `BLUEPRINT_PREFIX_MAP`
matching, removing dependency on backend `essentials_category`
- Sort essentials folders by `ESSENTIALS_CATEGORIES` order
- Disambiguate duplicate blueprint labels with provider suffix (e.g. two
"Text to image" → "Text to image (Flux 1)")
- Resolve blueprint icons by prefix instead of full node name
- Add 15 new SVG icons for blueprint categories, remove 2 old
subgraph-blueprint-specific SVGs
- Remove unnecessary parenthetical suffixes from unique display names
("Load style (LoRA)" → "Load style", "Text generation (LLM)" → "Text
generation")
essential nodes with blueprints icon
<img width="507" height="550" alt="image"
src="https://github.com/user-attachments/assets/967cd4b6-ea4d-44a2-9d6d-e66c152370c7"
/>
### All nodes panel
- section bottom change from `pb-6` to `pb-2`
<img width="525" height="215" alt="image"
src="https://github.com/user-attachments/assets/252cf655-3138-42f9-a9ef-9d771d3281e4"
/>
### Favorite to Bookmark
- change `Favorite node` to `Bookmark node`
- change `Unfavorite node` to `Unbookmark node`
- change `No favorites yet` to `No bookmarks yet`
<img width="495" height="380" alt="image"
src="https://github.com/user-attachments/assets/7ba6f631-15ae-4406-874b-737551ca441c"
/>
---------
Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
@@ -167,7 +167,10 @@ import {
|
||||
import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
|
||||
import {
|
||||
resolveBlueprintSuffix,
|
||||
resolveEssentialsDisplayName
|
||||
} from '@/constants/essentialsDisplayNames'
|
||||
import Tab from '@/components/tab/Tab.vue'
|
||||
import TabList from '@/components/tab/TabList.vue'
|
||||
import TabPanel from '@/components/tab/TabPanel.vue'
|
||||
@@ -371,11 +374,38 @@ const essentialSections = computed(() => {
|
||||
)
|
||||
})
|
||||
|
||||
function disambiguateBlueprintLabels(
|
||||
root: RenderedTreeExplorerNode<ComfyNodeDefImpl>
|
||||
): RenderedTreeExplorerNode<ComfyNodeDefImpl> {
|
||||
if (!root.children) return root
|
||||
return {
|
||||
...root,
|
||||
children: root.children.map((folder) => {
|
||||
if (folder.type !== 'folder' || !folder.children) return folder
|
||||
const labelCounts = new Map<string, number>()
|
||||
for (const node of folder.children) {
|
||||
if (node.label)
|
||||
labelCounts.set(node.label, (labelCounts.get(node.label) ?? 0) + 1)
|
||||
}
|
||||
return {
|
||||
...folder,
|
||||
children: folder.children.map((node) => {
|
||||
if ((labelCounts.get(node.label ?? '') ?? 0) <= 1) return node
|
||||
const suffix = resolveBlueprintSuffix(node.data?.name ?? '')
|
||||
if (!suffix) return node
|
||||
return { ...node, label: `${node.label} (${suffix})` }
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const renderedEssentialRoot = computed(() => {
|
||||
const section = essentialSections.value[0]
|
||||
return section
|
||||
const root = section
|
||||
? fillNodeInfo(applySorting(section.tree), { useEssentialsLabels: true })
|
||||
: fillNodeInfo({ key: 'root', label: '', children: [] })
|
||||
return disambiguateBlueprintLabels(root)
|
||||
})
|
||||
|
||||
function flattenRenderedLeaves(
|
||||
|
||||
Reference in New Issue
Block a user