From a3d6e620356935e1fa9b20c626f103ff13896b15 Mon Sep 17 00:00:00 2001 From: Will Miao <13051207myq@gmail.com> Date: Fri, 25 Jul 2025 17:48:02 +0800 Subject: [PATCH] refactor: centralize resetAndReload functionality in baseModelApi --- static/js/api/baseModelApi.js | 4 ++++ static/js/api/checkpointApi.js | 4 ---- static/js/api/loraApi.js | 4 ---- .../ContextMenu/CheckpointContextMenu.js | 3 +-- .../components/ContextMenu/LoraContextMenu.js | 3 ++- .../js/components/ModelDuplicatesManager.js | 10 ++------ static/js/components/alphabet/AlphabetBar.js | 2 +- .../controls/CheckpointsControls.js | 3 ++- .../js/components/controls/LorasControls.js | 3 ++- static/js/managers/BulkManager.js | 1 + static/js/managers/DownloadManager.js | 12 ++-------- static/js/managers/SettingsManager.js | 4 ++-- static/js/utils/uiHelpers.js | 24 ++----------------- 13 files changed, 21 insertions(+), 56 deletions(-) diff --git a/static/js/api/baseModelApi.js b/static/js/api/baseModelApi.js index 042871cd..f2e787f2 100644 --- a/static/js/api/baseModelApi.js +++ b/static/js/api/baseModelApi.js @@ -754,4 +754,8 @@ export function getModelApiClient() { } _singletonClient.setModelType(state.currentPageType); return _singletonClient; +} + +export async function resetAndReload(updateFolders = false) { + return getModelApiClient().loadMoreWithVirtualScroll(true, updateFolders); } \ No newline at end of file diff --git a/static/js/api/checkpointApi.js b/static/js/api/checkpointApi.js index 048de2ae..60f0a3ef 100644 --- a/static/js/api/checkpointApi.js +++ b/static/js/api/checkpointApi.js @@ -22,10 +22,6 @@ export async function loadMoreCheckpoints(resetPage = false, updateFolders = fal return checkpointApiClient.loadMoreWithVirtualScroll(resetPage, updateFolders); } -export async function resetAndReload(updateFolders = false) { - return checkpointApiClient.loadMoreWithVirtualScroll(true, updateFolders); -} - // Checkpoint-specific functions export async function getCheckpointInfo(name) { try { diff --git a/static/js/api/loraApi.js b/static/js/api/loraApi.js index 49a06bbc..cc4ec125 100644 --- a/static/js/api/loraApi.js +++ b/static/js/api/loraApi.js @@ -22,10 +22,6 @@ export async function loadMoreLoras(resetPage = false, updateFolders = false) { return loraApiClient.loadMoreWithVirtualScroll(resetPage, updateFolders); } -export async function resetAndReload(updateFolders = false) { - return loraApiClient.loadMoreWithVirtualScroll(true, updateFolders); -} - // LoRA-specific functions that don't have common equivalents export async function fetchModelDescription(modelId, filePath) { try { diff --git a/static/js/components/ContextMenu/CheckpointContextMenu.js b/static/js/components/ContextMenu/CheckpointContextMenu.js index b7be4b9f..dbff3711 100644 --- a/static/js/components/ContextMenu/CheckpointContextMenu.js +++ b/static/js/components/ContextMenu/CheckpointContextMenu.js @@ -1,7 +1,6 @@ import { BaseContextMenu } from './BaseContextMenu.js'; import { ModelContextMenuMixin } from './ModelContextMenuMixin.js'; -import { resetAndReload } from '../../api/checkpointApi.js'; -import { getModelApiClient } from '../../api/baseModelApi.js'; +import { getModelApiClient, resetAndReload } from '../../api/baseModelApi.js'; import { showToast } from '../../utils/uiHelpers.js'; import { showDeleteModal, showExcludeModal } from '../../utils/modalUtils.js'; diff --git a/static/js/components/ContextMenu/LoraContextMenu.js b/static/js/components/ContextMenu/LoraContextMenu.js index 72ac7519..2cd43194 100644 --- a/static/js/components/ContextMenu/LoraContextMenu.js +++ b/static/js/components/ContextMenu/LoraContextMenu.js @@ -1,6 +1,7 @@ import { BaseContextMenu } from './BaseContextMenu.js'; import { ModelContextMenuMixin } from './ModelContextMenuMixin.js'; -import { refreshSingleLoraMetadata, saveModelMetadata, replacePreview, resetAndReload } from '../../api/loraApi.js'; +import { refreshSingleLoraMetadata, saveModelMetadata, replacePreview } from '../../api/loraApi.js'; +import { resetAndReload } from '../../api/baseModelApi.js'; import { copyToClipboard, sendLoraToWorkflow } from '../../utils/uiHelpers.js'; import { showExcludeModal, showDeleteModal } from '../../utils/modalUtils.js'; diff --git a/static/js/components/ModelDuplicatesManager.js b/static/js/components/ModelDuplicatesManager.js index 13725a86..425e8ca0 100644 --- a/static/js/components/ModelDuplicatesManager.js +++ b/static/js/components/ModelDuplicatesManager.js @@ -2,8 +2,7 @@ import { showToast } from '../utils/uiHelpers.js'; import { state, getCurrentPageState } from '../state/index.js'; import { formatDate } from '../utils/formatters.js'; -import { resetAndReload as resetAndReloadLoras } from '../api/loraApi.js'; -import { resetAndReload as resetAndReloadCheckpoints } from '../api/checkpointApi.js'; +import { resetAndReload} from '../api/baseModelApi.js'; import { LoadingManager } from '../managers/LoadingManager.js'; export class ModelDuplicatesManager { @@ -622,12 +621,7 @@ export class ModelDuplicatesManager { // If models were successfully deleted if (data.total_deleted > 0) { - // Reload model data with updated folders - if (this.modelType === 'loras') { - await resetAndReloadLoras(true); - } else { - await resetAndReloadCheckpoints(true); - } + await resetAndReload(true); // Check if there are still duplicates try { diff --git a/static/js/components/alphabet/AlphabetBar.js b/static/js/components/alphabet/AlphabetBar.js index 723e3089..44f8803d 100644 --- a/static/js/components/alphabet/AlphabetBar.js +++ b/static/js/components/alphabet/AlphabetBar.js @@ -1,7 +1,7 @@ // AlphabetBar.js - Component for alphabet filtering import { getCurrentPageState } from '../../state/index.js'; import { getStorageItem, setStorageItem } from '../../utils/storageHelpers.js'; -import { resetAndReload } from '../../api/loraApi.js'; +import { resetAndReload } from '../../api/baseModelApi.js'; /** * AlphabetBar class - Handles the alphabet filtering UI and interactions diff --git a/static/js/components/controls/CheckpointsControls.js b/static/js/components/controls/CheckpointsControls.js index 6528a8a5..ba1a6ff3 100644 --- a/static/js/components/controls/CheckpointsControls.js +++ b/static/js/components/controls/CheckpointsControls.js @@ -1,6 +1,7 @@ // CheckpointsControls.js - Specific implementation for the Checkpoints page import { PageControls } from './PageControls.js'; -import { loadMoreCheckpoints, resetAndReload, refreshCheckpoints, fetchCivitai } from '../../api/checkpointApi.js'; +import { loadMoreCheckpoints, refreshCheckpoints, fetchCivitai } from '../../api/checkpointApi.js'; +import { resetAndReload } from '../../api/baseModelApi.js'; import { showToast } from '../../utils/uiHelpers.js'; import { downloadManager } from '../../managers/DownloadManager.js'; diff --git a/static/js/components/controls/LorasControls.js b/static/js/components/controls/LorasControls.js index dee5e128..d3fa03ad 100644 --- a/static/js/components/controls/LorasControls.js +++ b/static/js/components/controls/LorasControls.js @@ -1,6 +1,7 @@ // LorasControls.js - Specific implementation for the LoRAs page import { PageControls } from './PageControls.js'; -import { loadMoreLoras, fetchCivitai, resetAndReload, refreshLoras } from '../../api/loraApi.js'; +import { loadMoreLoras, fetchCivitai, refreshLoras } from '../../api/loraApi.js'; +import { resetAndReload } from '../../api/baseModelApi.js'; import { getSessionItem, removeSessionItem } from '../../utils/storageHelpers.js'; import { createAlphabetBar } from '../alphabet/index.js'; import { downloadManager } from '../../managers/DownloadManager.js'; diff --git a/static/js/managers/BulkManager.js b/static/js/managers/BulkManager.js index fe96d971..e0dd72bf 100644 --- a/static/js/managers/BulkManager.js +++ b/static/js/managers/BulkManager.js @@ -102,6 +102,7 @@ export class BulkManager { if (!state.bulkMode) { this.clearSelection(); + // TODO: fix this, no DOM manipulation should be done here // Force a lightweight refresh of the cards to ensure proper display // This is less disruptive than a full resetAndReload() document.querySelectorAll('.lora-card').forEach(card => { diff --git a/static/js/managers/DownloadManager.js b/static/js/managers/DownloadManager.js index d5c6ab29..5ddafb9a 100644 --- a/static/js/managers/DownloadManager.js +++ b/static/js/managers/DownloadManager.js @@ -1,7 +1,7 @@ import { modalManager } from './ModalManager.js'; import { showToast } from '../utils/uiHelpers.js'; import { LoadingManager } from './LoadingManager.js'; -import { getModelApiClient } from '../api/baseModelApi.js'; +import { getModelApiClient, resetAndReload } from '../api/baseModelApi.js'; import { getStorageItem, setStorageItem } from '../utils/storageHelpers.js'; export class DownloadManager { @@ -416,15 +416,7 @@ export class DownloadManager { } }); - // Trigger reload with folder update - use dynamic import based on model type - const modelType = this.apiClient.modelType; - if (modelType === 'loras') { - const { resetAndReload } = await import('../api/loraApi.js'); - await resetAndReload(true); - } else if (modelType === 'checkpoints') { - const { resetAndReload } = await import('../api/checkpointApi.js'); - await resetAndReload(true); - } + await resetAndReload(true); } catch (error) { showToast(error.message, 'error'); diff --git a/static/js/managers/SettingsManager.js b/static/js/managers/SettingsManager.js index c0f0f662..f53eb81e 100644 --- a/static/js/managers/SettingsManager.js +++ b/static/js/managers/SettingsManager.js @@ -1,7 +1,7 @@ import { modalManager } from './ModalManager.js'; import { showToast } from '../utils/uiHelpers.js'; import { state } from '../state/index.js'; -import { resetAndReload } from '../api/loraApi.js'; +import { resetAndReload } from '../api/baseModelApi.js'; import { setStorageItem, getStorageItem } from '../utils/storageHelpers.js'; import { DOWNLOAD_PATH_TEMPLATES, MAPPABLE_BASE_MODELS } from '../utils/constants.js'; @@ -664,7 +664,7 @@ export class SettingsManager { await window.recipeManager.loadRecipes(); } else if (this.currentPage === 'checkpoints') { // Reload the checkpoints without updating folders - await window.checkpointsManager.loadCheckpoints(); + await resetAndReload(false); } } diff --git a/static/js/utils/uiHelpers.js b/static/js/utils/uiHelpers.js index 0b46245b..7fd07f28 100644 --- a/static/js/utils/uiHelpers.js +++ b/static/js/utils/uiHelpers.js @@ -1,7 +1,6 @@ -import { state, getCurrentPageState } from '../state/index.js'; -import { resetAndReload } from '../api/loraApi.js'; +import { getCurrentPageState } from '../state/index.js'; import { getStorageItem, setStorageItem } from './storageHelpers.js'; -import { NODE_TYPES, NODE_TYPE_ICONS, DEFAULT_NODE_COLOR } from './constants.js'; +import { NODE_TYPE_ICONS, DEFAULT_NODE_COLOR } from './constants.js'; /** * Utility function to copy text to clipboard with fallback for older browsers @@ -168,25 +167,6 @@ function updateThemeToggleIcons(theme) { themeToggle.classList.add(`theme-${theme}`); } -export function toggleFolder(tag) { - const tagElement = (tag instanceof HTMLElement) ? tag : this; - const folder = tagElement.dataset.folder; - const wasActive = tagElement.classList.contains('active'); - - document.querySelectorAll('.folder-tags .tag').forEach(t => { - t.classList.remove('active'); - }); - - if (!wasActive) { - tagElement.classList.add('active'); - state.activeFolder = folder; - } else { - state.activeFolder = null; - } - - resetAndReload(); -} - function filterByFolder(folderPath) { document.querySelectorAll('.lora-card').forEach(card => { card.style.display = card.dataset.folder === folderPath ? '' : 'none';