initial commit

src/components/categorical/categorical.js

@@ -0,0 +1,68 @@
+import React from "react";
+import _ from "lodash";
+import * as globals from "../../globals";
+
+import cells from "../../../data/GBM_metadata.js";
+import createCategoryCounts from "./createCategoryCounts";
+
+const Button = ({category, c, i}) => (
+  <button
+    key={i}
+    style={{
+      border: i === 0 ? "none" : `1px solid ${globals.lightgrey}`,
+      background: i === 0 ? globals.hcaBlue : "none",
+      color: i === 0 ? "white" : "black",
+      padding: "7px 10px",
+      marginRight: 20,
+      borderRadius: 3,
+      cursor: "pointer"
+    }}>
+    {c}
+    <span
+      style={{
+        fontWeight: i === 0 ? globals.bolder : "auto",
+        background: i === 0 ? "white" : "none",
+        color: "black",
+        marginLeft: 10,
+        padding: "2px 4px",
+        borderRadius: 3
+      }}>
+      {category[c]}
+    </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} />) }
+  </div>
+)
+
+const Categorical = () => {
+
+  return (
+    <div>
+      <h3>Categorical Metadata</h3>
+      {
+        _.map(createCategoryCounts(cells),
+        (value, key) => {
+          return <Category key={key} title={key} category={value} />
+        })
+      }
+    </div>
+  )
+};
+
+export default Categorical;
+
+/*
+
+  [on off] toggle hide deselected filters (shows a menu vs shows what you ordered in compact/narrative form. fold out animation.)
+
+  <p> <button> Field name [initial state] [create 2d graph]             [explain part of 2d graph]    </button> </p>
+  <p> <button> Field name [initial state] [create hypothesis]           [validate hypothesis]         </button> </p>
+  <p> <button> Field name [total]         [selected in current filters] [selected in graph selection] </button> </p>
+  <p> <button> Tumor      [400]           [40]                          [4]                           </button> </p>
+
+*/

src/components/categorical/createCategoryCounts.js

@@ -0,0 +1,45 @@
+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;