Add Interactive Web Tour for Virtual Studies and Group Comparison

[Beking0912]

Summarize

• Student Name: Biqing (Gloria) Su
• Mentors: Jeremy R. Easton-Marks, Ryan Fu
• Organization: cBioportal for Cancer Genomics
• GSoC Project: Interactive web tour
• Related Issue: Interactive web tour GSoC#86.
• E2E Testing PR: Add e2e tests for Interactive Web Tour #4700
• Related Documentation: Documentation, Detailed Blog.
• Online review: https://deploy-preview-4707--cbioportalfrontend.netlify.app/

Description

This pull request introduces an Interactive Web Tour that aims to enhance the user experience and facilitate the exploration of less prominent features on the site. The interactive web tour guides new users through the functionalities of Virtual Studies (Create a Virtual Study - Not Logged In and Logged In) as well as Group Comparison (Compare User-defined Groups of Samples). The project is one of this year's Google Summer of Code (GSoC) projects.

The tour is implemented using the reactour library to provide an interactive UI, leveraging localStorage for seamless page transitions and TypeScript for robust type definitions.

Related Issue

• e2e testing PR: Add e2e tests for Interactive Web Tour #4700
• Add show_web_tours for Interactive Web Tour PR: Add show_web_tours for Interactive Web Tour cbioportal#10333
• GSoC project description: Interactive web tour GSoC#86
• Track suggestions: remaining steps for releasing interactive tours icebox#565

Achievements

• Implemented an extensible tour component, allowing for easy addition of new tour by creating new step file.
• Created tours for two major features:
  • Virtual Studies
    • Create a Virtual Study for Not Logged In users
    • Create a Virtual Study for Logged In users
  • Group Comparison
    • Compare User-defined Groups of Samples
• Completed end-to-end tests for the above two tour functionalities.

File Structure

• src/tours
  • Steps
    • GroupComparison.tsx // Steps for group comparison
    • VirtualStudy.tsx // Steps for virtual study
    • index.tsx // Exports all the steps under the folder
  • Tour
    • index.tsx // Main file, the entry for tours and the tour that actually runs
    • types.tsx // Types for functions and props
    • styles.scss
  • index.tsx // Exports all tours here

Testing

E2E tests have been completed for the Create a Virtual Study for Logged In users and Compare User-defined Groups of Samples tour. The tests focus on validating the presence and functionality of expected buttons and elements by simulating user interactions. (Note: Test code is not included in this pull request but will be added separately.)
👉 See more about e2e testing on PR #4700.

Documentation

For detailed steps of each tour, test procedures, and instructions on adding new tours, refer to the detailed documentation or more detailed blog.

Demonstration

• Create a Virtual Study for Not Logged In users: video
• Create a Virtual Study for Logged In users: video
• Compare User-defined Groups of Samples: video

UI Screenshots

Tour Entries in on the right bar:

Normal Step UI:

Last Step UI:

[inodb]

This looks really great!

Quick comments:

• Change text here (this table only allows selection by mutation, other tables are for CNA):
  
  "Click the check box in the “#” column to select three samples such as IDH1 mutations, TP53 mutant samples and EGFR amplified samples." -> Click the check box in the “#” column to select samples with e.g. IDH1 or TP53 mutations.
• In that same step, when you select two and then deselect one, I see this screen:
  

[Beking0912]

Thanks for your feedback on the PR, Ino. I've fixed these two issues in the commit a28c584.

1. I modified the text at that step:
   From: Select three samples
   To: Select two samples
   From: Click the check box in the “#” column to select three samples such as IDH1 mutations, TP53 mutant samples and EGFR amplified samples.
   To: Click the check box in the “#” column to select samples with e.g. IDH1 or TP53 mutations.
2. Now, when the user selects two "#", the process advances automatically to the next step without the option to deselect.

[inodb]

Great! Thanks so much @Beking0912

Some other thoughts, which we can follow up on later. Not necessary for this PR, just writing it down:

• When you click anywhere else on the page one exists the tour. This is great but sometimes one might accidentally click in the wrong area (happened to me :). Not sure if there's an easy way to bring the tour back. Alternatively maybe an additional confirmation button could work ("Do you really want to exit the tour?")
• Is there a way to enforce selection of a specific cohort? It might make sense to highlight some more specific cancer biology in future tours. Like e.g. in the mutations table one can explain what the most commonly mutated gene in glioma is. For the genomic alterations one could use e.g. this example and explain why AR is enriched in metastatic samples
• It might also be good to have a separate "intro to the website" tour like here: https://deploy-preview-3101--cbioportalfrontend.netlify.app/ (goes over the main navigation at the top etc)

[inodb]

@Beking0912 apologies, one more request from the product team (Niki). On the frontpage could you change:

• the tour section to be below the "What's New?" section?
• Rename the "Web tours" header to "Interactive Tours"

[Beking0912]

Thanks for your feedback on the PR, @inodb @alisman . I'd like to share some updates:

• DONE the tour section to be below the "What's New?" section.
• DONE Rename the "Web tours" header to "Interactive Tours".
• DONE put isLoading in a computed getter of the component.
• DONE Rename the function that determines number of studies.
• DONE Add the property show_web_tours to hide/show the web tour on frontend. (DOING I'll create another PR on backend repo for adding show_web_tours, will update the PR link here later)

Feel free to give more feedback!

[alisman]

@Beking0912 let me know if you want to discuss some of my comments. most of these are minor things. nice work!

[Beking0912]

Thanks for your comments, @inodb @alisman ! I've make many updates on my code, take a look whenever you can, and feel free to give me any more suggestions for improvements!
In addition, there are two more related pull requests that require your attention：

• End-to-end testing for Interactive Web Tour PR: Add e2e tests for Interactive Web Tour #4700
• Add show_web_tours for Interactive Web Tour PR: Add show_web_tours for Interactive Web Tour cbioportal#10333

Thanks again for your time!