remove selection interaction from categorical value label (#847)

client/src/components/categorical/value.js

@@ -131,19 +131,21 @@ class CategoryValue extends React.Component {
             justifyContent: "space-between"
           }}
         >
-          <label className="bp3-control bp3-checkbox" style={{ margin: 0 }}>
+          <div style={{ display: "flex" }}>
-            <input
+            <label className="bp3-control bp3-checkbox" style={{ margin: 0 }}>
-              onChange={selected ? this.toggleOff : this.toggleOn}
+              <input
-              data-testclass="categorical-value-select"
+                onChange={selected ? this.toggleOff : this.toggleOn}
-              data-testid={`categorical-value-select-${metadataField}-${displayString}`}
+                data-testclass="categorical-value-select"
-              checked={selected}
+                data-testid={`categorical-value-select-${metadataField}-${displayString}`}
-              type="checkbox"
+                checked={selected}
-            />
+                type="checkbox"
-            <span
+              />
-              className="bp3-control-indicator"
+              <span
-              onMouseEnter={this.handleMouseExit}
+                className="bp3-control-indicator"
-              onMouseLeave={this.handleMouseEnter}
+                onMouseEnter={this.handleMouseExit}
-            />
+                onMouseLeave={this.handleMouseEnter}
+              />
+            </label>
             <span
               data-testid={`categorical-value-${metadataField}-${displayString}`}
               data-testclass="categorical-value"
@@ -151,7 +153,7 @@ class CategoryValue extends React.Component {
             >
               {displayString}
             </span>
-          </label>
+          </div>
           <span style={{ flexShrink: 0 }}>
             {colorAccessor && !isColorBy ? (
               <Occupancy category={category} {...this.props} />