Introduce color scale in patient view for custom sample types

cBioPortal · Aug 21, 2023 · 8073a69 · 8073a69
1 parent 378093e
commit 8073a69
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 1 deletion.
diff --git a/src/pages/patientView/SampleManager.tsx b/src/pages/patientView/SampleManager.tsx
@@ -6,7 +6,11 @@ import {
     ClinicalDataBySampleId,
     ClinicalAttribute,
 } from 'cbioportal-ts-api-client';
-import { cleanAndDerive } from './clinicalInformation/lib/clinicalAttributesUtil.js';
+import {
+    cleanAndDerive,
+    CUSTOM_SAMPLE_COLOR_PREFIX,
+    CUSTOM_SAMPLE_TYPE_PREFIX,
+} from './clinicalInformation/lib/clinicalAttributesUtil.js';
 import styles from './patientHeader/style/clinicalAttributes.scss';
 import naturalSort from 'javascript-natural-sort';
 import { ClinicalEvent, ClinicalEventData } from 'cbioportal-ts-api-client';
@@ -195,6 +199,8 @@ class SampleManager {
         // they are the same in all samples
         this.commonClinicalDataLegacyCleanAndDerived = {};
 
+        const sampleToColorScale: any = {};
+
         samples.forEach((sample, i) => {
             // add legacy clinical data
             this.clinicalDataLegacyCleanAndDerived[sample.id] = cleanAndDerive(
@@ -236,6 +242,26 @@ class SampleManager {
                     .DERIVED_NORMALIZED_CASE_TYPE === 'Xenograft'
             ) {
                 color = styles.sampleColorXenograft;
+            } else if (
+                this.clinicalDataLegacyCleanAndDerived[
+                    sample.id
+                ].DERIVED_NORMALIZED_CASE_TYPE.includes(
+                    CUSTOM_SAMPLE_TYPE_PREFIX
+                )
+            ) {
+                const customType = this.clinicalDataLegacyCleanAndDerived[
+                    sample.id
+                ].DERIVED_NORMALIZED_CASE_TYPE;
+                if (sampleToColorScale[customType]) {
+                    color = styles[sampleToColorScale[customType]];
+                } else {
+                    const currentColorNumber = Object.keys(sampleToColorScale)
+                        .length;
+                    const nextSampleColor =
+                        CUSTOM_SAMPLE_COLOR_PREFIX + (currentColorNumber + 1);
+                    sampleToColorScale[customType] = nextSampleColor;
+                    color = styles[nextSampleColor];
+                }
             }
 
             this.sampleColors[sample.id] = color;

diff --git a/src/pages/patientView/clinicalInformation/lib/clinicalAttributesUtil.js b/src/pages/patientView/clinicalInformation/lib/clinicalAttributesUtil.js
@@ -3,6 +3,9 @@ import _ from 'underscore';
 import * as React from 'react';
 import * as styleConsts from './clinicalAttributesStyleConsts.ts';
 
+export const CUSTOM_SAMPLE_TYPE_PREFIX = 'custom_sample_type_';
+export const CUSTOM_SAMPLE_COLOR_PREFIX = 'sampleColorScale';
+
 /**
  * Functions for dealing with clinical attributes.
  */
@@ -111,6 +114,16 @@ function derive(clinicalData) {
         let caseTypeLower;
         let i;
 
+        // TODO: get types from server property:
+        //  const customSampleTypes = getServerConfig().custom_sample_types;
+        const customSampleTypes = [
+            'plasma',
+            'ctdna',
+            'cfdna',
+            'urine',
+            'biopsy 3',
+        ];
+
         for (i = 0; i < caseTypeAttrs.length; i += 1) {
             caseType = cData[caseTypeAttrs[i]];
 
@@ -132,6 +145,14 @@ function derive(clinicalData) {
                     caseTypeNormalized = 'cfDNA';
                 } else if (caseTypeLower.indexOf('prim') >= 0) {
                     caseTypeNormalized = 'Primary';
+                } else {
+                    const foundCustom = customSampleTypes.find(custom =>
+                        caseTypeLower.includes(custom)
+                    );
+                    if (foundCustom) {
+                        caseTypeNormalized =
+                            CUSTOM_SAMPLE_TYPE_PREFIX + foundCustom;
+                    }
                 }
                 if (
                     caseTypeNormalized !== null &&

diff --git a/src/pages/patientView/patientHeader/style/clinicalAttributes.scss b/src/pages/patientView/patientHeader/style/clinicalAttributes.scss
@@ -4,13 +4,33 @@ $sample-color-metastasis: red;
 $sample-color-cfdna: blue;
 $sample-color-xenograft: pink;
 
+$sample-color-scale-1: #e0e005;
+$sample-color-scale-2: #b9ee0a;
+$sample-color-scale-3: #80f010ff;
+$sample-color-scale-4: #00e020ff;
+$sample-color-scale-5: #00c040ff;
+$sample-color-scale-6: #00a060ff;
+$sample-color-scale-7: #008080ff;
+$sample-color-scale-8: #0060a0ff;
+$sample-color-scale-9: #0040c0ff;
+
 /* shared style and JS code variables */
 :export {
     sampleColorPrimary: $sample-color-primary;
     sampleColorRecurrence: $sample-color-recurrence;
     sampleColorMetastasis: $sample-color-metastasis;
     sampleColorCfdna: $sample-color-cfdna;
     sampleColorXenograft: $sample-color-xenograft;
+
+    sampleColorScale1: $sample-color-scale-1;
+    sampleColorScale2: $sample-color-scale-2;
+    sampleColorScale3: $sample-color-scale-3;
+    sampleColorScale4: $sample-color-scale-4;
+    sampleColorScale5: $sample-color-scale-5;
+    sampleColorScale6: $sample-color-scale-6;
+    sampleColorScale7: $sample-color-scale-7;
+    sampleColorScale8: $sample-color-scale-8;
+    sampleColorScale9: $sample-color-scale-9;
 }
 
 .clinical-spans {