ui.js

// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', () => {
  // Get all tab buttons
  const tabButtons = document.querySelectorAll('.tab-btn');
  
  // Add click event to each tab button
  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      // Remove active class from all buttons
      tabButtons.forEach(btn => btn.classList.remove('active'));
      
      // Add active class to clicked button
      button.classList.add('active');
      
      // Get the tab to show based on data-tab attribute
      const tabToShow = button.getAttribute('data-tab');
      
      // Logic to show/hide content based on selected tab
      // This would be expanded as we develop the full application
      console.log(`Tab ${tabToShow} selected`);
      
      // For now, we'll just update some visibility (to be expanded)
      if (tabToShow === 'single-sample') {
        document.getElementById('tab1').style.display = 'block';
        document.getElementById('singleSamplePlot').style.display = 'block';
        // Hide other tabs' content when implemented
      }
    });
  });
  
  // Update confidence level display when slider changes
  const confidenceLevelInput = document.querySelector('#confidenceLevel');
  const confidenceLevelValue = document.querySelector('#confidenceLevelValue');
  
  if (confidenceLevelInput && confidenceLevelValue) {
    confidenceLevelInput.addEventListener('input', () => {
      confidenceLevelValue.textContent = `${confidenceLevelInput.value}%`;
    });
  }
});