influxdata / influxdata/giraffe

GeoWidget: S2 coordinates in trackMap throw exception

Open
#480 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
189
Forks
33
Avg merge
3d 15h
Merged PRs (30d)
4

Description

**Branch:** mapGeo
**Last Commit:** 665cf56e01eba0d0519f47035978f4a98de73e77
**Build**: Local

### Observed Behavior

Created a map using the type `trackMap` but with the datapoints containing only coordinates in S2 format in the field `s2_client_id` as supplied by influx and as used already in `circleMap` and `pointMap` configurations. The test application can use either standard ISO 6079 points (lat,lon) or S2. When using ISO 6709 the map and tracks render correctly. However, when switching to 'S2' an exception is thrown and NextJS refuses to render the page.

The NextJS error notice contains

```
Unhandled Runtime Error
TypeError: Cannot read property '0' of null

Call Stack
e.mapTracks
../node_modules/@influxdata/giraffe/dist/index.js (2:156613)
Ye
../node_modules/@influxdata/giraffe/dist/index.js (2:152921)
renderWithHooks
../node_modules/react-dom/cjs/react-dom.development.js (14803:0)
```

### Expected Behavior

Expected that the tracks should render using S2 values the same as when using ISO 6079 lat,lon.

### Screencast

![s2Tracks01](https://user-images.githubusercontent.com/25881301/109324430-f2bd2480-7854-11eb-8340-384bf0fc9363.gif)

### Github Project

https://github.com/bonitoo-io/giraffe-cypress
https://github.com/bonitoo-io/giraffe-cypress/blob/master/app/components/geohash/s2ControlTracks.tsx
https://github.com/bonitoo-io/giraffe-cypress/blob/master/app/components/geohash/s2Tracks.tsx

### Configuration used

```
layers: [
{
type: 'geo',
lat: latitude,
lon: longitude,
zoom: 8,
allowPanAndZoom: true,
detectCoordinateFields: true,
layers: [
{
type: 'trackMap',
speed: 1000,
trackWidth: 4,
randomColors: true,
endStopMarkers: true,
endStopMarkerRadius: 4,
colors: undefined,
},
],
tileServerConfiguration,
} as GeoLayerConfig,
],

```

### Sample Data

```
[
{"_time":"2021-02-26T14:49:44.723Z","ligne":"515","st":"01","cl":"2","nom":"Tours_Gare","dur":86.2944,"mag":0.518394,"s2_cell_id":"47fcd5b568c9","table":0},
{"_time":"2021-02-26T14:50:44.723Z","ligne":"515","st":"02","cl":"2","nom":"La_Chapelle-sur-Loire","dur":51.9033,"mag":7.1218,"s2_cell_id":"47fd444afc09","table":0},
{"_time":"2021-02-26T14:51:44.723Z","ligne":"515","st":"03","cl":"2","nom":"Saumur","dur":10.059,"mag":1.97082,"s2_cell_id":"4807f72e9cbb","table":0},
...
]
```

### Console log Exception

```
Uncaught TypeError: Cannot read property '0' of null
at e.mapTracks (index.js?7f65:2)
at Ye (index.js?7f65:2)
at renderWithHooks (react-dom.development.js?f8c1:14803)
at mountIndeterminateComponent (react-dom.development.js?f8c1:17482)
at beginWork (react-dom.development.js?f8c1:18596)
at HTMLUnknownElement.callCallback (react-dom.development.js?f8c1:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js?f8c1:237)
at invokeGuardedCallback (react-dom.development.js?f8c1:292)
at beginWork$1 (react-dom.development.js?f8c1:23203)
at performUnitOfWork (react-dom.development.js?f8c1:22154)
at workLoopSync (react-dom.development.js?f8c1:22130)
at performSyncWorkOnRoot (react-dom.development.js?f8c1:21756)
at eval (react-dom.development.js?f8c1:11089)
at unstable_runWithPriority (scheduler.development.js?bacd:653)
at runWithPriority$1 (react-dom.development.js?f8c1:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js?f8c1:11084)
at flushSyncCallbackQueue (react-dom.development.js?f8c1:11072)
at flushPendingDiscreteUpdates (react-dom.development.js?f8c1:21847)
at flushDiscreteUpdates (react-dom.development.js?f8c1:21827)
at finishEventHandler (react-dom.development.js?f8c1:764)
at batchedEventUpdates (react-dom.development.js?f8c1:798)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js?f8c1:3568)
at attemptToDispatchEvent (react-dom.development.js?f8c1:4267)
at dispatchEvent (react-dom.development.js?f8c1:4189)
at unstable_runWithPriority (scheduler.development.js?bacd:653)
at runWithPriority$1 (react-dom.development.js?f8c1:11039)
at discreteUpdates$1 (react-dom.development.js?f8c1:21887)
at discreteUpdates (react-dom.development.js?f8c1:806)
at dispatchDiscreteEvent (react-dom.development.js?f8c1:4168)
```

Contributor guide

Open the contributing guide

Research direction

Start with the reproduction files app/components/geohash/s2ControlTracks.tsx and app/components/geohash/s2Tracks.tsx, then run the trackMap configuration with the supplied S2 sample data. Compare it with the working ISO 6709 case; done means the page renders without the null-coordinate exception and the tracks appear.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.