Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

[feat] Add ownership filter to model browser (#7201)

Browse Source 
## Summary
Adds a dropdown filter to the model browser that allows users to filter
assets by ownership (All, My models, Public models), based on the
`is_immutable` property.

## Changes
- **Filter UI**: Added ownership dropdown in
[AssetFilterBar.vue](src/platform/assets/components/AssetFilterBar.vue#L30-L38)
that only appears when user has uploaded models
- **Filter Logic**: Implemented `filterByOwnership` function in
[useAssetBrowser.ts](src/platform/assets/composables/useAssetBrowser.ts#L38-L45)
to filter by `is_immutable` property
- **i18n**: Added translation strings for ownership filter options
- **Tests**: Added comprehensive tests for ownership filtering in both
composable and component test files

## Review Focus
- The ownership filter visibility logic correctly checks for mutable
assets (`!is_immutable`)
- Default filter value is 'all' to show all models initially
- Filter integrates cleanly with existing file format and base model
filters

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7201-feat-Add-ownership-filter-to-model-browser-2c16d73d365081f280f6d1e42e5400af)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
Luke Mino-Altherr
2025-12-09 13:52:33 -08:00
committed by GitHub
parent 2b9f7ecedf
commit 6850c45d63
7 changed files with 328 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
tests-ui/platform/assets/components/AssetFilterBar.test.ts
View File

@@ -73,51 +73,83 @@ function mountAssetFilterBar(props = {}) {
})
}
// Helper functions to find filters by user-facing attributes
function findFileFormatsFilter(
wrapper: ReturnType<typeof mountAssetFilterBar>
) {
return wrapper.findComponent(
'[data-component-id="asset-filter-file-formats"]'
)
}
function findBaseModelsFilter(wrapper: ReturnType<typeof mountAssetFilterBar>) {
return wrapper.findComponent('[data-component-id="asset-filter-base-models"]')
}
function findOwnershipFilter(wrapper: ReturnType<typeof mountAssetFilterBar>) {
return wrapper.findComponent('[data-component-id="asset-filter-ownership"]')
}
function findSortFilter(wrapper: ReturnType<typeof mountAssetFilterBar>) {
return wrapper.findComponent('[data-component-id="asset-filter-sort"]')
}
describe('AssetFilterBar', () => {
describe('Filter State Management', () => {
it('handles multiple simultaneous filter changes correctly', async () => {
// Provide assets with options so filters are visible
const assets = [
createAssetWithSpecificExtension('safetensors'),
createAssetWithSpecificBaseModel('sd15')
createAssetWithSpecificExtension('ckpt'),
createAssetWithSpecificBaseModel('sd15'),
createAssetWithSpecificBaseModel('sdxl')
]
const wrapper = mountAssetFilterBar({ assets })
// Update file formats
const fileFormatSelect = wrapper.findAllComponents({
name: 'MultiSelect'
})[0]
await fileFormatSelect.vm.$emit('update:modelValue', [
{ name: '.ckpt', value: 'ckpt' },
{ name: '.safetensors', value: 'safetensors' }
])
const fileFormatSelect = findFileFormatsFilter(wrapper)
const fileFormatSelectElement = fileFormatSelect.find('select')
const options = fileFormatSelectElement.findAll('option')
const ckptOption = options.find((o) => o.element.value === 'ckpt')!
const safetensorsOption = options.find(
(o) => o.element.value === 'safetensors'
)!
ckptOption.element.selected = true
safetensorsOption.element.selected = true
await fileFormatSelectElement.trigger('change')
await nextTick()
// Update base models
const baseModelSelect = wrapper.findAllComponents({
name: 'MultiSelect'
})[1]
await baseModelSelect.vm.$emit('update:modelValue', [
{ name: 'SD XL', value: 'sdxl' }
])
const baseModelSelect = findBaseModelsFilter(wrapper)
const baseModelSelectElement = baseModelSelect.find('select')
const sdxlOption = baseModelSelectElement
.findAll('option')
.find((o) => o.element.value === 'sdxl')
sdxlOption!.element.selected = true
await baseModelSelectElement.trigger('change')
await nextTick()
// Update sort
const sortSelect = wrapper.findComponent({ name: 'SingleSelect' })
await sortSelect.vm.$emit('update:modelValue', 'popular')
const sortSelect = findSortFilter(wrapper)
const sortSelectElement = sortSelect.find('select')
sortSelectElement.element.value = 'name-desc'
await sortSelectElement.trigger('change')
await nextTick()
const emitted = wrapper.emitted('filterChange')
expect(emitted).toHaveLength(3)
expect(emitted).toBeTruthy()
expect(emitted!.length).toBeGreaterThanOrEqual(3)
// Check final state
const finalState: FilterState = emitted![2][0] as FilterState
const finalState: FilterState = emitted![
emitted!.length - 1
][0] as FilterState
expect(finalState.fileFormats).toEqual(['ckpt', 'safetensors'])
expect(finalState.baseModels).toEqual(['sdxl'])
expect(finalState.sortBy).toBe('popular')
expect(finalState.sortBy).toBe('name-desc')
})
it('ensures FilterState interface compliance', async () => {
@@ -128,12 +160,11 @@ describe('AssetFilterBar', () => {
]
const wrapper = mountAssetFilterBar({ assets })
const fileFormatSelect = wrapper.findAllComponents({
name: 'MultiSelect'
})[0]
await fileFormatSelect.vm.$emit('update:modelValue', [
{ name: '.ckpt', value: 'ckpt' }
])
const fileFormatSelect = findFileFormatsFilter(wrapper)
const fileFormatSelectElement = fileFormatSelect.find('select')
const ckptOption = fileFormatSelectElement.findAll('option')[0]
ckptOption.element.selected = true
await fileFormatSelectElement.trigger('change')
await nextTick()
@@ -165,10 +196,11 @@ describe('AssetFilterBar', () => {
const wrapper = mountAssetFilterBar({ assets })
const fileFormatSelect = wrapper.findAllComponents({
name: 'MultiSelect'
})[0]
expect(fileFormatSelect.props('options')).toEqual([
const fileFormatSelect = findFileFormatsFilter(wrapper)
const options = fileFormatSelect.findAll('option')
expect(
options.map((o) => ({ name: o.text(), value: o.element.value }))
).toEqual([
{ name: '.ckpt', value: 'ckpt' },
{ name: '.pt', value: 'pt' },
{ name: '.safetensors', value: 'safetensors' }
@@ -184,10 +216,11 @@ describe('AssetFilterBar', () => {
const wrapper = mountAssetFilterBar({ assets })
const baseModelSelect = wrapper.findAllComponents({
name: 'MultiSelect'
})[1]
expect(baseModelSelect.props('options')).toEqual([
const baseModelSelect = findBaseModelsFilter(wrapper)
const options = baseModelSelect.findAll('option')
expect(
options.map((o) => ({ name: o.text(), value: o.element.value }))
).toEqual([
{ name: 'sd15', value: 'sd15' },
{ name: 'sd35', value: 'sd35' },
{ name: 'sdxl', value: 'sdxl' }
@@ -200,26 +233,16 @@ describe('AssetFilterBar', () => {
const assets: AssetItem[] = [] // No assets = no file format options
const wrapper = mountAssetFilterBar({ assets })
const fileFormatSelects = wrapper
.findAllComponents({ name: 'MultiSelect' })
.filter(
(component) => component.props('label') === 'assetBrowser.fileFormats'
)
expect(fileFormatSelects).toHaveLength(0)
const fileFormatSelect = findFileFormatsFilter(wrapper)
expect(fileFormatSelect.exists()).toBe(false)
})
it('hides base model filter when no options available', () => {
const assets = [createAssetWithoutBaseModel()] // Asset without base model = no base model options
const wrapper = mountAssetFilterBar({ assets })
const baseModelSelects = wrapper
.findAllComponents({ name: 'MultiSelect' })
.filter(
(component) => component.props('label') === 'assetBrowser.baseModels'
)
expect(baseModelSelects).toHaveLength(0)
const baseModelSelect = findBaseModelsFilter(wrapper)
expect(baseModelSelect.exists()).toBe(false)
})
it('shows both filters when options are available', () => {
@@ -229,23 +252,106 @@ describe('AssetFilterBar', () => {
]
const wrapper = mountAssetFilterBar({ assets })
const multiSelects = wrapper.findAllComponents({ name: 'MultiSelect' })
const fileFormatSelect = multiSelects.find(
(component) => component.props('label') === 'assetBrowser.fileFormats'
)
const baseModelSelect = multiSelects.find(
(component) => component.props('label') === 'assetBrowser.baseModels'
)
const fileFormatSelect = findFileFormatsFilter(wrapper)
const baseModelSelect = findBaseModelsFilter(wrapper)
expect(fileFormatSelect).toBeDefined()
expect(baseModelSelect).toBeDefined()
expect(fileFormatSelect.exists()).toBe(true)
expect(baseModelSelect.exists()).toBe(true)
})
it('hides both filters when no assets provided', () => {
const wrapper = mountAssetFilterBar()
const multiSelects = wrapper.findAllComponents({ name: 'MultiSelect' })
expect(multiSelects).toHaveLength(0)
const fileFormatSelect = findFileFormatsFilter(wrapper)
const baseModelSelect = findBaseModelsFilter(wrapper)
expect(fileFormatSelect.exists()).toBe(false)
expect(baseModelSelect.exists()).toBe(false)
})
it('hides ownership filter when no mutable assets', () => {
const assets = [
createAssetWithSpecificExtension('safetensors', true) // immutable
]
const wrapper = mountAssetFilterBar({ assets })
const ownershipSelect = findOwnershipFilter(wrapper)
expect(ownershipSelect.exists()).toBe(false)
})
it('shows ownership filter when mutable assets exist', () => {
const assets = [
createAssetWithSpecificExtension('safetensors', false) // mutable
]
const wrapper = mountAssetFilterBar({ assets })
const ownershipSelect = findOwnershipFilter(wrapper)
expect(ownershipSelect.exists()).toBe(true)
})
it('shows ownership filter when mixed assets exist', () => {
const assets = [
createAssetWithSpecificExtension('safetensors', true), // immutable
createAssetWithSpecificExtension('ckpt', false) // mutable
]
const wrapper = mountAssetFilterBar({ assets })
const ownershipSelect = findOwnershipFilter(wrapper)
expect(ownershipSelect.exists()).toBe(true)
})
it('shows ownership filter with allAssets when provided', () => {
const assets = [
createAssetWithSpecificExtension('safetensors', true) // immutable
]
const allAssets = [
createAssetWithSpecificExtension('safetensors', true), // immutable
createAssetWithSpecificExtension('ckpt', false) // mutable
]
const wrapper = mountAssetFilterBar({ assets, allAssets })
const ownershipSelect = findOwnershipFilter(wrapper)
expect(ownershipSelect.exists()).toBe(true)
})
})
describe('Ownership Filter', () => {
it('emits ownership filter changes', async () => {
const assets = [
createAssetWithSpecificExtension('safetensors', false) // mutable
]
const wrapper = mountAssetFilterBar({ assets })
const ownershipSelect = findOwnershipFilter(wrapper)
expect(ownershipSelect.exists()).toBe(true)
const ownershipSelectElement = ownershipSelect.find('select')
ownershipSelectElement.element.value = 'my-models'
await ownershipSelectElement.trigger('change')
await nextTick()
const emitted = wrapper.emitted('filterChange')
expect(emitted).toBeTruthy()
const filterState = emitted![emitted!.length - 1][0] as FilterState
expect(filterState.ownership).toBe('my-models')
})
it('ownership filter defaults to "all"', async () => {
const assets = [
createAssetWithSpecificExtension('safetensors', false) // mutable
]
const wrapper = mountAssetFilterBar({ assets })
const sortSelect = findSortFilter(wrapper)
const sortSelectElement = sortSelect.find('select')
sortSelectElement.element.value = 'recent'
await sortSelectElement.trigger('change')
await nextTick()
const emitted = wrapper.emitted('filterChange')
const filterState = emitted![0][0] as FilterState
expect(filterState.ownership).toBe('all')
})
})
})

106
tests-ui/platform/assets/composables/useAssetBrowser.test.ts
View File

@@ -249,7 +249,8 @@ describe('useAssetBrowser', () => {
updateFilters({
sortBy: 'name-asc',
fileFormats: ['safetensors'],
baseModels: []
baseModels: [],
ownership: 'all'
})
await nextTick()
@@ -284,7 +285,8 @@ describe('useAssetBrowser', () => {
updateFilters({
sortBy: 'name-asc',
fileFormats: [],
baseModels: ['SDXL']
baseModels: ['SDXL'],
ownership: 'all'
})
await nextTick()
@@ -335,7 +337,12 @@ describe('useAssetBrowser', () => {
const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
updateFilters({ sortBy: 'name', fileFormats: [], baseModels: [] })
updateFilters({
sortBy: 'name',
fileFormats: [],
baseModels: [],
ownership: 'all'
})
await nextTick()
const names = filteredAssets.value.map((asset) => asset.name)
@@ -355,7 +362,12 @@ describe('useAssetBrowser', () => {
const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
updateFilters({ sortBy: 'recent', fileFormats: [], baseModels: [] })
updateFilters({
sortBy: 'recent',
fileFormats: [],
baseModels: [],
ownership: 'all'
})
await nextTick()
const dates = filteredAssets.value.map((asset) => asset.created_at)
@@ -367,6 +379,92 @@ describe('useAssetBrowser', () => {
})
})
describe('Ownership filtering', () => {
it('filters by ownership - all', async () => {
const assets = [
createApiAsset({ name: 'my-model.safetensors', is_immutable: false }),
createApiAsset({
name: 'public-model.safetensors',
is_immutable: true
}),
createApiAsset({
name: 'another-my-model.safetensors',
is_immutable: false
})
]
const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
updateFilters({
sortBy: 'name-asc',
fileFormats: [],
baseModels: [],
ownership: 'all'
})
await nextTick()
expect(filteredAssets.value).toHaveLength(3)
})
it('filters by ownership - my models only', async () => {
const assets = [
createApiAsset({ name: 'my-model.safetensors', is_immutable: false }),
createApiAsset({
name: 'public-model.safetensors',
is_immutable: true
}),
createApiAsset({
name: 'another-my-model.safetensors',
is_immutable: false
})
]
const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
updateFilters({
sortBy: 'name-asc',
fileFormats: [],
baseModels: [],
ownership: 'my-models'
})
await nextTick()
expect(filteredAssets.value).toHaveLength(2)
expect(filteredAssets.value.every((asset) => !asset.is_immutable)).toBe(
true
)
})
it('filters by ownership - public models only', async () => {
const assets = [
createApiAsset({ name: 'my-model.safetensors', is_immutable: false }),
createApiAsset({
name: 'public-model.safetensors',
is_immutable: true
}),
createApiAsset({
name: 'another-public-model.safetensors',
is_immutable: true
})
]
const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
updateFilters({
sortBy: 'name-asc',
fileFormats: [],
baseModels: [],
ownership: 'public-models'
})
await nextTick()
expect(filteredAssets.value).toHaveLength(2)
expect(filteredAssets.value.every((asset) => asset.is_immutable)).toBe(
true
)
})
})
describe('Dynamic Category Extraction', () => {
it('extracts categories from asset tags', () => {
const assets = [