Error: <rect> attribute width: A negative value is not valid. ("-190")

[BartosStore]

Hi,

I want to report the error Error: <rect> attribute width: A negative value is not valid. ("-190"). When this error occurs, the graph disappears.

Environment:

• React + Redux store
• timelines-chart + react-kapsule

Steps to reproduce:

• render timelines-chart via react-kapsule inside React component
• connect chart to data in Redux store
• change data in Redux store
• (data is changed, re-render is forced, error occurs)

Please, have you ever seen this error? Do you know how to avoid it? Thanks for your time.

Complete log:

Error: <rect> attribute width: A negative value is not valid. ("-190")
(anonymous) @ attrTween.js:5
tick @ schedule.js:136
(anonymous) @ schedule.js:109
(anonymous) @ timeout.js:8
timerFlush @ timer.js:61
wake @ timer.js:71
requestAnimationFrame (async)
sleep @ timer.js:108
restart @ timer.js:39
timer @ timer.js:52
create @ schedule.js:59
(anonymous) @ schedule.js:19
(anonymous) @ transition.js:36
setupDimensions @ timelines-chart.module.js:862
update @ timelines-chart.module.js:765
(anonymous) @ kapsule.module.js:148
later @ index.js:27
setTimeout (async)
debounced @ index.js:38
(anonymous) @ kapsule.module.js:179
(anonymous) @ kapsule.module.js:209
comp.resetProps @ kapsule.module.js:208
(anonymous) @ kapsule.module.js:215
(anonymous) @ react-kapsule.module.js:133
mountMemo @ react-dom.development.js:16814
useMemo @ react-dom.development.js:17133
useMemo @ react.development.js:1521
(anonymous) @ react-kapsule.module.js:127
renderWithHooks @ react-dom.development.js:16241
updateForwardRef @ react-dom.development.js:18124
beginWork$1 @ react-dom.development.js:20186
beginWork$$1 @ react-dom.development.js:25714
performUnitOfWork @ react-dom.development.js:24665
workLoopSync @ react-dom.development.js:24638
performSyncWorkOnRoot @ react-dom.development.js:24237
(anonymous) @ react-dom.development.js:12180
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
flushSyncCallbackQueueImpl @ react-dom.development.js:12175
flushSyncCallbackQueue @ react-dom.development.js:12163
batchedUpdates$1 @ react-dom.development.js:24359
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:221
_callee$ @ ProductionProcessContent.tsx:50
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
success @ ProductionProcessContent.tsx:39
_callee$ @ ProductionProcessService.ts:10
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
(anonymous) @ ProductionProcessService.ts:6
Promise.then (async)
fetchAggregatedOperationStates @ ProductionProcessService.ts:6
_callee2$ @ ProductionProcessContent.tsx:56
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
fetchAggregatedOperationStates @ ProductionProcessContent.tsx:39
(anonymous) @ ProductionProcessContent.tsx:33
commitHookEffectList @ react-dom.development.js:21997
commitPassiveHookEffects @ react-dom.development.js:22031
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25350
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
flushPassiveEffects @ react-dom.development.js:25319
performSyncWorkOnRoot @ react-dom.development.js:24218
(anonymous) @ react-dom.development.js:12180
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
flushSyncCallbackQueueImpl @ react-dom.development.js:12175
flushSyncCallbackQueue @ react-dom.development.js:12163
batchedUpdates$1 @ react-dom.development.js:24359
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:221
onCheckboxChange @ MachineFilter.tsx:80
change @ MachineFilter.tsx:163
Observer.notify @ observer.js:101
ComponentBase.trigger @ component-base.js:250
CheckBox.clickHandler @ check-box.js:125
Show 55 more frames

[vasturiano]

@BartosStore thanks for reaching out.

Could you please post a reduced example reproducing your case, f.e. on https://codepen.io?