all or none becomes a checkbox

src/components/categorical/categorical.js

@@ -10,6 +10,13 @@ import { alphabeticallySortedValues } from "./util";
 
 @connect()
 class Category extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isChecked: true
+    };
+  }
+
   handleColorChange() {
     this.props.dispatch({
       type: "color by categorical metadata",
@@ -21,6 +28,15 @@ class Category extends React.Component {
       type: "categorical metadata filter all of these",
       metadataField: this.props.metadataField
     })
+    this.setState({isChecked: true})
+  }
+  toggleNone() {
+    this.props.dispatch({
+      type: "categorical metadata filter none of these",
+      metadataField: this.props.metadataField,
+      value: this.props.value
+    })
+    this.setState({isChecked: false})
   }
   render() {
     return (
@@ -43,11 +59,15 @@ class Category extends React.Component {
               marginRight: 10,
             }}>
             {this.props.metadataField}
+            <input
+            onChange={this.state.isChecked ? this.toggleNone.bind(this) : this.toggleAll.bind(this)}
+            checked={this.state.isChecked}
+            type="checkbox"/>
             <span
               onClick={this.handleColorChange.bind(this)}
               style={{
                 fontSize: 16,
-                marginLeft: 10,
+                marginLeft: 4,
                 position: "relative",
                 top: 2,
                 cursor: "pointer",
@@ -55,18 +75,6 @@ class Category extends React.Component {
               🖌️
             </span>
           </p>
-          <span
-            onClick={this.toggleAll.bind(this)}
-            style={{
-              fontFamily: globals.accentFont,
-              fontSize: 10,
-              fontWeight: 100,
-              fontStyle: "italic",
-              cursor: "pointer",
-            }}>
-          {"all"}
-          </span>
-
         </div>
         <div>
           {

src/components/categorical/value.js

@@ -26,14 +26,6 @@ class CategoryValue extends React.Component {
     });
   }
 
-  toggleOnlyThis() {
-    this.props.dispatch({
-      type: "categorical metadata filter only this",
-      metadataField: this.props.metadataField,
-      value: this.props.value
-    })
-  }
-
   render () {
     if (!this.props.categoricalAsBooleansMap) return null
 
@@ -66,17 +58,6 @@ class CategoryValue extends React.Component {
           }}>
           {this.props.count}
         </p>
-        <span
-          onClick={this.toggleOnlyThis.bind(this)}
-          style={{
-            fontFamily: globals.accentFont,
-            fontSize: 10,
-            fontWeight: 100,
-            fontStyle: "italic",
-            cursor: "pointer",
-          }}>
-        {"only"}
-        </span>
       </div>
     )
   }
@@ -84,6 +65,25 @@ class CategoryValue extends React.Component {
 
 export default CategoryValue;
 
+// toggleOnlyThis() {
+//   this.props.dispatch({
+//     type: "categorical metadata filter none of these",
+//     metadataField: this.props.metadataField,
+//     value: this.props.value
+//   })
+// }
+// <span
+//   onClick={this.toggleOnlyThis.bind(this)}
+//   style={{
+//     fontFamily: globals.accentFont,
+//     fontSize: 10,
+//     fontWeight: 100,
+//     fontStyle: "italic",
+//     cursor: "pointer",
+//   }}>
+// {"only"}
+// </span>
+
 // onClick={selected ? this.toggleOff.bind(this) : this.toggleOn.bind(this)}
 // toggleOn() {
 //   this.props.dispatch(