Function populateBytecodePanel

Lib/profiling/sampling/_heatmap_assets/heatmap.js:531–610

* Populate bytecode panel with instruction data * @param {HTMLElement} panel - The panel element to populate * @param {HTMLElement} button - The button containing the bytecode data

(panel, button)

 * @param {HTMLElement} button - The button containing the bytecode data
 */
function populateBytecodePanel(panel, button) {
    const bytecodeJson = button.getAttribute('data-bytecode');
    if (!bytecodeJson) return;

    // Get line number from parent
    const lineDiv = button.closest('.code-line');
    const lineNum = lineDiv ? lineDiv.id.replace('line-', '') : null;

    try {
        const instructions = JSON.parse(bytecodeJson);
        if (!instructions.length) {
            panel.innerHTML = '<div class="bytecode-empty">No bytecode data</div>';
            panel.dataset.populated = 'true';
            return;
        }

        const maxSamples = Math.max(...instructions.map(i => i.samples), 1);

        // Calculate specialization stats
        const totalSamples = instructions.reduce((sum, i) => sum + i.samples, 0);
        const specializedSamples = instructions
            .filter(i => i.is_specialized)
            .reduce((sum, i) => sum + i.samples, 0);
        const specPct = totalSamples > 0 ? Math.round(100 * specializedSamples / totalSamples) : 0;
        const specializedCount = instructions.filter(i => i.is_specialized).length;

        // Determine specialization level class
        let specClass = 'low';
        if (specPct >= 67) specClass = 'high';
        else if (specPct >= 33) specClass = 'medium';

        // Build specialization summary
        const instruction_word = instructions.length === 1 ? 'instruction' : 'instructions';
        const sample_word = totalSamples === 1 ? 'sample' : 'samples';
        let html = `<div class="bytecode-spec-summary ${specClass}">
            <span class="spec-pct">${specPct}%</span>
            <span class="spec-label">specialized</span>
            <span class="spec-detail">(${specializedCount}/${instructions.length} ${instruction_word}, ${specializedSamples.toLocaleString()}/${totalSamples.toLocaleString()} ${sample_word})</span>
        </div>`;

        html += '<div class="bytecode-header">' +
            '<span class="bytecode-opname">Instruction</span>' +
            '<span class="bytecode-samples">Samples</span>' +
            '<span>Heat</span></div>';

        for (const instr of instructions) {
            const heatPct = (instr.samples / maxSamples) * 100;
            const isHot = heatPct > 50;
            const specializedClass = instr.is_specialized ? ' specialized' : '';
            const baseOpHtml = instr.is_specialized
                ? `<span class="base-op">(${escapeHtml(instr.base_opname)})</span>` : '';
            const badge = instr.is_specialized
                ? '<span class="specialization-badge">SPECIALIZED</span>' : '';

            // Build location data attributes for cross-referencing with source spans
            const hasLocations = instr.locations && instr.locations.length > 0;
            const locationData = hasLocations
                ? `data-locations='${JSON.stringify(instr.locations)}' data-line="${lineNum}" data-opcode="${instr.opcode}"`