categorical fields

src/components/categorical/categorical.js

@@ -1,59 +1,96 @@
 import React from "react";
 import _ from "lodash";
 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 { updateCategoricalQueryParams } from "../../util";
 
 import cells from "../../../data/GBM_metadata.js";
-import createCategoryCounts from "./createCategoryCounts";
 
-const Button = ({category, c, i}) => (
+const Button = ({category, value, count, i}) => (
   <button
     key={i}
+    onClick={() => {
+      updateCategoricalQueryParams(category, value)
+    }}
     style={{
-      border: i > -1 ? "none" : `1px solid ${globals.lightgrey}`,
-      background: i > -1 ? globals.hcaBlue : "none",
-      color: i > -1 ? "white" : "black",
+      border: "none",
+      background: "none",
+      color: "black",
       padding: "7px 10px",
-      marginRight: 20,
-      borderRadius: 3,
+      marginRight: 3,
       cursor: "pointer"
     }}>
-    {c}
+    {value}
     <span
       style={{
-        fontWeight: i > -1 ? globals.bolder : "auto",
-        background: i > -1 ? "white" : "none",
+        fontFamily: globals.accentFont,
+        fontStyle: "italic",
         color: "black",
-        marginLeft: 10,
-        padding: "2px 4px",
+        marginLeft: 4,
         borderRadius: 3
       }}>
-      {category[c]}
+      {count}
     </span>
   </button>
 )
 
-const Category = ({category, title}) => (
-  <div>
-    <p>{title}</p>
-    { _.map(Object.keys(category), (c, i) => <Button key={i} category={category} c={c} i={i} />) }
+const alphabeticallySortedValues = (values) => {
+  return Object.keys(values).sort((a, b) => {
+    var textA = a.toUpperCase();
+    var textB = b.toUpperCase();
+    return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
+  })
+}
+
+
+const Category = ({category, values}) => (
+  <div style={{
+      display: "flex",
+      alignItems: "baseline",
+      maxWidth: globals.maxParagraphWidth,
+    }}>
+    <p style={{
+        flexShrink: 0,
+        width: 100,
+        textAlign: "right",
+        marginRight: 20
+      }}>{category}:</p>
+    <div>
+      { _.map(alphabeticallySortedValues(values), (v, i) => <Button key={v} category={category} count={values[v]} value={v} i={i} />) }
+    </div>
   </div>
 )
 
-const Categorical = () => {
+@connect((state) => {
+  return {
+    foo123: state
+  }
+})
+class Categorical extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
 
-  return (
-    <div style={{marginTop: 50}}>
-      <h3>Categorical Metadata</h3>
-      {
-        _.map(createCategoryCounts(cells),
-        (value, key) => {
-          return <Category key={key} title={key} category={value} />
-        })
-      }
-    </div>
-  )
+    };
+  }
+  render () {
+    return (
+      <div style={{marginTop: 50}}>
         <SectionHeader text="Categorical Metadata"/>
+        <p> Sort by: Alphabetical / Count || Show counts: true / false || Collapse: all / none</p>
+        {
+          _.map(createCategoryCounts(cells),
+          (value, key) => {
+            return <Category key={key} category={key} values={value} />
+          })
+        }
+      </div>
+    )
+  }
 };
 
 export default Categorical;