Show gnomad in number

packages/react-mutation-mapper/src/component/gnomad/GnomadFrequency.tsx

@@ -82,8 +82,7 @@ export type GnomadFrequencyProps = {
 @observer
 export default class GnomadFrequency extends React.Component<GnomadFrequencyProps, {}>
 {
-    public render()
-    {
+    public gnomad() {
         const myVariantInfo = this.props.myVariantInfo;
 
         let gnomadUrl = "";
@@ -145,7 +144,15 @@ export default class GnomadFrequency extends React.Component<GnomadFrequencyProp
             if (result["Total"].alleleFrequency === 0) {
                 display = <span>0</span>;
             } else {
-                display = <span>{parseFloat(result["Total"].alleleFrequency.toString()).toExponential(1)}</span>;
+                // show frequency as number with 4 significant digits
+                display = (
+                    <span>
+                        {result['Total'].alleleFrequency.toLocaleString(undefined, {
+                            maximumSignificantDigits: 2,
+                            minimumSignificantDigits: 2,
+                        })}
+                    </span>
+                );
             }
 
             overlay = () => <GnomadFrequencyTable data={sorted} gnomadUrl={gnomadUrl} />;
@@ -154,15 +161,19 @@ export default class GnomadFrequency extends React.Component<GnomadFrequencyProp
             display = <span style={{height: '100%', width: '100%', display: 'block', overflow: 'hidden'}}>&nbsp;</span>;
             overlay = () => <span>Variant has no data in gnomAD.</span>;
         }
+        return { overlay, display };
+    }
 
+    public render()
+    {
         return (
             <DefaultTooltip
-                overlay={overlay}
+                overlay={this.gnomad().overlay}
                 placement="topRight"
                 trigger={['hover', 'focus']}
                 destroyTooltipOnHide={true}
             >
-                {display}
+                {this.gnomad().display}
             </DefaultTooltip>
         );
     }

packages/react-mutation-mapper/src/component/gnomad/GnomadFrequencyTable.tsx

@@ -19,8 +19,15 @@ export function frequencyOutput(frequency: number) {
         return <span>0</span>
     }
     else {
-        // keep one digit on allele frequency and using scientific notation
-        return <span>{parseFloat(frequency.toString()).toExponential(1)}</span>;
+        // show frequency as number with 4 significant digits
+        return (
+            <span>
+                {frequency.toLocaleString(undefined, {
+                    maximumSignificantDigits: 2,
+                    minimumSignificantDigits: 2,
+                })}
+            </span>
+        );
     }
 }
 
@@ -143,7 +150,7 @@ export default class GnomadFrequencyTable extends React.Component<IGnomadFrequen
                                 <span className="pull-right mr-1" data-test="allele-frequency-data">
                                     {frequencyOutput(column.value)}
                                 </span>,
-                            width: 80
+                            width: 120
                         },
                     ]}
                 />

packages/react-mutation-mapper/src/util/FormatUtils.ts

@@ -14,4 +14,4 @@ export function formatPercentValue(rate: number, fractionDigits: number = 1)
 
 export function numberOfLeadingDecimalZeros(value: number) {
     return -Math.floor( (Math.log10(value) / Math.log10(10)) + 1);
-}
+}

src/shared/components/mutationTable/MutationTable.tsx

@@ -597,7 +597,7 @@ export default class MutationTable<P extends IMutationTableProps> extends React.
             Overall population allele frequency is shown. Hover over a frequency to see the frequency for each specific population.</span>),
             defaultSortDirection: "desc",
             visible: false,
-            align: "right"
+            align: "left"
         };
 
         this._columns[MutationTableColumnType.CLINVAR] = {

src/shared/components/mutationTable/column/GnomadColumnFormatter.tsx

@@ -3,30 +3,21 @@ import {Circle} from "better-react-spinkit";
 import 'rc-tooltip/assets/bootstrap_white.css';
 import {Mutation} from "shared/api/generated/CBioPortalAPI";
 import {
-    DefaultTooltip,
     TableCellStatusIndicator,
     TableCellStatus,
     MyVariantInfo,
-    MyVariantInfoAnnotation,
-    Gnomad,
-    AlleleCount,
-    AlleleNumber,
-    Homozygotes,
-    AlleleFrequency
+    MyVariantInfoAnnotation
 } from 'cbioportal-frontend-commons';
 import GenomeNexusMyVariantInfoCache, { GenomeNexusCacheDataType } from "shared/cache/GenomeNexusMyVariantInfoCache";
 import {calculateGnomadAllelFrequency, GnomadFrequency, gnomadSortValue} from "react-mutation-mapper";
-import generalStyles from "./styles.module.scss";
 
 export default class GnomadColumnFormatter {
 
     public static renderFunction(data: Mutation[],
                                  genomeNexusMyVariantInfoCache: GenomeNexusMyVariantInfoCache | undefined) {
         const genomeNexusCacheData = GnomadColumnFormatter.getGenomeNexusDataFromCache(data, genomeNexusMyVariantInfoCache);
         return (
-            <div className={generalStyles["integer-data"]}>
-                <span data-test='gnomad-column' data-test2={data[0].sampleId}>{GnomadColumnFormatter.getGnomadDataViz(genomeNexusCacheData)}</span>
-            </div>
+            <span data-test='gnomad-column' data-test2={data[0].sampleId}>{GnomadColumnFormatter.getGnomadDataViz(genomeNexusCacheData)}</span>
         );
     }