dbviewer 0.4.6 → 0.4.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9caec4627e8912e40d85d63c9105cdc80b2bae4227e145372693855a40fbc29
-  data.tar.gz: ca759885a1ec9522860d9926e1814f68457fa453832f7b3ea3298aa5c86222eb
+  metadata.gz: 03dfb13567e8cf7a2eaf2977e421fec7a2117ff12a6462515399a4b7cfb056d1
+  data.tar.gz: 77ae23ada80eabbc1a5744376a96c0d5df4f20f0cb3723be4c0f9c9967994716
 SHA512:
-  metadata.gz: d71176e418170a1d82439a1266687d6f125c27dd96dcf008fb05ccecc169d11dafb52f1c5940549e030f3487fe8c2408f73dda51e7ddae8e05b598cde621943f
-  data.tar.gz: cebdde38e2e4500a265b20b86d1e6daee3ed7ba95447b348635efb00e963f7d895b8f147ab94b2b8c50656940c74279ebfbd17a90ff3921341cec2a0121b84cd
+  metadata.gz: 35d69706133dc764c081a6bc172dc0d99f39c2eaa7d62db9c17664c5a1fe05b78255932bd14a3f9a9542e99cb74020cb2926d69c9d21d9a339776fc4023098e9
+  data.tar.gz: b3a4e2029d81da79e922fb5ee0e889fc9e1f66e66129136333f6820d66dbc1dd7648da63a4ab99d3ed822e8cc64c77e9815a1c1bd34b4d0a11b208118d2eb72c

data/README.md

@@ -92,23 +92,10 @@ Rails.application.routes.draw do
 
   # Mount the DBViewer engine
   mount Dbviewer::Engine, at: "/dbviewer"
-  # The engine can be mounted in any environment when using Basic Authentication
 end
 ```
 
-Configure Basic Authentication in an initializer to secure access (strongly recommended):
-
-```ruby
-# config/initializers/dbviewer.rb
-Dbviewer.configure do |config|
-  config.admin_credentials = {
-    username: "your_username",
-    password: "your_secure_password"
-  }
-end
-```
-
-Then, visit `/dbviewer` in your browser to access the database viewer. You'll be prompted for your username and password.
+Then, visit `/dbviewer` in your browser to access the database viewer.
 
 ### Rails API-only Applications
 
@@ -136,37 +123,6 @@ This is necessary because API-only Rails applications don't include the Flash mi
 - **ERD View** (`/dbviewer/entity_relationship_diagrams`): Interactive Entity Relationship Diagram of your database
 - **SQL Query Logs** (`/dbviewer/logs`): View and analyze logged SQL queries with performance metrics
 
-## 🤝🏻 Extending DBViewer
-
-### Adding Custom Functionality
-
-You can extend the database manager with custom methods:
-
-```ruby
-# config/initializers/dbviewer_extensions.rb
-Rails.application.config.to_prepare do
-  Dbviewer::DatabaseManager.class_eval do
-    def table_statistics(table_name)
-      # Your custom code to generate table statistics
-      {
-        avg_row_size: calculate_avg_row_size(table_name),
-        last_updated: last_updated_timestamp(table_name)
-      }
-    end
-
-    private
-
-    def calculate_avg_row_size(table_name)
-      # Implementation...
-    end
-
-    def last_updated_timestamp(table_name)
-      # Implementation...
-    end
-  end
-end
-```
-
 ## ⚙️ Configuration Options
 
 You can configure DBViewer by using our generator to create an initializer in your application:

data/app/controllers/dbviewer/tables_controller.rb

@@ -103,11 +103,9 @@ module Dbviewer
       @current_page = [ 1, params[:page].to_i ].max
       @per_page = params[:per_page] ? params[:per_page].to_i : self.class.default_per_page
       @per_page = self.class.default_per_page unless self.class.per_page_options.include?(@per_page)
-      @order_by = params[:order_by].presence ||
-                  database_manager.primary_key(@table_name).presence ||
-                  (@columns.first ? @columns.first[:name] : nil)
+      @order_by = params[:order_by].presence || determine_default_order_column
       @order_direction = params[:order_direction].upcase if params[:order_direction].present?
-      @order_direction = "ASC" unless self.class::VALID_SORT_DIRECTIONS.include?(@order_direction)
+      @order_direction = "DESC" unless self.class::VALID_SORT_DIRECTIONS.include?(@order_direction)
       @column_filters = params[:column_filters].presence ? params[:column_filters].to_enum.to_h : {}
     end
 
@@ -158,5 +156,23 @@ module Dbviewer
         end
       end
     end
+
+    # Determine the default order column using configurable ordering logic
+    def determine_default_order_column
+      # Get the table columns to check what's available
+      columns = @columns || fetch_table_columns(@table_name)
+      column_names = columns.map { |col| col[:name] }
+
+      # Try the configured default order column first
+      default_column = Dbviewer.configuration.default_order_column
+      return default_column if default_column && column_names.include?(default_column)
+
+      # Fall back to primary key
+      primary_key = database_manager.primary_key(@table_name)
+      return primary_key if primary_key.present?
+
+      # Final fallback to first column
+      columns.first ? columns.first[:name] : nil
+    end
   end
 end

data/app/views/dbviewer/entity_relationship_diagrams/index.html.erb

@@ -31,16 +31,22 @@
           </div>
         </div>
         <div class="card-body p-0">
-          <div id="erd-container" class="w-100 h-100">
-            <div id="erd-loading" class="d-flex justify-content-center align-items-center h-100">
+          <div id="erd-container" class="w-100 h-100" style="min-height: 450px;">
+            <div id="erd-loading" class="d-flex justify-content-center align-items-center h-100" style="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 Entity Relationship Diagram...</p>
+                <small class="text-muted">This may take a moment for databases with many tables</small>
               </div>
             </div>
             <!-- The ERD will be rendered here -->
+            <div id="erd-error" class="alert alert-danger m-3 d-none">
+              <h5>Error generating diagram</h5>
+              <p id="erd-error-message">There was an error rendering the entity relationship diagram.</p>
+              <pre id="erd-error-details" class="bg-light p-2 small mt-2 d-none"></pre>
+            </div>
           </div>
         </div>
       </div>
@@ -55,10 +61,17 @@
 
 <script>
   document.addEventListener('DOMContentLoaded', function() {
-    // Initialize mermaid
+    // Check if mermaid is loaded first
+    if (typeof mermaid === 'undefined') {
+      console.error('Mermaid library not loaded!');
+      showError('Mermaid library not loaded', 'The diagram library could not be loaded. Please check your internet connection and try again.');
+      return;
+    }
+    
+    // Initialize mermaid with theme detection like mini ERD
     mermaid.initialize({
       startOnLoad: true,
-      theme: 'neutral',
+      theme: document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'default',
       securityLevel: 'loose',
       er: {
         diagramPadding: 20,
@@ -72,6 +85,34 @@
       }
     });
     
+    // Function to show error messages
+    function showError(title, message, details = '') {
+      const errorContainer = document.getElementById('erd-error');
+      const errorMessage = document.getElementById('erd-error-message');
+      const errorDetails = document.getElementById('erd-error-details');
+      const loadingIndicator = document.getElementById('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');
+      }
+    }
+    
     // ER Diagram download functionality
     let diagramReady = false;
     
@@ -235,6 +276,7 @@
           console.error('Error rendering updated diagram:', error);
           document.body.removeChild(tempContainer);
           isUpdatingDiagram = false;
+          showError('Error rendering diagram', 'There was an error updating the diagram with complete data.', error.message);
         });
       }
     }
@@ -291,8 +333,7 @@
     }).catch(function(error) {
       console.error('Error rendering diagram:', error);
       document.body.removeChild(tempInitContainer);
-      document.getElementById('erd-loading').innerHTML = 
-        '<div class="alert alert-danger">Error generating diagram. Please try again or check console for details.</div>';
+      showError('Error generating diagram', 'There was an error generating the entity relationship diagram.', error.message);
     });
     
     // SVG Pan Zoom instance
@@ -504,7 +545,6 @@
     overflow: auto;
     height: calc(100vh - 125px);
     padding: 20px;
-    /* background-color: #fafafa; */
     position: relative;
   }
   
@@ -514,6 +554,37 @@
     min-width: 100%;
   }
   
+  /* Loading state styling */
+  #erd-loading {
+    background-color: var(--bs-body-bg);
+  }
+  
+  #erd-loading .text-center p {
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+  }
+  
+  #erd-loading .text-center small {
+    font-size: 0.875rem;
+  }
+  
+  /* Error state styling */
+  #erd-error {
+    max-width: 600px;
+    margin: 2rem auto;
+  }
+  
+  #erd-error h5 {
+    color: var(--bs-danger);
+    margin-bottom: 0.75rem;
+  }
+  
+  #erd-error-details {
+    font-size: 0.8rem;
+    max-height: 150px;
+    overflow-y: auto;
+  }
+  
   /* SVG Pan Zoom styles */
   .svg-pan-zoom_viewport {
     transition: 0.2s;
@@ -539,10 +610,67 @@
     font-size: 20px !important;
   }
   
+  /* Dark mode overrides - comprehensive styling like mini ERD */
+  [data-bs-theme="dark"] .entityBox {
+    fill: #2D3748;
+    stroke: #6ea8fe;
+  }
+  
+  [data-bs-theme="dark"] .entityLabel, 
+  [data-bs-theme="dark"] .mermaid .label {
+    color: #f8f9fa;
+  }
+  
+  [data-bs-theme="dark"] #erd-error-details {
+    background-color: var(--bs-dark) !important;
+    color: var(--bs-light);
+    border-color: var(--bs-border-color);
+  }
+  
+  /* Dark mode: Update mermaid diagram elements */
+  [data-bs-theme="dark"] .mermaid .er .entityBox {
+    fill: #2D3748 !important;
+    stroke: #6ea8fe !important;
+    stroke-width: 1.5px !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid .er .entityLabel {
+    fill: #f8f9fa !important;
+    color: #f8f9fa !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid .er .relationshipLine {
+    stroke: #6ea8fe !important;
+    stroke-width: 2px !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid .er .relationshipLabel {
+    fill: #f8f9fa !important;
+    color: #f8f9fa !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid .er .attributeBoxEven,
+  [data-bs-theme="dark"] .mermaid .er .attributeBoxOdd {
+    fill: #374151 !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid text {
+    fill: #f8f9fa !important;
+  }
+  
+  /* Loading indicator dark mode */
+  [data-bs-theme="dark"] #erd-loading {
+    background-color: var(--bs-dark);
+    color: var(--bs-light);
+  }
+  
+  [data-bs-theme="dark"] #erd-loading .spinner-border {
+    color: #6ea8fe;
+  }
+  
   /* Zoom percentage display styling */
   #zoomPercentage {
     font-size: 0.9rem;
-    /* color: #495057; */
     font-weight: 500;
     width: 45px;
     display: inline-block;
@@ -557,4 +685,17 @@
   .mermaid .er.relationshipLabel {
     font-size: 20px !important;
   }
+  
+  /* Enhanced table highlighting for current table */
+  .current-table-highlight rect {
+    fill: var(--bs-primary-bg-subtle) !important;
+    stroke: var(--bs-primary) !important;
+    stroke-width: 2px !important;
+  }
+  
+  [data-bs-theme="dark"] .current-table-highlight rect {
+    fill: #2c3034 !important;
+    stroke: #6ea8fe !important;
+    stroke-width: 2px !important;
+  }
 </style>

data/app/views/dbviewer/home/index.html.erb

@@ -400,73 +400,173 @@ document.addEventListener('DOMContentLoaded', function() {
 </script>
 
 <style>
+  /* ================================================
+     CSS Custom Properties (CSS Variables)
+     ================================================ */
+  :root {
+    /* Colors */
+    --dbviewer-code-bg: rgba(0, 0, 0, 0.05);
+    --dbviewer-code-border: rgba(0, 0, 0, 0.1);
+    --dbviewer-muted-color: #6c757d;
+    --dbviewer-success-color: #28a745;
+    --dbviewer-danger-color: #dc3545;
+    --dbviewer-warning-color: #ffc107;
+    
+    /* Skeleton loader colors */
+    --skeleton-base-color: #f0f0f0;
+    --skeleton-highlight-color: #e0e0e0;
+    
+    /* Typography */
+    --dbviewer-monospace-font: 'Courier New', Courier, monospace;
+    --dbviewer-code-font-size: 0.85rem;
+    
+    /* Spacing and sizing */
+    --dbviewer-border-radius: 4px;
+    --dbviewer-border-radius-sm: 3px;
+    --dbviewer-padding-sm: 2px 4px;
+  }
+
+  /* ================================================
+     Dark Mode Support
+     ================================================ */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --dbviewer-code-bg: rgba(255, 255, 255, 0.1);
+      --dbviewer-code-border: rgba(255, 255, 255, 0.15);
+      --dbviewer-muted-color: #adb5bd;
+      --skeleton-base-color: #2a2a2a;
+      --skeleton-highlight-color: #404040;
+    }
+  }
+
+  /* Bootstrap dark mode support */
+  [data-bs-theme="dark"] {
+    --dbviewer-code-bg: rgba(255, 255, 255, 0.1);
+    --dbviewer-code-border: rgba(255, 255, 255, 0.15);
+    --dbviewer-muted-color: #adb5bd;
+    --skeleton-base-color: #2a2a2a;
+    --skeleton-highlight-color: #404040;
+  }
+
+  /* ================================================
+     SQL Query Styling
+     ================================================ */
   .sql-query-code {
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 0.85rem;
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 2px 4px;
-    border-radius: 3px;
+    font-family: var(--dbviewer-monospace-font);
+    font-size: var(--dbviewer-code-font-size);
+    background-color: var(--dbviewer-code-bg);
+    padding: var(--dbviewer-padding-sm);
+    border-radius: var(--dbviewer-border-radius-sm);
+    border: 1px solid var(--dbviewer-code-border);
+    transition: background-color 0.2s ease, border-color 0.2s ease;
   }
-  
+
+  .sql-query-code:hover {
+    background-color: var(--dbviewer-code-bg);
+    filter: brightness(0.95);
+  }
+
+  /* ================================================
+     Query Performance Indicators
+     ================================================ */
   .query-duration {
-    color: #28a745;
+    color: var(--dbviewer-success-color);
     font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    transition: color 0.2s ease;
   }
   
   .query-duration-slow {
-    color: #dc3545;
+    color: var(--dbviewer-danger-color);
     font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    transition: color 0.2s ease;
   }
   
   .query-timestamp {
-    color: #6c757d;
+    color: var(--dbviewer-muted-color);
+    font-variant-numeric: tabular-nums;
+    transition: color 0.2s ease;
   }
-  
+
+  /* ================================================
+     Empty States and Messages
+     ================================================ */
   .empty-data-message {
-    color: #6c757d;
+    color: var(--dbviewer-muted-color);
+    transition: color 0.2s ease;
   }
-  
-  /* Loading animations */
+
+  .empty-data-message p {
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+  }
+
+  .empty-data-message small {
+    opacity: 0.8;
+  }
+
+  /* ================================================
+     Loading States
+     ================================================ */
   .spinner-border-sm {
     width: 1rem;
     height: 1rem;
   }
-  
-  /* Skeleton loader styles */
+
+  /* ================================================
+     Skeleton Loader System
+     ================================================ */
   .skeleton-loader {
     display: inline-block;
     height: 1.2em;
     width: 100%;
-    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
+    background: linear-gradient(
+      90deg, 
+      var(--skeleton-base-color) 25%, 
+      var(--skeleton-highlight-color) 37%, 
+      var(--skeleton-base-color) 63%
+    );
     background-size: 400% 100%;
     animation: skeleton-loading 1.2s ease-in-out infinite;
-    border-radius: 4px;
+    border-radius: var(--dbviewer-border-radius);
   }
-  .number-loader {
+
+  /* Skeleton loader variants */
+  .skeleton-loader.number-loader {
     width: 2.5em;
     height: 1.5em;
     margin-bottom: 0.2em;
   }
-  .table-cell-loader {
+
+  .skeleton-loader.table-cell-loader {
     width: 6em;
     height: 1.2em;
   }
-  .records-loader {
+
+  .skeleton-loader.records-loader {
     width: 3em;
     height: 1.2em;
   }
-  .query-cell-loader {
+
+  .skeleton-loader.query-cell-loader {
     width: 12em;
     height: 1.2em;
   }
-  .duration-cell-loader {
+
+  .skeleton-loader.duration-cell-loader {
     width: 4em;
     height: 1.2em;
   }
-  .time-cell-loader {
+
+  .skeleton-loader.time-cell-loader {
     width: 7em;
     height: 1.2em;
   }
+
+  /* ================================================
+     Animations
+     ================================================ */
   @keyframes skeleton-loading {
     0% {
       background-position: 100% 50%;
@@ -475,4 +575,58 @@ document.addEventListener('DOMContentLoaded', function() {
       background-position: 0 50%;
     }
   }
+
+  /* ================================================
+     Table Enhancements
+     ================================================ */
+  .table-hover tbody tr:hover .sql-query-code {
+    background-color: var(--dbviewer-code-bg);
+    filter: brightness(0.9);
+  }
+
+  /* ================================================
+     Responsive Design
+     ================================================ */
+  @media (max-width: 768px) {
+    .sql-query-code {
+      font-size: 0.75rem;
+      padding: 1px 3px;
+    }
+    
+    .query-cell-loader {
+      width: 8em;
+    }
+    
+    .duration-cell-loader {
+      width: 3em;
+    }
+    
+    .time-cell-loader {
+      width: 5em;
+    }
+  }
+
+  /* ================================================
+     Accessibility Improvements
+     ================================================ */
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton-loader {
+      animation: none;
+      background: var(--skeleton-base-color);
+    }
+    
+    .sql-query-code,
+    .query-duration,
+    .query-duration-slow,
+    .query-timestamp,
+    .empty-data-message {
+      transition: none;
+    }
+  }
+
+  /* Focus states for better keyboard navigation */
+  .sql-query-code:focus-visible {
+    outline: 2px solid var(--dbviewer-success-color);
+    outline-offset: 2px;
+  }
 </style>

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

@@ -836,7 +836,7 @@
             <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-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">
@@ -977,53 +977,100 @@
               try {
                 const svgElement = container.querySelector('svg');
                 if (svgElement && typeof svgPanZoom !== 'undefined') {
-                  // Make SVG take the full container width
+                  // Make SVG take the full container width and ensure it has valid dimensions
                   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);
+                  // 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
+              // 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, '_');
@@ -1100,10 +1147,22 @@
         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
+            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
         }
       });
       

data/lib/dbviewer/configuration.rb

@@ -38,6 +38,9 @@ module Dbviewer
     # @example { username: 'admin', password: 'secret' }
     attr_accessor :admin_credentials
 
+    # Default column to order table details by (e.g., 'updated_at')
+    attr_accessor :default_order_column
+
     def initialize
       @per_page_options = [ 10, 20, 50, 100 ]
       @default_per_page = 20
@@ -51,6 +54,7 @@ module Dbviewer
       @max_memory_queries = 1000
       @enable_query_logging = true
       @admin_credentials = nil
+      @default_order_column = "updated_at"
     end
   end
 end

data/lib/dbviewer/version.rb

@@ -1,3 +1,3 @@
 module Dbviewer
-  VERSION = "0.4.6"
+  VERSION = "0.4.8"
 end

data/lib/generators/dbviewer/templates/initializer.rb

@@ -15,4 +15,7 @@ Dbviewer.configure do |config|
 
   # Authentication options
   # config.admin_credentials = { username: "admin", password: "your_secure_password" } # Basic HTTP auth credentials
+
+  # Default table ordering options
+  config.default_order_column = "updated_at"  # Primary column to order by
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dbviewer
 version: !ruby/object:Gem::Version
-  version: 0.4.6
+  version: 0.4.8
 platform: ruby
 authors:
 - Wailan Tirajoh