Copy across numeric props and use binary proxy

Author: felixpalmer

modules/carto/src/layers/trajectory-tile-layer.ts

@@ -10,7 +10,7 @@ import type {TilejsonResult} from '@carto/api-client';
 import VectorTileLayer from './vector-tile-layer';
 import {transformTrajectoryData, type TileBounds, normalizeTimestamp} from './trajectory-utils';
 import {applyTrajectoryColors} from './trajectory-speed-utils';
-import {createEmptyBinary} from '../utils';
+import {createBinaryProxy, createEmptyBinary} from '../utils';
 
 const defaultProps: DefaultProps<TrajectoryTileLayerProps> = {
   ...TripsLayer.defaultProps,
@@ -168,8 +168,11 @@ export default class TrajectoryTileLayer<
       const startIndex = data.startIndices[index];
       const endIndex = data.startIndices[index + 1];
       const nVertices = endIndex - startIndex;
-      const colors = new Array(nVertices).fill(0).map((_, index) => {
-        return props.getFillColor!(undefined, {index, data});
+      const colors = new Array(nVertices).fill(0).map((_, i) => {
+        const index = startIndex + i;
+        const properties = createBinaryProxy(data, index);
+        const d = {properties};
+        return props.getFillColor!(d, {index, data});
       });
 
       return colors;

modules/carto/src/layers/trajectory-utils.ts

@@ -3,6 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import { BinaryLineFeature } from '@loaders.gl/schema';
+import { NumericProps } from './schema/spatialjson-utils';
 
 
 
@@ -175,7 +176,7 @@ export function rebuildGeometry(
   validPoints: TrajectoryPoint[],
   pathIndices: number[],
 ): ProcessedGeometry {
-  const {positions, properties} = originalGeometry;
+  const {positions, numericProps, properties} = originalGeometry;
   const newN = validPoints.length;
 
   if (newN === 0) {
@@ -195,25 +196,43 @@ export function rebuildGeometry(
   }
 
   const size = 2;
-  
+  const newNumericProps: NumericProps = {};
+  const numericPropKeys = Object.keys(numericProps);
+  for (const prop of numericPropKeys) {
+    const size = numericProps[prop].size || 1;
+    newNumericProps[prop] = {value: new Float32Array(newN), size};
+  }
+
   // Properties are per-line.
   const newFeatureIds = new Uint16Array(newN);
+  let dst = 0;
   for (let i = 0; i < pathIndices.length - 1; i++) {
     const startIndex = pathIndices[i];
     const endIndex = pathIndices[i + 1];
-    const point = validPoints[startIndex];
+    const point = validPoints[startIndex]; // is this correct??? validPoints[i]????
+    const srcIndex = point.index;
+    const numVertices = endIndex - startIndex;
+    
     const trajectoryId = point.trajectoryId;
-    newProperties[i] = {trajectoryId, ...properties[point.index]}
+    newProperties[i] = {trajectoryId, ...properties[srcIndex]}
 
     for (let j = startIndex; j < endIndex; j++) {
       newFeatureIds[j] = i; // Each vertex is marked with featureId of the line
     }
+
+    for (const prop of numericPropKeys) {
+      const {value: originalValue} = originalGeometry.numericProps[prop];
+      const {value, size} = newNumericProps[prop];
+      const dataSlice = originalValue.subarray(srcIndex * size, (srcIndex + numVertices) * size)
+      value.set(dataSlice, dst * size);
+    }
+    dst += numVertices;
   }
 
   return {
     positions: {value: newPositions, size},
     properties: newProperties,
-    numericProps: {}, // TODO add numericProps
+    numericProps: newNumericProps,
     featureIds: {value: newFeatureIds, size: 1},
     globalFeatureIds: {value: newFeatureIds, size: 1},
     pathIndices: {value: new Uint16Array(pathIndices), size: 1},

test/apps/carto-trajectories/app.tsx

@@ -318,11 +318,14 @@ export default function App() {
       }),
 
       // Color each vertex, will be invoked once per vertex
-      getFillColor: (d: any, info: any) => {
+      _getFillColor: (d: any, info: any) => {
         return [255 * Math.random(), 255 * Math.random(), 255 * Math.random(), 255];
       },
-
-
+      getFillColor: colorContinuous({
+        attr: 'ts',
+        domain: [0, 200, 300, 500, 700],
+        colors: palette
+      }),
 
       // Alternative API, dedicated accessor: Color each vertex by speed
       _getVertexColor: colorContinuous({