From 7dca8e7698101fd5f610675f21569eba628883f8 Mon Sep 17 00:00:00 2001
From: catboxanon <122327233+catboxanon@users.noreply.github.com>
Date: Fri, 2 Jun 2023 04:08:45 +0000
Subject: [PATCH 1/3] Support dynamic sort of extra networks

---
 .../Lora/ui_extra_networks_lora.py            |  3 +-
 html/extra-networks-card.html                 |  2 +-
 javascript/extraNetworks.js                   | 47 +++++++++++++++++++
 modules/ui.py                                 |  1 +
 modules/ui_extra_networks.py                  | 16 +++++++
 modules/ui_extra_networks_checkpoints.py      |  3 +-
 modules/ui_extra_networks_hypernets.py        |  3 +-
 .../ui_extra_networks_textual_inversion.py    |  3 +-
 style.css                                     | 14 +++++-
 9 files changed, 85 insertions(+), 7 deletions(-)

diff --git a/extensions-builtin/Lora/ui_extra_networks_lora.py b/extensions-builtin/Lora/ui_extra_networks_lora.py
index 259e99ac..6bf3f079 100644
--- a/extensions-builtin/Lora/ui_extra_networks_lora.py
+++ b/extensions-builtin/Lora/ui_extra_networks_lora.py
@@ -13,7 +13,7 @@ class ExtraNetworksPageLora(ui_extra_networks.ExtraNetworksPage):
         lora.list_available_loras()
 
     def list_items(self):
-        for name, lora_on_disk in lora.available_loras.items():
+        for index, (name, lora_on_disk) in enumerate(lora.available_loras.items()):
             path, ext = os.path.splitext(lora_on_disk.filename)
 
             alias = lora_on_disk.get_alias()
@@ -27,6 +27,7 @@ class ExtraNetworksPageLora(ui_extra_networks.ExtraNetworksPage):
                 "prompt": json.dumps(f"<lora:{alias}:") + " + opts.extra_networks_default_multiplier + " + json.dumps(">"),
                 "local_preview": f"{path}.{shared.opts.samples_format}",
                 "metadata": json.dumps(lora_on_disk.metadata, indent=4) if lora_on_disk.metadata else None,
+                "sort_keys": {**self.get_sort_keys(lora_on_disk.filename), **{'default': index}},
             }
 
     def allowed_directories_for_previews(self):
diff --git a/html/extra-networks-card.html b/html/extra-networks-card.html
index 2b32e712..68a84c3a 100644
--- a/html/extra-networks-card.html
+++ b/html/extra-networks-card.html
@@ -1,4 +1,4 @@
-<div class='card' style={style} onclick={card_clicked}>
+<div class='card' style={style} onclick={card_clicked} {sort_keys}>
 	{background_image}
 	{metadata_button}
 	<div class='actions'>
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index aafe0a00..58bc7f1d 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -3,10 +3,17 @@ function setupExtraNetworksForTab(tabname) {
 
     var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
     var search = gradioApp().querySelector('#' + tabname + '_extra_search textarea');
+    var sort = gradioApp().getElementById(tabname + '_extra_sort');
+    var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder');
     var refresh = gradioApp().getElementById(tabname + '_extra_refresh');
 
     search.classList.add('search');
+    sort.classList.add('sort');
+    sortOrder.classList.add('sortorder');
+    sort.dataset.sortkey = 'sortDefault'
     tabs.appendChild(search);
+    tabs.appendChild(sort);
+    tabs.appendChild(sortOrder);
     tabs.appendChild(refresh);
 
     var applyFilter = function() {
@@ -26,8 +33,48 @@ function setupExtraNetworksForTab(tabname) {
         });
     };
 
+    var applySort = function() {
+        var reverse = sortOrder.classList.contains("sortReverse");
+        var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort","").replaceAll(" ", "_").replace(/_+$/, "").trim();
+        sortKey = sortKey ? "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1) : ""
+        var sortKeyStore = sortKey ? sortKey + (reverse ? "Reverse" : "") : ""
+        if (!sortKey || sortKeyStore == sort.dataset.sortkey)
+            return;
+
+        sort.dataset.sortkey = sortKeyStore;
+
+        var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card')
+        cards.forEach(function(card) {
+            card.originalParentElement = card.parentElement;
+        })
+        var sortedCards = Array.from(cards);
+        sortedCards.sort(function(cardA, cardB) {
+            var a = cardA.dataset[sortKey];
+            var b = cardB.dataset[sortKey];
+            if (!isNaN(a) && !isNaN(b))
+                return parseInt(a) - parseInt(b);
+
+            return (a < b ? -1 : (a > b ? 1 : 0));
+        })
+        if (reverse)
+            sortedCards.reverse();
+        cards.forEach(function(card) {
+            card.remove();
+        })
+        sortedCards.forEach(function(card) {
+            card.originalParentElement.appendChild(card);
+        })
+    }
+
     search.addEventListener("input", applyFilter);
     applyFilter();
+    ["change", "blur", "click"].forEach(function(evt) {
+        sort.querySelector("input").addEventListener(evt, applySort);
+    })
+    sortOrder.addEventListener("click", function() {
+        sortOrder.classList.toggle("sortReverse");
+        applySort();
+    });
 
     extraNetworksApplyFilter[tabname] = applyFilter;
 }
diff --git a/modules/ui.py b/modules/ui.py
index b7459f08..988b2003 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -79,6 +79,7 @@ extra_networks_symbol = '\U0001F3B4'  # 🎴
 switch_values_symbol = '\U000021C5' # ⇅
 restore_progress_symbol = '\U0001F300' # 🌀
 detect_image_size_symbol = '\U0001F4D0'  # 📐
+up_down_symbol = '\u2195\ufe0f' # ↕️
 
 
 def plaintext_to_html(text):
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 19fbaae5..8142811a 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -4,6 +4,7 @@ from pathlib import Path
 
 from modules import shared
 from modules.images import read_info_from_image, save_image_with_geninfo
+from modules.ui import up_down_symbol
 import gradio as gr
 import json
 import html
@@ -185,6 +186,8 @@ class ExtraNetworksPage:
         if search_only and shared.opts.extra_networks_hidden_models == "Never":
             return ""
 
+        sort_keys = " ".join([html.escape(f'data-sort-{k}={v}') for k, v in item.get("sort_keys", {}).items()]).strip()
+
         args = {
             "background_image": background_image,
             "style": f"'display: none; {height}{width}'",
@@ -198,10 +201,21 @@ class ExtraNetworksPage:
             "search_term": item.get("search_term", ""),
             "metadata_button": metadata_button,
             "search_only": " search_only" if search_only else "",
+            "sort_keys": sort_keys,
         }
 
         return self.card_page.format(**args)
 
+    def get_sort_keys(self, path):
+        """
+        List of default keys used for sorting in the UI.
+        """
+        return {
+            "date_created": int(Path(path).stat().st_ctime or 0),
+            "date_modified": int(Path(path).stat().st_mtime or 0),
+            "name": Path(path).name.lower(),
+        }
+
     def find_preview(self, path):
         """
         Find a preview PNG for a given path (without extension) and call link_preview on it.
@@ -296,6 +310,8 @@ def create_ui(container, button, tabname):
                 page_elem.change(fn=lambda: None, _js='function(){applyExtraNetworkFilter(' + json.dumps(tabname) + '); return []}', inputs=[], outputs=[])
 
     gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", placeholder="Search...", visible=False)
+    gr.Dropdown(choices=['Default Sort', 'Date Created', 'Date Modified', 'Name'], value='Default Sort', elem_id=tabname+"_extra_sort", multiselect=False, visible=False, show_label=False, interactive=True)
+    gr.Button(up_down_symbol, elem_id=tabname+"_extra_sortorder")
     button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh")
 
     ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)
diff --git a/modules/ui_extra_networks_checkpoints.py b/modules/ui_extra_networks_checkpoints.py
index a17aa9c9..d366b9ce 100644
--- a/modules/ui_extra_networks_checkpoints.py
+++ b/modules/ui_extra_networks_checkpoints.py
@@ -14,7 +14,7 @@ class ExtraNetworksPageCheckpoints(ui_extra_networks.ExtraNetworksPage):
 
     def list_items(self):
         checkpoint: sd_models.CheckpointInfo
-        for name, checkpoint in sd_models.checkpoints_list.items():
+        for index, (name, checkpoint) in enumerate(sd_models.checkpoints_list.items()):
             path, ext = os.path.splitext(checkpoint.filename)
             yield {
                 "name": checkpoint.name_for_extra,
@@ -24,6 +24,7 @@ class ExtraNetworksPageCheckpoints(ui_extra_networks.ExtraNetworksPage):
                 "search_term": self.search_terms_from_path(checkpoint.filename) + " " + (checkpoint.sha256 or ""),
                 "onclick": '"' + html.escape(f"""return selectCheckpoint({json.dumps(name)})""") + '"',
                 "local_preview": f"{path}.{shared.opts.samples_format}",
+                "sort_keys": {**self.get_sort_keys(checkpoint.filename), **{'default': index}},
             }
 
     def allowed_directories_for_previews(self):
diff --git a/modules/ui_extra_networks_hypernets.py b/modules/ui_extra_networks_hypernets.py
index 6187e000..180a224c 100644
--- a/modules/ui_extra_networks_hypernets.py
+++ b/modules/ui_extra_networks_hypernets.py
@@ -12,7 +12,7 @@ class ExtraNetworksPageHypernetworks(ui_extra_networks.ExtraNetworksPage):
         shared.reload_hypernetworks()
 
     def list_items(self):
-        for name, path in shared.hypernetworks.items():
+        for index, (name, path) in enumerate(shared.hypernetworks.items()):
             path, ext = os.path.splitext(path)
 
             yield {
@@ -23,6 +23,7 @@ class ExtraNetworksPageHypernetworks(ui_extra_networks.ExtraNetworksPage):
                 "search_term": self.search_terms_from_path(path),
                 "prompt": json.dumps(f"<hypernet:{name}:") + " + opts.extra_networks_default_multiplier + " + json.dumps(">"),
                 "local_preview": f"{path}.preview.{shared.opts.samples_format}",
+                "sort_keys": {**self.get_sort_keys(path + ext), **{'default': index}},
             }
 
     def allowed_directories_for_previews(self):
diff --git a/modules/ui_extra_networks_textual_inversion.py b/modules/ui_extra_networks_textual_inversion.py
index 6944d559..1a8e1a73 100644
--- a/modules/ui_extra_networks_textual_inversion.py
+++ b/modules/ui_extra_networks_textual_inversion.py
@@ -13,7 +13,7 @@ class ExtraNetworksPageTextualInversion(ui_extra_networks.ExtraNetworksPage):
         sd_hijack.model_hijack.embedding_db.load_textual_inversion_embeddings(force_reload=True)
 
     def list_items(self):
-        for embedding in sd_hijack.model_hijack.embedding_db.word_embeddings.values():
+        for index, embedding in enumerate(sd_hijack.model_hijack.embedding_db.word_embeddings.values()):
             path, ext = os.path.splitext(embedding.filename)
             yield {
                 "name": embedding.name,
@@ -23,6 +23,7 @@ class ExtraNetworksPageTextualInversion(ui_extra_networks.ExtraNetworksPage):
                 "search_term": self.search_terms_from_path(embedding.filename),
                 "prompt": json.dumps(embedding.name),
                 "local_preview": f"{path}.preview.{shared.opts.samples_format}",
+                "sort_keys": {**self.get_sort_keys(embedding.filename), **{'default': index}},
             }
 
     def allowed_directories_for_previews(self):
diff --git a/style.css b/style.css
index 34b85b80..ba081b56 100644
--- a/style.css
+++ b/style.css
@@ -734,12 +734,22 @@ footer {
 .extra-network-subdirs button{
     margin: 0 0.15em;
 }
-.extra-networks .tab-nav .search{
+.extra-networks .tab-nav .search,
+.extra-networks .tab-nav .sort,
+.extra-networks .tab-nav .sortorder{
     display: inline-block;
-    max-width: 16em;
     margin: 0.3em;
     align-self: center;
+}
+
+.extra-networks .tab-nav .search {
     width: 16em;
+    max-width: 16em;
+}
+
+.extra-networks .tab-nav .sort {
+    width: 12em;
+    max-width: 12em;
 }
 
 #txt2img_extra_view, #img2img_extra_view {

From 4cc0cede6d4cae74779b1b4cfc4b7bf7bfdaeaa6 Mon Sep 17 00:00:00 2001
From: catboxanon <122327233+catboxanon@users.noreply.github.com>
Date: Fri, 2 Jun 2023 04:12:08 +0000
Subject: [PATCH 2/3] lint fixes

---
 javascript/extraNetworks.js | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 58bc7f1d..b87bca3e 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -10,7 +10,7 @@ function setupExtraNetworksForTab(tabname) {
     search.classList.add('search');
     sort.classList.add('sort');
     sortOrder.classList.add('sortorder');
-    sort.dataset.sortkey = 'sortDefault'
+    sort.dataset.sortkey = 'sortDefault';
     tabs.appendChild(search);
     tabs.appendChild(sort);
     tabs.appendChild(sortOrder);
@@ -35,42 +35,45 @@ function setupExtraNetworksForTab(tabname) {
 
     var applySort = function() {
         var reverse = sortOrder.classList.contains("sortReverse");
-        var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort","").replaceAll(" ", "_").replace(/_+$/, "").trim();
-        sortKey = sortKey ? "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1) : ""
-        var sortKeyStore = sortKey ? sortKey + (reverse ? "Reverse" : "") : ""
-        if (!sortKey || sortKeyStore == sort.dataset.sortkey)
+        var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim();
+        sortKey = sortKey ? "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1) : "";
+        var sortKeyStore = sortKey ? sortKey + (reverse ? "Reverse" : "") : "";
+        if (!sortKey || sortKeyStore == sort.dataset.sortkey) {
             return;
+        }
 
         sort.dataset.sortkey = sortKeyStore;
 
-        var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card')
+        var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card');
         cards.forEach(function(card) {
             card.originalParentElement = card.parentElement;
-        })
+        });
         var sortedCards = Array.from(cards);
         sortedCards.sort(function(cardA, cardB) {
             var a = cardA.dataset[sortKey];
             var b = cardB.dataset[sortKey];
-            if (!isNaN(a) && !isNaN(b))
+            if (!isNaN(a) && !isNaN(b)) {
                 return parseInt(a) - parseInt(b);
+            }
 
             return (a < b ? -1 : (a > b ? 1 : 0));
-        })
-        if (reverse)
+        });
+        if (reverse) {
             sortedCards.reverse();
+        }
         cards.forEach(function(card) {
             card.remove();
-        })
+        });
         sortedCards.forEach(function(card) {
             card.originalParentElement.appendChild(card);
-        })
-    }
+        });
+    };
 
     search.addEventListener("input", applyFilter);
     applyFilter();
     ["change", "blur", "click"].forEach(function(evt) {
         sort.querySelector("input").addEventListener(evt, applySort);
-    })
+    });
     sortOrder.addEventListener("click", function() {
         sortOrder.classList.toggle("sortReverse");
         applySort();

From 9009e25cb1a7864127f6b2dc7329bd4178ad3a5d Mon Sep 17 00:00:00 2001
From: catboxanon <122327233+catboxanon@users.noreply.github.com>
Date: Fri, 2 Jun 2023 16:12:24 -0400
Subject: [PATCH 3/3] Apply suggestions from code review

Co-authored-by: Aarni Koskela <akx@iki.fi>
---
 extensions-builtin/Lora/ui_extra_networks_lora.py | 3 ++-
 modules/ui_extra_networks.py                      | 8 +++++---
 modules/ui_extra_networks_checkpoints.py          | 3 ++-
 modules/ui_extra_networks_hypernets.py            | 3 ++-
 modules/ui_extra_networks_textual_inversion.py    | 3 ++-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/extensions-builtin/Lora/ui_extra_networks_lora.py b/extensions-builtin/Lora/ui_extra_networks_lora.py
index 6bf3f079..da49790b 100644
--- a/extensions-builtin/Lora/ui_extra_networks_lora.py
+++ b/extensions-builtin/Lora/ui_extra_networks_lora.py
@@ -27,7 +27,8 @@ class ExtraNetworksPageLora(ui_extra_networks.ExtraNetworksPage):
                 "prompt": json.dumps(f"<lora:{alias}:") + " + opts.extra_networks_default_multiplier + " + json.dumps(">"),
                 "local_preview": f"{path}.{shared.opts.samples_format}",
                 "metadata": json.dumps(lora_on_disk.metadata, indent=4) if lora_on_disk.metadata else None,
-                "sort_keys": {**self.get_sort_keys(lora_on_disk.filename), **{'default': index}},
+                "sort_keys": {'default': index, **self.get_sort_keys(lora_on_disk.filename)},
+
             }
 
     def allowed_directories_for_previews(self):
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 8142811a..a7d3bc79 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -210,10 +210,12 @@ class ExtraNetworksPage:
         """
         List of default keys used for sorting in the UI.
         """
+        pth = Path(path)
+        stat = pth.stat()
         return {
-            "date_created": int(Path(path).stat().st_ctime or 0),
-            "date_modified": int(Path(path).stat().st_mtime or 0),
-            "name": Path(path).name.lower(),
+            "date_created": int(stat.st_ctime or 0),
+            "date_modified": int(stat.st_mtime or 0),
+            "name": pth.name.lower(),
         }
 
     def find_preview(self, path):
diff --git a/modules/ui_extra_networks_checkpoints.py b/modules/ui_extra_networks_checkpoints.py
index d366b9ce..8b9ab71b 100644
--- a/modules/ui_extra_networks_checkpoints.py
+++ b/modules/ui_extra_networks_checkpoints.py
@@ -24,7 +24,8 @@ class ExtraNetworksPageCheckpoints(ui_extra_networks.ExtraNetworksPage):
                 "search_term": self.search_terms_from_path(checkpoint.filename) + " " + (checkpoint.sha256 or ""),
                 "onclick": '"' + html.escape(f"""return selectCheckpoint({json.dumps(name)})""") + '"',
                 "local_preview": f"{path}.{shared.opts.samples_format}",
-                "sort_keys": {**self.get_sort_keys(checkpoint.filename), **{'default': index}},
+                "sort_keys": {'default': index, **self.get_sort_keys(checkpoint.filename)},
+
             }
 
     def allowed_directories_for_previews(self):
diff --git a/modules/ui_extra_networks_hypernets.py b/modules/ui_extra_networks_hypernets.py
index 180a224c..7c19b532 100644
--- a/modules/ui_extra_networks_hypernets.py
+++ b/modules/ui_extra_networks_hypernets.py
@@ -23,7 +23,8 @@ class ExtraNetworksPageHypernetworks(ui_extra_networks.ExtraNetworksPage):
                 "search_term": self.search_terms_from_path(path),
                 "prompt": json.dumps(f"<hypernet:{name}:") + " + opts.extra_networks_default_multiplier + " + json.dumps(">"),
                 "local_preview": f"{path}.preview.{shared.opts.samples_format}",
-                "sort_keys": {**self.get_sort_keys(path + ext), **{'default': index}},
+                "sort_keys": {'default': index, **self.get_sort_keys(path + ext)},
+
             }
 
     def allowed_directories_for_previews(self):
diff --git a/modules/ui_extra_networks_textual_inversion.py b/modules/ui_extra_networks_textual_inversion.py
index 1a8e1a73..58a61c55 100644
--- a/modules/ui_extra_networks_textual_inversion.py
+++ b/modules/ui_extra_networks_textual_inversion.py
@@ -23,7 +23,8 @@ class ExtraNetworksPageTextualInversion(ui_extra_networks.ExtraNetworksPage):
                 "search_term": self.search_terms_from_path(embedding.filename),
                 "prompt": json.dumps(embedding.name),
                 "local_preview": f"{path}.preview.{shared.opts.samples_format}",
-                "sort_keys": {**self.get_sort_keys(embedding.filename), **{'default': index}},
+                "sort_keys": {'default': index, **self.get_sort_keys(embedding.filename)},
+
             }
 
     def allowed_directories_for_previews(self):