Add organoid icon and color on Patient View (#4963)

* add organoid icon and color on Patient View * refactor svg icon imports on patient view
cBioPortal · Aug 15, 2024 · 9937567 · 9937567
1 parent 0b828d8
commit 9937567
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 56 deletions.
diff --git a/src/pages/patientView/SVGIcons.tsx b/src/pages/patientView/SVGIcons.tsx
diff --git a/src/pages/patientView/SampleManager.tsx b/src/pages/patientView/SampleManager.tsx
@@ -251,6 +251,11 @@ class SampleManager {
                     .DERIVED_NORMALIZED_CASE_TYPE === 'Xenograft'
             ) {
                 color = styles.sampleColorXenograft;
+            } else if (
+                this.clinicalDataLegacyCleanAndDerived[sample.id]
+                    .DERIVED_NORMALIZED_CASE_TYPE === 'Organoid'
+            ) {
+                color = styles.sampleColorOrganoid;
             } else if (
                 this.clinicalDataLegacyCleanAndDerived[sample.id]
                     .DERIVED_NORMALIZED_CASE_TYPE === 'Plasma'

diff --git a/src/pages/patientView/clinicalInformation/lib/clinicalAttributesStyleConsts.ts b/src/pages/patientView/clinicalInformation/lib/clinicalAttributesStyleConsts.ts
@@ -14,7 +14,7 @@ export const colors = {
     sampleColorRecurrence: 'orange',
     sampleColorMetastasis: 'red',
     sampleColorCfdna: 'blue',
-    sampleColorXenograft: 'pink',
+    sampleColorOrganoid: 'paleVioletRed',
 };
 
 /**

diff --git a/src/pages/patientView/clinicalInformation/lib/clinicalAttributesUtil.js b/src/pages/patientView/clinicalInformation/lib/clinicalAttributesUtil.js
@@ -140,6 +140,8 @@ function derive(clinicalData) {
                     caseTypeLower.indexOf('pdx') >= 0
                 ) {
                     caseTypeNormalized = 'Xenograft';
+                } else if (caseTypeLower.indexOf('organoid') >= 0) {
+                    caseTypeNormalized = 'Organoid';
                 } else if (caseTypeLower.indexOf('cfdna') >= 0) {
                     caseTypeNormalized = 'cfDNA';
                 } else if (caseTypeLower.indexOf('prim') >= 0) {

diff --git a/src/pages/patientView/patientHeader/style/clinicalAttributes.scss b/src/pages/patientView/patientHeader/style/clinicalAttributes.scss
@@ -3,6 +3,7 @@ $sample-color-recurrence: orange;
 $sample-color-metastasis: red;
 $sample-color-cfdna: blue;
 $sample-color-xenograft: pink;
+$sample-color-organoid: paleVioletRed;
 $sample-color-plasma: gold;
 $sample-color-ctdna: lightblue;
 $sample-color-urine: yellow;
@@ -16,6 +17,7 @@ $sample-color-rna: grey;
     sampleColorMetastasis: $sample-color-metastasis;
     sampleColorCfdna: $sample-color-cfdna;
     sampleColorXenograft: $sample-color-xenograft;
+    sampleColorOrganoid: $sample-color-organoid;
     sampleColorPlasma: $sample-color-plasma;
     sampleColorCtdna: $sample-color-ctdna;
     sampleColorUrine: $sample-color-urine;

diff --git a/src/pages/patientView/sampleHeader/SampleSummaryList.tsx b/src/pages/patientView/sampleHeader/SampleSummaryList.tsx
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
 import { ClinicalDataBySampleId } from 'cbioportal-ts-api-client';
 import _ from 'lodash';
 import { getSpanElementsFromCleanData } from '../clinicalInformation/lib/clinicalAttributesUtil';
-import { getMouseIcon } from '../SVGIcons';
 import { getSampleViewUrl } from 'shared/api/urls';
 import SignificantMutationalSignatures from '../patientHeader/SignificantMutationalSignatures';
 import { PatientViewPageStore } from '../clinicalInformation/PatientViewPageStore';
@@ -18,6 +17,9 @@ import { OtherBiomarkersQueryType } from 'oncokb-frontend-commons';
 import { OtherBiomarkerAnnotation } from '../oncokb/OtherBiomarkerAnnotation';
 import { IGenePanelModal } from 'pages/patientView/PatientViewPage';
 
+import mouseIcon from './mouse_icon.svg';
+import organoidIcon from './organoid_icon.svg';
+
 export type ISampleSummaryListProps = {
     sampleManager: SampleManager;
     patientViewPageStore: PatientViewPageStore;
@@ -64,7 +66,9 @@ export default class SampleSummaryList extends React.Component<
         ) : null;
     }
 
-    private isPDX(sample: ClinicalDataBySampleId): boolean {
+    private getDerivedNormalizedCaseType(
+        sample: ClinicalDataBySampleId
+    ): string | undefined {
         return (
             this.props.sampleManager &&
             this.props.sampleManager.clinicalDataLegacyCleanAndDerived &&
@@ -73,10 +77,18 @@ export default class SampleSummaryList extends React.Component<
             ] &&
             this.props.sampleManager.clinicalDataLegacyCleanAndDerived[
                 sample.id
-            ].DERIVED_NORMALIZED_CASE_TYPE === 'Xenograft'
+            ].DERIVED_NORMALIZED_CASE_TYPE
         );
     }
 
+    private isPDX(sample: ClinicalDataBySampleId): boolean {
+        return this.getDerivedNormalizedCaseType(sample) === 'Xenograft';
+    }
+
+    private isOrganoid(sample: ClinicalDataBySampleId): boolean {
+        return this.getDerivedNormalizedCaseType(sample) === 'Organoid';
+    }
+
     public render() {
         let sampleHeader: (JSX.Element | undefined)[] | null = null;
         sampleHeader = _.map(
@@ -89,6 +101,7 @@ export default class SampleSummaryList extends React.Component<
                 }
 
                 const isPDX = this.isPDX(sample);
+                const isOrganoid = this.isOrganoid(sample);
 
                 return (
                     <div className="patientSample">
@@ -99,8 +112,9 @@ export default class SampleSummaryList extends React.Component<
                                 '',
                                 <span style={{ display: 'inline-flex' }}>
                                     {'\u00A0'}
-                                    {isPDX && getMouseIcon()}
-                                    {isPDX && '\u00A0'}
+                                    {isPDX && <img src={mouseIcon} />}
+                                    {isOrganoid && <img src={organoidIcon} />}
+                                    {(isPDX || isOrganoid) && '\u00A0'}
                                     <a
                                         href={getSampleViewUrl(
                                             this.props.patientViewPageStore

diff --git a/src/pages/patientView/sampleHeader/mouse_icon.svg b/src/pages/patientView/sampleHeader/mouse_icon.svg
diff --git a/src/pages/patientView/sampleHeader/organoid_icon.svg b/src/pages/patientView/sampleHeader/organoid_icon.svg
diff --git a/typings/missing.d.ts b/typings/missing.d.ts
@@ -2,6 +2,7 @@
 declare module '*.scss';
 declare module '*.json';
 declare module '*.md';
+declare module '*.svg';
 
 // these packages are missing typings
 declare module 'fmin';