test for world, graph border, legend label (#378)

* test for world, graph border, legend label

* typo

client/__tests__/util/stateManager/world.test.js

@@ -232,3 +232,9 @@ describe("createVarDimension", () => {
   );
   expect(result).toBeInstanceOf(Crossfilter.ScalarDimension);
 });
+
+describe("worldEqUniverse", () => {
+  const { universe, world } = defaultBigBang();
+  const result = World.worldEqUniverse(world, universe);
+  expect(result).toBe(true);
+});

client/src/components/continuousLegend/index.js

@@ -6,7 +6,7 @@ import { interpolateViridis } from "d3-scale-chromatic";
 
 // create continuous color legend
 // http://bl.ocks.org/syntagmatic/e8ccca52559796be775553b467593a9f
-const continuous = (selectorId, colorscale) => {
+const continuous = (selectorId, colorscale, colorAccessor) => {
   const legendheight = 200;
   const legendwidth = 80;
   const margin = { top: 10, right: 60, bottom: 10, left: 2 };
@@ -86,15 +86,15 @@ const continuous = (selectorId, colorscale) => {
     .call(legendaxis);
 
   // text label for the y axis
-  // svg
+  svg
-  //   .append("text")
+    .append("text")
-  //   .attr("transform", "rotate(-90)")
+    .attr("transform", "rotate(-90)")
-  //   .attr("y", 3)
+    .attr("y", 2)
-  //   .attr("x", 0 - legendheight / 2)
+    .attr("x", 0 - legendheight / 2)
-  //   .attr("dy", "1em")
+    .attr("dy", "1em")
-  //   .style("text-anchor", "middle")
+    .style("text-anchor", "middle")
-  //   .style("fill", "white")
+    .style("fill", "white")
-  //   .text(colorAccessor);
+    .text(colorAccessor);
 };
 
 @connect(state => ({

client/src/components/graph/graph.js

@@ -6,6 +6,7 @@ import { connect } from "react-redux";
 import mat4 from "gl-mat4";
 import _regl from "regl";
 import { Button } from "@blueprintjs/core";
+import { worldEqUniverse } from "../../util/stateManager/world";
 
 import setupSVGandBrushElements from "./setupSVGandBrush";
 import actions from "../../actions";
@@ -17,6 +18,7 @@ import scaleLinear from "../../util/scaleLinear";
 
 @connect(state => ({
   world: state.controls.world,
+  universe: state.controls.universe,
   crossfilter: state.controls.crossfilter,
   responsive: state.responsive,
   colorRGB: _.get(state.controls, "colorRGB", null),
@@ -326,11 +328,17 @@ class Graph extends React.Component {
   }
 
   render() {
-    const { dispatch, responsive } = this.props;
+    const { dispatch, responsive, world, universe, crossfilter } = this.props;
     const { mode } = this.state;
     return (
       <div id="graphWrapper">
-        <div style={{ position: "fixed", right: 0, top: 0 }}>
+        <div
+          style={{
+            position: "fixed",
+            right: 0,
+            top: 0
+          }}
+        >
           <div
             style={{
               padding: 10,
@@ -341,21 +349,30 @@ class Graph extends React.Component {
           >
             <Button
               type="button"
-              style={{ marginRight: 10 }}
+              disabled={
-              onClick={() => {
+                crossfilter &&
-                dispatch(actions.resetGraph());
+                (crossfilter.countFiltered() === 0 ||
-              }}
+                  crossfilter.countFiltered() === crossfilter.size())
-            >
+              }
-              reset graph
-            </Button>
-            <Button
-              type="button"
               style={{ marginRight: 10 }}
               onClick={() => {
                 dispatch(actions.regraph());
               }}
             >
-              regraph selection
+              subset to current selection
+            </Button>
+            <Button
+              disabled={
+                world && universe ? worldEqUniverse(world, universe) : false
+              }
+              type="button"
+              intent="warning"
+              style={{ marginRight: 10 }}
+              onClick={() => {
+                dispatch(actions.resetGraph());
+              }}
+            >
+              reset
             </Button>
             <div>
               <div className="bp3-button-group">
@@ -391,7 +408,9 @@ class Graph extends React.Component {
             zIndex: -9999,
             position: "fixed",
             right: this.graphPaddingRight,
-            bottom: this.graphPaddingBottom
+            bottom: this.graphPaddingBottom,
+            borderLeft: "2px solid rgb(233,233,233)",
+            borderBottom: "2px solid rgb(233,233,233)"
           }}
         >
           <div

client/src/util/stateManager/world.js

@@ -273,7 +273,7 @@ export function createObsDimensionMap(crossfilter, world) {
   return dimensionMap;
 }
 
-function worldEqUniverse(world, universe) {
+export function worldEqUniverse(world, universe) {
   return world.obsAnnotations === universe.obsAnnotations;
 }