mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-14 01:20:03 +00:00
feat: add display name mappings for Essentials tab nodes (#9072)
## Summary Add frontend-only display name mappings for nodes shown in the Essentials tab, plus parse the new `essentials_category` field from the backend. ## Changes - **What**: Created `src/constants/essentialsDisplayNames.ts` with a static mapping of node names to user-friendly display names (e.g. `CLIPTextEncode` → "Text", `ImageScale` → "Resize Image"). Regular nodes use exact name matching; blueprint nodes use prefix matching since their filenames include model-specific suffixes. Integrated into `NodeLibrarySidebarTab.vue`'s `renderedRoot` computed for leaf node labels with fallback to `display_name`. Added `essentials_category` (z.string().optional()) to the node def schema and `ComfyNodeDefImpl` to parse the field already sent by the backend (PR #12357). ## Review Focus Display names are resolved only in the Essentials tab tree view (`NodeLibrarySidebarTab.vue`), not globally, to avoid side effects on search, bookmarks, or other views. Blueprint prefix matching is ordered longest-first so more specific prefixes (e.g. `image_inpainting_`) match before shorter ones (e.g. `image_edit`). ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9072-feat-add-display-name-mappings-for-Essentials-tab-nodes-30f6d73d3650817c9acdc9b0315ed0be) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -114,6 +114,7 @@ import {
|
||||
import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
|
||||
import SearchBox from '@/components/common/SearchBoxV2.vue'
|
||||
import { useFeatureFlags } from '@/composables/useFeatureFlags'
|
||||
import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
|
||||
@@ -230,16 +231,23 @@ function findFirstLeaf(node: TreeNode): TreeNode | undefined {
|
||||
}
|
||||
|
||||
function fillNodeInfo(
|
||||
node: TreeNode
|
||||
node: TreeNode,
|
||||
{ useEssentialsLabels = false }: { useEssentialsLabels?: boolean } = {}
|
||||
): RenderedTreeExplorerNode<ComfyNodeDefImpl> {
|
||||
const children = node.children?.map(fillNodeInfo)
|
||||
const children = node.children?.map((child) =>
|
||||
fillNodeInfo(child, { useEssentialsLabels })
|
||||
)
|
||||
const totalLeaves = node.leaf
|
||||
? 1
|
||||
: (children?.reduce((acc, child) => acc + child.totalLeaves, 0) ?? 0)
|
||||
|
||||
return {
|
||||
key: node.key,
|
||||
label: node.leaf ? node.data?.display_name : node.label,
|
||||
label: node.leaf
|
||||
? useEssentialsLabels
|
||||
? (resolveEssentialsDisplayName(node.data) ?? node.data?.display_name)
|
||||
: node.data?.display_name
|
||||
: node.label,
|
||||
leaf: node.leaf,
|
||||
data: node.data,
|
||||
icon: node.leaf ? 'icon-[comfy--node]' : getFolderIcon(node),
|
||||
@@ -274,7 +282,7 @@ const essentialSections = computed(() => {
|
||||
const renderedEssentialRoot = computed(() => {
|
||||
const section = essentialSections.value[0]
|
||||
return section
|
||||
? fillNodeInfo(applySorting(section.tree))
|
||||
? fillNodeInfo(applySorting(section.tree), { useEssentialsLabels: true })
|
||||
: fillNodeInfo({ key: 'root', label: '', children: [] })
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user