influxdata / influxdata/giraffe
GeoWidget: TrackLayer with random colors and a color definition does not fail gracefully
- 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
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