Describe the bug
In some of my tasks, there is a problem with Mobx-state-tree
when removing PolygonRegion
:
mobx-state-tree.module.js:5845 Uncaught Error: [mobx-state-tree] Failed to resolve reference 'xCjDKNM31_' to type '(AudioRegionModel | BrushRegionModel | EllipseRegionModel | HyperTextRegionModel | KeyPointRegionModel | PolygonRegionModel | RectRegionModel | TextAreaRegionModel | TextRegionModel)' (from node: /completionStore/completions/0/regionStore/regions/9)
at new InvalidReferenceError (mobx-state-tree.module.js:5845)
at StoredReference.updateResolvedReference (mobx-state-tree.module.js:5820)
at StoredReference.get [as resolvedValue] (mobx-state-tree.module.js:5830)
at IdentifierReferenceType.getValue (mobx-state-tree.module.js:6013)
at ScalarNode.get [as value] (mobx-state-tree.module.js:987)
at ObjectNode.unbox (mobx-state-tree.module.js:1554)
at Array.map (<anonymous>)
at ObservableArrayAdministration.dehanceValues (mobx.module.js:3096)
at Proxy.arrayExtensions.<computed> (mobx.module.js:3413)
at _class.<anonymous> (Entities.js:204)
at _class.render (index.module.js:1070)
at allowStateChanges (mobx.module.js:978)
at index.module.js:847
at trackDerivedFunction (mobx.module.js:761)
at Reaction.track (mobx.module.js:1795)
at _class.reactiveRender [as render] (index.module.js:841)
at finishClassComponent (react-dom.development.js:17160)
at updateClassComponent (react-dom.development.js:17110)
at beginWork (react-dom.development.js:18620)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performUnitOfWork (react-dom.development.js:22154)
at workLoopSync (react-dom.development.js:22130)
at performSyncWorkOnRoot (react-dom.development.js:21756)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at flushSyncCallbackQueue (react-dom.development.js:11072)
at discreteUpdates$1 (react-dom.development.js:21893)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168)
InvalidReferenceError @ mobx-state-tree.module.js:5845
StoredReference.updateResolvedReference @ mobx-state-tree.module.js:5820
get @ mobx-state-tree.module.js:5830
IdentifierReferenceType.getValue @ mobx-state-tree.module.js:6013
get @ mobx-state-tree.module.js:987
ObjectNode.unbox @ mobx-state-tree.module.js:1554
ObservableArrayAdministration.dehanceValues @ mobx.module.js:3096
arrayExtensions.<computed> @ mobx.module.js:3413
(anonymous) @ Entities.js:204
render @ index.module.js:1070
allowStateChanges @ mobx.module.js:978
(anonymous) @ index.module.js:847
trackDerivedFunction @ mobx.module.js:761
Reaction.track @ mobx.module.js:1795
reactiveRender @ index.module.js:841
finishClassComponent @ react-dom.development.js:17160
updateClassComponent @ react-dom.development.js:17110
beginWork @ react-dom.development.js:18620
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
Show 3 more frames
index.js:1 The above error occurred in the <_class> component:
in _class (at Entities.js:281)
in div (at Entities.js:250)
in _class (at SideColumn.js:60)
in div (created by Card)
in div (created by Card)
in Card (at SideColumn.js:55)
in _class (at App.js:139)
in div (at App.js:135)
in div (at App.js:125)
in div (at App.js:111)
in Provider (at App.js:110)
in div (at App.js:108)
in App (created by inject-App-with-store)
in inject-App-with-store (at src/index.js:65)
in Provider (at src/index.js:64)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
update.callback @ react-dom.development.js:20708
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19883
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
mobx-state-tree.module.js:5845 Uncaught Error: [mobx-state-tree] Failed to resolve reference 'xCjDKNM31_' to type '(AudioRegionModel | BrushRegionModel | EllipseRegionModel | HyperTextRegionModel | KeyPointRegionModel | PolygonRegionModel | RectRegionModel | TextAreaRegionModel | TextRegionModel)' (from node: /completionStore/completions/0/regionStore/regions/9)
at new InvalidReferenceError (mobx-state-tree.module.js:5845)
at StoredReference.updateResolvedReference (mobx-state-tree.module.js:5820)
at StoredReference.get [as resolvedValue] (mobx-state-tree.module.js:5830)
at IdentifierReferenceType.getValue (mobx-state-tree.module.js:6013)
at ScalarNode.get [as value] (mobx-state-tree.module.js:987)
at ObjectNode.unbox (mobx-state-tree.module.js:1554)
at Array.map (<anonymous>)
at ObservableArrayAdministration.dehanceValues (mobx.module.js:3096)
at Proxy.arrayExtensions.<computed> (mobx.module.js:3413)
at _class.<anonymous> (Entities.js:204)
at _class.render (index.module.js:1070)
at allowStateChanges (mobx.module.js:978)
at index.module.js:847
at trackDerivedFunction (mobx.module.js:761)
at Reaction.track (mobx.module.js:1795)
at _class.reactiveRender [as render] (index.module.js:841)
at finishClassComponent (react-dom.development.js:17160)
at updateClassComponent (react-dom.development.js:17110)
at beginWork (react-dom.development.js:18620)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performUnitOfWork (react-dom.development.js:22154)
at workLoopSync (react-dom.development.js:22130)
at performSyncWorkOnRoot (react-dom.development.js:21756)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at flushSyncCallbackQueue (react-dom.development.js:11072)
at discreteUpdates$1 (react-dom.development.js:21893)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168)
InvalidReferenceError @ mobx-state-tree.module.js:5845
StoredReference.updateResolvedReference @ mobx-state-tree.module.js:5820
get @ mobx-state-tree.module.js:5830
IdentifierReferenceType.getValue @ mobx-state-tree.module.js:6013
get @ mobx-state-tree.module.js:987
ObjectNode.unbox @ mobx-state-tree.module.js:1554
ObservableArrayAdministration.dehanceValues @ mobx.module.js:3096
arrayExtensions.<computed> @ mobx.module.js:3413
(anonymous) @ Entities.js:204
render @ index.module.js:1070
allowStateChanges @ mobx.module.js:978
(anonymous) @ index.module.js:847
trackDerivedFunction @ mobx.module.js:761
Reaction.track @ mobx.module.js:1795
reactiveRender @ index.module.js:841
finishClassComponent @ react-dom.development.js:17160
updateClassComponent @ react-dom.development.js:17110
beginWork @ react-dom.development.js:18620
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
Show 3 more frames
To Reproduce
Steps to reproduce the behavior:
- Download tasks.json, config.xml and completion json file.
- Copy directories and files from the
.zip
archive to examples/
directory of label-studio-frontend
.
- Run frontend using
npm run start
.
- Click on 2nd polygon (the one that has
88,41
amount inside it).
- Remove polygon either via red bin button or using
backspace
.
Expected behavior
- Polygon is removed from
ImageView
.
- Polygon is removed from results list.
- Polygon is detached from mobx state trees, and later destroyed so it not clutter the state.
Additional context
This happens only if I remove polygons from the Results
list from 2nd to 13th positions. What's really weird, when I delete 2nd region I got error regarding node /completionStore/completions/0/regionStore/regions/9
, when I delete 3rd regarding node /completionStore/completions/0/regionStore/regions/19
, when 4th - /completionStore/completions/0/regionStore/regions/29
and so on. For 13th region, I got error about regions/119
, and for 14th it works, presumably because there is no region 129+
in the results list.
After the error occurred, I looked in console on values of completionStore.regions
array. The values till 8th element of this array (including 8th) are fetched, but from 9th till next couple regions there is an error with resolving reference (so the problem is not only with 9th node in this array, but also next ones).
What also interesting, if I remove 1st polygon, and later again 1st polygon (so the 2nd one which removing doesn't work in scenario stated above), everything works well.
I made some debugging, it must have something in common with detaching the PolygonRegion/Region
in CompletionStore.js
on line 217th. Removing that line causes error not being shown, but I guess in trade off of not removing the node from a tree.
For me, debugging Mobx state tree
looks quite hard. I hope you have some tricks about how to do it and you could share some insights with me.
The questions I couldn't find answers are:
- Why there is problem with 9, 19, 29th
region
in regionStore
if I remove regions 2, 3, 4th from the results list (some sorting mechanism?).
- How to track all places where specific
region
is referenced from.
Hope you find some answers.