add organoid icon

cBioPortal · Aug 14, 2024 · b86cf00 · b86cf00
1 parent 0b828d8
commit b86cf00
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 4 deletions.
diff --git a/src/pages/patientView/SVGIcons.tsx b/src/pages/patientView/SVGIcons.tsx
@@ -48,3 +48,77 @@ export function getMouseIcon(): JSX.Element {
         </svg>
     );
 }
+
+export function getOrganoidIcon(): JSX.Element {
+    return (
+        <svg
+            id="Organoid_1"
+            data-name="Organoid 1"
+            xmlns="http://www.w3.org/2000/svg"
+            version="1.1"
+            viewBox="0 0 512 512"
+            width="15px"
+            height="15px"
+        >
+            <defs>
+                <style>
+                    {`
+        .cls-1 {
+            fill: #000;
+        }
+
+        .cls-1, .cls-2, .cls-3 {
+            stroke-width: 0px;
+        }
+
+        .cls-2 {
+            fill: #ff9ba6;
+        }
+
+        .cls-3 {
+            fill: #ffb3b7;
+        }
+        `}
+                </style>
+            </defs>
+            <g>
+                <g>
+                    <path
+                        className="cls-2"
+                        d="M389.5,60.7c6.7-8.7,19.5-10.7,28.4-4.3,0,0,.3.1.4.2,9.1,6.4,11,18.6,4.4,27.3l-16.6,22.4-33.1-23.3,16.5-22.4h.1Z"
+                    />
+                    <path
+                        className="cls-2"
+                        d="M144.9,60.7c-6.7-8.7-19.5-10.7-28.4-4.3,0,0-.3.1-.4.2-9.1,6.4-11,18.6-4.4,27.3l16.6,22.4,33.1-23.3-16.5-22.4h-.1Z"
+                    />
+                    <path
+                        className="cls-2"
+                        d="M246.5,455.9v27.5c0,10.6,8.8,19.6,19.8,19.6h1.3c11,0,19.8-9,19.8-19.6v-27.5h-41.1.1Z"
+                    />
+                    <path
+                        className="cls-2"
+                        d="M61.4,299.6l-25.2,7.9c-10.6,3.3-16.5,14.4-13.2,24.6v.4c3.5,10.2,15,15.9,25.7,12.6l25.3-7.9-12.8-37.6h.1Z"
+                    />
+                    <path
+                        className="cls-2"
+                        d="M472.7,299.6l25.2,7.9c10.6,3.3,16.5,14.4,13.2,24.6v.4c-3.5,10.2-15,15.9-25.7,12.6l-25.3-7.9,12.8-37.6h-.1Z"
+                    />
+                </g>
+                <path
+                    className="cls-3"
+                    d="M497.9,204.6c10.6-3.3,16.5-14.4,13.1-24.6v-.4c-3.6-10.2-15-15.9-25.7-12.6h0c-11.6,3.7-24.1-1.4-29.9-11.6-30.5-52.5-83.7-90.9-146.9-102.8-12-2.2-20.7-12.1-20.7-23.9v-.4c0-10.6-8.8-19.1-19.8-19.1h-1.3c-11,0-19.8,8.6-19.8,19.1v.4c0,11.7-8.8,21.6-20.7,23.9-63.1,11.8-116.5,50.4-146.9,102.8-6,10.2-18.4,15.3-29.9,11.7h0c-10.6-3.3-22.1,2.2-25.6,12.6v.4c-3.6,10.2,2.3,21.3,12.9,24.6,11.6,3.7,18.7,14.8,17.1,26.5-1,8.1-1.7,16.5-1.7,25,0,54.4,22,103.9,57.8,140.9,8.3,8.6,9.5,21.6,2.3,31.2h0c-6.5,8.9-4.6,21.1,4.5,27.5l.4.2c9.1,6.4,21.9,4.4,28.4-4.3h0c7.2-9.6,20.5-12.6,31.5-7.6,27.5,12.4,58.2,19.5,90.6,19.5s63.1-7,90.6-19.5c11.1-5,24.3-2.1,31.5,7.5h0c6.7,8.9,19.5,10.7,28.5,4.3h.1c9.1-6.5,11.1-18.7,4.5-27.5h0c-7.2-9.6-6-22.7,2.3-31.3,35.8-36.9,57.8-86.5,57.8-140.9s-.5-16.7-1.7-25c-1.5-11.7,5.5-22.9,17.1-26.5h-.4ZM441.5,256c0,92.7-78.1,167.9-174.4,167.9s-174.4-75.1-174.4-167.9,78.1-167.9,174.4-167.9,174.4,75.1,174.4,167.9h0Z"
+                />
+            </g>
+            <g>
+                <path
+                    className="cls-1"
+                    d="M490,298.7l-12.4-3.9c2.4-12.7,3.7-25.6,3.7-38.8s-.5-17.4-1.7-26.1c-1-7.5,3.3-14.3,10.6-16.5,15.6-4.9,24.3-21.2,19.2-36.2v-.4c-2.6-7.3-7.8-13.3-15-16.7-7.2-3.4-15.2-4.1-22.9-1.7-7.2,2.2-14.8-.7-18.7-7.4-11.1-19.2-25.1-36.5-41.2-51.4l7.7-10.2c9.7-12.8,6.8-30.9-6.5-40.3l-.4-.2c-6.4-4.6-14.3-6.4-22.3-5.2-7.9,1.2-15,5.3-19.6,11.6l-7.7,10.2c-19.7-10.2-41.1-17.6-63.6-21.9-7.7-1.5-13.1-7.5-13.1-14.8v-.4c0-15.6-13.2-28.3-29.4-28.3h-1.4c-16.3,0-29.4,12.8-29.4,28.3v.4c0,7.3-5.4,13.3-13.1,14.8-22.4,4.2-43.8,11.6-63.5,21.9l-7.7-10.2c-4.7-6.3-11.6-10.3-19.6-11.6s-15.9.6-22.3,5.2l-.4.2c-13.3,9.4-16.1,27.3-6.5,40.3l7.8,10.3c-2.4,2.2-4.9,4.6-7.2,6.9-3.7,3.7-3.6,9.5.3,13.1,3.8,3.6,9.9,3.4,13.6-.2,29.7-29.8,67.4-49.8,109.2-57.6,16.5-3.1,28.5-17,28.5-32.9v-.4c0-5.4,4.6-9.9,10.2-9.9h1.3c5.6,0,10.2,4.4,10.2,9.9v.4c0,16,12,29.8,28.5,32.9,59.5,11.2,110.6,46.9,140.4,98.2,8.2,14.2,25.6,20.8,41.5,15.9,2.7-.9,5.6-.6,8.2.6s4.5,3.3,5.4,6v.4c1.9,5.4-1.2,11.2-6.8,13.1-15.9,4.9-25.9,20.3-23.7,36.5,1,8,1.5,16,1.5,23.8,0,50-19.6,97.8-55.3,134.6-11.5,11.9-12.8,29.9-3.1,42.9h0c3.5,4.7,2.4,11.1-2.4,14.5h-.1c-2.3,1.7-5.2,2.5-8.1,2-2.8-.5-5.4-1.8-7-4.1h0c-9.7-12.9-28-17.4-43.4-10.5-27.4,12.3-56.4,18.6-86.5,18.6s-59.1-6.3-86.5-18.6c-15.4-6.9-33.7-2.6-43.5,10.5-1.7,2.2-4.2,3.7-7,4.1s-5.6-.2-7.9-1.8l-.4-.2c-4.7-3.3-5.8-9.9-2.3-14.4h0c9.7-13.1,8.4-31.2-3.1-43-35.7-36.8-55.3-84.6-55.3-134.6s.5-15.9,1.5-23.8c2-16.1-7.8-31.5-23.7-36.5-5.6-1.7-8.7-7.6-6.9-12.9v-.4c1-2.6,2.9-4.8,5.5-6s5.5-1.5,8.3-.6c15.7,4.9,33.1-1.7,41.3-15.9,2.4-4.2,5-8.3,7.7-12.2,2.9-4.3,1.7-10-2.8-12.8-4.5-2.8-10.4-1.6-13.3,2.7s-5.8,8.9-8.4,13.3c-3.8,6.5-11.5,9.6-18.8,7.4-7.6-2.3-15.7-1.7-22.8,1.7-7.2,3.4-12.4,9.5-14.8,16.7v.4c-5.2,15,3.5,31.3,19.1,36.2,7.2,2.2,11.5,9.1,10.6,16.5-1.2,8.7-1.7,17.5-1.7,26.1,0,13.1,1.3,26.1,3.7,38.8l-12.4,3.9c-15.7,4.9-24.3,21.2-19.3,36.2v.4c2.6,7.3,7.8,13.2,15,16.7,4.4,2.1,9,3.2,13.7,3.2s6.3-.5,9.3-1.5l12.5-3.9c9.7,19.3,22.5,37.3,38,53.3,5.4,5.5,6,13.5,1.5,19.5h0c-9.7,12.9-6.8,31,6.5,40.3l.4.2c6.4,4.6,14.3,6.4,22.3,5.2s14.8-5.3,19.6-11.6c4.5-5.9,12.5-7.8,19.7-4.6,20.7,9.4,42.4,15.5,64.5,18.3v12.7c0,15.8,13.2,28.7,29.4,28.8h1.5c16.3,0,29.4-12.9,29.4-28.8v-12.7c22.3-3,43.9-9,64.5-18.3,7.2-3.2,15.2-1.4,19.7,4.4h0c4.7,6.3,11.6,10.3,19.6,11.6,7.9,1.2,15.9-.6,22.4-5.2h.1c13.3-9.5,16.3-27.6,6.5-40.4h0c-4.5-5.9-3.8-13.9,1.5-19.5,15.6-16.1,28.3-34.1,38-53.3l12.5,3.9c3.1,1,6.1,1.5,9.3,1.5,4.7,0,9.3-1.1,13.7-3.2,7.2-3.4,12.4-9.5,14.8-16.9v-.2c5.1-15-3.5-31.4-19.2-36.2h.1ZM108.7,78.5c-3.5-4.7-2.4-11.1,2.3-14.4l.3-.2c2.3-1.6,5.1-2.2,7.9-1.8,2.8.5,5.4,2,7,4.2l6.7,8.9c-6,3.8-11.9,8-17.7,12.4l-6.7-8.9h.1ZM386.1,66.2c1.7-2.2,4.2-3.7,7-4.2,2.8-.4,5.6.2,7.9,1.8l.3.2c4.7,3.3,5.8,9.9,2.3,14.4l-6.7,8.9c-5.6-4.4-11.5-8.5-17.7-12.3l6.7-8.9h.1ZM35.1,336.3c-2.8.9-5.6.6-8.3-.6-2.6-1.2-4.5-3.3-5.2-5.9v-.4c-1.9-5.4,1.2-11.2,6.8-13.1l10.7-3.3c1.9,6.8,4.2,13.4,6.8,20l-10.9,3.4h.1ZM267.1,483.3c0,5.7-4.6,10.3-10.2,10.3h-1.3c-5.6,0-10.2-4.7-10.2-10.3v-11c3.6.1,7.3.2,10.9.2s7.3,0,10.9-.2v11ZM491.1,329.4v.4c-1,2.6-2.8,4.7-5.4,5.9s-5.5,1.5-8.3.6l-10.9-3.4c2.6-6.5,4.9-13.2,6.8-20l10.7,3.3c5.6,1.7,8.8,7.6,6.9,13.1h.1Z"
+                />
+                <path
+                    className="cls-1"
+                    d="M256.2,59.3c-5.2,0-9.6,4.2-9.6,9.2v10.7c-74,3.7-136.7,49.6-162.1,113.3l-10.4-3.2c-5-1.6-10.5,1.1-12,5.9s1.2,10.1,6.1,11.6l10.4,3.2c-4.1,14.7-6.3,30-6.3,46.1,0,55.4,26.6,105,68.3,137.6l-6.7,8.7c-3.1,4.2-2.2,9.9,2.2,12.9,1.7,1.2,3.7,1.7,5.6,1.7,2.9,0,5.9-1.4,7.8-3.8l6.7-8.7c28.8,18.1,63.2,28.6,100.2,28.6s70.8-10.2,100.2-28.6l6.7,8.7c1.9,2.5,4.9,3.8,7.8,3.8s4-.6,5.6-1.7c4.4-3,5.2-8.7,2.2-12.9l-6.7-8.7c13.9-10.8,26.4-23.8,36.6-38.4,2.9-4.2,1.8-10-2.6-12.8-4.4-2.8-10.4-1.7-13.3,2.5-30.8,43.7-81.8,69.8-136.5,69.8-90.9,0-164.8-71.2-164.8-158.6s74-158.6,164.8-158.6,164.8,71.2,164.8,158.6-3.8,39.7-11.5,58.3c-1.9,4.8.5,10.1,5.4,11.9,5,1.8,10.5-.5,12.4-5.2,8.6-20.7,12.8-42.6,12.8-65s-2.2-31.3-6.3-46.1l10.4-3.2c5-1.6,7.8-6.8,6.1-11.6-1.7-4.8-7-7.5-12-5.9l-10.4,3.2c-25.5-63.5-88-109.6-162.1-113.3v-10.7c0-5-4.4-9.2-9.6-9.2h-.3Z"
+                />
+            </g>
+        </svg>
+    );
+}
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,7 @@ 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 { getMouseIcon, getOrganoidIcon } from '../SVGIcons';
 import { getSampleViewUrl } from 'shared/api/urls';
 import SignificantMutationalSignatures from '../patientHeader/SignificantMutationalSignatures';
 import { PatientViewPageStore } from '../clinicalInformation/PatientViewPageStore';
@@ -64,7 +64,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 +75,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 +99,7 @@ export default class SampleSummaryList extends React.Component<
                 }
 
                 const isPDX = this.isPDX(sample);
+                const isOrganoid = this.isOrganoid(sample);
 
                 return (
                     <div className="patientSample">
@@ -101,6 +112,8 @@ export default class SampleSummaryList extends React.Component<
                                     {'\u00A0'}
                                     {isPDX && getMouseIcon()}
                                     {isPDX && '\u00A0'}
+                                    {isOrganoid && getOrganoidIcon()}
+                                    {isOrganoid && '\u00A0'}
                                     <a
                                         href={getSampleViewUrl(
                                             this.props.patientViewPageStore