Is it possible to configure autoHighlight in CompositeLayer with complex data?

[Dv-Andrew]

I'm trying to combine few CompositeLayers to create a layer that will be able to render a lines using the PathLayer and points at the nodes of this path.
But deck.gl create similar indexes in the main layer and its sublayers. This leads to a behavior, when cursor hover one of the entities, another one with an identical index is highlighted too:

Screen.Recording.2023-01-20.at.13.41.50.mov

To resolve this problem, I can split the lines data and use two different layers to render them.
But it will be handy if I can use only one CompositeLayer to work with such lines and processing all their data inside the layer.
The main question is — will it be possible to do this for my dataset? Maybe I'm missing something and the layer needs to be improved?

Example of data:

{
  "id": "some-line-id",
  "type": "LINE",
  "points": [
    {
      "id": "some-point-id",
      "coordinates": {
        "easting": 6.945529685615371,
        "northing": 51.49951462325985
      },
      // some metadata
    },
    ...
  ],
  "path": [
    [
      6.945529685615371,
      51.49951462325985
    ],
    ...
  ]
}

Example of layer:

// Composite PointsLayer replaced with ScatterplotLayer for simplicity

export const defaultProps = {
  id: 'lines-layer',
  data: [],
  pickable: true,
  autoHighlight: true
};


export class LinesLayer extends CompositeLayer {
  initializeState() {
    this.state = {
      path: [],
      points: []
    };
  }

  updateState(params) {
    const { props, changeFlags } = params;

    if (changeFlags.dataChanged) {
      const newPath = [];
      const newPoints = [];

      props.data.forEach((object, index) => {
        newPath.push(this.getSubLayerRow({ path: object.path }, object, index));

        for (const point of object.points) {
          newPoints.push(this.getSubLayerRow({ point }, object, index));
        }
      });

      this.setState({ path: newPath, points: newPoints });
    }
  }

  renderLayers() {
    const {
      pickable,
      autoHighlight,
      onClick
    } = this.props;

    const { path, points } = this.state;

    return [
      new PathLayer(
        this.getSubLayerProps({
          id: 'path'
        }),
          {
            data: path,
            getPath: ({ path }) => path,
            onClick,
            pickable,
            autoHighlight,
            // other props

            updateTriggers: this.props.updateTriggers
          }
      ),
      new ScatterplotLayer(
        this.getSubLayerProps({
          id: 'points'
        }),
        {
          data: points,
          onClick,
          getPosition: ({ point }) => [
            point.coordinates.easting,
            point.coordinates.northing
          ],
          // other props

          updateTriggers: this.props.updateTriggers
        }
      )
    ];
  }
}

LinesLayer.layerName = 'LinesLayer';
LinesLayer.defaultProps = defaultProps;

[Pessimistress]

These is indeed a (undocumented) lifecycle method on each layer called updateAutoHighlight (which calls a protected implementation _updateAutoHighlight):

deck.gl/modules/core/src/lib/layer.ts

Lines 1107 to 1111 in e923ad9

	updateAutoHighlight(info: PickingInfo): void {
	if (this.props.autoHighlight && !Number.isInteger(this.props.highlightedObjectIndex)) {
	this._updateAutoHighlight(info);
	}
	}

By default CompositeLayer just passes the picking info down to all sublayers:

deck.gl/modules/core/src/lib/composite-layer.ts

Lines 250 to 254 in e923ad9

	protected _updateAutoHighlight(info: PickingInfo): void {
	for (const layer of this.getSubLayers()) {
	layer.updateAutoHighlight(info);
	}
	}

You can see how GeoJsonLayer selectively highlight some sublayers:

deck.gl/modules/layers/src/geojson-layer/geojson-layer.ts

Lines 397 to 417 in e923ad9

	getPickingInfo(params): GeoJsonPickingInfo {
	const info = super.getPickingInfo(params) as GeoJsonPickingInfo;
	const {index, sourceLayer} = info;
	info.featureType = FEATURE_TYPES.find(ft => sourceLayer!.id.startsWith(`${this.id}-${ft}-`));
	if (index >= 0 && sourceLayer!.id.startsWith(`${this.id}-points-text`) && this.state.binary) {
	info.index = (this.props.data as BinaryFeatures).points!.globalFeatureIds.value[index];
	}
	return info;
	}
	_updateAutoHighlight(info: GeoJsonPickingInfo): void {
	// All sub layers except the points layer use source feature index to encode the picking color
	// The points layer uses indices from the points data array.
	const pointLayerIdPrefix = `${this.id}-points-`;
	const sourceIsPoints = info.featureType === 'points';
	for (const layer of this.getSubLayers()) {
	if (layer.id.startsWith(pointLayerIdPrefix) === sourceIsPoints) {
	layer.updateAutoHighlight(info);
	}
	}
	}

It is currently undocumented because we still have debates on how the process should be exposed. However it is not going to change in the 8.x timeframe.

[Dv-Andrew]

Thank you very much!
It looks like exactly what I was looking for.

[ted341]

@Pessimistress - does that mean we need to split the data into separate layers to avoid double-highlighting? And is there any update on selectively highlighting the sublayers from the CompositeLayer class?