SBS labels are now colored coded like the COSMIC plot

cBioPortal · Dec 21, 2023 · d48fa60 · d48fa60
1 parent a39cf47
commit d48fa60
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 13 deletions.
diff --git a/src/pages/patientView/mutationalSignatures/MutationalSignatureBarChart.tsx b/src/pages/patientView/mutationalSignatures/MutationalSignatureBarChart.tsx
@@ -57,6 +57,7 @@ const xMaxOffset: { [version: string]: { offset: number } } = {
     DBS: { offset: 14 },
     ID: { offset: 25 },
 };
+
 @observer
 export default class MutationalBarChart extends React.Component<
     IMutationalBarChartProps,
@@ -410,6 +411,39 @@ export default class MutationalBarChart extends React.Component<
         );
     }
 
+    renderCustomTickLabel = (tickProps: any) => {
+        const { x, y, index, text } = tickProps;
+        const secondLetter = text.charAt(1);
+        const colors: string[] = this.labelObjects.map(item => item.color);
+        const coloredText =
+            this.props.version === 'SBS' &&
+            (secondLetter === 'C' || secondLetter === 'T') ? (
+                <tspan fill={colors[index]}>{secondLetter}</tspan>
+            ) : (
+                <tspan fill="black">{secondLetter}</tspan>
+            );
+
+        return (
+            <text
+                x={x}
+                y={y}
+                dy={0}
+                textAnchor={this.props.version == 'ID' ? 'middle' : 'start'}
+                dominantBaseline="middle"
+                transform={
+                    this.props.version !== 'ID'
+                        ? `rotate(270, ${x}, ${y})`
+                        : `rotate(0, ${x}, ${y})`
+                }
+                style={{ fontSize: 12 }}
+            >
+                {text.charAt(0)}
+                {coloredText}
+                {text.substring(2)}
+            </text>
+        );
+    };
+
     @action sortReferenceSignatures(referenceData: DataToPlot[]) {
         const labelsOrder = getColorsForSignatures(
             this.props.data,
@@ -560,16 +594,18 @@ export default class MutationalBarChart extends React.Component<
                                 tickLabels: {
                                     fontSize: 12,
                                     padding: 40,
-                                    angle: this.props.version == 'ID' ? 0 : 270,
+                                    angle:
+                                        this.props.version === 'ID' ? 0 : 270,
                                     textAnchor:
-                                        this.props.version == 'ID'
+                                        this.props.version === 'ID'
                                             ? 'middle'
                                             : 'start',
                                     verticalAnchor: 'middle',
                                 },
                                 axis: { strokeWidth: 0 },
                                 grid: { stroke: 0 },
                             }}
+                            tickLabelComponent={<this.renderCustomTickLabel />}
                             standalone={false}
                         />
                     </g>
@@ -586,6 +622,8 @@ export default class MutationalBarChart extends React.Component<
                                     style={{
                                         fontSize: 12,
                                         fontColor: 'black',
+                                        whiteSpace: 'normal',
+                                        wordWrap: 'break-word',
                                     }}
                                     cornerRadius={3}
                                     pointerLength={0}
@@ -660,7 +698,7 @@ export default class MutationalBarChart extends React.Component<
                                 labels={this.formatLabelsCosmicStyle}
                                 labelComponent={
                                     <VictoryTooltip
-                                        style={{ fontSize: 8 }}
+                                        style={{ fontSize: 10 }}
                                         cornerRadius={3}
                                         pointerLength={0}
                                         flyoutStyle={{

diff --git a/src/pages/patientView/mutationalSignatures/MutationalSignatureBarChartUtils.ts b/src/pages/patientView/mutationalSignatures/MutationalSignatureBarChartUtils.ts
@@ -61,18 +61,33 @@ export const colorMap: ColorMapProps[] = [
         name: 'C>A',
         alternativeName: '_C-A_',
         category: 'C>A',
-        color: 'lightblue',
+        color: '#5DADE2',
     },
     {
         name: 'C>G',
         alternativeName: '_C-G_',
         category: 'C>G',
-        color: 'darkblue',
+        color: '#154360',
     },
     { name: 'C>T', alternativeName: '_C-T_', category: 'C>T', color: 'red' },
-    { name: 'T>A', alternativeName: '_T-A_', category: 'T>A', color: 'grey' },
-    { name: 'T>C', alternativeName: '_T-C_', category: 'T>C', color: 'green' },
-    { name: 'T>G', alternativeName: '_T-G_', category: 'T>G', color: 'pink' },
+    {
+        name: 'T>A',
+        alternativeName: '_T-A_',
+        category: 'T>A',
+        color: '#99A3A4',
+    },
+    {
+        name: 'T>C',
+        alternativeName: '_T-C_',
+        category: 'T>C',
+        color: '#2ECC71 ',
+    },
+    {
+        name: 'T>G',
+        alternativeName: '_T-G_',
+        category: 'T>G',
+        color: '#F5B7B1',
+    },
     {
         name: 'reference',
         alternativeName: 'reference',
@@ -596,7 +611,8 @@ export function formatTooltipLabelCosmicStyle(
         return labelSplit.length > 1
             ? value +
                   valueLabel +
-                  ' Single nucleotide substitution of ' +
+                  ' SBS of ' +
+                  '\n' +
                   labelSplit[1] +
                   ' around ' +
                   labelSplit.join('')
@@ -606,7 +622,8 @@ export function formatTooltipLabelCosmicStyle(
         return labelSplit.length > 1
             ? value +
                   valueLabel +
-                  'Double nucleotide substitution of ' +
+                  ' DBS of ' +
+                  '\n' +
                   labelSplit[0] +
                   ' to ' +
                   labelSplit[1]
@@ -636,6 +653,7 @@ function formatIndelTooltipLabelsCosmicStyle(
             valueLabel +
             ' ' +
             information[0].category +
+            '\n' +
             ' with microhomology length ' +
             label.split('_')[3]
         );
@@ -645,6 +663,7 @@ function formatIndelTooltipLabelsCosmicStyle(
             valueLabel +
             ' ' +
             information[0].category +
+            '\n' +
             ' with number of repeat units ' +
             label.split('_')[3]
         );
@@ -654,6 +673,7 @@ function formatIndelTooltipLabelsCosmicStyle(
             valueLabel +
             ' ' +
             information[0].category +
+            '\n' +
             ' with number of repeat units ' +
             label.split('_')[3]
         );
@@ -666,7 +686,10 @@ function formatIndelTooltipLabelsCosmicStyle(
             '(' +
             information[0].subcategory +
             ')' +
-            ' with homopolymer length of ' +
+            '\n' +
+            ' with homopolymer length' +
+            '\n' +
+            'of ' +
             label.split('_')[3] +
             ' deletion'
         );
@@ -676,10 +699,13 @@ function formatIndelTooltipLabelsCosmicStyle(
             valueLabel +
             ' ' +
             information[0].category +
-            '(' +
+            ' (' +
             information[0].subcategory +
             ')' +
-            ' with homopolymer length of ' +
+            '\n' +
+            ' with homopolymer length' +
+            '\n' +
+            'of ' +
             label.split('_')[3] +
             ' insertion'
         );