mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2026-02-02 13:51:40 -08:00
fix more bugs. clean up more.
This commit is contained in:
Sj-Si
parent
8c8536f34e
commit
ef29f65a25
6 changed files with 497 additions and 261 deletions
|
|
@ -2,6 +2,46 @@
|
|||
const INT_COLLATOR = new Intl.Collator([], { numeric: true });
|
||||
const STR_COLLATOR = new Intl.Collator("en", { numeric: true, sensitivity: "base" });
|
||||
|
||||
const isString = x => typeof x === "string" || x instanceof String;
|
||||
const isStringLogError = x => {
|
||||
if (isString(x)) {
|
||||
return true;
|
||||
}
|
||||
console.error("expected string, got:", typeof x);
|
||||
return false;
|
||||
};
|
||||
const isNull = x => typeof x === "null" || x === null;
|
||||
const isUndefined = x => typeof x === "undefined" || x === undefined;
|
||||
// checks both null and undefined for simplicity sake.
|
||||
const isNullOrUndefined = x => isNull(x) || isUndefined(x);
|
||||
const isNullOrUndefinedLogError = x => {
|
||||
if (isNullOrUndefined(x)) {
|
||||
return true;
|
||||
}
|
||||
console.error("Variable is null/undefined.");
|
||||
return false;
|
||||
};
|
||||
const isElement = x => x instanceof Element;
|
||||
const isElementLogError = x => {
|
||||
if (isElement(x)) {
|
||||
return true;
|
||||
}
|
||||
console.error("expected element type, got:", typeof x);
|
||||
return false;
|
||||
}
|
||||
|
||||
const getElementByIdLogError = x => {
|
||||
let elem = gradioApp().getElementById(x);
|
||||
isElementLogError(elem);
|
||||
return elem;
|
||||
};
|
||||
|
||||
const querySelectorLogError = x => {
|
||||
let elem = gradioApp().querySelector(x);
|
||||
isElementLogError(elem);
|
||||
return elem;
|
||||
}
|
||||
|
||||
function compress(string) {
|
||||
/** Compresses a string into a base64 encoded GZipped string. */
|
||||
const cs = new CompressionStream('gzip');
|
||||
|
|
@ -86,6 +126,7 @@ class ExtraNetworksClusterize {
|
|||
/** Base class for a clusterize list. Cannot be used directly. */
|
||||
constructor(
|
||||
{
|
||||
data_id,
|
||||
scroll_id,
|
||||
content_id,
|
||||
txt_search_elem,
|
||||
|
|
@ -100,13 +141,13 @@ class ExtraNetworksClusterize {
|
|||
callbacks: {},
|
||||
}
|
||||
) {
|
||||
if (scroll_id === undefined) {
|
||||
console.error("scroll_id is undefined!");
|
||||
}
|
||||
if (content_id === undefined) {
|
||||
console.error("content_id is undefined!");
|
||||
}
|
||||
// Do not continue if any of the required parameters are invalid.
|
||||
if (!isStringLogError(data_id)) { return; }
|
||||
if (!isStringLogError(scroll_id)) { return; }
|
||||
if (!isStringLogError(content_id)) { return; }
|
||||
if (!isElementLogError(txt_search_elem)) { return; }
|
||||
|
||||
this.data_id = data_id;
|
||||
this.scroll_id = scroll_id;
|
||||
this.content_id = content_id;
|
||||
this.txt_search_elem = txt_search_elem;
|
||||
|
|
@ -115,6 +156,17 @@ class ExtraNetworksClusterize {
|
|||
this.show_no_data_row = show_no_data_row;
|
||||
this.callbacks = callbacks;
|
||||
|
||||
this.clusterize = null;
|
||||
|
||||
this.data_elem = null;
|
||||
this.scroll_elem = null;
|
||||
this.content_elem = null;
|
||||
|
||||
this.resize_observer = null;
|
||||
this.resize_observer_timer = null;
|
||||
this.resize_observer_timeout_ms = 250;
|
||||
this.element_observer = null;
|
||||
|
||||
this.enabled = false;
|
||||
|
||||
this.encoded_str = "";
|
||||
|
|
@ -122,29 +174,23 @@ class ExtraNetworksClusterize {
|
|||
this.no_data_text = "Directory is empty.";
|
||||
this.no_data_class = "nocards";
|
||||
|
||||
this.scroll_elem = document.getElementById(this.scroll_id);
|
||||
this.content_elem = document.getElementById(this.content_id);
|
||||
|
||||
this.n_rows = 1;
|
||||
this.n_cols = 1;
|
||||
|
||||
this.sort_fn = this.sortByDivId;
|
||||
this.sort_reverse = false;
|
||||
|
||||
this.data_obj = {};
|
||||
this.data_obj_keys_sorted = [];
|
||||
|
||||
this.clusterize = new Clusterize(
|
||||
{
|
||||
rows: [],
|
||||
scrollId: this.scroll_id,
|
||||
contentId: this.content_id,
|
||||
rows_in_block: this.rows_in_block,
|
||||
blocks_in_cluster: this.blocks_in_cluster,
|
||||
show_no_data_row: this.show_no_data_row,
|
||||
callbacks: this.callbacks,
|
||||
}
|
||||
);
|
||||
this.sort_fn = this.sortByDivId;
|
||||
this.sort_reverse = false;
|
||||
|
||||
Promise.all([
|
||||
waitForElement(`#${this.data_id}`).then((elem) => this.data_elem = elem),
|
||||
waitForElement(`#${this.scroll_id}`).then((elem) => this.scroll_elem = elem),
|
||||
waitForElement(`#${this.content_id}`).then((elem) => this.content_elem = elem),
|
||||
]).then(() => {
|
||||
this.setupElementObservers();
|
||||
this.setupResizeHandlers();
|
||||
});
|
||||
}
|
||||
|
||||
enable(enabled) {
|
||||
|
|
@ -157,22 +203,35 @@ class ExtraNetworksClusterize {
|
|||
}
|
||||
}
|
||||
|
||||
parseJson(encoded_str) {
|
||||
// Skip parsing if the string hasnt actually updated.
|
||||
if (this.encoded_str === encoded_str) {
|
||||
return;
|
||||
}
|
||||
|
||||
Promise.resolve(encoded_str)
|
||||
.then(v => decompress(v))
|
||||
.then(v => JSON.parse(v))
|
||||
.then(v => this.updateJson(v))
|
||||
.then(() => this.encoded_str = encoded_str);
|
||||
load() {
|
||||
return waitForElement(`#${this.data_id}`)
|
||||
.then((elem) => this.data_elem = elem)
|
||||
.then(() => this.parseJson(this.data_elem.dataset.json))
|
||||
.then(() => this.init())
|
||||
.then(() => this.repair())
|
||||
.then(() => this.applyFilter());
|
||||
}
|
||||
|
||||
updateJson(json) {
|
||||
parseJson(encoded_str) { /** promise */
|
||||
return new Promise(resolve => {
|
||||
// Skip parsing if the string hasnt actually updated.
|
||||
if (this.encoded_str === encoded_str) {
|
||||
console.log("no change");
|
||||
return resolve();
|
||||
}
|
||||
return resolve(
|
||||
Promise.resolve(encoded_str)
|
||||
.then(v => decompress(v))
|
||||
.then(v => JSON.parse(v))
|
||||
.then(v => this.updateJson(v))
|
||||
.then(() => {console.log("parse json done"); this.encoded_str = encoded_str; })
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
updateJson(json) { /** promise */
|
||||
/** Must be overridden by inherited class. */
|
||||
return;
|
||||
return new Promise(resolve => {return resolve();});
|
||||
}
|
||||
|
||||
sortByDivId() {
|
||||
|
|
@ -185,12 +244,12 @@ class ExtraNetworksClusterize {
|
|||
if (this.sort_reverse) {
|
||||
this.data_obj_keys_sorted = this.data_obj_keys_sorted.reverse();
|
||||
}
|
||||
this.updateRows();
|
||||
}
|
||||
|
||||
applyFilter() {
|
||||
// the base class filter just sorts the values and updates the rows.
|
||||
/** Must be implemented by subclasses. */
|
||||
this.applySort();
|
||||
this.updateRows();
|
||||
}
|
||||
|
||||
filterRows(obj) {
|
||||
|
|
@ -220,106 +279,275 @@ class ExtraNetworksClusterize {
|
|||
return false;
|
||||
}
|
||||
|
||||
fixElementDOM() {
|
||||
/** Fixes element association in DOM. Returns true if element was replaced in DOM. */
|
||||
// If association for elements is broken, replace them with instance version.
|
||||
if (!this.scroll_elem.isConnected || !this.content_elem.isConnected) {
|
||||
document.getElementById(this.scroll_id).replaceWith(this.scroll_elem);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
updateRows() {
|
||||
this.clusterize.refresh();
|
||||
|
||||
// If we don't have any entries to the list, then just clear the clusterize
|
||||
// area and return.
|
||||
if (this.data_obj_keys_sorted.length === 0 || !(this.data_obj_keys_sorted[0] in this.data_obj)) {
|
||||
this.clusterize.clear();
|
||||
// If we don't have any entries in the dataset, then just clear the list and return.
|
||||
if (this.data_obj_keys_sorted.length === 0 || Object.keys(this.data_obj).length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.fixElementDOM()) {
|
||||
// Add single item so we can calculate the dimensions without wasting time.
|
||||
this.clusterize.clear();
|
||||
this.clusterize.update([this.data_obj[this.data_obj_keys_sorted[0]].element.outerHTML]);
|
||||
}
|
||||
this.refresh();
|
||||
|
||||
this.updateItemDims();
|
||||
// Clear the list before adding new items to prevent weird scrolling issues.
|
||||
this.clusterize.clear();
|
||||
this.clusterize.update(this.filterRows(this.data_obj));
|
||||
// Rebuild with `force=false` so we only rebuild if dimensions change.
|
||||
this.rebuild(false);
|
||||
}
|
||||
|
||||
nrows() {
|
||||
return this.clusterize.getRowsAmount();
|
||||
}
|
||||
recalculateDims() {
|
||||
let rebuild_required = false;
|
||||
let clear_before_return = false;
|
||||
|
||||
updateItemDims() {
|
||||
if (!this.enabled) {
|
||||
// Inactive list is not displayed on screen. Would error if trying to resize.
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
if (this.nrows() <= 0) {
|
||||
if (Object.keys(this.data_obj).length === 0 || this.data_obj_keys_sorted.length === 0) {
|
||||
// If there is no data then just skip.
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.content_elem.isConnected || this.content_elem.firstElementChild === undefined || this.content_elem.firstElementChild === null) {
|
||||
// Elements do not exist on page yet or content is empty. Skip.
|
||||
return;
|
||||
// If no rows exist, we need to add one so we can calculate rows/cols.
|
||||
// We remove this row before returning.
|
||||
if (this.rowCount() === 0){// || this.content_elem.innerHTML === "") {
|
||||
this.clear();
|
||||
this.update([this.data_obj[this.data_obj_keys_sorted[0]].element.outerHTML]);
|
||||
clear_before_return = true;
|
||||
}
|
||||
|
||||
|
||||
// Calculate the visible rows and colums for the clusterize-content area.
|
||||
let n_cols = calcColsPerRow(this.content_elem);
|
||||
let n_rows = calcRowsPerCol(this.content_elem.parentElement, this.content_elem);
|
||||
|
||||
n_cols = isNaN(n_cols) || n_cols <= 0 ? 1 : n_cols;
|
||||
n_rows = isNaN(n_rows) || n_rows <= 0 ? 1 : n_rows;
|
||||
let n_rows = calcRowsPerCol(this.scroll_elem, this.content_elem);
|
||||
n_cols = (isNaN(n_cols) || n_cols <= 0) ? 1 : n_cols;
|
||||
n_rows = (isNaN(n_rows) || n_rows <= 0) ? 1 : n_rows;
|
||||
|
||||
if (n_cols != this.n_cols || n_rows != this.n_rows) {
|
||||
// Sizes have changed. Update the instance values.
|
||||
this.n_cols = n_cols;
|
||||
this.n_rows = n_rows;
|
||||
this.rows_in_block = this.n_rows;
|
||||
rebuild_required = true;
|
||||
}
|
||||
|
||||
// If we added a temporary row earlier, remove before returning.
|
||||
if (clear_before_return) {
|
||||
this.clear();
|
||||
}
|
||||
|
||||
return rebuild_required;
|
||||
}
|
||||
|
||||
waitForElements() {
|
||||
return new Promise(resolve => {
|
||||
Promise.all([
|
||||
waitForElement(`#${this.data_id}`),
|
||||
waitForElement(`#${this.scroll_id}`),
|
||||
waitForElement(`#${this.content_id}`),
|
||||
]).then(() => {
|
||||
return resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
repair() {
|
||||
/** Fixes element association in DOM. Returns true if element was replaced in DOM. */
|
||||
// If association for elements is broken, replace them with instance version.
|
||||
if (!this.scroll_elem.isConnected || !this.content_elem.isConnected) {
|
||||
gradioApp().getElementById(this.scroll_id).replaceWith(this.scroll_elem);
|
||||
// Fix resize observers since they are bound to each element individually.
|
||||
if (!isNullOrUndefined(this.resize_observer)) {
|
||||
this.resize_observer.disconnect();
|
||||
this.resize_observer.observe(this.scroll_elem);
|
||||
this.resize_observer.observe(this.content_elem);
|
||||
}
|
||||
// Make sure to refresh forcefully after updating the dom.
|
||||
this.refresh(true);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
rebuild(force) {
|
||||
/** Rebuilds the clusterize object.
|
||||
* When force=true, the existing Clusterize instance is destroyed then
|
||||
* re-instantiated. When force=false or isnt passed, then we just
|
||||
* update the DOM's scroll element with this instance's scroll_elem.
|
||||
*/
|
||||
if (force) {
|
||||
this.clusterize.destroy();
|
||||
|
||||
// Get new references to elements since they may have changed.
|
||||
this.scroll_elem = document.getElementById(this.scroll_id);
|
||||
this.content_elem = document.getElementById(this.content_id);
|
||||
this.clusterize = new Clusterize(
|
||||
{
|
||||
rows: this.filterRows(this.data_obj),
|
||||
scrollId: this.scroll_id,
|
||||
contentId: this.content_id,
|
||||
rows_in_block: this.rows_in_block,
|
||||
blocks_in_cluster: this.blocks_in_cluster,
|
||||
show_no_data_row: this.show_no_data_row,
|
||||
no_data_text: this.no_data_text,
|
||||
no_data_class: this.no_data_class,
|
||||
callbacks: this.callbacks,
|
||||
}
|
||||
);
|
||||
} else {
|
||||
// If association for elements is broken, replace them with this version.
|
||||
if (!this.scroll_elem.isConnected || !this.content_elem.isConnected) {
|
||||
document.getElementById(this.scroll_id).replaceWith(this.scroll_elem);
|
||||
}
|
||||
// Only accept boolean values for `force` parameter. Default to false.
|
||||
if (force !== true) {
|
||||
force = false;
|
||||
}
|
||||
|
||||
// Apply existing sort/filter.
|
||||
this.applyFilter();
|
||||
if (isNullOrUndefined(this.clusterize)) {
|
||||
// If we have already initialized, don't do it again.
|
||||
console.log("rebuild:: init");
|
||||
this.init();
|
||||
} else if (this.recalculateDims() || force) {
|
||||
console.log("rebuild:: full", this.scroll_id);
|
||||
this.destroy();
|
||||
this.clusterize = null;
|
||||
this.init();
|
||||
} else {
|
||||
console.log("rebuild:: update", this.scroll_id);
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
|
||||
init(rows) {
|
||||
if (!isNullOrUndefined(this.clusterize)) {
|
||||
// If we have already initialized, don't do it again.
|
||||
return;
|
||||
}
|
||||
|
||||
if (isNullOrUndefined(rows) && isNullOrUndefined(this.data_obj)) {
|
||||
// data hasnt been loaded yet and we arent provided any. skip.
|
||||
return;
|
||||
}
|
||||
|
||||
if (isNullOrUndefined(rows)) {
|
||||
rows = this.data_obj;
|
||||
} else if (Array.isArray(rows) && !(rows.every(row => isString(row)))) {
|
||||
console.error("Invalid data type for rows. Expected array[string].");
|
||||
return;
|
||||
}
|
||||
|
||||
this.clusterize = new Clusterize(
|
||||
{
|
||||
rows: this.filterRows(rows),
|
||||
scrollId: this.scroll_id,
|
||||
contentId: this.content_id,
|
||||
rows_in_block: this.rows_in_block,
|
||||
blocks_in_cluster: this.blocks_in_cluster,
|
||||
show_no_data_row: this.show_no_data_row,
|
||||
no_data_text: this.no_data_text,
|
||||
no_data_class: this.no_data_class,
|
||||
callbacks: this.callbacks,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
onResize(elem_id) {
|
||||
console.log("element resized:", elem_id);
|
||||
this.updateRows();
|
||||
}
|
||||
|
||||
onElementAdded(elem_id) {
|
||||
switch(elem_id) {
|
||||
case this.data_id:
|
||||
waitForElement(`#${this.data_id}`).then((elem) => this.data_elem = elem);
|
||||
break;
|
||||
case this.scroll_id:
|
||||
this.repair();
|
||||
break;
|
||||
case this.content_id:
|
||||
this.repair();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
console.log("onElementAdded::", elem_id, document.body.contains(this.scroll_elem));
|
||||
}
|
||||
|
||||
onElementRemoved(elem_id) {
|
||||
switch(elem_id) {
|
||||
case this.data_id:
|
||||
waitForElement(`#${this.data_id}`).then((elem) => this.data_elem = elem);
|
||||
break;
|
||||
case this.scroll_id:
|
||||
this.repair();
|
||||
break;
|
||||
case this.content_id:
|
||||
this.repair();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
console.log("onElementRemoved::", elem_id, document.body.contains(this.scroll_elem));
|
||||
}
|
||||
|
||||
onDataChanged(data) {
|
||||
console.log("onDataChanged::", this.data_id);
|
||||
this.parseJson(data);
|
||||
}
|
||||
|
||||
setupElementObservers() {
|
||||
this.element_observer = new MutationObserver((mutations) => {
|
||||
for (const mutation of mutations) {
|
||||
if (mutation.type === "childList") {
|
||||
// added
|
||||
if (mutation.addedNodes.length > 0) {
|
||||
for (const node of mutation.addedNodes) {
|
||||
if (node.id === this.data_id || node.id === this.scroll_id || node.id === this.content_id) {
|
||||
this.onElementAdded(node.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
// removed
|
||||
if (mutation.removedNodes.length > 0) {
|
||||
for (const node of mutation.removedNodes) {
|
||||
if (node.id === this.data_id || node.id === this.scroll_id || node.id === this.content_id) {
|
||||
this.onElementRemoved(node.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (mutation.type === "attributes") {
|
||||
if (mutation.target.id === this.data_id && mutation.attributeName === "data-json") {
|
||||
this.onDataChanged(mutation.target.dataset.json);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
this.element_observer.observe(gradioApp(), {subtree: true, childList: true, attributes: true});
|
||||
}
|
||||
|
||||
setupResizeHandlers() {
|
||||
this.resize_observer = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
console.log("resizeObserver:", entry.target.id);
|
||||
if (entry.target.id === this.scroll_id || entry.target.id === this.content_id) {
|
||||
clearTimeout(this.resize_observer_timer);
|
||||
this.resize_observer_timer = setTimeout(() => this.onResize(entry.id), this.resize_observer_timeout_ms);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.resize_observer.observe(this.scroll_elem);
|
||||
this.resize_observer.observe(this.content_elem);
|
||||
}
|
||||
|
||||
/* ==== Clusterize.Js FUNCTION WRAPPERS ==== */
|
||||
refresh(force) {
|
||||
/** Refreshes the clusterize instance so that it can recalculate its dims. */
|
||||
if (isNullOrUndefined(this.clusterize)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Only allow boolean variables. default to false.
|
||||
if (force !== true) {
|
||||
force = false;
|
||||
}
|
||||
this.clusterize.refresh(force);
|
||||
}
|
||||
|
||||
rowCount() {
|
||||
/** Gets the total (not only visible) row count in the clusterize instance. */
|
||||
return this.clusterize.getRowsAmount();
|
||||
}
|
||||
|
||||
clear() {
|
||||
/** Removes all rows. */
|
||||
this.clusterize.clear();
|
||||
}
|
||||
|
||||
update(rows) {
|
||||
/** Adds rows from a list of element strings. */
|
||||
if (rows === undefined || rows === null) {
|
||||
// If not passed, use the default method of getting rows.
|
||||
rows = this.filterRows(this.data_obj);
|
||||
} else if (!Array.isArray(rows) || !(rows.every(row => typeof row === "string"))) {
|
||||
console.error("Invalid data type for rows. Expected array[string].");
|
||||
return;
|
||||
}
|
||||
this.clusterize.update(rows);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
/** Destroys a clusterize instance and removes its rows from the page. */
|
||||
// If `true` isnt passed, then clusterize dumps every row to the DOM.
|
||||
// This kills performance so we never want to do this.
|
||||
this.clusterize.destroy(true);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -344,54 +572,57 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
|
|||
}
|
||||
|
||||
updateJson(json) {
|
||||
var style = getComputedStyle(document.body);
|
||||
//let spacing_sm = style.getPropertyValue("--spacing-sm");
|
||||
let text_size = style.getPropertyValue("--button-large-text-size");
|
||||
for (const [k, v] of Object.entries(json)) {
|
||||
let div_id = k;
|
||||
let parsed_html = parseHtml(v)[0];
|
||||
// parent_id = -1 if item is at root level
|
||||
let parent_id = "parentId" in parsed_html.dataset ? parsed_html.dataset.parentId : -1;
|
||||
let expanded = "expanded" in parsed_html.dataset;
|
||||
let depth = Number(parsed_html.dataset.depth);
|
||||
parsed_html.style.paddingLeft = `calc(${depth} * ${text_size})`;
|
||||
parsed_html.style.boxShadow = this.getBoxShadow(depth);
|
||||
return new Promise(resolve => {
|
||||
var style = getComputedStyle(document.body);
|
||||
//let spacing_sm = style.getPropertyValue("--spacing-sm");
|
||||
let text_size = style.getPropertyValue("--button-large-text-size");
|
||||
for (const [k, v] of Object.entries(json)) {
|
||||
let div_id = k;
|
||||
let parsed_html = parseHtml(v)[0];
|
||||
// parent_id = -1 if item is at root level
|
||||
let parent_id = "parentId" in parsed_html.dataset ? parsed_html.dataset.parentId : -1;
|
||||
let expanded = "expanded" in parsed_html.dataset;
|
||||
let depth = Number(parsed_html.dataset.depth);
|
||||
parsed_html.style.paddingLeft = `calc(${depth} * ${text_size})`;
|
||||
parsed_html.style.boxShadow = this.getBoxShadow(depth);
|
||||
|
||||
// Add the updated html to the data object.
|
||||
this.data_obj[div_id] = {
|
||||
element: parsed_html,
|
||||
active: parent_id === -1, // always show root
|
||||
expanded: expanded || (parent_id === -1), // always expand root
|
||||
parent: parent_id,
|
||||
children: [], // populated later
|
||||
};
|
||||
}
|
||||
|
||||
// Build list of children for each element in dataset.
|
||||
for (const [k, v] of Object.entries(this.data_obj)) {
|
||||
if (v.parent === -1) {
|
||||
continue;
|
||||
} else if (!(v.parent in this.data_obj)) {
|
||||
console.error("parent not in data:", v.parent);
|
||||
} else {
|
||||
this.data_obj[v.parent].children.push(k);
|
||||
// Add the updated html to the data object.
|
||||
this.data_obj[div_id] = {
|
||||
element: parsed_html,
|
||||
active: parent_id === -1, // always show root
|
||||
expanded: expanded || (parent_id === -1), // always expand root
|
||||
parent: parent_id,
|
||||
children: [], // populated later
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Handle expanding of rows on initial load
|
||||
for (const [k, v] of Object.entries(this.data_obj)) {
|
||||
if (v.parent === -1) {
|
||||
// Always show root level.
|
||||
this.data_obj[k].active = true;
|
||||
} else if (this.data_obj[v.parent].expanded && this.data_obj[v.parent].active) {
|
||||
// Parent is both active and expanded. show child
|
||||
this.data_obj[k].active = true;
|
||||
} else {
|
||||
this.data_obj[k].active = false;
|
||||
// Build list of children for each element in dataset.
|
||||
for (const [k, v] of Object.entries(this.data_obj)) {
|
||||
if (v.parent === -1) {
|
||||
continue;
|
||||
} else if (!(v.parent in this.data_obj)) {
|
||||
console.error("parent not in data:", v.parent);
|
||||
} else {
|
||||
this.data_obj[v.parent].children.push(k);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.applyFilter();
|
||||
// Handle expanding of rows on initial load
|
||||
for (const [k, v] of Object.entries(this.data_obj)) {
|
||||
if (v.parent === -1) {
|
||||
// Always show root level.
|
||||
this.data_obj[k].active = true;
|
||||
} else if (this.data_obj[v.parent].expanded && this.data_obj[v.parent].active) {
|
||||
// Parent is both active and expanded. show child
|
||||
this.data_obj[k].active = true;
|
||||
} else {
|
||||
this.data_obj[k].active = false;
|
||||
}
|
||||
}
|
||||
//this.applyFilter();
|
||||
console.log("updateJson:: done", this.scroll_id);
|
||||
return resolve();
|
||||
});
|
||||
}
|
||||
|
||||
removeChildRows(div_id) {
|
||||
|
|
@ -423,17 +654,21 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
|
|||
}
|
||||
|
||||
updateJson(json) {
|
||||
for (const [k, v] of Object.entries(json)) {
|
||||
let div_id = k;
|
||||
let parsed_html = parseHtml(v)[0];
|
||||
// Add the updated html to the data object.
|
||||
this.data_obj[div_id] = {
|
||||
element: parsed_html,
|
||||
active: true,
|
||||
};
|
||||
}
|
||||
|
||||
this.applyFilter();
|
||||
return new Promise(resolve => {
|
||||
for (const [k, v] of Object.entries(json)) {
|
||||
let div_id = k;
|
||||
let parsed_html = parseHtml(v)[0];
|
||||
// Add the updated html to the data object.
|
||||
this.data_obj[div_id] = {
|
||||
element: parsed_html,
|
||||
active: true,
|
||||
};
|
||||
}
|
||||
//this.applyFilter();
|
||||
console.log("updateJson:: done", this.scroll_id);
|
||||
if (this.scroll_id.includes("textual")) { console.log(this.data_obj); }
|
||||
return resolve();
|
||||
});
|
||||
}
|
||||
|
||||
filterRows(obj) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue