Fix bug with resizegrid resetting on tab change. Add content to details view.

javascript/extraNetworks.js

@@ -5,6 +5,7 @@
     ExtraNetworksClusterizeCardList,
     waitForElement,
     isString,
+    isObject,
     isElement,
     isElementThrowError,
     fetchWithRetryAndBackoff,
@@ -395,7 +396,10 @@ class ExtraNetworksTab {
         this.resize_grid.toggle({elem: div_dirs, override: this.dirs_view_en});
         this.resize_grid.toggle({elem: div_tree, override: this.tree_view_en});
         this.resize_grid.toggle({elem: div_card, override: this.card_view_en});
-        this.resize_grid.toggle({elem: div_dets, override: this.dets_view_en});
+        this.resize_grid.toggle({
+            elem: div_dets,
+            override: this.dets_view_en && div_dets.innerHTML !== "",
+        });
 
         // apply the previous sort/filter options
         await this.applyListButtonStates();
@@ -462,7 +466,10 @@ class ExtraNetworksTab {
         this.resize_grid.toggle({elem: div_dirs, override: this.dirs_view_en});
         this.resize_grid.toggle({elem: div_tree, override: this.tree_view_en});
         this.resize_grid.toggle({elem: div_card, override: this.card_view_en});
-        this.resize_grid.toggle({elem: div_dets, override: this.dets_view_en});
+        this.resize_grid.toggle({
+            elem: div_dets,
+            override: this.dets_view_en && div_dets.innerHTML !== "",
+        });
     }
 
     unload() {
@@ -911,6 +918,45 @@ class ExtraNetworksTab {
         }
         this.applyDirectoryFilters();
     }
+
+    showDetsView(source_elem) {
+        const div_dets = this.container_elem.querySelector(".extra-network-content--dets-view");
+
+        const _popup = (msg) => {
+            const elem = document.createElement("pre");
+            elem.classList.add("popup-metadata");
+            elem.textContent = msg;
+            popup(elem);
+        };
+
+        const _clear_details = () => {
+            div_dets.innerHTML = "";
+        };
+
+        const _show_details = (response) => {
+            if (!isObject(response) || !isString(response.html)) {
+                console.warn("Error parsing model details.");
+                div_dets.innerHTML = "Error parsing model details.";
+                return;
+            }
+            div_dets.innerHTML = response.html;
+        };
+
+        _clear_details();
+
+        requestGet(
+            "./sd_extra_networks/get-model-details",
+            {
+                extra_networks_tabname: this.extra_networks_tabname,
+                model_name: source_elem.dataset.name,
+            },
+            (response) => _show_details(response),
+            () => _popup("Error fetching model details."),
+        );
+        if (this.dets_view_en) {
+            this.resize_grid.toggle({elem: div_dets, override: true});
+        }
+    }
 }
 
 function popup(contents) {
@@ -1308,21 +1354,31 @@ async function extraNetworksControlCardViewOnClick(event) {
 function extraNetworksControlDetsViewOnClick(event) {
     /** Handles `onclick` events for the Card Details View button.
      *
-     * Toggles the card details view in the extra networks pane.
+     *  Toggles the card details view in the extra networks pane.
+     *
+     *  This button is unique in that we allow the user to enable/disable it
+     *  regardless of whether we actually show the details view. This is because
+     *  the details view only actually shows when the user has a model selected.
+     *  Otherwise, the view is always hidden.
      */
     const btn = event.target.closest(".extra-network-control--dets-view");
     const controls = btn.closest(".extra-network-controls");
     const tab = extra_networks_tabs[controls.dataset.tabnameFull];
 
+    btn.toggleAttribute("data-selected");
+    tab.dets_view_en = "selected" in btn.dataset;
+
     const div_dets = tab.container_elem.querySelector(".extra-network-content--dets-view");
+
     try {
-        tab.resize_grid.toggle({elem: div_dets, override: !("selected" in btn.dataset)});
+        tab.resize_grid.toggle({
+            elem: div_dets,
+            override: tab.dets_view_en && div_dets.innerHTML !== "",
+        });
     } catch (error) {
         console.warn("Error attempting to enable dets_view:", error);
         return;
     }
-    btn.toggleAttribute("data-selected");
-    tab.dets_view_en = "selected" in btn.dataset;
 }
 
 function extraNetworksControlRefreshOnClick(event) {
@@ -1376,11 +1432,6 @@ function extraNetworksSelectModel({tab, prompt, neg_prompt, allow_neg, checkpoin
 }
 
 function extraNetworksCardOnClick(event) {
-    // Do not select the card if its child button-row is the target of the event.
-    if (event.target.closest(".button-row")) {
-        return;
-    }
-
     const btn = event.target.closest(".card");
     const pane = btn.closest(".extra-network-pane");
     const tab = extra_networks_tabs[pane.dataset.tabnameFull];
@@ -1398,6 +1449,34 @@ function extraNetworksCardOnClick(event) {
     });
 }
 
+function extraNetworksDetsViewCloseOnClick(event) {
+    const btn = event.target.closest(".model-info--close");
+    const pane = btn.closest(".extra-network-pane");
+    const tab = extra_networks_tabs[pane.dataset.tabnameFull];
+
+    const div_dets = tab.container_elem.querySelector(".extra-network-content--dets-view");
+    div_dets.innerHTML = "";
+    tab.resize_grid.toggle({elem: div_dets, override: false});
+}
+
+function extraNetworksDetsViewTagOnClick(event) {
+    const btn = event.target.closest(".model-info--tag");
+    const pane = btn.closest(".extra-network-pane");
+    const tab = extra_networks_tabs[pane.dataset.tabnameFull];
+
+    const tag_name_elem = btn.querySelector(".model-info--tag-name");
+    isElementThrowError(tag_name_elem);
+    extraNetworksUpdatePrompt(tab.active_prompt_elem, tag_name_elem.textContent);
+}
+
+function extraNetworksCardOnLongPress(event) {
+    const btn = event.target.closest(".card");
+    const pane = btn.closest(".extra-network-pane");
+    const tab = extra_networks_tabs[pane.dataset.tabnameFull];
+
+    tab.showDetsView(btn);
+}
+
 function extraNetworksTreeFileOnClick(event) {
     // Do not select the row if its child button-row is the target of the event.
     if (event.target.closest(".tree-list-item-action")) {
@@ -1674,7 +1753,6 @@ function extraNetworksSetupEventDelegators() {
 
     const click_event_map = {
         ".tree-list-item--file": extraNetworksTreeFileOnClick,
-        ".card": extraNetworksCardOnClick,
         ".copy-path-button": extraNetworksBtnCopyPathOnClick,
         ".edit-button": extraNetworksBtnEditMetadataOnClick,
         ".metadata-button": extraNetworksBtnShowMetadataOnClick,
@@ -1717,6 +1795,19 @@ function extraNetworksSetupEventDelegators() {
             selector: ".extra-network-dirs-view-button",
             handler: extraNetworksBtnDirsViewItemOnClick,
         },
+        {
+            selector: ".card",
+            negative: ".button-row",
+            handler: extraNetworksCardOnClick,
+        },
+        {
+            selector: ".model-info--close",
+            handler: extraNetworksDetsViewCloseOnClick,
+        },
+        {
+            selector: ".model-info--tag",
+            handler: extraNetworksDetsViewTagOnClick,
+        }
     ];
 
     const short_ctrl_press_event_map = [
@@ -1752,6 +1843,11 @@ function extraNetworksSetupEventDelegators() {
             selector: ".extra-network-dirs-view-button",
             handler: extraNetworksBtnDirsViewItemOnLongPress,
         },
+        {
+            selector: ".card",
+            negative: ".button-row",
+            handler: extraNetworksCardOnLongPress,
+        },
     ];
 
     const long_ctrl_press_event_map = [

javascript/resizeGrid.js

@@ -842,6 +842,8 @@ class ResizeGrid extends ResizeGridAxis {
             axis: axis,
             callbacks: callbacks,
         });
+
+        this.elem.id = id;
     }
 
     destroy() {
@@ -1013,7 +1015,7 @@ class ResizeGrid extends ResizeGridAxis {
 
         this.resize_observer = new ResizeObserver((entries) => {
             for (const entry of entries) {
-                if (entry.target.id === this.elem.id) {
+                if (entry.target.id === this.id) {
                     clearTimeout(this.resize_observer_timer);
                     this.resize_observer_timer = setTimeout(() => {
                         this.onResize();
@@ -1157,6 +1159,18 @@ class ResizeGrid extends ResizeGridAxis {
     onResize() {
         /** Resizes grid items on resize observer events. */
         const curr_dims = this.elem.getBoundingClientRect();
+
+        // If height and width are 0, this indicates the element is not visible anymore.
+        // We don't want to do anything if the element isn't visible.
+        if (curr_dims.height === 0 && curr_dims.width === 0) {
+            return;
+        }
+
+        // Do nothing if the dimensions haven't changed.
+        if (JSON.stringify(curr_dims) === JSON.stringify(this.prev_dims)) {
+            return;
+        }
+
         const d_w = curr_dims.width - this.prev_dims.width;
         const d_h = curr_dims.height - this.prev_dims.height;