Properly swap modal context table and keep scroll position

app/urls.py

@@ -89,6 +89,7 @@ urlpatterns = [
     # path("drilldown/", Drilldown.as_view(), name="drilldown"),
     path("modal/", ThresholdInfoModal.as_view(), name="modal_drilldown"),
     path("context/", DrilldownContextModal.as_view(), name="modal_context"),
+    path("context_table/", DrilldownContextModal.as_view(), name="modal_context_table"),
     ##
     path("ui/insights/", Insights.as_view(), name="insights"),
     path("ui/insights/search/", InsightsSearch.as_view(), name="search_insights"),

core/lib/context.py

@@ -1,6 +1,3 @@
-from core.lib.opensearch import client, run_main_query
-from django.conf import settings
-
 def construct_query(net, channel, src, num, size):
     # Get the initial query
     extra_must = []
@@ -21,11 +18,21 @@ def construct_query(net, channel, src, num, size):
                             "should": query_should,
                         }
                     },
-                    *extra_must
+                    *extra_must,
                 ]
             }
         },
-        "fields": ["nick", "ident", "host", "channel", "ts", "msg", "type", "net", "src"],
+        "fields": [
+            "nick",
+            "ident",
+            "host",
+            "channel",
+            "ts",
+            "msg",
+            "type",
+            "net",
+            "src",
+        ],
         "_source": False,
     }
     return query

core/templates/modals/context.html

@@ -5,34 +5,42 @@
 <link rel ="stylesheet" href="{% static 'tabs.css' %}">
 <script src="{% static 'tabs.js' %}"></script>
 
-<div
+<div class="modal-refresh"
-  class="modal-refresh"
+     style="display: none;"
-  style="display: none;"
+     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+     hx-post="{% url 'modal_context_table' %}"
-  hx-post="{% url 'modal_context' %}"
+     hx-vals='{"net": "{{ net }}",
-  hx-vals='{"net": "{{ net }}",
+               "num": "{{ num }}",
-            "num": "{{ num }}",
+               "src": "{{ src }}",
-            "src": "{{ src }}",
+               "channel": "{{ channel }}",
-            "channel": "{{ channel }}",
+               "time": "{{ time }}",
-            "time": "{{ time }}",
+               "date": "{{ date }}",
-            "date": "{{ date }}",
+               "index": "{{ index }}"
-            "index": "{{ index }}"
+             }'
-          }'
+     hx-target="#modal-context-table"
-  hx-target="#modals-here"
+     hx-trigger="every 5s">
-  hx-trigger="every 3s">
 </div>
 
 <script>
   document.addEventListener("restore-modal-scroll", function(event) {
-      var scrollpos = localStorage.getItem('scrollpos_modal_content');
+    var modalContent = document.getElementsByClassName("modal-content")[0];
-      if (scrollpos) {
+    var maxScroll = modalContent.scrollHeight - modalContent.offsetHeight;
-        document.getElementsByClassName("modal-content")[0].scrollTop = scrollpos;
+    var scrollpos = localStorage.getItem('scrollpos_modal_content');
-      };
+    if (scrollpos == 'BOTTOM') {
+      modalContent.scrollTop = maxScroll;
+    } else if (scrollpos) {
+      modalContent.scrollTop = scrollpos;
+    };
   });
 
   document.addEventListener("htmx:beforeSwap", function(event) {
-    var contentScroll = document.getElementsByClassName("modal-content")[0].scrollTop;
+    var modalContent = document.getElementsByClassName("modal-content")[0];
-    localStorage.setItem('scrollpos_modal_content', contentScroll);
+    var scrollpos = modalContent.scrollTop;
+    if(modalContent.scrollTop === (modalContent.scrollHeight - modalContent.offsetHeight)) {
+      localStorage.setItem('scrollpos_modal_content', 'BOTTOM');
+    } else {
+      localStorage.setItem('scrollpos_modal_content', scrollpos);
+    }
 
   });
 </script>
@@ -73,26 +81,7 @@
       <div id="tab-content">
         <div class="is-active" data-content="1">
           <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4>
-          <article class="table-container">
+          {% include 'modals/context_table.html' %}
-            <table class="table">
-              <thead>
-                <th></th>
-              </thead>
-              <tbody>
-                {% for item in object_list %}
-                  {% if item.type == 'msg' %}
-                    <tr>
-                      <td>{{ item.time }}</td>
-                      <td
-                        class="has-tooltip-right {% if item.online is True %}has-text-success{% elif item.online is False %}has-text-danger{% else %}has-text-warning{% endif %}"
-                        data-tooltip="{{ item.nick }}!{{ item.ident }}@{{ item.host }}">{{ item.nick }}</td>
-                      <td class="wrap">{{ item.msg }}</td>
-                    </tr>
-                  {% endif %}
-                {% endfor %}
-              </tbody>
-            </table>
-          </article>
           <div class="field has-addons">
             <div class="control is-expanded has-icons-left">
               <input
@@ -135,10 +124,6 @@
       </div>
     </div>
     <button class="modal-close is-large" aria-label="close"></button>
-    <script>
-      var modal_event = new Event('restore-modal-scroll');
-      document.dispatchEvent(modal_event);
-    </script>
     {# <script>activateButtons();</script> #}
   </div>
 </div>

core/templates/modals/context_table.html

@@ -0,0 +1,24 @@
+<article class="table-container" id="modal-context-table">
+    <table class="table">
+      <thead>
+        <th></th>
+      </thead>
+      <tbody>
+        {% for item in object_list %}
+          {% if item.type == 'msg' %}
+            <tr>
+              <td>{{ item.time }}</td>
+              <td
+                class="has-tooltip-right {% if item.online is True %}has-text-success{% elif item.online is False %}has-text-danger{% else %}has-text-warning{% endif %}"
+                data-tooltip="{{ item.nick }}!{{ item.ident }}@{{ item.host }}">{{ item.nick }}</td>
+              <td class="wrap">{{ item.msg }}</td>
+            </tr>
+          {% endif %}
+        {% endfor %}
+      </tbody>
+    </table>
+  </article>
+  <script>
+    var modal_event = new Event('restore-modal-scroll');
+    document.dispatchEvent(modal_event);
+  </script>

core/templates/ui/drilldown/table_results.html

@@ -35,7 +35,6 @@
       <script src="{% static 'chart.js' %}"></script>
     </div>
   {% endif %}
-  {{ params }}
   {% include 'ui/drilldown/table_results_partial.html' %}
 {% endif %}
 {# Update the tags in case the user changed the query #}

core/views/ui/drilldown.py

@@ -240,6 +240,9 @@ class DrilldownContextModal(APIView):
     template_name = "modals/context.html"
 
     def post(self, request):
+        if request.resolver_match.url_name == "modal_context_table":
+            print("POST CONTEXT TABLE")
+            self.template_name = "modals/context_table.html"
         # if not request.user.has_plan(self.plan_name):
         #    return JsonResponse({"success": False})
         num = None