Use Chromoscope React Component for Structural Variants Visualization

[fuzhaoyuan]

Background

• cBioPortal:
  The cBioPortal for Cancer Genomics is an open-access, open-source resource for interactive exploration of multidimensional cancer genomics data sets. The goal of cBioPortal is to significantly lower the barriers between complex genomic data and cancer researchers by providing rapid, intuitive, and high-quality access to molecular profiles and clinical attributes from large-scale cancer genomics projects, and therefore to empower researchers to translate these rich data sets into biologic insights and clinical applications.
• cBioPortal's Structural Variants tab:
  In the cBioPortal results view page, we have a Structural Variants tab displaying all strcutural variants regarding queried genes in selected study (see example here). This helps cancer researchers dive deep into detailed structural variants information on every sample in this study cohort.

• Chromoscope
  Chromoscope is an interactive multiscale visualization for structural variation in human genomes. It enables a user to analyze structural variants at multiple scales, using four main views. Each view uses different visual representations that can facilitate the interpretation for a given level of scale. All views in Chromoscope are interactive, allowing a user to explore data effectively.

Goal

1. Add the Chromoscope viewer as resource data
2. Add custom react component and logic to transform data as necessary

To have a sense of what it looks like, we have a patient view page hosting Chromoscope on external server here.

Approach

1. Get familiar with viewer, resource data
2. Compare cBioPortal data format with Chromoscope's, find the mapping relationships between them
3. Integrate React version of Chromoscope into our Structural Variants tab, transform data format in frontend if necessary

Needed skills

Typescript, React
Willingness and ability to gather relavant information (search, docs, etc), attention to details, communication and presentation.

Maybe some starting point

1. Help on some of our frontend issues to demonstrate (show off :0) your understanding of our codebase and your programming skills
2. Some hints to think of and can be included in your proposal, among other things:

• What is resource data and how to add one?
• Where to find data format specifications?
• At first glance, Chromoscope can only display one sample at a time, but the structural variants table is displaying multiple samples. Can Chromoscope summarize them? Any examples?

Possible mentors

Ryan (@fuzhaoyuan)

[ShivamVashisth28]

Hey @fuzhaoyuan,
Shivam this side, pursuing BTech in CSE. I am excited about this project and would love to contribute to integrating Chromoscope into the Structural Variants tab. I will start by familiarizing myself with the cBioPortal backend and frontend codebases, understanding the data format mapping, and exploring how to transform structural variant data for Chromoscope. Looking forward to collaborating and making progress on this!

[KisuZoid]

Hi @fuzhaoyuan,

I'm Kislay, a BTech student in CSE with a specialization in AI and ML. I'm excited to contribute to the "Use Chromoscope React Component for Structural Variants Visualization" project as part of GSOC 2025. Currently, I'm familiarizing myself with the cBioPortal codebase to better understand its workflow and structure, ensuring I can make meaningful contributions.

Looking forward to collaborating!

Best regards,
Kislay

[yashchhangani]

Hi @fuzhaoyuan
I'm Yash, a BTech student in CSE with a specialization in AI and ML. I'm excited to contribute in this project as part GSOC 2025.Kindly help me to contribute for this project

[archig97]

Hi @fuzhaoyuan , I am a CS student who has previously worked on Angular and React projects and would like to contribute to this feature as part of GSoC 2025. I have familiarized myself with the cbioportal-frontend and hope to be able to collaborate on this project.

Regards,
Archi.