Use Alert component for track messages

[garrettjstevens]

I was trying to decide what kind of message might be better than an error in a display as suggested here, and ended up trying to standardize track messages so that they are more predictable for users and therefore hopefully easier to read. This ended up not being strictly related to that PR, so I'm opening it in a separate one.

This uses the Alert component for track messages, whether they are error or info messages. It keeps the ability to override the track message with a custom React component, though.

Here is a before-and-after of these changes:

[codecov]

Codecov Report

Merging #3200 (563773e) into main (e6c8ca8) will decrease coverage by 0.00%.
The diff coverage is 95.65%.

@@            Coverage Diff             @@
##             main    #3200      +/-   ##
==========================================
- Coverage   59.38%   59.38%   -0.01%     
==========================================
  Files         672      674       +2     
  Lines       28782    28779       -3     
  Branches     7005     7005              
==========================================
- Hits        17092    17089       -3     
- Misses      11414    11415       +1     
+ Partials      276      275       -1     

Impacted Files	Coverage Δ
...w/src/BaseLinearDisplay/models/TooLargeMessage.tsx	90.00% <90.00%> (ø)
...view/src/BaseLinearDisplay/components/BlockMsg.tsx	100.00% <100.00%> (ø)
...play/components/ServerSideRenderedBlockContent.tsx	100.00% <100.00%> (+4.76%)	⬆️
...aseLinearDisplay/models/BaseLinearDisplayModel.tsx	85.86% <100.00%> (-0.10%)	⬇️
plugins/alignments/src/BamAdapter/BamAdapter.ts	72.07% <0.00%> (-0.91%)	⬇️
...ments/src/SNPCoverageAdapter/SNPCoverageAdapter.ts	57.33% <0.00%> (-0.67%)	⬇️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[cmdcolin]

pretty nice :) I think this is reasonable and does enhance "first glance readability" a lot

[carolinebridge]

Might be user friendly to add a button to the "zoom in to see sequence" to zoom in one step on the view, could also see if #3158 is addressed / could easily be addressed here

[cmdcolin]

just for ref #3158 an example screenshot looks like this

there are actual "force load" buttons sort of visible oddly enough but it looks a bit off. that said, it is quite hard to correctly design this if trying to fit into the blocks. could be something separate

[garrettjstevens]

Might be user friendly to add a button to the "zoom in to see sequence" to zoom in one step on the view

Added this in a separate PR here: #3221

it is quite hard to correctly design this if trying to fit into the blocks. could be something separate

Agreed

[cmdcolin]

I made a proposed modification to this code. I created a "BlockMsg" component that is used for errors, zoom in to see more message, too much data loaded message, etc. The "BlockMsg" has ellipsis on the text+overflow hidden, and a tooltip to show the full message on mouseover if it is given a very small area. Also removes the Repeater element, as e.g. static blocks are 800px now, and when it was screen width, it was more common to not have any message on the screen at allt. There are still cases the button may be invisible to e.g. force load but that is probably rarer now.

Diff https://github.com/GMOD/jbrowse-components/compare/track_message_updates..track_message_updates_cmd

[cmdcolin]

example screenshot

[cmdcolin]

(also merged main to this branch just to make diff with my branch easier)

[cmdcolin]

incidentally, also removed the space between the blocks (can see whitespace between alert elements in https://camo.githubusercontent.com/cee2a7b4669a95efae508a3ce0aba383533f7018cc970c4c1c1afaa44a469118/68747470733a2f2f66696c65732e6769747465722e696d2f3630306233356362643733343038636534666639376664322f68324f532f696d6167652e706e67 but not visible in my screenshots)

I personally like how it looks with no space

[garrettjstevens]

Looks good, I've merged those changes in here

[cmdcolin]

awesome:)