Add color to custom sample type config

cBioPortal · Aug 22, 2023 · 3890eeb · 3890eeb
1 parent 8073a69
commit 3890eeb
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 62 deletions.
diff --git a/src/config/IAppConfig.ts b/src/config/IAppConfig.ts
@@ -166,6 +166,7 @@ export interface IServerConfig {
     skin_comparison_view_mutation_table_columns_show_on_init: string;
     skin_patient_view_copy_number_table_columns_show_on_init: string;
     skin_patient_view_structural_variant_table_columns_show_on_init: string;
+    skin_patient_view_custom_sample_types: string;
     comparison_categorical_na_values: string;
     oncoprint_clinical_tracks_config_json: string;
     oncoprint_clustered_default: boolean; // this has a default

diff --git a/src/config/config.ts b/src/config/config.ts
@@ -102,6 +102,22 @@ export class ServerConfigHelpers {
         return matches ? matches.map((s: string) => s.trim()) : [];
     }
 
+    @memoize static parseCustomSampleTypeColors(str: string | undefined): any {
+        if (!str) {
+            return {};
+        }
+        const customSampleTypeToColor = JSON.parse(str);
+        const customSampleTypes = _.keys(customSampleTypeToColor);
+        const customSampleTypesLower = customSampleTypes.map(t =>
+            t.toLowerCase()
+        );
+        return {
+            customSampleTypes,
+            customSampleTypeToColor,
+            customSampleTypesLower,
+        };
+    }
+
     @memoize static parseConfigFormat(
         str: string | null
     ): CategorizedConfigItems {

diff --git a/src/config/serverConfigDefaults.ts b/src/config/serverConfigDefaults.ts
@@ -216,6 +216,13 @@ export const ServerConfigDefaults: Partial<IServerConfig> = {
 
     skin_patient_view_structural_variant_table_columns_show_on_init: '',
 
+    skin_patient_view_custom_sample_types: JSON.stringify({
+        plasma: 'gold',
+        ctdna: 'lightblue',
+        urine: 'yellow',
+        'biopsy 3': '#00c040ff',
+    }),
+
     studyview_max_samples_selected: 0,
 
     study_download_url: '',

diff --git a/src/pages/patientView/SampleManager.tsx b/src/pages/patientView/SampleManager.tsx
@@ -6,16 +6,13 @@ import {
     ClinicalDataBySampleId,
     ClinicalAttribute,
 } from 'cbioportal-ts-api-client';
-import {
-    cleanAndDerive,
-    CUSTOM_SAMPLE_COLOR_PREFIX,
-    CUSTOM_SAMPLE_TYPE_PREFIX,
-} from './clinicalInformation/lib/clinicalAttributesUtil.js';
+import { cleanAndDerive } 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';
 import { SampleLabelHTML } from 'shared/components/sampleLabel/SampleLabel';
 import { computed, makeObservable } from 'mobx';
+import { getServerConfig, ServerConfigHelpers } from 'config/config';
 
 // sort samples based on event, clinical data and id
 // 1. based on sample collection data (timeline event)
@@ -181,6 +178,7 @@ class SampleManager {
     clinicalDataLegacyCleanAndDerived: { [s: string]: any };
     sampleColors: { [s: string]: string };
     commonClinicalDataLegacyCleanAndDerived: { [s: string]: string };
+    private customSampleTypeToColor: any;
 
     constructor(
         public samples: Array<ClinicalDataBySampleId>,
@@ -198,8 +196,9 @@ class SampleManager {
         // clinical attributes that should be displayed at patient level, since
         // they are the same in all samples
         this.commonClinicalDataLegacyCleanAndDerived = {};
-
-        const sampleToColorScale: any = {};
+        this.customSampleTypeToColor = ServerConfigHelpers.parseCustomSampleTypeColors(
+            getServerConfig().skin_patient_view_custom_sample_types
+        ).customSampleTypeToColor;
 
         samples.forEach((sample, i) => {
             // add legacy clinical data
@@ -243,25 +242,15 @@ class SampleManager {
             ) {
                 color = styles.sampleColorXenograft;
             } else if (
-                this.clinicalDataLegacyCleanAndDerived[
-                    sample.id
-                ].DERIVED_NORMALIZED_CASE_TYPE.includes(
-                    CUSTOM_SAMPLE_TYPE_PREFIX
-                )
+                this.customSampleTypeToColor[
+                    this.clinicalDataLegacyCleanAndDerived[sample.id]
+                        .DERIVED_NORMALIZED_CASE_TYPE
+                ]
             ) {
-                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];
-                }
+                color = this.customSampleTypeToColor[
+                    this.clinicalDataLegacyCleanAndDerived[sample.id]
+                        .DERIVED_NORMALIZED_CASE_TYPE
+                ];
             }
 
             this.sampleColors[sample.id] = color;

diff --git a/src/pages/patientView/clinicalInformation/lib/clinicalAttributesUtil.js b/src/pages/patientView/clinicalInformation/lib/clinicalAttributesUtil.js
@@ -2,9 +2,7 @@ import * as $ from 'jquery';
 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';
+import { getServerConfig, ServerConfigHelpers } from 'config/config';
 
 /**
  * Functions for dealing with clinical attributes.
@@ -98,6 +96,13 @@ function getFirstKeyFound(object, keys) {
  * @param {object} clinicalData - key/value pairs of clinical data
  */
 function derive(clinicalData) {
+    const {
+        customSampleTypes,
+        customSampleTypesLower,
+    } = ServerConfigHelpers.parseCustomSampleTypeColors(
+        getServerConfig().skin_patient_view_custom_sample_types
+    );
+
     const derivedClinicalAttributes = $.extend({}, clinicalData);
 
     /**
@@ -114,16 +119,6 @@ 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]];
 
@@ -146,12 +141,12 @@ function derive(clinicalData) {
                 } else if (caseTypeLower.indexOf('prim') >= 0) {
                     caseTypeNormalized = 'Primary';
                 } else {
-                    const foundCustom = customSampleTypes.find(custom =>
-                        caseTypeLower.includes(custom)
+                    const foundCustomIndex = customSampleTypesLower.findIndex(
+                        type => caseTypeLower.indexOf(type) >= 0
                     );
-                    if (foundCustom) {
+                    if (foundCustomIndex !== undefined) {
                         caseTypeNormalized =
-                            CUSTOM_SAMPLE_TYPE_PREFIX + foundCustom;
+                            customSampleTypes[foundCustomIndex];
                     }
                 }
                 if (

diff --git a/src/pages/patientView/patientHeader/style/clinicalAttributes.scss b/src/pages/patientView/patientHeader/style/clinicalAttributes.scss
@@ -4,33 +4,13 @@ $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 {