RHS UI Improvements

[mwinokan]

Ticket to flesh out various RHS improvements, to be spun out into their own tickets.

[mwinokan]

Problem Outline

The RHS layout is awkward at small and large widths. Main issues include:

Issues at large width:

• Metadata table header row is no longer aligned to the columns in the compound divs. Annotated in pink
• Compound count and loading buttons no longer at the bottom. Annotated in green.
• Large empty space. Annotated in cyan.
• The metadata table does not expand to use unused space in compound rows. Annotated in red.

Issues at small widths:

• Tab names do not wrap well. Annotated in red.
• Checkbox widgets do not use full space. Annotated in cyan.
• Names and metadata tables overlap. Annotated in magenta.

[mwinokan]

Compound row layout changes

• The table should adjust to fill the full width.
• More columns should be hidden by default such as ref_url
• Add an info icon which on hover shows hidden column values
• Sub elements of the table row should be locked to the following alignment, adjusting to different RHS div widths:

1. Compound name --> top left
2. Metadata row --> bottom left
3. Representations (ALPCSFX buttons) --> top right
4. Colours --> bottom right

[mwinokan]

Proposed Redesign of compound set tabs

• Instead of a separate tab for each compound set, there is one tab "Compound Sets" which can be hidden or expanded as necessary.
• There is a table summarising the metadata for each compound set.
• Radio buttons allow for the selection of a compound set to be shown below
• Submitter name is a hyperlink to their email address
• Method links to ref_url
• CSV download button to download all metadata for the compound set (placeholder)

[RoboMatuska]

@mwinokan, what if we set a fixed minimum width for RHS? Because if the user resizes RHS to a small width, there will be a lot of buttons and text in a small space. Do you want to resize RHS to a minimal width? Best practice is to hide RHS rather than shrinking to small size the RHS

[mwinokan]

@RoboMatuska I think a minimum width is sensible, but I don't think we should restrict the maximum width

[matteoferla]

A very minor Backend thing: once the user has removed or fixed all offending reference hit names, merger compounds longer than 50 characters, the cset_upload says it fails even if it worked. This is known by all uploaders, but may confuse new people

[RoboMatuska]

In this part, the following elements are missing:

-Search functionality -Filter functionality -Import data such as Submitter, institution, date, etc. -Some visual changes

The rest of the parts should be completed.

[phraenquex]

@mwinokan to talk @matej-vavrek through the ticket - get a time estimate, etc.

[mwinokan]

@matej-vavrek this arose from my conversation with @Waztom. I am happy to elaborate if you want to meet:

• The table is currently not useful, more columns to be hidden by default to avoid clutter?
• Focus on the scoring/ranking assigned by the designer, not set-level metadata such as reviewer
• The CSV download button in the compound sets should spawn a context menu so that SDF/PDB and other download formats can be supported
• There should be functionality to search for a compound across all compound sets by a unique index/name. See #1121
• The same filters present in the compound sets pane should be added to the Selected compounds pane
• The larger molecule preview present when hovering over the drawing obscures the rest of the compound information. Potentially the larger view should be placed below the row.
• Add a button to resize the molecule drawings to a permanent larger view. (space permitting)
• The colourful tags should be right aligned so that showing/hiding table columns does not move them around

[mwinokan]

@matej-vavrek Elaborating on my previous comment after our meeting:

Layout

• [x] Apply boundaries to the width of the RHS to keep the layout sensible (approximately: min 460px, max 740px)
• [x] The five colour indicators should be right-aligned:

Per-compound metadata & filtering

• [x] Hide columns associated to the whole dataset by default (refurl, submitter*, generation_date, method)
• [ ] Filtering should be available in the "Selected Compounds" tab as well
• [x] For the "Selected Compounds" tab the name of the compound set needs to be a column in the table so that compounds originating from different sets can be differentiated
• [x] The filter icon should have an active state/colour to indicate that compounds are hidden due to filtering
• [x] The filtering modal needs a scrollbar (see D68 MatteoFerla-Fragmentstein-TRIS_P1-RIDGE

Download dropdown

• [x] The cloud icon in Robert's version should be clickable to open up a small modal or context menu (whatever is easier) so that download of 'CSV' or 'SDF' or 'PDBs'

Inspirations Modal (Design Rationale)

• [x] Spec is in #1202

Molecule drawings

• [x] The bigger drawing (on-hover) should not cover the current compound but the one below:

[mwinokan]

Thank you @matej-vavrek for tackling the majority of this ticket. It can be seen here if anyone else is curious. From clicking around there are a couple details:

• Can we populate the # column of the compound sets table with the number of compounds in the compound set or is this waiting on backend work?
• Is there a way to adjust the compound set table column widths to cut off less of the text? For example, even at the widest setting the method and names are cut off.
• I would increase the maximum allowed width for the RHS more, unless this causes other issues with the layout. Once we have a lot of data in the tables it might be useful to have a wider view.

It's great though, and if the above is not easy we can do it for a future release.

[matej-vavrek]

• [x] Can we populate the # column of the compound sets table with the number of compounds in the compound set or is this waiting on backend work?

• [x] Is there a way to adjust the compound set table column widths to cut off less of the text? For example, even at the widest setting the method and names are cut off.

• I have adjusted it a bit, but we can have a look on it again if is not enought.

• [x] I would increase the maximum allowed width for the RHS more, unless this causes other issues with the layout. Once we have a lot of data in the tables it might be useful to have a wider view.

• maximum width increased to 900 px