dbviewer 0.3.1

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

@@ -0,0 +1,564 @@
+<% content_for :title, "Entity Relationship Diagram" %>
+
+<% content_for :sidebar do %>
+  <%= render 'dbviewer/shared/sidebar' %>
+<% end %>
+
+<div class="container-fluid h-100">
+  <div class="row h-100">
+    <div class="col-md-12 p-0">
+      <div class="card h-100">
+        <div class="card-header d-flex justify-content-between align-items-center">
+          <h5 class="mb-0">
+            <i class="bi bi-diagram-3"></i> Entity Relationship Diagram
+          </h5>
+          <div class="d-flex align-items-center">
+            <span id="zoomPercentage" class="me-2">100%</span>
+            <button id="zoomIn" class="btn btn-sm btn-outline-secondary me-1">
+              <i class="bi bi-zoom-in"></i>
+            </button>
+            <button id="zoomOut" class="btn btn-sm btn-outline-secondary me-1">
+              <i class="bi bi-zoom-out"></i>
+            </button>
+            <button id="resetView" class="btn btn-sm btn-outline-secondary me-1">
+              <i class="bi bi-arrow-counterclockwise"></i> Reset
+            </button>
+            <div class="dropdown">
+              <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="downloadButton" data-bs-toggle="dropdown" aria-expanded="false">
+                <i class="bi bi-download"></i> Download
+              </button>
+              <ul class="dropdown-menu" aria-labelledby="downloadButton">
+                <li><a class="dropdown-item" href="#" id="downloadSvg">SVG Format</a></li>
+                <li><a class="dropdown-item" href="#" id="downloadPng">PNG Format</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="card-body p-0">
+          <div id="erd-container" class="w-100 h-100">
+            <div id="erd-loading" class="d-flex justify-content-center align-items-center h-100">
+              <div class="text-center">
+                <div class="spinner-border text-primary mb-3" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+                <p>Generating Entity Relationship Diagram...</p>
+              </div>
+            </div>
+            <!-- The ERD will be rendered here -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </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() {
+    // Initialize mermaid
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: 'neutral',
+      securityLevel: 'loose',
+      er: {
+        diagramPadding: 20,
+        layoutDirection: 'TB',
+        minEntityWidth: 100,
+        minEntityHeight: 75,
+        entityPadding: 15,
+        stroke: 'gray',
+        fill: 'honeydew',
+        fontSize: 20
+      }
+    });
+    
+    // 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 %>;
+    const relationships = <%= raw @table_relationships.to_json %>;
+
+    console.log(tables, relationships)
+    
+    // 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 = {};
+    
+    // First pass: add all tables with minimal info
+    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;
+          updateDiagramWithColumns();
+        }
+      })
+      .catch(error => {
+        console.error(`Error fetching columns for table ${tableName}:`, error);
+      });
+    });
+    
+    // Track if we're currently updating the diagram
+    let isUpdatingDiagram = false;
+    
+    // Function to update the diagram once we have columns
+    function updateDiagramWithColumns() {
+      // 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';
+        
+        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 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);
+        
+        // Render in the temporary container first
+        mermaid.init(undefined, updatedErdDiv).then(function() {
+          console.log('Diagram fully updated with column data');
+          
+          // 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);
+          document.body.removeChild(tempContainer);
+          isUpdatingDiagram = false;
+        });
+      }
+    }
+    
+    // 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`;
+      });
+    } 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);
+      document.getElementById('erd-loading').innerHTML = 
+        '<div class="alert alert-danger">Error generating diagram. Please try again or check console for details.</div>';
+    });
+    
+    // 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;
+    /* background-color: #fafafa; */
+    position: relative;
+  }
+  
+  .mermaid {
+    display: flex;
+    justify-content: center;
+    min-width: 100%;
+  }
+  
+  /* 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;
+  }
+  
+  /* Zoom percentage display styling */
+  #zoomPercentage {
+    font-size: 0.9rem;
+    /* color: #495057; */
+    font-weight: 500;
+    width: 45px;
+    display: inline-block;
+    text-align: center;
+  }
+  
+  /* Mermaid override for text size */
+  .mermaid .entityLabel div {
+    font-size: 20px !important;
+  }
+  
+  .mermaid .er.relationshipLabel {
+    font-size: 20px !important;
+  }
+</style>