Merge pull request #4539 from aditygrg2/new

Right Aligned numbers in study view
cBioPortal · Mar 8, 2023 · bcd344b · bcd344b
2 parents 5e8d6a1 + 7dc71ee
commit bcd344b
Show file tree

Hide file tree

Showing 21 changed files with 19 additions and 12 deletions.
diff --git a/.../breadcrumbs_are_editable_for_mutation_count_chart_element_chrome_1600x1000.png b/.../breadcrumbs_are_editable_for_mutation_count_chart_element_chrome_1600x1000.png
diff --git a/.../cancer_gene_filter_should_remove_non_cancer_genes_element_chrome_1600x1000.png b/.../cancer_gene_filter_should_remove_non_cancer_genes_element_chrome_1600x1000.png
diff --git a/...reference/can_filter_a_study_by_patient_treatments_element_chrome_1600x1000.png b/...reference/can_filter_a_study_by_patient_treatments_element_chrome_1600x1000.png
diff --git a/.../reference/can_filter_a_study_by_sample_treatments_element_chrome_1600x1000.png b/.../reference/can_filter_a_study_by_sample_treatments_element_chrome_1600x1000.png
diff --git a/...ote/screenshots/reference/check_for_survival_plots_element_chrome_1600x1000.png b/...ote/screenshots/reference/check_for_survival_plots_element_chrome_1600x1000.png
diff --git a/...remote/screenshots/reference/filter_study_from_url_element_chrome_1600x1000.png b/...remote/screenshots/reference/filter_study_from_url_element_chrome_1600x1000.png
diff --git a/...hots/reference/fusion_filter_filter_study_from_url_element_chrome_1600x1000.png b/...hots/reference/fusion_filter_filter_study_from_url_element_chrome_1600x1000.png
diff --git a/...ric_assay_chart_should_be_added_in_the_summary_tab_element_chrome_1600x1000.png b/...ric_assay_chart_should_be_added_in_the_summary_tab_element_chrome_1600x1000.png
diff --git a/...remote/screenshots/reference/loads_a_virtual_study_element_chrome_1600x1000.png b/...remote/screenshots/reference/loads_a_virtual_study_element_chrome_1600x1000.png
diff --git a/...ence/loads_multiple_studies_with_treatments_tables_element_chrome_1600x1000.png b/...ence/loads_multiple_studies_with_treatments_tables_element_chrome_1600x1000.png
diff --git a/...ld_show_up_when_the_cancer_gene_filter_is_disabled_element_chrome_1600x1000.png b/...ld_show_up_when_the_cancer_gene_filter_is_disabled_element_chrome_1600x1000.png
diff --git a/...cies_correctly_for_called_but_unprofiled_mutations_element_chrome_1600x1000.png b/...cies_correctly_for_called_but_unprofiled_mutations_element_chrome_1600x1000.png
diff --git a/...te/screenshots/reference/tcga_pancancer_atlas_page_element_chrome_1600x1000.png b/...te/screenshots/reference/tcga_pancancer_atlas_page_element_chrome_1600x1000.png
diff --git a/...e_cancer_gene_filter_should_remove_non_cancer_gene_element_chrome_1600x1000.png b/...e_cancer_gene_filter_should_remove_non_cancer_gene_element_chrome_1600x1000.png
diff --git a/..._adding_charts,_each_chart_should_get_proper_data._element_chrome_1600x1000.png b/..._adding_charts,_each_chart_should_get_proper_data._element_chrome_1600x1000.png
diff --git a/package.json b/package.json
@@ -79,7 +79,6 @@
   "author": "",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "3dmol": "^1.3.7",
     "@babel/core": "7.4.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-modules-commonjs": "^7.4.4",
@@ -140,6 +139,7 @@
     "@types/seedrandom": "2.4.27",
     "@types/sinon": "^4.1.3",
     "@types/superagent": "^2.0.36",
+    "3dmol": "^1.3.7",
     "addthis-snippet": "^1.0.1",
     "autobind-decorator": "^2.1.0",
     "autoprefixer": "^6.7.0",
@@ -190,7 +190,6 @@
     "html-webpack-plugin": "^5.3.2",
     "igv": "^2.11.2",
     "imports-loader": "^0.8.0",
-    "jStat": "^1.7.0",
     "javascript-natural-sort": "^0.7.1",
     "jquery": "3.6.0",
     "jquery-migrate": "3.0.0",
@@ -199,6 +198,7 @@
     "json-fn": "^1.1.1",
     "jsonpath": "^1.1.1",
     "jspdf": "^1.3.3",
+    "jStat": "^1.7.0",
     "jstree": "^3.3.4",
     "jszip": "^3.7.1",
     "lerna": "3.19.0",

diff --git a/src/pages/studyView/TableUtils.tsx b/src/pages/studyView/TableUtils.tsx
@@ -106,7 +106,8 @@ export function getFreqColumnRender(
     numberOfAlteredCases: number,
     matchingGenePanelIds: string[],
     toggleModal?: (panelName: string) => void,
-    style?: CSSProperties
+    style?: CSSProperties,
+    className?: string
 ) {
     let tooltipContent = '# of samples profiled';
     if (type !== 'data') {
@@ -131,7 +132,7 @@ export function getFreqColumnRender(
             overlay={addTotalProfiledOverlay}
             destroyTooltipOnHide={true}
         >
-            <span data-test="freq-cell" style={style}>
+            <span data-test="freq-cell" className={className} style={style}>
                 {getFrequencyStr(
                     (numberOfAlteredCases / numberOfProfiledCases) * 100
                 )}

diff --git a/src/pages/studyView/table/ClinicalTable.tsx b/src/pages/studyView/table/ClinicalTable.tsx
@@ -247,10 +247,9 @@ export default class ClinicalTable extends React.Component<
                 render: (data: ClinicalDataCountSummary) => (
                     <span
                         style={{
-                            flexDirection: 'row-reverse',
-                            display: 'flex',
                             marginRight: this.cellMargin[ColumnKey.FREQ],
                         }}
+                        className={styles.pullRight}
                     >
                         {data.freq}
                     </span>

diff --git a/src/pages/studyView/table/MultiSelectionTable.tsx b/src/pages/studyView/table/MultiSelectionTable.tsx
@@ -268,7 +268,7 @@ export class MultiSelectionTable extends React.Component<
                         <TableHeaderCellFilterIcon
                             cellMargin={cellMargin}
                             dataTest="number-column-header"
-                            className={styles.displayFlex}
+                            className={`${styles.displayFlex} ${styles.pullRight}`}
                             showFilter={!!this.props.alterationFilterEnabled}
                             isFiltered={!!this.props.filterAlterations}
                         >
@@ -324,7 +324,10 @@ export class MultiSelectionTable extends React.Component<
                         data.numberOfAlteredCases,
                         data.matchingGenePanelIds || [],
                         this.toggleModal,
-                        { marginLeft: cellMargin }
+                        {
+                            marginLeft: cellMargin,
+                        },
+                        styles.pullRight
                     );
                 },
                 sortBy: (data: MultiSelectionTableRow) =>
@@ -357,9 +360,8 @@ export class MultiSelectionTable extends React.Component<
                 render: (data: MultiSelectionTableRow) => (
                     <span
                         data-test={'numberOfAlterations'}
+                        className={styles.pullRight}
                         style={{
-                            flexDirection: 'row-reverse',
-                            display: 'flex',
                             marginRight: cellMargin,
                         }}
                     >
@@ -392,10 +394,9 @@ export class MultiSelectionTable extends React.Component<
                     <span
                         data-test={'numberOfAlterations'}
                         style={{
-                            flexDirection: 'row-reverse',
-                            display: 'flex',
                             marginRight: cellMargin,
                         }}
+                        className={`${styles.pullRight}`}
                     >
                         {data.totalCount.toLocaleString()}
                     </span>

diff --git a/src/pages/studyView/table/tables.module.scss b/src/pages/studyView/table/tables.module.scss
@@ -72,6 +72,11 @@ $study-view-table-icon-size: 10px;
     line-height: 15px;
 }
 
+.pullRight {
+    display: flex !important;
+    flex-direction: row-reverse !important;
+}
+
 .headerRow {
     border-bottom: 1px solid #d1d1d1;
 }

diff --git a/src/pages/studyView/table/tables.module.scss.d.ts b/src/pages/studyView/table/tables.module.scss.d.ts
@@ -25,6 +25,7 @@ declare const styles: {
   readonly "labelContentSVG": string;
   readonly "mutsig": string;
   readonly "oddRow": string;
+  readonly "pullRight": string;
   readonly "row": string;
   readonly "studyViewTablesTable": string;
   readonly "tableSearchInput": string;