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

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

@@ -0,0 +1,202 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {DefaultProps, LayerProps, Color, LayerContext, UpdateParameters} from '@deck.gl/core';
+import {Layer, project32} from '@deck.gl/core';
+import {Model, Geometry} from '@luma.gl/engine';
+import vs from './horizon-graph-layer.vs';
+import fs from './horizon-graph-layer.fs';
+import {Texture} from '@luma.gl/core';
+import {horizonLayerUniforms} from './horizon-graph-layer-uniforms';
+
+export type _HorizonGraphLayerProps = {
+  data: number[] | Float32Array;
+
+  yAxisScale?: number;
+
+  bands?: number;
+
+  positiveColor?: Color;
+  negativeColor?: Color;
+
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+};
+
+export type HorizonGraphLayerProps = _HorizonGraphLayerProps & LayerProps;
+
+const defaultProps: DefaultProps<HorizonGraphLayerProps> = {
+  yAxisScale: {type: 'number', value: 1000},
+
+  bands: {type: 'number', value: 2},
+
+  positiveColor: {type: 'color', value: [0, 128, 0]},
+  negativeColor: {type: 'color', value: [0, 0, 255]},
+
+  x: {type: 'number', value: 0},
+  y: {type: 'number', value: 0},
+  width: {type: 'number', value: 800},
+  height: {type: 'number', value: 300}
+};
+
+export class HorizonGraphLayer<ExtraProps extends {} = {}> extends Layer<
+  ExtraProps & Required<_HorizonGraphLayerProps>
+> {
+  static layerName = 'HorizonGraphLayer';
+  static defaultProps = defaultProps;
+
+  state: {
+    model?: Model;
+    dataTexture?: Texture;
+    dataTextureSize?: number;
+    dataTextureCount?: number;
+  } = {};
+
+  initializeState() {
+    this.state = {};
+  }
+
+  getShaders() {
+    return super.getShaders({
+      vs,
+      fs,
+      modules: [project32, horizonLayerUniforms]
+    });
+  }
+
+  _createDataTexture(seriesData: Float32Array | number[]): {
+    dataTexture: Texture;
+    dataTextureSize: number;
+    dataTextureCount: number;
+  } {
+    const _data = seriesData instanceof Float32Array ? seriesData : new Float32Array(seriesData);
+
+    const {device} = this.context;
+    const count = _data.length;
+
+    let dataTextureSize = 32;
+    while (count > dataTextureSize * dataTextureSize) {
+      dataTextureSize *= 2;
+    }
+
+    // TODO: use the right way to only submit the minimum amount of data
+    const data = new Float32Array(dataTextureSize * dataTextureSize);
+    data.set(_data, 0);
+
+    return {
+      dataTexture: device.createTexture({
+        data,
+        format: 'r32float',
+        dimension: '2d',
+        width: dataTextureSize,
+        height: dataTextureSize,
+        sampler: {
+          minFilter: 'nearest',
+          magFilter: 'nearest',
+          addressModeU: 'clamp-to-edge',
+          addressModeV: 'clamp-to-edge'
+        }
+      }),
+      dataTextureSize,
+      dataTextureCount: count
+    };
+  }
+
+  _createModel() {
+    const {x, y, width, height} = this.props;
+
+    // Create a rectangle using triangle strip (4 vertices)
+    // Order: bottom-left, bottom-right, top-left, top-right
+    const positions = [
+      x,
+      y,
+      0.0,
+
+      x + width,
+      y,
+      0.0,
+
+      x,
+      y + height,
+      0.0,
+
+      x + width,
+      y + height,
+      0.0
+    ];
+
+    const uv = [0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 1.0];
+
+    const geometry = new Geometry({
+      topology: 'triangle-strip',
+      attributes: {
+        positions: {value: new Float32Array(positions), size: 3},
+        uv: {value: new Float32Array(uv), size: 2}
+      }
+    });
+
+    return new Model(this.context.device, {
+      ...this.getShaders(),
+      geometry,
+      bufferLayout: this.getAttributeManager().getBufferLayouts()
+    });
+  }
+
+  updateState(params: UpdateParameters<Layer<ExtraProps & Required<_HorizonGraphLayerProps>>>) {
+    super.updateState(params);
+
+    const {changeFlags} = params;
+
+    if (changeFlags.dataChanged) {
+      this.state.dataTexture?.destroy();
+      this.setState(this._createDataTexture(this.props.data));
+    }
+
+    if (changeFlags.extensionsChanged || changeFlags.propsChanged) {
+      this.state.model?.destroy();
+      this.setState({model: this._createModel()});
+    }
+  }
+
+  draw() {
+    const {model, dataTexture} = this.state;
+
+    if (!model) {
+      this.setState({model: this._createModel()});
+      return;
+    }
+
+    if (!dataTexture) {
+      this.setState(this._createDataTexture(this.props.data));
+      return;
+    }
+
+    const {bands, yAxisScale, positiveColor, negativeColor} = this.props;
+
+    model.shaderInputs.setProps({
+      horizonLayer: {
+        dataTexture: this.state.dataTexture,
+        dataTextureSize: this.state.dataTextureSize,
+        dataTextureSizeInv: 1.0 / this.state.dataTextureSize,
+        dataTextureCount: this.state.dataTextureCount,
+
+        bands,
+        bandsInv: 1.0 / bands,
+        yAxisScaleInv: 1.0 / yAxisScale,
+
+        positiveColor: positiveColor.map((c) => c / 255),
+        negativeColor: negativeColor.map((c) => c / 255)
+      }
+    });
+    model.draw(this.context.renderPass);
+  }
+
+  finalizeState(context: LayerContext): void {
+    this.state.model?.destroy();
+    this.state.dataTexture?.destroy();
+    super.finalizeState(context);
+  }
+}

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

@@ -0,0 +1,24 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export default `#version 300 es
+#define SHADER_NAME horizon-graph-layer-vertex-shader
+
+in vec3 positions;
+in vec2 uv;
+
+out vec2 v_uv;
+
+void main(void) {
+  geometry.worldPosition = positions;
+  
+  vec4 position_commonspace = project_position(vec4(positions.xy, 0.0, 1.0));
+  gl_Position = project_common_position_to_clipspace(position_commonspace);
+  geometry.position = position_commonspace;
+  
+  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+  
+  v_uv = uv;
+}
+`;

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

@@ -0,0 +1,164 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {DefaultProps, LayerProps, Color, LayerDataSource, Accessor} from '@deck.gl/core';
+import {CompositeLayer} from '@deck.gl/core';
+import {SolidPolygonLayer} from '@deck.gl/layers';
+import {HorizonGraphLayer} from './horizon-graph-layer';
+
+export type _MultiHorizonGraphLayerProps<DataT> = {
+  data: LayerDataSource<DataT>;
+  getSeries: Accessor<DataT, number[] | Float32Array>;
+  getScale: Accessor<DataT, number>;
+
+  bands?: number;
+
+  positiveColor?: Color;
+  negativeColor?: Color;
+
+  dividerColor?: Color;
+  dividerWidth?: number;
+
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+};
+
+export type MultiHorizonGraphLayerProps<DataT = unknown> = _MultiHorizonGraphLayerProps<DataT> &
+  LayerProps;
+
+const defaultProps: DefaultProps<MultiHorizonGraphLayerProps> = {
+  getSeries: {type: 'accessor', value: (series: any) => series.values},
+  getScale: {type: 'accessor', value: (series: any) => series.scale},
+
+  bands: {type: 'number', value: 2},
+
+  positiveColor: {type: 'color', value: [0, 128, 0]},
+  negativeColor: {type: 'color', value: [0, 0, 255]},
+
+  dividerColor: {type: 'color', value: [0, 0, 0]},
+  dividerWidth: {type: 'number', value: 2},
+
+  x: {type: 'number', value: 0},
+  y: {type: 'number', value: 0},
+  width: {type: 'number', value: 800},
+  height: {type: 'number', value: 300}
+};
+
+export class MultiHorizonGraphLayer<DataT = any, ExtraProps extends {} = {}> extends CompositeLayer<
+  ExtraProps & Required<_MultiHorizonGraphLayerProps<DataT>>
+> {
+  static layerName = 'MultiHorizonGraphLayer';
+  static defaultProps = defaultProps;
+
+  renderLayers() {
+    const {
+      data,
+      getSeries,
+      getScale,
+      bands,
+      positiveColor,
+      negativeColor,
+      dividerColor,
+      dividerWidth,
+      x,
+      y,
+      width,
+      height
+    } = this.props;
+
+    const seriesCount = (data as any).length;
+
+    if (!seriesCount) {
+      return [];
+    }
+
+    // Calculate layout dimensions
+    const totalDividerSpace = dividerWidth * (seriesCount + 1);
+    const availableHeight = height - totalDividerSpace;
+    const seriesHeight = availableHeight / seriesCount;
+
+    const layers = [];
+
+    // Create divider rectangles
+    if (dividerWidth > 0) {
+      const dividerData = [];
+
+      // Top divider
+      dividerData.push({
+        polygon: [
+          [x, y],
+          [x + width, y],
+          [x + width, y + dividerWidth],
+          [x, y + dividerWidth]
+        ]
+      });
+
+      // Dividers between series
+      for (let i = 0; i < seriesCount - 1; i++) {
+        const dividerY = y + dividerWidth + (i + 1) * seriesHeight + i * dividerWidth;
+        dividerData.push({
+          polygon: [
+            [x, dividerY],
+            [x + width, dividerY],
+            [x + width, dividerY + dividerWidth],
+            [x, dividerY + dividerWidth]
+          ]
+        });
+      }
+
+      // Bottom divider
+      const bottomDividerY = y + height - dividerWidth;
+      dividerData.push({
+        polygon: [
+          [x, bottomDividerY],
+          [x + width, bottomDividerY],
+          [x + width, y + height],
+          [x, y + height]
+        ]
+      });
+
+      layers.push(
+        new SolidPolygonLayer({
+          id: `${this.props.id}-dividers`,
+          data: dividerData,
+          getPolygon: (d: any) => d.polygon,
+          getFillColor: dividerColor,
+          pickable: false
+        })
+      );
+    }
+
+    // Create horizon graph layers for each series
+    (data as any).forEach((series, index) => {
+      const seriesData = (getSeries as any)(series);
+
+      if (!seriesData || seriesData.length === 0) {
+        return;
+      }
+
+      const seriesY = y + dividerWidth + index * (seriesHeight + dividerWidth);
+
+      const yAxisScale = (getScale as any)(series);
+
+      layers.push(
+        new HorizonGraphLayer({
+          id: `${this.props.id}-series-${index}`,
+          data: seriesData,
+          yAxisScale,
+          bands,
+          positiveColor,
+          negativeColor,
+          x,
+          y: seriesY,
+          width,
+          height: seriesHeight
+        })
+      );
+    });
+
+    return layers;
+  }
+}