Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feedback form - Ray Stefancsik - Hi team, I would like to draw attention to a usability bu... #744

Open
Tracked by #737
monarch-issues-tracker bot opened this issue Jun 21, 2024 · 10 comments · May be fixed by #748
Open
Tracked by #737
Labels
bug Something isn't working Feedback Form Tickets submitted through UI feedback form UI Developer

Comments

@monarch-issues-tracker
Copy link

Name
Ray Stefancsik

Email
stefancsik@ebi.ac.uk

GitHub Username
@rays22

Details
Page: /feedback
Browser: Firefox 126.0
Device: Apple Macintosh
OS: Mac OS 10.15
Engine: Gecko 126.0

Hi team,
I would like to draw attention to a usability bug.
When I try to enter any text in the filter box, for example, here
https://monarchinitiative.org/HP:0006501?associations=biolink:GeneToPhenotypicFeatureAssociation
I can enter only one character, then the focus on the filter box is lost, and I need to click and select inside the box againg with my mouse if I want to continue and complete the input text.
This makes finding relevant lines in the table very cumbersome and frustrating.

Thank you in advance.

@monarch-issues-tracker monarch-issues-tracker bot added the Feedback Form Tickets submitted through UI feedback form label Jun 21, 2024
@rays22
Copy link

rays22 commented Jun 21, 2024

I have been able to reproduce the problematic text input behaviour in Firefox, Chrome, Safari and Vivaldi browsers.
filter_box_T

@sagehrke
Copy link
Member

sagehrke commented Jun 21, 2024

Hi @rays22,
Thank you for submitting this help desk ticket! I am going to move this to our Monarch-app repo so that the technical team can add this bug to their to-do list.

All the best,
Sarah

👀 @kevinschaper @glass-ships @amc-corey-cox

@sagehrke sagehrke transferred this issue from monarch-initiative/helpdesk Jun 21, 2024
@rays22
Copy link

rays22 commented Jun 21, 2024

Thanks @sagehrke !

I would like to add another problem with the search box. Partial matches do not seem to work. You need to enter a complete matching string to get any results. For example, "TNN" does not match any lines, although there are lines that should match TNN*.

@sagehrke sagehrke added the bug Something isn't working label Jun 21, 2024
@glass-ships
Copy link
Collaborator

glass-ships commented Jun 21, 2024

Thanks for the issue, @rays22.
(CC @kevinschaper and @amc-corey-cox in case they have additional thoughts or input)

Regarding the click and type issue:

This happens because when a new search is entered, or really if any of the following occurs:

  • a new category is selected
  • the traverse orthologs button is checked/unchecked
  • the per page number is changed
  • the page itself is changed

A new query must be made, and the Association table must re-render, including the text box,
which therefore makes the text box lose focus.

You technically can type multiple characters before this happens, but the time between keystrokes has to be less than 500ms.

The best solution I can think of to implement for now is to increase that debounce time, maybe to something like 900ms, to allow the user extra time to type before having to click in again.*

It's possible that there is a more elegant way to handle this, perhaps with the use of a third party libraries (see #147) but this would require significant research, and unfortunately we're not likely to get around to this in the super-near future.

* Let me know of this solution seems acceptable for the time being.

Regarding partial matches, I'll have to look into this a bit further, will update when I have more info.

@kevinschaper
Copy link
Member

partial matching would be controlled by adding fields suffixed with _ac to association_search_query_fields()

probably we’d want subject_label_ac and object_label_ac (but we maybe wouldn’t want starts-with matching on all entities in the closure, at least not without also adding some kind of text highlighting to know why rows are being matched against).

We’ll also need to populate those _ac fields on the monarch ingest side. We’ll have to add an additional copy fields stanza to add_association_copyfields.sh

Maybe include taxon and qualifier labels on the assumption they’ll be shown in the table?

for field in subject_label subject_taxon_label object_label object_taxon_label qualifiers_label onset_qualifier_label frequency_qualifier_label sex_qualifier_label
do
  curl -X POST -H 'Content-type:application/json' --data-binary "{
  \"add-copy-field\": {
      \"source\":\"$field\",
      \"dest\": \"${field}_ac\"
  }
}" http://localhost:8983/solr/association/schema
done

predicate wouldn’t work here, since it starts with biolink:, we’d need a tokenized starts-with matching field type for that.

@kevinschaper
Copy link
Member

@glass-ships We could trigger the search with a button rather than having it act like a live search, if nothing else as a short term solution until we can figure out how to keep focus in the box while other elements get re-rendered.

@glass-ships
Copy link
Collaborator

@kevinschaper I'm not really sure that would work, actually, because of how the AppTextbox component is written (see AppTable.vue Line 171 and components/AppTextbox) - at least not without overhauling some of that functionality.
(As written, it displayed a non-interactive icon when the text is empty, and a clear button if it's not)

@glass-ships
Copy link
Collaborator

@vincerubinetti (sorry to drag you into this, feel free to ignore / comment as you're willing and able)
would you by any chance have some input on how we might approach this?

@vincerubinetti
Copy link
Contributor

I'm out of office at the moment. I don't remember exactly how I wrote these particular components at the moment. But I think there may be a @change event in the text box component you could use to trigger the search in the case of the table component, instead of the debouced event. That should trigger on blur or enter press, and you could modify the component such that the magnifying glass icon in the text box is a button (with an accented color to indicate clickability) that will also explicitly trigger the change event as well.

I can comment more next week.

@vincerubinetti
Copy link
Contributor

I also remember encountering this bug a while ago and fixing it in some manner. Might be worth looking through the git blame for the textbox/table/associationstable components to see if anything was overwritten during merge conflict or something.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Feedback Form Tickets submitted through UI feedback form UI Developer
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants