@sjcrh/proteinpaint-client 2.219.1 → 2.220.0

package/dist/swimmer-Z6FUH4CD.js

@@ -0,0 +1,993 @@
+import {
+  getTermValue
+} from "./chunk-67MD4UES.js";
+import {
+  DataPointInteractions,
+  DownloadMenu,
+  PlotBase,
+  axisstyle,
+  controlsInit,
+  fillTermWrapper,
+  getCombinedTermFilter,
+  getT0T2defaultQ,
+  make_radios,
+  shapeSelector,
+  shapes,
+  termsettingInit
+} from "./chunk-PEKCVKJK.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-YR6EXI2K.js";
+import {
+  Menu
+} from "./chunk-CNFTQSNE.js";
+import "./chunk-RIHO7ZD5.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import {
+  dofetch3
+} from "./chunk-4TJO2DGU.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-MHWYRNGA.js";
+import "./chunk-JHLF2ZC2.js";
+import {
+  axisBottom,
+  getColors
+} from "./chunk-WJLRU5OF.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 {
+  create_default,
+  pointer_default
+} from "./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 getMarkerGeometry(shapeKey, height) {
+  const key = shapes[shapeKey] ? shapeKey : "filledCircle";
+  const shape = shapes[key];
+  const bb = shapeBBox.get(key) || { 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;
+  return {
+    shape,
+    strokePx,
+    scale,
+    transform: `scale(${scale}) translate(${-(bb.x + bb.width / 2)},${-(bb.y + bb.height / 2)})`,
+    halfWidth: (bb.width * scale + strokePx) / 2
+  };
+}
+function drawMarker(holder, shapeKey, cx, cy, height, color) {
+  const key = shapes[shapeKey] ? shapeKey : "filledCircle";
+  const g = holder.append("g").attr("transform", `translate(${cx},${cy})`);
+  const path = g.append("path").attr("d", shapes[key].path).attr("fill", color);
+  if (!shapeBBox.has(key)) {
+    const b = path.node().getBBox();
+    if (b.width && b.height) shapeBBox.set(key, { x: b.x, y: b.y, width: b.width, height: b.height });
+  }
+  const m = getMarkerGeometry(key, height);
+  path.attr("transform", m.transform).attr("stroke", m.shape.isFilled ? "white" : color).attr("stroke-width", m.strokePx / m.scale).attr("stroke-linejoin", "round");
+  return g;
+}
+function getMarkerIconHtml(shapeKey, color) {
+  const svg = create_default("svg").attr("width", 14).attr("height", 14).style("vertical-align", "middle");
+  drawMarker(svg, shapeKey, 7, 7, 12, color);
+  return svg.node().outerHTML;
+}
+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 } } }),
+      (pointTerm) => this.app.dispatch({ type: "plot_edit", id: this.id, config: { pointTerm } })
+    );
+    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, onPointTermChange) {
+    /** 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();
+    /** hover and click handling of each divide-by panel, replaced on every render */
+    this.interactions = [];
+    this.app = app;
+    this.dom = dom;
+    this.onSettingsChange = onSettingsChange;
+    this.onPointTermChange = onPointTermChange;
+    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;
+    for (const i of this.interactions) i.destroy();
+    this.interactions = [];
+    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})`);
+      const markers = [];
+      const rows = [];
+      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 row = { lane, end, segments: [] };
+        rows.push(row);
+        g.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");
+        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");
+          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");
+          const xe = x(r.start) + Math.max(1, x(segEnd) - x(r.start));
+          row.segments.push({ r, entry, x0: x(r.start), x1: r.end == null ? xe + segH * 0.8 : xe });
+          if (r.end == null) {
+            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);
+          }
+        }
+        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 shape = mark?.shape || entry.shape;
+          const color = mark?.color || entry.color;
+          const height = markerH * entry.size;
+          const cx = x(p.time);
+          const dot = drawMarker(g, shape, cx, s.rowHeight / 2, height, color).attr("data-event", p.event);
+          const { halfWidth } = getMarkerGeometry(shape, height);
+          markers.push({ p, lane, entry, mark, shape, color, x: cx, y: y + s.rowHeight / 2, height, halfWidth });
+          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}`).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());
+        }
+      }
+      this.attachInteractions(mainG, markers, rows, {
+        plotWidth: s.plotWidth,
+        rowHeight: s.rowHeight,
+        segH,
+        barH,
+        x,
+        timeLabel,
+        fmt
+      });
+      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 is
+  followed by the term as a pill, as in the controls, then the term's categories, indented:
+    Events
+      Follow-up
+      Mark 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;
+        }
+        g.append("text").attr("x", 20).attr("y", y + 10).attr("font-size", 12).attr("fill", "#333").style("opacity", e.hidden ? 0.4 : 1).style("text-decoration", e.hidden ? "line-through" : "none").text(`Mark ${e.label} by`);
+        y += lineH;
+        const name = this.pointTerm.term?.name || "";
+        const pill = g.append("g").attr("transform", `translate(${indent},${y})`).attr("data-testid", "sjpp-swimmer-legend-pointterm").attr("role", "button").attr("tabindex", 0).attr("aria-label", `Edit ${name}`).style("cursor", "pointer");
+        const pillRect = pill.append("rect").attr("rx", 6).attr("height", 20).attr("fill", "#cfe2f3");
+        const max = Math.floor(26 * (legendWidth - indent - 12) / legendWidth);
+        const pillText = pill.append("text").attr("x", 6).attr("y", 14).attr("font-size", 12).text(fit(name, max));
+        if (name.length > max) pill.append("title").text(name);
+        pillRect.attr("width", (pillText.node().getComputedTextLength() || name.length * 7) + 12);
+        const showMenu = () => this.showPointTermMenu(pill.node(), e, ordered);
+        pill.on("click", showMenu).on("keydown", (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            showMenu();
+          }
+        });
+        y += 24;
+      }
+      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;
+    this.addLegendOptions(menu, menu.clear().d.append("div"), type, e, entries, opts);
+    menu.showunder(event.target);
+  }
+  /** menu of the "mark by" term pill in the legend: the edit, replace and remove options of the controls'
+  "Mark ... by" pill, then the legend options of the marked event (e), without color or shape */
+  async showPointTermMenu(node, e, entries) {
+    this.dom.tip.hide();
+    this.legendMenu?.hide();
+    if (!this.pointTermMenu) this.pointTermMenu = new Menu({ padding: "0px" });
+    const menu = this.pointTermMenu;
+    if (!this.pointTermPill)
+      this.pointTermPill = termsettingInit({
+        vocabApi: this.app.vocabApi,
+        renderAs: "none",
+        tip: menu,
+        menuOptions: "*",
+        usecase: { target: "swimmer", detail: "pointTerm", sampleTypes: this.swimmer.pointSampleTypes },
+        numericEditMenuVersion: ["discrete"],
+        defaultQ4fillTW: getT0T2defaultQ(),
+        callback: (tw) => {
+          menu.hide();
+          this.onPointTermChange?.(tw);
+        }
+      });
+    const pointTerm = structuredClone(this.pointTerm);
+    delete pointTerm.tw;
+    await this.pointTermPill.main(pointTerm);
+    this.pointTermPill.showMenu(null, node);
+    this.addLegendOptions(menu, menu.d.append("div"), "events", e, entries, { allowColor: false, allowShape: false });
+  }
+  /** legend options of entry e, appended to div inside menu */
+  addLegendOptions(menu, div, type, e, entries, opts) {
+    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] } });
+        });
+      });
+    }
+  }
+  /** remove the body-mounted menus and their body listeners */
+  destroy() {
+    for (const i of this.interactions) i.destroy();
+    this.dom.tip.destroy();
+    this.legendMenu?.destroy();
+    this.pointTermPill?.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();
+    }
+  }
+  /** whether a marker opens a sample view on click: a point linked to its own sample (e.g. a CSF dot) */
+  isLinked(d) {
+    return !!d.p.sample && d.p.sampleId !== void 0;
+  }
+  /** hover and click of a panel, through a transparent cover over its lanes. the shared DataPointInteractions
+  hit-tests the markers; when none is under the cursor, a hover shows the interval segments or the base bar
+  under it. a marker is hit when the cursor is within its drawn left and right edges, anywhere in its lane's
+  row, so only markers whose shapes overlap at the cursor are listed together. a click on several
+  linked markers opens a menu to pick the sample to view */
+  attachInteractions(mainG, markers, rows, o) {
+    const tip = this.dom.tip;
+    const time = `(${o.timeLabel.toLowerCase()})`;
+    const hoverLayer = mainG.append("g").style("pointer-events", "none");
+    const minX = markers.reduce((v, d) => Math.min(v, d.x - d.halfWidth), 0);
+    const maxX = rows.reduce(
+      (right, row) => row.segments.reduce((v, segment) => Math.max(v, segment.x1), right),
+      markers.reduce((v, d) => Math.max(v, d.x + d.halfWidth), o.plotWidth)
+    );
+    const cover = mainG.append("rect").attr("data-testid", "sjpp-swimmer-cover").attr("x", minX).attr("width", maxX - minX).attr("height", rows.length * o.rowHeight).attr("fill", "transparent").style("pointer-events", "all");
+    const getCursor = (event) => {
+      const [mx, my] = pointer_default(event, mainG.node());
+      const i = Math.floor(my / o.rowHeight);
+      return { mx, my, i, cy: (i + 0.5) * o.rowHeight };
+    };
+    let hovered = [];
+    let cursorRow = -1;
+    const dpi = new DataPointInteractions({
+      cover,
+      hoverLayer,
+      hoverTip: tip,
+      points: markers,
+      getX: (d) => d.x,
+      getY: (d) => d.y,
+      toLocalCoords: (event) => {
+        const { mx, cy, i } = getCursor(event);
+        cursorRow = i;
+        return [mx, cy];
+      },
+      hitRadius: Math.max(0, ...markers.map((d) => d.halfWidth)),
+      perDotRadius: (d) => d.halfWidth,
+      // only markers of the cursor's row: a large marker (event size of about 3 or more) would otherwise be
+      // within reach from the neighboring lanes. so the hit distance is the horizontal one
+      isHidden: (d) => Math.floor(d.y / o.rowHeight) !== cursorRow,
+      // outline of the marker's shape, 2px larger on each side
+      toHoverSpec: (d) => {
+        const m = getMarkerGeometry(d.shape, d.height + 4);
+        return {
+          path: m.shape.path,
+          transform: `translate(${d.x},${d.y}) ${m.transform}`,
+          stroke: "black",
+          fill: "none"
+        };
+      },
+      itemNoun: "event",
+      renderSingleHoverTooltip: (d, container) => this.renderMarkerTip(d, container, time, o.fmt),
+      buildMultiHitTableData: (dots) => this.buildMarkersTable(dots, o.timeLabel, o.fmt),
+      onHover: (dots) => {
+        hovered = dots;
+        cover.style("cursor", dots.some((d) => this.isLinked(d)) ? "pointer" : "default");
+      },
+      onSingleClick: (d, event, ctx) => this.openMarkerSamples([d], event, ctx, time, o.fmt),
+      onMultiClick: (dots, event, ctx) => this.openMarkerSamples(dots, event, ctx, time, o.fmt)
+    });
+    dpi.attach();
+    this.interactions.push(dpi);
+    cover.on("mousemove.lane", (event) => {
+      if (hovered.length || dpi.clickMenu.d.style("display") != "none") return;
+      const { mx, my, i, cy } = getCursor(event);
+      const row = rows[i];
+      if (!row) return tip.hide();
+      const dy = Math.abs(my - cy);
+      const segments = row.segments.filter((sg) => {
+        if (mx < sg.x0 || mx > sg.x1) return false;
+        if (sg.r.end != null) return dy <= o.segH / 2;
+        const arrowStart = sg.x1 - o.segH * 0.8;
+        if (mx < arrowStart) return dy <= o.segH / 2;
+        const fraction = (sg.x1 - mx) / (o.segH * 0.8);
+        return my >= cy - (o.segH / 2 + o.segH / 3) * fraction && my <= cy + (o.segH * 1.33 - o.segH / 2) * fraction;
+      });
+      const onBase = dy <= o.barH / 2 && mx >= o.x(0) && mx <= o.x(row.end);
+      if (!segments.length && !onBase) return tip.hide();
+      tip.clear();
+      tip.d.append("div").style("font-weight", "bold").text(row.lane.sample);
+      for (const { r, entry } of segments) {
+        const div = tip.d.append("div").attr("data-testid", "sjpp-swimmer-tip-interval");
+        div.append("svg").attr("width", 14).attr("height", 10).style("margin-right", "5px").append("rect").attr("y", 1).attr("width", 14).attr("height", 8).attr("fill", entry.color);
+        div.append("span").text(`${entry.label}${entry.label != r.category ? ` (${r.category})` : ""}`);
+        tip.d.append("div").style("margin-left", "19px").text(
+          r.end == null ? `From ${o.fmt(r.start)}, ongoing ${time}` : `${o.fmt(r.start)} to ${o.fmt(r.end)} ${time}`
+        );
+      }
+      if (!segments.length) tip.d.append("div").text(`Lane end: ${o.fmt(row.end)} ${time}`);
+      tip.show(event.clientX, event.clientY);
+    });
+  }
+  /** hover tooltip of one marker: the lane name, the event with its legend icon, and a linked point's sample
+  with its annotations */
+  renderMarkerTip(d, container, time, fmt) {
+    const { p, lane, entry, mark } = d;
+    container.append("div").style("font-weight", "bold").text(lane.sample);
+    const row = container.append("div").attr("data-testid", "sjpp-swimmer-tip-event");
+    row.append("span").style("margin-right", "5px").html(getMarkerIconHtml(d.shape, d.color));
+    row.append("span").text(`${entry.label}: ${fmt(p.time)} ${time}`);
+    if (mark) container.append("div").text(`${this.pointTerm.term?.name}: ${mark.label}`);
+    if (!p.sample) return;
+    container.append("div").text(`Sample: ${p.sample}`);
+    if (p.sampleId === void 0) return;
+    if (entry.sampleTerms?.length) this.showPointSampleAnno(container, p.sampleId, entry.sampleTerms);
+    container.append("div").style("font-size", "0.8em").style("opacity", 0.7).text("Click to open sample view");
+  }
+  /** multi-hit hover table of overlapping markers, one row per marker with its legend icon */
+  buildMarkersTable(dots, timeLabel, fmt) {
+    const hasSample = dots.some((d) => d.p.sample);
+    const hasMark = dots.some((d) => d.mark);
+    const columns = [
+      { label: "" },
+      { label: "Event" },
+      { label: timeLabel, sortable: true },
+      ...hasMark ? [{ label: this.pointTerm.term?.name || "" }] : [],
+      ...hasSample ? [{ label: "Sample" }] : []
+    ];
+    const rows = dots.map((d) => [
+      { html: getMarkerIconHtml(d.shape, d.color) },
+      { value: d.entry.label },
+      { value: fmt(d.p.time) },
+      ...hasMark ? [{ value: d.mark?.label || "" }] : [],
+      ...hasSample ? [{ value: d.p.sample || "" }] : []
+    ]);
+    return { columns, rows };
+  }
+  /** click on markers: opens the sample view of the one linked marker, or a menu to pick one of several */
+  openMarkerSamples(dots, event, ctx, time, fmt) {
+    const linked = dots.filter((d) => this.isLinked(d));
+    if (linked.length < 2) {
+      ctx.dismiss();
+      if (linked.length) this.openSampleView({ sampleId: linked[0].p.sampleId, sampleName: linked[0].p.sample });
+      return;
+    }
+    const menu = ctx.clickMenu;
+    menu.clear();
+    menu.d.append("div").style("padding", "5px 10px").style("opacity", 0.7).text("Open sample view of");
+    for (const d of linked) {
+      const sample = { sampleId: d.p.sampleId, sampleName: d.p.sample };
+      const option = menu.d.append("div").attr("class", "sja_menuoption sja_sharp_border").attr("data-testid", "sjpp-swimmer-sample-choice").attr("role", "button").attr("tabindex", 0).on("click", () => {
+        menu.hide();
+        this.openSampleView(sample);
+      }).on("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          menu.hide();
+          this.openSampleView(sample);
+        }
+      });
+      option.append("span").style("margin-right", "5px").html(getMarkerIconHtml(d.shape, d.color));
+      option.append("span").text(`${d.p.sample} (${d.entry.label}: ${fmt(d.p.time)} ${time})`);
+    }
+    menu.show(event.clientX, event.clientY);
+  }
+  /** list annotations of a point's own sample (e.g. a CSF sample) in container of 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(container, sampleId, termIds) {
+    const holder = container.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-Z6FUH4CD.js.map