@@ -100,7 +100,7 @@ import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphN
import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
const SCALE_FACTOR = 0.5
-const PREVIEW_CONTAINER_PADDING_PX = 24 // p-3 top + bottom (12px × 2)
+const PREVIEW_CONTAINER_PADDING_PX = 24
const {
nodeDef,
diff --git a/src/components/searchbox/v2/NodeSearchCategorySidebar.test.ts b/src/components/searchbox/v2/NodeSearchCategorySidebar.test.ts
index 156170c178..34140f201c 100644
--- a/src/components/searchbox/v2/NodeSearchCategorySidebar.test.ts
+++ b/src/components/searchbox/v2/NodeSearchCategorySidebar.test.ts
@@ -50,7 +50,8 @@ describe('NodeSearchCategorySidebar', () => {
useNodeDefStore().updateNodeDefs([
createMockNodeDef({
name: 'EssentialNode',
- essentials_category: 'basic'
+ essentials_category: 'basic',
+ python_module: 'comfy_essentials'
})
])
await nextTick()
@@ -58,9 +59,13 @@ describe('NodeSearchCategorySidebar', () => {
const wrapper = await createWrapper()
expect(wrapper.text()).toContain('Most relevant')
+ expect(wrapper.text()).toContain('Recents')
expect(wrapper.text()).toContain('Favorites')
expect(wrapper.text()).toContain('Essentials')
- expect(wrapper.text()).toContain('Custom')
+ expect(wrapper.text()).toContain('Blueprints')
+ expect(wrapper.text()).toContain('Partner')
+ expect(wrapper.text()).toContain('Comfy')
+ expect(wrapper.text()).toContain('Extensions')
})
it('should mark the selected preset category as selected', async () => {
diff --git a/src/components/searchbox/v2/NodeSearchCategorySidebar.vue b/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
index fad96faf61..75885dfba3 100644
--- a/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
+++ b/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
@@ -53,7 +53,6 @@ import NodeSearchCategoryTreeNode, {
CATEGORY_UNSELECTED_CLASS
} from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
import type { CategoryNode } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
import { nodeOrganizationService } from '@/services/nodeOrganizationService'
import { useNodeDefStore } from '@/stores/nodeDefStore'
import { NodeSourceType } from '@/types/nodeSource'
@@ -65,11 +64,11 @@ const selectedCategory = defineModel
('selectedCategory', {
})
const { t } = useI18n()
-const { flags } = useFeatureFlags()
const nodeDefStore = useNodeDefStore()
const topCategories = computed(() => [
{ id: 'most-relevant', label: t('g.mostRelevant') },
+ { id: 'recents', label: t('g.recents') },
{ id: 'favorites', label: t('g.favorites') }
])
@@ -81,10 +80,18 @@ const hasEssentialNodes = computed(() =>
const sourceCategories = computed(() => {
const categories = []
- if (flags.nodeLibraryEssentialsEnabled && hasEssentialNodes.value) {
+ if (hasEssentialNodes.value) {
categories.push({ id: 'essentials', label: t('g.essentials') })
}
- categories.push({ id: 'custom', label: t('g.custom') })
+ categories.push(
+ {
+ id: 'blueprints',
+ label: t('sideToolbar.nodeLibraryTab.filterOptions.blueprints')
+ },
+ { id: 'partner', label: t('g.partner') },
+ { id: 'comfy', label: t('g.comfy') },
+ { id: 'extensions', label: t('g.extensions') }
+ )
return categories
})
diff --git a/src/components/searchbox/v2/NodeSearchContent.test.ts b/src/components/searchbox/v2/NodeSearchContent.test.ts
index 5559aa8c14..7ef891f9bb 100644
--- a/src/components/searchbox/v2/NodeSearchContent.test.ts
+++ b/src/components/searchbox/v2/NodeSearchContent.test.ts
@@ -132,7 +132,7 @@ describe('NodeSearchContent', () => {
expect(wrapper.text()).toContain('No results')
})
- it('should show only non-Core nodes when Custom is selected', async () => {
+ it('should show only CustomNodes when Extensions is selected', async () => {
useNodeDefStore().updateNodeDefs([
createMockNodeDef({
name: 'CoreNode',
@@ -155,7 +155,7 @@ describe('NodeSearchContent', () => {
).toBe(NodeSourceType.CustomNodes)
const wrapper = await createWrapper()
- await wrapper.find('[data-testid="category-custom"]').trigger('click')
+ await wrapper.find('[data-testid="category-extensions"]').trigger('click')
await nextTick()
const items = getNodeItems(wrapper)
diff --git a/src/components/searchbox/v2/NodeSearchContent.vue b/src/components/searchbox/v2/NodeSearchContent.vue
index 49bc9230df..7639840b41 100644
--- a/src/components/searchbox/v2/NodeSearchContent.vue
+++ b/src/components/searchbox/v2/NodeSearchContent.vue
@@ -19,9 +19,6 @@
-
- {{ $t('g.filterBy') }}
-
(null)
const filterQuery = ref('')
@@ -171,7 +167,6 @@ function cancelFilter() {
nextTick(() => searchInputRef.value?.focus())
}
-// Node search
const searchResults = computed(() => {
if (!searchQuery.value && filters.length === 0) {
return nodeFrequencyStore.topNodeDefs
@@ -212,11 +207,24 @@ const displayedResults = computed(() => {
(n) => n.nodeSource.type === NodeSourceType.Essentials
)
break
- case 'custom':
+ case 'recents':
+ return searchResults.value
+ case 'blueprints':
results = allNodes.filter(
- (n) =>
- n.nodeSource.type !== NodeSourceType.Core &&
- n.nodeSource.type !== NodeSourceType.Essentials
+ (n) => n.nodeSource.type === NodeSourceType.Blueprint
+ )
+ break
+ case 'partner':
+ results = allNodes.filter((n) => n.api_node)
+ break
+ case 'comfy':
+ results = allNodes.filter(
+ (n) => n.nodeSource.type === NodeSourceType.Core
+ )
+ break
+ case 'extensions':
+ results = allNodes.filter(
+ (n) => n.nodeSource.type === NodeSourceType.CustomNodes
)
break
default:
@@ -247,7 +255,6 @@ watch([selectedCategory, searchQuery, () => filters], () => {
selectedIndex.value = 0
})
-// Keyboard navigation
function onKeyDown() {
if (activeFilter.value) {
filterPanelRef.value?.navigate(1)
diff --git a/src/components/searchbox/v2/NodeSearchFilterBar.test.ts b/src/components/searchbox/v2/NodeSearchFilterBar.test.ts
index 982337a8f3..6708bc6b4a 100644
--- a/src/components/searchbox/v2/NodeSearchFilterBar.test.ts
+++ b/src/components/searchbox/v2/NodeSearchFilterBar.test.ts
@@ -39,14 +39,17 @@ describe(NodeSearchFilterBar, () => {
return wrapper
}
- it('should render Input, Output, and Source filter chips', async () => {
+ it('should render all filter chips', async () => {
const wrapper = await createWrapper()
const buttons = wrapper.findAll('button')
- expect(buttons).toHaveLength(3)
- expect(buttons[0].text()).toBe('Input')
- expect(buttons[1].text()).toBe('Output')
- expect(buttons[2].text()).toBe('Source')
+ expect(buttons).toHaveLength(6)
+ expect(buttons[0].text()).toBe('Blueprints')
+ expect(buttons[1].text()).toBe('Partner Nodes')
+ expect(buttons[2].text()).toBe('Essentials')
+ expect(buttons[3].text()).toBe('Extensions')
+ expect(buttons[4].text()).toBe('Input')
+ expect(buttons[5].text()).toBe('Output')
})
it('should mark active chip as pressed when activeChipKey matches', async () => {
diff --git a/src/components/searchbox/v2/NodeSearchFilterBar.vue b/src/components/searchbox/v2/NodeSearchFilterBar.vue
index 21c995808c..e68418fd65 100644
--- a/src/components/searchbox/v2/NodeSearchFilterBar.vue
+++ b/src/components/searchbox/v2/NodeSearchFilterBar.vue
@@ -52,6 +52,26 @@ const nodeDefStore = useNodeDefStore()
const chips = computed(() => {
const searchService = nodeDefStore.nodeSearchService
return [
+ {
+ key: 'blueprints',
+ label: t('sideToolbar.nodeLibraryTab.filterOptions.blueprints'),
+ filter: searchService.nodeSourceFilter
+ },
+ {
+ key: 'partnerNodes',
+ label: t('sideToolbar.nodeLibraryTab.filterOptions.partnerNodes'),
+ filter: searchService.nodeSourceFilter
+ },
+ {
+ key: 'essentials',
+ label: t('g.essentials'),
+ filter: searchService.nodeSourceFilter
+ },
+ {
+ key: 'extensions',
+ label: t('g.extensions'),
+ filter: searchService.nodeSourceFilter
+ },
{
key: 'input',
label: t('g.input'),
@@ -61,11 +81,6 @@ const chips = computed(() => {
key: 'output',
label: t('g.output'),
filter: searchService.outputTypeFilter
- },
- {
- key: 'source',
- label: t('g.source'),
- filter: searchService.nodeSourceFilter
}
]
})
diff --git a/src/components/searchbox/v2/NodeSearchListItem.vue b/src/components/searchbox/v2/NodeSearchListItem.vue
index 14495fbce1..877a45e6ce 100644
--- a/src/components/searchbox/v2/NodeSearchListItem.vue
+++ b/src/components/searchbox/v2/NodeSearchListItem.vue
@@ -123,13 +123,3 @@ const nodeFrequency = computed(() =>
const nodeBookmarkStore = useNodeBookmarkStore()
const isBookmarked = computed(() => nodeBookmarkStore.isBookmarked(nodeDef))
-
-
diff --git a/src/components/searchbox/v2/__test__/testUtils.ts b/src/components/searchbox/v2/__test__/testUtils.ts
index 23eb2a6424..5e1dc700c7 100644
--- a/src/components/searchbox/v2/__test__/testUtils.ts
+++ b/src/components/searchbox/v2/__test__/testUtils.ts
@@ -37,15 +37,27 @@ export const testI18n = createI18n({
addNode: 'Add a node...',
filterBy: 'Filter by:',
mostRelevant: 'Most relevant',
+ recents: 'Recents',
favorites: 'Favorites',
essentials: 'Essentials',
custom: 'Custom',
+ comfy: 'Comfy',
+ partner: 'Partner',
+ extensions: 'Extensions',
noResults: 'No results',
filterByType: 'Filter by {type}...',
input: 'Input',
output: 'Output',
source: 'Source',
search: 'Search'
+ },
+ sideToolbar: {
+ nodeLibraryTab: {
+ filterOptions: {
+ blueprints: 'Blueprints',
+ partnerNodes: 'Partner Nodes'
+ }
+ }
}
}
}
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts
index 9b7c4fc37d..e687abe6db 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts
@@ -46,10 +46,10 @@ vi.mock('./nodeLibrary/AllNodesPanel.vue', () => ({
}
}))
-vi.mock('./nodeLibrary/CustomNodesPanel.vue', () => ({
+vi.mock('./nodeLibrary/BlueprintsPanel.vue', () => ({
default: {
- name: 'CustomNodesPanel',
- template: '
',
+ name: 'BlueprintsPanel',
+ template: '
',
props: ['sections', 'expandedKeys']
}
}))
@@ -58,7 +58,7 @@ vi.mock('./nodeLibrary/EssentialNodesPanel.vue', () => ({
default: {
name: 'EssentialNodesPanel',
template: '
',
- props: ['root', 'expandedKeys']
+ props: ['root', 'expandedKeys', 'flatNodes']
}
}))
@@ -127,6 +127,8 @@ describe('NodeLibrarySidebarTabV2', () => {
expect(wrapper.find('[data-testid="essential-panel"]').exists()).toBe(true)
expect(wrapper.find('[data-testid="all-panel"]').exists()).toBe(false)
- expect(wrapper.find('[data-testid="custom-panel"]').exists()).toBe(false)
+ expect(wrapper.find('[data-testid="blueprints-panel"]').exists()).toBe(
+ false
+ )
})
})
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
index 91556fac0c..84eb0ad83b 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
@@ -29,17 +29,79 @@
v-for="option in sortingOptions"
:key="option.id"
:value="option.id"
- class="flex cursor-pointer items-center justify-end gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-comfy-input"
+ class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-comfy-input"
>
+ {{ $t(option.label) }}
- {{ $t(option.label) }}
+
+
+
+
+
+
+
+ {{
+ $t('sideToolbar.nodeLibraryTab.filterOptions.blueprints')
+ }}
+
+
+
+
+
+ {{
+ $t('sideToolbar.nodeLibraryTab.filterOptions.partnerNodes')
+ }}
+
+
+
+
+
+ {{
+ $t('sideToolbar.nodeLibraryTab.filterOptions.comfyNodes')
+ }}
+
+
+
+
+
+ {{
+ $t('sideToolbar.nodeLibraryTab.filterOptions.extensions')
+ }}
+
+
+
+
+
+
+
-import type { InjectionKey, Ref } from 'vue'
-
-export const SidebarContainerKey: InjectionKey
> =
- Symbol('SidebarContainer')
-
-
diff --git a/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue b/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
index 17bdbefc9c..f5e36f5bfb 100644
--- a/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
@@ -1,28 +1,30 @@
-
-
- {{ $t('sideToolbar.nodeLibraryTab.sections.favorites') }}
-
-
-
+
+ {{ $t('sideToolbar.nodeLibraryTab.sections.bookmarked') }}
+
+
+
+ {{ $t('sideToolbar.nodeLibraryTab.noBookmarkedNodes') }}
+
-
+
- {{ section.title }}
+ {{ $t(NODE_CATEGORY_LABELS[section.category]) }}
[]
fillNodeInfo: (node: TreeNode) => RenderedTreeExplorerNode
+ sortOrder?: string
}>()
const expandedKeys = defineModel('expandedKeys', { required: true })
diff --git a/src/components/sidebar/tabs/nodeLibrary/BlueprintsPanel.vue b/src/components/sidebar/tabs/nodeLibrary/BlueprintsPanel.vue
new file mode 100644
index 0000000000..7cb5659614
--- /dev/null
+++ b/src/components/sidebar/tabs/nodeLibrary/BlueprintsPanel.vue
@@ -0,0 +1,39 @@
+
+
+
+
+ {{ $t(section.title) }}
+
+
+
+
+
+
+
diff --git a/src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue b/src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue
index 12c8c9d672..02ec00ddfe 100644
--- a/src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue
@@ -8,7 +8,7 @@
{{ section.title }}
@@ -46,7 +46,7 @@ import type {
import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
defineProps<{
- sections: NodeLibrarySection[]
+ sections: NodeLibrarySection[]
}>()
const expandedKeys = defineModel('expandedKeys', { required: true })
diff --git a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
index c2003ef157..b681daba82 100644
--- a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
@@ -35,11 +35,11 @@