Skip to content

feat(deck): extract reusable luSpatial geographic query effect #2926

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ibgreen-openai merged 6 commits into from
Aug 7, 2026
Merged

feat(deck): extract reusable luSpatial geographic query effect #2926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
701614d
feat(deck): extract reusable luSpatial geographic query effect
ibgreen Aug 4, 2026
edd838d
test(deck): skip precise radius smoke on software WebGPU
ibgreen Aug 4, 2026
9382b67
fix(deck): address geographic query review feedback
ibgreen Aug 4, 2026
a36a4d6
fix(deck): return mutable projection coordinates
ibgreen Aug 4, 2026
be1a45d
test(deck): cover geographic query validation in browser
ibgreen-openai Aug 5, 2026
a81a314
test(deck): cover geographic query browser lifecycle
ibgreen-openai Aug 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 47 additions & 40 deletions examples/deck/luspatial-taxi/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,16 @@ import {
MapView,
type MapViewState,
type PickingInfo,
type ViewStateChangeParameters,
type Viewport
type Viewport,
type ViewStateChangeParameters
} from '@deck.gl/core';
import {LuSpatialPointLayer} from '@deck.gl-community/luspatial';
import {
LU_SPATIAL_GEOGRAPHIC_POINT_QUERY_COUNTER_IDS,
LU_SPATIAL_GEOGRAPHIC_POINT_QUERY_GRAPH_IDS,
LuSpatialGeographicPointQueryEffect,
type LuSpatialGeographicPointQueryStats
} from '@deck.gl-community/luspatial/query';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import {GPUCommandGraphInspectorPanel} from '../../gpu-command-graph-inspector-panel';
Expand All @@ -19,21 +25,18 @@ import {
type TaxiPointSource
} from '../../showcase/billion-point-spatial-atlas/taxi-source';
import {ArrowDeck} from '../arrow-deck';
import {getDeckExampleProps, type DeckExampleDeviceOptions} from '../deck-example-device';
import {
LU_SPATIAL_TAXI_QUERY_COUNTER_IDS,
LuSpatialTaxiQueryEffect,
type LuSpatialTaxiQueryStats
} from './luspatial-query-effect';
import {type DeckExampleDeviceOptions, getDeckExampleProps} from '../deck-example-device';
import {
TAXI_CORPUS_POINT_COUNT,
TAXI_POINT_COUNT,
assertLongitudeLatitudeTaxiMetadata,
getTaxiPoint,
type LuSpatialTaxiData,
makeLuSpatialTaxiDataAsync,
makeLuSpatialTaxiDataFromResidentWindow,
makeTaxiZonePresets,
type LuSpatialTaxiData,
TAXI_CORPUS_POINT_COUNT,
TAXI_GRID_SIZE,
TAXI_POINT_COUNT,
TAXI_PROJECTION_ORIGIN,
type TaxiZonePreset
} from './taxi-data';

Expand Down Expand Up @@ -99,9 +102,9 @@ export function createLuSpatialTaxiDeck(
minZoom: 9,
maxZoom: 20
};
let queryEffect: LuSpatialTaxiQueryEffect | null = null;
let queryEffect: LuSpatialGeographicPointQueryEffect | null = null;
let latestSelectionCenter: readonly [number, number] = initialZone.center;
let stagingQueryEffect: LuSpatialTaxiQueryEffect | null = null;
let stagingQueryEffect: LuSpatialGeographicPointQueryEffect | null = null;
let activeLayers: LuSpatialPointLayer[] = [];
let queryRadiusKilometres = 0.35;
let taxiDataRevision = 0;
Expand Down Expand Up @@ -136,7 +139,6 @@ export function createLuSpatialTaxiDeck(
queryRadiusKilometres = radiusKilometres;
queryEffect?.setSelectionRadius(radiusKilometres);
stagingQueryEffect?.setSelectionRadius(radiusKilometres);
deck?.redraw('luSpatial radius changed');
},
onZoneChange: zone => {
latestSelectionCenter = zone.center;
Expand All @@ -146,12 +148,11 @@ export function createLuSpatialTaxiDeck(
latitude: zone.center[1],
zoom: zone.zoom
};
deck?.setProps({viewState});
queryEffect?.setSelection(zone.center, queryRadiusKilometres);
stagingQueryEffect?.setSelection(zone.center, queryRadiusKilometres);
controls.setCoordinate(zone.center, zone.name);
deck?.setProps({viewState});
synchronizeBasemap(map, viewState);
deck?.redraw('luSpatial taxi zone changed');
}
});
controls.setCoordinate(initialZone.center, initialZone.name);
Expand Down Expand Up @@ -191,7 +192,6 @@ export function createLuSpatialTaxiDeck(
stagingQueryEffect?.setSelection(center, queryRadiusKilometres);
controls.setCoordinate(center, 'Custom map query');
controls.setCustomZone();
deck.redraw('luSpatial query moved');
},
onViewStateChange: ({viewState: nextViewState}: ViewStateChangeParameters) => {
viewState = nextViewState as TaxiViewState;
Expand All @@ -216,10 +216,20 @@ export function createLuSpatialTaxiDeck(
const previousQueryEffect = queryEffect;
const previousLayers = activeLayers;
const nextTaxiDataRevision = taxiDataRevision + 1;
let nextQueryEffect: LuSpatialTaxiQueryEffect;
let nextQueryEffect: LuSpatialGeographicPointQueryEffect;
try {
nextQueryEffect = new LuSpatialTaxiQueryEffect(device, nextTaxiData, {
nextQueryEffect = new LuSpatialGeographicPointQueryEffect(device, {
id: `luspatial-taxi-query-effect-${nextTaxiDataRevision}`,
longitudeLatitudes: nextTaxiData.longitudeLatitudes,
sourceBounds: nextTaxiData.sourceBounds,
projectedBounds: nextTaxiData.projectedBounds,
projectionOrigin: TAXI_PROJECTION_ORIGIN,
gridSize: TAXI_GRID_SIZE,
initialSelection: {
center: latestSelectionCenter,
radiusKilometres: queryRadiusKilometres
},
selectionRadiusRangeKilometres: [0.05, 5],
onStats: stats => controls.updateStats(stats)
});
} catch (error) {
Expand Down Expand Up @@ -440,7 +450,7 @@ type TaxiControlPanel = {
setCustomZone: () => void;
setLoadingProgress: (processedPointCount: number, totalPointCount: number) => void;
updateSourceStatus: (status: {corpusPointCount?: number; message: string}) => void;
updateStats: (stats: LuSpatialTaxiQueryStats) => void;
updateStats: (stats: LuSpatialGeographicPointQueryStats) => void;
};

type TaxiLoadingIndicator = {
Expand Down Expand Up @@ -629,16 +639,16 @@ function createControlPanel(
const graphInspectorElement = root.querySelector<HTMLElement>('[data-graph-inspector]')!;
const graphInspectorPanel = new GPUCommandGraphInspectorPanel(graphInspectorElement, {
graphLabels: {
'luspatial-taxi-build-graph': 'luProj projection + grid build',
'luspatial-taxi-query-graph': 'Viewport + radius queries'
[LU_SPATIAL_GEOGRAPHIC_POINT_QUERY_GRAPH_IDS.build]: 'luProj projection + grid build',
[LU_SPATIAL_GEOGRAPHIC_POINT_QUERY_GRAPH_IDS.query]: 'Viewport + radius queries'
Comment thread
ibgreen-openai marked this conversation as resolved.
},
counterLabels: {
[LU_SPATIAL_TAXI_QUERY_COUNTER_IDS.viewportIntersectedCells]: 'Viewport cells',
[LU_SPATIAL_TAXI_QUERY_COUNTER_IDS.viewportCandidates]: 'Viewport candidates',
[LU_SPATIAL_TAXI_QUERY_COUNTER_IDS.viewportMatches]: 'Viewport matches',
[LU_SPATIAL_TAXI_QUERY_COUNTER_IDS.selectionIntersectedCells]: 'Selection cells',
[LU_SPATIAL_TAXI_QUERY_COUNTER_IDS.selectionCandidates]: 'Selection candidates',
[LU_SPATIAL_TAXI_QUERY_COUNTER_IDS.selectionMatches]: 'Selection matches'
[LU_SPATIAL_GEOGRAPHIC_POINT_QUERY_COUNTER_IDS.viewportIntersectedCells]: 'Viewport cells',
[LU_SPATIAL_GEOGRAPHIC_POINT_QUERY_COUNTER_IDS.viewportCandidates]: 'Viewport candidates',
[LU_SPATIAL_GEOGRAPHIC_POINT_QUERY_COUNTER_IDS.viewportMatches]: 'Viewport matches',
[LU_SPATIAL_GEOGRAPHIC_POINT_QUERY_COUNTER_IDS.selectionIntersectedCells]: 'Selection cells',
[LU_SPATIAL_GEOGRAPHIC_POINT_QUERY_COUNTER_IDS.selectionCandidates]: 'Selection candidates',
[LU_SPATIAL_GEOGRAPHIC_POINT_QUERY_COUNTER_IDS.selectionMatches]: 'Selection matches'
}
});

Expand Down Expand Up @@ -770,7 +780,10 @@ function createControlPanel(
visibleElement.textContent = formatCount(stats.visiblePointCount);
selectedElement.textContent = formatCount(stats.selectedPointCount);
queryTimeElement.textContent = `${stats.queryEncodingMilliseconds.toFixed(2)} ms`;
graphInspectorPanel.update(stats.inspectorSnapshot, 'luspatial-taxi-query-graph');
graphInspectorPanel.update(
stats.inspectorSnapshot,
LU_SPATIAL_GEOGRAPHIC_POINT_QUERY_GRAPH_IDS.query
);
}
};
}
Expand Down Expand Up @@ -803,8 +816,8 @@ async function closeTaxiPointSource(source: TaxiPointSource | null): Promise<voi

function retirePreviousQueryEffect(
deck: ArrowDeck<MapView>,
previousQueryEffect: LuSpatialTaxiQueryEffect | null,
nextQueryEffect: LuSpatialTaxiQueryEffect,
previousQueryEffect: LuSpatialGeographicPointQueryEffect | null,
nextQueryEffect: LuSpatialGeographicPointQueryEffect,
shouldSkip: () => boolean
): void {
if (!previousQueryEffect) return;
Expand All @@ -824,7 +837,7 @@ type TaxiLayerStagingOptions = {
};

function makeTaxiLayers(
queryEffect: LuSpatialTaxiQueryEffect,
queryEffect: LuSpatialGeographicPointQueryEffect,
taxiDataRevision: number,
options: TaxiLayerStagingOptions = {}
): LuSpatialPointLayer[] {
Expand All @@ -835,10 +848,7 @@ function makeTaxiLayers(
pickable: true,
autoHighlight: true,
highlightColor: [255, 140, 32, 230],
positions: queryEffect.longitudeLatitudes,
pointIds: queryEffect.viewportIds,
drawCommands: queryEffect.drawCommands,
commandIndex: 0,
...queryEffect.outputs.viewport,
color: [94, 172, 198, 105],
radiusPixels: 0.9,
radiusScale: getTaxiPointRadiusScale,
Expand All @@ -857,10 +867,7 @@ function makeTaxiLayers(
pickable: true,
autoHighlight: true,
highlightColor: [255, 140, 32, 245],
positions: queryEffect.longitudeLatitudes,
pointIds: queryEffect.selectedIds,
drawCommands: queryEffect.drawCommands,
commandIndex: 1,
...queryEffect.outputs.selection,
color: [52, 220, 244, 205],
radiusPixels: 1.25,
radiusScale: getTaxiPointRadiusScale,
Expand Down
Loading
Loading