@deck.gl-community/timeline-layers 9.2.0-beta.8

package/dist/layers/time-axis-layer.js

@@ -0,0 +1,78 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { LineLayer, TextLayer } from '@deck.gl/layers';
+import { formatTimeMs } from "../utils/format-utils.js";
+import { getPrettyTicks, getZoomedRange } from "../utils/tick-utils.js";
+export class TimeAxisLayer extends CompositeLayer {
+    static layerName = 'TimeAxisLayer';
+    static defaultProps = {
+        startTimeMs: 0,
+        endTimeMs: 100,
+        tickCount: 5,
+        y: 0,
+        color: [0, 0, 0, 255],
+        unit: 'timestamp',
+        bounds: undefined
+    };
+    // Called whenever props/data/viewports change
+    shouldUpdateState(params) {
+        return params.changeFlags.viewportChanged || super.shouldUpdateState(params);
+    }
+    renderLayers() {
+        const { startTimeMs, endTimeMs, tickCount = 10, y = 0, color = [0, 0, 0, 255] } = this.props;
+        let bounds;
+        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'
+            })
+        ];
+    }
+}
+//# sourceMappingURL=time-axis-layer.js.map

package/dist/layers/time-axis-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-axis-layer.js","sourceRoot":"","sources":["../../src/layers/time-axis-layer.ts"],"names":[],"mappings":"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"}

package/dist/layers/vertical-grid-layer.d.ts

@@ -0,0 +1,41 @@
+import { CompositeLayer, type CompositeLayerProps, type UpdateParameters } from '@deck.gl/core';
+import { LineLayer } from '@deck.gl/layers';
+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 declare class VerticalGridLayer extends CompositeLayer<VerticalGridLayerProps> {
+    static layerName: string;
+    static defaultProps: {
+        yMin: number;
+        yMax: number;
+        tickCount: number;
+        width: number;
+        color: number[];
+    };
+    shouldUpdateState(params: UpdateParameters<VerticalGridLayer>): boolean;
+    renderLayers(): LineLayer<any, {
+        id: `${string}-lines`;
+        data: {
+            sourcePosition: any[];
+            targetPosition: any[];
+        }[];
+        getSourcePosition: (d: any) => any;
+        getTargetPosition: (d: any) => any;
+        getColor: [number, number, number, number];
+        getWidth: 1;
+    }>;
+}
+//# sourceMappingURL=vertical-grid-layer.d.ts.map

package/dist/layers/vertical-grid-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-grid-layer.d.ts","sourceRoot":"","sources":["../../src/layers/vertical-grid-layer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAE,KAAK,mBAAmB,EAAE,KAAK,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAI1C,MAAM,MAAM,sBAAsB,GAAG,mBAAmB,GAAG;IACzD,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC1C,CAAC;AAEF,qBAAa,iBAAkB,SAAQ,cAAc,CAAC,sBAAsB,CAAC;IAC3E,OAAgB,SAAS,SAAuB;IAChD,OAAgB,YAAY;;;;;;MAM1B;IAEO,iBAAiB,CAAC,MAAM,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,GAAG,OAAO;IAIvE,YAAY;;;;;;;;;;;CA4BtB"}

package/dist/layers/vertical-grid-layer.js

@@ -0,0 +1,43 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { LineLayer } from '@deck.gl/layers';
+import { getPrettyTicks, getZoomedRange } from "../utils/tick-utils.js";
+export class VerticalGridLayer extends CompositeLayer {
+    static layerName = 'VerticalGridLayer';
+    static defaultProps = {
+        yMin: -1e6,
+        yMax: 1e6,
+        tickCount: 5,
+        width: 1,
+        color: [200, 200, 200, 255]
+    };
+    shouldUpdateState(params) {
+        return params.changeFlags.viewportChanged || super.shouldUpdateState(params);
+    }
+    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
+        });
+    }
+}
+//# sourceMappingURL=vertical-grid-layer.js.map

package/dist/layers/vertical-grid-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-grid-layer.js","sourceRoot":"","sources":["../../src/layers/vertical-grid-layer.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,+BAA+B;AAC/B,oCAAoC;AAEpC,OAAO,EAAC,cAAc,EAAkD,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAC,cAAc,EAAE,cAAc,EAAC,+BAA4B;AAmBnE,MAAM,OAAO,iBAAkB,SAAQ,cAAsC;IAC3E,MAAM,CAAU,SAAS,GAAG,mBAAmB,CAAC;IAChD,MAAM,CAAU,YAAY,GAAG;QAC7B,IAAI,EAAE,CAAC,GAAG;QACV,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;KAC5B,CAAC;IAEO,iBAAiB,CAAC,MAA2C;QACpE,OAAO,MAAM,CAAC,WAAW,CAAC,eAAe,IAAI,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAC/E,CAAC;IAEQ,YAAY;QACnB,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAElE,8BAA8B;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;QACvC,MAAM,MAAM,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,mCAAmC;QAExE,gEAAgE;QAChE,MAAM,CAAC,eAAe,EAAE,aAAa,CAAC,GAAG,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QAE5E,0BAA0B;QAC1B,MAAM,aAAa,GAAG,cAAc,CAAC,eAAe,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC;QAEhF,mDAAmD;QACnD,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1C,cAAc,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC;YACzB,cAAc,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC;SAC1B,CAAC,CAAC,CAAC;QAEJ,OAAO,IAAI,SAAS,CAAC;YACnB,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ;YAC5B,IAAI,EAAE,SAAS;YACf,iBAAiB,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc;YAC1C,iBAAiB,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc;YAC1C,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,CAAC;SACZ,CAAC,CAAC;IACL,CAAC"}

package/dist/utils/format-utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Convert a time in microseconds to a human-readable string
+ * @param us Time in microseconds
+ */
+export declare function formatTimeMs(timeMs: number, space?: boolean): string;
+export declare function formatTimeRangeMs(startMs: number, endMs: number): string;
+//# sourceMappingURL=format-utils.d.ts.map

package/dist/utils/format-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-utils.d.ts","sourceRoot":"","sources":["../../src/utils/format-utils.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAAE,OAAc,GAAG,MAAM,CA2B1E;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAExE"}

package/dist/utils/format-utils.js

@@ -0,0 +1,75 @@
+// 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, space = true) {
+    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, endMs) {
+    return `${formatTimeMs(startMs)} - ${formatTimeMs(endMs)}`;
+}
+/**
+ * Convert a float to a string
+ */
+function floatToStr(f, roundDigits = 5) {
+    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;
+// }
+//# sourceMappingURL=format-utils.js.map

package/dist/utils/format-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-utils.js","sourceRoot":"","sources":["../../src/utils/format-utils.ts"],"names":[],"mappings":"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"}

package/dist/utils/tick-utils.d.ts

@@ -0,0 +1,10 @@
+export declare function getZoomedRange(startTime: number, endTime: number, bounds: [number, number, number, number]): number[];
+/**
+ * Get nicely rounded tick close to the natural spacing
+ * @param startTime
+ * @param endTime
+ * @param tickCount
+ * @returns
+ */
+export declare function getPrettyTicks(startTime: number, endTime: number, tickCount?: number): any[];
+//# sourceMappingURL=tick-utils.d.ts.map

package/dist/utils/tick-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tick-utils.d.ts","sourceRoot":"","sources":["../../src/utils/tick-utils.ts"],"names":[],"mappings":"AAIA,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,YAKzC;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,GAAE,MAAU,SAmBvF"}

package/dist/utils/tick-utils.js

@@ -0,0 +1,32 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+export function getZoomedRange(startTime, endTime, bounds) {
+    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, endTime, tickCount = 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;
+}
+//# sourceMappingURL=tick-utils.js.map

package/dist/utils/tick-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tick-utils.js","sourceRoot":"","sources":["../../src/utils/tick-utils.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,+BAA+B;AAC/B,oCAAoC;AAEpC,MAAM,UAAU,cAAc,CAC5B,SAAiB,EACjB,OAAe,EACf,MAAwC;IAExC,MAAM,CAAC,eAAe,EAAE,AAAD,EAAG,aAAa,CAAC,GAAG,MAAM,CAAC;IAClD,0JAA0J;IAC1J,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,eAAe,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;AAClF,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAAC,SAAiB,EAAE,OAAe,EAAE,YAAoB,CAAC;IACtF,MAAM,KAAK,GAAG,OAAO,GAAG,SAAS,CAAC;IAClC,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;IAC1C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;IACpC,MAAM,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEhC,wEAAwE;IACxE,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,SAAS,CAAC,GAAG,IAAI,CAAC;IAErE,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,GAAG,QAAQ,CAAC;IAC7D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAC,GAAG,QAAQ,CAAC;IAE1D,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,KAAK,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC,IAAI,QAAQ,EAAE,CAAC;QACpD,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAChB,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@deck.gl-community/timeline-layers",
+  "version": "9.2.0-beta.8",
+  "description": "Layers for compact timeline visualizations in deck.gl",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "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.2.1",
+    "@deck.gl/layers": "~9.2.1",
+    "@luma.gl/core": "~9.2.0",
+    "@luma.gl/engine": "~9.2.0",
+    "@luma.gl/shadertools": "~9.2.0"
+  },
+  "devDependencies": {
+    "@deck.gl/test-utils": "~9.2.1",
+    "@luma.gl/webgpu": "~9.2.0",
+    "@probe.gl/test-utils": "^4.0.4"
+  },
+  "gitHead": "cc866d0fda6b21627421d6168d2f0abec86ab425"
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export type {HorizonGraphLayerProps} from './layers/horizon-graph-layer/horizon-graph-layer';
+export {HorizonGraphLayer} from './layers/horizon-graph-layer/horizon-graph-layer';
+export type {MultiHorizonGraphLayerProps} from './layers/horizon-graph-layer/multi-horizon-graph-layer';
+export {MultiHorizonGraphLayer} from './layers/horizon-graph-layer/multi-horizon-graph-layer';
+export type {TimeAxisLayerProps} from './layers/time-axis-layer';
+export {TimeAxisLayer} from './layers/time-axis-layer';
+export type {VerticalGridLayerProps} from './layers/vertical-grid-layer';
+export {VerticalGridLayer} from './layers/vertical-grid-layer';
+export {formatTimeMs, formatTimeRangeMs} from './utils/format-utils';

package/src/layers/horizon-graph-layer/horizon-graph-layer-uniforms.ts

@@ -0,0 +1,47 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderModule} from '@luma.gl/shadertools';
+import {Texture} from '@luma.gl/core';
+
+const uniformBlock = `\
+layout(std140) uniform horizonLayerUniforms {
+  float dataTextureSize;  // width = height of the POT texture
+  float dataTextureSizeInv;
+  float dataTextureCount; // actual number of data points
+
+  float bands;
+  float bandsInv;
+  float yAxisScaleInv;
+
+  vec3      positiveColor;
+  vec3      negativeColor;
+} horizonLayer;
+`;
+
+type HorizonLayerBindingProps = {
+  dataTexture: Texture;
+};
+
+type HorizonLayerUniformProps = {};
+
+export type HorizonLayerProps = HorizonLayerBindingProps & HorizonLayerUniformProps;
+
+export const horizonLayerUniforms = {
+  name: 'horizonLayer',
+  vs: uniformBlock,
+  fs: uniformBlock,
+  uniformTypes: {
+    dataTextureSize: 'f32',
+    dataTextureSizeInv: 'f32',
+    dataTextureCount: 'f32',
+
+    bands: 'f32',
+    bandsInv: 'f32',
+    yAxisScaleInv: 'f32',
+
+    positiveColor: 'vec3<f32>',
+    negativeColor: 'vec3<f32>'
+  }
+} as const satisfies ShaderModule<HorizonLayerProps>;

package/src/layers/horizon-graph-layer/horizon-graph-layer.fs.ts

@@ -0,0 +1,53 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export default `#version 300 es
+#define SHADER_NAME horizon-graph-layer-fragment-shader
+
+precision highp float;
+precision highp int;
+
+/******* UNIFORM *******/
+
+uniform sampler2D dataTexture;
+
+/******* IN *******/
+
+in vec2 v_uv;
+
+/******* OUT *******/
+
+out vec4 fragColor;
+
+
+/******* MAIN *******/
+
+void main(void) {
+  // horizontal position to sample index
+  float idx = v_uv.x * horizonLayer.dataTextureCount;
+  // idx = clamp(idx, 0.0, horizonLayer.dataTextureCount - 1.0); // NEEDED???
+
+  // fetch single data point & normalize (-1,+1)
+  float fy = floor(idx * horizonLayer.dataTextureSizeInv);
+  float fx = idx - fy * horizonLayer.dataTextureSize;
+  float val = texelFetch(dataTexture, ivec2(int(fx), int(fy)), 0).r;
+  val *= horizonLayer.yAxisScaleInv;
+
+  // band layering
+  float fband    = abs(val) * horizonLayer.bands;
+  float bandIdx  = clamp(floor(fband), 0.0, horizonLayer.bands - 1.0);
+  float bandFrac = fract(fband);
+
+  // calc our position value and find out color (using mix+step instead of if...else)
+  float positive = step(0.0, val);  // 1 if pos, else 0
+  vec3  baseCol  = mix(horizonLayer.negativeColor, horizonLayer.positiveColor, positive);
+  float curPos   = mix(v_uv.y, 1.0 - v_uv.y, positive);
+  float addOne   = step(curPos, bandFrac);
+
+  float band = bandIdx + addOne;
+  float whiten = 1.0 - band * horizonLayer.bandsInv;
+
+  fragColor = vec4(mix(baseCol, vec3(1.0), whiten), 1.0);
+}
+`;