@deck.gl-community/infovis-layers 9.1.0-beta.8

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2022 - 2023 vis.gl contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# @deck.gl-community/layers
+
+This module contains a suite of non-official deck.gl layers.
+
+They can be quite useful in applications, however they are not officially supported by the deck.gl team, so use at your own risk.

package/dist/index.cjs

@@ -0,0 +1 @@
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1,5 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+// TBA
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,+BAA+B;AAC/B,oCAAoC;AAEpC,MAAM"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@deck.gl-community/infovis-layers",
+  "version": "9.1.0-beta.8",
+  "description": "Infovis layers (non-geospatial) for deck.gl",
+  "license": "MIT",
+  "keywords": [
+    "layers",
+    "visualization",
+    "gpu",
+    "deck.gl"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "test-watch": "vitest"
+  },
+  "dependencies": {
+    "@deck.gl/core": "^9.1.12",
+    "@deck.gl/extensions": "^9.1.0",
+    "@deck.gl/layers": "^9.1.0",
+    "@deck.gl/mesh-layers": "^9.1.0",
+    "@deck.gl/react": "^9.1.0",
+    "@loaders.gl/core": "^4.2.0",
+    "@loaders.gl/loader-utils": "^4.2.0",
+    "@loaders.gl/schema": "^4.2.0",
+    "@luma.gl/constants": "^9.1.9",
+    "@luma.gl/core": "^9.1.9",
+    "@luma.gl/engine": "^9.1.9",
+    "@math.gl/core": "^4.0.0",
+    "a5-js": "^0.1.4",
+    "h3-js": "^4.2.1"
+  },
+  "devDependencies": {
+    "@deck.gl/test-utils": "^9.1.12",
+    "@luma.gl/webgpu": "^9.1.9"
+  }
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export {TimeAxisLayer, type TimeAxisLayerProps} from './layers/time-axis-layer';
+export {VerticalGridLayer, type VerticalGridLayerProps} from './layers/vertical-grid-layer';
+export {TimeDeltaLayer, type TimeDeltaLayerProps} from './layers/time-delta-layer';
+
+export {fitBoundsOrthographic} from './views/orthographic-utils';
+export {formatTimeMs, formatTimeRangeMs} from './utils/format-utils';
+export {validateViewState, mergeViewStates, type OptionalViewState} from './views/view-state-utils';
+export {makeLayerFilter} from './views/layer-filter';
+
+export {
+  HEADER_VIEW_HEIGHT,
+  LEGEND_VIEW_WIDTH,
+  SYNCHRONIZED_VIEWS,
+  SYNCHRONIZED_VIEW_STATE_CONSTRAINTS,
+  getSynchronizedViewStates,
+  fitSynchronizedViewStatesToBounds
+} from './synchronized-views/synchronized-views';

package/src/layers/time-axis-layer.ts

@@ -0,0 +1,102 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer, type CompositeLayerProps, type UpdateParameters} from '@deck.gl/core';
+import {LineLayer, TextLayer} from '@deck.gl/layers';
+
+import {formatTimeMs} from '../utils/format-utils';
+import {getPrettyTicks, getZoomedRange} from '../utils/tick-utils';
+
+export type TimeAxisLayerProps = CompositeLayerProps & {
+  unit: 'timestamp' | 'milliseconds';
+  /** Start time in milliseconds since epoch */
+  startTimeMs: number;
+  /** End time in milliseconds since epoch */
+  endTimeMs: number;
+  /** Optional: Number of tick marks (default: 5) */
+  tickCount?: number;
+  /** Optional: Y-coordinate for the axis line (default: 0) */
+  y?: number;
+  /** Optional: RGBA color for axis and ticks (default: [0, 0, 0, 255]) */
+  color?: [number, number, number, number];
+  /** Optional: Bounds for the axis line (default: viewport bounds) */
+  bounds?: [number, number, number, number];
+};
+
+export class TimeAxisLayer extends CompositeLayer<TimeAxisLayerProps> {
+  static override layerName = 'TimeAxisLayer';
+  static override defaultProps: Required<Omit<TimeAxisLayerProps, keyof CompositeLayerProps>> = {
+    startTimeMs: 0,
+    endTimeMs: 100,
+    tickCount: 5,
+    y: 0,
+    color: [0, 0, 0, 255],
+    unit: 'timestamp',
+    bounds: undefined!
+  };
+
+  // Called whenever props/data/viewports change
+  override shouldUpdateState(params: UpdateParameters<TimeAxisLayer>): boolean {
+    return params.changeFlags.viewportChanged || super.shouldUpdateState(params);
+  }
+
+  override renderLayers() {
+    const {startTimeMs, endTimeMs, tickCount = 10, y = 0, color = [0, 0, 0, 255]} = this.props;
+
+    let bounds: [number, number, number, number];
+    try {
+      bounds = this.context.viewport.getBounds();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log('Error getting bounds from viewport:', error);
+      throw error;
+    }
+    const [startTimeZoomed, endTimeZoomed] = getZoomedRange(startTimeMs, endTimeMs, bounds);
+    // Generate tick positions and labels
+    const ticks = getPrettyTicks(startTimeZoomed, endTimeZoomed, tickCount);
+
+    const tickLines = ticks.map((x) => ({
+      sourcePosition: [x, y - 5],
+      targetPosition: [x, y + 5]
+    }));
+
+    const tickLabels = ticks.map((x) => ({
+      position: [x, y - 10],
+      text:
+        this.props.unit === 'timestamp' ? new Date(x).toLocaleTimeString() : formatTimeMs(x, false)
+    }));
+
+    return [
+      // Axis line
+      new LineLayer({
+        id: 'axis-line',
+        data: [{sourcePosition: [startTimeZoomed, y], targetPosition: [endTimeZoomed, y]}],
+        getSourcePosition: (d) => d.sourcePosition,
+        getTargetPosition: (d) => d.targetPosition,
+        getColor: color,
+        getWidth: 2
+      }),
+      // Tick marks
+      new LineLayer({
+        id: 'tick-marks',
+        data: tickLines,
+        getSourcePosition: (d) => d.sourcePosition,
+        getTargetPosition: (d) => d.targetPosition,
+        getColor: color,
+        getWidth: 1
+      }),
+      // Tick labels
+      new TextLayer({
+        id: 'tick-labels',
+        data: tickLabels,
+        getPosition: (d) => d.position,
+        getText: (d) => d.text,
+        getSize: 12,
+        getColor: color,
+        getTextAnchor: 'middle',
+        getAlignmentBaseline: 'top'
+      })
+    ];
+  }
+}

package/src/layers/time-delta-layer.ts

@@ -0,0 +1,170 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer, type LayerProps} from '@deck.gl/core';
+import {LineLayer, TextLayer} from '@deck.gl/layers';
+
+// import {PathStyleExtension} from '@deck.gl/extensions';
+
+import {formatTimeMs} from '../utils/format-utils';
+
+export type TimeDeltaLayerProps = LayerProps & {
+  unit: 'timestamp' | 'milliseconds';
+  minTimeMs: number;
+  maxTimeMs: number;
+  /** Start time in milliseconds since epoch */
+  startTimeMs: number;
+  /** End time in milliseconds since epoch */
+  endTimeMs: number;
+  /** Optional: Y-coordinate for the axis line (default: 0) */
+  y?: number;
+  header: boolean;
+
+  /** Optional: RGBA color for axis and ticks (default: [0, 0, 0, 255]) */
+  color?: [number, number, number, number];
+  /** Minimum Y-coordinate for grid lines. @todo (ib) Remve and calculate from viewport? */
+  yMin?: number;
+  /** Maximum Y-coordinate for grid lines. @todo (ib) Remve and calculate from viewport? */
+  yMax?: number;
+};
+
+export class TimeDeltaLayer extends CompositeLayer<TimeDeltaLayerProps> {
+  static override layerName = 'TimeDeltaLayer';
+  static override defaultProps: Required<Omit<TimeDeltaLayerProps, keyof LayerProps>> = {
+    header: false,
+    minTimeMs: 0,
+    maxTimeMs: 100,
+    startTimeMs: 0,
+    endTimeMs: 100,
+    y: 0,
+    color: [0, 0, 0, 255],
+    unit: 'timestamp',
+    yMin: -1e6, // Should cover full viewport height in most cases
+    yMax: 1e6 // Should cover full viewport height in most cases
+  };
+
+  override renderLayers() {
+    const {startTimeMs, endTimeMs, color = [0, 0, 0, 255], yMin, yMax} = this.props;
+
+    const timeDeltaPosition = [(startTimeMs + endTimeMs) / 2, 10];
+    const timeDeltaMs = Math.abs(endTimeMs - startTimeMs);
+    const timeDeltaLabel = formatTimeMs(timeDeltaMs, false);
+
+    if (!this.props.header) {
+      const timeLines = [
+        {
+          sourcePosition: [startTimeMs, yMin],
+          targetPosition: [startTimeMs, yMax]
+        },
+        {
+          sourcePosition: [endTimeMs, yMin],
+          targetPosition: [endTimeMs, yMax]
+        }
+      ];
+      return [
+        // Interval end lines
+        new LineLayer({
+          id: 'time-delta-side-bars',
+          data: timeLines,
+          getSourcePosition: (d) => d.sourcePosition,
+          getTargetPosition: (d) => d.targetPosition,
+          getColor: color,
+          getWidth: 4,
+          widthUnits: 'pixels'
+        })
+      ];
+    }
+
+    // // Tick marks
+    // new LineLayer({
+    //   id: 'time-delta-marks',
+    //   data: tickLines,
+    //   getSourcePosition: (d) => d.sourcePosition,
+    //   getTargetPosition: (d) => d.targetPosition,
+    //   getColor: color,
+    //   getWidth: 1,
+    // }),
+
+    // TODO - triggers an update of monorepo root files
+    //   new PathLayer({
+    //     id: 'dotted-path',
+    //     data: route,
+    //     getPath: d => d.path,
+    //     getWidth: 4,
+    //     getColor: [255, 0, 0],
+
+    //     // Enable rounded caps on each dash
+    //     rounded: true,
+
+    //     // Add the dash extension
+    //     extensions: [
+    //       new PathStyleExtension({
+    //         dash: true,
+    //         // highPrecisionDash: true, // uncomment for finer control at low zoom
+    //         capRounded: true          // draw dash ends as semicircles
+    //       })
+    //     ],
+
+    //     // [dashLength, gapLength] in pixels
+    //     // small dash + equal or larger gap = dotted effect
+    //     getDashArray: () => [2, 6]
+    //   })
+    // ]
+    const HEADER_Y = 12;
+    const timeLines = [
+      {
+        sourcePosition: [startTimeMs, -100],
+        targetPosition: [startTimeMs, HEADER_Y]
+      },
+      {
+        sourcePosition: [endTimeMs, -100],
+        targetPosition: [endTimeMs, HEADER_Y]
+      }
+    ];
+
+    return [
+      // Interval end lines
+      new LineLayer({
+        id: 'header-time-delta-side-bars',
+        data: timeLines,
+        getSourcePosition: (d) => d.sourcePosition,
+        getTargetPosition: (d) => d.targetPosition,
+        getColor: color,
+        getWidth: 4,
+        widthUnits: 'pixels'
+      }),
+
+      // Interval center
+      new LineLayer({
+        id: 'header-time-delta-dotted-line',
+        data: [
+          {
+            sourcePosition: [startTimeMs, HEADER_Y - 7],
+            targetPosition: [endTimeMs, HEADER_Y - 7]
+          }
+        ],
+        getSourcePosition: (d) => d.sourcePosition,
+        getTargetPosition: (d) => d.targetPosition,
+        getColor: color,
+        getWidth: 1,
+        widthUnits: 'pixels'
+      }),
+
+      // Label
+      new TextLayer({
+        id: 'header-time-delta-label',
+        data: [{position: timeDeltaPosition, text: timeDeltaLabel}],
+        getPosition: (d) => d.position,
+        getText: (d) => d.text,
+        getSize: 12,
+        getColor: color,
+        getTextAnchor: 'middle',
+        getAlignmentBaseline: 'top',
+        background: true,
+        getBackgroundColor: [255, 255, 255, 255], // Solid green background
+        backgroundPadding: [4, 2] // Horizontal and vertical padding
+      })
+    ];
+  }
+}

package/src/layers/vertical-grid-layer.ts

@@ -0,0 +1,69 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer, type CompositeLayerProps, type UpdateParameters} from '@deck.gl/core';
+import {LineLayer} from '@deck.gl/layers';
+
+import {getPrettyTicks, getZoomedRange} from '../utils/tick-utils';
+
+export type VerticalGridLayerProps = CompositeLayerProps & {
+  /** Start time in milliseconds since epoch */
+  xMin: number;
+  /** End time in milliseconds since epoch */
+  xMax: number;
+  /** Optional: Number of tick marks (default: 5) */
+  tickCount?: number;
+  /** Minimum Y-coordinate for grid lines */
+  yMin?: number;
+  /** Maximum Y-coordinate for grid lines */
+  yMax?: number;
+  /** Optional: Width of the grid lines (default: 1) */
+  width?: number;
+  /** Optional: RGBA color for grid lines (default: [200, 200, 200, 255]) */
+  color?: [number, number, number, number];
+};
+
+export class VerticalGridLayer extends CompositeLayer<VerticalGridLayerProps> {
+  static override layerName = 'VerticalGridLayer';
+  static override defaultProps = {
+    yMin: -1e6,
+    yMax: 1e6,
+    tickCount: 5,
+    width: 1,
+    color: [200, 200, 200, 255]
+  };
+
+  override shouldUpdateState(params: UpdateParameters<VerticalGridLayer>): boolean {
+    return params.changeFlags.viewportChanged || super.shouldUpdateState(params);
+  }
+
+  override renderLayers() {
+    const {xMin, xMax, tickCount = 5, yMin, yMax, color} = this.props;
+
+    // Access the current viewport
+    const viewport = this.context.viewport;
+    const bounds = viewport.getBounds(); // Returns [minX, minY, maxX, maxY]
+
+    // Calculate the visible time range based on the viewport bounds
+    const [startTimeZoomed, endTimeZoomed] = getZoomedRange(xMin, xMax, bounds);
+
+    // Generate tick positions
+    const tickPositions = getPrettyTicks(startTimeZoomed, endTimeZoomed, tickCount);
+
+    // Create vertical grid lines at each tick position
+    const gridLines = tickPositions.map((x) => ({
+      sourcePosition: [x, yMin],
+      targetPosition: [x, yMax]
+    }));
+
+    return new LineLayer({
+      id: `${this.props.id}-lines`,
+      data: gridLines,
+      getSourcePosition: (d) => d.sourcePosition,
+      getTargetPosition: (d) => d.targetPosition,
+      getColor: color,
+      getWidth: 1
+    });
+  }
+}

package/src/synchronized-views/synchronized-views.ts

@@ -0,0 +1,113 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {OrthographicController, OrthographicView} from '@deck.gl/core';
+
+import {fitBoundsOrthographic} from '../views/orthographic-utils';
+import {mergeViewStates} from '../views/view-state-utils';
+
+import type {OptionalViewState} from '../views/view-state-utils';
+import type {OrthographicViewState} from '@deck.gl/core';
+
+export const HEADER_VIEW_HEIGHT = 50;
+export const LEGEND_VIEW_WIDTH = 150;
+
+export const SYNCHRONIZED_VIEWS = [
+  new OrthographicView({
+    id: 'main',
+    flipY: false,
+    clear: true, // [1, 1, 1, 1],
+    x: LEGEND_VIEW_WIDTH,
+    width: `calc(100% - ${LEGEND_VIEW_WIDTH}px`,
+    y: HEADER_VIEW_HEIGHT,
+    height: `calc(100% - ${HEADER_VIEW_HEIGHT}px)`,
+    controller: {
+      type: OrthographicController,
+      // @ts-expect-error Specific to OrthographicController
+      zoomAxis: 'X',
+      inertia: false,
+      scrollZoom: true
+    }
+  }),
+  new OrthographicView({
+    id: 'header',
+    flipY: false,
+    clear: true, // [1, 1, 1, 1],
+    x: LEGEND_VIEW_WIDTH,
+    width: `calc(100% - ${LEGEND_VIEW_WIDTH}px)`,
+    height: 50,
+    controller: false
+  }),
+  new OrthographicView({
+    id: 'legend',
+    flipY: false,
+    clear: true, // [1, 1, 1, 1],
+    x: 0,
+    width: LEGEND_VIEW_WIDTH,
+    y: HEADER_VIEW_HEIGHT,
+    height: `calc(100% - ${HEADER_VIEW_HEIGHT}px)`,
+    controller: false
+  })
+];
+
+export const SYNCHRONIZED_VIEW_STATE_CONSTRAINTS = {
+  header: {target: [undefined, 20], zoom: [undefined, 0]} satisfies OptionalViewState,
+  legend: {target: [-30, undefined], zoom: [1, undefined]} satisfies OptionalViewState
+};
+
+export function getSynchronizedViewStates(viewState: OrthographicViewState) {
+  return {
+    header: mergeViewStates(viewState, SYNCHRONIZED_VIEW_STATE_CONSTRAINTS.header),
+    legend: mergeViewStates(viewState, SYNCHRONIZED_VIEW_STATE_CONSTRAINTS.legend),
+    main: viewState
+  };
+}
+
+export function fitSynchronizedViewStatesToBounds(props: {
+  viewState: {
+    header: OrthographicViewState;
+    legend: OrthographicViewState;
+    main: OrthographicViewState;
+  };
+  width: number;
+  height: number;
+  bounds: [[xMin: number, yMin: number], [xMax: number, yMax: number]];
+  /** App should set to true on first call */
+  initialize: boolean;
+  headerHeight?: number;
+  legendWidth?: number;
+}): {
+  header: OrthographicViewState;
+  legend: OrthographicViewState;
+  main: OrthographicViewState;
+} {
+  const {viewState, initialize} = props;
+  const {headerHeight = HEADER_VIEW_HEIGHT, legendWidth = LEGEND_VIEW_WIDTH} = props;
+
+  // Handle cases where the window size is too small for the header and/or legend
+  const width = Math.max(props.width - legendWidth, 1);
+  const height = Math.max(props.height - headerHeight, 1);
+
+  const {target, zoom} = fitBoundsOrthographic(width, height, props.bounds, 'per-axis');
+  target[1] = target[1] - 1.5; // ADD SOME TIME SPACE
+
+  let mainViewState: OrthographicViewState;
+  // Avoid messing with y axis if we have already fitted the view state
+  if (initialize) {
+    mainViewState = {...viewState.main, target, zoom};
+  } else {
+    mainViewState = {
+      ...viewState.main,
+      target: [viewState.main.target[0], target[1]],
+      zoom: [(viewState.main.zoom as [number, number])[0], zoom[1]]
+    };
+  }
+  const newViewState = {
+    ...viewState,
+    main: mainViewState,
+    header: mergeViewStates(mainViewState, SYNCHRONIZED_VIEW_STATE_CONSTRAINTS.header),
+    legend: mergeViewStates(mainViewState, SYNCHRONIZED_VIEW_STATE_CONSTRAINTS.legend)
+  };
+  return newViewState;
+}

package/src/utils/format-utils.ts

@@ -0,0 +1,80 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+/**
+ * Convert a time in microseconds to a human-readable string
+ * @param us Time in microseconds
+ */
+export function formatTimeMs(timeMs: number, space: boolean = true): string {
+  const sep = space ? ' ' : '';
+  const us = timeMs * 1000;
+  if (us === 0) {
+    return '0s';
+  }
+  if (Math.abs(us) < 1000) {
+    return `${floatToStr(us)}${sep}µs`;
+  }
+  const ms = us / 1000;
+  if (Math.abs(ms) < 1000) {
+    return `${floatToStr(ms)}${sep} ms`;
+  }
+  const s = ms / 1000;
+  if (Math.abs(s) < 60) {
+    return `${floatToStr(s)}${sep} s`;
+  }
+  const m = s / 60;
+  if (Math.abs(m) < 60) {
+    return `${floatToStr(m)}${sep} min`;
+  }
+  const h = m / 60;
+  if (Math.abs(h) < 24) {
+    return `${floatToStr(h)}${sep} hrs`;
+  }
+  const d = h / 24;
+  return `${floatToStr(d)}${sep} days`;
+}
+
+export function formatTimeRangeMs(startMs: number, endMs: number): string {
+  return `${formatTimeMs(startMs)} - ${formatTimeMs(endMs)}`;
+}
+
+/**
+ * Convert a float to a string
+ */
+function floatToStr(f: number, roundDigits: number = 5): string {
+  if (Number.isInteger(f)) {
+    return f.toString();
+  }
+
+  for (let i = 1; i < roundDigits - 1; i++) {
+    const rounded = parseFloat(f.toPrecision(i));
+    if (rounded === f) {
+      return rounded.toPrecision(i);
+    }
+  }
+
+  return f.toPrecision(roundDigits);
+}
+
+// export function formatTimesUs(ticks: number[]): string {
+//   // Try from 0 up to a reasonable max (e.g. 20)
+//   for (let d = 0; d <= 20; d++) {
+//     const seen = new Set<string>();
+//     let allDistinct = true;
+//     for (const t of ticks) {
+//       // Format each tick with d decimals
+//       const str = t.toFixed(d);
+//       if (seen.has(str)) {
+//         allDistinct = false;
+//         break;
+//       }
+//       seen.add(str);
+//     }
+//     if (allDistinct) {
+//       return d;
+//     }
+//   }
+//   // Fallback if somehow not distinct even at 20 decimals
+//   return 20;
+// }

package/src/utils/tick-utils.ts

@@ -0,0 +1,41 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export function getZoomedRange(
+  startTime: number,
+  endTime: number,
+  bounds: [number, number, number, number]
+) {
+  const [startTimeZoomed, , endTimeZoomed] = bounds;
+  // console.log(`startTimeZoomed: ${startTimeZoomed}, endTimeZoomed: ${endTimeZoomed}, tickInterval: ${tickInterval} tickCountZoomed: ${tickCountZoomed}`);
+  return [Math.max(startTime, startTimeZoomed), Math.min(endTime, endTimeZoomed)];
+}
+
+/**
+ * Get nicely rounded tick close to the natural spacing
+ * @param startTime
+ * @param endTime
+ * @param tickCount
+ * @returns
+ */
+export function getPrettyTicks(startTime: number, endTime: number, tickCount: number = 5) {
+  const range = endTime - startTime;
+  const roughStep = range / (tickCount - 1);
+  const exponent = Math.floor(Math.log10(roughStep));
+  const base = Math.pow(10, exponent);
+  const multiples = [1, 2, 5, 10];
+
+  // Find the smallest multiple that is greater than or equal to roughStep
+  const niceStep = multiples.find((m) => base * m >= roughStep) * base;
+
+  const niceStart = Math.ceil(startTime / niceStep) * niceStep;
+  const niceEnd = Math.floor(endTime / niceStep) * niceStep;
+
+  const ticks = [];
+  for (let t = niceStart; t <= niceEnd; t += niceStep) {
+    ticks.push(t);
+  }
+
+  return ticks;
+}

package/src/views/layer-filter.ts

@@ -0,0 +1,64 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {type FilterContext} from '@deck.gl/core';
+
+export type DeclarativeLayerFilter = Record<
+  string,
+  | {
+      include: string[];
+    }
+  | {
+      exclude: string[];
+    }
+>;
+
+type RegexpLayerFilter = Record<
+  string,
+  | {
+      include: RegExp[];
+    }
+  | {
+      exclude: RegExp[];
+    }
+>;
+
+export function makeLayerFilter(
+  filters: DeclarativeLayerFilter
+): (context: FilterContext) => boolean {
+  // Pre-compile the regexps for performance
+  const regexpFilters: RegexpLayerFilter = {};
+  for (const [key, value] of Object.entries(filters)) {
+    if ('include' in value) {
+      regexpFilters[key] = {
+        include: value.include.map((v) => new RegExp(v))
+      };
+    } else {
+      regexpFilters[key] = {
+        exclude: value.exclude.map((v) => new RegExp(v))
+      };
+    }
+  }
+
+  // Return a function that checks if a layer matches the filter
+  return ({viewport, layer}: FilterContext) => {
+    let visible = true;
+    const viewFilters = regexpFilters[viewport.id] || ({} as Record<string, RegExp[]>);
+    // Check if the layer matches the filters for this viewport
+    if ('include' in viewFilters) {
+      if (!viewFilters.include.some((regexp) => regexp.test(layer.id))) {
+        visible = false;
+      }
+    }
+    if ('exclude' in viewFilters) {
+      if (viewFilters.exclude.some((regexp) => regexp.test(layer.id))) {
+        visible = false;
+      }
+    }
+    // if (!visible) {
+    //   console.log(`Viewport ${viewport.id}: filtering out layer ${layer.id}`);
+    // }
+    return visible;
+  };
+}

package/src/views/orthographic-utils.ts

@@ -0,0 +1,70 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+type Bounds = [[number, number], [number, number]];
+
+export function fitBoundsOrthographic(
+  width: number,
+  height: number,
+  bounds: Readonly<Bounds>,
+  zoomMode: 'single'
+): {target: [number, number]; zoom: number};
+
+export function fitBoundsOrthographic(
+  width: number,
+  height: number,
+  bounds: Readonly<Bounds>,
+  zoomMode: 'per-axis'
+): {target: [number, number]; zoom: [number, number]};
+
+/**
+ * Compute center & zoom for an OrthographicViewport so that `bounds` fills the viewport.
+ * @param width  viewport width in px
+ * @param height viewport height in px
+ * @param bounds [[minX,minY],[maxX,maxY]] in the same world units you’re rendering
+ * @returns { target: [number, number], zoom: number }
+ *   target: center of the viewport in world units
+ *   zoom: deck.gl orthographic zoom level (log2(scale))
+ *   (deck.gl orthographic zoom is the log2 of the scale factor)
+ */
+export function fitBoundsOrthographic(
+  width: number,
+  height: number,
+  bounds: Readonly<Bounds>,
+  zoomMode: 'single' | 'per-axis' = 'per-axis'
+): {target: [number, number]; zoom: number | [number, number]} {
+  const [[minX, minY], [maxX, maxY]] = bounds;
+
+  // center of the box
+  const centerX = (minX + maxX) / 2;
+  const centerY = (minY + maxY) / 2;
+
+  // size of the box
+  const boxW = maxX - minX;
+  const boxH = maxY - minY;
+
+  // scale (world units → screen pixels)
+  const scaleX = width / boxW;
+  const scaleY = height / boxH;
+
+  // pick the smaller scale so the whole box fits
+  const scale = Math.min(scaleX, scaleY);
+
+  // deck.gl orthographic zoom is log2(scale)
+  const zoom = Math.log2(scale);
+
+  // 3) axis‐specific zooms (deck.gl’s orthographic zoom = log2(scale))
+  const zoomX = Math.log2(scaleX);
+  const zoomY = Math.log2(scaleY);
+
+  if (Number.isNaN(zoom) || Number.isNaN(zoomX) || Number.isNaN(zoom)) {
+    // eslint-disable-next-line no-console
+    console.warn('Invalid zoom values:', {zoom, zoomX, zoomY});
+  }
+
+  return {
+    target: [centerX, centerY],
+    zoom: zoomMode === 'single' ? zoom : [zoomX, zoomY]
+  };
+}

package/src/views/view-state-utils.ts

@@ -0,0 +1,70 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {type OrthographicViewState} from '@deck.gl/core';
+
+export type OptionalizedViewState<T> = {
+  [K in keyof T]: T[K] extends [number, number] | undefined
+    ? [number | undefined, number | undefined] | undefined
+    : T[K] extends [number, number, number] | undefined
+      ? [number | undefined, number | undefined, number | undefined] | undefined
+      : T[K] extends [number, number] | number | undefined
+        ? [number | undefined, number | undefined] | undefined
+        : T[K] extends [number, number, number] | [number, number] | undefined
+          ?
+              | [number | undefined, number | undefined, number | undefined]
+              | [number | undefined, number | undefined]
+              | undefined
+          : T[K];
+};
+
+export type OptionalViewState = OptionalizedViewState<OrthographicViewState>;
+
+export function mergeViewStates(
+  viewState1: OrthographicViewState,
+  viewState2: OptionalViewState
+): OrthographicViewState {
+  const target1 = viewState1.target ?? [0, 0];
+  const zoom1 = viewState1.zoom ?? [1, 1];
+  const mergedViewState = {
+    ...viewState1,
+    ...viewState2,
+    target: [viewState2.target?.[0] ?? target1[0], viewState2.target?.[1] ?? target1[1]],
+    zoom: [
+      // ts-expect-error view state typing is awfully optional
+      viewState2.zoom?.[0] ?? zoom1[0],
+      // ts-expect-error view state typing is awfully optional
+      viewState2.zoom?.[1] ?? zoom1[1]
+    ]
+  };
+  // @ts-expect-error view state typing is awfully optional
+  validateViewState(mergedViewState);
+  // @ts-expect-error view state typing is awfully optional
+  return mergedViewState;
+}
+
+// eslint-disable-next-line complexity
+export function validateViewState(
+  viewState: OrthographicViewState
+): viewState is OrthographicViewState {
+  const isTargetValid =
+    Array.isArray(viewState.target) &&
+    viewState.target[0] !== undefined &&
+    !Number.isNaN(viewState.target[0]) &&
+    viewState.target[1] !== undefined &&
+    !Number.isNaN(viewState.target[1]);
+  const isZoomValid =
+    Array.isArray(viewState.zoom) &&
+    viewState.zoom[0] !== undefined &&
+    !Number.isNaN(viewState.zoom[0]) &&
+    viewState.zoom[1] !== undefined &&
+    !Number.isNaN(viewState.zoom[1]);
+
+  if (!isTargetValid || !isZoomValid) {
+    // eslint-disable-next-line no-console
+    console.warn('Invalid viewState:', viewState);
+  }
+
+  return isTargetValid && isZoomValid;
+}