add point dilatation on hover (#841)

* enable centroid

* introduce new sizing

* scale point size based off hovered category

* add styling

* fix margins

* disable centroid labels

* remove unused code and add detail to comment

* remove cell dilation on selection toggle

* move hover to name label

* hover on value except for checkbox

* add border radius to value

client/src/components/categorical/categorical.css

@@ -0,0 +1,3 @@
+:local(.value):hover {
+  background: rgba(167, 182, 194, 0.3);
+}

client/src/components/categorical/value.js

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 import React from "react";
 import Occupancy from "./occupancy";
 import * as globals from "../../globals";
+import styles from "./categorical.css";
 
 @connect(state => ({
   categoricalSelection: state.categoricalSelection,
@@ -107,14 +108,18 @@ class CategoryValue extends React.Component {
     return (
       <div
         key={i}
+        className={styles.value}
+        data-testclass="categorical-row"
         style={{
+          padding: "4px 7px",
           display: "flex",
           alignItems: "baseline",
-          justifyContent: "space-between"
+          justifyContent: "space-between",
+          marginBottom: "2px",
+          borderRadius: "2px"
         }}
-        data-testclass="categorical-row"
-        onMouseEnter={null /* this.handleMouseEnter */}
-        onMouseLeave={null /* this.handleMouseLeave */}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseExit}
       >
         <div
           style={{
@@ -126,7 +131,7 @@ class CategoryValue extends React.Component {
             justifyContent: "space-between"
           }}
         >
-          <label className="bp3-control bp3-checkbox">
+          <label className="bp3-control bp3-checkbox" style={{ margin: 0 }}>
             <input
               onChange={selected ? this.toggleOff : this.toggleOn}
               data-testclass="categorical-value-select"
@@ -134,7 +139,11 @@ class CategoryValue extends React.Component {
               checked={selected}
               type="checkbox"
             />
-            <span className="bp3-control-indicator" />
+            <span
+              className="bp3-control-indicator"
+              onMouseEnter={this.handleMouseExit}
+              onMouseLeave={this.handleMouseEnter}
+            />
             <span
               data-testid={`categorical-value-${metadataField}-${displayString}`}
               data-testclass="categorical-value"

client/src/components/graph/graph.js

@@ -52,14 +52,27 @@ class Graph extends React.Component {
     return colors;
   });
 
-  computePointSizes = memoize((len, crossfilter) => {
-    /*
+  computePointSizes = memoize(
+    (len, crossfilter, metadataField, categoryField) => {
+      /*
     compute webgl dot size for each point
     */
-    const sizes = new Float32Array(len);
-    crossfilter.fillByIsSelected(sizes, 4, 0.2);
-    return sizes;
-  });
+
+      const sizes = new Float32Array(len);
+      crossfilter.fillByIsSelected(sizes, 4, 0.2);
+
+      if (metadataField && categoryField) {
+        const valuesArr = crossfilter.data.col(metadataField).asArray();
+
+        for (let i = 0; i < len; i += 1) {
+          if (valuesArr[i] === categoryField) {
+            sizes[i] = 10;
+          }
+        }
+      }
+      return sizes;
+    }
+  );
 
   constructor(props) {
     super(props);
@@ -203,7 +216,13 @@ class Graph extends React.Component {
       }
 
       /* sizes for each point */
-      const newSizes = this.computePointSizes(nObs, crossfilter);
+      const { metadataField, categoryField } = centroidLabel;
+      const newSizes = this.computePointSizes(
+        nObs,
+        crossfilter,
+        metadataField,
+        categoryField
+      );
       if (renderCache.sizes !== newSizes) {
         /* update our cache & GL if the buffer changes */
         renderCache.size = newSizes;
@@ -279,13 +298,13 @@ class Graph extends React.Component {
       stateChanges = { ...stateChanges, centroidSVG: newCentroidSVG };
     };
 
+    // Centroid SVG creation is disabled for now but should go into the first and third cases if enabled
     if (
       prevProps.responsive.height !== responsive.height ||
       prevProps.responsive.width !== responsive.width
     ) {
       // If the window size has changed we want to recreate all SVGs
       createToolSVG();
-      createCentroidSVG();
     } else if (
       (responsive.height && responsive.width && !toolSVG) ||
       selectionTool !== prevProps.selectionTool ||
@@ -298,7 +317,6 @@ class Graph extends React.Component {
       (responsive.height && responsive.width && !centroidSVG)
     ) {
       // First time for centroid or label change
-      createCentroidSVG();
     }
 
     /*