select and deselect

src/components/app.js

@@ -11,7 +11,7 @@ import Continuous from "./continuous/continuous";
 import Joy from "./joy/joy";
 import Graph from "./graph/graph";
 import * as globals from "../globals";
-import * as actions from "../actions";
+import actions from "../actions";
 
 import SectionHeader from "./framework/sectionHeader";
 
@@ -36,6 +36,7 @@ class App extends React.Component {
     window.addEventListener('popstate', this._onURLChanged);
     this._onURLChanged();
 
+    this.props.dispatch(actions.initialize())
     this.props.dispatch(actions.requestCells())
 
   }

src/components/categorical/categorical.js

@@ -5,11 +5,10 @@ import { connect } from "react-redux";
 import * as globals from "../../globals";
 import styles from "./categorical.css";
 import SectionHeader from "../framework/sectionHeader"
-import createCategoryCounts from "./createCategoryCounts";
 import Value from "./value";
 import { alphabeticallySortedValues } from "./util";
 
-const Category = ({metadataField, values, toggleOn, toggleOff}) => (
+const Category = ({metadataField, values}) => (
   <div style={{
       display: "flex",
       alignItems: "baseline",
@@ -22,15 +21,15 @@ const Category = ({metadataField, values, toggleOn, toggleOff}) => (
         fontFamily: globals.accentFont,
         fontStyle: "italic",
         marginRight: 20,
-      }}>{metadataField}:</p>
+      }}>
+      {metadataField}:
+    </p>
     <div>
       {
         _.map(alphabeticallySortedValues(values), (v, i) => {
           return (
             <Value
               key={v}
-              toggleOn={toggleOn}
-              toggleOff={toggleOff}
               metadataField={metadataField}
               count={values[v]}
               value={v}
@@ -57,24 +56,7 @@ class Categories extends React.Component {
 
     };
   }
-  toggleOn(metadataField, value) {
-    return () => {
-      this.props.dispatch({
-        type: "categorical metadata filter selected",
-        metadataField,
-        value
-      })
-    }
-  }
-  toggleOff(metadataField, value) {
-    return () => {
-      this.props.dispatch({
-        type: "categorical metadata filter deselected",
-        metadataField,
-        value
-      })
-    }
-  }
+
   render () {
     if (!this.props.ranges) return null
     return (
@@ -88,8 +70,6 @@ class Categories extends React.Component {
             ) {
               return (
                 <Category
-                  toggleOn={this.toggleOn.bind(this)}
-                  toggleOff={this.toggleOff.bind(this)}
                   key={key}
                   metadataField={key}
                   values={value.options}/>
@@ -118,6 +98,8 @@ export default Categories;
   <p> <button> Field name [total]         [selected in current filters] [selected in graph selection] </button> </p>
   <p> <button> Tumor      [400]           [40]                          [4]                           </button> </p>
 
+  might be interesting to show them as an 👁 icon, or with a slash through it, to allow for visible or hidden state
+
 */
 
 

src/components/categorical/createCategoryCounts.js

@@ -1,45 +0,0 @@
-import * as globals from "../../globals.js"
-
-/*
-  end result:
-
-  counts: {
-    Sample.type: {
-      glioblastoma: 3452
-    },
-    Selection: {
-      foo: 234,
-      bar: 21
-    }
-  }
-
-*/
-
-const categories = globals.categories;
-
-const createCategoryCounts = (cells) => {
-
-  /* instantiate counts obj */
-  const counts = {};
-  
-  categories.forEach((category) => {
-    counts[category] = {};
-  })
-
-  cells.forEach((cell) => {
-    categories.forEach((category) => {
-
-      /* if, for the given category (ie., categories.Location), we do not have ie., glioblastoma already, create it. Otherwise increment it. */
-      if (!counts[category][cell[category]]) {
-        counts[category][cell[category]] = 1;
-      } else {
-        counts[category][cell[category]]++
-      }
-
-    })
-  });
-
-  return counts;
-}
-
-export default createCategoryCounts;

src/components/categorical/value.js

@@ -1,7 +1,7 @@
-
 import { connect } from "react-redux";
 import React from "react";
 import * as globals from "../../globals";
+import actions from "../../actions";
 
 @connect((state) => {
   return {
@@ -9,11 +9,24 @@ import * as globals from "../../globals";
   }
 })
 class CategoryValue extends React.Component {
+  toggleOn() {
+    this.props.dispatch(
+      actions.attemptCategoricalMetadataSelection(
+        this.props.metadataField,
+        this.props.value
+      ))
+  }
+  toggleOff() {
+    this.props.dispatch(
+      actions.attemptCategoricalMetadataDeselection(
+        this.props.metadataField,
+        this.props.value
+      ))
+  }
   render () {
 
     /* has this value for this category already been selected? */
     let selected = false;
-    let fontWeight;
 
     if (!this.props.selectedMetadata) { /* there is no selected metadata */
       selected = false;
@@ -27,7 +40,7 @@ class CategoryValue extends React.Component {
     return (
       <div
         key={this.props.i}
-        onClick={selected ? this.props.toggleOff(this.props.metadataField, this.props.value) : this.props.toggleOn(this.props.metadataField, this.props.value)}
+        onClick={selected ? this.toggleOff.bind(this) : this.toggleOn.bind(this)}
         style={{
           cursor: "pointer",
           display: "flex",

src/components/continuous/continuous.js

@@ -28,7 +28,7 @@ class Continuous extends React.Component {
     super(props);
     this.state = {
       ctx: null,
-
+      parallelExists: false
     };
   }
 
@@ -36,9 +36,10 @@ class Continuous extends React.Component {
 
   }
 
-  componentWillUpdate(nextProps) {
-    if (nextProps.ranges) {
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.ranges && !this.state.parallelExists) {
       drawParallelCoordinates(nextProps.metadata, nextProps.ranges)
+      this.setState({parallelExists: true})
     }
   }
 

src/components/continuous/drawParallelCoordinates.js

@@ -22,8 +22,6 @@ const drawParallelCoordinates = (data, ranges) => {
 
   const dimensions = createDimensions(ranges);
 
-  console.log('ranges', data)
-
   const d3_functor = (v) => {
     return typeof v === "function" ? v : function() { return v; };
   };