@czi-sds/data-viz 2.4.1 → 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);
       }
     `;
 }}

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);
       }
     `;
 }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/data-viz",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "main": "dist/index.cjs.js",
   "types": "dist/index.cjs.d.ts",
   "module": "dist/index.esm.js",
@@ -147,5 +147,5 @@
     "echarts": "^6.0.0",
     "lodash": "^4.17.21"
   },
-  "gitHead": "a4587a068a8e457bb068a1b170951c8f4f396bd5"
+  "gitHead": "4fb1150d51f5cde0b88503ca0146eba3b53f1ab1"
 }