dbviewer 0.5.2 → 0.5.4

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 -->
@@ -150,9 +173,89 @@
     
     // Generate the ERD diagram
     const tables = <%= raw @tables.to_json %>;
-    const relationships = <%= raw @table_relationships.to_json %>;
-
-    console.log(tables, relationships)
+    
+    console.log('Tables:', tables);
+    
+    // Initialize empty relationships - will be loaded asynchronously
+    let relationships = [];
+    let relationshipsLoaded = false;
+    
+    // Function to fetch relationships asynchronously
+    function fetchRelationships() {
+      return fetch('<%= dbviewer.relationships_api_entity_relationship_diagrams_path %>', {
+        headers: {
+          'Accept': 'application/json',
+          'X-Requested-With': 'XMLHttpRequest'
+        }
+      })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then(data => {
+        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 [];
+      });
+    }
+    
+    // Function to update loading status
+    function updateLoadingStatus(message) {
+      const loadingElement = document.getElementById('erd-loading');
+      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>
+          `;
+        }
+      }
+    }
     
     // Create the ER diagram definition in Mermaid syntax
     let mermaidDefinition = 'erDiagram\n';
@@ -160,7 +263,19 @@
     // We'll store table column data here as we fetch it
     const tableColumns = {};
     
-    // First pass: add all tables with minimal info
+    // Track loading progress
+    let columnsLoadedCount = 0;
+    const totalTables = tables.length;
+    
+    // Initialize progress bar
+    updateTableProgress(0, totalTables);
+    updateLoadingStatus('Loading table details...');
+    
+    // Start fetching relationships immediately
+    updateRelationshipsStatus(false);
+    const relationshipsPromise = fetchRelationships();
+    
+    // First pass: add all tables with minimal info and start loading columns
     tables.forEach(function(table) {
       const tableName = table.name;
       mermaidDefinition += `  ${tableName} {\n`;
@@ -178,164 +293,124 @@
       .then(data => {
         if (data && data.columns) {
           tableColumns[tableName] = data.columns;
-          updateDiagramWithColumns();
+          columnsLoadedCount++;
+          
+          // Update progress bar
+          updateTableProgress(columnsLoadedCount, totalTables);
+          
+          checkIfReadyToUpdate();
         }
       })
       .catch(error => {
         console.error(`Error fetching columns for table ${tableName}:`, error);
+        columnsLoadedCount++;
+        updateTableProgress(columnsLoadedCount, totalTables);
+        checkIfReadyToUpdate();
       });
     });
     
+    // Function to check if we're ready to update the diagram with full data
+    function checkIfReadyToUpdate() {
+      if (columnsLoadedCount === totalTables && relationshipsLoaded) {
+        updateDiagramWithFullData();
+      }
+    }
+    
+    // Wait for relationships to load and check if ready
+    relationshipsPromise.finally(() => {
+      checkIfReadyToUpdate();
+    });
+    
     // Track if we're currently updating the diagram
     let isUpdatingDiagram = false;
     
-    // Function to update the diagram once we have columns
-    function updateDiagramWithColumns() {
+    // Function to update the diagram once we have all data
+    function updateDiagramWithFullData() {
       // Prevent multiple simultaneous updates
       if (isUpdatingDiagram) return;
       
-      // Check if we have all the tables loaded
-      if (Object.keys(tableColumns).length === tables.length) {
-        isUpdatingDiagram = true;
-        console.log('Updating diagram with full column data');
-        
-        // Regenerate the diagram with complete column data
-        let updatedDefinition = 'erDiagram\n';
+      isUpdatingDiagram = true;
+      console.log('Rendering diagram with full column and relationship data');
+      
+      updateLoadingStatus('Generating final diagram...');
+      
+      // Regenerate the diagram with complete data
+      let updatedDefinition = 'erDiagram\n';
+      
+      tables.forEach(function(table) {
+        const tableName = table.name;
+        updatedDefinition += `  ${tableName} {\n`;
         
-        tables.forEach(function(table) {
-          const tableName = table.name;
-          updatedDefinition += `  ${tableName} {\n`;
-          
-          const columns = tableColumns[tableName] || [];
-          columns.forEach(column => {
-            updatedDefinition += `    ${column.type || 'string'} ${column.name}\n`;
-          });
-          
-          updatedDefinition += '  }\n';
+        const columns = tableColumns[tableName] || [];
+        columns.forEach(column => {
+          updatedDefinition += `    ${column.type || 'string'} ${column.name}\n`;
         });
         
-        // Add relationships
-        if (relationships && relationships.length > 0) {
-          relationships.forEach(function(rel) {
-            updatedDefinition += `  ${rel.from_table} }|--|| ${rel.to_table} : "${rel.from_column} → ${rel.to_column}"\n`;
-          });
-        } else {
-          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;
-        
-        // 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
-        const tempContainer = document.createElement('div');
-        tempContainer.style.visibility = 'hidden';
-        tempContainer.style.position = 'absolute';
-        tempContainer.style.width = '100%';
-        tempContainer.appendChild(updatedErdDiv);
-        document.body.appendChild(tempContainer);
+        updatedDefinition += '  }\n';
+      });
+      
+      // Add relationships
+      if (relationships && relationships.length > 0) {
+        relationships.forEach(function(rel) {
+          updatedDefinition += `  ${rel.from_table} }|--|| ${rel.to_table} : "${rel.from_column} → ${rel.to_column}"\n`;
+        });
+      } else {
+        updatedDefinition += '  %% No relationships found in the database schema\n';
+      }
+      
+      // Create the diagram element
+      const erdDiv = document.createElement('div');
+      erdDiv.className = 'mermaid';
+      erdDiv.innerHTML = updatedDefinition;
+      
+      // 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(erdDiv);
+      document.body.appendChild(tempContainer);
+      
+      // Render the diagram in the temporary container
+      mermaid.init(undefined, erdDiv).then(function() {
+        console.log('Diagram fully rendered with all data');
         
-        // Render in the temporary container first
-        mermaid.init(undefined, updatedErdDiv).then(function() {
-          console.log('Diagram fully updated with column data');
+        try {
+          // Remove from temp container without destroying
+          tempContainer.removeChild(erdDiv);
           
-          // Clear original container and move the rendered content
-          try {
-            // Remove from temp container without destroying
-            tempContainer.removeChild(updatedErdDiv);
-            
-            // Clear main container and add the diagram
-            container.innerHTML = '';
-            container.appendChild(updatedErdDiv);
-            
-            // Remove temp container
-            document.body.removeChild(tempContainer);
-            
-            // Wait a bit for the DOM to stabilize before initializing pan-zoom
-            setTimeout(() => {
-              setupZoomControls();
-              // Mark diagram as ready for download
-              diagramReady = true;
-              isUpdatingDiagram = false;
-            }, 100);
-          } catch(err) {
-            console.error('Error moving diagram to container:', err);
-            isUpdatingDiagram = false;
-          }
-        }).catch(function(error) {
-          console.error('Error rendering updated diagram:', error);
+          // Hide loading indicator
+          document.getElementById('erd-loading').style.display = 'none';
+          
+          // Clear main container and add the diagram
+          container.innerHTML = '';
+          container.appendChild(erdDiv);
+          
+          // Remove temp container
           document.body.removeChild(tempContainer);
+          
+          // Wait a bit for the DOM to stabilize before initializing pan-zoom
+          setTimeout(() => {
+            setupZoomControls();
+            // Mark diagram as ready for download
+            diagramReady = true;
+            isUpdatingDiagram = false;
+          }, 100);
+        } catch(err) {
+          console.error('Error moving diagram to container:', err);
           isUpdatingDiagram = false;
-          showError('Error rendering diagram', 'There was an error updating the diagram with complete data.', error.message);
-        });
-      }
-    }
-    
-    // Add relationships
-    if (relationships && relationships.length > 0) {
-      relationships.forEach(function(rel) {
-        // Format: "Customer ||--o{ Order : places"
-        mermaidDefinition += `  ${rel.from_table} }|--|| ${rel.to_table} : "${rel.from_column} → ${rel.to_column}"\n`;
+        }
+      }).catch(function(error) {
+        console.error('Error rendering diagram:', error);
+        document.body.removeChild(tempContainer);
+        isUpdatingDiagram = false;
+        showError('Error rendering diagram', 'There was an error rendering the entity relationship diagram.', error.message);
       });
-    } else {
-      // Add a note if no relationships are found
-      mermaidDefinition += '  %% No relationships found in the database schema\n';
     }
     
-    // Create a div for the initial diagram
-    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);
-    
-    // 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
-        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 zoom controls after diagram is rendered
-        setTimeout(() => {
-          setupZoomControls();
-        }, 100);
-      } catch(err) {
-        console.error('Error moving initial diagram to container:', err);
-      }
-    }).catch(function(error) {
-      console.error('Error rendering diagram:', error);
-      document.body.removeChild(tempInitContainer);
-      showError('Error generating diagram', 'There was an error generating the entity relationship diagram.', error.message);
-    });
-    
     // SVG Pan Zoom instance
     let panZoomInstance = null;
     
@@ -677,6 +752,22 @@
     text-align: center;
   }
   
+  /* Data loading badge styling */
+  #data-loading-badge {
+    animation: pulse 2s infinite;
+  }
+  
+  @keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
+  }
+  
+  #data-loading-badge .badge {
+    font-size: 0.75rem;
+    padding: 0.4rem 0.6rem;
+  }
+  
   /* Mermaid override for text size */
   .mermaid .entityLabel div {
     font-size: 20px !important;