@czi-sds/data-viz 2.1.0 → 2.1.1

package/dist/index.cjs.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
 import { DatasetComponentOption, ECharts, EChartsOption, ScatterSeriesOption } from "echarts";
-import { DiscreteColorGeneratorOptions, TooltipTableContentProps } from "@czi-sds/components";
-
+import { DiscreteColorGeneratorOptions, TooltipProps, TooltipTableContentProps } from "@czi-sds/components";
 //#region src/common/colorScales.d.ts
 /** RGB triplet with each channel in the range 0-255. */
 type Rgb = [number, number, number];
@@ -250,8 +249,18 @@ interface ResidueValueOverlay {
   colorScale?: ColorScale;
   /** Legend caption, e.g. "Feature activation". */
   label?: string;
-  /** Help tooltip attached to the legend caption. */
+  /**
+   * Title of the help tooltip on the legend caption. The common case: a
+   * string is enough. Use `tooltipProps` when the tooltip needs a subtitle, a
+   * custom body, or any other SDS Tooltip prop. Overrides
+   * `tooltipProps.title` when both are set.
+   */
   tooltip?: string;
+  /**
+   * Props forwarded to the SDS Tooltip on the legend caption. The trigger is
+   * the caption's help icon, so `children` is omitted.
+   */
+  tooltipProps?: Partial<Omit<TooltipProps, "children">>;
   /**
    * Label for the per-residue readout that replaces a stat slot on hover.
    * @default "Value"

package/dist/index.cjs.js

@@ -893,18 +893,22 @@ const ScaleColumn = (0, _emotion_styled.default)("div")`
     `;
 }}
 `;
+/**
+* A wrapping text line, not a flex row: the help icon has to sit at the end of
+* the last line of the caption rather than beside the whole wrapped block.
+*/
 const ScaleCaption = (0, _emotion_styled.default)("span")`
   ${_czi_sds_components.fontBodyXxxs}
 
+  display: block;
   text-align: left;
-  display: flex;
-  align-items: center;
 
   ${(props) => {
 	var _semanticColors$base3;
 	const semanticColors = (0, _czi_sds_components.getSemanticColors)(props);
 	return `
       color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textTertiaryOnDark};
+      max-width: 142px;
     `;
 }}
 `;
@@ -917,12 +921,18 @@ const TooltipAnchor = (0, _emotion_styled.default)("span")`
 	const spaces = (0, _czi_sds_components.getSpaces)(props);
 	const semanticColors = (0, _czi_sds_components.getSemanticColors)(props);
 	return `
+      display: inline-block;
       padding-left: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px;
-      margin-bottom: -${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px;
+      margin-bottom: 1px;
+      vertical-align: text-bottom;
 
       &:hover {
         color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.ornamentSecondary};
       }
+
+      svg {
+        display: block;
+      }
     `;
 }}
 `;
@@ -947,7 +957,7 @@ function StatColumn({ label, value }) {
 * residue takes priority so the user can inspect others without losing their
 * selection.
 */
-function StructureLegend({ hoveredResidue = null, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, selectedResidue = null, showSequenceViewer, stats, valueLabel }) {
+function StructureLegend({ hoveredResidue = null, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, scaleTooltipProps, selectedResidue = null, showSequenceViewer, stats, valueLabel }) {
 	var _stats$, _stats$2, _stats$3;
 	const activeResidue = hoveredResidue !== null && hoveredResidue !== void 0 ? hoveredResidue : selectedResidue;
 	const showResidue = activeResidue !== null;
@@ -979,15 +989,16 @@ function StructureLegend({ hoveredResidue = null, scale, scaleLabel, scaleMax =
 			max: scaleMax,
 			min: scaleMin,
 			scale
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ScaleCaption, { children: [scaleLabel, scaleTooltip !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Tooltip, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ScaleCaption, { children: [scaleLabel, (scaleTooltip !== void 0 || scaleTooltipProps !== void 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Tooltip, _objectSpread2(_objectSpread2({
 			arrow: true,
-			placement: "bottom",
-			title: scaleTooltip,
+			placement: "bottom"
+		}, scaleTooltipProps), {}, {
+			title: scaleTooltip !== null && scaleTooltip !== void 0 ? scaleTooltip : scaleTooltipProps === null || scaleTooltipProps === void 0 ? void 0 : scaleTooltipProps.title,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.QuestionIcon, {
 				size: 10,
 				weight: "bold"
 			}) })
-		})] })] })]
+		}))] })] })]
 	});
 }
 //#endregion
@@ -1806,6 +1817,48 @@ const Sequence = ({ chainLabel, hideSequenceNumbers, residueColors, sequenceNumb
 	}, handlers), {}, { children: groups })), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResidueTooltip, { ref: tooltipRef })] });
 };
 //#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/utils/copyText.ts
+/**
+* Writes `text` to the clipboard.
+*
+* The async Clipboard API is preferred, but nested srcdoc sandboxes — MCP
+* inspectors, Claude Desktop, and similar hosts — often omit `clipboard-write`
+* from their Permissions Policy, so `navigator.clipboard.writeText` rejects
+* even on a user click. `document.execCommand("copy")` only needs that click, so
+* it covers those hosts without the consumer having to patch the bundle.
+*/
+function copyText(text) {
+	var _navigator$clipboard;
+	if (!((_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText)) return copyWithSelection(text);
+	return navigator.clipboard.writeText(text).catch(() => copyWithSelection(text));
+}
+/**
+* Copies by selecting a transient textarea. Must run under user activation,
+* which a click still has after the Clipboard API has been refused.
+*/
+function copyWithSelection(text) {
+	return new Promise((resolve, reject) => {
+		const area = document.createElement("textarea");
+		area.value = text;
+		area.setAttribute("readonly", "");
+		area.setAttribute("aria-hidden", "true");
+		area.style.position = "fixed";
+		area.style.top = "-1000px";
+		document.body.appendChild(area);
+		area.select();
+		area.setSelectionRange(0, text.length);
+		let copied = false;
+		try {
+			copied = document.execCommand("copy");
+		} catch (_unused) {
+			copied = false;
+		}
+		area.remove();
+		if (copied) resolve();
+		else reject(/* @__PURE__ */ new Error("The host blocked clipboard access."));
+	});
+}
+//#endregion
 //#region src/core/ProteinStructureViewer/components/SequenceView/utils/sequenceText.ts
 /**
 * The structure's residues as text, one section per chain separated by
@@ -1834,12 +1887,11 @@ function useCopySequence(entries) {
 	return {
 		copied,
 		copySequence: (0, react.useCallback)(() => {
-			const sequence = sequenceTextFromEntries(entries);
-			navigator.clipboard.writeText(sequence).then(() => {
+			copyText(sequenceTextFromEntries(entries)).then(() => {
 				setCopied(true);
 				if (timeoutRef.current) clearTimeout(timeoutRef.current);
 				timeoutRef.current = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
-			});
+			}).catch(() => {});
 		}, [entries])
 	};
 }
@@ -3055,6 +3107,7 @@ function resolveScaleProps(overlay, hasPlddt) {
 			scaleMax: overlay.max,
 			scaleMin: (_overlay$min = overlay.min) !== null && _overlay$min !== void 0 ? _overlay$min : 0,
 			scaleTooltip: overlay.tooltip,
+			scaleTooltipProps: overlay.tooltipProps,
 			valueLabel: (_overlay$readoutLabel = overlay.readoutLabel) !== null && _overlay$readoutLabel !== void 0 ? _overlay$readoutLabel : DEFAULT_READOUT_LABEL
 		};
 	}
@@ -3063,6 +3116,7 @@ function resolveScaleProps(overlay, hasPlddt) {
 		scaleLabel: PLDDT_SCALE_LABEL,
 		scaleMax: null,
 		scaleTooltip: void 0,
+		scaleTooltipProps: void 0,
 		valueLabel: void 0
 	};
 	return {
@@ -3070,6 +3124,7 @@ function resolveScaleProps(overlay, hasPlddt) {
 		scaleLabel: void 0,
 		scaleMax: null,
 		scaleTooltip: void 0,
+		scaleTooltipProps: void 0,
 		valueLabel: void 0
 	};
 }

package/dist/index.esm.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { DatasetComponentOption, ECharts, EChartsOption, ScatterSeriesOption } from "echarts";
 import { HTMLAttributes } from "react";
-import { DiscreteColorGeneratorOptions, TooltipTableContentProps } from "@czi-sds/components";
+import { DiscreteColorGeneratorOptions, TooltipProps, TooltipTableContentProps } from "@czi-sds/components";
 import { CustomElementProperty } from "molstar/lib/mol-model-props/common/custom-element-property";
 
 //#region src/common/colorScales.d.ts
@@ -251,8 +251,18 @@ interface ResidueValueOverlay {
   colorScale?: ColorScale;
   /** Legend caption, e.g. "Feature activation". */
   label?: string;
-  /** Help tooltip attached to the legend caption. */
+  /**
+   * Title of the help tooltip on the legend caption. The common case: a
+   * string is enough. Use `tooltipProps` when the tooltip needs a subtitle, a
+   * custom body, or any other SDS Tooltip prop. Overrides
+   * `tooltipProps.title` when both are set.
+   */
   tooltip?: string;
+  /**
+   * Props forwarded to the SDS Tooltip on the legend caption. The trigger is
+   * the caption's help icon, so `children` is omitted.
+   */
+  tooltipProps?: Partial<Omit<TooltipProps, "children">>;
   /**
    * Label for the per-residue readout that replaces a stat slot on hover.
    * @default "Value"

package/dist/index.esm.js

@@ -868,18 +868,22 @@ const ScaleColumn = styled("div")`
     `;
 }}
 `;
+/**
+* A wrapping text line, not a flex row: the help icon has to sit at the end of
+* the last line of the caption rather than beside the whole wrapped block.
+*/
 const ScaleCaption = styled("span")`
   ${fontBodyXxxs}
 
+  display: block;
   text-align: left;
-  display: flex;
-  align-items: center;
 
   ${(props) => {
 	var _semanticColors$base3;
 	const semanticColors = getSemanticColors(props);
 	return `
       color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textTertiaryOnDark};
+      max-width: 142px;
     `;
 }}
 `;
@@ -892,12 +896,18 @@ const TooltipAnchor = styled("span")`
 	const spaces = getSpaces(props);
 	const semanticColors = getSemanticColors(props);
 	return `
+      display: inline-block;
       padding-left: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px;
-      margin-bottom: -${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px;
+      margin-bottom: 1px;
+      vertical-align: text-bottom;
 
       &:hover {
         color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.ornamentSecondary};
       }
+
+      svg {
+        display: block;
+      }
     `;
 }}
 `;
@@ -922,7 +932,7 @@ function StatColumn({ label, value }) {
 * residue takes priority so the user can inspect others without losing their
 * selection.
 */
-function StructureLegend({ hoveredResidue = null, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, selectedResidue = null, showSequenceViewer, stats, valueLabel }) {
+function StructureLegend({ hoveredResidue = null, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, scaleTooltipProps, selectedResidue = null, showSequenceViewer, stats, valueLabel }) {
 	var _stats$, _stats$2, _stats$3;
 	const activeResidue = hoveredResidue !== null && hoveredResidue !== void 0 ? hoveredResidue : selectedResidue;
 	const showResidue = activeResidue !== null;
@@ -954,15 +964,16 @@ function StructureLegend({ hoveredResidue = null, scale, scaleLabel, scaleMax =
 			max: scaleMax,
 			min: scaleMin,
 			scale
-		}), /* @__PURE__ */ jsxs(ScaleCaption, { children: [scaleLabel, scaleTooltip !== void 0 && /* @__PURE__ */ jsx(Tooltip, {
+		}), /* @__PURE__ */ jsxs(ScaleCaption, { children: [scaleLabel, (scaleTooltip !== void 0 || scaleTooltipProps !== void 0) && /* @__PURE__ */ jsx(Tooltip, _objectSpread2(_objectSpread2({
 			arrow: true,
-			placement: "bottom",
-			title: scaleTooltip,
+			placement: "bottom"
+		}, scaleTooltipProps), {}, {
+			title: scaleTooltip !== null && scaleTooltip !== void 0 ? scaleTooltip : scaleTooltipProps === null || scaleTooltipProps === void 0 ? void 0 : scaleTooltipProps.title,
 			children: /* @__PURE__ */ jsx(TooltipAnchor, { children: /* @__PURE__ */ jsx(QuestionIcon, {
 				size: 10,
 				weight: "bold"
 			}) })
-		})] })] })]
+		}))] })] })]
 	});
 }
 //#endregion
@@ -1781,6 +1792,48 @@ const Sequence = ({ chainLabel, hideSequenceNumbers, residueColors, sequenceNumb
 	}, handlers), {}, { children: groups })), /* @__PURE__ */ jsx(ResidueTooltip, { ref: tooltipRef })] });
 };
 //#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/utils/copyText.ts
+/**
+* Writes `text` to the clipboard.
+*
+* The async Clipboard API is preferred, but nested srcdoc sandboxes — MCP
+* inspectors, Claude Desktop, and similar hosts — often omit `clipboard-write`
+* from their Permissions Policy, so `navigator.clipboard.writeText` rejects
+* even on a user click. `document.execCommand("copy")` only needs that click, so
+* it covers those hosts without the consumer having to patch the bundle.
+*/
+function copyText(text) {
+	var _navigator$clipboard;
+	if (!((_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText)) return copyWithSelection(text);
+	return navigator.clipboard.writeText(text).catch(() => copyWithSelection(text));
+}
+/**
+* Copies by selecting a transient textarea. Must run under user activation,
+* which a click still has after the Clipboard API has been refused.
+*/
+function copyWithSelection(text) {
+	return new Promise((resolve, reject) => {
+		const area = document.createElement("textarea");
+		area.value = text;
+		area.setAttribute("readonly", "");
+		area.setAttribute("aria-hidden", "true");
+		area.style.position = "fixed";
+		area.style.top = "-1000px";
+		document.body.appendChild(area);
+		area.select();
+		area.setSelectionRange(0, text.length);
+		let copied = false;
+		try {
+			copied = document.execCommand("copy");
+		} catch (_unused) {
+			copied = false;
+		}
+		area.remove();
+		if (copied) resolve();
+		else reject(/* @__PURE__ */ new Error("The host blocked clipboard access."));
+	});
+}
+//#endregion
 //#region src/core/ProteinStructureViewer/components/SequenceView/utils/sequenceText.ts
 /**
 * The structure's residues as text, one section per chain separated by
@@ -1809,12 +1862,11 @@ function useCopySequence(entries) {
 	return {
 		copied,
 		copySequence: useCallback(() => {
-			const sequence = sequenceTextFromEntries(entries);
-			navigator.clipboard.writeText(sequence).then(() => {
+			copyText(sequenceTextFromEntries(entries)).then(() => {
 				setCopied(true);
 				if (timeoutRef.current) clearTimeout(timeoutRef.current);
 				timeoutRef.current = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
-			});
+			}).catch(() => {});
 		}, [entries])
 	};
 }
@@ -3030,6 +3082,7 @@ function resolveScaleProps(overlay, hasPlddt) {
 			scaleMax: overlay.max,
 			scaleMin: (_overlay$min = overlay.min) !== null && _overlay$min !== void 0 ? _overlay$min : 0,
 			scaleTooltip: overlay.tooltip,
+			scaleTooltipProps: overlay.tooltipProps,
 			valueLabel: (_overlay$readoutLabel = overlay.readoutLabel) !== null && _overlay$readoutLabel !== void 0 ? _overlay$readoutLabel : DEFAULT_READOUT_LABEL
 		};
 	}
@@ -3038,6 +3091,7 @@ function resolveScaleProps(overlay, hasPlddt) {
 		scaleLabel: PLDDT_SCALE_LABEL,
 		scaleMax: null,
 		scaleTooltip: void 0,
+		scaleTooltipProps: void 0,
 		valueLabel: void 0
 	};
 	return {
@@ -3045,6 +3099,7 @@ function resolveScaleProps(overlay, hasPlddt) {
 		scaleLabel: void 0,
 		scaleMax: null,
 		scaleTooltip: void 0,
+		scaleTooltipProps: void 0,
 		valueLabel: void 0
 	};
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/data-viz",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "main": "dist/index.cjs.js",
   "types": "dist/index.cjs.d.ts",
   "module": "dist/index.esm.js",
@@ -84,5 +84,5 @@
     "echarts": "^6.0.0",
     "lodash": "^4.17.21"
   },
-  "gitHead": "90a8e57f0c92c4bdea1f0cb4d1cd417461c50280"
+  "gitHead": "8fc0fe0e1562922e7e569f6e983968491d6db485"
 }