src/display/css_html_js.py

"""
Custom CSS, HTML, and JavaScript for the CodeReview Leaderboard
"""

# Dark theme CSS
DARK_THEME_CSS = """
/* Dark Theme Styling */
:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --text-primary: #e6edf3;
    --text-secondary: #7d8590;
    --border-color: #30363d;
    --accent-color: #238636;
    --accent-hover: #2ea043;
    --danger-color: #da3633;
    --warning-color: #d29922;
    --info-color: #1f6feb;
}

/* Global dark theme */
.gradio-container {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Headers and text */
.gradio-container h1, .gradio-container h2, .gradio-container h3 {
    color: var(--text-primary) !important;
}

.gradio-container p, .gradio-container span {
    color: var(--text-secondary) !important;
}

/* Tabs */
.gradio-container .tab-nav {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.gradio-container .tab-nav button {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: none !important;
    padding: 12px 24px !important;
    transition: all 0.2s ease !important;
}

.gradio-container .tab-nav button:hover {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary) !important;
}

.gradio-container .tab-nav button.selected {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary) !important;
    border-bottom: 2px solid var(--accent-color) !important;
}

/* Tables */
.gradio-container .dataframe {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.gradio-container .dataframe table {
    background: var(--bg-secondary) !important;
}

.gradio-container .dataframe th {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-color) !important;
    padding: 12px !important;
    font-weight: 600 !important;
}

.gradio-container .dataframe td {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 10px 12px !important;
}

.gradio-container .dataframe tr:hover td {
    background: var(--bg-tertiary) !important;
}

/* Form inputs */
.gradio-container input, .gradio-container select, .gradio-container textarea {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
}

.gradio-container input:focus, .gradio-container select:focus, .gradio-container textarea:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px rgba(35, 134, 54, 0.2) !important;
}

/* Buttons */
.gradio-container button {
    background: var(--accent-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.gradio-container button:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-1px) !important;
}

.gradio-container button:active {
    transform: translateY(0) !important;
}

/* Dropdowns */
.gradio-container .dropdown {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
}

.gradio-container .dropdown-menu {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.gradio-container .dropdown-menu .dropdown-item {
    color: var(--text-primary) !important;
    padding: 8px 12px !important;
}

.gradio-container .dropdown-menu .dropdown-item:hover {
    background: var(--bg-tertiary) !important;
}

/* Sliders */
.gradio-container .slider {
    background: var(--bg-tertiary) !important;
}

.gradio-container .slider input[type="range"] {
    background: var(--bg-tertiary) !important;
}

.gradio-container .slider input[type="range"]::-webkit-slider-thumb {
    background: var(--accent-color) !important;
    border: 2px solid var(--bg-secondary) !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
}

.gradio-container .slider input[type="range"]::-webkit-slider-track {
    background: var(--border-color) !important;
    border-radius: 4px !important;
    height: 6px !important;
}

/* Accordions */
.gradio-container .accordion {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    margin: 16px 0 !important;
}

.gradio-container .accordion-header {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    padding: 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
}

.gradio-container .accordion-header:hover {
    background: var(--bg-primary) !important;
}

/* Status messages */
.gradio-container .success {
    background: rgba(35, 134, 54, 0.1) !important;
    color: var(--accent-color) !important;
    border: 1px solid var(--accent-color) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    margin: 8px 0 !important;
}

.gradio-container .error {
    background: rgba(218, 54, 51, 0.1) !important;
    color: var(--danger-color) !important;
    border: 1px solid var(--danger-color) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    margin: 8px 0 !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .gradio-container {
        padding: 16px !important;
    }
    
    .gradio-container .tab-nav button {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
    
    .gradio-container .dataframe {
        font-size: 14px !important;
    }
}
"""

# Custom JavaScript for enhanced functionality
CUSTOM_JS = """
// Enhanced table sorting and filtering
function enhanceTable() {
    const tables = document.querySelectorAll('.dataframe table');
    tables.forEach(table => {
        // Add sorting functionality
        const headers = table.querySelectorAll('th');
        headers.forEach((header, index) => {
            header.style.cursor = 'pointer';
            header.addEventListener('click', () => sortTable(table, index));
        });
    });
}

function sortTable(table, columnIndex) {
    const tbody = table.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    
    rows.sort((a, b) => {
        const aText = a.cells[columnIndex].textContent.trim();
        const bText = b.cells[columnIndex].textContent.trim();
        
        // Try to parse as numbers first
        const aNum = parseFloat(aText);
        const bNum = parseFloat(bText);
        
        if (!isNaN(aNum) && !isNaN(bNum)) {
            return bNum - aNum; // Descending for numbers
        }
        
        return aText.localeCompare(bText); // Ascending for text
    });
    
    rows.forEach(row => tbody.appendChild(row));
}

// Auto-refresh functionality
function autoRefresh() {
    setInterval(() => {
        const refreshBtn = document.querySelector('button[aria-label="Refresh"]');
        if (refreshBtn) {
            refreshBtn.click();
        }
    }, 30000); // Refresh every 30 seconds
}

// Initialize enhancements
document.addEventListener('DOMContentLoaded', function() {
    enhanceTable();
    autoRefresh();
});
"""

# HTML components
HEADER_HTML = """
<div style="text-align: center; padding: 20px; background: var(--bg-secondary); border-radius: 12px; margin-bottom: 20px;">
    <h1 style="color: var(--text-primary); margin: 0; font-size: 2.5em; font-weight: 700;">
        🏆 CodeReview Leaderboard
    </h1>
    <p style="color: var(--text-secondary); margin: 10px 0 0 0; font-size: 1.2em;">
        Benchmarking code review generation models across languages and categories
    </p>
</div>
"""

FOOTER_HTML = """
<div style="text-align: center; padding: 20px; background: var(--bg-secondary); border-radius: 12px; margin-top: 20px;">
    <p style="color: var(--text-secondary); margin: 0; font-size: 0.9em;">
        Built with ❤️ for the code review community | 
        <a href="https://github.com/your-repo" style="color: var(--accent-color); text-decoration: none;">
            GitHub
        </a>
    </p>
</div>
"""