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 {
@@ -233,109 +235,64 @@ class Dotplot extends React.Component {
           left: 0,
         }}
       >
-        <Async
+        <svg
-          watchFn={Dotplot.watchAsync}
+          style={{
-          promiseFn={this.fetchAsyncProps}
+            position: "absolute",
-          watchProps={{
+            top: 0,
-            annoMatrix,
+            left: 0,
-            pointDilation,
+            zIndex: 1,
-            colors,
-            viewport,
           }}
+          width={viewport.width}
+          height={viewport.height}
         >
-          <Async.Pending initial>
+          <Async
-            <StillLoading width={viewport.width} height={viewport.height} />
+            watchFn={Dotplot.watchAsync}
-          </Async.Pending>
+            promiseFn={this.fetchAsyncProps}
-          <Async.Rejected>
+            watchProps={{
-            {(error) => (
+              annoMatrix,
-              <ErrorLoading
+              pointDilation,
-                width={viewport.width}
+              colors,
-                height={viewport.height}
+              viewport,
-                error={error}
+            }}
-              />
+          >
-            )}
+            <Async.Pending initial>
-          </Async.Rejected>
+              <StillLoading width={viewport.width} height={viewport.height} />
-          <Async.Fulfilled persist>
+            </Async.Pending>
-            {(asyncProps) => {
+            <Async.Rejected>
-              const {
+              {(error) => (
-                colorAccessor,
+                <ErrorLoading
-                categoryData,
-                width,
-                height,
-                categorySummary,
-                colorData,
-              } = asyncProps;
-              return (
-                <svg
-                  style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    zIndex: 1,
-                  }}
                   width={viewport.width}
                   height={viewport.height}
-                >
+                  error={error}
-                  {this.dotplot(
+                />
-                    "tissue",
+              )}
-                    categoryData,
+            </Async.Rejected>
-                    categorySummary,
+            <Async.Fulfilled persist>
-                    colorAccessor,
+              {(asyncProps) => {
-                    colorData,
+                const {
-                    width,
+                  colorAccessor,
-                    height
+                  categoryData,
-                  )}
+                  width,
-                </svg>
+                  height,
-              );
+                  categorySummary,
-            }}
+                  colorData,
-          </Async.Fulfilled>
+                } = asyncProps;
-        </Async>
+                return this.dotplot(
+                  "tissue",
+                  categoryData,
+                  categorySummary,
+                  colorAccessor,
+                  colorData,
+                  width,
+                  height
+                );
+              }}
+            </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;