Differences in whether prediction score threshold slider renders

[kevinrobinson]

EDIT: I followed this thread and found it was coming from a bug in lit-mobx that @cannoneyed ran into in adobe/lit-mobx#26, and has been fixed upstream in 0.0.4. This is what #54 does.

---

hi! In looking around, I noticed that the threshold slider in the Prediction Score module doesn't always render. To reproduce, load the quickstart and then click on the predictions tab. Then reload the page. These are the URL params I see: http://localhost:5432/?models=sst&dataset=sst_dev&compare_data_mode=false&layout=default&tab=Predictions

When the page loads again, the threshold slider is missing:

The immediate issue is that when ClassificationService.marginSettingsis changed via setMargin, the component doesn't react and rerender. My understanding is that MobxLitElement should be tracking reads to MobX observables and setting up listeners that updated the component's HTML as needed. But that doesn't seem to be happening.

I started reading up on the internals of MobX, LitElement and lit-mobx couldn't figure out exactly what the issue was. The only way I could resolve the problem was to call requestUpdate manually when allMargins changes (diff).

After that change, the slider rendered as expected:

After taking a break and coming back to this to dig further into the internals, I happened to switch from Firefox to Chrome. At first, Chrome didn't have the problem at all and everything worked as expected. I could set break points and see that it worked as expected; the call to setMargin caused the element to rerender. So I started digging in more, and logging LitElement#update to understand what's happening, and in the process of doing this, I started seeing the same bug in Chrome. Once that started, I couldn't get it to work again, regardless of reverting any of the code.

SO this seemed a bit insane :) I figured there must be a race condition or some non-determinism in the internals of the observables and callbacks, so started reading the source of lit-mobx. I happened to do this on GitHub and then noticed that code was different that what lit is using. Looking at their repo, I ran into adobe/lit-mobx#26, and verified that #54 resolves the issue on both browsers.

[jameswex]

Thanks! somehow We forgot to add the updated version to our yarn config!