feat: enable image capture and download of graph (#817)

chanzuckerberg · Mar 8, 2024 · c00d3ab · c00d3ab
1 parent df7d42d
commit c00d3ab
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 29 deletions.
diff --git a/client/src/components/graph/graph.tsx b/client/src/components/graph/graph.tsx
@@ -142,6 +142,7 @@ type GraphProps = Partial<RootState>;
   pointDilation: state.pointDilation,
   genesets: state.genesets.genesets,
   screenCap: state.controls.screenCap,
+  mountCapture: state.controls.mountCapture,
   spatial: state.spatial.metadata,
   imageUnderlay: state.imageUnderlay,
 }))
@@ -939,8 +940,15 @@ class Graph extends React.Component<GraphProps, GraphState> {
     projectionTF: GraphState["projectionTF"],
     drawSpatialImage: GraphState["drawSpatialImage"]
   ): Promise<void> {
-    const { annoMatrix, dispatch, screenCap, spatial, imageUnderlay } =
-      this.props;
+    const {
+      annoMatrix,
+      dispatch,
+      screenCap,
+      mountCapture,
+      layoutChoice,
+      spatial,
+      imageUnderlay,
+    } = this.props;
     if (!this.reglCanvas || !annoMatrix) return;
     const { schema } = annoMatrix;
     const cameraTF = camera?.view();
@@ -999,26 +1007,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" });
       }
     }

diff --git a/client/src/components/menubar/index.tsx b/client/src/components/menubar/index.tsx
@@ -293,8 +293,9 @@ class MenuBar extends React.PureComponent<{}, State> {
 
     const isColoredByCategorical = !!categoricalSelection?.[colorAccessor];
 
-    const isSpatial = getFeatureFlag(FEATURES.SPATIAL);
     const isTest = getFeatureFlag(FEATURES.TEST);
+    const isDownload = getFeatureFlag(FEATURES.DOWNLOAD);
+    const isSpatial = getFeatureFlag(FEATURES.SPATIAL);
     // constants used to create selection tool button
     const [selectionTooltip, selectionButtonIcon] =
       selectionTool === "brush"
@@ -344,6 +345,23 @@ class MenuBar extends React.PureComponent<{}, State> {
               />
             </ButtonGroup>
           ) : null}
+          {isDownload && (
+            <Tooltip
+              content="Download the current graph view as a PNG"
+              position="bottom"
+              hoverOpenDelay={globals.tooltipHoverOpenDelay}
+            >
+              <AnchorButton
+                className={styles.menubarButton}
+                type="button"
+                icon={IconNames.CAMERA}
+                style={{
+                  cursor: "pointer",
+                }}
+                onClick={() => dispatch({ type: "graph: screencap start" })}
+              />
+            </Tooltip>
+          )}
           {isTest && (
             <Tooltip
               content="🌊"
@@ -359,7 +377,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>
           )}

diff --git a/client/src/reducers/controls.ts b/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.
   */
@@ -281,7 +285,7 @@ const Controls = (
       return {
         ...state,
         geneIsOpen: false,
-        geneIsMinimized: null,
+        geneIsMinimized: false,
         geneLevel: stackLevels.geneLevel,
         scatterplotLevel: stackLevels.scatterplotLevel,
         infoError: action.infoError,
@@ -392,9 +396,9 @@ const Controls = (
 
       return {
         ...state,
-        scatterplotXXaccessor: null,
-        scatterplotYYaccessor: null,
-        scatterplotIsMinimized: null,
+        scatterplotXXaccessor: false,
+        scatterplotYYaccessor: false,
+        scatterplotIsMinimized: false,
         scatterplotLevel: state.scatterplotLevel,
       };
     }
@@ -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;
   }

diff --git a/client/src/util/featureFlags/features.ts b/client/src/util/featureFlags/features.ts
@@ -1,4 +1,5 @@
 export enum FEATURES {
   SPATIAL = "spatial",
   TEST = "test",
+  DOWNLOAD = "dl",
 }