m2ms / fragalysis-frontend

The React, Redux frontend built by webpack
Other
1 stars 2 forks source link

Display tags always (not just as tooltip) for each hit in the left side. #741

Open phraenquex opened 2 years ago

phraenquex commented 2 years ago

Figure out how to rework the left-side boxes for each hit, to have tags displayed at all times - like you have in GitHub. image

(Currently you need to hover over a very specific screen spot, the check box - makes them much less usable.)

Optionally, have this governed by a global toggle, a [show/hide tags] button in the Hit navigator title bar

If you have them 60% size (and 60% of font size) of how they are in Tag details pane, that should work. image

If there are more tags than fit the height, then let the excess ones vanish past the bottom margin of the box - but for those, if you hover anywhere over that entire tag display region, then draw them all in a tooltip that makes makes it look as if the tag display region has expanded. (In this mockup, I just reused the first tag, that's obviously what it would look like.) image

phraenquex commented 1 year ago

Fix as part of #540

phraenquex commented 1 year ago

This should include fixing the "assign tags" modal: the tags should behave just like in the "reworked" Tag Details LHS panel.

Ideally, make it switch between list and grid views too (like #1102).

In fact, might be simplest to simply use the Tag Details pane as is (without buttons), and just change what happens when you click on a tag. (Also, see new ticket #1124 )

Currently (bleurgh): image

Should be more like this: image

boriskovar-m2ms commented 1 year ago

@phraenquex wouldn't be useful to have toggle in the header of the hit navigator that would turn on/off list of assigned tags because they can (and usually do) obscure the parts of the compound picture.

phraenquex commented 1 year ago

Um... maybe. The tags should be very small - try just the first 2-3 letters, and the colour. Then the tag generator can name the tags in a way that they're useful in the small format.

(Think how Gmail and Outlook do with senders on a smartphone.)

boriskovar-m2ms commented 1 year ago

Yes that's how it's implemented and they're also slightly transparent. In few (hopefully) moments you'll see it deployed on tibor's stack.

phraenquex commented 1 year ago

Below is is what I had in mind.
image

I do like the hover-blow-out you do, mind you, so keep that, BUT:

RoboMatuska commented 1 year ago

@phraenquex

I have an additional question: What is the maximum number tags columns and rows for one compound? or you want show a preview all selected tags?

phraenquex commented 1 year ago

Good question - which reminds me, there's another problem. I'll answer both.

  1. The tags should be next to the 2D molecule image, not over it.

    • this is because the 2D molecule image also has a mouse-hover action - and currently it's annoying to have to figure out where to put the mouse for either the enlarged 2D or the tag blow-up.
    • shrink the width of the 2D molecule image accordingly.
  2. For the small tags, make space for 2 columns with 5 rows (I doubt any compound will have more than 10 tags)

  3. For the blow-out view, I think the grid layout from the Details Pane would work. (I'd need to see it though to know.)