Mutational Signature Improvements (#4916)

Fix Mutational Signature range slider. Improve layout --------- Co-authored-by: TJMKuijpers <[email protected]>
cBioPortal · Jun 26, 2024 · 3aedd72 · 3aedd72
1 parent 94ccb95
commit 3aedd72
Show file tree

Hide file tree

Showing 16 changed files with 569 additions and 309 deletions.
diff --git a/...creenshots/reference/show_mutational_bar_chart_dbs_element_chrome_1600x1000.png b/...creenshots/reference/show_mutational_bar_chart_dbs_element_chrome_1600x1000.png
diff --git a/...screenshots/reference/show_mutational_bar_chart_id_element_chrome_1600x1000.png b/...screenshots/reference/show_mutational_bar_chart_id_element_chrome_1600x1000.png
diff --git a/...creenshots/reference/show_mutational_bar_chart_sbs_element_chrome_1600x1000.png b/...creenshots/reference/show_mutational_bar_chart_sbs_element_chrome_1600x1000.png
diff --git a/...able_for_patient_who_has_significant_id_signatures_element_chrome_1600x1000.png b/...able_for_patient_who_has_significant_id_signatures_element_chrome_1600x1000.png
diff --git a/...ble_for_patient_who_has_significant_sbs_signatures_element_chrome_1600x1000.png b/...ble_for_patient_who_has_significant_sbs_signatures_element_chrome_1600x1000.png
diff --git a/...rence/show_the_bar_chart_with_percentage_on_y_axis_element_chrome_1600x1000.png b/...rence/show_the_bar_chart_with_percentage_on_y_axis_element_chrome_1600x1000.png
diff --git a/...tip_for_patient_who_has_significant_dbs_signatures_element_chrome_1600x1000.png b/...tip_for_patient_who_has_significant_dbs_signatures_element_chrome_1600x1000.png
diff --git a/...ltip_for_patient_who_has_significant_id_signatures_element_chrome_1600x1000.png b/...ltip_for_patient_who_has_significant_id_signatures_element_chrome_1600x1000.png
diff --git a/...tip_for_patient_who_has_significant_sbs_signatures_element_chrome_1600x1000.png b/...tip_for_patient_who_has_significant_sbs_signatures_element_chrome_1600x1000.png
diff --git a/...tch_between_samples_to_update_mutational_bar_chart_element_chrome_1600x1000.png b/...tch_between_samples_to_update_mutational_bar_chart_element_chrome_1600x1000.png
diff --git a/src/pages/patientView/PatientViewPageTabs.tsx b/src/pages/patientView/PatientViewPageTabs.tsx
@@ -84,14 +84,15 @@ export function patientViewTabs(
                 <HelpWidget path={urlWrapper.routing.location.pathname} />
             }
         >
-            {tabs(pageInstance, sampleManager)}
+            {tabs(pageInstance, sampleManager, urlWrapper)}
         </MSKTabs>
     );
 }
 
 export function tabs(
     pageComponent: PatientViewPageInner,
-    sampleManager: SampleManager | null
+    sampleManager: SampleManager | null,
+    urlWrapper: PatientViewUrlWrapper
 ) {
     const tabs: JSX.Element[] = [];
     tabs.push(
@@ -644,61 +645,58 @@ export function tabs(
             </MSKTab>
         );
 
-    pageComponent.patientViewPageStore.hasMutationalSignatureData.result &&
-        pageComponent.patientViewPageStore.initialMutationalSignatureVersion
-            .isComplete &&
-        tabs.push(
-            <MSKTab
-                key={8}
-                id="mutationalSignatures"
-                linkText="Mutational Signatures"
-                hide={
+    tabs.push(
+        <MSKTab
+            key={8}
+            id="mutationalSignatures"
+            linkText="Mutational Signatures"
+            hide={
+                pageComponent.patientViewPageStore
+                    .mutationalSignatureMolecularProfiles.isPending ||
+                pageComponent.patientViewPageStore
+                    .initialMutationalSignatureVersion.isPending ||
+                _.isEmpty(
                     pageComponent.patientViewPageStore
-                        .mutationalSignatureMolecularProfiles.isPending ||
+                        .mutationalSignatureDataGroupByVersion.result
+                )
+            }
+        >
+            <MutationalSignaturesContainer
+                data={
                     pageComponent.patientViewPageStore
-                        .initialMutationalSignatureVersion.isPending ||
-                    _.isEmpty(
-                        pageComponent.patientViewPageStore
-                            .mutationalSignatureDataGroupByVersion.result
-                    )
+                        .mutationalSignatureDataGroupByVersion.result
                 }
-            >
-                <MutationalSignaturesContainer
-                    data={
-                        pageComponent.patientViewPageStore
-                            .mutationalSignatureDataGroupByVersion.result
-                    }
-                    profiles={
-                        pageComponent.patientViewPageStore
-                            .mutationalSignatureMolecularProfiles.result
-                    }
-                    onVersionChange={
-                        pageComponent.onMutationalSignatureVersionChange
-                    }
-                    version={
-                        pageComponent.patientViewPageStore
-                            .selectedMutationalSignatureVersion
-                    }
-                    dataCount={
-                        pageComponent.patientViewPageStore
-                            .mutationalSignatureCountDataGroupedByVersion.result
-                    }
-                    sample={
-                        pageComponent.patientViewPageStore
-                            .selectedSampleMutationalSignatureData
-                    }
-                    samples={
-                        pageComponent.patientViewPageStore
-                            .samplesWithCountDataAvailable
-                    }
-                    samplesNotProfiled={
-                        pageComponent.patientViewPageStore
-                            .samplesNotProfiledForMutationalSignatures
-                    }
-                    onSampleChange={pageComponent.onSampleIdChange}
-                />
-            </MSKTab>
-        );
+                profiles={
+                    pageComponent.patientViewPageStore
+                        .mutationalSignatureMolecularProfiles.result
+                }
+                onVersionChange={
+                    pageComponent.onMutationalSignatureVersionChange
+                }
+                version={
+                    pageComponent.patientViewPageStore
+                        .selectedMutationalSignatureVersion
+                }
+                dataCount={
+                    pageComponent.patientViewPageStore
+                        .mutationalSignatureCountDataGroupedByVersion.result
+                }
+                sample={
+                    pageComponent.patientViewPageStore
+                        .selectedSampleMutationalSignatureData
+                }
+                samples={
+                    pageComponent.patientViewPageStore
+                        .samplesWithCountDataAvailable
+                }
+                samplesNotProfiled={
+                    pageComponent.patientViewPageStore
+                        .samplesNotProfiledForMutationalSignatures
+                }
+                onSampleChange={pageComponent.onSampleIdChange}
+            />
+        </MSKTab>
+    );
 
     pageComponent.resourceTabs.component &&
         /* @ts-ignore */

diff --git a/src/pages/patientView/mutationalSignatures/MutationalSignatureBarChart.spec.tsx b/src/pages/patientView/mutationalSignatures/MutationalSignatureBarChart.spec.tsx
@@ -19,6 +19,7 @@ const sampleMutationalSignatureDataWithoutClass = [
         mutationalSignatureClass: '',
         version: 'v2',
         value: 15,
+        percentage: 90,
     },
     {
         uniqueSampleKey: 's09e3B34',
@@ -30,6 +31,7 @@ const sampleMutationalSignatureDataWithoutClass = [
         mutationalSignatureClass: '',
         version: 'v2',
         value: 12,
+        percentage: 90,
     },
     {
         uniqueSampleKey: 's09e3B34',
@@ -41,6 +43,7 @@ const sampleMutationalSignatureDataWithoutClass = [
         mutationalSignatureClass: '',
         version: 'v2',
         value: 20,
+        percentage: 90,
     },
 ];
 
@@ -55,6 +58,7 @@ const sampleMutationalSignatureData: IMutationalCounts[] = [
         mutationalSignatureClass: 'C>T',
         version: 'v2',
         value: 15,
+        percentage: 90,
     },
     {
         uniqueSampleKey: 's09e3B34',
@@ -66,6 +70,7 @@ const sampleMutationalSignatureData: IMutationalCounts[] = [
         mutationalSignatureClass: 'C>T',
         version: 'v2',
         value: 12,
+        percentage: 90,
     },
     {
         uniqueSampleKey: 's09e3B34',
@@ -77,6 +82,7 @@ const sampleMutationalSignatureData: IMutationalCounts[] = [
         mutationalSignatureClass: 'T>A',
         version: 'v2',
         value: 20,
+        percentage: 90,
     },
 ];
 
@@ -94,6 +100,7 @@ describe('MutationalSignatureBarChart', () => {
                 mutationalSignatureClass: 'C>T',
                 version: 'v2',
                 value: 15,
+                percentage: 90,
                 colorValue: 'red',
                 label: 'A[C>T]G',
                 subcategory: ' ',
@@ -110,6 +117,7 @@ describe('MutationalSignatureBarChart', () => {
                 mutationalSignatureClass: 'C>T',
                 version: 'v2',
                 value: 12,
+                percentage: 90,
                 colorValue: 'red',
                 label: 'A[C>T]G',
                 subcategory: ' ',
@@ -127,6 +135,7 @@ describe('MutationalSignatureBarChart', () => {
                 mutationalSignatureClass: 'T>A',
                 version: 'v2',
                 value: 20,
+                percentage: 90,
                 colorValue: '#99A3A4',
                 subcategory: ' ',
                 sublabel: ' ',
@@ -150,6 +159,7 @@ describe('MutationalSignatureBarChart', () => {
                 mutationalSignatureLabel: 'A[C>T]G',
                 version: 'v2',
                 value: 15,
+                percentage: 90,
                 colorValue: 'red',
                 label: 'A[C>T]G',
                 subcategory: ' ',
@@ -166,6 +176,7 @@ describe('MutationalSignatureBarChart', () => {
                 mutationalSignatureLabel: 'A[C>T]G',
                 version: 'v2',
                 value: 12,
+                percentage: 90,
                 colorValue: 'red',
                 label: 'A[C>T]G',
                 subcategory: ' ',
@@ -183,6 +194,7 @@ describe('MutationalSignatureBarChart', () => {
                 mutationalSignatureLabel: 'A[C>T]G',
                 version: 'v2',
                 value: 20,
+                percentage: 90,
                 colorValue: 'red',
                 label: 'A[C>T]G',
                 subcategory: ' ',