From bcee2ee2f3005a94b833e7767c150b6cdf7c1a5a Mon Sep 17 00:00:00 2001
From: Xiang Li <xlvv9@mail.missouri.edu>
Date: Thu, 16 Jan 2020 13:49:41 -0500
Subject: [PATCH] use .toLocaleString() to return number with max and min
 signigicant digits

---
 .../src/component/gnomad/GnomadFrequency.tsx        | 13 ++++++++-----
 .../src/component/gnomad/GnomadFrequencyTable.tsx   | 10 ++++++++--
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/react-mutation-mapper/src/component/gnomad/GnomadFrequency.tsx b/packages/react-mutation-mapper/src/component/gnomad/GnomadFrequency.tsx
index c0478b1d93e..d7d1aaf1bdf 100644
--- a/packages/react-mutation-mapper/src/component/gnomad/GnomadFrequency.tsx
+++ b/packages/react-mutation-mapper/src/component/gnomad/GnomadFrequency.tsx
@@ -145,11 +145,14 @@ export default class GnomadFrequency extends React.Component<GnomadFrequencyProp
                 display = <span>0</span>;
             } else {
                 // show frequency as number with 4 significant digits
-                var significantDigitsFormatter = new Intl.NumberFormat("en", { 
-                    minimumSignificantDigits: 1,
-                    maximumSignificantDigits:4
-                });
-                display = <span>{significantDigitsFormatter.format(result['Total'].alleleFrequency)}</span>;
+                display = (
+                    <span>
+                        {result['Total'].alleleFrequency.toLocaleString(undefined, {
+                            maximumSignificantDigits: 4,
+                            minimumSignificantDigits: 1,
+                        })}
+                    </span>
+                );
             }
 
             overlay = () => <GnomadFrequencyTable data={sorted} gnomadUrl={gnomadUrl} />;
diff --git a/packages/react-mutation-mapper/src/component/gnomad/GnomadFrequencyTable.tsx b/packages/react-mutation-mapper/src/component/gnomad/GnomadFrequencyTable.tsx
index c2f5a37ed85..d1bd665a170 100644
--- a/packages/react-mutation-mapper/src/component/gnomad/GnomadFrequencyTable.tsx
+++ b/packages/react-mutation-mapper/src/component/gnomad/GnomadFrequencyTable.tsx
@@ -6,7 +6,6 @@ import {GnomadSummary} from "../../model/GnomadSummary";
 import ColumnHeader from "../column/ColumnHeader";
 
 import "./gnomadFrequencyTable.scss";
-import { significantDigits } from "../../util/FormatUtils";
 
 export interface IGnomadFrequencyTableProps
 {
@@ -21,7 +20,14 @@ export function frequencyOutput(frequency: number) {
     }
     else {
         // show frequency as number with 4 significant digits
-        return <span>{significantDigits(frequency, 4)}</span>;
+        return (
+            <span>
+                {frequency.toLocaleString(undefined, {
+                    maximumSignificantDigits: 4,
+                    minimumSignificantDigits: 1,
+                })}
+            </span>
+        );
     }
 }