dbviewer 0.6.6 → 0.6.8

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

@@ -1,5 +1,16 @@
 <% content_for :title, "Entity Relationship Diagram" %>
 
+
+<% content_for :head do %>
+  <%# Include mermaid.js for diagram rendering %>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+  <%# Include svg-pan-zoom for better diagram interaction %>
+  <script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
+
+  <%= stylesheet_link_tag "dbviewer/entity_relationship_diagram", "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "dbviewer/entity_relationship_diagram", "data-turbo-track": "reload" %>
+<% end %>
+
 <div class="container-fluid h-100">
   <div class="row h-100">
     <div class="col-md-12 p-0">
@@ -77,716 +88,6 @@
   </div>
 </div>
 
-<%# Include mermaid.js for diagram rendering %>
-<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
-<%# Include svg-pan-zoom for better diagram interaction %>
-<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
-
-<script>
-  document.addEventListener('DOMContentLoaded', 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;
-    }
-    
-    // Initialize mermaid with theme detection like mini ERD
-    mermaid.initialize({
-      startOnLoad: true,
-      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: 20
-      }
-    });
-    
-    // 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;
-    
-    // Function to show a temporary downloading indicator
-    function showDownloadingIndicator(format) {
-      // Create toast element
-      const toastEl = document.createElement('div');
-      toastEl.className = 'position-fixed bottom-0 end-0 p-3';
-      toastEl.style.zIndex = '5000';
-      toastEl.innerHTML = `
-        <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
-          <div class="toast-header">
-            <strong class="me-auto"><i class="bi bi-download"></i> Downloading ERD</strong>
-            <small>just now</small>
-            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-          </div>
-          <div class="toast-body">
-            <div class="d-flex align-items-center">
-              <div class="spinner-border spinner-border-sm me-2" role="status">
-                <span class="visually-hidden">Loading...</span>
-              </div>
-              Preparing ${format} file for download...
-            </div>
-          </div>
-        </div>
-      `;
-      
-      document.body.appendChild(toastEl);
-      
-      // Automatically remove after a delay
-      setTimeout(() => {
-        toastEl.remove();
-      }, 3000);
-    }
-    
-    // Generate the ERD diagram
-    const tables = <%= raw @tables.to_json %>;
-    
-    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';
-    
-    // We'll store table column data here as we fetch it
-    const tableColumns = {};
-    
-    // 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`;
-      mermaidDefinition += `    string id\n`;
-      mermaidDefinition += '  }\n';
-      
-      // Start loading column data asynchronously
-      fetch(`<%= dbviewer.tables_path %>/${tableName}?format=json`, {
-        headers: {
-          'Accept': 'application/json',
-          'X-Requested-With': 'XMLHttpRequest'
-        }
-      })
-      .then(response => response.json())
-      .then(data => {
-        if (data && data.columns) {
-          tableColumns[tableName] = data.columns;
-          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 all data
-    function updateDiagramWithFullData() {
-      // Prevent multiple simultaneous updates
-      if (isUpdatingDiagram) return;
-      
-      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`;
-        
-        const columns = tableColumns[tableName] || [];
-        columns.forEach(column => {
-          updatedDefinition += `    ${column.type || 'string'} ${column.name}\n`;
-        });
-        
-        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');
-        
-        try {
-          // Remove from temp container without destroying
-          tempContainer.removeChild(erdDiv);
-          
-          // 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;
-        }
-      }).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);
-      });
-    }
-    
-    // Get the container reference for later use
-    const container = document.getElementById('erd-container');
-    
-    // SVG Pan Zoom instance
-    let panZoomInstance = null;
-    
-    // Setup zoom controls using svg-pan-zoom library
-    function setupZoomControls() {
-      const diagramContainer = document.getElementById('erd-container');
-      const svgElement = diagramContainer.querySelector('svg');
-      
-      if (!svgElement) {
-        console.warn('SVG element not found for zoom controls');
-        return;
-      }
-      
-      // Make sure SVG has proper attributes for zooming
-      svgElement.setAttribute('width', '100%');
-      svgElement.setAttribute('height', '100%');
-      
-      // Initialize svg-pan-zoom
-      panZoomInstance = svgPanZoom(svgElement, {
-        zoomEnabled: true,
-        controlIconsEnabled: false,
-        fit: true,
-        center: true,
-        minZoom: 0.1,
-        maxZoom: 20,
-        zoomScaleSensitivity: 0.3,
-        onZoom: function(newZoom) {
-          // Update zoom percentage display
-          const zoomDisplay = document.getElementById('zoomPercentage');
-          if (zoomDisplay) {
-            zoomDisplay.textContent = `${Math.round(newZoom * 100)}%`;
-          }
-        }
-      });
-      
-      // Set initial zoom to 100%
-      panZoomInstance.zoom(1);
-      
-      // Add event listeners for zoom controls
-      document.getElementById('zoomIn').addEventListener('click', function() {
-        panZoomInstance.zoomIn();
-      });
-      
-      document.getElementById('zoomOut').addEventListener('click', function() {
-        panZoomInstance.zoomOut();
-      });
-      
-      document.getElementById('resetView').addEventListener('click', function() {
-        panZoomInstance.reset();
-      });
-      
-      // Update initial percentage display
-      const zoomDisplay = document.getElementById('zoomPercentage');
-      if (zoomDisplay) {
-        zoomDisplay.textContent = '100%';
-      }
-      
-      // Mark diagram as ready for download
-      diagramReady = true;
-    }
-    
-    // Function to download the ERD as SVG
-    function downloadAsSVG() {
-      if (!diagramReady) {
-        alert('Please wait for the diagram to finish loading.');
-        return;
-      }
-      
-      // Show loading indicator
-      showDownloadingIndicator('SVG');
-      
-      try {
-        // Get the SVG element
-        const svgElement = document.querySelector('#erd-container svg');
-        if (!svgElement) {
-          alert('SVG diagram not found.');
-          return;
-        }
-        
-        // Create a clone of the SVG to modify for download
-        const clonedSvg = svgElement.cloneNode(true);
-        
-        // Set explicit dimensions to ensure proper rendering
-        clonedSvg.setAttribute('width', svgElement.getBoundingClientRect().width);
-        clonedSvg.setAttribute('height', svgElement.getBoundingClientRect().height);
-        
-        // Convert SVG to a string
-        const serializer = new XMLSerializer();
-        let svgString = serializer.serializeToString(clonedSvg);
-        
-        // Add XML declaration and doctype
-        svgString = '<?xml version="1.0" standalone="no"?>\n' + svgString;
-        
-        // Create a Blob with the SVG data
-        const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
-        
-        // Create a timestamp for filename
-        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-        
-        // Create download link and trigger download
-        const downloadLink = document.createElement('a');
-        downloadLink.href = URL.createObjectURL(blob);
-        downloadLink.download = `database_erd_${timestamp}.svg`;
-        document.body.appendChild(downloadLink);
-        downloadLink.click();
-        document.body.removeChild(downloadLink);
-      } catch (error) {
-        console.error('Error downloading SVG:', error);
-        alert('Error downloading SVG. Please check console for details.');
-      }
-    }
-    
-    // Function to download the ERD as PNG
-    function downloadAsPNG() {
-      if (!diagramReady) {
-        alert('Please wait for the diagram to finish loading.');
-        return;
-      }
-      
-      // Show loading indicator
-      showDownloadingIndicator('PNG');
-      
-      try {
-        // Get the SVG element
-        const svgElement = document.querySelector('#erd-container svg');
-        if (!svgElement) {
-          alert('SVG diagram not found.');
-          return;
-        }
-        
-        // Create a clone of the SVG to modify for download
-        const clonedSvg = svgElement.cloneNode(true);
-        
-        // Set explicit dimensions to ensure proper rendering
-        const width = svgElement.getBoundingClientRect().width;
-        const height = svgElement.getBoundingClientRect().height;
-        clonedSvg.setAttribute('width', width);
-        clonedSvg.setAttribute('height', height);
-        
-        // Convert SVG to a string
-        const serializer = new XMLSerializer();
-        const svgString = serializer.serializeToString(clonedSvg);
-        
-        // Create a Blob with the SVG data
-        const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
-        const svgUrl = URL.createObjectURL(svgBlob);
-        
-        // Create an Image object to draw to canvas
-        const img = new Image();
-        img.onload = function() {
-          // Create canvas with appropriate dimensions
-          const canvas = document.createElement('canvas');
-          canvas.width = width * 2; // Scale up for better quality
-          canvas.height = height * 2;
-          
-          // Get drawing context and scale it
-          const ctx = canvas.getContext('2d');
-          ctx.scale(2, 2); // Scale up for better quality
-          
-          // Draw white background (SVG may have transparency)
-          ctx.fillStyle = 'white';
-          ctx.fillRect(0, 0, width, height);
-          
-          // Draw the image onto the canvas
-          ctx.drawImage(img, 0, 0, width, height);
-          
-          // Create timestamp for filename
-          const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-          
-          // Convert canvas to PNG and trigger download
-          canvas.toBlob(function(blob) {
-            const downloadLink = document.createElement('a');
-            downloadLink.href = URL.createObjectURL(blob);
-            downloadLink.download = `database_erd_${timestamp}.png`;
-            document.body.appendChild(downloadLink);
-            downloadLink.click();
-            document.body.removeChild(downloadLink);
-          }, 'image/png');
-          
-          // Clean up
-          URL.revokeObjectURL(svgUrl);
-        };
-        
-        // Set the image source to the SVG URL
-        img.src = svgUrl;
-      } catch (error) {
-        console.error('Error downloading PNG:', error);
-        alert('Error downloading PNG. Please check console for details.');
-      }
-    }
-    
-    // Set up event listeners for download buttons
-    document.getElementById('downloadSvg').addEventListener('click', function(e) {
-      e.preventDefault();
-      downloadAsSVG();
-    });
-    
-    document.getElementById('downloadPng').addEventListener('click', function(e) {
-      e.preventDefault();
-      downloadAsPNG();
-    });
-  });
-</script>
-
-<style>
-  #erd-container {
-    overflow: auto;
-    height: calc(100vh - 125px);
-    padding: 20px;
-    position: relative;
-  }
-  
-  .mermaid {
-    display: flex;
-    justify-content: center;
-    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;
-  }
-  
-  /* Make sure SVG maintains its size */
-  #erd-container svg {
-    width: 100%;
-    height: auto;
-    display: block;
-    min-width: 800px;
-    min-height: 600px;
-  }
-  
-  /* Override mermaid defaults for a better look */
-  .entityBox {
-    fill: #f8f9fa;
-    stroke: #6c757d;
-  }
-  
-  .entityLabel, .mermaid .label {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    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;
-    font-weight: 500;
-    width: 45px;
-    display: inline-block;
-    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;
-  }
-  
-  .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>
+<input type="text" id="tables" class="d-none" value='<%= raw @tables.to_json %>'>
+<input type="text" id="tables_path" class="d-none" value='<%= dbviewer.tables_path %>'>
+<input type="text" id="relationships_api_path" class="d-none" value='<%= dbviewer.relationships_api_entity_relationship_diagrams_path %>'>