dbviewer 0.4.6 → 0.4.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9caec4627e8912e40d85d63c9105cdc80b2bae4227e145372693855a40fbc29
-  data.tar.gz: ca759885a1ec9522860d9926e1814f68457fa453832f7b3ea3298aa5c86222eb
+  metadata.gz: 61c23f612495654e7fba0280fd361cf872d668ea21618c74c95d05f4ea7fdb6a
+  data.tar.gz: eeea9728edb2716f44e66eb1851767a7e77cf38c53f3ee4c676fd3d1d9e3608d
 SHA512:
-  metadata.gz: d71176e418170a1d82439a1266687d6f125c27dd96dcf008fb05ccecc169d11dafb52f1c5940549e030f3487fe8c2408f73dda51e7ddae8e05b598cde621943f
-  data.tar.gz: cebdde38e2e4500a265b20b86d1e6daee3ed7ba95447b348635efb00e963f7d895b8f147ab94b2b8c50656940c74279ebfbd17a90ff3921341cec2a0121b84cd
+  metadata.gz: 6674c2063fb577a3468ded6ffab856bcc8092f5a6fa46a28eb727f3e6a140556401c05777a7bc4ab7dd9e2a78c90b4576800db5a6b724f31d6a1e8f649cc1392
+  data.tar.gz: 1714aa447da6c73754b4702e2114e63dca6c1dce5be4be790bd0b7ae89aa7972f9bbbfc54de588da5237f45ca69066f2fde1b50ae15017e0a52842c954ee9372

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/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/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/version.rb

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

metadata

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