feat(ui): add seeded random sort option to model pages (#1049)

tests/frontend/components/pageControls.randomSort.test.js

@@ -0,0 +1,221 @@
+import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest';
+
+const resetAndReloadMock = vi.fn();
+const getModelApiClientMock = vi.fn();
+
+vi.mock('../../../static/js/api/modelApiFactory.js', () => ({
+  getModelApiClient: getModelApiClientMock,
+  resetAndReload: resetAndReloadMock,
+}));
+
+vi.mock('../../../static/js/utils/uiHelpers.js', () => ({
+  showToast: vi.fn(),
+  openCivitaiByMetadata: vi.fn(),
+  updatePanelPositions: vi.fn(),
+}));
+
+vi.mock('../../../static/js/managers/DownloadManager.js', () => ({
+  downloadManager: { showDownloadModal: vi.fn() },
+}));
+
+vi.mock('../../../static/js/components/SidebarManager.js', () => ({
+  sidebarManager: {
+    setHostPageControls: vi.fn(),
+    initialize: vi.fn(async () => {}),
+    refresh: vi.fn(async () => {}),
+    cleanup: vi.fn(),
+    isInitialized: false,
+  },
+}));
+
+vi.mock('../../../static/js/components/alphabet/index.js', () => ({
+  createAlphabetBar: vi.fn(() => ({ destroy: vi.fn() })),
+}));
+
+vi.mock('../../../static/js/utils/updateCheckHelpers.js', () => ({
+  performModelUpdateCheck: vi.fn(async () => ({ status: 'success', displayName: 'LoRA', records: [] })),
+}));
+
+beforeEach(() => {
+  vi.resetModules();
+  vi.clearAllMocks();
+  localStorage.clear();
+  sessionStorage.clear();
+
+  resetAndReloadMock.mockResolvedValue(undefined);
+  getModelApiClientMock.mockReturnValue({});
+
+  global.fetch = vi.fn().mockResolvedValue({
+    ok: true,
+    json: async () => ({ success: true, base_models: [] }),
+  });
+});
+
+afterEach(() => {
+  delete window.bulkManager;
+  delete window.modelDuplicatesManager;
+  delete global.fetch;
+});
+
+function renderControlsDom(pageKey) {
+  document.body.dataset.page = pageKey;
+  document.body.innerHTML = `
+    <div class="controls">
+      <div id="excludedViewBanner" class="excluded-view-banner hidden">
+        <button id="excludedViewBackBtn">Back</button>
+      </div>
+      <div class="actions">
+        <div class="action-buttons">
+          <div class="control-group">
+            <select id="sortSelect">
+              <option value="name:asc">Name Asc</option>
+              <option value="name:desc">Name Desc</option>
+              <option value="random">Randomize (shuffle)</option>
+            </select>
+          </div>
+          <div class="control-group dropdown-group">
+            <button data-action="refresh" class="dropdown-main"></button>
+            <button class="dropdown-toggle"></button>
+            <div class="dropdown-menu">
+              <div class="dropdown-item" data-action="full-rebuild"></div>
+            </div>
+          </div>
+          <div class="control-group">
+            <button data-action="fetch"></button>
+          </div>
+          <div class="control-group">
+            <button data-action="download"></button>
+          </div>
+          <div class="control-group">
+            <button data-action="bulk"></button>
+          </div>
+          <div class="control-group">
+            <button data-action="find-duplicates"></button>
+          </div>
+          <div class="control-group">
+            <button id="favoriteFilterBtn" class="favorite-filter"></button>
+          </div>
+          <div class="control-group dropdown-group update-filter-group">
+            <button id="updateFilterBtn" class="dropdown-main update-filter" aria-busy="false">
+              <span>Updates</span>
+            </button>
+            <button id="updateFilterMenuToggle" class="dropdown-toggle"></button>
+            <div class="dropdown-menu">
+              <div id="checkUpdatesMenuItem" class="dropdown-item" data-action="check-updates">
+                <span>Check updates</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="customFilterIndicator" class="control-group hidden">
+      <div class="filter-active">
+        <span class="customFilterText" title=""></span>
+        <i class="fas fa-times-circle clear-filter"></i>
+      </div>
+    </div>
+    <div id="breadcrumbContainer"></div>
+    <div id="duplicatesBanner" style="display: none;"></div>
+    <div class="alphabet-bar-container"></div>
+  `;
+}
+
+async function createControls() {
+  const stateModule = await import('../../../static/js/state/index.js');
+  stateModule.initPageState('loras');
+  const { LorasControls } = await import('../../../static/js/components/controls/LorasControls.js');
+  return { stateModule, controls: new LorasControls() };
+}
+
+describe('Random sort option', () => {
+  it('generates a seeded sort value when Random is picked', async () => {
+    renderControlsDom('loras');
+    const { controls } = await createControls();
+    const sortSelect = document.getElementById('sortSelect');
+    const randomOpt = sortSelect.querySelector('option[value="random"]');
+
+    sortSelect.value = 'random';
+    sortSelect.dispatchEvent(new Event('change', { bubbles: true }));
+    await Promise.resolve();
+
+    expect(controls.pageState.sortBy).toMatch(/^random:[a-z0-9]+$/);
+    expect(localStorage.getItem('lora_manager_loras_sort')).toBe(controls.pageState.sortBy);
+    expect(randomOpt.value).toBe(controls.pageState.sortBy);
+    expect(sortSelect.value).toBe(controls.pageState.sortBy);
+    expect(resetAndReloadMock).toHaveBeenCalled();
+  });
+
+  it('reshuffles with a fresh seed every time Random is picked again', async () => {
+    renderControlsDom('loras');
+    const { controls } = await createControls();
+    const sortSelect = document.getElementById('sortSelect');
+    const randomOpt = sortSelect.querySelector('option[value="random"]');
+
+    // First pick
+    sortSelect.value = 'random';
+    sortSelect.dispatchEvent(new Event('change', { bubbles: true }));
+    await Promise.resolve();
+    const firstSeed = controls.pageState.sortBy;
+
+    // Second pick: the option now carries the seeded value, like a menu click
+    sortSelect.value = randomOpt.value;
+    sortSelect.dispatchEvent(new Event('change', { bubbles: true }));
+    await Promise.resolve();
+
+    expect(controls.pageState.sortBy).toMatch(/^random:[a-z0-9]+$/);
+    expect(controls.pageState.sortBy).not.toBe(firstSeed);
+  });
+
+  it('restores a persisted seeded random sort on load', async () => {
+    renderControlsDom('loras');
+    const savedSort = 'random:persistedseed';
+    localStorage.setItem('lora_manager_loras_sort', savedSort);
+
+    const { controls } = await createControls();
+    const sortSelect = document.getElementById('sortSelect');
+
+    expect(controls.pageState.sortBy).toBe(savedSort);
+    expect(sortSelect.value).toBe(savedSort);
+    expect(sortSelect.querySelector('option[value="random:persistedseed"]')).not.toBeNull();
+  });
+
+  it('applies a non-random sort back to the plain random option', async () => {
+    renderControlsDom('loras');
+    const { controls } = await createControls();
+    const sortSelect = document.getElementById('sortSelect');
+    const randomOpt = sortSelect.querySelector('option[value="random"]');
+
+    // Seed a random sort, then switch to a normal sort
+    sortSelect.value = 'random';
+    sortSelect.dispatchEvent(new Event('change', { bubbles: true }));
+    await Promise.resolve();
+    controls.applySortToSelect('name:desc');
+
+    expect(sortSelect.value).toBe('name:desc');
+    expect(randomOpt.value).toBe('random');
+  });
+
+  it('resets the seeded option when switching away from Random via the dropdown change handler', async () => {
+    renderControlsDom('loras');
+    const { controls } = await createControls();
+    const sortSelect = document.getElementById('sortSelect');
+    const randomOpt = sortSelect.querySelector('option[value="random"]');
+
+    // Pick Random: the option is now seeded
+    sortSelect.value = 'random';
+    sortSelect.dispatchEvent(new Event('change', { bubbles: true }));
+    await Promise.resolve();
+    expect(randomOpt.value).toMatch(/^random:[a-z0-9]+$/);
+
+    // Switch to a non-random sort through the change handler (as a menu
+    // click does); the option must go back to the plain "random" value
+    sortSelect.value = 'name:desc';
+    sortSelect.dispatchEvent(new Event('change', { bubbles: true }));
+    await Promise.resolve();
+
+    expect(controls.pageState.sortBy).toBe('name:desc');
+    expect(sortSelect.value).toBe('name:desc');
+    expect(randomOpt.value).toBe('random');
+  });
+});

tests/frontend/components/sortDropdown.menuSync.test.js

@@ -0,0 +1,68 @@
+import { describe, it, beforeEach, expect } from 'vitest';
+import { initSortDropdown } from '../../../static/js/components/controls/SortDropdown.js';
+
+function renderSortDropdownDom() {
+    document.body.innerHTML = `
+    <div class="sort-dropdown-group">
+      <select id="sortSelect">
+        <option value="name:asc">Name Asc</option>
+        <option value="name:desc">Name Desc</option>
+        <option value="random" selected>Randomize (shuffle)</option>
+      </select>
+      <button class="sort-trigger" type="button">
+        <span class="sort-trigger__label"></span>
+      </button>
+      <div class="sort-dropdown-menu"></div>
+    </div>
+  `;
+    return {
+        select: document.getElementById('sortSelect'),
+        menu: document.querySelector('.sort-dropdown-menu'),
+        label: document.querySelector('.sort-trigger__label'),
+    };
+}
+
+describe('SortDropdown menu sync', () => {
+    let select;
+    let menu;
+    let label;
+
+    beforeEach(() => {
+        ({ select, menu, label } = renderSortDropdownDom());
+        initSortDropdown(select);
+    });
+
+    it('rebuilds the menu and highlights the selected item when an option value attribute changes', async () => {
+        // The seeded Random option gets a new value each time it is picked.
+        // The select's value getter follows the selected option's new value.
+        const randomOpt = select.querySelector('option[value="random"]');
+        randomOpt.value = 'random:abc123';
+        await Promise.resolve();
+
+        const items = [...menu.querySelectorAll('.sort-option')];
+        expect(items.map((el) => el.dataset.value)).toContain('random:abc123');
+        const seededItem = items.find((el) => el.dataset.value === 'random:abc123');
+        expect(seededItem.classList.contains('is-selected')).toBe(true);
+        expect(label.textContent).toBe('Randomize (shuffle)');
+    });
+
+    it('drops the stale seeded item and re-selects the plain random item when the option is reset', async () => {
+        const randomOpt = select.querySelector('option[value="random"]');
+        randomOpt.value = 'random:abc123';
+        await Promise.resolve();
+
+        // The rebuild must have happened: the seeded item is in the menu
+        const seededItems = [...menu.querySelectorAll('.sort-option')]
+            .filter((el) => el.dataset.value === 'random:abc123');
+        expect(seededItems).toHaveLength(1);
+
+        // PageControls resets the option to "random" when switching away
+        randomOpt.value = 'random';
+        await Promise.resolve();
+
+        const items = [...menu.querySelectorAll('.sort-option')];
+        expect(items.map((el) => el.dataset.value)).not.toContain('random:abc123');
+        const randomItem = items.find((el) => el.dataset.value === 'random');
+        expect(randomItem.classList.contains('is-selected')).toBe(true);
+    });
+});

tests/services/test_base_model_service.py

@@ -183,7 +183,7 @@ class FakeCache:
     def __init__(self, items):
         self.items = list(items)
 
-    async def get_sorted_data(self, sort_key, order):
+    async def get_sorted_data(self, sort_key, order, seed=None):
         if sort_key == "name":
             data = sorted(self.items, key=lambda x: x["model_name"].lower())
             if order == "desc":

tests/services/test_model_scanner.py

@@ -884,7 +884,7 @@ async def test_sync_cache_conditional_resort_skipped(tmp_path: Path, monkeypatch
         raw_data=[dict(entry)], folders=[], name_display_mode="model_name"
     )
     await scanner._cache.resort()
-    scanner._cache._last_sort = ("name", "asc")  # name sort is active
+    scanner._cache._last_sort = ("name", "asc", None)  # name sort is active
     scanner._tags_count = {"alpha": 1}
     scanner._hash_index.add_entry("abc123", "/m/a.safetensors")
 
@@ -935,7 +935,7 @@ async def test_sync_cache_conditional_resort_triggered(tmp_path: Path, monkeypat
         raw_data=[dict(entry)], folders=[], name_display_mode="model_name"
     )
     await scanner._cache.resort()
-    scanner._cache._last_sort = ("name", "asc")
+    scanner._cache._last_sort = ("name", "asc", None)
     scanner._tags_count = {"alpha": 1}
     scanner._hash_index.add_entry("abc123", "/m/a.safetensors")
 

tests/services/test_model_sort.py

@@ -0,0 +1,97 @@
+"""Tests for sort parsing and the seeded random sort mode."""
+
+import asyncio
+
+import pytest
+
+from py.services.model_cache import ModelCache
+from py.services.model_query import ModelCacheRepository, SortParams
+
+
+def _make_cache(items):
+    return ModelCache(
+        raw_data=[
+            {
+                "file_path": f"/models/{name}.safetensors",
+                "file_name": f"{name}.safetensors",
+                "model_name": name,
+                "folder": "",
+                "size": 100,
+                "modified": 0.0,
+            }
+            for name in items
+        ],
+        folders=[],
+    )
+
+
+class TestParseSort:
+    def test_random_with_seed(self):
+        params = ModelCacheRepository.parse_sort("random:abc123")
+        assert params == SortParams(key="random", order="asc", seed="abc123")
+
+    def test_random_without_seed(self):
+        params = ModelCacheRepository.parse_sort("random")
+        assert params == SortParams(key="random", order="asc", seed=None)
+
+    def test_random_empty_seed_falls_back_to_none(self):
+        params = ModelCacheRepository.parse_sort("random:")
+        assert params.seed is None
+
+    def test_regular_sorts_unaffected(self):
+        params = ModelCacheRepository.parse_sort("name:desc")
+        assert params == SortParams(key="name", order="desc", seed=None)
+
+
+class TestRandomShuffle:
+    @pytest.mark.asyncio
+    async def test_same_seed_yields_same_order(self):
+        cache = _make_cache(["a", "b", "c", "d", "e"])
+        await asyncio.sleep(0)  # allow background resort task to run
+
+        first = await cache.get_sorted_data("random", "asc", "seed1")
+        second = await cache.get_sorted_data("random", "asc", "seed1")
+
+        assert [item["model_name"] for item in first] == [
+            item["model_name"] for item in second
+        ]
+
+    @pytest.mark.asyncio
+    async def test_different_seeds_yield_different_orders(self):
+        cache = _make_cache([f"m{i}" for i in range(20)])
+        await asyncio.sleep(0)
+
+        first = await cache.get_sorted_data("random", "asc", "seed-a")
+        second = await cache.get_sorted_data("random", "asc", "seed-b")
+
+        assert [item["model_name"] for item in first] != [
+            item["model_name"] for item in second
+        ]
+
+    @pytest.mark.asyncio
+    async def test_shuffle_is_a_permutation(self):
+        cache = _make_cache(["a", "b", "c", "d", "e"])
+        await asyncio.sleep(0)
+
+        shuffled = await cache.get_sorted_data("random", "asc", "seed")
+
+        assert sorted(item["model_name"] for item in shuffled) == [
+            "a",
+            "b",
+            "c",
+            "d",
+            "e",
+        ]
+        assert len({item["file_path"] for item in shuffled}) == 5
+
+    @pytest.mark.asyncio
+    async def test_missing_seed_is_stable(self):
+        cache = _make_cache(["a", "b", "c", "d", "e"])
+        await asyncio.sleep(0)
+
+        first = await cache.get_sorted_data("random", "asc")
+        second = await cache.get_sorted_data("random", "asc")
+
+        assert [item["model_name"] for item in first] == [
+            item["model_name"] for item in second
+        ]