From b5f3a85f86982514c084c413108b891c0c74b901 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Mon, 25 Mar 2024 16:43:29 -0400
Subject: [PATCH] fix more bugs. not happy with how refreshing completely
 regenerates html. maybe should only update the data json. also maybe look
 into sharing data json between img2img and txt2img to reduce size of dom.

---
 html/extra-networks-pane.html             | 58 +++++++++++++----------
 javascript/extraNetworks.js               | 34 ++++++++-----
 javascript/extraNetworksClusterizeList.js | 13 +++--
 modules/ui_extra_networks.py              | 37 ++++++++-------
 style.css                                 |  4 +-
 5 files changed, 88 insertions(+), 58 deletions(-)

diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index 17631949b..1abded7ee 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -20,9 +20,11 @@
         <div class="extra-network-controls--container">
             <div class="extra-network-controls--header">Sort Mode</div>
             <div class="extra-network-controls--buttons">
-                <button class="extra-network-control extra-network-control--sort-mode {sort_path_active}"
-                    data-sort-mode="path" title="Sort by path"
-                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                <button class="extra-network-control extra-network-control--sort-mode"
+                    title="Sort by path"
+                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    data-sort-mode="path"
+                    {btn_sort_mode_path_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                         stroke-width="1">
@@ -32,18 +34,22 @@
                         <line x1="9" y1="10" x2="10.5" y2="11.5" />
                     </svg>
                 </button>
-                <button class="extra-network-control extra-network-control--sort-mode {sort_name_active}"
-                    data-sort-mode="name" title="Sort by name"
-                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                <button class="extra-network-control extra-network-control--sort-mode"
+                    title="Sort by name"
+                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    data-sort-mode="name"
+                    {btn_sort_mode_name_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke-width="1" d="M 2 12 L 6 3 L 10 12 M 3.5 9 L 8.5 9" />
                         <path stroke-width="1" d="M 8 3 L 15 3 M 9.5 6 L 15 6 M 11 9 L 15 9 M 12.5 12 L 15 12">
                     </svg>
                 </button>
-                <button class="extra-network-control extra-network-control--sort-mode {sort_date_created_active}"
-                    data-sort-mode="date_created" title="Sort by date created"
-                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                <button class="extra-network-control extra-network-control--sort-mode"
+                    title="Sort by date created"
+                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    data-sort-mode="date_created"
+                    {btn_sort_mode_date_created_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
                         <rect x="1" y="2" width="14" height="12" rx="2" fill="none" />
@@ -55,9 +61,11 @@
                         <line x1="12" y1="1" x2="12" y2="3" />
                     </svg>
                 </button>
-                <button class="extra-network-control extra-network-control--sort-mode {sort_date_modified_active}"
-                    data-sort-mode="date_modified" title="Sort by date modified"
-                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                <button class="extra-network-control extra-network-control--sort-mode"
+                    title="Sort by date modified"
+                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    data-sort-mode="date_modified"
+                    {btn_sort_mode_date_modified_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="none" stroke="currentColor" stroke-width="1">
                         <g stroke-linecap="round" stroke-linejoin="round">
@@ -77,9 +85,10 @@
         <div class="extra-network-controls--container">
             <div class="extra-network-controls--header">Sort Order</div>
             <div class="extra-network-controls--buttons">
-                <button class="extra-network-control extra-network-control--sort-dir" data-sort-dir="ascending"
-                    title="Sort ascending"
-                    onclick="extraNetworksControlSortDirOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                <button class="extra-network-control extra-network-control--sort-dir"
+                    title="Sort {data_sort_dir}"
+                    onclick="extraNetworksControlSortDirOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    data-sort-dir="{data_sort_dir}">
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                         <path id="extra-network-control--sort-dir-icon-ascending" d="M 8 1 L 3 7 L 13 7 Z" />
@@ -92,9 +101,10 @@
             <div class="extra-network-controls--header">View Mode</div>
             <div class="extra-network-controls--buttons">
                 <button id="{tabname}_{extra_networks_tabname}_extra_dirs_view"
-                    class="extra-network-control extra-network-control--dirs-view {btn_dirs_view_enabled_class}"
+                    class="extra-network-control extra-network-control--dirs-view"
                     title="Enable Directory View"
-                    onclick="extraNetworksControlDirsViewOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                    onclick="extraNetworksControlDirsViewOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    {btn_dirs_view_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="currentColor" stroke="none">
                         <rect x="0" y="6" width="4" height="4" rx="1" />
@@ -103,9 +113,10 @@
                     </svg>
                 </button>
                 <button id="{tabname}_{extra_networks_tabname}_extra_tree_view"
-                    class="extra-network-control extra-network-control--tree-view {btn_tree_view_enabled_class}"
+                    class="extra-network-control extra-network-control--tree-view"
                     title="Enable Tree View"
-                    onclick="extraNetworksControlTreeViewOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                    onclick="extraNetworksControlTreeViewOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    {btn_tree_view_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="currentColor" stroke="none">
                         <rect x="3" y="0" width="4" height="4" rx="1" />
@@ -135,21 +146,20 @@
     <div id="{tabname}_{extra_networks_tabname}_pane_content"
         class="extra-network-content--container">
         <div id='{tabname}_{extra_networks_tabname}_dirs'
-            class="extra-network-content extra-network-content--dirs {dirs_default_display_class}">
+            class="extra-network-content extra-network-content--dirs {dirs_view_hidden_cls}">
             {dirs_html}
         </div>
         <div class="extra-network-content extra-network-content--cards resize-handle-row">
-            <div class="extra-network-content resize-handle-col"
-                style='flex-basis: {extra_networks_tree_view_default_width}px;'>
+            <div class="extra-network-content resize-handle-col {tree_view_hidden_cls}" style="{tree_view_style}">
                 <div id='{tabname}_{extra_networks_tabname}_tree_list_scroll_area'
-                    class='extra-network-tree clusterize-scroll {tree_default_display_class}'>
+                    class='extra-network-tree clusterize-scroll'>
                     <div id='{tabname}_{extra_networks_tabname}_tree_list_content_area'
                         class='extra-network-tree-content clusterize-content'>
                         <div class="clusterize-no-data">Loading...</div>
                     </div>
                 </div>
             </div>
-            <div class="extra-network-content resize-handle-col" style='flex-grow: 1;'>
+            <div class="extra-network-content resize-handle-col" style="{cards_view_style}">
                 <div id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area'
                     class='extra-network-cards clusterize-scroll'>
                     <div id='{tabname}_{extra_networks_tabname}_cards_list_content_area'
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 06f76192f..ff6130a7d 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -191,11 +191,11 @@ function extraNetworksRefreshTab(tabname_full) {
     let btn_tree_view = gradioApp().querySelector(`#${tabname_full}_extra_tree_view`);
 
     let div_dirs = gradioApp().querySelector(`#${tabname_full}_dirs`);
-    let div_tree = gradioApp().querySelector(`#${tabname_full}_tree_list_scroll_area`);
+    let div_tree = gradioApp().querySelector(`.extra-network-content.resize-handle-col:has(> #${tabname_full}_tree_list_scroll_area)`);
 
     // Remove "hidden" class if button is enabled, otherwise add it.
-    div_dirs.classList.toggle("hidden", !btn_dirs_view.classList.contains("extra-network-control--enabled"));
-    div_tree.classList.toggle("hidden", !btn_tree_view.classList.contains("extra-network-control--enabled"));
+    div_dirs.classList.toggle("hidden", !("selected" in btn_dirs_view.dataset));
+    div_tree.classList.toggle("hidden", !("selected" in btn_tree_view.dataset));
 
     waitForKeyInObject({ k: tabname_full, obj: clusterizers })
         .then(() => extraNetworkClusterizersOnTabLoad(tabname_full));
@@ -615,11 +615,11 @@ function extraNetworksControlSearchClearOnClick(event, tabname_full) {
 
 function extraNetworksControlSortModeOnClick(event, tabname_full) {
     /** Handles `onclick` events for Sort Mode buttons. */
-    event.currentTarget.parentElement.querySelectorAll('.extra-network-control--sort-mode').forEach(function (x) {
-        x.classList.remove('extra-network-control--enabled');
+    event.currentTarget.parentElement.querySelectorAll('.extra-network-control--sort-mode').forEach(elem => {
+        delete elem.dataset.selected;
     });
 
-    event.currentTarget.classList.add('extra-network-control--enabled');
+    event.currentTarget.dataset.selected = "";
 
     if (tabname_full in clusterizers) {
         clusterizers[tabname_full].cards_list.setSortMode(
@@ -654,9 +654,14 @@ function extraNetworksControlTreeViewOnClick(event, tabname_full) {
      *
      * Toggles the tree view in the extra networks pane.
      */
-    var button = event.currentTarget;
-    button.classList.toggle("extra-network-control--enabled");
-    var show = button.classList.contains("extra-network-control--enabled");
+    let show;
+    if ("selected" in event.currentTarget.dataset) {
+        delete event.currentTarget.dataset.selected;
+        show = false;
+    } else {
+        event.currentTarget.dataset.selected = "";
+        show = true;
+    }
 
     gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`).parentElement.classList.toggle("hidden", !show);
     clusterizers[tabname_full].tree_list.enable(show);
@@ -667,9 +672,14 @@ function extraNetworksControlDirsViewOnClick(event, tabname_full) {
      *
      * Toggles the directory view in the extra networks pane.
      */
-    var button = event.currentTarget;
-    button.classList.toggle("extra-network-control--enabled");
-    var show = button.classList.contains("extra-network-control--enabled");
+    let show;
+    if ("selected" in event.currentTarget.dataset) {
+        delete event.currentTarget.dataset.selected;
+        show = false;
+    } else {
+        event.currentTarget.dataset.selected = "";
+        show = true;
+    }
 
     gradioApp().getElementById(`${tabname_full}_dirs`).classList.toggle("hidden", !show);
 }
diff --git a/javascript/extraNetworksClusterizeList.js b/javascript/extraNetworksClusterizeList.js
index 5431c298b..57510e8d8 100644
--- a/javascript/extraNetworksClusterizeList.js
+++ b/javascript/extraNetworksClusterizeList.js
@@ -222,16 +222,19 @@ class ExtraNetworksClusterize {
                         this.data_obj = {};
                         this.data_obj_keys_sorted = [];
                         this.clear();
+                        this.content_elem.innerHTML = "<div class='clusterize-no-data'>Loading...</div>";
                     }
                     return v;
                 })
                 .then(v => decompress(v))
                 .then(v => JSON.parse(v))
                 .then(v => this.updateJson(v))
-                .then(() => this.encoded_str = encoded_str)
-                .then(() => this.rebuild())
-                .then(() => this.applyFilter())
-                .then(() => { return resolve(); });
+                .then(() => {
+                    this.encoded_str = encoded_str;
+                    this.rebuild();
+                    this.applyFilter();
+                    return resolve(); 
+                });
         });
     }
 
@@ -454,6 +457,7 @@ class ExtraNetworksClusterize {
                 scrollId: this.scroll_id,
                 contentId: this.content_id,
                 rows_in_block: this.rows_in_block,
+                tag: "div",
                 blocks_in_cluster: this.blocks_in_cluster,
                 show_no_data_row: this.show_no_data_row,
                 no_data_text: this.no_data_text,
@@ -822,6 +826,7 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
     updateJson(json) {
         /** Processes JSON object and adds each entry to our data object. */
         return new Promise(resolve => {
+            this.data_obj = {};
             for (const [i, [k, v]] of Object.entries(Object.entries(json))) {
                 let div_id = k;
                 let parsed_html = htmlStringToElement(v);
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 2482ca696..caf7d9d16 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -315,7 +315,7 @@ class ExtraNetworksPage:
                     div_id=div_id,
                     parent_id=parent_id,
                     tabname=tabname,
-                    label=k,
+                    label=os.path.basename(k),
                     data_depth=depth,
                     data_path=k,
                     btn_type="dir",
@@ -601,6 +601,10 @@ class ExtraNetworksPage:
         Args:
             tabname: The name of the active tab.
             empty: create an empty HTML page with no items
+            controls_state: Dictonary specifying controls on the page and
+                its `enabled` status. If a control is not specified then the default
+                setting will be used. Useful when refreshing a page so we can
+                retain the previous settings.
 
         Returns:
             HTML formatted string.
@@ -620,28 +624,29 @@ class ExtraNetworksPage:
             if "user_metadata" not in item:
                 self.read_user_metadata(item)
 
-        show_tree = shared.opts.extra_networks_tree_view_default_enabled
-
         cards_data_div = self.generate_cards_view_data_div(tabname, none_message="Loading..." if empty else None)
         tree_data_div = self.generate_tree_view_data_div(tabname)
         dirs_html = self.create_dirs_view_html(tabname)
 
-        show_dirs = shared.opts.extra_networks_dirs_view_default_enabled
-        show_tree = shared.opts.extra_networks_tree_view_default_enabled
+        sort_mode = shared.opts.extra_networks_card_order_field.lower().strip().replace(" ", "_")
+        sort_dir = shared.opts.extra_networks_card_order.lower().strip()
+        dirs_view_en = shared.opts.extra_networks_dirs_view_default_enabled
+        tree_view_en = shared.opts.extra_networks_tree_view_default_enabled
+
         return self.pane_tpl.format(**{
             "tabname": tabname,
             "extra_networks_tabname": self.extra_networks_tabname,
-            "data_sort_dir": shared.opts.extra_networks_card_order.lower().strip(),
-            "data_sort_mode": shared.opts.extra_networks_card_order_field.lower().strip(),
-            "sort_path_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Path' else '',
-            "sort_name_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Name' else '',
-            "sort_date_created_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Created' else '',
-            "sort_date_modified_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Modified' else '',
-            "btn_dirs_view_enabled_class": "extra-network-control--enabled" if show_dirs else "",
-            "btn_tree_view_enabled_class": "extra-network-control--enabled" if show_tree else "",
-            "extra_networks_tree_view_default_width": shared.opts.extra_networks_tree_view_default_width,
-            "dirs_default_display_class": "" if show_dirs else "hidden",
-            "tree_default_display_class": "" if show_tree else "hidden",
+            "data_sort_dir": sort_dir,
+            "btn_sort_mode_path_data_attributes": "data-selected" if sort_mode == "path" else "",
+            "btn_sort_mode_name_data_attributes": "data-selected" if sort_mode == "name" else "",
+            "btn_sort_mode_date_created_data_attributes": "data-selected" if sort_mode == "date_created" else "",
+            "btn_sort_mode_date_modified_data_attributes": "data-selected" if sort_mode == "date_modified" else "",
+            "btn_dirs_view_data_attributes": "data-selected" if dirs_view_en else "",
+            "btn_tree_view_data_attributes": "data-selected" if tree_view_en else "",
+            "dirs_view_hidden_cls": "" if dirs_view_en else "hidden",
+            "tree_view_hidden_cls": "" if tree_view_en else "hidden",
+            "tree_view_style": f"flex-basis: {shared.opts.extra_networks_tree_view_default_width}px;",
+            "cards_view_style": "flex-grow: 1;",
             "dirs_html": dirs_html,
             "cards_data_div": cards_data_div,
             "tree_data_div": tree_data_div,
diff --git a/style.css b/style.css
index d3ab364d1..57d938ec4 100644
--- a/style.css
+++ b/style.css
@@ -1353,11 +1353,11 @@ body.resizing .resize-handle {
     color: var(--button-secondary-text-color-hover);
 }
 
-.extra-network-control--enabled {
+.extra-network-control[data-selected] {
     background: var(--button-secondary-background-fill);
 }
 
-.extra-network-control--enabled .extra-network-control--icon {
+.extra-network-control[data-selected] .extra-network-control--icon {
     color: var(--button-secondary-text-color);
 }