dbviewer 0.3.6 → 0.3.15

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

@@ -2,6 +2,37 @@
   Table: <%= @table_name %>
 <% end %>
 
+<% content_for :head do %>
+  <!-- Mermaid.js library for ERD diagrams -->
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+  <!-- SVG-Pan-Zoom for interactive diagram navigation -->
+  <script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
+  <script>
+    // Initialize mermaid when document is ready
+    document.addEventListener('DOMContentLoaded', function() {
+      // Configure Mermaid for better ERD diagrams
+      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: document.documentElement.getAttribute('data-bs-theme') === 'dark' ? '#2D3748' : '#f5f5f5',
+          fontSize: 14,
+          useMaxWidth: true,
+          wrapiength: 30
+        }
+      });
+      console.log('Mermaid initialized with theme:', document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'default');
+    });
+  </script>
+<% end %>
+
 <% content_for :sidebar_active do %>active<% end %>
 
 <% content_for :sidebar do %>
@@ -11,6 +42,9 @@
 <div class="d-flex justify-content-between align-items-center mb-4">
   <h1>Table: <%= @table_name %></h1>
   <div class="d-flex gap-2">
+    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#miniErdModal">
+      <i class="bi bi-diagram-3 me-1"></i> View Relationships
+    </button>
     <% if Dbviewer.configuration.enable_data_export %>
         <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#csvExportModal">
           <i class="bi bi-file-earmark-spreadsheet me-1"></i> Export CSV
@@ -63,6 +97,25 @@
   </div>
 <% end %>
 
+<!-- Mini ERD Modal -->
+<div class="modal fade" id="miniErdModal" tabindex="-1" aria-labelledby="miniErdModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-xl modal-dialog-centered">
+    <div class="modal-content" id="miniErdModalContent">
+      <!-- Content will be loaded dynamically -->
+      <div class="modal-body text-center p-0">
+        <div id="mini-erd-container" class="w-100 d-flex justify-content-center align-items-center" style="min-height: 450px; height: 100%;">
+          <div class="text-center">
+            <div class="spinner-border text-primary" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+            <p class="mt-2">Loading relationships diagram...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- Records Section -->
 <div class="dbviewer-card card mb-4">
   <div class="card-header d-flex justify-content-between align-items-center">
@@ -95,44 +148,72 @@
           <table class="table table-bordered table-striped rounded-none">
               <thead class="dbviewer-table-header">
                 <tr>
-                  <% @records.columns.each do |column_name| %>
-                    <th class="pe-4">
-                      <%= column_name %>
-                    </th>
+                  <% if @records && @records.columns %>
+                    <% @records.columns.each do |column_name| %>
+                      <th class="pe-4">
+                        <%= column_name %>
+                      </th>
+                    <% end %>
+                  <% else %>
+                    <th>No columns available</th>
                   <% end %>
                 </tr>
                 <tr class="column-filters">
-                  <% @records.columns.each do |column_name| %>
-                    <th class="p-0">
-                      <%= form.text_field "column_filters[#{column_name}]", 
-                          value: @column_filters[column_name], 
-                          placeholder: "",
-                          class: "form-control form-control-sm column-filter rounded-0",
-                          data: { column: column_name } %>
-                    </th>
+                  <% if @records && @records.columns %>
+                    <% @records.columns.each do |column_name| %>
+                      <th class="p-0">
+                        <%= form.text_field "column_filters[#{column_name}]", 
+                            value: @column_filters[column_name], 
+                            placeholder: "",
+                            class: "form-control form-control-sm column-filter rounded-0",
+                            data: { column: column_name } %>
+                      </th>
+                    <% end %>
+                  <% else %>
+                    <th></th>
                   <% end %>
                 </tr>
               </thead>
               <tbody>
-                <% if @records.empty? %>
+                <% if @records.nil? || @records.rows.nil? || @records.empty? %>
                   <tr>
                     <td colspan="100%" class="text-center">No records found or table is empty.</td>
                   </tr>
                 <% end %>
-                <% @records.rows.each do |row| %>
-                  <tr>
-                      <% row.each do |cell| %>
-                        <% cell_value = format_cell_value(cell) %>
-                        <td title="<%= cell_value %>"><%= cell_value %></td>
-                    <% end %>
-                  </tr>
+                <% if @records && @records.rows %>
+                  <% @records.rows.each do |row| %>
+                    <tr>
+                        <% row.each_with_index do |cell, cell_index| %>
+                          <% 
+                            column_name = @records.columns[cell_index]
+                            cell_value = format_cell_value(cell)
+                            
+                            # Check if this column is a foreign key
+                            foreign_key = @metadata && @metadata[:foreign_keys] ? 
+                                          @metadata[:foreign_keys].find { |fk| fk[:column] == column_name } : 
+                                          nil
+                          %>
+                          <% if foreign_key && !cell.nil? %>
+                            <td title="<%= cell_value %> (Click to view referenced record)">
+                              <%= link_to cell_value, 
+                                  table_path(foreign_key[:to_table], 
+                                  column_filters: { foreign_key[:primary_key] => cell }), 
+                                  class: "text-decoration-none foreign-key-link" %>
+                              <i class="bi bi-link-45deg text-muted small"></i>
+                            </td>
+                          <% else %>
+                            <td title="<%= cell_value %>"><%= cell_value %></td>
+                          <% end %>
+                      <% end %>
+                    </tr>
+                  <% end %>
                 <% end %>
             </tbody>
         </table>
         <% end %> <!-- End of form_with -->
       </div>
       
-      <% if @total_pages > 1 %>
+      <% if @total_pages && @total_pages > 1 %>
         <nav aria-label="Page navigation">
           <ul class="pagination justify-content-center">
             <li class="page-item <%= 'disabled' if @current_page == 1 %>">
@@ -267,6 +348,426 @@
         });
       }
     }
+    
+    // Load Mini ERD when modal is opened
+    const miniErdModal = document.getElementById('miniErdModal');
+    if (miniErdModal) {
+      let isModalLoaded = false;
+      let erdData = null;
+      
+      miniErdModal.addEventListener('show.bs.modal', function(event) {
+        const modalContent = document.getElementById('miniErdModalContent');
+        
+        // Set loading state
+        modalContent.innerHTML = `
+          <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 d-flex justify-content-center align-items-center" style="min-height: 450px; height: 100%;">
+              <div class="text-center">
+                <div class="spinner-border text-primary mb-3" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2">Loading relationships diagram...</p>
+                <small class="text-muted">This may take a moment for tables with many relationships</small>
+              </div>
+            </div>
+          </div>
+        `;
+        
+        // Always fetch fresh data when modal is opened
+        fetchErdData();
+      });
+      
+      // Function to fetch ERD data
+      function fetchErdData() {
+        // Add cache-busting timestamp to prevent browser caching
+        const cacheBuster = new Date().getTime();
+        const fetchUrl = `<%= dbviewer.mini_erd_table_path(@table_name, format: :json) %>?_=${cacheBuster}`;
+        
+        // Log loading message
+        console.log('Loading fresh Mini ERD data from:', fetchUrl);
+        
+        // Set a timeout to handle long-running requests
+        const timeoutPromise = new Promise((_, reject) => 
+          setTimeout(() => reject(new Error('Request timeout after 10 seconds')), 10000)
+        );
+        
+        // Race the fetch against a timeout
+        Promise.race([
+          fetch(fetchUrl),
+          timeoutPromise
+        ])
+          .then(response => {
+            if (!response.ok) {
+              throw new Error(`Server returned ${response.status} ${response.statusText}`);
+            }
+            return response.json(); // Parse as JSON instead of text
+          })
+          .then(data => {
+            isModalLoaded = true;
+            erdData = data; // Store the data
+            renderMiniErd(data);
+          })
+          .catch(error => {
+            console.error('Error loading mini ERD:', error);
+            showErdError(error);
+          });
+      }
+      
+      // Function to show error modal
+      function showErdError(error) {
+        const modalContent = document.getElementById('miniErdModalContent');
+        modalContent.innerHTML = `
+          <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 class="alert alert-danger m-3">
+              <i class="bi bi-exclamation-triangle-fill me-2"></i>
+              <strong>Error loading relationship diagram</strong>
+              <p class="mt-2 mb-0">${error.message}</p>
+            </div>
+            <div class="m-3">
+              <p><strong>Debug Information:</strong></p>
+              <code>GET <%= dbviewer.mini_erd_table_path(@table_name, format: :json) %></code> failed
+              <p class="mt-3">
+                <button class="btn btn-sm btn-primary" onclick="retryLoadingMiniERD()">
+                  <i class="bi bi-arrow-clockwise me-1"></i> Retry
+                </button>
+              </p>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          </div>
+        `;
+      }
+      
+      // Function to render the ERD with Mermaid
+      function renderMiniErd(data) {
+        const modalContent = document.getElementById('miniErdModalContent');
+        
+        // Set up the modal content with container for ERD
+        modalContent.innerHTML = `
+          <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"> <!-- 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-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>
+              <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>
+            <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;">${JSON.stringify(data, null, 2)}</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>
+        `;
+        
+        try {
+          const tables = data.tables || [];
+          const relationships = data.relationships || [];
+          
+          // Validate data before proceeding
+          if (!Array.isArray(tables) || !Array.isArray(relationships)) {
+            showDiagramError('Invalid data format', 'The relationship data is not in the expected format.');
+            console.error('Invalid data format received:', data);
+            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 with Mermaid
+          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;
+              
+              // Style the SVG element for better fit
+              const svgElement = container.querySelector('svg');
+              if (svgElement) {
+                // Set size attributes for the SVG
+                svgElement.setAttribute('width', '100%');
+                svgElement.setAttribute('height', '100%');
+                svgElement.style.minHeight = '450px';
+                svgElement.style.width = '100%';
+                svgElement.style.height = '100%';
+                
+                // Set viewBox if not present to enable proper scaling
+                if (!svgElement.getAttribute('viewBox')) {
+                  const width = svgElement.getAttribute('width') || '100%';
+                  const height = svgElement.getAttribute('height') || '100%';
+                  svgElement.setAttribute('viewBox', `0 0 ${parseInt(width) || 1000} ${parseInt(height) || 800}`);
+                }
+              }
+              
+              // Apply SVG-Pan-Zoom to make the diagram interactive
+              try {
+                const svgElement = container.querySelector('svg');
+                if (svgElement && typeof svgPanZoom !== 'undefined') {
+                  // Make SVG take the full container width
+                  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);
+                    }
+                  });
+                }
+              } 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);
+              showDiagramError(
+                '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 (error) {
+          console.error('Exception in renderMiniErd function:', error);
+          showDiagramError(
+            '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');
+        }
+      }
+      
+      // Function to show diagram error
+      function showDiagramError(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');
+        const loadingIndicator = document.getElementById('mini-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');
+        }
+      }
+      
+      // Handle modal shown event - adjust size after the modal is fully visible
+      miniErdModal.addEventListener('shown.bs.modal', function(event) {
+        // After modal is fully shown, resize the diagram to fit
+        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
+        }
+      });
+      
+      // Handle modal close to reset state for future opens
+      miniErdModal.addEventListener('hidden.bs.modal', function(event) {
+        // Reset flags and cached data to ensure fresh fetch on next open
+        isModalLoaded = false;
+        erdData = null;
+        console.log('Modal closed, diagram data will be refetched on next open');
+      });
+    }
+    
+    // Function to retry loading the Mini ERD
+    function retryLoadingMiniERD() {
+      console.log('Retrying loading of mini ERD');
+      const modalContent = document.getElementById('miniErdModalContent');
+      
+      // Set loading state again
+      modalContent.innerHTML = `
+        <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 d-flex justify-content-center align-items-center" style="min-height: 450px; height: 100%;">
+            <div class="text-center">
+              <div class="spinner-border text-primary mb-3" role="status">
+                <span class="visually-hidden">Loading...</span>
+              </div>
+              <p>Retrying to load relationships diagram...</p>
+            </div>
+          </div>
+        </div>
+      `;
+      
+      // Reset state to ensure fresh fetch
+      isModalLoaded = false;
+      erdData = null;
+      
+      // Retry fetching data
+      fetchErdData();
+    }
   });
 </script>
 
@@ -293,6 +794,50 @@
     color: rgba(255,255,255,0.9);
     border-color: rgba(255,255,255,0.15);
   }
+  
+  /* Mini ERD modal styling */
+  #miniErdModal .modal-dialog {
+    max-width: 90%;
+    max-height: 90vh;
+    height: 90vh;
+  }
+  
+  #miniErdModal .modal-content {
+    height: 100%;
+  }
+  
+  #miniErdModal .modal-body {
+    height: calc(100% - 130px); /* Account for header and footer */
+    overflow: hidden; /* Prevent scrollbars within the modal body */
+  }
+  
+  #miniErdModal #mini-erd-container {
+    height: 100%;
+    width: 100%;
+  }
+  
+  #miniErdModal #mini-erd-container svg {
+    width: 100%;
+    height: 100%;
+    max-height: unset;
+  }
+  
+  /* Foreign key link styling */
+  .foreign-key-link {
+    color: var(--bs-primary);
+    position: relative;
+  }
+  
+  .foreign-key-link:hover {
+    text-decoration: underline !important;
+  }
+  
+  .foreign-key-link + .bi-link-45deg {
+    font-size: 0.75rem;
+    margin-left: 0.25rem;
+    position: relative;
+    top: -1px;
+  }
 </style>
 
 <% if @timestamp_data.present? %>

data/app/views/layouts/dbviewer/application.html.erb

@@ -551,6 +551,25 @@
     .stat-card-bg {
       background-color: var(--bs-light);
     }
+    
+    /* Metric icon styling */
+    .metric-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      width: 60px;
+      height: 60px;
+      min-width: 60px;
+      text-align: center;
+      background-color: rgba(var(--bs-primary-rgb), 0.1);
+      color: var(--bs-primary);
+    }
+    
+    [data-bs-theme="dark"] .metric-icon {
+      background-color: rgba(13, 110, 253, 0.2);
+      color: #6ea8fe;
+    }
   </style>
 </head>
 <body>

data/config/routes.rb

@@ -4,6 +4,7 @@ Dbviewer::Engine.routes.draw do
       get "query"
       post "query"
       get "export_csv"
+      get "mini_erd"
     end
   end