Feature to visualize mutational counts for mutational signatures #4540

TJMKuijpers · 2023-03-08T09:34:20Z

The challenge
Mutational signatures are typically visualized as a histogram, where the X-axis represents the recorded mutation classes (e.g. A[C>A]A for single-base substitution signatures). Similarly, double-base substitutions (DBS) and indel (ID) signatures can be visualized. What is currently missing, is a way to visualize the signature histograms of a patient and how that relates to the reference signatures that were used in the fitting process.
The cBioPortal frontend will be extended to recognize mutational signature count data and in the Patient View, the Mutational Signature tab is extended to plot histograms of the counts for the selected signature in the table.. This is the front-end implementation of RFC64.

Implementation
Describe changes proposed in this pull request:

PatientViewPage: to handle the sample change to show different count profiles
PatientViewPageTabs:functionality to handle patients with multiple samples
ClinicalInformationMutationalSigantureTable: Update the table to have a 'clickable' entry which launches the modal.
PatientViewPageStore has the following changes:
- fetchAllMutationalSignatureCountMetaData to extract the count data from the generic assay data.
- selectedSampleUniqueKeyMutationalSignatureData to obtain the counts for the selected sample.
- samplesWithCountDataAvailable to obtain all samples with count data
MutationalSignatureBarChart : to create the bar chart with mutational count data
MutationalSignaturesContainer : Updated to show the mutational count data and handle the
MutationalSignatureTextBox : on hoover over a signature, this shows the mutational signature information and a link to an external database (in this case COSMIC).
Download button to save the mutational bar chart as svg or png.

Note: this PR is linked to cBioPortal/datahub-study-curation-tools#48 (backend implementation) and cBioPortal/datahub#1784 (containing some studies with extracted mutational signatures)

Screenshot test

new tests:

Show mutational bar chart for SBS (single base subsitution).
Show mutational bar char for ID (inhomogenous deletion) after clicking dropdown menu.
Show mutational bar chart for DBS (double base subsitutions) after clicking dropdown menu.
Show mutational bar chart with percentage on y-axis (default is ‘value’).
When multiple samples are available for one patient, switch between samples to change the mutational bar chart.

Updated tests

show stacked bar chart for patient who has significant SBS significant signatures.
show tooltip for patient who has significant SBS significant signatures.
show mutational signatures table for patient who has significant SBS significant signatures.
show stacked bar chart for patient who has significant ID significant signatures.
show tooltip for patient who has significant ID significant signatures.
show mutational signatures table for patient who has significant ID significant signatures.

Updated study for local test:

lgg_ucsf_2014_test_generic_assay has 6 new files:
- data_mutational_signature_counts_SBS.txt
- data_mutational_signature_counts_DBS.txt
- data_mutational_signature_counts_ID.txt
- meta_mutational_signature_counts_SBS.txt
- meta_mutational_signature_counts_DBS.txt
- meta_mutational_signature_counts_ID.txt
  Important:Counts are randomly generated and do not reflect real mutational signatures!

Images showing the new feature
View for mutational count. Patient with multiple samples will have an additional drop down menu to switch between samples.

View for the mutational counts for DBS:

View for the mutational counts for ID:

Image when SBS counts are displayed as percentage:

To gain a better understanding of a signature, the user can click on a signature in the mutational signature table to launch a modal. This modal shows the basic signature information and the link to the cosmic website.

src/pages/patientView/clinicalInformation/ClinicalInformationMutationalSignatureTable.tsx

src/pages/patientView/mutationalSignatures/MutationalSignaturesContainer.tsx

onursumer · 2023-03-27T19:01:52Z

src/pages/patientView/mutationalSignatures/SignatureTextBox.tsx

+    signature: string;
+    show: boolean;
+    onHide: () => void;
+    parentCallback: (childData: string, visibility: boolean) => void;


Rename the function and param names as discussed in previous comments.

src/pages/patientView/mutationalSignatures/SignatureTextBox.tsx

src/shared/lib/GenericAssayUtils/MutationalSignaturesUtils.tsx

MatthijsPon

Change matrix key to counts (we're loading mutational count matrices with the stable_id suffix _counts_{ID}

MatthijsPon · 2023-05-31T07:46:00Z

src/shared/lib/GenericAssayUtils/MutationalSignaturesUtils.tsx

@@ -16,7 +16,7 @@ export enum MutationalSignaturesVersion {
 export enum MutationalSignatureStableIdKeyWord {
    MutationalSignatureContributionKeyWord = 'contribution',
    MutationalSignatureConfidenceKeyWord = 'pvalue',
-    MutationalSignatureCountKeyWord = 'counts',
+    MutationalSignatureCountKeyWord = 'matrix',


Is this correct? It looks like the keyword reverted back to matrix

dippindots

@TJMKuijpers @MatthijsPon Thanks for making this enhancement, It looks good to me. I have some minor comments. @onursumer Might have more comments about this pr.

dippindots · 2023-06-06T04:07:53Z

src/pages/patientView/PatientViewPageUtils.tsx

+        const nameSig: string =
+            'MUTATION_TYPE' in metaData.genericEntityMetaProperties
+                ? metaData.genericEntityMetaProperties['MUTATION_TYPE']
+                : '';
+        const classSig: string =
+            'MUTATION_CLASS' in metaData.genericEntityMetaProperties
+                ? metaData.genericEntityMetaProperties['MUTATION_CLASS']
+                : '';
+        const mutNameSig: string =
+            'NAME' in metaData.genericEntityMetaProperties
+                ? metaData.genericEntityMetaProperties['NAME']
+                : '';


There is a util function that can be used to replace this kind of logic (get property from GenericAssayMeta): https://github.com/cBioPortal/cbioportal-frontend/blob/master/src/shared/lib/GenericAssayUtils/GenericAssayCommonUtils.ts#LL277C17-L277C53

Missed that function, thank you! I have replaced the logic with the following (for each property):
const name:string=getGenericAssayMetaPropertyOrDefault(metaData,'NAME','')

dippindots · 2023-06-06T04:10:08Z

src/pages/patientView/PatientViewPageUtils.tsx

+            mutationalSignatureChartData.uniqueSampleKey =
+                count.uniqueSampleKey;
+            mutationalSignatureChartData.version =
+                _.last(count.molecularProfileId.split('_')) || '';


Could we extract logic here to make it a util function, e.g. getMutationalSignatureVersionFromProfileId? I believe this function will be shared across lots of files.

Extracted this logical to the proposed function getMutationalSignatureVersionFromProfileId

export function getMutationalSignaturesVersionFromProfileId(inputProfileId:string):string{ return _.last(inputProfileId.split('_')) || ''; }

dippindots · 2023-06-06T04:13:07Z

src/pages/patientView/clinicalInformation/PatientViewPageStore.ts

                        return Promise.resolve(genericAssayRawData);
+                    } else {
+                        return Promise.resolve(genericAssayRawData);


This if seems useless. If not valid, should we return an empty result or something?

I think the function validateMutationalSignatureRawData and the if/else statement are not necessary anymore. We have added the option to upload mutational signature data without p-values. This is needed for some tools that do provide contribution and count data but no p-values.

So now we can return the genericAssayRawData if mutationalSignatureMolecularProfileIds.length > 0 or []

dippindots · 2023-06-06T04:23:30Z

src/pages/patientView/mutationalSignatures/MutationalSignatureBarChart.tsx

+@observer
+class legendLabels extends React.Component {}


Do we need this one?

onursumer · 2023-06-06T18:03:13Z

src/pages/patientView/PatientViewPageUtils.tsx

+        for (const count of inputData) {
+            let mutationalSignatureChartData: IMutationalCounts = {} as IMutationalCounts;
+            mutationalSignatureChartData.patientId = count.patientId;
+            mutationalSignatureChartData.sampleId = count.sampleId;
+            mutationalSignatureChartData.studyId = count.studyId;
+            mutationalSignatureChartData.uniquePatientKey =
+                count.uniquePatientKey;
+            mutationalSignatureChartData.uniqueSampleKey =
+                count.uniqueSampleKey;
+            mutationalSignatureChartData.version = getMutationalSignaturesVersionFromProfileId(
+                count.molecularProfileId
+            );
+            mutationalSignatureChartData.value = parseFloat(count.value);
+            mutationalSignatureChartData.mutationalSignatureLabel =
+                signatureLabelMap
+                    .filter(obj => obj.stableId === count.stableId)
+                    .map(obj => obj.name)[0] || '';
+            result.push(mutationalSignatureChartData);
+        }


I would use map here, something like this:

Suggested change

for (const count of inputData) {

let mutationalSignatureChartData: IMutationalCounts = {} as IMutationalCounts;

mutationalSignatureChartData.patientId = count.patientId;

mutationalSignatureChartData.sampleId = count.sampleId;

mutationalSignatureChartData.studyId = count.studyId;

mutationalSignatureChartData.uniquePatientKey =

count.uniquePatientKey;

mutationalSignatureChartData.uniqueSampleKey =

count.uniqueSampleKey;

mutationalSignatureChartData.version = getMutationalSignaturesVersionFromProfileId(

count.molecularProfileId

);

mutationalSignatureChartData.value = parseFloat(count.value);

mutationalSignatureChartData.mutationalSignatureLabel =

signatureLabelMap

.filter(obj => obj.stableId === count.stableId)

.map(obj => obj.name)[0] || '';

result.push(mutationalSignatureChartData);

}

result = inputData.map(count => ({

patientId: count.patientId,

sampleId: count.sampleId,

studyId: count.studyId,

uniquePatientKey: count.uniquePatientKey,

uniqueSampleKey: uniqueSampleKey,

version: getMutationalSignaturesVersionFromProfileId(

count.molecularProfileId

),

value: parseFloat(count.value),

mutationalSignatureLabel: signatureLabelMap

.filter(obj => obj.stableId === count.stableId)

.map(obj => obj.name)[0] || '',

})

);

Implemented the map function and created the type MutationalSignatureCount so that count is not of type any

onursumer · 2023-06-06T18:12:46Z

src/pages/patientView/clinicalInformation/PatientViewPageStore.ts

@@ -220,6 +229,18 @@ export type PathologyReportPDF = {
    url: string;
 };

+export type confidenceDataMapType = {


Types should be named in title case, not camel case. Also, we probably don't need the Type suffix in the name.

Suggested change

export type confidenceDataMapType = {

export type ConfidenceDataMap = {

Maybe not export this type for now, since it seems like we only use it in this store. If we really want to import this type in other places, maybe better to export this in a utility class or something.

Removed the export

src/pages/patientView/mutationalSignatures/MutationalSignatureBarChart.spec.tsx

src/pages/patientView/mutationalSignatures/MutationalSignatureBarChart.tsx

src/pages/patientView/mutationalSignatures/MutationalSignatureBarChartUtils.ts

src/pages/patientView/mutationalSignatures/SignatureTextBox.tsx

alisman · 2023-06-15T19:13:56Z

src/pages/patientView/mutationalSignatures/SignatureTextBox.tsx

+            <div
+                style={{
+                    maxWidth: 250,
+                    fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',


we should not be changing font or color. ideally not size either. i think there is a tooltip class that applies standard

SignatureTextBox is replaced by the standard React ToolTip element.

alisman · 2023-06-15T19:15:48Z

src/pages/patientView/mutationalSignatures/SignatureTextBox.tsx

+                overlayClassName="oncokb-tooltip"
+                overlay={this.tooltipInfo}
+            >
+                <a href="#"></a>


seems strange.

Removed the SignatureTextBox and made use of the React Tooltip

alisman · 2023-06-15T19:16:38Z

src/shared/lib/GenericAssayUtils/GenericAssayCommonUtils.ts

+    // name format: ENTITY_NAME (CATEGORY)
+    // we can get category between '(' and ')'
+    return name
+        ? name.substring(name.lastIndexOf('(') + 1, name.lastIndexOf(')'))


use RexExp.match for this kind of thing.

Replaced with:

const regExpName = new RegExp('\\(.*?\\)') return name ? regExpName.exec(name)![0]:'No category';

alisman · 2023-06-15T19:19:26Z

src/pages/patientView/mutationalSignatures/MutationalSignaturesContainer.tsx

 }

 @observer
 export default class MutationalSignaturesContainer extends React.Component<
    IMutationalSignaturesContainerProps,
    {}
 > {
+    @observable signatureProfile: string;
+    @observable.ref private plotSvg: SVGElement | null = null;


this is strange, to make a dom element observable.

I followed the PlotsTab.tsx implementation but for the mutational signature plot it should indeed not be an observable (PlotsTab.tsx has multiple types of plots). So I changed it to: private plotSvg: SVGElement | null = null;

alisman · 2023-06-15T19:19:49Z

src/pages/patientView/mutationalSignatures/MutationalSignaturesContainer.tsx

+    @observable.ref private plotSvg: SVGElement | null = null;
+    @observable signatureURL: string;
+    @observable signatureDescription: string;
+    @observable signatureInformationToolTipVisible: boolean = false;


isSignatureInformationToolTipVisible

alisman · 2023-06-15T19:21:23Z

src/pages/patientView/mutationalSignatures/MutationalSignaturesContainer.tsx

+        this.signatureProfile = childData;
+        this.signatureInformationToolTipVisible = visibility;
+        this.signatureURL = this.props.data[this.props.version].filter(obj => {
+            if (childData === obj.meta.name) {


filter method should always return boolean.

replaced wtih return childData === obj.meta.name

alisman · 2023-06-15T19:21:52Z

src/pages/patientView/mutationalSignatures/MutationalSignaturesContainer.tsx

+            if (childData === obj.meta.name) {
+                return obj;
+            }
+        })[0].meta.url;


should handle case where it's not found.

Added the ternary statement that checks whether the output of the filter has a length >0, if yes it will return the meta.description, otherwise No description available.

For the URL, it will return an empty string and in the tooltip we display 'No link to external website available'.

alisman · 2023-06-15T19:22:23Z

src/pages/patientView/mutationalSignatures/MutationalSignaturesContainer.tsx

+            }
+        })[0].meta.url;
+        this.signatureDescription = this.props.data[this.props.version].filter(
+            obj => {


again filter callback should return boolean

replaced wtih return childData === obj.meta.name

alisman · 2023-06-15T19:24:13Z

src/pages/patientView/mutationalSignatures/MutationalSignaturesContainer.tsx

+        );
+    }
+
+    @action.bound changeSignature(name: string): void {


setSignature or use get/set

changeSignature is not needed anymore with the new Tooltip in the mutational table

alisman · 2023-06-15T19:25:10Z

src/pages/patientView/mutationalSignatures/MutationalSignaturesContainer.tsx

+        this.signatureInformationToolTipVisible = false;
+    }
+
+    @action.bound


doesn't really need to be action because it isn't directly mutating state. it's the callback (props.onSampleChange) which probably needs to be action.

alisman · 2023-06-15T19:26:46Z

src/pages/patientView/mutationalSignatures/MutationalSignaturesContainer.tsx

+
+    @autobind
+    private getSvg() {
+        if (document.getElementById('mutationalBarChart')) {


look up React reference https://legacy.reactjs.org/docs/refs-and-the-dom.html to handle dom reference

Created a reference for the dom element and removed the id

alisman · 2023-06-15T19:28:00Z

src/pages/patientView/mutationalSignatures/MutationalSignaturesContainer.tsx

    constructor(props: IMutationalSignaturesContainerProps) {
        super(props);
        makeObservable(this);
    }
+
+    @observable _selectedSignature: string = this.selectURLSignature;


this is kind of odd.

Cleaned this part of the code, _selectedSignature is not needed anymore.

Updated test study for COSMIC version SBS, DBS, and ID (test mutational count values)

alisman · 2023-08-01T16:30:42Z

src/pages/patientView/clinicalInformation/ClinicalInformationMutationalSignatureTable.tsx

 @observer
 export default class ClinicalInformationMutationalSignatureTable extends React.Component<
    IClinicalInformationMutationalSignatureTableProps,
    {}
 > {
+    @observable selectedSignature = '';


empty string is not a good default value. lets fix after merge

TJMKuijpers added the feature label Mar 8, 2023

TJMKuijpers changed the title ~~Feature to show mutational counts under mutational signature tab~~ Feature to visualize mutational counts for mutational signatures Mar 8, 2023

TJMKuijpers force-pushed the mutational-signature-chart branch 2 times, most recently from b7845f1 to 3da7e1d Compare March 9, 2023 14:35

This was referenced Mar 13, 2023

add mutational signature extraction script cBioPortal/datahub-study-curation-tools#48

Closed

Mutational signatures generated for studies (do not merge) cBioPortal/datahub#1784

Closed

TJMKuijpers force-pushed the mutational-signature-chart branch from 3da7e1d to 61719d6 Compare March 14, 2023 08:49

TJMKuijpers marked this pull request as ready for review March 20, 2023 08:51

TJMKuijpers requested a review from dippindots March 20, 2023 08:59

alisman requested review from onursumer and alisman March 27, 2023 14:37

onursumer requested changes Mar 27, 2023

View reviewed changes

TJMKuijpers requested a review from onursumer April 24, 2023 14:22

MatthijsPon mentioned this pull request May 16, 2023

Add published mutational signatures to pancan_pcawg_2020 cBioPortal/datahub#1824

Merged

2 tasks

MatthijsPon self-requested a review May 25, 2023 11:17

MatthijsPon suggested changes May 25, 2023

View reviewed changes

TJMKuijpers force-pushed the mutational-signature-chart branch from 59893d2 to e322ec6 Compare May 30, 2023 13:52

MatthijsPon reviewed May 31, 2023

View reviewed changes

TJMKuijpers force-pushed the mutational-signature-chart branch from e1f1d4b to 23bf5d4 Compare May 31, 2023 07:58

MatthijsPon approved these changes May 31, 2023

View reviewed changes

MatthijsPon requested review from MatthijsPon and removed request for MatthijsPon May 31, 2023 08:34

TJMKuijpers force-pushed the mutational-signature-chart branch 3 times, most recently from 1ab4589 to dbe61fc Compare June 2, 2023 13:43

dippindots reviewed Jun 6, 2023

View reviewed changes

This comment was marked as duplicate.

Sign in to view

onursumer requested changes Jun 6, 2023

View reviewed changes

TJMKuijpers force-pushed the mutational-signature-chart branch 2 times, most recently from 9c6df57 to 320236e Compare June 8, 2023 09:07

alisman reviewed Jun 15, 2023

View reviewed changes

TJMKuijpers force-pushed the mutational-signature-chart branch from fe5921d to 72ad823 Compare June 26, 2023 14:56

TJMKuijpers force-pushed the mutational-signature-chart branch 3 times, most recently from ab8733c to 81009ba Compare July 14, 2023 09:09

TJMKuijpers force-pushed the mutational-signature-chart branch 4 times, most recently from f9418a0 to dfeadd3 Compare July 27, 2023 15:22

TJMKuijpers force-pushed the mutational-signature-chart branch 3 times, most recently from 777b845 to 4e54771 Compare July 31, 2023 14:30

Feature to visualize mutational counts in plot

585f13b

Updated test study for COSMIC version SBS, DBS, and ID (test mutational count values)

TJMKuijpers force-pushed the mutational-signature-chart branch from a4368f9 to 585f13b Compare August 1, 2023 11:15

alisman reviewed Aug 1, 2023

View reviewed changes

alisman merged commit d0285e9 into cBioPortal:master Aug 1, 2023

inodb mentioned this pull request Aug 1, 2023

Follow Up Mutational Signature Feature cBioPortal/cbioportal#10307

Open

5 tasks

inodb added cl-prototype Prototype section in changelog. New features not ready for production use and removed feature labels Aug 8, 2023

	export type confidenceDataMapType = {
	export type ConfidenceDataMap = {

Feature to visualize mutational counts for mutational signatures #4540

Feature to visualize mutational counts for mutational signatures #4540

Conversation

TJMKuijpers commented Mar 8, 2023 • edited Loading

Choose a reason for hiding this comment

MatthijsPon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dippindots left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as duplicate.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alisman Jun 15, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TJMKuijpers commented Mar 8, 2023 •

edited

Loading

alisman Jun 15, 2023 •

edited

Loading