hierarchical tagging selection

2026-02-05 02:59:27 +00:00 · 2025-06-26 13:36:02 +02:00
parent 0cda1706fa
commit 79e34d7e43
23 changed files with 143 additions and 72 deletions
--- a/files/global.css
+++ b/files/global.css
@@ -176,6 +176,7 @@ figure {

 .tooltip .tagdropdown {
  padding: 0;
+  margin: 0;
 }

 .tooltip:hover .tooltiptext {
@@ -196,6 +197,11 @@ figure {
  padding: 0;
 }

+.tooltip .tooltiptext ol {
+  margin-left: 0;
+  padding-left: 0.5em;
+}
+
 .tooltip .tooltiptext .tagentry label {
  cursor: pointer;
  width: 100%;
--- a/modules/generate_html.py
+++ b/modules/generate_html.py
@@ -5,6 +5,7 @@ import fnmatch
 import json
 from typing import Any
 from datetime import datetime
+from collections import defaultdict

 from tqdm.auto import tqdm
 from PIL import Image, ExifTags, TiffImagePlugin, UnidentifiedImageError
@@ -189,27 +190,66 @@ def get_image_info(item: str, folder: str) -> dict[str, Any]:
            tags = xmpdata["xmpmeta"]["RDF"]["Description"]["subject"]["Bag"]["li"]
            if isinstance(tags, str):
                tags = [tags]
-            xmp = xmpdata
        except TypeError:
-            ...
+            pass
        except KeyError:
-            ...
+            pass
        try:
            tags = xmpdata["xapmeta"]["RDF"]["Description"]["subject"]["Bag"]["li"]
            if isinstance(tags, str):
                tags = [tags]
-            xmp = xmpdata
        except TypeError:
-            ...
+            pass
        except KeyError:
-            ...
+            pass
+        try:
+            tags = xmpdata["xmpmeta"]["RDF"]["Description"]["hierarchicalSubject"]["Bag"]["li"]
+            if isinstance(tags, str):
+                tags = [tags]
+        except TypeError:
+            pass
+        except KeyError:
+            pass
+        try:
+            tags = xmpdata["xapmeta"]["RDF"]["Description"]["hierarchicalSubject"]["Bag"]["li"]
+            if isinstance(tags, str):
+                tags = [tags]
+        except TypeError:
+            pass
+        except KeyError:
+            pass
    if None in tags:
        tags.remove(None)
-    if "st" in tags:
-        tags.remove("st")
    return {"width": width, "height": height, "tags": tags, "exifdata": exifdata, "xmp": xmp}


+def nested_dict():
+    return defaultdict(nested_dict)
+
+
+def insert_path(d, path):
+    for part in path[:-1]:
+        d = d[part]
+    last = path[-1]
+    if not isinstance(d[last], dict):
+        d[last] = {}
+
+
+def finalize(d):
+    if isinstance(d, defaultdict):
+        # Sort keys before recursion
+        return {k: finalize(d[k]) for k in sorted(d)}
+    return d or []
+
+
+def parse_hierarchical_tags(tags, delimiter="|"):
+    tree = nested_dict()
+    for tag in tags:
+        parts = tag.split(delimiter)
+        insert_path(tree, parts)
+    return finalize(tree)
+
+
 def get_tags(sidecarfile: str) -> list[str]:
    """
    Extracts Tags from XMP sidecar file
@@ -230,21 +270,35 @@ def get_tags(sidecarfile: str) -> list[str]:
        if isinstance(tags, str):
            tags = [tags]
    except TypeError:
-        ...
+        pass
    except KeyError:
-        ...
+        pass
    try:
        tags = xmpdata["xapmeta"]["RDF"]["Description"]["subject"]["Bag"]["li"]
        if isinstance(tags, str):
            tags = [tags]
    except TypeError:
-        ...
+        pass
    except KeyError:
-        ...
+        pass
+    try:
+        tags = xmpdata["xmpmeta"]["RDF"]["Description"]["hierarchicalSubject"]["Bag"]["li"]
+        if isinstance(tags, str):
+            tags = [tags]
+    except TypeError:
+        pass
+    except KeyError:
+        pass
+    try:
+        tags = xmpdata["xapmeta"]["RDF"]["Description"]["hierarchicalSubject"]["Bag"]["li"]
+        if isinstance(tags, str):
+            tags = [tags]
+    except TypeError:
+        pass
+    except KeyError:
+        pass
    if None in tags:
        tags.remove(None)
-    if "st" in tags:
-        tags.remove("st")
    return tags


@@ -489,9 +543,9 @@ def create_html_file(folder: str, title: str, foldername: str, images: list[dict

    alltags = set()
    for img in images:
-        for tag in img["tags"]:
-            alltags.add(tag)
-    alltags = sorted(alltags)
+        alltags.update(img["tags"])
+
+    nested_tags = parse_hierarchical_tags(alltags)

    folder_info = info.get(urllib.parse.quote(folder), "").split("\n")
    _info = [i for i in folder_info if len(i) > 1] if folder_info else None
@@ -541,7 +595,7 @@ def create_html_file(folder: str, title: str, foldername: str, images: list[dict
        version=version,
        logo=logo,
        licensefile=license_url,
-        tags=alltags,
+        tags=nested_tags,
    )

    with open(html_file, "w", encoding="utf-8") as f:
--- a/templates/default.css
+++ b/templates/default.css
@@ -52,7 +52,7 @@
  background-color: var(--color2);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--color4);
 }

--- a/templates/index.html.j2
+++ b/templates/index.html.j2
@@ -1,3 +1,17 @@
+{%- macro render_tags(tag_tree, parent) -%}
+  <ol>
+    {%- for key, value in tag_tree.items() %}
+      <li class="tagentry">
+        <label onclick="filter()" title="{{ key }}" id="{{ parent }}|{{ key }}">
+          <input type="checkbox" />{{ key }}
+        </label>
+        {%- if value %}
+          {{ render_tags(value, parent + '|' + key) }}
+        {%- endif %}
+      </li>
+    {%- endfor %}
+  </ol>
+{%- endmacro -%}
 <!DOCTYPE html>
 <html lang="en">

@@ -49,15 +63,14 @@
        <li class="title"><span class="header">{{ header }}</span></li>
      </div>
      <div class="navright">
-        {%- if tags|length > 0 %}
-        <li class="tooltip"><a>Filter by Tags</a>
+        {% if tags %}
+        <li class="tooltip">
+          <a>Filter by Tags</a>
          <ol class="tooltiptext tagdropdown" id="tagdropdown">
-            {%- for tag in tags -%}
-            <li class="tagentry"><label onclick="filter()"><input type="checkbox" />{{ tag }}</label></li><br />
-            {%- endfor -%}
+            {{ render_tags(tags, '') }}
          </ol>
        </li>
-        {%- endif %}
+        {% endif %}
        {%- if licensefile %}
        <li class="license"><a href="{{ licensefile }}">License</a></li>
        {%- endif %}
@@ -165,7 +178,6 @@
      {%- endif %}
      {%- endfor %}
    ];
-    var shown = [];
    var re = /pid=(\d+)/;
    var filterre = /#(.*)/;
    var controllers = {}
@@ -194,10 +206,10 @@
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }

-    function updateImageList() {
+    function updateImageList(images) {
      var str = ""
      var imagelist = document.getElementById("imagelist");
-      shown.forEach((item, index) => {
+      images.forEach((item, index) => {
        str += '<div class="column"><figure><img src="' + item.msrc + '" onclick="openSwipe(' + index + ')" onmouseover="prefetch(' + index + ')" onmouseleave="cancel(' + index + ')" /><figcaption class="caption">' + item.name;
        if (item.tiff != "") {
          str += ' <a href="' + item.tiff + '">TIFF</a>';
@@ -229,31 +241,31 @@
    }

    function filter() {
-      window.location.href = window.location.href.split("#")[0] + "#"
-      var selected_tags = [];
-      var tagdropdown, tags, incl;
-      shown = [];
-      tagdropdown = document.getElementById("tagdropdown").getElementsByTagName("li");
-      for (var i = 0; i < tagdropdown.length; i++) {
-        if (tagdropdown[i].firstChild.firstChild.checked) {
-          selected_tags.push([tagdropdown[i].innerText])
-        }
-      }
-      var urltags = selected_tags.join(",");
-      items.forEach((item, index) => {
-        tags = item.tags;
-        incl = true;
-        selected_tags.forEach((tag) => {
-          if (tags.indexOf(tag) == -1) {
-            incl = false;
-          }
-        });
-        if (incl | selected_tags == []) {
-          shown.push(item)
+      window.location.href = window.location.href.split("#")[0] + "#";
+
+      const selected_tags = [];
+      const shown = [];
+
+      const tagcheckboxes = document.querySelectorAll("#tagdropdown input[type='checkbox']:checked");
+
+      tagcheckboxes.forEach((checkbox) => {
+        const tag = checkbox.parentElement.id.trim().substring(1);
+        selected_tags.push(tag);
+      });
+      console.log(selected_tags);
+
+      const urltags = selected_tags.join(",");
+
+      items.forEach((item) => {
+        const tags = item.tags || [];
+        const include = selected_tags.every(tag => tags.includes(tag));
+        if (include || selected_tags.length === 0) {
+          shown.push(item);
        }
      });
-      updateImageList();
-      window.location.href += urltags
+
+      updateImageList(shown);
+      window.location.href += urltags;
    }

    function setFilter(selected) {
@@ -275,8 +287,7 @@
      }
      filter();
      {%- else %}
-      shown = items;
-      updateImageList();
+      updateImageList(items);
      {%- endif %}

      if (re.test(window.location.href)) {
--- a/themes/alpenglow-dark.css
+++ b/themes/alpenglow-dark.css
@@ -97,7 +97,7 @@ body {
  background-color: var(--color6);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--color3);
 }

--- a/themes/alpenglow.css
+++ b/themes/alpenglow.css
@@ -96,7 +96,7 @@ body {
  background-color: var(--color3);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--color7);
 }

--- a/themes/aritim-dark.css
+++ b/themes/aritim-dark.css
@@ -74,7 +74,7 @@
  background-color: var(--bcolor1);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--bcolor3);
 }

--- a/themes/aritim.css
+++ b/themes/aritim.css
@@ -74,7 +74,7 @@
  background-color: var(--bcolor1);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--bcolor3);
 }

--- a/themes/autumn.css
+++ b/themes/autumn.css
@@ -79,7 +79,7 @@
  font-family: "Playfair Display", serif;
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--color3);
 }

--- a/themes/carnation.css
+++ b/themes/carnation.css
@@ -73,7 +73,7 @@
  background-color: var(--bcolor2);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--bcolor4);
 }

--- a/themes/catpuccin.css
+++ b/themes/catpuccin.css
@@ -79,7 +79,7 @@
  font-family: "Nunito", sans-serif;
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--color4);
 }

--- a/themes/cornflower.css
+++ b/themes/cornflower.css
@@ -73,7 +73,7 @@
  background-color: var(--bcolor2);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--bcolor4);
 }

--- a/themes/default-dark.css
+++ b/themes/default-dark.css
@@ -52,7 +52,7 @@
  background-color: var(--color3);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--color4);
 }

--- a/themes/default.css
+++ b/themes/default.css
@@ -52,7 +52,7 @@
  background-color: var(--color2);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--color4);
 }

--- a/themes/ivy.css
+++ b/themes/ivy.css
@@ -73,7 +73,7 @@
  background-color: var(--bcolor2);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--bcolor4);
 }

--- a/themes/kjoe.css
+++ b/themes/kjoe.css
@@ -72,7 +72,7 @@
  background-color: var(--color3);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--color2);
 }

--- a/themes/monokai-vibrant.css
+++ b/themes/monokai-vibrant.css
@@ -55,7 +55,7 @@
  background-color: var(--bcolor2);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--bcolor3);
 }

--- a/themes/rainbow.css
+++ b/themes/rainbow.css
@@ -76,7 +76,7 @@
  background-color: var(--bcolor2);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--bcolor4);
 }

--- a/themes/spring.css
+++ b/themes/spring.css
@@ -79,7 +79,7 @@
  font-family: "Lora", serif;
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--bcolor3);
 }

--- a/themes/steam.css
+++ b/themes/steam.css
@@ -80,7 +80,7 @@
  background-color: var(--color4);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--color3);
 }

--- a/themes/summer.css
+++ b/themes/summer.css
@@ -80,7 +80,7 @@
  font-family: "Roboto", sans-serif;
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--bcolor3);
  color: var(--bcolor2);
 }
--- a/themes/sunflower.css
+++ b/themes/sunflower.css
@@ -74,7 +74,7 @@
  background-color: var(--bcolor2);
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--bcolor4);
 }

--- a/themes/winter.css
+++ b/themes/winter.css
@@ -88,7 +88,7 @@
  font-family: "Montserrat", sans-serif;
 }

-.tagentry:hover {
+.tagentry > label:hover {
  background-color: var(--color2);
 }