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",