influxdata / influxdata/giraffe

GeoWidget: TrackLayer with random colors and a color definition does not fail gracefully

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

Description

**Build**

Detected in PR 365 - Dubsky fork

```
commit 361b63bc55ac4989f17f03f33165d3070c7236b2
```

**Use Case**

Define the configuration with `randomColors: true` and with `colors:` defined.

```javascript
...
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: [
{type: 'min', hex: '#FF0000'},
{type: 'max', hex: '#0000FF'},
]
},
],
tileServerConfiguration,
} as GeoLayerConfig,
]
...
```

**Expected Behavior**

Was not entirely sure what to expect. One definition or the other would be ignored or perhaps a random palette would be generated between the values defined.

Expected though that the GeoWidget would render and if there was a conflict, the failure would be graceful.

**Actual Behavior**

React throws an unhadled exception and the application fails to render.

```
Uncaught TypeError: Cannot read property 'hex' of undefined
at eval (index.js?7f65:2)
at e.mapTracks (index.js?7f65:2)
at qe (index.js?7f65:2)
at renderWithHooks (react-dom.development.js?f8c1:14803)
at updateFunctionComponent (react-dom.development.js?f8c1:17034)
at beginWork (react-dom.development.js?f8c1:18610)
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 flushPassiveEffectsImpl (react-dom.development.js?f8c1:22883)
at unstable_runWithPriority (scheduler.development.js?bacd:653)
at runWithPriority$1 (react-dom.development.js?f8c1:11039)
at flushPassiveEffects (react-dom.development.js?f8c1:22820)
at eval (react-dom.development.js?f8c1:22699)
at workLoop (scheduler.development.js?bacd:597)
at flushWork (scheduler.development.js?bacd:552)
at MessagePort.performWorkUntilDeadline (scheduler.development.js?bacd:164)
eval @ index.js?7f65:2
e.mapTracks @ index.js?7f65:2
qe @ index.js?7f65:2
renderWithHooks @ react-dom.development.js?f8c1:14803
updateFunctionComponent @ react-dom.development.js?f8c1:17034
beginWork @ react-dom.development.js?f8c1:18610
callCallback @ react-dom.development.js?f8c1:188
invokeGuardedCallbackDev @ react-dom.development.js?f8c1:237
invokeGuardedCallback @ react-dom.development.js?f8c1:292
beginWork$1 @ react-dom.development.js?f8c1:23203
performUnitOfWork @ react-dom.development.js?f8c1:22154
workLoopSync @ react-dom.development.js?f8c1:22130
performSyncWorkOnRoot @ react-dom.development.js?f8c1:21756
eval @ react-dom.development.js?f8c1:11089
unstable_runWithPriority @ scheduler.development.js?bacd:653
runWithPriority$1 @ react-dom.development.js?f8c1:11039
flushSyncCallbackQueueImpl @ react-dom.development.js?f8c1:11084
flushSyncCallbackQueue @ react-dom.development.js?f8c1:11072
flushPassiveEffectsImpl @ react-dom.development.js?f8c1:22883
unstable_runWithPriority @ scheduler.development.js?bacd:653
runWithPriority$1 @ react-dom.development.js?f8c1:11039
flushPassiveEffects @ react-dom.development.js?f8c1:22820
eval @ react-dom.development.js?f8c1:22699
workLoop @ scheduler.development.js?bacd:597
flushWork @ scheduler.development.js?bacd:552
performWorkUntilDeadline @ scheduler.development.js?bacd:164

```

Contributor guide

Open the contributing guide

Research direction

Start with the GeoWidget TrackLayer rendering path, particularly the mapTracks entry point named in the stack trace, and reproduce the configuration with randomColors and colors both set. Done means the GeoWidget renders without an uncaught exception when both options are provided, with the conflict handled gracefully.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 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.