From 1f94c71c22215a6655c837abe174e6cab44fe4e8 Mon Sep 17 00:00:00 2001
From: Matt Weiden <538456+mweiden@users.noreply.github.com>
Date: Wed, 8 Apr 2020 09:45:32 -0700
Subject: [PATCH] Use sci notation for axis ticks abs(tick) >= 10000 (#1363)

Fixes https://github.com/chanzuckerberg/cellxgene/issues/1349

For more information see https://github.com/d3/d3-format

Note that does not _fully_ fix the issue described in #1349, but rather
makes the formatting issue far less likely. It is _still_ possible for
this to occur if the difference between two ticks in axes happes in the
a significant digit cropped by the scientific notation format
---
 client/__tests__/e2e/data.js                      |  6 +++---
 client/src/components/brushableHistogram/index.js | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/__tests__/e2e/data.js b/client/__tests__/e2e/data.js
index 21769db4..ad783613 100644
--- a/client/__tests__/e2e/data.js
+++ b/client/__tests__/e2e/data.js
@@ -41,7 +41,7 @@ export const datasets = {
         {
           metadata: "n_genes",
           "coordinates-as-percent": { x1: 0.25, y1: 0.5, x2: 0.55, y2: 0.5 },
-          count: "1552"
+          count: "1537"
         }
       ]
     },
@@ -140,8 +140,8 @@ export const datasets = {
       metadata: "n_genes",
       gene: "S100A8",
       "coordinates-as-percent": { x1: 0.25, y1: 0.5, x2: 0.55, y2: 0.5 },
-      count: "392",
-      "gene-cell-count": "421"
+      count: "386",
+      "gene-cell-count": "416"
     }
   }
 };
diff --git a/client/src/components/brushableHistogram/index.js b/client/src/components/brushableHistogram/index.js
index c3ca43f6..f7de0d78 100644
--- a/client/src/components/brushableHistogram/index.js
+++ b/client/src/components/brushableHistogram/index.js
@@ -80,8 +80,8 @@ class HistogramBrush extends React.PureComponent {
   constructor(props) {
     super(props);
 
-    this.marginLeft = 3; // Space for 0 tick label on X axis
-    this.marginRight = 40; // space for Y axis & labels
+    this.marginLeft = 12; // Space for 0 tick label on X axis
+    this.marginRight = 52; // space for Y axis & labels
     this.marginBottom = 25; // space for X axis & labels
     this.marginTop = 3;
 
@@ -374,8 +374,8 @@ class HistogramBrush extends React.PureComponent {
       .call(
         d3
           .axisBottom(x)
-          .ticks(5)
-          .tickFormat(d3.format(".0s"))
+          .ticks(4)
+          .tickFormat(d3.format(x.domain().some(n => Math.abs(n) >= 10000) ? ".2e" : ","))
       );
 
     /* Y AXIS */
@@ -387,7 +387,7 @@ class HistogramBrush extends React.PureComponent {
         d3
           .axisRight(y)
           .ticks(3)
-          .tickFormat(d3.format(".0s"))
+          .tickFormat(d3.format(y.domain().some(n => Math.abs(n) >= 10000) ? ".0e" : ","))
       );
 
     /* axis style */