initial commit

2026-10-06 05:08:11 +08:00 · 2017-08-23 16:28:01 -07:00
commit f6d7cc3e23
40 changed files with 1661 additions and 0 deletions
@@ -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>
+
+*/