break out load and err

client/src/components/dotplot/err.js

@@ -0,0 +1,20 @@
+import React from "react";
+import * as globals from "../../globals";
+
+const ErrorLoading = ({ error, width, height }) => {
+  console.log(error); // log to console as this is an unepected error
+  return (
+    <div
+      style={{
+        position: "fixed",
+        fontWeight: 500,
+        top: height / 2,
+        left: globals.leftSidebarWidth + width / 2 - 50,
+      }}
+    >
+      <span>Failure loading dotplot</span>
+    </div>
+  );
+};
+
+export default ErrorLoading;

client/src/components/dotplot/index.js

@@ -5,7 +5,9 @@ import Async from "react-async";
 import memoize from "memoize-one";
 // import * as d3 from "d3";
 
-import * as globals from "../../globals";
+import ErrorLoading from "./err";
+import StillLoading from "./load";
+
 import { createCategorySummaryFromDfCol } from "../../util/stateManager/controlsHelpers";
 
 import {
@@ -232,6 +234,16 @@ class Dotplot extends React.Component {
           top: 0,
           left: 0,
         }}
+      >
+        <svg
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            zIndex: 1,
+          }}
+          width={viewport.width}
+          height={viewport.height}
         >
           <Async
             watchFn={Dotplot.watchAsync}
@@ -265,18 +277,7 @@ class Dotplot extends React.Component {
                   categorySummary,
                   colorData,
                 } = asyncProps;
-              return (
+                return this.dotplot(
-                <svg
-                  style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    zIndex: 1,
-                  }}
-                  width={viewport.width}
-                  height={viewport.height}
-                >
-                  {this.dotplot(
                   "tissue",
                   categoryData,
                   categorySummary,
@@ -284,58 +285,14 @@ class Dotplot extends React.Component {
                   colorData,
                   width,
                   height
-                  )}
-                </svg>
                 );
               }}
             </Async.Fulfilled>
           </Async>
+        </svg>
       </div>
     );
   }
 }
 
-const ErrorLoading = ({ error, width, height }) => {
-  console.log(error); // log to console as this is an unepected error
-  return (
-    <div
-      style={{
-        position: "fixed",
-        fontWeight: 500,
-        top: height / 2,
-        left: globals.leftSidebarWidth + width / 2 - 50,
-      }}
-    >
-      <span>Failure loading dotplot</span>
-    </div>
-  );
-};
-
-const StillLoading = ({ width, height }) => {
-  /*
-    Render a busy/loading indicator
-    */
-  return (
-    <div
-      style={{
-        position: "fixed",
-        fontWeight: 500,
-        top: height / 2,
-        width,
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          justifyItems: "center",
-          alignItems: "center",
-        }}
-      >
-        <span style={{ fontStyle: "italic" }}>Loading dotplot</span>
-      </div>
-    </div>
-  );
-};
-
 export default Dotplot;

client/src/components/dotplot/load.js

@@ -0,0 +1,30 @@
+import React from "react";
+
+const StillLoading = ({ width, height }) => {
+  /*
+      Render a busy/loading indicator
+      */
+  return (
+    <div
+      style={{
+        position: "fixed",
+        fontWeight: 500,
+        top: height / 2,
+        width,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          justifyItems: "center",
+          alignItems: "center",
+        }}
+      >
+        <span style={{ fontStyle: "italic" }}>Loading dotplot</span>
+      </div>
+    </div>
+  );
+};
+
+export default StillLoading;