Implement Table & File Header Refinements

[b-f-chan]

Implement final table & file header refinements for the BAM File Viewer UX flow (Use Case 1), including:

• Adding the Visualization button
• Adding the File Repository button
• Hiding Columns and Download buttons when appropriate (see mockups for logic)
• Adding Full Screen button

Expected Outcomes:

• All listed refinements above are implemented and ready for QA

[b-f-chan]

Tagging @patrickdsantos @edsu7 to re-test

[edsu7]

LGTM to me, one funny interaction.

Visualization button requires the format column to be present e.g.

[patrickdsantos]

The visualization screen works perfectly, well done! Just a few visual tweaks, not sure if these are supposed to be captured in this ticket. If not will move feedback to a different ticket.

1. In general, any button or clickable item, can the cursor change from mouse to hand selector? This includes pill buttons in the show/hide section, Full Screen button, File Repository button, Show Table button etc.

2. When the visualization is in full screen, change Full Screen Button to say Exit Full Screen. Also keep the button blue.

3. Hide File Repository button when in full screen mode.

4. Change hover state for all blue buttons to #4F85AE

5. Can we add a container to the visualizations like in the mocks?

6. I noticed there are no titles for the graphs, will these be added in?

7. The pills alternate from blue or white. Can we change the stroke of the button to signify whether it's selected or not? Blue #04518C stroke when the graph is showing. And light blue #DBE8F2 stroke when the graph is hidden.

8. Not sure if this is within scope of this ticket but the Filters sections on the left and top are still active. They should be inactive.

9. Remove lines above and below paragraph of modal

10. Change colour of pill button for modal to blue #04518C with a hover state of #4F85AE