@sjcrh/proteinpaint-client 2.216.0 → 2.217.0

package/dist/swimmer-VPKSBV6V.js

@@ -0,0 +1,741 @@
+import {
+  getTermValue
+} from "./chunk-HFKZGMVV.js";
+import {
+  DownloadMenu,
+  PlotBase,
+  axisstyle,
+  controlsInit,
+  fillTermWrapper,
+  getCombinedTermFilter,
+  getT0T2defaultQ,
+  shapeSelector,
+  shapes
+} from "./chunk-NNDKYTUV.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-HWNQOADC.js";
+import {
+  Menu
+} from "./chunk-CNFTQSNE.js";
+import "./chunk-PLFPXOGX.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import {
+  dofetch3
+} from "./chunk-BIJOXCLN.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-L2WOLNZK.js";
+import "./chunk-AMW5LCUB.js";
+import {
+  axisBottom,
+  getColors
+} from "./chunk-ZPWBYHNE.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 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 ? 0.5 : 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
+      });
+    } 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;
+    return await fetchSwimmerLanes(body);
+  }
+};
+var SwimmerRenderer = class {
+  constructor(app, dom, onSettingsChange) {
+    /** client copy of ds.queries.swimmer: timeLabel, 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.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.
+  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",
+        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 || {})) 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;
+    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) 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 markerH = Math.max(4, barH * 0.7);
+    const svg = plotDiv.append("svg").attr("data-testid", "sjpp-swimmer-svg");
+    this.dom.svg = svg;
+    const labelWidth = s.showSampleNames ? getMaxTextWidth(
+      svg,
+      lanes.map((l) => l.lane.sample),
+      fontSize
+    ) + 12 : 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) 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 = 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})`);
+        g.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", "#f7f7f7").attr("stroke", "#999").attr("stroke-width", 0.5).attr("shape-rendering", "crispEdges").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.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) {
+          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,
+            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", -6).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, 12, 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;
+  }
+  /** 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) */
+  openSampleView(sample, withRelated = false) {
+    this.app.dispatch({
+      type: "plot_create",
+      config: { chartType: "sampleView", ...withRelated ? { sample } : { samples: [sample] } }
+    });
+  }
+};
+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-VPKSBV6V.js.map