dbdoc_engine 0.1.0

data/app/javascript/dbdoc_engine/controllers/schema_diagram_controller.js

@@ -0,0 +1,1129 @@
+// app/javascript/controllers/schema_diagram_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [
+    "diagram", "groupSelect", "zoomIn", "zoomOut", "resetView"
+  ]
+
+  connect() {
+    this.zoom = 1
+    this.pan = { x: 0, y: 0 }
+    this.isDragging = false
+    this.lastMouse = { x: 0, y: 0 }
+    this.columnData = {}
+    this.relationshipData = {}
+    this.groupColors = {}
+    this.originalViewBox = null
+
+    this.renderDiagram()
+
+    // Event listeners for controls
+    if (this.hasGroupSelectTarget) {
+      this.groupSelectTarget.addEventListener("change", () => this.renderDiagram())
+    }
+    
+    if (this.hasZoomInTarget) {
+      this.zoomInTarget.addEventListener("click", (e) => {
+        e.preventDefault()
+        this.zoomDiagram(0.2)
+      })
+    }
+    
+    if (this.hasZoomOutTarget) {
+      this.zoomOutTarget.addEventListener("click", (e) => {
+        e.preventDefault()
+        this.zoomDiagram(-0.2)
+      })
+    }
+    
+    if (this.hasResetViewTarget) {
+      this.resetViewTarget.addEventListener("click", (e) => {
+        e.preventDefault()
+        this.resetView()
+      })
+    }
+
+    // Pan events
+    this.diagramTarget.addEventListener("mousedown", this.startPan.bind(this))
+    document.addEventListener("mousemove", this.handlePan.bind(this))
+    document.addEventListener("mouseup", this.endPan.bind(this))
+    this.diagramTarget.addEventListener("contextmenu", (e) => {
+      if (this.isDragging) e.preventDefault()
+    })
+    this.diagramTarget.style.cursor = 'grab'
+
+    this.createTooltip()
+  }
+
+  createTooltip() {
+    this.tooltip = document.createElement('div')
+    this.tooltip.id = 'column-tooltip'
+    this.tooltip.className = 'position-absolute p-2'
+    this.tooltip.style.cssText = `
+      display: none;
+      z-index: 1000;
+      max-width: 300px;
+      font-size: 12px;
+      line-height: 1.4;
+      pointer-events: none;
+      background: rgba(0, 0, 0, 0.9);
+      color: white;
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    `
+    document.body.appendChild(this.tooltip)
+  }
+
+  async renderDiagram() {
+    const groupId = this.hasGroupSelectTarget ? this.groupSelectTarget.value : "all"
+    this.diagramTarget.innerHTML = '<div class="d-flex justify-content-center align-items-center h-100"><span class="text-muted fst-italic">Generating diagram...</span></div>'
+  
+    try {
+      const url = '/dbdoc/schema_diagram/data?group_id=' + groupId
+      const response = await fetch(url, { headers: { 'Accept': 'application/json' } })
+      if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`)
+      const data = await response.json()
+      this.diagramTarget.innerHTML = data.diagram_svg
+      this.initializeTableHoverListeners()
+      this.columnData = data.column_data
+      this.relationshipData = data.relationship_data || {}
+      this.groupColors = data.group_colors || {}
+      
+      // Wait a bit for SVG to render, then initialize listeners
+      setTimeout(() => {
+        this.addTooltipListeners()
+        this.initializeEdgeListeners()
+        this.addHighlightStyles()
+      }, 100)
+    } catch (error) {
+      this.diagramTarget.innerHTML = `<div class="alert alert-danger">Error loading diagram: ${error.message}</div>`
+      console.error(error)
+    }
+  }
+
+  addHighlightStyles() {
+    // Add CSS styles for highlighting if not already present
+    if (!document.getElementById('diagram-highlight-styles')) {
+      const style = document.createElement('style')
+      style.id = 'diagram-highlight-styles'
+      style.textContent = `
+           .edge-highlighted path {
+        stroke-dasharray: 8, 4;
+        animation: dash-flow 2s linear infinite;
+        filter: drop-shadow(0 0 6px rgba(52, 152, 219, 0.8));
+        stroke-width: 3px !important;
+      }
+      
+      @keyframes dash-flow {
+        0% { stroke-dashoffset: 0; }
+        100% { stroke-dashoffset: 24; }
+      }
+      
+      /* Keep other styles from second version */
+      .edge-highlighted polygon {
+        fill: var(--highlight-color) !important;
+        stroke: var(--highlight-color) !important;
+      }
+        
+        /* Simple column highlighting - no shadows or complex effects */
+        .column-highlighted {
+          fill: var(--highlight-color-bg) !important;
+          stroke: var(--highlight-color) !important;
+          stroke-width: 2px !important;
+          transition: all 0.2s ease !important;
+        }
+        
+        /* Simple text highlighting - no shadows or pulsing */
+        .column-text-highlighted {
+          fill: var(--highlight-color) !important;
+          font-weight: bold !important;
+          transition: all 0.2s ease !important;
+        }
+      `
+      document.head.appendChild(style)
+    }
+  }
+
+  initializeEdgeListeners() {
+    const svg = this.diagramTarget.querySelector('svg')
+    if (!svg) return
+
+    // Clear any existing listeners to prevent duplicates
+    this.clearExistingEdgeListeners(svg)
+
+    // Find and attach edge listeners with improved precision
+    this.findAndAttachEdgeListeners(svg)
+  }
+
+  clearExistingEdgeListeners(svg) {
+    // Remove existing edge event listeners
+    const existingEdges = svg.querySelectorAll('[data-edge-id]')
+    existingEdges.forEach(edge => {
+      edge.removeAttribute('data-edge-id')
+      edge.style.cursor = ''
+      // Clone and replace to remove all event listeners
+      const newEdge = edge.cloneNode(true)
+      edge.parentNode.replaceChild(newEdge, edge)
+    })
+  }
+
+  findAndAttachEdgeListeners(svg) {
+    // Strategy 1: Look for elements with edge IDs from our relationship data
+    Object.entries(this.relationshipData).forEach(([edgeId, relationship]) => {
+      const edgeElement = svg.querySelector(`#${CSS.escape(edgeId)}`)
+      if (edgeElement) {
+        this.attachPreciseEdgeListeners(edgeElement, edgeId, relationship)
+        return
+      }
+
+      // Strategy 2: Try to find edge by relationship data
+      const foundEdge = this.findEdgeByRelationship(svg, relationship, edgeId)
+      if (foundEdge) {
+        this.attachPreciseEdgeListeners(foundEdge, edgeId, relationship)
+      }
+    })
+  }
+
+  findEdgeByRelationship(svg, relationship, edgeId) {
+    const { source_table, target_table } = relationship
+    
+    // Look for edge groups that might represent this relationship
+    const edgeGroups = svg.querySelectorAll('g.edge, g[id*="edge"]')
+    
+    for (const edgeGroup of edgeGroups) {
+      // Check if this edge connects our specific tables
+      if (this.edgeConnectsTables(edgeGroup, source_table, target_table)) {
+        return edgeGroup
+      }
+    }
+
+    // Fallback: look for individual path/polygon elements
+    const pathElements = svg.querySelectorAll('path, polygon')
+    for (const pathElement of pathElements) {
+      if (this.isRelationshipPath(pathElement, source_table, target_table)) {
+        return pathElement
+      }
+    }
+
+    return null
+  }
+
+  edgeConnectsTables(edgeGroup, sourceTable, targetTable) {
+    // Check title element for table names
+    const title = edgeGroup.querySelector('title')
+    if (title) {
+      const titleText = title.textContent.trim()
+      return titleText.includes(sourceTable) && titleText.includes(targetTable)
+    }
+
+    // Check if edge is geometrically positioned between the two tables
+    return this.isEdgeGeometricallyBetweenTables(edgeGroup, sourceTable, targetTable)
+  }
+
+  isEdgeGeometricallyBetweenTables(edgeElement, sourceTable, targetTable) {
+    const svg = this.diagramTarget.querySelector('svg')
+    if (!svg) return false
+
+    try {
+      const edgeBBox = edgeElement.getBBox()
+      const sourceTableEl = svg.querySelector(`#${CSS.escape(sourceTable)}`)
+      const targetTableEl = svg.querySelector(`#${CSS.escape(targetTable)}`)
+
+      if (!sourceTableEl || !targetTableEl) return false
+
+      const sourceBBox = sourceTableEl.getBBox()
+      const targetBBox = targetTableEl.getBBox()
+
+      // Check if edge is positioned between the two tables
+      const edgeCenterX = edgeBBox.x + edgeBBox.width / 2
+      const edgeCenterY = edgeBBox.y + edgeBBox.height / 2
+
+      const sourceCenterX = sourceBBox.x + sourceBBox.width / 2
+      const sourceCenterY = sourceBBox.y + sourceBBox.height / 2
+
+      const targetCenterX = targetBBox.x + targetBBox.width / 2
+      const targetCenterY = targetBBox.y + targetBBox.height / 2
+
+      // Calculate if edge is roughly on the line between source and target
+      const distanceToLine = this.pointToLineDistance(
+        edgeCenterX, edgeCenterY,
+        sourceCenterX, sourceCenterY,
+        targetCenterX, targetCenterY
+      )
+
+      // Allow some tolerance for curved lines
+      return distanceToLine < 100
+    } catch (e) {
+      return false
+    }
+  }
+
+  pointToLineDistance(px, py, x1, y1, x2, y2) {
+    const A = px - x1
+    const B = py - y1
+    const C = x2 - x1
+    const D = y2 - y1
+
+    const dot = A * C + B * D
+    const lenSq = C * C + D * D
+    let param = -1
+    if (lenSq !== 0) {
+      param = dot / lenSq
+    }
+
+    let xx, yy
+    if (param < 0) {
+      xx = x1
+      yy = y1
+    } else if (param > 1) {
+      xx = x2
+      yy = y2
+    } else {
+      xx = x1 + param * C
+      yy = y1 + param * D
+    }
+
+    const dx = px - xx
+    const dy = py - yy
+    return Math.sqrt(dx * dx + dy * dy)
+  }
+
+  attachPreciseEdgeListeners(element, edgeId, relationship) {
+    // Clear any existing data
+    element.removeAttribute('data-edge-id')
+    
+    element.style.cursor = 'pointer'
+    element.setAttribute('data-edge-id', edgeId)
+    element.setAttribute('data-source-table', relationship.source_table)
+    element.setAttribute('data-target-table', relationship.target_table)
+    element.setAttribute('data-source-column', relationship.source_column)
+    element.setAttribute('data-target-column', relationship.target_column)
+    
+    // Use event delegation with precise event handling
+    element.addEventListener('mouseenter', (e) => this.handlePreciseEdgeHover(e, edgeId, relationship))
+    element.addEventListener('mouseleave', (e) => this.handlePreciseEdgeLeave(e, edgeId))
+    element.addEventListener('click', (e) => e.stopPropagation()) // Prevent interference with pan
+  }
+
+  handlePreciseEdgeHover(event, edgeId, relationship) {
+    // Stop event propagation to prevent multiple edges from triggering
+    event.stopPropagation()
+    
+    const edge = event.currentTarget
+    
+    // Double-check that we're hovering the correct edge
+    const hoveredEdgeId = edge.getAttribute('data-edge-id')
+    if (hoveredEdgeId !== edgeId) {
+      return
+    }
+    
+    // Clear any existing highlights first
+    this.clearAllHighlights()
+    
+    // Get the group color for this relationship
+    const highlightColor = this.getRelationshipGroupColor(relationship)
+    const highlightColorBg = this.hexToRgba(highlightColor, 0.2)
+    
+    // Set CSS custom properties for the highlight color
+    document.documentElement.style.setProperty('--highlight-color', highlightColor)
+    document.documentElement.style.setProperty('--highlight-color-bg', highlightColorBg)
+    
+    // Highlight the specific edge with group color
+    edge.classList.add('edge-highlighted')
+    
+    // Highlight only the specific columns for this relationship with group color
+    this.highlightSpecificRelationship(relationship, highlightColor)
+    
+    // Store the currently highlighted edge
+    this.currentlyHighlightedEdge = edgeId
+  }
+
+  handlePreciseEdgeLeave(event, edgeId) {
+    event.stopPropagation()
+    
+    const edge = event.currentTarget
+    
+    // Only clear if we're leaving the currently highlighted edge
+    if (this.currentlyHighlightedEdge === edgeId) {
+      edge.classList.remove('edge-highlighted')
+      this.clearAllHighlights()
+      this.currentlyHighlightedEdge = null
+    }
+  }
+
+  getRelationshipGroupColor(relationship) {
+    // Get the group color from the target table (or source table as fallback)
+    const targetTableColor = this.groupColors[relationship.target_table]
+    const sourceTableColor = this.groupColors[relationship.source_table]
+    
+    // Return the target table color, or source table color, or default color
+    return targetTableColor || sourceTableColor || '#ff6b35'
+  }
+
+  hexToRgba(hex, alpha) {
+    // Convert hex color to rgba
+    const r = parseInt(hex.slice(1, 3), 16)
+    const g = parseInt(hex.slice(3, 5), 16)
+    const b = parseInt(hex.slice(5, 7), 16)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+
+  highlightSpecificRelationship(relationship, color) {
+    const { source_table, source_column, target_table, target_column } = relationship
+    
+    // Set the color for highlighting
+    document.documentElement.style.setProperty('--highlight-color', color)
+    document.documentElement.style.setProperty('--highlight-color-bg', this.hexToRgba(color, 0.2))
+    
+    // Only highlight the exact columns involved in this specific relationship
+    this.highlightExactColumn(source_table, source_column, color)
+    this.highlightExactColumn(target_table, target_column, color)
+  }
+
+  highlightExactColumn(tableName, columnName, color) {
+    const svg = this.diagramTarget.querySelector('svg')
+    if (!svg) return
+    
+    // Find the specific table element
+    const tableElement = svg.querySelector(`#${CSS.escape(tableName)}`)
+    if (!tableElement) return
+    
+    // Get column data for validation
+    const tableColumnData = this.columnData[tableName]
+    if (!tableColumnData || !tableColumnData[columnName]) return
+    
+    // Find and highlight only the exact column
+    const textElements = tableElement.querySelectorAll('text')
+    textElements.forEach(textEl => {
+      const textContent = textEl.textContent.trim()
+      
+      // Use exact matching to prevent cross-contamination
+      if (this.isExactColumnMatch(textContent, columnName, Object.keys(tableColumnData))) {
+        textEl.classList.add('column-text-highlighted')
+        
+        // Highlight associated cells
+        this.highlightAssociatedCells(textEl, tableElement, color)
+      }
+    })
+    
+    // Also handle HTML table cells
+    const htmlCells = tableElement.querySelectorAll('td')
+    htmlCells.forEach(cell => {
+      if (this.isExactColumnMatch(cell.textContent.trim(), columnName, Object.keys(tableColumnData))) {
+        cell.classList.add('column-highlighted')
+      }
+    })
+  }
+
+  highlightAssociatedCells(textElement, tableElement, color) {
+    try {
+      const textBBox = textElement.getBBox()
+      const cells = tableElement.querySelectorAll('rect, polygon')
+      
+      cells.forEach(cell => {
+        try {
+          const cellBBox = cell.getBBox()
+          // More precise vertical alignment check
+          const verticalOverlap = Math.abs(cellBBox.y - textBBox.y) < 15 &&
+                                 Math.abs((cellBBox.y + cellBBox.height) - (textBBox.y + textBBox.height)) < 15
+          
+          if (verticalOverlap) {
+            cell.classList.add('column-highlighted')
+          }
+        } catch (e) {
+          // Skip problematic elements
+        }
+      })
+    } catch (e) {
+      // Skip if bounding box calculation fails
+    }
+  }
+
+  clearAllHighlights() {
+    const svg = this.diagramTarget.querySelector('svg')
+    if (!svg) return
+    
+    // Remove all highlight classes
+    svg.querySelectorAll('.edge-highlighted').forEach(el => {
+      el.classList.remove('edge-highlighted')
+    })
+
+    svg.querySelectorAll('.animated').forEach(el => {
+      el.classList.remove('animated')
+    })
+    
+    svg.querySelectorAll('.column-highlighted').forEach(el => {
+      el.classList.remove('column-highlighted')
+    })
+    
+    svg.querySelectorAll('.column-text-highlighted').forEach(el => {
+      el.classList.remove('column-text-highlighted')
+    })
+    
+    // Clear CSS custom properties
+    document.documentElement.style.removeProperty('--highlight-color')
+    document.documentElement.style.removeProperty('--highlight-color-bg')
+  }
+
+  isExactColumnMatch(textContent, targetColumnName, allColumns) {
+    // Remove common symbols and attributes from the text
+    const cleanText = textContent.replace(/[🔑🔗]/g, '').replace(/\s+NN\s*$/g, '').trim()
+    
+    // Method 1: Exact match
+    if (cleanText === targetColumnName) {
+      return true
+    }
+    
+    // Method 2: Check if the text starts with the column name followed by space or symbol
+    const columnWithSpace = targetColumnName + ' '
+    const columnWithSymbol = targetColumnName + ' 🔑'
+    const columnWithFK = targetColumnName + ' 🔗'
+    const columnWithNN = targetColumnName + ' NN'
+    
+    if (textContent.startsWith(columnWithSpace) || 
+        textContent.startsWith(columnWithSymbol) || 
+        textContent.startsWith(columnWithFK) ||
+        textContent.startsWith(columnWithNN)) {
+      return true
+    }
+    
+    // Method 3: Word boundary check
+    const wordBoundaryRegex = new RegExp(`\\b${this.escapeRegExp(targetColumnName)}\\b`)
+    if (wordBoundaryRegex.test(cleanText)) {
+      const isSubstringOfLongerColumn = allColumns.some(col => 
+        col !== targetColumnName && 
+        col.includes(targetColumnName) && 
+        cleanText.includes(col)
+      )
+      
+      if (!isSubstringOfLongerColumn) {
+        return true
+      }
+    }
+    
+    return false
+  }
+
+  escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  }
+
+  clearColumnHighlights() {
+    const svg = this.diagramTarget.querySelector('svg')
+    if (!svg) return
+    
+    // Remove column highlight classes
+    svg.querySelectorAll('.column-highlighted').forEach(el => {
+      el.classList.remove('column-highlighted')
+    })
+    
+    svg.querySelectorAll('.column-text-highlighted').forEach(el => {
+      el.classList.remove('column-text-highlighted')
+    })
+  }
+
+  calculateDistance(bbox1, bbox2) {
+    const centerX1 = bbox1.x + bbox1.width / 2
+    const centerY1 = bbox1.y + bbox1.height / 2
+    const centerX2 = bbox2.x + bbox2.width / 2
+    const centerY2 = bbox2.y + bbox2.height / 2
+    
+    return Math.sqrt(Math.pow(centerX2 - centerX1, 2) + Math.pow(centerY2 - centerY1, 2))
+  }
+
+  // IMPROVED TOOLTIP LISTENERS - This is the key fix for your issue
+  addTooltipListeners() {
+    const svg = this.diagramTarget.querySelector('svg');
+    if (!svg) return;
+
+    // Clear any existing tooltip listeners
+    this.clearExistingTooltipListeners(svg);
+
+    // Method 1: Try direct table-based approach first
+    this.addDirectTableTooltips(svg);
+
+    // Method 2: Fallback to proximity-based approach
+    this.addProximityBasedTooltips(svg);
+  }
+
+  clearExistingTooltipListeners(svg) {
+    // Remove existing tooltip attributes and listeners
+    const existingTooltipElements = svg.querySelectorAll('[data-tooltip-attached]');
+    existingTooltipElements.forEach(el => {
+      el.removeAttribute('data-tooltip-attached');
+      el.removeAttribute('data-table');
+      el.removeAttribute('data-column');
+      el.style.cursor = '';
+      // Clone and replace to remove event listeners
+      const newEl = el.cloneNode(true);
+      el.parentNode.replaceChild(newEl, el);
+    });
+  }
+
+  addDirectTableTooltips(svg) {
+    // For each table in our column data
+    Object.keys(this.columnData).forEach(tableName => {
+      const tableElement = svg.querySelector(`#${CSS.escape(tableName)}`);
+      if (!tableElement) return;
+
+      const tableColumnData = this.columnData[tableName];
+      const columnNames = Object.keys(tableColumnData);
+
+      // Find all text elements within this table
+      const textElements = tableElement.querySelectorAll('text');
+      
+      textElements.forEach(textEl => {
+        const textContent = textEl.textContent.trim();
+        
+        // Try to match this text to a column name
+        const matchedColumn = this.findBestColumnMatch(textContent, columnNames);
+        
+        if (matchedColumn && !textEl.hasAttribute('data-tooltip-attached')) {
+          this.attachTooltipToElement(textEl, tableName, matchedColumn);
+          
+          // Also try to find associated visual elements (rect, td) for the same row
+          this.attachTooltipToAssociatedElements(textEl, tableElement, tableName, matchedColumn);
+        }
+      });
+
+      // Also check HTML table cells if present
+      const htmlCells = tableElement.querySelectorAll('td');
+      htmlCells.forEach(cell => {
+        const cellContent = cell.textContent.trim();
+        const matchedColumn = this.findBestColumnMatch(cellContent, columnNames);
+        
+        if (matchedColumn && !cell.hasAttribute('data-tooltip-attached')) {
+          this.attachTooltipToElement(cell, tableName, matchedColumn);
+        }
+      });
+    });
+  }
+
+  addProximityBasedTooltips(svg) {
+    // This is a fallback method for elements that weren't caught by the direct method
+    const allTextElements = svg.querySelectorAll('text:not([data-tooltip-attached])');
+    
+    allTextElements.forEach(textEl => {
+      const textContent = textEl.textContent.trim();
+      
+      // Skip if this looks like a table name or other non-column content
+      if (Object.keys(this.columnData).includes(textContent)) return;
+      if (textContent.length === 0) return;
+      
+      // Find the closest table and try to match column
+      const closestTable = this.findClosestTable(textEl, svg);
+      if (!closestTable) return;
+      
+      const tableColumnData = this.columnData[closestTable];
+      if (!tableColumnData) return;
+      
+      const columnNames = Object.keys(tableColumnData);
+      const matchedColumn = this.findBestColumnMatch(textContent, columnNames);
+      
+      if (matchedColumn) {
+        this.attachTooltipToElement(textEl, closestTable, matchedColumn);
+      }
+    });
+  }
+
+  findBestColumnMatch(textContent, columnNames) {
+    // Clean the text content
+    const cleanText = textContent.replace(/[🔑🔗]/g, '').replace(/\s+NN\s*$/g, '').trim();
+    
+    // Method 1: Exact match
+    if (columnNames.includes(cleanText)) {
+      return cleanText;
+    }
+    
+    // Method 2: Text starts with column name
+    for (const columnName of columnNames) {
+      if (textContent.startsWith(columnName + ' ') || 
+          textContent.startsWith(columnName + ' 🔑') ||
+          textContent.startsWith(columnName + ' 🔗') ||
+          textContent.startsWith(columnName + ' NN')) {
+        return columnName;
+      }
+    }
+    
+    // Method 3: Column name is at the beginning of cleaned text
+    for (const columnName of columnNames) {
+      if (cleanText.startsWith(columnName)) {
+        // Make sure it's not a substring of a longer column name
+        const isWholeWord = cleanText === columnName || 
+                           cleanText.charAt(columnName.length).match(/\s/);
+        if (isWholeWord) {
+          return columnName;
+        }
+      }
+    }
+    
+    // Method 4: Fuzzy matching for minor differences
+    for (const columnName of columnNames) {
+      if (this.isFuzzyMatch(cleanText, columnName)) {
+        return columnName;
+      }
+    }
+    
+    return null;
+  }
+
+  isFuzzyMatch(text1, text2) {
+    // Simple fuzzy matching - you can make this more sophisticated
+    const text1Lower = text1.toLowerCase();
+    const text2Lower = text2.toLowerCase();
+    
+    // Check if one contains the other
+    if (text1Lower.includes(text2Lower) || text2Lower.includes(text1Lower)) {
+      return true;
+    }
+    
+    // Check for common variations (underscores vs spaces, etc.)
+    const normalized1 = text1Lower.replace(/[_\s-]/g, '');
+    const normalized2 = text2Lower.replace(/[_\s-]/g, '');
+    
+    return normalized1 === normalized2;
+  }
+
+  findClosestTable(element, svg) {
+    try {
+      const elementRect = element.getBoundingClientRect();
+      const elementX = elementRect.left + elementRect.width / 2;
+      const elementY = elementRect.top + elementRect.height / 2;
+      
+      let closestTable = null;
+      let closestDistance = Infinity;
+      
+      Object.keys(this.columnData).forEach(tableName => {
+        const tableElement = svg.querySelector(`#${CSS.escape(tableName)}`);
+        if (!tableElement) return;
+        
+        try {
+          const tableRect = tableElement.getBoundingClientRect();
+          const tableX = tableRect.left + tableRect.width / 2;
+          const tableY = tableRect.top + tableRect.height / 2;
+          
+          const distance = Math.sqrt(
+            Math.pow(elementX - tableX, 2) + Math.pow(elementY - tableY, 2)
+          );
+          
+          // Prefer elements that are below the table header (positive Y difference)
+          const isBelow = elementY > (tableRect.top + 20); // 20px buffer for header
+          const adjustedDistance = isBelow ? distance : distance * 2;
+          
+          if (adjustedDistance < closestDistance) {
+            closestDistance = adjustedDistance;
+            closestTable = tableName;
+          }
+        } catch (e) {
+          // Skip tables that can't provide bounding rect
+        }
+      });
+      
+      return closestTable;
+    } catch (e) {
+      return null;
+    }
+  }
+
+  attachTooltipToElement(element, tableName, columnName) {
+    element.style.cursor = 'pointer';
+    element.setAttribute('data-table', tableName);
+    element.setAttribute('data-column', columnName);
+    element.setAttribute('data-tooltip-attached', 'true');
+    
+    element.addEventListener('mouseenter', (e) => this.showColumnTooltip(e, tableName, columnName));
+    element.addEventListener('mouseleave', () => this.hideColumnTooltip());
+    element.addEventListener('mousemove', (e) => this.updateColumnTooltipPosition(e));
+  }
+
+  attachTooltipToAssociatedElements(textElement, tableElement, tableName, columnName) {
+    try {
+      const textBBox = textElement.getBBox();
+      
+      // Find rect/polygon elements that are visually aligned with this text
+      const visualElements = tableElement.querySelectorAll('rect, polygon');
+      
+      visualElements.forEach(visualEl => {
+        try {
+          const visualBBox = visualEl.getBBox();
+          
+          // Check if they're on the same row (vertical overlap)
+          const verticalOverlap = Math.abs(visualBBox.y - textBBox.y) < 20;
+          
+          if (verticalOverlap && !visualEl.hasAttribute('data-tooltip-attached')) {
+            this.attachTooltipToElement(visualEl, tableName, columnName);
+          }
+        } catch (e) {
+          // Skip elements that can't provide bounding box
+        }
+      });
+    } catch (e) {
+      // Skip if bounding box calculation fails
+    }
+  }
+
+  showColumnTooltip(event, tableName, columnName) {
+    const columnInfo = this.columnData[tableName][columnName]
+    if (!columnInfo) return
+
+    const attributes = []
+    if (columnInfo.is_primary_key) attributes.push('Primary Key')
+    if (columnInfo.is_foreign_key) attributes.push('Foreign Key')
+    if (columnInfo.not_null) attributes.push('Not Null')
+    if (columnInfo.is_unique_key) attributes.push('Unique Key')
+    if (columnInfo.is_candidate_key) attributes.push('Candidate Key')
+    if (columnInfo.is_indexed) attributes.push('Indexed')
+
+    const tooltipContent = `
+      <div class="fw-bold mb-1">${columnInfo.name}</div>
+      <div class="mb-1"><strong>Type:</strong> ${columnInfo.data_type}</div>
+      ${attributes.length > 0 ? `<div class="mb-1"><strong>Attributes:</strong> ${attributes.join(', ')}</div>` : ''}
+      <div><strong>Description:</strong></div>
+      <div class="fst-italic">${columnInfo.description || 'No description available'}</div>
+    `
+
+    this.tooltip.innerHTML = tooltipContent
+    this.tooltip.style.display = 'block'
+    this.updateColumnTooltipPosition(event)
+  }
+
+  hideColumnTooltip() {
+    this.tooltip.style.display = 'none'
+  }
+
+  updateColumnTooltipPosition(event) {
+    const tooltipRect = this.tooltip.getBoundingClientRect()
+    const windowWidth = window.innerWidth
+    const windowHeight = window.innerHeight
+
+    let left = event.clientX + 10
+    let top = event.clientY + 10
+
+    if (left + tooltipRect.width > windowWidth) {
+      left = event.clientX - tooltipRect.width - 10
+    }
+    
+    if (top + tooltipRect.height > windowHeight) {
+      top = event.clientY - tooltipRect.height - 10
+    }
+
+    this.tooltip.style.left = left + 'px'
+    this.tooltip.style.top = top + 'px'
+  }
+
+  groupTextElementsByTable(svg, tableNames) {
+    const textElementsByTable = {}
+    
+    tableNames.forEach(tableName => {
+      textElementsByTable[tableName] = []
+    })
+    
+    // Try to find elements by ID first
+    tableNames.forEach(tableName => {
+      const tableElement = svg.querySelector(`#${CSS.escape(tableName)}`)
+      if (tableElement) {
+        const textElements = tableElement.querySelectorAll('text')
+        textElements.forEach(textEl => {
+          textElementsByTable[tableName].push(textEl)
+        })
+      }
+    })
+    
+    // Fallback to proximity-based grouping if no elements found
+    if (Object.values(textElementsByTable).every(arr => arr.length === 0)) {
+      return this.groupTextElementsByProximity(svg, tableNames)
+    }
+    
+    return textElementsByTable
+  }
+
+  groupTextElementsByProximity(svg, tableNames) {
+    const textElementsByTable = {}
+    const allTexts = svg.querySelectorAll('text')
+    
+    tableNames.forEach(tableName => {
+      textElementsByTable[tableName] = []
+    })
+    
+    const tablePositions = {}
+    allTexts.forEach(textElement => {
+      const text = textElement.textContent.trim()
+      if (tableNames.includes(text)) {
+        try {
+          const rect = textElement.getBoundingClientRect()
+          tablePositions[text] = {
+            element: textElement,
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2
+          }
+        } catch (e) {
+          // Skip elements that can't provide bounding rect
+        }
+      }
+    })
+    
+    allTexts.forEach(textElement => {
+      const text = textElement.textContent.trim()
+      
+      if (tableNames.includes(text)) {
+        textElementsByTable[text].push(textElement)
+        return
+      }
+      
+      try {
+        const rect = textElement.getBoundingClientRect()
+        const elementX = rect.left + rect.width / 2
+        const elementY = rect.top + rect.height / 2
+        
+        let closestTable = null
+        let closestDistance = Infinity
+        
+        Object.entries(tablePositions).forEach(([tableName, pos]) => {
+          const distance = Math.sqrt(
+            Math.pow(elementX - pos.x, 2) + Math.pow(elementY - pos.y, 2)
+          )
+          
+          const isBelow = elementY > pos.y
+          const adjustedDistance = isBelow ? distance : distance * 2
+          
+          if (adjustedDistance < closestDistance) {
+            closestDistance = adjustedDistance
+            closestTable = tableName
+          }
+        })
+        
+        if (closestTable) {
+          textElementsByTable[closestTable].push(textElement)
+        }
+      } catch (e) {
+        // Skip elements that can't provide bounding rect
+      }
+    })
+    
+    return textElementsByTable
+  }
+
+  // Zoom and pan methods
+  applyZoom() {
+    const svg = this.diagramTarget.querySelector('svg')
+    if (svg) {
+      svg.style.transform = `scale(${this.zoom}) translate(${this.pan.x}px, ${this.pan.y}px)`
+      svg.style.transformOrigin = 'center center'
+      svg.style.transition = 'transform 0.1s ease-out'
+    }
+  }
+
+  zoomDiagram(delta) {
+    this.zoom = Math.max(0.1, Math.min(5, this.zoom + delta))
+    this.applyZoom()
+  }
+
+  resetView() {
+    this.zoom = 1
+    this.pan = { x: 0, y: 0 }
+    this.applyZoom()
+    this.fitSvgToContainer()
+  }
+
+  startPan(event) {
+    if (event.target.hasAttribute('data-column') || event.target.style.cursor === 'pointer') {
+      return
+    }
+    
+    this.isDragging = true
+    this.lastMouse = { x: event.clientX, y: event.clientY }
+    this.diagramTarget.style.cursor = 'grabbing'
+    event.preventDefault()
+  }
+
+  handlePan(event) {
+    if (!this.isDragging) return
+    
+    const dx = (event.clientX - this.lastMouse.x) / this.zoom
+    const dy = (event.clientY - this.lastMouse.y) / this.zoom
+    
+    this.pan.x += dx
+    this.pan.y += dy
+    
+    this.applyZoom()
+    this.lastMouse = { x: event.clientX, y: event.clientY }
+    
+    event.preventDefault()
+  }
+
+  endPan() {
+    if (this.isDragging) {
+      this.isDragging = false
+      this.diagramTarget.style.cursor = 'grab'
+    }
+  }
+
+  disconnect() {
+    if (this.tooltip && this.tooltip.parentNode) {
+      this.tooltip.parentNode.removeChild(this.tooltip)
+    }
+  }
+  fitSvgToContainer() {
+    const svg = this.diagramTarget.querySelector('svg');
+    if (!svg) return;
+  
+    // Remove width/height attributes so SVG scales to container
+    svg.removeAttribute('width');
+    svg.removeAttribute('height');
+  
+    // If you want to be extra safe, set width to 100% and height to auto
+    svg.style.width = '100%';
+    svg.style.height = 'auto';
+  
+    // Clear any inline overflow styles
+    svg.style.overflow = 'visible';
+  
+    // If the SVG has a viewBox, it will automatically scale to fit
+    // If not, you can try to set it based on the graph's bounding box
+    // (see below for advanced options)
+  }  
+  initializeTableHoverListeners() {
+    const svg = this.diagramTarget.querySelector('svg');
+    if (!svg) return;
+  
+    svg.querySelectorAll('g.node').forEach(nodeGroup => {
+      // Get the table name from <title> or id (for fallback)
+      const title = nodeGroup.querySelector('title');
+      let tableName = title ? title.textContent.trim() : nodeGroup.id;
+      if (!tableName) return;
+  
+      // Find the main shape (polygon or rect) for the table
+      const polygon = nodeGroup.querySelector('polygon, rect');
+      if (!polygon) return;
+  
+      // Find the text element with the table name
+      const tableNameText = Array.from(nodeGroup.querySelectorAll('text'))
+        .find(el => el.textContent.trim() === tableName);
+      if (!tableNameText) return; // Skip if no matching text
+  
+      // Function to trigger the highlight
+      const highlightTable = () => {
+        // Add bold border class to the node group
+        nodeGroup.classList.add('table-hover-highlight');
+  
+        // Highlight all connected edges and columns
+        Object.entries(this.relationshipData).forEach(([edgeId, relationship]) => {
+          if (relationship.source_table === tableName || relationship.target_table === tableName) {
+            const edgeGroup = svg.querySelector(`#${CSS.escape(edgeId)}`);
+            if (edgeGroup) {
+              edgeGroup.classList.add('edge-highlighted', 'animated');
+              const highlightColor = this.getRelationshipGroupColor(relationship);
+              this.highlightSpecificRelationship(relationship, highlightColor);
+            }
+          }
+        });
+      };
+  
+      // Function to clear the highlight
+      const clearTableHighlight = () => {
+        nodeGroup.classList.remove('table-hover-highlight');
+        this.clearAllHighlights();
+      };
+  
+      // Attach listeners to the polygon
+      polygon.style.cursor = 'pointer';
+      polygon.addEventListener('mouseenter', highlightTable);
+      polygon.addEventListener('mouseleave', clearTableHighlight);
+  
+      // Attach listeners to the text
+      tableNameText.style.cursor = 'pointer';
+      tableNameText.addEventListener('mouseenter', highlightTable);
+      tableNameText.addEventListener('mouseleave', clearTableHighlight);
+    });
+  }
+  
+  downloadPNG() {
+    const svgElement = this.diagramTarget.querySelector('svg');
+    if (!svgElement) return;
+  
+    const serializer = new XMLSerializer();
+    let source = serializer.serializeToString(svgElement);
+  
+    // Add namespaces if missing
+    if (!source.match(/^<svg[^>]+xmlns="http:\/\/www\.w3\.org\/2000\/svg"/)) {
+      source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+    }
+    if (!source.match(/^<svg[^>]+xmlns:xlink="http:\/\/www\.w3\.org\/1999\/xlink"/)) {
+      source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
+    }
+  
+    const image = new Image();
+    const svgBlob = new Blob([source], {type: 'image/svg+xml;charset=utf-8'});
+    const url = URL.createObjectURL(svgBlob);
+  
+    image.onload = () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = image.width;
+      canvas.height = image.height;
+      const context = canvas.getContext('2d');
+      context.fillStyle = 'white';
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      context.drawImage(image, 0, 0);
+      URL.revokeObjectURL(url);
+      canvas.toBlob((blob) => {
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = 'schema_diagram.png';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+      }, 'image/png');
+    };
+    image.src = url;
+  }
+
+  downloadPDF() {
+    const svgElement = this.diagramTarget.querySelector('svg')
+    if (!svgElement) return
+  
+    const serializer = new XMLSerializer()
+    let source = serializer.serializeToString(svgElement)
+  
+    // Add namespaces if missing
+    if (!source.match(/^<svg[^>]+xmlns="http:\/\/www\.w3\.org\/2000\/svg"/)) {
+      source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"')
+    }
+    if (!source.match(/^<svg[^>]+xmlns:xlink="http:\/\/www\.w3\.org\/1999\/xlink"/)) {
+      source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"')
+    }
+  
+    const image = new Image()
+    const svgBlob = new Blob([source], {type: 'image/svg+xml;charset=utf-8'})
+    const url = URL.createObjectURL(svgBlob)
+  
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = image.width
+      canvas.height = image.height
+      const context = canvas.getContext('2d')
+      context.fillStyle = 'white'
+      context.fillRect(0, 0, canvas.width, canvas.height)
+      context.drawImage(image, 0, 0)
+      URL.revokeObjectURL(url)
+
+      import('https://cdn.jsdelivr.net/npm/jspdf@2.5.1/+esm').then(({ default: jsPDF }) => {
+        const pdf = new jsPDF({
+          orientation: canvas.width > canvas.height ? 'landscape' : 'portrait',
+          unit: 'px',
+          format: [canvas.width, canvas.height]
+        })
+        pdf.addImage(
+          canvas.toDataURL('image/png'),
+          'PNG',
+          0,
+          0,
+          canvas.width,
+          canvas.height
+        )
+        pdf.save('schema_diagram.pdf')
+      })
+    }
+    image.src = url
+  }  
+}