Function showSpanTooltip

Lib/profiling/sampling/_heatmap_assets/heatmap.js:371–435

* Create and show tooltip for a span

(span)

 * Create and show tooltip for a span
 */
function showSpanTooltip(span) {
    hideSpanTooltip();

    const samples = parseInt(span.dataset.samples) || 0;
    const maxSamples = parseInt(span.dataset.maxSamples) || 1;
    const pct = span.dataset.pct || '0';
    const opcodes = span.dataset.opcodes || '';

    if (samples === 0) return;

    const intensity = samples / maxSamples;
    const isHot = intensity > 0.7;
    const isWarm = intensity > 0.3;
    const hotnessText = isHot ? 'Hot' : isWarm ? 'Warm' : 'Cold';
    const hotnessClass = isHot ? 'hot' : isWarm ? 'warm' : 'cold';

    // Build opcodes rows - each opcode on its own row
    let opcodesHtml = '';
    if (opcodes) {
        const opcodeList = opcodes.split(',').map(op => op.trim()).filter(op => op);
        if (opcodeList.length > 0) {
            opcodesHtml = `
                <div class="span-tooltip-section">Opcodes:</div>
                ${opcodeList.map(op => `<div class="span-tooltip-opcode">${op}</div>`).join('')}
            `;
        }
    }

    const tooltip = document.createElement('div');
    tooltip.className = 'span-tooltip';
    tooltip.innerHTML = `
        <div class="span-tooltip-header ${hotnessClass}">${hotnessText}</div>
        <div class="span-tooltip-row">
            <span class="span-tooltip-label">Samples:</span>
            <span class="span-tooltip-value${isHot ? ' highlight' : ''}">${samples.toLocaleString()}</span>
        </div>
        <div class="span-tooltip-row">
            <span class="span-tooltip-label">% of line:</span>
            <span class="span-tooltip-value">${pct}%</span>
        </div>
        ${opcodesHtml}
    `;

    document.body.appendChild(tooltip);
    activeTooltip = tooltip;

    // Position tooltip above the span
    const rect = span.getBoundingClientRect();
    const tooltipRect = tooltip.getBoundingClientRect();

    let left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
    let top = rect.top - tooltipRect.height - 8;

    // Keep tooltip in viewport
    if (left < 5) left = 5;
    if (left + tooltipRect.width > window.innerWidth - 5) {
        left = window.innerWidth - tooltipRect.width - 5;
    }