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/categorical/categorical.js

@@ -2,6 +2,7 @@
 import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
+import * as globals from "../../globals";
 
 import * as globals from "../../globals";
 import Category from "./category";
@@ -38,13 +39,16 @@ class Categories extends React.Component {
     return (
       <div
         style={{
-          width: 310,
-          marginRight: 40,
-          paddingRight: 20,
-          flexShrink: 0
+          padding: globals.leftSidebarSectionPadding
         }}
       >
-        <p> Categorical Metadata </p>
+        <p
+          style={Object.assign({}, globals.leftSidebarSectionHeading, {
+            marginTop: 4
+          })}
+        >
+          Categorical Metadata
+        </p>
         {_.map(ranges, (value, key) => {
           const isColorField = key.includes("color") || key.includes("Color");
           const isSelectableCategory =

client/src/components/categorical/category.js

@@ -119,34 +119,11 @@ class Category extends React.Component {
         <div
           style={{
             display: "flex",
-            justifyContent: "space-between",
+            justifyContent: "flex-start",
             alignItems: "baseline"
           }}
         >
-          <p
-            style={{
-              // flexShrink: 0,
-              fontWeight: 500,
-              // textAlign: "right",
-              // fontFamily: globals.accentFont,
-              // fontStyle: "italic",
-              margin: "3px 10px 3px 0px"
-            }}
-          >
-            <span
-              style={{
-                cursor: "pointer",
-                display: "inline-block",
-                position: "relative",
-                top: 2
-              }}
-              onClick={() => {
-                this.setState({ isExpanded: !isExpanded });
-              }}
-            >
-              {isExpanded ? <FaChevronDown /> : <FaChevronRight />}
-            </span>
-            {metadataField}
+          <label className="bp3-control bp3-checkbox">
             <input
               onChange={this.handleToggleAllClick.bind(this)}
               ref={el => {
@@ -156,29 +133,41 @@ class Category extends React.Component {
               checked={isChecked}
               type="checkbox"
             />
-            <span
-              onClick={this.handleColorChange.bind(this)}
-              style={{
-                fontSize: 14,
-                marginLeft: 4,
-                // padding: this.props.colorAccessor === this.props.metadataField ? 3 : "auto",
-                borderRadius: 3,
-                color:
-                  colorAccessor === metadataField
-                    ? globals.brightBlue
-                    : "black",
-                // backgroundColor: this.props.colorAccessor === this.props.metadataField ? globals.brightBlue : "inherit",
-                display: "inline-block",
-                position: "relative",
-                top: 2,
-                cursor: "pointer"
-              }}
-            >
-              <FaPaintBrush />
-            </span>
-          </p>
+            <span className="bp3-control-indicator" />
+            {""}
+          </label>
+
+          <span
+            style={{
+              cursor: "pointer",
+              display: "inline-block"
+            }}
+            onClick={() => {
+              this.setState({ isExpanded: !isExpanded });
+            }}
+          >
+            {metadataField}
+            {isExpanded ? (
+              <FaChevronDown style={{ fontSize: 10, marginLeft: 5 }} />
+            ) : (
+              <FaChevronRight style={{ fontSize: 10, marginLeft: 5 }} />
+            )}
+          </span>
+
+          <span
+            onClick={this.handleColorChange.bind(this)}
+            style={{
+              marginLeft: 4,
+              color:
+                colorAccessor === metadataField ? globals.brightBlue : "black",
+              display: "inline-block",
+              cursor: "pointer"
+            }}
+          >
+            <FaPaintBrush style={{ fontSize: 12, marginLeft: 10 }} />
+          </span>
         </div>
-        <div>{isExpanded ? this.renderCategoryItems() : null}</div>
+        <div style={{ marginLeft: 26 }}>{isExpanded ? this.renderCategoryItems() : null}</div>
         <div>
           {isExpanded && isTruncated ? (
             <p style={{ paddingLeft: 15 }}>... truncated list ...</p>

client/src/components/categorical/value.js

@@ -49,42 +49,39 @@ class CategoryValue extends React.Component {
         style={{
           display: "flex",
           alignItems: "baseline",
-          justifyContent: "space-between",
-          fontWeight: selected ? 700 : 400
+          justifyContent: "space-between"
         }}
       >
-        <p
+        <div
           style={{
-            paddingLeft: 15,
-            width: 200,
-            flexShrink: 0,
-            margin: 0
-            // lineHeight: "1em"
+            margin: 0,
+            padding: 0,
+            userSelect: "none"
           }}
         >
-          <input
-            style={{ position: "relative", top: 1 }}
-            onChange={
-              selected ? this.toggleOff.bind(this) : this.toggleOn.bind(this)
-            }
-            checked={selected}
-            type="checkbox"
+          <label className="bp3-control bp3-checkbox">
+            <input
+              onChange={
+                selected ? this.toggleOff.bind(this) : this.toggleOn.bind(this)
+              }
+              checked={selected}
+              type="checkbox"
+            />
+            <span className="bp3-control-indicator" />
+            {value}
+          </label>
+        </div>
+        <span>
+          <span>{count}</span>
+          <svg
+            style={{
+              marginLeft: 5,
+              width: 11,
+              height: 11,
+              backgroundColor: c ? colorScale(value) : "inherit"
+            }}
           />
-          {value}
-        </p>
-        <p
-          style={{
-            padding: "1px 10px",
-            width: 80,
-            textAlign: "center",
-            backgroundColor: c ? colorScale(value) : "inherit",
-            color: c ? "white" : "black",
-            margin: 0
-            // lineHeight: "1em"
-          }}
-        >
-          {count}
-        </p>
+        </span>
       </div>
     );
   }