IMPORTANT: Autorun: run the algorithm and update the plots automatically without clicking on Run button about covid19_scenarios

[gj262]

Once the graphs are drawn interactivity with the form is impaired. And this is regardless of manual Run click or auto Run. Just focusing different form inputs is sluggish. Stepping the counters is v. sluggish.

I'd be interested if this is seen by others with the current production site.

[UnforbiddenYet]

@ivan-aksamentov you may check out the Fokmik's author answer to the same question where he suggests the possible solution for auto form submission.

As for the optimization, I'd say using the <FastField/> or custom hook-based implementation should prevent form fields wasted renders.

[ivan-aksamentov]

@UnforbiddenYet
Hi Dmytro,
Thanks so much for the info. I will look into the Jared's example and the FastField.

[benjwexler]

Hey @ivan-aksamentov, Formik does expose the form’s values as part of the formikBag in the render method. Why not add an onChange to the Form component like this?

      {({ values, errors, touched, isValid }) => {
        const canRun = isValid && severityTableIsValid(severity)
        return (
          <Form
            onChange={(ev) => {
              const { name, value } = ev.target;
              const newValue = {};
              newValue[`${name}`] = value;
              const newValues = Object.assign(values, newValue);
              handleSubmit(newValues)
            }}
            className="form"
          >

And to clarify, this won't update when the dropdowns change, but you can pass () => handleSubmit(values) to FormDropdownStateless and invoke it in onValueChange

[ivan-aksamentov]

The work is being done on #90, but there are performance issues. Are there any React performance experts in the club? :)

[ivan-aksamentov]

@benjwexler thanks! I did not know this exists. We may try that.

[gj262]

I also see the lag with the changes in PR #90. But the change looks right if the lag can be addressed. I'll dig into what is getting called (unless someone is already doing so...).

CC: @ivan-aksamentov

[ivan-aksamentov]

@gj262 I don't know if anyone else is working on it other than @3b3ziz , but this is one of our top priorities, so go ahead and give it a good try :)

[rcbevans]

I added a PR for this using debouncing and react hooks.

The performance seems good to me, can be tried at https://covid19-scenarios-git-fork-rcbevans-autorunsimulation.covid19-scenarios.now.sh/

[rcbevans]

Once the graphs are drawn interactivity with the form is impaired. And this is regardless of manual Run click or auto Run. Just focusing different form inputs is sluggish. Stepping the counters is v. sluggish.

I'd be interested if this is seen by others with the current production site.

I'm seeing sluggishness doing any kind of manual entry of values for population count etc, both using the value steppers, and typing, because of the 4 deep object copies which happen every time the form is validated:

    // NOTE: deep object comparison!
    if (!_.isEqual(allParams.population, newParams.population)) {
      scenarioDispatch(setPopulationData({ data: newParams.population }))
    }
    // NOTE: deep object comparison!
    if (!_.isEqual(allParams.epidemiological, newParams.epidemiological)) {
      scenarioDispatch(setEpidemiologicalData({ data: newParams.epidemiological }))
    }
    // NOTE: deep object comparison!
    if (!_.isEqual(allParams.simulation, newParams.simulation)) {
      scenarioDispatch(setSimulationData({ data: newParams.simulation }))
    }
    // NOTE: deep object comparison!
    if (!_.isEqual(allParams.containment, newParams.containment)) {
      scenarioDispatch(setContainmentData({ data: newParams.containment }))
    }

In my PR I added a debounce to the validation of 500ms which feels like improves performance substantially, but once the debounced function triggers, the page still stutters.

[gj262]

What I ended up noticing was that the entire Main component tree re-renders for every click in the form(ix). And that is OK when the right hand side graphs are not present but quite slow when they are.

Both PRs #90 and #170 give the desired autorun functionality. Though I did not see overlapping validation calls with normal interaction so would not necessarily think debounce is required at present. But no harm?

In any case. One of PRs #90 + #170 coupled with #171 should give the desired autorun behavior with reasonable form interactivity.

[gj262]

And as previously noted, though maybe for another issue/time, using onChange would be a better hook for this over validate.

[rcbevans]

I am triggering a debounced run from statechanges to scenarioState using the useEffect hook, which is effectively the same as onChange. The change to debounced the onValidate was to improve the performance of the UI when toggling custom values since it's doing four deep object comparisons on each validate. That change, in and of itself, is unrelated to the implementation of autorun.

[gj262]

It looks like #170 & #171 are merged and so this can be closed now. Please re-open if I've missed something.

[dkozar]

Are you sure the form is a bottleneck?

I commented out the debounced part, and am "console.logging" the received value:

Even without any debouncing, I feel this part is pretty snappy.

So I don't think the retrieval of form values is a bottleneck, but what is getting executed upon.

[dkozar]

I'm playing with possible fix in this PR: #432

(this is WIP, not polished yet)

The general idea is to keep latest params in memory (Singleton) during the debouncing period, and to allow components to fetch them when needed. Because sending them through the store causes re-rendering of everything.

Demo (test for comparison): https://covid19-scenarios-97ywlzg4y.now.sh/