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(

src/middleware/updateCellSelectionMiddleware.js

@@ -30,7 +30,7 @@ const updateCellSelectionMiddleware = (store) => {
         action.type === "graph brush deselect" ||
         action.type === "categorical metadata filter deselect" ||
         action.type === "categorical metadata filter select" ||
-        action.type === "categorical metadata filter only this" ||
+        action.type === "categorical metadata filter none of these" ||
         action.type === "categorical metadata filter all of these"
         ;
 
@@ -143,27 +143,24 @@ const updateCellSelectionMiddleware = (store) => {
             [action.value]: false
           }
         }
-      } else if (action.type === "categorical metadata filter only this") {
+      } else if (action.type === "categorical metadata filter none of these") {
 
-        const metadataFieldWithOnlyThisValueSelected = {};
+        const metadataFieldWithAllOfTheseValueSelected = {};
 
         /* set EVERYTHING to false in this intermediate object */
         _.each(s.controls.categoricalAsBooleansMap[action.metadataField], (isActive, option) => {
-          metadataFieldWithOnlyThisValueSelected[option] = false;
+          metadataFieldWithAllOfTheseValueSelected[option] = false;
         })
 
-        /* then set the one we want to true, to avoid the conditional nesting */
-        metadataFieldWithOnlyThisValueSelected[action.value] = true;
-
         newCategoricalAsBooleansMap = {
           ...s.controls.categoricalAsBooleansMap,
-          [action.metadataField]: metadataFieldWithOnlyThisValueSelected
+          [action.metadataField]: metadataFieldWithAllOfTheseValueSelected
         }
 
       } else if (action.type === "categorical metadata filter all of these") {
         const metadataFieldWithAllOfTheseValueSelected = {};
 
-        /* set EVERYTHING to false in this intermediate object */
+        /* set EVERYTHING to true in this intermediate object */
         _.each(s.controls.categoricalAsBooleansMap[action.metadataField], (isActive, option) => {
           metadataFieldWithAllOfTheseValueSelected[option] = true;
         })

src/reducers/controls.js

@@ -89,7 +89,7 @@ const Controls = (state = {
       categoricalAsBooleansMap: action.newCategoricalAsBooleansMap, /* this comes from middleware */
       currentCellSelection: action.newSelection /* this comes from middleware */
     })
-  case "categorical metadata filter only this":
+  case "categorical metadata filter none of these":
     return Object.assign({}, state, {
       categoricalAsBooleansMap: action.newCategoricalAsBooleansMap, /* this comes from middleware */
       currentCellSelection: action.newSelection /* this comes from middleware */