toggle and scale dotplot

client/src/components/app.js

@@ -79,11 +79,12 @@ class App extends React.Component {
                 <Autosave />
                 <TermsOfServicePrompt />
                 <Legend viewportRef={viewportRef} />
-                {layoutChoice.dotplot ? (
+                {layoutChoice.dotplot && <Dotplot viewportRef={viewportRef} />}
-                  <Dotplot viewportRef={viewportRef} />
+                <Graph
-                ) : (
+                  key={graphRenderCounter}
-                  <Graph key={graphRenderCounter} viewportRef={viewportRef} />
+                  dotplotMode={layoutChoice.dotplot}
-                )}
+                  viewportRef={viewportRef}
+                />
               </>
             )}
             <RightSideBar />

client/src/components/dotplot/index.js

@@ -15,6 +15,7 @@ class Dotplot extends React.Component {
     this.dotplotTopPadding = 120;
     this.dotplotLeftPadding = 170;
     this.rowColumnSize = 15;
+    this.dotplotBrowserScalingFactor = 0.65;
 
     this.state = {
       viewport,
@@ -23,10 +24,13 @@ class Dotplot extends React.Component {
 
   componentDidMount() {
     window.addEventListener("resize", this.handleResize);
+    /* chrome only, which is support matrix as of 2021 */
+    document.body.style.zoom = `${this.dotplotBrowserScalingFactor * 100}%`;
   }
 
   componentWillUnmount() {
     window.removeEventListener("resize", this.handleResize);
+    document.body.style.zoom = "100%";
   }
 
   getViewportDimensions = () => {
@@ -56,6 +60,7 @@ class Dotplot extends React.Component {
           position: "relative",
           top: 0,
           left: 0,
+          zIndex: -9999,
         }}
       >
         <svg
@@ -66,8 +71,8 @@ class Dotplot extends React.Component {
             left: 0,
             zIndex: 1,
           }}
-          width={viewport.width}
+          width={viewport.width * (1 + this.dotplotBrowserScalingFactor)}
-          height={viewport.height}
+          height={viewport.height * (1 + this.dotplotBrowserScalingFactor)}
         >
           <g
             id="dotplot_help_text"

client/src/components/embedding/index.js

@@ -20,6 +20,7 @@ import { getDiscreteCellEmbeddingRowIndex } from "../../util/stateManager/viewSt
     layoutChoice: state.layoutChoice, // TODO: really should clean up naming, s/layout/embedding/g
     schema: state.annoMatrix?.schema,
     crossfilter: state.obsCrossfilter,
+    dotplot: state.layoutChoice.dotplot,
   };
 })
 class Embedding extends React.PureComponent {
@@ -34,16 +35,16 @@ class Embedding extends React.PureComponent {
   };
 
   render() {
-    const { layoutChoice, schema, crossfilter } = this.props;
+    const { layoutChoice, schema, crossfilter, dotplot } = this.props;
     const { annoMatrix } = crossfilter;
     return (
       <ButtonGroup
         style={{
           position: "absolute",
-          display: "inherit",
           left: 8,
           bottom: 8,
           zIndex: 9999,
+          display: dotplot ? "none" : "inherit",
         }}
       >
         <Popover

client/src/components/geneExpression/menus/genesetMenus.js

@@ -22,6 +22,7 @@ import AddGeneToGenesetDialogue from "./addGeneToGenesetDialogue";
     genesetsUI: state.genesetsUI,
     colorAccessor: state.colors.colorAccessor,
     dotplot: state.layoutChoice.dotplot,
+    dotplotColumns: state.dotplot.column,
   };
 })
 class GenesetMenus extends React.PureComponent {
@@ -75,9 +76,11 @@ class GenesetMenus extends React.PureComponent {
       createText,
       colorAccessor,
       dotplot,
+      dotplotColumns,
     } = this.props;
 
     const isColorBy = geneset === colorAccessor;
+    const isDotplotColumns = geneset === dotplotColumns;
 
     return (
       <>
@@ -138,8 +141,8 @@ class GenesetMenus extends React.PureComponent {
               hoverOpenDelay={globals.tooltipHoverOpenDelay}
             >
               <AnchorButton
-                active={isColorBy}
+                active={isColorBy || isDotplotColumns}
-                intent={isColorBy ? "primary" : "none"}
+                intent={isColorBy || isDotplotColumns ? "primary" : "none"}
                 style={{ marginLeft: 0 }}
                 onClick={this.handleColorByEntireGeneset}
                 data-testclass="colorby-entire-geneset"

client/src/components/graph/graph.js

@@ -833,6 +833,7 @@ class Graph extends React.Component {
       layoutChoice,
       pointDilation,
       crossfilter,
+      dotplotMode,
     } = this.props;
     const { modelTF, projectionTF, camera, viewport, regl } = this.state;
     const cameraTF = camera?.view()?.slice();
@@ -844,6 +845,7 @@ class Graph extends React.Component {
           position: "relative",
           top: 0,
           left: 0,
+          display: dotplotMode ? "none" : "inherit",
         }}
       >
         <GraphOverlayLayer

client/src/reducers/colors.js

@@ -5,7 +5,7 @@ Color By UI state
 const ColorsReducer = (
   state = {
     /* TODO(colinmegill) #632 remove hardcode for dev */
-    colorMode: "color by dotplot columns" /* by continuous, by expression */,
+    colorMode: null /* by continuous, by expression */,
     colorAccessor: null /* tissue, Apod */,
   },
   action
@@ -52,7 +52,17 @@ const ColorsReducer = (
       };
     }
 
-    case "color by dotplot columns":
+    case "toggle dotplot": {
+      return {
+        ...state,
+        colorMode:
+          state.colorMode === "color by dotplot columns"
+            ? null
+            : "color by dotplot columns",
+        colorAccessor: null,
+      };
+    }
+
     case "color by categorical metadata":
     case "color by continuous metadata": {
       /* toggle between this mode and reset */

client/src/reducers/dotplot.js

@@ -16,6 +16,12 @@ const Dotplot = (
         ...state,
         column: action.data,
       };
+    case "toggle dotplot":
+      return {
+        ...state,
+        row: null,
+        column: null,
+      };
     default:
       return state;
   }

client/src/reducers/layoutChoice.js

@@ -24,7 +24,7 @@ function setToDefaultLayout(schema) {
 const LayoutChoice = (
   state = {
     available: [], // all available choices
-    dotplot: true, // is the dotplot toggled on, or not
+    dotplot: false, // is the dotplot toggled on, or not
     current: undefined, // name of the current layout, eg, 'umap'
     currentDimNames: [], // dimension name
   },
@@ -42,7 +42,6 @@ const LayoutChoice = (
     }
 
     case "toggle dotplot": {
-      console.log("toggle: state, newstate", state.dotplot, !state.dotplot);
       return {
         ...state,
         dotplot: !state.dotplot,