frontend/src/editor/seed-embeds.ts

/**
 * Seed embed HTML for the demo content.
 *
 * banner.html: self-contained scatter plot with generated data (no CSV).
 * d3-scaling-chart.html: simple line chart for the body embed.
 * d3-memory-bar.html: stacked bar chart for memory analysis.
 * d3-confusion-matrix.html: side-by-side confusion matrices.
 */

export const SEED_BANNER_HTML = `<div class="d3-scatter"></div>
<style>
  .d3-scatter svg { display: block; }
  .d3-scatter .centroid text { pointer-events: none; }
</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); }
    s.addEventListener('load', () => { if (window.d3) cb(); }, { once: true });
    if (window.d3) cb();
  };

  const bootstrap = () => {
    const scriptEl = document.currentScript;
    let container = scriptEl ? scriptEl.previousElementSibling : null;
    if (!(container && container.classList.contains('d3-scatter'))) {
      const cs = [...document.querySelectorAll('.d3-scatter')].filter(el => el.dataset.mounted !== 'true');
      container = cs[cs.length - 1] || null;
    }
    if (!container || container.dataset.mounted === 'true') return;
    container.dataset.mounted = 'true';
    container.style.position = 'relative';

    const categories = ['Language', 'Vision', 'Multimodal', 'RL', 'Diffusion', 'Retrieval'];
    const rng = (seed) => { let s = seed; return () => { s = (s * 16807 + 0) % 2147483647; return s / 2147483647; }; };
    const r = rng(42);
    const gauss = () => {
      const u = Math.max(1e-9, r());
      return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * r());
    };
    const centers = categories.map((cat, ci) => {
      const tx = (ci + 0.5) / categories.length;
      const cx = 0.08 + tx * 0.84 + (r() - 0.5) * 0.06;
      const cy = 0.25 + r() * 0.5;
      const sx = 0.05 + r() * 0.05;
      const sy = 0.05 + r() * 0.05;
      const theta = r() * Math.PI;
      return { cat, cx, cy, sx, sy, cos: Math.cos(theta), sin: Math.sin(theta) };
    });
    const data = [];
    centers.forEach(({ cat, cx, cy, sx, sy, cos, sin }) => {
      const n = 225 + Math.floor(r() * 270);
      for (let i = 0; i < n; i++) {
        const gx = gauss() * sx, gy = gauss() * sy;
        data.push({
          x: cx + gx * cos - gy * sin,
          y: cy + gx * sin + gy * cos,
          group: cat,
          label: cat + ' ' + (i + 1),
        });
      }
    });
    for (let k = 0; k < 120; k++) {
      const a = centers[Math.floor(r() * centers.length)];
      let b = centers[Math.floor(r() * centers.length)];
      if (b === a) b = centers[(centers.indexOf(a) + 1) % centers.length];
      const t = r();
      data.push({
        x: a.cx + (b.cx - a.cx) * t + gauss() * 0.015,
        y: a.cy + (b.cy - a.cy) * t + gauss() * 0.015,
        group: r() < 0.5 ? a.cat : b.cat,
        label: 'bridge',
      });
    }

    const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
    const gDots = svg.append('g');
    const gLabels = svg.append('g');

    const x = d3.scaleLinear();
    const y = d3.scaleLinear();
    const color = d3.scaleOrdinal().domain(categories);
    const margin = { top: 8, right: 12, bottom: 8, left: 12 };

    function refreshPalette() {
      try {
        if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
          const arr = window.ColorPalettes.getColors('categorical', categories.length);
          if (arr && arr.length) { color.range(arr); return; }
        }
      } catch {}
      color.range(['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948']);
    }

    function draw() {
      const w = container.clientWidth || 800;
      const h = Math.max(200, Math.round(w / 2.8));
      svg.attr('width', w).attr('height', h);

      const iw = w - margin.left - margin.right;
      const ih = h - margin.top - margin.bottom;
      x.domain(d3.extent(data, d => d.x)).range([margin.left, margin.left + iw]);
      y.domain(d3.extent(data, d => d.y)).range([margin.top + ih, margin.top]);

      const dots = gDots.selectAll('circle').data(data);
      dots.enter().append('circle')
        .attr('r', 3.5).attr('fill-opacity', 0.8)
        .attr('stroke-width', 0.5)
        .merge(dots)
        .attr('cx', d => x(d.x)).attr('cy', d => y(d.y))
        .attr('fill', d => color(d.group))
        .attr('stroke', d => d3.color(color(d.group)).darker(0.3));
      dots.exit().remove();

      const centroids = d3.rollups(data, v => ({ x: d3.mean(v, d => d.x), y: d3.mean(v, d => d.y) }), d => d.group);
      const labels = gLabels.selectAll('g.centroid').data(centroids, d => d[0]);
      const enter = labels.enter().append('g').attr('class', 'centroid');
      enter.append('text').attr('class', 'bg').attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
        .style('font-weight', '800').style('font-size', '14px').style('stroke', 'var(--page-bg, #fff)')
        .style('stroke-width', '6px').style('paint-order', 'stroke fill');
      enter.append('text').attr('class', 'fg').attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
        .style('font-weight', '800').style('font-size', '14px');
      const merged = enter.merge(labels);
      merged.attr('transform', d => 'translate(' + x(d[1].x) + ',' + y(d[1].y) + ')');
      merged.select('.bg').text(d => d[0]).style('fill', 'var(--page-bg, #fff)');
      merged.select('.fg').text(d => d[0]).style('fill', d => color(d[0]));
      labels.exit().remove();
    }

    refreshPalette();
    draw();
    document.addEventListener('palettes:updated', () => { refreshPalette(); draw(); });
    if (window.ResizeObserver) new ResizeObserver(draw).observe(container);
  };

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

export const SEED_SCALING_CHART_HTML = `<div class="d3-line-chart"></div>
<style>
  .d3-line-chart {
    font-family: sans-serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 8px;
    color: var(--text-color);
  }
  .d3-line-chart .line { fill: none; stroke: var(--primary-color); stroke-width: 3px; }
  .d3-line-chart .area { fill: var(--primary-color); opacity: 0.3; }
  .d3-line-chart .axis path, .d3-line-chart .axis line { stroke: var(--axis-color); }
  .d3-line-chart .axis text { fill: var(--text-color); }
  .d3-line-chart .grid line { stroke: var(--grid-color); stroke-opacity: 0.7; shape-rendering: crispEdges; }
  .d3-line-chart .tooltip { position: absolute; pointer-events: none; background-color: var(--surface-bg); border: 1px solid var(--border-color); padding: 8px; border-radius: 4px; font-size: 12px; color: var(--text-color); }
  .d3-line-chart .dot { fill: var(--primary-color); stroke: var(--surface-bg); stroke-width: 2px; }
</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); }
    s.addEventListener('load', () => { if (window.d3) cb(); }, { once: true });
    if (window.d3) cb();
  };

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

    const data = [
      { date: new Date("2023-01-01"), value: 30 },
      { date: new Date("2023-01-02"), value: 80 },
      { date: new Date("2023-01-03"), value: 45 },
      { date: new Date("2023-01-04"), value: 60 },
      { date: new Date("2023-01-05"), value: 20 },
      { date: new Date("2023-01-06"), value: 90 },
      { date: new Date("2023-01-07"), value: 55 }
    ];

    const margin = { top: 20, right: 30, bottom: 40, left: 40 };

    const render = () => {
      const width = container.clientWidth;
      const height = Math.min(width / 1.6, 400);
      d3.select(container).select('svg').remove();
      d3.select(container).select('.tooltip').remove();

      const svg = d3.select(container).append('svg').attr('width', width).attr('height', height);
      const g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
      const iw = width - margin.left - margin.right;
      const ih = height - margin.top - margin.bottom;

      const x = d3.scaleTime().domain(d3.extent(data, d => d.date)).range([0, iw]);
      const y = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).nice().range([ih, 0]);

      g.append('g').attr('class', 'axis').attr('transform', 'translate(0,' + ih + ')').call(d3.axisBottom(x));
      g.append('g').attr('class', 'axis').call(d3.axisLeft(y).ticks(5));
      g.append('g').attr('class', 'grid').call(d3.axisLeft(y).tickSize(-iw).tickFormat(''));

      const line = d3.line().x(d => x(d.date)).y(d => y(d.value)).curve(d3.curveMonotoneX);
      const area = d3.area().x(d => x(d.date)).y0(ih).y1(d => y(d.value)).curve(d3.curveMonotoneX);

      g.append('path').datum(data).attr('class', 'area').attr('d', area);
      g.append('path').datum(data).attr('class', 'line').attr('d', line);
      g.selectAll('.dot').data(data).enter().append('circle').attr('class', 'dot')
        .attr('cx', d => x(d.date)).attr('cy', d => y(d.value)).attr('r', 5);
    };

    render();
    if (window.ResizeObserver) new ResizeObserver(render).observe(container);
  };

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

export { SEED_MEMORY_BAR_HTML } from "./seed-embed-memory-bar";
export { SEED_CONFUSION_MATRIX_HTML } from "./seed-embed-confusion-matrix";