@czi-sds/data-viz 2.4.0 → 2.4.1

package/dist/shared/ProteinStructureViewer.cjs.js

@@ -2065,12 +2065,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 +2093,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 +2694,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 +2706,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 +2766,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

@@ -2064,12 +2064,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 +2092,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 +2693,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 +2705,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 +2765,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.1",
   "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": "a4587a068a8e457bb068a1b170951c8f4f396bd5"
 }