script.js

// Function to view YAML file
function viewYaml(element) {
    const filename = element.getAttribute('data-filename');
    
    // Make an AJAX request to fetch the YAML content
    fetch(`/get_yaml?filename=${encodeURIComponent(filename)}`)
        .then(response => response.text())
        .then(yamlContent => {
            // Display the YAML content in a modal
            const modal = document.createElement('div');
            modal.style.position = 'fixed';
            modal.style.top = '0';
            modal.style.left = '0';
            modal.style.width = '100%';
            modal.style.height = '100%';
            modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
            modal.style.zIndex = '1000';
            modal.style.display = 'flex';
            modal.style.justifyContent = 'center';
            modal.style.alignItems = 'center';
            
            const modalContent = document.createElement('div');
            modalContent.style.backgroundColor = 'white';
            modalContent.style.padding = '20px';
            modalContent.style.borderRadius = '5px';
            modalContent.style.maxWidth = '80%';
            modalContent.style.maxHeight = '80%';
            modalContent.style.overflow = 'auto';
            
            const closeButton = document.createElement('button');
            closeButton.textContent = 'Close';
            closeButton.style.marginBottom = '10px';
            closeButton.style.padding = '5px 10px';
            closeButton.style.cursor = 'pointer';
            closeButton.onclick = () => {
                document.body.removeChild(modal);
            };
            
            const yamlPre = document.createElement('pre');
            yamlPre.textContent = yamlContent;
            yamlPre.style.whiteSpace = 'pre-wrap';
            yamlPre.style.wordBreak = 'break-word';
            
            modalContent.appendChild(closeButton);
            modalContent.appendChild(yamlPre);
            modal.appendChild(modalContent);
            
            document.body.appendChild(modal);
        })
        .catch(error => {
            console.error('Error fetching YAML content:', error);
            alert('Error fetching YAML content: ' + error.message);
        });
}

// Function to visualize coverage scores
function visualizeCoverage(scoreDetails) {
    const chartContainer = document.getElementById('coverage-chart');
    
    // Create a bar chart using a visualization library
    // This is just a placeholder - you would use a library like Chart.js
    
    let html = `<div style="margin-top: 20px;">
        <h3>Coverage by Section</h3>
        <div style="display: flex; flex-direction: column; gap: 5px;">`;
    
    for (const [section, details] of Object.entries(scoreDetails)) {
        const percentage = details.completion_rate;
        html += `
            <div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 2px;">
                    <span>${section}</span>
                    <span>${percentage}%</span>
                </div>
                <div style="width: 100%; background-color: #eee; height: 10px; border-radius: 5px;">
                    <div style="width: ${percentage}%; background-color: #3273dc; height: 10px; border-radius: 5px;"></div>
                </div>
            </div>`;
    }
    
    html += '</div></div>';
    
    chartContainer.innerHTML = html;
}

// Initialize any client-side functionality when the document loads
document.addEventListener('DOMContentLoaded', function() {
    // This could be used to initialize charts or other client-side features
    console.log('Client-side JavaScript initialized');
});