@czi-sds/data-viz 2.5.0 → 2.5.1

package/dist/shared/ProteinStructureViewer.cjs.js

@@ -292,17 +292,35 @@ const MIN_WIDTH = 200;
 */
 const VIEWER_CONTAINER_NAME = "sds-structure-viewer";
 /**
-* Height reserved for the sequence panel along the bottom, and the viewer
-* width above which it grows. Measured against the container above rather than
-* the page, so a viewer embedded in a wider page sizes to the room it has.
+* Height reserved for the sequence panel along the bottom when the consumer
+* sets none, and the viewer width above which it grows. Measured against the
+* container above rather than the page, so a viewer embedded in a wider page
+* sizes to the room it has.
 *
-* The legend sits directly on top of the panel and offsets itself by these
-* same three values, so it reads them from here rather than restating them.
-* Copies that drifted would leave the legend floating off the panel.
+* The legend sits directly on top of the panel and offsets itself by the same
+* heights at the same breakpoint, so it reads them from here rather than
+* restating them. Copies that drifted would leave the legend floating off the
+* panel.
 */
 const SEQUENCE_HEIGHT = "max(104px, 30%)";
 const SEQUENCE_HEIGHT_WIDE = "max(134px, 32%)";
 /**
+* The sequence panel's height below `WIDE_VIEWER` and at or above it. A height
+* the consumer sets holds at every width, a number is read as pixels, and an
+* empty string leaves the defaults in place, as it would in a React style.
+*/
+function sequenceHeights(height) {
+	if (height === void 0 || height === "") return {
+		base: SEQUENCE_HEIGHT,
+		wide: SEQUENCE_HEIGHT_WIDE
+	};
+	const css = typeof height === "number" ? `${height}px` : height;
+	return {
+		base: css,
+		wide: css
+	};
+}
+/**
 * The element Mol* mounts into.
 *
 * This has to be its own node rather than the root: Mol* takes ownership of its
@@ -379,17 +397,20 @@ const ViewerRoot = (0, _emotion_styled.default)("div")`
   /*
    * Mol* puts the sequence panel in its "top" region; move it to the bottom and
    * shrink the main viewport region to match, so the structure sits above the
-   * sequence rather than behind it. The panel grows on wider viewers, and the
-   * viewport region's offset follows it.
+   * sequence rather than behind it. The panel grows on wider viewers unless the
+   * consumer has set its height, and the viewport region's offset follows it.
    */
   ${(props) => {
-	const { showSequenceViewer } = props;
+	const { sequenceViewerHeight, showSequenceViewer } = props;
+	const height = sequenceHeights(sequenceViewerHeight);
+	const mainBottom = showSequenceViewer ? height.base : "0";
+	const mainBottomWide = showSequenceViewer ? height.wide : "0";
 	return `
       .msp-plugin .msp-layout-region.msp-layout-top {
         display: ${showSequenceViewer ? "block" : "none"} !important;
         position: absolute !important;
         inset: auto 0 0 0 !important;
-        height: ${SEQUENCE_HEIGHT} !important;
+        height: ${height.base} !important;
       }
 
       .msp-plugin .msp-layout-region.msp-layout-main {
@@ -397,16 +418,16 @@ const ViewerRoot = (0, _emotion_styled.default)("div")`
         top: 0 !important;
         left: 0 !important;
         right: 0 !important;
-        bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT : "0"} !important;
+        bottom: ${mainBottom} !important;
       }
 
       @container ${VIEWER_CONTAINER_NAME} (min-width: 880px) {
         .msp-plugin .msp-layout-region.msp-layout-top {
-          height: ${SEQUENCE_HEIGHT_WIDE} !important;
+          height: ${height.wide} !important;
         }
 
         .msp-plugin .msp-layout-region.msp-layout-main {
-          bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT_WIDE : "0"} !important;
+          bottom: ${mainBottomWide} !important;
         }
       }
     `;
@@ -448,12 +469,13 @@ const LegendOverlay = (0, _emotion_styled.default)("div")`
 
   ${(props) => {
 	const spaces = (0, _czi_sds_components.getSpaces)(props);
-	const { showSequenceViewer } = props;
+	const { sequenceViewerHeight, showSequenceViewer } = props;
+	const height = sequenceHeights(sequenceViewerHeight);
 	return `
       right: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
       gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xs}px;
       padding-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
-      bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT : "0"};
+      bottom: ${showSequenceViewer ? height.base : "0"};
 
       /*
        * Track the sequence panel as it grows on wider viewers. The panel is
@@ -461,7 +483,7 @@ const LegendOverlay = (0, _emotion_styled.default)("div")`
        * would part the legend from it on a viewer narrower than its page.
        */
       @container ${VIEWER_CONTAINER_NAME} (min-width: 880px) {
-        bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT_WIDE : "0"};
+        bottom: ${showSequenceViewer ? height.wide : "0"};
       }
 
       /* Spacer balancing the axes widget pinned in the opposite corner. */
@@ -637,7 +659,7 @@ function readoutSlot(label, value, residueCount) {
 * residue takes priority so the user can inspect others without losing their
 * selection.
 */
-function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChains, hoveredResidue = null, onChainHover, onChainSelect, onChainToggle, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, scaleTooltipProps, selectedChains, selectedResidue = null, showSequenceViewer, stats, valueLabel }) {
+function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChains, hoveredResidue = null, onChainHover, onChainSelect, onChainToggle, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, scaleTooltipProps, selectedChains, selectedResidue = null, sequenceViewerHeight, showSequenceViewer, stats, valueLabel }) {
 	var _activeResidue$residu, _stats$, _stats$2, _stats$3;
 	const activeResidue = hoveredResidue !== null && hoveredResidue !== void 0 ? hoveredResidue : selectedResidue;
 	const showResidue = activeResidue !== null;
@@ -652,6 +674,7 @@ function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChai
 		showResidue ? readoutSlot("pLDDT", activeResidue.plddt, residueCount) : (_stats$3 = stats[2]) !== null && _stats$3 !== void 0 ? _stats$3 : null
 	];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LegendOverlay, {
+		sequenceViewerHeight,
 		showSequenceViewer,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatsGrid, { children: Array.from({ length: SLOT_COUNT }, (_, i) => {
 			var _slots$i;
@@ -3638,6 +3661,7 @@ const _excluded = [
 	"sceneMode",
 	"selection",
 	"sequenceViewerBackgroundColor",
+	"sequenceViewerHeight",
 	"showAxes",
 	"showChainLegend",
 	"showLegend",
@@ -3711,7 +3735,7 @@ function resolveScaleProps(colorBy, overlay) {
 */
 const ProteinStructureViewer = (0, react.forwardRef)((props, ref) => {
 	var _selection$chains;
-	const { backgroundColor, chainColors: chainColorOverrides, colorBy: colorByProp, disableChainHighlightOnHover = false, download, hiddenChains: hiddenChainsProp, highlights, initialCamera, onCameraChange, onChainVisibilityChange, onChainsChange, molstarSpec, onDispose, onError, onReady, onResidueClick, onResidueHover, onSelectionChange, onStructureLoad, orientation, projection, representation = "cartoon", structure, plddt, residueOverlay, sceneMode = "managed", selection: selectionProp, sequenceViewerBackgroundColor, showAxes = true, showChainLegend = true, showLegend = true, showSequenceViewer = true, stats } = props, rest = require_objectSpread2._objectWithoutProperties(props, _excluded);
+	const { backgroundColor, chainColors: chainColorOverrides, colorBy: colorByProp, disableChainHighlightOnHover = false, download, hiddenChains: hiddenChainsProp, highlights, initialCamera, onCameraChange, onChainVisibilityChange, onChainsChange, molstarSpec, onDispose, onError, onReady, onResidueClick, onResidueHover, onSelectionChange, onStructureLoad, orientation, projection, representation = "cartoon", structure, plddt, residueOverlay, sceneMode = "managed", selection: selectionProp, sequenceViewerBackgroundColor, sequenceViewerHeight, showAxes = true, showChainLegend = true, showLegend = true, showSequenceViewer = true, stats } = props, rest = require_objectSpread2._objectWithoutProperties(props, _excluded);
 	const theme = (0, _mui_material_styles.useTheme)();
 	const mode = (0, _czi_sds_components.getMode)({ theme });
 	const semanticColors = (0, _czi_sds_components.getSemanticColors)({ theme });
@@ -3892,6 +3916,7 @@ const ProteinStructureViewer = (0, react.forwardRef)((props, ref) => {
 	const plddtColoringActive = colorBy === "plddt";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ViewerRoot, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
 		ref,
+		sequenceViewerHeight,
 		showSequenceViewer
 	}, rest), {}, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PluginMount, { ref: pluginMountRef }), showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StructureLegend, require_objectSpread2._objectSpread2({
 		chainBandColors: plddtColoringActive ? require_renderStructureImage.PLDDT_BAND_COLORS : void 0,
@@ -3904,6 +3929,7 @@ const ProteinStructureViewer = (0, react.forwardRef)((props, ref) => {
 		onChainToggle: toggleChain,
 		selectedChains,
 		selectedResidue: selectedReadout,
+		sequenceViewerHeight,
 		showSequenceViewer,
 		stats: stats !== null && stats !== void 0 ? stats : []
 	}, scaleProps))] }));

package/dist/shared/ProteinStructureViewer.esm.js

@@ -290,17 +290,35 @@ const MIN_WIDTH = 200;
 */
 const VIEWER_CONTAINER_NAME = "sds-structure-viewer";
 /**
-* Height reserved for the sequence panel along the bottom, and the viewer
-* width above which it grows. Measured against the container above rather than
-* the page, so a viewer embedded in a wider page sizes to the room it has.
+* Height reserved for the sequence panel along the bottom when the consumer
+* sets none, and the viewer width above which it grows. Measured against the
+* container above rather than the page, so a viewer embedded in a wider page
+* sizes to the room it has.
 *
-* The legend sits directly on top of the panel and offsets itself by these
-* same three values, so it reads them from here rather than restating them.
-* Copies that drifted would leave the legend floating off the panel.
+* The legend sits directly on top of the panel and offsets itself by the same
+* heights at the same breakpoint, so it reads them from here rather than
+* restating them. Copies that drifted would leave the legend floating off the
+* panel.
 */
 const SEQUENCE_HEIGHT = "max(104px, 30%)";
 const SEQUENCE_HEIGHT_WIDE = "max(134px, 32%)";
 /**
+* The sequence panel's height below `WIDE_VIEWER` and at or above it. A height
+* the consumer sets holds at every width, a number is read as pixels, and an
+* empty string leaves the defaults in place, as it would in a React style.
+*/
+function sequenceHeights(height) {
+	if (height === void 0 || height === "") return {
+		base: SEQUENCE_HEIGHT,
+		wide: SEQUENCE_HEIGHT_WIDE
+	};
+	const css = typeof height === "number" ? `${height}px` : height;
+	return {
+		base: css,
+		wide: css
+	};
+}
+/**
 * The element Mol* mounts into.
 *
 * This has to be its own node rather than the root: Mol* takes ownership of its
@@ -377,17 +395,20 @@ const ViewerRoot = styled("div")`
   /*
    * Mol* puts the sequence panel in its "top" region; move it to the bottom and
    * shrink the main viewport region to match, so the structure sits above the
-   * sequence rather than behind it. The panel grows on wider viewers, and the
-   * viewport region's offset follows it.
+   * sequence rather than behind it. The panel grows on wider viewers unless the
+   * consumer has set its height, and the viewport region's offset follows it.
    */
   ${(props) => {
-	const { showSequenceViewer } = props;
+	const { sequenceViewerHeight, showSequenceViewer } = props;
+	const height = sequenceHeights(sequenceViewerHeight);
+	const mainBottom = showSequenceViewer ? height.base : "0";
+	const mainBottomWide = showSequenceViewer ? height.wide : "0";
 	return `
       .msp-plugin .msp-layout-region.msp-layout-top {
         display: ${showSequenceViewer ? "block" : "none"} !important;
         position: absolute !important;
         inset: auto 0 0 0 !important;
-        height: ${SEQUENCE_HEIGHT} !important;
+        height: ${height.base} !important;
       }
 
       .msp-plugin .msp-layout-region.msp-layout-main {
@@ -395,16 +416,16 @@ const ViewerRoot = styled("div")`
         top: 0 !important;
         left: 0 !important;
         right: 0 !important;
-        bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT : "0"} !important;
+        bottom: ${mainBottom} !important;
       }
 
       @container ${VIEWER_CONTAINER_NAME} (min-width: 880px) {
         .msp-plugin .msp-layout-region.msp-layout-top {
-          height: ${SEQUENCE_HEIGHT_WIDE} !important;
+          height: ${height.wide} !important;
         }
 
         .msp-plugin .msp-layout-region.msp-layout-main {
-          bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT_WIDE : "0"} !important;
+          bottom: ${mainBottomWide} !important;
         }
       }
     `;
@@ -446,12 +467,13 @@ const LegendOverlay = styled("div")`
 
   ${(props) => {
 	const spaces = getSpaces(props);
-	const { showSequenceViewer } = props;
+	const { sequenceViewerHeight, showSequenceViewer } = props;
+	const height = sequenceHeights(sequenceViewerHeight);
 	return `
       right: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
       gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xs}px;
       padding-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
-      bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT : "0"};
+      bottom: ${showSequenceViewer ? height.base : "0"};
 
       /*
        * Track the sequence panel as it grows on wider viewers. The panel is
@@ -459,7 +481,7 @@ const LegendOverlay = styled("div")`
        * would part the legend from it on a viewer narrower than its page.
        */
       @container ${VIEWER_CONTAINER_NAME} (min-width: 880px) {
-        bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT_WIDE : "0"};
+        bottom: ${showSequenceViewer ? height.wide : "0"};
       }
 
       /* Spacer balancing the axes widget pinned in the opposite corner. */
@@ -635,7 +657,7 @@ function readoutSlot(label, value, residueCount) {
 * residue takes priority so the user can inspect others without losing their
 * selection.
 */
-function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChains, hoveredResidue = null, onChainHover, onChainSelect, onChainToggle, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, scaleTooltipProps, selectedChains, selectedResidue = null, showSequenceViewer, stats, valueLabel }) {
+function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChains, hoveredResidue = null, onChainHover, onChainSelect, onChainToggle, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, scaleTooltipProps, selectedChains, selectedResidue = null, sequenceViewerHeight, showSequenceViewer, stats, valueLabel }) {
 	var _activeResidue$residu, _stats$, _stats$2, _stats$3;
 	const activeResidue = hoveredResidue !== null && hoveredResidue !== void 0 ? hoveredResidue : selectedResidue;
 	const showResidue = activeResidue !== null;
@@ -650,6 +672,7 @@ function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChai
 		showResidue ? readoutSlot("pLDDT", activeResidue.plddt, residueCount) : (_stats$3 = stats[2]) !== null && _stats$3 !== void 0 ? _stats$3 : null
 	];
 	return /* @__PURE__ */ jsxs(LegendOverlay, {
+		sequenceViewerHeight,
 		showSequenceViewer,
 		children: [/* @__PURE__ */ jsx(StatsGrid, { children: Array.from({ length: SLOT_COUNT }, (_, i) => {
 			var _slots$i;
@@ -3636,6 +3659,7 @@ const _excluded = [
 	"sceneMode",
 	"selection",
 	"sequenceViewerBackgroundColor",
+	"sequenceViewerHeight",
 	"showAxes",
 	"showChainLegend",
 	"showLegend",
@@ -3698,7 +3722,7 @@ function resolveScaleProps(colorBy, overlay) {
 }
 var ProteinStructureViewer_default = memo(forwardRef((props, ref) => {
 	var _selection$chains;
-	const { backgroundColor, chainColors: chainColorOverrides, colorBy: colorByProp, disableChainHighlightOnHover = false, download, hiddenChains: hiddenChainsProp, highlights, initialCamera, onCameraChange, onChainVisibilityChange, onChainsChange, molstarSpec, onDispose, onError, onReady, onResidueClick, onResidueHover, onSelectionChange, onStructureLoad, orientation, projection, representation = "cartoon", structure, plddt, residueOverlay, sceneMode = "managed", selection: selectionProp, sequenceViewerBackgroundColor, showAxes = true, showChainLegend = true, showLegend = true, showSequenceViewer = true, stats } = props, rest = _objectWithoutProperties(props, _excluded);
+	const { backgroundColor, chainColors: chainColorOverrides, colorBy: colorByProp, disableChainHighlightOnHover = false, download, hiddenChains: hiddenChainsProp, highlights, initialCamera, onCameraChange, onChainVisibilityChange, onChainsChange, molstarSpec, onDispose, onError, onReady, onResidueClick, onResidueHover, onSelectionChange, onStructureLoad, orientation, projection, representation = "cartoon", structure, plddt, residueOverlay, sceneMode = "managed", selection: selectionProp, sequenceViewerBackgroundColor, sequenceViewerHeight, showAxes = true, showChainLegend = true, showLegend = true, showSequenceViewer = true, stats } = props, rest = _objectWithoutProperties(props, _excluded);
 	const theme = useTheme();
 	const mode = getMode({ theme });
 	const semanticColors = getSemanticColors({ theme });
@@ -3879,6 +3903,7 @@ var ProteinStructureViewer_default = memo(forwardRef((props, ref) => {
 	const plddtColoringActive = colorBy === "plddt";
 	return /* @__PURE__ */ jsxs(ViewerRoot, _objectSpread2(_objectSpread2({
 		ref,
+		sequenceViewerHeight,
 		showSequenceViewer
 	}, rest), {}, { children: [/* @__PURE__ */ jsx(PluginMount, { ref: pluginMountRef }), showLegend && /* @__PURE__ */ jsx(StructureLegend, _objectSpread2({
 		chainBandColors: plddtColoringActive ? PLDDT_BAND_COLORS : void 0,
@@ -3891,6 +3916,7 @@ var ProteinStructureViewer_default = memo(forwardRef((props, ref) => {
 		onChainToggle: toggleChain,
 		selectedChains,
 		selectedResidue: selectedReadout,
+		sequenceViewerHeight,
 		showSequenceViewer,
 		stats: stats !== null && stats !== void 0 ? stats : []
 	}, scaleProps))] }));

package/dist/shared/index2.cjs.d.ts

@@ -361,6 +361,17 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
    * @default true
    */
   showSequenceViewer?: boolean;
+  /**
+   * Height of the sequence panel, as any CSS length; a number is read as
+   * pixels, and a percentage is of the viewer's own height. The 3D view and the
+   * legend move up to make room for it. Ignored while `showSequenceViewer` is
+   * off.
+   *
+   * Left undefined, the panel takes `max(104px, 30%)` of the viewer, growing to
+   * `max(134px, 32%)` once the viewer is 880px wide or more. A height set here
+   * holds at every width.
+   */
+  sequenceViewerHeight?: number | string;
   /**
    * Show the stats and color scale legend overlaid on the viewer.
    * @default true

package/dist/shared/index2.esm.d.ts

@@ -361,6 +361,17 @@ interface ProteinStructureViewerProps extends Omit<HTMLAttributes<HTMLDivElement
    * @default true
    */
   showSequenceViewer?: boolean;
+  /**
+   * Height of the sequence panel, as any CSS length; a number is read as
+   * pixels, and a percentage is of the viewer's own height. The 3D view and the
+   * legend move up to make room for it. Ignored while `showSequenceViewer` is
+   * off.
+   *
+   * Left undefined, the panel takes `max(104px, 30%)` of the viewer, growing to
+   * `max(134px, 32%)` once the viewer is 880px wide or more. A height set here
+   * holds at every width.
+   */
+  sequenceViewerHeight?: number | string;
   /**
    * Show the stats and color scale legend overlaid on the viewer.
    * @default true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/data-viz",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "main": "dist/index.cjs.js",
   "types": "dist/index.cjs.d.ts",
   "module": "dist/index.esm.js",
@@ -157,5 +157,5 @@
     "echarts": "^6.0.0",
     "lodash": "^4.17.21"
   },
-  "gitHead": "af9ead042355f832da2c98e7dc3ecaafd1ea1664"
+  "gitHead": "aa0c756f82d9b899e9e7cc66ab2a6d1684ceb1f7"
 }