Merge pull request #10943 from catboxanon/sort

Allow dynamically sorting extra networks in UI

1 files changed, 50 insertions, 0 deletions

diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index aafe0a00..b87bca3e 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,51 @@ 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;
 }