Visualizations: After closing a full-screen enlarged faceted plot, a rogue Modal-related element is preventing clicking (nearly) anywhere on the page.

[bobular]

To reproduce (FF or Chrome) on QA (not on live :tada: )

Any study, any viz, make a faceted viz, click on one of the small plots to enlarge it. Close it. Try to change the facet variable or change to Subsetting tab. (note that plot controls below the plot still seem to be accessible)

This may be a CoreUI issue as I saw recent changes discussed on Slack.

RELATED: I (Bob) have noticed unreliable behaviour of the faceted plot enlarging (in FF at least) - it's difficult to reproduce, but often clicks on plots don't enlarge them - this would be worth investigating at the same time.

[jernestmyers]

Looks like adding modalIsOpen to the conditional rendering of the Modal component in FacetedPlot does the trick.

     {modalComponentProps && modalIsOpen && (
        <Modal
          visible={modalIsOpen}
          includeCloseButton
          toggleVisible={setModalIsOpen}
        >
          {modalPlot}
        </Modal>
      )}

[jernestmyers]

In addition to the issue pointed out in this ticket, I feel the styling needs improving. Most notably, one should only be able to open a faceted view by clicking on the actual viz. However, notice the cursor in the screenshot. At the extreme, when a facet produces only one viz, a user can click anywhere in the horizontal space to open the facet. I would also propose eliminating the extra space between facets (see second screenshot).

Existing layout:

Proposed layout:

[nkittur-uga]

Modal bug is fixed and styling is improved.