dbviewer 0.3.5 → 0.3.15

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

@@ -0,0 +1,517 @@
+<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" style="min-height: 450px; height: 100%;">
+    <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>
+    <!-- The mini ERD will be rendered here -->
+    <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>
+  
+  <!-- Debug section - will be visible if there are any issues -->
+  <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;"><%= @erd_data.to_json %></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>
+
+<script>
+  // Immediately invoke this function to initialize everything
+  (function() {
+    // 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;
+    }
+    
+    console.log('Initializing Mermaid for mini ERD');
+    
+    // Configure Mermaid
+    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: 'honeydew',
+        fontSize: 12
+      }
+    });
+    
+    // Immediately hide debug data - only reveal if there's an error
+    const debugElement = document.getElementById('debug-data');
+    if (debugElement) {
+      debugElement.classList.add('d-none');
+    }
+    
+    // Directly parse the ERD data instead of waiting for DOM loaded event
+    // This is important because the modal might already be loaded
+    try {
+      // Try to parse the data - it's critical to wrap this in JSON.parse when needed
+      <% if @erd_data.is_a?(String) %>
+        // If somehow we got a string instead of a hash
+        const erdData = JSON.parse(<%= raw @erd_data.to_json %>);
+      <% else %>
+        // Normal case - Ruby hash will be converted to JS object
+        const erdData = <%= raw @erd_data.to_json %>;
+      <% end %>
+      
+      if (erdData && typeof erdData === 'object') {
+        // Store data in debug element for troubleshooting
+        const debugDataEl = document.getElementById('erd-data-debug');
+        if (debugDataEl) {
+          debugDataEl.textContent = JSON.stringify(erdData, null, 2);
+        }
+        
+        renderMiniERD(erdData);
+      } else {
+        throw new Error('ERD data is not an object');
+      }
+    } catch (e) {
+      console.error('Error parsing ERD data:', e);
+      showError('Data parsing error', 'Failed to parse relationship data: ' + e.message);
+      
+      // Show debug data when there's an error
+      if (debugElement) {
+        debugElement.classList.remove('d-none');
+      }
+    }
+  })();
+  
+  function showError(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');
+    
+    // Hide the loading indicator
+    document.getElementById('mini-erd-loading').style.display = 'none';
+    
+    // Set error message
+    errorMessage.textContent = message;
+    
+    // Set error details if provided
+    if (details) {
+      errorDetails.textContent = details;
+      errorDetails.classList.remove('d-none');
+    } else {
+      errorDetails.classList.add('d-none');
+    }
+    
+    // Show the error container
+    errorContainer.classList.remove('d-none');
+  }
+  
+  function renderMiniERD(tableData) {
+    try {
+      const tables = tableData.tables || [];
+      const relationships = tableData.relationships || [];
+      
+      // Validate data before proceeding
+      if (!Array.isArray(tables) || !Array.isArray(relationships)) {
+        showError('Invalid data format', 'The relationship data is not in the expected format.');
+        console.error('Invalid data format received:', tableData);
+        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
+      try {
+        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;
+            
+            // Apply SVG-Pan-Zoom to make the diagram interactive
+            try {
+              const svgElement = container.querySelector('svg');
+              if (svgElement && typeof svgPanZoom !== 'undefined') {
+                svgPanZoom(svgElement, {
+                  zoomEnabled: true,
+                  controlIconsEnabled: true,
+                  fit: true,
+                  center: true
+                });
+              }
+            } catch (e) {
+              console.warn('Failed to initialize svg-pan-zoom:', e);
+              // Not critical, continue without pan-zoom
+            }
+            
+            // Add highlighting for the current table
+            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);
+            showError(
+              '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 (renderError) {
+        console.error('Exception in mermaid.render call:', renderError);
+        showError(
+          'Rendering exception', 
+          'Failed to render the diagram.',
+          renderError.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);
+      showError(
+        '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');
+    }
+  }
+</script>
+
+<script>
+  // Immediately invoke this function to initialize everything
+  (function() {
+    // 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;
+    }
+    
+    console.log('Initializing Mermaid for mini ERD');
+    
+    // Configure Mermaid
+    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: 'honeydew',
+        fontSize: 12
+      }
+    });
+    
+    // Directly parse the ERD data instead of waiting for DOM loaded event
+    // This is important because the modal might already be loaded
+    try {
+      // Parse ERD data directly from Rails
+      const erdData = <%= raw @erd_data.to_json %>;
+      
+      // Display debug info
+      document.getElementById('debug-data').classList.remove('d-none');
+      document.getElementById('erd-data-debug').textContent = JSON.stringify(erdData, null, 2);
+      
+      renderMiniERD(erdData);
+    } catch (e) {
+      console.error('Error parsing ERD data:', e);
+      showError('Data parsing error', 'Failed to parse relationship data: ' + e.message);
+    }
+  })();
+  
+  function showError(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');
+    
+    // Hide the loading indicator
+    document.getElementById('mini-erd-loading').style.display = 'none';
+    
+    // Set error message
+    errorMessage.textContent = message;
+    
+    // Set error details if provided
+    if (details) {
+      errorDetails.textContent = details;
+      errorDetails.classList.remove('d-none');
+    } else {
+      errorDetails.classList.add('d-none');
+    }
+    
+    // Show the error container
+    errorContainer.classList.remove('d-none');
+  }
+  
+  function renderMiniERD(tableData) {
+    try {
+      console.log('ERD Data received:', tableData); // Debug log
+      
+      const tables = tableData.tables || [];
+      const relationships = tableData.relationships || [];
+      
+      // Validate data before proceeding
+      if (!Array.isArray(tables) || !Array.isArray(relationships)) {
+        showError('Invalid data format', 'The relationship data is not in the expected format.');
+        console.error('Invalid data format received:', tableData);
+        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 %> {\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';
+      }
+      
+      // Create a div for the diagram
+      const miniErdDiv = document.createElement('div');
+      miniErdDiv.className = 'mermaid';
+      miniErdDiv.innerHTML = mermaidDefinition;
+      
+      // Get the container reference
+      const container = document.getElementById('mini-erd-container');
+      
+      // 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
+      try {
+        mermaid.render('mini-erd-graph', mermaidDefinition)
+          .then(function(result) {
+            console.log('Mermaid rendering successful');
+            // Insert the rendered SVG
+            container.innerHTML = result.svg;
+            
+            // Apply SVG-Pan-Zoom to make the diagram interactive
+            try {
+              const svgElement = container.querySelector('svg');
+              if (svgElement && typeof svgPanZoom !== 'undefined') {
+                svgPanZoom(svgElement, {
+                  zoomEnabled: true,
+                  controlIconsEnabled: true,
+                  fit: true,
+                  center: true
+                });
+              }
+            } catch (e) {
+              console.warn('Failed to initialize svg-pan-zoom:', e);
+              // Not critical, continue without pan-zoom
+            }
+            
+            // Add highlighting for the current table
+            setTimeout(function() {
+              try {
+                const currentTableElement = container.querySelector(`[id*="${'<%= @table_name %>'.replace(/[^\w]/g, '_')}"]`);
+                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);
+            showError(
+              'Error rendering diagram', 
+              'There was an error rendering the relationships diagram.',
+              error.message || 'Unknown error'
+            );
+          });
+      } catch (renderError) {
+        console.error('Exception in mermaid.render call:', renderError);
+        showError(
+          'Rendering exception', 
+          'Failed to render the diagram.',
+          renderError.message || 'Unknown error'
+        );
+      }
+    } catch (error) {
+      console.error('Exception in renderMiniERD function:', error);
+      showError(
+        'Exception generating diagram', 
+        'There was an exception processing the relationships diagram.',
+        error.message || 'Unknown error'
+      );
+    }
+  }
+</script>