Interactive web tour

[inodb]

Background:

The cBioPortal for Cancer Genomics is a publicly available resource for visualizing and analyzing cancer genomics data curated from various sources including public data repositories, published research papers, and private data sets. For an overview on all things cBioPortal, please refer to the home page.

Our team is constantly working towards improving the cBioPortal with updates and new features that provide new types of visualizations and analyses, improve performance, and enhance the overall user experience. As one of the leading publicly available resources for analyzing and visualizing cancer genomics data, it is essential that the cBioPortal remains accessible to both new and experienced cBioPortal users.

As more features are added to the cBioPortal, it can be challenging for new users to fully utilize the site. Furthermore, there are features which a large percentage of users are not aware about because they lack prominence in the UI. For example, the group comparison tool.

To address these issues, we wish to introduce interactive web tours to get new users started with the cBioPortal and to demonstrate new features and how to use them. Additionally, we should allow the hints to be disabled by advanced users who do not want them.

---

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 that does a web tour of the group comparison feature: cBioPortal/cbioportal-frontend#2670. We can build off of that and allow the user to turn it on or off. As an early stage of the development process, this could be stored in localStorage.

• Extend the web tour proposed in this PR: Experiments with Guided Tour Options cbioportal-frontend#3101. For a demo see: https://deploy-preview-3101--cbioportalfrontend.netlify.app/ (click on start tour).

• 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

---

Needed skills:

• Javascript
• ReactJS

Possible mentors:

@alisman @leexgh @dippindots @inodb

[yliang123]

Hello cBioPortal team, My name is Yuchen. I am a computer science master's student at North Carolina State University. I have experience with React and JS and can use reactour library to implement the interactive web tour. I am looking forward to being part of the cBioPortal team in Gsoc 2022 to contribute to this task.

[ShwetKhatri2001]

Hey there ! I'm Shwet Khatri ! I'm very much interested in contributing to this issue since I'm good at the needed skills. I have implemented similar features in past fulfilling the requirements. Looking forward to be a part of cBioPortal community and contribute to its growth.

[ao508]

Hello @yliang123 @ShwetKhatri2001, thank you for your interest! I will inform the potential mentors that you've reached out and someone can follow up with the application process.

[khanhcodes]

Hello cBioPortal team! I am Kaitlyn and I am a CS and Mathematics undergraduate at the University of Georgia. I am familiar with ReactJS, JavaScript, and some other libraries such as Bootstrap and Material UI for frontend development. I am strongly interested in the applications of Computer Science in Biology, and I have experience working on some bioinformatics (genome data analysis and drug discovery) projects before. I am looking forward to being part of the cBioPortal team this summer!

[yans80]

Hi @alisman @leexgh @dippindots @inodb, I am interested in this project. Just want to clarify something. 1. For the walkthrough tour, should we focus on group comparison feature, or should we cover all other features as much as possible like study view as well? 2. is hint mode something to toggle after start tour button in the demo or should we replace start tour button with hint toggle? so it automatically turn on for new users, and depend on user's operation, it will enable/disable the walkthrough the next time they visit. Thank you!

[ao508]

@tsun812 Highlighting the comparison feature would be a really great start! Please feel free to start the proposal, thank you :)

[ao508]

@khanhcodes @ShwetKhatri2001 @yliang123 Please feel free to start working on the proposal as well as the application period is starting soon. Thank you!

[yans80]

@ao508 Thank you!

[Saurabh-Suchak]

Hey @ao508 I am interested in this project and I am willing to contribute in this project as a part of GSoC'22.
I am proficient in frontend and know javascript,react and other libraries which would be helpful for the completion and address the issues.

[Saurav1905]

Hello cBioPortal team, I am Saurav das. I am a Computer Science Btech student. I have worked on multiple projects react based and implemented tours as well. Looking forward to contribute in this project as a part of GSoC'22.

[AkashKalala]

Hello cBioPortal team, myself Akash Kalala, 3rd year student from IIT Roorkee. I was going through projects idea list of cBioPortal and found this "Interactive Web Tour #86" interesting and wanted to work on this project. I have made few websites and some work with ReactJS. Good at Javascript and wanted to work for a real life project. I tried to contribute by solving one issue #9227. I will be doing more contributions and try to make a good proposal. Looking forward to work on this project as a part of GSoC'22.

[ao508]

@AkashKalala @Saurav1905 Thank you! We look forward to reviewing your application - good luck and please reach out if you have any additional questions!

[prithviraj-kt]

Hello cBioPortal team, I am Prithviraj and I am MERN stack developer, futuristic block chain dveeloperand I am an Engineering student at Computer science stream. I spend most of my time coding and learning new things.

I am working as freelancer since more than one year and I am always pumped to learn and solve the most craziest challenges.

I help several organizations to solve their daily challenges. And now I am damm interested in the cBioPortal as it is doing such a great work, I really want to contribute to this, join the community and help many more users as well. Waiting for the humble response.

Thankyou

[prithviraj-kt]

Hello there, I just had a small query that can we use any library for implementation of this functionality? Or is there any library that has already been decided?

[ao508]

Hi @prithviraj-kt - I don't believe there is any preference as to which library is used as long as it works with the cBioPortal frontend.

[prithviraj-kt]

Thankyou so much @ao508 , I'll take care about it.

[Malith-19]

Hi there,
I'm Malith Dilshan from Sri Lanka and I'm currently a third-year Computer Science and Engineering student at the University of Moratuwa. I'm well experienced in web development and I would like to contribute to this project this year GSoC. Since this project carried out its last two programs what is the present state of the project?

You can also find me in LinkedIn: https://www.linkedin.com/in/malith-dilshan/

[parmishh]

@ao508 @alisman @leexgh @dippindots @inodb
Hi,
I'm Paramjit from India currently a 2nd year Information technology student at IIIT-Bbsr. I have gone through the the idea I am interested on working on "Interactive Web Tour #86" . I'm well experienced in web development and cloud and I would like to contribute to this project for this year GSoC.
You can find me on LinkedIn: https://www.linkedin.com/in/paramjit-singh-19ba671ba/

[eshan-003]

Hi ,
My self Eshan Chakraborty am a second year undergrad in CSE and am well versed in MERN stack and web dev in general. I came across this project and would like to contribute on this . You can see my personal projects on my github and can also visit my linkedin profile at https://www.linkedin.com/in/eshan-chakraborty/ .Thnx

[Prince2319]

Hello Mentors,
I am Piyush Yadav , a 3rd year student in IIT Roorkee willing to dive into the open source community
I am a web developer working in the MERN tech Nd also have knowledge in JavaScript , C++ , HTML and CSS.

I came across your organization from my senior in college and I like your project
ideas and the tech stack used by your organization.

I also have some experience in open source contribution and I have done some of my project using ReactJs and Javascript.
I am willing to learn new tech stack to implement new code.

GitHub: https://github.com/Prince2319

Looking forward to hearing from you!

[Tushar98644]

Hello Mentors ,

Myself Tushar Banik ,a 2nd year student from Biosciences and Bioengineering department in IIT Guwahati.I am an open source enthusiast and have adequate knowledge on Html, CSS ,Javascript, Reactjs , Nextjs ,Django , Sanity and a variety of unit testing tools .

I came across your organization and carefully went through what it does . As a fellow student in the biosciences field i can understand the importance of the valuable genomic-data that you provide for cancer treatment. AS such i would like to contribute in the process and Start my gsoc journey .

I have looked through the existing code and also the demo and would like to start discussing the project idea with the assigned mentors......

Linkedin ID-https://www.linkedin.com/in/tushar-banik-632a51226/

Looking forward to a positive response from your side!

[NKcool]

Hi everyone
@alisman @leexgh @dippindots @inodb

Hello! I'm Naveen Kewat, a B.Tech student in Electronics and Communication. Besides my academic pursuits, I am interested in medical research and data analysis. I enjoy working with complex data sets and discovering insights that can drive decision-making in healthcare. On the technical front, I have acquired skills in React JS front-end development and Java Spring Boot. With my knowledge and passion for both technology and medical research, I aspire to contribute to the development of innovative solutions that can transform the healthcare industry. feel free to reach me at [email protected]

thank you,

[sawaisinghh]

hello mentors,
@alisman @leexgh @dippindots @inodb

I play around javascript and react. And I gone through the website. and I think, I can improve the UI and add some extra functionalities to make great user experience.
I gone through the approach and I wrote sample code snippet in JavaScript that demonstrates how we can implement a switch to turn the web tour on or off and store the user's preference in localStorage.

const tourSwitch = document.querySelector('#tour-switch');
const tourEnabled = localStorage.getItem('tourEnabled') === 'true';
tourSwitch.checked = tourEnabled;

tourSwitch.addEventListener('change', (event) => {
const enabled = event.target.checked;
localStorage.setItem('tourEnabled', enabled);
});

if (tourEnabled) {
// code to start the web tour
}

Please give me your valuable suggestion. and I am very excited to hear back from you. As I want to contribute to the cBioPortal project and help users get the most out of the platform.

[anubhav2102]

Hello mentors,
I am a 3rd year Undergraduate student of RGIPT Jais, in Computer Science and Engineering Department.
I read your project idea for GSoC 2023 on Interactive web tour. I really liked it.
I am already familiar with ReactJS, JavaScript, Node.js, Django, SQL.
My portfolio - Anubhav Ladha
My Contributions - Github
Currently i am working on www.checkmatenow.in as a startup with React, Sanity.io and AI/ML based recommendation system.
I am really interested in the project and wanted to write a proposal for GSoC'23.
Can you please guide me regarding this? Is there any issue that I can work on currently? or should I do some self projects to make my proposal strong?

Thank You
Anubhav Ladha
B.Tech. Computer Science & Engineering
Personal email | University email | Linkedin
Phone +91 9328777219
Rajiv Gandhi Institute of Petroleum Technology

[satishsahu25]

is this issue open?

[shrikant1809]

Hello @inodb @dippindots @leexgh @alisman,
Myself Shrikant, currently working as a Program Manager with Medprime Technologies (patented digital microscope producers).
I have read the above project and find it resonating with my current working spectrum and I aim to contribute to the same.
I am proficient in handling projects with JavaScript, HTML, Cascading Style Sheets; also have worked with the framework of Node.js and Express.js with database management system like MySQL and JavaScript libraries like Redux and Angular.
I hope you find my above skills relevant for the project "Interactive web tour" and accept my participation in GSoC'23.

Thank you,
Shrikant
Email- [email protected]
Linkedin - https://www.linkedin.com/in/shrikantp1809/

[Amritanshu02]

Hello everyone,
I am Amritanshu, a CSE 3rd year student. I am currently pursuing my B.tech from Babu Banarasi Das Institue of Technology and Management, India.
I am very interested in website building and had build a number of websites like Netflix clone, staybnb clone and many more. Recently I had also developed an interest in Open Source and I would like to contribute for the organizatons in GSoC and show case my skills. I had also participated in Hacktoberfest event and was able to make successfully 4 PRs.
After carefully going through your GSoC 2023 Ideas, I had developed a keen interest for Interactive web tour. I being skilled in Java, HTML, CSS, JavaScript and React and also being familiar with MySQL, DBMS, Git and GitHub, believe that I will be able to make some meaningful contributions to your organizations.
I will be looking forward to become a part of your organization and show case my development skills. Also I am new to this whole GSoC so I will be looking for your guidance @alisman @leexgh @dippindots @inodb.
Thank you all.

GitHub: https://github.com/Amritanshu02
LinkedIn: https://www.linkedin.com/in/amritanshu-gupta-982529201/

[neeraj542]

Hello Everyone,
My name is Neeraj Meena, and I'm a first-year student at NIT Bhopal. I'm excited to dive into the open-source community and contribute to meaningful projects.

As a web developer, I have experience working with the MERN stack and possess proficiency in JavaScript, C++, HTML, and CSS. Currently, I'm building websites and working with ReactJS. I'm excited about the opportunity to work on a real-life project like this and contribute to the development of cBioPortal.

I'm passionate about programming and eager to apply my skills to real-world problems.

I was browsing through the list of project ideas for cBioPortal and came across "Interactive Web Tour #86", which really caught my attention. I'm writing to express my interest in working on this project as part of the Google Summer of Code program.

In particular, I am hoping to work with mentors such as @alisman, @leexgh, @dippindots, and @inodb. I am impressed by your contributions to the open-source community and would be honored to work alongside you.

GitHub: https://github.com/neeraj542
LinkedIn: https://www.linkedin.com/in/kumar-neeraj-2019/

Thank you for your time and consideration. I look forward to hearing from you soon.

[Beking0912]

Hi, I'm Gloria, a first-year CS Master student at North Carolina State University, and I'm interested in this project.
With around two year of experience worked as a Front-end Engineer writing React application with JavaScript and TypeScript, I've found that my tech stack is a great match for cBioPortal-front-end codebase. And I have experience in developing user guides, and I think this project can be implemented well with reacttour.
As a newcomer to open-source projects, I am eager to have the opportunity to make a contribution.

[Neer393]

Hello Mentors,
I am writing this to express my interest in participating in the Google Summer of Code 2023 with cBioPortal, specifically for the Interactive Web Tour Project. I have gone through the project details and found them very interesting and challenging. I believe that my skills and experience match the project requirements, and I am confident that I can make a valuable contribution to this project.

Let me introduce myself, I am Neeraj Khstri, currently pursuing my B. Tech in Computer Science and Engineering from the National Institute of Technology, Hamirpur. I have been working in web development for the last 2 years and have hands-on experience in front-end web development technologies like HTML, CSS, JavaScript, React js, etc. I have also worked on various projects in the past which required integrating APIs and developing interactive web applications.

I am passionate about open-source technologies and have contributed to open-source projects in the past. I am well-versed in the Git version control system and have experience in collaborating with remote teams.

Regarding the Interactive Web Tour Project, I am excited to work on this project because it involves developing an interactive web tour, which will help the users get a better understanding of the cBioPortal. I have gone through the project details and have a few ideas that can help enhance the user experience of the tour. I am willing to work on this project full-time during the summer and can devote around 40-50 hours per week.

I would like to thank you for considering my application for the Interactive Web Tour Project at cBioPortal. I am excited about the opportunity to contribute to this project and would be happy to discuss my ideas further. Please let me know if you require any further information or have any questions.

Looking forward to hearing from you.

Best regards,
Neeraj Khatri

[benjamin-jun-li]

Hi Mentors!
I'm Benjamin, a student at UNSW Australia studying IT. I just came across this project while browsing through the Google Summer of Code ideas list. I'm really passionate with using my frontend knowledge to help the service of cBioPortal.

I'm particularly excited about the idea of introducing interactive web tours to help new users navigate the site and learn about new features. I really enjoy building user-friendly UI/UX design with my front-end skills like HTML, CSS, Javascript and React

I'd love to be a part of this project and contribute in any way I can. I am eager to learn more about cancer genomics and how to use technology to drive scientific progress. Thank you for considering my application!

Best regards,
Benjamin

[Bharadwajshivam28]

@ao508 Hello mam, My name is Shivam kumar and I am a First year Student in my college . I have went through this project and understood how this project can create a major impact. I am looking forward to help building this project and contributing to this project as I have Good grasp on JavaScript and React but I have not submitted the application as i not had much idea but I know I have potential to work on this project ..