[Bug] Gaps & overlaps while rendering dataset with hex

[bkowshik-rapido]

Describe the bug

I see empty gaps and rendering issues while working with datasets with hex. Ex: Below is a sample dataset I have having issues with.

• https://gist.github.com/bkowshik-rapido/0f5a5006326d501c1b5a477005bb6254

To Reproduce

Upload the above dataset onto Kepler.

Expected behavior

The hex's should be laid out without the missing gaps or the overlaps with neighboring cells.

Screenshots

Tested on Mac, Firefox v71.0

[Pessimistress]

@heshan0131 I don't see this issue in deck.gl 7.3 or 8.0. Is it possible to upgrade the dependency in kepler?

[heshan0131]

I think the issue is related to using h3Distance and how kepler.gl updates viewport across the globe.

Here are things happened

• Initial map, kepler.gl set viewport to San Francisco: latitude: 37.7749295, longitude: -122.4194155

• Upload csv. kepler.gl creates a h3 layer and pass along the deck.gl. viewport is still in SF

• deck create h3 layer, set centerHex to be in SF

• kepler.gl determined dataset is centered in Hyderbad (17.4547742 78.3611296) and updated DeckGl viewState

• deck.gl sent updated viewState to h3-hexagon-layer, which calls _updateVertices

• _updateVertices compares new centerHex with previous one using h3Distance(). h3Distance returns a negative number -1.220629759 because the 2 points are too far apart. Due to its own limitation. The distance comparison is truthy, because neg number is always < UPDATE_THRESHOLD_KM. h3 layer exits _updateVertices

• This falls into an unfortunate loop, because as long as distance is negative centerHex will never gets updated.

Solution could be:

change line 163-171:

    const hex = geoToH3(viewport.latitude, viewport.longitude, resolution);
    const distance = centerHex && h3Distance(centerHex, hex);

    if (
      centerHex === hex ||
      (distance >= 0 && distance * edgeLengthKM < UPDATE_THRESHOLD_KM)
    ) {
      return;
    }