Clean up animation layers related types

Author: hanbyul-here

src/layers/NumericDataAnimationLayer/index.tsx

@@ -1,12 +1,5 @@
-import {
-  CompositeLayer,
-  Layer,
-  LayersList,
-  LayerContext,
-  GetPickingInfoParams,
-} from "deck.gl";
+import { CompositeLayer, Layer, LayersList } from "deck.gl";
 import type { CompositeLayerProps, UpdateParameters } from "deck.gl";
-import type { BitmapLayerPickingInfo } from "@deck.gl/layers";
 import type { Texture } from "@luma.gl/core";
 
 import { NumericDataAnimationPaintLayer } from "../NumericDataAnimationPaintLayer";
@@ -27,53 +20,19 @@ const textureSamplerDefaultOption = {
 
 export default class NumericDataAnimationLayer extends CompositeLayer<NumericDataAnimationLayerProps> {
   static layerName: string = "numeric-data-animation-layer";
-
-  // initializeState(context: LayerContext): void {
-  //   const { tileSize, textureParameters } = this.props;
-  //   const dataTextureStart = context.device.createTexture({
-  //     data: this.props.imageDataStart,
-  //     width: tileSize,
-  //     height: tileSize,
-  //     ...textureDefaultOption,
-  //     sampler: {
-  //       ...textureSamplerDefaultOption,
-  //       ...textureParameters,
-  //     },
-  //   });
-  //   const dataTextureEnd = context.device.createTexture({
-  //     data: this.props.imageDataEnd,
-  //     width: tileSize,
-  //     height: tileSize,
-  //     ...textureDefaultOption,
-  //     sampler: {
-  //       ...textureSamplerDefaultOption,
-  //       ...textureParameters,
-  //     },
-  //   });
-  //   this.setState({
-  //     dataTextureStart,
-  //     dataTextureEnd,
-  //   });
-  // }
   updateState(
     params: UpdateParameters<
-      Layer<NumericDataLayerProps & Required<CompositeLayerProps>>
+      Layer<NumericDataAnimationLayerProps & Required<CompositeLayerProps>>
     >
   ): void {
     const { props, oldProps, context } = params;
-    const { imageDataStart, imageDataEnd, timestamp } = props;
-    const {
-      imageDataStart: oldImageDataStart,
-      imageDataEnd: oldImageDataEnd,
-      timestamp: oldTimestamp,
-    } = oldProps;
-    if (
-      imageDataStart !== oldImageDataStart &&
-      imageDataEnd !== oldImageDataEnd
-    ) {
+    const { imageDataFrom, imageDataTo } = props;
+    const { imageDataFrom: oldImageDataFrom, imageDataTo: oldImageDataTo } =
+      oldProps;
+    if (imageDataFrom !== oldImageDataFrom && imageDataTo !== oldImageDataTo) {
       const { tileSize, textureParameters } = props;
-      const dataTextureStart = context.device.createTexture({
-        data: this.props.imageDataStart,
+      const dataTextureFrom = context.device.createTexture({
+        data: this.props.imageDataFrom,
         width: tileSize,
         height: tileSize,
         ...textureDefaultOption,
@@ -82,8 +41,8 @@ export default class NumericDataAnimationLayer extends CompositeLayer<NumericDat
           ...textureParameters,
         },
       });
-      const dataTextureEnd = context.device.createTexture({
-        data: this.props.imageDataEnd,
+      const dataTextureTo = context.device.createTexture({
+        data: this.props.imageDataTo,
         width: tileSize,
         height: tileSize,
         ...textureDefaultOption,
@@ -93,17 +52,17 @@ export default class NumericDataAnimationLayer extends CompositeLayer<NumericDat
         },
       });
       this.setState({
-        dataTextureStart,
-        dataTextureEnd,
+        dataTextureFrom,
+        dataTextureTo,
       });
     }
   }
 
   renderLayers(): Layer | null | LayersList {
     return new NumericDataAnimationPaintLayer(this.props, {
       id: `${this.props.id}-data`,
-      image: this.state.dataTextureStart as Texture,
-      imageEnd: this.state.dataTextureEnd as Texture,
+      image: this.state.dataTextureFrom as Texture,
+      imageTo: this.state.dataTextureTo as Texture,
     });
   }
 }

src/layers/NumericDataAnimationLayer/types.d.ts

@@ -1,13 +1,8 @@
-import type { NumericDataPaintLayerProps } from "../NumericDataPaintLayer/types";
-import type { BitmapLayerPickingInfo } from "@deck.gl/layers";
+import type { NumericDataAnimationPaintLayerProps } from "../NumericDataAnimationPaintLayer/types";
 import type { TypedArray, NumberDataType } from "zarrita";
 
 export interface NumericDataAnimationLayerProps
-  extends NumericDataPaintLayerProps {
-  imageDataStart: TypedArray<NumberDataType>;
-  imageDataEnd: TypedArray<NumberDataType>;
-}
-
-export interface NumericDataPickingInfo extends BitmapLayerPickingInfo {
-  dataValue: NumberDataType | null;
+  extends NumericDataAnimationPaintLayerProps {
+  imageDataFrom: TypedArray<NumberDataType>;
+  imageDataTo: TypedArray<NumberDataType>;
 }

src/layers/NumericDataAnimationPaintLayer/index.tsx

@@ -3,7 +3,7 @@ import { BitmapLayer } from "deck.gl";
 import type { Texture } from "@luma.gl/core";
 import type { ShaderModule } from "@luma.gl/shadertools";
 
-import type { NumericDataPaintLayerProps } from "./types";
+import type { NumericDataAnimationPaintLayerProps } from "./types";
 
 const uniformBlock = `\
   uniform ndUniforms {
@@ -18,7 +18,7 @@ export type NDProps = {
   max: number;
   step: number;
   colormap_texture: Texture;
-  image_end: Texture;
+  image_to: Texture;
 };
 
 const numericDataAnimationUniforms = {
@@ -38,16 +38,17 @@ const defaultProps = {
   min: 0,
   max: 0,
   tileSize: 256,
-  timestamp: 0.0,
+  step: 0.0,
   imageData: [],
+  imageTo: [],
   colormap_image: {
     type: "image",
     value: null,
     async: true,
   },
 };
 
-export class NumericDataAnimationPaintLayer extends BitmapLayer<NumericDataPaintLayerProps> {
+export class NumericDataAnimationPaintLayer extends BitmapLayer<NumericDataAnimationPaintLayerProps> {
   static layerName = "numeric-paint-animation-layer";
   static defaultProps = defaultProps;
 
@@ -57,12 +58,11 @@ export class NumericDataAnimationPaintLayer extends BitmapLayer<NumericDataPaint
       inject: {
         "fs:#decl": `
           uniform sampler2D colormap_texture; // texture is not included in ubo
-          uniform sampler2D image_end; 
+          uniform sampler2D image_to; 
         `,
         "fs:DECKGL_FILTER_COLOR": `
-          
           float start_value = color.r;
-          vec4 end_image = texture(image_end, geometry.uv);
+          vec4 end_image = texture(image_to, geometry.uv);
           float end_value = end_image.r;
           float value = mix(start_value, end_value, nd.step);
             if (isnan(value)) {
@@ -80,16 +80,16 @@ export class NumericDataAnimationPaintLayer extends BitmapLayer<NumericDataPaint
 
   // @ts-expect-error no opts type available
   draw(opts) {
-    const { colormap_image, imageEnd, timestamp, min, max } = this.props;
+    const { colormap_image, imageTo, step, min, max } = this.props;
 
     const sModels = super.getModels();
     if (colormap_image)
       for (const m of sModels) {
         m.shaderInputs.setProps({
           nd: {
             colormap_texture: colormap_image,
-            image_end: imageEnd,
-            step: timestamp,
+            image_to: imageTo,
+            step,
             min,
             max,
           },

src/layers/NumericDataAnimationPaintLayer/types.d.ts

@@ -1,9 +1,10 @@
 import type { BitmapLayerProps } from "deck.gl";
 
-export interface NumericDataPaintLayerProps extends BitmapLayerProps {
+export interface NumericDataAnimationPaintLayerProps extends BitmapLayerProps {
   colormap_image: string | Texture;
   min: number;
   max: number;
-  timestamp: number;
+  step: number;
   tileSize: number;
+  imageTo: Texture;
 }