@sjcrh/proteinpaint-client 2.224.2 → 2.225.0

package/dist/chunk-ZNHC46CT.js

@@ -0,0 +1,340 @@
+import {
+  summaryInit
+} from "./chunk-ES7XNERS.js";
+import {
+  navInit
+} from "./chunk-PPICALUF.js";
+import {
+  skipPrevActionAbort,
+  storeInit
+} from "./chunk-Z7CCL464.js";
+import {
+  AppBase,
+  downloadSVGsAsPdf,
+  filterRxCompInit,
+  newSandboxDiv,
+  sayerror,
+  vocabInit
+} from "./chunk-OOVVKQSD.js";
+import {
+  importPlot
+} from "./chunk-QRZRAMHA.js";
+import {
+  Menu
+} from "./chunk-CNFTQSNE.js";
+import {
+  AppApi,
+  getCompInit,
+  multiInit
+} from "./chunk-HBNB5TRH.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+
+// mass/plot.js
+var MassPlot = class _MassPlot {
+  static type = "plot";
+  constructor(opts) {
+    this.type = _MassPlot.type;
+    setRenderers(this);
+    this.initUi(opts);
+  }
+  reactsTo(action) {
+    if (action.type.endsWith("_group")) return true;
+    if (action.type.startsWith("plot_")) {
+      return action.id === this.id || action.id == this.parentId || action.config?.parentId === this.id || action.parentId === this.id;
+    }
+    if (action.type.startsWith("filter")) return true;
+    if (action.type.startsWith("cohort")) return true;
+    if (action.type == "app_refresh") return true;
+    if (action.type.endsWith("customTerm")) return true;
+  }
+  // !!! NOTE: This getState() method is reused by the plot-specific recover component.
+  // When logging something within getState, it may have been called by either the plot or recover instance
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) {
+      throw `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`;
+    }
+    return {
+      termfilter: appState.termfilter,
+      config,
+      groups: appState.groups,
+      // quick fix to skip history tracking as needed
+      _scope_: appState._scope_
+    };
+  }
+  async main() {
+    this.dom.errdiv.style("display", "none").style("background-color", "rgba(255,100,100,0.2)").html("");
+    if (!this.components) await this.setComponents(this.opts);
+  }
+  async setComponents(opts) {
+    const _ = await importPlot(opts.chartType);
+    const promises = {
+      // recover: recoverInit({
+      // 	app: this.app,
+      // 	holder: this.dom.localRecoverDiv,
+      // 	getState: appState => this.getState(appState),
+      // 	reactsTo: action =>
+      // 		action.id == this.id &&
+      // 		(action.type == 'plot_edit' || action.type == 'plot_nestedEdits') &&
+      // 		action._track_ != 'none',
+      // 	plot_id: this.id,
+      // 	maxHistoryLen: 10,
+      // 	hideLabel: true
+      // }),
+      chart: _.componentInit({
+        app: this.app,
+        holder: this.dom.viz,
+        header: this.dom.paneTitleDiv,
+        id: this.id,
+        plotDiv: select_default(this.dom.holder.app_div.node().parentNode),
+        /******* reason for passing plotDiv to chart ********
+        				- this plot instance may allow to launch a new plot as a persistent sandbox
+        				  inside mass plotDiv, maintaining the uniform plot appearance despite it's ad-hoc
+        				  the new plot is not a formal mass plot type, and cannot be done via app.dispatch()
+        				  thus the need to directly access plotDiv
+        				- example: mds3 tk from genome browser can launch disco etc
+        				- having access to plotDiv may offer flexibility for the plot to do stuff
+        
+        				since plot.js has no access to mass app .dom.plotDiv in which all apps are shown,
+        				this workarounds gets the parent node of sandbox.app_div which is app.dom.plotDiv
+        				*/
+        getFilterImage: async () => this.components.filter.getFilterImage()
+      })
+    };
+    const plotFilterCfg = this.app.vocabApi.termdbConfig?.plotFilter;
+    if (!this.state.config.hidePlotFilter && !plotFilterCfg?.hide) {
+      const filterDisabledMsg = plotFilterCfg?.disabledMessage;
+      const filterHolder = filterDisabledMsg ? this.dom.filterDiv.append("div").style("pointer-events", "none").style("opacity", 0.5) : this.dom.filterDiv;
+      if (filterDisabledMsg) this.dom.filterDiv.attr("title", filterDisabledMsg).style("cursor", "not-allowed");
+      promises.filter = filterRxCompInit({
+        app: this.app,
+        vocabApi: this.app.vocabApi,
+        parentId: this.id,
+        holder: filterHolder,
+        hideLabel: true,
+        emptyLabel: "+Add new filter",
+        callback: (filter) => {
+          this.app.dispatch({
+            id: this.id,
+            type: "plot_edit",
+            config: { filter }
+          });
+        }
+      });
+    }
+    this.components = await multiInit(promises);
+  }
+  destroy() {
+    this.dom.holder.app_div.selectAll("*").remove();
+    this.dom.holder.app_div.remove();
+    for (const key in this.dom) {
+      delete this.dom[key];
+    }
+  }
+};
+var plotInit = getCompInit(MassPlot);
+function setRenderers(self) {
+  self.initUi = function(opts) {
+    const holder = opts.holder;
+    opts.holder.app_div.attr("data-testid", "sjpp-massplot-sandbox-" + opts.chartType);
+    holder.header.style("padding", 0);
+    try {
+      self.dom = {
+        tip: new Menu({ padding: "0px" }),
+        holder,
+        paneTitleDiv: holder.header.append("div").style("display", "inline-block").style("color", "#555").style("padding-left", "7px").style("vertical-align", "sub"),
+        localRecoverDiv: holder.header.append("div").style("display", "inline-block"),
+        filterDiv: holder.header.append("div").style("display", "inline-block").style("zoom", 0.9),
+        body: holder.body.style("white-space", "nowrap").style("overflow-x", "auto"),
+        // will hold no data notice or the page title in multichart views
+        errdiv: holder.body.append("div").style("display", "none").style("padding", "5px").style("background-color", "rgba(255,100,100,0.2)"),
+        // dom.viz will hold the rendered view
+        viz: holder.body.append("div")
+      };
+    } catch (e) {
+      self.dom.errdiv.style("display", "none").text(e);
+    }
+  };
+}
+
+// mass/app.ts
+var MassApp = class extends AppBase {
+  // expected class-specific props
+  constructor(opts, api) {
+    super(opts);
+    this.components = {};
+    this.wasDestroyed = false;
+    this.api = api;
+    if (opts.addLoginCallback) {
+      opts.addLoginCallback(() => this.api.dispatch({ type: "app_refresh" }));
+    }
+    this.type = "app";
+    this.dom = {
+      holder: opts.holder,
+      // do not modify holder style
+      topbar: opts.holder.append("div"),
+      errdiv: opts.holder.append("div"),
+      plotDiv: opts.holder.append("div")
+    };
+    if (opts.getPlotConfig_mutateSummary) {
+      if (typeof opts.getPlotConfig_mutateSummary != "function")
+        throw new Error("opts.getPlotConfig_mutateSummary is not function");
+    }
+    this.plotIdToSandboxId = {};
+  }
+  static {
+    this.type = "app";
+  }
+  async preApiFreeze(api) {
+    try {
+      api.tip = new Menu({ padding: "5px" });
+      api.tip.d.on("keyup", (event) => {
+        if (event.key == "Escape") api.tip.hide();
+      });
+      api.printError = (e) => this.printError(e);
+      api.vocabApi = await vocabInit({
+        app: api,
+        state: { vocab: this.opts.state.vocab },
+        fetchOpts: this.opts.fetchOpts,
+        getDatasetAccessToken: this.opts.getDatasetAccessToken
+      });
+      api.hasWebGL = function() {
+        try {
+          const canvas = document.createElement("canvas");
+          return !!(window.WebGLRenderingContext && (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")));
+        } catch (_) {
+          return false;
+        }
+      };
+      this.opts.state.vocab = api.vocabApi.vocab;
+    } catch (e) {
+      console.log(`preApiFreeze error`, e);
+      throw e;
+    }
+  }
+  async init() {
+    try {
+      const debounceInterval = "debounceInterval" in this.opts ? this.opts.debounceInterval : 0;
+      const embeddedSessionState = this.opts.embeddedSessionState;
+      if (embeddedSessionState) {
+        Object.assign(this.opts.state, embeddedSessionState);
+      }
+      this.store = await storeInit({ app: this.api, state: this.opts.state, debounceInterval });
+      this.state = await this.store.copyState();
+      this.components = {};
+      if (this.state.nav.header_mode != "hidden") {
+        this.components.nav = await navInit({
+          app: this.api,
+          holder: this.dom.topbar,
+          header_mode: this.state && this.state.nav && this.state.nav.header_mode,
+          vocab: this.state.vocab,
+          massSessionDuration: this.state.termdbConfig.massSessionDuration,
+          // this.opts.massSessionDuration
+          pkgver: this.opts.pkgver,
+          downloadPlots: () => {
+            this.downloadPlots();
+          }
+        });
+      }
+      this.components.plots = {};
+      if (this.opts.app?.doNotAwaitInitRender) {
+        this.api.dispatch();
+      } else {
+        await this.api.dispatch();
+      }
+    } catch (e) {
+      this.printError(e);
+      throw e;
+    }
+  }
+  async main() {
+    await this.api.vocabApi.main();
+    this.dom.plotDiv?.style(
+      "display",
+      this.state.nav?.header_mode != "hidden" && this.state.nav?.activeTab == 0 ? "none" : "block"
+    );
+    const newPlots = {};
+    let sandbox;
+    for (const plot of this.state.plots) {
+      if (plot.parentId) continue;
+      if (this.components.plots && !(plot.id in this.components.plots)) {
+        sandbox = newSandboxDiv(this.dom.plotDiv, {
+          close: () => {
+            this.api.dispatch({
+              type: "plot_delete",
+              id: plot.id
+            });
+          },
+          plotId: plot.id,
+          beforePlotId: plot.insertBefore || null,
+          style: {
+            width: "98.5%"
+          }
+        });
+        if (plot.chartType == "summary")
+          newPlots[plot.id] = summaryInit(Object.assign({ app: this.api, holder: sandbox }, plot));
+        else newPlots[plot.id] = plotInit(Object.assign({ app: this.api, holder: sandbox }, plot));
+      }
+    }
+    const numNewPlots = Object.keys(newPlots).length;
+    if (numNewPlots) {
+      await Promise.all(Object.values(newPlots));
+      for (const plotId in newPlots) {
+        this.components.plots[plotId] = await newPlots[plotId];
+      }
+    }
+    for (const plotId in this.components.plots) {
+      if (!this.state.plots.find((p) => p.id === plotId)) {
+        this.components.plots[plotId].destroy();
+        delete this.components.plots[plotId];
+      }
+    }
+  }
+  printError(e) {
+    const errdiv = e.errdiv || this.dom.errdiv;
+    if (errdiv) errdiv.style("display", "").html("").style("background-color", "");
+    sayerror(errdiv || this.opts.holder, "Error: " + (e.message || e.error || e));
+    if (e.stack) console.log(e.stack);
+    this.bus.emit("error");
+    if (this.opts?.debug) {
+      console.groupCollapsed("Stack trace from MassApp.printError() call.");
+      console.trace();
+      console.groupEnd();
+    }
+  }
+  skipPrevActionAbort(action) {
+    return skipPrevActionAbort(action);
+  }
+  async downloadPlots() {
+    const chartImagesAll = [];
+    let i = 1;
+    const values = Object.values(this.components.plots);
+    for (const plot of values) {
+      const chart = plot.type == "plot" ? plot.getComponents("chart") : plot;
+      const chartImages = chart.getChartImages ? chart.getChartImages() : null;
+      if (!chartImages) {
+        console.log(`The ${chart.type} does not support downloading images yet`);
+        continue;
+      }
+      for (const chartImage of chartImages) {
+        if (values.length > 1) chartImage.name = `${i}. ${chartImage.name}`;
+        chartImagesAll.push(chartImage);
+      }
+      i++;
+    }
+    if (chartImagesAll.length > 0) {
+      const filters = [];
+      const globalFilterImg = await this.components.nav.getComponents("filter").getFilterImage();
+      if (globalFilterImg) filters.push(globalFilterImg);
+      downloadSVGsAsPdf(chartImagesAll, "plots", "landscape", filters);
+    } else alert("No chart images available for download");
+  }
+};
+var appInit = AppApi.getInitFxn(MassApp);
+
+export {
+  appInit
+};
+//# sourceMappingURL=chunk-ZNHC46CT.js.map

package/dist/chunk-ZSTD6Y3K.js

@@ -0,0 +1,255 @@
+import {
+  DataPointInteractions,
+  axisstyle,
+  createLollipopFromGene,
+  drawHoverShapes,
+  showResultsTable,
+  table2col,
+  to_svg
+} from "./chunk-OOVVKQSD.js";
+import {
+  Menu
+} from "./chunk-CNFTQSNE.js";
+import {
+  icons
+} from "./chunk-3CIL7KH7.js";
+import {
+  axisBottom,
+  axisLeft
+} from "./chunk-2N345NXD.js";
+import {
+  linear
+} from "./chunk-4OLM3KSB.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+
+// plots/manhattan/manhattan.ts
+var manhattanLayoutDefaults = {
+  plotWidth: 1e3,
+  plotHeight: 400,
+  pngDotRadius: 2,
+  yAxisX: 70,
+  yAxisY: 40,
+  yAxisSpace: 20,
+  xAxisLabelPad: 30,
+  yAxisPad: 5,
+  axisColor: "#545454",
+  showYAxisLine: true,
+  fontSize: 12,
+  showLegend: true,
+  legendItemWidth: 80,
+  legendDotRadius: 3,
+  legendRightOffset: 15,
+  legendTextOffset: 12,
+  legendVerticalOffset: 4,
+  legendFontSize: 12,
+  showInteractiveDots: true,
+  interactiveDotRadius: 2,
+  interactiveDotStrokeWidth: 1,
+  showDownload: true,
+  interactiveDotsCap: 5e3,
+  maxTooltipGenes: 5
+};
+function plotManhattan(div, data, settings, app, custom = {}) {
+  const handle = { points: [], highlight: () => {
+  } };
+  settings = {
+    ...settings
+  };
+  let interactivePoints = data.plotData.points;
+  if (data.plotData.points.length > settings.interactiveDotsCap) {
+    interactivePoints = data.plotData.points.sort((a, b) => Math.abs(b.y) - Math.abs(a.y)).slice(0, settings.interactiveDotsCap);
+  }
+  const signed = data.plotData.y_min < 0;
+  div.style("position", "relative");
+  const geneTip = new Menu({ padding: "" });
+  const svg = div.append("svg").attr("data-testid", "sjpp-manhattan").attr("width", settings.plotWidth + 2 * settings.pngDotRadius + settings.yAxisX + settings.yAxisSpace).attr("height", settings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY * 4);
+  const yPlot = linear().domain([data.plotData.y_min, data.plotData.y_max]).range([settings.plotHeight + 2 * settings.pngDotRadius, 0]);
+  const yPad = data.plotData.y_pad ?? settings.pngDotRadius;
+  const yAxisLow = signed ? data.plotData.y_min + yPad : 0;
+  const yAxisScale = linear().domain([yAxisLow, data.plotData.y_max - yPad]).range([yPlot(yAxisLow), yPlot(data.plotData.y_max - yPad)]);
+  const axisG = svg.append("g").attr("transform", `translate(${settings.yAxisX + settings.yAxisSpace - settings.yAxisPad},${settings.yAxisY})`);
+  axisG.call(
+    axisLeft(yAxisScale).tickSizeOuter(0)
+    // removes top/bottom cap lines for clean look
+  );
+  axisstyle({
+    axis: axisG,
+    color: settings.axisColor,
+    fontsize: settings.fontSize + 2,
+    showline: settings.showYAxisLine
+  });
+  svg.append("text").attr("x", -((settings.plotHeight + 2 * settings.pngDotRadius) / 2) - settings.yAxisY).attr("y", settings.yAxisX / 2).attr("transform", "rotate(-90)").attr("text-anchor", "middle").attr("font-size", `${settings.fontSize + 4}px`).attr("fill", "black").text((custom.yAxisLabel ?? "-log\u2081\u2080(q-value)") + (data.plotData.has_capped_points ? " [capped]" : ""));
+  svg.append("image").attr("transform", `translate(${settings.yAxisX + settings.yAxisSpace},${settings.yAxisY})`).attr("width", settings.plotWidth + 2 * settings.pngDotRadius).attr("height", settings.plotHeight + 2 * settings.pngDotRadius).attr("href", `data:image/png;base64,${data.pngImg || data.png}`);
+  const xScale = linear().domain([-data.plotData.x_buffer, data.plotData.total_genome_length + data.plotData.x_buffer]).range([0, settings.plotWidth + 2 * settings.pngDotRadius]);
+  if (settings.showInteractiveDots && data.plotData.points && data.plotData.points.length > 0) {
+    const hoverLayer = svg.append("g").attr("transform", `translate(${settings.yAxisX + settings.yAxisSpace},${settings.yAxisY})`).style("pointer-events", "none");
+    const cover = select_default(svg.node().parentNode).append("div").style("position", "absolute").style("left", `${settings.yAxisX + settings.yAxisSpace}px`).style("top", `${settings.yAxisY}px`).style("width", `${settings.plotWidth + 2 * settings.pngDotRadius}px`).style("height", `${settings.plotHeight + 2 * settings.pngDotRadius}px`).style("pointer-events", "all");
+    const circlePath = (r) => `M${r},0 A${r},${r} 0 1,1 ${-r},0 A${r},${r} 0 1,1 ${r},0 Z`;
+    const linkedLayer = svg.append("g").attr("transform", `translate(${settings.yAxisX + settings.yAxisSpace},${settings.yAxisY})`).style("pointer-events", "none");
+    handle.points = interactivePoints;
+    handle.highlight = (dots) => drawHoverShapes(
+      linkedLayer,
+      dots.map((d) => ({
+        path: circlePath(settings.pngDotRadius + 2),
+        transform: `translate(${d.pixel_x},${d.pixel_y})`,
+        stroke: "black",
+        strokeWidth: 2
+      }))
+    );
+    const grin2Hover = (d, container) => {
+      const table = table2col({ holder: container.append("div"), margin: "10px" });
+      table.addRow("Gene", d.gene);
+      table.addRow("Position", `${d.chrom}:${d.start}-${d.end}`);
+      const [t1, t2] = table.addRow();
+      t1.text("Type");
+      t2.html(`<span style="color:${d.color}">\u25CF</span> ${d.type.charAt(0).toUpperCase() + d.type.slice(1)}`);
+      table.addRow("Q-value", d.q_value.toPrecision(3));
+      table.addRow("Subject count", d.nsubj);
+    };
+    const grin2Table = (dots) => ({
+      columns: [
+        { label: "Gene" },
+        { label: "Position" },
+        { label: "Type" },
+        { label: "Q-value", sortable: true },
+        { label: "Subject count", sortable: true }
+      ],
+      rows: dots.map((d) => [
+        { value: d.gene },
+        { value: `${d.chrom}:${d.start}-${d.end}` },
+        {
+          html: `<span style="color:${d.color}">\u25CF</span> ${d.type.charAt(0).toUpperCase() + d.type.slice(1)}`
+        },
+        { value: d.q_value.toPrecision(3) },
+        { value: d.nsubj }
+      ])
+    });
+    const interactions = new DataPointInteractions({
+      cover,
+      hoverLayer,
+      hoverTip: geneTip,
+      points: interactivePoints,
+      getX: (d) => d.pixel_x,
+      getY: (d) => d.pixel_y,
+      hitRadius: settings.pngDotRadius + 3,
+      toHoverSpec: (d) => ({
+        path: circlePath(settings.pngDotRadius),
+        transform: `translate(${d.pixel_x},${d.pixel_y})`,
+        fill: "none",
+        stroke: "black",
+        strokeWidth: settings.interactiveDotStrokeWidth
+      }),
+      maxTooltipRows: settings.maxTooltipGenes,
+      onHover: custom.onHover,
+      itemNoun: custom.itemNoun ?? "gene",
+      renderSingleHoverTooltip: custom.renderSingleHoverTooltip ?? grin2Hover,
+      buildMultiHitTableData: custom.buildMultiHitTableData ?? grin2Table,
+      // A caller with actions gets the module's standard click flow: an action menu for one
+      // dot, a pick-a-row menu for several. Without one, GRIN2's behaviour below.
+      ...custom.getActions ? {
+        getActions: custom.getActions,
+        renderSingleHitInfo: custom.renderSingleHitInfo ?? custom.renderSingleHoverTooltip,
+        getRowKey: custom.getRowKey
+      } : {
+        // Manhattan single-click goes straight to a lollipop launch — no menu.
+        // Release hover-suppression immediately so the cursor's next move re-engages.
+        onSingleClick: (d, _event, ctx) => {
+          ctx.dismiss();
+          if (app && d.gene) createLollipopFromGene(d.gene, app);
+        },
+        // Manhattan multi-click shows showResultsTable directly with `app + clickMenu`
+        // so the table renders inline Matrix/Lollipop buttons. Reuses the module's
+        // clickMenu so its onHide cleanup (clear flag, clear hover) fires on dismiss.
+        // Content is built BEFORE show2 so Menu can measure the populated rect for
+        // its right-edge clamp — otherwise the wide table is placed at cursor+offsetX
+        // and extends off the right edge of the viewport.
+        onMultiClick: (dots, event, ctx) => {
+          if (!app) {
+            ctx.dismiss();
+            return;
+          }
+          ctx.clickMenu.clear();
+          const holder = ctx.clickMenu.d.append("div").style("margin", "10px");
+          showResultsTable({ tableDiv: holder, hits: dots, app, clickMenu: ctx.clickMenu });
+          ctx.clickMenu.show2(event.clientX, event.clientY);
+        }
+      }
+    });
+    interactions.attach();
+  }
+  const chroms = Object.entries(data.plotData.chrom_data || {});
+  const oneChrom = chroms.length == 1 ? chroms[0] : void 0;
+  if (oneChrom) {
+    const [, chromData] = oneChrom;
+    const xAxisG = svg.append("g").attr(
+      "transform",
+      `translate(${settings.yAxisX + settings.yAxisSpace},${settings.yAxisY + settings.plotHeight + 2 * settings.pngDotRadius})`
+    ).call(
+      axisBottom(xScale.copy().domain(xScale.domain().map((v) => (v - chromData.start) / 1e6))).ticks(8).tickSizeOuter(0)
+    );
+    axisstyle({ axis: xAxisG, color: settings.axisColor, fontsize: settings.fontSize + 2 });
+  } else if (data.plotData.chrom_data) {
+    const chromLabelY = settings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY + 10;
+    chroms.forEach(([chrom, chromData]) => {
+      const chromLabel = chrom.replace("chr", "");
+      if (chromLabel === "M") return;
+      const centerPos = settings.yAxisX + settings.yAxisSpace + xScale(chromData.center);
+      svg.append("text").attr("x", centerPos).attr("y", chromLabelY).attr("text-anchor", "middle").attr("font-size", `${settings.fontSize + 2}px`).text(chromLabel);
+    });
+  }
+  svg.append("text").attr("x", settings.yAxisX + settings.yAxisSpace + (settings.plotWidth + 2 * settings.pngDotRadius) / 2).attr(
+    "y",
+    // below the Mb tick labels, which the chromosome names it replaces did not have
+    settings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY + settings.xAxisLabelPad + (oneChrom ? 14 : 0)
+  ).attr("text-anchor", "middle").attr("font-size", `${settings.fontSize + 4}px`).attr("fill", "black").text(oneChrom ? `${oneChrom[0]} position (Mb)` : "Chromosomes");
+  const title = svg.append("text").attr("x", settings.yAxisX + settings.yAxisSpace).attr("y", settings.yAxisY / 2).attr("font-weight", "bold").attr("font-size", `${settings.fontSize + 2}px`).text(custom.title ?? "Manhattan Plot");
+  const titleWidth = title.node().getBBox?.().width || 100;
+  if (settings.showDownload) {
+    const downloadDiv = div.append("div").style("position", "absolute").style("top", "5px").style("left", `${settings.yAxisX + settings.yAxisSpace + titleWidth + 8}px`);
+    icons["download"](downloadDiv, {
+      width: 16,
+      height: 16,
+      title: "Download Manhattan plot",
+      handler: () => downloadManhattanSvg(
+        svg.node(),
+        `manhattan_plot_${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, -5)}`
+      )
+    });
+  }
+  const mutationTypes = [...new Set(data.plotData.points.map((p) => p.type).filter(Boolean))];
+  const legendData = custom.legend?.map((l) => ({ type: l.label, color: l.color, hollow: l.hollow })) ?? mutationTypes.map((type) => {
+    const point = data.plotData.points.find((p) => p.type === type);
+    return {
+      type: String(type).charAt(0).toUpperCase() + String(type).slice(1),
+      color: point?.color
+    };
+  });
+  if (settings.showLegend && legendData.length > 0) {
+    const legendY = settings.yAxisY / 2;
+    const totalWidth = legendData.length * settings.legendItemWidth;
+    const legendX = settings.yAxisX + settings.yAxisSpace + (settings.plotWidth + 2 * settings.pngDotRadius) - totalWidth - settings.legendRightOffset;
+    legendData.forEach((item, i) => {
+      const x = legendX + i * settings.legendItemWidth;
+      svg.append("circle").attr("cx", x + 8).attr("cy", legendY).attr("r", settings.legendDotRadius).attr("fill", item.hollow ? "none" : item.color).attr("stroke", item.hollow ? item.color : "none");
+      svg.append("text").attr("x", x + 8 + settings.legendTextOffset).attr("y", legendY + settings.legendVerticalOffset).attr("font-size", `${settings.legendFontSize + 2}px`).text(item.type);
+    });
+  }
+  return handle;
+}
+function downloadManhattanSvg(svgNode, fileName) {
+  const clone = svgNode.cloneNode(true);
+  const bbox = svgNode.getBBox();
+  clone.setAttribute("width", bbox.width.toString());
+  clone.setAttribute("height", bbox.height.toString());
+  clone.setAttribute("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
+  to_svg(clone, fileName, { apply_dom_styles: true });
+}
+
+export {
+  manhattanLayoutDefaults,
+  plotManhattan,
+  downloadManhattanSvg
+};
+//# sourceMappingURL=chunk-ZSTD6Y3K.js.map

package/dist/chunk-ZSTD6Y3K.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../plots/manhattan/manhattan.ts"],
+  "sourcesContent": ["import { scaleLinear } from 'd3-scale'\nimport * as d3axis from 'd3-axis'\nimport { select } from 'd3-selection'\nimport {\n\tMenu,\n\ticons,\n\taxisstyle,\n\ttable2col,\n\tshowResultsTable,\n\tcreateLollipopFromGene,\n\tDataPointInteractions,\n\tdrawHoverShapes,\n\ttype ActionMenuItem\n} from '#dom'\nimport { to_svg } from '#src/client'\nimport type { ManhattanPoint } from './manhattanTypes'\n\n/**\n * Creates an interactive Manhattan plot on top of a PNG background plot image.\n *\n * @param {Object} div - div element to contain the plot\n * @param {Object} data - Plot data\n * @param {Object} settings - Display configuration options:\n *   @param {number} [settings.plotWidth=500] - Plot area width\n *   @param {number} [settings.plotHeight=200] - Plot area height\n *   @param {boolean} [settings.showLegend=true] - Whether to display legend\n *   @param {boolean} [settings.showDownload=true] - Whether to show download button\n *   @param {boolean} [settings.showInteractiveDots=true] - Whether to show hoverable data points\n *   @param {number} [settings.yAxisX=70] - Y-axis positioning\n *   @param {number} [settings.yAxisSpace=40] - Space between Y-axis and plot\n *   @param {number} [settings.yAxisY=40] - Top margin\n *   @param {number} [settings.fontSize=12] - Base font size\n *   @param {number} [settings.pngDotRadius=2] - Radius of dots in PNG plot\n *   @param {number} [settings.legendItemWidth=80] - Horizontal space per legend item\n *   @param {number} [settings.legendDotRadius=3] - Size of legend dots\n *   @param {number} [settings.legendRightOffset=15] - Offset from right edge\n *   @param {number} [settings.legendTextOffset=12] - Distance between dot and text\n *   @param {number} [settings.legendVerticalOffset=4] - Vertical offset for legend items\n *   @param {number} [settings.legendFontSize=12] - Font size for legend text\n *   @param {number} [settings.interactiveDotRadius=2] - Radius of interactive dots\n *   @param {number} [settings.xAxisLabelPad=20] - Amount of padding we give for x-axis title padding\n *   @param {number} [settings.interactiveDotStrokeWidth=1] - Stroke width for interactive dots\n *   @param {string} [settings.axisColor='#545454'] - Color for y-axis\n *   @param {boolean} [settings.showYAxisLine=true] - Whether to show y-axis line\n *   @param {number} [settings.interactiveDotsCap=5000] - Interactive dots cap\n *   @param {number} [settings.maxTooltipGenes=5] - Maximum number of genes to show in tooltip\n * @param {Object} [app] - Optional app context for dispatching events\n *\n *\n * @description\n * Renders a genomic Manhattan plot by overlaying interactive elements on the base PNG plot image.\n * Features include chromosome labels, legend, hoverable data points with tooltips,\n * and proper axis scaling. The plot combines a static PNG plot image of all points with dynamic SVG elements\n * including axes, labels, legend, and top genes (represented as interactive dots) for detailed information on hover.\n */\n\n/** What a caller other than GRIN2 supplies: the plot is drawn the same way, but what a dot IS --\n * what its tooltip says, what clicking it offers, what the axis is called -- belongs to the caller.\n * Every field is optional and defaults to the GRIN2 behaviour, so GRIN2 passes nothing. */\nexport type ManhattanCustom<T = any> = {\n\ttitle?: string\n\tyAxisLabel?: string\n\t/** legend entries; default derives one per point `type` from the data. `hollow` draws the\n\t * swatch as an open circle, for a plot whose dots are drawn that way */\n\tlegend?: { label: string; color: string; hollow?: boolean }[]\n\titemNoun?: string\n\trenderSingleHoverTooltip?: (d: T, container: any) => void\n\tbuildMultiHitTableData?: (dots: T[]) => { columns: any[]; rows: any[] }\n\t/** Given, clicking a dot opens the standard action menu (buttons over the info table) rather\n\t * than GRIN2's lollipop launch; multi-hit clicks open the standard pick-a-row menu. */\n\tgetActions?: (d: T) => ActionMenuItem[]\n\trenderSingleHitInfo?: (d: T, container: any) => void\n\tgetRowKey?: (d: T) => string\n\t/** see DataPointInteractionsOpts.onHover */\n\tonHover?: (dots: T[]) => void\n}\n\n/** Returned by plotManhattan: the live points, and a way to ring some of them from outside -- for a\n * hover on another plot showing the same items. Separate from the plot's own hover layer, so the two\n * never erase each other. */\nexport type ManhattanHandle = { points: any[]; highlight: (dots: any[]) => void }\n\n/** Layout settings shared by every caller. GRIN2 keeps its own copy in its settings (they are\n * part of its persisted state); a caller without such state spreads these. */\nexport const manhattanLayoutDefaults = {\n\tplotWidth: 1000,\n\tplotHeight: 400,\n\tpngDotRadius: 2,\n\tyAxisX: 70,\n\tyAxisY: 40,\n\tyAxisSpace: 20,\n\txAxisLabelPad: 30,\n\tyAxisPad: 5,\n\taxisColor: '#545454',\n\tshowYAxisLine: true,\n\tfontSize: 12,\n\tshowLegend: true,\n\tlegendItemWidth: 80,\n\tlegendDotRadius: 3,\n\tlegendRightOffset: 15,\n\tlegendTextOffset: 12,\n\tlegendVerticalOffset: 4,\n\tlegendFontSize: 12,\n\tshowInteractiveDots: true,\n\tinteractiveDotRadius: 2,\n\tinteractiveDotStrokeWidth: 1,\n\tshowDownload: true,\n\tinteractiveDotsCap: 5000,\n\tmaxTooltipGenes: 5\n}\n\nexport function plotManhattan(\n\tdiv: any,\n\tdata: any,\n\tsettings: any,\n\tapp?: any,\n\tcustom: ManhattanCustom = {}\n): ManhattanHandle {\n\tconst handle: ManhattanHandle = { points: [], highlight: () => {} }\n\t// Get our settings\n\tsettings = {\n\t\t...settings\n\t}\n\n\t// Check size of interactive data. Ranked by |y| so a signed plot (hypomethylation below the\n\t// line) keeps its strongest dots on both sides rather than only the positive ones.\n\tlet interactivePoints = data.plotData.points\n\tif (data.plotData.points.length > settings.interactiveDotsCap) {\n\t\tinteractivePoints = data.plotData.points\n\t\t\t.sort((a: any, b: any) => Math.abs(b.y) - Math.abs(a.y))\n\t\t\t.slice(0, settings.interactiveDotsCap)\n\t}\n\t// A signed plot has y_min below zero; its axis is symmetric and its zero line sits mid-plot.\n\tconst signed = data.plotData.y_min < 0\n\n\t// Set the  positioning up for download button to work properly\n\tdiv.style('position', 'relative')\n\n\t// Hover tooltip menu \u2014 DataPointInteractions writes into this on hover.\n\tconst geneTip = new Menu({ padding: '' })\n\n\tconst svg = div\n\t\t.append('svg')\n\t\t.attr('data-testid', 'sjpp-manhattan')\n\t\t.attr('width', settings.plotWidth + 2 * settings.pngDotRadius + settings.yAxisX + settings.yAxisSpace)\n\t\t.attr('height', settings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY * 4) // Extra space for x-axis labels, legend, and title\n\n\t// Add y-axis\n\t// yPlot       \u2192 full padded scale, aligns exactly with PNG coordinates\n\t// yAxisScale  \u2192 trimmed scale for axis labels, ignores PNG padding\n\t// --- Y-Axis Setup ---\n\t// This section builds two linked scales:\n\t//\n\t//   1) yPlot       \u2192 full PNG-aligned scale (includes padding added by Rust)\n\t//   2) yAxisScale  \u2192 visual axis scale (no padding; shows only real data values)\n\t//\n\t// The reason for two scales is that the PNG image itself was rendered\n\t// with top/bottom padding for dot radius. We need one scale to stay\n\t// pixel-perfect with the PNG (for dots, overlays, etc.), and another\n\t// scale to make the visible y-axis line up only with the *real* data region.\n\n\t// 1) yPlot: true positioning scale used for all pixel-aligned elements\n\t//    - Domain = padded range from Rust (includes buffer above/below real data)\n\t//    - Range  = full PNG pixel height (0 is top, png_height is bottom)\n\tconst yPlot = scaleLinear()\n\t\t.domain([data.plotData.y_min, data.plotData.y_max]) // padded domain from Rust\n\t\t.range([settings.plotHeight + 2 * settings.pngDotRadius, 0]) // full PNG height\n\n\t// 2) yAxisScale: used only for the visible axis labels/ticks\n\t//    - Domain = true data values (no padding)\n\t//    - Range  = subset of pixel space between yPlot(0) and yPlot(realMax [data.plotData.y_max - data.plotData.png_dot_radius])\n\t//               so the axis sits entirely within the real data area\n\t// the PNG pads its y range by the dot radius; older renders had that padding equal the radius\n\t// in y units, newer ones state it\n\tconst yPad = data.plotData.y_pad ?? settings.pngDotRadius\n\tconst yAxisLow = signed ? data.plotData.y_min + yPad : 0\n\tconst yAxisScale = scaleLinear()\n\t\t.domain([yAxisLow, data.plotData.y_max - yPad])\n\t\t.range([yPlot(yAxisLow), yPlot(data.plotData.y_max - yPad)])\n\n\t// Axis group\n\tconst axisG = svg\n\t\t.append('g')\n\t\t.attr('transform', `translate(${settings.yAxisX + settings.yAxisSpace - settings.yAxisPad},${settings.yAxisY})`)\n\n\taxisG.call(\n\t\td3axis.axisLeft(yAxisScale).tickSizeOuter(0) // removes top/bottom cap lines for clean look\n\t)\n\n\taxisstyle({\n\t\taxis: axisG,\n\t\tcolor: settings.axisColor,\n\t\tfontsize: settings.fontSize + 2,\n\t\tshowline: settings.showYAxisLine\n\t})\n\n\t// Add y-axis label\n\tsvg\n\t\t.append('text')\n\t\t.attr('x', -((settings.plotHeight + 2 * settings.pngDotRadius) / 2) - settings.yAxisY)\n\t\t.attr('y', settings.yAxisX / 2)\n\t\t.attr('transform', 'rotate(-90)')\n\t\t.attr('text-anchor', 'middle')\n\t\t.attr('font-size', `${settings.fontSize + 4}px`)\n\t\t.attr('fill', 'black')\n\t\t.text((custom.yAxisLabel ?? '-log\u2081\u2080(q-value)') + (data.plotData.has_capped_points ? ' [capped]' : ''))\n\n\t// Add png image\n\tsvg\n\t\t.append('image')\n\t\t.attr('transform', `translate(${settings.yAxisX + settings.yAxisSpace},${settings.yAxisY})`)\n\t\t.attr('width', settings.plotWidth + 2 * settings.pngDotRadius)\n\t\t.attr('height', settings.plotHeight + 2 * settings.pngDotRadius)\n\t\t.attr('href', `data:image/png;base64,${data.pngImg || data.png}`)\n\n\t// Create scales for positioning elements\n\tconst xScale = scaleLinear()\n\t\t.domain([-data.plotData.x_buffer, data.plotData.total_genome_length + data.plotData.x_buffer])\n\t\t.range([0, settings.plotWidth + 2 * settings.pngDotRadius])\n\n\t// Add interactive dots layer\n\tif (settings.showInteractiveDots && data.plotData.points && data.plotData.points.length > 0) {\n\t\t// Hover-ring layer \u2014 `pointer-events: none` so rings never intercept clicks.\n\t\tconst hoverLayer = svg\n\t\t\t.append('g')\n\t\t\t.attr('transform', `translate(${settings.yAxisX + settings.yAxisSpace},${settings.yAxisY})`)\n\t\t\t.style('pointer-events', 'none')\n\n\t\t// Cover as a sibling HTML div positioned over the plot area \u2014 avoids\n\t\t// the mouse-event quirks of nesting inside SVG.\n\t\tconst cover = select(svg.node().parentNode as HTMLElement)\n\t\t\t.append('div')\n\t\t\t.style('position', 'absolute')\n\t\t\t.style('left', `${settings.yAxisX + settings.yAxisSpace}px`)\n\t\t\t.style('top', `${settings.yAxisY}px`)\n\t\t\t.style('width', `${settings.plotWidth + 2 * settings.pngDotRadius}px`)\n\t\t\t.style('height', `${settings.plotHeight + 2 * settings.pngDotRadius}px`)\n\t\t\t.style('pointer-events', 'all')\n\n\t\t// Circle as an SVG path so it flows through the generic `drawHoverShapes`.\n\t\tconst circlePath = (r: number) => `M${r},0 A${r},${r} 0 1,1 ${-r},0 A${r},${r} 0 1,1 ${r},0 Z`\n\n\t\tconst linkedLayer = svg\n\t\t\t.append('g')\n\t\t\t.attr('transform', `translate(${settings.yAxisX + settings.yAxisSpace},${settings.yAxisY})`)\n\t\t\t.style('pointer-events', 'none')\n\t\thandle.points = interactivePoints\n\t\thandle.highlight = dots =>\n\t\t\tdrawHoverShapes(\n\t\t\t\tlinkedLayer,\n\t\t\t\tdots.map(d => ({\n\t\t\t\t\tpath: circlePath(settings.pngDotRadius + 2),\n\t\t\t\t\ttransform: `translate(${d.pixel_x},${d.pixel_y})`,\n\t\t\t\t\tstroke: 'black',\n\t\t\t\t\tstrokeWidth: 2\n\t\t\t\t}))\n\t\t\t)\n\n\t\tconst grin2Hover = (d: ManhattanPoint, container: any) => {\n\t\t\tconst table = table2col({ holder: container.append('div'), margin: '10px' })\n\t\t\ttable.addRow('Gene', d.gene)\n\t\t\ttable.addRow('Position', `${d.chrom}:${d.start}-${d.end}`)\n\t\t\tconst [t1, t2] = table.addRow()\n\t\t\tt1.text('Type')\n\t\t\tt2.html(`<span style=\"color:${d.color}\">\u25CF</span> ${d.type.charAt(0).toUpperCase() + d.type.slice(1)}`)\n\t\t\ttable.addRow('Q-value', d.q_value.toPrecision(3))\n\t\t\ttable.addRow('Subject count', d.nsubj)\n\t\t}\n\t\tconst grin2Table = (dots: ManhattanPoint[]) => ({\n\t\t\tcolumns: [\n\t\t\t\t{ label: 'Gene' },\n\t\t\t\t{ label: 'Position' },\n\t\t\t\t{ label: 'Type' },\n\t\t\t\t{ label: 'Q-value', sortable: true },\n\t\t\t\t{ label: 'Subject count', sortable: true }\n\t\t\t],\n\t\t\trows: dots.map(d => [\n\t\t\t\t{ value: d.gene },\n\t\t\t\t{ value: `${d.chrom}:${d.start}-${d.end}` },\n\t\t\t\t{\n\t\t\t\t\thtml: `<span style=\"color:${d.color}\">\u25CF</span> ${d.type.charAt(0).toUpperCase() + d.type.slice(1)}`\n\t\t\t\t},\n\t\t\t\t{ value: d.q_value.toPrecision(3) },\n\t\t\t\t{ value: d.nsubj }\n\t\t\t])\n\t\t})\n\n\t\tconst interactions = new DataPointInteractions<ManhattanPoint>({\n\t\t\tcover,\n\t\t\thoverLayer,\n\t\t\thoverTip: geneTip,\n\t\t\tpoints: interactivePoints,\n\t\t\tgetX: d => d.pixel_x,\n\t\t\tgetY: d => d.pixel_y,\n\t\t\thitRadius: settings.pngDotRadius + 3,\n\t\t\ttoHoverSpec: d => ({\n\t\t\t\tpath: circlePath(settings.pngDotRadius),\n\t\t\t\ttransform: `translate(${d.pixel_x},${d.pixel_y})`,\n\t\t\t\tfill: 'none',\n\t\t\t\tstroke: 'black',\n\t\t\t\tstrokeWidth: settings.interactiveDotStrokeWidth\n\t\t\t}),\n\t\t\tmaxTooltipRows: settings.maxTooltipGenes,\n\t\t\tonHover: custom.onHover,\n\t\t\titemNoun: custom.itemNoun ?? 'gene',\n\t\t\trenderSingleHoverTooltip: custom.renderSingleHoverTooltip ?? grin2Hover,\n\t\t\tbuildMultiHitTableData: custom.buildMultiHitTableData ?? grin2Table,\n\t\t\t// A caller with actions gets the module's standard click flow: an action menu for one\n\t\t\t// dot, a pick-a-row menu for several. Without one, GRIN2's behaviour below.\n\t\t\t...(custom.getActions\n\t\t\t\t? {\n\t\t\t\t\t\tgetActions: custom.getActions,\n\t\t\t\t\t\trenderSingleHitInfo: custom.renderSingleHitInfo ?? custom.renderSingleHoverTooltip,\n\t\t\t\t\t\tgetRowKey: custom.getRowKey\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Manhattan single-click goes straight to a lollipop launch \u2014 no menu.\n\t\t\t\t\t\t// Release hover-suppression immediately so the cursor's next move re-engages.\n\t\t\t\t\t\tonSingleClick: (d, _event, ctx) => {\n\t\t\t\t\t\t\tctx.dismiss()\n\t\t\t\t\t\t\tif (app && d.gene) createLollipopFromGene(d.gene, app)\n\t\t\t\t\t\t},\n\t\t\t\t\t\t// Manhattan multi-click shows showResultsTable directly with `app + clickMenu`\n\t\t\t\t\t\t// so the table renders inline Matrix/Lollipop buttons. Reuses the module's\n\t\t\t\t\t\t// clickMenu so its onHide cleanup (clear flag, clear hover) fires on dismiss.\n\t\t\t\t\t\t// Content is built BEFORE show2 so Menu can measure the populated rect for\n\t\t\t\t\t\t// its right-edge clamp \u2014 otherwise the wide table is placed at cursor+offsetX\n\t\t\t\t\t\t// and extends off the right edge of the viewport.\n\t\t\t\t\t\tonMultiClick: (dots, event, ctx) => {\n\t\t\t\t\t\t\tif (!app) {\n\t\t\t\t\t\t\t\tctx.dismiss()\n\t\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tctx.clickMenu.clear()\n\t\t\t\t\t\t\tconst holder = ctx.clickMenu.d.append('div').style('margin', '10px')\n\t\t\t\t\t\t\tshowResultsTable({ tableDiv: holder, hits: dots, app, clickMenu: ctx.clickMenu })\n\t\t\t\t\t\t\tctx.clickMenu.show2(event.clientX, event.clientY)\n\t\t\t\t\t\t}\n\t\t\t\t  })\n\t\t})\n\n\t\tinteractions.attach()\n\t}\n\n\t// One chromosome: a position axis in Mb, since a lone chromosome label says nothing about where\n\tconst chroms = Object.entries(data.plotData.chrom_data || {}) as [string, any][]\n\tconst oneChrom = chroms.length == 1 ? chroms[0] : undefined\n\tif (oneChrom) {\n\t\tconst [, chromData] = oneChrom\n\t\tconst xAxisG = svg\n\t\t\t.append('g')\n\t\t\t.attr(\n\t\t\t\t'transform',\n\t\t\t\t`translate(${settings.yAxisX + settings.yAxisSpace},${\n\t\t\t\t\tsettings.yAxisY + settings.plotHeight + 2 * settings.pngDotRadius\n\t\t\t\t})`\n\t\t\t)\n\t\t\t.call(\n\t\t\t\td3axis\n\t\t\t\t\t.axisBottom(xScale.copy().domain(xScale.domain().map(v => (v - chromData.start) / 1e6)))\n\t\t\t\t\t.ticks(8)\n\t\t\t\t\t.tickSizeOuter(0)\n\t\t\t)\n\t\taxisstyle({ axis: xAxisG, color: settings.axisColor, fontsize: settings.fontSize + 2 })\n\t} else if (data.plotData.chrom_data) {\n\t\t// Add chromosome labels\n\t\tconst chromLabelY = settings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY + 10\n\n\t\tchroms.forEach(([chrom, chromData]) => {\n\t\t\tconst chromLabel = chrom.replace('chr', '')\n\n\t\t\t// Skip chrM\n\t\t\tif (chromLabel === 'M') return\n\n\t\t\t// Calculate center position for label\n\t\t\tconst centerPos = settings.yAxisX + settings.yAxisSpace + xScale(chromData.center)\n\n\t\t\t// Append chromosome label\n\t\t\tsvg\n\t\t\t\t.append('text')\n\t\t\t\t.attr('x', centerPos)\n\t\t\t\t.attr('y', chromLabelY)\n\t\t\t\t.attr('text-anchor', 'middle')\n\t\t\t\t.attr('font-size', `${settings.fontSize + 2}px`)\n\t\t\t\t.text(chromLabel)\n\t\t})\n\t}\n\n\t// Add x-axis label\n\tsvg\n\t\t.append('text')\n\t\t.attr('x', settings.yAxisX + settings.yAxisSpace + (settings.plotWidth + 2 * settings.pngDotRadius) / 2)\n\t\t.attr(\n\t\t\t'y',\n\t\t\t// below the Mb tick labels, which the chromosome names it replaces did not have\n\t\t\tsettings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY + settings.xAxisLabelPad + (oneChrom ? 14 : 0)\n\t\t)\n\t\t.attr('text-anchor', 'middle')\n\t\t.attr('font-size', `${settings.fontSize + 4}px`)\n\t\t.attr('fill', 'black')\n\t\t.text(oneChrom ? `${oneChrom[0]} position (Mb)` : 'Chromosomes')\n\n\t// Add title\n\tconst title = svg\n\t\t.append('text')\n\t\t.attr('x', settings.yAxisX + settings.yAxisSpace)\n\t\t.attr('y', settings.yAxisY / 2)\n\t\t.attr('font-weight', 'bold')\n\t\t.attr('font-size', `${settings.fontSize + 2}px`)\n\t\t.text(custom.title ?? 'Manhattan Plot')\n\t// the download icon follows the title, whatever its length; 108 was the width of the default\n\tconst titleWidth = (title.node() as SVGTextElement).getBBox?.().width || 100\n\n\tif (settings.showDownload) {\n\t\tconst downloadDiv = div\n\t\t\t.append('div')\n\t\t\t.style('position', 'absolute')\n\t\t\t.style('top', '5px')\n\t\t\t.style('left', `${settings.yAxisX + settings.yAxisSpace + titleWidth + 8}px`)\n\n\t\ticons['download'](downloadDiv, {\n\t\t\twidth: 16,\n\t\t\theight: 16,\n\t\t\ttitle: 'Download Manhattan plot',\n\t\t\thandler: () =>\n\t\t\t\tdownloadManhattanSvg(\n\t\t\t\t\tsvg.node() as SVGSVGElement,\n\t\t\t\t\t`manhattan_plot_${new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5)}`\n\t\t\t\t)\n\t\t})\n\t}\n\n\t// Generate legend data: the caller's, or one entry per point type\n\tconst mutationTypes = [...new Set(data.plotData.points.map((p: any) => p.type).filter(Boolean))]\n\tconst legendData: { type: string; color: string; hollow?: boolean }[] =\n\t\tcustom.legend?.map(l => ({ type: l.label, color: l.color, hollow: l.hollow })) ??\n\t\tmutationTypes.map(type => {\n\t\t\tconst point = data.plotData.points.find((p: any) => p.type === type)\n\t\t\treturn {\n\t\t\t\ttype: String(type).charAt(0).toUpperCase() + String(type).slice(1),\n\t\t\t\tcolor: point?.color\n\t\t\t}\n\t\t})\n\n\t// Add legend\n\tif (settings.showLegend && legendData.length > 0) {\n\t\tconst legendY = settings.yAxisY / 2\n\t\tconst totalWidth = legendData.length * settings.legendItemWidth\n\t\tconst legendX =\n\t\t\tsettings.yAxisX +\n\t\t\tsettings.yAxisSpace +\n\t\t\t(settings.plotWidth + 2 * settings.pngDotRadius) -\n\t\t\ttotalWidth -\n\t\t\tsettings.legendRightOffset\n\n\t\tlegendData.forEach((item, i) => {\n\t\t\tconst x = legendX + i * settings.legendItemWidth\n\n\t\t\t// Legend dot\n\t\t\tsvg\n\t\t\t\t.append('circle')\n\t\t\t\t.attr('cx', x + 8)\n\t\t\t\t.attr('cy', legendY)\n\t\t\t\t.attr('r', settings.legendDotRadius)\n\t\t\t\t.attr('fill', item.hollow ? 'none' : item.color)\n\t\t\t\t.attr('stroke', item.hollow ? item.color : 'none')\n\n\t\t\t// Legend text\n\t\t\tsvg\n\t\t\t\t.append('text')\n\t\t\t\t.attr('x', x + 8 + settings.legendTextOffset)\n\t\t\t\t.attr('y', legendY + settings.legendVerticalOffset)\n\t\t\t\t.attr('font-size', `${settings.legendFontSize + 2}px`)\n\t\t\t\t.text(item.type)\n\t\t})\n\t}\n\treturn handle\n}\n\n/** Save a Manhattan svg cropped to its drawn content: the svg reserves room below the plot for a\n * legend that may be absent. Clones it so the displayed plot is left as it is. */\nexport function downloadManhattanSvg(svgNode: SVGSVGElement, fileName: string) {\n\tconst clone = svgNode.cloneNode(true) as SVGSVGElement\n\tconst bbox = svgNode.getBBox()\n\tclone.setAttribute('width', bbox.width.toString())\n\tclone.setAttribute('height', bbox.height.toString())\n\tclone.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`)\n\tto_svg(clone, fileName, { apply_dom_styles: true })\n}\n"],
+  "mappings": "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",
+  "names": []
+}