From 8c8536f34ee37586e22d8d4283dc40223c76af13 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Wed, 20 Mar 2024 14:01:38 -0400
Subject: [PATCH] fix remaining known bugs. clean up code.

---
 html/extra-networks-pane.html             | 236 +++++++++++++---------
 javascript/extraNetworks.js               | 140 ++++++++-----
 javascript/extraNetworksClusterizeList.js |  83 +++++---
 modules/ui_extra_networks.py              |   2 -
 style.css                                 | 207 ++++++++++---------
 5 files changed, 396 insertions(+), 272 deletions(-)

diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index 7b7de80f1..cb9fd96af 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -1,117 +1,165 @@
 <div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane'>
     <div id="{tabname}_{extra_networks_tabname}_controls" class="extra-network-controls" style="display:none">
         <div class="extra-network-control--search">
-            <span class="extra-network-control--search-icon">
-                <svg height="16" viewBox="0 0 16 16" version="1.1" width="16">
-                    <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
-                </svg>
-            </span>
-            <input
-                id="{tabname}_{extra_networks_tabname}_extra_search"
-                class="extra-network-control--search-text"
-                type="text"
-                placeholder="Search"
-            >
-            <button role="button" class="extra-network-control extra-network-control--search-clear" onclick="extraNetworksControlSearchClearOnClick(event, '{tabname}_{extra_networks_tabname}');">
-                <svg height="16" viewBox="0 0 16 16" version="1.1" width="16">
-                    <path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path>
+            <svg class="extra-network-control--search-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">
+                <circle cx="6" cy="6" r="5" />
+                <line x1="9.75" y1="9.75" x2="13" y2="13" />
+            </svg>
+            <input id="{tabname}_{extra_networks_tabname}_extra_search" class="extra-network-control--search-text"
+                type="text" placeholder="Search">
+            <button role="button" class="extra-network-control extra-network-control--search-clear"
+                onclick="extraNetworksControlSearchClearOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                <svg class="extra-network-control--search-clear-icon" viewBox="0 0 16 16"
+                    xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
+                    <path fill="none" stroke="currentColor" d="M 5 5 L 11 11 M 5 11 L 11 5" />
+                    <circle fill="none" stroke="currentColor" cx="8" cy="8" r="7" />
                 </svg>
             </button>
         </div>
-        <small>Sort<br>Mode</small>
-        <div
-            id="{tabname}_{extra_networks_tabname}_extra_sort_path"
-            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}');"
-        >
-            <i class="extra-network-control--icon"></i>
+        <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}');">
+                    <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">
+                        <rect x="0.5" y="4" width="15" height="10" rx="1" />
+                        <path d="M 0.5 5 L 0.5 3 Q 0.5 2 1.5 2 L 6 2 Q 7 2 7 3 L 7 4" />
+                        <circle cx="7.5" cy="8.5" r="2" />
+                        <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}');">
+                    <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}');">
+                    <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" />
+                        <line x1="1" y1="6" x2="15" y2="6" />
+                        <line x1="8" y1="8" x2="8" y2="12" />
+                        <line x1="6" y1="10" x2="10" y2="10" />
+                        <line x1="4" y1="1" x2="4" y2="3" />
+                        <line x1="8" y1="1" x2="8" y2="3" />
+                        <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}');">
+                    <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">
+                            <rect x="1" y="2" width="14" height="12" rx="2" />
+                            <line x1="1" y1="6" x2="15" y2="6" />
+                            <line x1="4" y1="1" x2="4" y2="3" />
+                            <line x1="8" y1="1" x2="8" y2="3" />
+                            <line x1="12" y1="1" x2="12" y2="3" />
+                        </g>
+                        <g stroke-linecap="square" stroke-linejoin="square">
+                            <path d="M 4 9 H 10 L 12 10 L 10 11 H 4 Z M 6 9 V 10">
+                        </g>
+                    </svg>
+                </button>
+            </div>
         </div>
-        <div
-            id="{tabname}_{extra_networks_tabname}_extra_sort_name"
-            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}');"
-        >
-            <i class="extra-network-control--icon"></i>
+        <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}');">
+                    <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" />
+                        <path id="extra-network-control--sort-dir-icon-descending" d="M 8 15 L 3 9 L 13 9 Z" />
+                    </svg>
+                </button>
+            </div>
         </div>
-        <div
-            id="{tabname}_{extra_networks_tabname}_extra_sort_date_created"
-            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}');"
-        >
-            <i class="extra-network-control--icon"></i>
+        <div class="extra-network-controls--container">
+            <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}"
+                    title="Enable Directory View"
+                    onclick="extraNetworksControlDirsViewOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                    <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" />
+                        <rect x="6" y="6" width="4" height="4" rx="1" />
+                        <rect x="12" y="6" width="4" height="4" rx="1" />
+                    </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}"
+                    title="Enable Tree View"
+                    onclick="extraNetworksControlTreeViewOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                    <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" />
+                        <rect x="9" y="6" width="4" height="4" rx="1" />
+                        <rect x="9" y="12" width="4" height="4" rx="1" />
+                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                            d="M 5 5 V 14 H 8 M 5 8 H 8" />
+                    </svg>
+                </button>
+            </div>
         </div>
-        <div
-            id="{tabname}_{extra_networks_tabname}_extra_sort_date_modified"
-            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}');"
-        >
-            <i class="extra-network-control--icon"></i>
-        </div>
-
-        <small> </small>
-        <div
-            id="{tabname}_{extra_networks_tabname}_extra_sort_dir"
-            class="extra-network-control extra-network-control--sort-dir"
-            data-sort-dir="{data_sort_dir}"
-            title="Sort ascending"
-            onclick="extraNetworksControlSortDirOnClick(event, '{tabname}_{extra_networks_tabname}');"
-        >
-            <i class="extra-network-control--icon extra-network-control--icon"></i>
-        </div>
-        <small> </small>
-        <div
-            id="{tabname}_{extra_networks_tabname}_extra_dirs_view"
-            class="extra-network-control extra-network-control--dirs-view {btn_dirs_view_enabled_class}"
-            title="Enable Directory View"
-            onclick="extraNetworksControlDirsViewOnClick(event, '{tabname}_{extra_networks_tabname}');"
-        >
-            <i class="extra-network-control--icon extra-network-control--dirs-view-icon"></i>
-        </div>
-        <div
-            id="{tabname}_{extra_networks_tabname}_extra_tree_view"
-            class="extra-network-control extra-network-control--tree-view {btn_tree_view_enabled_class}"
-            title="Enable Tree View"
-            onclick="extraNetworksControlTreeViewOnClick(event, '{tabname}_{extra_networks_tabname}');"
-        >
-            <i class="extra-network-control--icon extra-network-control--tree-view-icon"></i>
-        </div>
-        <div
-            id="{tabname}_{extra_networks_tabname}_extra_refresh"
-            class="extra-network-control extra-network-control--refresh"
-            title="Refresh page"
-            onclick="extraNetworksControlRefreshOnClick(event, '{tabname}_{extra_networks_tabname}');"
-        >
-            <i class="extra-network-control--icon extra-network-control--refresh-icon"></i>
+        <div class="extra-network-controls--container">
+            <div class="extra-network-controls--header">Refresh</div>
+            <div class="extra-network-controls--buttons">
+                <button id="{tabname}_{extra_networks_tabname}_extra_refresh"
+                    class="extra-network-control extra-network-control--refresh" title="Refresh tab"
+                    onclick="extraNetworksControlRefreshOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                    <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.5" stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <path d="M 8 14 A 6 6 0 1 1 14 8 L 12 6.5 M 14 8 L 15 5.5 " />
+                    </svg>
+                </button>
+            </div>
         </div>
     </div>
-    <div id="{tabname}_{extra_networks_tabname}_pane_content" class="extra-network-content extra-network-content--container">
-        <div id='{tabname}_{extra_networks_tabname}_dirs' class="extra-network-content extra-network-content--dirs {dirs_default_display_class}">
+    <div id="{tabname}_{extra_networks_tabname}_pane_content"
+        class="extra-network-content extra-network-content--container">
+        <div id='{tabname}_{extra_networks_tabname}_dirs'
+            class="extra-network-content extra-network-content--dirs {dirs_default_display_class}">
             {dirs_html}
         </div>
         <div class="extra-network-content extra-network-content--cards resize-handle-row">
-            <div
-                id='{tabname}_{extra_networks_tabname}_tree_list_scroll_area'
-                class='extra-network-tree clusterize-scroll {tree_default_display_class}'
+            <div class="extra-network-content resize-handle-col"
                 style='flex-basis: {extra_networks_tree_view_default_width}px;'>
-                <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 id='{tabname}_{extra_networks_tabname}_tree_list_scroll_area'
+                    class='extra-network-tree clusterize-scroll {tree_default_display_class}'>
+                    <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 id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area' class='extra-network-cards clusterize-scroll' style='flex-grow: 1;'>
-                <div id='{tabname}_{extra_networks_tabname}_cards_list_content_area' class='extra-network-cards-content clusterize-content'>
-                    <div class="clusterize-no-data">Loading...</div>
+            <div class="extra-network-content resize-handle-col" style='flex-grow: 1;'>
+                <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'
+                        class='extra-network-cards-content clusterize-content'>
+                        <div class="clusterize-no-data">Loading...</div>
+                    </div>
                 </div>
             </div>
         </div>
         {tree_data_div}
         {cards_data_div}
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index fd30d085a..4f6673f81 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -5,17 +5,19 @@ const re_extranet_g_neg = /\(([^:^>]+:[\d.]+)\)/g;
 const activePromptTextarea = {};
 const clusterizers = {};
 const clusterizers_initial_load = {};
-const extra_networks_json_proxy = {};
-const extra_networks_proxy_listener = setupProxyListener(
-    extra_networks_json_proxy,
-    () => {},
-    proxyJsonUpdated,
-);
 var globalPopup = null;
 var globalPopupInner = null;
 const storedPopupIds = {};
 const extraPageUserMetadataEditors = {};
-var initialUiOptionsLoaded = false;
+// A flag used by the `waitForBool` promise to determine when we first load Ui Options.
+const initialUiOptionsLoaded = { state: false };
+// A proxy listener to detect and handle changes on JSON Data
+const extra_networks_json_proxy = {};
+const extra_networks_proxy_listener = setupProxyListener(
+    extra_networks_json_proxy,
+    () => { },
+    proxyJsonUpdated,
+);
 
 function waitForElement(selector) {
     /** Promise that waits for an element to exist in DOM. */
@@ -38,20 +40,38 @@ function waitForElement(selector) {
     });
 }
 
-function waitForInitialUiOptionsLoaded() {
+function waitForBool(o) {
+    /** Promise that waits for a boolean to be true.
+     * 
+     *  `o` must be an Object of the form:
+     *  { state: <bool value> }
+     * 
+     *  Resolves when (state === true)
+     */
     return new Promise(resolve => {
         (function _waitForBool() {
-            if (initialUiOptionsLoaded) return resolve();
+            if (o.state) {
+                return resolve();
+            }
             setTimeout(_waitForBool, 100);
         })();
     });
 }
 
-function waitForKeyInObject(obj) {
-    // obj must be object of form {obj: <object to watch for key>, k: <key to watch>, }
+function waitForKeyInObject(o) {
+    /** Promise that waits for a key to exist in an object.
+     *  
+     *  `o` must be an Object of the form:
+     *  {
+     *      obj: <object to watch for key>,
+     *      k: <key to watch for>, 
+     *  }
+     * 
+     *  Resolves when (k in obj)
+     */
     return new Promise(resolve => {
         (function _waitForKeyInObject() {
-            if (obj.k in obj.obj) {
+            if (o.k in o.obj) {
                 return resolve();
             }
             setTimeout(_waitForKeyInObject, 100);
@@ -59,14 +79,28 @@ function waitForKeyInObject(obj) {
     });
 }
 
-function waitForValueInObject(obj) {
+function waitForValueInObject(o) {
+    /** Promise that waits for a key value pair in an Object.
+     *  
+     *  `o` must be an Object of the form:
+     *  {
+     *      obj: <object containing value>,
+     *      k: <key in object>,
+     *      v: <value at key for comparison>
+     *  }
+     * 
+     *  Resolves when obj[k] == v
+     */
     return new Promise(resolve => {
-        (function _waitForValueInObject() {
-            if (obj.k in obj.obj && obj.obj[obj.k] == obj.v) {
-                return resolve();
-            }
-            setTimeout(_waitForValueInObject, 100);
-        })();
+        waitForKeyInObject({ k: o.k, v: o.obj }).then(() => {
+            (function _waitForValueInObject() {
+
+                if (o.k in o.obj && o.obj[o.k] == o.v) {
+                    return resolve();
+                }
+                setTimeout(_waitForValueInObject, 100);
+            })();
+        });
     });
 }
 
@@ -91,7 +125,7 @@ function proxyJsonUpdated(k, v) {
         return;
     }
     clusterizers[v.dataset.tabnameFull][v.dataset.proxyName].parseJson(v.dataset.json);
-    clusterizers_initial_load[v.dataset.tabnameFull] = true;
+    clusterizers_initial_load[v.dataset.tabnameFull].state = true;
 }
 
 function toggleCss(key, css, enable) {
@@ -112,7 +146,7 @@ function toggleCss(key, css, enable) {
 }
 
 function extraNetworksRefreshTab(tabname_full) {
-    clusterizers_initial_load[tabname_full] = false;
+    clusterizers_initial_load[tabname_full].state = false;
     // Reapply controls since they don't change on refresh.
     let btn_dirs_view = gradioApp().querySelector(`#${tabname_full}_extra_dirs_view`);
     let btn_tree_view = gradioApp().querySelector(`#${tabname_full}_extra_tree_view`);
@@ -124,7 +158,7 @@ function extraNetworksRefreshTab(tabname_full) {
     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"));
 
-    waitForKeyInObject({k: tabname_full, v: clusterizers}).then(() => {
+    waitForKeyInObject({ k: tabname_full, v: clusterizers }).then(() => {
         extraNetworksClusterizersEnable(tabname_full);
         extraNetworksForceUpdateData(tabname_full);
         extraNetworksClusterizersRebuild(tabname_full, false);
@@ -138,7 +172,7 @@ function extraNetworksRegisterPromptForTab(tabname, id) {
         activePromptTextarea[tabname] = textarea;
     }
 
-    textarea.addEventListener("focus", function() {
+    textarea.addEventListener("focus", function () {
         activePromptTextarea[tabname] = textarea;
     });
 }
@@ -156,9 +190,9 @@ function extraNetworksSetupTabContent(tabname, pane, controls_div) {
         // Now that we have our elements in DOM, we create the clusterize lists.
         clusterizers[tabname_full] = {
             cards_list: new ExtraNetworksClusterizeCardsList({
-                    scroll_id: `${tabname_full}_cards_list_scroll_area`,
-                    content_id: `${tabname_full}_cards_list_content_area`,
-                    txt_search_elem: txt_search,
+                scroll_id: `${tabname_full}_cards_list_scroll_area`,
+                content_id: `${tabname_full}_cards_list_content_area`,
+                txt_search_elem: txt_search,
             }),
             tree_list: new ExtraNetworksClusterizeTreeList({
                 scroll_id: `${tabname_full}_tree_list_scroll_area`,
@@ -167,7 +201,7 @@ function extraNetworksSetupTabContent(tabname, pane, controls_div) {
             }),
         };
 
-        clusterizers_initial_load[tabname_full] = false;
+        clusterizers_initial_load[tabname_full] = { state: false };
 
         // Debounce search text input. This way we only search after user is done typing.
         let typing_timer;
@@ -176,14 +210,14 @@ function extraNetworksSetupTabContent(tabname, pane, controls_div) {
             clearTimeout(typing_timer);
             if (txt_search.value) {
                 typing_timer = setTimeout(
-                    extraNetworksApplyFilter(tabname_full),
+                    () => extraNetworksApplyFilter(tabname_full),
                     done_typing_interval_ms,
                 );
             }
         });
 
         // Update search filter whenever the search input's clear button is pressed.
-        txt_search.addEventListener("extra-network-control--search-clear", () => {extraNetworksApplyFilter(tabname_full);});
+        txt_search.addEventListener("extra-network-control--search-clear", () => extraNetworksApplyFilter(tabname_full));
 
         // Insert the controls into the page.
         var controls = gradioApp().querySelector(`#${tabname_full}_controls`);
@@ -258,8 +292,10 @@ function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt, t
     extraNetworksShowControlsForPage(tabname, tabname_full);
 
     Promise.all([
-        waitForKeyInObject({obj: clusterizers, k: tabname_full}),
-        waitForValueInObject({obj: clusterizers_initial_load, k: tabname_full, v: true}),
+        waitForKeyInObject({ obj: clusterizers, k: tabname_full }),
+        waitForKeyInObject({ obj: clusterizers_initial_load, k: tabname_full }).then(() => {
+            waitForBool(clusterizers_initial_load[tabname_full]).then(() => { return; });
+        }),
     ]).then(() => {
         extraNetworksClusterizersEnable(tabname_full);
         extraNetworksForceUpdateData(tabname_full);
@@ -340,7 +376,7 @@ function extraNetworksSetupEventHandlers() {
     var resize_timer;
     window.addEventListener("resize", () => {
         clearTimeout(resize_timer);
-        resize_timer = setTimeout(function() {
+        resize_timer = setTimeout(function () {
             // Update rows for each list.
             extraNetworksClusterizersUpdateRows();
         }, 500); // ms
@@ -394,7 +430,7 @@ function extraNetworksSetupEventHandlers() {
 }
 
 function setupExtraNetworks() {
-    waitForInitialUiOptionsLoaded().then(() => {
+    waitForBool(initialUiOptionsLoaded).then(() => {
         extraNetworksSetupTab('txt2img');
         extraNetworksSetupTab('img2img');
     }).then(() => {
@@ -411,7 +447,7 @@ function tryToRemoveExtraNetworkFromPrompt(textarea, text, isNeg) {
         var extraTextAfterNet = m[2];
         var partToSearch = m[1];
         var foundAtPosition = -1;
-        newTextareaText = textarea.value.replaceAll(isNeg ? re_extranet_g_neg : re_extranet_g, function(found, net, pos) {
+        newTextareaText = textarea.value.replaceAll(isNeg ? re_extranet_g_neg : re_extranet_g, function (found, net, pos) {
             m = found.match(isNeg ? re_extranet_neg : re_extranet);
             if (m[1] == partToSearch) {
                 replaced = true;
@@ -579,13 +615,13 @@ function extraNetworksTreeOnClick(event, tabname_full) {
      * @param tabname_full  The full active tabname.
      *                      i.e. txt2img_lora, img2img_checkpoints, etc.
      */
-     let btn = event.target.closest(".tree-list-item");
-     if (btn.dataset.treeEntryType === "file") {
-         extraNetworksTreeProcessFileClick(event, btn, tabname_full);
-     } else {
-         extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full);
-     }
-     event.stopPropagation();
+    let btn = event.target.closest(".tree-list-item");
+    if (btn.dataset.treeEntryType === "file") {
+        extraNetworksTreeProcessFileClick(event, btn, tabname_full);
+    } else {
+        extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full);
+    }
+    event.stopPropagation();
 }
 
 function extraNetworkDirsOnClick(event, tabname_full) {
@@ -616,7 +652,7 @@ function extraNetworkDirsOnClick(event, tabname_full) {
     } else {
         _select_button(event.target);
     }
-    
+
     updateInput(txt_search);
     extraNetworksApplyFilter(tabname_full);
 }
@@ -645,7 +681,7 @@ function extraNetworksControlSortModeOnClick(event, tabname_full) {
     var self = event.currentTarget;
     var parent = event.currentTarget.parentElement;
 
-    parent.querySelectorAll('.extra-network-control--sort-mode').forEach(function(x) {
+    parent.querySelectorAll('.extra-network-control--sort-mode').forEach(function (x) {
         x.classList.remove('extra-network-control--enabled');
     });
 
@@ -696,7 +732,7 @@ function extraNetworksControlTreeViewOnClick(event, tabname_full) {
     button.classList.toggle("extra-network-control--enabled");
     var show = !button.classList.contains("extra-network-control--enabled");
 
-    gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`).classList.toggle("hidden", show);
+    gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`).parentElement.classList.toggle("hidden", show);
     extraNetworksClusterizersUpdateRows(tabname_full);
 }
 
@@ -731,7 +767,7 @@ function extraNetworksControlRefreshOnClick(event, tabname_full) {
      * @param tabname_full  The full active tabname.
      *                      i.e. txt2img_lora, img2img_checkpoints, etc.
      */
-    initialUiOptionsLoaded = false;
+    initialUiOptionsLoaded.state = false;
     var btn_refresh_internal = gradioApp().getElementById(`${tabname_full}_extra_refresh_internal`);
     btn_refresh_internal.dispatchEvent(new Event("click"));
 }
@@ -847,12 +883,12 @@ function extraNetworksShowMetadata(text) {
 
 function requestGet(url, data, handler, errorHandler) {
     var xhr = new XMLHttpRequest();
-    var args = Object.keys(data).map(function(k) {
+    var args = Object.keys(data).map(function (k) {
         return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
     }).join('&');
     xhr.open("GET", url + "?" + args, true);
 
-    xhr.onreadystatechange = function() {
+    xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
             if (xhr.status === 200) {
                 try {
@@ -877,11 +913,11 @@ function extraNetworksCopyPathToClipboard(event, path) {
 }
 
 function extraNetworksRequestMetadata(event, extraPage, cardName) {
-    var showError = function() {
+    var showError = function () {
         extraNetworksShowMetadata("there was an error getting metadata");
     };
 
-    requestGet("./sd_extra_networks/metadata", {page: extraPage, item: cardName}, function(data) {
+    requestGet("./sd_extra_networks/metadata", { page: extraPage, item: cardName }, function (data) {
         if (data && data.metadata) {
             extraNetworksShowMetadata(data.metadata);
         } else {
@@ -915,7 +951,7 @@ function extraNetworksEditUserMetadata(event, tabname, extraPage, cardName) {
 }
 
 function extraNetworksRefreshSingleCard(page, tabname, name) {
-    requestGet("./sd_extra_networks/get-single-card", {page: page, tabname: tabname, name: name}, function(data) {
+    requestGet("./sd_extra_networks/get-single-card", { page: page, tabname: tabname, name: name }, function (data) {
         if (data && data.html) {
             var card = gradioApp().querySelector(`#${tabname}_${page.replace(" ", "_")}_cards > .card[data-name="${name}"]`);
 
@@ -930,11 +966,11 @@ function extraNetworksRefreshSingleCard(page, tabname, name) {
     });
 }
 
-window.addEventListener("keydown", function(event) {
+window.addEventListener("keydown", function (event) {
     if (event.key == "Escape") {
         closePopup();
     }
 });
 
 onUiLoaded(setupExtraNetworks);
-onOptionsChanged(() => initialUiOptionsLoaded = true);
\ No newline at end of file
+onOptionsChanged(() => initialUiOptionsLoaded.state = true);
\ No newline at end of file
diff --git a/javascript/extraNetworksClusterizeList.js b/javascript/extraNetworksClusterizeList.js
index 573205b54..a3f3b9351 100644
--- a/javascript/extraNetworksClusterizeList.js
+++ b/javascript/extraNetworksClusterizeList.js
@@ -1,6 +1,6 @@
 // Collators used for sorting.
-const INT_COLLATOR = new Intl.Collator([], {numeric: true});
-const STR_COLLATOR = new Intl.Collator("en", {numeric: true, sensitivity: "base"});
+const INT_COLLATOR = new Intl.Collator([], { numeric: true });
+const STR_COLLATOR = new Intl.Collator("en", { numeric: true, sensitivity: "base" });
 
 function compress(string) {
     /** Compresses a string into a base64 encoded GZipped string. */
@@ -30,13 +30,13 @@ function decompress(base64string) {
     });
 }
 
-const parseHtml = function(str) {
+const parseHtml = function (str) {
     const tmp = document.implementation.createHTMLDocument('');
     tmp.body.innerHTML = str;
     return [...tmp.body.childNodes];
 }
 
-const getComputedValue = function(container, css_property) {
+const getComputedValue = function (container, css_property) {
     return parseInt(
         window.getComputedStyle(container, null)
             .getPropertyValue(css_property)
@@ -44,17 +44,17 @@ const getComputedValue = function(container, css_property) {
     );
 };
 
-const calcColsPerRow = function(parent) {
+const calcColsPerRow = function (parent) {
     // Returns the number of columns in a row of a flexbox.
     //const parent = document.querySelector(selector);
     const parent_width = getComputedValue(parent, "width");
-    const parent_padding_left = getComputedValue(parent,"padding-left");
-    const parent_padding_right = getComputedValue(parent,"padding-right");
+    const parent_padding_left = getComputedValue(parent, "padding-left");
+    const parent_padding_right = getComputedValue(parent, "padding-right");
 
     const child = parent.firstElementChild;
-    const child_width = getComputedValue(child,"width");
-    const child_margin_left = getComputedValue(child,"margin-left");
-    const child_margin_right = getComputedValue(child,"margin-right");
+    const child_width = getComputedValue(child, "width");
+    const child_margin_left = getComputedValue(child, "margin-left");
+    const child_margin_right = getComputedValue(child, "margin-right");
 
     var parent_width_no_padding = parent_width - parent_padding_left - parent_padding_right;
     const child_width_with_margin = child_width + child_margin_left + child_margin_right;
@@ -63,17 +63,17 @@ const calcColsPerRow = function(parent) {
     return parseInt(parent_width_no_padding / child_width_with_margin);
 }
 
-const calcRowsPerCol = function(container, parent) {
+const calcRowsPerCol = function (container, parent) {
     // Returns the number of columns in a row of a flexbox.
     //const parent = document.querySelector(selector);
     const parent_height = getComputedValue(container, "height");
-    const parent_padding_top = getComputedValue(container,"padding-top");
-    const parent_padding_bottom = getComputedValue(container,"padding-bottom");
+    const parent_padding_top = getComputedValue(container, "padding-top");
+    const parent_padding_bottom = getComputedValue(container, "padding-bottom");
 
     const child = parent.firstElementChild;
-    const child_height = getComputedValue(child,"height");
-    const child_margin_top = getComputedValue(child,"margin-top");
-    const child_margin_bottom = getComputedValue(child,"margin-bottom");
+    const child_height = getComputedValue(child, "height");
+    const child_margin_top = getComputedValue(child, "margin-top");
+    const child_margin_bottom = getComputedValue(child, "margin-bottom");
 
     var parent_height_no_padding = parent_height - parent_padding_top - parent_padding_bottom;
     const child_height_with_margin = child_height + child_margin_top + child_margin_bottom;
@@ -94,11 +94,11 @@ class ExtraNetworksClusterize {
             show_no_data_row = true,
             callbacks = {},
         } = {
-            rows_in_block: 10,
-            blocks_in_cluster: 4,
-            show_no_data_row: true,
-            callbacks: {},
-        }
+                rows_in_block: 10,
+                blocks_in_cluster: 4,
+                show_no_data_row: true,
+                callbacks: {},
+            }
     ) {
         if (scroll_id === undefined) {
             console.error("scroll_id is undefined!");
@@ -191,7 +191,6 @@ class ExtraNetworksClusterize {
     applyFilter() {
         // the base class filter just sorts the values and updates the rows.
         this.applySort();
-        this.updateRows();
     }
 
     filterRows(obj) {
@@ -221,10 +220,36 @@ 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.updateItemDims();
-        this.clusterize.update(this.filterRows(this.data_obj));
         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();
+            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.updateItemDims();
+        // Clear the list before adding new items to prevent weird scrolling issues.
+        this.clusterize.clear();
+        this.clusterize.update(this.filterRows(this.data_obj));
     }
 
     nrows() {
@@ -243,7 +268,6 @@ class ExtraNetworksClusterize {
 
         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.
-            console.log('first elem undefined');
             return;
         }
 
@@ -296,7 +320,6 @@ class ExtraNetworksClusterize {
 
         // Apply existing sort/filter.
         this.applyFilter();
-        this.updateRows();
     }
 }
 
@@ -315,7 +338,7 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
         for (let i = 1; i <= depth; i++) {
             res += `calc((${i} * ${text_size}) - (${text_size} * 0.6)) 0 0 ${bg} inset,`;
             res += `calc((${i} * ${text_size}) - (${text_size} * 0.4)) 0 0 ${fg} inset`;
-            res += (i+1 > depth) ? "" : ", ";
+            res += (i + 1 > depth) ? "" : ", ";
         }
         return res;
     }
@@ -333,7 +356,7 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
             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,
@@ -469,7 +492,7 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
     applySort() {
         this.sort_reverse = this.sort_dir_str === "descending";
 
-        switch(this.sort_mode_str) {
+        switch (this.sort_mode_str) {
             case "name":
                 this.sort_fn = this.sortByName;
                 break;
@@ -498,7 +521,7 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
 
         for (const [k, v] of Object.entries(this.data_obj)) {
             let search_only = v.element.querySelector(".search_only");
-            let text = Array.prototype.map.call(v.element.querySelectorAll(".search_terms"), function(t) {
+            let text = Array.prototype.map.call(v.element.querySelectorAll(".search_terms"), function (t) {
                 return t.textContent.toLowerCase();
             }).join(" ");
 
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 7be9431e9..e2eb82f6a 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -817,8 +817,6 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
     ).then(
         fn=lambda: None,
         _js="extraNetworksSetupData",
-    ).then(
-        fn=lambda: print("DONE")
     )
 
     return ui
diff --git a/style.css b/style.css
index 25de25a5b..89627b13a 100644
--- a/style.css
+++ b/style.css
@@ -1247,6 +1247,7 @@ body.resizing .resize-handle {
 .extra-network-content--dirs {
     flex: 0 1 0%;
     flex-direction: row;
+    flex-wrap: wrap;
     gap: var(--spacing-sm);
 }
 
@@ -1255,12 +1256,15 @@ body.resizing .resize-handle {
     flex-direction: row;
 }
 
+.extra-network-content.resize-handle-col {
+    overflow: auto;
+}
 
-.resize-handle-row:has(> .extra-network-tree.hidden) {
+.resize-handle-row:has(> .resize-handle-col.hidden) {
     display: flex !important;
 }
 
-.resize-handle-row:has(> .extra-network-tree.hidden) > .resize-handle {
+.resize-handle-row:has(> .resize-handle-col.hidden)>.resize-handle {
     display: none;
 }
 
@@ -1274,37 +1278,58 @@ body.resizing .resize-handle {
     border: 1px solid var(--block-border-color);
 }
 
-.extra-network-controls {
-    display: flex;
-    align-self: center;
+.extra-network-controls-div {
     margin-left: auto;
-    font-size: var(--body-text-size);
-    text-align: left;
-    user-select: none;
-    background: transparent;
-    border: none;
-    gap: var(--spacing-sm);
-    align-items: start;
-    place-content: center center;
-    padding: var(--spacing-sm);
 }
 
-.extra-network-controls small{
-    color: var(--input-placeholder-color);
+.extra-network-controls {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    margin-bottom: var(--spacing-sm);
+}
+
+.extra-network-controls--container {
+    display: flex;
+    flex-direction: column;
+    margin-left: var(--spacing-xxl);
+    margin-right: var(--spacing-xxl);
+}
+
+.extra-network-controls--header {
+    flex: 1;
     text-align: center;
-    margin: 0 var(--spacing-lg) 0 var(--spacing-lg);
+    color: var(--input-placeholder-color);
+    padding: 0;
+    margin: 0;
+    border-bottom: var(--input-border-width) solid var(--input-placeholder-color);
+    line-height: var(--text-sm);
+}
+
+.extra-network-controls--buttons {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    gap: 0 var(--spacing-sm);
+    place-items: center stretch;
+    justify-content: space-evenly;
 }
 
 .extra-network-control {
-    padding: var(--spacing-sm);
-    display: inline-flex;
-    cursor: pointer;
     background: transparent;
+    border: var(--input-border-width) solid transparent;
     border-radius: var(--input-radius);
-    align-items: center;
-    place-content: center;
     box-sizing: border-box;
-    transition: background 1000ms ease-in-out;
+    cursor: pointer;
+    user-select: none;
+}
+
+.extra-network-control--icon {
+    width: var(--text-xxl);
+    height: var(--text-xxl);
+    color: var(--input-placeholder-color);
+    background: transparent;
+    margin: var(--spacing-sm);
 }
 
 .extra-network-control:hover {
@@ -1312,7 +1337,7 @@ body.resizing .resize-handle {
 }
 
 .extra-network-control:hover .extra-network-control--icon {
-    background: var(--button-secondary-text-color-hover);
+    color: var(--button-secondary-text-color-hover);
 }
 
 .extra-network-control:active {
@@ -1320,36 +1345,26 @@ body.resizing .resize-handle {
 }
 
 .extra-network-control:active .extra-network-control--icon {
-    background: var(--button-secondary-text-color-hover);
+    color: var(--button-secondary-text-color-hover);
 }
 
 .extra-network-control--enabled {
     background: var(--button-secondary-background-fill);
 }
 
-.extra-network-control--enabled .extra-network-control--icon{
-    background: var(--button-secondary-text-color);
+.extra-network-control--enabled .extra-network-control--icon {
+    color: var(--button-secondary-text-color);
 }
 
-.extra-network-control--icon {
-    height: var(--text-xxl);
-    width: var(--text-xxl);
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-size: 100%;
-    background: var(--button-secondary-background-fill);
-}
-
-/* ==== SEARCH INPUT ACTIONS ==== */
-/* Add icon to left side of <input> */
+/* ==== SEARCH INPUT ==== */
 .extra-network-control--search {
+    align-self: end;
     display: flex;
     flex-direction: row;
-    position: relative;
     outline: var(--input-border-width) solid var(--input-border-color);
     border-radius: var(--input-radius);
     align-items: center;
-    place-content: center;
+    justify-content: center;
     gap: var(--spacing-sm);
     box-sizing: border-box;
     background: var(--input-background-fill);
@@ -1361,12 +1376,21 @@ body.resizing .resize-handle {
 }
 
 /* Search icon on left of container. */
-.extra-network-control--search .extra-network-control--search-icon {
-    fill: var(--input-placeholder-color);
-    background: transparent;
+.extra-network-control--search-icon {
     user-select: none;
-    padding: var(--input-padding) var(--spacing-sm) var(--input-padding) var(--input-padding);
-    margin: 0;
+    color: var(--input-placeholder-color);
+    width: var(--input-text-size);
+    height: var(--input-text-size);
+    margin-left: var(--input-padding);
+}
+
+/* circle with X icon on right of container used to clear input. */
+.extra-network-control--search-clear-icon {
+    user-select: none;
+    cursor: pointer;
+    color: var(--input-placeholder-color);
+    width: var(--input-text-size);
+    height: var(--input-text-size);
 }
 
 /* <input> text in container. */
@@ -1390,70 +1414,64 @@ body.resizing .resize-handle {
 
 /* "Clear" button on right of container. Invisible until user enters text in <input>. */
 .extra-network-control--search .extra-network-control--search-clear {
-    display: flex;
     visibility: hidden;
-    fill: var(--input-placeholder-color);
-    background: transparent;
-    border: var(--input-border-width) solid transparent;
     border-radius: 0 var(--input-radius) var(--input-radius) 0;
+    border: var(--input-border-width) solid transparent;
     transition: background var(--button-transition);
     user-select: none;
     cursor: pointer;
-    align-self: stretch; /* forces button to fill vertical */
-    align-items: center;
+    align-self: stretch;
+    /* forces button to fill vertical */
     padding: var(--input-padding);
 }
 
 .extra-network-control--search .extra-network-control--search-clear:hover {
-    background: var(--button-secondary-background-fill-hover);
+    color: var(--button-secondary-background-fill-hover);
+}
+
+.extra-network-control--search .extra-network-control--search-clear:hover .extra-network-control--search-clear-icon {
+    color: var(--button-secondary-text-color-hover);
+}
+
+/* Customize behavior or sort direction button icon. */
+.extra-network-control--sort-dir[data-sort-dir="ascending"] #extra-network-control--sort-dir-icon-ascending {
+    fill: var(--button-secondary-text-color);
+    stroke: var(--button-secondary-text-color);
+}
+
+.extra-network-control--sort-dir[data-sort-dir="ascending"] #extra-network-control--sort-dir-icon-descending {
+    stroke: var(--input-placeholder-color);
+}
+
+.extra-network-control--sort-dir[data-sort-dir="descending"] #extra-network-control--sort-dir-icon-descending {
+    fill: var(--button-secondary-text-color);
+    stroke: var(--button-secondary-text-color);
+}
+
+.extra-network-control--sort-dir[data-sort-dir="descending"] #extra-network-control--sort-dir-icon-ascending {
+    stroke: var(--input-placeholder-color);
 }
 
 /* ==== ICONS ==== */
-.extra-network-control--sort-mode[data-sort-mode="path"] .extra-network-control--icon {
-    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 5C1 3.34315 2.34315 2 4 2H8.43845C9.81505 2 11.015 2.93689 11.3489 4.27239L11.7808 6H13.5H20C21.6569 6 23 7.34315 23 9V11C23 11.5523 22.5523 12 22 12C21.4477 12 21 11.5523 21 11V9C21 8.44772 20.5523 8 20 8H13.5H11.7808H4C3.44772 8 3 8.44772 3 9V10V19C3 19.5523 3.44772 20 4 20H9C9.55228 20 10 20.4477 10 21C10 21.5523 9.55228 22 9 22H4C2.34315 22 1 20.6569 1 19V10V9V5ZM3 6.17071C3.31278 6.06015 3.64936 6 4 6H9.71922L9.40859 4.75746C9.2973 4.3123 8.89732 4 8.43845 4H4C3.44772 4 3 4.44772 3 5V6.17071ZM20.1716 18.7574C20.6951 17.967 21 17.0191 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21C17.0191 21 17.967 20.6951 18.7574 20.1716L21.2929 22.7071C21.6834 23.0976 22.3166 23.0976 22.7071 22.7071C23.0976 22.3166 23.0976 21.6834 22.7071 21.2929L20.1716 18.7574ZM13 16C13 14.3431 14.3431 13 16 13C17.6569 13 19 14.3431 19 16C19 17.6569 17.6569 19 16 19C14.3431 19 13 17.6569 13 16Z" fill="%23000000"></path></g></svg>');
+.extra-network-control--refresh:hover .extra-network-control--icon {
+    animation: rotate 3s infinite;
+    transform-origin: 50% 50%;
+    transform-box: fill-box;
 }
 
-.extra-network-control--sort-mode[data-sort-mode="name"] .extra-network-control--icon {
-    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.1841 6.69223C17.063 6.42309 16.7953 6.25 16.5002 6.25C16.2051 6.25 15.9374 6.42309 15.8162 6.69223L11.3162 16.6922C11.1463 17.07 11.3147 17.514 11.6924 17.6839C12.0701 17.8539 12.5141 17.6855 12.6841 17.3078L14.1215 14.1136H18.8789L20.3162 17.3078C20.4862 17.6855 20.9302 17.8539 21.308 17.6839C21.6857 17.514 21.8541 17.07 21.6841 16.6922L17.1841 6.69223ZM16.5002 8.82764L14.7965 12.6136H18.2039L16.5002 8.82764Z" fill="%231C274C"></path><path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H13C13.4142 6.25 13.75 6.58579 13.75 7C13.75 7.41421 13.4142 7.75 13 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7Z" fill="%231C274C"></path><path opacity="0.5" d="M2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H10C10.4142 11.25 10.75 11.5858 10.75 12C10.75 12.4142 10.4142 12.75 10 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12Z" fill="%231C274C"></path><path opacity="0.5" d="M2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H8C8.41421 16.25 8.75 16.5858 8.75 17C8.75 17.4142 8.41421 17.75 8 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17Z" fill="%231C274C"></path></g></svg>');
-}
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
 
-.extra-network-control--sort-mode[data-sort-mode="date_created"] .extra-network-control--icon {
-    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M17 11C14.2386 11 12 13.2386 12 16C12 18.7614 14.2386 21 17 21C19.7614 21 22 18.7614 22 16C22 13.2386 19.7614 11 17 11ZM17 11V9M2 9V15.8C2 16.9201 2 17.4802 2.21799 17.908C2.40973 18.2843 2.71569 18.5903 3.09202 18.782C3.51984 19 4.0799 19 5.2 19H13M2 9V8.2C2 7.0799 2 6.51984 2.21799 6.09202C2.40973 5.71569 2.71569 5.40973 3.09202 5.21799C3.51984 5 4.0799 5 5.2 5H13.8C14.9201 5 15.4802 5 15.908 5.21799C16.2843 5.40973 16.5903 5.71569 16.782 6.09202C17 6.51984 17 7.0799 17 8.2V9M2 9H17M5 3V5M14 3V5M15 16H17M17 16H19M17 16V14M17 16V18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
-}
-
-.extra-network-control--sort-mode[data-sort-mode="date_modified"] .extra-network-control--icon {
-    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M10 21H6.2C5.0799 21 4.51984 21 4.09202 20.782C3.71569 20.5903 3.40973 20.2843 3.21799 19.908C3 19.4802 3 18.9201 3 17.8V8.2C3 7.0799 3 6.51984 3.21799 6.09202C3.40973 5.71569 3.71569 5.40973 4.09202 5.21799C4.51984 5 5.0799 5 6.2 5H17.8C18.9201 5 19.4802 5 19.908 5.21799C20.2843 5.40973 20.5903 5.71569 20.782 6.09202C21 6.51984 21 7.0799 21 8.2V10M7 3V5M17 3V5M3 9H21M13.5 13.0001L7 13M10 17.0001L7 17M14 21L16.025 20.595C16.2015 20.5597 16.2898 20.542 16.3721 20.5097C16.4452 20.4811 16.5147 20.4439 16.579 20.399C16.6516 20.3484 16.7152 20.2848 16.8426 20.1574L21 16C21.5523 15.4477 21.5523 14.5523 21 14C20.4477 13.4477 19.5523 13.4477 19 14L14.8426 18.1574C14.7152 18.2848 14.6516 18.3484 14.601 18.421C14.5561 18.4853 14.5189 18.5548 14.4903 18.6279C14.458 18.7102 14.4403 18.7985 14.405 18.975L14 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
-}
-
-.extra-network-control--sort-dir[data-sort-dir="ascending"] .extra-network-control--icon {
-    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 7L3 10M6 7L9 10" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
-}
-
-.extra-network-control--sort-dir[data-sort-dir="descending"] .extra-network-control--icon {
-    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 17L3 14M6 17L9 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
-}
-
-.extra-network-control--dirs-view .extra-network-control--dirs-view-icon {
-    mask-image: url('data:image/svg+xml,<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns%23" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns%23" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 30 30" version="1.1" id="svg822" inkscape:version="0.92.4 (f8dce91, 2019-08-02)" sodipodi:docname="grid-view.svg" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><defs id="defs816"><inkscape:path-effect only_selected="false" apply_with_weight="true" apply_no_weight="true" helper_size="0" steps="2" weight="33.333333" is_visible="true" id="path-effect1025" effect="bspline"></inkscape:path-effect><inkscape:path-effect only_selected="false" apply_with_weight="true" apply_no_weight="true" helper_size="0" steps="2" weight="33.333333" is_visible="true" id="path-effect1021" effect="bspline"></inkscape:path-effect></defs><sodipodi:namedview id="base" pagecolor="%23ffffff" bordercolor="%23666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="17.833333" inkscape:cx="19.485981" inkscape:cy="13.037383" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" units="px" inkscape:window-width="1366" inkscape:window-height="713" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="false" inkscape:guide-bbox="true"><sodipodi:guide position="21.126168,22.794393" orientation="1,0" id="guide1575" inkscape:locked="false"></sodipodi:guide><sodipodi:guide position="22.682243,23.285047" orientation="1,0" id="guide1635" inkscape:locked="false"></sodipodi:guide><sodipodi:guide position="22.682243,7.6455921" orientation="0,1" id="guide1639" inkscape:locked="false"></sodipodi:guide><sodipodi:guide position="18.859863,18.859863" orientation="1,0" id="guide1242" inkscape:locked="false"></sodipodi:guide><inkscape:grid type="xygrid" id="grid1103"></inkscape:grid></sodipodi:namedview><metadata id="metadata819"><rdf:rdf><cc:work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type><dc:title></dc:title></cc:work></rdf:rdf></metadata><g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-289.0625)"><path style="opacity:1;fill:%23000000;fill-opacity:1;stroke:none;stroke-width:3.99999976;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 5,4 C 4.446,4 4,4.446 4,5 v 8 c 0,0.554 0.446,1 1,1 h 8 c 0.554,0 1,-0.446 1,-1 V 5 C 14,4.446 13.554,4 13,4 Z m 12,0 c -0.554,0 -1,0.446 -1,1 v 8 c 0,0.554 0.446,1 1,1 h 8 c 0.554,0 1,-0.446 1,-1 V 5 C 26,4.446 25.554,4 25,4 Z M 5,16 c -0.554,0 -1,0.446 -1,1 v 8 c 0,0.554 0.446,1 1,1 h 8 c 0.554,0 1,-0.446 1,-1 v -8 c 0,-0.554 -0.446,-1 -1,-1 z m 12,0 c -0.554,0 -1,0.446 -1,1 v 8 c 0,0.554 0.446,1 1,1 h 8 c 0.554,0 1,-0.446 1,-1 v -8 c 0,-0.554 -0.446,-1 -1,-1 z" transform="translate(0,289.0625)" id="rect1395" inkscape:connector-curvature="0"></path></g></g></svg>');
-}
-
-.extra-network-control--tree-view .extra-network-control--tree-view-icon {
-    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="black"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="black" d="M16 10v-4h-11v1h-2v-3h9v-4h-12v4h2v10h3v2h11v-4h-11v1h-2v-5h2v2z"></path></g></svg>');
-}
-
-.extra-network-control--refresh-icon {
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38"/></svg>');
-}
-
-.extra-network-control--refresh-icon:active {
-    -ms-transform: rotate(180deg);
-    -webkit-transform: rotate(180deg);
-    transform: rotate(180deg);
-    transition: transform 0.2s;
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 .extra-network-tree-content {
     padding: var(--spacing-md);
+    width: 100%;
 }
 
 .extra-network-cards-content {
@@ -1485,7 +1503,7 @@ body.resizing .resize-handle {
 
 .tree-list-item:hover {
     -webkit-transition: all 0.05s ease-in-out;
-	transition: all 0.05s ease-in-out;
+    transition: all 0.05s ease-in-out;
     background: var(--button-secondary-background-fill-hover);
 }
 
@@ -1493,7 +1511,7 @@ body.resizing .resize-handle {
     background: var(--button-secondary-background-fill);
 }
 
-.tree-list-item > span {
+.tree-list-item>span {
     font-size: var(--button-large-text-size);
     color: var(--button-secondary-text-color);
 }
@@ -1516,7 +1534,8 @@ body.resizing .resize-handle {
     -ms-transform: rotate(135deg);
     -webkit-transform: rotate(135deg);
     transform: rotate(135deg);
-    transition: transform 0.2s; /* currently broken since we remove/add elements to clusterize.js list */
+    transition: transform 0.2s;
+    /* currently broken since we remove/add elements to clusterize.js list */
 }
 
 /* Text for button. */
@@ -1595,7 +1614,7 @@ body.resizing .resize-handle {
 
 .extra-network-dirs-view-button:hover {
     -webkit-transition: all 0.05s ease-in-out;
-	transition: all 0.05s ease-in-out;
+    transition: all 0.05s ease-in-out;
     background: var(--button-secondary-background-fill-hover);
 }