From 53b036c467a0fc012454f45c681a7de972d56944 Mon Sep 17 00:00:00 2001
From: Colin Megill <colinmegill@gmail.com>
Date: Wed, 3 Jan 2018 19:23:13 -0800
Subject: [PATCH] select only this categorical filter

---
 src/components/categorical/value.js           | 21 +++++++++++++++++++
 .../updateCellSelectionMiddleware.js          | 21 ++++++++++++++++++-
 src/reducers/controls.js                      |  7 ++++++-
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/components/categorical/value.js b/src/components/categorical/value.js
index b604faab..f8703245 100644
--- a/src/components/categorical/value.js
+++ b/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>
     )
   }
diff --git a/src/middleware/updateCellSelectionMiddleware.js b/src/middleware/updateCellSelectionMiddleware.js
index be2f03f4..a0d265c3 100644
--- a/src/middleware/updateCellSelectionMiddleware.js
+++ b/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 = [];
diff --git a/src/reducers/controls.js b/src/reducers/controls.js
index 0979e9e3..9a70ef38 100644
--- a/src/reducers/controls.js
+++ b/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
   *******************************/