QA Feedback Mega Ticket

[b-f-chan]

Mega ticket for all feedback from QA - Can be split into smaller tickets if required.

Some initial feedback from June 8, 2023 demo included - @samrichca to add screenshots from local for this since QA environment not ready yet.

======= Feedback from June 8, 2023 Demo =======

FOR MVP:

• (1) Error message for unsupported files should dynamically include # of files - Say X files not supported, not just some files
• (2) Reduce height of error message banner (make it thinner vertically(
• (3) Selected Files table --> All table & column headers/titles should be bold --> Is this an Arranger issue?
• (4) Selected Files table is missing horizontal gridlines, please add --> Again, is this an Arranger issue?
  
• (5) # of Files Selected incorrectly persists even when you deselect/unclick the files/rows
• (6) Add a quick spinner/delay on reload of Jbrowse after you change your query --> Changes too fast and hard to notice right now
• (7) Hide/prevent all controlled access files --> Quick and dirty solution for MVP, post MVP need proper solution using Ego permissions etc

Post MVP:

• (1) Use proper permissions to manage access to controlled files
• (2) Ability to download error report (this still seems low priority --> To be discussed)
• (3) When in J-Browse tab, prevent top query bar from being editable (users shouldn't be able to remove filters) --> Only re-enable if they click back to another tab to do actual filtering
• (4) Add a message indicating the site is not optimized for Mobile use --> Perhaps use a media query; work with @patrickdsantos to determine optimal minimum width/res

======= Feedback from QA: =======

• (1) Switch row selection colour from magenta to #EDF9FD

[samrichca]

[samrichca]

additionally: fix the lack of horizontal scrolling here

[edsu7]

Initial browsing, found items:

1. Calendar pop up gets overlapped by body features
   
   

NOTE: [From @b-f-chan] Confirmed with @samrichca this is a DMS-UI side change, not an Arranger change
Note from Sam: Added to list of enhancements.

3. When clicking a variant, selecting "Show options" under "Samples", we can select columns, the menu that pops up seems to extend beyond the window
   

NOTE: [From @b-f-chan] @samrichca to follow-up with @edsu7 offline to show her; cannot currently reproduce, don't know which files were used
Note from Sam: Talked to Edmund & Caroline, made a ticket. GMOD/jbrowse-components#3823

4. The following Files error out between chromosomes:

1c855fe5-a46a-5c5b-a5a2-bf884d62b9b7 (12-22)
c47eeabe-3ce8-554f-8b81-c7870addad0c (15-22)
77f69d8a-9161-550d-b5e3-63a03237a2ad (6-22)

NOTE: [From @b-f-chan] @samrichca to reproduce with @edsu7 offline to check network tab and actual request; may need support from Caroline once troubleshooting info is available
Note from Sam: Edmund & Caroline still troubleshooting.

5. For "Unsupported files types" warning, could we make the message more explicit i.e. point out which file?
   For example below, both BAMs are visualized
   
   The error instead belongs to hidden file 683d8024-d3a1-5686-a12e-982fd6c82ba4
   

NOTE: [From @b-f-chan] Consensus among team is to list the offending files in the error message. However, if they pick too many files, we're going to disable J-Browse button and show a custom tooltip telling them they are over the limit. @patrickdsantos to provide verbiage.

[From @patrickdsantos] Copy for the tooltip: Too many files have been selected. A maximum of 5 files may be selected at once.

Note from Sam: Added to list of enhancements.

6. When adjusting the size of the row/cell in the table (e.g. exposing the whole ID for example), it'll snap back to the original size.

NOTE: [From @b-f-chan] Confirmed with @justincorrigible this is fixed on the Arranger side, so up to @samrichca to reimplement in DMS-UI

Note from Sam: Fixed in Arranger 31. DMS-UI has to be updated from 16 to 31 on QA.

[samrichca]

1. we're discussing freezing/hiding the left panel when jbrowse is open. files tab being on top of everything should be fixed.
2. I'll investigate and collect more info for Jbrowse team if needed.
3. I'll investigate and collect more info for Jbrowse team if needed.
4. good feedback on error messages
5. arranger issue, I'll investigate

[patrickdsantos]

QA Feedback

1. Loading animation appears on the top left corner instead of the centre of the page
   Note from Sam: Fixed in Arranger 31.

[From @b-f-chan] @justincorrigible believes this should already be fixed with latest Arranger, to be verified

2. Files Selected Table should always be the same width as the JBrowse finder above
   

NOTE: [From @b-f-chan] @samrichca to fix on DMS-UI side

3. When files are selected in quick succession, the JBrowse button is unresponsive

NOTE: [From @b-f-chan] This occurs because J-Browse button can only make one request at a time, so if user clicks multiple rows quickly, there is a lag. There's different ways to handle this, for example using debounce, or throttle, or we can add a spinner/loader. This happens both when you click Select All and multiple rows in succession individually. However, this is an edge case, the Select All issue is more likely to occur. Some investigation into best approach required. This is low priority, and when we get to it, prioritize Select All.

4. Columns drop down menu doesn't hide when the download drop down is clicked on

[From @b-f-chan] Confirmed with @justincorrigible this requires an Arranger fix

5. When clicking on the applied filters, the entire filter dissappears. Is this the desired behaviour? Maybe we can we restrict this hotspot to just the area near the "x"?

[From @b-f-chan and @justincorrigible] This is expected behaviour in Arranger; however suggested enhancement is to add a hover-state where the X gets highlighted on hover as a visual cue. LOW PRIORITY - @justincorrigible @patrickdsantos to discuss offline how to approach it

[From @patrickdsantos] Please change the "x" hover state to #979797

6. In some instances when I deselect all files the JBrowse button is not disabled and I am allowed to open the visualizer with nothing selected.

[From @b-f-chan] Could not reproduce in real-time with the team. @patrickdsantos to try reproducing one last time, else we will park or close this.

[From @patrickdsantos ] Was able to reproduce. If a user selects a controlled file and an open file then deselects the open file and controlled file in that order, the JBrowse button remains available and the user is able to visualize "0 files". I have a recording of the bug for better understanding.

7. Are we limiting the user to only select 5 files? Or is the desired behaviour to visualize the first 5 of 10 selected files? Either way there are inconsistencies with the JBrowse button. If >5 files are selected the JBrowse button is disabled. If all files are selected and is >5 the first 3 are visualized with an error report.

NOTE: [From @b-f-chan] Consensus among team is to list the offending files in the error message. However, if they pick too many files, we're going to disable J-Browse button and show a custom tooltip telling them they are over the limit. @patrickdsantos to provide verbiage.

[From @patrickdsantos] Copy for the tooltip: Too many files have been selected. A maximum of 5 files may be selected at once.

8. When J-Browse tab is open, if User goes back to Files and tries to Add or Deselect Files beyond the allowed limit, if User returns to J-Browse tab, show an error message (@patrickdsantos to provide verbiage).

[From @patrickdsantos] Copy for the error message: 0 files have been selected. Please select 1-5 files to launch JBrowse.

9. ACCESSIBILITY ISSUE - When JBrowse button is disabled, the text should be set to #151C3D (our brand's black) for accessibility

@patrickdsantos - To provide a darker gray for the disabled button state to accommodate this

[From @patrickdsantos] Please change grey button to #5E6068 with white text. (Apply this change for all disabled buttons.)

Design Feedback

NOTE: This section is all LOW PRIORITY. To do only after all other feedback in this ticket are addressed.

[this is more finicky stuff that isn't a huge deal but is a nice thing to fix if there's time!]

1. Can we double the size of the "x" button on the JBrowse tab?
   

2. Increase the height of the title cell blocks to 6px in the original table
   

3. Remove spacing above first item in download list

[From @b-f-chan] To be investigated, likely DMS-UI issue, but @justincorrigible will confirm

4. Add line above title cell when ordering column alphabetically (ascending) line to appear on the bottom of the title cell when ordered descending
   

[From @b-f-chan] @justincorrigible believes this should already be fixed with latest Arranger, to be verified

5. Can we move the tabs so it's aligned with the edge of the table?

[samrichca]

Update 08/10/2023: everything in this comment is completed

To do list for me

Cosmetic changes

1. Make Selected Files table full-width.
2. Increase the Z-index of the calendar so it doesn't get overlapped by the content.
3. Move tabs a bit to the left.
4. Make X bigger in tabs.
5. Add loading spinner to Jbrowse launch button.
6. Adjust the word break CSS in the facet panel so "to" doesn't have a break.
   1. fixed in https://github.com/overture-stack/dms-ui/pull/170
7. TBD: "Show panel" label
8. Add to hide/resize facet panel: Below a certain threshold, collapse/hide the facet panel.
   1. fixed in https://github.com/overture-stack/dms-ui/pull/170
9. For scroll to top: What if the page is longer than my screen? Scroll to the top of the whole page.

Fixed in https://github.com/overture-stack/dms-ui/pull/170:

1. Add to hide/resize facet panel: Below a certain threshold, collapse/hide the facet panel.
2. Change all disabled buttons to background #5E6068 with white text.
3. Adjust the word break CSS in the facet panel so "to" doesn't have a break.

Additional ticket for selection logic & errors: https://github.com/overture-stack/dms-ui/issues/171

[justincorrigible]

Updated the QA deployment with the following fixes:

• Table “Loading” fixes. i.e. Loader position as per Patrick’s feedback, caused by outdated state handling; and now all Arranger components use the same DMS-UI loader (consistency).
• Table Header size is larger and customisable from the DMS-UI theming objects.
• Column resizing and sorting changes are actually applied (another side effect from the state issues).
• Dropdown blank space removal, which the browser adds as a default for the code in this branch, but not for the one in develop. 🤷

Still pending:

• Arranger dropdowns' behaviour (Prevent multiple dropdowns from being open at the same time arranger#843)
• Figure out sorting order inconsistency (i.e. desc vs asc) upon first click. Working on it, and will amend here with updates.

[samrichca]

all completed except:

• "not optimized for mobile" message (need mockup from @patrickdsantos)
• freeze left panel when jbrowse is open (needs arranger changes)
• freeze top query baar when jbrowse is open (needs arranger changes)
• range query error that edmund found (upstream problem with jbrowse, jbrowse team is aware)
• jbrowse columns menu bleeding off the bottom of the page (upstream problem with jbrowse, jbrowse team is aware)
• from justin's comment:
  • Arranger dropdowns' behaviour (Prevent multiple dropdowns from being open at the same time arranger#843)
  • Figure out sorting order inconsistency (i.e. desc vs asc) upon first click. Working on it, and will amend here with updates.

[justincorrigible]

For the "freezing" of Arranger filters, a workaround could be operating as a "modal". Without using a "window", but instead by applying an overlay that blocks interactions outside the jBrowse area, it would accomplish the intended result. Also, shouldn't be terribly difficult to implement, methinks.

I'm coming from the perspective that Arranger is designed to manage internally the functionalities it offers e.g. filters, and while blocking them could be a useful new feature for internal usage, this request seems more like a jBrowse concern.

Thoughts?