From 59d0cf53886cbe806927f16a0aeb6dcd5f5069bf Mon Sep 17 00:00:00 2001
From: alisman <lisman.aaron@gmail.com>
Date: Thu, 12 Dec 2024 16:08:05 -0500
Subject: [PATCH] Temporary fix for capitalization of clinical data values in
 study view (#5063)

---
 .../EllipsisTextTooltip.tsx                   |  5 ++--
 .../src/lib/StringUtils.ts                    |  9 ++++++
 src/pages/studyView/charts/ChartContainer.tsx |  1 +
 src/pages/studyView/table/ClinicalTable.tsx   | 28 +++++++++++++++++--
 4 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/packages/cbioportal-frontend-commons/src/components/ellipsisTextTooltip/EllipsisTextTooltip.tsx b/packages/cbioportal-frontend-commons/src/components/ellipsisTextTooltip/EllipsisTextTooltip.tsx
index 56f212bcacd..a68ab6e57c7 100644
--- a/packages/cbioportal-frontend-commons/src/components/ellipsisTextTooltip/EllipsisTextTooltip.tsx
+++ b/packages/cbioportal-frontend-commons/src/components/ellipsisTextTooltip/EllipsisTextTooltip.tsx
@@ -4,12 +4,13 @@ import { observer } from 'mobx-react';
 import styles from './EllipsisTextTooltip.module.scss';
 import DefaultTooltip from '../defaultTooltip/DefaultTooltip';
 import $ from 'jquery';
+import classNames from 'classnames';
 import autobind from 'autobind-decorator';
 
 // This is a block component
 @observer
 export default class EllipsisTextTooltip extends React.Component<
-    { text: any; style?: any; hideTooltip?: boolean },
+    { text: any; style?: any; hideTooltip?: boolean; className?: string },
     {}
 > {
     constructor(props: any) {
@@ -44,7 +45,7 @@ export default class EllipsisTextTooltip extends React.Component<
                 onVisibleChange={this.onVisibleChange}
             >
                 <div
-                    className={styles.text}
+                    className={classNames(styles.text, this.props.className)}
                     style={this.props.style}
                     ref={this.setRef}
                 >
diff --git a/packages/cbioportal-frontend-commons/src/lib/StringUtils.ts b/packages/cbioportal-frontend-commons/src/lib/StringUtils.ts
index 7fd6842d70a..d66361dc0d2 100644
--- a/packages/cbioportal-frontend-commons/src/lib/StringUtils.ts
+++ b/packages/cbioportal-frontend-commons/src/lib/StringUtils.ts
@@ -1,3 +1,5 @@
+import _ from 'lodash';
+
 export function longestCommonStartingSubstring(str1: string, str2: string) {
     // from https://github.com/cBioPortal/mutation-mapper/blob/master/src/js/util/cbio-util.js
     let i = 0;
@@ -80,6 +82,13 @@ export function lowerCaseAndCapitalizeString(str: string) {
     }
 }
 
+export function capitalizeFirstLetters(str: string) {
+    return str
+        .split(' ')
+        .map(s => _.capitalize(s))
+        .join(' ');
+}
+
 export function isUrl(str: string) {
     const pattern = /^http[s]?:\/\//;
     return pattern.test(str);
diff --git a/src/pages/studyView/charts/ChartContainer.tsx b/src/pages/studyView/charts/ChartContainer.tsx
index ab3c4ea2c8f..5bf237462f5 100644
--- a/src/pages/studyView/charts/ChartContainer.tsx
+++ b/src/pages/studyView/charts/ChartContainer.tsx
@@ -584,6 +584,7 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
                         labelDescription={this.props.chartMeta.description}
                         patientAttribute={this.props.chartMeta.patientAttribute}
                         showAddRemoveAllButtons={this.mouseInChart}
+                        title={this.props.title}
                     />
                 );
             }
diff --git a/src/pages/studyView/table/ClinicalTable.tsx b/src/pages/studyView/table/ClinicalTable.tsx
index 1bc7342215e..536469830e1 100644
--- a/src/pages/studyView/table/ClinicalTable.tsx
+++ b/src/pages/studyView/table/ClinicalTable.tsx
@@ -15,9 +15,13 @@ import {
     getFixedHeaderTableMaxLengthStringPixel,
 } from '../StudyViewUtils';
 import { SortDirection } from '../../../shared/components/lazyMobXTable/LazyMobXTable';
-import { EllipsisTextTooltip } from 'cbioportal-frontend-commons';
+import {
+    EllipsisTextTooltip,
+    lowerCaseAndCapitalizeString,
+} from 'cbioportal-frontend-commons';
 import { DEFAULT_SORTING_COLUMN } from '../StudyViewConfig';
 import ComparisonVsIcon from 'shared/components/ComparisonVsIcon';
+import { capitalizeFirstLetters } from 'cbioportal-frontend-commons/src';
 
 export interface IClinicalTableProps {
     data: ClinicalDataCountSummary[];
@@ -31,6 +35,7 @@ export interface IClinicalTableProps {
     width?: number;
     height?: number;
     showAddRemoveAllButtons?: boolean;
+    title?: string;
 }
 
 class ClinicalTableComponent extends FixedHeaderTable<
@@ -113,6 +118,23 @@ export default class ClinicalTable extends React.Component<
         return this.props.label ? this.props.label : ColumnKey.CATEGORY;
     }
 
+    // this code should be deleted when we have fixed RFC80 capitalization issues in backedn (12/12/2024)
+    valueFormatters = {
+        'Cancer Type': (str: string) => capitalizeFirstLetters(str),
+        'Cancer Type Detailed': (str: string) => capitalizeFirstLetters(str),
+        'Sample Type Detailed': (str: string) => capitalizeFirstLetters(str),
+    };
+
+    // this code should be deleted when we have fixed RFC80 capitalization issues in backedn (12/12/2024)
+    @computed get valueFormatter() {
+        if (this.props.title && this.props.title in this.valueFormatters) {
+            // @ts-ignore
+            return this.valueFormatters[this.props.title];
+        } else {
+            return (str: string) => str;
+        }
+    }
+
     @computed
     private get columns() {
         return [
@@ -143,7 +165,9 @@ export default class ClinicalTable extends React.Component<
                                 </g>
                             </svg>
                             <EllipsisTextTooltip
-                                text={data.displayedValue || data.value}
+                                text={this.valueFormatter(
+                                    data.displayedValue || data.value
+                                )}
                             ></EllipsisTextTooltip>
                         </div>
                     );