From bc5ae74c7d8949bab37e260b16e76889b9968099 Mon Sep 17 00:00:00 2001
From: Learwin <6223515+Learwin@users.noreply.github.com>
Date: Sat, 30 Dec 2023 21:52:27 +0100
Subject: Added negative prompts to extra networks lora

---
 modules/ui_extra_networks.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index fe5d3ba3..b8c02241 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -223,7 +223,10 @@ class ExtraNetworksPage:
 
         onclick = item.get("onclick", None)
         if onclick is None:
-            onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
+            if "negative_prompt" in item:
+                onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {item["negative_prompt"]}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
+            else:
+                onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {'""'}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
 
         height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
         width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
-- 
cgit v1.2.1


From d859cec696a953dbfd6f69f7735e68661748d579 Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Mon, 1 Jan 2024 13:53:12 +0300
Subject: infotext.py: rename usages in the codebase

---
 modules/ui_extra_networks.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index b8c02241..790af135 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -10,7 +10,7 @@ import json
 import html
 from fastapi.exceptions import HTTPException
 
-from modules.generation_parameters_copypaste import image_from_url_text
+from modules.infotext import image_from_url_text
 from modules.ui_components import ToolButton
 
 extra_pages = []
-- 
cgit v1.2.1


From 5d7d1823afab0a051a3fbbdb3213bae8051350b7 Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Mon, 1 Jan 2024 17:25:30 +0300
Subject: rename infotext.py again, this time to infotext_utils.py; I didn't
 realize infotext would be used for variable names in multiple places, which
 makes it awkward to import the module; also fix the bug I caused by this
 rename that breaks tests

---
 modules/ui_extra_networks.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 790af135..beea1316 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -10,7 +10,7 @@ import json
 import html
 from fastapi.exceptions import HTTPException
 
-from modules.infotext import image_from_url_text
+from modules.infotext_utils import image_from_url_text
 from modules.ui_components import ToolButton
 
 extra_pages = []
-- 
cgit v1.2.1


From fccd0b00c2ca17360b7b956cd2e9bd1fb42c017d Mon Sep 17 00:00:00 2001
From: w-e-w <40751091+w-e-w@users.noreply.github.com>
Date: Wed, 3 Jan 2024 18:55:43 +0900
Subject: reduce unnecessary re-indexing extra networks dir

---
 modules/ui_extra_networks.py | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index beea1316..e1c679ec 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -417,21 +417,21 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
 
     dropdown_sort.change(fn=lambda: None, _js="function(){ applyExtraNetworkSort('" + tabname + "'); }")
 
+    def create_html():
+        ui.pages_contents = [pg.create_html(ui.tabname) for pg in ui.stored_extra_pages]
+
     def pages_html():
         if not ui.pages_contents:
-            return refresh()
-
+            create_html()
         return ui.pages_contents
 
     def refresh():
         for pg in ui.stored_extra_pages:
             pg.refresh()
-
-        ui.pages_contents = [pg.create_html(ui.tabname) for pg in ui.stored_extra_pages]
-
+        create_html()
         return ui.pages_contents
 
-    interface.load(fn=pages_html, inputs=[], outputs=[*ui.pages])
+    interface.load(fn=pages_html, inputs=[], outputs=ui.pages)
     button_refresh.click(fn=refresh, inputs=[], outputs=ui.pages)
 
     return ui
-- 
cgit v1.2.1


From 420f56c2e85ebbd3f530cf2c7b22022fda13ae13 Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Thu, 4 Jan 2024 02:28:05 +0300
Subject: mass file lister as an attempt to tackle #14507

---
 modules/ui_extra_networks.py | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index e1c679ec..c06c8664 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -3,7 +3,7 @@ import os.path
 import urllib.parse
 from pathlib import Path
 
-from modules import shared, ui_extra_networks_user_metadata, errors, extra_networks
+from modules import shared, ui_extra_networks_user_metadata, errors, extra_networks, util
 from modules.images import read_info_from_image, save_image_with_geninfo
 import gradio as gr
 import json
@@ -107,6 +107,7 @@ class ExtraNetworksPage:
         self.allow_negative_prompt = False
         self.metadata = {}
         self.items = {}
+        self.lister = util.MassFileLister()
 
     def refresh(self):
         pass
@@ -123,7 +124,7 @@ class ExtraNetworksPage:
 
     def link_preview(self, filename):
         quoted_filename = urllib.parse.quote(filename.replace('\\', '/'))
-        mtime = os.path.getmtime(filename)
+        mtime, _ = self.lister.mctime(filename)
         return f"./sd_extra_networks/thumb?filename={quoted_filename}&mtime={mtime}"
 
     def search_terms_from_path(self, filename, possible_directories=None):
@@ -137,6 +138,8 @@ class ExtraNetworksPage:
         return ""
 
     def create_html(self, tabname):
+        self.lister.reset()
+
         items_html = ''
 
         self.metadata = {}
@@ -282,10 +285,10 @@ class ExtraNetworksPage:
         List of default keys used for sorting in the UI.
         """
         pth = Path(path)
-        stat = pth.stat()
+        mtime, ctime = self.lister.mctime(path)
         return {
-            "date_created": int(stat.st_ctime or 0),
-            "date_modified": int(stat.st_mtime or 0),
+            "date_created": int(mtime),
+            "date_modified": int(ctime),
             "name": pth.name.lower(),
             "path": str(pth.parent).lower(),
         }
@@ -298,7 +301,7 @@ class ExtraNetworksPage:
         potential_files = sum([[path + "." + ext, path + ".preview." + ext] for ext in allowed_preview_extensions()], [])
 
         for file in potential_files:
-            if os.path.isfile(file):
+            if self.lister.exists(file):
                 return self.link_preview(file)
 
         return None
@@ -308,6 +311,9 @@ class ExtraNetworksPage:
         Find and read a description file for a given path (without extension).
         """
         for file in [f"{path}.txt", f"{path}.description.txt"]:
+            if not self.lister.exists(file):
+                continue
+
             try:
                 with open(file, "r", encoding="utf-8", errors="replace") as f:
                     return f.read()
-- 
cgit v1.2.1


From 320a217b78047f30e1aa5e735742669a7f4c6bd8 Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Thu, 4 Jan 2024 02:39:02 +0300
Subject: forgot something

---
 modules/ui_extra_networks.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index c06c8664..62db36f5 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -114,7 +114,7 @@ class ExtraNetworksPage:
 
     def read_user_metadata(self, item):
         filename = item.get("filename", None)
-        metadata = extra_networks.get_user_metadata(filename)
+        metadata = extra_networks.get_user_metadata(filename, lister=self.lister)
 
         desc = metadata.get("description", None)
         if desc is not None:
-- 
cgit v1.2.1


From df8aa69a99e38ae59a4e599b9dff11eccf3490f4 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Mon, 8 Jan 2024 14:10:03 -0500
Subject: Add tree-view display for extra networks.

---
 modules/ui_extra_networks.py | 352 +++++++++++++++++++++++++++++++------------
 1 file changed, 253 insertions(+), 99 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index fe5d3ba3..8667617b 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -2,6 +2,8 @@ import functools
 import os.path
 import urllib.parse
 from pathlib import Path
+from typing import Optional, Union
+from dataclasses import dataclass
 
 from modules import shared, ui_extra_networks_user_metadata, errors, extra_networks
 from modules.images import read_info_from_image, save_image_with_geninfo
@@ -15,10 +17,8 @@ from modules.ui_components import ToolButton
 
 extra_pages = []
 allowed_dirs = set()
-
 default_allowed_preview_extensions = ["png", "jpg", "jpeg", "webp", "gif"]
 
-
 @functools.cache
 def allowed_preview_extensions_with_extra(extra_extensions=None):
     return set(default_allowed_preview_extensions) | set(extra_extensions or [])
@@ -28,6 +28,58 @@ def allowed_preview_extensions():
     return allowed_preview_extensions_with_extra((shared.opts.samples_format, ))
 
 
+@dataclass
+class ExtraNetworksItem:
+    """Wrapper for dictionaries representing ExtraNetworks items."""
+    item: dict
+
+
+def get_tree(paths: Union[str, list[str]], items: dict[str, ExtraNetworksItem]) -> dict:
+    """Recursively builds a directory tree.
+
+    Args:
+        paths: Path or list of paths to directories. These paths are treated as roots from which
+            the tree will be built.
+        items: A dictionary associating filepaths to an ExtraNetworksItem instance.
+
+    Returns:
+        The result directory tree.
+    """
+    if isinstance(paths, (str,)):
+        paths = [paths]
+
+    def _get_tree(_paths: list[str]):
+        _res = {}
+        for path in _paths:
+            if os.path.isdir(path):
+                dir_items = os.listdir(path)
+                # Ignore empty directories.
+                if not dir_items:
+                    continue
+                dir_tree = _get_tree([os.path.join(path, x) for x in dir_items])
+                # We only want to store non-empty folders in the tree.
+                if dir_tree:
+                    _res[os.path.basename(path)] = dir_tree
+            else:
+                if path not in items:
+                    continue
+                # Add the ExtraNetworksItem to the result.
+                _res[os.path.basename(path)] = items[path]
+        return _res
+
+    res = {}
+    # Handle each root directory separately.
+    # Each root WILL have a key/value at the root of the result dict though
+    # the value can be an empty dict if the directory is empty. We want these
+    # placeholders for empty dirs so we can inform the user later.
+    for path in paths:
+        # Wrap the path in a list since that is what the `_get_tree` expects.
+        res[path] = _get_tree([path])
+        if res[path]:
+            res[path] = res[path][os.path.basename(path)]
+
+    return res
+
 def register_page(page):
     """registers extra networks page for the UI; recommend doing it in on_before_ui() callback for extensions"""
 
@@ -80,7 +132,7 @@ def get_single_card(page: str = "", tabname: str = "", name: str = ""):
         item = page.items.get(name)
 
     page.read_user_metadata(item)
-    item_html = page.create_html_for_item(item, tabname)
+    item_html = page.create_item_html(tabname, item)
 
     return JSONResponse({"html": item_html})
 
@@ -96,13 +148,15 @@ def quote_js(s):
     s = s.replace('"', '\\"')
     return f'"{s}"'
 
-
 class ExtraNetworksPage:
     def __init__(self, title):
         self.title = title
         self.name = title.lower()
         self.id_page = self.name.replace(" ", "_")
-        self.card_page = shared.html("extra-networks-card.html")
+        if shared.opts.extra_networks_tree_view:
+            self.card_page = shared.html("extra-networks-card-minimal.html")
+        else:
+            self.card_page = shared.html("extra-networks-card.html")
         self.allow_prompt = True
         self.allow_negative_prompt = False
         self.metadata = {}
@@ -136,12 +190,141 @@ class ExtraNetworksPage:
 
         return ""
 
-    def create_html(self, tabname):
-        items_html = ''
+    def create_item_html(self, tabname: str, item: dict) -> str:
+        """Generates HTML for a single ExtraNetworks Item
+
+        Args:
+            tabname: The name of the active tab.
+            item: Dictionary containing item information.
+
+        Returns:
+            HTML string generated for this item.
+            Can be empty if the item is not meant to be shown.
+        """
+        metadata = item.get("metadata")
+        if metadata:
+            self.metadata[item["name"]] = metadata
+
+        if "user_metadata" not in item:
+            self.read_user_metadata(item)
+
+        preview = item.get("preview", None)
+        height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
+        width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
+        background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''
+
+        onclick = item.get("onclick", None)
+        if onclick is None:
+            onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
+        
+        copy_path_button = f"<div class='copy-path-button card-button' title='Copy path to clipboard' onclick='extraNetworksCopyCardPath(event, {quote_js(item['filename'])})' data-clipboard-text='{quote_js(item['filename'])}'></div>"
+
+        metadata_button = ""
+        metadata = item.get("metadata")
+        if metadata:
+            metadata_button = f"<div class='metadata-button card-button' title='Show internal metadata' onclick='extraNetworksRequestMetadata(event, {quote_js(self.name)}, {quote_js(html.escape(item['name']))})'></div>"
+
+        edit_button = f"<div class='edit-button card-button' title='Edit metadata' onclick='extraNetworksEditUserMetadata(event, {quote_js(tabname)}, {quote_js(self.id_page)}, {quote_js(html.escape(item['name']))})'></div>"
+
+        local_path = ""
+        filename = item.get("filename", "")
+        for reldir in self.allowed_directories_for_previews():
+            absdir = os.path.abspath(reldir)
+
+            if filename.startswith(absdir):
+                local_path = filename[len(absdir):]
+
+        # if this is true, the item must not be shown in the default view, and must instead only be
+        # shown when searching for it
+        if shared.opts.extra_networks_hidden_models == "Always":
+            search_only = False
+        else:
+            search_only = "/." in local_path or "\\." in local_path
+
+        if search_only and shared.opts.extra_networks_hidden_models == "Never":
+            return ""
+
+        sort_keys = " ".join([f'data-sort-{k}="{html.escape(str(v))}"' for k, v in item.get("sort_keys", {}).items()]).strip()
+
+        # Some items here might not be used depending on HTML template used.
+        args = {
+            "background_image": background_image,
+            "card_clicked": onclick,
+            "copy_path_button": copy_path_button,
+            "description": (item.get("description") or "" if shared.opts.extra_networks_card_show_desc else ""),
+            "edit_button": edit_button,
+            "local_preview": quote_js(item["local_preview"]),
+            "metadata_button": metadata_button,
+            "name": html.escape(item["name"]),
+            "prompt": item.get("prompt", None),
+            "save_card_preview": '"' + html.escape(f"""return saveCardPreview(event, {quote_js(tabname)}, {quote_js(item["local_preview"])})""") + '"',
+            "search_only": " search_only" if search_only else "",
+            "search_term": item.get("search_term", ""),
+            "sort_keys": sort_keys,
+            "style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
+            "tabname": quote_js(tabname),
+        }
+
+        return self.card_page.format(**args)
+
+    def create_tree_view_html(self, tabname: str) -> str:
+        """Generates HTML for displaying folders in a tree view.
+
+        Args:
+            tabname: The name of the active tab.
+
+        Returns:
+            HTML string generated for this tree view.
+        """
+        self_name_id = self.name.replace(" ", "_")
+        res = f"<div id='{tabname}_{self_name_id}_tree_view' class='extra-network-cards'>"
 
         self.metadata = {}
+        self.items = {x["name"]: x for x in self.list_items()}
 
+        roots = self.allowed_directories_for_previews()
+        tree_items = {v["filename"]: ExtraNetworksItem(v) for v in self.items.values()}
+        tree = get_tree([os.path.abspath(x) for x in roots], items=tree_items)
+
+        if not tree:
+            return res + "</div>"
+
+        file_template = "<li class='file-item'>{}</li>"
+        dir_template = (
+            "<details {} class='folder-item'>"
+            "<summary class='folder-item-summary'>{}</summary>"
+            "{}</ul>"
+            "</details>"
+        )
+
+        def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> str:
+            """Recursively builds HTML for a tree."""
+            _res = "<ul class='folder-container'>"
+            if not data:
+                return "<ul style='list-style-type: \"⚠️\";'><li>DIRECTORY IS EMPTY</li></ul>"
+
+            for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
+                if isinstance(v, (ExtraNetworksItem,)):
+                    _res += file_template.format(self.create_item_html(tabname, v.item))
+                else:
+                    _res += dir_template.format("", k, _build_tree(v))
+            return _res
+
+        res += "<ul class='folder-container'>"
+        # Add each root directory to the tree.
+        for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
+            # If root is empty, append the "disabled" attribute to the template details tag.
+            res += dir_template.format("open" if v else "open disabled", k, _build_tree(v))
+        res += "</ul>"
+        res += "</div>"
+
+        return res
+
+    def create_card_view_html(self, tabname):
+        items_html = ""
+        self.metadata = {}
         subdirs = {}
+
         for parentdir in [os.path.abspath(x) for x in self.allowed_directories_for_previews()]:
             for root, dirs, _ in sorted(os.walk(parentdir, followlinks=True), key=lambda x: shared.natural_sort_key(x[0])):
                 for dirname in sorted(dirs, key=shared.natural_sort_key):
@@ -171,40 +354,45 @@ class ExtraNetworksPage:
         if subdirs:
             subdirs = {"": 1, **subdirs}
 
-        subdirs_html = "".join([f"""
-<button class='lg secondary gradio-button custom-button{" search-all" if subdir=="" else ""}' onclick='extraNetworksSearchButton("{tabname}_extra_search", event)'>
-{html.escape(subdir if subdir!="" else "all")}
-</button>
-""" for subdir in subdirs])
+        subdirs_html_template = (
+            "<button class='lg secondary gradio-button custom-button{}' "
+            "onclick='extraNetworksSearchButton(\"{}_extra_search\", event)'>"
+            "{}"
+            "</button>"
+        )
+        subdirs_html = "".join(
+            [
+                subdirs_html_template.format(
+                    " search-all" if subdir == "" else "",
+                    tabname,
+                    html.escape(subdir if subdir != "" else "all"),
+                ) for subdir in subdirs
+            ]
+        )
 
         self.items = {x["name"]: x for x in self.list_items()}
         for item in self.items.values():
-            metadata = item.get("metadata")
-            if metadata:
-                self.metadata[item["name"]] = metadata
-
-            if "user_metadata" not in item:
-                self.read_user_metadata(item)
-
-            items_html += self.create_html_for_item(item, tabname)
+            items_html += self.create_item_html(tabname, item)
 
-        if items_html == '':
+        if items_html == "":
             dirs = "".join([f"<li>{x}</li>" for x in self.allowed_directories_for_previews()])
             items_html = shared.html("extra-networks-no-cards.html").format(dirs=dirs)
 
         self_name_id = self.name.replace(" ", "_")
 
-        res = f"""
-<div id='{tabname}_{self_name_id}_subdirs' class='extra-network-subdirs extra-network-subdirs-cards'>
-{subdirs_html}
-</div>
-<div id='{tabname}_{self_name_id}_cards' class='extra-network-cards'>
-{items_html}
-</div>
-"""
+        res = (
+            f"<div id='{tabname}_{self_name_id}_subdirs' class='extra-network-subdirs extra-network-subdirs-cards'>{subdirs_html}</div>"
+            f"<div id='{tabname}_{self_name_id}_cards' class='extra-network-cards'>{items_html}</div>"
+        )
 
         return res
 
+    def create_html(self, tabname):
+        if shared.opts.extra_networks_tree_view:
+            return self.create_tree_view_html(tabname)
+        else:
+            return self.create_card_view_html(tabname)
+
     def create_item(self, name, index=None):
         raise NotImplementedError()
 
@@ -214,66 +402,6 @@ class ExtraNetworksPage:
     def allowed_directories_for_previews(self):
         return []
 
-    def create_html_for_item(self, item, tabname):
-        """
-        Create HTML for card item in tab tabname; can return empty string if the item is not meant to be shown.
-        """
-
-        preview = item.get("preview", None)
-
-        onclick = item.get("onclick", None)
-        if onclick is None:
-            onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
-
-        height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
-        width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
-        background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''
-        metadata_button = ""
-        metadata = item.get("metadata")
-        if metadata:
-            metadata_button = f"<div class='metadata-button card-button' title='Show internal metadata' onclick='extraNetworksRequestMetadata(event, {quote_js(self.name)}, {quote_js(html.escape(item['name']))})'></div>"
-
-        edit_button = f"<div class='edit-button card-button' title='Edit metadata' onclick='extraNetworksEditUserMetadata(event, {quote_js(tabname)}, {quote_js(self.id_page)}, {quote_js(html.escape(item['name']))})'></div>"
-
-        local_path = ""
-        filename = item.get("filename", "")
-        for reldir in self.allowed_directories_for_previews():
-            absdir = os.path.abspath(reldir)
-
-            if filename.startswith(absdir):
-                local_path = filename[len(absdir):]
-
-        # if this is true, the item must not be shown in the default view, and must instead only be
-        # shown when searching for it
-        if shared.opts.extra_networks_hidden_models == "Always":
-            search_only = False
-        else:
-            search_only = "/." in local_path or "\\." in local_path
-
-        if search_only and shared.opts.extra_networks_hidden_models == "Never":
-            return ""
-
-        sort_keys = " ".join([f'data-sort-{k}="{html.escape(str(v))}"' for k, v in item.get("sort_keys", {}).items()]).strip()
-
-        args = {
-            "background_image": background_image,
-            "style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
-            "prompt": item.get("prompt", None),
-            "tabname": quote_js(tabname),
-            "local_preview": quote_js(item["local_preview"]),
-            "name": html.escape(item["name"]),
-            "description": (item.get("description") or "" if shared.opts.extra_networks_card_show_desc else ""),
-            "card_clicked": onclick,
-            "save_card_preview": '"' + html.escape(f"""return saveCardPreview(event, {quote_js(tabname)}, {quote_js(item["local_preview"])})""") + '"',
-            "search_term": item.get("search_term", ""),
-            "metadata_button": metadata_button,
-            "edit_button": edit_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.
@@ -360,7 +488,6 @@ def pages_in_preferred_order(pages):
 
     return sorted(pages, key=lambda x: tab_scores[x.name])
 
-
 def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
     from modules.ui import switch_values_symbol
 
@@ -381,7 +508,6 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
             elem_id = f"{tabname}_{page.id_page}_cards_html"
             page_elem = gr.HTML('Loading...', elem_id=elem_id)
             ui.pages.append(page_elem)
-
             page_elem.change(fn=lambda: None, _js='function(){applyExtraNetworkFilter(' + quote_js(tabname) + '); return []}', inputs=[], outputs=[])
 
             editor = page.create_user_metadata_editor(ui, tabname)
@@ -390,30 +516,60 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
 
             related_tabs.append(tab)
 
+    tab_controls = {}
+
     edit_search = gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", elem_classes="search", placeholder="Search...", visible=False, interactive=True)
     dropdown_sort = gr.Dropdown(choices=['Path', 'Name', 'Date Created', 'Date Modified', ], value=shared.opts.extra_networks_card_order_field, elem_id=tabname+"_extra_sort", elem_classes="sort", multiselect=False, visible=False, show_label=False, interactive=True, label=tabname+"_extra_sort_order")
     button_sortorder = ToolButton(switch_values_symbol, elem_id=tabname+"_extra_sortorder", elem_classes=["sortorder"] + ([] if shared.opts.extra_networks_card_order == "Ascending" else ["sortReverse"]), visible=False, tooltip="Invert sort order")
     button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh", visible=False)
     checkbox_show_dirs = gr.Checkbox(True, label='Show dirs', elem_id=tabname+"_extra_show_dirs", elem_classes="show-dirs", visible=False)
+    
+    tab_controls["edit_search"] = edit_search
+    tab_controls["dropdown_sort"] = dropdown_sort
+    tab_controls["button_sortorder"] = button_sortorder
+    tab_controls["button_refresh"] = button_refresh
+    tab_controls["checkbox_show_dirs"] = checkbox_show_dirs
 
     ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)
     ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False)
 
-    tab_controls = [edit_search, dropdown_sort, button_sortorder, button_refresh, checkbox_show_dirs]
-
     for tab in unrelated_tabs:
-        tab.select(fn=lambda: [gr.update(visible=False) for _ in tab_controls], _js='function(){ extraNetworksUrelatedTabSelected("' + tabname + '"); }', inputs=[], outputs=tab_controls, show_progress=False)
+        tab.select(
+            fn=lambda: [gr.update(visible=False) for _ in tab_controls],
+            _js="function(){ extraNetworksUrelatedTabSelected('" + tabname + "'); }",
+            inputs=[],
+            outputs=list(tab_controls.values()),
+            show_progress=False,
+        )
+
+    visible_controls = list(tab_controls.keys())
+    if shared.opts.extra_networks_tree_view:
+        visible_controls = ["button_refresh"]
 
     for page, tab in zip(ui.stored_extra_pages, related_tabs):
         allow_prompt = "true" if page.allow_prompt else "false"
         allow_negative_prompt = "true" if page.allow_negative_prompt else "false"
 
-        jscode = 'extraNetworksTabSelected("' + tabname + '", "' + f"{tabname}_{page.id_page}_prompts" + '", ' + allow_prompt + ', ' + allow_negative_prompt + ');'
-
-        tab.select(fn=lambda: [gr.update(visible=True) for _ in tab_controls],  _js='function(){ ' + jscode + ' }', inputs=[], outputs=tab_controls, show_progress=False)
+        jscode = (
+            "extraNetworksTabSelected("
+                f"'{tabname}', "
+                f"'{tabname}_{page.id_page}_prompts', "
+                f"'{allow_prompt}', "
+                f"'{allow_negative_prompt}'"
+            ");"
+        )
+
+        tab.select(
+            fn=lambda: [gr.update(visible=k in visible_controls) for k in tab_controls], 
+            _js="function(){ " + jscode + " }",
+            inputs=[],
+            outputs=list(tab_controls.values()),
+            show_progress=False,
+        )
 
     dropdown_sort.change(fn=lambda: None, _js="function(){ applyExtraNetworkSort('" + tabname + "'); }")
 
+
     def pages_html():
         if not ui.pages_contents:
             return refresh()
@@ -478,5 +634,3 @@ def setup_ui(ui, gallery):
 
     for editor in ui.user_metadata_editors:
         editor.setup_ui(gallery)
-
-
-- 
cgit v1.2.1


From 34fc215249e2bc0acc66cda47319e40b6e46a05f Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Mon, 8 Jan 2024 14:23:01 -0500
Subject: fix linting

---
 modules/ui_extra_networks.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 8667617b..ab484a5d 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -216,7 +216,7 @@ class ExtraNetworksPage:
         onclick = item.get("onclick", None)
         if onclick is None:
             onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
-        
+
         copy_path_button = f"<div class='copy-path-button card-button' title='Copy path to clipboard' onclick='extraNetworksCopyCardPath(event, {quote_js(item['filename'])})' data-clipboard-text='{quote_js(item['filename'])}'></div>"
 
         metadata_button = ""
@@ -523,7 +523,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
     button_sortorder = ToolButton(switch_values_symbol, elem_id=tabname+"_extra_sortorder", elem_classes=["sortorder"] + ([] if shared.opts.extra_networks_card_order == "Ascending" else ["sortReverse"]), visible=False, tooltip="Invert sort order")
     button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh", visible=False)
     checkbox_show_dirs = gr.Checkbox(True, label='Show dirs', elem_id=tabname+"_extra_show_dirs", elem_classes="show-dirs", visible=False)
-    
+
     tab_controls["edit_search"] = edit_search
     tab_controls["dropdown_sort"] = dropdown_sort
     tab_controls["button_sortorder"] = button_sortorder
@@ -560,7 +560,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
         )
 
         tab.select(
-            fn=lambda: [gr.update(visible=k in visible_controls) for k in tab_controls], 
+            fn=lambda: [gr.update(visible=k in visible_controls) for k in tab_controls],
             _js="function(){ " + jscode + " }",
             inputs=[],
             outputs=list(tab_controls.values()),
-- 
cgit v1.2.1


From 3db6938caa719aaa38b52edecf42740ef62b0c3c Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Wed, 10 Jan 2024 18:11:48 -0500
Subject: begin redesign of tree module.

---
 modules/ui_extra_networks.py | 164 ++++++++++++++++++++++++-------------------
 1 file changed, 93 insertions(+), 71 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index ab484a5d..6318594f 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -73,10 +73,11 @@ def get_tree(paths: Union[str, list[str]], items: dict[str, ExtraNetworksItem])
     # the value can be an empty dict if the directory is empty. We want these
     # placeholders for empty dirs so we can inform the user later.
     for path in paths:
+        short_path = os.path.basename(path)
         # Wrap the path in a list since that is what the `_get_tree` expects.
-        res[path] = _get_tree([path])
-        if res[path]:
-            res[path] = res[path][os.path.basename(path)]
+        res[short_path] = _get_tree([path])
+        if res[short_path]:
+            res[short_path] = res[short_path][os.path.basename(path)]
 
     return res
 
@@ -153,10 +154,9 @@ class ExtraNetworksPage:
         self.title = title
         self.name = title.lower()
         self.id_page = self.name.replace(" ", "_")
-        if shared.opts.extra_networks_tree_view:
-            self.card_page = shared.html("extra-networks-card-minimal.html")
-        else:
-            self.card_page = shared.html("extra-networks-card.html")
+        self.extra_networks_pane_template = shared.html("extra-networks-pane.html")
+        self.card_page_template = shared.html("extra-networks-card.html")
+        self.card_page_minimal_template = shared.html("extra-networks-card-minimal.html")
         self.allow_prompt = True
         self.allow_negative_prompt = False
         self.metadata = {}
@@ -182,15 +182,14 @@ class ExtraNetworksPage:
 
     def search_terms_from_path(self, filename, possible_directories=None):
         abspath = os.path.abspath(filename)
-
         for parentdir in (possible_directories if possible_directories is not None else self.allowed_directories_for_previews()):
-            parentdir = os.path.abspath(parentdir)
+            parentdir = os.path.dirname(os.path.abspath(parentdir))
             if abspath.startswith(parentdir):
-                return abspath[len(parentdir):].replace('\\', '/')
+                return os.path.relpath(abspath, parentdir)
 
         return ""
 
-    def create_item_html(self, tabname: str, item: dict) -> str:
+    def create_item_html(self, tabname: str, item: dict, template: Optional[str] = None) -> str:
         """Generates HTML for a single ExtraNetworks Item
 
         Args:
@@ -265,7 +264,10 @@ class ExtraNetworksPage:
             "tabname": quote_js(tabname),
         }
 
-        return self.card_page.format(**args)
+        if template:
+            return template.format(**args)
+        else:
+            return self.card_page.format(**args)
 
     def create_tree_view_html(self, tabname: str) -> str:
         """Generates HTML for displaying folders in a tree view.
@@ -276,53 +278,67 @@ class ExtraNetworksPage:
         Returns:
             HTML string generated for this tree view.
         """
-        self_name_id = self.name.replace(" ", "_")
-        res = f"<div id='{tabname}_{self_name_id}_tree_view' class='extra-network-cards'>"
-
-        self.metadata = {}
-        self.items = {x["name"]: x for x in self.list_items()}
+        res = f""
 
+        # Generate HTML for the tree.
         roots = self.allowed_directories_for_previews()
         tree_items = {v["filename"]: ExtraNetworksItem(v) for v in self.items.values()}
         tree = get_tree([os.path.abspath(x) for x in roots], items=tree_items)
 
         if not tree:
-            return res + "</div>"
+            return res
 
-        file_template = "<li class='file-item'>{}</li>"
+        file_template = "<li class='file-item'>{card}</li>"
         dir_template = (
-            "<details {} class='folder-item'>"
-            "<summary class='folder-item-summary'>{}</summary>"
-            "{}</ul>"
+            "<details {attributes} class='folder-item'>"
+            "<summary class='folder-item-summary' onclick='extraNetworksFolderClick(event, \"{tabname}_extra_search\");'>"
+            "{folder_name}"
+            "</summary>"
+            "<ul class='folder-container'>{content}</ul>"
             "</details>"
         )
 
         def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> str:
             """Recursively builds HTML for a tree."""
-            _res = "<ul class='folder-container'>"
+            _res = ""
             if not data:
-                return "<ul style='list-style-type: \"⚠️\";'><li>DIRECTORY IS EMPTY</li></ul>"
+                return "<li style='list-style-type: \"⚠️\";'>DIRECTORY IS EMPTY</li>"
 
             for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
                 if isinstance(v, (ExtraNetworksItem,)):
-                    _res += file_template.format(self.create_item_html(tabname, v.item))
+                    item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
+                    _res += file_template.format(**{"card": item_html})
                 else:
-                    _res += dir_template.format("", k, _build_tree(v))
+                    tmp = dir_template.format(
+                        **{
+                            "attributes": "",
+                            "tabname": tabname,
+                            "folder_name": k,
+                            "content": _build_tree(v),
+                        }
+                    )
+                    _res += tmp
+                    
             return _res
 
-        res += "<ul class='folder-container'>"
         # Add each root directory to the tree.
         for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
             # If root is empty, append the "disabled" attribute to the template details tag.
-            res += dir_template.format("open" if v else "open disabled", k, _build_tree(v))
+            res += "<ul class='folder-container'>"
+            res += dir_template.format(
+                **{
+                    "attributes": "open" if v else "open",
+                    "tabname": tabname,
+                    "folder_name": k,
+                    "content": _build_tree(v),
+                }
+            )
+            res += "</ul>"
         res += "</ul>"
-        res += "</div>"
 
         return res
 
-    def create_card_view_html(self, tabname):
-        items_html = ""
-        self.metadata = {}
+    def create_subdirs_html(self, tabname):
         subdirs = {}
 
         for parentdir in [os.path.abspath(x) for x in self.allowed_directories_for_previews()]:
@@ -355,43 +371,53 @@ class ExtraNetworksPage:
             subdirs = {"": 1, **subdirs}
 
         subdirs_html_template = (
-            "<button class='lg secondary gradio-button custom-button{}' "
-            "onclick='extraNetworksSearchButton(\"{}_extra_search\", event)'>"
-            "{}"
+            "<button class='lg secondary gradio-button custom-button {classes}' "
+            "onclick='extraNetworksSearchButton(\"{tabname}_extra_search\", event)'>"
+            "{content}"
             "</button>"
         )
-        subdirs_html = "".join(
+        return "".join(
             [
                 subdirs_html_template.format(
-                    " search-all" if subdir == "" else "",
-                    tabname,
-                    html.escape(subdir if subdir != "" else "all"),
+                    **{
+                        "classes": "search-all" if not subdir else "",
+                        "tabname": tabname,
+                        "content": html.escape(subdir if subdir else "all"),
+                    }
                 ) for subdir in subdirs
             ]
         )
 
+    def create_card_view_html(self, tabname):
+        res = ""
         self.items = {x["name"]: x for x in self.list_items()}
         for item in self.items.values():
-            items_html += self.create_item_html(tabname, item)
+            res += self.create_item_html(tabname, item, self.card_page_template)
 
-        if items_html == "":
+        if res == "":
             dirs = "".join([f"<li>{x}</li>" for x in self.allowed_directories_for_previews()])
-            items_html = shared.html("extra-networks-no-cards.html").format(dirs=dirs)
-
-        self_name_id = self.name.replace(" ", "_")
-
-        res = (
-            f"<div id='{tabname}_{self_name_id}_subdirs' class='extra-network-subdirs extra-network-subdirs-cards'>{subdirs_html}</div>"
-            f"<div id='{tabname}_{self_name_id}_cards' class='extra-network-cards'>{items_html}</div>"
-        )
+            res = shared.html("extra-networks-no-cards.html").format(dirs=dirs)
 
         return res
 
     def create_html(self, tabname):
-        if shared.opts.extra_networks_tree_view:
-            return self.create_tree_view_html(tabname)
-        else:
-            return self.create_card_view_html(tabname)
+        self.metadata = {}
+        self.items = {x["name"]: x for x in self.list_items()}
+
+        tree_view_html = self.create_tree_view_html(tabname)
+        subdirs_html = self.create_subdirs_html(tabname)
+        card_view_html = self.create_card_view_html(tabname)
+        network_type_id = self.name.replace(" ", "_")
+
+        return self.extra_networks_pane_template.format(
+            **{
+                "tabname": tabname,
+                "network_type_id": network_type_id,
+                "tree_html": tree_view_html,
+                "subdirs_html": subdirs_html,
+                "items_html": card_view_html,
+            }
+        )
 
     def create_item(self, name, index=None):
         raise NotImplementedError()
@@ -516,19 +542,19 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
 
             related_tabs.append(tab)
 
-    tab_controls = {}
-
     edit_search = gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", elem_classes="search", placeholder="Search...", visible=False, interactive=True)
     dropdown_sort = gr.Dropdown(choices=['Path', 'Name', 'Date Created', 'Date Modified', ], value=shared.opts.extra_networks_card_order_field, elem_id=tabname+"_extra_sort", elem_classes="sort", multiselect=False, visible=False, show_label=False, interactive=True, label=tabname+"_extra_sort_order")
     button_sortorder = ToolButton(switch_values_symbol, elem_id=tabname+"_extra_sortorder", elem_classes=["sortorder"] + ([] if shared.opts.extra_networks_card_order == "Ascending" else ["sortReverse"]), visible=False, tooltip="Invert sort order")
     button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh", visible=False)
     checkbox_show_dirs = gr.Checkbox(True, label='Show dirs', elem_id=tabname+"_extra_show_dirs", elem_classes="show-dirs", visible=False)
 
-    tab_controls["edit_search"] = edit_search
-    tab_controls["dropdown_sort"] = dropdown_sort
-    tab_controls["button_sortorder"] = button_sortorder
-    tab_controls["button_refresh"] = button_refresh
-    tab_controls["checkbox_show_dirs"] = checkbox_show_dirs
+    tab_controls = [
+        edit_search,
+        dropdown_sort,
+        button_sortorder,
+        button_refresh,
+        checkbox_show_dirs,
+    ]
 
     ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)
     ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False)
@@ -538,32 +564,28 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
             fn=lambda: [gr.update(visible=False) for _ in tab_controls],
             _js="function(){ extraNetworksUrelatedTabSelected('" + tabname + "'); }",
             inputs=[],
-            outputs=list(tab_controls.values()),
+            outputs=tab_controls,
             show_progress=False,
         )
 
-    visible_controls = list(tab_controls.keys())
-    if shared.opts.extra_networks_tree_view:
-        visible_controls = ["button_refresh"]
-
     for page, tab in zip(ui.stored_extra_pages, related_tabs):
         allow_prompt = "true" if page.allow_prompt else "false"
         allow_negative_prompt = "true" if page.allow_negative_prompt else "false"
 
         jscode = (
             "extraNetworksTabSelected("
-                f"'{tabname}', "
-                f"'{tabname}_{page.id_page}_prompts', "
-                f"'{allow_prompt}', "
-                f"'{allow_negative_prompt}'"
+            f"'{tabname}', "
+            f"'{tabname}_{page.id_page}_prompts', "
+            f"'{allow_prompt}', "
+            f"'{allow_negative_prompt}'"
             ");"
         )
 
         tab.select(
-            fn=lambda: [gr.update(visible=k in visible_controls) for k in tab_controls],
+            fn=lambda: [gr.update(visible=True) for _ in tab_controls],
             _js="function(){ " + jscode + " }",
             inputs=[],
-            outputs=list(tab_controls.values()),
+            outputs=tab_controls,
             show_progress=False,
         )
 
-- 
cgit v1.2.1


From 0726a6e12e85a37d1e514f5603acf9f058c11783 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Thu, 11 Jan 2024 15:06:57 -0500
Subject: Finish base layout. Fix bugs. Need to test for stability and clean
 up.

---
 modules/ui_extra_networks.py | 113 +++++++++++++++----------------------------
 1 file changed, 39 insertions(+), 74 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 6318594f..2e226ba0 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -48,23 +48,24 @@ def get_tree(paths: Union[str, list[str]], items: dict[str, ExtraNetworksItem])
     if isinstance(paths, (str,)):
         paths = [paths]
 
-    def _get_tree(_paths: list[str]):
+    def _get_tree(_paths: list[str], _root: str):
         _res = {}
         for path in _paths:
+            relpath = os.path.relpath(path, _root)
             if os.path.isdir(path):
                 dir_items = os.listdir(path)
                 # Ignore empty directories.
                 if not dir_items:
                     continue
-                dir_tree = _get_tree([os.path.join(path, x) for x in dir_items])
+                dir_tree = _get_tree([os.path.join(path, x) for x in dir_items], _root)
                 # We only want to store non-empty folders in the tree.
                 if dir_tree:
-                    _res[os.path.basename(path)] = dir_tree
+                    _res[relpath] = dir_tree
             else:
                 if path not in items:
                     continue
                 # Add the ExtraNetworksItem to the result.
-                _res[os.path.basename(path)] = items[path]
+                _res[relpath] = items[path]
         return _res
 
     res = {}
@@ -73,11 +74,13 @@ def get_tree(paths: Union[str, list[str]], items: dict[str, ExtraNetworksItem])
     # the value can be an empty dict if the directory is empty. We want these
     # placeholders for empty dirs so we can inform the user later.
     for path in paths:
-        short_path = os.path.basename(path)
+        root = os.path.dirname(path)
+        relpath = os.path.relpath(path, root)
         # Wrap the path in a list since that is what the `_get_tree` expects.
-        res[short_path] = _get_tree([path])
-        if res[short_path]:
-            res[short_path] = res[short_path][os.path.basename(path)]
+        res[relpath] = _get_tree([path], root)
+        if res[relpath]:
+            # We need to pull the inner path out one for these root dirs.
+            res[relpath] = res[relpath][relpath]
 
     return res
 
@@ -245,6 +248,17 @@ class ExtraNetworksPage:
 
         sort_keys = " ".join([f'data-sort-{k}="{html.escape(str(v))}"' for k, v in item.get("sort_keys", {}).items()]).strip()
 
+        search_terms_html = ""
+        search_term_template = "<span style='{style}' class='{class}'>{search_term}</span>"
+        for search_term in item.get("search_terms", []):
+            search_terms_html += search_term_template.format(
+                **{
+                    "style": "display: none;",
+                    "class": "search_terms" + (" search_only" if search_only else ""),
+                    "search_term": search_term,
+                }
+            )
+
         # Some items here might not be used depending on HTML template used.
         args = {
             "background_image": background_image,
@@ -258,7 +272,7 @@ class ExtraNetworksPage:
             "prompt": item.get("prompt", None),
             "save_card_preview": '"' + html.escape(f"""return saveCardPreview(event, {quote_js(tabname)}, {quote_js(item["local_preview"])})""") + '"',
             "search_only": " search_only" if search_only else "",
-            "search_term": item.get("search_term", ""),
+            "search_terms": search_terms_html,
             "sort_keys": sort_keys,
             "style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
             "tabname": quote_js(tabname),
@@ -278,7 +292,7 @@ class ExtraNetworksPage:
         Returns:
             HTML string generated for this tree view.
         """
-        res = f""
+        res = ""
 
         # Generate HTML for the tree.
         roots = self.allowed_directories_for_previews()
@@ -291,7 +305,8 @@ class ExtraNetworksPage:
         file_template = "<li class='file-item'>{card}</li>"
         dir_template = (
             "<details {attributes} class='folder-item'>"
-            "<summary class='folder-item-summary' onclick='extraNetworksFolderClick(event, \"{tabname}_extra_search\");'>"
+            "<summary class='folder-item-summary' data-path='{data_path}' "
+            "onclick='extraNetworksFolderClick(event, \"{tabname}_extra_search\");'>"
             "{folder_name}"
             "</summary>"
             "<ul class='folder-container'>{content}</ul>"
@@ -309,16 +324,15 @@ class ExtraNetworksPage:
                     item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
                     _res += file_template.format(**{"card": item_html})
                 else:
-                    tmp = dir_template.format(
+                    _res += dir_template.format(
                         **{
                             "attributes": "",
                             "tabname": tabname,
-                            "folder_name": k,
+                            "folder_name": os.path.basename(k),
+                            "data_path": k,
                             "content": _build_tree(v),
                         }
                     )
-                    _res += tmp
-                    
             return _res
 
         # Add each root directory to the tree.
@@ -329,65 +343,15 @@ class ExtraNetworksPage:
                 **{
                     "attributes": "open" if v else "open",
                     "tabname": tabname,
-                    "folder_name": k,
+                    "folder_name": os.path.basename(k),
+                    "data_path": k,
                     "content": _build_tree(v),
                 }
             )
             res += "</ul>"
         res += "</ul>"
-
         return res
 
-    def create_subdirs_html(self, tabname):
-        subdirs = {}
-
-        for parentdir in [os.path.abspath(x) for x in self.allowed_directories_for_previews()]:
-            for root, dirs, _ in sorted(os.walk(parentdir, followlinks=True), key=lambda x: shared.natural_sort_key(x[0])):
-                for dirname in sorted(dirs, key=shared.natural_sort_key):
-                    x = os.path.join(root, dirname)
-
-                    if not os.path.isdir(x):
-                        continue
-
-                    subdir = os.path.abspath(x)[len(parentdir):].replace("\\", "/")
-
-                    if shared.opts.extra_networks_dir_button_function:
-                        if not subdir.startswith("/"):
-                            subdir = "/" + subdir
-                    else:
-                        while subdir.startswith("/"):
-                            subdir = subdir[1:]
-
-                    is_empty = len(os.listdir(x)) == 0
-                    if not is_empty and not subdir.endswith("/"):
-                        subdir = subdir + "/"
-
-                    if ("/." in subdir or subdir.startswith(".")) and not shared.opts.extra_networks_show_hidden_directories:
-                        continue
-
-                    subdirs[subdir] = 1
-
-        if subdirs:
-            subdirs = {"": 1, **subdirs}
-
-        subdirs_html_template = (
-            "<button class='lg secondary gradio-button custom-button {classes}' "
-            "onclick='extraNetworksSearchButton(\"{tabname}_extra_search\", event)'>"
-            "{content}"
-            "</button>"
-        )
-        return "".join(
-            [
-                subdirs_html_template.format(
-                    **{
-                        "classes": "search-all" if not subdir else "",
-                        "tabname": tabname,
-                        "content": html.escape(subdir if subdir else "all"),
-                    }
-                ) for subdir in subdirs
-            ]
-        )
-
     def create_card_view_html(self, tabname):
         res = ""
         self.items = {x["name"]: x for x in self.list_items()}
@@ -405,7 +369,6 @@ class ExtraNetworksPage:
         self.items = {x["name"]: x for x in self.list_items()}
 
         tree_view_html = self.create_tree_view_html(tabname)
-        subdirs_html = self.create_subdirs_html(tabname)
         card_view_html = self.create_card_view_html(tabname)
         network_type_id = self.name.replace(" ", "_")
 
@@ -414,7 +377,6 @@ class ExtraNetworksPage:
                 "tabname": tabname,
                 "network_type_id": network_type_id,
                 "tree_html": tree_view_html,
-                "subdirs_html": subdirs_html,
                 "items_html": card_view_html,
             }
         )
@@ -534,7 +496,12 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
             elem_id = f"{tabname}_{page.id_page}_cards_html"
             page_elem = gr.HTML('Loading...', elem_id=elem_id)
             ui.pages.append(page_elem)
-            page_elem.change(fn=lambda: None, _js='function(){applyExtraNetworkFilter(' + quote_js(tabname) + '); return []}', inputs=[], outputs=[])
+            page_elem.change(
+                fn=lambda: None,
+                _js=f"function(){{applyExtraNetworkFilter({tabname}_extra_search); return []}}",
+                inputs=[],
+                outputs=[],
+            )
 
             editor = page.create_user_metadata_editor(ui, tabname)
             editor.create_ui()
@@ -542,18 +509,16 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
 
             related_tabs.append(tab)
 
-    edit_search = gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", elem_classes="search", placeholder="Search...", visible=False, interactive=True)
+    edit_search = gr.Textbox('', show_label=False, elem_id=f"{tabname}_extra_search", elem_classes="search", placeholder="Search...", visible=False, interactive=True)
     dropdown_sort = gr.Dropdown(choices=['Path', 'Name', 'Date Created', 'Date Modified', ], value=shared.opts.extra_networks_card_order_field, elem_id=tabname+"_extra_sort", elem_classes="sort", multiselect=False, visible=False, show_label=False, interactive=True, label=tabname+"_extra_sort_order")
     button_sortorder = ToolButton(switch_values_symbol, elem_id=tabname+"_extra_sortorder", elem_classes=["sortorder"] + ([] if shared.opts.extra_networks_card_order == "Ascending" else ["sortReverse"]), visible=False, tooltip="Invert sort order")
     button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh", visible=False)
-    checkbox_show_dirs = gr.Checkbox(True, label='Show dirs', elem_id=tabname+"_extra_show_dirs", elem_classes="show-dirs", visible=False)
 
     tab_controls = [
         edit_search,
         dropdown_sort,
         button_sortorder,
         button_refresh,
-        checkbox_show_dirs,
     ]
 
     ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)
@@ -562,7 +527,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
     for tab in unrelated_tabs:
         tab.select(
             fn=lambda: [gr.update(visible=False) for _ in tab_controls],
-            _js="function(){ extraNetworksUrelatedTabSelected('" + tabname + "'); }",
+            _js=f"function(){{ extraNetworksUnrelatedTabSelected('{tabname}'); }}",
             inputs=[],
             outputs=tab_controls,
             show_progress=False,
-- 
cgit v1.2.1


From 02e6963325e5221e0efb96a63f3dc849550489b7 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Sat, 13 Jan 2024 13:16:39 -0500
Subject: continue cleanup and redesign.

---
 modules/ui_extra_networks.py | 177 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 144 insertions(+), 33 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 093ac7b4..9cf5b57f 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -19,6 +19,90 @@ extra_pages = []
 allowed_dirs = set()
 default_allowed_preview_extensions = ["png", "jpg", "jpeg", "webp", "gif"]
 
+tree_tpl = (
+    "<div class='action-list-search'>"
+    "<input "
+    "id='{tabname}_{tab_id}_extra_search' "
+    "class='action-list-search-text' "
+    "type='search' "
+    "placeholder='Filter files'"
+    ">"
+    "</div>"
+    "<ul class='action-list action-list--tree'>"
+    "{content}"
+    "</ul>"
+)
+
+tree_ul_tpl = (
+    "<ul class='action-list action-list--subgroup' data-hidden>"
+    "{content}"
+    "</ul>"
+)
+
+tree_li_dir_tpl = (
+    "<li "
+    "class='action-list-item action-list-item--has-subitem' "
+    "data-path='{path}' "
+    "data-tree-entry-type='dir'>"
+    "{content}"
+    "</li>"
+)
+tree_li_file_tpl = (
+    "<li "
+    "id='file-tree-item-{hash}' "
+    "class='action-list-item action-list-item--subitem' "
+    "data-path='{path}' "
+    "data-tree-entry-type='file'>"
+    "{content}"
+    "</li>"
+)
+
+tree_btn_dir_tpl = (
+    "<button "
+    "class='action-list-content action-list-content-dir' "
+    "type='button' "
+    "expanded='false' "
+    "onclick='extraNetworksTreeOnClick(event, \"{tabname}\", \"{tab_id}\")'>"
+    "<span class='action-list-item-action action-list-item-action--leading'>"
+    "<i class='action-list-item-action-chevron'></i>"
+    "</span>"
+    "<span class='action-list-item-visual action-list-item-visual--leading'>🗀</span>"
+    "<span class='action-list-item-label action-list-item-label--truncate'>{label}</span>"
+    "</button>"
+)
+
+tree_btn_file_action_buttons_tpl = (
+    "<div "
+    "class='copy-path-button card-button' "
+    "title='Copy path to clipboard' "
+    "onclick='extraNetworksCopyCardPath(event, {path})' "
+    "data-clipboard-text={path}>"
+    "</div>"
+    "<div "
+    "class='metadata-button card-button' "
+    "title='Show internal metadata' "
+    "onclick='extraNetworksRequestMetadata(event, {tab_id}, {filename})'>"
+    "</div>"
+    "<div "
+    "class='edit-button card-button' "
+    "title='Edit metadata' "
+    "onclick='extraNetworksEditUserMetadata(event, {tabname}, {tab_id}, {filename})'>"
+    "</div>"
+)
+
+tree_btn_file_tpl = (
+    "<span data-filterable-item-text hidden>{filter}</span>"
+    "<button "
+    "class='action-list-content action-list-content-file' "
+    "type='button' "
+    "onclick='extraNetworksTreeOnClick(event, \"{tabname}\", \"{tab_id}\")'>"
+    "<span class='action-list-item-visual action-list-item-visual--leading'>🗎</span>"
+    "<span class='action-list-item-label action-list-item-label--truncate'>{label}</span>"
+    "<span class='action-list-item-action action-list-item-action--trailing'>{buttons}</span>"
+    "</button>"
+)
+
+
 @functools.cache
 def allowed_preview_extensions_with_extra(extra_extensions=None):
     return set(default_allowed_preview_extensions) | set(extra_extensions or [])
@@ -160,6 +244,7 @@ class ExtraNetworksPage:
         self.extra_networks_pane_template = shared.html("extra-networks-pane.html")
         self.card_page_template = shared.html("extra-networks-card.html")
         self.card_page_minimal_template = shared.html("extra-networks-card-minimal.html")
+        self.tree_button_template = shared.html("extra-networks-tree-button.html")
         self.allow_prompt = True
         self.allow_negative_prompt = False
         self.metadata = {}
@@ -279,7 +364,9 @@ class ExtraNetworksPage:
             "search_terms": search_terms_html,
             "sort_keys": sort_keys,
             "style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
-            "tabname": quote_js(tabname),
+            "tabname": tabname,
+            "tab_id": self.id_page,
+
         }
 
         if template:
@@ -306,55 +393,81 @@ class ExtraNetworksPage:
         if not tree:
             return res
 
-        file_template = "<li class='file-item'>{card}</li>"
-        dir_template = (
-            "<details {attributes} class='folder-item'>"
-            "<summary class='folder-item-summary' data-path='{data_path}' "
-            "onclick='extraNetworksFolderClick(event, \"{tabname}_extra_search\");'>"
-            "{folder_name}"
-            "</summary>"
-            "<ul class='folder-container'>{content}</ul>"
-            "</details>"
-        )
-
         def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> str:
             """Recursively builds HTML for a tree."""
             _res = ""
             if not data:
-                return "<li style='list-style-type: \"⚠️\";'>DIRECTORY IS EMPTY</li>"
+                return (
+                    "<details open disabled class='folder-item-empty'>"
+                    "<summary class='folder-item-summary-empty'>Directory is empty</summary>"
+                    "</details>"
+                )
 
             for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
                 if isinstance(v, (ExtraNetworksItem,)):
-                    item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
-                    _res += file_template.format(**{"card": item_html})
+                    _action_buttons = tree_btn_file_action_buttons_tpl.format(
+                        **{
+                            "path": quote_js(k),
+                            "filename": quote_js(v.item["name"]),
+                            "tabname": quote_js(tabname),
+                            "tab_id": quote_js(self.id_page),
+                        }
+                    )
+                    _btn = tree_btn_file_tpl.format(
+                        **{
+                            "label": v.item["name"],
+                            "filter": v.item["search_terms"],
+                            "tabname": tabname,
+                            "tab_id": self.id_page,
+                            "buttons": _action_buttons,
+                        }
+                    )
+                    _li = tree_li_file_tpl.format(
+                        **{
+                            "hash": v.item["shorthash"],
+                            "path": k,
+                            "type": "file",
+                            #"content": _btn,
+                            "content": self.create_item_html(tabname, v.item, self.tree_button_template),
+                        }
+                    )
+                    _res += _li
+                    #item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
+                    #_res += file_template.format(**{"card": item_html})
                 else:
-                    _res += dir_template.format(
+                    _btn = tree_btn_dir_tpl.format(
                         **{
-                            "attributes": "",
+                            "label": os.path.basename(k),
                             "tabname": tabname,
-                            "folder_name": os.path.basename(k),
-                            "data_path": k,
-                            "content": _build_tree(v),
+                            "tab_id": self.id_page,
                         }
                     )
+                    _ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
+                    _li = tree_li_dir_tpl.format(**{"content": _btn + _ul, "path": k})
+                    _res += _li
             return _res
 
         # Add each root directory to the tree.
         for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
             # If root is empty, append the "disabled" attribute to the template details tag.
-            res += "<ul class='folder-container'>"
-            res += dir_template.format(
+            btn = tree_btn_dir_tpl.format(
                 **{
-                    "attributes": "open" if v else "open",
+                    "label": os.path.basename(k),
                     "tabname": tabname,
-                    "folder_name": os.path.basename(k),
-                    "data_path": k,
-                    "content": _build_tree(v),
+                    "tab_id": self.id_page,
                 }
             )
-            res += "</ul>"
-        res += "</ul>"
-        return res
+            ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
+            li = tree_li_dir_tpl.format(**{"content": btn + ul, "path": k})
+            res += li
+
+        return tree_tpl.format(
+            **{
+                "content": res,
+                "tabname": tabname,
+                "tab_id": self.id_page,
+            }
+        )
 
     def create_card_view_html(self, tabname):
         res = ""
@@ -375,7 +488,7 @@ class ExtraNetworksPage:
 
         tree_view_html = self.create_tree_view_html(tabname)
         card_view_html = self.create_card_view_html(tabname)
-        network_type_id = self.name.replace(" ", "_")
+        network_type_id = self.id_page
 
         return self.extra_networks_pane_template.format(
             **{
@@ -506,7 +619,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
             ui.pages.append(page_elem)
             page_elem.change(
                 fn=lambda: None,
-                _js=f"function(){{applyExtraNetworkFilter({tabname}_extra_search); return []}}",
+                _js=f"function(){{applyExtraNetworkFilter({tabname}_{page.id_page}_extra_search); return []}}",
                 inputs=[],
                 outputs=[],
             )
@@ -517,13 +630,11 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
 
             related_tabs.append(tab)
 
-    edit_search = gr.Textbox('', show_label=False, elem_id=f"{tabname}_extra_search", elem_classes="search", placeholder="Search...", visible=False, interactive=True)
     dropdown_sort = gr.Dropdown(choices=['Path', 'Name', 'Date Created', 'Date Modified', ], value=shared.opts.extra_networks_card_order_field, elem_id=tabname+"_extra_sort", elem_classes="sort", multiselect=False, visible=False, show_label=False, interactive=True, label=tabname+"_extra_sort_order")
     button_sortorder = ToolButton(switch_values_symbol, elem_id=tabname+"_extra_sortorder", elem_classes=["sortorder"] + ([] if shared.opts.extra_networks_card_order == "Ascending" else ["sortReverse"]), visible=False, tooltip="Invert sort order")
     button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh", visible=False)
 
     tab_controls = [
-        edit_search,
         dropdown_sort,
         button_sortorder,
         button_refresh,
-- 
cgit v1.2.1


From d88424ef2a5d175fb3cb8b557da0abefb468bae0 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Mon, 15 Jan 2024 13:40:47 -0500
Subject: fix bugs. introduce new ones.

---
 modules/ui_extra_networks.py | 187 ++++++++++++++++++++++---------------------
 1 file changed, 95 insertions(+), 92 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 9cf5b57f..a49c6c1c 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -20,28 +20,28 @@ allowed_dirs = set()
 default_allowed_preview_extensions = ["png", "jpg", "jpeg", "webp", "gif"]
 
 tree_tpl = (
-    "<div class='action-list-search'>"
+    "<div class='tree-list-search'>"
     "<input "
     "id='{tabname}_{tab_id}_extra_search' "
-    "class='action-list-search-text' "
+    "class='tree-list-search-text' "
     "type='search' "
     "placeholder='Filter files'"
     ">"
     "</div>"
-    "<ul class='action-list action-list--tree'>"
+    "<ul class='tree-list tree-list--tree'>"
     "{content}"
     "</ul>"
 )
 
 tree_ul_tpl = (
-    "<ul class='action-list action-list--subgroup' data-hidden>"
+    "<ul class='tree-list tree-list--subgroup' data-hidden>"
     "{content}"
     "</ul>"
 )
 
 tree_li_dir_tpl = (
     "<li "
-    "class='action-list-item action-list-item--has-subitem' "
+    "class='tree-list-item tree-list-item--has-subitem' "
     "data-path='{path}' "
     "data-tree-entry-type='dir'>"
     "{content}"
@@ -50,59 +50,19 @@ tree_li_dir_tpl = (
 tree_li_file_tpl = (
     "<li "
     "id='file-tree-item-{hash}' "
-    "class='action-list-item action-list-item--subitem' "
+    "class='tree-list-item tree-list-item--subitem' "
     "data-path='{path}' "
     "data-tree-entry-type='file'>"
     "{content}"
     "</li>"
 )
 
-tree_btn_dir_tpl = (
-    "<button "
-    "class='action-list-content action-list-content-dir' "
-    "type='button' "
-    "expanded='false' "
-    "onclick='extraNetworksTreeOnClick(event, \"{tabname}\", \"{tab_id}\")'>"
-    "<span class='action-list-item-action action-list-item-action--leading'>"
-    "<i class='action-list-item-action-chevron'></i>"
+action_list_item_action_leading = (
+    "<span class='tree-list-item-action tree-list-item-action--leading'>"
+    "<i class='tree-list-item-action-chevron'></i>"
     "</span>"
-    "<span class='action-list-item-visual action-list-item-visual--leading'>🗀</span>"
-    "<span class='action-list-item-label action-list-item-label--truncate'>{label}</span>"
-    "</button>"
 )
 
-tree_btn_file_action_buttons_tpl = (
-    "<div "
-    "class='copy-path-button card-button' "
-    "title='Copy path to clipboard' "
-    "onclick='extraNetworksCopyCardPath(event, {path})' "
-    "data-clipboard-text={path}>"
-    "</div>"
-    "<div "
-    "class='metadata-button card-button' "
-    "title='Show internal metadata' "
-    "onclick='extraNetworksRequestMetadata(event, {tab_id}, {filename})'>"
-    "</div>"
-    "<div "
-    "class='edit-button card-button' "
-    "title='Edit metadata' "
-    "onclick='extraNetworksEditUserMetadata(event, {tabname}, {tab_id}, {filename})'>"
-    "</div>"
-)
-
-tree_btn_file_tpl = (
-    "<span data-filterable-item-text hidden>{filter}</span>"
-    "<button "
-    "class='action-list-content action-list-content-file' "
-    "type='button' "
-    "onclick='extraNetworksTreeOnClick(event, \"{tabname}\", \"{tab_id}\")'>"
-    "<span class='action-list-item-visual action-list-item-visual--leading'>🗎</span>"
-    "<span class='action-list-item-label action-list-item-label--truncate'>{label}</span>"
-    "<span class='action-list-item-action action-list-item-action--trailing'>{buttons}</span>"
-    "</button>"
-)
-
-
 @functools.cache
 def allowed_preview_extensions_with_extra(extra_extensions=None):
     return set(default_allowed_preview_extensions) | set(extra_extensions or [])
@@ -243,7 +203,6 @@ class ExtraNetworksPage:
         self.id_page = self.name.replace(" ", "_")
         self.extra_networks_pane_template = shared.html("extra-networks-pane.html")
         self.card_page_template = shared.html("extra-networks-card.html")
-        self.card_page_minimal_template = shared.html("extra-networks-card-minimal.html")
         self.tree_button_template = shared.html("extra-networks-tree-button.html")
         self.allow_prompt = True
         self.allow_negative_prompt = False
@@ -278,7 +237,12 @@ class ExtraNetworksPage:
 
         return ""
 
-    def create_item_html(self, tabname: str, item: dict, template: Optional[str] = None) -> str:
+    def create_item_html(
+        self,
+        tabname: str,
+        item: dict,
+        template: Optional[str] = None,
+    ) -> Union[str, dict]:
         """Generates HTML for a single ExtraNetworks Item
 
         Args:
@@ -301,19 +265,32 @@ class ExtraNetworksPage:
         width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
         background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''
 
+        
         onclick = item.get("onclick", None)
         if onclick is None:
-            if "negative_prompt" in item:
-                onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {item["negative_prompt"]}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
-            else:
-                onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {'""'}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
-
+            print("HERE")
+            print("TABNAME:", tabname)
+            print("PROMPT:", item["prompt"])
+            print("NEG_PROMPT:", item.get("negative_prompt", ""))
+            print("ALLOW_NEG:", self.allow_negative_prompt)
+            onclick_js_tpl = "cardClicked('{tabname}', '{prompt}', '{neg_prompt}', '{allow_neg}');"
+            onclick = onclick_js_tpl.format(
+                **{
+                    "tabname": tabname,
+                    "prompt": item["prompt"],
+                    "neg_prompt": item.get("negative_prompt", ""),
+                    "allow_neg": "true" if self.allow_negative_prompt else "false"
+                }
+            )
+            onclick = html.escape(onclick)
+        
+        
         copy_path_button = f"<div class='copy-path-button card-button' title='Copy path to clipboard' onclick='extraNetworksCopyCardPath(event, {quote_js(item['filename'])})' data-clipboard-text='{quote_js(item['filename'])}'></div>"
 
         metadata_button = ""
         metadata = item.get("metadata")
         if metadata:
-            metadata_button = f"<div class='metadata-button card-button' title='Show internal metadata' onclick='extraNetworksRequestMetadata(event, {quote_js(self.name)}, {quote_js(html.escape(item['name']))})'></div>"
+            metadata_button = f"<div class='metadata-button card-button' title='Show internal metadata' onclick='extraNetworksRequestMetadata(event, {quote_js(self.id_page)}, {quote_js(html.escape(item['name']))})'></div>"
 
         edit_button = f"<div class='edit-button card-button' title='Edit metadata' onclick='extraNetworksEditUserMetadata(event, {quote_js(tabname)}, {quote_js(self.id_page)}, {quote_js(html.escape(item['name']))})'></div>"
 
@@ -335,7 +312,12 @@ class ExtraNetworksPage:
         if search_only and shared.opts.extra_networks_hidden_models == "Never":
             return ""
 
-        sort_keys = " ".join([f'data-sort-{k}="{html.escape(str(v))}"' for k, v in item.get("sort_keys", {}).items()]).strip()
+        sort_keys = " ".join(
+            [
+                f'data-sort-{k}="{html.escape(str(v))}"'
+                for k, v in item.get("sort_keys", {}).items()
+            ]
+        ).strip()
 
         search_terms_html = ""
         search_term_template = "<span style='{style}' class='{class}'>{search_term}</span>"
@@ -366,13 +348,12 @@ class ExtraNetworksPage:
             "style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
             "tabname": tabname,
             "tab_id": self.id_page,
-
         }
 
         if template:
             return template.format(**args)
         else:
-            return self.card_page.format(**args)
+            return args
 
     def create_tree_view_html(self, tabname: str) -> str:
         """Generates HTML for displaying folders in a tree view.
@@ -393,73 +374,94 @@ class ExtraNetworksPage:
         if not tree:
             return res
 
-        def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> str:
+        def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> Optional[str]:
             """Recursively builds HTML for a tree."""
-            _res = ""
             if not data:
-                return (
-                    "<details open disabled class='folder-item-empty'>"
-                    "<summary class='folder-item-summary-empty'>Directory is empty</summary>"
-                    "</details>"
-                )
+                return None
+
+            # Lists for storing <li> items html for directories and files separately.
+            _dir_li = []
+            _file_li = []
 
             for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
                 if isinstance(v, (ExtraNetworksItem,)):
-                    _action_buttons = tree_btn_file_action_buttons_tpl.format(
-                        **{
-                            "path": quote_js(k),
-                            "filename": quote_js(v.item["name"]),
-                            "tabname": quote_js(tabname),
-                            "tab_id": quote_js(self.id_page),
-                        }
+                    _item_html_args = self.create_item_html(tabname, v.item)
+                    _action_buttons = "".join(
+                        [
+                            _item_html_args["copy_path_button"],
+                            _item_html_args["metadata_button"],
+                            _item_html_args["edit_button"],
+                        ]
                     )
-                    _btn = tree_btn_file_tpl.format(
+                    _action_buttons = f"<div class=\"button-row\">{_action_buttons}</div>"
+                    _btn = self.tree_button_template.format(
                         **{
-                            "label": v.item["name"],
-                            "filter": v.item["search_terms"],
+                            "search_terms": "",
+                            "subclass": "tree-list-content-file",
                             "tabname": tabname,
                             "tab_id": self.id_page,
-                            "buttons": _action_buttons,
+                            "onclick_extra": _item_html_args["card_clicked"],
+                            "action_list_item_action_leading": action_list_item_action_leading,
+                            "action_list_item_visual_leading": "🗎",
+                            "action_list_item_label": v.item["name"],
+                            "action_list_item_visual_trailing": "",
+                            "action_list_item_action_trailing": _action_buttons,
                         }
                     )
+
                     _li = tree_li_file_tpl.format(
                         **{
                             "hash": v.item["shorthash"],
                             "path": k,
                             "type": "file",
-                            #"content": _btn,
-                            "content": self.create_item_html(tabname, v.item, self.tree_button_template),
+                            "content": _btn,
                         }
                     )
-                    _res += _li
-                    #item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
-                    #_res += file_template.format(**{"card": item_html})
+                    _file_li.append(_li)
                 else:
-                    _btn = tree_btn_dir_tpl.format(
+                    _btn = self.tree_button_template.format(
                         **{
-                            "label": os.path.basename(k),
+                            "search_terms": "",
+                            "subclass": "tree-list-content-dir",
                             "tabname": tabname,
                             "tab_id": self.id_page,
+                            "onclick_extra": "",
+                            "action_list_item_action_leading": action_list_item_action_leading,
+                            "action_list_item_visual_leading": "🗀",
+                            "action_list_item_label": os.path.basename(k),
+                            "action_list_item_visual_trailing": "",
+                            "action_list_item_action_trailing": "",
                         }
                     )
                     _ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
                     _li = tree_li_dir_tpl.format(**{"content": _btn + _ul, "path": k})
-                    _res += _li
-            return _res
+                    _dir_li.append(_li)
+
+            # Directories should always be displayed before files.
+            return "".join(_dir_li) + "".join(_file_li)
 
         # Add each root directory to the tree.
         for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
             # If root is empty, append the "disabled" attribute to the template details tag.
-            btn = tree_btn_dir_tpl.format(
+            btn = self.tree_button_template.format(
                 **{
-                    "label": os.path.basename(k),
+                    "search_terms": "",
+                    "subclass": "tree-list-content-dir",
                     "tabname": tabname,
                     "tab_id": self.id_page,
+                    "onclick_extra": "",
+                    "action_list_item_action_leading": action_list_item_action_leading,
+                    "action_list_item_visual_leading": "🗀",
+                    "action_list_item_label": os.path.basename(k),
+                    "action_list_item_visual_trailing": "",
+                    "action_list_item_action_trailing": "",
                 }
             )
-            ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
-            li = tree_li_dir_tpl.format(**{"content": btn + ul, "path": k})
-            res += li
+            subtree = _build_tree(v)
+            if subtree:
+                ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
+                li = tree_li_dir_tpl.format(**{"content": btn + ul, "path": k})
+                res += li
 
         return tree_tpl.format(
             **{
@@ -473,6 +475,7 @@ class ExtraNetworksPage:
         res = ""
         self.items = {x["name"]: x for x in self.list_items()}
         for item in self.items.values():
+            print("HEEEERRE:", item)
             res += self.create_item_html(tabname, item, self.card_page_template)
 
         if res == "":
-- 
cgit v1.2.1


From f49c220c03f9b6ead18c2e08c04a469bf599b7d9 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Mon, 15 Jan 2024 17:34:44 -0500
Subject: Move extra network tab buttons into tree view;

---
 modules/ui_extra_networks.py | 270 +++++++++++++++----------------------------
 1 file changed, 91 insertions(+), 179 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index a49c6c1c..4ba2bea1 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -19,50 +19,6 @@ extra_pages = []
 allowed_dirs = set()
 default_allowed_preview_extensions = ["png", "jpg", "jpeg", "webp", "gif"]
 
-tree_tpl = (
-    "<div class='tree-list-search'>"
-    "<input "
-    "id='{tabname}_{tab_id}_extra_search' "
-    "class='tree-list-search-text' "
-    "type='search' "
-    "placeholder='Filter files'"
-    ">"
-    "</div>"
-    "<ul class='tree-list tree-list--tree'>"
-    "{content}"
-    "</ul>"
-)
-
-tree_ul_tpl = (
-    "<ul class='tree-list tree-list--subgroup' data-hidden>"
-    "{content}"
-    "</ul>"
-)
-
-tree_li_dir_tpl = (
-    "<li "
-    "class='tree-list-item tree-list-item--has-subitem' "
-    "data-path='{path}' "
-    "data-tree-entry-type='dir'>"
-    "{content}"
-    "</li>"
-)
-tree_li_file_tpl = (
-    "<li "
-    "id='file-tree-item-{hash}' "
-    "class='tree-list-item tree-list-item--subitem' "
-    "data-path='{path}' "
-    "data-tree-entry-type='file'>"
-    "{content}"
-    "</li>"
-)
-
-action_list_item_action_leading = (
-    "<span class='tree-list-item-action tree-list-item-action--leading'>"
-    "<i class='tree-list-item-action-chevron'></i>"
-    "</span>"
-)
-
 @functools.cache
 def allowed_preview_extensions_with_extra(extra_extensions=None):
     return set(default_allowed_preview_extensions) | set(extra_extensions or [])
@@ -201,9 +157,13 @@ class ExtraNetworksPage:
         self.title = title
         self.name = title.lower()
         self.id_page = self.name.replace(" ", "_")
-        self.extra_networks_pane_template = shared.html("extra-networks-pane.html")
-        self.card_page_template = shared.html("extra-networks-card.html")
-        self.tree_button_template = shared.html("extra-networks-tree-button.html")
+        self.pane_tpl = shared.html("extra-networks-pane.html")
+        self.tree_tpl = shared.html("extra-networks-tree.html")
+        self.card_tpl = shared.html("extra-networks-card.html")
+        self.btn_tree_tpl = shared.html("extra-networks-tree-button.html")
+        self.btn_copy_path_tpl = shared.html("extra-networks-copy-path-button.html")
+        self.btn_metadata_tpl = shared.html("extra-networks-metadata-button.html")
+        self.btn_edit_item_tpl = shared.html("extra-networks-edit-item-button.html")
         self.allow_prompt = True
         self.allow_negative_prompt = False
         self.metadata = {}
@@ -268,12 +228,8 @@ class ExtraNetworksPage:
         
         onclick = item.get("onclick", None)
         if onclick is None:
-            print("HERE")
-            print("TABNAME:", tabname)
-            print("PROMPT:", item["prompt"])
-            print("NEG_PROMPT:", item.get("negative_prompt", ""))
-            print("ALLOW_NEG:", self.allow_negative_prompt)
-            onclick_js_tpl = "cardClicked('{tabname}', '{prompt}', '{neg_prompt}', '{allow_neg}');"
+            # Don't quote prompt/neg_prompt since they are stored as js strings already.
+            onclick_js_tpl = "cardClicked('{tabname}', {prompt}, {neg_prompt}, '{allow_neg}');"
             onclick = onclick_js_tpl.format(
                 **{
                     "tabname": tabname,
@@ -284,15 +240,23 @@ class ExtraNetworksPage:
             )
             onclick = html.escape(onclick)
         
-        
-        copy_path_button = f"<div class='copy-path-button card-button' title='Copy path to clipboard' onclick='extraNetworksCopyCardPath(event, {quote_js(item['filename'])})' data-clipboard-text='{quote_js(item['filename'])}'></div>"
-
-        metadata_button = ""
+        btn_copy_path = self.btn_copy_path_tpl.format(**{"filename": item["filename"]})
+        btn_metadata = ""
         metadata = item.get("metadata")
         if metadata:
-            metadata_button = f"<div class='metadata-button card-button' title='Show internal metadata' onclick='extraNetworksRequestMetadata(event, {quote_js(self.id_page)}, {quote_js(html.escape(item['name']))})'></div>"
-
-        edit_button = f"<div class='edit-button card-button' title='Edit metadata' onclick='extraNetworksEditUserMetadata(event, {quote_js(tabname)}, {quote_js(self.id_page)}, {quote_js(html.escape(item['name']))})'></div>"
+            btn_metadata = self.btn_metadata_tpl.format(
+                **{
+                    "page_id": self.id_page,
+                    "name": html.escape(item["name"]),
+                }
+            )
+        btn_edit_item = self.btn_edit_item_tpl.format(
+            **{
+                "tabname": tabname,
+                "page_id": self.id_page,
+                "name": html.escape(item["name"]),
+            }
+        )
 
         local_path = ""
         filename = item.get("filename", "")
@@ -334,11 +298,11 @@ class ExtraNetworksPage:
         args = {
             "background_image": background_image,
             "card_clicked": onclick,
-            "copy_path_button": copy_path_button,
+            "copy_path_button": btn_copy_path,
             "description": (item.get("description") or "" if shared.opts.extra_networks_card_show_desc else ""),
-            "edit_button": edit_button,
+            "edit_button": btn_edit_item,
             "local_preview": quote_js(item["local_preview"]),
-            "metadata_button": metadata_button,
+            "metadata_button": btn_metadata,
             "name": html.escape(item["name"]),
             "prompt": item.get("prompt", None),
             "save_card_preview": '"' + html.escape(f"""return saveCardPreview(event, {quote_js(tabname)}, {quote_js(item["local_preview"])})""") + '"',
@@ -355,6 +319,57 @@ class ExtraNetworksPage:
         else:
             return args
 
+    def create_tree_dir_item_html(self, tabname: str, dir_path: str, content: Optional[str] = None) -> Optional[str]:
+        if not content:
+            return None
+
+        btn = self.btn_tree_tpl.format(
+            **{
+                "search_terms": "",
+                "subclass": "tree-list-content-dir",
+                "tabname": tabname,
+                "tab_id": self.id_page,
+                "onclick_extra": "",
+                "data_path": dir_path,
+                "data_hash": "",
+                "action_list_item_action_leading": "<i class='tree-list-item-action-chevron'></i>",
+                "action_list_item_visual_leading": "🗀",
+                "action_list_item_label": os.path.basename(dir_path),
+                "action_list_item_visual_trailing": "",
+                "action_list_item_action_trailing": "",
+            }
+        )
+        ul = f"<ul class='tree-list tree-list--subgroup' data-hidden>{content}</ul>"
+        return f"<li class='tree-list-item tree-list-item--has-subitem' data-tree-entry-type='dir'>{btn + ul}</li>"
+
+    def create_tree_file_item_html(self, tabname: str, item_name: str, item: dict) -> str:
+        item_html_args = self.create_item_html(tabname, item)
+        action_buttons = "".join(
+            [
+                item_html_args["copy_path_button"],
+                item_html_args["metadata_button"],
+                item_html_args["edit_button"],
+            ]
+        )
+        action_buttons = f"<div class=\"button-row\">{action_buttons}</div>"
+        btn = self.btn_tree_tpl.format(
+            **{
+                "search_terms": "",
+                "subclass": "tree-list-content-file",
+                "tabname": tabname,
+                "tab_id": self.id_page,
+                "onclick_extra": item_html_args["card_clicked"],
+                "data_path": item_name,
+                "data_hash": item["shorthash"],
+                "action_list_item_action_leading": "<i class='tree-list-item-action-chevron'></i>",
+                "action_list_item_visual_leading": "🗎",
+                "action_list_item_label": item["name"],
+                "action_list_item_visual_trailing": "",
+                "action_list_item_action_trailing": action_buttons,
+            }
+        )
+        return f"<li class='tree-list-item tree-list-item--subitem' data-tree-entry-type='file'>{btn}</li>"
+
     def create_tree_view_html(self, tabname: str) -> str:
         """Generates HTML for displaying folders in a tree view.
 
@@ -385,57 +400,9 @@ class ExtraNetworksPage:
 
             for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
                 if isinstance(v, (ExtraNetworksItem,)):
-                    _item_html_args = self.create_item_html(tabname, v.item)
-                    _action_buttons = "".join(
-                        [
-                            _item_html_args["copy_path_button"],
-                            _item_html_args["metadata_button"],
-                            _item_html_args["edit_button"],
-                        ]
-                    )
-                    _action_buttons = f"<div class=\"button-row\">{_action_buttons}</div>"
-                    _btn = self.tree_button_template.format(
-                        **{
-                            "search_terms": "",
-                            "subclass": "tree-list-content-file",
-                            "tabname": tabname,
-                            "tab_id": self.id_page,
-                            "onclick_extra": _item_html_args["card_clicked"],
-                            "action_list_item_action_leading": action_list_item_action_leading,
-                            "action_list_item_visual_leading": "🗎",
-                            "action_list_item_label": v.item["name"],
-                            "action_list_item_visual_trailing": "",
-                            "action_list_item_action_trailing": _action_buttons,
-                        }
-                    )
-
-                    _li = tree_li_file_tpl.format(
-                        **{
-                            "hash": v.item["shorthash"],
-                            "path": k,
-                            "type": "file",
-                            "content": _btn,
-                        }
-                    )
-                    _file_li.append(_li)
+                    _file_li.append(self.create_tree_file_item_html(tabname, k, v.item))
                 else:
-                    _btn = self.tree_button_template.format(
-                        **{
-                            "search_terms": "",
-                            "subclass": "tree-list-content-dir",
-                            "tabname": tabname,
-                            "tab_id": self.id_page,
-                            "onclick_extra": "",
-                            "action_list_item_action_leading": action_list_item_action_leading,
-                            "action_list_item_visual_leading": "🗀",
-                            "action_list_item_label": os.path.basename(k),
-                            "action_list_item_visual_trailing": "",
-                            "action_list_item_action_trailing": "",
-                        }
-                    )
-                    _ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
-                    _li = tree_li_dir_tpl.format(**{"content": _btn + _ul, "path": k})
-                    _dir_li.append(_li)
+                    _dir_li.append(self.create_tree_dir_item_html(tabname, k, _build_tree(v)))
 
             # Directories should always be displayed before files.
             return "".join(_dir_li) + "".join(_file_li)
@@ -443,31 +410,15 @@ class ExtraNetworksPage:
         # Add each root directory to the tree.
         for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
             # If root is empty, append the "disabled" attribute to the template details tag.
-            btn = self.tree_button_template.format(
-                **{
-                    "search_terms": "",
-                    "subclass": "tree-list-content-dir",
-                    "tabname": tabname,
-                    "tab_id": self.id_page,
-                    "onclick_extra": "",
-                    "action_list_item_action_leading": action_list_item_action_leading,
-                    "action_list_item_visual_leading": "🗀",
-                    "action_list_item_label": os.path.basename(k),
-                    "action_list_item_visual_trailing": "",
-                    "action_list_item_action_trailing": "",
-                }
-            )
-            subtree = _build_tree(v)
-            if subtree:
-                ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
-                li = tree_li_dir_tpl.format(**{"content": btn + ul, "path": k})
-                res += li
+            item_html = self.create_tree_dir_item_html(tabname, k, _build_tree(v))
+            if item_html:
+                res += item_html
 
-        return tree_tpl.format(
+        return self.tree_tpl.format(
             **{
-                "content": res,
                 "tabname": tabname,
                 "tab_id": self.id_page,
+                "tree": f"<ul class='tree-list tree-list--tree'>{res}</ul>"
             }
         )
 
@@ -475,8 +426,7 @@ class ExtraNetworksPage:
         res = ""
         self.items = {x["name"]: x for x in self.list_items()}
         for item in self.items.values():
-            print("HEEEERRE:", item)
-            res += self.create_item_html(tabname, item, self.card_page_template)
+            res += self.create_item_html(tabname, item, self.card_tpl)
 
         if res == "":
             dirs = "".join([f"<li>{x}</li>" for x in self.allowed_directories_for_previews()])
@@ -493,7 +443,7 @@ class ExtraNetworksPage:
         card_view_html = self.create_card_view_html(tabname)
         network_type_id = self.id_page
 
-        return self.extra_networks_pane_template.format(
+        return self.pane_tpl.format(
             **{
                 "tabname": tabname,
                 "network_type_id": network_type_id,
@@ -612,6 +562,8 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
 
     related_tabs = []
 
+    button_refresh = gr.Button("Refresh", elem_id=tabname+"_extra_refresh_internal", visible=False)
+
     for page in ui.stored_extra_pages:
         with gr.Tab(page.title, elem_id=f"{tabname}_{page.id_page}", elem_classes=["extra-page"]) as tab:
             with gr.Column(elem_id=f"{tabname}_{page.id_page}_prompts", elem_classes=["extra-page-prompts"]):
@@ -633,51 +585,9 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
 
             related_tabs.append(tab)
 
-    dropdown_sort = gr.Dropdown(choices=['Path', 'Name', 'Date Created', 'Date Modified', ], value=shared.opts.extra_networks_card_order_field, elem_id=tabname+"_extra_sort", elem_classes="sort", multiselect=False, visible=False, show_label=False, interactive=True, label=tabname+"_extra_sort_order")
-    button_sortorder = ToolButton(switch_values_symbol, elem_id=tabname+"_extra_sortorder", elem_classes=["sortorder"] + ([] if shared.opts.extra_networks_card_order == "Ascending" else ["sortReverse"]), visible=False, tooltip="Invert sort order")
-    button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh", visible=False)
-
-    tab_controls = [
-        dropdown_sort,
-        button_sortorder,
-        button_refresh,
-    ]
-
     ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)
     ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False)
 
-    for tab in unrelated_tabs:
-        tab.select(
-            fn=lambda: [gr.update(visible=False) for _ in tab_controls],
-            _js=f"function(){{ extraNetworksUnrelatedTabSelected('{tabname}'); }}",
-            inputs=[],
-            outputs=tab_controls,
-            show_progress=False,
-        )
-
-    for page, tab in zip(ui.stored_extra_pages, related_tabs):
-        allow_prompt = "true" if page.allow_prompt else "false"
-        allow_negative_prompt = "true" if page.allow_negative_prompt else "false"
-
-        jscode = (
-            "extraNetworksTabSelected("
-            f"'{tabname}', "
-            f"'{tabname}_{page.id_page}_prompts', "
-            f"'{allow_prompt}', "
-            f"'{allow_negative_prompt}'"
-            ");"
-        )
-
-        tab.select(
-            fn=lambda: [gr.update(visible=True) for _ in tab_controls],
-            _js="function(){ " + jscode + " }",
-            inputs=[],
-            outputs=tab_controls,
-            show_progress=False,
-        )
-
-    dropdown_sort.change(fn=lambda: None, _js="function(){ applyExtraNetworkSort('" + tabname + "'); }")
-
     def create_html():
         ui.pages_contents = [pg.create_html(ui.tabname) for pg in ui.stored_extra_pages]
 
@@ -693,6 +603,8 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
         return ui.pages_contents
 
     interface.load(fn=pages_html, inputs=[], outputs=ui.pages)
+    # NOTE: Event is manually fired in extraNetworks.js:extraNetworksTreeRefreshOnClick()
+    # button is unused and hidden at all times. Only used in order to fire this event.
     button_refresh.click(fn=refresh, inputs=[], outputs=ui.pages)
 
     return ui
-- 
cgit v1.2.1


From 1fdc18e6a01eb40889d46fab40f21aa138d64b01 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Mon, 15 Jan 2024 18:01:13 -0500
Subject: Run linting

---
 modules/ui_extra_networks.py | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 4ba2bea1..06fa22af 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -13,7 +13,6 @@ import html
 from fastapi.exceptions import HTTPException
 
 from modules.infotext_utils import image_from_url_text
-from modules.ui_components import ToolButton
 
 extra_pages = []
 allowed_dirs = set()
@@ -225,7 +224,6 @@ class ExtraNetworksPage:
         width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
         background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''
 
-        
         onclick = item.get("onclick", None)
         if onclick is None:
             # Don't quote prompt/neg_prompt since they are stored as js strings already.
@@ -239,7 +237,7 @@ class ExtraNetworksPage:
                 }
             )
             onclick = html.escape(onclick)
-        
+
         btn_copy_path = self.btn_copy_path_tpl.format(**{"filename": item["filename"]})
         btn_metadata = ""
         metadata = item.get("metadata")
@@ -551,8 +549,6 @@ def pages_in_preferred_order(pages):
     return sorted(pages, key=lambda x: tab_scores[x.name])
 
 def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
-    from modules.ui import switch_values_symbol
-
     ui = ExtraNetworksUi()
     ui.pages = []
     ui.pages_contents = []
@@ -588,6 +584,9 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
     ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)
     ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False)
 
+    for tab in unrelated_tabs:
+        tab.select(fn=None, _js='function(){ extraNetworksUrelatedTabSelected("' + tabname + '"); }', inputs=[], outputs=[], show_progress=False)
+
     def create_html():
         ui.pages_contents = [pg.create_html(ui.tabname) for pg in ui.stored_extra_pages]
 
-- 
cgit v1.2.1


From 4f9626703345ced77935e6bbb06de0b4522d53b7 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Tue, 16 Jan 2024 13:35:01 -0500
Subject: Finish cleanup.

---
 modules/ui_extra_networks.py | 162 ++++++++++++++++++++++++++++++++-----------
 1 file changed, 123 insertions(+), 39 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 06fa22af..a03207b2 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -155,7 +155,14 @@ class ExtraNetworksPage:
     def __init__(self, title):
         self.title = title
         self.name = title.lower()
-        self.id_page = self.name.replace(" ", "_")
+        # This is the actual name of the extra networks tab (not txt2img/img2img).
+        self.extra_networks_tabname = self.name.replace(" ", "_")
+        self.allow_prompt = True
+        self.allow_negative_prompt = False
+        self.metadata = {}
+        self.items = {}
+        self.lister = util.MassFileLister()
+        # HTML Templates
         self.pane_tpl = shared.html("extra-networks-pane.html")
         self.tree_tpl = shared.html("extra-networks-tree.html")
         self.card_tpl = shared.html("extra-networks-card.html")
@@ -163,11 +170,6 @@ class ExtraNetworksPage:
         self.btn_copy_path_tpl = shared.html("extra-networks-copy-path-button.html")
         self.btn_metadata_tpl = shared.html("extra-networks-metadata-button.html")
         self.btn_edit_item_tpl = shared.html("extra-networks-edit-item-button.html")
-        self.allow_prompt = True
-        self.allow_negative_prompt = False
-        self.metadata = {}
-        self.items = {}
-        self.lister = util.MassFileLister()
 
     def refresh(self):
         pass
@@ -202,15 +204,17 @@ class ExtraNetworksPage:
         item: dict,
         template: Optional[str] = None,
     ) -> Union[str, dict]:
-        """Generates HTML for a single ExtraNetworks Item
+        """Generates HTML for a single ExtraNetworks Item.
 
         Args:
             tabname: The name of the active tab.
             item: Dictionary containing item information.
+            template: Optional template string to use.
 
         Returns:
-            HTML string generated for this item.
-            Can be empty if the item is not meant to be shown.
+            If a template is passed: HTML string generated for this item.
+                Can be empty if the item is not meant to be shown.
+            If no template is passed: A dictionary containing the generated item's attributes.
         """
         metadata = item.get("metadata")
         if metadata:
@@ -244,14 +248,14 @@ class ExtraNetworksPage:
         if metadata:
             btn_metadata = self.btn_metadata_tpl.format(
                 **{
-                    "page_id": self.id_page,
+                    "extra_networks_tabname": self.extra_networks_tabname,
                     "name": html.escape(item["name"]),
                 }
             )
         btn_edit_item = self.btn_edit_item_tpl.format(
             **{
                 "tabname": tabname,
-                "page_id": self.id_page,
+                "extra_networks_tabname": self.extra_networks_tabname,
                 "name": html.escape(item["name"]),
             }
         )
@@ -307,9 +311,9 @@ class ExtraNetworksPage:
             "search_only": " search_only" if search_only else "",
             "search_terms": search_terms_html,
             "sort_keys": sort_keys,
-            "style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
+            "style": f"display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%",
             "tabname": tabname,
-            "tab_id": self.id_page,
+            "extra_networks_tabname": self.extra_networks_tabname,
         }
 
         if template:
@@ -317,7 +321,32 @@ class ExtraNetworksPage:
         else:
             return args
 
-    def create_tree_dir_item_html(self, tabname: str, dir_path: str, content: Optional[str] = None) -> Optional[str]:
+    def create_tree_dir_item_html(
+        self,
+        tabname: str,
+        dir_path: str,
+        content: Optional[str] = None,
+    ) -> Optional[str]:
+        """Generates HTML for a directory item in the tree.
+
+        The generated HTML is of the format:
+        ```html
+        <li class="tree-list-item tree-list-item--has-subitem">
+            <div class="tree-list-content tree-list-content-dir"></div>
+            <ul class="tree-list tree-list--subgroup">
+                {content}
+            </ul>
+        </li>
+        ```
+
+        Args:
+            tabname: The name of the active tab.
+            dir_path: Path to the directory for this item.
+            content: Optional HTML string that will be wrapped by this <ul>.
+
+        Returns:
+            HTML formatted string.
+        """
         if not content:
             return None
 
@@ -326,7 +355,7 @@ class ExtraNetworksPage:
                 "search_terms": "",
                 "subclass": "tree-list-content-dir",
                 "tabname": tabname,
-                "tab_id": self.id_page,
+                "extra_networks_tabname": self.extra_networks_tabname,
                 "onclick_extra": "",
                 "data_path": dir_path,
                 "data_hash": "",
@@ -337,10 +366,32 @@ class ExtraNetworksPage:
                 "action_list_item_action_trailing": "",
             }
         )
-        ul = f"<ul class='tree-list tree-list--subgroup' data-hidden>{content}</ul>"
-        return f"<li class='tree-list-item tree-list-item--has-subitem' data-tree-entry-type='dir'>{btn + ul}</li>"
+        ul = f"<ul class='tree-list tree-list--subgroup' hidden>{content}</ul>"
+        return (
+            "<li class='tree-list-item tree-list-item--has-subitem' data-tree-entry-type='dir'>"
+            f"{btn + ul}"
+            "</li>"
+        )
+
+    def create_tree_file_item_html(self, tabname: str, file_path: str, item: dict) -> str:
+        """Generates HTML for a file item in the tree.
+
+        The generated HTML is of the format:
+        ```html
+        <li class="tree-list-item tree-list-item--subitem">
+            <span data-filterable-item-text hidden></span>
+            <div class="tree-list-content tree-list-content-file"></div>
+        </li>
+        ```
 
-    def create_tree_file_item_html(self, tabname: str, item_name: str, item: dict) -> str:
+        Args:
+            tabname: The name of the active tab.
+            file_path: The path to the file for this item.
+            item: Dictionary containing the item information.
+
+        Returns:
+            HTML formatted string.
+        """
         item_html_args = self.create_item_html(tabname, item)
         action_buttons = "".join(
             [
@@ -355,9 +406,9 @@ class ExtraNetworksPage:
                 "search_terms": "",
                 "subclass": "tree-list-content-file",
                 "tabname": tabname,
-                "tab_id": self.id_page,
+                "extra_networks_tabname": self.extra_networks_tabname,
                 "onclick_extra": item_html_args["card_clicked"],
-                "data_path": item_name,
+                "data_path": file_path,
                 "data_hash": item["shorthash"],
                 "action_list_item_action_leading": "<i class='tree-list-item-action-chevron'></i>",
                 "action_list_item_visual_leading": "🗎",
@@ -366,11 +417,17 @@ class ExtraNetworksPage:
                 "action_list_item_action_trailing": action_buttons,
             }
         )
-        return f"<li class='tree-list-item tree-list-item--subitem' data-tree-entry-type='file'>{btn}</li>"
+        return (
+            "<li class='tree-list-item tree-list-item--subitem' data-tree-entry-type='file'>"
+            f"{btn}"
+            "</li>"
+        )
 
     def create_tree_view_html(self, tabname: str) -> str:
         """Generates HTML for displaying folders in a tree view.
 
+        The generated HTML uses `extra-networks-tree.html` as a template.
+
         Args:
             tabname: The name of the active tab.
 
@@ -379,7 +436,7 @@ class ExtraNetworksPage:
         """
         res = ""
 
-        # Generate HTML for the tree.
+        # Setup the tree dictionary.
         roots = self.allowed_directories_for_previews()
         tree_items = {v["filename"]: ExtraNetworksItem(v) for v in self.items.values()}
         tree = get_tree([os.path.abspath(x) for x in roots], items=tree_items)
@@ -388,7 +445,17 @@ class ExtraNetworksPage:
             return res
 
         def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> Optional[str]:
-            """Recursively builds HTML for a tree."""
+            """Recursively builds HTML for a tree.
+
+            Args:
+                data: Dictionary representing a directory tree. Can be NoneType.
+                    Data keys should be absolute paths from the root and values
+                    should be subdirectory trees or an ExtraNetworksItem.
+
+            Returns:
+                If data is not None: HTML string
+                Else: None
+            """
             if not data:
                 return None
 
@@ -402,25 +469,36 @@ class ExtraNetworksPage:
                 else:
                     _dir_li.append(self.create_tree_dir_item_html(tabname, k, _build_tree(v)))
 
-            # Directories should always be displayed before files.
+            # Directories should always be displayed before files so we order them here.
             return "".join(_dir_li) + "".join(_file_li)
 
         # Add each root directory to the tree.
         for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
-            # If root is empty, append the "disabled" attribute to the template details tag.
             item_html = self.create_tree_dir_item_html(tabname, k, _build_tree(v))
-            if item_html:
+            # Only add non-empty entries to the tree.
+            if item_html is not None:
                 res += item_html
 
         return self.tree_tpl.format(
             **{
                 "tabname": tabname,
-                "tab_id": self.id_page,
+                "extra_networks_tabname": self.extra_networks_tabname,
                 "tree": f"<ul class='tree-list tree-list--tree'>{res}</ul>"
             }
         )
 
-    def create_card_view_html(self, tabname):
+    def create_card_view_html(self, tabname: str) -> str:
+        """Generates HTML for the network Card View section for a tab.
+
+        This HTML goes into the `extra-networks-pane.html` <div> with
+        `id='{tabname}_{extra_networks_tabname}_cards`.
+
+        Args:
+            tabname: The name of the active tab.
+
+        Returns:
+            HTML formatted string.
+        """
         res = ""
         self.items = {x["name"]: x for x in self.list_items()}
         for item in self.items.values():
@@ -433,20 +511,26 @@ class ExtraNetworksPage:
         return res
 
     def create_html(self, tabname):
+        """Generates an HTML string for the current pane.
+
+        The generated HTML uses `extra-networks-pane.html` as a template.
+
+        Args:
+            tabname: The name of the active tab.
+
+        Returns:
+            HTML formatted string.
+        """
         self.lister.reset()
         self.metadata = {}
         self.items = {x["name"]: x for x in self.list_items()}
 
-        tree_view_html = self.create_tree_view_html(tabname)
-        card_view_html = self.create_card_view_html(tabname)
-        network_type_id = self.id_page
-
         return self.pane_tpl.format(
             **{
                 "tabname": tabname,
-                "network_type_id": network_type_id,
-                "tree_html": tree_view_html,
-                "items_html": card_view_html,
+                "extra_networks_tabname": self.extra_networks_tabname,
+                "tree_html": self.create_tree_view_html(tabname),
+                "items_html": self.create_card_view_html(tabname),
             }
         )
 
@@ -561,16 +645,16 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
     button_refresh = gr.Button("Refresh", elem_id=tabname+"_extra_refresh_internal", visible=False)
 
     for page in ui.stored_extra_pages:
-        with gr.Tab(page.title, elem_id=f"{tabname}_{page.id_page}", elem_classes=["extra-page"]) as tab:
-            with gr.Column(elem_id=f"{tabname}_{page.id_page}_prompts", elem_classes=["extra-page-prompts"]):
+        with gr.Tab(page.title, elem_id=f"{tabname}_{page.extra_networks_tabname}", elem_classes=["extra-page"]) as tab:
+            with gr.Column(elem_id=f"{tabname}_{page.extra_networks_tabname}_prompts", elem_classes=["extra-page-prompts"]):
                 pass
 
-            elem_id = f"{tabname}_{page.id_page}_cards_html"
+            elem_id = f"{tabname}_{page.extra_networks_tabname}_cards_html"
             page_elem = gr.HTML('Loading...', elem_id=elem_id)
             ui.pages.append(page_elem)
             page_elem.change(
                 fn=lambda: None,
-                _js=f"function(){{applyExtraNetworkFilter({tabname}_{page.id_page}_extra_search); return []}}",
+                _js=f"function(){{applyExtraNetworkFilter({tabname}_{page.extra_networks_tabname}_extra_search); return []}}",
                 inputs=[],
                 outputs=[],
             )
-- 
cgit v1.2.1


From ccee26b0653b4f6778c107d68df52da27446abd2 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Tue, 16 Jan 2024 14:54:07 -0500
Subject: fix bugs

---
 modules/ui_extra_networks.py | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index a03207b2..55cd1da2 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -237,7 +237,7 @@ class ExtraNetworksPage:
                     "tabname": tabname,
                     "prompt": item["prompt"],
                     "neg_prompt": item.get("negative_prompt", ""),
-                    "allow_neg": "true" if self.allow_negative_prompt else "false"
+                    "allow_neg": str(self.allow_negative_prompt).lower(),
                 }
             )
             onclick = html.escape(onclick)
@@ -291,7 +291,7 @@ class ExtraNetworksPage:
             search_terms_html += search_term_template.format(
                 **{
                     "style": "display: none;",
-                    "class": "search_terms" + (" search_only" if search_only else ""),
+                    "class": f"search_terms{' search_only' if search_only else ''}",
                     "search_term": search_term,
                 }
             )
@@ -307,7 +307,7 @@ class ExtraNetworksPage:
             "metadata_button": btn_metadata,
             "name": html.escape(item["name"]),
             "prompt": item.get("prompt", None),
-            "save_card_preview": '"' + html.escape(f"""return saveCardPreview(event, {quote_js(tabname)}, {quote_js(item["local_preview"])})""") + '"',
+            "save_card_preview": html.escape(f"return saveCardPreview(event, '{tabname}', '{item['local_preview']}');"),
             "search_only": " search_only" if search_only else "",
             "search_terms": search_terms_html,
             "sort_keys": sort_keys,
@@ -369,7 +369,7 @@ class ExtraNetworksPage:
         ul = f"<ul class='tree-list tree-list--subgroup' hidden>{content}</ul>"
         return (
             "<li class='tree-list-item tree-list-item--has-subitem' data-tree-entry-type='dir'>"
-            f"{btn + ul}"
+            f"{btn}{ul}"
             "</li>"
         )
 
@@ -561,7 +561,7 @@ class ExtraNetworksPage:
         Find a preview PNG for a given path (without extension) and call link_preview on it.
         """
 
-        potential_files = sum([[path + "." + ext, path + ".preview." + ext] for ext in allowed_preview_extensions()], [])
+        potential_files = sum([[f"{path}.{ext}", f"{path}.preview.{ext}"] for ext in allowed_preview_extensions()], [])
 
         for file in potential_files:
             if self.lister.exists(file):
@@ -642,7 +642,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
 
     related_tabs = []
 
-    button_refresh = gr.Button("Refresh", elem_id=tabname+"_extra_refresh_internal", visible=False)
+    button_refresh = gr.Button("Refresh", elem_id=f"{tabname}_extra_refresh_internal", visible=False)
 
     for page in ui.stored_extra_pages:
         with gr.Tab(page.title, elem_id=f"{tabname}_{page.extra_networks_tabname}", elem_classes=["extra-page"]) as tab:
@@ -652,24 +652,25 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
             elem_id = f"{tabname}_{page.extra_networks_tabname}_cards_html"
             page_elem = gr.HTML('Loading...', elem_id=elem_id)
             ui.pages.append(page_elem)
-            page_elem.change(
-                fn=lambda: None,
-                _js=f"function(){{applyExtraNetworkFilter({tabname}_{page.extra_networks_tabname}_extra_search); return []}}",
-                inputs=[],
-                outputs=[],
-            )
-
             editor = page.create_user_metadata_editor(ui, tabname)
             editor.create_ui()
             ui.user_metadata_editors.append(editor)
-
             related_tabs.append(tab)
 
-    ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)
-    ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False)
+    ui.button_save_preview = gr.Button('Save preview', elem_id=f"{tabname}_save_preview", visible=False)
+    ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=f"{tabname}_preview_filename", visible=False)
 
     for tab in unrelated_tabs:
-        tab.select(fn=None, _js='function(){ extraNetworksUrelatedTabSelected("' + tabname + '"); }', inputs=[], outputs=[], show_progress=False)
+        tab.select(fn=None, _js=f"function(){{extraNetworksUnrelatedTabSelected('{tabname}');}}", inputs=[], outputs=[], show_progress=False)
+
+    for page, tab in zip(ui.stored_extra_pages, related_tabs):
+        jscode = (
+            "function(){{"
+            f"extraNetworksTabSelected('{tabname}', '{tabname}_{page.extra_networks_tabname}_prompts', {str(page.allow_prompt).lower()}, {str(page.allow_negative_prompt).lower()});"
+            f"applyExtraNetworkFilter('{tabname}_{page.extra_networks_tabname}');"
+            "}}"
+        )
+        tab.select(fn=None, _js=jscode, inputs=[], outputs=[], show_progress=False)
 
     def create_html():
         ui.pages_contents = [pg.create_html(ui.tabname) for pg in ui.stored_extra_pages]
-- 
cgit v1.2.1


From f25c81a74462554890ac7327a30629b332db1084 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Wed, 17 Jan 2024 22:38:51 -0500
Subject: Fix embeddings add/remove to/from prompt on click bugs.

---
 modules/ui_extra_networks.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 55cd1da2..5dd4e443 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -236,7 +236,7 @@ class ExtraNetworksPage:
                 **{
                     "tabname": tabname,
                     "prompt": item["prompt"],
-                    "neg_prompt": item.get("negative_prompt", ""),
+                    "neg_prompt": item.get("negative_prompt", "''"),
                     "allow_neg": str(self.allow_negative_prompt).lower(),
                 }
             )
-- 
cgit v1.2.1


From 69f4f148dce0868b748b700f96942d4036e848c9 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Thu, 18 Jan 2024 12:13:33 -0500
Subject: Fix various bugs including refresh bug.

---
 modules/ui_extra_networks.py | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 5dd4e443..656e7f18 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -216,22 +216,17 @@ class ExtraNetworksPage:
                 Can be empty if the item is not meant to be shown.
             If no template is passed: A dictionary containing the generated item's attributes.
         """
-        metadata = item.get("metadata")
-        if metadata:
-            self.metadata[item["name"]] = metadata
-
-        if "user_metadata" not in item:
-            self.read_user_metadata(item)
-
         preview = item.get("preview", None)
-        height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
-        width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
+        style_height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
+        style_width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
+        style_font_size = f"font-size: {shared.opts.extra_networks_card_text_scale*100}%;"
+        card_style = style_height + style_width + style_font_size
         background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''
 
         onclick = item.get("onclick", None)
         if onclick is None:
             # Don't quote prompt/neg_prompt since they are stored as js strings already.
-            onclick_js_tpl = "cardClicked('{tabname}', {prompt}, {neg_prompt}, '{allow_neg}');"
+            onclick_js_tpl = "cardClicked('{tabname}', {prompt}, {neg_prompt}, {allow_neg});"
             onclick = onclick_js_tpl.format(
                 **{
                     "tabname": tabname,
@@ -286,11 +281,10 @@ class ExtraNetworksPage:
         ).strip()
 
         search_terms_html = ""
-        search_term_template = "<span style='{style}' class='{class}'>{search_term}</span>"
+        search_term_template = "<span class='hidden {class}'>{search_term}</span>"
         for search_term in item.get("search_terms", []):
             search_terms_html += search_term_template.format(
                 **{
-                    "style": "display: none;",
                     "class": f"search_terms{' search_only' if search_only else ''}",
                     "search_term": search_term,
                 }
@@ -301,7 +295,7 @@ class ExtraNetworksPage:
             "background_image": background_image,
             "card_clicked": onclick,
             "copy_path_button": btn_copy_path,
-            "description": (item.get("description") or "" if shared.opts.extra_networks_card_show_desc else ""),
+            "description": (item.get("description", "") or "" if shared.opts.extra_networks_card_show_desc else ""),
             "edit_button": btn_edit_item,
             "local_preview": quote_js(item["local_preview"]),
             "metadata_button": btn_metadata,
@@ -311,7 +305,7 @@ class ExtraNetworksPage:
             "search_only": " search_only" if search_only else "",
             "search_terms": search_terms_html,
             "sort_keys": sort_keys,
-            "style": f"display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%",
+            "style": card_style,
             "tabname": tabname,
             "extra_networks_tabname": self.extra_networks_tabname,
         }
@@ -500,7 +494,6 @@ class ExtraNetworksPage:
             HTML formatted string.
         """
         res = ""
-        self.items = {x["name"]: x for x in self.list_items()}
         for item in self.items.values():
             res += self.create_item_html(tabname, item, self.card_tpl)
 
@@ -524,6 +517,14 @@ class ExtraNetworksPage:
         self.lister.reset()
         self.metadata = {}
         self.items = {x["name"]: x for x in self.list_items()}
+        # Populate the instance metadata for each item.
+        for item in self.items.values():
+            metadata = item.get("metadata")
+            if metadata:
+                self.metadata[item["name"]] = metadata
+
+            if "user_metadata" not in item:
+                self.read_user_metadata(item)
 
         return self.pane_tpl.format(
             **{
-- 
cgit v1.2.1


From 2310cd66e5381fbe6b966894381c6ee7b762898f Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Sat, 20 Jan 2024 11:43:45 -0500
Subject: Add toggle button for tree view. Use default settings for sortmode
 and direction.

---
 modules/ui_extra_networks.py | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 656e7f18..4c8a4074 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -526,10 +526,17 @@ class ExtraNetworksPage:
             if "user_metadata" not in item:
                 self.read_user_metadata(item)
 
+        data_sortdir = shared.opts.extra_networks_card_order
+        data_sortmode = shared.opts.extra_networks_card_order_field.lower().replace("sort", "").replace(" ", "_").rstrip("_").strip()
+        data_sortkey = f"{data_sortmode}-{data_sortdir}-{len(self.items)}"
+
         return self.pane_tpl.format(
             **{
                 "tabname": tabname,
                 "extra_networks_tabname": self.extra_networks_tabname,
+                "data_sortmode": data_sortmode,
+                "data_sortkey": data_sortkey,
+                "data_sortdir": data_sortdir,
                 "tree_html": self.create_tree_view_html(tabname),
                 "items_html": self.create_card_view_html(tabname),
             }
-- 
cgit v1.2.1


From b67a49441fc420f37c6bef1172a0b1ad5c42f30f Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Sat, 20 Jan 2024 13:28:37 -0500
Subject: Add option in settings to enable/disable tree view by default.

---
 modules/ui_extra_networks.py | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 4c8a4074..80160b84 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -529,6 +529,11 @@ class ExtraNetworksPage:
         data_sortdir = shared.opts.extra_networks_card_order
         data_sortmode = shared.opts.extra_networks_card_order_field.lower().replace("sort", "").replace(" ", "_").rstrip("_").strip()
         data_sortkey = f"{data_sortmode}-{data_sortdir}-{len(self.items)}"
+        tree_view_btn_extra_class = ""
+        tree_view_div_extra_class = "hidden"
+        if shared.opts.extra_networks_tree_view_default_enabled:
+            tree_view_btn_extra_class = "extra-network-control--enabled"
+            tree_view_div_extra_class = ""
 
         return self.pane_tpl.format(
             **{
@@ -537,6 +542,8 @@ class ExtraNetworksPage:
                 "data_sortmode": data_sortmode,
                 "data_sortkey": data_sortkey,
                 "data_sortdir": data_sortdir,
+                "tree_view_btn_extra_class": tree_view_btn_extra_class,
+                "tree_view_div_extra_class": tree_view_div_extra_class,
                 "tree_html": self.create_tree_view_html(tabname),
                 "items_html": self.create_card_view_html(tabname),
             }
-- 
cgit v1.2.1


From 26e1cd7ec47c8d234d2ea3f189b1147329c9059c Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Sun, 21 Jan 2024 11:34:08 -0500
Subject: Remove unnecessary template and simplify tree list.

---
 modules/ui_extra_networks.py | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 80160b84..157b3a6d 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -164,7 +164,6 @@ class ExtraNetworksPage:
         self.lister = util.MassFileLister()
         # HTML Templates
         self.pane_tpl = shared.html("extra-networks-pane.html")
-        self.tree_tpl = shared.html("extra-networks-tree.html")
         self.card_tpl = shared.html("extra-networks-card.html")
         self.btn_tree_tpl = shared.html("extra-networks-tree-button.html")
         self.btn_copy_path_tpl = shared.html("extra-networks-copy-path-button.html")
@@ -420,8 +419,6 @@ class ExtraNetworksPage:
     def create_tree_view_html(self, tabname: str) -> str:
         """Generates HTML for displaying folders in a tree view.
 
-        The generated HTML uses `extra-networks-tree.html` as a template.
-
         Args:
             tabname: The name of the active tab.
 
@@ -473,13 +470,7 @@ class ExtraNetworksPage:
             if item_html is not None:
                 res += item_html
 
-        return self.tree_tpl.format(
-            **{
-                "tabname": tabname,
-                "extra_networks_tabname": self.extra_networks_tabname,
-                "tree": f"<ul class='tree-list tree-list--tree'>{res}</ul>"
-            }
-        )
+        return f"<ul class='tree-list tree-list--tree'>{res}</ul>"
 
     def create_card_view_html(self, tabname: str) -> str:
         """Generates HTML for the network Card View section for a tab.
-- 
cgit v1.2.1


From f4e931f18fa4f94aece1f4dabd4dd0d635ecec13 Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Mon, 22 Jan 2024 23:20:30 +0300
Subject: put extra networks controls row into the tabs UI element for #14588

---
 modules/ui_extra_networks.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'modules/ui_extra_networks.py')

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 157b3a6d..325d848e 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -672,7 +672,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
     for page, tab in zip(ui.stored_extra_pages, related_tabs):
         jscode = (
             "function(){{"
-            f"extraNetworksTabSelected('{tabname}', '{tabname}_{page.extra_networks_tabname}_prompts', {str(page.allow_prompt).lower()}, {str(page.allow_negative_prompt).lower()});"
+            f"extraNetworksTabSelected('{tabname}', '{tabname}_{page.extra_networks_tabname}_prompts', {str(page.allow_prompt).lower()}, {str(page.allow_negative_prompt).lower()}, '{tabname}_{page.extra_networks_tabname}');"
             f"applyExtraNetworkFilter('{tabname}_{page.extra_networks_tabname}');"
             "}}"
         )
-- 
cgit v1.2.1