dbviewer 0.6.6 → 0.6.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8e2d222c36ae2bf4e6d20f4f915d59c3b5acae64eead145e8a0dccd7acb3ddbc
-  data.tar.gz: 786de8d3e46e54532234790345b52c17e3bdf887882b14534cd85b6b1d2b4fe0
+  metadata.gz: b63b072de9449e22dadd1dd7ec47dcdb4a1952e90c4461823783a844e147f026
+  data.tar.gz: ea463968ddf5b69a22a82b9d4213e1d8e60856878be5d8bbe72f0345b1417794
 SHA512:
-  metadata.gz: e461217c6b720cc04ec36e884aa19c1468d034451afdc3d64709056df2004cd9d6830f8f28ae339f9705b62eb7f60cc3d5587378828c9965d2468d7b23659999
-  data.tar.gz: ffb54b66a8bf3d4d426cdba9dabdf39bf619af8e4b70caeb83a541576ae3ec4bad53fbe1d9f28dea19930e7caf00cb1c71525389e04977a8a4771cfc52a402f1
+  metadata.gz: 47ea6ee4e345f6ac05c5c475918aa84fabbe28469409fc62755997991c3700a1797a394183a75db91721c49fcde0c493680621f6be93e6625ab7f7055b66379e
+  data.tar.gz: 7cffe71b1bcfd22583c0796c3816eb10a0d164baf1a304e62a4b541a3db75c13b671c61aa0b94450a1ee5cd33bcf365c43e27320b0c9ff970c13c715f57953df

data/README.md

@@ -9,42 +9,18 @@ It's designed for development, debugging, and database analysis, offering a clea
 
 ## ✨ Features
 
-- **Dashboard**: View a comprehensive dashboard with database analytics, largest tables, most complex tables, and recent SQL queries
-- **Table Overview**: View a list of all tables with record count, column count, and quick access links
-- **Detailed Schema Information**:
-  - View columns with their types, nullability, defaults, and primary key indicators
-  - Examine table indexes and their uniqueness constraints
-  - Explore foreign key relationships between tables
-- **Entity Relationship Diagram (ERD)**:
-  - Interactive visualization of database schema and table relationships
-  - Zoomable and pannable diagram to explore complex database structures
-  - Full table details including all columns and their data types
-  - Visual representation of foreign key relationships between tables
-- **Data Browsing**:
-  - Browse table records with customizable pagination (10, 20, 50, or 100 records per page)
-  - Sort data by any column in ascending or descending order
-  - Navigate through large datasets with an intuitive pagination interface
-  - Scrollable table with fixed headers for improved navigation
-  - Single-line cell display with ellipsis for wide content (tooltips on hover)
-  - Export table data to CSV format (configurable via `enable_data_export` option)
-- **SQL Queries**:
-  - Run custom SELECT queries against your database in a secure, read-only environment
-  - View table structure reference while writing queries
-  - Protection against potentially harmful SQL operations
-  - Query execution statistics and timing
-- **Multiple Database Connections**:
-  - Connect to multiple databases within your application
-  - Switch between connections on-the-fly to view different database schemas
-  - Add new database connections from the UI without code changes
-  - Test connections to verify they're working properly
-- **Enhanced UI Features**:
-  - Responsive, Bootstrap-based interface that works on desktop and mobile
-  - Fixed header navigation with quick access to all features
-  - Modern sidebar layout with improved filtering and scrollable table list
-  - Clean tabbed interface for exploring different aspects of table structure
-  - Advanced table filtering with keyboard navigation support
-  - Proper formatting for various data types (dates, JSON, arrays, etc.)
-  - Enhanced data presentation with appropriate styling
+- **Dashboard**
+- **Table Overview**
+- **Detailed Schema Information**
+- **Entity Relationship Diagram (ERD)**
+- **Data Browsing**
+- **SQL Queries**
+- **Multiple Database Connections**
+- **Enhanced UI Features**
+
+## 🧪 Demo Application
+
+You can explore a live demo of DBViewer at [https://dbviewer-demo.wailantirajoh.tech/](https://dbviewer-demo.wailantirajoh.tech/). This demo showcases all the features of DBViewer on a sample database, allowing you to try out the tool before installing it in your own application.
 
 ## 📸 Screenshots
 

data/app/assets/javascripts/dbviewer/entity_relationship_diagram.js

@@ -0,0 +1,553 @@
+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 = JSON.parse(document.getElementById("tables").value);
+
+  // Initialize empty relationships - will be loaded asynchronously
+  let relationships = [];
+  let relationshipsLoaded = false;
+
+  // Function to fetch relationships asynchronously
+  function fetchRelationships() {
+    const apiPath = document.getElementById("relationships_api_path").value;
+    return fetch(apiPath, {
+      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) => {
+        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();
+  const tablePath = document.getElementById("tables_path").value;
+
+  // 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(`${tablePath}/${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;
+
+    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();
+    });
+});