Add DougalSequenceLayer

lib/www/client/source/src/lib/deck.gl/DougalSequenceLayer.js

@@ -0,0 +1,178 @@
+// Ref.: https://deck.gl/docs/developer-guide/custom-layers/composite-layers
+import { CompositeLayer } from '@deck.gl/core';
+import { GeoJsonLayer, LineLayer, BitmapLayer, ScatterplotLayer, IconLayer } from '@deck.gl/layers';
+import {HeatmapLayer} from '@deck.gl/aggregation-layers';
+
+class DougalSequenceLayer extends CompositeLayer {
+  static layerName = "DougalSequenceLayer";
+
+  static defaultProps = {
+    valueIndex: 0,
+    radiusUnits: "pixels",
+    radiusScale: 1,
+    lineWidthUnits: "pixels",
+    lineWidthScale: 1,
+    stroked: false,
+    filled: true,
+    radiusMinPixels: 1,
+    radiusMaxPixels: 50,
+    lineWidthMinPixels: 1,
+    lineWidthMaxPixels: 50,
+    // billboard: this.props.billboard,
+    // antialiasing: this.props.antialiasing,
+    getPosition: {type: 'accessor', value: d => d.positions},
+    getRadius: 5,
+    //getColor: this.props.getColor,
+    getFillColor: [255, 0, 0, 200],
+    getLineColor: [255, 0, 0, 200],
+    getLineWidth: 2,
+    pickable: true
+  }
+
+  constructor (props) {
+    super(props);
+
+    // A unique id (prefix) for this layer
+    this.uid = "sl-" + Math.random().toString().slice(2);
+  }
+
+  getPickingInfo({ info, mode, sourceLayer }) {
+    console.log("picking info", info);
+    const index = info.index;
+    if (index >= 0) {
+      const d = sourceLayer.props.data.attributes;
+      console.log(index, d);
+
+      if (d) {
+        info.object = {
+          udv:       d.udv ?? 2, // FIXME must add
+          i:         d.value0.value[index],
+          j:         d.value1.value[index],
+          ts: Number(d.value2.value[index]),
+          //λ:         d.value3[k*2+0],
+          //φ:         d.value3[k*2+1],
+          εi:        d.value3.value[index] / 10,
+          εj:        d.value4.value[index] / 10,
+          delta_μ:   d.value5.value[index] / 10,
+          delta_σ:   d.value6.value[index] / 10,
+          delta_R:   d.value7.value[index] / 10,
+          press_μ:   d.value8.value[index],
+          press_σ:   d.value9.value[index],
+          press_R:  d.value10.value[index],
+          depth_μ:  d.value11.value[index] / 10,
+          depth_σ:  d.value12.value[index] / 10,
+          depth_R:  d.value13.value[index] / 10,
+          fill_μ:   d.value14.value[index],
+          fill_σ:   d.value15.value[index],
+          fill_R:   d.value16.value[index],
+          delay_μ:  d.value17.value[index] / 10,
+          delay_σ:  d.value18.value[index] / 10,
+          delay_R:  d.value19.value[index] / 10,
+          /*
+          nofire:   d.value20.value[index] >> 4,
+          autofire: d.value20.value[index] & 0xf
+          */
+        }
+      } else {
+        console.log(`No data found index = ${index}`);
+      }
+    }
+
+    return info;
+  }
+
+  renderLayers () {
+    // return [
+    //   // List of sublayers. One per sequence (+ one per data item?)
+    // ]
+
+
+    const subLayers = [];
+    let count=0;
+    for (const {positions, values} of this.props.data) {
+      const length = positions.length / 2;
+
+      // CHANGE: Build binary attributes object
+      const attributes = {
+        getPosition: {
+          value: positions,
+          type: "float32",
+          size: 2
+        }
+      };
+
+      // CHANGE: Add each TypedArray in values as a custom attribute 'value0', 'value1', etc.
+      // Note: If BigUint64Array or unsupported types, convert here (e.g., to Float64Array for timestamps)
+      // Example: if (values[k] instanceof BigUint64Array) values[k] = Float64Array.from(values[k], BigInt => Number(BigInt));
+      values.forEach((valArray, k) => {
+        attributes[`value${k}`] = {
+          value: valArray,
+          size: 1
+        };
+      });
+
+      const subLayer = new ScatterplotLayer(this.getSubLayerProps({
+        id: `${this.uid}-${count++}-scatter`,
+        data: {
+          length,
+          attributes
+        },
+        radiusUnits: this.props.radiusUnits,
+        radiusScale: this.props.radiusScale,
+        lineWidthUnits: this.props.lineWidthUnits,
+        lineWidthScale: this.props.lineWidthScale,
+        stroked: this.props.stroked,
+        filled: this.props.filled,
+        radiusMinPixels: this.props.radiusMinPixels,
+        radiusMaxPixels: this.props.radiusMaxPixels,
+        lineWidthMinPixels: this.props.lineWidthMinPixels,
+        lineWidthMaxPixels: this.props.lineWidthMaxPixels,
+        billboard: this.props.billboard,
+        antialiasing: this.props.antialiasing,
+        getPosition: this.props.getPosition,  // CHANGE: Default to d => d.positions; user can override with function accessing d.valueX
+        getRadius: this.props.getRadius,  // CHANGE: Can now be function d => d.value0 (or string 'value0' for direct mapping)
+        //getColor: this.props.getColor,
+        getFillColor: this.props.getFillColor ?? this.props.getColor,  // CHANGE: Can now be function d => d.value1 * ...
+        getLineColor: this.props.getLineColor,
+        getLineWidth: this.props.getLineWidth,
+
+        updateTriggers: {
+          getPosition: this.props.updateTriggers.getPosition,
+          getRadius: this.props.updateTriggers.getRadius,
+          getColor: this.props.updateTriggers.getColor,
+          getFillColor: this.props.updateTriggers.getFillColor,
+          getLineColor: this.props.updateTriggers.getLineColor,
+          getLineWidth: this.props.updateTriggers.getLineWidth,
+        }
+      }));
+
+      subLayers.push(subLayer);
+    }
+
+    // console.log(`Rendering ${subLayers.length} sublayers`);
+
+    return subLayers;
+  }
+
+}
+
+/*
+
+function GunPressureAvgHeatmap (data, options = {}) {
+  let id = options.id
+    ? options.id
+    : "gun-pressure-avg-heatmap"+Math.random().toString().slice(2);
+
+  return new HeatmapLayer({
+    id,
+    data: {
+      length,
+      attributes: {
+        getPosition,
+        getWeight
+      }
+    }
+  })
+}*/
+
+export default DougalSequenceLayer;

lib/www/client/source/src/lib/deck.gl/index.js

@@ -1,4 +1,6 @@
 
+import DougalSequenceLayer from './DougalSequenceLayer'
 
 export {
+  DougalSequenceLayer
 };