Change appearance of centroid labels of unselected values (#1491)

* add opacity change on selection state

* change overlay z-index to capture pointer

* https://www.youtube.com/watch?v=xrg-RgF5F8o

* render null if no coloring by continuous

* run lint on push + pr

* revert commit

wrong branch

client/src/components/graph/overlays/centroidLabels.js

@@ -8,6 +8,7 @@ export default
   colorAccessor: state.colors.colorAccessor,
   dilatedValue: state.pointDilation.categoryField,
   labels: state.centroidLabels.labels,
+  categoricalSelection: state.categoricalSelection,
 }))
 class CentroidLabels extends PureComponent {
   // Check to see if centroids have either just been displayed or removed from the overlay
@@ -33,11 +34,21 @@ class CentroidLabels extends PureComponent {
       dilatedValue,
       dispatch,
       colorAccessor,
+      categoricalSelection,
     } = this.props;
 
+    if (!colorAccessor || labels.size === undefined || labels.size === 0)
+      return null;
+
+    const {
+      categoryValueIndices,
+      categoryValueSelected,
+    } = categoricalSelection?.[colorAccessor];
+
     const labelSVGS = [];
     let fontSize = "15px";
     let fontWeight = null;
+    const deselectOpacity = 0.375;
     labels.forEach((coords, label) => {
       fontSize = "15px";
       fontWeight = null;
@@ -46,6 +57,8 @@ class CentroidLabels extends PureComponent {
         fontWeight = "800";
       }
 
+      const selected = categoryValueSelected[categoryValueIndices.get(label)];
+
       // Mirror LSB middle truncation
       let displayLabel = label;
       if (displayLabel.length > categoryLabelDisplayStringLongLength) {
@@ -77,6 +90,7 @@ class CentroidLabels extends PureComponent {
               fontWeight,
               fill: "black",
               userSelect: "none",
+              opacity: selected ? 1 : deselectOpacity,
             }}
             onMouseEnter={(e) =>
               dispatch({

client/src/components/graph/overlays/graphOverlayLayer.js

@@ -81,7 +81,7 @@ export default class GraphOverlayLayer extends PureComponent {
           position: "absolute",
           top: 0,
           left: 0,
-          zIndex: 1,
+          zIndex: 2,
           backgroundColor: displaying ? "rgba(255, 255, 255, 0.55)" : "",
         }}
         onMouseMove={handleCanvasEvent}