224 lines
15 KiB
HTML
224 lines
15 KiB
HTML
<div id="sql-query" class="space-y-8">
|
|
{% if error %}
|
|
<div class="bg-red-50 border-l-4 border-red-400 p-4 rounded shadow-sm animate-fadeIn">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm text-red-700">
|
|
<strong class="font-bold">Error:</strong> {{ error }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="POST" hx-post="{{ url_for('sql_explorer.sql_query') }}" hx-target="#sql-query" class="space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Title Input -->
|
|
<div class="space-y-1">
|
|
<label for="query-title" class="block text-sm font-semibold text-gray-700">Query Title</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
</div>
|
|
<input type="text" id="query-title" name="title"
|
|
class="block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
|
placeholder="Untitled Query" {% if title %} value="{{ title }}" {% endif %}>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Magic SQL Generator -->
|
|
<div class="space-y-1">
|
|
<label for="natural-query" class="block text-sm font-semibold text-gray-700">AI SQL Generator</label>
|
|
<div class="flex items-center gap-2">
|
|
<div class="relative flex-grow">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="h-4 w-4 text-purple-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<input type="text" id="natural-query" name="natural_query"
|
|
class="block w-full pl-9 pr-3 py-2.5 border border-purple-200 rounded-xl shadow-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm bg-purple-50/30 placeholder-purple-300"
|
|
placeholder="e.g. 'Workouts per person last month'">
|
|
</div>
|
|
<button type="button" hx-post="{{ url_for('sql_explorer.generate_sql') }}"
|
|
hx-include="[name='natural_query']" hx-indicator="#sql-spinner" hx-swap="none"
|
|
_="on htmx:afterRequest set #query.value to detail.xhr.responseText then send input to #query"
|
|
class="btn-premium whitespace-nowrap inline-flex items-center justify-center px-4 py-2.5 border border-transparent text-sm font-medium rounded-xl text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 shadow-sm transition-all">
|
|
Generate
|
|
<span id="sql-spinner" class="htmx-indicator ml-2">
|
|
<svg class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
|
|
stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SQL Editor -->
|
|
<div class="space-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<label for="query" class="block text-sm font-semibold text-gray-700">SQL Statement</label>
|
|
<span class="text-xs text-gray-400 font-mono">PostgreSQL Dialect</span>
|
|
</div>
|
|
<div class="sql-editor-container border border-gray-800 shadow-lg">
|
|
<textarea name="query" spellcheck="false" id="query"
|
|
class="sql-editor-textarea h-64 p-4 text-sm resize-none"
|
|
placeholder="SELECT * FROM workouts LIMIT 10;" required
|
|
_="on load set my.style.height to Math.max(256, my.scrollHeight) + 'px'
|
|
on input set my.style.height to 0 then set my.style.height to Math.max(256, my.scrollHeight) + 'px'">{{ query }}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex flex-wrap items-center gap-3 pt-2">
|
|
<!-- Execute Button -->
|
|
<button hx-post="{{ url_for('sql_explorer.execute_sql_query') }}" hx-target="#execute-query-results"
|
|
hx-include="[name='query']" hx-trigger="click" hx-swap="innerHTML"
|
|
class="btn-premium inline-flex items-center px-6 py-2.5 border border-transparent text-sm font-semibold rounded-xl text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
Execute Query
|
|
</button>
|
|
|
|
<!-- Plot Button -->
|
|
<button hx-post="{{ url_for('sql_explorer.plot_unsaved_query') }}" hx-target="#sql-plot-results"
|
|
hx-trigger="click" hx-include="[name='query'],[name='title']" hx-indicator="#sql-plot-results-loader"
|
|
class="btn-premium inline-flex items-center px-6 py-2.5 border border-gray-300 text-sm font-semibold rounded-xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
Visualize Plot
|
|
<span id="sql-plot-results-loader" class="htmx-indicator ml-2">
|
|
<svg class="animate-spin h-3 w-3 text-blue-500" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
|
|
</circle>
|
|
<path class="opacity-75" fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<!-- Save Button -->
|
|
<button type="submit" name="action" value="save"
|
|
class="btn-premium inline-flex items-center px-6 py-2.5 border border-transparent text-sm font-semibold rounded-xl text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 shadow-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
|
|
</svg>
|
|
Save Query
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Query Results -->
|
|
<div id="execute-query-results" class="transition-all duration-300"></div>
|
|
|
|
<!-- Plot Results -->
|
|
<div id="sql-plot-results" class="transition-all duration-300"></div>
|
|
|
|
<!-- Saved Queries Section -->
|
|
<div class="pt-10 border-t border-gray-100">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-xl font-bold text-gray-800">Saved Queries Library</h2>
|
|
<span class="text-xs font-medium text-gray-400 uppercase tracking-widest">{{ saved_queries|length }} Queries
|
|
Total</span>
|
|
</div>
|
|
|
|
{% if saved_queries %}
|
|
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
|
|
<table class="min-w-full table-zebra">
|
|
<thead class="bg-gray-50/50">
|
|
<tr>
|
|
<th
|
|
class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider border-b">
|
|
Query Title</th>
|
|
<th
|
|
class="px-6 py-4 text-right text-xs font-bold text-gray-500 uppercase tracking-wider border-b">
|
|
Quick Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
{% for saved in saved_queries %}
|
|
<tr class="group transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<button hx-get="{{ url_for('sql_explorer.load_sql_query', query_id=saved.id) }}"
|
|
hx-target="#sql-query"
|
|
class="flex items-center text-sm font-medium text-gray-900 hover:text-blue-600 group-hover:translate-x-1 transition-all">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="h-4 w-4 mr-2.5 text-gray-400 group-hover:text-blue-500" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
{{ saved.title or 'Untitled Query' }}
|
|
</button>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right">
|
|
<div class="flex items-center justify-end gap-4">
|
|
<!-- Plot Action -->
|
|
<button hx-get="{{ url_for('sql_explorer.plot_query', query_id=saved.id) }}"
|
|
hx-target="#sql-plot-results" hx-indicator="#sql-plot-results-loader-{{ saved.id }}"
|
|
class="text-green-600 hover:text-green-800 p-1 rounded-lg hover:bg-green-50 transition-colors tooltip"
|
|
title="Visualize Plot">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Delete Action -->
|
|
<button hx-delete="{{ url_for('sql_explorer.delete_sql_query', query_id=saved.id) }}"
|
|
hx-target="#sql-query" hx-confirm="Delete query '{{ saved.title }}'?"
|
|
class="text-red-400 hover:text-red-600 p-1 rounded-lg hover:bg-red-50 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5-4h4a2 2 0 012 2v1H7V5a2 2 0 012-2z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12 bg-gray-50 rounded-2xl border-2 border-dashed border-gray-200">
|
|
<svg class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
|
</svg>
|
|
<h3 class="mt-2 text-sm font-medium text-gray-900">No saved queries</h3>
|
|
<p class="mt-1 text-sm text-gray-500">Get started by creating and saving your first SQL query.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div> |