Merge branch 'hspitzley/additional_ingress_rules' of github.com:chanz…

…uckerberg/single-cell-explorer into hspitzley/additional_ingress_rules

client/__tests__/e2e/e2e.test.ts

@@ -70,6 +70,7 @@ import {
   toggleSidePanel,
 } from "../util/helpers";
 import { SCALE_MAX } from "../../src/util/constants";
+import { PANEL_EMBEDDING_MINIMIZE_TOGGLE_TEST_ID } from "../../src/components/PanelEmbedding/constants";
 
 const { describe, skip } = test;
 
@@ -1467,7 +1468,38 @@ for (const testDataset of testDatasets) {
 
             await downloadAndSnapshotImage(page, testInfo);
           });
+
+          test("with side panel", async ({ page }) => {
+            await goToPage(page, url);
+
+            await toggleSidePanel(page);
+
+            const downloads: Download[] = [];
+
+            page.on("download", (downloadData) => {
+              downloads.push(downloadData);
+            });
+
+            await page.getByTestId("download-graph-button").click();
+
+            expect(downloads.length).toBe(2);
+
+            const afterMinimizeDownloads: Download[] = [];
+
+            await page
+              .getByTestId(PANEL_EMBEDDING_MINIMIZE_TOGGLE_TEST_ID)
+              .click();
+
+            page.on("download", (downloadData) => {
+              afterMinimizeDownloads.push(downloadData);
+            });
+
+            await page.getByTestId("download-graph-button").click();
+
+            expect(afterMinimizeDownloads.length).toBe(1);
+          });
         });
+
         describeFn("Side Panel", () => {
           test("open and close side panel", async ({ page }, testInfo) => {
             await goToPage(page, url);

client/__tests__/util/helpers.ts

@@ -288,10 +288,7 @@ export async function conditionallyToggleSidePanel(
 }
 
 export function skipIfSidePanel(graphTestId: string, MAIN_PANEL: string) {
-  const message = "This test is only for the main panel";
-  if (graphTestId !== MAIN_PANEL) {
-    skip(true, message);
-  }
+  skip(graphTestId !== MAIN_PANEL, "This test is only for the main panel");
 }
 
 export function shouldSkipTests(

client/src/components/PanelEmbedding/constants.ts

@@ -0,0 +1,2 @@
+export const PANEL_EMBEDDING_MINIMIZE_TOGGLE_TEST_ID =
+  "panel-embedding-minimize-toggle";

client/src/components/PanelEmbedding/index.tsx

@@ -10,6 +10,7 @@ import Controls from "../controls";
 import Embedding from "../embedding";
 import { AppDispatch, RootState } from "../../reducers";
 import actions from "../../actions";
+import { PANEL_EMBEDDING_MINIMIZE_TOGGLE_TEST_ID } from "./constants";
 
 interface StateProps {
   isMinimized: boolean;
@@ -94,6 +95,7 @@ const PanelEmbedding = (props: StateProps & DispatchProps) => {
           >
             <Button
               type="button"
+              data-testid={PANEL_EMBEDDING_MINIMIZE_TOGGLE_TEST_ID}
               icon={isMinimized ? IconNames.MAXIMIZE : IconNames.MINIMIZE}
               onClick={() => {
                 dispatch({

client/src/components/graph/graph.tsx

@@ -47,6 +47,7 @@ import {
   getSpatialPrefixUrl,
   getSpatialTileSources,
   loadImage,
+  shouldSkipSidePanelImage,
   sidePanelAttributeNameChange,
 } from "./util";
 
@@ -85,6 +86,7 @@ const mapStateToProps = (state: RootState, ownProps: OwnProps): StateProps => ({
   imageUnderlay: state.controls.imageUnderlay,
   config: state.config,
   isSidePanelOpen: state.panelEmbedding.open,
+  isSidePanelMinimized: state.panelEmbedding.minimized,
   sidePanelLayoutChoice: state.panelEmbedding.layoutChoice,
 });
 
@@ -302,6 +304,8 @@ class Graph extends React.Component<GraphProps, GraphState> {
       screenCap,
       imageUnderlay,
       layoutChoice,
+      isHidden,
+      isSidePanel,
     } = this.props;
 
     const { toolSVG, viewport } = this.state;
@@ -342,7 +346,7 @@ class Graph extends React.Component<GraphProps, GraphState> {
       stateChanges.toolSVG
     ) {
       const { tool } = this.state;
-      this.selectionToolUpdate(stateChanges.tool ? stateChanges.tool : tool!);
+      this.selectionToolUpdate(stateChanges.tool ? stateChanges.tool : tool);
     }
 
     if (Object.keys(stateChanges).length > 0) {
@@ -368,6 +372,14 @@ class Graph extends React.Component<GraphProps, GraphState> {
     if (prevProps.layoutChoice.current !== layoutChoice.current) {
       this.handleResize();
     }
+
+    /**
+     * (thuang): We need to resize the graph when the side panel is expanded
+     * from minimized state to prevent squished graph.
+     */
+    if (isSidePanel && prevProps.isHidden && !isHidden) {
+      this.handleResize();
+    }
   }
 
   componentWillUnmount(): void {
@@ -561,9 +573,16 @@ class Graph extends React.Component<GraphProps, GraphState> {
       isSidePanelOpen,
       sidePanelLayoutChoice,
       isSidePanel,
+      isSidePanelMinimized,
     } = this.props;
 
-    if (!this.reglCanvas || !screenCap || !regl || this.isDownloadingImage) {
+    if (
+      !this.reglCanvas ||
+      !screenCap ||
+      !regl ||
+      this.isDownloadingImage ||
+      shouldSkipSidePanelImage(this.props)
+    ) {
       return;
     }
 
@@ -655,7 +674,7 @@ class Graph extends React.Component<GraphProps, GraphState> {
         if (!isSidePanel) {
           track(
             EVENTS.EXPLORER_DOWNLOAD_COMPLETE,
-            isSidePanelOpen
+            isSidePanelOpen && !isSidePanelMinimized
               ? {
                   embedding: layoutChoice.current,
                   side_by_side: sidePanelLayoutChoice?.current,
@@ -910,7 +929,7 @@ class Graph extends React.Component<GraphProps, GraphState> {
     return Promise.all(promises);
   }
 
-  lassoToolUpdate(tool: LassoFunctionWithAttributes): void {
+  lassoToolUpdate(tool: LassoFunctionWithAttributes | null): void {
     /*
         this is called from componentDidUpdate(), so be very careful using
         anything from this.state, which may be updated asynchronously.
@@ -923,9 +942,9 @@ class Graph extends React.Component<GraphProps, GraphState> {
       const polygon = currentSelection.polygon.map((p: [number, number]) =>
         this.mapPointToScreen(p)
       );
-      tool.move(polygon);
+      tool?.move(polygon);
     } else {
-      tool.reset();
+      tool?.reset();
     }
   }
 

client/src/components/graph/types.ts

@@ -8,7 +8,7 @@ import { Camera } from "../../util/camera";
 
 import { Dataframe } from "../../util/dataframe";
 
-import { LassoFunctionWithAttributes } from "./setupLasso";
+import { type LassoFunctionWithAttributes } from "./setupLasso";
 
 import { AppDispatch, RootState } from "../../reducers";
 
@@ -60,6 +60,7 @@ export interface StateProps {
   imageUnderlay: RootState["controls"]["imageUnderlay"];
   config: RootState["config"];
   isSidePanelOpen: RootState["panelEmbedding"]["open"];
+  isSidePanelMinimized: RootState["panelEmbedding"]["minimized"];
   sidePanelLayoutChoice: RootState["panelEmbedding"]["layoutChoice"];
 }
 

client/src/components/graph/util.ts

@@ -1,6 +1,7 @@
 import { mat3 } from "gl-matrix";
 import { toPng } from "html-to-image";
 import { LayoutChoiceState } from "../../reducers/layoutChoice";
+import { GraphProps } from "./types";
 
 export function sidePanelAttributeNameChange(
   name: string,
@@ -208,3 +209,14 @@ export function downloadImage(
     a.remove();
   }, 1000);
 }
+
+/**
+ * (thuang): Product requirement that the side panel should NOT be included
+ * in the download when it's minimized
+ */
+export function shouldSkipSidePanelImage({
+  isSidePanel,
+  isSidePanelMinimized,
+}: GraphProps) {
+  return isSidePanel && isSidePanelMinimized;
+}