dbviewer 0.6.6 → 0.6.8

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

@@ -3,331 +3,10 @@
 <% 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;
-    }
-    
-  /* Ensure proper layering for sticky elements */
-  .dbviewer-table-header th {
-    position: sticky;
-    top: 0;
-    z-index: 20;
-  }
-  
-  /* Increase z-index for the intersection point of sticky header and sticky column */
-  .dbviewer-table-header th.action-column {
-    z-index: 40 !important; 
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
-  }
-    
-    /* Ensure thead has higher z-index than tbody */
-    thead tr th.action-column {
-      z-index: 40 !important;
-    }
-    
-    tbody tr td.action-column {
-      z-index: 30 !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);
-    }
-    
-    /* Column filter styling */
-    .column-filters td {
-      padding: 0.5rem;
-      background-color: var(--bs-tertiary-bg, #f8f9fa);
-    }
-    
-    /* Styling for disabled input fields (IS NULL, IS NOT NULL) */
-    .column-filter:disabled, .disabled-filter {
-      background-color: var(--bs-tertiary-bg, #f0f0f0);
-      border-color: var(--bs-border-color, #dee2e6);
-      color: var(--bs-secondary-color, #6c757d);
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-    
-    /* Action column styling */
-    .action-column {
-      width: 100px;  /* Increased from 60px to accommodate two buttons */
-      min-width: 100px; /* Ensure minimum width */
-      white-space: nowrap;
-      position: sticky;
-      left: 0;
-      z-index: 15;
-      background-color: var(--bs-table-striped-bg, #f2f2f2);
-      box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
-    }
-    
-    .copy-factory-btn {
-      padding: 0.1rem 0.4rem;
-      width: 32px;
-    }
-    
-    .copy-factory-btn:hover {
-      opacity: 0.85;
-      transform: translateY(-1px);
-    }
-    
-    /* Ensure proper background color for actions column in dark mode */
-    [data-bs-theme="dark"] .action-column {
-      background-color: var(--bs-dark-bg-subtle, #343a40);
-    }
-
-    /* Maintain zebra striping with sticky action column */
-    .table-striped > tbody > tr:nth-of-type(odd) > .action-column {
-      background-color: var(--bs-table-striped-bg, #f8f9fa);
-    }
-
-    [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > .action-column {
-      background-color: var(--bs-dark-bg-subtle, #343a40);
-    }
-    
-    .view-record-btn {
-      padding: 0.1rem 0.4rem;
-      width: 32px;
-    }
-    
-    .view-record-btn:hover {
-      opacity: 0.85;
-      transform: translateY(-1px);
-    }
-    
-  /* Make action column header sticky as well */
-  .action-column-header {
-    position: sticky;
-    left: 0;
-    z-index: 40 !important; /* Even higher z-index to stay on top of everything */
-    background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
-    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.04) !important;
-  }
-  
-  [data-bs-theme="dark"] .action-column-header {
-    background-color: var(--bs-dark-bg-subtle, #343a40) !important;
-  }
-    
-    [data-bs-theme="dark"] .action-column-header {
-      background-color: var(--bs-dark-bg-subtle, #343a40) !important;
-    }
-    
-  /* Make action column filter cell sticky as well */
-  .action-column-filter {
-    position: sticky;
-    left: 0;
-    z-index: 40 !important;
-    background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
-  }
-  
-  [data-bs-theme="dark"] .action-column-filter {
-    background-color: var(--bs-tertiary-bg, #2b3035) !important;
-  }
-    
-    /* Fix action column for entire table */
-    .action-column {
-      box-shadow: 2px 0 6px rgba(0, 0, 0, 0.04);
-    }
-    
-    /* Ensure equal padding for all cells */
-    .action-column-header, .action-column-filter {
-      padding-left: 8px !important;
-      padding-right: 8px !important;
-    }
-    
-    /* Relationship section styles */
-    #relationshipsSection {
-      border-top: 1px solid var(--bs-border-color, #dee2e6);
-      margin-top: 1.5rem;
-      padding-top: 1.5rem;
-    }
-    
-    #relationshipsSection h6 {
-      color: var(--bs-primary, #0d6efd);
-      font-weight: 600;
-      border-bottom: 2px solid var(--bs-primary, #0d6efd);
-      padding-bottom: 0.5rem;
-      margin-bottom: 1rem;
-    }
-    
-    .relationship-section h6 {
-      font-size: 0.95rem;
-      margin-bottom: 0.75rem;
-      padding: 0.5rem 0.75rem;
-      background: linear-gradient(135deg, var(--bs-primary-bg-subtle, #cfe2ff), transparent);
-      border-left: 3px solid var(--bs-primary, #0d6efd);
-      border-radius: 0.25rem;
-    }
-    
-    .relationship-section .table {
-      margin-bottom: 0;
-      border: 1px solid var(--bs-border-color, #dee2e6);
-    }
-    
-    .relationship-section .table th {
-      background-color: var(--bs-light, #f8f9fa);
-      font-weight: 600;
-      font-size: 0.875rem;
-      border-bottom: 2px solid var(--bs-border-color, #dee2e6);
-    }
-    
-    .relationship-section .table td {
-      vertical-align: middle;
-      font-size: 0.875rem;
-    }
-    
-    .relationship-section .btn {
-      font-size: 0.8rem;
-      padding: 0.375rem 0.75rem;
-    }
-    
-    .relationship-section .btn-outline-primary:hover {
-      transform: translateX(2px);
-      transition: transform 0.2s ease;
-    }
-    
-    .relationship-section .btn-outline-success:hover {
-      transform: translateX(2px);
-      transition: transform 0.2s ease;
-    }
-    
-    /* Dark mode relationship styles */
-    [data-bs-theme="dark"] #relationshipsSection {
-      border-top-color: var(--bs-border-color, #495057);
-    }
-    
-    [data-bs-theme="dark"] .relationship-section h6 {
-      background: linear-gradient(135deg, var(--bs-primary-bg-subtle, #031633), transparent);
-    }
-    
-    [data-bs-theme="dark"] .relationship-section .table th {
-      background-color: var(--bs-dark-bg-subtle, #343a40);
-      color: var(--bs-light, #f8f9fa);
-    }
-    
-    [data-bs-theme="dark"] .relationship-section .table {
-      border-color: var(--bs-border-color, #495057);
-    }
-    
-    /* Responsive relationship tables */
-    @media (max-width: 767.98px) {
-      .relationship-section .table th,
-      .relationship-section .table td {
-        font-size: 0.8rem;
-        padding: 0.5rem 0.25rem;
-      }
-      
-      .relationship-section .btn {
-        font-size: 0.75rem;
-        padding: 0.25rem 0.5rem;
-      }
-    }
-  </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>
+  <%= stylesheet_link_tag "dbviewer/table", "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "dbviewer/table", "data-turbo-track": "reload" %>
 <% end %>
 
 <% content_for :sidebar_active do %>active<% end %>
@@ -525,1247 +204,6 @@
   </div>
 </div>
 
-<style>
-  /* Borderless table styling */
-  .table {
-    border-collapse: separate;
-    border-spacing: 0;
-  }
-  
-  .table th,
-  .table td {
-    border: none;
-    border-bottom: 1px solid var(--bs-border-subtle, rgba(0, 0, 0, 0.05));
-  }
-  
-  .table thead th {
-    border-bottom: 2px solid var(--bs-border-subtle, rgba(0, 0, 0, 0.08));
-    font-weight: 500;
-  }
-  
-  /* Add a subtle hover effect on table rows */
-  .table tbody tr:hover {
-    background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.02));
-  }
-  
-  /* Dark mode compatibility */
-  [data-bs-theme="dark"] .table th,
-  [data-bs-theme="dark"] .table td {
-    border-bottom: 1px solid var(--bs-border-subtle, rgba(255, 255, 255, 0.05));
-  }
-  
-  [data-bs-theme="dark"] .table thead th {
-    border-bottom: 2px solid var(--bs-border-subtle, rgba(255, 255, 255, 0.08));
-  }
-  
-  [data-bs-theme="dark"] .table tbody tr:hover {
-    background-color: var(--bs-tertiary-bg, rgba(255, 255, 255, 0.03));
-  }
-  
-  /* Column filter styling */
-  .column-filters td {
-    padding: 0.5rem;
-    background-color: var(--bs-tertiary-bg, #f8f9fa);
-  }
-  
-  /* Action column styling */
-  .action-column {
-    width: 100px;  /* Increased from 60px to accommodate two buttons */
-    min-width: 100px; /* Ensure minimum width */
-    white-space: nowrap;
-    position: sticky;
-    left: 0;
-    z-index: 30; /* Increased z-index to ensure it stays on top */
-    background-color: var(--bs-body-bg, #fff); /* Use body background color */
-    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.04);
-  }
-  
-  .copy-factory-btn {
-    padding: 0.1rem 0.4rem;
-    width: 32px;
-  }
-  
-  .copy-factory-btn:hover {
-    opacity: 0.85;
-    transform: translateY(-1px);
-  }
-  
-  /* Ensure proper background color for actions column in dark mode */
-  [data-bs-theme="dark"] .action-column {
-    background-color: var(--bs-body-bg, #212529); /* Use body background in dark mode */
-  }
-
-  /* Maintain zebra striping with sticky action column */
-  .table-striped > tbody > tr:nth-of-type(odd) > .action-column {
-    background-color: var(--bs-tertiary-bg, #f8f9fa);
-  }
-  
-  .table-striped > tbody > tr:nth-of-type(even) > .action-column {
-    background-color: var(--bs-body-bg, #fff);
-  }
-
-  [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > .action-column {
-    background-color: var(--bs-tertiary-bg, #2b3035);
-  }
-  
-  [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > .action-column {
-    background-color: var(--bs-body-bg, #212529);
-  }
-  
-  .view-record-btn {
-    padding: 0.1rem 0.4rem;
-    width: 32px;
-  }
-  
-  .view-record-btn:hover {
-    opacity: 0.85;
-    transform: translateY(-1px);
-  }
-  
-  /* Record detail modal styling */
-  .record-detail-table tr:first-child th,
-  .record-detail-table tr:first-child td {
-    border-top: none;
-  }
-  
-  .record-detail-table .code-block {
-    background-color: var(--bs-light);
-    padding: 0.5rem;
-    border-radius: 0.25rem;
-    overflow-x: auto;
-    max-height: 200px;
-  }
-  
-  /* Relationships section styling */
-  #relationshipsSection {
-    border-top: 1px solid var(--bs-border-color);
-    padding-top: 1rem;
-  }
-  
-  #relationshipsSection h6 {
-    color: var(--bs-emphasis-color);
-    margin-bottom: 1rem;
-  }
-  
-  [data-bs-theme="dark"] #relationshipsSection {
-    border-top-color: #495057;
-  }
-  
-  .relationships-table .btn-outline-primary {
-    font-size: 0.75rem;
-    padding: 0.25rem 0.5rem;
-  }
-  
-  .relationships-table code {
-    background-color: var(--bs-gray-100);
-    padding: 0.125rem 0.25rem;
-    border-radius: 0.125rem;
-    font-size: 0.875rem;
-  }
-  
-  [data-bs-theme="dark"] .relationships-table code {
-    background-color: var(--bs-gray-800);
-    color: var(--bs-gray-100);
-  }
-    margin-bottom: 0;
-  }
-  
-  [data-bs-theme="dark"] .record-detail-table .code-block {
-    background-color: var(--bs-dark);
-  }
-
-  /* Fullscreen table styles */
-  .table-fullscreen {
-    position: fixed !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100vw !important;
-    height: 100vh !important;
-    z-index: 9999 !important;
-    background: var(--bs-body-bg) !important;
-    margin: 0 !important;
-    border-radius: 0 !important;
-    overflow: hidden !important;
-    display: flex !important;
-    flex-direction: column !important;
-  }
-
-  .table-fullscreen .card-body {
-    flex: 1 !important;
-    overflow: hidden !important;
-    display: flex !important;
-    flex-direction: column !important;
-  }
-
-  .table-fullscreen .table-responsive {
-    flex: 1 !important;
-    overflow: auto !important;
-  }
-
-  .table-fullscreen .card-header {
-    flex-shrink: 0 !important;
-    position: sticky !important;
-    top: 0 !important;
-    z-index: 10000 !important;
-    background: var(--bs-body-bg) !important;
-    border-bottom: 1px solid var(--bs-border-color) !important;
-  }
-
-  /* Hide pagination in fullscreen mode */
-  .table-fullscreen .pagination-container {
-    display: none !important;
-  }
-
-  /* Adjust table header in fullscreen */
-  .table-fullscreen .dbviewer-table-header {
-    position: sticky !important;
-    top: 0 !important;
-    z-index: 100 !important;
-  }
-
-  /* Ensure body doesn't scroll when table is fullscreen */
-  body.table-fullscreen-active {
-    overflow: hidden !important;
-  }
-
-  /* Fullscreen button hover effect */
-  #fullscreen-toggle:hover {
-    background-color: var(--bs-secondary-bg) !important;
-    border-color: var(--bs-secondary-border-subtle) !important;
-  }
-
-  /* Smooth transitions */
-  #table-section {
-    transition: all 0.3s ease-in-out;
-  }
-</style>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    // Record Detail Modal functionality
-    const recordDetailModal = document.getElementById('recordDetailModal');
-    if (recordDetailModal) {
-      recordDetailModal.addEventListener('show.bs.modal', function (event) {
-        // Button that triggered the modal
-        const button = event.relatedTarget;
-        
-        // Extract record data from button's data attribute
-        let recordData;
-        let foreignKeys;
-        try {
-          recordData = JSON.parse(button.getAttribute('data-record-data'));
-          foreignKeys = JSON.parse(button.getAttribute('data-foreign-keys') || '[]');
-        } catch (e) {
-          console.error('Error parsing record data:', e);
-          recordData = {};
-          foreignKeys = [];
-        }
-        
-        // Update the modal's title with table name
-        const modalTitle = recordDetailModal.querySelector('.modal-title');
-        modalTitle.textContent = '<%= @table_name %> Record Details';
-        
-        // Populate the table with record data
-        const tableBody = document.getElementById('recordDetailTableBody');
-        tableBody.innerHTML = '';
-        
-        // Get all columns
-        const columns = Object.keys(recordData);
-        
-        // Create rows for each column
-        columns.forEach(column => {
-          const row = document.createElement('tr');
-          
-          // Create column name cell
-          const columnNameCell = document.createElement('td');
-          columnNameCell.className = 'fw-bold';
-          columnNameCell.textContent = column;
-          row.appendChild(columnNameCell);
-          
-          // Create value cell
-          const valueCell = document.createElement('td');
-          let cellValue = recordData[column];
-          
-          // Format value differently based on type
-          if (cellValue === null) {
-            valueCell.innerHTML = '<span class="text-muted">NULL</span>';
-          } else if (typeof cellValue === 'string' && cellValue.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/)) {
-            // Handle datetime values
-            const date = new Date(cellValue);
-            if (!isNaN(date.getTime())) {
-              valueCell.textContent = date.toLocaleString();
-            } else {
-              valueCell.textContent = cellValue;
-            }
-          } else if (typeof cellValue === 'string' && (cellValue.startsWith('{') || cellValue.startsWith('['))) {
-            // Handle JSON values
-            try {
-              const jsonValue = JSON.parse(cellValue);
-              const formattedJSON = JSON.stringify(jsonValue, null, 2);
-              valueCell.innerHTML = `<pre class="mb-0 code-block">${formattedJSON}</pre>`;
-            } catch (e) {
-              valueCell.textContent = cellValue;
-            }
-          } else {
-            valueCell.textContent = cellValue;
-          }
-          
-          row.appendChild(valueCell);
-          tableBody.appendChild(row);
-        });
-        
-        // Populate relationships section
-        const relationshipsSection = document.getElementById('relationshipsSection');
-        const relationshipsContent = document.getElementById('relationshipsContent');
-        const reverseForeignKeys = JSON.parse(button.dataset.reverseForeignKeys || '[]');
-        
-        // Check if we have any relationships to show
-        const hasRelationships = (foreignKeys && foreignKeys.length > 0) || (reverseForeignKeys && reverseForeignKeys.length > 0);
-        
-        if (hasRelationships) {
-          relationshipsSection.style.display = 'block';
-          relationshipsContent.innerHTML = '';
-          
-          // Handle belongs_to relationships (foreign keys from this table)
-          if (foreignKeys && foreignKeys.length > 0) {
-            const activeRelationships = foreignKeys.filter(fk => {
-              const columnValue = recordData[fk.column];
-              return columnValue !== null && columnValue !== undefined && columnValue !== '';
-            });
-            
-            if (activeRelationships.length > 0) {
-              relationshipsContent.appendChild(createRelationshipSection('Belongs To', activeRelationships, recordData, 'belongs_to'));
-            }
-          }
-          
-          // Handle has_many relationships (foreign keys from other tables pointing to this table)
-          if (reverseForeignKeys && reverseForeignKeys.length > 0) {
-            const primaryKeyValue = recordData[Object.keys(recordData).find(key => key === 'id') || Object.keys(recordData)[0]];
-            
-            if (primaryKeyValue !== null && primaryKeyValue !== undefined && primaryKeyValue !== '') {
-              const hasManySection = createRelationshipSection('Has Many', reverseForeignKeys, recordData, 'has_many', primaryKeyValue);
-              relationshipsContent.appendChild(hasManySection);
-              
-              // Fetch relationship counts asynchronously
-              fetchRelationshipCounts('<%= @table_name %>', primaryKeyValue, reverseForeignKeys, hasManySection);
-            }
-          }
-          
-          // Show message if no active relationships
-          if (relationshipsContent.children.length === 0) {
-            relationshipsContent.innerHTML = `
-              <div class="text-muted small">
-                <i class="bi bi-info-circle me-1"></i>
-                This record has no active relationships.
-              </div>
-            `;
-          }
-        } else {
-          relationshipsSection.style.display = 'none';
-        }
-      });
-    }
-    
-    // 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
-    function debounce(func, wait) {
-      let timeout;
-      return function() {
-        const context = this;
-        const args = arguments;
-        clearTimeout(timeout);
-        timeout = setTimeout(function() {
-          func.apply(context, args);
-        }, wait);
-      };
-    }
-    
-    // Function to handle operator changes for IS NULL and IS NOT NULL operators
-    function setupNullOperators() {
-      operatorSelects.forEach(select => {
-        // Initial setup for existing null operators
-        if (select.value === 'is_null' || select.value === 'is_not_null') {
-          const columnName = select.name.match(/\[(.*?)_operator\]/)[1];
-          const inputContainer = select.closest('.filter-input-group');
-          // Check for display field (the visible disabled field)
-          const displayField = inputContainer.querySelector(`[data-column="${columnName}_display"]`);
-          if (displayField) {
-            displayField.classList.add('disabled-filter');
-          }
-          
-          // Make sure the value field properly reflects the null operator
-          const valueField = inputContainer.querySelector(`[data-column="${columnName}"]`);
-          if (valueField) {
-            valueField.value = select.value;
-          }
-        }
-        
-        // Handle operator changes
-        select.addEventListener('change', function() {
-          const columnName = this.name.match(/\[(.*?)_operator\]/)[1];
-          const filterForm = this.closest('form');
-          const inputContainer = this.closest('.filter-input-group');
-          const hiddenField = inputContainer.querySelector(`[data-column="${columnName}"]`);
-          const displayField = inputContainer.querySelector(`[data-column="${columnName}_display"]`);
-          const wasNullOperator = hiddenField && (hiddenField.value === 'is_null' || hiddenField.value === 'is_not_null');
-          const isNullOperator = this.value === 'is_null' || this.value === 'is_not_null';
-          
-          if (isNullOperator) {
-            // Configure for null operator
-            if (hiddenField) {
-              hiddenField.value = this.value;
-            }
-            // Submit immediately
-            filterForm.submit();
-          } else if (wasNullOperator) {
-            // Clear value when switching from null operator to regular operator
-            if (hiddenField) {
-              hiddenField.value = '';
-            }
-          }
-        });
-      });
-    }
-    
-    // Function to submit the form
-    const submitForm = debounce(function() {
-      filterForm.submit();
-    }, 500);
-    
-    // Initialize the null operators handling
-    setupNullOperators();
-    
-    // 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
-    const hasActiveFilters = Array.from(columnFilters).some(input => input.value);
-    
-    if (hasActiveFilters) {
-      // Add a clear filters button
-      const paginationContainer = document.querySelector('nav[aria-label="Page navigation"]') || 
-                                   document.querySelector('.table-responsive');
-      
-      if (paginationContainer) {
-        const clearButton = document.createElement('div');
-        clearButton.className = 'text-center mt-3';
-        clearButton.innerHTML = '<button type="button" class="btn btn-sm btn-outline-secondary" id="clear-filters">' +
-                               '<i class="bi bi-x-circle me-1"></i>Clear All Filters</button>';
-        
-        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}`;
-        
-        fetch(fetchUrl)
-          .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 d-flex justify-content-center align-items-center" 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 and ensure it has valid dimensions
-                  svgElement.setAttribute('width', '100%');
-                  svgElement.setAttribute('height', '100%');
-                  
-                  // Wait for SVG to be fully rendered with proper dimensions
-                  setTimeout(() => {
-                    try {
-                      // Get dimensions to ensure they're valid before initializing pan-zoom
-                      const clientRect = svgElement.getBoundingClientRect();
-                      
-                      // Only initialize if we have valid dimensions
-                      if (clientRect.width > 0 && clientRect.height > 0) {
-                        // Initialize SVG Pan-Zoom with more robust error handling
-                        const panZoomInstance = svgPanZoom(svgElement, {
-                          zoomEnabled: true,
-                          controlIconsEnabled: true,
-                          fit: false, // Don't automatically fit on init - can cause the matrix error
-                          center: false, // Don't automatically center - can cause the matrix error
-                          minZoom: 0.5,
-                          maxZoom: 2.5,
-                          beforeZoom: function() {
-                            // Check if the SVG is valid for zooming
-                            return svgElement.getBoundingClientRect().width > 0 && 
-                                  svgElement.getBoundingClientRect().height > 0;
-                          }
-                        });
-                        
-                        // Store the panZoom instance for resize handling
-                        container.panZoomInstance = panZoomInstance;
-                        
-                        // Manually fit and center after a slight delay
-                        setTimeout(() => {
-                          try {
-                            panZoomInstance.resize();
-                            panZoomInstance.fit();
-                            panZoomInstance.center();
-                          } catch(err) {
-                            console.warn("Error during fit/center operation:", err);
-                          }
-                        }, 300);
-                        
-                        // Setup resize observer to maintain full size
-                        const resizeObserver = new ResizeObserver(() => {
-                          if (container.panZoomInstance) {
-                            try {
-                              // Reset zoom and center when container is resized
-                              container.panZoomInstance.resize();
-                              // Only fit and center if the element is visible with valid dimensions
-                              if (svgElement.getBoundingClientRect().width > 0 && 
-                                  svgElement.getBoundingClientRect().height > 0) {
-                                container.panZoomInstance.fit();
-                                container.panZoomInstance.center();
-                              }
-                            } catch(err) {
-                              console.warn("Error during resize observer callback:", err);
-                            }
-                          }
-                        });
-                        
-                        // 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(() => {
-                              try {
-                                container.panZoomInstance.resize();
-                                // Only fit and center if the element is visible with valid dimensions
-                                if (svgElement.getBoundingClientRect().width > 0 && 
-                                    svgElement.getBoundingClientRect().height > 0) {
-                                  container.panZoomInstance.fit();
-                                  container.panZoomInstance.center();
-                                }
-                              } catch(err) {
-                                console.warn("Error during modal resize handler:", err);
-                              }
-                            }, 300);
-                          }
-                        });
-                      } else {
-                        console.warn("Cannot initialize SVG-Pan-Zoom: SVG has invalid dimensions", clientRect);
-                      }
-                    } catch(err) {
-                      console.warn("Error initializing SVG-Pan-Zoom:", err);
-                    }
-                  }, 500); // Increased delay to ensure SVG is fully rendered with proper dimensions
-                }
-              } catch (e) {
-                console.warn('Failed to initialize svg-pan-zoom:', e);
-                // Not critical, continue without pan-zoom
-              }
-              
-              // Add highlighting for the current table after a delay to ensure SVG is fully processed
-              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(() => {
-            try {
-              // Check if the SVG still has valid dimensions before operating on it
-              const svgElement = container.querySelector('svg');
-              if (svgElement && 
-                  svgElement.getBoundingClientRect().width > 0 && 
-                  svgElement.getBoundingClientRect().height > 0) {
-                container.panZoomInstance.resize();
-                container.panZoomInstance.fit();
-                container.panZoomInstance.center();
-              } else {
-                console.warn("Cannot perform pan-zoom operations: SVG has invalid dimensions");
-              }
-            } catch(err) {
-              console.warn("Error during modal shown handler:", err);
-            }
-          }, 500); // Increased delay to ensure modal is fully transitioned and SVG is rendered
-        }
-      });
-      
-      // 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();
-    }
-    
-    // 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();
-          }
-        });
-      }
-    });
-
-    // Table fullscreen functionality
-    const fullscreenToggle = document.getElementById('fullscreen-toggle');
-    const fullscreenIcon = document.getElementById('fullscreen-icon');
-    const tableSection = document.getElementById('table-section');
-    
-    if (fullscreenToggle && tableSection) {
-      // Key for storing fullscreen state in localStorage
-      const fullscreenStateKey = 'dbviewer-table-fullscreen-<%= @table_name %>';
-      
-      // Function to apply fullscreen state
-      function applyFullscreenState(isFullscreen) {
-        if (isFullscreen) {
-          // Enter fullscreen
-          tableSection.classList.add('table-fullscreen');
-          document.body.classList.add('table-fullscreen-active');
-          fullscreenIcon.classList.remove('bi-fullscreen');
-          fullscreenIcon.classList.add('bi-fullscreen-exit');
-          fullscreenToggle.setAttribute('title', 'Exit fullscreen');
-        } else {
-          // Exit fullscreen
-          tableSection.classList.remove('table-fullscreen');
-          document.body.classList.remove('table-fullscreen-active');
-          fullscreenIcon.classList.remove('bi-fullscreen-exit');
-          fullscreenIcon.classList.add('bi-fullscreen');
-          fullscreenToggle.setAttribute('title', 'Toggle fullscreen');
-        }
-      }
-      
-      // Restore fullscreen state from localStorage on page load
-      try {
-        const savedState = localStorage.getItem(fullscreenStateKey);
-        if (savedState === 'true') {
-          applyFullscreenState(true);
-        }
-      } catch (e) {
-        // Handle localStorage not available (private browsing, etc.)
-        console.warn('Could not restore fullscreen state:', e);
-      }
-      
-      fullscreenToggle.addEventListener('click', function() {
-        const isFullscreen = tableSection.classList.contains('table-fullscreen');
-        const newState = !isFullscreen;
-        
-        // Apply the new state
-        applyFullscreenState(newState);
-        
-        // Save state to localStorage
-        try {
-          localStorage.setItem(fullscreenStateKey, newState.toString());
-        } catch (e) {
-          // Handle localStorage not available (private browsing, etc.)
-          console.warn('Could not save fullscreen state:', e);
-        }
-      });
-      
-      // Exit fullscreen with Escape key
-      document.addEventListener('keydown', function(e) {
-        if (e.key === 'Escape' && tableSection.classList.contains('table-fullscreen')) {
-          fullscreenToggle.click();
-        }
-      });
-    }
-    
-    // Function to copy FactoryBot code
-    window.copyToJson = function(button) {
-      try {
-        // Get record data from data attribute
-        const recordData = JSON.parse(button.dataset.recordData);
-        
-        // Generate formatted JSON string
-        const jsonString = JSON.stringify(recordData, null, 2);
-        
-        // Copy to clipboard
-        navigator.clipboard.writeText(jsonString).then(() => {
-          // Show a temporary success message on the button
-          const originalTitle = button.getAttribute('title');
-          button.setAttribute('title', 'Copied!');
-          button.classList.remove('btn-outline-secondary');
-          button.classList.add('btn-success');
-          
-          // Show a toast notification
-          if (typeof Toastify === 'function') {
-            Toastify({
-              text: `<span class="toast-icon"><i class="bi bi-clipboard-check"></i></span> JSON data copied to clipboard!`,
-              className: "toast-factory-bot",
-              duration: 3000,
-              gravity: "bottom",
-              position: "right",
-              escapeMarkup: false,
-              style: {
-                animation: "slideInRight 0.3s ease-out, slideOutRight 0.3s ease-out 2.7s"
-              },
-              onClick: function() { /* Dismiss toast on click */ }
-            }).showToast();
-          }
-          
-          setTimeout(() => {
-            button.setAttribute('title', originalTitle);
-            button.classList.remove('btn-success');
-            button.classList.add('btn-outline-secondary');
-          }, 2000);
-        }).catch(err => {
-          console.error('Failed to copy text: ', err);
-          
-          // Show error toast
-          if (typeof Toastify === 'function') {
-            Toastify({
-              text: '<span class="toast-icon"><i class="bi bi-exclamation-triangle"></i></span> Failed to copy to clipboard',
-              className: "bg-danger",
-              duration: 3000,
-              gravity: "bottom",
-              position: "right",
-              escapeMarkup: false,
-              style: {
-                background: "linear-gradient(135deg, #dc3545, #c82333)",
-                animation: "slideInRight 0.3s ease-out"
-              }
-            }).showToast();
-          } else {
-            alert('Failed to copy to clipboard. See console for details.');
-          }
-        });
-      } catch (error) {
-        console.error('Error generating JSON:', error);
-        alert('Error generating JSON. See console for details.');
-      }
-    };
-    
-    // Helper function to create relationship sections
-    // Function to fetch relationship counts from API
-    async function fetchRelationshipCounts(tableName, recordId, relationships, hasManySection) {
-      try {
-        const response = await fetch(`/dbviewer/api/tables/${tableName}/relationship_counts?record_id=${recordId}`);
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        
-        const data = await response.json();
-        
-        // Update each count in the UI
-        const countSpans = hasManySection.querySelectorAll('.relationship-count');
-        
-        relationships.forEach((relationship, index) => {
-          const countSpan = countSpans[index];
-          if (countSpan) {
-            const relationshipData = data.relationships.find(r => 
-              r.table === relationship.from_table && r.foreign_key === relationship.column
-            );
-            
-            if (relationshipData) {
-              const count = relationshipData.count;
-              let badgeClass = 'bg-secondary';
-              let badgeText = `${count} record${count !== 1 ? 's' : ''}`;
-              
-              // Use different colors based on count
-              if (count > 0) {
-                badgeClass = count > 10 ? 'bg-warning' : 'bg-success';
-              }
-              
-              countSpan.innerHTML = `<span class="badge ${badgeClass}">${badgeText}</span>`;
-            } else {
-              // Fallback if no data found
-              countSpan.innerHTML = '<span class="badge bg-danger">Error</span>';
-
-            }
-          }
-        });
-        
-      } catch (error) {
-        console.error('Error fetching relationship counts:', error);
-        
-        // Show error state in UI
-        const countSpans = hasManySection.querySelectorAll('.relationship-count');
-        countSpans.forEach(span => {
-          span.innerHTML = '<span class="badge bg-danger">Error</span>';
-        });
-      }
-    }
-
-    function createRelationshipSection(title, relationships, recordData, type, primaryKeyValue = null) {
-      const section = document.createElement('div');
-      section.className = 'relationship-section mb-4';
-      
-      // Create section header
-      const header = document.createElement('h6');
-      header.className = 'mb-3';
-      const icon = type === 'belongs_to' ? 'bi-arrow-up-right' : 'bi-arrow-down-left';
-      header.innerHTML = `<i class="bi ${icon} me-2"></i>${title}`;
-      section.appendChild(header);
-      
-      const tableContainer = document.createElement('div');
-      tableContainer.className = 'table-responsive';
-      
-      const table = document.createElement('table');
-      table.className = 'table table-sm table-bordered';
-      
-      // Create header based on relationship type
-      const thead = document.createElement('thead');
-      if (type === 'belongs_to') {
-        thead.innerHTML = `
-          <tr>
-            <th width="25%">Column</th>
-            <th width="25%">Value</th>
-            <th width="25%">References</th>
-            <th width="25%">Action</th>
-          </tr>
-        `;
-      } else {
-        thead.innerHTML = `
-          <tr>
-            <th width="30%">Related Table</th>
-            <th width="25%">Foreign Key</th>
-            <th width="20%">Count</th>
-            <th width="25%">Action</th>
-          </tr>
-        `;
-      }
-      table.appendChild(thead);
-      
-      // Create body
-      const tbody = document.createElement('tbody');
-      
-      relationships.forEach(fk => {
-        const row = document.createElement('tr');
-        
-        if (type === 'belongs_to') {
-          const columnValue = recordData[fk.column];
-          row.innerHTML = `
-            <td class="fw-medium">${fk.column}</td>
-            <td><code>${columnValue}</code></td>
-            <td>
-              <span class="text-muted">${fk.to_table}.</span><strong>${fk.primary_key}</strong>
-            </td>
-            <td>
-              <a href="/dbviewer/tables/${fk.to_table}?column_filters[${fk.primary_key}]=${encodeURIComponent(columnValue)}" 
-                class="btn btn-sm btn-outline-primary" 
-                title="View referenced record in ${fk.to_table}">
-                <i class="bi bi-arrow-right me-1"></i>View
-              </a>
-            </td>
-          `;
-        } else {
-          // For has_many relationships
-          row.innerHTML = `
-            <td class="fw-medium">${fk.from_table}</td>
-            <td>
-              <span class="text-muted">${fk.from_table}.</span><strong>${fk.column}</strong>
-            </td>
-            <td>
-              <span class="relationship-count">
-                <span class="badge bg-secondary">
-                  <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
-                  Loading...
-                </span>
-              </span>
-            </td>
-            <td>
-              <a href="/dbviewer/tables/${fk.from_table}?column_filters[${fk.column}]=${encodeURIComponent(primaryKeyValue)}" 
-                class="btn btn-sm btn-outline-success" 
-                title="View all ${fk.from_table} records that reference this record">
-                <i class="bi bi-list me-1"></i>View Related
-              </a>
-            </td>
-          `;
-        }
-        
-        tbody.appendChild(row);
-      });
-      
-      table.appendChild(tbody);
-      tableContainer.appendChild(table);
-      section.appendChild(tableContainer);
-      
-      return section;
-    }
-  });
-</script>
-
 <!-- Floating Creation Filter - Only visible on desktop and on table details page -->
 <% if has_timestamp_column?(@table_name) %>
 <div class="floating-creation-filter d-none d-lg-block">
@@ -1909,869 +347,6 @@
     </form>
   </div>
 </div>
-
-<style>
-  /* Floating creation filter button */
-  .floating-creation-filter {
-    position: fixed;
-    bottom: 30px;
-    right: 30px;
-    z-index: 1050;
-  }
-  
-  .floating-filter-btn {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.2rem;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    border: none;
-    position: relative;
-    background: var(--bs-primary);
-    color: white;
-    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
-  }
-  
-  .floating-filter-btn:hover {
-    transform: translateY(-3px) scale(1.05);
-    box-shadow: 0 8px 25px rgba(var(--bs-primary-rgb), 0.5) !important;
-    background: var(--bs-primary) !important;
-    color: white !important;
-  }
-  
-  .floating-filter-btn:active {
-    transform: translateY(-1px) scale(1.02);
-    transition: all 0.1s ease;
-  }
-  
-  .floating-filter-btn:focus {
-    outline: 2px solid rgba(var(--bs-primary-rgb), 0.5);
-    outline-offset: 2px;
-  }
-  
-  /* Badge for active filter indicator */
-  .floating-filter-btn .badge {
-    font-size: 0.6rem;
-    width: 18px;
-    height: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bs-success) !important;
-    animation: pulse 2s infinite;
-  }
-  
-  @keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.1); }
-    100% { transform: scale(1); }
-  }
-  
-  /* Better datetime input styling for the floating filter */
-  #creationFilterOffcanvas .form-control {
-    border-radius: 6px;
-    border: 1px solid var(--bs-border-color);
-    background-color: var(--bs-body-bg);
-    color: var(--bs-body-color);
-    transition: all 0.15s ease-in-out;
-  }
-  
-  #creationFilterOffcanvas .form-control:focus {
-    border-color: var(--bs-primary);
-    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
-    background-color: var(--bs-body-bg);
-  }
-  
-  /* Offcanvas enhancements */
-  #creationFilterOffcanvas {
-    backdrop-filter: blur(10px);
-  }
-  
-  #creationFilterOffcanvas .offcanvas-header {
-    background: var(--bs-body-bg);
-    border-bottom: 1px solid var(--bs-border-color);
-    padding: 1.25rem;
-  }
-  
-  #creationFilterOffcanvas .offcanvas-body {
-    background: var(--bs-body-bg);
-    padding: 1.25rem;
-  }
-  
-  #creationFilterOffcanvas .offcanvas-title {
-    color: var(--bs-body-color);
-    font-weight: 600;
-  }
-  
-  /* Dark mode specific enhancements */
-  [data-bs-theme="dark"] .floating-filter-btn {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(var(--bs-primary-rgb), 0.2);
-  }
-  
-  [data-bs-theme="dark"] .floating-filter-btn:hover {
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--bs-primary-rgb), 0.3) !important;
-  }
-  
-  [data-bs-theme="dark"] #creationFilterOffcanvas .offcanvas-header {
-    background: var(--bs-dark);
-    border-bottom-color: var(--bs-border-color-translucent);
-  }
-  
-  [data-bs-theme="dark"] #creationFilterOffcanvas .offcanvas-body {
-    background: var(--bs-dark);
-  }
-  
-  [data-bs-theme="dark"] #creationFilterOffcanvas .form-control {
-    background-color: var(--bs-body-bg);
-    border-color: var(--bs-border-color-translucent);
-  }
-  
-  [data-bs-theme="dark"] #creationFilterOffcanvas .form-control:focus {
-    background-color: var(--bs-body-bg);
-    border-color: var(--bs-primary);
-  }
-  
-  /* Date range picker styling */
-  #floatingCreationFilterRange {
-    cursor: pointer;
-    background-color: var(--bs-body-bg);
-    color: var(--bs-body-color);
-    border: 1px solid var(--bs-border-color);
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
-  }
-  
-  #floatingCreationFilterRange:focus {
-    border-color: var(--bs-primary);
-    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
-    background-color: var(--bs-body-bg);
-  }
-  
-  #floatingCreationFilterRange::placeholder {
-    color: var(--bs-secondary-color);
-    opacity: 0.7;
-  }
-  
-  /* Enhanced dark mode support for input */
-  [data-bs-theme="dark"] #floatingCreationFilterRange {
-    background-color: var(--bs-body-bg);
-    border-color: var(--bs-border-color-translucent);
-    color: var(--bs-body-color);
-  }
-  
-  [data-bs-theme="dark"] #floatingCreationFilterRange:focus {
-    background-color: var(--bs-body-bg);
-    border-color: var(--bs-primary);
-    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
-  }
-  
-  /* Preset buttons styling */
-  .preset-btn {
-    font-size: 0.8rem;
-    padding: 0.35rem 0.75rem;
-    text-align: left;
-    justify-content: flex-start;
-    border: 1px solid var(--bs-border-color);
-    background-color: var(--bs-body-bg);
-    color: var(--bs-body-color);
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .preset-btn::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(var(--bs-primary-rgb), 0.1), transparent);
-    transition: left 0.3s ease;
-  }
-  
-  .preset-btn:hover {
-    background-color: var(--bs-primary);
-    color: white;
-    border-color: var(--bs-primary);
-    transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.2);
-  }
-  
-  .preset-btn:hover::before {
-    left: 100%;
-  }
-  
-  .preset-btn:active {
-    transform: translateY(0);
-    box-shadow: 0 1px 2px rgba(var(--bs-primary-rgb), 0.2);
-  }
-  
-  .preset-btn i {
-    opacity: 0.8;
-    transition: opacity 0.2s ease;
-  }
-  
-  .preset-btn:hover i {
-    opacity: 1;
-  }
-  
-  /* Dark mode enhancements for preset buttons */
-  [data-bs-theme="dark"] .preset-btn {
-    background-color: var(--bs-dark);
-    border-color: var(--bs-border-color-translucent);
-    color: var(--bs-body-color);
-  }
-  
-  [data-bs-theme="dark"] .preset-btn:hover {
-    background-color: var(--bs-primary);
-    color: white;
-    border-color: var(--bs-primary);
-    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.3);
-  }
-  
-  /* Flatpickr theme adjustments */
-  .flatpickr-calendar {
-    border-radius: 8px;
-    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
-    border: 1px solid var(--bs-border-color);
-    background: var(--bs-body-bg);
-    font-family: var(--bs-body-font-family);
-  }
-  
-  .flatpickr-months {
-    background: var(--bs-body-bg);
-    border-bottom: 1px solid var(--bs-border-color);
-    border-radius: 8px 8px 0 0;
-  }
-  
-  .flatpickr-month {
-    color: var(--bs-body-color);
-    fill: var(--bs-body-color);
-  }
-  
-  .flatpickr-current-month {
-    color: var(--bs-body-color);
-  }
-  
-  .flatpickr-current-month .flatpickr-monthDropdown-month {
-    background: var(--bs-body-bg);
-    color: var(--bs-body-color);
-  }
-  
-  .flatpickr-weekdays {
-    background: var(--bs-body-bg);
-  }
-  
-  .flatpickr-weekday {
-    color: var(--bs-secondary-color);
-    font-weight: 600;
-    font-size: 0.75rem;
-  }
-  
-  .flatpickr-day {
-    color: var(--bs-body-color);
-    border-radius: 4px;
-    transition: all 0.2s ease;
-  }
-  
-  .flatpickr-day:hover {
-    background: var(--bs-primary-bg-subtle);
-    color: var(--bs-primary);
-    border-color: var(--bs-primary-border-subtle);
-  }
-  
-  .flatpickr-day.selected {
-    background: var(--bs-primary);
-    color: white;
-    border-color: var(--bs-primary);
-    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.3);
-  }
-  
-  .flatpickr-day.selected:hover {
-    background: var(--bs-primary);
-    color: white;
-  }
-  
-  .flatpickr-day.inRange {
-    background: var(--bs-primary-bg-subtle);
-    color: var(--bs-primary);
-    border-color: transparent;
-  }
-  
-  .flatpickr-day.startRange {
-    background: var(--bs-primary);
-    color: white;
-    border-radius: 4px 0 0 4px;
-  }
-  
-  .flatpickr-day.endRange {
-    background: var(--bs-primary);
-    color: white;
-    border-radius: 0 4px 4px 0;
-  }
-  
-  .flatpickr-day.startRange.endRange {
-    border-radius: 4px;
-  }
-  
-  .flatpickr-day.today {
-    border-color: var(--bs-primary);
-    color: var(--bs-primary);
-    font-weight: 600;
-  }
-  
-  .flatpickr-day.today:hover {
-    background: var(--bs-primary);
-    color: white;
-  }
-  
-  .flatpickr-day.disabled {
-    color: var(--bs-secondary-color);
-    opacity: 0.5;
-  }
-  
-  .flatpickr-time {
-    background: var(--bs-body-bg);
-    border-radius: 0 0 8px 8px;
-  }
-  
-  .flatpickr-time input {
-    background: var(--bs-body-bg);
-    color: var(--bs-body-color);
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  }
-  
-  .flatpickr-time input:focus {
-    border-color: var(--bs-primary);
-    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
-    outline: 0;
-  }
-  
-  .flatpickr-time .flatpickr-time-separator {
-    color: var(--bs-body-color);
-  }
-  
-  .flatpickr-prev-month,
-  .flatpickr-next-month {
-    color: var(--bs-body-color);
-    fill: var(--bs-body-color);
-    transition: color 0.2s ease;
-  }
-  
-  .flatpickr-prev-month:hover,
-  .flatpickr-next-month:hover {
-    color: var(--bs-primary);
-    fill: var(--bs-primary);
-  }
-  
-  /* Dark mode specific enhancements */
-  [data-bs-theme="dark"] .flatpickr-calendar {
-    background: var(--bs-dark);
-    border-color: var(--bs-border-color-translucent);
-    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-months {
-    background: var(--bs-dark);
-    border-bottom-color: var(--bs-border-color-translucent);
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-weekdays {
-    background: var(--bs-dark);
-  }
-  
-  /* Enhanced dark mode day styling for better contrast */
-  [data-bs-theme="dark"] .flatpickr-day {
-    color: #e9ecef !important;
-    background: transparent;
-    border: 1px solid transparent;
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-day:hover {
-    background: rgba(var(--bs-primary-rgb), 0.25) !important;
-    color: #ffffff !important;
-    border-color: rgba(var(--bs-primary-rgb), 0.4);
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-day.inRange {
-    background: rgba(var(--bs-primary-rgb), 0.2) !important;
-    color: #ffffff !important;
-    border-color: transparent;
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-day.selected {
-    background: var(--bs-primary) !important;
-    color: #ffffff !important;
-    border-color: var(--bs-primary);
-    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.4);
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-day.selected:hover {
-    background: var(--bs-primary) !important;
-    color: #ffffff !important;
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-day.startRange {
-    background: var(--bs-primary) !important;
-    color: #ffffff !important;
-    border-radius: 4px 0 0 4px;
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-day.endRange {
-    background: var(--bs-primary) !important;
-    color: #ffffff !important;
-    border-radius: 0 4px 4px 0;
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-day.startRange.endRange {
-    border-radius: 4px;
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-day.today {
-    border-color: var(--bs-primary) !important;
-    color: var(--bs-primary) !important;
-    font-weight: 600;
-    background: rgba(var(--bs-primary-rgb), 0.1);
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-day.today:hover {
-    background: var(--bs-primary) !important;
-    color: #ffffff !important;
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-day.disabled {
-    color: #6c757d !important;
-    opacity: 0.4;
-    background: transparent !important;
-  }
-  
-  /* Dark mode other day states */
-  [data-bs-theme="dark"] .flatpickr-day.nextMonthDay,
-  [data-bs-theme="dark"] .flatpickr-day.prevMonthDay {
-    color: #6c757d !important;
-    opacity: 0.6;
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-day.nextMonthDay:hover,
-  [data-bs-theme="dark"] .flatpickr-day.prevMonthDay:hover {
-    background: rgba(var(--bs-primary-rgb), 0.15) !important;
-    color: #adb5bd !important;
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-time {
-    background: var(--bs-dark);
-    border-top-color: var(--bs-border-color-translucent);
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-time input {
-    background: var(--bs-body-bg);
-    border-color: var(--bs-border-color-translucent);
-    color: #e9ecef !important;
-  }
-
-  .flatpickr-calendar.hasTime .flatpickr-time {
-    border-top: var(--bs-border-color-translucent);
-  }
-
-  .flatpickr-next-month {
-    color: var(--bs-body-color);
-    fill: var(--bs-body-color);
-  }
-
-  span.flatpickr-weekday {
-    color: var(--bs-secondary-color);
-    font-weight: 600;
-    font-size: 0.75rem;
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-time input:focus {
-    border-color: var(--bs-primary);
-    background: var(--bs-body-bg);
-    color: #ffffff !important;
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-time .flatpickr-time-separator {
-    color: #e9ecef !important;
-  }
-  
-  /* Better focus states */
-  .flatpickr-day:focus {
-    outline: 2px solid var(--bs-primary);
-    outline-offset: -2px;
-    z-index: 10;
-  }
-  
-  /* Animation for calendar appearance */
-  .flatpickr-calendar.open {
-    animation: flatpickr-slideDown 0.2s ease-out;
-  }
-  
-  @keyframes flatpickr-slideDown {
-    from {
-      opacity: 0;
-      transform: translateY(-10px) scale(0.98);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-  
-  /* Small alert styling */
-  .alert-sm {
-    padding: 0.5rem;
-    font-size: 0.875rem;
-  }
-  
-  /* Responsive adjustments - hide on smaller screens */
-  @media (max-width: 991.98px) {
-    .floating-creation-filter {
-      display: none !important;
-    }
-  }
-  
-  /* Flatpickr positioning and responsive adjustments */
-  .flatpickr-calendar.arrowTop:before,
-  .flatpickr-calendar.arrowTop:after {
-    border-bottom-color: var(--bs-border-color);
-  }
-  
-  .flatpickr-calendar.arrowBottom:before,
-  .flatpickr-calendar.arrowBottom:after {
-    border-top-color: var(--bs-border-color);
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-calendar.arrowTop:before,
-  [data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after {
-    border-bottom-color: var(--bs-border-color-translucent);
-  }
-  
-  [data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:before,
-  [data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after {
-    border-top-color: var(--bs-border-color-translucent);
-  }
-  
-  /* Ensure calendar stays within viewport on mobile */
-  @media (max-width: 576px) {
-    .flatpickr-calendar {
-      max-width: calc(100vw - 20px);
-      font-size: 14px;
-    }
-    
-    .flatpickr-day {
-      height: 35px;
-      line-height: 35px;
-    }
-    
-    .flatpickr-time input {
-      font-size: 14px;
-    }
-  }
-  
-  /* Improved accessibility */
-  .flatpickr-calendar {
-    font-family: inherit;
-  }
-  
-  .flatpickr-day[aria-label] {
-    position: relative;
-  }
-  
-  /* Smooth scroll behavior for time inputs */
-  .flatpickr-time input {
-    scroll-behavior: smooth;
-  }
-  
-  /* Enhanced visual feedback for interactive elements */
-  .flatpickr-prev-month,
-  .flatpickr-next-month {
-    border-radius: 4px;
-    padding: 4px;
-    margin: 2px;
-  }
-  
-  .flatpickr-prev-month:hover,
-  .flatpickr-next-month:hover {
-    background: rgba(var(--bs-primary-rgb), 0.1);
-  }
-
-  /* Relationship count styling */
-  .relationship-count .badge {
-    min-width: 80px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .relationship-count .spinner-border-sm {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-</style>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    // Initialize Flatpickr date range picker
-    const dateRangeInput = document.getElementById('floatingCreationFilterRange');
-    const startHidden = document.getElementById('creation_filter_start');
-    const endHidden = document.getElementById('creation_filter_end');
-    
-    if (dateRangeInput && typeof flatpickr !== 'undefined') {
-      console.log('Flatpickr library loaded, initializing date range picker');
-      // Store the Flatpickr instance in a variable accessible to all handlers
-      let fp;
-      
-      // Function to initialize Flatpickr
-      function initializeFlatpickr(theme) {
-        // Determine theme based on current document theme or passed parameter
-        const currentTheme = theme || (document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light');
-        
-        const config = {
-          mode: 'range',
-          enableTime: true,
-          dateFormat: 'Y-m-d H:i',
-          time_24hr: true,
-          allowInput: false,
-          clickOpens: true,
-          theme: currentTheme,
-          animate: true,
-          position: 'auto',
-          static: false,
-          appendTo: document.body, // Ensure it renders above other elements
-          locale: {
-            rangeSeparator: ' to ',
-            weekdays: {
-              shorthand: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-              longhand: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-            },
-            months: {
-              shorthand: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-              longhand: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-            }
-          },
-          onOpen: function(selectedDates, dateStr, instance) {
-            // Add a slight delay to apply theme-specific styling after calendar opens
-            setTimeout(() => {
-              const calendar = instance.calendarContainer;
-              if (calendar) {
-                // Apply theme-specific class for additional styling control
-                calendar.classList.add(`flatpickr-${currentTheme}`);
-                
-                // Ensure proper z-index for offcanvas overlay
-                calendar.style.zIndex = '1070';
-                
-                // Add elegant entrance animation
-                calendar.classList.add('open');
-              }
-            }, 10);
-          },
-          onClose: function(selectedDates, dateStr, instance) {
-            const calendar = instance.calendarContainer;
-            if (calendar) {
-              calendar.classList.remove('open');
-            }
-          },
-          onChange: function(selectedDates, dateStr, instance) {
-            console.log('Date range changed:', selectedDates);
-            
-            if (selectedDates.length === 2) {
-              // Format dates for hidden inputs (Rails expects ISO format)
-              startHidden.value = selectedDates[0].toISOString().slice(0, 16);
-              endHidden.value = selectedDates[1].toISOString().slice(0, 16);
-              
-              // Update display with elegant formatting
-              const formatOptions = {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: false
-              };
-              
-              const startFormatted = selectedDates[0].toLocaleDateString('en-US', formatOptions);
-              const endFormatted = selectedDates[1].toLocaleDateString('en-US', formatOptions);
-              dateRangeInput.value = `${startFormatted} to ${endFormatted}`;
-              
-            } else if (selectedDates.length === 1) {
-              startHidden.value = selectedDates[0].toISOString().slice(0, 16);
-              endHidden.value = '';
-              
-              const formatOptions = {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: false
-              };
-              
-              const startFormatted = selectedDates[0].toLocaleDateString('en-US', formatOptions);
-              dateRangeInput.value = `${startFormatted} (select end date)`;
-              
-            } else {
-              startHidden.value = '';
-              endHidden.value = '';
-              dateRangeInput.value = '';
-            }
-          }
-        };
-        
-        return flatpickr(dateRangeInput, config);
-      }
-      
-      // Initialize date range picker
-      fp = initializeFlatpickr();
-      
-      // Set initial values if they exist
-      if (startHidden.value || endHidden.value) {
-        const dates = [];
-        if (startHidden.value) {
-          dates.push(new Date(startHidden.value));
-        }
-        if (endHidden.value) {
-          dates.push(new Date(endHidden.value));
-        }
-        fp.setDate(dates);
-      }
-      
-      // Preset button functionality
-      const presetButtons = document.querySelectorAll('.preset-btn');
-      presetButtons.forEach(button => {
-        button.addEventListener('click', function(event) {
-          event.preventDefault(); // Prevent any form submission
-          
-          const preset = this.getAttribute('data-preset');
-          const now = new Date();
-          let startDate, endDate;
-          
-          console.log('Preset button clicked:', preset); // Debug log
-          
-          switch (preset) {
-            case 'lastminute':
-              startDate = new Date(now);
-              startDate.setMinutes(startDate.getMinutes() - 1);
-              endDate = new Date(now);
-              break;
-            case 'last5minutes':
-              startDate = new Date(now);
-              startDate.setMinutes(startDate.getMinutes() - 5);
-              endDate = new Date(now);
-              break;
-            case 'today':
-              startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
-              endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
-              break;
-            case 'yesterday':
-              const yesterday = new Date(now);
-              yesterday.setDate(yesterday.getDate() - 1);
-              startDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), 0, 0, 0);
-              endDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), 23, 59, 59);
-              break;
-            case 'last7days':
-              startDate = new Date(now);
-              startDate.setDate(startDate.getDate() - 7);
-              startDate.setHours(0, 0, 0, 0);
-              endDate = new Date(now);
-              endDate.setHours(23, 59, 59, 999);
-              break;
-            case 'last30days':
-              startDate = new Date(now);
-              startDate.setDate(startDate.getDate() - 30);
-              startDate.setHours(0, 0, 0, 0);
-              endDate = new Date(now);
-              endDate.setHours(23, 59, 59, 999);
-              break;
-            case 'thismonth':
-              startDate = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
-              endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
-              break;
-          }
-          
-          if (startDate && endDate && fp) {
-            console.log('Setting dates:', startDate, endDate); // Debug log
-            fp.setDate([startDate, endDate]);
-            
-            // Also update the hidden inputs directly as a fallback
-            startHidden.value = startDate.toISOString().slice(0, 16);
-            endHidden.value = endDate.toISOString().slice(0, 16);
-            
-            // Update the display value
-            const formattedStart = startDate.toLocaleDateString() + ' ' + startDate.toLocaleTimeString();
-            const formattedEnd = endDate.toLocaleDateString() + ' ' + endDate.toLocaleTimeString();
-            dateRangeInput.value = formattedStart + ' to ' + formattedEnd;
-          } else {
-            console.error('Failed to set dates - startDate:', startDate, 'endDate:', endDate, 'fp:', fp);
-          }
-        });
-      });
-      
-      // Listen for theme changes and update Flatpickr theme
-      document.addEventListener('dbviewerThemeChanged', function(e) {
-        const newTheme = e.detail.theme === 'dark' ? 'dark' : 'light';
-        console.log('Theme changed to:', newTheme);
-        
-        // Destroy and recreate with new theme
-        if (fp) {
-          const currentDates = fp.selectedDates;
-          fp.destroy();
-          fp = initializeFlatpickr(newTheme);
-          
-          // Restore previous values if they existed
-          if (currentDates && currentDates.length > 0) {
-            fp.setDate(currentDates);
-          }
-        }
-      });
-      
-      // Also listen for direct data-bs-theme attribute changes using MutationObserver
-      const themeObserver = new MutationObserver(function(mutations) {
-        mutations.forEach(function(mutation) {
-          if (mutation.type === 'attributes' && mutation.attributeName === 'data-bs-theme') {
-            const newTheme = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light';
-            console.log('Theme attribute changed to:', newTheme);
-            
-            if (fp) {
-              const currentDates = fp.selectedDates;
-              fp.destroy();
-              fp = initializeFlatpickr(newTheme);
-              
-              // Restore previous values if they existed
-              if (currentDates && currentDates.length > 0) {
-                fp.setDate(currentDates);
-              }
-            }
-          }
-        });
-      });
-      
-      // Start observing theme changes
-      themeObserver.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ['data-bs-theme']
-      });
-    } else {
-      console.error('Date range picker initialization failed:', {
-        dateRangeInput: !!dateRangeInput,
-        flatpickr: typeof flatpickr !== 'undefined'
-      });
-    }
-    
-    // Close offcanvas after form submission
-    const form = document.getElementById('floatingCreationFilterForm');
-    if (form) {
-      form.addEventListener('submit', function() {
-        const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('creationFilterOffcanvas'));
-        if (offcanvas) {
-          setTimeout(() => {
-            offcanvas.hide();
-          }, 100);
-        }
-      });
-    }
-  });
-</script>
 <% end %>
+<input type="hidden" id="mini_erd_table_path" name="mini_erd_table_path" value="<%= dbviewer.mini_erd_table_path(@table_name, format: :json) %>">
+<input type="hidden" id="table_name" name="table_name" value="<%= @table_name %>">