[Bug]PolygonLayer.getFillColor not invoked if data is an arbitrary "object that implements the iterable protocol"

[clo-vis]

Description

if PolygonLayer.data is an arbitrary "object that implements the iterable protocol", getFillColor is not necessarily invoked.

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CARTO
• ArcGIS

Expected Behavior

if PolygonLayer.data is an arbitrary object that implements the iterable protocol, getFillColor is invoked for all objects returned by the iterator.

Steps to Reproduce

Given:

function createLayer(name: string, iterableObject: Iterable<[number, number][]>): Layer {
  return new PolygonLayer<[number, number][]>({
    id: name,
    data: iterableObject,

    getPolygon: region => region,
    lineWidthMinPixels: 1,
    getFillColor: [0, 206, 209, 160],
  })
}

const rectangle: [number, number][] = [[-122.4, 37.7], [-122.4, 37.8], [-122.5, 37.8], [-122.5, 37.7], [-122.4, 37.7]]

const MY_REGIONS = new Map<string, [number, number][]>([['Rectangle', rectangle]])

For a layer created like this
createLayer('ok', Array.from(MY_REGIONS.values()))
getFillColor is invoked:

But not for a layer created like this:
createLayer('error', MY_REGIONS.values())

Environment

• Framework version: [email protected]
• Browser: Microsoft Edge Version 133.0.3065.82, Firefox 135.0.1, Opera 117.0.5408.39
• OS: Microsoft Windows [Version 10.0.19045.5371]

Logs

Empty

[Pessimistress]

Map.values() returns an Iterator which can only be walked through once. It doesn't work because each accessor is invoked by its own iteration through the data object.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol

Technically speaking an Iterator is also iterable so this should be clarified in the docs...?

In your example the most efficient way to supply data is to simply pass the map itself to the data prop.

[clo-vis]

Passing the map directly solves the problem with getFillColor. But in

const rectangle: [number, number][] = [[-122.4, 37.7], [-122.4, 37.8], [-122.5, 37.8], [-122.5, 37.7], [-122.4, 37.7]]

const MY_REGIONS = new Map<string, [number, number][]>([['Rectangle', rectangle]])

function polygonLayer(): Layer {
  return new PolygonLayer<[string, [number, number][]]>({
    data: MY_REGIONS,

    getPolygon: mapEntry => mapEntry[1],
    lineWidthMinPixels: 1,
    getFillColor: [0, 206, 209, 160],
    pickable: true,
    onHover: pickable => console.log('onHover', pickable.object),
    onClick: pickable => console.log('onClick', pickable.object)
  })
}

the callbacks onHover and onClick are invoked with pickable.object undefined inside the polygon; only at the border pickable.object has a value. This doesn't happen if I use data: Array.from(MY_REGIONS)

So I think the sentence

An object that implements the iterable protocol, for example Map and Set.

in the documentation needs some clarification.

[Pessimistress]

So I think the sentence

An object that implements the iterable protocol, for example Map and Set.

in the documentation needs some clarification.

The documentation is correct in stating that data can be a Map or Set. Map.values() is not a Map.

PickingInfo is documented here:

object any ...This field is usually only present when picking from layers where props.data is an array

You can still figure out which object is picked with pickInfo.index.

[clo-vis]

The point is that, by reading the documentation of Layer.data, it can be assumed that a Layer will work equally well with any "object that implements the iterable protocol", as well as with any "Map and Set".

The documentation of Layer.data doesn't mention that the layer's behavior is different if the object that implements the iterator protocol always returns the same iterator, like Map.values(). Nor does it mention that there might be some features in the layer (like PickingInfo.object) that behave differently if the object is not an array.