dbviewer 0.7.10 → 0.7.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8875d81748ca0f9c40b3d13c8f2ed9ac47ab2aba58c68a3da51f7ce403ee56c
-  data.tar.gz: b670e95150a1843357373c5c892ee3c08e78243a0b0453731212177a077f12a6
+  metadata.gz: b357ba9437acaa807f1b31562bb7a1b76bfaefc7c3e2e6ccb3be4cfdbd627a0a
+  data.tar.gz: 2adbc0f217154bad12cb3c7bfd711a7daa7dcbfa5b01538563ea49010cd6d2f3
 SHA512:
-  metadata.gz: ab5ff0acfabc15d711f61aa3e8811c40af5655c70b033eacb63f1ba2d508f08cf6c151f5da2a46ffd21e04cb4b170c14c03d87eea7c9d4b789232796d1087c88
-  data.tar.gz: cb1e8197c523567d1dc29e96b98a1690f4056dff85ccf4cf4adcca5ab816cb0da6baf1adf84e9875059b400931e344923f08c579057531a829f1f1cd126d25bc
+  metadata.gz: c24e471a8d6d3248ef88040cff072a7868b8e936bdb535888882497b9ac64396017bb42f7c7f100b68240c8a927e45b573f679e47bd6573c832fcd2e6adc837a
+  data.tar.gz: a7be084a91cb9d090544d7a770ba3f1cf18e512a56a216b431a58672c09c4fd9b682cb6df768708c5fcc1bf85494a9738643e42f488103abe1aefc945ef2eda6

data/README.md

@@ -1,6 +1,7 @@
 ![dbviewer](https://github.com/user-attachments/assets/665c1a65-aab3-4a7e-aa54-b42e871cb3d0)
 
 # 👁️ DBViewer
+> **The fastest way to visualize and explore your database**
 
 DBViewer is a powerful Rails engine that provides a comprehensive interface to view and explore database tables, records, and schema.
 It's designed for development, debugging, and database analysis, offering a clean and intuitive way to interact with your application's database.

data/app/assets/images/dbviewer/emoji-favicon.txt

@@ -0,0 +1 @@
+data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👁️</text></svg>

data/app/assets/images/dbviewer/favicon.ico

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle fill="#0d6efd" cx="8" cy="8" r="8"/>
+  <text x="8" y="11" font-family="sans-serif" font-size="8" text-anchor="middle" fill="white">👁️</text>
+</svg>

data/app/assets/images/dbviewer/favicon.png

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <circle fill="#0d6efd" cx="16" cy="16" r="16"/>
+  <text x="16" y="22" font-family="sans-serif" font-size="16" text-anchor="middle" fill="white">👁️</text>
+</svg>

data/app/assets/images/dbviewer/favicon.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1"
+    xmlns="http://www.w3.org/2000/svg">
+    <title>DB Viewer Favicon</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle fill="#0d6efd" cx="50" cy="50" r="50" />
+        <text x="50" y="70" font-family="sans-serif" font-size="60" text-anchor="middle"
+            fill="white">👁️</text>
+    </g>
+</svg>

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

@@ -1,30 +1,30 @@
 document.addEventListener("DOMContentLoaded", function () {
+  // Validate that required utility scripts have loaded
+  if (!window.DBViewer || !DBViewer.Utility || !DBViewer.ErrorHandler) {
+    console.error(
+      "Required DBViewer scripts not loaded. Please check utility.js and error_handler.js."
+    );
+    return;
+  }
+
+  // Destructure the needed functions for easier access
+  const { debounce, ThemeManager } = DBViewer.Utility;
+  const { displayError } = DBViewer.ErrorHandler;
   // Check if mermaid is loaded first
   if (typeof mermaid === "undefined") {
     console.error("Mermaid library not loaded!");
-    showError(
-      "Mermaid library not loaded",
+    displayError(
+      "erd-container",
+      "Mermaid Library Not Loaded",
       "The diagram library could not be loaded. Please check your internet connection and try again."
     );
     return;
   }
 
-  // Helper function to debounce rapid function calls
-  function debounce(func, wait) {
-    let timeout;
-    return function (...args) {
-      clearTimeout(timeout);
-      timeout = setTimeout(() => func.apply(this, args), wait);
-    };
-  }
-
   // Initialize mermaid with theme detection like mini ERD
   mermaid.initialize({
     startOnLoad: true,
-    theme:
-      document.documentElement.getAttribute("data-bs-theme") === "dark"
-        ? "dark"
-        : "default",
+    theme: ThemeManager.getCurrentTheme() === "dark" ? "dark" : "default",
     securityLevel: "loose",
     er: {
       diagramPadding: 20,
@@ -38,7 +38,7 @@ document.addEventListener("DOMContentLoaded", function () {
     },
   });
 
-  // Function to show error messages
+  // Function to show error messages - using our custom error handler with specific UI adjustments
   function showError(title, message, details = "") {
     const errorContainer = document.getElementById("erd-error");
     const errorMessage = document.getElementById("erd-error-message");
@@ -656,34 +656,30 @@ document.addEventListener("DOMContentLoaded", function () {
 
   // Add theme observer to update diagram when theme changes
   function setupThemeObserver() {
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.attributeName === "data-bs-theme") {
-          const newTheme =
-            document.documentElement.getAttribute("data-bs-theme");
-          mermaid.initialize({
-            theme: newTheme === "dark" ? "dark" : "default",
-            // Keep other settings
-            securityLevel: "loose",
-            er: {
-              diagramPadding: 20,
-              layoutDirection: "TB",
-              minEntityWidth: 100,
-              minEntityHeight: 75,
-              entityPadding: 15,
-              stroke: "gray",
-              fill: "honeydew",
-              fontSize: 20,
-            },
-          });
-          // Trigger redraw if diagram is already displayed
-          if (diagramReady) {
-            updateDiagramWithFullData();
-          }
-        }
+    // Listen for our custom theme change event
+    document.addEventListener("dbviewerThemeChanged", (event) => {
+      const newTheme = event.detail.theme;
+      mermaid.initialize({
+        theme: newTheme === "dark" ? "dark" : "default",
+        // Keep other settings
+        securityLevel: "loose",
+        er: {
+          diagramPadding: 20,
+          layoutDirection: "TB",
+          minEntityWidth: 100,
+          minEntityHeight: 75,
+          entityPadding: 15,
+          stroke: "gray",
+          fill: "honeydew",
+          fontSize: 20,
+        },
       });
+
+      // Trigger redraw if diagram is already displayed
+      if (diagramReady) {
+        updateDiagramWithFullData();
+      }
     });
-    observer.observe(document.documentElement, { attributes: true });
   }
 
   setupThemeObserver();

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

@@ -0,0 +1,58 @@
+/**
+ * DBViewer Error Handler
+ * Provides consistent error handling across the application
+ */
+
+// Create a global namespace for DBViewer if it doesn't exist yet
+window.DBViewer = window.DBViewer || {};
+
+/**
+ * Display an error message in a container
+ * @param {string} containerId - The ID of the container to show the error in
+ * @param {string} title - Error title
+ * @param {string} message - Error message
+ * @param {string} details - Optional details about the error
+ */
+function displayError(containerId, title, message, details = "") {
+  const container = document.getElementById(containerId);
+  if (!container) {
+    console.error(`Error container ${containerId} not found`);
+    return;
+  }
+
+  let detailsHtml = "";
+  if (details) {
+    detailsHtml = `<small class="text-muted">${details}</small>`;
+  }
+
+  container.innerHTML = `
+    <div class="text-center my-4 text-danger">
+      <i class="bi bi-exclamation-triangle fs-2 d-block mb-2"></i>
+      <p class="mb-1">${title}</p>
+      <div>${message}</div>
+      ${detailsHtml}
+    </div>
+  `;
+}
+
+/**
+ * Handle API fetch errors with consistent error handling and logging
+ * @param {string} endpoint - The API endpoint being accessed
+ * @param {Error} error - The error that occurred
+ * @param {Function} errorCallback - Callback function to handle UI updates on error
+ */
+async function handleApiError(endpoint, error, errorCallback) {
+  console.error(`Error fetching from ${endpoint}:`, error);
+
+  if (typeof errorCallback === "function") {
+    errorCallback(error);
+  }
+
+  // You could add additional error tracking here, like sending to a monitoring service
+}
+
+// Expose error handling functions globally
+DBViewer.ErrorHandler = {
+  displayError,
+  handleApiError,
+};

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

@@ -1,21 +1,16 @@
+// Use DBViewer namespace for utility functions and error handling
 document.addEventListener("DOMContentLoaded", async function () {
-  // Helper function to format numbers with commas
-  function numberWithDelimiter(number) {
-    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-  }
-
-  // Helper function to format file sizes
-  function numberToHumanSize(bytes) {
-    if (bytes === null || bytes === undefined) return "N/A";
-    if (bytes === 0) return "0 Bytes";
-
-    const k = 1024;
-    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  // Validate that required utility scripts have loaded
+  if (!window.DBViewer || !DBViewer.Utility || !DBViewer.ErrorHandler) {
+    console.error(
+      "Required DBViewer scripts not loaded. Please check utility.js and error_handler.js."
+    );
+    return;
   }
 
+  // Destructure the needed functions for easier access
+  const { numberWithDelimiter, numberToHumanSize } = DBViewer.Utility;
+  const { displayError, handleApiError } = DBViewer.ErrorHandler;
   // Function to update analytics cards
   function updateTablesCount(data) {
     document.getElementById("tables-loading").classList.add("d-none");
@@ -167,17 +162,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
   }
 
-  // Function to show error state
-  function showError(containerId, message) {
-    const container = document.getElementById(containerId);
-    container.innerHTML = `
-      <div class="text-center my-4 text-danger">
-        <i class="bi bi-exclamation-triangle fs-2 d-block mb-2"></i>
-        <p>Error loading data</p>
-        <small>${message}</small>
-      </div>
-    `;
-  }
+  // Using error handler from imported module
 
   async function fetchTableCount() {
     try {
@@ -196,12 +181,13 @@ document.addEventListener("DOMContentLoaded", async function () {
       const data = await response.json();
       updateTablesCount(data);
     } catch (error) {
-      console.error("Error loading tables count:", error);
-      const loading = document.getElementById("tables-loading");
-      const count = document.getElementById("tables-count");
-      loading.classList.add("d-none");
-      count.classList.remove("d-none");
-      count.innerHTML = '<span class="text-danger">Error</span>';
+      await handleApiError("tables count", error, () => {
+        const loading = document.getElementById("tables-loading");
+        const count = document.getElementById("tables-count");
+        loading.classList.add("d-none");
+        count.classList.remove("d-none");
+        count.innerHTML = '<span class="text-danger">Error</span>';
+      });
     }
   }
 
@@ -274,8 +260,13 @@ document.addEventListener("DOMContentLoaded", async function () {
       const data = await response.json();
       updateRecentQueries(data);
     } catch (error) {
-      console.error("Error loading recent queries:", error);
-      showError("recent-queries-container", error.message);
+      await handleApiError("recent queries", error, () => {
+        displayError(
+          "recent-queries-container",
+          "Error Loading Queries",
+          error.message
+        );
+      });
     }
   }
   // Load database size data (Loading records first to prevent race condition on dbviewer model constant creation)

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

@@ -1,52 +1,28 @@
 document.addEventListener("DOMContentLoaded", function () {
+  // Validate that required utility scripts have loaded
+  if (!window.DBViewer || !DBViewer.Utility) {
+    console.error(
+      "Required DBViewer utility scripts not loaded. Please check utility.js."
+    );
+    return;
+  }
+
+  // Get ThemeManager from the global namespace
+  const { ThemeManager } = DBViewer.Utility;
+
   // Theme toggle functionality
   const themeToggleBtn = document.querySelector(".theme-toggle");
-  const htmlElement = document.documentElement;
-
-  // Check for saved theme preference or respect OS preference
-  const prefersDarkMode = window.matchMedia(
-    "(prefers-color-scheme: dark)"
-  ).matches;
-  const savedTheme = localStorage.getItem("dbviewerTheme");
-
-  // Set initial theme
-  if (savedTheme) {
-    htmlElement.setAttribute("data-bs-theme", savedTheme);
-  } else if (prefersDarkMode) {
-    htmlElement.setAttribute("data-bs-theme", "dark");
-    localStorage.setItem("dbviewerTheme", "dark");
-  }
+
+  // Initialize theme based on saved preference or OS preference
+  ThemeManager.initialize();
 
   // Toggle theme when button is clicked
   if (themeToggleBtn) {
     themeToggleBtn.addEventListener("click", function () {
-      const currentTheme = htmlElement.getAttribute("data-bs-theme");
-      const newTheme = currentTheme === "dark" ? "light" : "dark";
-
-      // Update theme
-      htmlElement.setAttribute("data-bs-theme", newTheme);
-      localStorage.setItem("dbviewerTheme", newTheme);
-
-      // Dispatch event for other components to respond to theme change (Monaco editor)
-      const themeChangeEvent = new CustomEvent("dbviewerThemeChanged", {
-        detail: { theme: newTheme },
-      });
-      document.dispatchEvent(themeChangeEvent);
+      ThemeManager.toggleTheme();
     });
   }
 
-  // Check if styles are loaded properly
-  const styleCheck = getComputedStyle(
-    document.documentElement
-  ).getPropertyValue("--dbviewer-styles-loaded");
-  if (!styleCheck) {
-    console.log(
-      "DBViewer: Using fallback inline styles (asset pipeline may not be available)"
-    );
-  } else {
-    console.log("DBViewer: External CSS loaded successfully");
-  }
-
   const toggleBtn = document.querySelector(".dbviewer-sidebar-toggle");
   const closeBtn = document.querySelector(".dbviewer-sidebar-close");
   const sidebar = document.querySelector(".dbviewer-sidebar");
@@ -72,26 +48,22 @@ document.addEventListener("DOMContentLoaded", function () {
     }, 300);
   }
 
-  if (toggleBtn) {
-    toggleBtn.addEventListener("click", function () {
-      if (sidebar.classList.contains("active")) {
-        hideSidebar();
-      } else {
-        showSidebar();
-        // Focus the search input when sidebar becomes visible
-        setTimeout(() => {
-          const searchInput = document.getElementById("tableSearch");
-          if (searchInput) searchInput.focus();
-        }, 300); // Small delay to allow for animation
-      }
-    });
-  }
-
-  if (closeBtn) {
-    closeBtn.addEventListener("click", function () {
+  toggleBtn.addEventListener("click", function () {
+    if (sidebar.classList.contains("active")) {
       hideSidebar();
-    });
-  }
+    } else {
+      showSidebar();
+      // Focus the search input when sidebar becomes visible
+      setTimeout(() => {
+        const searchInput = document.getElementById("tableSearch");
+        if (searchInput) searchInput.focus();
+      }, 300); // Small delay to allow for animation
+    }
+  });
+
+  closeBtn.addEventListener("click", function () {
+    hideSidebar();
+  });
 
   overlay.addEventListener("click", function () {
     hideSidebar();
@@ -110,85 +82,84 @@ document.addEventListener("DOMContentLoaded", function () {
 
   // Offcanvas enhancement for theme synchronization
   const offcanvasElement = document.getElementById("navbarOffcanvas");
-  if (offcanvasElement) {
-    // Get all theme toggles
-    const allThemeToggles = document.querySelectorAll(".theme-toggle");
-
-    // Handle theme change from any toggle button
-    allThemeToggles.forEach((toggleBtn) => {
-      toggleBtn.addEventListener("click", function () {
-        const currentTheme =
-          document.documentElement.getAttribute("data-bs-theme") || "light";
-
-        // Update all theme toggle buttons to maintain consistency
-        allThemeToggles.forEach((btn) => {
-          // Update icon in all theme toggle buttons
-          if (currentTheme === "dark") {
-            btn.querySelector("span").innerHTML =
-              '<i class="bi bi-sun-fill"></i>';
-            btn.setAttribute("aria-label", "Switch to light mode");
-          } else {
-            btn.querySelector("span").innerHTML =
-              '<i class="bi bi-moon-fill"></i>';
-            btn.setAttribute("aria-label", "Switch to dark mode");
-          }
-        });
-      });
-    });
 
-    // Function to sync offcanvas colors with current theme
-    function syncOffcanvasWithTheme() {
+  // Get all theme toggles
+  const allThemeToggles = document.querySelectorAll(".theme-toggle");
+
+  // Handle theme change from any toggle button
+  allThemeToggles.forEach((toggleBtn) => {
+    toggleBtn.addEventListener("click", function () {
       const currentTheme =
         document.documentElement.getAttribute("data-bs-theme") || "light";
-      if (currentTheme === "dark") {
-        offcanvasElement
-          .querySelector(".offcanvas-header")
-          .classList.remove("bg-light-subtle");
-        offcanvasElement
-          .querySelector(".offcanvas-header")
-          .classList.add("bg-dark-subtle");
-      } else {
-        offcanvasElement
-          .querySelector(".offcanvas-header")
-          .classList.remove("bg-dark-subtle");
-        offcanvasElement
-          .querySelector(".offcanvas-header")
-          .classList.add("bg-light-subtle");
-      }
-    }
-
-    // Sync on page load
-    document.addEventListener("DOMContentLoaded", syncOffcanvasWithTheme);
 
-    // Listen for theme changes
-    document.addEventListener("dbviewerThemeChanged", syncOffcanvasWithTheme);
-
-    // Handle link click in offcanvas (auto-close on mobile)
-    const offcanvasLinks = offcanvasElement.querySelectorAll(
-      ".nav-link:not(.dropdown-toggle)"
-    );
-    offcanvasLinks.forEach((link) => {
-      link.addEventListener("click", function () {
-        if (window.innerWidth < 992) {
-          bootstrap.Offcanvas.getInstance(offcanvasElement).hide();
+      // Update all theme toggle buttons to maintain consistency
+      allThemeToggles.forEach((btn) => {
+        // Update icon in all theme toggle buttons
+        if (currentTheme === "dark") {
+          btn.querySelector("span").innerHTML =
+            '<i class="bi bi-sun-fill"></i>';
+          btn.setAttribute("aria-label", "Switch to light mode");
+        } else {
+          btn.querySelector("span").innerHTML =
+            '<i class="bi bi-moon-fill"></i>';
+          btn.setAttribute("aria-label", "Switch to dark mode");
         }
       });
     });
+  });
 
-    // Fix offcanvas backdrop on desktop
-    window.addEventListener("resize", function () {
-      if (window.innerWidth >= 992) {
-        const offcanvasInstance =
-          bootstrap.Offcanvas.getInstance(offcanvasElement);
-        if (offcanvasInstance) {
-          offcanvasInstance.hide();
-        }
-        // Also remove any backdrop
-        const backdrop = document.querySelector(".offcanvas-backdrop");
-        if (backdrop) {
-          backdrop.remove();
-        }
+  // Function to sync offcanvas colors with current theme
+  function syncOffcanvasWithTheme() {
+    const currentTheme =
+      document.documentElement.getAttribute("data-bs-theme") || "light";
+    if (currentTheme === "dark") {
+      offcanvasElement
+        .querySelector(".offcanvas-header")
+        .classList.remove("bg-light-subtle");
+      offcanvasElement
+        .querySelector(".offcanvas-header")
+        .classList.add("bg-dark-subtle");
+    } else {
+      offcanvasElement
+        .querySelector(".offcanvas-header")
+        .classList.remove("bg-dark-subtle");
+      offcanvasElement
+        .querySelector(".offcanvas-header")
+        .classList.add("bg-light-subtle");
+    }
+  }
+
+  // Sync on page load
+  document.addEventListener("DOMContentLoaded", syncOffcanvasWithTheme);
+
+  // Listen for theme changes
+  document.addEventListener("dbviewerThemeChanged", syncOffcanvasWithTheme);
+
+  // Handle link click in offcanvas (auto-close on mobile)
+  const offcanvasLinks = offcanvasElement.querySelectorAll(
+    ".nav-link:not(.dropdown-toggle)"
+  );
+  offcanvasLinks.forEach((link) => {
+    link.addEventListener("click", function () {
+      if (window.innerWidth < 992) {
+        bootstrap.Offcanvas.getInstance(offcanvasElement).hide();
       }
     });
-  }
+  });
+
+  // Fix offcanvas backdrop on desktop
+  window.addEventListener("resize", function () {
+    if (window.innerWidth >= 992) {
+      const offcanvasInstance =
+        bootstrap.Offcanvas.getInstance(offcanvasElement);
+      if (offcanvasInstance) {
+        offcanvasInstance.hide();
+      }
+      // Also remove any backdrop
+      const backdrop = document.querySelector(".offcanvas-backdrop");
+      if (backdrop) {
+        backdrop.remove();
+      }
+    }
+  });
 });