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} >
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 { 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<
);