Tidy

Author: felixpalmer

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

@@ -7,7 +7,7 @@ import {_Tile2DHeader, TripsLayer, TripsLayerProps} from '@deck.gl/geo-layers';
 import {GeoJsonLayer} from '@deck.gl/layers';
 
 import type {TilejsonResult} from '@carto/api-client';
-import VectorTileLayer from './vector-tile-layer';
+import VectorTileLayer, { VectorTileLayerProps } from './vector-tile-layer';
 import {transformTrajectoryData, type TileBounds, normalizeTimestamp} from './trajectory-utils';
 import {autocomputeSpeed} from './trajectory-speed-utils';
 import {createBinaryProxy, createEmptyBinary} from '../utils';
@@ -24,7 +24,8 @@ const defaultProps: DefaultProps<TrajectoryTileLayerProps> = {
 
 /** All properties supported by TrajectoryTileLayer. */
 export type TrajectoryTileLayerProps<FeaturePropertiesT = unknown> = _TrajectoryTileLayerProps &
-  Omit<TripsLayerProps<FeaturePropertiesT>, 'data'>;
+  Omit<TripsLayerProps<FeaturePropertiesT>, 'data'> &
+  Pick<VectorTileLayerProps<FeaturePropertiesT>, 'getFillColor' | 'getLineColor' | 'uniqueIdProperty'>;
 
 /** Properties added by TrajectoryTileLayer. */
 type _TrajectoryTileLayerProps = {

test/apps/carto-trajectories/app.tsx

@@ -6,6 +6,7 @@ import {MapboxOverlay} from '@deck.gl/mapbox';
 
 import {DeckProps } from '@deck.gl/core';
 import {trajectoryQuerySource, trajectoryTableSource} from '@carto/api-client';
+import type {TrajectoryTableSourceResponse, TrajectoryQuerySourceResponse} from '@carto/api-client';
 import {TrajectoryTileLayer, VectorTileLayer,  colorContinuous} from '@deck.gl/carto';
 import {normalizeTimestamp} from '@deck.gl/carto/layers/trajectory-utils';
 
@@ -171,13 +172,11 @@ export default function App() {
     setCurrentTime(0);
     setTimeRange([0, 1000]);
     setTimestampRange(null);
-    setClickedTrajectoryId(null);
   }
 
   const mapRef = useRef(null);
   const currentDataset = DATASETS[selectedDataset];
-  const [dataSource, setDataSource] = useState(null);
-  const [clickedTrajectoryId, setClickedTrajectoryId] = useState(null);
+  const [dataSource, setDataSource] = useState<TrajectoryTableSourceResponse | TrajectoryQuerySourceResponse | null>(null);
 
   // Handle trajectory click to jump to start time
   function handleTrajectoryClick(info) {
@@ -209,7 +208,6 @@ export default function App() {
         console.log('Jumping to trajectory start time:', startTime);
 
         setCurrentTime(startTime);
-        setClickedTrajectoryId(trajectoryId);
       }
     }).catch(error => {
       console.error('Error fetching trajectory time range:', error);
@@ -277,6 +275,7 @@ export default function App() {
   const showTrips = layer === 'Trips';
   const showPoints = layer === 'Point';
   const styleName = mapStyle;
+  const trajectoryIdColumn = dataSource.widgetSource.props.trajectoryIdColumn;
 
   const layers = showPoints ? [
     new VectorTileLayer({
@@ -285,7 +284,7 @@ export default function App() {
       pointRadiusMinPixels: lineWidth,
       pointRadiusMaxPixels: lineWidth,
       getFillColor: colorContinuous({
-        attr: 'trajectoryId',
+        attr: trajectoryIdColumn,
         domain: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
         colors: palette
       }),
@@ -295,12 +294,13 @@ export default function App() {
     new TrajectoryTileLayer({
       id: 'trajectories',
       data: dataSource,
-      renderMode: showTrips ? 'trips' : 'paths',
       uniqueIdProperty: 'trajectoryId', // TODO internalize this
 
+      renderMode: showTrips ? 'trips' : 'paths',
+
       // Color entire line by trajectoryId, will be invoked once per line
       getLineColor: colorContinuous({
-        attr: 'trajectoryId',
+        attr: trajectoryIdColumn,
         domain: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
         colors: palette
       }),
@@ -313,17 +313,15 @@ export default function App() {
         colors: palette
       }),
       updateTriggers: {getLineColor: [palette], getFillColor: [palette]},
+
+      // 
       currentTime,
       trailLength,
       getWidth: lineWidth,
       fadeTrail: true,
+
+
       widthUnits: 'pixels',
-      opacity: 0.8,
-      billboard: true,
-      jointRounded: true,
-      capRounded: true,
-      _pathType: 'open',
-      zRange: [0, 4000],
       onClick: handleTrajectoryClick,
       onHover: info => {
         info.object && console.log('onHover', info.object.properties);