Fix widget rendering after swap

core/templates/ui/drilldown/drilldown.html

@@ -69,54 +69,6 @@
         </nav>
       </div>
     </div>
-    <div id="results">
-      {% if table %}
-        <div id="results-content" class="grid-stack-item" gs-w="5" gs-h="15" gs-y="10">
-          <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>
-                Results
-              </p>
-              <div class="panel-block is-active">
-                <div class="control">
-                  <script src="{% static 'js/column-shifter.js' %}"></script>
-                  <span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total">
-                    <i class="fa-solid fa-chart-mixed"></i>
-                  </span>
-                
-                  {{ table.data|length }} hits in {{ took }}ms
-                  {% if exemption is not None %}
-                    <span class="icon has-tooltip-bottom" data-tooltip="God mode">
-                      <i class="fa-solid fa-book-bible"></i>
-                    </span>
-                  {% else %}
-                    {% if redacted is not None %}
-                      <span class="icon has-tooltip-bottom" data-tooltip="{{ redacted }} redacted">
-                        <i class="fa-solid fa-mask"></i>
-                      </span>
-                    {% endif %}
-                    {% endif %}
-                    {% if delay is not None %}
-                      <span class="icon has-tooltip-bottom" data-tooltip="delayed by {{ delay }} days">
-                        <i class="fa-solid fa-clock"></i>
-                      </span>
-                    {% endif %}
-                    {% if randomised is True %}
-                      <span class="icon has-tooltip-bottom" data-tooltip="integer fields randomised">
-                        <i class="fa-solid fa-shuffle"></i>
-                      </span>
-                    {% endif %}
-                  
-                    {% include 'ui/drilldown/table_results_partial.html' %}
-                    {% include 'ui/drilldown/sentiment_partial.html' %}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      {% endif %}
-    </div>
   </div>
   <div id="modals-here">
   </div>
@@ -124,6 +76,11 @@
   </div>
   <div id="widgets-here" style="display: none;">
   </div>
+  <div id="results" style="display: none;">
+    {% if table %}
+      {% include 'widgets/table_results.html' %}
+    {% endif %}
+  </div>
   <script>
     var grid = GridStack.init({
       cellHeight: 20,
@@ -137,4 +94,18 @@
     setupTags();
 
   </script>
+  {% if table %}
+    <script>
+      //var contents = $("#drilldown-widget").outerHTML;
+      var contents = document.getElementById("drilldown-widget");
+      var grid = document.getElementById("grid-stack-main").gridstack;
+      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>
+  {% endif %}
 {% endblock %}

core/templates/ui/drilldown/table_results.html

@@ -1,38 +0,0 @@
-{% load static %}
-{% load index %}
-{% load joinsep %}
-{% include 'partials/notify.html' %}
-
-{% if table %}
-  <script src="{% static 'js/column-shifter.js' %}"></script>
-  <span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total">
-    <i class="fa-solid fa-chart-mixed"></i>
-  </span>
-
-  {{ table.data|length }} hits in {{ took }}ms
-  {% if exemption is not None %}
-    <span class="icon has-tooltip-bottom" data-tooltip="God mode">
-      <i class="fa-solid fa-book-bible"></i>
-    </span>
-  {% else %}
-    {% if redacted is not None %}
-      <span class="icon has-tooltip-bottom" data-tooltip="{{ redacted }} redacted">
-        <i class="fa-solid fa-mask"></i>
-      </span>
-    {% endif %}
-  {% endif %}
-  {% if delay is not None %}
-    <span class="icon has-tooltip-bottom" data-tooltip="delayed by {{ delay }} days">
-      <i class="fa-solid fa-clock"></i>
-    </span>
-  {% endif %}
-  {% if randomised is True %}
-    <span class="icon has-tooltip-bottom" data-tooltip="integer fields randomised">
-      <i class="fa-solid fa-shuffle"></i>
-    </span>
-  {% endif %}
-
-  {% include 'ui/drilldown/table_results_partial.html' %}
-  {% include 'ui/drilldown/sentiment_partial.html' %}
-
-{% endif %}

core/templates/widgets/table_results.html

@@ -1,15 +1,20 @@
 {% load static %}
-<div id="drilldown-widget">
+<script>
-  <div id="results-content" class="grid-stack-item" gs-w="5" gs-h="15">
+  grid.removeWidget("drilldown-widget-results");
+</script>
+<div id="drilldown-widget" style="display: none;">
+  <div id="drilldown-widget-results" class="grid-stack-item" gs-w="10" gs-h="30" gs-y="10" gs-x="1">
     <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-results"); //grid.compact();'></i>
           Results
         </p>
         <div class="panel-block is-active">
           <div class="control">
-            {% if table %}
             <script src="{% static 'js/column-shifter.js' %}"></script>
             <span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total">
               <i class="fa-solid fa-chart-mixed"></i>
@@ -41,7 +46,6 @@
             {% include 'ui/drilldown/table_results_partial.html' %}
             {% include 'ui/drilldown/sentiment_partial.html' %}
             
-            {% endif %}
           </div>
         </div>
       </div>
@@ -49,12 +53,13 @@
   </div>
 </div>
 <script>
+  console.log("RUNS");
   //var contents = $("#drilldown-widget").outerHTML;
   var contents = document.getElementById("drilldown-widget");
   var grid = document.getElementById("grid-stack-main").gridstack;
   grid.addWidget(contents.innerHTML);
   contents.outerHTML = "";
-  grid.compact();
+  // grid.compact();
   // because we remove the element the JS runs in
   // so we need to run it again here
   // initTabs("{{ unique }}");

core/views/ui/drilldown.py

@@ -205,6 +205,9 @@ def drilldown_search(request, return_context=False, template=None):
         )
         context["class"] = "warning"
 
+    # unique = str(uuid.uuid4())[:8]
+    # context["unique"] = unique
+
     response = render(request, template_name, context)
     if request.GET:
         if request.htmx:
@@ -218,7 +221,7 @@ def drilldown_search(request, return_context=False, template=None):
 
 class DrilldownTableView(SingleTableView):
     table_class = DrilldownTable
-    template_name = "ui/drilldown/table_results.html"
+    template_name = "widgets/table_results.html"
     paginate_by = settings.DRILLDOWN_RESULTS_PER_PAGE
 
     def get_queryset(self, request, **kwargs):