set row and column

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"}
             />
           </Tooltip>
         </div>
@@ -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}
           />
         </div>
         <div style={{ marginLeft: 26 }}>

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) {

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 icon="tint" iconSize={16} />}
+                icon={
+                  <Icon icon={dotplot ? "layout-grid" : "tint"} iconSize={16} />
+                }
               />
             </Tooltip2>
           </>

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,

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

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