[BUG] Setting a custom highlight color gets ignored

[shawnboltz]

Context

When I set the highlight color for a layer, that is the color that should get used when hovering over an object.

Resulting behaviour, error message or logs

Despite explicitly setting a highlight color, the default highlight color gets used.

Environment

• OS: Windows and Ubuntu
• Browser: Edge and Firefox
• Lonboard Version: 0.12.1 and master

Steps to reproduce the bug

I generated a map using the following code snippet and hovered over the polygon:

from shapely import Polygon
import geopandas as gpd
from lonboard import Map, PolygonLayer

coords = ((-107., 35.), (-107., 39.), (-105., 39.), (-105., 35.))
polygon = Polygon(coords)

gdf = gpd.GeoDataFrame({"name": ["my_shape"], "geometry": [polygon]})
layer = PolygonLayer.from_geopandas(gdf, get_fill_color="#FF000033", pickable=True, auto_highlight=True)
layer.highlight_color = [0, 255, 0]  # Should be bright green
map_ = Map(layer)
map_

I can attempt to take on fixing this one, but I'm still learning how ipywidget works.

[kylebarron]

First, can you check if there are any JS console errors?

That value is propagated into JS here:

lonboard/src/model/base-layer.ts

Line 23 in c418415

protected highlightColor: LayerProps["highlightColor"];

(you can add a console.log at the end of the constructor to validate that it's sending the color)

That is an attribute on the data class, and then later it gets passed into the deck.gl Layer constructor.

Here it's returned with the props that are common to all layers:

lonboard/src/model/base-layer.ts

Lines 88 to 90 in c418415

	...(isDefined(this.highlightColor) && {
	highlightColor: this.highlightColor,
	}),

Then that gets passed into the deck.gl Layer class here:

lonboard/src/model/layer/polygon.ts

Line 203 in c418415

...this.baseLayerProps(batchIdx),

The docs for building the JS code for development should be up to date here: https://github.com/developmentseed/lonboard/blob/main/DEVELOP.md