Datetime selection #2

Author: hanbyul-here

src/App.tsx

@@ -12,6 +12,7 @@ import Panel from "@/components/Panel";
 import Description from "@/components/Description";
 import Dropdown from "@/components/ui/Dropdown";
 import RangeSlider from "@/components/ui/RangeSlider";
+import SingleSlider from "@/components/ui/Slider";
 import CheckBox from "@/components/ui/Checkbox";
 
 import "maplibre-gl/dist/maplibre-gl.css";
@@ -46,33 +47,34 @@ function DeckGLOverlay(props) {
   return null;
 }
 
-async function getTileData({ index, signal }: _TileLoadProps) {
-  if (signal?.aborted) {
-    console.error("Signal aborted: ", signal);
-    return null;
-  }
-  const scale = zarrReader.scale;
-
-  const { min, max } = scale;
-  const chunkData = await zarrReader.getTileData(index);
-  if (chunkData) {
-    return {
-      imageData: chunkData,
-      min,
-      max,
-    };
-  } else {
-    throw Error("No tile data available");
-  }
-}
-
 function App() {
   const [selectedColormap, setSelectedColormap] = useState<string>("viridis");
   const [minMax, setMinMax] = useState<{ min: number; max: number }>(
     zarrReader.scale
   );
+  const [timestamp, setTimestamp] = useState<number>(0);
   const [showTooltip, setShowTooltip] = useState<boolean>(true);
 
+  async function getTileData({ index, signal }: _TileLoadProps) {
+    if (signal?.aborted) {
+      console.error("Signal aborted: ", signal);
+      return null;
+    }
+    const scale = zarrReader.scale;
+
+    const { min, max } = scale;
+    const chunkData = await zarrReader.getTileData({ ...index, timestamp });
+    if (chunkData) {
+      return {
+        imageData: chunkData,
+        min,
+        max,
+      };
+    } else {
+      throw Error("No tile data available");
+    }
+  }
+
   const layers = [
     new TileLayer({
       id: "TileLayer",
@@ -96,6 +98,9 @@ function App() {
       // Any better way to do this?
       selectedColormap,
       minMax,
+      updateTriggers: {
+        getTileData: timestamp,
+      },
       renderSubLayers: (props) => {
         const { imageData } = props.data;
         const { boundingBox } = props.tile;
@@ -156,8 +161,16 @@ function App() {
         <Dropdown onChange={setSelectedColormap} />
         <RangeSlider
           minMax={[zarrReader.scale.min, zarrReader.scale.max]}
+          label="Scale"
           onValueChange={setMinMax}
         />
+
+        <SingleSlider
+          minMax={[0, 2]}
+          step={1}
+          label="Timestamp"
+          onValueChange={setTimestamp}
+        />
         <CheckBox onCheckedChange={setShowTooltip} />
       </Panel>
     </>

src/components/ui/RangeSlider.tsx

@@ -1,15 +1,17 @@
 import { Slider } from "@chakra-ui/react";
+import type { SliderUIProps } from "./Slider";
 
-type RangeSliderUIProps = {
-  minMax: [number, number];
+type RangeSliderUIProps = SliderUIProps & {
   onValueChange: (param: { min: number; max: number }) => void;
 };
 
 export default function RangeSliderUI({
   minMax,
+  step = 20,
+  label,
   onValueChange,
 }: RangeSliderUIProps) {
-  const step = (minMax[1] - minMax[0]) / 20;
+  const oneStep = (minMax[1] - minMax[0]) / step;
 
   const handleChange = (detail: Slider.ValueChangeDetails) => {
     onValueChange({
@@ -24,10 +26,10 @@ export default function RangeSliderUI({
       defaultValue={minMax}
       max={minMax[1]}
       min={minMax[0]}
-      minStepsBetweenThumbs={step}
+      minStepsBetweenThumbs={oneStep}
       onValueChangeEnd={handleChange}
     >
-      <Slider.Label> Scale </Slider.Label>
+      <Slider.Label> {label} </Slider.Label>
       <Slider.Control>
         <Slider.Track>
           <Slider.Range />

src/components/ui/Slider.tsx

@@ -0,0 +1,38 @@
+import { Slider } from "@chakra-ui/react";
+
+export type SliderUIProps = {
+  minMax: [number, number];
+  step?: number;
+  label?: string;
+  onValueChange: (param: number) => void;
+};
+
+export default function SingleSlider({
+  minMax,
+  step,
+  label,
+  onValueChange,
+}: SliderUIProps) {
+  const handleChange = (detail: Slider.ValueChangeDetails) => {
+    onValueChange(detail.value[0]);
+  };
+  return (
+    <Slider.Root
+      defaultValue={[minMax[0]]}
+      min={minMax[0]}
+      max={minMax[1]}
+      maxW="100%"
+      width="100%"
+      step={step}
+      onValueChange={handleChange}
+    >
+      <Slider.Label> {label} </Slider.Label>
+      <Slider.Control>
+        <Slider.Track>
+          <Slider.Range />
+        </Slider.Track>
+        <Slider.Thumb index={0} boxSize={6} shadow="md"></Slider.Thumb>
+      </Slider.Control>
+    </Slider.Root>
+  );
+}

src/layers/NumericDataLayer/index.tsx

@@ -5,28 +5,38 @@ import {
   LayerContext,
   GetPickingInfoParams,
 } 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 { NumericDataPaintLayer } from "../NumericDataPaintLayer";
 import type { NumericDataLayerProps, NumericDataPickingInfo } from "./types";
 
+const textureDefaultOption = {
+  format: "r32float" as const,
+  dimension: "2d" as const,
+};
+
+const textureSamplerDefaultOption = {
+  minFilter: "linear" as const,
+  magFilter: "linear" as const,
+  mipmapFilter: "linear" as const,
+  addressModeU: "clamp-to-edge" as const,
+  addressModeV: "clamp-to-edge" as const,
+};
+
 export default class NumericDataLayer extends CompositeLayer<NumericDataLayerProps> {
   static layerName: string = "numeric-data-layer";
 
   initializeState(context: LayerContext): void {
     const { tileSize, textureParameters } = this.props;
     const dataTexture = context.device.createTexture({
       data: this.props.imageData,
-      format: "r32float",
       width: tileSize,
       height: tileSize,
+      ...textureDefaultOption,
       sampler: {
-        minFilter: "linear",
-        magFilter: "linear",
-        mipmapFilter: "linear",
-        addressModeU: "clamp-to-edge",
-        addressModeV: "clamp-to-edge",
+        ...textureSamplerDefaultOption,
         ...textureParameters,
       },
     });
@@ -35,6 +45,32 @@ export default class NumericDataLayer extends CompositeLayer<NumericDataLayerPro
     });
   }
 
+  updateState(
+    params: UpdateParameters<
+      Layer<NumericDataLayerProps & Required<CompositeLayerProps>>
+    >
+  ): void {
+    const { props, oldProps, context } = params;
+    const { imageData } = props;
+    const { imageData: oldImageData } = oldProps;
+    if (imageData !== oldImageData) {
+      const { tileSize, textureParameters } = props;
+      const dataTexture = context.device.createTexture({
+        data: imageData,
+        width: tileSize,
+        height: tileSize,
+        ...textureDefaultOption,
+        sampler: {
+          ...textureSamplerDefaultOption,
+          ...textureParameters,
+        },
+      });
+      this.setState({
+        dataTexture,
+      });
+    }
+  }
+
   getPickingInfo(parmas: GetPickingInfoParams): NumericDataPickingInfo {
     const info = parmas.info as BitmapLayerPickingInfo;
     if (info.bitmap) {

src/zarr/index.ts

@@ -80,13 +80,21 @@ export default class ZarrReader {
     x,
     y,
     z,
-  }: TileIndex): Promise<TypedArray<NumberDataType> | undefined> {
+    timestamp,
+  }: TileIndex & { timestamp: number }): Promise<
+    TypedArray<NumberDataType> | undefined
+  > {
     const arr = await zarr.open.v3(this.root.resolve(`${z}/${this._varName}`), {
       kind: "array",
     });
 
     if (arr.is("number")) {
-      const { data } = await arr.getChunk([this._t, y, x]);
+      const { data } = await arr.getChunk([timestamp, y, x]);
+      // @TODO : remove once the data has actual timestamps
+      if (timestamp == 1) {
+        return new Float32Array(this.tileSize * this.tileSize);
+      }
+
       return data;
     } else {
       return undefined;