From 99c8f37a609c5cc9e3255ea949eae81265ee8462 Mon Sep 17 00:00:00 2001
From: Colin Megill <colinmegill@gmail.com>
Date: Tue, 7 Dec 2021 15:53:56 -0800
Subject: [PATCH] button, reducer state

---
 client/src/components/menubar/index.js | 22 ++++++++++++++++++++++
 client/src/reducers/imageUnderlay.js   | 14 ++++++++++++++
 client/src/reducers/index.js           |  2 ++
 3 files changed, 38 insertions(+)
 create mode 100644 client/src/reducers/imageUnderlay.js

diff --git a/client/src/components/menubar/index.js b/client/src/components/menubar/index.js
index 03b41659..185f75ad 100644
--- a/client/src/components/menubar/index.js
+++ b/client/src/components/menubar/index.js
@@ -28,6 +28,7 @@ import { getEmbSubsetView } from "../../util/stateManager/viewStackHelpers";
     subsetPossible,
     subsetResetPossible,
     graphInteractionMode: state.controls.graphInteractionMode,
+    imageUnderlay: state.imageUnderlay,
     clipPercentileMin: Math.round(100 * (annoMatrix?.clipRange?.[0] ?? 0)),
     clipPercentileMax: Math.round(100 * (annoMatrix?.clipRange?.[1] ?? 1)),
     userDefinedGenes: state.controls.userDefinedGenes,
@@ -206,6 +207,7 @@ class MenuBar extends React.PureComponent {
       colorAccessor,
       subsetPossible,
       subsetResetPossible,
+      imageUnderlay,
     } = this.props;
     const { pendingClipPercentiles } = this.state;
 
@@ -268,6 +270,26 @@ class MenuBar extends React.PureComponent {
             disabled={!isColoredByCategorical}
           />
         </Tooltip>
+        <ButtonGroup className={styles.menubarButton}>
+          <Tooltip
+            content={"Toggle image"}
+            position="bottom"
+            hoverOpenDelay={globals.tooltipHoverOpenDelay}
+          >
+            <AnchorButton
+              type="button"
+              data-testid="toggle-image-underlay"
+              icon={"media"}
+              active={imageUnderlay.isActive}
+              onClick={() => {
+                dispatch({
+                  type: "toggle image underlay",
+                });
+              }}
+            />
+          </Tooltip>
+        </ButtonGroup>
+
         <ButtonGroup className={styles.menubarButton}>
           <Tooltip
             content={selectionTooltip}
diff --git a/client/src/reducers/imageUnderlay.js b/client/src/reducers/imageUnderlay.js
new file mode 100644
index 00000000..dc082be5
--- /dev/null
+++ b/client/src/reducers/imageUnderlay.js
@@ -0,0 +1,14 @@
+const imageUnderlay = (state = { isActive: false }, action) => {
+  switch (action.type) {
+    case "toggle image underlay":
+      return {
+        ...state,
+        isActive: !state.isActive,
+      };
+
+    default:
+      return state;
+  }
+};
+
+export default imageUnderlay;
diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js
index 29ace171..9f03fd91 100644
--- a/client/src/reducers/index.js
+++ b/client/src/reducers/index.js
@@ -19,6 +19,7 @@ import genesetsUI from "./genesetsUI";
 import autosave from "./autosave";
 import centroidLabels from "./centroidLabels";
 import pointDialation from "./pointDilation";
+import imageUnderlay from "./imageUnderlay";
 import { gcMiddleware as annoMatrixGC } from "../annoMatrix";
 
 import undoableConfig from "./undoableConfig";
@@ -39,6 +40,7 @@ const Reducer = undoable(
     ["controls", controls],
     ["differential", differential],
     ["centroidLabels", centroidLabels],
+    ["imageUnderlay", imageUnderlay],
     ["pointDilation", pointDialation],
     ["autosave", autosave],
   ]),