@sjcrh/proteinpaint-client 2.219.1 → 2.220.0

package/dist/swimmer-2EJZH5PP.js

@@ -1,785 +0,0 @@
-import {
-  getTermValue
-} from "./chunk-H3YF55ZI.js";
-import {
-  DownloadMenu,
-  PlotBase,
-  axisstyle,
-  controlsInit,
-  fillTermWrapper,
-  getCombinedTermFilter,
-  getT0T2defaultQ,
-  make_radios,
-  shapeSelector,
-  shapes
-} from "./chunk-BKW35Z4U.js";
-import "./chunk-HJ6L54YS.js";
-import "./chunk-ETXOEP4N.js";
-import {
-  Menu
-} from "./chunk-CNFTQSNE.js";
-import "./chunk-5NI77Z3O.js";
-import "./chunk-TVJOSRCH.js";
-import "./chunk-3CIL7KH7.js";
-import "./chunk-T4XPCSLP.js";
-import {
-  dofetch3
-} from "./chunk-CJHNPYFQ.js";
-import "./chunk-W5J3LTYS.js";
-import "./chunk-NR6WFCPF.js";
-import "./chunk-GN2A5NL5.js";
-import {
-  axisBottom,
-  getColors
-} from "./chunk-ME3HB3V6.js";
-import {
-  copyMerge,
-  getCompInit
-} from "./chunk-HBNB5TRH.js";
-import "./chunk-PF4DSFDR.js";
-import {
-  linear
-} from "./chunk-4OLM3KSB.js";
-import "./chunk-6XKAOSQE.js";
-import "./chunk-TLT4YIG3.js";
-import "./chunk-5R63Q5KH.js";
-import "./chunk-I6Y4O3RR.js";
-import {
-  rgb
-} from "./chunk-Q5RDQNIT.js";
-import "./chunk-HS5PO5ZQ.js";
-
-// plots/swimmer.ts
-var noValueCategory = "No value";
-var labelGap = 14;
-var legendWidth = 190;
-var shapeBBox = /* @__PURE__ */ new Map();
-function drawMarker(holder, shapeKey, cx, cy, height, color) {
-  const key = shapes[shapeKey] ? shapeKey : "filledCircle";
-  const shape = shapes[key];
-  const g = holder.append("g").attr("transform", `translate(${cx},${cy})`);
-  g.append("rect").attr("x", -height / 2).attr("y", -height / 2).attr("width", height).attr("height", height).attr("fill", "transparent");
-  const path = g.append("path").attr("d", shape.path).attr("fill", color);
-  let box = shapeBBox.get(key);
-  if (!box) {
-    const b = path.node().getBBox();
-    if (b.width && b.height) {
-      box = { x: b.x, y: b.y, width: b.width, height: b.height };
-      shapeBBox.set(key, box);
-    }
-  }
-  const bb = box || { x: 0, y: 0, width: 16, height: 16 };
-  const strokePx = shape.isFilled ? Math.min(1, height * 0.1) : Math.max(1, height * 0.08);
-  const scale = Math.max(0.1, height - strokePx) / bb.height;
-  path.attr("transform", `scale(${scale}) translate(${-(bb.x + bb.width / 2)},${-(bb.y + bb.height / 2)})`).attr("stroke", shape.isFilled ? "white" : color).attr("stroke-width", strokePx / scale).attr("stroke-linejoin", "round");
-  return g;
-}
-var Swimmer = class _Swimmer extends PlotBase {
-  static {
-    this.type = "swimmer";
-  }
-  constructor(opts, api) {
-    super(opts, api);
-    this.type = _Swimmer.type;
-    this.components = { controls: {} };
-    if (this.opts.header) {
-      this.opts.header.style("padding-left", "7px").style("color", "rgb(85, 85, 85)").html("Swimmer Plot");
-    }
-  }
-  getState(appState) {
-    const config = appState.plots.find((p) => p.id === this.id);
-    if (!config) throw `No plot with id='${this.id}' found`;
-    return {
-      config,
-      // global mass filter combined with this plot's local filter (config.filter, set by the plot wrapper's filter UI)
-      termfilter: getCombinedTermFilter(appState, config.filter),
-      genome: appState.vocab.genome,
-      dslabel: appState.vocab.dslabel,
-      swimmer: appState.termdbConfig?.queries?.swimmer || {}
-    };
-  }
-  async init() {
-    const holder = this.opts.holder.append("div").attr("data-testid", "sjpp-swimmer-holder");
-    const controlsHolder = holder.append("div").style("display", "inline-block").style("vertical-align", "top");
-    const rightDiv = holder.append("div").style("display", "inline-block").style("vertical-align", "top");
-    this.dom = {
-      holder,
-      controlsHolder,
-      errdiv: rightDiv.append("div").attr("class", "sja_errorbar").style("display", "none"),
-      loadingDiv: rightDiv.append("div").style("display", "none").style("padding", "24px").text("Loading ..."),
-      plotDiv: rightDiv.append("div").attr("data-testid", "sjpp-swimmer-plot").style("padding", "10px"),
-      noteDiv: rightDiv.append("div").style("padding", "0 10px 10px 10px").style("font-size", ".9em").style("opacity", 0.7),
-      tip: new Menu({ padding: "5px" })
-    };
-    this.renderer = new SwimmerRenderer(
-      this.app,
-      this.dom,
-      (settings) => this.app.dispatch({ type: "plot_edit", id: this.id, config: { settings: { swimmer: settings } } })
-    );
-    const laneName = this.renderer.laneType?.name || "sample";
-    this.components = {
-      controls: await controlsInit({
-        app: this.app,
-        id: this.id,
-        holder: controlsHolder,
-        inputs: [
-          {
-            type: "term",
-            configKey: "term0",
-            chartType: "swimmer",
-            usecase: { target: "swimmer", detail: "term0" },
-            label: "Divide by",
-            title: "Split lanes into one panel per category",
-            vocabApi: this.app.vocabApi,
-            numericEditMenuVersion: ["discrete"],
-            defaultQ4fillTW: getT0T2defaultQ()
-          },
-          ...this.getPointTermInputs(),
-          {
-            label: "Sort lanes by",
-            type: "radio",
-            chartType: "swimmer",
-            settingsKey: "sortBy",
-            options: [
-              { label: "Lane length", value: "end" },
-              { label: `${laneName[0].toUpperCase()}${laneName.slice(1)} name`, value: "sample" }
-            ]
-          },
-          {
-            label: `Show ${laneName} names`,
-            type: "checkbox",
-            chartType: "swimmer",
-            settingsKey: "showSampleNames",
-            boxLabel: "Yes"
-          },
-          {
-            label: "Row height",
-            type: "number",
-            chartType: "swimmer",
-            settingsKey: "rowHeight",
-            min: 6,
-            max: 50
-          },
-          {
-            label: "Plot width",
-            type: "number",
-            chartType: "swimmer",
-            settingsKey: "plotWidth",
-            min: 200,
-            max: 3e3
-          }
-        ]
-      })
-    };
-    this.components.controls.on("downloadClick.swimmer", (event) => {
-      const svg = this.renderer.dom.svg;
-      if (!svg) return;
-      new DownloadMenu([{ name: "Swimmer plot", svg }], "swimmer_plot").show(event.clientX, event.clientY, event.target);
-    });
-  }
-  /** "Mark <event> by" term input, only when the ds has points linked to samples (e.g. CSF dots). the
-  term picker lists only terms of those samples' types */
-  getPointTermInputs() {
-    const sw = this.app.vocabApi.termdbConfig?.queries?.swimmer;
-    if (!sw?.pointSampleTypes?.length) return [];
-    const events = (sw.pointSampleEvents || []).map((k) => sw.events?.[k]?.label || k);
-    const what = [...new Set(events)].join(" / ") || "linked samples";
-    return [
-      {
-        type: "term",
-        configKey: "pointTerm",
-        chartType: "swimmer",
-        usecase: { target: "swimmer", detail: "pointTerm", sampleTypes: sw.pointSampleTypes },
-        label: `Mark ${what} by`,
-        title: `Color the ${what} markers by a variable of their own samples`,
-        vocabApi: this.app.vocabApi,
-        numericEditMenuVersion: ["discrete"],
-        defaultQ4fillTW: getT0T2defaultQ()
-      }
-    ];
-  }
-  async main() {
-    try {
-      this.toggleLoadingDiv();
-      this.dom.errdiv.style("display", "none");
-      const result = await this.fetchLanes();
-      this.toggleLoadingDiv("none");
-      this.renderer.update({
-        swimmer: this.state.swimmer,
-        settings: this.state.config.settings.swimmer,
-        lanes: result.lanes,
-        divideByOrder: result.divideByOrder,
-        term0: this.state.config.term0,
-        pointTerm: this.state.config.pointTerm,
-        pointCategoryOrder: result.pointCategoryOrder,
-        timeReference: result.timeReference
-      });
-    } catch (e) {
-      this.toggleLoadingDiv("none");
-      this.printError(e);
-    }
-  }
-  destroy() {
-    this.renderer?.destroy();
-  }
-  async fetchLanes() {
-    const body = {
-      genome: this.state.genome,
-      dslabel: this.state.dslabel,
-      filter: this.state.termfilter?.filter
-    };
-    if (this.state.config.term0) body.term0 = this.state.config.term0;
-    if (this.state.config.pointTerm) body.pointTerm = this.state.config.pointTerm;
-    const timeReference = this.state.config.settings.swimmer.timeReference;
-    if (timeReference) body.timeReference = timeReference;
-    return await fetchSwimmerLanes(body);
-  }
-};
-var SwimmerRenderer = class {
-  constructor(app, dom, onSettingsChange) {
-    /** client copy of ds.queries.swimmer: timeLabel, timeReferences, categories, events, terminalEvent,
-    pointSampleTypes, pointSampleEvents */
-    this.swimmer = {};
-    this.lanes = [];
-    /** divide-by category order from the server, only with term0 */
-    this.divideByOrder = [];
-    /** point category order from the server, only with pointTerm */
-    this.pointCategoryOrder = [];
-    /** annotations of point samples (e.g. CSF) shown on hover, fetched once per sample id */
-    this.pointSampleAnno = /* @__PURE__ */ new Map();
-    this.app = app;
-    this.dom = dom;
-    this.onSettingsChange = onSettingsChange;
-    const roots = Object.values(app.vocabApi?.termdbConfig?.sampleTypes || {}).filter((t) => t.parent_id == null);
-    if (roots.length == 1) this.laneType = roots[0];
-  }
-  update(d) {
-    this.swimmer = d.swimmer || {};
-    this.settings = d.settings;
-    this.lanes = d.lanes;
-    this.divideByOrder = d.divideByOrder || [];
-    this.term0 = d.term0;
-    this.pointTerm = d.pointTerm;
-    this.pointCategoryOrder = d.pointCategoryOrder || [];
-    this.timeReference = d.timeReference;
-    this.render();
-  }
-  /** whether a point is colored by the "mark by" term: a linked point of a markBy event */
-  isMarkedPoint(p) {
-    return !!this.pointTerm && p.sampleId !== void 0 && !!this.swimmer.pointSampleEvents?.includes(p.event);
-  }
-  /** with pointTerm: legend of the marked points' categories, in server order, then "No value" when some
-  marked point lacks a value. colors come from term.values when set there, else a default palette; the shape
-  is that of the point's event. user overrides apply as for the other legend sections */
-  getPointLegend(events) {
-    if (!this.pointTerm) return { byKey: /* @__PURE__ */ new Map(), entries: [] };
-    let hasNoValue = false;
-    let shape;
-    for (const lane of this.lanes) {
-      for (const p of lane.points) {
-        if (!this.isMarkedPoint(p)) continue;
-        shape ||= events.byKey.get(p.event)?.shape;
-        if (!p.category) hasNoValue = true;
-      }
-    }
-    const termColors = /* @__PURE__ */ new Map();
-    for (const [k, v] of Object.entries(this.pointTerm.term?.values || {}))
-      if (v.color) termColors.set(v.label || k, v.color);
-    const labels = [...this.pointCategoryOrder, ...hasNoValue ? [noValueCategory] : []];
-    const palette = getColors(Math.max(labels.length, 1));
-    const configured = {};
-    for (const label of labels)
-      configured[label] = {
-        label,
-        color: label == noValueCategory ? "#aaa" : termColors.get(label) || palette(label),
-        shape
-      };
-    return this.getLegend(configured, new Set(labels), this.settings.legend?.pointCategories);
-  }
-  /** lanes split by divide-by category, in server order. without term0 there is one unlabeled group.
-  a patient with several categories (a multivalue term, or samples in different categories) is in each
-  of its groups; lanes without a value are left out and counted in the note below the plot */
-  getGroups(lanes) {
-    if (!this.term0) return [{ lanes }];
-    const byLabel = new Map(this.divideByOrder.map((c) => [c, []]));
-    let noValue = 0;
-    for (const l of lanes) {
-      if (!l.lane.divideBy?.length) {
-        noValue++;
-        continue;
-      }
-      for (const c of l.lane.divideBy) {
-        if (!byLabel.has(c)) byLabel.set(c, []);
-        byLabel.get(c).push(l);
-      }
-    }
-    if (noValue) {
-      const name = this.term0.term?.name || "the divide-by variable";
-      const noun = noValue > 1 ? this.laneType?.plural_name || "samples" : this.laneType?.name || "sample";
-      this.dom.noteDiv.append("div").attr("data-testid", "sjpp-swimmer-novalue-note").text(`${noValue} ${noun} without a value for ${name} not shown`);
-    }
-    return [...byLabel].filter(([, l]) => l.length).map(([label, l]) => ({ label, lanes: l }));
-  }
-  /** lane end: the terminal event time when present, else the latest event or interval time */
-  getLaneEnd(lane) {
-    const terminal = this.swimmer.terminalEvent;
-    if (terminal) {
-      const t = lane.points.find((p) => p.event == terminal);
-      if (t) return t.time;
-    }
-    let end = 0;
-    for (const p of lane.points) end = Math.max(end, p.time);
-    for (const r of lane.ranges) end = Math.max(end, r.start, r.end ?? 0);
-    return end;
-  }
-  /** legend entries for interval categories or events: configured items first (in config order,
-  merged by label), then any key found in the data that the ds did not configure, with a default color. a
-  clipBeforeOrigin event with no drawn marker (e.g. birth in a treatment-referenced view) is left out. user
-  overrides (by label) take precedence over the ds config */
-  getLegend(configured, dataKeys, overrides = {}) {
-    const byKey = /* @__PURE__ */ new Map();
-    const entries = [];
-    const seenLabels = /* @__PURE__ */ new Set();
-    const unconfigured = [...dataKeys].filter((k) => !configured?.[k]);
-    const fallback = getColors(Math.max(unconfigured.length, 1));
-    const add = (key, item) => {
-      const label = item.label || key;
-      const o = overrides[label] || {};
-      const e = {
-        key,
-        label,
-        color: o.color || item.color || fallback(key),
-        shape: o.shape || item.shape || "filledCircle",
-        size: item.size || 1,
-        sampleTerms: item.sampleTerms,
-        hidden: !!o.hidden
-      };
-      byKey.set(key, e);
-      if (!seenLabels.has(e.label)) {
-        seenLabels.add(e.label);
-        entries.push(e);
-      }
-    };
-    for (const [key, item] of Object.entries(configured || {})) {
-      if (item.clipBeforeOrigin && !dataKeys.has(key)) continue;
-      add(key, item);
-    }
-    for (const key of unconfigured) add(key, {});
-    return { byKey, entries };
-  }
-  render() {
-    const s = this.settings;
-    const plotDiv = this.dom.plotDiv;
-    plotDiv.selectAll("*").remove();
-    this.dom.noteDiv.selectAll("*").remove();
-    delete this.dom.svg;
-    const ref = this.swimmer.timeReferences?.find(
-      (r) => r.key == this.timeReference
-    );
-    this.renderTimeReferences();
-    if (!this.lanes.length) {
-      plotDiv.append("div").style("opacity", 0.6).text(`No ${this.laneType?.plural_name || "samples"} with timeline data match the current filter`);
-      return;
-    }
-    const lanes = this.lanes.map((lane) => ({ lane, end: this.getLaneEnd(lane) }));
-    if (s.sortBy == "sample") lanes.sort((a, b) => a.lane.sample.localeCompare(b.lane.sample));
-    else lanes.sort((a, b) => b.end - a.end);
-    const categoryKeys = /* @__PURE__ */ new Set();
-    const eventKeys = /* @__PURE__ */ new Set();
-    for (const { lane } of lanes) {
-      for (const r of lane.ranges) categoryKeys.add(r.category);
-      for (const p of lane.points) if (!this.isClipped(p)) eventKeys.add(p.event);
-    }
-    const categories = this.getLegend(this.swimmer.categories, categoryKeys, s.legend?.categories);
-    const events = this.getLegend(this.swimmer.events, eventKeys, s.legend?.events);
-    const pointCategories = this.getPointLegend(events);
-    const fontSize = Math.min(12, Math.max(7, s.rowHeight - 3));
-    const axisHeight = 45;
-    const topPad = 10;
-    const rightPad = 20;
-    const laneGap = Math.max(1, Math.round(s.rowHeight * 0.1));
-    const barH = Math.max(2, s.rowHeight - laneGap);
-    const segH = Math.max(1, barH * 0.6);
-    const baseH = Math.max(1, barH * 0.25);
-    const markerH = Math.max(4, barH * 0.7);
-    const svg = plotDiv.append("svg").attr("data-testid", "sjpp-swimmer-svg");
-    this.dom.svg = svg;
-    const names = lanes.map((l) => l.lane.sample);
-    const labelWidth = s.showSampleNames ? getMaxTextWidth(svg, names, fontSize) + labelGap + 6 : 10;
-    const maxEnd = Math.max(...lanes.map((l) => l.end), 1);
-    let minTime = 0;
-    for (const { lane } of lanes) {
-      for (const p of lane.points) {
-        if (!this.isClipped(p)) minTime = Math.min(minTime, p.time);
-      }
-      for (const r of lane.ranges) minTime = Math.min(minTime, r.start);
-    }
-    const x = linear().domain([minTime < 0 ? minTime - (maxEnd - minTime) * 0.01 : 0, maxEnd * 1.02]).range([0, s.plotWidth]);
-    const ticks = x.ticks(Math.max(2, Math.floor(s.plotWidth / 90)));
-    const tip = this.dom.tip;
-    const timeLabel = ref?.timeLabel || this.swimmer.timeLabel || "Time";
-    const fmt = (d) => Number.isInteger(d) ? String(d) : d.toFixed(1);
-    const groups = this.getGroups(lanes);
-    if (!groups.length) {
-      svg.remove();
-      delete this.dom.svg;
-      plotDiv.append("div").style("opacity", 0.6).text(`No ${this.laneType?.plural_name || "samples"} have a value for the divide-by variable`);
-      return;
-    }
-    const titleH = groups[0].label !== void 0 ? 24 : 0;
-    const groupGap = 16;
-    let yOffset = topPad;
-    for (const group of groups) {
-      if (group.label !== void 0) {
-        svg.append("text").attr("data-testid", "sjpp-swimmer-group-title").attr("x", labelWidth).attr("y", yOffset + 15).attr("font-size", 14).attr("font-weight", 600).attr("fill", "#333").text(`${group.label} (n=${group.lanes.length})`);
-        yOffset += titleH;
-      }
-      const plotHeight = group.lanes.length * s.rowHeight;
-      const mainG = svg.append("g").attr("transform", `translate(${labelWidth},${yOffset})`);
-      mainG.append("g").selectAll("line").data(ticks).enter().append("line").attr("x1", (d) => x(d)).attr("x2", (d) => x(d)).attr("y1", 0).attr("y2", plotHeight).attr("stroke", "#e6e6e6").attr("shape-rendering", "crispEdges");
-      for (const [i, { lane, end }] of group.lanes.entries()) {
-        const y = i * s.rowHeight;
-        const g = mainG.append("g").attr("transform", `translate(0,${y})`);
-        const baseG = g.append("g");
-        baseG.append("rect").attr("x", x(0)).attr("y", (s.rowHeight - baseH) / 2).attr("width", Math.max(0, x(end) - x(0))).attr("height", baseH).attr("fill", "#999").attr("fill-opacity", 0.5).attr("shape-rendering", "crispEdges");
-        baseG.append("rect").attr("x", x(0)).attr("y", (s.rowHeight - barH) / 2).attr("width", Math.max(0, x(end) - x(0))).attr("height", barH).attr("fill", "transparent");
-        baseG.on("mouseover", (event) => {
-          tip.clear().show(event.clientX, event.clientY);
-          tip.d.append("div").style("font-weight", "bold").text(lane.sample);
-          tip.d.append("div").text(`Lane end: ${fmt(end)} (${timeLabel.toLowerCase()})`);
-        }).on("mouseout", () => tip.hide());
-        for (const r of lane.ranges) {
-          const entry = categories.byKey.get(r.category);
-          if (entry.hidden) continue;
-          const segEnd = r.end ?? Math.max(end, r.start);
-          const segTop = (s.rowHeight - segH) / 2;
-          const seg = g.append("g").on("mouseout", () => tip.hide());
-          seg.attr("fill-opacity", 0.75);
-          seg.append("rect").attr("x", x(r.start)).attr("y", segTop).attr("width", Math.max(1, x(segEnd) - x(r.start))).attr("height", segH).attr("fill", entry.color).attr("shape-rendering", "crispEdges");
-          if (r.end == null) {
-            const xe = x(r.start) + Math.max(1, x(segEnd) - x(r.start));
-            seg.append("path").attr(
-              "d",
-              `M${xe},${segTop - segH / 3}L${xe + segH * 0.8},${s.rowHeight / 2}L${xe},${segTop + segH * 1.33}Z`
-            ).attr("fill", entry.color);
-          }
-          seg.on("mouseover", (event) => {
-            tip.clear().show(event.clientX, event.clientY);
-            tip.d.append("div").style("font-weight", "bold").text(lane.sample);
-            tip.d.append("div").text(`${entry.label}${entry.label != r.category ? ` (${r.category})` : ""}`);
-            tip.d.append("div").text(
-              r.end == null ? `From ${fmt(r.start)}, ongoing (${timeLabel.toLowerCase()})` : `${fmt(r.start)} to ${fmt(r.end)} (${timeLabel.toLowerCase()})`
-            );
-          });
-        }
-        for (const p of lane.points) {
-          if (this.isClipped(p)) continue;
-          const entry = events.byKey.get(p.event);
-          if (entry.hidden) continue;
-          const mark = this.isMarkedPoint(p) ? pointCategories.byKey.get(p.category || noValueCategory) : void 0;
-          if (mark?.hidden) continue;
-          const dot = drawMarker(
-            g,
-            mark?.shape || entry.shape,
-            x(p.time),
-            s.rowHeight / 2,
-            markerH * entry.size,
-            mark?.color || entry.color
-          ).attr("data-event", p.event).on("mouseover", (event) => {
-            tip.clear().show(event.clientX, event.clientY);
-            tip.d.append("div").style("font-weight", "bold").text(lane.sample);
-            tip.d.append("div").text(`${entry.label}: ${fmt(p.time)} (${timeLabel.toLowerCase()})`);
-            if (mark) tip.d.append("div").text(`${this.pointTerm.term?.name}: ${mark.label}`);
-            if (p.sample) {
-              tip.d.append("div").text(`Sample: ${p.sample}`);
-              if (p.sampleId !== void 0 && entry.sampleTerms?.length)
-                this.showPointSampleAnno(tip, p.sampleId, entry.sampleTerms);
-              tip.d.append("div").style("font-size", "0.8em").style("opacity", 0.7).text("Click to open sample view");
-            }
-          }).on("mouseout", () => tip.hide());
-          if (p.sample && p.sampleId !== void 0) {
-            const sample = { sampleId: p.sampleId, sampleName: p.sample };
-            dot.attr("data-testid", "sjpp-swimmer-linked-point").attr("role", "button").attr("tabindex", 0).attr("aria-label", `Open sample view of ${p.sample}`).style("cursor", "pointer").on("click", () => {
-              tip.hide();
-              this.openSampleView(sample);
-            }).on("keydown", (event) => {
-              if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                this.openSampleView(sample);
-              }
-            });
-          }
-        }
-        if (s.showSampleNames) {
-          g.append("text").attr("x", -labelGap).attr("y", s.rowHeight / 2).attr("text-anchor", "end").attr("dominant-baseline", "central").attr("font-size", fontSize).attr("fill", "#333").attr("role", "button").attr("tabindex", 0).attr("aria-label", `Open sample view of ${lane.sample}`).style("cursor", "pointer").text(lane.sample).on("click", () => this.openSampleView({ sampleId: lane.sampleId, sampleName: lane.sample }, true)).on("keydown", (event) => {
-            if (event.key === "Enter" || event.key === " ") {
-              event.preventDefault();
-              this.openSampleView({ sampleId: lane.sampleId, sampleName: lane.sample }, true);
-            }
-          }).on("mouseover", (event) => {
-            tip.clear().show(event.clientX, event.clientY);
-            tip.d.append("div").text("Click to open sample view");
-          }).on("mouseout", () => tip.hide());
-        }
-      }
-      const axisG = mainG.append("g").attr("transform", `translate(0,${plotHeight + 2})`);
-      axisG.call(axisBottom(x).tickValues(ticks));
-      axisstyle({ axis: axisG, showline: true, fontsize: 11 });
-      axisG.append("text").attr("x", s.plotWidth / 2).attr("y", 34).attr("text-anchor", "middle").attr("font-size", 12).attr("fill", "#333").text(timeLabel);
-      yOffset += plotHeight + axisHeight + groupGap;
-    }
-    const legendHeight = this.renderLegend(
-      svg.append("g").attr("transform", `translate(${labelWidth + s.plotWidth + rightPad},${topPad})`),
-      categories.entries,
-      events.entries,
-      pointCategories.entries
-    );
-    svg.attr("width", labelWidth + s.plotWidth + rightPad + legendWidth).attr("height", Math.max(yOffset - groupGap, topPad + legendHeight));
-  }
-  /** returns the legend height. events linked to samples (e.g. "CSF sample") are listed last. with a "mark
-  by" term their markers take the term's category colors and shapes, so the event row has no icon and names
-  the term, and the term's categories follow, indented:
-    Events
-      Follow-up
-      CSF sample by <term name>
-        category1
-        category2 */
-  renderLegend(g, categories, events, pointCategories = []) {
-    const lineH = 18;
-    const indent = 20;
-    let y = 0;
-    const fit = (text, max) => text.length > max ? text.slice(0, max - 1) + "\u2026" : text;
-    const title = (text) => {
-      g.append("text").attr("y", y + 10).attr("font-size", 12).attr("font-weight", "bold").text(text);
-      y += lineH;
-    };
-    const item = (type, e, entries, drawIcon, opts = {}) => {
-      const x = opts.x || 0;
-      const max = Math.floor(26 * (legendWidth - x) / legendWidth);
-      const row = g.append("g").attr("transform", `translate(${x},${y})`).attr("data-testid", "sjpp-swimmer-legend-item").attr("data-legend-type", type).attr("role", "button").attr("tabindex", 0).attr("aria-label", `Edit legend item ${opts.label || e.label}`).style("cursor", "pointer").style("opacity", e.hidden ? 0.4 : 1);
-      const showMenu = (event) => this.showLegendMenu(event, type, e, entries, {
-        allowColor: opts.allowColor !== false,
-        allowShape: type != "categories" && opts.allowShape !== false
-      });
-      row.on("click", showMenu).on("keydown", (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          showMenu(event);
-        }
-      });
-      row.append("rect").attr("width", legendWidth - 20 - x).attr("height", lineH).attr("fill", "transparent");
-      drawIcon(row, e);
-      row.append("text").attr("x", 20).attr("y", 10).attr("font-size", 12).attr("fill", "#333").style("text-decoration", e.hidden ? "line-through" : "none").text(fit(opts.label || e.label, max));
-      if ((opts.label || e.label).length > max) row.append("title").text(opts.label || e.label);
-      y += lineH;
-    };
-    const rect = (row, e) => row.append("rect").attr("x", 0).attr("y", 3).attr("width", 14).attr("height", 8).attr("fill", e.color);
-    const marker = (row, e) => drawMarker(row, e.shape, 7, 7, Math.max(6, 12 * e.size), e.color);
-    if (categories.length) {
-      title("Intervals");
-      for (const e of categories) item("categories", e, categories, rect);
-      y += 8;
-    }
-    if (events.length) {
-      const linkedKeys = new Set(this.swimmer.pointSampleEvents || []);
-      const linked = events.filter((e) => linkedKeys.has(e.key));
-      const ordered = [...events.filter((e) => !linkedKeys.has(e.key)), ...linked];
-      const marked = this.pointTerm && pointCategories.length > 0;
-      title("Events");
-      for (const e of ordered) {
-        if (!marked || !linkedKeys.has(e.key)) {
-          item("events", e, ordered, marker);
-          continue;
-        }
-        item("events", e, ordered, () => {
-        }, {
-          allowColor: false,
-          allowShape: false,
-          label: `${e.label} by ${this.pointTerm.term?.name || ""}`
-        });
-      }
-      if (marked) {
-        for (const e of pointCategories) item("pointCategories", e, pointCategories, marker, { x: indent });
-      }
-      y += 8;
-    }
-    return y;
-  }
-  /** a clipBeforeOrigin event before time 0 (e.g. birth in a treatment-referenced view), not drawn */
-  isClipped(p) {
-    return p.time < 0 && !!this.swimmer.events?.[p.event]?.clipBeforeOrigin;
-  }
-  /** radio buttons to switch the time reference (e.g. birth, diagnosis, treatment start), above the plot. only
-  with two or more ds time references and onSettingsChange, which refetches the lanes */
-  renderTimeReferences() {
-    const refs = this.swimmer.timeReferences || [];
-    if (refs.length < 2 || !this.onSettingsChange) return;
-    const current = this.timeReference;
-    const holder = this.dom.plotDiv.append("div").attr("data-testid", "sjpp-swimmer-time-references").attr("role", "radiogroup").attr("aria-label", "Time from").style("margin-bottom", "8px");
-    holder.append("span").style("margin-right", "8px").style("opacity", 0.8).text("Time from:");
-    make_radios({
-      holder: holder.append("div").style("display", "inline-block"),
-      options: refs.map((r) => ({
-        label: r.label || r.key,
-        value: r.key,
-        checked: r.key == current,
-        testid: `sjpp-swimmer-time-reference-${r.key}`
-      })),
-      styles: { display: "inline-block", padding: "3px 10px 3px 0" },
-      // the lanes are refetched and the plot redrawn, these radios included
-      callback: (key) => this.onSettingsChange({ timeReference: key })
-    });
-  }
-  /** legend item menu, as in the scatter plot legend: hide/show, show only, show all, color, and shape for
-  events. "show only" and "show all" act within the item's own section (intervals, events or mark-by
-  categories). color and shape options are left out for an event whose markers are drawn by the mark-by term */
-  showLegendMenu(event, type, e, entries, opts) {
-    this.dom.tip.hide();
-    if (!this.legendMenu) this.legendMenu = new Menu({ padding: "0px" });
-    const menu = this.legendMenu;
-    const div = menu.clear().d.append("div");
-    const option = (text, edit) => div.append("div").attr("class", "sja_menuoption sja_sharp_border").text(text).on("click", () => {
-      menu.hide();
-      this.editLegend(type, edit());
-    });
-    option(e.hidden ? "Show" : "Hide", () => ({ [e.label]: { hidden: !e.hidden } }));
-    if (entries.length > 1)
-      option("Show only", () => Object.fromEntries(entries.map((x) => [x.label, { hidden: x.label != e.label }])));
-    if (entries.some((x) => x.hidden))
-      option("Show all", () => Object.fromEntries(entries.map((x) => [x.label, { hidden: false }])));
-    if (opts.allowColor)
-      div.append("div").attr("class", "sja_sharp_border").style("padding", "0px 10px").text("Color:").append("input").attr("type", "color").attr("value", rgb(e.color).formatHex()).on("change", (ev) => {
-        menu.hide();
-        this.editLegend(type, { [e.label]: { color: ev.target.value } });
-      });
-    if (opts.allowShape) {
-      div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Change shape").on("click", () => {
-        div.selectAll("*").remove();
-        shapeSelector(div, (index) => {
-          menu.hide();
-          this.editLegend(type, { [e.label]: { shape: Object.keys(shapes)[index] } });
-        });
-      });
-    }
-    menu.showunder(event.target);
-  }
-  /** remove the body-mounted menus and their body listeners */
-  destroy() {
-    this.dom.tip.destroy();
-    this.legendMenu?.destroy();
-  }
-  /** merge changes into the legend overrides, then save them through onSettingsChange or redraw locally */
-  editLegend(type, changes) {
-    const legend = structuredClone(
-      this.settings.legend || { categories: {}, events: {}, pointCategories: {} }
-    );
-    if (!legend[type]) legend[type] = {};
-    for (const [label, o] of Object.entries(changes)) legend[type][label] = { ...legend[type][label], ...o };
-    if (this.onSettingsChange) this.onSettingsChange({ legend });
-    else {
-      this.settings = { ...this.settings, legend };
-      this.render();
-    }
-  }
-  /** list annotations of a point's own sample (e.g. a CSF sample) in the open tooltip, using the same
-  single-sample query and value formatting as sample view. termIds comes from the event's sampleTerms in
-  the dataset config and sets which terms are shown and in what order. the table fills in only if the
-  tooltip still shows this point */
-  async showPointSampleAnno(tip, sampleId, termIds) {
-    const holder = tip.d.append("div").attr("data-sampleid", sampleId).style("margin", "4px 0");
-    holder.append("div").style("opacity", 0.6).text("Loading annotations ...");
-    let rows;
-    try {
-      rows = await this.getPointSampleAnno(sampleId, termIds);
-    } catch (e) {
-      rows = [];
-      console.warn("swimmer: cannot load sample annotations", e);
-    }
-    if (!holder.node()?.isConnected) return;
-    holder.selectAll("*").remove();
-    if (!rows.length) return;
-    const table = holder.append("table").style("border-spacing", "0 1px").style("font-size", "0.9em");
-    for (const r of rows) {
-      const tr = table.append("tr");
-      tr.append("td").style("padding-right", "8px").style("opacity", 0.7).text(r.label);
-      tr.append("td").text(r.value);
-    }
-  }
-  getPointSampleAnno(sampleId, termIds) {
-    const cacheKey = `${sampleId}	${termIds.join("	")}`;
-    let pr = this.pointSampleAnno.get(cacheKey);
-    if (!pr) {
-      pr = (async () => {
-        const data = await this.app.vocabApi.getSingleSampleData({ sampleId, term_ids: termIds });
-        if ("error" in data) throw data.error;
-        const rows = [];
-        for (const id of termIds.filter((id2) => data[id2])) {
-          const term = data[id].term;
-          const value = getTermValue(term, data);
-          if (value != null) rows.push({ label: term.name, value });
-        }
-        return rows;
-      })();
-      pr.catch(() => this.pointSampleAnno.delete(cacheKey));
-      this.pointSampleAnno.set(cacheKey, pr);
-    }
-    return pr;
-  }
-  /** withRelated: open the sample with its related samples (e.g. a patient lane shows the patient and
-  its primary/PDX/CSF samples as columns), as when the sample is picked in the sample view search box;
-  otherwise only this sample (e.g. a CSF dot). the sample view's swimmer lane uses the same time reference */
-  openSampleView(sample, withRelated = false) {
-    const config = { chartType: "sampleView", ...withRelated ? { sample } : { samples: [sample] } };
-    if (this.timeReference) config.swimmerTimeReference = this.timeReference;
-    this.app.dispatch({ type: "plot_create", config });
-  }
-};
-async function fetchSwimmerLanes(body) {
-  const result = await dofetch3("termdb/swimmer", { body });
-  if (typeof result == "string") throw result;
-  if (!result?.lanes) throw "invalid response from termdb/swimmer";
-  return result;
-}
-function getDefaultSwimmerSettings() {
-  return {
-    rowHeight: 20,
-    plotWidth: 800,
-    sortBy: "end",
-    showSampleNames: true,
-    legend: { categories: {}, events: {}, pointCategories: {} }
-  };
-}
-function getMaxTextWidth(svg, labels, fontSize) {
-  let max = 0;
-  for (const label of labels) {
-    const t = svg.append("text").attr("font-size", fontSize).text(label);
-    max = Math.max(max, t.node().getBBox().width);
-    t.remove();
-  }
-  return max;
-}
-async function getPlotConfig(opts, app) {
-  const settings = getDefaultSwimmerSettings();
-  const config = {
-    chartType: "swimmer",
-    settings: {
-      controls: { isOpen: false },
-      swimmer: settings
-    }
-  };
-  copyMerge(config, opts);
-  if (config.term0) config.term0 = await fillTermWrapper(config.term0, app.vocabApi);
-  if (config.pointTerm) config.pointTerm = await fillTermWrapper(config.pointTerm, app.vocabApi);
-  return config;
-}
-var swimmerInit = getCompInit(Swimmer);
-var componentInit = swimmerInit;
-export {
-  SwimmerRenderer,
-  componentInit,
-  fetchSwimmerLanes,
-  getDefaultSwimmerSettings,
-  getPlotConfig,
-  swimmerInit
-};
-//# sourceMappingURL=swimmer-2EJZH5PP.js.map