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

correctly toggle group selection in categorical metadata (#640)

Browse Source
This commit is contained in:
Bruce Martin
2019-03-12 10:49:29 -07:00
committed by GitHub
parent 80969012c9
commit aa5ce4a2f1
1 changed files with 29 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/categorical/category.js
+29 -25
View File
@@ -21,38 +21,42 @@ class Category extends React.Component {
}; };
} }
componentDidUpdate() { componentDidUpdate(prevProps) {
const { categoricalSelectionState, metadataField } = this.props; const { categoricalSelectionState, metadataField } = this.props;
const cat = categoricalSelectionState[metadataField]; if (categoricalSelectionState !== prevProps.categoricalSelectionState) {
const categoryCount = { const cat = categoricalSelectionState[metadataField];
// total number of categories in this dimension const categoryCount = {
totalCatCount: cat.numCategories, // total number of categories in this dimension
// number of selected options in this category totalCatCount: cat.numCategories,
selectedCatCount: _.reduce( // number of selected options in this category
cat.categorySelected, selectedCatCount: _.reduce(
(res, cond) => (cond ? res + 1 : res), cat.categorySelected,
0 (res, cond) => (cond ? res + 1 : res),
) 0
}; )
if (categoryCount.selectedCatCount === categoryCount.totalCatCount) { };
/* everything is on, so not indeterminate */ if (categoryCount.selectedCatCount === categoryCount.totalCatCount) {
this.checkbox.indeterminate = false; /* everything is on, so not indeterminate */
} else if (categoryCount.selectedCatCount === 0) { this.checkbox.indeterminate = false;
/* nothing is on, so no */ this.setState({ isChecked: true }); // eslint-disable-line react/no-did-update-set-state
this.checkbox.indeterminate = false; } else if (categoryCount.selectedCatCount === 0) {
} else if (categoryCount.selectedCatCount < categoryCount.totalCatCount) { /* nothing is on, so no */
/* to be explicit... */ this.checkbox.indeterminate = false;
this.checkbox.indeterminate = true; this.setState({ isChecked: false }); // eslint-disable-line react/no-did-update-set-state
} else if (categoryCount.selectedCatCount < categoryCount.totalCatCount) {
/* to be explicit... */
this.checkbox.indeterminate = true;
}
} }
} }
handleColorChange() { handleColorChange = () => {
const { dispatch, metadataField } = this.props; const { dispatch, metadataField } = this.props;
dispatch({ dispatch({
type: "color by categorical metadata", type: "color by categorical metadata",
colorAccessor: metadataField colorAccessor: metadataField
}); });
} };
toggleAll() { toggleAll() {
const { dispatch, metadataField } = this.props; const { dispatch, metadataField } = this.props;
@@ -161,10 +165,10 @@ class Category extends React.Component {
</div> </div>
<Tooltip content="Use as color scale" position="bottom"> <Tooltip content="Use as color scale" position="bottom">
<Button <Button
onClick={this.handleColorChange.bind(this)} onClick={this.handleColorChange}
active={colorAccessor === metadataField} active={colorAccessor === metadataField}
intent={colorAccessor === metadataField ? "primary" : "none"} intent={colorAccessor === metadataField ? "primary" : "none"}
icon={"tint"} icon="tint"
/> />
</Tooltip> </Tooltip>
</div> </div>