From 5fe003bcbf6459c6a818060d03b6b923cdfd1d26 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Sat, 1 Feb 2025 21:06:01 +1100
Subject: [PATCH] Add loading icons to sql plot and add clear button to results
 container

---
 templates/partials/sql_explorer/results.html  | 63 ++++++++++++-------
 .../partials/sql_explorer/sql_query.html      | 31 ++++++++-
 2 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/templates/partials/sql_explorer/results.html b/templates/partials/sql_explorer/results.html
index 1974cd0..a273932 100644
--- a/templates/partials/sql_explorer/results.html
+++ b/templates/partials/sql_explorer/results.html
@@ -1,26 +1,43 @@
-{% if error %}
-<div class="bg-red-200 text-red-800 p-3 rounded mb-4">
-    <strong>Error:</strong> {{ error }}
-</div>
-{% endif %}
+{% if error or results %}
+<div class="relative">
+    <!-- Floating Clear Button -->
+    <button _="on click set the innerHTML of my.parentElement to ''"
+        class="absolute top-0 right-0 m-2 px-3 py-2 flex items-center gap-2 rounded-full bg-gray-800 text-white shadow-md opacity-50 hover:opacity-100 hover:bg-gray-700 transition-all">
+        <!-- Trash Icon -->
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+            stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
+            <path
+                d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m5 4v6m4-6v6" />
+        </svg>
+        <span>Clear</span>
+    </button>
 
-{% if results %}
-<table class="min-w-full bg-white">
-    <thead>
-        <tr>
-            {% for col in columns %}
-            <th class="py-2 px-4 border-b">{{ col }}</th>
+
+    {% if error %}
+    <div class="bg-red-200 text-red-800 p-4 rounded mb-4">
+        <strong>Error:</strong> {{ error }}
+    </div>
+    {% endif %}
+
+    {% if results %}
+    <table class="min-w-full bg-white">
+        <thead>
+            <tr>
+                {% for col in columns %}
+                <th class="py-2 px-4 border-b">{{ col }}</th>
+                {% endfor %}
+            </tr>
+        </thead>
+        <tbody>
+            {% for row in results %}
+            <tr class="text-center">
+                {% for col in columns %}
+                <td class="py-2 px-4 border-b">{{ row[col] }}</td>
+                {% endfor %}
+            </tr>
             {% endfor %}
-        </tr>
-    </thead>
-    <tbody>
-        {% for row in results %}
-        <tr class="text-center">
-            {% for col in columns %}
-            <td class="py-2 px-4 border-b">{{ row[col] }}</td>
-            {% endfor %}
-        </tr>
-        {% endfor %}
-    </tbody>
-</table>
+        </tbody>
+    </table>
+    {% endif %}
+</div>
 {% endif %}
\ No newline at end of file
diff --git a/templates/partials/sql_explorer/sql_query.html b/templates/partials/sql_explorer/sql_query.html
index 518d6f4..465c4b8 100644
--- a/templates/partials/sql_explorer/sql_query.html
+++ b/templates/partials/sql_explorer/sql_query.html
@@ -42,8 +42,9 @@
 
             <!-- Plot Button -->
             <button hx-post="{{ url_for('plot_unsaved_query') }}" hx-target="#sql-plot-results" hx-trigger="click"
-                hx-include="[name='query'],[name='title']"
+                hx-include="[name='query'],[name='title']" hx-indicator="#sql-plot-results-loader"
                 class="flex items-center bg-blue-100 text-white px-4 py-2 rounded hover:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
+
                 <!-- Plot Icon (Heroicon: Chart Bar) -->
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                     stroke="currentColor" class="h-5 w-5 mr-1">
@@ -52,6 +53,17 @@
                 </svg>
 
                 Plot
+
+                <!-- Overlay with Animated Spinner -->
+                <div id="sql-plot-results-loader" class="loading-indicator inset-0 opacity-35 pl-2">
+                    <svg class="animate-spin h-5 w-5 text-white opacity-100" xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 100 100" fill="none">
+                        <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="10" stroke-linecap="round"
+                            class="opacity-20"></circle>
+                        <path d="M50,5 A45,45 0 0,1 95,50" stroke="currentColor" stroke-width="10"
+                            stroke-linecap="round" class="opacity-75"></path>
+                    </svg>
+                </div>
             </button>
 
             <!-- Save Button -->
@@ -69,14 +81,15 @@
 
     </form>
 
+    <!-- Sql query Results Section -->
     <div id="execute-query-results" class="mt-6">
     </div>
 
     <!-- Plot Results Section -->
     <div id="sql-plot-results" class="mt-8">
-        <!-- Plot will be loaded here via htmx -->
     </div>
 
+
     <!-- Saved Queries Section -->
     <div class="mt-8">
         <h2 class="text-xl font-semibold mb-4">Saved Queries</h2>
@@ -118,7 +131,7 @@
                                 <a href="#" hx-get="{{ url_for('plot_query', query_id=saved.id) }}"
                                     hx-target="#sql-plot-results"
                                     class="flex items-center text-green-500 hover:text-green-700 cursor-pointer"
-                                    hx-trigger="click">
+                                    hx-trigger="click" hx-indicator="#sql-plot-results-loader-{{ saved.id }}">
                                     <!-- Plot Icon (Heroicon: Chart Bar) -->
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                         stroke-width="1.5" stroke="currentColor" class="h-5 w-5 mr-1">
@@ -126,6 +139,18 @@
                                             d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
                                     </svg>
                                     Plot
+
+                                    <!-- Overlay with Animated Spinner -->
+                                    <div id="sql-plot-results-loader-{{ saved.id }}"
+                                        class="loading-indicator inset-0 opacity-35 pl-2">
+                                        <svg class="animate-spin h-5 w-5 text-white opacity-100"
+                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+                                            <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="10"
+                                                stroke-linecap="round" class="opacity-20"></circle>
+                                            <path d="M50,5 A45,45 0 0,1 95,50" stroke="currentColor" stroke-width="10"
+                                                stroke-linecap="round" class="opacity-75"></path>
+                                        </svg>
+                                    </div>
                                 </a>
 
                                 <!-- Delete Action -->