fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-10-02 13:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

categorical fires an action

Browse Source
This commit is contained in:
Colin Megill
2017-10-12 19:32:42 -07:00
parent d6b91176c4
commit e7ed697def
2 changed files with 56 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/categorical/categorical.css
View File
src/components/categorical/categorical.js
+56 -38
View File
@@ -6,48 +6,42 @@ import * as globals from "../../globals";
import styles from "./categorical.css"; import styles from "./categorical.css";
import SectionHeader from "../framework/sectionHeader" import SectionHeader from "../framework/sectionHeader"
import createCategoryCounts from "./createCategoryCounts"; import createCategoryCounts from "./createCategoryCounts";
import { updateCategoricalQueryParams } from "../../util"; import { alphabeticallySortedValues } from "../../util";
import cells from "../../../data/GBM_metadata.js"; import cells from "../../../data/GBM_metadata.js";
const Button = ({category, value, count, i}) => ( class Button extends React.Component {
<button render () {
key={i} return (
onClick={() => { <button
updateCategoricalQueryParams(category, value) key={this.props.i}
}} onClick={this.props.handleClick(this.props.category, this.props.value)}
style={{ style={{
border: "none", border: "none",
background: "none", background: "none",
color: "black", color: "black",
padding: "7px 10px", padding: "7px 10px",
marginRight: 3, marginRight: 3,
cursor: "pointer" cursor: "pointer"
}}> }}>
{value} {this.props.value}
<span <span
style={{ style={{
fontFamily: globals.accentFont, fontFamily: globals.accentFont,
fontStyle: "italic", fontStyle: "italic",
color: "black", color: "black",
marginLeft: 4, marginLeft: 4,
borderRadius: 3 borderRadius: 3
}}> }}>
{count} {this.props.count}
</span> </span>
</button> </button>
) )
}
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}) => ( const Category = ({category, values, handleClick}) => (
<div style={{ <div style={{
display: "flex", display: "flex",
alignItems: "baseline", alignItems: "baseline",
@@ -60,7 +54,19 @@ const Category = ({category, values}) => (
marginRight: 20 marginRight: 20
}}>{category}:</p> }}>{category}:</p>
<div> <div>
{ _.map(alphabeticallySortedValues(values), (v, i) => <Button key={v} category={category} count={values[v]} value={v} i={i} />) } {
_.map(alphabeticallySortedValues(values), (v, i) => {
return (
<Button
key={v}
handleClick={handleClick}
category={category}
count={values[v]}
value={v}
i={i} />
)
})
}
</div> </div>
</div> </div>
) )
@@ -77,15 +83,27 @@ class Categorical extends React.Component {
}; };
} }
handleClick(category, value) {
return () => {
this.props.dispatch({type: "category changed", data: {category, value}})
}
}
render () { render () {
return ( return (
<div style={{marginTop: 50}}> <div style={{marginTop: 50}}>
<SectionHeader text="Categorical Metadata"/> <SectionHeader text="Categorical Metadata"/>
<button onClick={this.handleClick("whee", "wooo")}></button>
<p> Sort by: Alphabetical / Count || Show counts: true / false || Collapse: all / none</p> <p> Sort by: Alphabetical / Count || Show counts: true / false || Collapse: all / none</p>
{ {
_.map(createCategoryCounts(cells), _.map(createCategoryCounts(cells),
(value, key) => { (value, key) => {
return <Category key={key} category={key} values={value} /> return (
<Category
handleClick={this.handleClick.bind(this)}
key={key}
category={key}
values={value} />
)
}) })
} }
</div> </div>