Extend chart types in study view

[inodb]

Background:

The cBioPortal is an open-access, open-source resource for interactive exploration of multidimensional cancer genomics data sets, which are collected from a multitude of sources such as published research papers, publicly available data repositories, and private data sets. Please refer to the cBioPortal home page for an overview.

Currently, the Study View Page (an example), supports a few different chart types including pie charts, bar charts, 2-D density plots, and tables. Adding more options for chart types will enhance the user experience in addition to empowering users with more display options for their own personal research and visualization needs.

Figure 1. Types of charts that we could potentially support. (Reference from Google Slides)

---

Goal:

1. Expand the types of charts supported on the Study View Page.

2. Allow users to choose multiple clinical attributes when generating a chart.

3. Allow users to toggle different chart types for the same set of data.

4. Support group charts (as described here)

Approach:

1. Design the workflow for how multiple clinical attributes can be selected. Please take a look the current way of adding chart through the Add Chart button on the top right of the Study View Page.

Please also take a look how Google Sheet generates the stack chart in the Background example.

2. Utilize the stacked bar charts from the current project and generate a new chart base on the clinical attributes selected.

There is a PR containing related discussions about supporting multiple groups in the project, please take a look and utilize the component.

3. Develop React components for new chart types (e.g. line chart)

To see the current implementation of how a Pie Chart interacts with other charts on the Study View Page, see here

4. Add these options to the study view page for "Add Chart" and changing chart type in the chart menu.

For a larger project (350h) one could propose to add more types of charts. If you need any help with ideas for this, please do not hesitate to reach out to us.

---

Needed skills:

• Javascript, ReactJS, VictoryJS
• General good programming skills and willingness to learn.

Possible mentors:

@onursumer
@mlizchap

[Kanha-13]

I wanted to contribute to this project ,I have sound knowledge of reactjs and JS ,but I am new to victoryJS (I have some experience with chart-js ) help me to understand the flow. Thank you.

[ao508]

hi @Kanha-13, thank you for your interest in this project! I'm reaching out to the potential mentor who can help answer any questions you might have regarding this project.

[Kanha-13]

@ao508 thank you for the reply, looking forward to connect with the mentor and start contributing.

[Kanha-13]

@ao508 is there any update for me?

[zhx828]

@Kanha-13 sorry about the delayed response. We are still deciding on the mentor(s) for this one. But feel free to leave any comments/questions here and please take a look at https://github.com/cBioPortal/cbioportal/blob/master/CONTRIBUTING.md to get it started.

[Kanha-13]

@zhx828 That's totally fine. Thank you for the reply, I will go through the docs and get myself comfortable with the code base and surely will drop comments if I have any issues. Looking forward to being a part of this project through GSOC.

[Kanha-13]

I gone through the contributing.md and have doubts like do I need to set up https://github.com/cBioPortal/cbioportal-docker-compose.git or https://github.com/cBioPortal/cbioportal-frontend in my local for this project

[ao508]

@Kanha-13 If I remember correctly you can just deploy the front end locally and have it connect to the public instance of the cBioPortal which should be the default connection options.

@zhx828 @inodb Could you comment on this? It's been a while since I've done any frontend development.

[Kanha-13]

@ao508 Thank you I will start with the frontend repo first.

[dippindots]

@Kanha-13 You can follow the run section of the frontend repo to start: https://github.com/cBioPortal/cbioportal-frontend#run

[zhx828]

@Kanha-13 If I remember correctly you can just deploy the front end locally and have it connect to the public instance of the cBioPortal which should be the default connection options.

@zhx828 @inodb Could you comment on this? It's been a while since I've done any frontend development.

Yup, Angelica is on point. Since this will highly be frontend only project, no need to setup the docker. You can follow https://github.com/cBioPortal/cbioportal-frontend#check-in-cbioportal-context

[Kanha-13]

@dippindots @zhx828 Thank you guys for the information. I will setup with frontend repo.

[Kanha-13]

@zhx828 I have setup the frontend in my local, and is working perfectly. But I can't see the issue section (tab) for this repository. Is it disabled or do I need some permissions for this!

[zhx828]

@zhx828 I have setup the frontend in my local, and is working perfectly. But I can't see the issue section (tab) for this repository. Is it disabled or do I need some permissions for this!

Can you see this page? https://www.cbioportal.org/study/summary?id=ucec_tcga_pub This is the page where this feature will be implemented.

[Kanha-13]

@zhx828 Yeah, I found this page already and started playing with it. But I was looking for the issues tab in github for this repository, so that I can start with some good first issues.

[zhx828]

@zhx828 Yeah, I found this page already and started playing with it. But I was looking for the issues tab in github for this repository, so that I can start with some good first issues.

We use portal repo for all issues https://github.com/cBioPortal/cbioportal/issues

[Kanha-13]

Thank you, I will look there for any issues

[mohitnehra26]

Hello Sir/ Ma'am,
I hope you're having a wonderful day,
I am Mohit Nehra, a junior in Computer Science and Engineering from Guru Gobind Singh Indraprastha University, Delhi, India.

I am very keen on contributing to this project of cBioPortal:
'Extend chart types in study view' ,
and if given a chance I will work with utmost dedication.

I firmly believe that adding more options for chart types will enhance the user experience in addition to empowering users with more display options for their own personal research and visualization needs.

Often, the most difficult part of creating a data visualization is figuring out which chart type is best for the task at hand and choosing the right way to represent the data using one of these visualizations.

My Coding Skills:

• Proficient in HTML, CSS, JavaScript, React library, I have also used data visualization libraries like recharts with react and Chart.js
• Regular participant in competitive programming using C++, java and python
• Good experience in Git, MySQL
• Took higher mathematics courses in Statistics and Probability during my freshman and sophomore years.
• I have worked in all three: Windows, Linux and Mac environments.

I have built some interesting web applications like

• A responsive and interactive song streaming web application
• Weather search web app (tells live weather conditions of the city entered and has associated background theme for that weather)
• A random Quote Generator (it generates a new random quote every time it is refreshed and its is linked to twitter handles)
• The Hotel management website
• A simple bmi calculator (tells bmi corresponding to the height and weight)
• A todo list and time management application (for enhancing my professional productivity)
  and a few more .....

Also, I went through all the tutorials given on the official website of cBioPortal where I saw the different organizations which are using cBioPortal to do the research work and also the organizations which are funding this great endeavor. The overall goal is to build infrastructure to support clinical decisions for personalized cancer treatment by utilizing “big data” of cancer genomics and patient clinical profiles.

By working with a multi-institutional team like cBioPortal, I would feel very worthy as my work would directly affect cancer research as the main aim here is to catalyze precision oncology. Also, I will get to learn a lot from the community members.

I was intrigued by the following aspects of the cBioPortal's official website :

• It enables the exploratory and interactive visualization, analysis and download of large-scale cancer genomics data sets.
• The large cancer - molecular data like networks, 3d protein structure, etc. is provided to the cbioportal and with all this input data, it is capable of producing astonishing interpretations by making sense out of this big data by data analysis.
• Expression z - scores are calculated for all expression data which are available for query by gene and are used in various analytical operations like the survival rate.
• Study summary provides an interactive overview of the study for exploration. Individual charts can be used to select a subset of the samples. All charts will then update to reflect the features of that subset.
• Onco Query Language (OQL), which is used to define the specific types of alterations to be considered when running a query as it uses keywords to define the alterations to include in a query.

Due to COVID-19 my University is conducting online classes and online labs, and I want to utilize this time for learning new things and contributing to open source projects. If given a chance I can spend 25 hours or more on average a week on this project. I have good problem-solving skills and a quick learner who picks up things quickly and adapts to a new environment smoothly.

After the GSoC period, I would like to continue my association with cBioPortal and work along with other community members in fixing existing bugs, reviewing pull-requests and also guiding new contributors. I feel that this is a good opportunity for me to give back to the community that has been the prime reason behind a great learning experience, while continuously striving to learn and support others working along with me. I will surely attend any conference of the organization if given a chance.

Thank you so much for your precious time.
Looking forward to connecting with the mentor and starting to contribute.

Mohit Nehra

Email : [email protected]
Linkedin : https://www.linkedin.com/in/mohit-nehra-4a9708210/

[ao508]

@mohitnehra26 Thank you so much for your interest in this project! Please feel free to begin working on the proposal and do not hesitate to reach out if you have any questions.

[mohitnehra26]

Great, thanks for the reply.

[dextey]

@ao508 @zhx828
Is this issue fixed? Can I work on this project?
I am new to open source contribution. I have experience in javascript and React.
I am looking forward to your response and mentorship.

[alisman]

@dextey maybe could arrange a short zoom call to discuss?

[dextey]

@alisman
yes, it would be great.
Gmail: [email protected]

[alisman]

Ok, will send you an meeting invite

…

On Fri, Aug 19, 2022 at 11:55 AM Dexter ***@***.***> wrote: @alisman <https://github.com/alisman> yes, it would be great. Gmail: ***@***.*** — Reply to this email directly, view it on GitHub <#90 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABNRGJJDVKFJPMNV2EK7ILVZ6VAZANCNFSM4WUFX32A> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[harsh2929]

@alisman is this issue open for GSOC-23', I would love to contribute towards the issue so kindly let me know.

[RINO-GAELICO]

Hi @zhx828, is this issue still open for [GSoC-2024]?
I would like to tackle it and make a proposal on it but I am not sure if this issue is still alive.
Thank you

[LalitDeore]

Hello @inodb,

I am expressing my interest in participating in this project. I have a background in open-source work and have previously contributed to projects. Additionally, I have been accepted into the GitHub Octernship Program under the Shuffle Organization.

My skill set includes proficiency in React.js, Javascript, and Chart.js. Could you kindly provide me with any prerequisites or tasks that I could complete as a demonstration of my abilities and suitability for this project?

Thank you.