Begin integrating blueprint (#359)

* toast test

* modify webpack build to allow for global CSS; use CSS modules to scope component styling

* remove heatmap

* add label to index resets

* swapping out buttons for blueprint

* adding constants to globals

* swapping out blueprint buttons

* title position, sidebar improvements

* sidebar styles

* adding toasts for validation errors

* zebra section trial

* integrating blueprint, switching buttons over, breaking out scatter

* clean up console

client/src/components/scatterplot/scatterplot.css

@@ -1,15 +1,14 @@
-
-.scatterplot {
+:local(.scatterplot) {
   display: block;
 }
 
-.scatterplot svg,
-.scatterplot canvas {
+:local(.scatterplot) svg,
+:local(.scatterplot) canvas {
   font: 10px sans-serif;
   position: absolute;
 }
 
-.scatterplot canvas {
+:local(.scatterplot) canvas {
   opacity: 0.9;
   pointer-events: none;
 }

client/src/components/scatterplot/scatterplot.js

@@ -5,8 +5,10 @@
 import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
+import { Button, ButtonGroup } from "@blueprintjs/core";
 import _regl from "regl";
 import * as d3 from "d3";
+import * as globals from "../../globals";
 
 import _camera from "../../util/camera";
 
@@ -64,6 +66,7 @@ class Scatterplot extends React.Component {
     this.axes = false;
     this.state = {
       svg: null,
+      minimized: null,
       xScale: null,
       yScale: null
     };
@@ -267,14 +270,48 @@ class Scatterplot extends React.Component {
   }
 
   render() {
+    const { dispatch } = this.props;
+    const { minimized } = this.state;
+
     return (
       <div
         style={{
-          backgroundColor: "white",
-          paddingBottom: 20
+          position: "fixed",
+          bottom: minimized ? -height + -margin.top : 0,
+          left: globals.leftSidebarWidth + globals.scatterplotPaddingLeft,
+          paddingBottom: 20,
+          backgroundColor: "white"
         }}
         id="scatterplot_wrapper"
       >
+        <ButtonGroup
+          minimal
+          style={{
+            position: "absolute",
+            right: 5,
+            top: 5
+          }}
+        >
+          <Button
+            type="button"
+            icon={minimized ? "plus" : "minus"}
+            onClick={() => {
+              this.setState({ minimized: !minimized });
+            }}
+          />
+          <Button
+            type="button"
+            icon="cross"
+            onClick={() => {
+              dispatch({
+                type: "clear scatterplot"
+              });
+              dispatch({
+                type: "reset colorscale"
+              });
+            }}
+          />
+        </ButtonGroup>
         <div
           className={styles.scatterplot}
           id="scatterplot"

client/src/components/scatterplot/util.js

@@ -1,5 +1,5 @@
 // jshint esversion: 6
-export const margin = { top: 66, right: 110, bottom: 20, left: 60 };
+export const margin = { top: 40, right: 5, bottom: 20, left: 60 };
 export const width = 340;
 export const height = 340 - margin.top - margin.bottom;
 export const innerHeight = height - 2;