serialbench 0.1.1 → 0.1.3

data/lib/serialbench/templates/assets/js/navigation.js

@@ -0,0 +1,142 @@
+// Navigation and UI interaction functions for Serialbench reports
+
+/**
+ * Show a specific section and update navigation state
+ */
+function showSection(sectionName) {
+    // Hide all sections
+    document.querySelectorAll('.section').forEach(section => {
+        section.classList.remove('active');
+    });
+
+    // Remove active class from all nav buttons
+    document.querySelectorAll('.nav-btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+
+    // Show selected section
+    const targetSection = document.getElementById(sectionName);
+    if (targetSection) {
+        targetSection.classList.add('active');
+    }
+
+    // Add active class to clicked button
+    if (event && event.target) {
+        event.target.classList.add('active');
+    }
+
+    // Smooth scroll to top of section
+    if (targetSection) {
+        targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+
+/**
+ * Initialize navigation event listeners
+ */
+function initializeNavigation() {
+    // Add click event listeners to navigation buttons
+    document.querySelectorAll('.nav-btn').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            const sectionName = this.getAttribute('data-section') ||
+                               this.textContent.toLowerCase().replace(/\s+/g, '').replace('performance', '');
+            showSection(sectionName);
+        });
+    });
+
+    // Add keyboard navigation support
+    document.addEventListener('keydown', function(e) {
+        if (e.altKey) {
+            const keyMap = {
+                '1': 'parsing',
+                '2': 'generation',
+                '3': 'streaming',
+                '4': 'memory',
+                '5': 'summary',
+                '6': 'environments'
+            };
+
+            if (keyMap[e.key]) {
+                e.preventDefault();
+                showSection(keyMap[e.key]);
+
+                // Update button state
+                document.querySelectorAll('.nav-btn').forEach(btn => {
+                    btn.classList.remove('active');
+                    if (btn.textContent.toLowerCase().includes(keyMap[e.key]) ||
+                        (keyMap[e.key] === 'parsing' && btn.textContent.toLowerCase().includes('parsing')) ||
+                        (keyMap[e.key] === 'generation' && btn.textContent.toLowerCase().includes('generation')) ||
+                        (keyMap[e.key] === 'streaming' && btn.textContent.toLowerCase().includes('streaming')) ||
+                        (keyMap[e.key] === 'memory' && btn.textContent.toLowerCase().includes('memory')) ||
+                        (keyMap[e.key] === 'summary' && btn.textContent.toLowerCase().includes('summary')) ||
+                        (keyMap[e.key] === 'environments' && btn.textContent.toLowerCase().includes('environment'))) {
+                        btn.classList.add('active');
+                    }
+                });
+            }
+        }
+    });
+}
+
+/**
+ * Add loading states to charts
+ */
+function addChartLoadingStates() {
+    document.querySelectorAll('.chart-container canvas').forEach(canvas => {
+        const container = canvas.closest('.chart-container');
+        if (container) {
+            container.classList.add('loading');
+
+            // Remove loading state after chart is rendered
+            setTimeout(() => {
+                container.classList.remove('loading');
+            }, 1000);
+        }
+    });
+}
+
+/**
+ * Add tooltips to navigation buttons
+ */
+function addNavigationTooltips() {
+    const tooltips = {
+        'parsing': 'View parsing performance benchmarks (Alt+1)',
+        'generation': 'View generation performance benchmarks (Alt+2)',
+        'streaming': 'View streaming performance benchmarks (Alt+3)',
+        'memory': 'View memory usage analysis (Alt+4)',
+        'summary': 'View performance summary and recommendations (Alt+5)',
+        'environments': 'View environment and version details (Alt+6)'
+    };
+
+    document.querySelectorAll('.nav-btn').forEach(btn => {
+        const text = btn.textContent.toLowerCase();
+        for (const [key, tooltip] of Object.entries(tooltips)) {
+            if (text.includes(key) || (key === 'environments' && text.includes('environment'))) {
+                btn.title = tooltip;
+                break;
+            }
+        }
+    });
+}
+
+/**
+ * Initialize all UI enhancements
+ */
+function initializeUI() {
+    // Wait for DOM to be fully loaded
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeNavigation();
+            addNavigationTooltips();
+            addChartLoadingStates();
+        });
+    } else {
+        initializeNavigation();
+        addNavigationTooltips();
+        addChartLoadingStates();
+    }
+}
+
+// Auto-initialize when script loads
+initializeUI();

data/lib/serialbench/templates/base.liquid

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ page_title | default: "Serialbench Results" }}</title>
+
+    <!-- Preload fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+    <!-- Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js" defer></script>
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="assets/css/benchmark_report.css">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23F97316' viewBox='0 0 24 24'%3e%3cpath d='M12 2L2 7v10c0 5.55 3.84 9.95 9 11 5.16-1.05 9-5.45 9-11V7l-10-5z'/%3e%3c/svg%3e">
+</head>
+<body>
+    <!-- Navigation Bar -->
+    <nav class="navbar">
+        <div class="navbar-container">
+            <div class="navbar-header">
+                <a href="#" class="navbar-brand">
+                    <div class="navbar-brand-icon">
+                        <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M12 2L2 7v10c0 5.55 3.84 9.95 9 11 5.16-1.05 9-5.45 9-11V7l-10-5z"/>
+                        </svg>
+                    </div>
+                    Serialbench
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        {{ content }}
+    </main>
+
+    <!-- JavaScript -->
+    <script src="assets/js/chart_helpers.js" defer></script>
+    <script src="assets/js/navigation.js" defer></script>
+
+</body>
+</html>

data/lib/serialbench/templates/format_based.liquid

@@ -0,0 +1,507 @@
+<!-- Filter Bar -->
+<div class="filter-bar">
+    <div class="filter-container">
+        <!-- Platform Filter -->
+        <div class="filter-group">
+            <label class="filter-label" for="platform-filter">Platform:</label>
+            <div class="custom-select">
+                <select id="platform-filter">
+                    <option value="">All Platforms</option>
+                </select>
+            </div>
+        </div>
+
+        <!-- Ruby Type Filter -->
+        <div class="filter-group">
+            <label class="filter-label" for="ruby-type-filter">Ruby Type:</label>
+            <div class="custom-select">
+                <select id="ruby-type-filter">
+                    <option value="">All Types</option>
+                </select>
+            </div>
+        </div>
+
+        <!-- Ruby Version Filter -->
+        <div class="filter-group">
+            <label class="filter-label" for="ruby-version-filter">Version:</label>
+            <div class="custom-select">
+                <select id="ruby-version-filter">
+                    <option value="">All Versions</option>
+                </select>
+            </div>
+        </div>
+
+        <!-- Format Tabs -->
+        <div class="format-tabs">
+            <button class="format-tab active" data-format="xml">XML</button>
+            <button class="format-tab" data-format="json">JSON</button>
+            <button class="format-tab" data-format="yaml">YAML</button>
+            <button class="format-tab" data-format="toml">TOML</button>
+        </div>
+    </div>
+</div>
+
+<!-- Dashboard Header -->
+<header class="dashboard-header">
+    <h1>Performance Dashboard</h1>
+    <p class="dashboard-subtitle">
+        Comprehensive serialization performance analysis across formats, platforms, and Ruby versions
+    </p>
+    <div class="dashboard-meta">
+        <span><strong>Generated:</strong> <span id="metadata-timestamp">Unknown</span></span>
+        <span><strong>Ruby Versions:</strong> <span id="metadata-ruby-versions">Unknown</span></span>
+        <span><strong>Platforms:</strong> <span id="metadata-platforms">Unknown</span></span>
+    </div>
+</header>
+
+<!-- Charts Grid -->
+<section class="dashboard-grid">
+    <!-- Parsing Performance Chart -->
+    <div class="chart-card fade-in-up">
+        <div class="chart-header">
+            <h2 class="chart-title">Parsing Performance</h2>
+            <p class="chart-subtitle">Operations per second across different file sizes</p>
+        </div>
+        <div class="chart-container">
+            <canvas id="chart-parsing"></canvas>
+        </div>
+    </div>
+
+    <!-- Generation Performance Chart -->
+    <div class="chart-card fade-in-up">
+        <div class="chart-header">
+            <h2 class="chart-title">Generation Performance</h2>
+            <p class="chart-subtitle">Serialization speed across different file sizes</p>
+        </div>
+        <div class="chart-container">
+            <canvas id="chart-generation"></canvas>
+        </div>
+    </div>
+
+    <!-- Memory Usage Chart -->
+    <div class="chart-card fade-in-up">
+        <div class="chart-header">
+            <h2 class="chart-title">Memory Usage</h2>
+            <p class="chart-subtitle">Memory consumption during operations</p>
+        </div>
+        <div class="chart-container">
+            <canvas id="chart-memory"></canvas>
+        </div>
+    </div>
+
+    <!-- Streaming Performance Chart -->
+    <div class="chart-card fade-in-up">
+        <div class="chart-header">
+            <h2 class="chart-title">Streaming Performance</h2>
+            <p class="chart-subtitle">Streaming operations performance</p>
+        </div>
+        <div class="chart-container">
+            <canvas id="chart-streaming"></canvas>
+        </div>
+    </div>
+</section>
+
+<!-- Environment Information -->
+<section class="environment-section fade-in-up">
+    <h2 class="summary-title">Environment Information</h2>
+    <div class="environment-grid" id="environment-info">
+        <!-- Environment cards will be populated by JavaScript -->
+    </div>
+</section>
+
+<!-- Raw Data Downloads -->
+<section class="downloads-section fade-in-up">
+    <h2 class="summary-title">Raw Data Downloads</h2>
+    <p class="downloads-subtitle">Download benchmark data in YAML format for further analysis</p>
+    <div class="downloads-grid" id="downloads-grid">
+        <!-- Download links will be populated by JavaScript -->
+    </div>
+</section>
+
+<!-- Embedded Data -->
+<script>
+    window.benchmarkData = {{ data }};
+
+    // Populate metadata on load
+    document.addEventListener('DOMContentLoaded', function() {
+        try {
+            const data = window.benchmarkData;
+
+            // Extract metadata
+            const timestamps = [];
+            const rubyVersions = new Set();
+            const platforms = new Set();
+
+            // Handle both single results (with environments) and resultsets (with results)
+            if (data.environments) {
+                // Single result format
+                Object.values(data.environments).forEach(env => {
+                    if (env.timestamp) {
+                        timestamps.push(new Date(env.timestamp));
+                    }
+                    if (env.ruby_version) {
+                        rubyVersions.add(env.ruby_version);
+                    }
+                    if (env.os && env.arch) {
+                        platforms.add(`${env.os} (${env.arch})`);
+                    }
+                });
+            } else if (data.results) {
+                // Resultset format
+                data.results.forEach(result => {
+                    if (result.metadata && result.metadata.created_at) {
+                        timestamps.push(new Date(result.metadata.created_at));
+                    }
+                    if (result.platform) {
+                        if (result.platform.ruby_version) {
+                            rubyVersions.add(result.platform.ruby_version);
+                        }
+                        if (result.platform.os) {
+                            platforms.add(result.platform.os);
+                        }
+                    }
+                });
+            }
+
+            // Update timestamp
+            const timestampEl = document.getElementById('metadata-timestamp');
+            if (timestampEl) {
+                if (timestamps.length > 0) {
+                    const latestDate = new Date(Math.max(...timestamps));
+                    timestampEl.textContent = latestDate.toLocaleString();
+                } else if (data.metadata && data.metadata.generated_at) {
+                    timestampEl.textContent = new Date(data.metadata.generated_at).toLocaleString();
+                }
+            }
+
+            // Update Ruby versions
+            const versionsEl = document.getElementById('metadata-ruby-versions');
+            if (versionsEl && rubyVersions.size > 0) {
+                versionsEl.textContent = Array.from(rubyVersions).sort().join(', ');
+            }
+
+            // Update platforms
+            const platformsEl = document.getElementById('metadata-platforms');
+            if (platformsEl && platforms.size > 0) {
+                platformsEl.textContent = Array.from(platforms).sort().join(', ');
+            }
+        } catch (error) {
+            console.error('Error populating metadata:', error);
+        }
+
+        // Populate downloads grid
+        try {
+            const downloadsGrid = document.getElementById('downloads-grid');
+            if (downloadsGrid && data.environments) {
+                // Create download cards for individual environment results from environments object
+                Object.entries(data.environments).forEach(([envKey, env]) => {
+                    const filename = `${envKey}.yaml`;
+
+                    const card = document.createElement('div');
+                    card.className = 'download-card';
+                    card.innerHTML = `
+                        <div class="download-card-title">
+                            ${env.os} ${env.arch}
+                        </div>
+                        <div class="download-card-meta">
+                            Ruby ${env.ruby_version}
+                        </div>
+                        <a href="data/${filename}" class="download-link" download>
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+                            </svg>
+                            Download YAML
+                        </a>
+                    `;
+                    downloadsGrid.appendChild(card);
+                });
+
+                // Add complete resultset download
+                const resultsetCard = document.createElement('div');
+                resultsetCard.className = 'download-card';
+                resultsetCard.style.gridColumn = 'span 1';
+                resultsetCard.innerHTML = `
+                    <div class="download-card-title">
+                        Complete Dataset
+                    </div>
+                    <div class="download-card-meta">
+                        All environments and results
+                    </div>
+                    <a href="data/resultset.yaml" class="download-link" download>
+                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+                        </svg>
+                        Download YAML
+                    </a>
+                `;
+                downloadsGrid.appendChild(resultsetCard);
+            }
+        } catch (error) {
+            console.error('Error populating downloads:', error);
+        }
+    });
+</script>
+
+<!-- Additional JavaScript -->
+<script src="assets/js/dashboard.js" defer></script>
+
+<!-- Theme CSS (additional to base) -->
+<link rel="stylesheet" href="assets/css/themes.css">
+<link rel="stylesheet" href="assets/css/format_based.css">
+
+<!-- Theme Toggle Button -->
+<script>
+    // Add theme toggle to navbar
+    document.addEventListener('DOMContentLoaded', function() {
+        const navbar = document.querySelector('.navbar-header');
+        if (navbar) {
+            const controls = document.createElement('div');
+            controls.className = 'navbar-controls';
+            controls.innerHTML = `
+                <button class="theme-toggle" title="Toggle theme">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <circle cx="12" cy="12" r="5"></circle>
+                        <line x1="12" y1="1" x2="12" y2="3"></line>
+                        <line x1="12" y1="21" x2="12" y2="23"></line>
+                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                        <line x1="1" y1="12" x2="3" y2="12"></line>
+                        <line x1="21" y1="12" x2="23" y2="12"></line>
+                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                    </svg>
+                </button>
+            `;
+            navbar.appendChild(controls);
+        }
+    });
+</script>
+
+<!-- Loading indicator -->
+<style>
+    .loading-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: var(--bg-primary);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 9999;
+        transition: opacity 0.3s ease;
+    }
+
+    .loading-spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid var(--border-primary);
+        border-top: 3px solid var(--accent-primary);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    .dashboard-header {
+        text-align: center;
+        margin-bottom: var(--space-2xl, 2rem);
+        padding: var(--space-xl, 1.5rem) 0;
+        background: transparent;
+    }
+
+    .dashboard-header h1 {
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: var(--space-md, 1rem);
+        color: var(--text-primary);
+        position: relative;
+        z-index: 1;
+    }
+
+    .dashboard-subtitle {
+        font-size: 1.125rem;
+        color: var(--text-secondary);
+        margin-bottom: var(--space-lg, 1.25rem);
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .dashboard-meta {
+        display: flex;
+        justify-content: center;
+        gap: var(--space-lg, 1.25rem);
+        flex-wrap: wrap;
+        font-size: 0.875rem;
+        color: var(--text-muted);
+    }
+
+    .filter-bar {
+        background: var(--bg-secondary, #f9fafb);
+        border-bottom: 1px solid var(--border-primary, #e5e7eb);
+        padding: 1rem;
+    }
+
+    .filter-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .filter-group {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .filter-label {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--text-secondary);
+    }
+
+    .custom-select select {
+        padding: 0.5rem 2rem 0.5rem 0.75rem;
+        border: 1px solid var(--border-primary);
+        border-radius: 0.375rem;
+        background: var(--bg-card);
+        color: var(--text-primary);
+        font-size: 0.875rem;
+    }
+
+    .custom-select select option {
+        color: var(--text-primary);
+        background: var(--bg-card);
+    }
+
+    /* Format tabs styles are in themes.css */
+
+    /* Downloads Section Styles */
+    .downloads-section {
+        margin-top: var(--space-2xl, 2rem);
+        padding: var(--space-xl, 1.5rem);
+        background: var(--bg-card);
+        border-radius: 0.75rem;
+        border: 1px solid var(--border-primary);
+    }
+
+    .downloads-subtitle {
+        text-align: center;
+        font-size: 1rem;
+        color: var(--text-secondary);
+        margin-bottom: var(--space-lg, 1.25rem);
+    }
+
+    .downloads-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: var(--space-lg, 1.25rem);
+        margin-top: var(--space-lg, 1.25rem);
+    }
+
+    .download-card {
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-primary);
+        border-radius: 0.5rem;
+        padding: var(--space-lg, 1.25rem);
+        transition: all 0.2s ease;
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm, 0.5rem);
+    }
+
+    .download-card:hover {
+        border-color: var(--accent-primary);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .download-card-title {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text-primary);
+        margin-bottom: var(--space-xs, 0.25rem);
+    }
+
+    .download-card-meta {
+        font-size: 0.875rem;
+        color: var(--text-muted);
+        margin-bottom: var(--space-sm, 0.5rem);
+    }
+
+    .download-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.625rem 1rem;
+        background: var(--accent-primary);
+        color: white;
+        text-decoration: none;
+        border-radius: 0.375rem;
+        font-size: 0.875rem;
+        font-weight: 500;
+        transition: background 0.2s ease;
+        justify-content: center;
+    }
+
+    .download-link:hover {
+        background: var(--accent-dark);
+    }
+
+    .download-link svg {
+        width: 16px;
+        height: 16px;
+    }
+
+    @media (max-width: 768px) {
+        .dashboard-header h1 {
+            font-size: 2rem;
+        }
+
+        .dashboard-meta {
+            flex-direction: column;
+            gap: var(--space-sm, 0.5rem);
+        }
+
+        .filter-container {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .format-tabs {
+            margin-left: 0;
+        }
+    }
+</style>
+
+<div class="loading-overlay" id="loading-overlay">
+    <div class="loading-spinner"></div>
+</div>
+
+<script>
+    // Hide loading overlay once everything is loaded
+    window.addEventListener('load', () => {
+        const overlay = document.getElementById('loading-overlay');
+        if (overlay) {
+            overlay.style.opacity = '0';
+            setTimeout(() => overlay.remove(), 300);
+        }
+    });
+
+    // Fallback to hide loading after 5 seconds
+    setTimeout(() => {
+        const overlay = document.getElementById('loading-overlay');
+        if (overlay) {
+            overlay.style.opacity = '0';
+            setTimeout(() => overlay.remove(), 300);
+        }
+    }, 5000);
+</script>