feat: enable image capture and download of graph

client/src/components/graph/graph.tsx

@@ -123,6 +123,7 @@ type GraphProps = Partial<RootState>;
   pointDilation: state.pointDilation,
   genesets: state.genesets.genesets,
   screenCap: state.controls.screenCap,
+  mountCapture: state.controls.mountCapture,
 }))
 class Graph extends React.Component<GraphProps, GraphState> {
   static createReglState(canvas: HTMLCanvasElement) {
@@ -855,7 +856,8 @@ class Graph extends React.Component<GraphProps, GraphState> {
     camera: GraphState["camera"],
     projectionTF: GraphState["projectionTF"]
   ) {
-    const { annoMatrix, dispatch, screenCap } = this.props;
+    const { annoMatrix, dispatch, screenCap, mountCapture, layoutChoice } =
+      this.props;
     if (!this.reglCanvas || !annoMatrix) return;
     const { schema } = annoMatrix;
     const cameraTF = camera!.view();
@@ -886,26 +888,21 @@ class Graph extends React.Component<GraphProps, GraphState> {
         // the library is having issues with loading bp3 icons, its checking `/static/static/images` for some reason
         skipFonts: true,
       });
-      this.setState({ testImageSrc: imageURI });
-      try {
-        // TODO: DOWNLOAD IMAGE
-        // const a = document.createElement("a");
-        // a.href = imageURL;
-        // a.download = `${layoutChoice.current.split(";;").at(-1)}_emb.png`;
-        // a.style.display = "none";
-        // document.body.append(a);
-        // a.click();
-        // // Revoke the blob URL and remove the element.
-        // setTimeout(() => {
-        //   URL.revokeObjectURL(imageURL);
-        //   a.remove();
-        // }, 1000);
-      } catch (err) {
-        // Fail silently if the user has simply canceled the dialog.
-        if (err instanceof Error && err.name !== "AbortError") {
-          console.error(err.name, err.message);
-        }
-      } finally {
+      if (mountCapture) {
+        this.setState({ testImageSrc: imageURI });
+        dispatch({ type: "test: screencap end" });
+      } else {
+        const a = document.createElement("a");
+        a.href = imageURI;
+        a.download = `${layoutChoice.current.split(";;").at(-1)}_emb.png`;
+        a.style.display = "none";
+        document.body.append(a);
+        a.click();
+        // Revoke the blob URL and remove the element.
+        setTimeout(() => {
+          URL.revokeObjectURL(imageURI);
+          a.remove();
+        }, 1000);
         dispatch({ type: "graph: screencap end" });
       }
     }

client/src/components/menubar/index.tsx

@@ -288,6 +288,7 @@ class MenuBar extends React.PureComponent<{}, State> {
 
     const isSpatial = getFeatureFlag(FEATURES.SPATIAL);
     const isTest = getFeatureFlag(FEATURES.TEST);
+    const isDownload = getFeatureFlag(FEATURES.DOWNLOAD);
     // constants used to create selection tool button
     const [selectionTooltip, selectionButtonIcon] =
       selectionTool === "brush"
@@ -337,20 +338,20 @@ class MenuBar extends React.PureComponent<{}, State> {
               />
             </ButtonGroup>
           ) : null}
-          {isSpatial && (
+          {isDownload && (
             <Tooltip
-              content="🌊"
+              content="Download the current graph view as a PNG"
               position="bottom"
               hoverOpenDelay={globals.tooltipHoverOpenDelay}
             >
               <AnchorButton
                 className={styles.menubarButton}
                 type="button"
-                icon={IconNames.TRAIN}
+                icon={IconNames.CAMERA}
                 style={{
                   cursor: "pointer",
                 }}
-                onClick={noop}
+                onClick={() => dispatch({ type: "graph: screencap start" })}
               />
             </Tooltip>
           )}
@@ -369,7 +370,7 @@ class MenuBar extends React.PureComponent<{}, State> {
                 }}
                 data-testid="capture-and-display-graph"
                 loading={screenCap}
-                onClick={() => dispatch({ type: "graph: screencap start" })}
+                onClick={() => dispatch({ type: "test: screencap start" })}
               />
             </Tooltip>
           )}

client/src/reducers/controls.ts

@@ -69,6 +69,8 @@ interface ControlsState {
   geneSynonyms: string[];
   isCellGuideCxg: boolean;
   screenCap: boolean;
+  mountCapture: boolean;
+  showWarningBanner: boolean;
 }
 const Controls = (
   state: ControlsState = {
@@ -97,9 +99,11 @@ const Controls = (
     datasetDrawer: false,
     isCellGuideCxg: false,
     screenCap: false,
+    mountCapture: false,
+    showWarningBanner: false,
   },
   action: AnyAction
-) => {
+): ControlsState => {
   /*
   For now, log anything looking like an error to the console.
   */
@@ -421,6 +425,21 @@ const Controls = (
       };
     }
 
+    case "test: screencap start": {
+      return {
+        ...state,
+        screenCap: true,
+        mountCapture: true,
+      };
+    }
+    case "test: screencap end": {
+      return {
+        ...state,
+        screenCap: false,
+        mountCapture: false,
+      };
+    }
+
     default:
       return state;
   }

client/src/util/featureFlags/features.ts

@@ -1,4 +1,5 @@
 export enum FEATURES {
   SPATIAL = "spatial",
   TEST = "test",
+  DOWNLOAD = "dl",
 }