Prevent Facet Panel & Top Query Bar from Being Editable in J-Browse Mode

[b-f-chan]

When in J-Browse tab, prevent facet panel & top query bar from being editable (users shouldn't be able to remove filters) --> Only re-enable if they click back to another tab to do actual filtering

The filters on the left should also be disabled

[b-f-chan]

Agree to implement to implement post-MVP

[b-f-chan]

Has a dependency/change required on arranger; @b-f-chan to create separate ticket

Do we need to move this ticket to DMS-UI? Discuss with @samrichca and @justincorrigible

Also need to confirm UX with @patrickdsantos , feedback we gave earlier was it's not obvious that you need to go back to Files to change the query (e.g. do we need to add a Back button?)

[b-f-chan]

Suggested new design --> Use "modal" effect/behaviour to add a white overcast out the facet panel and top query bar (basically blur everything around the J-Browse tab)

@patrickdsantos to do mockups for this first

Need ability to traverse back to the Files tab still

Additional requirement --> Somehow make Hide Bar in the facet panel still accessible (or other alternative; e.g. high Z-index)

Should be less than a week of effort

[patrickdsantos]

Link to the mockup with "overcast": https://www.figma.com/file/IWIva6pVP0ZWUXtbGiSLP8/Visualization-%26-Analysis?type=design&node-id=505%3A162257&mode=design&t=sAt44WRJa36XHU7W-1

Apply white rectangle with 60% opacity over the filters sidebar and query box so user cannot interact with these buttons. Please allow the "hide bar" button to still be active and not covered by the overcast as the user should still be able to interact with this button when JBrowse is in use.

[samrichca]

technical notes:

• could reduce opacity of facet panel & query bar and block click events using CSS
• the slightly complex piece is having top-level awareness that the user is looking at jbrowse. may need to add a context provider.

[samrichca]

facet panel can be scrolled, resized, shown, and hidden. but the buttons/fields inside it have pointer events disabled.

completely disabling these elements i.e. with a disabled prop would require additional arranger work if desired.

[samrichca]

https://github.com/overture-stack/dms-ui/pull/179

[b-f-chan]

Tested successfully in QA, closing