Temporary fix for capitalization of clinical data values in study view (

#5063)
cBioPortal · Dec 18, 2024 · 59d0cf5 · 59d0cf5
1 parent 851a650
commit 59d0cf5
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 4 deletions.
diff --git a/...es/cbioportal-frontend-commons/src/components/ellipsisTextTooltip/EllipsisTextTooltip.tsx b/...es/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
@@ -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
@@ -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
@@ -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>
                     );