diff --git a/client/src/components/categorical/category/index.js b/client/src/components/categorical/category/index.js index 4444702b..a87499bc 100644 --- a/client/src/components/categorical/category/index.js +++ b/client/src/components/categorical/category/index.js @@ -45,6 +45,7 @@ const LABEL_WIDTH_ANNO = LABEL_WIDTH - ANNO_BUTTON_WIDTH; crossfilter: state.obsCrossfilter, isUserAnno, genesets: state.genesets.genesets, + dotplot: state.layoutChoice.dotplot, }; }) class Category extends React.PureComponent { @@ -83,11 +84,19 @@ class Category extends React.PureComponent { } handleColorChange = () => { - const { dispatch, metadataField } = this.props; - dispatch({ - type: "color by categorical metadata", - colorAccessor: metadataField, - }); + const { dispatch, metadataField, dotplot } = this.props; + + if (dotplot) { + dispatch({ + type: "set dotplot row", + data: metadataField, + }); + } else { + dispatch({ + type: "color by categorical metadata", + colorAccessor: metadataField, + }); + } }; handleCategoryClick = () => { @@ -220,6 +229,7 @@ class Category extends React.PureComponent { colors, annoMatrix, isUserAnno, + dotplot, } = this.props; const checkboxID = `category-select-${metadataField}`; @@ -278,6 +288,7 @@ class Category extends React.PureComponent { onCategoryToggleAllClick={handleCategoryToggleAllClick} onCategoryMenuClick={this.handleCategoryClick} onCategoryMenuKeyPress={this.handleCategoryKeyPress} + dotplot={dotplot} /> ); }} @@ -372,6 +383,7 @@ const CategoryHeader = React.memo( onCategoryMenuClick, onCategoryMenuKeyPress, onCategoryToggleAllClick, + dotplot, }) => { /* Render category name and controls (eg, color-by button). @@ -473,7 +485,7 @@ const CategoryHeader = React.memo( active={isColorAccessor} intent={isColorAccessor ? "primary" : "none"} disabled={isTruncated} - icon="tint" + icon={dotplot ? "layout-grid" : "tint"} /> @@ -500,6 +512,7 @@ const CategoryRender = React.memo( onCategoryMenuClick, onCategoryMenuKeyPress, onCategoryToggleAllClick, + dotplot, }) => { /* Render the core of the category, including checkboxes, controls, etc. @@ -544,6 +557,7 @@ const CategoryRender = React.memo( onCategoryToggleAllClick={onCategoryToggleAllClick} onCategoryMenuClick={onCategoryMenuClick} onCategoryMenuKeyPress={onCategoryMenuKeyPress} + dotplot={dotplot} />
diff --git a/client/src/components/dotplot/column.js b/client/src/components/dotplot/column.js index 6a5f46ee..64a3e5fd 100644 --- a/client/src/components/dotplot/column.js +++ b/client/src/components/dotplot/column.js @@ -21,6 +21,7 @@ import { genesets: state.genesets.genesets, pointDilation: state.pointDilation, differential: state.differential, + dotplot: state.dotplot, })) class Column extends React.Component { static watchAsync(props, prevProps) { diff --git a/client/src/components/geneExpression/menus/genesetMenus.js b/client/src/components/geneExpression/menus/genesetMenus.js index 1775066f..486911cb 100644 --- a/client/src/components/geneExpression/menus/genesetMenus.js +++ b/client/src/components/geneExpression/menus/genesetMenus.js @@ -21,6 +21,7 @@ import AddGeneToGenesetDialogue from "./addGeneToGenesetDialogue"; return { genesetsUI: state.genesetsUI, colorAccessor: state.colors.colorAccessor, + dotplot: state.layoutChoice.dotplot, }; }) class GenesetMenus extends React.PureComponent { @@ -47,12 +48,19 @@ class GenesetMenus extends React.PureComponent { }; handleColorByEntireGeneset = () => { - const { dispatch, geneset } = this.props; + const { dispatch, geneset, dotplot } = this.props; - dispatch({ - type: "color by geneset mean expression", - geneset, - }); + if (dotplot) { + dispatch({ + type: "set dotplot column", + data: geneset, + }); + } else { + dispatch({ + type: "color by geneset mean expression", + geneset, + }); + } }; handleDeleteGeneset = () => { @@ -61,7 +69,13 @@ class GenesetMenus extends React.PureComponent { }; render() { - const { geneset, genesetsEditable, createText, colorAccessor } = this.props; + const { + geneset, + genesetsEditable, + createText, + colorAccessor, + dotplot, + } = this.props; const isColorBy = geneset === colorAccessor; @@ -130,7 +144,9 @@ class GenesetMenus extends React.PureComponent { onClick={this.handleColorByEntireGeneset} data-testclass="colorby-entire-geneset" data-testid={`${geneset}:colorby-entire-geneset`} - icon={} + icon={ + + } /> diff --git a/client/src/reducers/dotplot.js b/client/src/reducers/dotplot.js index 96cf3846..cb858cde 100644 --- a/client/src/reducers/dotplot.js +++ b/client/src/reducers/dotplot.js @@ -7,11 +7,14 @@ const Dotplot = ( ) => { switch (action.type) { case "set dotplot row": + console.log("in dotplot reducer row is", action.data); return { ...state, row: action.data, }; case "set dotplot column": + console.log("in dotplot reducer COLUMN is", action.data); + return { ...state, column: action.data, diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js index 8f07bfe4..0bd667c4 100644 --- a/client/src/reducers/index.js +++ b/client/src/reducers/index.js @@ -17,6 +17,7 @@ import controls from "./controls"; import annotations from "./annotations"; import genesets from "./genesets"; import genesetsUI from "./genesetsUI"; +import dotplot from "./dotplot"; import autosave from "./autosave"; import centroidLabels from "./centroidLabels"; import pointDialation from "./pointDilation"; @@ -32,6 +33,7 @@ const Reducer = undoable( ["annotations", annotations], ["genesets", genesets], ["genesetsUI", genesetsUI], + ["dotplot", dotplot], ["layoutChoice", layoutChoice], ["categoricalSelection", categoricalSelection], ["continuousSelection", continuousSelection], diff --git a/client/src/reducers/undoableConfig.js b/client/src/reducers/undoableConfig.js index d18270ad..2d8fc60b 100644 --- a/client/src/reducers/undoableConfig.js +++ b/client/src/reducers/undoableConfig.js @@ -82,6 +82,10 @@ const saveOnActions = new Set([ "color by expression", "color by geneset mean expression", + "set dotplot row", + "set dotplot column", + "toggle dotplot", + "show centroid labels for category", "set scatterplot x",