@sjcrh/proteinpaint-client 2.206.1 → 2.207.0

package/dist/profileForms-Z4Y55OQY.js

@@ -0,0 +1,941 @@
+import {
+  getDefaultProfilePlotSettings,
+  getProfilePlotConfig,
+  profilePlot
+} from "./chunk-GJ6JKPEY.js";
+import {
+  Tabs,
+  axisstyle,
+  fillTermWrapper,
+  fillTwLst
+} from "./chunk-NQDF3U2C.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-CCYVGZGI.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-N7DVQTPC.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import {
+  dofetch3
+} from "./chunk-GRVO7RW4.js";
+import "./chunk-7CJKL3LK.js";
+import "./chunk-HZ3TCGBK.js";
+import "./chunk-IZUYLFOX.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-7X6NF7NI.js";
+import "./chunk-W5J3LTYS.js";
+import {
+  axisBottom,
+  axisLeft,
+  axisRight,
+  axisTop,
+  line_default
+} from "./chunk-Z2ZITHT4.js";
+import {
+  band,
+  linear
+} from "./chunk-4OLM3KSB.js";
+import "./chunk-FXQXCOII.js";
+import {
+  roundValueAuto
+} from "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import {
+  hsl
+} from "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-HS5PO5ZQ.js";
+
+// plots/profile/renderImpressionThermometer.ts
+var IMPRESSION_MAX_SCORE = 10;
+var FALLBACK_COLOR = "#888";
+var POC_FILL = "#9e9e9e";
+function impressionTestIdSuffix(groupLabel) {
+  return groupLabel.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+var HOVER_MS = 140;
+function hoverFill(fill) {
+  const c = hsl(fill);
+  c.l = c.l > 0.6 ? c.l - 0.14 : c.l + 0.14;
+  return { on: { fill: c.formatHex() }, off: { fill } };
+}
+var SVG_W = 140;
+var TUBE_W = 46;
+var TUBE_H = 300;
+var TUBE_TOP = 24;
+var TUBE_BOTTOM = TUBE_TOP + TUBE_H;
+var CENTER_X = SVG_W / 2;
+var TUBE_HALF = TUBE_W / 2;
+var BAR_W = 12;
+var BULB_R = 39;
+var NECK_R = 6;
+if (!(BULB_R > TUBE_HALF))
+  throw new Error("impression thermometer geometry: BULB_R must exceed TUBE_W/2 for a tangential neck");
+if (!(BULB_R > BAR_W))
+  throw new Error("impression thermometer geometry: BULB_R must exceed BAR_W for the bar to meet the bulb");
+var NECK_DY = Math.sqrt((BULB_R + NECK_R) ** 2 - (TUBE_HALF + NECK_R) ** 2);
+var BULB_CY = TUBE_BOTTOM + NECK_DY;
+var BULB_BOTTOM = BULB_CY + BULB_R;
+var SVG_H = Math.ceil(BULB_BOTTOM) + 12;
+var TUBE_X = CENTER_X - TUBE_HALF;
+var CAP_Y = TUBE_TOP + TUBE_HALF;
+var yScale = linear().domain([0, IMPRESSION_MAX_SCORE]).range([TUBE_BOTTOM, TUBE_TOP]);
+var yOf = (rating) => yScale(rating);
+var round = (n) => Math.round(n * 1e3) / 1e3;
+function zoneExtent(z, i, count) {
+  return {
+    top: i === count - 1 ? TUBE_TOP : yOf(z.max),
+    bottom: i === 0 ? BULB_BOTTOM : yOf(z.min - 1)
+  };
+}
+function vesselPath() {
+  const xL = TUBE_X;
+  const xR = TUBE_X + TUBE_W;
+  const neckY = TUBE_BOTTOM;
+  const tx = BULB_R * (TUBE_HALF + NECK_R) / (BULB_R + NECK_R);
+  const ty = BULB_CY - BULB_R * NECK_DY / (BULB_R + NECK_R);
+  return `M ${xL} ${CAP_Y} A ${TUBE_HALF} ${TUBE_HALF} 0 0 1 ${xR} ${CAP_Y} L ${xR} ${neckY} A ${NECK_R} ${NECK_R} 0 0 0 ${round(CENTER_X + tx)} ${round(ty)} A ${BULB_R} ${BULB_R} 0 1 1 ${round(CENTER_X - tx)} ${round(ty)} A ${NECK_R} ${NECK_R} 0 0 0 ${xL} ${neckY} Z`;
+}
+function barPath(x, yTop, w, yBottom) {
+  const r = w / 2;
+  return `M ${x} ${yBottom} L ${x} ${yTop + r} A ${r} ${r} 0 0 1 ${x + w} ${yTop + r} L ${x + w} ${yBottom} Z`;
+}
+var BAR_JOIN_Y = BULB_CY - Math.sqrt(BULB_R ** 2 - BAR_W ** 2);
+function liquidPath(yTop, half) {
+  const r = BAR_W / 2;
+  const dir = half === "left" ? -1 : 1;
+  const colOuter = CENTER_X + dir * BAR_W;
+  const domeY = yTop + r;
+  const domeSweep = half === "left" ? 0 : 1;
+  const bulbSweep = half === "left" ? 0 : 1;
+  return `M ${CENTER_X} ${round(domeY)} A ${r} ${r} 0 0 ${domeSweep} ${colOuter} ${round(domeY)} L ${colOuter} ${round(BAR_JOIN_Y)} A ${BULB_R} ${BULB_R} 0 0 ${bulbSweep} ${CENTER_X} ${round(BULB_BOTTOM)} L ${CENTER_X} ${round(domeY)} Z`;
+}
+function renderImpressionThermometer(a) {
+  const maxScore = IMPRESSION_MAX_SCORE;
+  const scColor = a.colors?.sc || FALLBACK_COLOR;
+  const scMedian = a.sc?.median ?? null;
+  const scTotal = a.sc?.total || 0;
+  const pocMedian = a.poc?.median ?? null;
+  const pocTotal = a.poc?.total || 0;
+  const svg = a.holder.append("svg").attr("data-testid", `sjpp-profileForms-thermometer-${impressionTestIdSuffix(a.groupLabel)}`).attr("width", SVG_W).attr("height", SVG_H);
+  const root = svg.append("g");
+  const defs = root.append("defs");
+  const vessel = vesselPath();
+  const sortedZones = [...a.zones].sort((z1, z2) => z1.min - z2.min);
+  const sheenId = `${a.id}-liquid-sheen`;
+  const sheen = defs.append("linearGradient").attr("id", sheenId).attr("x1", "0").attr("y1", "0").attr("x2", "0").attr("y2", "1");
+  sheen.append("stop").attr("offset", "0%").attr("stop-color", "#fff").attr("stop-opacity", 0.04);
+  sheen.append("stop").attr("offset", "45%").attr("stop-color", "#fff").attr("stop-opacity", 0.07);
+  sheen.append("stop").attr("offset", "100%").attr("stop-color", "#000").attr("stop-opacity", 0.1);
+  const barGlossId = `${a.id}-bar-gloss`;
+  const barGloss = defs.append("linearGradient").attr("id", barGlossId).attr("x1", "0").attr("y1", "0").attr("x2", "1").attr("y2", "0");
+  barGloss.append("stop").attr("offset", "0%").attr("stop-color", "#fff").attr("stop-opacity", 0.04);
+  barGloss.append("stop").attr("offset", "20%").attr("stop-color", "#fff").attr("stop-opacity", 0.2);
+  barGloss.append("stop").attr("offset", "38%").attr("stop-color", "#fff").attr("stop-opacity", 0.03);
+  barGloss.append("stop").attr("offset", "100%").attr("stop-color", "#000").attr("stop-opacity", 0.18);
+  const innerShadeId = `${a.id}-inner-shade`;
+  const innerShade = defs.append("linearGradient").attr("id", innerShadeId).attr("gradientUnits", "userSpaceOnUse").attr("x1", CENTER_X - BULB_R).attr("y1", 0).attr("x2", CENTER_X + BULB_R).attr("y2", 0);
+  innerShade.append("stop").attr("offset", "0%").attr("stop-color", "#000").attr("stop-opacity", 0.22);
+  innerShade.append("stop").attr("offset", "16%").attr("stop-color", "#000").attr("stop-opacity", 0);
+  innerShade.append("stop").attr("offset", "84%").attr("stop-color", "#000").attr("stop-opacity", 0);
+  innerShade.append("stop").attr("offset", "100%").attr("stop-color", "#000").attr("stop-opacity", 0.26);
+  const bulbShadeId = `${a.id}-bulb-shade`;
+  const shade = defs.append("radialGradient").attr("id", bulbShadeId).attr("cx", "50%").attr("cy", "50%").attr("r", "50%");
+  shade.append("stop").attr("offset", "55%").attr("stop-color", "#000").attr("stop-opacity", 0);
+  shade.append("stop").attr("offset", "100%").attr("stop-color", "#000").attr("stop-opacity", 0.3);
+  const bulbGlossId = `${a.id}-bulb-gloss`;
+  const gloss = defs.append("radialGradient").attr("id", bulbGlossId).attr("cx", "36%").attr("cy", "30%").attr("r", "45%");
+  gloss.append("stop").attr("offset", "0%").attr("stop-color", "#fff").attr("stop-opacity", 0.6);
+  gloss.append("stop").attr("offset", "70%").attr("stop-color", "#fff").attr("stop-opacity", 0.06);
+  gloss.append("stop").attr("offset", "100%").attr("stop-color", "#fff").attr("stop-opacity", 0);
+  const vesselClipId = `${a.id}-vessel-clip`;
+  defs.append("clipPath").attr("id", vesselClipId).append("path").attr("d", vessel);
+  const inVessel = () => root.append("g").attr("clip-path", `url(#${vesselClipId})`);
+  const boxX = CENTER_X - BULB_R;
+  const boxW = 2 * BULB_R;
+  const boxY = TUBE_TOP;
+  const boxH = BULB_BOTTOM - TUBE_TOP;
+  const trackG = inVessel();
+  sortedZones.forEach((z, i) => {
+    const { top, bottom } = zoneExtent(z, i, sortedZones.length);
+    trackG.append("rect").attr("class", "impression-zone").attr("x", boxX).attr("y", top).attr("width", boxW).attr("height", bottom - top).attr("fill", z.color).attr("opacity", 0.3);
+  });
+  const liquidG = inVessel();
+  const scX = CENTER_X - BAR_W;
+  const pocX = CENTER_X;
+  if (scMedian != null) {
+    const scFill = liquidG.append("path").attr("class", "sc-fill").attr("data-testid", "sjpp-profileForms-sc-fill").attr("d", liquidPath(yOf(scMedian), "left")).attr("fill", scColor).style("transition", `fill ${HOVER_MS}ms ease-out`);
+    a.attachTip(
+      scFill,
+      `Site Coordinator median: ${scMedian} (n=${scTotal} ${scTotal === 1 ? "SC" : "SCs"})`,
+      hoverFill(scColor)
+    );
+  }
+  if (pocMedian != null) {
+    const pocFill = liquidG.append("path").attr("class", "poc-fill").attr("data-testid", "sjpp-profileForms-poc-fill").attr("d", liquidPath(yOf(pocMedian), "right")).attr("fill", POC_FILL).style("transition", `fill ${HOVER_MS}ms ease-out`);
+    a.attachTip(pocFill, `POC median: ${pocMedian} (n=${pocTotal} staff responses)`, hoverFill(POC_FILL));
+  }
+  const overlay = () => inVessel().attr("pointer-events", "none");
+  const wet = overlay();
+  const columns = [];
+  if (scMedian != null) columns.push({ x: scX, median: scMedian });
+  if (pocMedian != null) columns.push({ x: pocX, median: pocMedian });
+  for (const c of columns) {
+    const d = barPath(c.x, yOf(c.median), BAR_W, BAR_JOIN_Y);
+    wet.append("path").attr("class", "liquid-gloss").attr("d", d).attr("fill", `url(#${sheenId})`);
+    wet.append("path").attr("class", "liquid-gloss").attr("d", d).attr("fill", `url(#${barGlossId})`);
+  }
+  const bulbShading = overlay();
+  bulbShading.append("circle").attr("cx", CENTER_X).attr("cy", BULB_CY).attr("r", BULB_R).attr("fill", `url(#${bulbShadeId})`);
+  bulbShading.append("circle").attr("cx", CENTER_X).attr("cy", BULB_CY).attr("r", BULB_R).attr("fill", `url(#${bulbGlossId})`);
+  overlay().append("rect").attr("x", boxX).attr("y", boxY).attr("width", boxW).attr("height", boxH).attr("fill", `url(#${innerShadeId})`);
+  root.append("path").attr("class", "vessel-outline").attr("d", vessel).attr("fill", "none").attr("stroke", "#444").attr("stroke-width", 2).attr("pointer-events", "none");
+  const ratings = [];
+  for (let r = 1; r <= maxScore; r++) ratings.push(r);
+  const axis = root.append("g").attr("transform", `translate(${TUBE_X}, 0)`).call(
+    axisLeft(yScale).tickValues(ratings).tickFormat((d) => String(d)).tickSize(-5).tickPadding(8)
+  );
+  axisstyle({ axis, showline: false, color: "#333" });
+  root.append("text").attr("transform", `translate(${TUBE_X - 32}, ${TUBE_TOP + TUBE_H / 2}) rotate(-90)`).attr("text-anchor", "middle").attr("font-size", "0.9rem").attr("font-weight", "bold").text(a.ratingAxisLabel);
+}
+
+// plots/profile/renderResponseDistribution.ts
+var POC_COLUMN_FILL = "#bdbdbd";
+var AXIS_COLOR = "#333";
+var POC_COLUMN_STROKE = "#616161";
+var SC_POINT_R = 5;
+var MARGIN = { top: 24, right: 64, bottom: 52, left: 64 };
+var PLOT_W = 300;
+var PLOT_H = 260;
+function renderResponseDistribution(a) {
+  const maxScore = a.maxScore;
+  const scColor = a.colors?.sc || "#888";
+  const ratings = [];
+  for (let r = 1; r <= maxScore; r++) ratings.push(r);
+  const scByRating = {};
+  for (const d of a.scDistribution || []) scByRating[d.rating] = d;
+  const pocByRating = {};
+  for (const d of a.pocDistribution || []) pocByRating[d.rating] = d;
+  const scTotal = (a.scDistribution || []).reduce((s, d) => s + (d.count || 0), 0);
+  const maxScCount = Math.max(1, ...ratings.map((r) => scByRating[r]?.count || 0));
+  const maxPocCount = Math.max(1, ...ratings.map((r) => pocByRating[r]?.count || 0));
+  const svgW = MARGIN.left + PLOT_W + MARGIN.right;
+  const svgH = MARGIN.top + PLOT_H + MARGIN.bottom;
+  const svg = a.holder.append("svg").attr("data-testid", `sjpp-profileForms-distribution-${impressionTestIdSuffix(a.groupLabel)}`).attr("width", svgW).attr("height", svgH);
+  const plot = svg.append("g").attr("transform", `translate(${MARGIN.left}, ${MARGIN.top})`);
+  const HEADROOM = 1.15;
+  const x = band().domain(ratings.map(String)).range([0, PLOT_W]).padding(0.2);
+  const yLeft = linear().domain([0, maxScCount * HEADROOM]).range([PLOT_H, 0]).nice();
+  const yRight = linear().domain([0, maxPocCount * HEADROOM]).range([PLOT_H, 0]).nice();
+  const bw = x.bandwidth();
+  const step = x.step();
+  for (const z of a.zones) {
+    const cMin = x(String(z.min));
+    const cMax = x(String(z.max));
+    if (cMin == null || cMax == null) continue;
+    const zStart = Math.max(0, cMin + bw / 2 - step / 2);
+    const zEnd = Math.min(PLOT_W, cMax + bw / 2 + step / 2);
+    plot.append("rect").attr("class", "impression-zone").attr("x", zStart).attr("y", 0).attr("width", zEnd - zStart).attr("height", PLOT_H).attr("fill", z.color).attr("opacity", 0.3);
+  }
+  for (const r of ratings) {
+    const bin = pocByRating[r];
+    const count = bin?.count || 0;
+    const bx = x(String(r));
+    if (bx == null) continue;
+    const col = plot.append("rect").attr("class", "poc-column").attr("x", bx).attr("y", yRight(count)).attr("width", x.bandwidth()).attr("height", PLOT_H - yRight(count)).attr("fill", POC_COLUMN_FILL).attr("stroke", POC_COLUMN_STROKE).attr("stroke-width", 0.5);
+    a.attachTip(col, `POC rating ${r}: ${count} response${count === 1 ? "" : "s"}`, {
+      on: { fill: "#8d8d8d" },
+      off: { fill: POC_COLUMN_FILL }
+    });
+  }
+  const cx = (r) => (x(String(r)) ?? 0) + x.bandwidth() / 2;
+  if (scTotal === 1) {
+    for (const r of ratings) {
+      const count = scByRating[r]?.count || 0;
+      if (count <= 0) continue;
+      const pt = plot.append("circle").attr("class", "sc-point").attr("cx", cx(r)).attr("cy", yLeft(count)).attr("r", SC_POINT_R).attr("fill", scColor);
+      a.attachTip(pt, `SC rating ${r}: ${count} response`, {
+        on: { stroke: "#222", "stroke-width": "1.5" },
+        off: { stroke: "none" }
+      });
+    }
+  } else {
+    const lineGen = line_default().x((r) => cx(r)).y((r) => yLeft(scByRating[r]?.count || 0));
+    plot.append("path").attr("class", "sc-line").attr("d", lineGen(ratings)).attr("fill", "none").attr("stroke", scColor).attr("stroke-width", 2);
+    for (const r of ratings) {
+      const count = scByRating[r]?.count || 0;
+      const pt = plot.append("circle").attr("class", "sc-point").attr("cx", cx(r)).attr("cy", yLeft(count)).attr("r", 3).attr("fill", scColor);
+      a.attachTip(pt, `SC rating ${r}: ${count} response${count === 1 ? "" : "s"}`, {
+        on: { stroke: "#222", "stroke-width": "1.5" },
+        off: { stroke: "none" }
+      });
+    }
+  }
+  const xAxis = plot.append("g").attr("transform", `translate(0, ${PLOT_H})`).call(axisBottom(x));
+  axisstyle({ axis: xAxis, showline: true, color: AXIS_COLOR });
+  const leftAxis = plot.append("g").call(axisLeft(yLeft).ticks(5));
+  axisstyle({ axis: leftAxis, showline: true, color: AXIS_COLOR });
+  const rightAxis = plot.append("g").attr("transform", `translate(${PLOT_W}, 0)`).call(axisRight(yRight).ticks(5));
+  axisstyle({ axis: rightAxis, showline: true, color: AXIS_COLOR });
+  plot.append("text").attr("transform", `translate(${PLOT_W / 2}, ${PLOT_H + 40})`).attr("text-anchor", "middle").attr("font-size", "0.85rem").attr("font-weight", "bold").attr("fill", AXIS_COLOR).text(a.texts.xAxisLabel);
+  plot.append("text").attr("transform", `translate(${-MARGIN.left + 14}, ${PLOT_H / 2}) rotate(-90)`).attr("text-anchor", "middle").attr("font-size", "0.82rem").attr("font-weight", "bold").attr("fill", AXIS_COLOR).text(a.texts.leftAxisLabel);
+  plot.append("text").attr("transform", `translate(${PLOT_W + MARGIN.right - 14}, ${PLOT_H / 2}) rotate(90)`).attr("text-anchor", "middle").attr("font-size", "0.82rem").attr("font-weight", "bold").attr("fill", AXIS_COLOR).text(a.texts.rightAxisLabel);
+}
+
+// plots/profile/renderImpressionLegend.ts
+var SWATCH_SIZE = 14;
+var LINE_W = 22;
+var DOT_R = 4;
+var LABEL_GAP = 6;
+var ITEM_GAP = 20;
+var ROW_H = 22;
+var PAD_X = 2;
+var FONT_SIZE = "0.8rem";
+var ZONE_OPACITY = 0.3;
+var textWidth = (sel) => sel.node().getBBox().width;
+function renderImpressionLegend(a) {
+  const holder = a.holder.style("display", "flex").style("justify-content", "center").style("padding-top", "8px");
+  const svg = holder.append("svg").attr("data-testid", "sjpp-profileForms-impression-legend");
+  const g = svg.append("g");
+  const seriesG = g.append("g");
+  const seriesCy = ROW_H / 2;
+  let sx = 0;
+  for (const s of a.series) {
+    const item = seriesG.append("g").attr("class", "impression-legend-item");
+    const swatchW = s.symbol === "line" ? LINE_W : SWATCH_SIZE;
+    if (s.symbol === "line") {
+      item.append("line").attr("x1", sx).attr("y1", seriesCy).attr("x2", sx + LINE_W).attr("y2", seriesCy).attr("stroke", s.color).attr("stroke-width", 2);
+      item.append("circle").attr("cx", sx + LINE_W / 2).attr("cy", seriesCy).attr("r", DOT_R).attr("fill", s.color);
+    } else if (s.symbol === "circle") {
+      item.append("circle").attr("cx", sx + SWATCH_SIZE / 2).attr("cy", seriesCy).attr("r", SWATCH_SIZE / 2).attr("fill", s.color).attr("stroke", "#666").attr("stroke-width", 0.5);
+    } else {
+      item.append("rect").attr("x", sx).attr("y", seriesCy - SWATCH_SIZE / 2).attr("width", SWATCH_SIZE).attr("height", SWATCH_SIZE).attr("fill", s.color).attr("stroke", "#666").attr("stroke-width", 0.5);
+    }
+    const label = item.append("text").attr("x", sx + swatchW + LABEL_GAP).attr("y", seriesCy).attr("dominant-baseline", "central").attr("font-size", FONT_SIZE).text(s.label);
+    sx += swatchW + LABEL_GAP + textWidth(label) + ITEM_GAP;
+  }
+  const seriesW = Math.max(0, sx - ITEM_GAP);
+  const zonesG = g.append("g");
+  const zonesCy = ROW_H + ROW_H / 2;
+  let zx = 0;
+  for (const z of [...a.zones].sort((z1, z2) => z1.min - z2.min)) {
+    const item = zonesG.append("g").attr("class", "impression-legend-zone");
+    item.append("rect").attr("x", zx).attr("y", zonesCy - SWATCH_SIZE / 2).attr("width", SWATCH_SIZE).attr("height", SWATCH_SIZE).attr("fill", z.color).attr("opacity", ZONE_OPACITY).attr("stroke", "#ccc").attr("stroke-width", 0.5);
+    const label = item.append("text").attr("x", zx + SWATCH_SIZE + LABEL_GAP).attr("y", zonesCy).attr("dominant-baseline", "central").attr("font-size", FONT_SIZE).text(z.label);
+    zx += SWATCH_SIZE + LABEL_GAP + textWidth(label) + ITEM_GAP;
+  }
+  const zonesW = Math.max(0, zx - ITEM_GAP);
+  const totalW = Math.max(seriesW, zonesW);
+  seriesG.attr("transform", `translate(${PAD_X + (totalW - seriesW) / 2}, 0)`);
+  zonesG.attr("transform", `translate(${PAD_X + (totalW - zonesW) / 2}, 0)`);
+  svg.attr("width", Math.ceil(totalW) + 2 * PAD_X).attr("height", 2 * ROW_H);
+}
+
+// plots/profile/profileForms.ts
+var YES_NO_TAB = "Yes/No Barchart";
+var LIKERT_TAB = "Likert Scale";
+var IMPRESSION_SUFFIX = "__Impression";
+var profileForms = class extends profilePlot {
+  constructor(opts) {
+    super(opts, "profileForms");
+    // Responder-level multivalue impression term ids under this __Impression domain
+    // (POCFimpression_mod*). When present, the route builds the POC distribution per
+    // responder from these instead of the per-site pocTW float.
+    this.pocResponderTermIds = [];
+    this.opts = opts;
+    this.id2SCTW = {};
+  }
+  static {
+    this.type = "profileForms";
+  }
+  async init(appState) {
+    super.init(appState);
+    const config = structuredClone(appState.plots.find((p) => p.id === this.id));
+    const parentId = config.tw?.term?.id || "";
+    this.isImpressionDomain = parentId.endsWith(IMPRESSION_SUFFIX);
+    const settings = config.settings.profileForms;
+    this.tabs = [];
+    this.twLst = [];
+    if (this.isImpressionDomain) {
+      const cohortValuelst = appState.termdbConfig?.selectCohort ? appState.termdbConfig.selectCohort.values[appState.activeCohort]?.keys : null;
+      const childData = await this.vocabApi.getTermChildren({ id: parentId }, cohortValuelst);
+      const children = childData?.lst || [];
+      const scChild = children.find((t) => t.type === "integer") || children[0];
+      const pocChild = children.find((t) => t.type === "float");
+      this.pocResponderTermIds = children.filter((t) => t.type === "multivalue").map((t) => t.id);
+      if (!scChild) {
+        console.error("profileForms impression-domain SC child not found:", { parentId, cohortValuelst, childData });
+      }
+      if (scChild) {
+        this.scTW = { id: scChild.id, q: { mode: "continuous" } };
+        await fillTermWrapper(this.scTW, this.app.vocabApi);
+        this.impressionScColor = this.scTW.term.color;
+      }
+      if (pocChild) {
+        this.pocTW = { id: pocChild.id, q: { mode: "continuous" } };
+        await fillTermWrapper(this.pocTW, this.app.vocabApi);
+        this.impressionPocColor = this.pocTW.term.color;
+      }
+    } else {
+      this.twLst = await this.vocabApi.getMultivalueTWs({ parent_id: parentId });
+      for (const plot of config.options) {
+        const tws = this.twLst.filter((tw) => tw.term.subtype == plot.subtype);
+        if (!tws.length) continue;
+        const tab = {
+          label: plot.name,
+          callback: () => {
+            this.app.dispatch({ type: "plot_edit", id: this.id, config: { activeTab: plot.name } });
+          },
+          active: false
+        };
+        if (plot.name == config.activeTab) tab.active = true;
+        if (plot.hasSC) {
+          this.id2SCTW[plot.name] = {};
+          for (const tw of this.twLst) {
+            if (tw.term.subtype != plot.subtype) continue;
+            const scTermId = tw.term.id.replace(/^POC/, "");
+            const scTW = { id: scTermId };
+            await fillTermWrapper(scTW, this.app.vocabApi);
+            this.id2SCTW[plot.name][scTermId] = scTW;
+          }
+          this.twLst.push(...Object.values(this.id2SCTW[plot.name]));
+        }
+        this.tabs.push(tab);
+      }
+    }
+    const rightDiv = this.dom.rightDiv;
+    const topDiv = rightDiv.append("div");
+    const domainDiv = topDiv.append("div").style("padding-bottom", "10px").style("font-weight", "bold");
+    const headerDiv = rightDiv.append("div").style("padding-bottom", "10px");
+    if (!this.isImpressionDomain && this.tabs.length > 1)
+      await new Tabs({
+        holder: topDiv,
+        tabsPosition: "horizontal",
+        tabs: this.tabs
+      }).main();
+    const shift = 690;
+    const shiftTop = 50;
+    const width = settings.svgw + shift + 500;
+    const svg = rightDiv.style("padding", "20px").append("svg").attr("width", width);
+    svg.append("defs").append("pattern").attr("id", `${this.id}_diagonalHatch`).attr("patternUnits", "userSpaceOnUse").attr("width", 4).attr("height", 4).append("path").attr("d", "M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2").attr("stroke-width", 1).attr("stroke", "gray");
+    this.shiftTop = shiftTop;
+    this.shift = shift;
+    const mainG = svg.append("g").attr("transform", `translate(${shift}, ${shiftTop})`);
+    const gridG = svg.append("g").attr("transform", `translate(${shift}, ${shiftTop})`);
+    this.filterG = svg.append("g").attr("transform", `translate(${shift + settings.svgw + 60}, ${shiftTop + 40})`);
+    this.legendG = svg.append("g");
+    const xAxisG = svg.append("g").attr("transform", `translate(${shift}, ${shiftTop / 2})`);
+    const impressionDiv = rightDiv.append("div");
+    if (this.isImpressionDomain) svg.style("display", "none");
+    this.dom = copyMerge(this.dom, {
+      svg,
+      headerDiv,
+      mainG,
+      gridG,
+      legendG: this.legendG,
+      xAxisG,
+      domainDiv,
+      impressionDiv
+    });
+  }
+  async main() {
+    this.dom.loadingDiv.style("display", "");
+    try {
+      await super.main();
+      const parents = this.config.tw.term.id.split("__");
+      this.module = parents[1];
+      const domain = parents.slice(1).join(" / ");
+      this.dom.domainDiv.style("display", this.isImpressionDomain ? "none" : "").text(domain);
+      this.dom.mainG.selectAll("*").remove();
+      this.dom.gridG.selectAll("*").remove();
+      this.dom.xAxisG.selectAll("*").remove();
+      this.dom.legendG.selectAll("*").remove();
+      if (this.isImpressionDomain) {
+        await this.setControls();
+        this.data = await this.fetchImpressionDistribution();
+        if (this.data && "error" in this.data) throw this.data.error;
+        this.renderImpression();
+        return;
+      }
+      if (this.tabs.length == 0) return;
+      const activeTab = this.state.config.activeTab || this.tabs[0].label;
+      this.activePlot = this.state.config.options.find((p) => p.name == activeTab);
+      this.scoreTerms = this.twLst.filter((tw) => tw.term.subtype == this.activePlot.subtype);
+      if (this.activePlot.hasSC) {
+        this.scScoreTerms = Object.values(this.id2SCTW[this.activePlot.name]);
+      }
+      this.categories = /* @__PURE__ */ new Set();
+      await this.setControls();
+      this.renderPlot();
+      this.filterG.selectAll("*").remove();
+      this.addFilterLegend();
+    } finally {
+      this.dom.loadingDiv.style("display", "none");
+    }
+  }
+  async setControls(additionalInputs = []) {
+    if (!this.isImpressionDomain) return super.setControls(additionalInputs);
+    const savedType = this.type;
+    this.type = "__impressionDomain";
+    try {
+      await super.setControls(additionalInputs);
+    } finally {
+      ;
+      this.type = savedType;
+    }
+  }
+  renderPlot() {
+    try {
+      this.dom.headerDiv.style("display", "none");
+      switch (this.activePlot.name) {
+        case LIKERT_TAB:
+          this.renderLikert();
+          break;
+        case YES_NO_TAB:
+          this.renderYesNo();
+      }
+    } catch (e) {
+      console.error("Error rendering profile forms plot:", e);
+      throw e;
+    }
+  }
+  async fetchImpressionDistribution() {
+    if (!this.scTW) return { error: "missing SC term for impression domain" };
+    const body = {
+      genome: this.state.vocab.genome,
+      dslabel: this.state.vocab.dslabel,
+      scTermId: this.scTW.term.id,
+      maxScore: IMPRESSION_MAX_SCORE,
+      filter: this.filter,
+      filterByUserSites: this.settings?.filterByUserSites
+    };
+    if (this.pocTW) body.pocTermId = this.pocTW.term.id;
+    if (this.pocResponderTermIds.length) body.pocResponderTermIds = this.pocResponderTermIds;
+    return dofetch3("termdb/profileImpressionDistribution", { body });
+  }
+  /*
+  Impression-domain view: for each POC responder group render a thermometer (shared SC median +
+  that group's POC median, with performance zones) beside a response-distribution combo chart
+  (SC line on the left axis, grey POC columns on the right axis). Groups stack vertically. A
+  module with no POC responders (e.g. Patients & Outcomes) renders a single SC-only thermometer.
+  */
+  renderImpression() {
+    const holder = this.dom.impressionDiv;
+    holder.selectAll("*").remove();
+    const texts = this.config.impression;
+    if (!texts) throw `Missing impression config for the plot ${this.type} in this dataset`;
+    if (!texts.legend?.sc) throw `Missing impression.legend.sc for the plot ${this.type} in this dataset`;
+    const scColor = this.impressionScColor || "#888";
+    const data = this.data;
+    const moduleShades = this.state.termdbConfig?.colorMap?.[this.module] || {};
+    const zones = texts.zones.map((z) => ({
+      label: z.label,
+      min: z.min,
+      max: z.max,
+      color: moduleShades[z.shade] || scColor
+    }));
+    const attachTip = (sel, text, hover) => {
+      sel.datum({ tip: text, ...hover || {} }).style("cursor", "pointer");
+    };
+    const responders = Array.isArray(data.responders) ? data.responders : [];
+    const groups = responders.length ? responders.map((r) => ({
+      groupLabel: r.label,
+      poc: { median: r.median, total: r.total },
+      pocDistribution: r.distribution
+    })) : [{ groupLabel: null, poc: null, pocDistribution: [] }];
+    groups.forEach((g, i) => {
+      const groupLabel = g.groupLabel || texts.legend.sc;
+      const block = holder.append("div").attr("class", "sjpp-impression-card").attr("data-testid", "sjpp-profileForms-impression-card").attr("data-group-label", groupLabel).style("width", "fit-content").style("max-width", "100%").style("margin", "18px auto");
+      const header = block.append("div").style("text-align", "center");
+      header.append("div").attr("data-testid", "sjpp-profileForms-impression-title").style("font-size", "1.25rem").style("font-weight", "bold").style("padding", "4px 0").text(texts.titleTemplate.replace("{module}", this.module));
+      if (g.poc)
+        header.append("div").attr("data-testid", "sjpp-profileForms-impression-comparison").style("font-size", "1.05rem").style("font-weight", "bold").text(texts.comparisonTitle.replace("{group}", g.groupLabel));
+      const filterSvg = header.append("div").style("padding", "2px 0").append("svg");
+      this.filtersCount = 0;
+      this.filterG = filterSvg.append("g");
+      this.addFilterLegend();
+      const ffb = filterSvg.node().getBBox();
+      const fpad = 3;
+      this.filterG.attr("transform", `translate(${-ffb.x + fpad}, ${-ffb.y + fpad})`);
+      filterSvg.attr("width", Math.ceil(ffb.width + 2 * fpad)).attr("height", Math.ceil(ffb.height + 2 * fpad));
+      const box = block.append("div").style("border", "1px solid #bbb").style("border-radius", "8px").style("background", "#fff").style("margin-top", "6px");
+      const body = box.append("div").style("display", "flex").style("flex-wrap", "wrap").style("align-items", "stretch").style("justify-content", "center");
+      const chartPanel = (title, divider, testid) => {
+        const panel = body.append("div").attr("data-testid", testid).style("padding", "12px 18px").style("display", "flex").style("flex-direction", "column").style("align-items", "center");
+        if (divider) panel.style("border-right", "1px solid #ddd");
+        panel.append("div").style("text-align", "center").style("font-weight", "bold").style("font-size", "1rem").style("padding-bottom", "4px").text(title);
+        const chartWrap = panel.append("div").style("flex", "1 1 auto").style("display", "flex").style("align-items", "center");
+        return { panel, chartHolder: chartWrap.append("div") };
+      };
+      const thermo = chartPanel(texts.chartTitles.thermometer, !!g.poc, "sjpp-profileForms-thermometer-panel");
+      renderImpressionThermometer({
+        holder: thermo.chartHolder,
+        id: `${this.id}-g${i}`,
+        groupLabel,
+        sc: { median: data.scMedian, total: data.scTotal },
+        poc: g.poc,
+        ratingAxisLabel: texts.ratingAxisLabel,
+        zones,
+        colors: { sc: scColor },
+        attachTip
+      });
+      renderImpressionLegend({
+        holder: thermo.panel.append("div"),
+        series: [
+          { color: scColor, label: texts.legend.sc, symbol: "circle" },
+          ...g.poc ? [{ color: POC_FILL, label: texts.legend.poc, symbol: "circle" }] : []
+        ],
+        zones
+      });
+      if (g.poc) {
+        const dist = chartPanel(texts.chartTitles.distribution, false, "sjpp-profileForms-distribution-panel");
+        renderResponseDistribution({
+          holder: dist.chartHolder,
+          id: `${this.id}-dist-g${i}`,
+          groupLabel,
+          maxScore: IMPRESSION_MAX_SCORE,
+          scDistribution: data.scDistribution || [],
+          pocDistribution: g.pocDistribution,
+          texts: texts.distribution,
+          zones,
+          colors: { sc: scColor },
+          attachTip
+        });
+        renderImpressionLegend({
+          holder: dist.panel.append("div"),
+          series: [
+            { color: scColor, label: texts.legend.sc, symbol: "line" },
+            { color: POC_FILL, label: texts.legend.poc, symbol: "square" }
+          ],
+          zones
+        });
+      }
+    });
+  }
+  /*
+  The impression view renders each card's charts as separate <svg> elements under impressionDiv and
+  hides the main this.dom.svg, so the base getChartImages() — which only collects this.dom.svg —
+  would hand the download menu one empty, hidden svg (nothing downloads). Collect the card svgs
+  instead, keyed by the group label so a multi-card module downloads sensibly. The Likert/YesNo
+  path still draws into this.dom.svg, so it keeps the base behavior.
+  */
+  getChartImages() {
+    if (!this.isImpressionDomain) return super.getChartImages();
+    const note = "\xA9 2025 St. Jude Children\u2019s Research Hospital";
+    const charts = [];
+    this.dom.impressionDiv.selectAll(".sjpp-impression-card").each(function() {
+      const card = select_default(this);
+      const label = card.attr("data-group-label") || "";
+      card.selectAll("svg").each(function() {
+        charts.push({ name: `${label} ${note}`.trim(), svg: select_default(this) });
+      });
+    });
+    return charts;
+  }
+  renderLikert() {
+    this.dom.headerDiv.style("display", "block");
+    this.dom.headerDiv.selectAll("*").remove();
+    let y = 0;
+    const step = 30;
+    const height = (this.scoreTerms.length + 2) * step;
+    this.dom.svg.attr("height", height + 120);
+    this.categories = /* @__PURE__ */ new Set();
+    const labelPadding = 80;
+    const tempG = this.dom.svg.append("g").style("visibility", "hidden");
+    let maxLabelWidth = 0;
+    for (const tw of this.scoreTerms) {
+      if (tw.term.type != "multivalue") continue;
+      const text = getText(tw.term.details || tw.term.name);
+      const tempText = tempG.append("text").style("font-size", "0.85em").text(text);
+      const w = tempText.node().getBBox().width;
+      if (w > maxLabelWidth) maxLabelWidth = w;
+    }
+    tempG.remove();
+    const shift = maxLabelWidth + labelPadding;
+    this.dom.mainG.attr("transform", `translate(${shift}, ${this.shiftTop})`);
+    this.dom.gridG.attr("transform", `translate(${shift}, ${this.shiftTop})`);
+    this.filterG.attr("transform", `translate(${shift + this.settings.svgw + 60}, ${this.shiftTop + 40})`);
+    this.dom.svg.attr("width", shift + this.settings.svgw + 500);
+    this.shift = shift;
+    for (const tw of this.scoreTerms) {
+      if (tw.term.type != "multivalue") continue;
+      const dict = this.getPercentageDict(tw);
+      this.renderLikertBar(dict, y, 25, tw);
+      y += step;
+    }
+    y += step * 2;
+    const width = this.settings.svgw;
+    const posScale = linear().domain([0, 100]).range([shift, shift + width]);
+    const posAxisBottom = axisBottom(posScale).ticks(10).tickFormat((d) => d + "%");
+    const scaleG = this.dom.svg.append("g").attr("transform", `translate(0, ${y})`);
+    posAxisBottom(scaleG);
+    const likertLegendOrder = [
+      "I Don't Know",
+      "Do Not Know",
+      "No",
+      "Not Available",
+      "Not Applicable For My Role",
+      "Almost Never",
+      "Infrequently",
+      "Sometimes",
+      "Frequently",
+      "Almost Always"
+    ];
+    const catUpperSet = new Set([...this.categories].map((c) => c.toUpperCase()));
+    const orderedCategories = likertLegendOrder.filter((c) => catUpperSet.has(c.toUpperCase()));
+    const colorMap = this.state.termdbConfig.colorMap;
+    const legendG = this.dom.legendG.attr("transform", `translate(0, ${y + 50})`);
+    const rectSize = 14;
+    const rectTextGap = 5;
+    const itemGap = 12;
+    let x = 0;
+    for (const category of orderedCategories) {
+      const key = category.toUpperCase();
+      const color = colorMap[this.module][key] || colorMap["*"][key] || colorMap["*"][category];
+      const itemG = legendG.append("g").attr("transform", `translate(${x}, 0)`);
+      itemG.append("rect").attr("width", rectSize).attr("height", rectSize).attr("fill", color);
+      const label = itemG.append("text").attr("x", rectSize + rectTextGap).attr("y", rectSize / 2).attr("dominant-baseline", "central").style("font-size", "0.8em").text(category);
+      x += rectSize + rectTextGap + label.node().getBBox().width + itemGap;
+    }
+  }
+  renderYesNo() {
+    const step = 30;
+    const height = this.scoreTerms.length * step;
+    this.dom.svg.attr("height", height * 3 + 200);
+    const labelPadding = 50;
+    const tempG = this.dom.svg.append("g").style("visibility", "hidden");
+    let maxLabelWidth = 0;
+    for (const tw of this.scoreTerms) {
+      const text2 = getText(tw.term.name);
+      const tempText = tempG.append("text").style("font-size", "0.8em").text(text2);
+      const w = tempText.node().getBBox().width;
+      if (w > maxLabelWidth) maxLabelWidth = w;
+    }
+    tempG.remove();
+    const shift = maxLabelWidth + labelPadding;
+    this.dom.mainG.attr("transform", `translate(${shift}, ${this.shiftTop})`);
+    this.dom.gridG.attr("transform", `translate(${shift}, ${this.shiftTop})`);
+    this.dom.xAxisG.attr("transform", `translate(${shift}, ${this.shiftTop / 2})`);
+    this.filterG.attr("transform", `translate(${shift + this.settings.svgw + 60}, ${this.shiftTop + 40})`);
+    this.dom.svg.attr("width", shift + this.settings.svgw + 500);
+    this.shift = shift;
+    this.xAxisScale = linear().domain([0, 100]).range([0, this.settings.svgw]);
+    this.dom.xAxisG.call(axisTop(this.xAxisScale));
+    let y = 0;
+    let showSCBar = false;
+    for (const tw of this.scoreTerms) {
+      const percents = this.getPercentageDict(tw);
+      const scTermId = tw.term.id.replace(/^POC/, "");
+      const scTW = this.id2SCTW[this.activePlot.name][scTermId];
+      const scPercents = this.getPercentageDict(scTW);
+      const scPercentKeys = Object.keys(scPercents).filter((k) => scPercents[k] > 0).map((k) => scTW.term.values?.[k]?.label || k);
+      const scTotal = Object.values(scPercents).reduce((a, b) => a + b, 0);
+      showSCBar = scTotal > 1;
+      this.renderYesNoBar(percents, y, step, scTotal == 1 ? scPercentKeys : []);
+      if (showSCBar) {
+        y += step + 10;
+        this.renderYesNoBar(scPercents, y, step, []);
+        this.dom.mainG.append("text").text("SC").style("font-size", "0.7em").attr("x", this.settings.svgw + 8).attr("y", y + step * 0.6);
+      }
+      this.dom.mainG.append("text").text("POC").style("font-size", "0.7em").attr("x", this.settings.svgw + 8).attr("y", showSCBar ? y - step + 0.35 * step : y + step * 0.6);
+      this.dom.mainG.append("text").attr("x", -this.shift).attr("y", showSCBar ? y : y + step / 2).text(getText(tw.term.name)).attr("font-size", "0.8em").on("mouseenter", (event) => this.showText(event, tw.term.name)).on("mouseleave", () => this.tip.hide());
+      y += step + 40;
+    }
+    this.renderLines(y - 20);
+    if (showSCBar) this.dom.legendG.attr("transform", `translate(${550}, ${30 + this.settings.svgh})`);
+    else this.dom.legendG.attr("transform", `translate(${550}, ${this.settings.svgh * 0.8})`);
+    let x = 0;
+    for (const category of this.activePlot.categories) {
+      x += this.drawLegendRect(x, 0, category.name, this.dom.legendG, true);
+    }
+    let text = this.dom.legendG.append("text").attr("x", x + 80).attr("y", 18);
+    text.append("tspan").style("font-weight", "bold").text("SC:");
+    text.append("tspan").text("Site Coordinator");
+    text = this.dom.legendG.append("text").attr("x", x + 250).attr("y", 18);
+    text.append("tspan").style("font-weight", "bold").text("POC:");
+    text.append("tspan").text("Point of Care Staff");
+  }
+  onMouseOver(event) {
+    if (this.isImpressionDomain) {
+      const target = event.target;
+      const d = target.__data__;
+      if (d?.tip) {
+        const menu = this.tip.clear();
+        menu.d.text(d.tip);
+        menu.show(event.clientX, event.clientY, true, true);
+        if (d.on) for (const k in d.on) target.setAttribute(k, d.on[k]);
+        if (d.growR && !d._grown) {
+          d._grown = true;
+          select_default(target).interrupt().transition().duration(150).attr("r", d.growR);
+        }
+      } else this.onMouseOut(event);
+      return;
+    }
+    if (event.target.tagName == "rect") {
+      const path = event.target;
+      const d = path.__data__;
+      if (!d?.value) return this.onMouseOut(event);
+      const menu = this.tip.clear();
+      const percent = roundValueAuto(d.value, true, 1);
+      const row = menu.d.append("div").style("display", "flex").style("align-items", "center").style("gap", "5px");
+      if (d.color)
+        row.append("div").style("width", "12px").style("height", "12px").style("background-color", d.color).style("flex-shrink", "0");
+      row.append("span").text(`${d.key}: ${percent}%`);
+      menu.show(event.clientX, event.clientY, true, true);
+    } else this.onMouseOut(event);
+  }
+  onMouseOut(event) {
+    if (this.isImpressionDomain) {
+      const target = event?.target;
+      const d = target?.__data__;
+      if (d?.off) for (const k in d.off) target.setAttribute(k, d.off[k]);
+      if (d?._grown) {
+        d._grown = false;
+        select_default(target).interrupt().transition().duration(150).attr("r", d.baseR);
+      }
+    }
+    this.tip.hide();
+  }
+  getColor(key) {
+    return key == "Yes" ? this.activePlot.color : key == "No" ? "#aaa" : `url(#${this.id}_diagonalHatch)`;
+  }
+  renderLikertBar(dict, y, height, tw) {
+    const itemG = this.dom.mainG.append("g");
+    let total = 0;
+    for (const key in dict) total += dict[key];
+    const key2num = {};
+    for (const key in tw.term.values) {
+      const category = tw.term.values[key].label.toUpperCase();
+      key2num[category] = Number(key);
+    }
+    let x = 0;
+    const keys = Object.keys(dict).sort((a, b) => key2num[a.toUpperCase()] - key2num[b.toUpperCase()]);
+    for (const key of keys) {
+      this.categories.add(key);
+      const width = this.renderCategory(key, dict, itemG, x, height, total);
+      x += width;
+    }
+    const text = getText(tw.term.details || tw.term.name);
+    const textG = this.dom.svg.append("g").attr("transform", `translate(0, ${y + this.shiftTop})`);
+    textG.append("text").text(text).attr("y", height * 2 / 3).style("font-size", "0.85em").on("mouseenter", (event) => this.showText(event, tw.term.name)).on("mouseleave", () => this.tip.hide());
+    itemG.attr("transform", `translate(0, ${y})`);
+  }
+  renderCategory(category, dict, itemG, x, height, total, showPercent = false) {
+    const key = category.toUpperCase();
+    const module = this.module;
+    const colorMap = this.state.termdbConfig.colorMap;
+    const color = colorMap[module][key] || colorMap["*"][key];
+    const entry = Object.entries(dict).find((k) => k[0].toUpperCase() == key);
+    if (!entry) return 0;
+    const value = entry[1];
+    this.categories.add(category);
+    const percent = value / total * 100;
+    const width = percent / 100 * this.settings.svgw;
+    itemG.append("rect").attr("x", x).attr("width", width).attr("height", height).attr("stroke", "gray").attr("stroke-width", 0.5).attr("stroke-opacity", 0.5).attr("fill", color).datum({ key: category, value: percent, color }).on("mouseover", (event) => this.onMouseOver(event));
+    if (showPercent)
+      itemG.append("text").text(`${roundValueAuto(percent, true, 1)}%`).style("font-size", "0.8em").attr("x", x + width + 10).attr("y", height * 0.6);
+    return width;
+  }
+  renderYesNoBar(percents, y, height, scPercentKeys) {
+    const percentsOrdered = Object.keys(percents).sort((a, b) => -a.localeCompare(b));
+    const total = Object.values(percents).reduce((a, b) => a + b, 0);
+    let x = 0;
+    for (const key of percentsOrdered) {
+      const color = this.getColor(key);
+      const value = percents[key];
+      const width = value / total * this.settings.svgw;
+      const percent = value / total * 100;
+      this.dom.mainG.append("rect").attr("x", x).attr("y", y).attr("width", width).attr("height", height).attr("stroke", "gray").attr("fill", color).datum({ key, value: percent, color });
+      if (scPercentKeys.includes(key)) {
+        const arrowX = x + width / 2;
+        const arrowSize = 6;
+        this.dom.mainG.append("polygon").attr(
+          "points",
+          `${arrowX},${y} ${arrowX - arrowSize},${y - arrowSize * 1.5} ${arrowX + arrowSize},${y - arrowSize * 1.5}`
+        ).attr("fill", "#c0392b").attr("pointer-events", "none");
+        this.dom.mainG.append("text").text(`SC ${roundValueAuto(percent, true, 1)}%`).style("font-size", "0.7em").style("fill", "#c0392b").attr("font-weight", "bold").attr("text-anchor", "middle").attr("x", arrowX).attr("y", y - arrowSize * 1.5 - 3).attr("pointer-events", "none");
+      }
+      x += width;
+    }
+  }
+  renderLines(y) {
+    const width = this.settings.svgw;
+    const color = "lightgray";
+    const opacity = 0.5;
+    const bins = 4;
+    const size = width / bins;
+    let x;
+    const gridG = this.dom.gridG;
+    for (let i = 0; i <= bins; i++) {
+      x = i * size;
+      gridG.append("line").attr("x1", x).attr("x2", x).attr("y1", 0).attr("y2", y).style("stroke", color).style("stroke-opacity", opacity).style("stroke-dasharray", "5, 5");
+    }
+  }
+  drawLegendRect(x, y, text, legendG, isYesNo = false) {
+    const key = text.toUpperCase();
+    const colorMap = this.state.termdbConfig.colorMap;
+    const color = isYesNo ? this.getColor(text) : colorMap[this.module][key] || colorMap["*"][key] || colorMap["*"][text];
+    const size = 20;
+    const gap = 15;
+    const itemG = legendG.append("g").attr("transform", `translate(${x}, ${y})`);
+    itemG.append("rect").attr("x", 0).attr("y", 0).attr("width", size).attr("height", size).attr("fill", color).attr("stroke", "gray").attr("stroke-width", 0.5).attr("stroke-opacity", 0.5).attr("pointer-events", "none");
+    const label = itemG.append("text").attr("transform", `translate(${size + gap}, ${size / 2})`).attr("dominant-baseline", "central").style("font-size", "0.85em").text(text);
+    const labelWidth = label.node().getBBox().width;
+    return size + gap + labelWidth + gap;
+  }
+  showText(event, text, size = 110) {
+    if (text.length <= size) return;
+    const menu = this.tip.clear();
+    menu.d.style("padding", "5px").text(text);
+    menu.showunder(event.target);
+  }
+  getPercentageDict(tw) {
+    return this.data.term2Score[tw.term.id];
+  }
+};
+async function getPlotConfig(opts, app, _activeCohort) {
+  const activeCohort = _activeCohort === void 0 ? app.getState().activeCohort : _activeCohort;
+  const formsConfig = await getProfilePlotConfig(activeCohort, app, opts);
+  let config = formsConfig;
+  config.settings = getDefaultProfileFormsSettings();
+  config.headerTitle = "Templates: Visualization tools to provide insights and assist in leveraging data";
+  config = copyMerge(structuredClone(config), opts);
+  for (const plot of config.options) {
+    if (plot.terms) await fillTwLst(plot.terms, app.vocabApi);
+  }
+  return config;
+}
+function getDefaultProfileFormsSettings() {
+  const settings = {
+    controls: {
+      isOpen: false
+    },
+    profileForms: { svgw: 420, svgh: 480 }
+  };
+  const profilePlotSettings = getDefaultProfilePlotSettings();
+  settings.profileForms = copyMerge(settings.profileForms, profilePlotSettings);
+  return settings;
+}
+var profileFormsInit = getCompInit(profileForms);
+var componentInit = profileFormsInit;
+function getText(name, size = 110) {
+  if (name.length > size) name = name.slice(0, size) + "...";
+  return name;
+}
+export {
+  componentInit,
+  getDefaultProfileFormsSettings,
+  getPlotConfig,
+  profileForms,
+  profileFormsInit
+};
+//# sourceMappingURL=profileForms-Z4Y55OQY.js.map