dbwatcher 1.0.0 → 1.1.1

data/app/assets/javascripts/dbwatcher/services/mermaid.js

@@ -0,0 +1,315 @@
+/**
+ * Simplified Mermaid Service
+ *
+ * Modern implementation using Mermaid v10+ API and svg-pan-zoom library
+ * Replaces 374 lines of complex custom implementation with ~50 lines
+ */
+
+const MermaidService = {
+  initialized: false,
+
+  // Initialize Mermaid with optimal settings
+  async initialize() {
+    if (this.initialized) return;
+
+    // Ensure Mermaid is loaded
+    if (!window.mermaid) {
+      await this.loadMermaid();
+    }
+
+    // Configure with modern settings
+    window.mermaid.initialize({
+      startOnLoad: false,
+      theme: 'neutral',
+      useMaxWidth: true,
+      responsive: true,
+      securityLevel: 'loose',
+
+      // Suppress warnings for better UX
+      logLevel: 'error',
+
+      // ER diagram settings
+      er: {
+        useMaxWidth: true,
+        layoutDirection: 'LR',
+        entityPadding: 15,
+        fontSize: 14
+      },
+
+      // Flowchart settings with better compatibility
+      flowchart: {
+        useMaxWidth: true,
+        htmlLabels: true,
+        curve: 'basis',
+        padding: 20,
+        nodeSpacing: 50,
+        rankSpacing: 50
+      },
+
+      // Suppress internal warnings
+      suppressErrorRendering: false,
+      suppressWarnings: true
+    });
+
+    this.initialized = true;
+    console.log('Mermaid service initialized');
+  },
+
+  // Load Mermaid library if not available
+  async loadMermaid() {
+    if (window.mermaid) return;
+
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';
+      script.onload = resolve;
+      script.onerror = () => reject(new Error('Failed to load Mermaid library'));
+      document.head.appendChild(script);
+    });
+  },
+
+  // Render diagram with svg-pan-zoom integration
+  async render(content, container, options = {}) {
+    if (!content || !container) {
+      throw new Error('Content and container are required');
+    }
+
+    await this.initialize();
+
+    try {
+      // Clear container
+      container.innerHTML = '';
+
+      // Create diagram element - ensure full container size
+      const diagramDiv = document.createElement('div');
+      diagramDiv.className = 'mermaid-diagram';
+
+      // Set explicit styles for better browser rendering
+      const styles = {
+        width: '100%',
+        height: '100%',
+        minHeight: '400px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+        overflow: 'hidden'
+      };
+
+      Object.assign(diagramDiv.style, styles);
+
+      // Get container dimensions before appending
+      const containerWidth = container.clientWidth || 800;
+      const containerHeight = container.clientHeight || 600;
+
+      console.log('Container dimensions in render:', containerWidth, containerHeight);
+
+      // Set container to fill its parent
+      container.style.width = '100%';
+      container.style.height = '100%';
+      container.style.minHeight = '500px';
+      container.style.position = 'relative';
+      container.style.overflow = 'hidden';
+
+      container.appendChild(diagramDiv);
+
+      // Render with modern API and error handling
+      let renderResult;
+      try {
+        renderResult = await window.mermaid.render('diagram-' + Date.now(), content);
+      } catch (renderError) {
+        // Try to clean up content and retry once
+        const cleanContent = this.cleanDiagramContent(content);
+        renderResult = await window.mermaid.render('diagram-' + Date.now() + '-retry', cleanContent);
+      }
+
+      const { svg } = renderResult;
+      diagramDiv.innerHTML = svg;
+
+      // Post-process the SVG to ensure it has proper dimensions
+      const svgElement = diagramDiv.querySelector('svg');
+      if (svgElement) {
+        // Set CSS styles for SVG
+        Object.assign(svgElement.style, {
+          width: '100%',
+          height: '100%',
+          maxWidth: '100%',
+          maxHeight: '100%',
+          display: 'block'
+        });
+
+        // Make sure viewBox is set if not already
+        if (!svgElement.getAttribute('viewBox')) {
+          const width = svgElement.getAttribute('width') || diagramDiv.clientWidth;
+          const height = svgElement.getAttribute('height') || diagramDiv.clientHeight;
+          svgElement.setAttribute('viewBox', `0 0 ${width} ${height}`);
+        }
+      }
+
+      // Enable pan/zoom if svg-pan-zoom is available
+      let panZoom = null;
+
+      if (svgElement && window.svgPanZoom) {
+        // enableInteractions now returns a Promise or null
+        panZoom = await Promise.resolve(this.enableInteractions(svgElement, options));
+      }
+
+      return { success: true, element: svgElement, panZoom };
+    } catch (error) {
+      console.error('Mermaid rendering failed:', error);
+      this.showError(container, error.message);
+      throw error;
+    }
+  },
+
+  // Enable SVG interactions using svg-pan-zoom library
+  enableInteractions(svgElement, options = {}) {
+    // Safety checks and set default dimensions if needed
+    if (!svgElement) {
+      console.warn('SVG element is null, cannot initialize pan-zoom');
+      return null;
+    }
+
+    // Always ensure the SVG element has dimensions before initializing pan-zoom
+    // Get container dimensions for reference
+    const containerWidth = svgElement.parentElement?.clientWidth || 800;
+    const containerHeight = svgElement.parentElement?.clientHeight || 600;
+
+    console.log('Container dimensions:', containerWidth, containerHeight);
+
+    // Force set dimensions regardless of existing values to ensure they're always set correctly
+    svgElement.setAttribute('width', containerWidth.toString());
+    svgElement.setAttribute('height', containerHeight.toString());
+
+    // Also set CSS dimensions for better browser rendering
+    svgElement.style.width = '100%';
+    svgElement.style.height = '100%';
+    svgElement.style.maxWidth = '100%';
+    svgElement.style.maxHeight = '100%';
+
+    // Set viewBox attribute if it doesn't exist or is invalid
+    const viewBox = svgElement.getAttribute('viewBox');
+    if (!viewBox || viewBox.split(' ').length !== 4) {
+      svgElement.setAttribute('viewBox', `0 0 ${containerWidth} ${containerHeight}`);
+    }
+
+    // Set preserveAspectRatio for proper scaling
+    svgElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+
+    // Double-check dimensions are now set and valid
+    const width = parseFloat(svgElement.getAttribute('width'));
+    const height = parseFloat(svgElement.getAttribute('height'));
+
+    if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0) {
+      console.warn('SVG element has invalid dimensions after setting defaults:', width, height);
+      // Set explicit fallback dimensions as a last resort
+      svgElement.setAttribute('width', '800');
+      svgElement.setAttribute('height', '600');
+      svgElement.setAttribute('viewBox', '0 0 800 600');
+    }
+
+    const config = {
+      zoomEnabled: true,
+      panEnabled: true,
+      controlIconsEnabled: false,
+      fit: true,
+      center: true,
+      minZoom: 0.1,
+      maxZoom: 5,
+      zoomScaleSensitivity: 0.1,
+      ...options
+    };
+
+    try {
+      // Ensure SVG is properly rendered in DOM before initializing pan-zoom
+      // This forces a reflow which can help with dimension calculations
+      void svgElement.getBoundingClientRect();
+
+      // Short delay to ensure SVG is fully rendered before initializing pan-zoom
+      return new Promise(resolve => {
+        setTimeout(() => {
+          try {
+            // Initialize pan-zoom with the configured options
+            const panZoom = window.svgPanZoom(svgElement, config);
+
+            // Add keyboard shortcuts for better UX
+            this.addKeyboardShortcuts(panZoom);
+
+            resolve(panZoom);
+          } catch (initError) {
+            console.warn('Failed to initialize svg-pan-zoom:', initError);
+            resolve(null);
+          }
+        }, 100); // Small delay for SVG rendering
+      });
+    } catch (error) {
+      console.warn('Failed to enable SVG interactions:', error);
+      return null;
+    }
+  },
+
+  // Clean diagram content to fix common issues
+  cleanDiagramContent(content) {
+    return content
+      // Remove any problematic characters
+      .replace(/[^\x00-\x7F]/g, '')
+      // Normalize whitespace
+      .replace(/\s+/g, ' ')
+      // Remove empty lines
+      .split('\n')
+      .filter(line => line.trim())
+      .join('\n');
+  },
+
+  // Add keyboard shortcuts for pan/zoom
+  addKeyboardShortcuts(panZoom) {
+    const handleKeydown = (e) => {
+      if (!e.target.closest('.mermaid-diagram')) return;
+
+      switch (e.key) {
+        case '+':
+        case '=':
+          e.preventDefault();
+          panZoom.zoomIn();
+          break;
+        case '-':
+          e.preventDefault();
+          panZoom.zoomOut();
+          break;
+        case '0':
+          e.preventDefault();
+          panZoom.resetZoom();
+          panZoom.center();
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeydown);
+
+    // Return cleanup function
+    return () => document.removeEventListener('keydown', handleKeydown);
+  },
+
+  // Show error in container
+  showError(container, message) {
+    container.innerHTML = `
+      <div class="flex items-center justify-center h-full">
+        <div class="text-center p-4">
+          <div class="text-red-600 mb-2">
+            <svg class="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+          <div class="text-sm text-gray-600">
+            Failed to render diagram<br>
+            <span class="text-xs text-gray-500">${message}</span>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+
+// Make available globally
+window.MermaidService = MermaidService;

data/app/assets/javascripts/dbwatcher/services/mermaid_service.js

@@ -0,0 +1,199 @@
+/**
+ * Optimized Mermaid Service
+ *
+ * Modern implementation using Mermaid v10+ API and svg-pan-zoom library
+ * Uses tree-shakable design pattern for minimal code footprint
+ */
+
+const MermaidService = {
+  initialized: false,
+
+  // Initialize Mermaid with optimal settings
+  async initialize() {
+    if (this.initialized) return;
+
+    // Ensure Mermaid is loaded
+    if (!window.mermaid) {
+      console.error('Mermaid library not loaded');
+      throw new Error('Mermaid library not loaded');
+    }
+
+    // Configure with modern settings
+    window.mermaid.initialize({
+      startOnLoad: false,
+      theme: 'neutral',
+      useMaxWidth: true,
+      responsive: true,
+      securityLevel: 'loose',
+      logLevel: 'error',
+      er: {
+        useMaxWidth: true,
+        layoutDirection: 'LR',
+        entityPadding: 15,
+        fontSize: 14
+      },
+      flowchart: {
+        useMaxWidth: true,
+        htmlLabels: true,
+        curve: 'basis',
+        padding: 20,
+        nodeSpacing: 50,
+        rankSpacing: 50
+      },
+      suppressErrorRendering: false,
+      suppressWarnings: true
+    });
+
+    this.initialized = true;
+    console.log('Mermaid service initialized');
+  },
+
+  // Render diagram with svg-pan-zoom integration
+  async render(content, container, options = {}) {
+    if (!content || !container) {
+      console.error('Missing required parameters for rendering diagram');
+      return null;
+    }
+
+    await this.initialize();
+
+    try {
+      // Clean content before rendering
+      const cleanedContent = this.cleanDiagramContent(content);
+
+      // Use Mermaid's modern promise-based API
+      const { svg } = await window.mermaid.render('diagram-' + Date.now(), cleanedContent);
+
+      // Insert SVG into container
+      container.innerHTML = svg;
+
+      // Get the SVG element for pan-zoom initialization
+      const svgElement = container.querySelector('svg');
+      if (!svgElement) {
+        throw new Error('Failed to render SVG');
+      }
+
+      // Initialize pan-zoom
+      const panZoomInstance = this.enableInteractions(svgElement, options);
+
+      return {
+        svg: svgElement,
+        panZoom: panZoomInstance
+      };
+    } catch (error) {
+      console.error('Error rendering diagram:', error);
+      this.showError(container, error.message || 'Failed to render diagram');
+      return null;
+    }
+  },
+
+  // Enable SVG interactions using svg-pan-zoom library
+  enableInteractions(svgElement, options = {}) {
+    // Safety checks
+    if (!svgElement || !window.svgPanZoom) {
+      console.error('SVG element or svg-pan-zoom library not available');
+      return null;
+    }
+
+    // Get container dimensions for reference
+    const containerWidth = svgElement.parentElement?.clientWidth || 800;
+    const containerHeight = svgElement.parentElement?.clientHeight || 600;
+
+    // Force set dimensions for better rendering
+    svgElement.setAttribute('width', containerWidth.toString());
+    svgElement.setAttribute('height', containerHeight.toString());
+    svgElement.style.width = '100%';
+    svgElement.style.height = '100%';
+    svgElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+
+    // Initialize pan-zoom
+    try {
+      const panZoomInstance = window.svgPanZoom(svgElement, {
+        zoomEnabled: true,
+        controlIconsEnabled: false,
+        fit: true,
+        center: true,
+        minZoom: 0.2,
+        maxZoom: 5,
+        zoomScaleSensitivity: 0.4
+      });
+
+      // Add keyboard shortcuts
+      this.addKeyboardShortcuts(panZoomInstance);
+
+      return panZoomInstance;
+    } catch (error) {
+      console.error('Error initializing pan-zoom:', error);
+      return null;
+    }
+  },
+
+  // Clean diagram content to fix common issues
+  cleanDiagramContent(content) {
+    if (!content) return '';
+
+    // Replace common problematic patterns
+    return content
+      .replace(/ /g, ' ')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&amp;/g, '&')
+      .trim();
+  },
+
+  // Add keyboard shortcuts for pan/zoom
+  addKeyboardShortcuts(panZoom) {
+    if (!panZoom) return;
+
+    // Add keyboard event listener
+    document.addEventListener('keydown', (event) => {
+      // Only handle events when diagram is focused
+      if (!event.target.closest('.diagram-container')) return;
+
+      switch (event.key) {
+        case '+':
+        case '=':
+          panZoom.zoomIn();
+          break;
+        case '-':
+          panZoom.zoomOut();
+          break;
+        case '0':
+          panZoom.resetZoom();
+          break;
+        case 'ArrowUp':
+          panZoom.panBy({x: 0, y: 50});
+          break;
+        case 'ArrowDown':
+          panZoom.panBy({x: 0, y: -50});
+          break;
+        case 'ArrowLeft':
+          panZoom.panBy({x: 50, y: 0});
+          break;
+        case 'ArrowRight':
+          panZoom.panBy({x: -50, y: 0});
+          break;
+      }
+    });
+  },
+
+  // Show error in container
+  showError(container, message) {
+    if (!container) return;
+
+    container.innerHTML = `
+      <div class="diagram-error p-4 bg-red-50 text-red-700 rounded">
+        <h3 class="font-semibold mb-2">Error rendering diagram</h3>
+        <p>${message || 'An unknown error occurred'}</p>
+      </div>
+    `;
+  }
+};
+
+// Register with DBWatcher if available
+if (window.DBWatcher) {
+  window.DBWatcher.MermaidService = MermaidService;
+}
+
+// Make available globally
+window.MermaidService = MermaidService;

data/app/assets/javascripts/dbwatcher/vendor/date-fns-browser.js

@@ -0,0 +1,99 @@
+/**
+ * Browser-compatible date-fns version
+ * Sets up window.dateFns with all date-fns methods
+ */
+(function(global) {
+  // Create namespace
+  global.dateFns = {
+    // Core formatting functions
+    format: function(date, formatStr) {
+      if (!date) return '';
+      var d = new Date(date);
+      if (isNaN(d.getTime())) return '';
+      
+      formatStr = formatStr || 'yyyy-MM-dd HH:mm:ss';
+      
+      var year = d.getFullYear();
+      var month = d.getMonth() + 1;
+      var day = d.getDate();
+      var hours = d.getHours();
+      var minutes = d.getMinutes();
+      var seconds = d.getSeconds();
+      
+      // Simple formatting with basic replacements
+      return formatStr
+        .replace(/yyyy/g, year)
+        .replace(/MM/g, month < 10 ? '0' + month : month)
+        .replace(/dd/g, day < 10 ? '0' + day : day)
+        .replace(/HH/g, hours < 10 ? '0' + hours : hours)
+        .replace(/mm/g, minutes < 10 ? '0' + minutes : minutes)
+        .replace(/ss/g, seconds < 10 ? '0' + seconds : seconds);
+    },
+    
+    // Date manipulation
+    addDays: function(date, days) {
+      var result = new Date(date);
+      result.setDate(result.getDate() + days);
+      return result;
+    },
+    
+    addHours: function(date, hours) {
+      var result = new Date(date);
+      result.setHours(result.getHours() + hours);
+      return result;
+    },
+    
+    addMinutes: function(date, minutes) {
+      var result = new Date(date);
+      result.setMinutes(result.getMinutes() + minutes);
+      return result;
+    },
+    
+    addSeconds: function(date, seconds) {
+      var result = new Date(date);
+      result.setSeconds(result.getSeconds() + seconds);
+      return result;
+    },
+    
+    // Comparison
+    isAfter: function(date, dateToCompare) {
+      return new Date(date) > new Date(dateToCompare);
+    },
+    
+    isBefore: function(date, dateToCompare) {
+      return new Date(date) < new Date(dateToCompare);
+    },
+    
+    isEqual: function(date, dateToCompare) {
+      return new Date(date).getTime() === new Date(dateToCompare).getTime();
+    },
+    
+    isSameDay: function(date, dateToCompare) {
+      var d1 = new Date(date);
+      var d2 = new Date(dateToCompare);
+      return d1.getFullYear() === d2.getFullYear() && 
+             d1.getMonth() === d2.getMonth() &&
+             d1.getDate() === d2.getDate();
+    },
+    
+    // Utilities
+    parseISO: function(dateString) {
+      return new Date(dateString);
+    },
+    
+    formatDistance: function(date, baseDate) {
+      var seconds = Math.abs(new Date(date) - new Date(baseDate)) / 1000;
+      var minutes = Math.floor(seconds / 60);
+      var hours = Math.floor(minutes / 60);
+      var days = Math.floor(hours / 24);
+      
+      if (days > 0) return days + ' day' + (days > 1 ? 's' : '');
+      if (hours > 0) return hours + ' hour' + (hours > 1 ? 's' : '');
+      if (minutes > 0) return minutes + ' minute' + (minutes > 1 ? 's' : '');
+      return seconds + ' second' + (seconds !== 1 ? 's' : '');
+    }
+  };
+})(window);
+
+// Add console confirmation
+console.log('Browser-compatible date-fns loaded successfully');