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"