updatePaintArrays got really slow on geojson with lots of paint properties
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
### mapbox-gl-js version
v3.21, v3.24.0
### Browser and version
firebox 151.0.2
### Expected behavior
Hi.
I have a geojson Line layer with many paint properties. (line-color, line-opacity, line-width, line-blur). There are also expression on those ex:
'line-color': ['case', ['boolean', ['feature-state', 'select'], false], '#87FFF3',
['case', ['has', 'route_color'],
['concat', '#', ['get', 'route_color']],'#4b88fa']],
when i update a paint property it's now really slow
map.setPaintProperty('my-layer', 'line-opacity', 0.5);
It now take 3600ms while it took 400ms before v3.21.
The function "updatePaintArrays" looks to be the problem.
I tested i bit and The slowdown seems to only happen when there are expressions in the paint properties. Like mapbox now have to reevaluate every expression on every geojson features when I change the opacity.
here are screenshots of the firefox's performance flameGraphs. issue is still present on v3.24.0
v3.21
v.3.20
thank you!
### Actual behavior
_No response_
### Link to the demonstration
_No response_
### Steps to trigger the unexpected behavior
_No response_
### Relevant log output
```shell
```
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the updatePaintArrays path called by map.setPaintProperty, then compare its behavior between v3.20 and v3.21 using a GeoJSON Line layer with several expression-based paint properties. Profile the expression work during an opacity update; done means the regression is explained and the update no longer incurs the reported multi-second slowdown.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- computer-graphics, frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100