Make tag handling much more flexible

core/templates/ui/drilldown/drilldown.html

@@ -1,67 +1,89 @@
 {% extends "base.html" %}
 {% load static %}
+{% load joinsep %}
 {% block content %}
   <script src="{% static 'js/chart.js' %}"></script>
   <script>
-    function addTag(value) {
+    function setupTags() {
       var inputTags = document.getElementById('tags');
-      var btiInstance = inputTags.BulmaTagsInput();
+      new BulmaTagsInput(inputTags);
-      btiInstance.add(value);
-    }
-    function delTag(value) {
-      var inputTags = document.getElementById('tags');
-      var btiInstance = inputTags.BulmaTagsInput();
-      btiInstance.remove(value);
-    }
-    function toggleTag(field, value) {
-      var queryElement = document.getElementById('query');
-      var tagText = `${field}: ${value}`;
-      var present = true;
-      if (present == true) {
-        var toAppend = ` AND ${field}: "${value}"`;
-        var toRemove = `${field}: "${value}"`;
-        var tagText = `${field}: ${value}`;
-      } else {
-        var toAppend = ` AND NOT ${field}: "${value}"`;
-        var toRemove = `NOT ${field}: "${value}"`;
-      }
-      if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) {
-        addTag(tagText);
-      } else {
-        delTag(tagText);
-      }
-    }
-    function populateSearch(field, value, fromTag=false) {
-      var queryElement = document.getElementById('query');
-      var present = true;
-      if (present == true) {
-        var toAppend = ` AND ${field}: "${value}"`;
-        var toRemove = `${field}: "${value}"`;
-        var tagText = `${field}: ${value}`;
-      } else {
-        var toAppend = ` AND NOT ${field}: "${value}"`;
-        var toRemove = `NOT ${field}: "${value}"`;
-      }
-      if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) {
 
-        if (fromTag) {
+      inputTags.BulmaTagsInput().on('before.add', function(item) {
+        if (item.includes(": ")) {
+          var spl = item.split(": ");
+        } else {
+          var spl = item.split(":");
+        }
+        var field = spl[0];
+        try {
+          var value = JSON.parse(spl[1]);
+        } catch {
+          var value = spl[1];
+        }
+        populateSearch(field, value);
+        return `${field}: ${value}`;
+      });
+      inputTags.BulmaTagsInput().on('after.remove', function(item) {
+        var spl = item.split(": ");
+        var field = spl[0];
+        try {
+          var value = JSON.parse(spl[1]);
+        } catch {
+          var value = spl[1].trim();
+        }
+        populateSearch(field, value);
+      });
+    }
+    function populateSearch(field, value) {
+      var queryElement = document.getElementById('query');
+      var present = true;
+      if (present == true) {
+        var combinations = [`${field}: "${value}"`,
+                            `${field}: "${value}"`,
+                            `${field}: ${value}`,
+                            `${field}:${value}`,
+                            `${field}:"${value}"`];
+        var toAppend = ` AND ${field}: "${value}"`;
+        // var toRemove = `${field}: "${value}"`;
+        // var tagText = `${field}: ${value}`;
+      } else {
+        var combinations = [`NOT ${field}: "${value}"`,
+                            `NOT ${field}: "${value}"`,
+                            `NOT ${field}: ${value}`,
+                            `NOT ${field}:${value}`,
+                            `NOT ${field}:"${value}"`];
+        // var toAppend = ` AND NOT ${field}: "${value}"`;
+        // var toRemove = `NOT ${field}: "${value}"`;
+      }
+      var contains = combinations.some(elem => queryElement.value.includes(elem));
+      if (!contains) {
           queryElement.value+=toAppend;
       } else {
-          queryElement.value+=toAppend;
+        for (var index in combinations) {
-        }
+          combination = combinations[index];
-      } else {
+          queryElement.value = queryElement.value.replaceAll("AND "+combination, "");
-          if (fromTag) {
+          queryElement.value = queryElement.value.replaceAll(combination, "");
-            queryElement.value = queryElement.value.replaceAll(toAppend, "");
-            queryElement.value = queryElement.value.replaceAll(toRemove, "");
-          } else {
         }
+          // queryElement.value = queryElement.value.replaceAll(toAppend, "");
+          // queryElement.value = queryElement.value.replaceAll(toRemove, "");
+
       }
+      // if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) {
+      //   queryElement.value+=toAppend;
+      // } else {
+      //     queryElement.value = queryElement.value.replaceAll(toAppend, "");
+      //     queryElement.value = queryElement.value.replaceAll(toRemove, "");
+
+      // }
       if (field == "src") {
         document.getElementById("source").selectedIndex = 0;
       }
       if (queryElement.value.startsWith(" AND ")) {
         queryElement.value = queryElement.value.replace(" AND ", "");
       }
+      if (queryElement.value.startsWith("AND ")) {
+        queryElement.value = queryElement.value.replace("AND ", "");
+      }
       htmx.trigger("#search", "click");
     }
   </script>
@@ -339,38 +361,9 @@
     </form>
   </div>
   <div class="block">
-    <input id="tags" class="input" type="tags" placeholder="Add query" value="">
+    <input id="tags" class="input" type="tags" placeholder="Add query" value="{{ tags|joinsep:',' }}">
     <script>
-      var inputTags = document.getElementById('tags');
+      setupTags();
-      new BulmaTagsInput(inputTags);
-      {% for tag in tags %}
-        inputTags.BulmaTagsInput().add("{{ tag|escapejs }}");
-      {% endfor %}
-      inputTags.BulmaTagsInput().on('before.add', function(item) {
-        if (item.includes(": ")) {
-          var spl = item.split(": ");
-        } else {
-          var spl = item.split(":");
-        }
-        var field = spl[0];
-        try {
-          var value = JSON.parse(spl[1]);
-        } catch {
-          var value = spl[1];
-        }
-        populateSearch(field, value, fromTag=true);
-        return `${field}: ${value}`;
-      });
-      inputTags.BulmaTagsInput().on('after.remove', function(item) {
-        var spl = item.split(": ");
-        var field = spl[0];
-        try {
-          var value = JSON.parse(spl[1]);
-        } catch {
-          var value = spl[1];
-        }
-        populateSearch(field, value, fromTag=true);
-      });
     </script>
   </div>
   <div class="block">

core/templates/ui/drilldown/results.html

@@ -1,5 +1,6 @@
 {% load static %}
 {% load index %}
+{% load joinsep %}
 {% include 'partials/notify.html' %}
 {% if results %}
   <div style="display: none" id="jsonData" data-json="{{ data }}">
@@ -63,7 +64,7 @@
                        {% endif %}">
               <td>
                 <a class="has-text-link is-underlined"
-                   onclick="toggleTag('src', '{{ item.src|escapejs }}')">
+                   onclick="populateSearch('src', '{{ item.src|escapejs }}')">
                   {% if item.src == 'irc' %}
                     <span class="icon" data-tooltip="IRC">
                       <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
@@ -77,7 +78,7 @@
               </td>
               <td>
                 <a class="has-text-link is-underlined"
-                   onclick="toggleTag('type', '{{ item.type|escapejs }}')">
+                   onclick="populateSearch('type', '{{ item.type|escapejs }}')">
                   {% if item.type == 'msg' %}
                     <span class="icon" data-tooltip="Message">
                       <i class="fa-solid fa-message"></i>
@@ -122,7 +123,7 @@
               <td style="max-width: 10em" class="wrap">{{ item.msg }}</td>
               <td>
                 <a class="has-text-link is-underlined"
-                   onclick="toggleTag('host', '{{ item.host|escapejs }}')">
+                   onclick="populateSearch('host', '{{ item.host|escapejs }}')">
                   {{ item.host }}
                 </a>
               </td>
@@ -143,7 +144,7 @@
                       </span>
                     {% endif %}
                   </div>
-                  <a class="nowrap-child has-text-link is-underlined" onclick="toggleTag('nick', '{{ item.nick|escapejs }}')">
+                  <a class="nowrap-child has-text-link is-underlined" onclick="populateSearch('nick', '{{ item.nick|escapejs }}')">
                     {{ item.nick }}
                   </a>
                   {% if item.num_chans is not None %}
@@ -171,7 +172,7 @@
               <td>
                 <div class="nowrap-parent">
                   <a class="nowrap-child has-text-link is-underlined"
-                     onclick="toggleTag('channel', '{{ item.channel|escapejs }}')">
+                     onclick="populateSearch('channel', '{{ item.channel|escapejs }}')">
                     {{ item.channel }}
                   </a>
                   {% if item.num_users is not None %}
@@ -185,7 +186,7 @@
               </td>
               <td>
                 <a class="has-text-link is-underlined"
-                   onclick="toggleTag('net', '{{ item.net|escapejs }}')">
+                   onclick="populateSearch('net', '{{ item.net|escapejs }}')">
                   {{ item.net }}
                 </a>
               </td>
@@ -196,3 +197,16 @@
     </div>
   </div>
 {% endif %}
+{# Update the tags in case the user changed the query #}
+{# Check for focus and refocus #}
+<script>
+  var inputTags = document.getElementsByClassName('tags-input');
+  var inputBox = document.querySelector("[placeholder='Add query']");
+  var isFocused = (document.activeElement === inputBox);
+  inputTags[0].outerHTML = '<input id="tags" class="input" type="tags" placeholder="Add query" value="{{ tags|joinsep:',' }}">';
+  setupTags();
+  var inputBox = document.querySelector("[placeholder='Add query']");
+  if (isFocused) {
+    inputBox.focus();
+  }
+</script>

core/views/ui/drilldown.py

@@ -72,7 +72,8 @@ def create_tags(query):
     spl = query.split("AND")
     spl = [x.strip() for x in spl if ":" in x]
     spl = [x.replace('"', "") for x in spl]
-    return spl
+    tags = [f"{tag}: {elem}" for tag, elem in [x.split(":") for x in spl]]
+    return tags
 
 
 def drilldown_search(request):