Improve Genome Nexus' Mobile and Search Experience

[inodb]

Background:
Genome Nexus [1] is a tool for the annotation and interpretation of mutations in cancer. cBioPortal leverages Genome Nexus' API to for instance show how a mutation might change the protein or how often a mutation occurs in healthy populations or patients with cancer. We recently released Genome Nexus as a standalone tool and website. The website allows clinicians and researchers query any mutation of interest. Try out some of the examples on the homepage. The website is currently mostly designed for a desktop computer and could use some work to make it a better experience on mobile. Some ideas:

1. Home page and variant page responsive

Could rearrange sections on variant page when on small screen

2. Lollipop explore.
   Right now the lollipop is squeezed to a small size that makes it hard to click and explore, would be good to improve its usability by e.g. ask users to click and rotate screen to view lollipop plot in a horizontal view. Add more explore options in the plot, like zoom in and zoom out, etc.
   

3. we can expand this project to improve the search functionality, since particularly on mobile it might be hard to type in the variants quickly, which is why it would be good try and guide the user some more. If you'd like to do a 350h project we can work on improving search as well. This e.g. does not have any recommendations:

Even though this one exists:

4. We rely on "search" database to provide options in search box, but there are some limitations on "search" database, for example it's hard to catch duplication or invalid formats, only variants that have been cached would be able to show in search results. Would be good to replace "search" database with other approaches that could do autocomplete and show top frequent variants in search results.

These examples are meant to illustrate that there is a lot of room to improve and make the user experience better. Feel free to propose other issues that you notice while browsing the website.

[1] de Bruijn I, Li X, Sumer SO, et al. Genome Nexus: A Comprehensive Resource for the Annotation and Interpretation of Genomic Variants in Cancer. JCO Clin Cancer Inform. 2022;6:e2100144. doi:10.1200/CCI.21.00144

Goal:

1. Improve the design for mobile (make lollipop plot easier to view on mobile, fix hamburger buttons, get rid of whitespace)
2. Make search easier (auto focus on text field, allow searching for a single gene, order search results by frequency of occurrence in cBioPortal)

Approach:

• Get familiar with the Genome Nexus codebase. For the mobile improvements, one only needs to get familiar with the [frontend)[https://github.com/genome-nexus/genome-nexus-frontend]. Familiarity with the backend code is only necessary when improving search. It might help to look at Genome Nexus' issue tracker to get some experience, in particular the good first issues.
• Leverage TypeScript, React and CSS to improve the design of the search page and the variant page. Make small pull requests including one or two improvements at a time
• Improve the current search endpoint using Java, the Spring Boot framework and Mongodb. Allow for partial searches

Need skills:

• JavaScript and React for frontend work
• Java and Spring Boot Framework for backend work

Note that it is totally fine if you prefer to only work on the frontend or backend. Even if you don't know the programming languages and frameworks, we are more than happy to help you get up to speed. GSoC is about learning how to contribute to open source projects 🙏!

Possible mentors:
@onursumer @leexgh @inodb

[4rr0w]

I have experience with building similar features from my past projects. I would love to work on this feature.
I have already started familiarizing myself with the codebase. Please guide me, to where I can submit the proposal for working on this.

[4rr0w]

@onursumer @leexgh @inodb I am 3rd year undergrad at IIT Delhi, from india. I am intrested in taking up this project and working on it. I have drafted a proposal for this. Please help me finalize it. Please let me know where I can share my proposal for your reviews.

[ao508]

Hi @4rr0w everything can be done through the GSoC website :)

[0xClint]

Hello, @ao508 is this issue solved? if not, can I try my hands to solve this?

[ShravaniAK]

Hello ,
we have to make it look responsive in mobile view. please correct me if I am wrong!
I am good at javascript, typescript, React js, Next js, React native, material ui, chakra UI, etc .
I would like to work on this issue , please assign it to me

[AnuragNishad12]

Dear project team,

I am thrilled to express my interest in working on the Genome Nexus project. As someone who has already created multiple successful projects for desktop and mobile platforms, I am confident that I have the necessary skills to help improve Genome Nexus and make it look and function even better. I am excited to collaborate with the team and contribute my expertise to ensure that the project runs smoothly and efficiently.

[Selwan7131]

I carefully read the project description and would like to express how interesting it is to me. I would like to work on the frontend and back end together as I have some previous experience building a full application which was about data analysis. The backend I built was using python, but I have a strong experience with java as an OOP language. I built a game which had the name of the conqueror using java. For the application I built I used flask framework and the frontend was using HTML Javascript and CSS. I am willing to learn React for the frontend and Spring boot Framework for your application. I find working on such projects really interesting and fun to me and I hope you can give me the chance to be part of your team. I hope also to make it possible to enhance the search feature and extend the project to be 350h. I am going through the code to get an understanding about how your code work. Once I have any suggestions or solutions I will provide a proposal to explain my understanding and how I expect the plan and timeline would be, and to tell you more about myself :).

[aishikanandi]

@leexgh @ao508 @inodb is this up for GSoC 2024?