Fix all tab content being changed at once

core/static/tabs.css

@@ -1,7 +0,0 @@
-#tab-content div {
-    display: none;
-}
-
-#tab-content div.is-active {
-    display: block;
-}

core/static/tabs.js

@@ -1,35 +1,36 @@
-    // tabbed browsing for the modal
-    function initTabs() {
-        TABS.forEach((tab) => {
-          tab.addEventListener('click', (e) => {
-            let selected = tab.getAttribute('data-tab');
-            updateActiveTab(tab);
-            updateActiveContent(selected);
-          })
-        })
-      }
-    
-      function updateActiveTab(selected) {
-        TABS.forEach((tab) => {
-          if (tab && tab.classList.contains(ACTIVE_CLASS)) {
-            tab.classList.remove(ACTIVE_CLASS);
-          }
-        });
-        selected.classList.add(ACTIVE_CLASS);
-      }
-    
-      function updateActiveContent(selected) {
-        CONTENT.forEach((item) => {
-          if (item && item.classList.contains(ACTIVE_CLASS)) {
-            item.classList.remove(ACTIVE_CLASS);
-          }
-          let data = item.getAttribute('data-content');
-          if (data === selected) {
-            item.classList.add(ACTIVE_CLASS);
-          }
-        });
-      }
-var TABS = [...document.querySelectorAll('#tabs li')];
-var CONTENT = [...document.querySelectorAll('#tab-content div')];
-var ACTIVE_CLASS = 'is-active';
-initTabs();
+function initTabs(unique) {
+    var tabs_selector = '#tabs-'+unique+' li';
+    var TABS = [...document.querySelectorAll(tabs_selector)];
+    var CONTENT = [...document.querySelectorAll('#tab-content-'+unique+' div')];
+    var ACTIVE_CLASS = 'is-active';
+    TABS.forEach((tab) => {
+      tab.addEventListener('click', (e) => {
+        let selected = tab.getAttribute('data-tab');
+        updateActiveTab(TABS, ACTIVE_CLASS, tab);
+        updateActiveContent(CONTENT, ACTIVE_CLASS, selected);
+      })
+    })
+  }
+
+function updateActiveTab(TABS, ACTIVE_CLASS, selected) {
+  TABS.forEach((tab) => {
+    if (tab && tab.classList.contains(ACTIVE_CLASS)) {
+      tab.classList.remove(ACTIVE_CLASS);
+    }
+  });
+  selected.classList.add(ACTIVE_CLASS);
+}
+
+function updateActiveContent(CONTENT, ACTIVE_CLASS, selected) {
+  CONTENT.forEach((item) => {
+    if (item && item.classList.contains(ACTIVE_CLASS)) {
+      item.classList.remove(ACTIVE_CLASS);
+    }
+    let data = item.getAttribute('data-content');
+    if (data === selected) {
+      item.classList.add(ACTIVE_CLASS);
+    }
+  });
+}
+
+// initTabs();

core/templates/modals/context.html

@@ -2,8 +2,6 @@
 {% load static %}
 
 <script src="{% static 'modal.js' %}"></script>
-<link rel ="stylesheet" href="{% static 'tabs.css' %}">
-<script src="{% static 'tabs.js' %}"></script>
 <script>
   document.addEventListener("restore-modal-scroll", function(event) {
     var modalContent = document.getElementsByClassName("modal-content")[0];
@@ -27,13 +25,22 @@
 
   });
 </script>
+<style>
+  #tab-content-{{ unique }} div {
+    display: none;
+  }
+
+  #tab-content-{{ unique }} div.is-active {
+      display: block;
+  }
+</style>
 
 <div id="modal" class="modal is-active is-clipped">
   <div class="modal-background"></div>
   <div class="modal-content">
     <div class="box">
       {% include 'partials/notify.html' %}
-      <div class="tabs is-toggle is-fullwidth is-info" id="tabs">
+      <div class="tabs is-toggle is-fullwidth is-info" id="tabs-{{ unique }}">
         <ul>
           <li class="is-active" data-tab="1">
             <a>
@@ -61,7 +68,7 @@
           </li>
         </ul>
       </div>
-      <div id="tab-content">
+      <div id="tab-content-{{ unique }}">
         <div class="is-active" data-content="1">
           <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4>
           {% include 'modals/context_table.html' %}
@@ -108,7 +115,7 @@
         </div>
       </div>
     </div>
+    <script>initTabs("{{ unique }}");</script>
     <button class="modal-close is-large" aria-label="close"></button>
-    {# <script>activateButtons();</script> #}
   </div>
 </div>

core/templates/modals/drilldown.html

@@ -2,8 +2,6 @@
 {% load static %}
 
 <script src="{% static 'modal.js' %}"></script>
-<link rel ="stylesheet" href="{% static 'tabs.css' %}">
-<script src="{% static 'tabs.js' %}"></script>
 <div id="modal" class="modal is-active is-clipped">
   <div class="modal-background"></div>
   <div class="modal-content">

core/templates/partials/magnet.html

@@ -1,8 +1,8 @@
 <magnet-block attract-distance="10" align-to="outer|center" class="floating-window">
   {% extends 'partials/panel.html' %}
-    {% block heading %}
-    {% endblock %}
+  {% block heading %}
+  {% endblock %}
 
-    {% block panel_content %}
-    {% endblock %}
+  {% block panel_content %}
+  {% endblock %}
 </magnet-block>

core/templates/ui/drilldown/drilldown.html

@@ -22,6 +22,7 @@
     </div>
   {% endif %}
   <script src="{% static 'js/chart.js' %}"></script>
+  <script src="{% static 'tabs.js' %}"></script>
   <script>
     function setupTags() {
       var inputTags = document.getElementById('tags');

core/templates/widgets/drilldown.html

@@ -1,12 +1,12 @@
 <div id="drilldown-widget">
-  <div id="drilldown-widget-{{ net }}" class="grid-stack-item" gs-w="5" gs-h="15">
+  <div id="drilldown-widget-{{ unique }}" class="grid-stack-item" gs-w="5" gs-h="15">
     <div class="grid-stack-item-content">
       <div class="panel">
         <p class="panel-heading" style="padding: .2em; line-height: .5em;">
           <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light ui-move"></i>
           <i
-          class="fa-solid fa-xmark has-text-grey-light ui-close"
-          onclick='grid.removeWidget("drilldown-widget-{{ net }}"); grid.compact();'></i>
+            class="fa-solid fa-xmark has-text-grey-light ui-close"
+            onclick='grid.removeWidget("drilldown-widget-{{ unique }}"); grid.compact();'></i>
           Drilldown
         </p>
         <div class="panel-block is-active">
@@ -27,5 +27,8 @@
   grid.addWidget(contents.innerHTML);
   contents.outerHTML = "";
   grid.compact();
+  // because we remove the element the JS runs in
+  // so we need to run it again here
+  initTabs("{{ unique }}");
 
 </script>

core/templates/window-content/context.html

@@ -2,8 +2,6 @@
 {% load static %}
 
 <script src="{% static 'modal.js' %}"></script>
-<link rel ="stylesheet" href="{% static 'tabs.css' %}">
-<script src="{% static 'tabs.js' %}"></script>
 <script>
   document.addEventListener("restore-modal-scroll", function(event) {
     var modalContent = document.getElementsByClassName("modal-content")[0];
@@ -27,13 +25,22 @@
 
   });
 </script>
+<style>
+  #tab-content-{{ unique }} div {
+    display: none;
+  }
+
+  #tab-content-{{ unique }} div.is-active {
+      display: block;
+  }
+</style>
 
 <div id="modal" class="modal is-active is-clipped">
   <div class="modal-background"></div>
   <div class="modal-content">
     <div class="box">
       {% include 'partials/notify.html' %}
-      <div class="tabs is-toggle is-fullwidth is-info" id="tabs">
+      <div class="tabs is-toggle is-fullwidth is-info" id="tabs-{{ unique }}">
         <ul>
           <li class="is-active" data-tab="1">
             <a>
@@ -61,7 +68,7 @@
           </li>
         </ul>
       </div>
-      <div id="tab-content">
+      <div id="tab-content-{{ unique }}">
         <div class="is-active" data-content="1">
           <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4>
           {% include 'modals/context_table.html' %}
@@ -108,7 +115,8 @@
         </div>
       </div>
     </div>
+    <script>initTabs("{{ unique }}");</script>
     <button class="modal-close is-large" aria-label="close"></button>
-    {# <script>activateButtons();</script> #}
   </div>
 </div>
+

core/templates/window-content/drilldown.html

@@ -1,8 +1,15 @@
 {% load index %}
 {% load static %}
-<div class="tabs is-toggle is-fullwidth is-info" id="tabs">
-  <link rel ="stylesheet" href="{% static 'tabs.css' %}">
-  <script src="{% static 'tabs.js' %}"></script>
+<style>
+  #tab-content-{{ unique }} div {
+    display: none;
+  }
+
+  #tab-content-{{ unique }} div.is-active {
+      display: block;
+  }
+</style>
+<div class="tabs is-toggle is-fullwidth is-info" id="tabs-{{ unique }}">
   <ul>
     <li class="is-active" data-tab="1">
       <a>
@@ -30,7 +37,7 @@
     </li>
   </ul>
 </div>
-<div id="tab-content">
+<div id="tab-content-{{ unique }}">
   <div class="is-active" data-content="1">
     <h4 class="subtitle is-4">Channels for {{ nick }} on {{ net }}</h4>
     {% for channel in chans %}
@@ -95,5 +102,6 @@
       </a>
     {% endfor %}
   </div>
+  <script>initTabs("{{ unique }}");</script>
 </div>
-<script src="{% static 'tabs.js' %}"></script>
+

core/views/ui/drilldown.py

@@ -1,5 +1,6 @@
 import json
 import urllib
+import uuid
 from copy import deepcopy
 
 from django.conf import settings
@@ -384,6 +385,7 @@ class DrilldownContextModal(APIView):
         # Make the time nicer
         # for index, item in enumerate(results["object_list"]):
         #    results["object_list"][index]["time"] = item["time"]+"SSS"
+        unique = str(uuid.uuid4())[:8]
         context = {
             "net": query_params["net"],
             "channel": query_params["channel"],
@@ -398,6 +400,7 @@ class DrilldownContextModal(APIView):
             "mtype": query_params["mtype"],
             "nick": query_params["nick"],
             "params": query_params,
+            "unique": unique,
         }
         if request.user.is_superuser:
             if query:
@@ -465,6 +468,7 @@ class ThresholdInfoModal(APIView):
 
         # SAFE BLOCK END #
 
+        unique = str(uuid.uuid4())[:8]
         context = {
             "net": net,
             "nick": nick,
@@ -475,5 +479,6 @@ class ThresholdInfoModal(APIView):
             "inter_users": inter_users,
             "num_users": num_users,
             "num_chans": num_chans,
+            "unique": unique,
         }
         return render(request, self.template_name, context)