select only this categorical filter

src/components/categorical/value.js

@@ -26,6 +26,14 @@ 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
 
@@ -36,6 +44,8 @@ class CategoryValue extends React.Component {
         key={this.props.i}
         style={{
           display: "flex",
+          alignItems: "baseline",
+          justifyContent: "space-between",
           fontWeight: selected ? 700 : 400,
         }}>
         <p style={{
@@ -56,6 +66,17 @@ 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>
     )
   }

src/middleware/updateCellSelectionMiddleware.js

@@ -29,7 +29,8 @@ const updateCellSelectionMiddleware = (store) => {
         action.type === "graph brush selection change" ||
         action.type === "graph brush deselect" ||
         action.type === "categorical metadata filter deselect" ||
-        action.type === "categorical metadata filter select"
+        action.type === "categorical metadata filter select" ||
+        action.type === "categorical metadata filter only this"
         ;
 
       if (
@@ -141,6 +142,24 @@ const updateCellSelectionMiddleware = (store) => {
             [action.value]: false
           }
         }
+      } else if (action.type === "categorical metadata filter only this") {
+
+        const metadataFieldWithOnlyThisValueSelected = {};
+
+        /* set EVERYTHING to false in this intermediate object */
+        _.each(s.controls.categoricalAsBooleansMap[action.metadataField], (isActive, option) => {
+          metadataFieldWithOnlyThisValueSelected[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
+        }
+        console.log('within', metadataFieldWithOnlyThisValueSelected)
+
       }
 
       const inactiveCategories = [];

src/reducers/controls.js

@@ -3,7 +3,7 @@ import _ from "lodash";
 const Controls = (state = {
   _ranges: null, /* this comes from initialize, this is universe */
   allCellsOnClient: null, /* this comes from cells endpoint, this is world */
-  currentCellSelection: null, /* this comes from user actions, this is current cell selection */
+  currentCellSelection: null, /* this comes from user actions, all draw components use this, it is created by middleware */
   graphMap: null,
   categoricalAsBooleansMap: null,
   colorAccessor: null,
@@ -89,6 +89,11 @@ const Controls = (state = {
       categoricalAsBooleansMap: action.newCategoricalAsBooleansMap, /* this comes from middleware */
       currentCellSelection: action.newSelection /* this comes from middleware */
     })
+  case "categorical metadata filter only this":
+    return Object.assign({}, state, {
+      categoricalAsBooleansMap: action.newCategoricalAsBooleansMap, /* this comes from middleware */
+      currentCellSelection: action.newSelection /* this comes from middleware */
+    })
   /*******************************
             Color Scale
   *******************************/