Right-aligned numbers in study view charts

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",

src/pages/studyView/TableUtils.tsx

@@ -13,6 +13,7 @@ import {
 } from 'pages/studyView/StudyViewUtils';
 import { GenePanelList } from 'pages/studyView/table/StudyViewGenePanelModal';
 import { CSSProperties } from 'react';
+import { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
 
 export function getGeneCNAOQL(hugoGeneSymbol: string, alteration: number) {
     return [hugoGeneSymbol, getCNAByAlteration(alteration)].join(':');
@@ -106,7 +107,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 +133,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
                 )}

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>

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>

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

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;