Add Modal Component for Choosing Visualization

[b-f-chan]

Add modal component that allows users to select the visualization they want to launch after selecting their file(s).

Additionally, add the logic for validating the file type against the allowed visualizations (i.e. you can only launch certain visualizations for certain file types --> Specifically, ONLY BAM for IOBIO).

Please see mockups for UX details.

Expected Outcomes:

• Modal component is implemented and can be launched after selecting files and clicking Visualization button
• Logic is implemented to only allow certain visualizations to be launched by certain file types (e.g. ONLY BAM for IOBIO)

[b-f-chan]

Tagging @patrickdsantos @edsu7 to test (this is new)

[edsu7]

works well minus a few items, see below:

feedback from testing

• very slow for crams (or is that even intended) and eventually errors out

• Noticed the following behaviour:
  • I select a few files with the BAM filter, switch over to the another filtered view CRAM, the previously selected files are carried over (e.g. generating a manifest)
  • useful for when navigating through multiple filters to build a cohort, however users may want the option of a clean slate
  • more of an arranger thing.

[patrickdsantos]

Looks great! Wonderful work 👏 Feedback below:

1. When the visualizations are disabled can we put the preview images and logos in greyscale?

2. Can we add the a little bit extra thickness to the borders of each visualization card? Then use this colour #AEAFB3 when its active and this colour #DFDFE1 when inactive

3. Shorten the height of the modal and card.

4. Add a drop shadow as a hover state for the cards. Only applied to cards that are active. Here are the configurations:

5. Add a hover state to the Visualization button using this colour #9E005D

6. When the mouse hovers over the Visualization button, have it change to the select hand cursor.

7. There is no error messaging when I click on a disabled card. Is it possible to implement messaging for the following scenarios when a user clicks on a disabled card? Too many files selected. File type is not supported.

8. The text does not have enough contrast to meet accessibility standards when the card is disabled. Opacity should be 100%.

9. Update these greys for the pill buttons to meet accessibility contrast standards. Use #353535 for the first pill button and #757575 for the others.

10. The light blue pill buttons also don't meet accessibility standards, update lighter pill button to #497AA2