app/src/content/embeds/d3-line.html

<div class="d3-line" style="width:100%;margin:10px 0;"></div>
<style>
  .d3-line .d3-line__controls select {
    font-size: 12px;
    padding: 8px 28px 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--surface-bg);
    color: var(--text-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  [data-theme="dark"] .d3-line .d3-line__controls select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
  .d3-line .d3-line__controls select:hover {
    border-color: var(--primary-color);
  }
  .d3-line .d3-line__controls select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(232,137,171,.25);
    outline: none;
  }
  .d3-line .d3-line__controls label { gap: 8px; }

  /* Range slider themed with --primary-color */
  .d3-line .d3-line__controls input[type="range"] { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 100%; 
    height: 6px; 
    border-radius: 999px; 
    background: var(--border-color);
    outline: none;
  }
  .d3-line .d3-line__controls input[type="range"]::-webkit-slider-runnable-track {
    height: 6px; 
    background: transparent; 
    border-radius: 999px;
  }
  .d3-line .d3-line__controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none; 
    width: 16px; 
    height: 16px; 
    border-radius: 50%; 
    background: var(--primary-color); 
    border: 2px solid var(--on-primary);
    margin-top: -5px; 
    cursor: pointer;
  }
  .d3-line .d3-line__controls input[type="range"]::-moz-range-track {
    height: 6px; 
    background: transparent; 
    border-radius: 999px;
  }
  .d3-line .d3-line__controls input[type="range"]::-moz-range-thumb {
    width: 16px; 
    height: 16px; 
    border-radius: 50%; 
    background: var(--primary-color); 
    border: 2px solid var(--on-primary);
    cursor: pointer;
  }
  /* Improved line color via CSS */
  .d3-line .lines path.improved { stroke: var(--primary-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 mount = document.currentScript ? document.currentScript.previousElementSibling : null;
      const container = (mount && mount.querySelector && mount.querySelector('.d3-line')) || document.querySelector('.d3-line');
      if (!container) return;
      if (container.dataset) {
        if (container.dataset.mounted === 'true') return;
        container.dataset.mounted = 'true';
      }

      // CSV: prefer public path, fallback to relative
      const CSV_PATHS = [
        '/data/against_baselines.csv',
        './assets/data/against_baselines.csv',
        '../assets/data/against_baselines.csv',
        '../../assets/data/against_baselines.csv'
      ];
      const fetchFirstAvailable = async (paths) => {
        for (const p of paths) {
          try { const r = await fetch(p, { cache: 'no-cache' }); if (r.ok) return await r.text(); } catch(e) {}
        }
        throw new Error('CSV not found: against_baselines.csv');
      };

      // Controls UI
      const controls = document.createElement('div');
      controls.className = 'd3-line__controls';
      Object.assign(controls.style, {
        marginTop: '12px',
        display: 'flex',
        gap: '16px',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%'
      });

      const labelMetric = document.createElement('label');
      Object.assign(labelMetric.style, {
        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
      });
      labelMetric.textContent = 'Metric';
      const selectMetric = document.createElement('select');
      Object.assign(selectMetric.style, { fontSize: '12px' });
      labelMetric.appendChild(selectMetric);

      // Inline legend on the right of the select
      const legendInline = document.createElement('div');
      legendInline.className = 'controls__legend';
      Object.assign(legendInline.style, {
        display: 'flex',
        gap: '8px',
        alignItems: 'center',
        flexWrap: 'nowrap',
        fontSize: '11px',
        marginLeft: '8px'
      });
      controls.appendChild(legendInline);
      controls.appendChild(labelMetric);

      // Create SVG
      const svg = d3.select(container).append('svg')
        .attr('width', '100%')
        .style('display', 'block');

      // Groups
      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 gHover = gRoot.append('g').attr('class', 'hover');
      const gLegend = gRoot.append('foreignObject').attr('class', 'legend');

      // 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;
      }

      // Colors per run
      const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
      const pool = [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10||[])];

      // State and data
      let metricList = [];
      let runList = [];
      let runOrder = [];
      const dataByMetric = new Map(); // metric => { run => [{step,value}] }

      // Scales and layout
      let width = 800, height = 360;
      let margin = { top: 16, right: 28, bottom: 56, left: 64 };
      let xScale = d3.scaleLinear();
      let yScale = d3.scaleLinear();

      // Line generators
      const lineGenSmooth = d3.line()
        .curve(d3.curveCatmullRom.alpha(0.05))
        .x((d) => xScale(d.step))
        .y((d) => yScale(d.value));
      const lineGenStep = d3.line()
        .curve(d3.curveStepAfter)
        .x((d) => xScale(d.step))
        .y((d) => yScale(d.value));

      // Hover elements
      const hoverLine = gHover.append('line').attr('stroke-width', 1);

      const overlay = gHover.append('rect').attr('fill', 'transparent').style('cursor', 'crosshair');

      function updateScales() {
        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
        const axisColor = isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
        const tickColor = isDark ? 'rgba(255,255,255,0.70)' : 'rgba(0,0,0,0.55)';
        const gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)';

        width = container.clientWidth || 800;
        height = Math.max(260, Math.round(width / 3));
        svg.attr('width', width).attr('height', height);

        const innerWidth = width - margin.left - margin.right;
        const innerHeight = height - margin.top - margin.bottom;
        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);

        xScale.range([0, innerWidth]);
        yScale.range([innerHeight, 0]);

        // Compute integer ticks for Y
        const yDomain = yScale.domain();
        const yMin = Math.min(yDomain[0], yDomain[1]);
        const yMax = Math.max(yDomain[0], yDomain[1]);
        let yStep = Math.max(1, Math.round((yMax - yMin) / 6));
        if (!isFinite(yStep) || yStep <= 0) yStep = 1;
        let yIntTicks = [];
        for (let v = Math.ceil(yMin); v <= Math.floor(yMax); v += yStep) { yIntTicks.push(v); }
        if (yIntTicks.length === 0) { yIntTicks = [Math.round(yMin), Math.round(yMax)]; }

        // Grid (horizontal)
        gGrid.selectAll('*').remove();
        gGrid.selectAll('line')
          .data(yIntTicks)
          .join('line')
          .attr('x1', 0)
          .attr('x2', innerWidth)
          .attr('y1', (d) => yScale(d))
          .attr('y2', (d) => yScale(d))
          .attr('stroke', gridColor)
          .attr('stroke-width', 1)
          .attr('shape-rendering', 'crispEdges');

        // Axes
        gAxes.selectAll('*').remove();
        const xAxis = d3.axisBottom(xScale).ticks(8).tickSizeOuter(0);
        const yAxis = d3.axisLeft(yScale).tickValues(yIntTicks).tickSizeOuter(0).tickFormat(d3.format('d'));
        gAxes.append('g')
          .attr('transform', `translate(0,${innerHeight})`)
          .call(xAxis)
          .call((g) => {
            g.selectAll('path, line').attr('stroke', axisColor);
            g.selectAll('text').attr('fill', tickColor).style('font-size', '12px');
          });
        gAxes.append('g')
          .call(yAxis)
          .call((g) => {
            g.selectAll('path, line').attr('stroke', axisColor);
            g.selectAll('text').attr('fill', tickColor).style('font-size', '12px');
          });

        // Axis labels (X and Y)
        gAxes.append('text')
          .attr('class', 'axis-label axis-label--x')
          .attr('x', innerWidth / 2)
          .attr('y', innerHeight + 44)
          .attr('text-anchor', 'middle')
          .style('font-size', '12px')
          .style('fill', tickColor)
          .text('Step');
        gAxes.append('text')
          .attr('class', 'axis-label axis-label--y')
          .attr('text-anchor', 'middle')
          .attr('transform', `translate(${-44},${innerHeight/2}) rotate(-90)`) 
          .style('font-size', '12px')
          .style('fill', tickColor)
          .text('Value');

        overlay.attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
        hoverLine.attr('y1', 0).attr('y2', innerHeight).attr('stroke', axisColor);

        // Legend placeholder; actual content set in renderMetric
        const legendWidth = Math.min(180, Math.max(120, Math.round(innerWidth * 0.22)));
        const legendHeight = 64;
        gLegend
          .attr('x', innerWidth - legendWidth + 42)
          .attr('y', innerHeight - legendHeight - 12)
          .attr('width', legendWidth)
          .attr('height', legendHeight);
        const legendRoot = gLegend.selectAll('div').data([0]).join('xhtml:div');
        Object.assign(legendRoot.node().style, {
          background: 'transparent',
          border: 'none',
          borderRadius: '0',
          padding: '0',
          fontSize: '12px',
          lineHeight: '1.35',
          color: 'var(--text-color)'
        });

        return { innerWidth, innerHeight };
      }

      function renderMetric(metricKey){
        const map = dataByMetric.get(metricKey) || {};
        const runs = runOrder;
        // Domain
        let minStep = Infinity, maxStep = -Infinity, maxVal = 0, minVal = Infinity;
        const isRank = /rank/i.test(metricKey);
        const isAverage = /average/i.test(metricKey);
        const isRankStrict = isRank && !isAverage;
        runs.forEach(r => {
          const arr = map[r] || [];
          arr.forEach(pt => {
            const val = isRankStrict ? Math.round(pt.value) : pt.value;
            minStep = Math.min(minStep, pt.step);
            maxStep = Math.max(maxStep, pt.step);
            maxVal = Math.max(maxVal, val);
            minVal = Math.min(minVal, val);
          });
        });
        if (!isFinite(minStep) || !isFinite(maxStep)) { return; }
        xScale.domain([minStep, maxStep]);
        yScale.domain(isRank ? [Math.max(maxVal, 1), Math.min(minVal, 0)] : [0, Math.max(1, maxVal)]).nice();

        const { innerWidth, innerHeight } = updateScales();

        // Bind lines
        const series = runs.map((r, i) => ({
          run: r,
          color: pool[i % pool.length],
          values: (map[r]||[])
            .slice()
            .sort((a,b)=>a.step-b.step)
            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
        }));
        const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
        const gen = isRank ? lineGenStep : lineGenSmooth;
        paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
          .attr('stroke', d=>d.color).attr('opacity',0.9)
          .attr('d', d=>gen(d.values))
          .merge(paths)
          .transition().duration(200)
          .attr('stroke', d=>d.color)
          .attr('d', d=>gen(d.values));
        paths.exit().remove();

        // No point markers for rank metrics (and none for others)
        gPoints.selectAll('*').remove();

        // Inline legend content (row, right side) compact
        legendInline.innerHTML = series.map(s => `<span style="display:inline-flex;align-items:center;gap:6px;white-space:nowrap;"><span style="width:18px;height:10px;background:${s.color};border-radius:3px;display:inline-block"></span><span>${s.run}</span></span>`).join('');

        // Hover
        const stepSet = new Set(); series.forEach(s=>s.values.forEach(v=>stepSet.add(v.step)));
        const steps = Array.from(stepSet).sort((a,b)=>a-b);
        function onMove(event){
          const [mx, my] = d3.pointer(event, overlay.node());
          const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
          const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
          const xpx = xScale(nearest);
          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
          // Tooltip content
          let html = `<div><strong>${metricKey}</strong></div><div><strong>step</strong> ${nearest}</div>`;
          series.forEach(s=>{
            const m = new Map(s.values.map(v=>[v.step, v.value]));
            const val = m.has(nearest) ? m.get(nearest) : null;
            if (val != null) {
              const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
            }
          });
          tipInner.innerHTML = html;
          const offsetX = 12, offsetY = 12;
          tip.style.opacity = '1'; tip.style.transform = `translate(${Math.round(mx + offsetX + margin.left)}px, ${Math.round(my + offsetY + margin.top)}px)`;
        }
        function onLeave(){ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; hoverLine.style('display','none'); }
        overlay.on('mousemove', onMove).on('mouseleave', onLeave);
      }

      // (old hover removed; hover is attached in renderMetric)

      // Load CSV and wire controls
      (async () => {
        try {
          const text = await fetchFirstAvailable(CSV_PATHS);
          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
          metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
          runList = Array.from(new Set(rows.map(r=>r.run))).sort();
          runOrder = runList;
          // Build dataByMetric
          metricList.forEach(m => {
            const map = {};
            runList.forEach(r => { map[r] = []; });
            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
            dataByMetric.set(m, map);
          });

          // Populate metric select (default to average_rank if present)
          metricList.forEach((m)=>{ const o=document.createElement('option'); o.value=m; o.textContent=m; selectMetric.appendChild(o); });
          const def = metricList.find(m => /average_rank/i.test(m)) || metricList[0];
          if (def) selectMetric.value = def;

          container.appendChild(controls);
          updateScales();
          renderMetric(selectMetric.value);

          selectMetric.addEventListener('change', ()=>{ renderMetric(selectMetric.value); });

          const rerender = () => { renderMetric(selectMetric.value); };
          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>