Disable autocommit and manually commit filters in study view

[BasLee]

Add a checkbox to the study page to disable 'auto submitting' of filters; and add a submit button that allows users to submit filters manually. (Netlify preview)

'Autosubmitting' of filters is enabled by default. It can be activated with the 'Manually submit' option, available in a new settings menu

Problem

When a user adds a new filter on the study page, it is automatically added and processed: data is requested from the backend and the panes are re-rendered. When studies grow and datasets get larger, study view panes become less responsive, making it quite laborious to add a few filters.

Solution

This PR adds a checkbox and a submit button. The checkbox allows users to disable 'autosubmitting'. New filters are now queued. Once the new submit button is clicked, queued filters are submitted all at once, only triggering a single rerender.

Disabling autocommit

When disabling autosubmit, filters are added to the queue. Panes are only updated when the submit button is clicked.

Visualizing submitted and queued filters

When disabling autosubmit, the filter bar color codes 1) newly added filters; 2) already applied filters; and 3) filters that are queued for deletion.

TODO

• Move toggle to gear menu
• Show which filters are submitted and which are not
• Add e2e test

[BasLee]

summary of feedback during refactorers stand-up:

• move auto submit toggle to new gear button
  • more study view options can be moved there later on
• move submit button closer to filters, before 'clear all filters' button
• visualize which filters are applied and which are not yet submitted
  • add new line with queued filters (show submit button on this line?)

[alisman]

why not put these in the StudyView context?

[alisman]

also, is "hesitant" a typo?

[BasLee]

Fixed in 60e31e2
Pill stores are now in study view store, and study view store is passed to pills using the context

[alisman]

@pvannierop @BasLee i did some testing here. I think there are probably some more tweaks that we would want to make to the UI before going live with this for our own users.

• The "pending" style is not obvious enough
• The hesitate mode state should be persisted?
• I think the submit button should not show until you made a new filter and have something to submit.
• The product team may want to weigh in on the placement of the submit button
• Right now when you toggle the hesitate mode, some of the charts re-render, which is odd. We should see if we can
  prevent that.

I think a feature like this should be manually tested thoroughly by someone on your team who is not a developer.

It should also be well covered by e2e tests.

[BasLee]

@alisman #4502 (comment)
Added local e2e tests in 6e33cd4

[BasLee]

☝️Feedback from community call on March 7

Relevant changes:

• 'unselect <> select' --> undo queued delete
• 'submit button location' --> move submit button
• two bugfixes
• persist settings in localStorage