app/src/content/embeds/throughput-weka-drops.html

<div class="throughput-weka-drops"></div>
<style>
  .throughput-weka-drops { position: relative; }
  .throughput-weka-drops .axis-label { fill: var(--text-color); font-size: 12px; font-weight: 700; }
  .throughput-weka-drops .axes path, .throughput-weka-drops .axes line { stroke: var(--axis-color); }
  .throughput-weka-drops .axes text { fill: var(--tick-color); }
  .throughput-weka-drops .grid line { stroke: var(--grid-color); }
  .throughput-weka-drops .chart-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; }
  .throughput-weka-drops .chart-header { display:flex; align-items:flex-start; justify-content:flex-start; gap:12px; margin: 8px 0 0 0; flex-wrap: wrap; }
  .throughput-weka-drops .legend-bottom { display:flex; align-items:center; justify-content:flex-start; font-size:12px; color: var(--text-color); }
  .throughput-weka-drops .legend-bottom .items { display:flex; flex-wrap:wrap; gap:8px 14px; }
  .throughput-weka-drops .legend-bottom .item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
  .throughput-weka-drops .legend-bottom .swatch { width:14px; height:14px; border-radius:3px; border:1px solid var(--border-color); display:inline-block; }
  .throughput-weka-drops .legend-bottom .legend-title { font-size: 12px; font-weight: 700; color: var(--text-color); }
  .throughput-weka-drops .legend-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
  .throughput-weka-drops .lines path.active { stroke-width: 3; }
  .throughput-weka-drops .d3-tooltip { z-index: var(--z-elevated); backdrop-filter: saturate(1.12) blur(8px); }
  .throughput-weka-drops .d3-tooltip__inner { display:flex; flex-direction:column; gap:6px; min-width: 220px; }
  .throughput-weka-drops .d3-tooltip__inner > div:first-child { font-weight: 800; letter-spacing: 0.1px; margin-bottom: 0; }
  .throughput-weka-drops .d3-tooltip__inner > div:nth-child(2) { font-size: 11px; color: var(--muted-color); display: block; margin-top: -4px; margin-bottom: 2px; letter-spacing: 0.1px; }
  .throughput-weka-drops .d3-tooltip__color-dot { display:inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border-color); }
</style>
<script>
  (() => {
    const ensureD3 = (cb) => {
      if (window.d3 && typeof window.d3.select === 'function') return cb();
      let s = document.getElementById('d3-cdn-script');
      if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
      s.addEventListener('load', onReady, { once: true }); if (window.d3) onReady();
    };

    const bootstrap = () => {
      const scriptEl = document.currentScript;
      let container = scriptEl ? scriptEl.previousElementSibling : null;
      if (!(container && container.classList && container.classList.contains('throughput-weka-drops'))){
        const cs = Array.from(document.querySelectorAll('.throughput-weka-drops')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
        container = cs[cs.length - 1] || null;
      }
      if (!container) return;
      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }

      // Tooltip
      container.style.position = container.style.position || 'relative';
      let tip = container.querySelector('.d3-tooltip'); let tipInner;
      if (!tip) {
        tip = document.createElement('div'); tip.className = 'd3-tooltip';
        Object.assign(tip.style, {
          position:'absolute', top:'0px', left:'0px', transform:'translate(-9999px, -9999px)', pointerEvents:'none',
          padding:'8px 10px', borderRadius:'8px', fontSize:'12px', lineHeight:'1.35', border:'1px solid var(--border-color)',
          background:'var(--surface-bg)', color:'var(--text-color)', boxShadow:'0 4px 24px rgba(0,0,0,.18)', opacity:'0', transition:'opacity .12s ease'
        });
        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tipInner.style.textAlign='left'; tip.appendChild(tipInner); container.appendChild(tip);
      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }

      // Header (legend) placed after the chart
      const header = document.createElement('div'); header.className = 'chart-header';
      const legendBottom = document.createElement('div'); legendBottom.className = 'legend-bottom'; header.appendChild(legendBottom);

      // Chart card (SVG)
      const card = document.createElement('div'); card.className = 'chart-card'; container.appendChild(card);
      container.appendChild(header);
      
      // SVG
      const svg = d3.select(card).append('svg').attr('width','100%').style('display','block');
      const gRoot = svg.append('g');
      const gGrid = gRoot.append('g').attr('class','grid');
      const gAxes = gRoot.append('g').attr('class','axes');
      const gLines = gRoot.append('g').attr('class','lines');
      const gPoints = gRoot.append('g').attr('class','points');
      const overlay = gRoot.append('rect').attr('fill','transparent').style('cursor','crosshair');
      const hoverLine = gRoot.append('line').attr('stroke-width',1).style('display','none');

      // State/data
      let width = 800, height = 480; const margin = { top: 16, right: 32, bottom: 44, left: 80 };
      const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      const lineGen = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value));
      let data = [];

      // Colors - following guidelines to use ColorPalettes
      let currentColor = 'var(--primary-color, #4e79a7)';
      
      function refreshPalette(){
        try { 
          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
            const colors = window.ColorPalettes.getColors('categorical', 1);
            if (colors && colors.length > 0) {
              currentColor = colors[0];
              // Re-render with new colors
              if (data.length > 0) render();
              return;
            }
          }
        } catch(_){}
        // Fallback to CSS variable or default
        currentColor = 'var(--primary-color, #4e79a7)';
        // Re-render with fallback colors
        if (data.length > 0) render();
      }
      
      function getColor(){
        return currentColor;
      }
      
      // Format helper for thousands (5000 -> 5k, 1500 -> 1.5k)
      function formatK(v){
        const abs = Math.abs(v);
        if (abs >= 1000) {
          const n = v / 1000;
          const s = d3.format('.1f')(n);
          return (s.endsWith('.0') ? s.slice(0, -2) : s) + 'k';
        }
        return d3.format('d')(v);
      }

      // Format helper for throughput values
      function formatThroughput(v){
        if (v >= 1000) {
          return d3.format('.1f')(v / 1000) + 'k';
        }
        return d3.format('.1f')(v);
      }

      function updateLayout(){
        const axisColor = getComputedStyle(container).getPropertyValue('--axis-color').trim() || 'rgba(0,0,0,0.25)';
        width = container.clientWidth || 800;
        height = Math.max(280, Math.round(width / 3));
        svg.attr('width', width).attr('height', height);
        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
        const innerWidth = width - margin.left - margin.right;
        const innerHeight = height - margin.top - margin.bottom;
        overlay.attr('x',0).attr('y',0).attr('width', innerWidth).attr('height', innerHeight);
        hoverLine.attr('y1',0).attr('y2', innerHeight).attr('stroke', axisColor);
        return { innerWidth, innerHeight };
      }

      function render(){
        if (data.length === 0) return;
        
        const { innerWidth, innerHeight } = updateLayout();
        
        // Sort data by step
        const sortedData = data.slice().sort((a, b) => a.step - b.step);
        
        // domains
        const minStep = d3.min(sortedData, d => d.step);
        const maxStep = d3.max(sortedData, d => d.step);
        const minValue = d3.min(sortedData, d => d.value);
        const maxValue = d3.max(sortedData, d => d.value);
        
        xScale.domain([minStep, maxStep]).range([0, innerWidth]);
        yScale.domain([minValue, maxValue]).nice().range([innerHeight, 0]);

        // grid
        gGrid.selectAll('*').remove();
        gGrid.selectAll('line').data(yScale.ticks(6)).join('line')
          .attr('x1',0).attr('x2', innerWidth).attr('y1', d=>yScale(d)).attr('y2', d=>yScale(d))
          .attr('stroke','var(--grid-color)').attr('stroke-width',1).attr('shape-rendering','crispEdges');

        // axes
        gAxes.selectAll('*').remove();
        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(d3.axisBottom(xScale).ticks(8).tickFormat(formatK)).call(g=>{ g.selectAll('path, line').attr('stroke','var(--axis-color)'); g.selectAll('text').attr('fill','var(--tick-color)').style('font-size','12px'); });
        gAxes.append('g').call(d3.axisLeft(yScale).ticks(6).tickFormat(formatThroughput)).call(g=>{ g.selectAll('path, line').attr('stroke','var(--axis-color)'); g.selectAll('text').attr('fill','var(--tick-color)').style('font-size','12px'); });
        gAxes.append('text').attr('class','axis-label').attr('text-anchor','middle').attr('x', innerWidth/2).attr('y', innerHeight + 38).text('Training Step');
        gAxes.append('text').attr('class','axis-label').attr('text-anchor','middle').attr('transform', `translate(${-60}, ${innerHeight/2}) rotate(-90)`).text('Tokens/sec/GPU');

        // line
        const color = getColor();
        gLines.selectAll('*').remove();
        gLines.append('path')
          .attr('class','line')
          .attr('fill','none')
          .attr('stroke', color)
          .attr('stroke-width', 2)
          .attr('d', lineGen(sortedData));

        // point markers
        gPoints.selectAll('*').remove();
        gPoints.selectAll('circle').data(sortedData).join('circle')
          .attr('class','point')
          .attr('r', 2)
          .attr('fill', color)
          .attr('fill-opacity', 0.6)
          .attr('cx', d=>xScale(d.step))
          .attr('cy', d=>yScale(d.value));

        // legend
        legendBottom.innerHTML = `<div class="legend-title">Throughput</div><div class="items"><span class="item"><span class="swatch" style="background:${color}"></span><span>Tokens/sec/GPU</span></span></div>`;

        // hover
        function onMove(ev){
          const [mx, my] = d3.pointer(ev, overlay.node());
          const sx = xScale.invert(mx);
          
          // Find nearest point
          const nearest = sortedData.reduce((best, d) => Math.abs(d.step - sx) < Math.abs(best.step - sx) ? d : best, sortedData[0]);
          const xpx = xScale(nearest.step);
          hoverLine.style('display', null).attr('x1', xpx).attr('x2', xpx);
          
          // tooltip content
          let html = `<div style="font-weight:800;letter-spacing:.1px;">Training Throughput</div><div style="font-size:11px;color:var(--muted-color);margin-top:-4px;margin-bottom:2px;">Step ${formatK(nearest.step)}</div>`;
          html += `<div style="display:flex;align-items:center;gap:6px;white-space:nowrap;"><span class="d3-tooltip__color-dot" style="background:${color}"></span><strong>Tokens/sec/GPU</strong><span style="margin-left:auto;">${formatThroughput(nearest.value)}</span></div>`;
          
          tipInner.innerHTML = html; 
          tip.style.opacity = '1'; 
          tip.style.transform = `translate(${Math.round(mx + margin.left + 12)}px, ${Math.round(my + margin.top + 12)}px)`;
        }
        
        function onLeave(){ 
          tip.style.opacity='0'; 
          tip.style.transform='translate(-9999px, -9999px)'; 
          hoverLine.style('display','none'); 
        }
        
        overlay.on('mousemove', onMove).on('mouseleave', onLeave);
      }

      // load CSV and init
      (async () => {
        try {
          // Try multiple possible paths for the CSV file
          const csvPaths = [
            '/data/weka_drop_0404.csv',
            './assets/data/weka_drop_0404.csv',
            '../assets/data/weka_drop_0404.csv',
            '../../assets/data/weka_drop_0404.csv'
          ];
          
          let csvText = null;
          for (const path of csvPaths) {
            try {
              const response = await fetch(path, { cache: 'no-cache' });
              if (response.ok) {
                csvText = await response.text();
                break;
              }
            } catch(_) {}
          }
          
          if (!csvText) {
            throw new Error('CSV file not found: weka_drop_0404.csv');
          }
          
          const rows = d3.csvParse(csvText);
          
          // Parse the data - use the second column (tokens_per_sec_per_gpu) and ignore min/max
          data = rows.map(d => ({
            step: +d.Step,
            value: +d["04/04/2025_02:44:57_elie-smollm3-training-3p56G-smollm3-3B-start-0404-stage-1-wo-zloss-seed6-ddp-256-seed-6-_tp_group_1 - tokens_per_sec_per_gpu"]
          })).filter(d => !isNaN(d.step) && !isNaN(d.value));
          
          // Initialize palette and listen for changes
          refreshPalette();
          document.addEventListener('palettes:updated', refreshPalette);
          
          render();
          
          const rerender = () => render();
          if (window.ResizeObserver) { 
            const ro = new ResizeObserver(() => rerender()); 
            ro.observe(container); 
          } else { 
            window.addEventListener('resize', rerender); 
          }
        } catch (e) {
          const pre = document.createElement('pre'); 
          pre.textContent = 'CSV load error: ' + (e && e.message ? e.message : e);
          pre.style.color = 'var(--danger, #b00020)'; 
          pre.style.fontSize = '12px'; 
          pre.style.whiteSpace = 'pre-wrap'; 
          container.appendChild(pre);
        }
      })();
    };

    if (document.readyState === 'loading') { 
      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); 
    } else { 
      ensureD3(bootstrap); 
    }
  })();
</script>