dbviewer 0.5.3 → 0.5.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f8d59c15a88c9b63e2765f80b554c2b2a0a33f82fdb094e1ed6f86fdf8dde20
-  data.tar.gz: d2bbe1fd8acae50c791ab4c32a061c78abbee095001e1647e32b4af4e6918753
+  metadata.gz: 4d0b4fd21e1b0a48e17e9301cc629947f80a40e66b4e3f2120848eaffd50fa53
+  data.tar.gz: ab3fc815ced156f36e0640334c2ed304fd7c77b8c2b50d780b7c1a2d95ce2fd8
 SHA512:
-  metadata.gz: fcdf464a23ec52c45d85645ea0dcc9f57fe59c69b8452a68de7f000606d31d3e29c8b81ca237a228debc6884b57e8fb7a40500c1f02af550b3c5515456009ae5
-  data.tar.gz: 768b6cb0f7d67c0ecda6301c6a94471ad16a89f37c6164c8e4f976222f1e1f95720b17477e43811f4d9574c79c71e1f6e582471d0acf408b815aeba17b58c961
+  metadata.gz: 658597f5db20651fd6fbd40078adfe9b7dec956a2c1933b87e76523a0f33bca278fbcbf02f5c822f92202419bb0c80ec4b9af6b24f9e0a02ea092bed4894b7e0
+  data.tar.gz: 96fe5ec2d5f105fd6f041fb393092f39012b8708dcf18f915c2b2fe606e587280d286b766a1f211e01f40f7ed8a3be616826782bede4e28a676ee49b16146e75

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

@@ -33,12 +33,35 @@
         <div class="card-body p-0">
           <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 class="text-center" style="width: 100%; max-width: 500px;">
+                <div class="mb-4">
+                  <i class="bi bi-diagram-3 text-primary" style="font-size: 3rem;"></i>
                 </div>
-                <p>Generating Entity Relationship Diagram...</p>
-                <small class="text-muted">This may take a moment for databases with many tables</small>
+                <h5 class="mb-3">Generating Entity Relationship Diagram</h5>
+                <p id="loading-phase" class="mb-3">Initializing...</p>
+                
+                <!-- Progress bar for table loading -->
+                <div class="progress mb-3" style="height: 8px;">
+                  <div id="table-progress-bar" class="progress-bar bg-primary" role="progressbar" 
+                       style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+                  </div>
+                </div>
+                
+                <!-- Progress text -->
+                <div class="d-flex justify-content-between align-items-center mb-2">
+                  <small class="text-muted">Table Details</small>
+                  <small id="table-progress-text" class="text-muted">0 / 0</small>
+                </div>
+                
+                <!-- Relationships loading indicator -->
+                <div id="relationships-status" class="d-flex align-items-center justify-content-center mt-3">
+                  <div class="spinner-border spinner-border-sm text-secondary me-2" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                  <small class="text-muted">Loading relationships...</small>
+                </div>
+                
+                <small class="text-muted d-block mt-3">This may take a moment for databases with many tables</small>
               </div>
             </div>
             <!-- The ERD will be rendered here -->
@@ -175,11 +198,13 @@
         console.log('Relationships loaded:', data);
         relationships = data.relationships || [];
         relationshipsLoaded = true;
+        updateRelationshipsStatus(true);
         return relationships;
       })
       .catch(error => {
         console.error('Error fetching relationships:', error);
         relationshipsLoaded = true; // Mark as loaded even on error to prevent infinite loading
+        updateRelationshipsStatus(true);
         return [];
       });
     }
@@ -187,9 +212,48 @@
     // Function to update loading status
     function updateLoadingStatus(message) {
       const loadingElement = document.getElementById('erd-loading');
-      const loadingText = loadingElement.querySelector('p');
-      if (loadingText) {
-        loadingText.textContent = message;
+      const loadingPhase = document.getElementById('loading-phase');
+      if (loadingPhase) {
+        loadingPhase.textContent = message;
+      }
+    }
+    
+    // Function to update table loading progress
+    function updateTableProgress(loaded, total) {
+      const progressBar = document.getElementById('table-progress-bar');
+      const progressText = document.getElementById('table-progress-text');
+      
+      if (progressBar && progressText) {
+        const percentage = total > 0 ? Math.round((loaded / total) * 100) : 0;
+        progressBar.style.width = percentage + '%';
+        progressBar.setAttribute('aria-valuenow', percentage);
+        progressText.textContent = `${loaded} / ${total}`;
+        
+        // Update progress bar color based on completion
+        if (percentage === 100) {
+          progressBar.classList.remove('bg-primary');
+          progressBar.classList.add('bg-success');
+        }
+      }
+    }
+    
+    // Function to update relationships status
+    function updateRelationshipsStatus(loaded) {
+      const relationshipsStatus = document.getElementById('relationships-status');
+      if (relationshipsStatus) {
+        if (loaded) {
+          relationshipsStatus.innerHTML = `
+            <i class="bi bi-check-circle text-success me-2"></i>
+            <small class="text-success">Relationships loaded</small>
+          `;
+        } else {
+          relationshipsStatus.innerHTML = `
+            <div class="spinner-border spinner-border-sm text-secondary me-2" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+            <small class="text-muted">Loading relationships...</small>
+          `;
+        }
       }
     }
     
@@ -203,8 +267,12 @@
     let columnsLoadedCount = 0;
     const totalTables = tables.length;
     
+    // Initialize progress bar
+    updateTableProgress(0, totalTables);
+    updateLoadingStatus('Loading table details...');
+    
     // Start fetching relationships immediately
-    updateLoadingStatus('Loading database relationships...');
+    updateRelationshipsStatus(false);
     const relationshipsPromise = fetchRelationships();
     
     // First pass: add all tables with minimal info and start loading columns
@@ -227,8 +295,8 @@
           tableColumns[tableName] = data.columns;
           columnsLoadedCount++;
           
-          // Update loading status
-          updateLoadingStatus(`Loading table details... (${columnsLoadedCount}/${totalTables} tables)`);
+          // Update progress bar
+          updateTableProgress(columnsLoadedCount, totalTables);
           
           checkIfReadyToUpdate();
         }
@@ -236,6 +304,7 @@
       .catch(error => {
         console.error(`Error fetching columns for table ${tableName}:`, error);
         columnsLoadedCount++;
+        updateTableProgress(columnsLoadedCount, totalTables);
         checkIfReadyToUpdate();
       });
     });
@@ -261,9 +330,9 @@
       if (isUpdatingDiagram) return;
       
       isUpdatingDiagram = true;
-      console.log('Updating diagram with full column and relationship data');
+      console.log('Rendering diagram with full column and relationship data');
       
-      updateLoadingStatus('Generating diagram...');
+      updateLoadingStatus('Generating final diagram...');
       
       // Regenerate the diagram with complete data
       let updatedDefinition = 'erDiagram\n';
@@ -289,43 +358,33 @@
         updatedDefinition += '  %% No relationships found in the database schema\n';
       }
       
-      // Create a new diagram element
-      const updatedErdDiv = document.createElement('div');
-      updatedErdDiv.className = 'mermaid';
-      updatedErdDiv.innerHTML = updatedDefinition;
+      // Create the diagram element
+      const erdDiv = document.createElement('div');
+      erdDiv.className = 'mermaid';
+      erdDiv.innerHTML = updatedDefinition;
       
-      // Get the container but don't clear it yet
-      const container = document.getElementById('erd-container');
-      
-      // First, clean up any previous zoom instance
-      if (panZoomInstance) {
-        panZoomInstance.destroy();
-        panZoomInstance = null;
-      }
-      
-      // Create a temporary container
+      // Create a temporary container for rendering
       const tempContainer = document.createElement('div');
       tempContainer.style.visibility = 'hidden';
       tempContainer.style.position = 'absolute';
       tempContainer.style.width = '100%';
-      tempContainer.appendChild(updatedErdDiv);
+      tempContainer.appendChild(erdDiv);
       document.body.appendChild(tempContainer);
       
-      // Render in the temporary container first
-      mermaid.init(undefined, updatedErdDiv).then(function() {
-        console.log('Diagram fully updated with all data');
+      // Render the diagram in the temporary container
+      mermaid.init(undefined, erdDiv).then(function() {
+        console.log('Diagram fully rendered with all data');
         
-        // Clear original container and move the rendered content
         try {
           // Remove from temp container without destroying
-          tempContainer.removeChild(updatedErdDiv);
+          tempContainer.removeChild(erdDiv);
           
           // Hide loading indicator
           document.getElementById('erd-loading').style.display = 'none';
           
           // Clear main container and add the diagram
           container.innerHTML = '';
-          container.appendChild(updatedErdDiv);
+          container.appendChild(erdDiv);
           
           // Remove temp container
           document.body.removeChild(tempContainer);
@@ -342,101 +401,16 @@
           isUpdatingDiagram = false;
         }
       }).catch(function(error) {
-        console.error('Error rendering updated diagram:', error);
+        console.error('Error rendering diagram:', error);
         document.body.removeChild(tempContainer);
         isUpdatingDiagram = false;
-        showError('Error rendering diagram', 'There was an error updating the diagram with complete data.', error.message);
+        showError('Error rendering diagram', 'There was an error rendering the entity relationship diagram.', error.message);
       });
     }
     
-    // Add initial relationships placeholder (empty)
-    mermaidDefinition += '  %% Relationships loading...\n';
-    
-    // Create a div for the initial diagram (shows immediately with table names only)
-    const erdDiv = document.createElement('div');
-    erdDiv.className = 'mermaid';
-    erdDiv.innerHTML = mermaidDefinition;
-    
     // Get the container reference for later use
     const container = document.getElementById('erd-container');
     
-    // Create a temporary container for initial rendering
-    const tempInitContainer = document.createElement('div');
-    tempInitContainer.style.visibility = 'hidden';
-    tempInitContainer.style.position = 'absolute';
-    tempInitContainer.style.width = '100%';
-    tempInitContainer.appendChild(erdDiv);
-    document.body.appendChild(tempInitContainer);
-    
-    // Update loading status for initial render
-    updateLoadingStatus('Rendering initial diagram...');
-    
-    // Render the initial diagram in the temporary container
-    mermaid.init(undefined, erdDiv).then(function() {
-      try {
-        // Remove from temp container without destroying
-        tempInitContainer.removeChild(erdDiv);
-        
-        // Hide the loading indicator temporarily (will show updated loading for data fetching)
-        document.getElementById('erd-loading').style.display = 'none';
-        
-        // Add the rendered diagram to the main container
-        container.appendChild(erdDiv);
-        
-        // Remove temp container
-        document.body.removeChild(tempInitContainer);
-        
-        // Setup initial zoom controls
-        setTimeout(() => {
-          setupZoomControls();
-          // Show a subtle loading indicator that data is still loading
-          showDataLoadingIndicator();
-        }, 100);
-      } catch(err) {
-        console.error('Error moving initial diagram to container:', err);
-      }
-    }).catch(function(error) {
-      console.error('Error rendering initial diagram:', error);
-      document.body.removeChild(tempInitContainer);
-      showError('Error generating diagram', 'There was an error generating the initial entity relationship diagram.', error.message);
-    });
-    
-    // Function to show a subtle loading indicator for data loading
-    function showDataLoadingIndicator() {
-      // Create a small loading badge in the top-right corner
-      const loadingBadge = document.createElement('div');
-      loadingBadge.id = 'data-loading-badge';
-      loadingBadge.className = 'position-absolute top-0 end-0 m-3';
-      loadingBadge.style.zIndex = '1000';
-      loadingBadge.innerHTML = `
-        <div class="badge bg-info d-flex align-items-center">
-          <div class="spinner-border spinner-border-sm me-2" role="status" style="width: 0.8rem; height: 0.8rem;">
-            <span class="visually-hidden">Loading...</span>
-          </div>
-          Loading details...
-        </div>
-      `;
-      
-      container.style.position = 'relative';
-      container.appendChild(loadingBadge);
-      
-      // Remove the badge when data loading is complete
-      const checkComplete = () => {
-        if (columnsLoadedCount === totalTables && relationshipsLoaded) {
-          setTimeout(() => {
-            const badge = document.getElementById('data-loading-badge');
-            if (badge) {
-              badge.remove();
-            }
-          }, 500); // Small delay to show completion
-        } else {
-          setTimeout(checkComplete, 500);
-        }
-      };
-      
-      setTimeout(checkComplete, 1000);
-    }
-    
     // SVG Pan Zoom instance
     let panZoomInstance = null;
     

data/lib/dbviewer/version.rb

@@ -1,3 +1,3 @@
 module Dbviewer
-  VERSION = "0.5.3"
+  VERSION = "0.5.4"
 end

metadata

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