function/templates/dashboard/settings/database_schema.html

{% extends 'dashboard.html' %}

{% block page %}
<div class="p-6 max-w-7xl mx-auto">
    <!-- Settings Navigation -->
    <div class="mb-6 border-b border-gray-200 dark:border-gray-700">
        <nav class="-mb-px flex space-x-8">
            <a hx-get="{{ url_for('settings.api_keys') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                API Keys
            </a>
            <a hx-get="{{ url_for('settings.export') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                Export Data
            </a>
            <a hx-get="{{ url_for('settings.database_schema') }}" hx-target="#container" hx-swap="innerHTML"
                hx-push-url="true"
                class="border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 py-4 px-1 text-sm font-medium cursor-pointer">
                Database Schema
            </a>
        </nav>
    </div>

    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Database Schema</h1>
        <p class="text-gray-600 dark:text-gray-400">Explore your database structure and run queries on your data.</p>
    </div>

    <!-- ERD Diagram -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Entity Relationship Diagram</h2>

        <div id="mermaid-diagram"
            class="bg-white dark:bg-gray-900 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
            <pre class="mermaid">
erDiagram
{% for table in schema_info %}
    {{ table.table_name|upper }} {
{% for col in table.columns %}        {{ col.data_type|replace(' ', '_') }} {{ col.column_name }}{% if col.column_name in table.primary_keys %} PK{% endif %}
{% endfor %}    }
{% endfor %}
{% for table in schema_info %}
{% for fk in table.foreign_keys %}
    {{ table.table_name|upper }} }|--|| {{ fk.foreign_table_name|upper }} : "{{ fk.column_name }}"
{% endfor %}
{% endfor %}
            </pre>
        </div>
    </div>

    <!-- SQL Query Explorer -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">SQL Query Explorer</h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
            Run SELECT queries on your data. Queries are automatically scoped to your user account for security.
        </p>

        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">SQL Query</label>
            <div id="sql-editor" class="border border-gray-300 dark:border-gray-600 rounded" style="height: 150px;">
            </div>
        </div>

        <div class="flex items-center justify-between mb-4">
            <button id="run-query-btn"
                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Run Query
            </button>
            <button id="clear-query-btn"
                class="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                Clear
            </button>
        </div>

        <div id="query-message" class="hidden mb-4 p-3 rounded-lg"></div>

        <div id="query-results" class="hidden">
            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Results</h3>
            <div class="overflow-x-auto border border-gray-200 dark:border-gray-700 rounded-lg max-h-96">
                <table id="results-table" class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700 sticky top-0">
                        <tr id="results-header"></tr>
                    </thead>
                    <tbody id="results-body"
                        class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Tables Overview -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Tables Overview</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for table in schema_info %}
            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
                <h3 class="font-medium text-gray-900 dark:text-white mb-2 flex items-center">
                    <svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
                    </svg>
                    {{ table.table_name }}
                </h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                    {{ table.columns|length }} column{{ 's' if table.columns|length != 1 else '' }}
                    {% if table.primary_keys %}
                    · {{ table.primary_keys|length }} PK
                    {% endif %}
                </p>

                <div class="space-y-1 max-h-40 overflow-y-auto">
                    {% for col in table.columns %}
                    <div class="text-xs flex items-start py-1">
                        {% if col.column_name in table.primary_keys %}
                        <svg class="w-3 h-3 mr-1.5 mt-0.5 text-yellow-500 flex-shrink-0" fill="currentColor"
                            viewBox="0 0 20 20">
                            <path
                                d="M10 2a3 3 0 00-3 3v1H5a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2V8a2 2 0 00-2-2h-2V5a3 3 0 00-3-3zm3 5V5a1 1 0 10-2 0v2H9V5a1 1 0 00-2 0v2H5v7h10V7h-2z" />
                        </svg>
                        {% else %}
                        <span class="w-3 h-3 mr-1.5 flex-shrink-0"></span>
                        {% endif %}
                        <div class="flex-1 min-w-0">
                            <span class="font-medium text-gray-700 dark:text-gray-300">{{ col.column_name }}</span>
                            <span class="text-gray-500 dark:text-gray-500 ml-1">{{ col.data_type }}</span>
                            {% if col.is_nullable == 'NO' %}
                            <span class="text-red-500 text-[10px] ml-1">*</span>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>

                {% if table.foreign_keys %}
                <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1.5">References:</p>
                    <div class="space-y-1">
                        {% for fk in table.foreign_keys %}
                        <div class="text-xs text-blue-600 dark:text-blue-400 flex items-center">
                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 7l5 5m0 0l-5 5m5-5H6" />
                            </svg>
                            {{ fk.foreign_table_name }} ({{ fk.column_name }})
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Ace Editor -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.0/ace.js"></script>

<!-- SQL Query Interface Script -->
<script>
    // Initialize Ace Editor for SQL
    const sqlEditor = ace.edit("sql-editor");
    sqlEditor.setTheme("ace/theme/monokai");
    sqlEditor.session.setMode("ace/mode/sql");
    sqlEditor.setOptions({
        fontSize: "14px",
        showPrintMargin: false,
        showGutter: true,
        highlightActiveLine: true,
        enableLiveAutocompletion: true
    });

    // Set default query
    sqlEditor.setValue(`SELECT * FROM http_functions`, -1);

    // Run query button
    document.getElementById('run-query-btn').addEventListener('click', async () => {
        const query = sqlEditor.getValue().trim();
        const messageDiv = document.getElementById('query-message');
        const resultsDiv = document.getElementById('query-results');
        const runBtn = document.getElementById('run-query-btn');

        if (!query) {
            showMessage('Please enter a SQL query', 'error');
            return;
        }

        // Disable button and show loading
        runBtn.disabled = true;
        runBtn.innerHTML = '<svg class="w-4 h-4 mr-2 animate-spin" fill="none" stroke="currentColor" 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>Running...';

        try {
            const response = await fetch('{{ url_for("settings.execute_query") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ query })
            });

            const data = await response.json();

            if (!response.ok) {
                showMessage(data.error || 'Query failed', 'error');
                resultsDiv.classList.add('hidden');
            } else {
                showMessage(data.message, 'success');
                displayResults(data);
            }
        } catch (error) {
            showMessage('Error executing query: ' + error.message, 'error');
            resultsDiv.classList.add('hidden');
        } finally {
            // Re-enable button
            runBtn.disabled = false;
            runBtn.innerHTML = '<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>Run Query';
        }
    });

    // Clear button
    document.getElementById('clear-query-btn').addEventListener('click', () => {
        sqlEditor.setValue('', -1);
        document.getElementById('query-message').classList.add('hidden');
        document.getElementById('query-results').classList.add('hidden');
    });

    function showMessage(message, type) {
        const messageDiv = document.getElementById('query-message');
        messageDiv.classList.remove('hidden', 'bg-green-50', 'bg-red-50', 'text-green-700', 'text-red-700',
            'dark:bg-green-900/20', 'dark:bg-red-900/20', 'dark:text-green-300', 'dark:text-red-300');

        if (type === 'success') {
            messageDiv.classList.add('bg-green-50', 'text-green-700', 'dark:bg-green-900/20', 'dark:text-green-300');
        } else {
            messageDiv.classList.add('bg-red-50', 'text-red-700', 'dark:bg-red-900/20', 'dark:text-red-300');
        }

        messageDiv.textContent = message;
    }

    function displayResults(data) {
        const resultsDiv = document.getElementById('query-results');
        const headerRow = document.getElementById('results-header');
        const tbody = document.getElementById('results-body');

        // Clear previous results
        headerRow.innerHTML = '';
        tbody.innerHTML = '';

        if (data.row_count === 0) {
            resultsDiv.classList.add('hidden');
            return;
        }

        // Add column headers
        data.columns.forEach(col => {
            const th = document.createElement('th');
            th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider';
            th.textContent = col;
            headerRow.appendChild(th);
        });

        // Add rows
        data.rows.forEach(row => {
            const tr = document.createElement('tr');
            row.forEach(cell => {
                const td = document.createElement('td');
                td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300';
                td.textContent = cell === null ? 'NULL' : cell;
                tr.appendChild(td);
            });
            tbody.appendChild(tr);
        });

        resultsDiv.classList.remove('hidden');
    }
</script>

<!-- Mermaid Diagram Script -->
<script type="module">
    // Dynamically import mermaid
    const mermaid = await import('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs');

    // Initialize mermaid with theme
    const isDark = document.documentElement.classList.contains('dark');
    mermaid.default.initialize({
        startOnLoad: false,
        theme: isDark ? 'dark' : 'default',
        er: {
            fontSize: 14,
            useMaxWidth: true
        }
    });

    // Render the diagram
    try {
        await mermaid.default.run({
            querySelector: '.mermaid'
        });
        console.log('Mermaid diagram rendered successfully');
    } catch (error) {
        console.error('Mermaid rendering error:', error);
        const diagramDiv = document.getElementById('mermaid-diagram');
        if (diagramDiv) {
            diagramDiv.innerHTML = `
                <div class="text-amber-600 dark:text-amber-400 p-6 text-center">
                    <svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                    <p class="font-medium mb-2">Unable to render ERD</p>
                    <p class="text-sm">View the tables overview below for schema information.</p>
                </div>
            `;
        }
    }
</script>

{% endblock %}