mirror of
https://github.com/chanzuckerberg/cellxgene.git
synced 2026-09-27 18:08:11 +08:00
mock reducer
This commit is contained in:
Colin Megill
Generated
+34
-1
@@ -11858,7 +11858,6 @@
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
@@ -13797,6 +13796,11 @@
|
||||
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.assign": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
|
||||
"integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
|
||||
},
|
||||
"lodash.camelcase": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
|
||||
@@ -13815,6 +13819,16 @@
|
||||
"integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.flatten": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
|
||||
"integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8="
|
||||
},
|
||||
"lodash.isstring": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
|
||||
"integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
|
||||
},
|
||||
"lodash.kebabcase": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
|
||||
@@ -16413,6 +16427,15 @@
|
||||
"scheduler": "^0.19.1"
|
||||
}
|
||||
},
|
||||
"react-easy-emoji": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-easy-emoji/-/react-easy-emoji-1.4.0.tgz",
|
||||
"integrity": "sha512-TcufijpuWKgYgzbySEBukNef+y0HI/4PAJ4gc9vb1CF7Q4CcAS2ZV8VMZk0ObtKKwJJfVgAHVt86nXWOed8QXg==",
|
||||
"requires": {
|
||||
"lodash.assign": "^4.0.8",
|
||||
"string-replace-to-array": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"react-fast-compare": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||
@@ -18017,6 +18040,16 @@
|
||||
"strip-ansi": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"string-replace-to-array": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/string-replace-to-array/-/string-replace-to-array-1.0.3.tgz",
|
||||
"integrity": "sha1-yT66mZpe4k1zGuu69auja18Y978=",
|
||||
"requires": {
|
||||
"invariant": "^2.2.1",
|
||||
"lodash.flatten": "^4.2.0",
|
||||
"lodash.isstring": "^4.0.1"
|
||||
}
|
||||
},
|
||||
"string-width": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
|
||||
|
||||
@@ -57,6 +57,7 @@
|
||||
"react": "^16.13.1",
|
||||
"react-async": "^10.0.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-easy-emoji": "^1.4.0",
|
||||
"react-flip-toolkit": "^7.0.12",
|
||||
"react-helmet": "^5.2.1",
|
||||
"react-icons": "^3.10.0",
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import React from "react";
|
||||
import { Button } from "@blueprintjs/core";
|
||||
import { connect } from "react-redux";
|
||||
import emoji from "react-easy-emoji";
|
||||
import * as globals from "../../globals";
|
||||
import Category from "./category";
|
||||
import { AnnotationsHelpers, ControlsHelpers } from "../../util/stateManager";
|
||||
@@ -207,9 +208,19 @@ class Categories extends React.Component {
|
||||
<Button
|
||||
data-testid="open-annotation-dialog"
|
||||
onClick={this.handleEnableAnnoMode}
|
||||
intent="primary"
|
||||
intent="none"
|
||||
>
|
||||
Create new category
|
||||
<span
|
||||
style={{
|
||||
marginRight: 4,
|
||||
position: "relative",
|
||||
top: 1,
|
||||
left: -1,
|
||||
}}
|
||||
>
|
||||
{emoji("🧫")}
|
||||
</span>
|
||||
Create new <strong>category</strong>
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
// import React from "react";
|
||||
// import { connect } from "react-redux";
|
||||
// import AnnoDialog from "../annoDialog";
|
||||
// // import LabelInput from "../labelInput";
|
||||
// // import { labelPrompt, isLabelErroneous } from "../labelUtil";
|
||||
// import actions from "../../actions";
|
||||
|
||||
// @connect((state) => ({
|
||||
// annotations: state.annotations,
|
||||
// schema: state.annoMatrix?.schema,
|
||||
// ontology: state.ontology,
|
||||
// obsCrossfilter: state.obsCrossfilter,
|
||||
// }))
|
||||
// class CreateGenesetDialogue extends React.PureComponent {
|
||||
// constructor(props) {
|
||||
// super(props);
|
||||
// this.state = {
|
||||
// newLabelText: "",
|
||||
// };
|
||||
// }
|
||||
|
||||
// disableAddNewLabelMode = (e) => {
|
||||
// const { dispatch } = this.props;
|
||||
// this.setState({
|
||||
// newLabelText: "",
|
||||
// });
|
||||
// dispatch({
|
||||
// type: "annotation: disable add new label mode",
|
||||
// });
|
||||
// if (e) e.preventDefault();
|
||||
// };
|
||||
|
||||
// handleAddNewLabelToCategory = (e) => {
|
||||
// const { dispatch, metadataField } = this.props;
|
||||
// const { newLabelText } = this.state;
|
||||
|
||||
// this.disableAddNewLabelMode();
|
||||
// dispatch(
|
||||
// actions.annotationCreateLabelInCategory(
|
||||
// metadataField,
|
||||
// newLabelText,
|
||||
// false
|
||||
// )
|
||||
// );
|
||||
// e.preventDefault();
|
||||
// };
|
||||
|
||||
// addLabelAndAssignCells = (e) => {
|
||||
// const { dispatch, metadataField } = this.props;
|
||||
// const { newLabelText } = this.state;
|
||||
|
||||
// this.disableAddNewLabelMode();
|
||||
// dispatch(
|
||||
// actions.annotationCreateLabelInCategory(metadataField, newLabelText, true)
|
||||
// );
|
||||
// e.preventDefault();
|
||||
// };
|
||||
|
||||
// labelNameError = (name) => {
|
||||
// const { metadataField, ontology, schema } = this.props;
|
||||
// return isLabelErroneous(name, metadataField, ontology, schema);
|
||||
// };
|
||||
|
||||
// instruction = (label) => {
|
||||
// return labelPrompt(this.labelNameError(label), "New, unique label", ":");
|
||||
// };
|
||||
|
||||
// handleChangeOrSelect = (label) => {
|
||||
// this.setState({ newLabelText: label });
|
||||
// };
|
||||
|
||||
// render() {
|
||||
// const { newLabelText } = this.state;
|
||||
// const { metadataField, annotations, ontology, obsCrossfilter } = this.props;
|
||||
// const ontologyEnabled = ontology?.enabled ?? false;
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// <AnnoDialog
|
||||
// isActive={
|
||||
// annotations.isAddingNewLabel &&
|
||||
// annotations.categoryAddingNewLabel === metadataField
|
||||
// }
|
||||
// inputProps={{ "data-testid": `${metadataField}:create-label-dialog` }}
|
||||
// primaryButtonProps={{
|
||||
// "data-testid": `${metadataField}:submit-label`,
|
||||
// }}
|
||||
// title="Add new label to category"
|
||||
// instruction={this.instruction(newLabelText)}
|
||||
// cancelTooltipContent="Close this dialog without adding a label."
|
||||
// primaryButtonText="Add label"
|
||||
// secondaryButtonText={`Add label & assign ${obsCrossfilter.countSelected()} selected cells`}
|
||||
// handleSecondaryButtonSubmit={this.addLabelAndAssignCells}
|
||||
// text={newLabelText}
|
||||
// validationError={this.labelNameError(newLabelText)}
|
||||
// handleSubmit={this.handleAddNewLabelToCategory}
|
||||
// handleCancel={this.disableAddNewLabelMode}
|
||||
// annoInput={
|
||||
// <LabelInput
|
||||
// labelSuggestions={ontologyEnabled ? ontology.terms : null}
|
||||
// onChange={this.handleChangeOrSelect}
|
||||
// onSelect={this.handleChangeOrSelect}
|
||||
// inputProps={{
|
||||
// "data-testid": `${metadataField}:new-label-name`,
|
||||
// leftIcon: "tag",
|
||||
// intent: "none",
|
||||
// autoFocus: true,
|
||||
// }}
|
||||
// />
|
||||
// }
|
||||
// />
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
|
||||
// export default CreateGenesetDialogue;
|
||||
@@ -4,34 +4,32 @@
|
||||
import React from "react";
|
||||
import _ from "lodash";
|
||||
import { connect } from "react-redux";
|
||||
import HistogramBrush from "../brushableHistogram";
|
||||
import { Icon } from "@blueprintjs/core";
|
||||
import * as globals from "../../globals";
|
||||
import actions from "../../actions";
|
||||
import Gene from "./gene";
|
||||
import { Button, ButtonGroup, Tooltip } from "@blueprintjs/core";
|
||||
import {
|
||||
postUserErrorToast,
|
||||
keepAroundErrorToast
|
||||
} from "../framework/toasters";
|
||||
import { memoize } from "../../util/dataframe/util";
|
||||
import Truncate from "../util/truncate";
|
||||
|
||||
@connect(state => {
|
||||
@connect((state) => {
|
||||
return {
|
||||
world: state.world,
|
||||
userDefinedGenes: state.controls.userDefinedGenes,
|
||||
userDefinedGenesLoading: state.controls.userDefinedGenesLoading
|
||||
userDefinedGenesLoading: state.controls.userDefinedGenesLoading,
|
||||
};
|
||||
})
|
||||
class GeneSet extends React.Component {
|
||||
_memoGenesToUpper = memoize(this._genesToUpper, (arr) => arr);
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isOpen: false,
|
||||
haveFetched: false
|
||||
haveFetched: false,
|
||||
};
|
||||
}
|
||||
|
||||
_genesToUpper = listGenes => {
|
||||
_genesToUpper = (listGenes) => {
|
||||
// Has to be a Map to preserve index
|
||||
const upperGenes = new Map();
|
||||
for (let i = 0, { length } = listGenes; i < length; i += 1) {
|
||||
@@ -41,23 +39,19 @@ class GeneSet extends React.Component {
|
||||
return upperGenes;
|
||||
};
|
||||
|
||||
_memoGenesToUpper = memoize(this._genesToUpper, arr => arr);
|
||||
|
||||
fetchGenes = () => {
|
||||
const { world, dispatch, userDefinedGenes, setGenes } = this.props;
|
||||
const { world, dispatch, setGenes } = this.props;
|
||||
const varIndexName = world.schema.annotations.var.index;
|
||||
const { haveFetched } = this.state;
|
||||
|
||||
const worldGenes = world.varAnnotations.col(varIndexName).asArray();
|
||||
|
||||
const upperGenes = this._genesToUpper(setGenes);
|
||||
const upperUserDefinedGenes = this._genesToUpper(userDefinedGenes);
|
||||
const upperWorldGenes = this._memoGenesToUpper(worldGenes);
|
||||
|
||||
dispatch({ type: "bulk user defined gene start" });
|
||||
|
||||
Promise.all(
|
||||
[...upperGenes.keys()].map(upperGene => {
|
||||
[...upperGenes.keys()].map((upperGene) => {
|
||||
/* Unlike bulk add... with gene sets this test needs to be within the set... */
|
||||
// if (upperUserDefinedGenes.get(upperGene) !== undefined) {
|
||||
// return keepAroundErrorToast(`${upperGene} already exists`);
|
||||
@@ -87,25 +81,54 @@ class GeneSet extends React.Component {
|
||||
return undefined;
|
||||
};
|
||||
|
||||
onGenesetMenuClick = () => {
|
||||
const { isOpen, haveFetched } = this.state;
|
||||
this.setState({ isOpen: !isOpen });
|
||||
if (!haveFetched) {
|
||||
// this.fetchGenes(); TODO
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { setName, setGenes } = this.props;
|
||||
const { haveFetched, isOpen } = this.state;
|
||||
const { isOpen } = this.state;
|
||||
// console.log("geneSet setGenes variable: ", setGenes);
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
minimal
|
||||
onClick={() => {
|
||||
this.setState({ isOpen: !isOpen });
|
||||
if (!haveFetched) {
|
||||
this.fetchGenes();
|
||||
}
|
||||
<span
|
||||
role="menuitem"
|
||||
tabIndex="0"
|
||||
data-testclass="geneset-expand"
|
||||
data-testid={`${setName}:geneset-expand`}
|
||||
onKeyPress={/* todo */ () => {}}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={this.onGenesetMenuClick}
|
||||
>
|
||||
{setName}
|
||||
</Button>
|
||||
<Truncate>
|
||||
<span
|
||||
style={{
|
||||
maxWidth: globals.leftSidebarWidth - 150,
|
||||
}}
|
||||
data-testid={`${setName}:geneset-label`}
|
||||
>
|
||||
{setName}
|
||||
</span>
|
||||
</Truncate>
|
||||
<Icon
|
||||
data-testclass={
|
||||
isOpen
|
||||
? "geneset-expand-is-expanded"
|
||||
: "geneset-expand-is-not-expanded"
|
||||
}
|
||||
icon={isOpen ? "caret-down" : "caret-right"}
|
||||
iconSize={14}
|
||||
/>
|
||||
</span>
|
||||
|
||||
{isOpen
|
||||
? _.map(setGenes, gene => {
|
||||
? _.map(setGenes, (gene) => {
|
||||
return <Gene key={gene} gene={gene} />;
|
||||
})
|
||||
: null}
|
||||
|
||||
@@ -3,10 +3,11 @@
|
||||
import React from "react";
|
||||
import _ from "lodash";
|
||||
import { connect } from "react-redux";
|
||||
import emoji from "react-easy-emoji";
|
||||
import { Button } from "@blueprintjs/core";
|
||||
import HistogramBrush from "../brushableHistogram";
|
||||
import * as globals from "../../globals";
|
||||
import GeneSet from "./geneSet";
|
||||
import AddGenes from "./addGenes";
|
||||
|
||||
import testGeneSets from "./test_data";
|
||||
|
||||
@@ -14,6 +15,7 @@ import testGeneSets from "./test_data";
|
||||
return {
|
||||
userDefinedGenes: state.controls.userDefinedGenes,
|
||||
differential: state.differential,
|
||||
genesets: state.genesets,
|
||||
};
|
||||
})
|
||||
class GeneExpression extends React.Component {
|
||||
@@ -29,8 +31,15 @@ class GeneExpression extends React.Component {
|
||||
return sets;
|
||||
};
|
||||
|
||||
handleActivateCreateGenesetMode = () => {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({ type: "geneset: activate add new geneset mode" });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { userDefinedGenes, differential } = this.props;
|
||||
const geneSetsFeatureEnabledTODO = true;
|
||||
console.log("genesets", this.props);
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@@ -38,7 +47,28 @@ class GeneExpression extends React.Component {
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<AddGenes />
|
||||
{geneSetsFeatureEnabledTODO ? (
|
||||
<div>
|
||||
<Button
|
||||
data-testid="open-create-geneset-dialog"
|
||||
onClick={this.handleActivateCreateGenesetMode}
|
||||
intent="none"
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
marginRight: 4,
|
||||
position: "relative",
|
||||
top: 1,
|
||||
left: -1,
|
||||
}}
|
||||
>
|
||||
{emoji("🧬")}
|
||||
</span>
|
||||
Create new <strong>geneset</strong>
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
{/* <AddGenes /> */}
|
||||
{userDefinedGenes.length > 0
|
||||
? _.map(userDefinedGenes, (geneName, index) => {
|
||||
return (
|
||||
|
||||
@@ -22,6 +22,7 @@ class RightSidebar extends React.Component {
|
||||
overflowY: "inherit",
|
||||
height: "inherit",
|
||||
width: "inherit",
|
||||
padding: globals.leftSidebarSectionPadding,
|
||||
}}
|
||||
>
|
||||
<GeneExpression />
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
/*
|
||||
Reducers for geneset UI-state.
|
||||
*/
|
||||
const GeneSets = (
|
||||
state = {
|
||||
addGenesetModeActive: false,
|
||||
isEditingGenesetName: false,
|
||||
genesetAddingNewGenes: null,
|
||||
},
|
||||
action
|
||||
) => {
|
||||
switch (action.type) {
|
||||
case "geneset: activate add new geneset mode": {
|
||||
return {
|
||||
...state,
|
||||
addGenesetModeActive: true,
|
||||
};
|
||||
}
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
export default GeneSets;
|
||||
@@ -14,6 +14,7 @@ import differential from "./differential";
|
||||
import layoutChoice from "./layoutChoice";
|
||||
import controls from "./controls";
|
||||
import annotations from "./annotations";
|
||||
import genesets from "./genesets";
|
||||
import autosave from "./autosave";
|
||||
import ontology from "./ontology";
|
||||
import centroidLabels from "./centroidLabels";
|
||||
@@ -30,6 +31,7 @@ const Reducer = undoable(
|
||||
["obsCrossfilter", obsCrossfilter],
|
||||
["ontology", ontology],
|
||||
["annotations", annotations],
|
||||
["genesets", genesets],
|
||||
["layoutChoice", layoutChoice],
|
||||
["categoricalSelection", categoricalSelection],
|
||||
["continuousSelection", continuousSelection],
|
||||
|
||||
Reference in New Issue
Block a user