Hugo Gene symbol validation

[jagnathan]

When user is in match modal > Genomic criteria, the hugo symbol field should have the following in the UI:
Field should be a dropdown list (currently, this field is free text)

When user clicks the hugo symbol input box and starts typing, a dropdown list will display hugo symbol options relevant to the input

Drop list should be fixed with a vertical scroll (refer to figma file linked below)
Drop list of options will display the approved hugo symbol,
If user inputs an approved hugo symbol (or an alias symbol), user will click on the approved hugo symbol from the drop list and value is displayed in the field.
Ensure hugo symbol value is exported in JSON and YAML in the correct format

Alias symbols (to be considered later):
If user inputs an approved hugo - alias symbol, then enter Hugo symbol.
any alias symbols associated to the approved symbol will be displayed in smaller text below the approved symbol

ERROR MESSAGE: If no approved or alias symbols are found based on the input, display message:
No hugo symbol found. Please use another term or go to genenames.org to ensure you are using an approved hugo symbol
hyperlink genenames.org with: https://genenames.org/

The list of genes can be added into the code as a configuration.

[jagnathan]

Added the UI screenshot for CTIMS Hugo gene symbol

[jagnathan]

There is no need to show any aliases for now.

[jagnathan]

Updates based on the meeting:

All genes are downloaded into the CTIMS database
CTIMS frontend will communicate with CTIMS backend via API to retrieve the gene list

UI/UX to be provided by UX team since there are 40000+ genes in the drop down list.
Some CTIMS users may want to use alias or outdated gene symbol. In that case, CTIMS will show a warning message that the symbol is not a valid HUGO gene symbol. This implies user entries may not match the options available in the Hugo Gene Symbol drop down list.

[jagnathan]

Gene names start with 3 characters and can contain upto 8 characters.

https://www.genenames.org has a textbox with drop down for searching gene symbols.

[jagnathan]

Backend API plan:
New API endpoint to be created at apps/api/src/app/gene

This endpoint will take a pattern string as a parameter and return the top 10 genes that start with the pattern.

This will return list of Hugo gene symbols ( top 10 in number ordered alphabetically). As the user enters additional characters, the API will use them to filter result set.

For eg/ if user enters B, then all genes starting with B only will be selected. Then top 10 of the selected genes will be returned as API result.

If user enters BR, then all genes starting with BR only will be selected. Then top 10 of the selected genes will be returned as API result.

This enables the user to filter the gene list.

If user enters, XYZ, then as there is no gene that starts with XYZ, then API will return zero genes as result.

Database:
The gene list will be stored in the CTIMS database for use by the API backend.

[jagnathan]

FYI @Singhj2

[jagnathan]

Following issues have been identified:
Issue 1:
As a user, I have entered the "Hugo Gene" value and saved the matching criteria modal, then I clicked "Edit matching criteria" and re-entered the modal, now the hugo gene field value is blank, but the label is displaying the previously entered value.
Steps to reproduce:
• Click "Edit matching criteria.”
• Enter the value EGFR in Hugo gene field.
• Click "Save matching criteria" modal.
• Now click "Edit matching criteria" to re-enter the modal and check the previously entered value is present.
Expected result:
• Ensure that user should be able to see the last inputted value in the hugo gene text box, when re-entered the modal again.
• Label should display the previously inputted value.

Issue 2:
As a user entered the value "BRAF" and "EGFR", search list panel display the same hugo gene symbol name twice.
See screenshots.
Steps to reproduce:
• Click "Edit matching criteria.”
• Click Add criteria group.
• Click three dots next to parent And
• Click "Add criteria to same group" and click genomic.
• Enter the value BRAF, EGFR in Hugo Gene symbol field.
• Observe the search list is displaying hugo symbol name twice
Expected result:
When a user enters the value in hugo gene symbol text box, the value should be displayed only once in the search list.

Issue 3:
Should the field name be "Hugo Gene" or "Hugo Symbol"? Check the beta version, previously the field name was "Hugo Symbol.”

Issue 4:

Currently,
As a user, I could save blank field. See the preview window display blank value.
Steps to reproduce:
• Enter only blank spaces.
• Check "Save matching criteria" button is enabled when blank values are entered.
• Check the preview window display blank value.
Expected Result:
• When I enter only blank spaces, "Save matching criteria" button should be disabled, so that blank values are not displayed in preview window and exported JSON/YAML file.
Issue 5:
Added multiple genomic criteria via the button "Add criteria to same list" button. Observe the same Hugo Gene value is present in the next two genomic field. See screenshot
Steps To Reproduce:
• Click three dots next to parent And
• Click "Add criteria to same group" and select Genomic
• Add the value to Hugo Gene text box "BRAF"
• Click "Add criteria to same list" button two times
• Observe the next two genomic fields > Hugo Gene text field value display the values entered in first genomic field.
Expected Result:
When multiple genomic fields are added via "Add criteria to same list" button, newly added genomic fields should display blank value in "
Hugo Gene" text field.

Issue 6:
Currently,
When a user clicks the information bubble, the message is displayed both inside the modal and outside the modal.
See screenshots
Steps To Reproduce:
• Click information bubble next to "Hugo Gene" text
• Observe the message is displayed outside the modal.
Expected:
User should see the information bubble message only inside the modal, it should not be visible outside the modal

Issue 7:
Currently,
When a user adds multiple genomic criteria via three dots next to parent And, first inputted value in Hugo Gene text box is displaying blank
Steps to reproduce:
• Click three dots to add a Genomic criteria
• Enter the input KRAS in the text box, select the option listed in the search list
• Now click three dots next to parent And to add the second Genomic criteria
• Then click the first Genomic criteria in L-panel,
• Observe the first inputed Hugo Gene text box display blank text box in main screen
Expected Result:
• After inputting the first genomic criteria with Hugo Gene value, when a subsequent Genomic criteria is added via three dots, and user clicks back and forth in L-panel, firstly inputted Genomic "Hugo Gene" should not display blank value in main screen.

[jagnathan]

    

[jagnathan]

[jagnathan]

[jagnathan]

[jagnathan]

[jagnathan]

[jagnathan]

[jagnathan]

Copy and pasting values in the Hugo gene symbol field does not work.

Copy a gene symbol such as "EGFR" to the clipboard. Paste the symbol in the Hugo gene symbol auto complete field.

The pasted text disappears and the dropdown appears. Now on selecting the pasted value in the dropdown does not fill the value in the field. Field is empty.

This happens consistently when there are two Genomic criteria, one after another.

Please see video of the bug attached.

[jagnathan]

Screen.Recording.2024-04-11.at.11.17.43.AM.mov