Interactive web tour

[jjgao]

Background:

With more and more features getting into cBioPortal, it becomes a challenge for new users to fully utilize the site. Interactive web tours would be very useful to get new users started. There are many features which a large percentage of users don't know about because they lack prominence in the UI. For example, group comparison. Advanced users don't want the hints, so there should be some way to hide the hints.

Goal:

Implement an interactive tour version of one or more of the tutorials: https://www.cbioportal.org/tutorials.

Approach:

There is already some code available for that does a web tour of the group comparison feature: cBioPortal/cbioportal-frontend#2670. We can use that and allow the user to turn it on or off. As a first stage this could be stored in localStorage.

• Re-enable the group comparison web tour, disabled in this PR: Remove user announcement and tour message (on study page) cbioportal-frontend#2670
• Use localStorage to remember whether a user has turned on hint mode or not. This allows enabling/disabling the group comparison tour.
• Create another web tour for one of the tutorials here: https://www.cbioportal.org/tutorials
• Bonus: store the user state as a setting in the session service: https://github.com/cbioportal/session-service

Need skills:

• Javascript
• ReactJS

Possible mentors:
Aaron, @leexgh, @dippindots @inodb

[iFlameing]

@jjgao I would like to work on this issue :)

[rajmeghpara]

Hi all, I hope you are doing fine. I am Raj Meghpara currently in final year. I have worked on ReactJS, redux and also SSR(Server Side Rendering) during my last summer internship.

Here is my github profile: https://github.com/rajmeghpara

Here is the app I have developed from scratch using ReactJS: https://elastic-fermi-485961.netlify.com/
I have also published an article for users to build it from scratch: https://medium.appbase.io/how-to-build-a-movie-search-app-with-react-and-elasticsearch-2470f202291c
I have also enabled SSR(Server side rendering). I was really able to see the difference. Kindly visit the “Bonus point” in the blog.
Here is the link to the code: https://github.com/rajmeghpara/MovieSearch-app

Here is the another app that is Airbnb Clone built from scratch using ReactJS: https://heuristic-euler-9e064d.netlify.com/
Here is the link to the article: https://medium.appbase.io/how-to-build-an-airbnb-clone-with-react-and-elasticsearch-8eb91e7e85e2
Here is the link to the code: https://github.com/rajmeghpara/Airbeds-app

I was going through the list of gsoc projects, this project interests me the most. I thought I would be able to make an impact by contributing to this project.

Can I start working on this issue?

I am excited to start the contribution.

Thanks!

[jjgao]

@iFlameing @rajmeghpara thanks for your interest. To get started, please get familiar with cbioportal.org. The tutorials (http://www.cbioportal.org/tutorials) would be helpful. Please let us know if you have any questions.

[sarru1291]

Hello cBioPortal community! I’m Sarvottam kumar pursuing B.Tech 3rd year from Bharati Vidyapeeth College of Engineering, New Delhi.

I have worked on various projects related to data-handling using AJAX, JSON, and REST API using Flask, NodeJS and also interactive UI using ReactJS. My recent work was building UI and REST API for integrated retinopathy and skin cancer web app using ML.(demo: https://retinoskin.herokuapp.com/ ). for more refer to my github ( https://github.com/sarru1291 ).

Hence, I am keenly interested and looking forward for contributing to your project ideas issues #65, 63, 58, 49, 29, 41 as i found this project interesting and also compatible to my skills.

Kindly mentors please guide me where and how to start contributing to resolve the issues. (GSOC 19)

[LakshanSS]

Hi All! I am interested in doing this tour guide. I have worked with React and JavaScript in various projects. I am going to get started with cbioportal and try the tutorials.

[Parth910]

Hello, community!! I am Parth Patel from Jaipur, Rajasthan, India. Currently, I am pursuing my B.Tech Sophomore in Computer Science and Engineering at The LNMIIT, Jaipur.

I have Experienced in various Javascript framework like NodeJs, ReactJs and etc. I worked in a project which builds in ReactJs.So now I am interested in this issue.so please, mentors guide me how and where I can start to contribute to solving this issue.

[jjgao]

@sarru1291 @LakshanSS @Parth910 thanks for your interest. Please following How to Apply to get started.

[inodb]

@alisman @jjgao should we keep this one? It seems to me that the introduction of group comparison was doing something similar. I guess if we want to do this we should maybe re-use some of that code? It might be nice to either focus on the tutorial aspect (i.e. completely new users) or make it easier to introduce new features in the same way as we did with group comparison.