10215223996

Committed 02 Aug 2024 12:03PM UTC coverage: 89.272% (-0.03%) from 89.303%

Build # 10215223996

Build Type

Pull #9068

github

Committed by

web-flow

Commit Message

Merge 46c5ed892 into 947ed098a

Pull Request Pull Request #9068: CARTO: HeatmapTileLayer full colorRange

Run Details

6534 of 7176 branches covered (91.05%)

Branch coverage included in aggregate %.

61 of 98 new or added lines in 2 files covered. (62.24%)

41 existing lines in 1 file now uncovered.

54573 of 61274 relevant lines covered (89.06%)

6309.95 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

40.95

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

import type {ShaderModule} from '@luma.gl/shadertools';
import {getResolution} from 'quadbin';

import {
  Accessor,
  Color,
  CompositeLayer,
  CompositeLayerProps,
  DefaultProps,
  Layer,
  UpdateParameters
} from '@deck.gl/core';
import {SolidPolygonLayer} from '@deck.gl/layers';

import {HeatmapProps, heatmap} from './heatmap';
import {RTTModifier, PostProcessModifier} from './post-process-utils';
import QuadbinTileLayer, {QuadbinTileLayerProps} from './quadbin-tile-layer';
import {TilejsonPropType} from './utils';
import {TilejsonResult} from '../sources';
import {_Tile2DHeader as Tile2DHeader} from '@deck.gl/geo-layers';
import {Texture, TextureProps} from '@luma.gl/core';
import {
  defaultColorRange,
  colorRangeToFlatArray
} from '../../../aggregation-layers/src/utils/color-utils';

const TEXTURE_PROPS: TextureProps = {
  format: 'rgba8unorm',
  mipmaps: false,
  sampler: {
    minFilter: 'linear',
    magFilter: 'linear',
    addressModeU: 'clamp-to-edge',
    addressModeV: 'clamp-to-edge'
  }
};
/**
 * Computes the unit density (inverse of cell area)
 */
function unitDensityForCell(cell: bigint) {
  const cellResolution = Number(getResolution(cell));
  return Math.pow(4.0, cellResolution);
}

const uniformBlock = `\
uniform densityUniforms {
  float factor;
} density;
`;

type DensityProps = {factor: number};
const densityUniforms = {
  name: 'density',
  vs: uniformBlock,
  uniformTypes: {
    factor: 'f32'
  }
} as const satisfies ShaderModule<DensityProps>;

// Modified polygon layer to draw offscreen and output value expected by heatmap
class RTTSolidPolygonLayer extends RTTModifier(SolidPolygonLayer) {
  static layerName = 'RTTSolidPolygonLayer';

  getShaders(type) {
    const shaders = super.getShaders(type);
    shaders.inject = {
      'vs:#main-end': `
      // Value from getWeight accessor
  float weight = elevations;

  // Keep "power" delivered to screen constant when tiles update
  // by outputting normalized density 
  weight *= density.factor;

  // Pack float into 3 channels to pass to heatmap shader
  // SCALE value important, as we don't want to saturate
  // but also want enough definition to avoid banding
  const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);
  const float MAX_VAL = SHIFT.z * 255.0;
  const float SCALE = MAX_VAL / 8.0;
  weight *= SCALE;
  weight = clamp(weight, 0.0, MAX_VAL);
  vColor = vec4(mod(vec3(weight, floor(weight / SHIFT.yz)), 256.0), 255.0) / 255.0;
`
    };
    shaders.modules = [...shaders.modules, densityUniforms];
    return shaders;
  }

  draw(this, opts: any) {
    const cell = this.props!.data[0];
    const maxDensity = this.props.elevationScale;
    const densityProps: DensityProps = {
      factor: unitDensityForCell(cell.id) / maxDensity
    };
    for (const model of this.state.models) {
      model.shaderInputs.setProps({density: densityProps});
    }

    super.draw(opts);
  }
}

// Modify QuadbinTileLayer to apply heatmap post process effect
const PostProcessQuadbinTileLayer = PostProcessModifier(QuadbinTileLayer, heatmap);

const defaultProps: DefaultProps<HeatmapTileLayerProps> = {
  data: TilejsonPropType,
  getWeight: {type: 'accessor', value: 1},
  onMaxDensityChange: {type: 'function', optional: true, value: null},
  colorDomain: {type: 'array', value: [0, 1]},
  colorRange: defaultColorRange,
  intensity: {type: 'number', value: 1},
  radiusPixels: {type: 'number', min: 0, max: 100, value: 20}
};

/** All properties supported by HeatmapTileLayer. */
export type HeatmapTileLayerProps<DataT = unknown> = _HeatmapTileLayerProps<DataT> &
  CompositeLayerProps & {
    data: null | TilejsonResult | Promise<TilejsonResult>;
  };

/** Properties added by HeatmapTileLayer. */
type _HeatmapTileLayerProps<DataT> = QuadbinTileLayerProps<DataT> &
  HeatmapProps & {
    /**
     * Specified as an array of colors [color1, color2, ...].
     *
     * @default `6-class YlOrRd` - [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6)
     */
    colorRange: Color[];

    /**
     * The weight of each object.
     *
     * @default 1
     */
    getWeight?: Accessor<DataT, number>;

    /** Called when maximum density in displayed tiles changes. */
    onMaxDensityChange?: ((maxDensity: number) => void) | null;
  };

class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends CompositeLayer<
  ExtraProps & Required<_HeatmapTileLayerProps<DataT>>
> {
  static layerName = 'HeatmapTileLayer';
  static defaultProps = defaultProps;

  state!: {
    colorTexture?: Texture;
    isLoaded: boolean;
    tiles: Set<Tile2DHeader>;
    viewportChanged?: boolean;
  };
  initializeState() {
    this.state = {
      isLoaded: false,
      tiles: new Set(),
      viewportChanged: false
    };
  }

  shouldUpdateState({changeFlags}): boolean {
    const {viewportChanged} = changeFlags;
    this.setState({viewportChanged});
    return changeFlags.somethingChanged;
  }

  updateState(opts: UpdateParameters<this>) {
    const {props, oldProps} = opts;
    super.updateState(opts);
    if (props.colorRange !== oldProps.colorRange) {
      this._updateColorTexture(opts);
    }
  }

  renderLayers(): Layer {
    const {
      data,
      getWeight,
      colorDomain,
      colorRange,
      intensity,
      radiusPixels,
      _subLayerProps,
      updateTriggers,
      onMaxDensityChange,
      onViewportLoad,
      onTileLoad,
      onTileUnload,
      ...tileLayerProps
    } = this.props;

    // Inject modified polygon layer as sublayer into TileLayer
    const subLayerProps = {
      ..._subLayerProps,
      cell: {
        ..._subLayerProps?.cell,
        _subLayerProps: {
          ..._subLayerProps?.cell?._subLayerProps,
          fill: {
            ..._subLayerProps?.cell?._subLayerProps?.fill,
            type: RTTSolidPolygonLayer
          }
        }
      }
    };

    let tileZ = 0;
    let maxDensity = 0;
    const tiles = [...this.state.tiles].filter(t => t.isVisible && t.content);
    for (const tile of tiles) {
      const cell = tile.content[0];
      const unitDensity = unitDensityForCell(cell.id);
      maxDensity = Math.max(tile.userData!.maxWeight * unitDensity, maxDensity);
      tileZ = Math.max(tile.zoom, tileZ);
    }

    // Between zoom levels the max density will change, but it isn't possible to know by what factor. Uniform data distributions lead to a factor of 4, while very localized data gives 1. As a heurstic estimate with a value inbetween (2) to make the transitions less obvious.
    const overzoom = this.context.viewport.zoom - tileZ;
    const estimatedMaxDensity = maxDensity * Math.pow(2, overzoom);

    maxDensity = estimatedMaxDensity;
    if (typeof onMaxDensityChange === 'function') {
      onMaxDensityChange(maxDensity);
    }
    return new PostProcessQuadbinTileLayer(
      tileLayerProps as Omit<QuadbinTileLayerProps, 'data'>,
      this.getSubLayerProps({
        id: 'heatmap',
        data,

        // Re-use existing props to pass down values to sublayer
        // TODO replace with custom layer
        getFillColor: 0,
        getElevation: getWeight,
        elevationScale: maxDensity,

        colorDomain,

        // colorRange,
        radiusPixels,
        intensity,
        _subLayerProps: subLayerProps,
        refinementStrategy: 'no-overlap',

        colorTexture: this.state.colorTexture,

        // Disable line rendering
        extruded: false,
        stroked: false,

        updateTriggers: {
          getElevation: updateTriggers.getWeight
        },

        // Tile stats
        onViewportLoad: tiles => {
          this.setState({isLoaded: true});
          if (typeof onViewportLoad === 'function') {
            onViewportLoad(tiles);
          }
        },
        onTileLoad: (tile: Tile2DHeader) => {
          let maxWeight = -Infinity;
          if (typeof getWeight !== 'function') {
            maxWeight = getWeight;
          } else if (tile.content) {
            for (const d of tile.content) {
              maxWeight = Math.max(getWeight(d, {} as any), maxWeight);
            }
          }
          tile.userData = {maxWeight};

          this.state.tiles.add(tile);

          if (typeof onTileLoad === 'function') {
            onTileLoad(tile);
          }
        },
        onTileUnload: (tile: Tile2DHeader) => {
          this.state.tiles.delete(tile);
          if (typeof onTileUnload === 'function') {
            onTileUnload(tile);
          }
        },
        transitions: {elevationScale: {type: 'spring', stiffness: 0.3, damping: 0.5}}
      })
    );
  }

  _updateColorTexture(opts) {
    const {colorRange} = opts.props;
    let {colorTexture} = this.state;
    const colors = colorRangeToFlatArray(colorRange, false, Uint8Array as any);

    if (colorTexture && colorTexture?.width === colorRange.length) {
      // TODO(v9): Unclear whether `setSubImageData` is a public API, or what to use if not.
      (colorTexture as any).setSubImageData({data: colors});
    } else {
      colorTexture?.destroy();
      colorTexture = this.context.device.createTexture({
        ...TEXTURE_PROPS,
        data: colors,
        width: colorRange.length,
        height: 1
      });
    }
    this.setState({colorTexture});
  }
}

export default HeatmapTileLayer;

1	import type {ShaderModule} from '@luma.gl/shadertools';	1✔
2	import {getResolution} from 'quadbin';	1✔
3		1✔
4	import {	1✔
5	Accessor,	1✔
6	Color,	1✔
7	CompositeLayer,	1✔
8	CompositeLayerProps,	1✔
9	DefaultProps,	1✔
10	Layer,	1✔
11	UpdateParameters	1✔
12	} from '@deck.gl/core';	1✔
13	import {SolidPolygonLayer} from '@deck.gl/layers';	1✔
14		1✔
15	import {HeatmapProps, heatmap} from './heatmap';	1✔
16	import {RTTModifier, PostProcessModifier} from './post-process-utils';	1✔
17	import QuadbinTileLayer, {QuadbinTileLayerProps} from './quadbin-tile-layer';	1✔
18	import {TilejsonPropType} from './utils';	1✔
19	import {TilejsonResult} from '../sources';	1✔
20	import {_Tile2DHeader as Tile2DHeader} from '@deck.gl/geo-layers';	1✔
21	import {Texture, TextureProps} from '@luma.gl/core';	1✔
22	import {	1✔
23	defaultColorRange,	1✔
24	colorRangeToFlatArray	1✔
25	} from '../../../aggregation-layers/src/utils/color-utils';	1✔
26		1✔
27	const TEXTURE_PROPS: TextureProps = {	1✔
28	format: 'rgba8unorm',	1✔
29	mipmaps: false,	1✔
30	sampler: {	1✔
31	minFilter: 'linear',	1✔
32	magFilter: 'linear',	1✔
33	addressModeU: 'clamp-to-edge',	1✔
34	addressModeV: 'clamp-to-edge'	1✔
35	}	1✔
36	};	1✔
37	/**	1✔
38	* Computes the unit density (inverse of cell area)	1✔
39	*/	1✔
40	function unitDensityForCell(cell: bigint) {	×
41	const cellResolution = Number(getResolution(cell));	×
UNCOV 42	return Math.pow(4.0, cellResolution);	×
UNCOV 43	}	×
44		1✔
45	const uniformBlock = `\	1✔
46	uniform densityUniforms {	1✔
47	float factor;	1✔
48	} density;	1✔
49	`;	1✔
50		1✔
51	type DensityProps = {factor: number};	1✔
52	const densityUniforms = {	1✔
53	name: 'density',	1✔
54	vs: uniformBlock,	1✔
55	uniformTypes: {	1✔
56	factor: 'f32'	1✔
57	}	1✔
58	} as const satisfies ShaderModule<DensityProps>;	1✔
59		1✔
60	// Modified polygon layer to draw offscreen and output value expected by heatmap	1✔
61	class RTTSolidPolygonLayer extends RTTModifier(SolidPolygonLayer) {	1✔
62	static layerName = 'RTTSolidPolygonLayer';	1✔
63		1✔
64	getShaders(type) {	1✔
65	const shaders = super.getShaders(type);	×
66	shaders.inject = {	×
67	'vs:#main-end': `	×
UNCOV 68	// Value from getWeight accessor	×
UNCOV 69	float weight = elevations;	×
UNCOV 70		×
UNCOV 71	// Keep "power" delivered to screen constant when tiles update	×
UNCOV 72	// by outputting normalized density	×
UNCOV 73	weight *= density.factor;	×
UNCOV 74		×
UNCOV 75	// Pack float into 3 channels to pass to heatmap shader	×
UNCOV 76	// SCALE value important, as we don't want to saturate	×
UNCOV 77	// but also want enough definition to avoid banding	×
UNCOV 78	const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);	×
UNCOV 79	const float MAX_VAL = SHIFT.z * 255.0;	×
UNCOV 80	const float SCALE = MAX_VAL / 8.0;	×
UNCOV 81	weight *= SCALE;	×
UNCOV 82	weight = clamp(weight, 0.0, MAX_VAL);	×
UNCOV 83	vColor = vec4(mod(vec3(weight, floor(weight / SHIFT.yz)), 256.0), 255.0) / 255.0;	×
UNCOV 84	`	×
UNCOV 85	};	×
UNCOV 86	shaders.modules = [...shaders.modules, densityUniforms];	×
UNCOV 87	return shaders;	×
88	}	×
89		1✔
90	draw(this, opts: any) {	1✔
91	const cell = this.props!.data[0];	×
92	const maxDensity = this.props.elevationScale;	×
93	const densityProps: DensityProps = {	×
94	factor: unitDensityForCell(cell.id) / maxDensity	×
95	};	×
96	for (const model of this.state.models) {	×
97	model.shaderInputs.setProps({density: densityProps});	×
98	}	×
99		×
100	super.draw(opts);	×
101	}	×
102	}	1✔
103		1✔
104	// Modify QuadbinTileLayer to apply heatmap post process effect	1✔
105	const PostProcessQuadbinTileLayer = PostProcessModifier(QuadbinTileLayer, heatmap);	1✔
106		1✔
107	const defaultProps: DefaultProps<HeatmapTileLayerProps> = {	1✔
108	data: TilejsonPropType,	1✔
109	getWeight: {type: 'accessor', value: 1},	1✔
110	onMaxDensityChange: {type: 'function', optional: true, value: null},	1✔
111	colorDomain: {type: 'array', value: [0, 1]},	1✔
112	colorRange: defaultColorRange,	1✔
113	intensity: {type: 'number', value: 1},	1✔
114	radiusPixels: {type: 'number', min: 0, max: 100, value: 20}	1✔
115	};	1✔
116		1✔
117	/** All properties supported by HeatmapTileLayer. */	1✔
118	export type HeatmapTileLayerProps<DataT = unknown> = _HeatmapTileLayerProps<DataT> &	1✔
119	CompositeLayerProps & {	1✔
120	data: null \| TilejsonResult \| Promise<TilejsonResult>;	1✔
121	};	1✔
122		1✔
123	/** Properties added by HeatmapTileLayer. */	1✔
124	type _HeatmapTileLayerProps<DataT> = QuadbinTileLayerProps<DataT> &	1✔
125	HeatmapProps & {	1✔
126	/**	1✔
127	* Specified as an array of colors [color1, color2, ...].	1✔
128	*	1✔
129	* @default `6-class YlOrRd` - [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6)	1✔
130	*/	1✔
131	colorRange: Color[];	1✔
132		1✔
133	/**	1✔
134	* The weight of each object.	1✔
135	*	1✔
136	* @default 1	1✔
137	*/	1✔
138	getWeight?: Accessor<DataT, number>;	1✔
139		1✔
140	/** Called when maximum density in displayed tiles changes. */	1✔
141	onMaxDensityChange?: ((maxDensity: number) => void) \| null;	1✔
142	};	1✔
143		1✔
144	class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends CompositeLayer<	1✔
145	ExtraProps & Required<_HeatmapTileLayerProps<DataT>>	1✔
146	> {	1✔
147	static layerName = 'HeatmapTileLayer';	1✔
148	static defaultProps = defaultProps;	1✔
149		1✔
150	state!: {	1✔
151	colorTexture?: Texture;	1✔
152	isLoaded: boolean;	1✔
153	tiles: Set<Tile2DHeader>;	1✔
154	viewportChanged?: boolean;	1✔
155	};	1✔
156	initializeState() {	1✔
UNCOV 157	this.state = {	×
UNCOV 158	isLoaded: false,	×
UNCOV 159	tiles: new Set(),	×
UNCOV 160	viewportChanged: false	×
UNCOV 161	};	×
UNCOV 162	}	×
163		1✔
164	shouldUpdateState({changeFlags}): boolean {	1✔
UNCOV 165	const {viewportChanged} = changeFlags;	×
UNCOV 166	this.setState({viewportChanged});	×
UNCOV 167	return changeFlags.somethingChanged;	×
UNCOV 168	}	×
169		1✔
170	updateState(opts: UpdateParameters<this>) {	1✔
NEW UNCOV 171	const {props, oldProps} = opts;	×
NEW UNCOV 172	super.updateState(opts);	×
NEW UNCOV 173	if (props.colorRange !== oldProps.colorRange) {	×
NEW 174	this._updateColorTexture(opts);	×
NEW UNCOV 175	}	×
NEW UNCOV 176	}	×
177		1✔
178	renderLayers(): Layer {	1✔
UNCOV 179	const {	×
180	data,	×
181	getWeight,	×
182	colorDomain,	×
183	colorRange,	×
184	intensity,	×
185	radiusPixels,	×
UNCOV 186	_subLayerProps,	×
UNCOV 187	updateTriggers,	×
188	onMaxDensityChange,	×
189	onViewportLoad,	×
190	onTileLoad,	×
191	onTileUnload,	×
UNCOV 192	...tileLayerProps	×
193	} = this.props;	×
194		×
195	// Inject modified polygon layer as sublayer into TileLayer	×
196	const subLayerProps = {	×
197	..._subLayerProps,	×
198	cell: {	×
199	..._subLayerProps?.cell,	×
200	_subLayerProps: {	×
201	..._subLayerProps?.cell?._subLayerProps,	×
202	fill: {	×
203	..._subLayerProps?.cell?._subLayerProps?.fill,	×
204	type: RTTSolidPolygonLayer	×
205	}	×
206	}	×
207	}	×
208	};	×
209		×
210	let tileZ = 0;	×
211	let maxDensity = 0;	×
212	const tiles = [...this.state.tiles].filter(t => t.isVisible && t.content);	×
213	for (const tile of tiles) {	×
214	const cell = tile.content[0];	×
215	const unitDensity = unitDensityForCell(cell.id);	×
216	maxDensity = Math.max(tile.userData!.maxWeight * unitDensity, maxDensity);	×
217	tileZ = Math.max(tile.zoom, tileZ);	×
218	}	×
219		×
220	// Between zoom levels the max density will change, but it isn't possible to know by what factor. Uniform data distributions lead to a factor of 4, while very localized data gives 1. As a heurstic estimate with a value inbetween (2) to make the transitions less obvious.	×
221	const overzoom = this.context.viewport.zoom - tileZ;	×
222	const estimatedMaxDensity = maxDensity * Math.pow(2, overzoom);	×
223		×
224	maxDensity = estimatedMaxDensity;	×
225	if (typeof onMaxDensityChange === 'function') {	×
226	onMaxDensityChange(maxDensity);	×
227	}	×
228	return new PostProcessQuadbinTileLayer(	×
229	tileLayerProps as Omit<QuadbinTileLayerProps, 'data'>,	×
230	this.getSubLayerProps({	×
231	id: 'heatmap',	×
232	data,	×
233		×
234	// Re-use existing props to pass down values to sublayer	×
235	// TODO replace with custom layer	×
236	getFillColor: 0,	×
237	getElevation: getWeight,	×
238	elevationScale: maxDensity,	×
239		×
240	colorDomain,	×
241		×
NEW 242	// colorRange,	×
243	radiusPixels,	×
244	intensity,	×
245	_subLayerProps: subLayerProps,	×
246	refinementStrategy: 'no-overlap',	×
247		×
NEW 248	colorTexture: this.state.colorTexture,	×
NEW 249		×
250	// Disable line rendering	×
251	extruded: false,	×
252	stroked: false,	×
253		×
254	updateTriggers: {	×
255	getElevation: updateTriggers.getWeight	×
256	},	×
257		×
258	// Tile stats	×
259	onViewportLoad: tiles => {	×
260	this.setState({isLoaded: true});	×
261	if (typeof onViewportLoad === 'function') {	×
262	onViewportLoad(tiles);	×
263	}	×
264	},	×
265	onTileLoad: (tile: Tile2DHeader) => {	×
266	let maxWeight = -Infinity;	×
267	if (typeof getWeight !== 'function') {	×
268	maxWeight = getWeight;	×
269	} else if (tile.content) {	×
270	for (const d of tile.content) {	×
271	maxWeight = Math.max(getWeight(d, {} as any), maxWeight);	×
272	}	×
273	}	×
274	tile.userData = {maxWeight};	×
275		×
276	this.state.tiles.add(tile);	×
277		×
278	if (typeof onTileLoad === 'function') {	×
279	onTileLoad(tile);	×
280	}	×
281	},	×
282	onTileUnload: (tile: Tile2DHeader) => {	×
283	this.state.tiles.delete(tile);	×
284	if (typeof onTileUnload === 'function') {	×
285	onTileUnload(tile);	×
286	}	×
287	},	×
288	transitions: {elevationScale: {type: 'spring', stiffness: 0.3, damping: 0.5}}	×
289	})	×
290	);	×
291	}	×
292		1✔
293	_updateColorTexture(opts) {	1✔
NEW 294	const {colorRange} = opts.props;	×
NEW 295	let {colorTexture} = this.state;	×
NEW 296	const colors = colorRangeToFlatArray(colorRange, false, Uint8Array as any);	×
NEW 297		×
NEW 298	if (colorTexture && colorTexture?.width === colorRange.length) {	×
NEW 299	// TODO(v9): Unclear whether `setSubImageData` is a public API, or what to use if not.	×
NEW 300	(colorTexture as any).setSubImageData({data: colors});	×
NEW 301	} else {	×
NEW 302	colorTexture?.destroy();	×
NEW 303	colorTexture = this.context.device.createTexture({	×
NEW 304	...TEXTURE_PROPS,	×
NEW 305	data: colors,	×
NEW 306	width: colorRange.length,	×
NEW 307	height: 1	×
NEW 308	});	×
NEW 309	}	×
NEW 310	this.setState({colorTexture});	×
NEW 311	}	×
312	}	1✔
313		1✔
314	export default HeatmapTileLayer;	1✔

visgl / deck.gl / 10215223996

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous