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

package/dist/index.cjs

@@ -25,14 +25,10 @@ var __publicField = (obj, key, value) => {
 var dist_exports = {};
 __export(dist_exports, {
   HEADER_VIEW_HEIGHT: () => HEADER_VIEW_HEIGHT,
-  HorizonGraphLayer: () => HorizonGraphLayer,
   LEGEND_VIEW_WIDTH: () => LEGEND_VIEW_WIDTH,
-  MultiHorizonGraphLayer: () => MultiHorizonGraphLayer,
   SYNCHRONIZED_VIEWS: () => SYNCHRONIZED_VIEWS,
   SYNCHRONIZED_VIEW_STATE_CONSTRAINTS: () => SYNCHRONIZED_VIEW_STATE_CONSTRAINTS,
-  TimeAxisLayer: () => TimeAxisLayer,
   TimeDeltaLayer: () => TimeDeltaLayer,
-  VerticalGridLayer: () => VerticalGridLayer,
   fitBoundsOrthographic: () => fitBoundsOrthographic,
   fitSynchronizedViewStatesToBounds: () => fitSynchronizedViewStatesToBounds,
   formatTimeMs: () => formatTimeMs,
@@ -44,7 +40,7 @@ __export(dist_exports, {
 });
 module.exports = __toCommonJS(dist_exports);
 
-// dist/layers/time-axis-layer.js
+// dist/layers/time-delta-layer.js
 var import_core = require("@deck.gl/core");
 var import_layers = require("@deck.gl/layers");
 
@@ -93,136 +89,8 @@ function floatToStr(f, roundDigits = 5) {
   return f.toPrecision(roundDigits);
 }
 
-// dist/utils/tick-utils.js
-function getZoomedRange(startTime, endTime, bounds) {
-  const [startTimeZoomed, , endTimeZoomed] = bounds;
-  return [Math.max(startTime, startTimeZoomed), Math.min(endTime, endTimeZoomed)];
-}
-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];
-  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;
-}
-
-// dist/layers/time-axis-layer.js
-var TimeAxisLayer = class extends import_core.CompositeLayer {
-  // 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) {
-      console.log("Error getting bounds from viewport:", error);
-      throw error;
-    }
-    const [startTimeZoomed, endTimeZoomed] = getZoomedRange(startTimeMs, endTimeMs, bounds);
-    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 import_layers.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 import_layers.LineLayer({
-        id: "tick-marks",
-        data: tickLines,
-        getSourcePosition: (d) => d.sourcePosition,
-        getTargetPosition: (d) => d.targetPosition,
-        getColor: color,
-        getWidth: 1
-      }),
-      // Tick labels
-      new import_layers.TextLayer({
-        id: "tick-labels",
-        data: tickLabels,
-        getPosition: (d) => d.position,
-        getText: (d) => d.text,
-        getSize: 12,
-        getColor: color,
-        getTextAnchor: "middle",
-        getAlignmentBaseline: "top"
-      })
-    ];
-  }
-};
-__publicField(TimeAxisLayer, "layerName", "TimeAxisLayer");
-__publicField(TimeAxisLayer, "defaultProps", {
-  startTimeMs: 0,
-  endTimeMs: 100,
-  tickCount: 5,
-  y: 0,
-  color: [0, 0, 0, 255],
-  unit: "timestamp",
-  bounds: void 0
-});
-
-// dist/layers/vertical-grid-layer.js
-var import_core2 = require("@deck.gl/core");
-var import_layers2 = require("@deck.gl/layers");
-var VerticalGridLayer = class extends import_core2.CompositeLayer {
-  shouldUpdateState(params) {
-    return params.changeFlags.viewportChanged || super.shouldUpdateState(params);
-  }
-  renderLayers() {
-    const { xMin, xMax, tickCount = 5, yMin, yMax, color } = this.props;
-    const viewport = this.context.viewport;
-    const bounds = viewport.getBounds();
-    const [startTimeZoomed, endTimeZoomed] = getZoomedRange(xMin, xMax, bounds);
-    const tickPositions = getPrettyTicks(startTimeZoomed, endTimeZoomed, tickCount);
-    const gridLines = tickPositions.map((x) => ({
-      sourcePosition: [x, yMin],
-      targetPosition: [x, yMax]
-    }));
-    return new import_layers2.LineLayer({
-      id: `${this.props.id}-lines`,
-      data: gridLines,
-      getSourcePosition: (d) => d.sourcePosition,
-      getTargetPosition: (d) => d.targetPosition,
-      getColor: color,
-      getWidth: 1
-    });
-  }
-};
-__publicField(VerticalGridLayer, "layerName", "VerticalGridLayer");
-__publicField(VerticalGridLayer, "defaultProps", {
-  yMin: -1e6,
-  yMax: 1e6,
-  tickCount: 5,
-  width: 1,
-  color: [200, 200, 200, 255]
-});
-
 // dist/layers/time-delta-layer.js
-var import_core3 = require("@deck.gl/core");
-var import_layers3 = require("@deck.gl/layers");
-var TimeDeltaLayer = class extends import_core3.CompositeLayer {
+var TimeDeltaLayer = class extends import_core.CompositeLayer {
   renderLayers() {
     const { startTimeMs, endTimeMs, color = [0, 0, 0, 255], yMin, yMax } = this.props;
     const timeDeltaPosition = [(startTimeMs + endTimeMs) / 2, 10];
@@ -241,7 +109,7 @@ var TimeDeltaLayer = class extends import_core3.CompositeLayer {
       ];
       return [
         // Interval end lines
-        new import_layers3.LineLayer({
+        new import_layers.LineLayer({
           id: "time-delta-side-bars",
           data: timeLines2,
           getSourcePosition: (d) => d.sourcePosition,
@@ -265,7 +133,7 @@ var TimeDeltaLayer = class extends import_core3.CompositeLayer {
     ];
     return [
       // Interval end lines
-      new import_layers3.LineLayer({
+      new import_layers.LineLayer({
         id: "header-time-delta-side-bars",
         data: timeLines,
         getSourcePosition: (d) => d.sourcePosition,
@@ -275,7 +143,7 @@ var TimeDeltaLayer = class extends import_core3.CompositeLayer {
         widthUnits: "pixels"
       }),
       // Interval center
-      new import_layers3.LineLayer({
+      new import_layers.LineLayer({
         id: "header-time-delta-dotted-line",
         data: [
           {
@@ -290,7 +158,7 @@ var TimeDeltaLayer = class extends import_core3.CompositeLayer {
         widthUnits: "pixels"
       }),
       // Label
-      new import_layers3.TextLayer({
+      new import_layers.TextLayer({
         id: "header-time-delta-label",
         data: [{ position: timeDeltaPosition, text: timeDeltaLabel }],
         getPosition: (d) => d.position,
@@ -324,334 +192,6 @@ __publicField(TimeDeltaLayer, "defaultProps", {
   // Should cover full viewport height in most cases
 });
 
-// dist/layers/horizon-graph-layer/horizon-graph-layer.js
-var import_core4 = require("@deck.gl/core");
-var import_engine = require("@luma.gl/engine");
-
-// dist/layers/horizon-graph-layer/horizon-graph-layer.vs.js
-var horizon_graph_layer_vs_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;
-}
-`;
-
-// dist/layers/horizon-graph-layer/horizon-graph-layer.fs.js
-var horizon_graph_layer_fs_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);
-}
-`;
-
-// dist/layers/horizon-graph-layer/horizon-graph-layer-uniforms.js
-var 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;
-`;
-var 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>"
-  }
-};
-
-// dist/layers/horizon-graph-layer/horizon-graph-layer.js
-var defaultProps = {
-  yAxisScale: { type: "number", value: 1e3 },
-  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 }
-};
-var HorizonGraphLayer = class extends import_core4.Layer {
-  state = {};
-  initializeState() {
-    this.state = {};
-  }
-  getShaders() {
-    return super.getShaders({
-      vs: horizon_graph_layer_vs_default,
-      fs: horizon_graph_layer_fs_default,
-      modules: [import_core4.project32, horizonLayerUniforms]
-    });
-  }
-  _createDataTexture(seriesData) {
-    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;
-    }
-    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;
-    const positions = [
-      x,
-      y,
-      0,
-      x + width,
-      y,
-      0,
-      x,
-      y + height,
-      0,
-      x + width,
-      y + height,
-      0
-    ];
-    const uv = [0, 0, 1, 0, 0, 1, 1, 1];
-    const geometry = new import_engine.Geometry({
-      topology: "triangle-strip",
-      attributes: {
-        positions: { value: new Float32Array(positions), size: 3 },
-        uv: { value: new Float32Array(uv), size: 2 }
-      }
-    });
-    return new import_engine.Model(this.context.device, {
-      ...this.getShaders(),
-      geometry,
-      bufferLayout: this.getAttributeManager().getBufferLayouts()
-    });
-  }
-  updateState(params) {
-    var _a, _b;
-    super.updateState(params);
-    const { changeFlags } = params;
-    if (changeFlags.dataChanged) {
-      (_a = this.state.dataTexture) == null ? void 0 : _a.destroy();
-      this.setState(this._createDataTexture(this.props.data));
-    }
-    if (changeFlags.extensionsChanged || changeFlags.propsChanged) {
-      (_b = this.state.model) == null ? void 0 : _b.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 / this.state.dataTextureSize,
-        dataTextureCount: this.state.dataTextureCount,
-        bands,
-        bandsInv: 1 / bands,
-        yAxisScaleInv: 1 / yAxisScale,
-        positiveColor: positiveColor.map((c) => c / 255),
-        negativeColor: negativeColor.map((c) => c / 255)
-      }
-    });
-    model.draw(this.context.renderPass);
-  }
-  finalizeState(context) {
-    var _a, _b;
-    (_a = this.state.model) == null ? void 0 : _a.destroy();
-    (_b = this.state.dataTexture) == null ? void 0 : _b.destroy();
-    super.finalizeState(context);
-  }
-};
-__publicField(HorizonGraphLayer, "layerName", "HorizonGraphLayer");
-__publicField(HorizonGraphLayer, "defaultProps", defaultProps);
-
-// dist/layers/horizon-graph-layer/multi-horizon-graph-layer.js
-var import_core5 = require("@deck.gl/core");
-var import_layers4 = require("@deck.gl/layers");
-var defaultProps2 = {
-  getSeries: { type: "accessor", value: (series) => series.values },
-  getScale: { type: "accessor", value: (series) => 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 }
-};
-var MultiHorizonGraphLayer = class extends import_core5.CompositeLayer {
-  renderLayers() {
-    const { data, getSeries, getScale, bands, positiveColor, negativeColor, dividerColor, dividerWidth, x, y, width, height } = this.props;
-    const seriesCount = data.length;
-    if (!seriesCount) {
-      return [];
-    }
-    const totalDividerSpace = dividerWidth * (seriesCount + 1);
-    const availableHeight = height - totalDividerSpace;
-    const seriesHeight = availableHeight / seriesCount;
-    const layers = [];
-    if (dividerWidth > 0) {
-      const dividerData = [];
-      dividerData.push({
-        polygon: [
-          [x, y],
-          [x + width, y],
-          [x + width, y + dividerWidth],
-          [x, y + dividerWidth]
-        ]
-      });
-      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]
-          ]
-        });
-      }
-      const bottomDividerY = y + height - dividerWidth;
-      dividerData.push({
-        polygon: [
-          [x, bottomDividerY],
-          [x + width, bottomDividerY],
-          [x + width, y + height],
-          [x, y + height]
-        ]
-      });
-      layers.push(new import_layers4.SolidPolygonLayer({
-        id: `${this.props.id}-dividers`,
-        data: dividerData,
-        getPolygon: (d) => d.polygon,
-        getFillColor: dividerColor,
-        pickable: false
-      }));
-    }
-    data.forEach((series, index) => {
-      const seriesData = getSeries(series);
-      if (!seriesData || seriesData.length === 0) {
-        return;
-      }
-      const seriesY = y + dividerWidth + index * (seriesHeight + dividerWidth);
-      const yAxisScale = getScale(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;
-  }
-};
-__publicField(MultiHorizonGraphLayer, "layerName", "MultiHorizonGraphLayer");
-__publicField(MultiHorizonGraphLayer, "defaultProps", defaultProps2);
-
 // dist/views/orthographic-utils.js
 function fitBoundsOrthographic(width, height, bounds, zoomMode = "per-axis") {
   const [[minX, minY], [maxX, maxY]] = bounds;
@@ -734,11 +274,11 @@ function makeLayerFilter(filters) {
 }
 
 // dist/synchronized-views/synchronized-views.js
-var import_core6 = require("@deck.gl/core");
+var import_core2 = require("@deck.gl/core");
 var HEADER_VIEW_HEIGHT = 50;
 var LEGEND_VIEW_WIDTH = 150;
 var SYNCHRONIZED_VIEWS = [
-  new import_core6.OrthographicView({
+  new import_core2.OrthographicView({
     id: "main",
     flipY: false,
     clear: true,
@@ -748,14 +288,14 @@ var SYNCHRONIZED_VIEWS = [
     y: HEADER_VIEW_HEIGHT,
     height: `calc(100% - ${HEADER_VIEW_HEIGHT}px)`,
     controller: {
-      type: import_core6.OrthographicController,
+      type: import_core2.OrthographicController,
       // @ts-expect-error Specific to OrthographicController
       zoomAxis: "X",
       inertia: false,
       scrollZoom: true
     }
   }),
-  new import_core6.OrthographicView({
+  new import_core2.OrthographicView({
     id: "header",
     flipY: false,
     clear: true,
@@ -765,7 +305,7 @@ var SYNCHRONIZED_VIEWS = [
     height: 50,
     controller: false
   }),
-  new import_core6.OrthographicView({
+  new import_core2.OrthographicView({
     id: "legend",
     flipY: false,
     clear: true,