diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 38dce38e1..5bb585ce6 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -326,6 +326,15 @@ class ExtraNetworksTab { showControls() { this.controls_elem.classList.remove("hidden"); + + const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view"); + const btn_tree_view = this.controls_elem.querySelector(".extra-network-control--tree-view"); + const btn_card_view = this.controls_elem.querySelector(".extra-network-control--card-view"); + const btn_dets_view = this.controls_elem.querySelector(".extra-network-control--dets-view"); + this.dirs_view_en = "selected" in btn_dirs_view.dataset; + this.tree_view_en = "selected" in btn_tree_view.dataset; + this.card_view_en = "selected" in btn_card_view.dataset; + this.dets_view_en = "selected" in btn_dets_view.dataset; } hideControls() { @@ -381,26 +390,14 @@ class ExtraNetworksTab { return; } - const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view"); - const btn_tree_view = this.controls_elem.querySelector(".extra-network-control--tree-view"); - const btn_card_view = this.controls_elem.querySelector(".extra-network-control--card-view"); - const btn_dets_view = this.controls_elem.querySelector(".extra-network-control--dets-view"); - this.dirs_view_en = "selected" in btn_dirs_view.dataset; - this.tree_view_en = "selected" in btn_tree_view.dataset; - this.card_view_en = "selected" in btn_card_view.dataset; - this.dets_view_en = "selected" in btn_dets_view.dataset; + if (!isNullOrUndefined(this.resize_grid)) { + this.resize_grid.destroy(); + this.resize_grid = null; + } await Promise.all([this.setupTreeList(), this.setupCardList()]); - this.tree_list.enable(this.tree_view_en); - this.card_list.enable(this.card_view_en); - await Promise.all([this.tree_list.load(true), this.card_list.load(true)]); - // apply the previous sort/filter options - await this.applyListButtonStates(); - this.setSortMode(this.sort_mode_str); - this.setSortDir(this.sort_dir_str); - this.applyDirectoryFilters(); - this.applyFilter(this.filter_str); + await this.load(); } async refresh() { @@ -413,6 +410,11 @@ class ExtraNetworksTab { } setupResizeGrid() { + if (!isNullOrUndefined(this.resize_grid) && !(gradioApp().contains(this.resize_grid.elem)) { + this.resize_grid.destroy(); + this.resize_grid = null; + } + const set_size_override = (grid_item, size_px) => { // Limit dirs_view max height to the max height of its contents. if (grid_item.elem.id === `${this.tabname_full}_dirs_view_row`) { @@ -444,7 +446,6 @@ class ExtraNetworksTab { tree_list_state: this.tree_list_splash_state, }); this.showControls(); - if (isNullOrUndefined(this.resize_grid)) { this.setupResizeGrid(); } @@ -464,6 +465,13 @@ class ExtraNetworksTab { elem: div_dets, override: this.dets_view_en && div_dets.innerHTML !== "", }); + + // apply the previous sort/filter options + await this.applyListButtonStates(); + this.setSortMode(this.sort_mode_str); + this.setSortDir(this.sort_dir_str); + this.applyDirectoryFilters(); + this.applyFilter(this.filter_str); } unload() { @@ -555,8 +563,8 @@ class ExtraNetworksTab { const url = "./sd_extra_networks/page-is-ready"; const payload = {extra_networks_tabname: this.extra_networks_tabname}; - const opts = {timeout_ms: timeout_ms, response_handler: response_handler}; - return await fetchWithRetryAndBackoff(url, payload, opts); + const args = {timeout_ms: timeout_ms, response_handler: response_handler}; + return await fetchWithRetryAndBackoff(url, payload, args); } async onInitCardData() { @@ -584,9 +592,9 @@ class ExtraNetworksTab { const url = "./sd_extra_networks/init-card-data"; const payload = {tabname: this.tabname, extra_networks_tabname: this.extra_networks_tabname}; const timeout_ms = EXTRA_NETWORKS_INIT_DATA_TIMEOUT_MS; - const opts = {timeout_ms: timeout_ms, response_handler: response_handler}; + const args = {timeout_ms: timeout_ms, response_handler: response_handler}; try { - const response = await fetchWithRetryAndBackoff(url, payload, opts); + const response = await fetchWithRetryAndBackoff(url, payload, args); if (Object.keys(response.data).length === 0) { this.updateSplashState({card_list_state: "no_data"}); } else { @@ -625,9 +633,9 @@ class ExtraNetworksTab { const url = "./sd_extra_networks/init-tree-data"; const payload = {tabname: this.tabname, extra_networks_tabname: this.extra_networks_tabname}; const timeout_ms = EXTRA_NETWORKS_INIT_DATA_TIMEOUT_MS; - const opts = {timeout_ms: timeout_ms, response_handler: response_handler}; + const args = {timeout_ms: timeout_ms, response_handler: response_handler}; try { - const response = await fetchWithRetryAndBackoff(url, payload, opts); + const response = await fetchWithRetryAndBackoff(url, payload, args); if (Object.keys(response.data).length === 0) { this.updateSplashState({tree_list_state: "no_data"}); } else { @@ -645,9 +653,9 @@ class ExtraNetworksTab { const url = "./sd_extra_networks/fetch-card-data"; const payload = {extra_networks_tabname: this.extra_networks_tabname, div_ids: div_ids}; const timeout_ms = EXTRA_NETWORKS_FETCH_DATA_TIMEOUT_MS; - const opts = {timeout_ms: timeout_ms}; + const args = {timeout_ms: timeout_ms}; try { - const response = await fetchWithRetryAndBackoff(url, payload, opts); + const response = await fetchWithRetryAndBackoff(url, payload, args); if (response.missing_div_ids.length) { console.warn(`Failed to fetch multiple div_ids: ${response.missing_div_ids}`); } @@ -668,9 +676,9 @@ class ExtraNetworksTab { const url = "./sd_extra_networks/fetch-tree-data"; const payload = {extra_networks_tabname: this.extra_networks_tabname, div_ids: div_ids}; const timeout_ms = EXTRA_NETWORKS_FETCH_DATA_TIMEOUT_MS; - const opts = {timeout_ms: timeout_ms}; + const args = {timeout_ms: timeout_ms}; try { - const response = await fetchWithRetryAndBackoff(url, payload, opts); + const response = await fetchWithRetryAndBackoff(url, payload, args); if (response.missing_div_ids.length) { console.warn(`Failed to fetch multiple div_ids: ${response.missing_div_ids}`); } @@ -1192,12 +1200,11 @@ async function extraNetworksTabSelected(tabname_full, show_prompt, show_neg_prom /** called from python when user selects an extra networks tab */ await waitForKeyInObject({obj: extra_networks_tabs, k: tabname_full}); for (const [k, v] of Object.entries(extra_networks_tabs)) { - if (k === tabname_full) { - v.load(show_prompt, show_neg_prompt); - } else { + if (k !== tabname_full) { v.unload(); } } + extra_networks_tabs[tabname_full].load(show_prompt, show_neg_prompt); } function extraNetworksControlSearchClearOnClick(event) { diff --git a/javascript/resizeGrid.js b/javascript/resizeGrid.js index ee7fd5732..d2557f24c 100644 --- a/javascript/resizeGrid.js +++ b/javascript/resizeGrid.js @@ -287,6 +287,8 @@ class ResizeGridItem { if (!this.elem.style.cssText) { this.elem.removeAttribute('style'); } + delete this.elem.dataset.id; + delete this.elem.dataset.index; } shrink(px, {limit_to_base} = {}) { @@ -817,6 +819,7 @@ class ResizeGrid extends ResizeGridAxis { */ event_abort_controller = null; added_outer_div = false; + added_elem_id = false; setup_has_run = false; prev_dims = null; resize_observer = null; @@ -843,7 +846,10 @@ class ResizeGrid extends ResizeGridAxis { callbacks: callbacks, }); - this.elem.id = id; + if (this.elem.id !== id) { + this.elem.id = id; + this.added_elem_id = true; + } } destroy() { @@ -852,6 +858,10 @@ class ResizeGrid extends ResizeGridAxis { this.elem.innerHTML = this.elem.children[0].innerHTML; this.added_outer_div = false; } + if (this.added_elem_id) { + this.elem.removeAttribute("id"); + this.added_elem_id = false; + } super.destroy(); this.setup_has_run = false; } diff --git a/javascript/utils.js b/javascript/utils.js index 5d3f1487e..ec6e2521f 100644 --- a/javascript/utils.js +++ b/javascript/utils.js @@ -425,7 +425,7 @@ async function fetchWithRetryAndBackoff(url, data, args = {}) { * Args: * url: Primary URL to fetch. * data: Data to append to the URL when making the request. - * opts: + * args: * method: The HTTP request method to use. * timeout_ms: Max allowed time before this function fails. * fetch_timeout_ms: Max allowed time for individual `fetch` calls.