PUBLICATION
Pulse

html`<h3 class="text-sm font-bold text-slate-500 uppercase tracking-widest mb-3">Platforms</h3>`

viewof selectedPlatforms = Inputs.checkbox(
  ["CellScape", "CosMx", "GeoMx", "AtoMx", "nCounter"], 
  {value: ["CellScape","CosMx", "GeoMx", "AtoMx", "nCounter"]}
)

filteredLinePubs = pubs_clean.filter(d => {
  if (selectedPlatforms.length === 0) return false;
  let keep = false;
  if (selectedPlatforms.includes("CellScape") && d.Has_CellScape === 'True') keep = true;
  if (selectedPlatforms.includes("CosMx") && d.Has_CosMx === 'True') keep = true;
  if (selectedPlatforms.includes("GeoMx") && d.Has_GeoMx === 'True') keep = true;
  if (selectedPlatforms.includes("AtoMx") && d.Has_AtoMx === 'True') keep = true;
  if (selectedPlatforms.includes("nCounter") && d.Has_nCounter === 'True') keep = true;
  return keep;
})
// Calculate ALL TIME top papers for the right-hand panel
allTimeTopPapers = [...filteredLinePubs]
  .sort((a,b) => (b["Cited By"] || 0) - (a["Cited By"] || 0))
  .slice(0, 3)
// Generate cumulative data and capture top papers per year
chartData = {
  // 1. Determine the timeline bounds
  const minYear = 2008;
  // Use the actual data we are plotting to find the max year
  const years = filteredLinePubs.map(d => d.Year).filter(Number.isInteger);
  const maxYear = years.length > 0 ? Math.max(...years) : 2026;
  
  let cumulative = 0;
  const result = [];
  
  // 2. Calculate pre-2008 baseline correctly from the PLOTTED dataset
  const preBase = filteredLinePubs.filter(d => d.Year < minYear).length;
  cumulative = preBase;
  
  // 3. Loop through years to build the cumulative total
  for (let y = minYear; y <= maxYear; y++) {
    // Get papers for this specific year
    const pubsInYear = filteredLinePubs.filter(d => d.Year === y);
    
    // Increment the total
    cumulative += pubsInYear.length;
    
    // Sort and grab top 3 by citations for the "Top Chart" tooltips
    const topItems = [...pubsInYear]
      .sort((a, b) => (parseInt(b["Cited By"]) || 0) - (parseInt(a["Cited By"]) || 0))
      .slice(0, 3);
    
    result.push({ 
      YearVal: y,
      Year: new Date(y, 0, 1), 
      Cumulative: cumulative,
      YearlyCount: pubsInYear.length, // Useful for debugging
      TopPapers: topItems
    });
  }
  
  return result;
}

mutable selectedYearVal = null

selectedYearData = {
  // If null, return nothing so the UI defaults to All Time
  if (selectedYearVal === null || !chartData || chartData.length === 0) return null;
  return chartData.find(d => d.YearVal === selectedYearVal);
}

// Interactive Plot
{
  const minYear = 2008;
  const maxYear = Math.max(...pubs_clean.map(d => d.Year).filter(y => Number.isInteger(y)));
  
  const minDate = new Date(minYear, 0, 1);
  const maxDate = new Date(maxYear, 0, 1);
  
  const node = Plot.plot({
    width: 900,
    height: 400,
    marginTop: 20,
    marginRight: 40,
    marginBottom: 30,
    marginLeft: 80,
    style: {
      background: "transparent",
      fontFamily: "Space Grotesk, sans-serif",
      fontSize: "14px"
    },
    x: { type: "time", grid: true, label: null, domain: [minDate, maxDate], insetRight: 20 },
    y: { grid: true, label: "Cumulative Publications" },
    marks: [
      Plot.lineY(chartData, {x: "Year", y: "Cumulative", stroke: "#0077c8", strokeWidth: 4, curve: "catmull-rom"}),
      Plot.areaY(chartData, {x: "Year", y: "Cumulative", fill: "url(#gradient-blue)", fillOpacity: 0.2, curve: "catmull-rom"}),
      // Visible indicator for the selected year
      Plot.dot([selectedYearData].filter(Boolean), {
        x: "Year",
        y: "Cumulative",
        r: 10,
        fill: "#f97316", // Made it orange to pop
        stroke: "white",
        strokeWidth: 4,
        pointerEvents: "none"
      })
    ]
  });
  
  const svg = d3.select(node);
  
  // Make SVG responsive
  svg.attr("width", "100%")
     .attr("height", "100%")
     .attr("viewBox", "0 0 900 400")
     .attr("preserveAspectRatio", "xMidYMid meet");
  
  // Allow cursor to indicate interactivity
  svg.style("cursor", "pointer");
  
  // Add gradient def
  svg.append("defs").append("linearGradient")
      .attr("id", "gradient-blue")
      .attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%")
      .selectAll("stop")
      .data([{offset: "0%", color: "#0077c8"}, {offset: "100%", color: "transparent"}])
      .join("stop")
      .attr("offset", d => d.offset)
      .attr("stop-color", d => d.color);

  // Bind click event directly to SVG to set nearest year
  svg.on("click", function(event) {
    const coords = d3.pointer(event, svg.node());
    const x = coords[0];
    const innerWidth = 900 - 50 - 40;
    const plotX = Math.max(0, Math.min(innerWidth, x - 50)); 
    
    const ratio = plotX / innerWidth;
    const clickedTime = minDate.getTime() + ratio * (maxDate.getTime() - minDate.getTime());
    const clickedYear = new Date(clickedTime).getFullYear();
    
    // snap to nearest existing chartData year
    if (chartData.length > 0) {
      const closest = chartData.reduce((prev, curr) => {
        return (Math.abs(curr.YearVal - clickedYear) < Math.abs(prev.YearVal - clickedYear)) ? curr : prev;
      });
      mutable selectedYearVal = closest.YearVal;
    }
  });
  svg.on("dblclick", function() {
    mutable selectedYearVal = null;
  });
  return node;
}