fix refresh bug

This commit is contained in:
Sj-Si 2024-06-03 16:02:47 -04:00
parent 5f32eb168d
commit 4b0f321ef7
3 changed files with 50 additions and 33 deletions

View File

@ -326,6 +326,15 @@ class ExtraNetworksTab {
showControls() { showControls() {
this.controls_elem.classList.remove("hidden"); 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() { hideControls() {
@ -381,26 +390,14 @@ class ExtraNetworksTab {
return; return;
} }
const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view"); if (!isNullOrUndefined(this.resize_grid)) {
const btn_tree_view = this.controls_elem.querySelector(".extra-network-control--tree-view"); this.resize_grid.destroy();
const btn_card_view = this.controls_elem.querySelector(".extra-network-control--card-view"); this.resize_grid = null;
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;
await Promise.all([this.setupTreeList(), this.setupCardList()]); 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.load();
await this.applyListButtonStates();
this.setSortMode(this.sort_mode_str);
this.setSortDir(this.sort_dir_str);
this.applyDirectoryFilters();
this.applyFilter(this.filter_str);
} }
async refresh() { async refresh() {
@ -413,6 +410,11 @@ class ExtraNetworksTab {
} }
setupResizeGrid() { 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) => { const set_size_override = (grid_item, size_px) => {
// Limit dirs_view max height to the max height of its contents. // Limit dirs_view max height to the max height of its contents.
if (grid_item.elem.id === `${this.tabname_full}_dirs_view_row`) { 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, tree_list_state: this.tree_list_splash_state,
}); });
this.showControls(); this.showControls();
if (isNullOrUndefined(this.resize_grid)) { if (isNullOrUndefined(this.resize_grid)) {
this.setupResizeGrid(); this.setupResizeGrid();
} }
@ -464,6 +465,13 @@ class ExtraNetworksTab {
elem: div_dets, elem: div_dets,
override: this.dets_view_en && div_dets.innerHTML !== "", 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() { unload() {
@ -555,8 +563,8 @@ class ExtraNetworksTab {
const url = "./sd_extra_networks/page-is-ready"; const url = "./sd_extra_networks/page-is-ready";
const payload = {extra_networks_tabname: this.extra_networks_tabname}; const payload = {extra_networks_tabname: this.extra_networks_tabname};
const opts = {timeout_ms: timeout_ms, response_handler: response_handler}; const args = {timeout_ms: timeout_ms, response_handler: response_handler};
return await fetchWithRetryAndBackoff(url, payload, opts); return await fetchWithRetryAndBackoff(url, payload, args);
} }
async onInitCardData() { async onInitCardData() {
@ -584,9 +592,9 @@ class ExtraNetworksTab {
const url = "./sd_extra_networks/init-card-data"; const url = "./sd_extra_networks/init-card-data";
const payload = {tabname: this.tabname, extra_networks_tabname: this.extra_networks_tabname}; const payload = {tabname: this.tabname, extra_networks_tabname: this.extra_networks_tabname};
const timeout_ms = EXTRA_NETWORKS_INIT_DATA_TIMEOUT_MS; 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 { try {
const response = await fetchWithRetryAndBackoff(url, payload, opts); const response = await fetchWithRetryAndBackoff(url, payload, args);
if (Object.keys(response.data).length === 0) { if (Object.keys(response.data).length === 0) {
this.updateSplashState({card_list_state: "no_data"}); this.updateSplashState({card_list_state: "no_data"});
} else { } else {
@ -625,9 +633,9 @@ class ExtraNetworksTab {
const url = "./sd_extra_networks/init-tree-data"; const url = "./sd_extra_networks/init-tree-data";
const payload = {tabname: this.tabname, extra_networks_tabname: this.extra_networks_tabname}; const payload = {tabname: this.tabname, extra_networks_tabname: this.extra_networks_tabname};
const timeout_ms = EXTRA_NETWORKS_INIT_DATA_TIMEOUT_MS; 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 { try {
const response = await fetchWithRetryAndBackoff(url, payload, opts); const response = await fetchWithRetryAndBackoff(url, payload, args);
if (Object.keys(response.data).length === 0) { if (Object.keys(response.data).length === 0) {
this.updateSplashState({tree_list_state: "no_data"}); this.updateSplashState({tree_list_state: "no_data"});
} else { } else {
@ -645,9 +653,9 @@ class ExtraNetworksTab {
const url = "./sd_extra_networks/fetch-card-data"; const url = "./sd_extra_networks/fetch-card-data";
const payload = {extra_networks_tabname: this.extra_networks_tabname, div_ids: div_ids}; const payload = {extra_networks_tabname: this.extra_networks_tabname, div_ids: div_ids};
const timeout_ms = EXTRA_NETWORKS_FETCH_DATA_TIMEOUT_MS; const timeout_ms = EXTRA_NETWORKS_FETCH_DATA_TIMEOUT_MS;
const opts = {timeout_ms: timeout_ms}; const args = {timeout_ms: timeout_ms};
try { try {
const response = await fetchWithRetryAndBackoff(url, payload, opts); const response = await fetchWithRetryAndBackoff(url, payload, args);
if (response.missing_div_ids.length) { if (response.missing_div_ids.length) {
console.warn(`Failed to fetch multiple div_ids: ${response.missing_div_ids}`); 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 url = "./sd_extra_networks/fetch-tree-data";
const payload = {extra_networks_tabname: this.extra_networks_tabname, div_ids: div_ids}; const payload = {extra_networks_tabname: this.extra_networks_tabname, div_ids: div_ids};
const timeout_ms = EXTRA_NETWORKS_FETCH_DATA_TIMEOUT_MS; const timeout_ms = EXTRA_NETWORKS_FETCH_DATA_TIMEOUT_MS;
const opts = {timeout_ms: timeout_ms}; const args = {timeout_ms: timeout_ms};
try { try {
const response = await fetchWithRetryAndBackoff(url, payload, opts); const response = await fetchWithRetryAndBackoff(url, payload, args);
if (response.missing_div_ids.length) { if (response.missing_div_ids.length) {
console.warn(`Failed to fetch multiple div_ids: ${response.missing_div_ids}`); 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 */ /** called from python when user selects an extra networks tab */
await waitForKeyInObject({obj: extra_networks_tabs, k: tabname_full}); await waitForKeyInObject({obj: extra_networks_tabs, k: tabname_full});
for (const [k, v] of Object.entries(extra_networks_tabs)) { for (const [k, v] of Object.entries(extra_networks_tabs)) {
if (k === tabname_full) { if (k !== tabname_full) {
v.load(show_prompt, show_neg_prompt);
} else {
v.unload(); v.unload();
} }
} }
extra_networks_tabs[tabname_full].load(show_prompt, show_neg_prompt);
} }
function extraNetworksControlSearchClearOnClick(event) { function extraNetworksControlSearchClearOnClick(event) {

View File

@ -287,6 +287,8 @@ class ResizeGridItem {
if (!this.elem.style.cssText) { if (!this.elem.style.cssText) {
this.elem.removeAttribute('style'); this.elem.removeAttribute('style');
} }
delete this.elem.dataset.id;
delete this.elem.dataset.index;
} }
shrink(px, {limit_to_base} = {}) { shrink(px, {limit_to_base} = {}) {
@ -817,6 +819,7 @@ class ResizeGrid extends ResizeGridAxis {
*/ */
event_abort_controller = null; event_abort_controller = null;
added_outer_div = false; added_outer_div = false;
added_elem_id = false;
setup_has_run = false; setup_has_run = false;
prev_dims = null; prev_dims = null;
resize_observer = null; resize_observer = null;
@ -843,7 +846,10 @@ class ResizeGrid extends ResizeGridAxis {
callbacks: callbacks, callbacks: callbacks,
}); });
if (this.elem.id !== id) {
this.elem.id = id; this.elem.id = id;
this.added_elem_id = true;
}
} }
destroy() { destroy() {
@ -852,6 +858,10 @@ class ResizeGrid extends ResizeGridAxis {
this.elem.innerHTML = this.elem.children[0].innerHTML; this.elem.innerHTML = this.elem.children[0].innerHTML;
this.added_outer_div = false; this.added_outer_div = false;
} }
if (this.added_elem_id) {
this.elem.removeAttribute("id");
this.added_elem_id = false;
}
super.destroy(); super.destroy();
this.setup_has_run = false; this.setup_has_run = false;
} }

View File

@ -425,7 +425,7 @@ async function fetchWithRetryAndBackoff(url, data, args = {}) {
* Args: * Args:
* url: Primary URL to fetch. * url: Primary URL to fetch.
* data: Data to append to the URL when making the request. * data: Data to append to the URL when making the request.
* opts: * args:
* method: The HTTP request method to use. * method: The HTTP request method to use.
* timeout_ms: Max allowed time before this function fails. * timeout_ms: Max allowed time before this function fails.
* fetch_timeout_ms: Max allowed time for individual `fetch` calls. * fetch_timeout_ms: Max allowed time for individual `fetch` calls.