mirrors/stable-diffusion-webui
1
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2026-02-01 13:22:04 -08:00
Code Issues Projects Releases Packages Wiki Activity

fix loading/nodata messages

Browse source
This commit is contained in:
Sj-Si 2024-05-03 13:13:25 -04:00
parent 2f8ee1998f
commit c8e21f6c8b
6 changed files with 165 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

64
javascript/clusterize.js
View file

@ -19,24 +19,19 @@ class Clusterize {
content_elem = null;
scroll_id = null;
content_id = null;
no_data_class_default = "clusterize-no-data";
loading_class_default = "clusterize-loading";
options = {
rows_in_block: 50,
cols_in_block: 1,
blocks_in_cluster: 5,
rows_in_cluster: 50 * 5, // default is rows_in_block * blocks_in_cluster
tag: null,
id_attr: "data-div-id",
no_data_class: "clusterize-no-data",
no_data_text: "No Data",
show_no_data_row: true,
no_data_class: this.no_data_class_default,
loading_class: this.loading_class_default,
keep_parity: true,
callbacks: {},
};
loading_html_default = `<div class="${this.loading_class_default}">Loading...</div>`;
no_data_html_default = `<div class="${this.no_data_class_default}">No Data</div>`;
loading_html = null;
no_data_html = null;
setup_has_run = false;
enabled = false;
#is_mac = null;
@ -105,9 +100,6 @@ class Clusterize {
this.#max_items = args.max_items;
this.#on_scroll_bound = this.#onScroll.bind(this);
this.loading_html = args.loading_html;
this.no_data_html = args.no_data_html;
}
// ==== PUBLIC FUNCTIONS ====
@ -133,13 +125,12 @@ class Clusterize {
this.setup_has_run = true;
}
clear(custom_html) {
clear() {
if (!this.setup_has_run || !this.enabled) {
return;
}
custom_html = custom_html || this.no_data_html;
this.#html(custom_html);
this.#html(this.#generateEmptyRow().join(""));
}
destroy() {
@ -147,7 +138,7 @@ class Clusterize {
this.#teardownElementObservers();
this.#teardownResizeObservers();
this.#html(this.no_data_html);
this.#html(this.#generateEmptyRow().join(""));
this.setup_has_run = false;
}
@ -279,29 +270,13 @@ class Clusterize {
if (this.#ie && this.#ie <= 9 && !this.options.tag) {
this.options.tag = rows[0].match(/<([^>\s/]*)/)[1].toLowerCase();
}
// Temporarily add one row so that we can calculate row dimensions.
if (this.content_elem.children.length <= 1) {
cache.data = this.#html(rows[0]);
}
if (!this.options.tag) {
this.options.tag = this.content_elem.children[0].tagName.toLowerCase();
}
if (!isString(this.loading_html)) {
const loading_elem = this.content_elem.querySelector(`.${this.options.loading_class}`);
if (isElement(loading_elem)) {
this.loading_html = loading_elem.outerHTML;
loading_elem.remove();
}
}
if (!isString(this.no_data_html)) {
const no_data_elem = this.content_elem.querySelector(`.${this.options.no_data_class}`);
if (isElement(no_data_elem)) {
this.no_data_html = no_data_elem.outerHTML;
no_data_elem.remove();
}
}
this.#recalculateDims();
}
@ -317,7 +292,7 @@ class Clusterize {
// Get the first element that isn't one of our placeholder rows.
const node = this.content_elem.querySelector(
`:scope > :not(.clusterize-extra-row,.${this.options.no_data_class},.${this.options.loading_class})`
`:scope > :not(.clusterize-extra-row,.${this.options.no_data_class})`
);
if (!isElement(node)) {
// dont attempt to compute dims if we have no data.
@ -368,6 +343,21 @@ class Clusterize {
return prev_options !== JSON.stringify(this.options);
}
#generateEmptyRow() {
const row = document.createElement(this.options.tag);
row.className = this.options.no_data_class;
const node = document.createTextNode(this.options.no_data_text);
if (this.options.tag === "tr") {
const td = document.createElement("td");
td.colSpan = 100;
td.appendChild(node);
row.appendChild(td);
} else {
row.appendChild(node);
}
return [row.outerHTML];
}
#getClusterNum() {
this.options.scroll_top = this.scroll_elem.scrollTop;
const cluster_divider = this.options.cluster_height - this.options.block_height;
@ -397,7 +387,7 @@ class Clusterize {
top_offset: 0,
bottom_offset: 0,
rows_above: 0,
rows: this_cluster_rows.length ? this_cluster_rows : [this.no_data_html],
rows: this_cluster_rows.length ? this_cluster_rows : this.#generateEmptyRow(),
};
}
@ -417,12 +407,13 @@ class Clusterize {
if (!Array.isArray(rows) || !rows.length) {
// This implies there is no data for this list. Not an error.
// Errors should be handled in the fetchData callback, not here.
this.#html(this.no_data_html);
this.#html(this.#generateEmptyRow().join(""));
return;
} else {
this.#html(rows.join(""));
this.#exploreEnvironment(rows, this.#cache);
// Remove the temporary item from the data since we calculated its size.
this.#html(this.loading_html);
this.#html(this.#generateEmptyRow().join(""));
}
}
@ -472,6 +463,7 @@ class Clusterize {
} else {
content_elem.innerHTML = data;
}
return content_elem.innerHTML;
}
#renderExtraTag(class_name, height) {

123
javascript/extraNetworks.js
View file

@ -111,10 +111,12 @@ class ExtraNetworksTab {
refresh_in_progress = false;
dirs_view_en = false;
tree_view_en = false;
tree_list_no_data_html_bkp = null;
tree_list_loading_html_bkp = null;
cards_list_no_data_html_bkp = null;
cards_list_loading_html_bkp = null;
cards_list_loading_splash_elem = null;
cards_list_no_data_splash_elem = null;
tree_list_loading_splash_elem = null;
tree_list_no_data_splash_elem = null;
cards_list_splash_state = null;
tree_list_splash_state = null;
constructor({tabname, extra_networks_tabname}) {
this.tabname = tabname;
this.extra_networks_tabname = extra_networks_tabname;
@ -137,6 +139,21 @@ class ExtraNetworksTab {
waitForElement(`#${this.tabname_full}_cards_list_content_area`),
]);
this.cards_list_loading_splash_elem = document.getElementById(
`${this.tabname_full}_cards_list_loading_splash`
);
this.cards_list_no_data_splash_elem = document.getElementById(
`${this.tabname_full}_cards_list_no_data_splash`
);
this.tree_list_loading_splash_elem = document.getElementById(
`${this.tabname_full}_tree_list_loading_splash`
);
this.tree_list_no_data_splash_elem = document.getElementById(
`${this.tabname_full}_tree_list_no_data_splash`
);
this.updateSplashState({cards_list_state: "loading", tree_list_state: "loading"});
this.txt_search_elem = this.controls_elem.querySelector(".extra-network-control--search-text");
this.dirs_view_en = "selected" in this.controls_elem.querySelector(
".extra-network-control--dirs-view"
@ -153,26 +170,6 @@ class ExtraNetworksTab {
this.controls_elem.id = `${this.tabname_full}_controls`;
controls_div.insertBefore(this.controls_elem, null);
// create backups of the no-data and loading elements for tree/cards list
const tree_loading_elem = this.container_elem.querySelector(
".extra-network-tree .clusterize-loading"
);
const tree_no_data_elem = this.container_elem.querySelector(
".extra-network-tree .clusterize-no-data"
);
const cards_loading_elem = this.container_elem.querySelector(
".extra-network-cards-content .clusterize-loading"
);
const cards_no_data_elem = this.container_elem.querySelector(
".extra-network-cards-content .clusterize-no-data"
);
// need to store backup of these since they are removed on clusterize clear.
// we re-apply them next time we call setup.
this.cards_list_no_data_html_bkp = cards_no_data_elem.outerHTML;
this.cards_list_loading_html_bkp = cards_loading_elem.outerHTML;
this.tree_list_no_data_html_bkp = tree_no_data_elem.outerHTML;
this.tree_list_loading_html_bkp = tree_loading_elem.outerHTML;
await Promise.all([this.setupTreeList(), this.setupCardsList()]);
const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view");
@ -256,8 +253,6 @@ class ExtraNetworksTab {
initData: this.onInitTreeData.bind(this),
fetchData: this.onFetchTreeData.bind(this),
},
no_data_html: this.tree_list_no_data_html_bkp,
loading_html: this.tree_list_loading_html_bkp,
});
await this.tree_list.setup();
}
@ -276,8 +271,6 @@ class ExtraNetworksTab {
initData: this.onInitCardsData.bind(this),
fetchData: this.onFetchCardsData.bind(this),
},
no_data_html: this.cards_list_no_data_html_bkp,
loading_html: this.cards_list_loading_html_bkp,
});
await this.cards_list.setup();
}
@ -345,11 +338,53 @@ class ExtraNetworksTab {
this.controls_elem.classList.add("hidden");
}
updateSplashState({cards_list_state, tree_list_state} = {}) {
const _handle_state = (state_str, loading_elem, no_data_elem) => {
switch (state_str) {
case "loading":
no_data_elem.classList.add("hidden");
loading_elem.classList.remove("hidden");
break;
case "no_data":
loading_elem.classList.add("hidden");
no_data_elem.classList.remove("hidden");
break;
case "show":
no_data_elem.classList.add("hidden");
loading_elem.classList.add("hidden");
break;
default:
break;
}
};
if (isString(cards_list_state)) {
this.cards_list_splash_state = cards_list_state;
}
_handle_state(
cards_list_state,
this.cards_list_loading_splash_elem,
this.cards_list_no_data_splash_elem,
);
if (isString(tree_list_state)) {
this.tree_list_splash_state = tree_list_state;
}
_handle_state(
tree_list_state,
this.tree_list_loading_splash_elem,
this.tree_list_no_data_splash_elem,
);
}
async #refresh() {
this.updateSplashState({cards_list_state: "loading", tree_list_state: "loading"});
try {
await this.waitForServerPageReady();
} catch (error) {
console.error(`refresh error: ${error.message}`);
this.updateSplashState({cards_list_state: "no_data", tree_list_state: "no_data"});
return;
}
const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view");
@ -370,7 +405,7 @@ class ExtraNetworksTab {
resize_handle_row.classList.toggle("resize-handle-hidden", div_tree.classList.contains("hidden"));
await Promise.all([this.setupTreeList(), this.setupCardsList()]);
this.tree_list.enable(true);
this.tree_list.enable(this.tree_view_en);
this.cards_list.enable(true);
await Promise.all([this.tree_list.load(true), this.cards_list.load(true)]);
// apply the previous sort/filter options
@ -391,8 +426,12 @@ class ExtraNetworksTab {
async load(show_prompt, show_neg_prompt) {
this.movePrompt(show_prompt, show_neg_prompt);
this.updateSplashState({
cards_list_state: this.cards_list_splash_state,
tree_list_state: this.tree_list_splash_state,
});
this.showControls();
this.tree_list.enable(true);
this.tree_list.enable(this.tree_view_en);
this.cards_list.enable(true);
await Promise.all([this.tree_list.load(), this.cards_list.load()]);
}
@ -449,10 +488,12 @@ class ExtraNetworksTab {
}
async onInitCardsData() {
this.updateSplashState({cards_list_state: "loading"});
try {
await this.waitForServerPageReady();
} catch (error) {
console.error(`onInitCardsData error: ${error.message}`);
this.updateSplashState({cards_list_state: "no_data"});
return {};
}
@ -474,18 +515,26 @@ class ExtraNetworksTab {
const opts = {timeout_ms: timeout_ms, response_handler: response_handler};
try {
const response = await fetchWithRetryAndBackoff(url, payload, opts);
if (Object.keys(response.data).length === 0) {
this.updateSplashState({cards_list_state: "no_data"});
} else {
this.updateSplashState({cards_list_state: "show"});
}
return response.data;
} catch (error) {
console.error(`onInitCardsData error: ${error.message}`);
this.updateSplashState({cards_list_state: "no_data"});
return {};
}
}
async onInitTreeData() {
this.updateSplashState({tree_list_state: "loading"});
try {
await this.waitForServerPageReady();
} catch (error) {
console.error(`onInitTreeData error: ${error.message}`);
this.updateSplashState({tree_list_state: "no_data"});
return {};
}
@ -507,9 +556,15 @@ class ExtraNetworksTab {
const opts = {timeout_ms: timeout_ms, response_handler: response_handler};
try {
const response = await fetchWithRetryAndBackoff(url, payload, opts);
if (Object.keys(response.data).length === 0) {
this.updateSplashState({tree_list_state: "no_data"});
} else {
this.updateSplashState({tree_list_state: "show"});
}
return response.data;
} catch (error) {
console.error(`onInitTreeData error: ${error.message}`);
this.updateSplashState({tree_list_state: "no_data"});
return {};
}
}
@ -1061,6 +1116,13 @@ async function extraNetworksControlTreeViewOnClick(event) {
const resize_handle_row = tab.tree_list.scroll_elem.closest(".resize-handle-row");
resize_handle_row.classList.toggle("resize-handle-hidden", !tab.tree_view_en);
// If the tree list hasn't loaded yet, we need to force it to load.
// This can happen if tree view is disabled by default or before refresh.
// Then after refresh, enabling the tree view will require a load.
if (tab.tree_view_en && !tab.tree_list.initial_load) {
await tab.tree_list.load();
}
if ((tab.tree_view_en && tab.dirs_view_en) || (!tab.tree_view_en && tab.dirs_view_en)) {
tab.setDirectoryButtons({source_class: ".extra-network-dirs-view-button"});
} else if (tab.tree_view_en) {
@ -1117,6 +1179,7 @@ function extraNetworksControlRefreshOnClick(event) {
const btn = event.target.closest(".extra-network-control--refresh");
const controls = btn.closest(".extra-network-controls");
const tab = extra_networks_tabs[controls.dataset.tabnameFull];
tab.updateSplashState({cards_list_state: "loading", tree_list_state: "loading"});
// We want to reset tab lists on refresh click so that the viewing area
// shows that it is loading new data.
tab.tree_list.clear();

20
javascript/extraNetworksClusterize.js
View file

@ -39,6 +39,7 @@ class ExtraNetworksClusterize extends Clusterize {
sort_fn = this.default_sort_fn;
tabname = "";
extra_networks_tabname = "";
initial_load = false;
// Override base class defaults
default_sort_mode_str = "divId";
@ -91,6 +92,7 @@ class ExtraNetworksClusterize extends Clusterize {
}
destroy() {
this.initial_load = false;
this.data_obj = {};
this.data_obj_keys_sorted = [];
if (this.lru instanceof LRUCache) {
@ -101,12 +103,13 @@ class ExtraNetworksClusterize extends Clusterize {
}
clear() {
this.initial_load = false;
this.data_obj = {};
this.data_obj_keys_sorted = [];
if (this.lru instanceof LRUCache) {
this.lru.clear();
}
super.clear(this.loading_html);
super.clear();
}
async load(force_init_data) {
@ -114,6 +117,7 @@ class ExtraNetworksClusterize extends Clusterize {
return;
}
this.initial_load = true;
if (!this.setup_has_run) {
await this.setup();
} else if (force_init_data) {
@ -174,17 +178,7 @@ class ExtraNetworksClusterize extends Clusterize {
}
idxRangeToDivIds(idx_start, idx_end) {
const n_items = idx_end - idx_start;
const div_ids = [];
for (const div_id of this.data_obj_keys_sorted.slice(idx_start)) {
if (this.data_obj[div_id].visible) {
div_ids.push(div_id);
}
if (div_ids.length >= n_items) {
break;
}
}
return div_ids;
return this.data_obj_keys_sorted.slice(idx_start, idx_end);
}
async fetchDivIds(div_ids) {
@ -272,7 +266,7 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
clear() {
this.selected_div_id = null;
super.clear(this.loading_html);
super.clear();
}
async onRowSelected(elem) {