influxdata / influxdata/giraffe
GeoWidget: S2 coordinates in trackMap throw exception
- 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

### 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
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