dbviewer 0.3.6 → 0.3.16

data/app/views/dbviewer/tables/show.html.erb

@@ -2,15 +2,136 @@
   Table: <%= @table_name %>
 <% end %>
 
+<% content_for :head do %>
+  <!-- Mermaid.js library for ERD diagrams -->
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+  <!-- SVG-Pan-Zoom for interactive diagram navigation -->
+  <script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
+  <style>
+    /* Column sorting styles */
+    .sortable-column {
+      cursor: pointer;
+      position: relative;
+      transition: background-color 0.2s ease;
+      background-color: inherit;
+    }
+    
+    .sortable-column:hover {
+      background-color: #f5f5f5;
+    }
+    
+    .sortable-column.sorted {
+      background-color: #f0f0f0;
+    }
+    
+    .sortable-column .column-sort-link {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 100%;
+      padding: 4px 0;
+    }
+    
+    .sortable-column .column-name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .sortable-column .sort-icon-container {
+      flex: 0 0 auto;
+      width: 20px;
+      text-align: center;
+      margin-left: 4px;
+    }
+    
+    .sortable-column .sort-icon {
+      font-size: 0.8em;
+      opacity: 0.7;
+      transition: opacity 0.2s ease, color 0.2s ease;
+    }
+    
+    .sortable-column:hover .sort-icon.invisible {
+      visibility: visible !important;
+      opacity: 0.3;
+    }
+
+    /* Fix scrolling issues with sticky header */
+    .dbviewer-table-header {
+      position: sticky !important;
+      top: 0;
+      z-index: 10;
+      background-color: var(--bs-table-striped-bg, #f2f2f2) !important;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+    }
+    
+    [data-bs-theme="dark"] .dbviewer-table-header {
+      background-color: var(--bs-dark-bg-subtle, #343a40) !important;
+    }
+    
+    /* Improve mobile display for sort headers */
+    @media (max-width: 767.98px) {
+      .sortable-column .column-sort-link {
+        flex-direction: row;
+        align-items: center;
+      }
+      
+      .sortable-column .sort-icon-container {
+        width: 16px;
+      }
+    }
+    
+    /* Dark mode compatibility */
+    [data-bs-theme="dark"] .sortable-column:hover {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+    
+    [data-bs-theme="dark"] .sortable-column.sorted {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  </style>
+  
+  <script>
+    // Initialize mermaid when document is ready
+    document.addEventListener('DOMContentLoaded', function() {
+      // Configure Mermaid for better ERD diagrams
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'default',
+        securityLevel: 'loose',
+        er: {
+          diagramPadding: 20,
+          layoutDirection: 'TB',
+          minEntityWidth: 100,
+          minEntityHeight: 75,
+          entityPadding: 15,
+          stroke: 'gray',
+          fill: document.documentElement.getAttribute('data-bs-theme') === 'dark' ? '#2D3748' : '#f5f5f5',
+          fontSize: 14,
+          useMaxWidth: true,
+          wrapiength: 30
+        }
+      });
+      console.log('Mermaid initialized with theme:', document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'default');
+    });
+  </script>
+<% end %>
+
 <% content_for :sidebar_active do %>active<% end %>
 
 <% content_for :sidebar do %>
   <%= render 'dbviewer/shared/sidebar' %>
-<% end %>
-
+<% end %>  
 <div class="d-flex justify-content-between align-items-center mb-4">
-  <h1>Table: <%= @table_name %></h1>
+  <div>
+    <h1>Table: <%= @table_name %></h1>
+  </div>
   <div class="d-flex gap-2">
+    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#miniErdModal">
+      <i class="bi bi-diagram-3 me-1"></i> View Relationships
+    </button>
     <% if Dbviewer.configuration.enable_data_export %>
         <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#csvExportModal">
           <i class="bi bi-file-earmark-spreadsheet me-1"></i> Export CSV
@@ -63,19 +184,72 @@
   </div>
 <% end %>
 
+<!-- Mini ERD Modal -->
+<div class="modal fade" id="miniErdModal" tabindex="-1" aria-labelledby="miniErdModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-xl modal-dialog-centered">
+    <div class="modal-content" id="miniErdModalContent">
+      <!-- Content will be loaded dynamically -->
+      <div class="modal-body text-center p-0">
+        <div id="mini-erd-container" class="w-100 d-flex justify-content-center align-items-center" style="min-height: 450px; height: 100%;">
+          <div class="text-center">
+            <div class="spinner-border text-primary" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+            <p class="mt-2">Loading relationships diagram...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- Records Section -->
 <div class="dbviewer-card card mb-4">
   <div class="card-header d-flex justify-content-between align-items-center">
-    <h5 class="mb-0"><i class="bi bi-table me-2"></i>Records</h5>
-    <div class="d-flex align-items-center">
-      <div class="me-3">
-        <label for="per-page-select" class="me-2">Per page:</label>
-        <select id="per-page-select" class="form-select form-select-sm" onchange="window.location.href='<%= table_path(@table_name) %>?per_page=' + this.value + '&page=1&order_by=<%= @order_by %>&order_direction=<%= @order_direction %><%= @column_filters.reject { |_, v| v.blank? }.any? ? "&" + @column_filters.reject { |_, v| v.blank? }.map { |k, v| "column_filters[#{k}]=#{CGI.escape(v.to_s)}" }.join("&") : "" %>'">
-          <% Dbviewer::TablesController.per_page_options.each do |option| %>
-            <option value="<%= option %>" <%= 'selected' if @per_page == option %>><%= option %></option>
-          <% end %>
-        </select>
-      </div>
+    <h5 class="mb-0">
+      <% 
+        # Build the URL query parameters including creation filters
+        url_params = "per_page=' + this.value + '&page=1&order_by=#{@order_by}&order_direction=#{@order_direction}"
+        
+        # Add column filters
+        if @column_filters.reject { |_, v| v.blank? }.any?
+          url_params += "&" + @column_filters.reject { |_, v| v.blank? }.map { |k, v| "column_filters[#{k}]=#{CGI.escape(v.to_s)}" }.join("&")
+        end
+        
+        # Add creation filters
+        url_params += "&creation_filter_start=#{@creation_filter_start}" if @creation_filter_start.present?
+        url_params += "&creation_filter_end=#{@creation_filter_end}" if @creation_filter_end.present?
+      %>
+      <select id="per-page-select" class="form-select form-select-sm" onchange="window.location.href='<%= table_path(@table_name) %>?<%= url_params %>'">
+        <% Dbviewer::TablesController.per_page_options.each do |option| %>
+          <option value="<%= option %>" <%= 'selected' if @per_page == option %>><%= option %></option>
+        <% end %>
+      </select>
+    </h5>
+    <div class="d-flex align-items-center table-actions">
+      <% if @order_by.present? %>
+        <span class="badge bg-primary me-2" title="Sort order">
+          <i class="bi bi-sort-<%= @order_direction == "ASC" ? "up" : "down" %> me-1"></i>
+          <%= @order_by %> (<%= @order_direction == "ASC" ? "ascending" : "descending" %>)
+        </span>
+      <% end %>
+      
+      <% 
+        clear_sort_params = {
+          page: 1, 
+          per_page: @per_page, 
+          column_filters: @column_filters
+        }
+        
+        # Add creation filters if they exist
+        clear_sort_params[:creation_filter_start] = @creation_filter_start if @creation_filter_start.present?
+        clear_sort_params[:creation_filter_end] = @creation_filter_end if @creation_filter_end.present?
+      %>
+        <%= link_to "×", table_path(@table_name, clear_sort_params), 
+            class: "text-light ms-2", 
+            style: "text-decoration: none;",
+            title: "Clear sorting" %>
+      </span>
       <span class="badge bg-secondary">Total: <%= @total_count %> records</span>
       <% active_filters = @column_filters.reject { |_, v| v.blank? }.size %>
       <% if active_filters > 0 %>
@@ -95,48 +269,173 @@
           <table class="table table-bordered table-striped rounded-none">
               <thead class="dbviewer-table-header">
                 <tr>
-                  <% @records.columns.each do |column_name| %>
-                    <th class="pe-4">
-                      <%= column_name %>
-                    </th>
+                  <% if @records && @records.columns %>
+                    <% @records.columns.each do |column_name| %>
+                      <% is_sorted = @order_by == column_name %>
+                      <th class="px-3 py-2 sortable-column <%= 'sorted' if is_sorted %>">
+                        <%= sortable_column_header(column_name, @order_by, @order_direction, @table_name, @current_page, @per_page, @column_filters) %>
+                      </th>
+                    <% end %>
+                  <% else %>
+                    <th>No columns available</th>
                   <% end %>
                 </tr>
                 <tr class="column-filters">
-                  <% @records.columns.each do |column_name| %>
-                    <th class="p-0">
-                      <%= form.text_field "column_filters[#{column_name}]", 
-                          value: @column_filters[column_name], 
-                          placeholder: "",
-                          class: "form-control form-control-sm column-filter rounded-0",
-                          data: { column: column_name } %>
-                    </th>
+                  <% if @records && @records.columns %>
+                    <% @records.columns.each do |column_name| %>
+                      <th class="p-0">
+                        <% 
+                          # Find column info to detect the type
+                          column_info = @columns.find { |c| c[:name].to_s == column_name.to_s } if @columns
+                          column_type = column_info ? column_info[:type].to_s.downcase : nil
+                        %>
+
+                        <div class="filter-input-group">
+                          <% 
+                            # Define the default operator and available operators based on column type
+                            default_operator = if column_type && column_type =~ /char|text|string|uuid|enum/i
+                              "contains"
+                            else
+                              "eq"
+                            end
+                            
+                            # Get previously selected operator or default
+                            selected_operator = @column_filters["#{column_name}_operator"]
+                            selected_operator = default_operator if selected_operator.nil? || selected_operator == "default"
+                            
+                            # Define operator options based on column type
+                            if column_type && (column_type =~ /datetime/ || column_type =~ /^date$/ || column_type =~ /^time$/)
+                              # Date/Time operators
+                              operator_options = [
+                                ["=", "eq"],
+                                ["≠", "neq"],
+                                ["<", "lt"],
+                                [">", "gt"],
+                                ["≤", "lte"],
+                                ["≥", "gte"]
+                              ]
+                            elsif column_type && column_type =~ /int|float|decimal|double|number|numeric|real|money|bigint|smallint|tinyint|mediumint|bit/i
+                              # Numeric operators
+                              operator_options = [
+                                ["=", "eq"],
+                                ["≠", "neq"],
+                                ["<", "lt"],
+                                [">", "gt"],
+                                ["≤", "lte"],
+                                ["≥", "gte"]
+                              ]
+                            else
+                              # Text operators
+                              operator_options = [
+                                ["contains", "contains"],
+                                ["not contains", "not_contains"],
+                                ["=", "eq"],
+                                ["≠", "neq"],
+                                ["starts with", "starts_with"],
+                                ["ends with", "ends_with"]
+                              ]
+                            end
+                          %>
+                          
+                          <%= form.select "column_filters[#{column_name}_operator]", 
+                              options_for_select(operator_options, selected_operator),
+                              { include_blank: false },
+                              { class: "form-select form-select-sm operator-select" } %>
+                          
+                          <% if column_type && column_type =~ /datetime/ %>
+                            <%= form.datetime_local_field "column_filters[#{column_name}]", 
+                                value: @column_filters[column_name], 
+                                class: "form-control form-control-sm column-filter rounded-0",
+                                data: { column: column_name } %>
+                          <% elsif column_type && column_type =~ /^date$/ %>
+                            <%= form.date_field "column_filters[#{column_name}]", 
+                                value: @column_filters[column_name], 
+                                class: "form-control form-control-sm column-filter rounded-0",
+                                data: { column: column_name } %>
+                          <% elsif column_type && column_type =~ /^time$/ %>
+                            <%= form.time_field "column_filters[#{column_name}]", 
+                                value: @column_filters[column_name], 
+                                class: "form-control form-control-sm column-filter rounded-0",
+                                data: { column: column_name } %>
+                          <% else %>
+                            <%= form.text_field "column_filters[#{column_name}]", 
+                                value: @column_filters[column_name], 
+                                placeholder: "",
+                                class: "form-control form-control-sm column-filter rounded-0",
+                                data: { column: column_name } %>
+                          <% end %>
+                        </div>
+                      </th>
+                    <% end %>
+                  <% else %>
+                    <th></th>
                   <% end %>
                 </tr>
               </thead>
               <tbody>
-                <% if @records.empty? %>
+                <% if @records.nil? || @records.rows.nil? || @records.empty? %>
                   <tr>
                     <td colspan="100%" class="text-center">No records found or table is empty.</td>
                   </tr>
                 <% end %>
-                <% @records.rows.each do |row| %>
-                  <tr>
-                      <% row.each do |cell| %>
-                        <% cell_value = format_cell_value(cell) %>
-                        <td title="<%= cell_value %>"><%= cell_value %></td>
-                    <% end %>
-                  </tr>
+                <% if @records && @records.rows %>
+                  <% @records.rows.each do |row| %>
+                    <tr>
+                        <% row.each_with_index do |cell, cell_index| %>
+                          <% 
+                            column_name = @records.columns[cell_index]
+                            cell_value = format_cell_value(cell)
+                            
+                            # Check if this column is a foreign key
+                            foreign_key = @metadata && @metadata[:foreign_keys] ? 
+                                          @metadata[:foreign_keys].find { |fk| fk[:column] == column_name } : 
+                                          nil
+                          %>
+                          <% if foreign_key && !cell.nil? %>
+                            <% 
+                              # Build params for foreign key links with creation filters
+                              fk_params = { column_filters: { foreign_key[:primary_key] => cell } }
+                              
+                              # Add creation filters if they exist
+                              fk_params[:creation_filter_start] = @creation_filter_start if @creation_filter_start.present?
+                              fk_params[:creation_filter_end] = @creation_filter_end if @creation_filter_end.present?
+                            %>
+                            <td title="<%= cell_value %> (Click to view referenced record)">
+                              <%= link_to cell_value, 
+                                  table_path(foreign_key[:to_table], fk_params), 
+                                  class: "text-decoration-none foreign-key-link" %>
+                              <i class="bi bi-link-45deg text-muted small"></i>
+                            </td>
+                          <% else %>
+                            <td title="<%= cell_value %>"><%= cell_value %></td>
+                          <% end %>
+                      <% end %>
+                    </tr>
+                  <% end %>
                 <% end %>
             </tbody>
         </table>
         <% end %> <!-- End of form_with -->
       </div>
       
-      <% if @total_pages > 1 %>
+      <% if @total_pages && @total_pages > 1 %>
+        <%
+          # Prepare common URL params including creation filters
+          common_params = {
+            order_by: @order_by, 
+            order_direction: @order_direction, 
+            per_page: @per_page, 
+            column_filters: @column_filters
+          }
+          
+          # Add creation filters if they exist
+          common_params[:creation_filter_start] = @creation_filter_start if @creation_filter_start.present?
+          common_params[:creation_filter_end] = @creation_filter_end if @creation_filter_end.present?
+        %>
         <nav aria-label="Page navigation">
           <ul class="pagination justify-content-center">
             <li class="page-item <%= 'disabled' if @current_page == 1 %>">
-              <%= link_to '«', table_path(@table_name, page: [@current_page - 1, 1].max, order_by: @order_by, order_direction: @order_direction, per_page: @per_page, column_filters: @column_filters), class: 'page-link' %>
+              <%= link_to '«', table_path(@table_name, common_params.merge(page: [@current_page - 1, 1].max)), class: 'page-link' %>
             </li>
             
             <% start_page = [1, @current_page - 2].max %>
@@ -145,12 +444,12 @@
             
             <% (start_page..end_page).each do |page_num| %>
               <li class="page-item <%= 'active' if page_num == @current_page %>">
-                <%= link_to page_num, table_path(@table_name, page: page_num, order_by: @order_by, order_direction: @order_direction, per_page: @per_page, column_filters: @column_filters), class: 'page-link' %>
+                <%= link_to page_num, table_path(@table_name, common_params.merge(page: page_num)), class: 'page-link' %>
               </li>
             <% end %>
             
             <li class="page-item <%= 'disabled' if @current_page == @total_pages %>">
-              <%= link_to '»', table_path(@table_name, page: [@current_page + 1, @total_pages].min, order_by: @order_by, order_direction: @order_direction, per_page: @per_page, column_filters: @column_filters), class: 'page-link' %>
+              <%= link_to '»', table_path(@table_name, common_params.merge(page: [@current_page + 1, @total_pages].min)), class: 'page-link' %>
             </li>
           </ul>
         </nav>
@@ -168,10 +467,23 @@
         <div class="card-header d-flex justify-content-between align-items-center">
           <h5 class="mb-0"><i class="bi bi-graph-up me-2"></i>Record Creation Timeline</h5>
           <div>
+            <% 
+              # Build common params for time grouping links
+              time_params = {
+                page: @current_page, 
+                order_by: @order_by, 
+                order_direction: @order_direction, 
+                per_page: @per_page
+              }
+              
+              # Add creation filters if they exist
+              time_params[:creation_filter_start] = @creation_filter_start if @creation_filter_start.present?
+              time_params[:creation_filter_end] = @creation_filter_end if @creation_filter_end.present?
+            %>
             <div class="btn-group btn-group-sm" role="group" aria-label="Time grouping">
-              <%= link_to "Hourly", table_path(@table_name, time_group: "hourly", page: @current_page, order_by: @order_by, order_direction: @order_direction, per_page: @per_page), class: "btn btn-outline-primary #{@time_grouping == 'hourly' ? 'active' : ''}" %>
-              <%= link_to "Daily", table_path(@table_name, time_group: "daily", page: @current_page, order_by: @order_by, order_direction: @order_direction, per_page: @per_page), class: "btn btn-outline-primary #{@time_grouping == 'daily' ? 'active' : ''}" %>
-              <%= link_to "Weekly", table_path(@table_name, time_group: "weekly", page: @current_page, order_by: @order_by, order_direction: @order_direction, per_page: @per_page), class: "btn btn-outline-primary #{@time_grouping == 'weekly' ? 'active' : ''}" %>
+              <%= link_to "Hourly", table_path(@table_name, time_params.merge(time_group: "hourly")), class: "btn btn-outline-primary #{@time_grouping == 'hourly' ? 'active' : ''}" %>
+              <%= link_to "Daily", table_path(@table_name, time_params.merge(time_group: "daily")), class: "btn btn-outline-primary #{@time_grouping == 'daily' ? 'active' : ''}" %>
+              <%= link_to "Weekly", table_path(@table_name, time_params.merge(time_group: "weekly")), class: "btn btn-outline-primary #{@time_grouping == 'weekly' ? 'active' : ''}" %>
             </div>
           </div>
         </div>
@@ -220,6 +532,7 @@
   document.addEventListener('DOMContentLoaded', function() {
     // Column filter functionality
     const columnFilters = document.querySelectorAll('.column-filter');
+    const operatorSelects = document.querySelectorAll('.operator-select');
     const filterForm = document.getElementById('column-filters-form');
     
     // Add debounce function to reduce form submissions
@@ -242,7 +555,18 @@
     
     // Add event listeners to all filter inputs
     columnFilters.forEach(function(filter) {
+      // For text fields use input event
       filter.addEventListener('input', submitForm);
+      
+      // For date/time fields also use change event since they have calendar/time pickers
+      if (filter.type === 'date' || filter.type === 'datetime-local' || filter.type === 'time') {
+        filter.addEventListener('change', submitForm);
+      }
+    });
+    
+    // Add event listeners to operator selects
+    operatorSelects.forEach(function(select) {
+      select.addEventListener('change', submitForm);
     });
     
     // Add clear button functionality if there are any filters applied
@@ -262,11 +586,441 @@
         paginationContainer.insertAdjacentHTML('afterend', clearButton.outerHTML);
         
         document.getElementById('clear-filters').addEventListener('click', function() {
+          // Reset all input values
           columnFilters.forEach(filter => filter.value = '');
+          
+          // Reset operator selects to their default values
+          operatorSelects.forEach(select => {
+            // Find the first option of the select (usually the default)
+            if (select.options.length > 0) {
+              select.selectedIndex = 0;
+            }
+          });
+          
           submitForm();
         });
       }
     }
+    
+    // Load Mini ERD when modal is opened
+    const miniErdModal = document.getElementById('miniErdModal');
+    if (miniErdModal) {
+      let isModalLoaded = false;
+      let erdData = null;
+      
+      miniErdModal.addEventListener('show.bs.modal', function(event) {
+        const modalContent = document.getElementById('miniErdModalContent');
+        
+        // Set loading state
+        modalContent.innerHTML = `
+          <div class="modal-header">
+            <h5 class="modal-title">Relationships for <%= @table_name %></h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body p-0">
+            <div id="mini-erd-container" class="w-100 d-flex justify-content-center align-items-center" style="min-height: 450px; height: 100%;">
+              <div class="text-center">
+                <div class="spinner-border text-primary mb-3" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Loading relationships diagram...</p>
+                <small class="text-muted">This may take a moment for tables with many relationships</small>
+              </div>
+            </div>
+          </div>
+        `;
+        
+        // Always fetch fresh data when modal is opened
+        fetchErdData();
+      });
+      
+      // Function to fetch ERD data
+      function fetchErdData() {
+        // Add cache-busting timestamp to prevent browser caching
+        const cacheBuster = new Date().getTime();
+        const fetchUrl = `<%= dbviewer.mini_erd_table_path(@table_name, format: :json) %>?_=${cacheBuster}`;
+        
+        // Log loading message
+        console.log('Loading fresh Mini ERD data from:', fetchUrl);
+        
+        // Set a timeout to handle long-running requests
+        const timeoutPromise = new Promise((_, reject) => 
+          setTimeout(() => reject(new Error('Request timeout after 10 seconds')), 10000)
+        );
+        
+        // Race the fetch against a timeout
+        Promise.race([
+          fetch(fetchUrl),
+          timeoutPromise
+        ])
+          .then(response => {
+            if (!response.ok) {
+              throw new Error(`Server returned ${response.status} ${response.statusText}`);
+            }
+            return response.json(); // Parse as JSON instead of text
+          })
+          .then(data => {
+            isModalLoaded = true;
+            erdData = data; // Store the data
+            renderMiniErd(data);
+          })
+          .catch(error => {
+            console.error('Error loading mini ERD:', error);
+            showErdError(error);
+          });
+      }
+      
+      // Function to show error modal
+      function showErdError(error) {
+        const modalContent = document.getElementById('miniErdModalContent');
+        modalContent.innerHTML = `
+          <div class="modal-header">
+            <h5 class="modal-title">Relationships for <%= @table_name %></h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body p-0">
+            <div class="alert alert-danger m-3">
+              <i class="bi bi-exclamation-triangle-fill me-2"></i>
+              <strong>Error loading relationship diagram</strong>
+              <p class="mt-2 mb-0">${error.message}</p>
+            </div>
+            <div class="m-3">
+              <p><strong>Debug Information:</strong></p>
+              <code>GET <%= dbviewer.mini_erd_table_path(@table_name, format: :json) %></code> failed
+              <p class="mt-3">
+                <button class="btn btn-sm btn-primary" onclick="retryLoadingMiniERD()">
+                  <i class="bi bi-arrow-clockwise me-1"></i> Retry
+                </button>
+              </p>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          </div>
+        `;
+      }
+      
+      // Function to render the ERD with Mermaid
+      function renderMiniErd(data) {
+        const modalContent = document.getElementById('miniErdModalContent');
+        
+        // Set up the modal content with container for ERD
+        modalContent.innerHTML = `
+          <div class="modal-header">
+            <h5 class="modal-title">Relationships for <%= @table_name %></h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body p-0"> <!-- Removed padding for full width -->
+            <div id="mini-erd-container" class="w-100" style="min-height: 450px; height: 100%;"> <!-- Increased height -->
+              <div id="mini-erd-loading" class="d-flex justify-content-center align-items-center" style="height: 100%; min-height: 450px;">
+                <div class="text-center">
+                  <div class="spinner-border text-primary mb-3" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                  <p>Generating Relationships Diagram...</p>
+                </div>
+              </div>
+              <div id="mini-erd-error" class="alert alert-danger m-3 d-none">
+                <h5>Error generating diagram</h5>
+                <p id="mini-erd-error-message">There was an error rendering the relationships diagram.</p>
+                <pre id="mini-erd-error-details" class="bg-light p-2 small mt-2"></pre>
+              </div>
+            </div>
+            <div id="debug-data" class="d-none m-3 border-top pt-3">
+              <details>
+                <summary>Debug Information</summary>
+                <div class="alert alert-info small">
+                  <pre id="erd-data-debug" style="max-height: 100px; overflow: auto;">${JSON.stringify(data, null, 2)}</pre>
+                </div>
+              </details>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <a href="<%= dbviewer.entity_relationship_diagrams_path %>" class="btn btn-primary">View Full ERD</a>
+          </div>
+        `;
+        
+        try {
+          const tables = data.tables || [];
+          const relationships = data.relationships || [];
+          
+          // Validate data before proceeding
+          if (!Array.isArray(tables) || !Array.isArray(relationships)) {
+            showDiagramError('Invalid data format', 'The relationship data is not in the expected format.');
+            console.error('Invalid data format received:', data);
+            return;
+          }
+
+          console.log(`Found ${tables.length} tables and ${relationships.length} relationships`);
+          
+          // Create the ER diagram definition in Mermaid syntax
+          let mermaidDefinition = 'erDiagram\n';
+          
+          // Add tables to the diagram - ensure we have at least one table
+          if (tables.length === 0) {
+            mermaidDefinition += `  <%= @table_name.gsub(/[^\w]/, '_') %> {\n`;
+            mermaidDefinition += `    string id PK\n`;
+            mermaidDefinition += `  }\n`;
+          } else {
+            tables.forEach(function(table) {
+              const tableName = table.name;
+              
+              if (!tableName) {
+                console.warn('Table with no name found:', table);
+                return; // Skip this table
+              }
+              
+              // Clean table name for mermaid (remove special characters)
+              const cleanTableName = tableName.replace(/[^\w]/g, '_');
+              
+              // Make the current table stand out with a different visualization
+              if (tableName === '<%= @table_name %>') {
+                mermaidDefinition += `  ${cleanTableName} {\n`;
+                mermaidDefinition += `    string id PK\n`;
+                mermaidDefinition += `  }\n`;
+              } else {
+                mermaidDefinition += `  ${cleanTableName} {\n`;
+                mermaidDefinition += `    string id\n`;
+                mermaidDefinition += `  }\n`;
+              }
+            });
+          }
+          
+          // Add relationships
+          if (relationships && relationships.length > 0) {
+            relationships.forEach(function(rel) {
+              try {
+                // Ensure all required properties exist
+                if (!rel.from_table || !rel.to_table) {
+                  console.error('Missing table in relationship:', rel);
+                  return; // Skip this relationship
+                }
+                
+                // Clean up table names for mermaid (remove special characters)
+                const fromTable = rel.from_table.replace(/[^\w]/g, '_');
+                const toTable = rel.to_table.replace(/[^\w]/g, '_');
+                const relationLabel = rel.from_column || '';
+                
+                // Customize the display based on direction
+                mermaidDefinition += `  ${fromTable} }|--|| ${toTable} : "${relationLabel}"\n`;
+              } catch (err) {
+                console.error('Error processing relationship:', err, rel);
+              }
+            });
+          } else {
+            // Add a note if no relationships are found
+            mermaidDefinition += '  %% No relationships found for this table\n';
+          }
+          
+          // Log the generated mermaid definition for debugging
+          console.log('Mermaid Definition:', mermaidDefinition);
+          
+          // Hide the loading indicator first since render might take time
+          document.getElementById('mini-erd-loading').style.display = 'none';
+          
+          // Render the diagram with Mermaid
+          mermaid.render('mini-erd-graph', mermaidDefinition)
+            .then(function(result) {
+              console.log('Mermaid rendering successful');
+              
+              // Get the container
+              const container = document.getElementById('mini-erd-container');
+              
+              // Insert the rendered SVG
+              container.innerHTML = result.svg;
+              
+              // Style the SVG element for better fit
+              const svgElement = container.querySelector('svg');
+              if (svgElement) {
+                // Set size attributes for the SVG
+                svgElement.setAttribute('width', '100%');
+                svgElement.setAttribute('height', '100%');
+                svgElement.style.minHeight = '450px';
+                svgElement.style.width = '100%';
+                svgElement.style.height = '100%';
+                
+                // Set viewBox if not present to enable proper scaling
+                if (!svgElement.getAttribute('viewBox')) {
+                  const width = svgElement.getAttribute('width') || '100%';
+                  const height = svgElement.getAttribute('height') || '100%';
+                  svgElement.setAttribute('viewBox', `0 0 ${parseInt(width) || 1000} ${parseInt(height) || 800}`);
+                }
+              }
+              
+              // Apply SVG-Pan-Zoom to make the diagram interactive
+              try {
+                const svgElement = container.querySelector('svg');
+                if (svgElement && typeof svgPanZoom !== 'undefined') {
+                  // Make SVG take the full container width
+                  svgElement.setAttribute('width', '100%');
+                  svgElement.setAttribute('height', '100%');
+                  
+                  // Initialize SVG Pan-Zoom
+                  const panZoomInstance = svgPanZoom(svgElement, {
+                    zoomEnabled: true,
+                    controlIconsEnabled: true,
+                    fit: true,
+                    center: true,
+                    minZoom: 0.5,
+                    maxZoom: 2.5
+                  });
+                  
+                  // Store the panZoom instance for resize handling
+                  container.panZoomInstance = panZoomInstance;
+                  
+                  // Setup resize observer to maintain full size
+                  const resizeObserver = new ResizeObserver(() => {
+                    if (container.panZoomInstance) {
+                      // Reset zoom and center when container is resized
+                      container.panZoomInstance.resize();
+                      container.panZoomInstance.fit();
+                      container.panZoomInstance.center();
+                    }
+                  });
+                  
+                  // Observe the container for size changes
+                  resizeObserver.observe(container);
+                  
+                  // Also handle manual resize on modal resize
+                  miniErdModal.addEventListener('resize.bs.modal', function() {
+                    if (container.panZoomInstance) {
+                      setTimeout(() => {
+                        container.panZoomInstance.resize();
+                        container.panZoomInstance.fit();
+                        container.panZoomInstance.center();
+                      }, 100);
+                    }
+                  });
+                }
+              } catch (e) {
+                console.warn('Failed to initialize svg-pan-zoom:', e);
+                // Not critical, continue without pan-zoom
+              }
+              
+              // Add highlighting for the current table
+              setTimeout(function() {
+                try {
+                  const cleanTableName = '<%= @table_name %>'.replace(/[^\w]/g, '_');
+                  const currentTableElement = container.querySelector(`[id*="${cleanTableName}"]`);
+                  if (currentTableElement) {
+                    const rect = currentTableElement.querySelector('rect');
+                    if (rect) {
+                      // Highlight the current table
+                      rect.setAttribute('fill', document.documentElement.getAttribute('data-bs-theme') === 'dark' ? '#2c3034' : '#e2f0ff');
+                      rect.setAttribute('stroke', document.documentElement.getAttribute('data-bs-theme') === 'dark' ? '#6ea8fe' : '#0d6efd');
+                      rect.setAttribute('stroke-width', '2');
+                    }
+                  }
+                } catch (e) {
+                  console.error('Error highlighting current table:', e);
+                }
+              }, 100);
+            })
+            .catch(function(error) {
+              console.error('Error rendering mini ERD:', error);
+              showDiagramError(
+                'Error rendering diagram', 
+                'There was an error rendering the relationships diagram.',
+                error.message || 'Unknown error'
+              );
+              
+              // Show debug data when there's an error
+              document.getElementById('debug-data').classList.remove('d-none');
+            });
+        } catch (error) {
+          console.error('Exception in renderMiniErd function:', error);
+          showDiagramError(
+            'Exception generating diagram', 
+            'There was an exception processing the relationships diagram.',
+            error.message || 'Unknown error'
+          );
+          
+          // Show debug data when there's an error
+          document.getElementById('debug-data').classList.remove('d-none');
+        }
+      }
+      
+      // Function to show diagram error
+      function showDiagramError(title, message, details = '') {
+        const errorContainer = document.getElementById('mini-erd-error');
+        const errorMessage = document.getElementById('mini-erd-error-message');
+        const errorDetails = document.getElementById('mini-erd-error-details');
+        const loadingIndicator = document.getElementById('mini-erd-loading');
+        
+        if (loadingIndicator) {
+          loadingIndicator.style.display = 'none';
+        }
+        
+        if (errorContainer && errorMessage) {
+          // Set error message
+          errorMessage.textContent = message;
+          
+          // Set error details if provided
+          if (details && errorDetails) {
+            errorDetails.textContent = details;
+            errorDetails.classList.remove('d-none');
+          } else if (errorDetails) {
+            errorDetails.classList.add('d-none');
+          }
+          
+          // Show the error container
+          errorContainer.classList.remove('d-none');
+        }
+      }
+      
+      // Handle modal shown event - adjust size after the modal is fully visible
+      miniErdModal.addEventListener('shown.bs.modal', function(event) {
+        // After modal is fully shown, resize the diagram to fit
+        const container = document.getElementById('mini-erd-container');
+        if (container && container.panZoomInstance) {
+          setTimeout(() => {
+            container.panZoomInstance.resize();
+            container.panZoomInstance.fit();
+            container.panZoomInstance.center();
+          }, 200); // Small delay to ensure modal is fully transitioned
+        }
+      });
+      
+      // Handle modal close to reset state for future opens
+      miniErdModal.addEventListener('hidden.bs.modal', function(event) {
+        // Reset flags and cached data to ensure fresh fetch on next open
+        isModalLoaded = false;
+        erdData = null;
+        console.log('Modal closed, diagram data will be refetched on next open');
+      });
+    }
+    
+    // Function to retry loading the Mini ERD
+    function retryLoadingMiniERD() {
+      console.log('Retrying loading of mini ERD');
+      const modalContent = document.getElementById('miniErdModalContent');
+      
+      // Set loading state again
+      modalContent.innerHTML = `
+        <div class="modal-header">
+          <h5 class="modal-title">Relationships for <%= @table_name %></h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body p-0">
+          <div id="mini-erd-container" class="w-100 d-flex justify-content-center align-items-center" style="min-height: 450px; height: 100%;">
+            <div class="text-center">
+              <div class="spinner-border text-primary mb-3" role="status">
+                <span class="visually-hidden">Loading...</span>
+              </div>
+              <p>Retrying to load relationships diagram...</p>
+            </div>
+          </div>
+        </div>
+      `;
+      
+      // Reset state to ensure fresh fetch
+      isModalLoaded = false;
+      erdData = null;
+      
+      // Retry fetching data
+      fetchErdData();
+    }
   });
 </script>
 
@@ -284,6 +1038,46 @@
     font-size: 0.85rem;
   }
   
+  /* Filter input group styling */
+  .filter-input-group {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .filter-input-group .operator-select {
+    font-size: 0.7rem;
+    padding: 0.1rem 0.5rem;
+    border-bottom: none;
+    border-radius: 0.2rem 0.2rem 0 0;
+    background-color: rgba(0,0,0,0.03);
+    font-weight: normal;
+    min-height: 22px; /* Ensure consistent height */
+  }
+  
+  .filter-input-group .operator-select option {
+    font-size: 0.8rem;
+    padding: 2px;
+  }
+  
+  [data-bs-theme="dark"] .filter-input-group .operator-select {
+    background-color: rgba(255,255,255,0.05);
+    color: rgba(255,255,255,0.9);
+    border-color: rgba(255,255,255,0.15);
+  }
+  
+  .filter-input-group .column-filter {
+    border-radius: 0 0 0.2rem 0.2rem;
+    border-top: none;
+  }
+  
+  /* Ensure consistent sizing for date/time inputs */
+  input[type="date"].column-filter,
+  input[type="datetime-local"].column-filter,
+  input[type="time"].column-filter {
+    padding: 0.2rem 0.5rem;
+  }
+  
   [data-bs-theme="dark"] .column-filters td {
     background-color: rgba(255,255,255,0.05);
   }
@@ -293,6 +1087,57 @@
     color: rgba(255,255,255,0.9);
     border-color: rgba(255,255,255,0.15);
   }
+  
+  /* Special styling for date/time inputs in dark mode */
+  [data-bs-theme="dark"] input[type="datetime-local"].column-filter::-webkit-calendar-picker-indicator,
+  [data-bs-theme="dark"] input[type="date"].column-filter::-webkit-calendar-picker-indicator,
+  [data-bs-theme="dark"] input[type="time"].column-filter::-webkit-calendar-picker-indicator {
+    filter: invert(0.8);
+  }
+  
+  /* Mini ERD modal styling */
+  #miniErdModal .modal-dialog {
+    max-width: 90%;
+    max-height: 90vh;
+    height: 90vh;
+  }
+  
+  #miniErdModal .modal-content {
+    height: 100%;
+  }
+  
+  #miniErdModal .modal-body {
+    height: calc(100% - 130px); /* Account for header and footer */
+    overflow: hidden; /* Prevent scrollbars within the modal body */
+  }
+  
+  #miniErdModal #mini-erd-container {
+    height: 100%;
+    width: 100%;
+  }
+  
+  #miniErdModal #mini-erd-container svg {
+    width: 100%;
+    height: 100%;
+    max-height: unset;
+  }
+  
+  /* Foreign key link styling */
+  .foreign-key-link {
+    color: var(--bs-primary);
+    position: relative;
+  }
+  
+  .foreign-key-link:hover {
+    text-decoration: underline !important;
+  }
+  
+  .foreign-key-link + .bi-link-45deg {
+    font-size: 0.75rem;
+    margin-left: 0.25rem;
+    position: relative;
+    top: -1px;
+  }
 </style>
 
 <% if @timestamp_data.present? %>
@@ -371,6 +1216,39 @@
         }
       }
     });
+    
+    // Column sorting enhancement
+    const sortableColumns = document.querySelectorAll('.sortable-column');
+    sortableColumns.forEach(column => {
+      const link = column.querySelector('.column-sort-link');
+      
+      // Mouse over effects
+      column.addEventListener('mouseenter', () => {
+        const sortIcon = column.querySelector('.sort-icon');
+        if (sortIcon && sortIcon.classList.contains('invisible')) {
+          sortIcon.style.visibility = 'visible';
+          sortIcon.style.opacity = '0.3';
+        }
+      });
+      
+      column.addEventListener('mouseleave', () => {
+        const sortIcon = column.querySelector('.sort-icon');
+        if (sortIcon && sortIcon.classList.contains('invisible')) {
+          sortIcon.style.visibility = 'hidden';
+          sortIcon.style.opacity = '0';
+        }
+      });
+      
+      // Keyboard accessibility
+      if (link) {
+        link.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            link.click();
+          }
+        });
+      }
+    });
   });
 </script>
 <% end %>