11403690777

Committed 18 Oct 2024 12:27PM UTC coverage: 91.639% (-0.004%) from 91.643%

Build # 11403690777

Build Type

Pull #9218

github

Committed by

web-flow

Commit Message

Merge 90d2b08a2 into 065816e0f

Pull Request Pull Request #9218: carto: RasterLayer fix perf issue caused by spurious data changes

Run Details

6744 of 7378 branches covered (91.41%)

Branch coverage included in aggregate %.

6 of 10 new or added lines in 1 file covered. (60.0%)

4 existing lines in 1 file now uncovered.

54696 of 59668 relevant lines covered (91.67%)

14708.19 hits per line

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

40.3

/modules/carto/src/layers/raster-layer.ts

// deck.gl
// SPDX-License-Identifier: MIT
// Copyright (c) vis.gl contributors

import {
  Accessor,
  CompositeLayer,
  CompositeLayerProps,
  Layer,
  LayersList,
  DefaultProps,
  PickingInfo
} from '@deck.gl/core';
import {ColumnLayer, ColumnLayerProps} from '@deck.gl/layers';
import {quadbinToOffset} from './quadbin-utils';
import {Raster} from './schema/carto-raster-tile-loader';
import vs from './raster-layer-vertex.glsl';
import {createBinaryProxy} from '../utils';

const defaultProps: DefaultProps<RasterLayerProps> = {
  ...ColumnLayer.defaultProps,
  extruded: false,
  diskResolution: 4,
  vertices: [
    [-0.5, -0.5],
    [0.5, -0.5],
    [0.5, 0.5],
    [-0.5, 0.5]
  ]
};

// Modified ColumnLayer with custom vertex shader
class RasterColumnLayer extends ColumnLayer {
  static layerName = 'RasterColumnLayer';

  getShaders() {
    const shaders = super.getShaders();
    const data = this.props.data as unknown as {data: Raster; length: number};
    const BLOCK_WIDTH = data.data.blockSize ?? Math.sqrt(data.length);
    return {...shaders, defines: {...shaders.defines, BLOCK_WIDTH}, vs};
  }

  initializeState() {
    // Only add attributes needed by shader
    const attributeManager = this.getAttributeManager()!;
    /* eslint-disable max-len */
    attributeManager.addInstanced({
      instanceElevations: {
        size: 1,
        transition: true,
        accessor: 'getElevation'
      },
      instanceFillColors: {
        size: this.props.colorFormat.length,
        type: 'unorm8',
        transition: true,
        accessor: 'getFillColor',
        defaultValue: [0, 0, 0, 255]
      },
      instanceLineColors: {
        size: this.props.colorFormat.length,
        type: 'unorm8',
        transition: true,
        accessor: 'getLineColor',
        defaultValue: [255, 255, 255, 255]
      }
    });
  }
}

/** All properties supported by RasterLayer. */
export type RasterLayerProps<DataT = unknown> = _RasterLayerProps &
  ColumnLayerProps<DataT> &
  CompositeLayerProps;

/** Properties added by RasterLayer. */
type _RasterLayerProps = {
  /**
   * Quadbin index of tile
   */
  tileIndex: bigint;
};

type RasterColumnLayerData = {
  data: Raster;
  length: number;
};

function wrappedDataComparator(oldData: RasterColumnLayerData, newData: RasterColumnLayerData) {
  return oldData.data === newData.data && oldData.length === newData.length;
}

// Adapter layer around RasterColumnLayer that converts data & accessors into correct format
export default class RasterLayer<DataT = any, ExtraProps = {}> extends CompositeLayer<
  Required<RasterLayerProps<DataT>> & ExtraProps
> {
  static layerName = 'RasterLayer';
  static defaultProps = defaultProps;

  state!: {
    highlightedObjectIndex: number;
    highlightColor: number[];
    dataWrapper?: {data: Raster; length: number};
  };

  renderLayers(): Layer | null | LayersList {
    // Rendering props underlying layer
    const {
      data,
      getElevation,
      getFillColor,
      getLineColor,
      getLineWidth,
      tileIndex,
      updateTriggers
    } = this.props as typeof this.props & {data: Raster};
    if (!data || !tileIndex) return null;

    const blockSize = data.blockSize ?? 0;
    const [xOffset, yOffset, scale] = quadbinToOffset(tileIndex);
    const offset = [xOffset, yOffset];
    const lineWidthScale = scale / blockSize;

    // Filled Column Layer
    const CellLayer = this.getSubLayerClass('column', RasterColumnLayer);
    const {highlightedObjectIndex, highlightColor} = this.state;
    return new CellLayer(
      this.props,
      this.getSubLayerProps({
        id: 'cell',
        updateTriggers,

        getElevation: this.getSubLayerAccessor(getElevation),
        getFillColor: this.getSubLayerAccessor(getFillColor),
        getLineColor: this.getSubLayerAccessor(getLineColor),
        getLineWidth: this.getSubLayerAccessor(getLineWidth)
      }),
      {
        data: {
          data, // Pass through data for getSubLayerAccessor()
          length: blockSize * blockSize
        },
        dataComparator: wrappedDataComparator,
        offset,
        lineWidthScale, // Re-use widthScale prop to pass cell scale,
        highlightedObjectIndex,
        highlightColor
      }
    );
  }

  protected getSubLayerAccessor<In, Out>(accessor: Accessor<In, Out>): Accessor<In, Out> {
    if (typeof accessor !== 'function') {
      return super.getSubLayerAccessor(accessor);
    }

    // Proxy values back in standard feature format
    return (object, info) => {
      const {data, index} = info;
      const binaryData = (data as unknown as {data: Raster}).data;
      const proxy = createBinaryProxy(binaryData.cells, index);
      // @ts-ignore (TS2349) accessor is always function
      return accessor({properties: proxy}, info);
    };
  }

  getPickingInfo(params: any) {
    const info = super.getPickingInfo(params);

    if (info.index !== -1) {
      info.object = this.getSubLayerAccessor((x: any) => x)(undefined, {
        data: this.props,
        index: info.index
      });
    }

    return info;
  }

  _updateAutoHighlight(info: PickingInfo) {
    const {highlightedObjectIndex} = this.state;
    let newHighlightedObjectIndex: number = -1;

    if (info.index !== -1) {
      newHighlightedObjectIndex = info.index;
    }

    if (highlightedObjectIndex !== newHighlightedObjectIndex) {
      let {highlightColor} = this.props;
      if (typeof highlightColor === 'function') {
        highlightColor = highlightColor(info);
      }

      this.setState({
        highlightColor,
        highlightedObjectIndex: newHighlightedObjectIndex
      });
    }
  }
}

1	// deck.gl	1✔
2	// SPDX-License-Identifier: MIT	1✔
3	// Copyright (c) vis.gl contributors	1✔
4		1✔
5	import {	1✔
6	Accessor,	1✔
7	CompositeLayer,	1✔
8	CompositeLayerProps,	1✔
9	Layer,	1✔
10	LayersList,	1✔
11	DefaultProps,	1✔
12	PickingInfo	1✔
13	} from '@deck.gl/core';	1✔
14	import {ColumnLayer, ColumnLayerProps} from '@deck.gl/layers';	1✔
15	import {quadbinToOffset} from './quadbin-utils';	1✔
16	import {Raster} from './schema/carto-raster-tile-loader';	1✔
17	import vs from './raster-layer-vertex.glsl';	1✔
18	import {createBinaryProxy} from '../utils';	1✔
19		1✔
20	const defaultProps: DefaultProps<RasterLayerProps> = {	1✔
21	...ColumnLayer.defaultProps,	1✔
22	extruded: false,	1✔
23	diskResolution: 4,	1✔
24	vertices: [	1✔
25	[-0.5, -0.5],	1✔
26	[0.5, -0.5],	1✔
27	[0.5, 0.5],	1✔
28	[-0.5, 0.5]	1✔
29	]	1✔
30	};	1✔
31		1✔
32	// Modified ColumnLayer with custom vertex shader	1✔
33	class RasterColumnLayer extends ColumnLayer {	1✔
34	static layerName = 'RasterColumnLayer';	1✔
35		1✔
36	getShaders() {	1✔
37	const shaders = super.getShaders();	×
38	const data = this.props.data as unknown as {data: Raster; length: number};	×
39	const BLOCK_WIDTH = data.data.blockSize ?? Math.sqrt(data.length);	×
40	return {...shaders, defines: {...shaders.defines, BLOCK_WIDTH}, vs};	×
41	}	×
42		1✔
43	initializeState() {	1✔
44	// Only add attributes needed by shader	×
45	const attributeManager = this.getAttributeManager()!;	×
46	/* eslint-disable max-len */	×
47	attributeManager.addInstanced({	×
48	instanceElevations: {	×
49	size: 1,	×
50	transition: true,	×
51	accessor: 'getElevation'	×
52	},	×
53	instanceFillColors: {	×
54	size: this.props.colorFormat.length,	×
55	type: 'unorm8',	×
56	transition: true,	×
57	accessor: 'getFillColor',	×
58	defaultValue: [0, 0, 0, 255]	×
59	},	×
60	instanceLineColors: {	×
61	size: this.props.colorFormat.length,	×
62	type: 'unorm8',	×
63	transition: true,	×
64	accessor: 'getLineColor',	×
65	defaultValue: [255, 255, 255, 255]	×
66	}	×
67	});	×
68	}	×
69	}	1✔
70		1✔
71	/** All properties supported by RasterLayer. */	1✔
72	export type RasterLayerProps<DataT = unknown> = _RasterLayerProps &	1✔
73	ColumnLayerProps<DataT> &	1✔
74	CompositeLayerProps;	1✔
75		1✔
76	/** Properties added by RasterLayer. */	1✔
77	type _RasterLayerProps = {	1✔
78	/**	1✔
79	* Quadbin index of tile	1✔
80	*/	1✔
81	tileIndex: bigint;	1✔
82	};	1✔
83		1✔
84	type RasterColumnLayerData = {	1✔
85	data: Raster;	1✔
86	length: number;	1✔
87	};	1✔
88		1✔
NEW 89	function wrappedDataComparator(oldData: RasterColumnLayerData, newData: RasterColumnLayerData) {	×
NEW 90	return oldData.data === newData.data && oldData.length === newData.length;	×
NEW 91	}	×
92		1✔
93	// Adapter layer around RasterColumnLayer that converts data & accessors into correct format	1✔
94	export default class RasterLayer<DataT = any, ExtraProps = {}> extends CompositeLayer<	1✔
95	Required<RasterLayerProps<DataT>> & ExtraProps	1✔
96	> {	1✔
97	static layerName = 'RasterLayer';	1✔
98	static defaultProps = defaultProps;	1✔
99		1✔
100	state!: {	1✔
101	highlightedObjectIndex: number;	1✔
102	highlightColor: number[];	1✔
103	dataWrapper?: {data: Raster; length: number};	1✔
104	};	1✔
105		1✔
106	renderLayers(): Layer \| null \| LayersList {	1✔
107	// Rendering props underlying layer	×
108	const {	×
109	data,	×
110	getElevation,	×
111	getFillColor,	×
112	getLineColor,	×
113	getLineWidth,	×
114	tileIndex,	×
115	updateTriggers	×
116	} = this.props as typeof this.props & {data: Raster};	×
117	if (!data \|\| !tileIndex) return null;	×
118		×
119	const blockSize = data.blockSize ?? 0;	×
120	const [xOffset, yOffset, scale] = quadbinToOffset(tileIndex);	×
121	const offset = [xOffset, yOffset];	×
122	const lineWidthScale = scale / blockSize;	×
123		×
124	// Filled Column Layer	×
125	const CellLayer = this.getSubLayerClass('column', RasterColumnLayer);	×
126	const {highlightedObjectIndex, highlightColor} = this.state;	×
127	return new CellLayer(	×
128	this.props,	×
129	this.getSubLayerProps({	×
130	id: 'cell',	×
131	updateTriggers,	×
132		×
133	getElevation: this.getSubLayerAccessor(getElevation),	×
134	getFillColor: this.getSubLayerAccessor(getFillColor),	×
135	getLineColor: this.getSubLayerAccessor(getLineColor),	×
136	getLineWidth: this.getSubLayerAccessor(getLineWidth)	×
137	}),	×
138	{	×
139	data: {	×
140	data, // Pass through data for getSubLayerAccessor()	×
141	length: blockSize * blockSize	×
NEW 142	},	×
143	dataComparator: wrappedDataComparator,	×
144	offset,	×
145	lineWidthScale, // Re-use widthScale prop to pass cell scale,	×
146	highlightedObjectIndex,	×
147	highlightColor	×
148	}	×
149	);	×
UNCOV 150	}	×
151		1✔
152	protected getSubLayerAccessor<In, Out>(accessor: Accessor<In, Out>): Accessor<In, Out> {	1✔
153	if (typeof accessor !== 'function') {	×
154	return super.getSubLayerAccessor(accessor);	×
155	}	×
156		×
157	// Proxy values back in standard feature format	×
158	return (object, info) => {	×
159	const {data, index} = info;	×
160	const binaryData = (data as unknown as {data: Raster}).data;	×
161	const proxy = createBinaryProxy(binaryData.cells, index);	×
162	// @ts-ignore (TS2349) accessor is always function	×
163	return accessor({properties: proxy}, info);	×
164	};	×
UNCOV 165	}	×
166		1✔
167	getPickingInfo(params: any) {	1✔
168	const info = super.getPickingInfo(params);	×
169		×
170	if (info.index !== -1) {	×
171	info.object = this.getSubLayerAccessor((x: any) => x)(undefined, {	×
172	data: this.props,	×
173	index: info.index	×
174	});	×
175	}	×
176		×
177	return info;	×
UNCOV 178	}	×
179		1✔
180	_updateAutoHighlight(info: PickingInfo) {	1✔
181	const {highlightedObjectIndex} = this.state;	×
182	let newHighlightedObjectIndex: number = -1;	×
183		×
184	if (info.index !== -1) {	×
185	newHighlightedObjectIndex = info.index;	×
186	}	×
187		×
188	if (highlightedObjectIndex !== newHighlightedObjectIndex) {	×
189	let {highlightColor} = this.props;	×
190	if (typeof highlightColor === 'function') {	×
191	highlightColor = highlightColor(info);	×
192	}	×
193		×
194	this.setState({	×
195	highlightColor,	×
196	highlightedObjectIndex: newHighlightedObjectIndex	×
197	});	×
198	}	×
UNCOV 199	}	×
200	}	1✔

visgl / deck.gl / 11403690777

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