dbdoc_engine 0.1.0

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

@@ -0,0 +1,943 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Sidebar Controller
+ * Manages the sidebar functionality including resizing, collapsing, 
+ * searching, and navigation between groups and tables.
+ */
+export default class extends Controller {
+  // Define controller targets
+  static targets = ['sidebar', 'searchInput', 'groupList', 'toggleButton', 'resizer'];
+
+  // Define controller values for image paths
+  static values = {
+    arrowDownPath: String,
+    arrowHorizontalPath: String
+  }
+
+  /**
+   * Connect method - runs when controller is connected to the DOM
+   * Initializes sidebar functionality
+   */
+  connect() {
+    // Get arrow image paths from data attributes
+    this.arrowDownPathValue = this.element.dataset.arrowDownPath || '/assets/arrowdown.svg';
+    this.arrowHorizontalPathValue = this.element.dataset.arrowHorizontalPath || '/assets/arrowhorizontal.svg';
+    
+    // Initialize sidebar state
+    this.isExpanded = false;
+    
+    // Setup sidebar components and functionality
+    this.setupResizableSidebar();
+    this.storeOriginalContent();
+    this.hasStoredOriginalContent = true;
+    this.setupItemSelection();
+    this.restoreSidebarState();
+    this.setActiveItemFromCurrentPath();
+    this.setupTooltips();
+  }
+  
+  /**
+ * Sets up click handlers for selecting items in the sidebar
+ * Manages active state of items and stores selection in localStorage
+ */
+setupItemSelection() {
+  // Add click handlers for all clickable items in sidebar
+  document.querySelectorAll('.group-row, .table-row, .column-row').forEach(row => {
+    row.addEventListener('click', (event) => {
+      // Remove active class from all items
+      document.querySelectorAll('.sidebar-item-active').forEach(activeItem => {
+        activeItem.classList.remove('sidebar-item-active');
+      });
+      
+      // Add active class to clicked row
+      row.classList.add('sidebar-item-active');
+      
+      // Store the active item ID in localStorage for persistence
+      const parentElement = row.closest('.group, .db-table, .column');
+      if (parentElement) {
+        const itemId = parentElement.dataset.groupId || 
+                       parentElement.dataset.tableId || 
+                       (parentElement.querySelector('.column-name') ? 
+                        parentElement.querySelector('.column-name').dataset.physicalColumnName : '');
+        
+        if (itemId) {
+          localStorage.setItem('activeItemId', itemId);
+        }
+      }
+      
+      // Store sidebar state before navigation
+      this.storeSidebarState();
+    });
+  });
+}
+
+/**
+ * Highlights the active item based on current URL path
+ * This handles direct navigation to specific pages
+ */
+setActiveItemFromCurrentPath() {
+  const currentPath = window.location.pathname;
+  
+  // Check if we're on the root path
+  // Define paths where nothing should be active
+const noActiveSidebarRoutes = [
+  '/dbdoc/',
+  '/dbdoc/changelogs'
+];
+
+// Check if current path matches any "no active" route, including subpages
+const isNoActiveSidebar = noActiveSidebarRoutes.some(route =>
+  currentPath === route || currentPath.startsWith(route + '/')
+);
+
+if (isNoActiveSidebar || currentPath === '') {
+  // Clear any active highlighting...
+  document.querySelectorAll('.sidebar-item-active').forEach(item => {
+    item.classList.remove('sidebar-item-active');
+  });
+  // Also clear the active item from localStorage
+  localStorage.removeItem('activeItemId');
+  return; // Exit the method early
+}
+  
+  // Match group details path
+  const groupMatch = currentPath.match(/\/group_details\/(\d+)/);
+  const tableMatch = currentPath.match(/\/table_details\/(\d+)/);
+  
+  if (groupMatch) {
+    // Highlight the matching group
+    const groupId = groupMatch[1];
+    const groupItem = document.querySelector(`.group[data-group-id="${groupId}"]`);
+    if (groupItem && groupItem.querySelector('.group-row')) {
+      groupItem.querySelector('.group-row').classList.add('sidebar-item-active');
+    }
+  } else if (tableMatch) {
+    // Highlight the matching table
+    const tableId = tableMatch[1];
+    const tableItem = document.querySelector(`.db-table[data-table-id="${tableId}"]`);
+    if (tableItem && tableItem.querySelector('.table-row')) {
+      tableItem.querySelector('.table-row').classList.add('sidebar-item-active');
+    }
+  } else {
+    // Restore active item from localStorage if no match in URL
+    const activeItemId = localStorage.getItem('activeItemId');
+    if (activeItemId) {
+      const groupWithId = document.querySelector(`.group[data-group-id="${activeItemId}"]`);
+      const tableWithId = document.querySelector(`.db-table[data-table-id="${activeItemId}"]`);
+      
+      if (groupWithId && groupWithId.querySelector('.group-row')) {
+        groupWithId.querySelector('.group-row').classList.add('sidebar-item-active');
+      } else if (tableWithId && tableWithId.querySelector('.table-row')) {
+        tableWithId.querySelector('.table-row').classList.add('sidebar-item-active');
+      }
+    }
+  }
+}
+  
+  /**
+   * Stores the current state of the sidebar in localStorage
+   * Includes sidebar width, collapsed state, and expanded items
+   */
+  storeSidebarState() {
+    // Store whether sidebar is closed
+    localStorage.setItem('sidebarClosed', this.element.classList.contains('closed'));
+    
+    // Store sidebar width
+    localStorage.setItem('sidebarWidth', this.element.style.width || '250px');
+    
+    // Store expanded groups
+    const expandedGroups = [];
+    document.querySelectorAll('.group').forEach(group => {
+      const tableList = group.querySelector('.table-list');
+      if (tableList && tableList.classList.contains('visible')) {
+        const groupId = group.dataset.groupId;
+        if (groupId) expandedGroups.push(groupId);
+      }
+    });
+    localStorage.setItem('expandedGroups', JSON.stringify(expandedGroups));
+    
+    // Store expanded tables
+    const expandedTables = [];
+    document.querySelectorAll('.db-table').forEach(table => {
+      const columnList = table.querySelector('.column-list');
+      if (columnList && columnList.classList.contains('visible')) {
+        const tableId = table.dataset.tableId;
+        if (tableId) expandedTables.push(tableId);
+      }
+    });
+    localStorage.setItem('expandedTables', JSON.stringify(expandedTables));
+  }
+  
+  /**
+   * Restores the sidebar state from localStorage
+   * Applied when the page is loaded
+   */
+  restoreSidebarState() {
+    // Restore sidebar closed state
+    const sidebarClosed = localStorage.getItem('sidebarClosed') === 'true';
+    if (sidebarClosed) {
+      this.element.classList.add('closed');
+    } else {
+      this.element.classList.remove('closed');
+    }
+    
+    // Restore sidebar width
+    const sidebarWidth = localStorage.getItem('sidebarWidth');
+    if (sidebarWidth) {
+      this.element.style.width = sidebarWidth;
+    }
+    
+    // Restore expanded groups
+    try {
+      const expandedGroups = JSON.parse(localStorage.getItem('expandedGroups') || '[]');
+      expandedGroups.forEach(groupId => {
+        const group = document.querySelector(`.group[data-group-id="${groupId}"]`);
+        if (group) {
+          const tableList = group.querySelector('.table-list');
+          if (tableList) {
+            tableList.classList.add('visible');
+            tableList.classList.remove('hidden');
+            
+            // Update arrow rotation
+            const groupToggle = group.querySelector('.group-toggle svg');
+            if (groupToggle) {
+              groupToggle.style.transform = 'rotate(90deg)';
+            }
+          }
+        }
+      });
+    } catch (e) {
+      console.error('Error restoring expanded groups:', e);
+    }
+    
+    // Restore expanded tables
+    try {
+      const expandedTables = JSON.parse(localStorage.getItem('expandedTables') || '[]');
+      expandedTables.forEach(tableId => {
+        const table = document.querySelector(`.db-table[data-table-id="${tableId}"]`);
+        if (table) {
+          const columnList = table.querySelector('.column-list');
+          if (columnList) {
+            columnList.classList.add('visible');
+            columnList.classList.remove('hidden');
+            
+            // Update arrow rotation
+            const tableToggle = table.querySelector('.table-toggle svg');
+            if (tableToggle) {
+              tableToggle.style.transform = 'rotate(90deg)';
+            }
+          }
+        }
+      });
+    } catch (e) {
+      console.error('Error restoring expanded tables:', e);
+    }
+  }
+
+  /**
+   * Sets up resizable sidebar functionality
+   * Allows user to adjust sidebar width by dragging
+   */
+  setupResizableSidebar() {
+    const sidebar = this.element;
+    const resizer = this.resizerTarget;
+    
+    let startX = 0;
+    let startWidth = 0;
+    
+    // Function that starts the resize process
+    const startResize = (e) => {
+      e.preventDefault();
+      startX = e.clientX;
+      startWidth = parseInt(document.defaultView.getComputedStyle(sidebar).width, 10);
+      document.addEventListener('mousemove', resize);
+      document.addEventListener('mouseup', stopResize);
+      document.body.style.cursor = 'ew-resize';
+    };
+    
+    // Function that updates the sidebar width during resize
+    const resize = (e) => {
+      const newWidth = startWidth + (e.clientX - startX);
+      // Limit sidebar width within reasonable bounds
+      if (newWidth > 300 && newWidth < 500) {
+        sidebar.style.width = `${newWidth}px`;
+      }
+    };
+    
+    // Function that ends the resize process
+    const stopResize = () => {
+      document.removeEventListener('mousemove', resize);
+      document.removeEventListener('mouseup', stopResize);
+      document.body.style.cursor = '';
+      
+      // Store sidebar state after resizing
+      this.storeSidebarState();
+    };
+    
+    // Add event listener to start resizing
+    resizer.addEventListener('mousedown', startResize);
+  }
+
+  /**
+   * Toggles the sidebar between expanded and collapsed states
+   * Maintains toggle button and resizer visibility
+   */
+  toggleSidebar() {
+    const sidebar = this.element;
+    const toggleButton = this.toggleButtonTarget;
+    
+    if (sidebar.classList.contains('closed')) {
+      // Open the sidebar
+      sidebar.classList.remove('closed');
+      sidebar.style.width = sidebar.dataset.lastWidth || '250px';
+    } else {
+      // Store current width before closing
+      sidebar.dataset.lastWidth = sidebar.style.width || getComputedStyle(sidebar).width;
+      // Close the sidebar but keep a minimal width for the resizer and button
+      sidebar.classList.add('closed');
+      sidebar.style.width = '20px';
+    }
+    
+    // Toggle the arrow direction
+    const arrowImg = toggleButton.querySelector('img');
+    if (arrowImg) {
+      arrowImg.style.transform = sidebar.classList.contains('closed') ? 'rotate(180deg)' : '';
+    }
+    
+    // Store sidebar state
+    this.storeSidebarState();
+  }
+
+  /**
+   * Toggles a group's table list visibility
+   * Updates the arrow rotation indicator
+   */
+  toggleGroup(event) {
+    const group = event.currentTarget.closest('.group');
+    const tableList = group.querySelector('.table-list');
+    tableList.classList.toggle('visible');
+    
+    if (tableList.classList.contains('visible')) {
+      tableList.classList.remove('hidden');
+    } else {
+      tableList.classList.add('hidden');
+    }
+
+    const svg = event.currentTarget.querySelector('svg');
+    // Update rotation to indicate expanded/collapsed state
+    svg.style.transform = tableList.classList.contains('visible') ? 'rotate(90deg)' : '';
+    
+    // Store sidebar state
+    this.storeSidebarState();
+    
+    // Prevent event from bubbling to parent handlers
+    event.stopPropagation();
+  }
+
+  /**
+   * Toggles a table's column list visibility
+   * Updates the arrow rotation indicator
+   */
+  toggleTable(event) {
+    const table = event.currentTarget.closest('.db-table');
+    const columnList = table.querySelector('.column-list');
+    columnList.classList.toggle('visible');
+    
+    if (columnList.classList.contains('visible')) {
+      columnList.classList.remove('hidden');
+    } else {
+      columnList.classList.add('hidden');
+    }
+
+    const svg = event.currentTarget.querySelector('svg');
+    // Update rotation to indicate expanded/collapsed state
+    svg.style.transform = columnList.classList.contains('visible') ? 'rotate(90deg)' : '';
+    
+    // Store sidebar state
+    this.storeSidebarState();
+    
+    // Prevent event from bubbling to parent handlers
+    event.stopPropagation();
+  }
+
+  /**
+   * Toggles all groups and tables between expanded and collapsed states
+   */
+  toggleGroupList() {
+    // Toggle the groupList collapsed class
+    this.groupListTarget.classList.toggle('collapsed');
+    
+    // Toggle expanded state
+    this.isExpanded = !this.isExpanded;
+    
+    if (this.isExpanded) {
+      // When clicking the collapse button once, expand everything
+      this.expandAll();
+    } else {
+      // When clicking again, collapse tables and columns but keep groups visible
+      this.collapseTablesAndColumns();
+    }
+  }
+  
+  /**
+   * Expands all groups and tables in the sidebar
+   */
+  expandAll() {
+    // Expand all group table lists
+    document.querySelectorAll('.group').forEach(group => {
+      const tableList = group.querySelector('.table-list');
+      tableList.classList.add('visible');
+      tableList.classList.remove('hidden');
+      const groupToggleSvg = group.querySelector('.group-toggle svg');
+      if (groupToggleSvg) {
+        groupToggleSvg.style.transform = 'rotate(90deg)';
+      }
+    });
+    
+    // Expand all table column lists
+    document.querySelectorAll('.db-table').forEach(table => {
+      const columnList = table.querySelector('.column-list');
+      columnList.classList.add('visible');
+      columnList.classList.remove('hidden');
+      const tableToggleSvg = table.querySelector('.table-toggle svg');
+      if (tableToggleSvg) {
+        tableToggleSvg.style.transform = 'rotate(90deg)';
+      }
+    });
+  }
+
+  /**
+   * Collapses all tables and columns in the sidebar
+   */
+  collapseTablesAndColumns() {
+    // Collapse all table column lists
+    document.querySelectorAll('.db-table').forEach(table => {
+      const columnList = table.querySelector('.column-list');
+      columnList.classList.remove('visible');
+      columnList.classList.add('hidden');
+      const tableToggleSvg = table.querySelector('.table-toggle svg');
+      if (tableToggleSvg) {
+        tableToggleSvg.style.transform = '';
+      }
+    });
+    
+    // Collapse all group table lists
+    document.querySelectorAll('.group').forEach(group => {
+      const tableList = group.querySelector('.table-list');
+      tableList.classList.remove('visible');
+      tableList.classList.add('hidden');
+      const groupToggleSvg = group.querySelector('.group-toggle svg');
+      if (groupToggleSvg) {
+        groupToggleSvg.style.transform = '';
+      }
+    });
+  }
+  
+  /**
+   * Stores original content of sidebar items for search reset functionality
+   */
+  storeOriginalContent() {
+    // Store original group content
+    document.querySelectorAll('.group').forEach((groupEl) => {
+      const groupTextEl = groupEl.querySelector('.group-heading');
+      if (groupTextEl) {
+        groupEl.dataset.originalContent = groupTextEl.innerHTML;
+        groupEl.dataset.searchEnglish = groupTextEl.textContent;
+      }
+    });
+    
+    // Store original table content
+    document.querySelectorAll('.db-table').forEach((tableEl) => {
+      const tableNameEl = tableEl.querySelector('.table-name');
+      if (tableNameEl) {
+        tableEl.dataset.originalContent = tableNameEl.innerHTML;
+        tableEl.dataset.searchEnglish = tableNameEl.dataset.originalTableName || tableNameEl.textContent;
+        tableEl.dataset.searchJapanese = tableNameEl.dataset.physicalTableName || '';
+      }
+    });
+    
+    // Store original column content
+    document.querySelectorAll('.column').forEach((columnEl) => {
+      const columnNameEl = columnEl.querySelector('.column-name');
+      if (columnNameEl) {
+        columnEl.dataset.originalContent = columnNameEl.innerHTML;
+        columnEl.dataset.searchEnglish = columnNameEl.dataset.originalColumnName || columnNameEl.textContent;
+        columnEl.dataset.searchJapanese = columnNameEl.dataset.physicalColumnName || '';
+        columnEl.dataset.dataType = columnNameEl.dataset.dataType || '';
+      }
+    });
+  }
+
+  /**
+   * Sidebar search functionality with highlight and filter
+   * @param {Event} event - The input event from the search field
+   */
+  search(event) {
+    let filter = event.target.value.toLowerCase().trim();
+    let matchesFound = false;
+    
+    // Get or create the "no matches" message element
+    let noMatchesElement = document.getElementById('no-matches-message');
+    if (!noMatchesElement) {
+      noMatchesElement = document.createElement('div');
+      noMatchesElement.id = 'no-matches-message';
+      noMatchesElement.className = 'text-center p-3 mt-3';
+      noMatchesElement.style.color = 'white';
+      noMatchesElement.style.fontStyle = 'italic';
+      noMatchesElement.textContent = 'No matches found';
+      this.groupListTarget.appendChild(noMatchesElement);
+    }
+    
+    // Initially hide the no matches message
+    noMatchesElement.style.display = 'none';
+    
+    if (filter.length > 0) {
+      // First, expand all groups and tables to make everything visible
+      this.expandAll();
+      
+      // Track visibility of elements
+      let visibleGroups = new Set();
+      let visibleTables = new Set();
+      let visibleColumns = new Set();
+      
+      // Process all groups
+      document.querySelectorAll('.group').forEach((groupEl) => {
+        let groupMatch = false;
+        // Clear any previous highlighting in group text
+        const groupTextEl = groupEl.querySelector('.group-heading');
+        if (groupTextEl && groupEl.dataset.originalContent) {
+          groupTextEl.innerHTML = groupEl.dataset.originalContent;
+        }
+        
+        // Check group name (English only since groups don't have Japanese names)
+        const groupNameText = groupTextEl.textContent.toLowerCase();
+        if (groupNameText.includes(filter)) {
+          groupMatch = true;
+          // Highlight group name
+          const regex = new RegExp(`(${filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+          groupTextEl.innerHTML = groupTextEl.textContent.replace(regex, '<span class="highlight">$1</span>');
+        }
+        
+        // Process tables within this group
+        let hasVisibleTables = false;
+        groupEl.querySelectorAll('.db-table').forEach((tableEl) => {
+          let tableMatch = false;
+          // Clear any previous highlighting
+          const tableNameEl = tableEl.querySelector('.table-name');
+          if (tableNameEl && tableEl.dataset.originalContent) {
+            tableNameEl.innerHTML = tableEl.dataset.originalContent;
+          }
+          
+          // Get both English and Japanese table names
+          const tableName = tableNameEl.dataset.originalTableName || tableNameEl.textContent;
+          const physicalTableName = tableNameEl.dataset.physicalTableName || '';
+          
+          // Convert to lowercase for case-insensitive search
+          const tableNameLower = tableName.toLowerCase();
+          const physicalTableNameLower = physicalTableName.toLowerCase();
+          
+          // Check if filter matches either name
+          if (tableNameLower.includes(filter) || physicalTableNameLower.includes(filter)) {
+            tableMatch = true;
+            hasVisibleTables = true;
+            
+            // Highlight the matching text
+            if (tableNameLower.includes(filter)) {
+              // If English name matches, highlight the specific match
+              const regex = new RegExp(`(${filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+              tableNameEl.innerHTML = tableName.replace(regex, '<span class="highlight">$1</span>');
+            } else {
+              // If only Japanese name matches, highlight the entire English name
+              tableNameEl.innerHTML = `<span class="highlight">${tableName}</span>`;
+            }
+            
+            visibleTables.add(tableEl.dataset.tableId);
+          }
+          
+          // Process columns within this table
+          let hasVisibleColumns = false;
+          tableEl.querySelectorAll('.column').forEach((columnEl) => {
+            let columnMatch = false;
+            // Clear any previous highlighting
+            const columnNameEl = columnEl.querySelector('.column-name');
+            if (columnNameEl && columnEl.dataset.originalContent) {
+              columnNameEl.innerHTML = columnEl.dataset.originalContent;
+            }
+            
+            // Get both English and Japanese column names
+            const columnName = columnNameEl.dataset.originalColumnName || columnNameEl.textContent;
+            const physicalColumnName = columnNameEl.dataset.physicalColumnName || '';
+            
+            // Convert to lowercase for case-insensitive search
+            const columnNameLower = columnName.toLowerCase();
+            const physicalColumnNameLower = physicalColumnName.toLowerCase();
+            
+            // Check if filter matches either name
+            if (columnNameLower.includes(filter) || physicalColumnNameLower.includes(filter)) {
+              columnMatch = true;
+              hasVisibleColumns = true;
+              tableMatch = true;  // Column match makes table visible too
+              
+              // Highlight the matching text
+              if (columnNameLower.includes(filter)) {
+                // If English name matches, highlight the specific match
+                const regex = new RegExp(`(${filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+                columnNameEl.innerHTML = columnName.replace(regex, '<span class="highlight">$1</span>');
+              } else {
+                // If only Japanese name matches, highlight the entire English name
+                columnNameEl.innerHTML = `<span class="highlight">${columnName}</span>`;
+              }
+              
+              visibleColumns.add(columnEl.querySelector('.column-name').dataset.physicalColumnName);
+            }
+            
+            // Show or hide column based on match
+            columnEl.style.display = columnMatch ? 'block' : 'none';
+          });
+          
+          // If any column matches, make table and its column list visible
+          if (hasVisibleColumns) {
+            tableEl.querySelector('.column-list').classList.add('visible');
+            tableEl.querySelector('.column-list').classList.remove('hidden');
+            tableEl.querySelector('.table-toggle svg').style.transform = 'rotate(90deg)';
+            hasVisibleTables = true;
+            tableMatch = true;
+          }
+          
+          // Show or hide table based on match
+          tableEl.style.display = tableMatch ? 'block' : 'none';
+          
+          // If table matches, make sure its parent group is visible
+          if (tableMatch) {
+            groupMatch = true;
+          }
+        });
+        
+        // If any table matches, make group and its table list visible
+        if (hasVisibleTables) {
+          groupEl.querySelector('.table-list').classList.add('visible');
+          groupEl.querySelector('.table-list').classList.remove('hidden');
+          groupEl.querySelector('.group-toggle svg').style.transform = 'rotate(90deg)';
+          groupMatch = true;
+        }
+        
+        // Show or hide group based on match
+        groupEl.style.display = groupMatch ? 'block' : 'none';
+        
+        // Update matchesFound flag
+        if (groupMatch) {
+          matchesFound = true;
+          visibleGroups.add(groupEl.dataset.groupId);
+        }
+      });
+      
+      // Show "No matches found" message if no matches were found
+      if (!matchesFound) {
+        noMatchesElement.style.display = 'block';
+      }
+    } else {
+      // If the search is empty, restore original content and respect the current expand/collapse state
+      this.resetAndRespectExpandState();
+    }
+    
+    // Update tooltips after search is complete
+    this.updateTooltips();
+  }
+
+  /**
+   * Reset search highlighting and restore expand/collapse state
+   */
+  resetAndRespectExpandState() {
+    // Hide the "no matches" message if it exists
+    const noMatchesElement = document.getElementById('no-matches-message');
+    if (noMatchesElement) {
+      noMatchesElement.style.display = 'none';
+    }
+  
+    // Reset all groups to their original content and make them visible
+    document.querySelectorAll('.group').forEach(groupEl => {
+      const groupTextEl = groupEl.querySelector('.group-heading');
+      if (groupTextEl && groupEl.dataset.originalContent) {
+        groupTextEl.innerHTML = groupEl.dataset.originalContent;
+      }
+      groupEl.style.display = 'block';
+    });
+    
+    // Reset all tables to their original content and make them visible
+    document.querySelectorAll('.db-table').forEach(tableEl => {
+      const tableNameEl = tableEl.querySelector('.table-name');
+      if (tableNameEl && tableEl.dataset.originalContent) {
+        tableNameEl.innerHTML = tableEl.dataset.originalContent;
+      }
+      tableEl.style.display = 'block';
+    });
+    
+    // Reset all columns to their original content and make them visible
+    document.querySelectorAll('.column').forEach(columnEl => {
+      const columnNameEl = columnEl.querySelector('.column-name');
+      if (columnNameEl && columnEl.dataset.originalContent) {
+        columnNameEl.innerHTML = columnEl.dataset.originalContent;
+      }
+      columnEl.style.display = 'block';
+    });
+    
+    // Respect the current expand/collapse state
+    if (this.isExpanded) {
+      this.expandAll();
+    } else {
+      this.collapseTablesAndColumns();
+    }
+    
+    // Update tooltips after resetting
+    this.updateTooltips();
+  }
+  
+  /**
+ * Handles navigation to a group details page
+ * @param {Event} event - The click event
+ */
+navigateToGroup(event) {
+  // Find the group row and add active class
+  const groupRow = event.target.closest('.group-row');
+  if (groupRow) {
+    // Remove active class from all items
+    document.querySelectorAll('.sidebar-item-active').forEach(activeItem => {
+      activeItem.classList.remove('sidebar-item-active');
+    });
+    
+    // Add active class to this row
+    groupRow.classList.add('sidebar-item-active');
+  }
+  
+  // Store sidebar state before navigation
+  this.storeSidebarState();
+  
+  const groupItem = event.target.closest('.group');
+  const groupId = groupItem.dataset.groupId;
+  if (groupId) {
+    window.location.href = '/dbdoc/group_details/' + groupId;
+  }
+  
+  // Prevent default to handle navigation manually
+  event.preventDefault();
+}
+
+/**
+ * Handles navigation to a table details page
+ * @param {Event} event - The click event
+ */
+navigateToTable(event) {
+  // Find the table row and add active class
+  const tableRow = event.target.closest('.table-row');
+  if (tableRow) {
+    // Remove active class from all items
+    document.querySelectorAll('.sidebar-item-active').forEach(activeItem => {
+      activeItem.classList.remove('sidebar-item-active');
+    });
+    
+    // Add active class to this row
+    tableRow.classList.add('sidebar-item-active');
+  }
+  
+  // Store sidebar state before navigation
+  this.storeSidebarState();
+  
+  const tableItem = event.target.closest('.db-table');
+  const tableId = tableItem.dataset.tableId;
+  if (tableId) {
+    window.location.href = '/dbdoc/table_details/' + tableId;
+  }
+  
+  // Prevent default to handle navigation manually
+  event.preventDefault();
+}
+
+  /**
+   * Sets up tooltip functionality for sidebar items
+   */
+  setupTooltips() {
+    // Create tooltip element if it doesn't exist
+    if (!document.getElementById('sidebar-tooltip')) {
+      const tooltip = document.createElement('div');
+      tooltip.id = 'sidebar-tooltip';
+      tooltip.classList.add('sidebar-tooltip');
+      
+      // Create container for tooltip content
+      const tooltipContent = document.createElement('div');
+      tooltipContent.classList.add('tooltip-content');
+      
+      tooltip.appendChild(tooltipContent);
+      document.body.appendChild(tooltip);
+    }
+  
+    // Add event listeners to the row elements instead of just the text
+    const tooltipItems = document.querySelectorAll(
+      '.group-row, .table-row, .column-row'
+    );
+  
+    tooltipItems.forEach(item => {
+      item.addEventListener('mouseover', this.showTooltip.bind(this));
+      item.addEventListener('mouseout', this.hideTooltip.bind(this));
+      item.addEventListener('mousemove', this.moveTooltip.bind(this));
+    });
+  }
+
+  /**
+   * Shows tooltip with relevant information
+   * @param {Event} event - The mouseover event
+   */
+  showTooltip(event) {
+    const tooltip = document.getElementById('sidebar-tooltip');
+    const tooltipContent = tooltip.querySelector('.tooltip-content');
+    
+    // Clear previous content
+    tooltipContent.innerHTML = '';
+  
+    // Find the closest relevant element
+    const groupRow = event.currentTarget.closest('.group-row');
+    const tableRow = event.currentTarget.closest('.table-row');
+    const columnRow = event.currentTarget.closest('.column-row');
+  
+    if (groupRow) {
+      // Group tooltip
+      const groupElement = groupRow.closest('.group');
+      const groupName = groupRow.querySelector('.group-heading').textContent;
+      const tableCount = groupElement.querySelectorAll('.db-table').length;
+      
+      tooltipContent.innerHTML = `
+        <div class="tooltip-line">
+          <span class="tooltip-label">Name:</span> 
+          <span class="tooltip-value">${groupName}</span>
+        </div>
+        <div class="tooltip-line">
+          <span class="tooltip-label">Tables:</span> 
+          <span class="tooltip-value">${tableCount}</span>
+        </div>
+      `;
+    } else if (tableRow) {
+      // Table tooltip
+      const tableElement = tableRow.closest('.db-table');
+      const tableNameElement = tableRow.querySelector('.table-name');
+      const originalName = tableNameElement.dataset.originalTableName || 'N/A';
+      const physicalName = tableNameElement.dataset.physicalTableName || 'N/A';
+      const columnCount = tableElement.querySelectorAll('.column').length;
+      
+      tooltipContent.innerHTML = `
+        <div class="tooltip-line">
+          <span class="tooltip-label">Original:</span> 
+          <span class="tooltip-value">${originalName}</span>
+        </div>
+        <div class="tooltip-line">
+          <span class="tooltip-label">Physical:</span> 
+          <span class="tooltip-value">${physicalName}</span>
+        </div>
+        <div class="tooltip-line">
+          <span class="tooltip-label">Fields:</span> 
+          <span class="tooltip-value">${columnCount}</span>
+        </div>
+      `;
+    } else if (columnRow) {
+      // Column tooltip
+      const columnNameElement = columnRow.querySelector('.column-name');
+      const originalName = columnNameElement.dataset.originalColumnName || 'N/A';
+      const physicalName = columnNameElement.dataset.physicalColumnName || 'N/A';
+      const dataType = columnNameElement.dataset.dataType || 'N/A';
+  
+      tooltipContent.innerHTML = `
+        <div class="tooltip-line">
+          <span class="tooltip-label">Name:</span> 
+          <span class="tooltip-value">${originalName}</span>
+        </div>
+        <div class="tooltip-line">
+          <span class="tooltip-label">Physical:</span> 
+          <span class="tooltip-value">${physicalName}</span>
+        </div>
+        <div class="tooltip-line">
+          <span class="tooltip-label">Type:</span> 
+          <span class="tooltip-value">${dataType}</span>
+        </div>
+      `;
+    }
+  
+    tooltip.classList.add('visible');
+  
+    // Position the tooltip
+    this.moveTooltip(event);
+  }
+
+  /**
+ * Updates tooltip position based on mouse movement
+ * @param {Event} event - The mousemove event
+ */
+moveTooltip(event) {
+  const tooltip = document.getElementById('sidebar-tooltip');
+  const sidebar = document.getElementById('sidebar');
+  
+  // Get the sidebar width and position
+  const sidebarRect = sidebar.getBoundingClientRect();
+  const sidebarRight = sidebarRect.right;
+  
+  // Position tooltip to the right of the sidebar at the same vertical position as the mouse
+  let left = sidebarRight + 15; // Add some margin
+  let top = event.clientY;
+
+  // Ensure tooltip doesn't go off the screen
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const tooltipRect = tooltip.getBoundingClientRect();
+
+  // Adjust horizontal position if needed
+  if (left + tooltipRect.width > viewportWidth) {
+    left = viewportWidth - tooltipRect.width - 10;
+  }
+
+  // Adjust vertical position to center the tooltip relative to the cursor
+  top = top - (tooltipRect.height / 2);
+  
+  // Ensure tooltip doesn't go off the top or bottom of the screen
+  if (top < 10) {
+    top = 10;
+  } else if (top + tooltipRect.height > viewportHeight) {
+    top = viewportHeight - tooltipRect.height - 10;
+  }
+
+  tooltip.style.left = `${left}px`;
+  tooltip.style.top = `${top}px`;
+}
+
+  /**
+   * Hides the tooltip
+   */
+  hideTooltip() {
+    const tooltip = document.getElementById('sidebar-tooltip');
+    tooltip.classList.remove('visible');
+  }
+  hideTooltipForce() {
+  const tooltip = document.getElementById('sidebar-tooltip');
+  if (tooltip) {
+    tooltip.classList.remove('visible');
+    tooltip.style.opacity = 0;
+  }
+}
+
+  /**
+   * Updates tooltip listeners after DOM changes
+   * Call this after search or other DOM modifications
+   */
+  updateTooltips() {
+    // Remove existing listeners
+    const tooltipItems = document.querySelectorAll(
+      '.group-text, .table-name, .column-name'
+    );
+
+    tooltipItems.forEach(item => {
+      item.removeEventListener('mouseover', this.showTooltip);
+      item.removeEventListener('mouseout', this.hideTooltip);
+      item.removeEventListener('mousemove', this.moveTooltip);
+    });
+
+    // Re-setup tooltips
+    this.setupTooltips();
+  }
+}