feat(layers): Trim Top of Pyramids

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Use correct deck.gl 8.8 `getTileData` args.
 - Replace `postversion` script with `version` script for CI release.
 - Remove `package-lock.json` from root (since we use pnpm)
+- Clip low resolution tiles that might be padded by a loader.
 
 ## 0.13.1
 

packages/layers/src/multiscale-image-layer/multiscale-image-layer.js

@@ -7,6 +7,50 @@ import ImageLayer from '../image-layer';
 import { getImageSize, isInterleaved, SIGNAL_ABORTED } from '@vivjs/loaders';
 import { ColorPaletteExtension } from '@vivjs/extensions';
 
+/**
+ * Here we create an object for checking clipping the black border of incoming tiles
+ * at low resolutions i.e for zarr tiles which are padded by zarr.
+ * We need to check a few things before trimming:
+ *  1. The height/width of the full image at the current resolution
+ *  produces an image smaller than the current tileSize
+ *  2. The incoming image is padded to the tile size i.e one of its dimensions matches the tile size
+ * Once these have been confirmed, we trim the tile by going over it in row major order,
+ * keeping only the data that is not out of the clipped bounds.
+ * @param {{
+ *   loader: PixelSource[],
+ *   resolution: number,
+ *   tileSize: number,
+ * }}
+ * @return {{ clip: function, height: number, width: number }}
+ */
+const createTileClipper = ({ loader, resolution, tileSize }) => {
+  const planarSize = Object.values(getImageSize(loader[0]));
+  const [clippedHeight, clippedWidth] = planarSize.map(size =>
+    Math.floor(size / 2 ** resolution)
+  );
+  const isHeightUnderTileSize = clippedHeight < tileSize;
+  const isWidthUnderTileSize = clippedWidth < tileSize;
+  return {
+    clip: ({ data, height, width }) => {
+      if (
+        (isHeightUnderTileSize && height === tileSize) ||
+        (width === tileSize && isWidthUnderTileSize)
+      ) {
+        return data.filter((d, ind) => {
+          return !(
+            (ind % tileSize >= clippedWidth && isWidthUnderTileSize) ||
+            (isHeightUnderTileSize &&
+              Math.floor(ind / tileSize) >= clippedHeight)
+          );
+        });
+      }
+      return data;
+    },
+    height: clippedHeight,
+    width: clippedWidth
+  };
+};
+
 const defaultProps = {
   pickable: { type: 'boolean', value: true, compare: true },
   onHover: { type: 'function', value: null, compare: false },
@@ -87,7 +131,7 @@ const MultiscaleImageLayer = class extends CompositeLayer {
         const config = { x, y, selection, signal };
         return loader[resolution].getTile(config);
       };
-
+      const clipper = createTileClipper({ loader, resolution, tileSize });
       try {
         /*
          * Try to request the tile data. The pixels sources can throw
@@ -98,11 +142,22 @@ const MultiscaleImageLayer = class extends CompositeLayer {
          * return type, and optional throw for performance.
          */
         const tiles = await Promise.all(selections.map(getTile));
-
         const tile = {
-          data: tiles.map(d => d.data),
-          width: tiles[0].width,
-          height: tiles[0].height
+          data: tiles.map(d =>
+            clipper.clip({
+              data: d.data,
+              width: tiles[0].width,
+              height: tiles[0].height
+            })
+          ),
+          width:
+            clipper.width < tileSize && tiles[0].width === tileSize
+              ? clipper.width
+              : tiles[0].width,
+          height:
+            clipper.height < tileSize && tiles[0].height === tileSize
+              ? clipper.height
+              : tiles[0].height
         };
 
         if (isInterleaved(loader[resolution].shape)) {