Correct palette updateTriggers

Author: felixpalmer

test/apps/carto-trajectories/app.tsx

@@ -37,8 +37,7 @@ const DATASETS = {
     layerType: 'Trips 2D',
     lineWidth: 2,
     mapStyle: 'dark-v11',
-    palette: 'Sunset',
-    outline: 'none'
+    palette: 'Sunset'
   },
   'NYC Taxi Trips (Table)': {
     name: 'NYC Taxi Trips (Table)',
@@ -61,8 +60,7 @@ const DATASETS = {
     layerType: 'Trips 2D',
     lineWidth: 2,
     mapStyle: 'outdoors-v12',
-    palette: 'ArmyRose',
-    outline: 'black'
+    palette: 'ArmyRose'
   },
   'Atlanta Vehicle Trajectories': {
     name: 'Atlanta Vehicle Trajectories',
@@ -85,8 +83,7 @@ const DATASETS = {
     layerType: 'Trips 2D',
     lineWidth: 1.5,
     mapStyle: 'dark-v11',
-    palette: 'Vivid',
-    outline: 'none'
+    palette: 'Vivid'
   },
   'Memphis Vehicle Trajectories (Query)': {
     name: 'Memphis Vehicle Trajectories (Query)',
@@ -108,19 +105,13 @@ const DATASETS = {
     layerType: 'Trips 2D',
     lineWidth: 1.5,
     mapStyle: 'satellite-streets-v12',
-    palette: 'Temps',
-    outline: 'white'
+    palette: 'Temps'
   }
 }
 const DATASET_NAMES = Object.keys(DATASETS);
 
 const LAYER = { Path: 'Path 2D', Trips: 'Trips 2D', Points: 'Point 2D' };
 
-const OUTLINES = {
-  black: 'black',
-  white: 'white',
-  none: 'none'
-};
 
 const PALETTES = {
   ArmyRose: 'ArmyRose',
@@ -162,7 +153,6 @@ export default function App() {
   const [layerType, setLayerType] = useState(initialDataset.layerType);
   const [mapStyle, setMapStyle] = useState(initialDataset.mapStyle);
   const [palette, setPalette] = useState(initialDataset.palette);
-  const [outline, setOutline] = useState(initialDataset.outline);
   const [currentTime, setCurrentTime] = useState(0);
   const [animationSpeed, setAnimationSpeed] = useState(100);
   const [trailLength, setTrailLength] = useState(1000);
@@ -176,7 +166,6 @@ export default function App() {
     setLayerType(dataset.layerType);
     setLineWidth(dataset.lineWidth);
     setMapStyle(dataset.mapStyle);
-    setOutline(dataset.outline);
     setPalette(dataset.palette);
     // Reset time controls to defaults - they'll be updated when data loads
     setCurrentTime(0);
@@ -191,7 +180,7 @@ export default function App() {
   const [clickedTrajectoryId, setClickedTrajectoryId] = useState(null);
 
   // Handle trajectory click to jump to start time
-  async function handleTrajectoryClick(info) {
+  function handleTrajectoryClick(info) {
     console.log('handleTrajectoryClick', info);
     if (!info.object || !dataSource?.widgetSource) return;
 
@@ -204,13 +193,11 @@ export default function App() {
 
     console.log('Clicked trajectory with ID:', trajectoryId);
 
-    try {
-      // Use getRange to efficiently get min/max timestamps for this trajectory
-      const timeRange = await dataSource.widgetSource.getRange({
-        column: timestampColumn,
-        filters: { [trajectoryIdColumn]: { in: { values: [trajectoryId] } } }
-      });
-      
+    // Use getRange to efficiently get min/max timestamps for this trajectory
+    dataSource.widgetSource.getRange({
+      column: timestampColumn,
+      filters: { [trajectoryIdColumn]: { in: { values: [trajectoryId] } } }
+    }).then(timeRange => {
       if (timeRange && timeRange.min) {
         const startTime = normalizeTimestamp(timeRange.min);
 
@@ -224,9 +211,9 @@ export default function App() {
         setCurrentTime(startTime);
         setClickedTrajectoryId(trajectoryId);
       }
-    } catch (error) {
+    }).catch(error => {
       console.error('Error fetching trajectory time range:', error);
-    }
+    });
   }
 
   useEffect(() => {
@@ -293,19 +280,20 @@ export default function App() {
 
   const layers = showPoints ? [
     new VectorTileLayer({
-      id: `points-${palette}`,
+      id: 'points',
       data: dataSource,
       pointRadiusMinPixels: lineWidth,
       pointRadiusMaxPixels: lineWidth,
       getFillColor: colorContinuous({
         attr: 'trajectoryId',
         domain: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
         colors: palette
-      })
+      }),
+      updateTriggers: {getFillColor: [palette]},
     })
   ] : [
     new TrajectoryTileLayer({
-      id: `${palette}-${outline}`,
+      id: 'trajectories',
       data: dataSource,
       renderMode: showTrips ? 'trips' : 'paths',
       uniqueIdProperty: 'trajectoryId', // TODO internalize this
@@ -324,7 +312,7 @@ export default function App() {
         domain: [0, 5, 10, 15, 20, 25],
         colors: palette
       }),
-
+      updateTriggers: {getLineColor: [palette], getFillColor: [palette]},
       currentTime,
       trailLength,
       getWidth: lineWidth,
@@ -335,7 +323,6 @@ export default function App() {
       jointRounded: true,
       capRounded: true,
       _pathType: 'open',
-      outline,
       zRange: [0, 4000],
       onClick: handleTrajectoryClick,
       onHover: info => {
@@ -379,7 +366,6 @@ export default function App() {
       <ObjectSelect title="Layer" obj={LAYER} value={layerType} onSelect={setLayerType} top={30} />
       <ObjectSelect title="Map Style" obj={MAP_STYLES} value={mapStyle} onSelect={setMapStyle} top={60} />
       <ObjectSelect title="Palette" obj={PALETTES} value={palette} onSelect={setPalette} top={90}/>
-      <ObjectSelect title="Outline" obj={OUTLINES} value={outline} onSelect={setOutline} top={120} />
       {showTrips && <RangeInput
         name={'Time'}
         animationSpeed={animationSpeed}