@czi-sds/data-viz 2.4.0 → 2.4.2

package/dist/shared/ProteinStructureViewer.cjs.js

@@ -1052,8 +1052,8 @@ const HOVER_THROTTLE_MS = 3 * 16.666;
 const COPIED_FEEDBACK_MS = 2e3;
 //#endregion
 //#region src/core/ProteinStructureViewer/components/SequenceView/style.ts
-/** Height of the fade that masks residues scrolling under the panel header. */
-const SCROLL_FADE_HEIGHT = 8;
+/** Height of the fades that mask residues scrolling past the panel's edges. */
+const SCROLL_FADE_HEIGHT = 10;
 const SequencePanel = (0, _emotion_styled.default)("div")`
   display: flex;
   flex-direction: column;
@@ -1167,8 +1167,9 @@ const ResidueCountValue = (0, _emotion_styled.default)("span")`
 `;
 /**
 * Scroll region for the residue grid. The `::before` fade masks residues as
-* they scroll up under the header, so it has to start from whatever the panel
-* is painted with or it leaves a mismatched strip.
+* they scroll up under the header and the `::after` fade masks them running off
+* the panel's bottom edge, so both have to start from whatever the panel is
+* painted with or they leave a mismatched strip.
 */
 const SequenceScroller = (0, _emotion_styled.default)("div")`
   position: relative;
@@ -1178,16 +1179,26 @@ const SequenceScroller = (0, _emotion_styled.default)("div")`
   ${(props) => {
 	var _props$backgroundColo3, _semanticColors$base10;
 	const semanticColors = (0, _czi_sds_components.getSemanticColors)(props);
+	const surface = (_props$backgroundColo3 = props.backgroundColor) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.surfacePrimary;
 	return `
-      &::before {
+      &::before,
+      &::after {
         content: "";
         position: absolute;
         inset-inline: 0;
-        top: 0;
         z-index: 10;
         height: ${SCROLL_FADE_HEIGHT}px;
         pointer-events: none;
-        background: linear-gradient(to bottom, ${(_props$backgroundColo3 = props.backgroundColor) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.surfacePrimary}, transparent);
+      }
+
+      &::before {
+        top: 0;
+        background: linear-gradient(to bottom, ${surface}, transparent);
+      }
+
+      &::after {
+        bottom: 0;
+        background: linear-gradient(to top, ${surface}, transparent);
       }
     `;
 }}
@@ -2065,12 +2076,14 @@ const MAIN_AXIS_OFFSET = -((_getSpaces$m = (_getSpaces = (0, _czi_sds_components
 * only the tooltip, not the residue grid.
 */
 const ResidueTooltip = (0, react.forwardRef)((_props, ref) => {
-	var _getSemanticColors;
+	var _semanticColors$base, _semanticColors$base2;
 	const [{ anchorEl, label }, setState] = (0, react.useState)({
 		anchorEl: null,
 		label: ""
 	});
-	const residueTooltipBackgroundColor = (_getSemanticColors = (0, _czi_sds_components.getSemanticColors)({ theme: (0, _mui_material.useTheme)() })) === null || _getSemanticColors === void 0 || (_getSemanticColors = _getSemanticColors.base) === null || _getSemanticColors === void 0 ? void 0 : _getSemanticColors.backgroundPrimary;
+	const semanticColors = (0, _czi_sds_components.getSemanticColors)({ theme: (0, _mui_material.useTheme)() });
+	const residueTooltipBackgroundColor = semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.backgroundPrimary;
+	const residueTooltipTextColor = semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.textPrimary;
 	(0, react.useImperativeHandle)(ref, () => ({
 		hide: () => setState((prev) => prev.anchorEl === null ? prev : require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { anchorEl: null })),
 		show: (nextAnchorEl, nextLabel) => setState({
@@ -2091,7 +2104,10 @@ const ResidueTooltip = (0, react.forwardRef)((_props, ref) => {
 					options: { offset: [0, MAIN_AXIS_OFFSET] }
 				}]
 			},
-			tooltip: { style: { backgroundColor: residueTooltipBackgroundColor } },
+			tooltip: { style: {
+				backgroundColor: residueTooltipBackgroundColor,
+				color: residueTooltipTextColor
+			} },
 			arrow: { style: { color: residueTooltipBackgroundColor } }
 		},
 		title: label,
@@ -2689,6 +2705,7 @@ function useCameraReset() {
 }
 //#endregion
 //#region src/core/ProteinStructureViewer/components/Viewport/style.ts
+const _excluded$1 = ["showAxes"];
 /**
 * Pinned to the lower-left of the viewport, clear of the sequence panel below
 * and the axes widget in the corner.
@@ -2700,14 +2717,15 @@ function useCameraReset() {
 */
 const ViewportButtonStack = (0, _emotion_styled.default)("div")`
   position: absolute;
-  bottom: 48px;
   z-index: 10;
   display: flex;
   flex-direction: column;
 
   ${(props) => {
-	const spaces = (0, _czi_sds_components.getSpaces)(props);
+	const { showAxes } = props;
+	const spaces = (0, _czi_sds_components.getSpaces)(require_objectSpread2._objectWithoutProperties(props, _excluded$1));
 	return `
+      bottom: ${showAxes ? 48 : spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
       left: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
       gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
     `;
@@ -2759,37 +2777,40 @@ function createViewportView(viewSettings) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_styles.ThemeProvider, {
 				theme,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ViewportButtonStack, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					hidden: !showAxes || !cameraChanged,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Tooltip, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ViewportButtonStack, {
+					showAxes,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						hidden: !cameraChanged,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Tooltip, {
+							arrow: true,
+							placement: "right",
+							title: "Reset camera",
+							textAlign: "left",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Button, {
+								"aria-label": "Reset camera",
+								onClick: resetCamera,
+								sdsStyle: "minimal",
+								sdsType: "secondary",
+								size: "medium",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.ArrowCounterClockwiseIcon, {})
+							})
+						})
+					}), download && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Tooltip, {
 						arrow: true,
 						placement: "right",
-						title: "Reset camera",
+						title: "Download image",
 						textAlign: "left",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Button, {
-							"aria-label": "Reset camera",
-							onClick: resetCamera,
+							"aria-label": "Download image of the structure",
+							disabled: downloading,
+							onClick: captureImage,
 							sdsStyle: "minimal",
 							sdsType: "secondary",
 							size: "medium",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.ArrowCounterClockwiseIcon, {})
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.ApertureIcon, {})
 						})
-					})
-				}), download && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Tooltip, {
-					arrow: true,
-					placement: "right",
-					title: "Download image",
-					textAlign: "left",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Button, {
-						"aria-label": "Download image of the structure",
-						disabled: downloading,
-						onClick: captureImage,
-						sdsStyle: "minimal",
-						sdsType: "secondary",
-						size: "medium",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.ApertureIcon, {})
-					})
-				})] })
+					})]
+				})
 			})
 		] });
 	};

package/dist/shared/ProteinStructureViewer.esm.js

@@ -1051,8 +1051,8 @@ const HOVER_THROTTLE_MS = 3 * 16.666;
 const COPIED_FEEDBACK_MS = 2e3;
 //#endregion
 //#region src/core/ProteinStructureViewer/components/SequenceView/style.ts
-/** Height of the fade that masks residues scrolling under the panel header. */
-const SCROLL_FADE_HEIGHT = 8;
+/** Height of the fades that mask residues scrolling past the panel's edges. */
+const SCROLL_FADE_HEIGHT = 10;
 const SequencePanel = styled("div")`
   display: flex;
   flex-direction: column;
@@ -1166,8 +1166,9 @@ const ResidueCountValue = styled("span")`
 `;
 /**
 * Scroll region for the residue grid. The `::before` fade masks residues as
-* they scroll up under the header, so it has to start from whatever the panel
-* is painted with or it leaves a mismatched strip.
+* they scroll up under the header and the `::after` fade masks them running off
+* the panel's bottom edge, so both have to start from whatever the panel is
+* painted with or they leave a mismatched strip.
 */
 const SequenceScroller = styled("div")`
   position: relative;
@@ -1177,16 +1178,26 @@ const SequenceScroller = styled("div")`
   ${(props) => {
 	var _props$backgroundColo3, _semanticColors$base10;
 	const semanticColors = getSemanticColors(props);
+	const surface = (_props$backgroundColo3 = props.backgroundColor) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.surfacePrimary;
 	return `
-      &::before {
+      &::before,
+      &::after {
         content: "";
         position: absolute;
         inset-inline: 0;
-        top: 0;
         z-index: 10;
         height: ${SCROLL_FADE_HEIGHT}px;
         pointer-events: none;
-        background: linear-gradient(to bottom, ${(_props$backgroundColo3 = props.backgroundColor) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.surfacePrimary}, transparent);
+      }
+
+      &::before {
+        top: 0;
+        background: linear-gradient(to bottom, ${surface}, transparent);
+      }
+
+      &::after {
+        bottom: 0;
+        background: linear-gradient(to top, ${surface}, transparent);
       }
     `;
 }}
@@ -2064,12 +2075,14 @@ const MAIN_AXIS_OFFSET = -((_getSpaces$m = (_getSpaces = getSpaces({ theme: defa
 * only the tooltip, not the residue grid.
 */
 const ResidueTooltip = forwardRef((_props, ref) => {
-	var _getSemanticColors;
+	var _semanticColors$base, _semanticColors$base2;
 	const [{ anchorEl, label }, setState] = useState({
 		anchorEl: null,
 		label: ""
 	});
-	const residueTooltipBackgroundColor = (_getSemanticColors = getSemanticColors({ theme: useTheme$1() })) === null || _getSemanticColors === void 0 || (_getSemanticColors = _getSemanticColors.base) === null || _getSemanticColors === void 0 ? void 0 : _getSemanticColors.backgroundPrimary;
+	const semanticColors = getSemanticColors({ theme: useTheme$1() });
+	const residueTooltipBackgroundColor = semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.backgroundPrimary;
+	const residueTooltipTextColor = semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.textPrimary;
 	useImperativeHandle(ref, () => ({
 		hide: () => setState((prev) => prev.anchorEl === null ? prev : _objectSpread2(_objectSpread2({}, prev), {}, { anchorEl: null })),
 		show: (nextAnchorEl, nextLabel) => setState({
@@ -2090,7 +2103,10 @@ const ResidueTooltip = forwardRef((_props, ref) => {
 					options: { offset: [0, MAIN_AXIS_OFFSET] }
 				}]
 			},
-			tooltip: { style: { backgroundColor: residueTooltipBackgroundColor } },
+			tooltip: { style: {
+				backgroundColor: residueTooltipBackgroundColor,
+				color: residueTooltipTextColor
+			} },
 			arrow: { style: { color: residueTooltipBackgroundColor } }
 		},
 		title: label,
@@ -2688,6 +2704,7 @@ function useCameraReset() {
 }
 //#endregion
 //#region src/core/ProteinStructureViewer/components/Viewport/style.ts
+const _excluded$1 = ["showAxes"];
 /**
 * Pinned to the lower-left of the viewport, clear of the sequence panel below
 * and the axes widget in the corner.
@@ -2699,14 +2716,15 @@ function useCameraReset() {
 */
 const ViewportButtonStack = styled("div")`
   position: absolute;
-  bottom: 48px;
   z-index: 10;
   display: flex;
   flex-direction: column;
 
   ${(props) => {
-	const spaces = getSpaces(props);
+	const { showAxes } = props;
+	const spaces = getSpaces(_objectWithoutProperties(props, _excluded$1));
 	return `
+      bottom: ${showAxes ? 48 : spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
       left: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
       gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
     `;
@@ -2758,37 +2776,40 @@ function createViewportView(viewSettings) {
 			}),
 			/* @__PURE__ */ jsx(ThemeProvider, {
 				theme,
-				children: /* @__PURE__ */ jsxs(ViewportButtonStack, { children: [/* @__PURE__ */ jsx("div", {
-					hidden: !showAxes || !cameraChanged,
-					children: /* @__PURE__ */ jsx(Tooltip, {
+				children: /* @__PURE__ */ jsxs(ViewportButtonStack, {
+					showAxes,
+					children: [/* @__PURE__ */ jsx("div", {
+						hidden: !cameraChanged,
+						children: /* @__PURE__ */ jsx(Tooltip, {
+							arrow: true,
+							placement: "right",
+							title: "Reset camera",
+							textAlign: "left",
+							children: /* @__PURE__ */ jsx(Button, {
+								"aria-label": "Reset camera",
+								onClick: resetCamera,
+								sdsStyle: "minimal",
+								sdsType: "secondary",
+								size: "medium",
+								children: /* @__PURE__ */ jsx(ArrowCounterClockwiseIcon, {})
+							})
+						})
+					}), download && /* @__PURE__ */ jsx(Tooltip, {
 						arrow: true,
 						placement: "right",
-						title: "Reset camera",
+						title: "Download image",
 						textAlign: "left",
 						children: /* @__PURE__ */ jsx(Button, {
-							"aria-label": "Reset camera",
-							onClick: resetCamera,
+							"aria-label": "Download image of the structure",
+							disabled: downloading,
+							onClick: captureImage,
 							sdsStyle: "minimal",
 							sdsType: "secondary",
 							size: "medium",
-							children: /* @__PURE__ */ jsx(ArrowCounterClockwiseIcon, {})
+							children: /* @__PURE__ */ jsx(ApertureIcon, {})
 						})
-					})
-				}), download && /* @__PURE__ */ jsx(Tooltip, {
-					arrow: true,
-					placement: "right",
-					title: "Download image",
-					textAlign: "left",
-					children: /* @__PURE__ */ jsx(Button, {
-						"aria-label": "Download image of the structure",
-						disabled: downloading,
-						onClick: captureImage,
-						sdsStyle: "minimal",
-						sdsType: "secondary",
-						size: "medium",
-						children: /* @__PURE__ */ jsx(ApertureIcon, {})
-					})
-				})] })
+					})]
+				})
 			})
 		] });
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/data-viz",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "main": "dist/index.cjs.js",
   "types": "dist/index.cjs.d.ts",
   "module": "dist/index.esm.js",
@@ -58,6 +58,7 @@
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
   },
+  "sideEffects": false,
   "author": "",
   "homepage": "https://github.com/chanzuckerberg/sci-components/tree/main/packages/sci-data-viz#readme",
   "description": "2023 Science Initiative Data Visualization Component Library",
@@ -146,5 +147,5 @@
     "echarts": "^6.0.0",
     "lodash": "^4.17.21"
   },
-  "gitHead": "07207d9c4e45054e5c3cde8d6241c8d1442b1d71"
+  "gitHead": "4fb1150d51f5cde0b88503ca0146eba3b53f1ab1"
 }