feat: Deep zoom (#929)

Co-authored-by: Ronen <[email protected]>

client/__tests__/e2e/data.ts

@@ -190,7 +190,7 @@ export const datasets = {
       lasso: [
         {
           "coordinates-as-percent": { x1: 0.1, y1: 0.25, x2: 0.7, y2: 0.75 },
-          count: "2114",
+          count: "2025",
         },
       ],
       categorical: [
@@ -254,7 +254,7 @@ export const datasets = {
       panzoom: {
         lasso: {
           "coordinates-as-percent": { x1: 0.3, y1: 0.3, x2: 0.5, y2: 0.5 },
-          count: "237",
+          count: "221",
         },
       },
     },
@@ -288,11 +288,11 @@ export const datasets = {
     },
     brushOnGenesetMean: {
       default: "74",
-      withSubset: "69",
+      withSubset: "67",
     },
     expandGeneAndBrush: {
       default: "52",
-      withSubset: "49",
+      withSubset: "47",
     },
   },
 };

client/__tests__/e2e/e2e.test.ts

@@ -55,14 +55,14 @@ import {
 
 import { datasets } from "./data";
 
-import { scaleMax } from "../../src/util/camera";
 import {
   DATASET,
   pageURLTruncate,
   testURL,
   pageURLSpatial,
 } from "../common/constants";
 import { goToPage } from "../util/helpers";
+import { SCALE_MAX } from "../../src/util/constants";
 
 const { describe } = test;
 
@@ -514,7 +514,7 @@ for (const testDataset of testDatasets) {
           const newGraph = page.getByTestId("graph-wrapper");
           const newDistance =
             (await newGraph.getAttribute("data-camera-distance")) ?? "-1";
-          expect(parseFloat(newDistance)).toBe(scaleMax);
+          expect(parseFloat(newDistance)).toBe(SCALE_MAX);
         },
         { page }
       );

client/package.json

@@ -83,6 +83,7 @@
     "lodash.sortby": "^4.7.0",
     "lodash.uniq": "^4.5.0",
     "memoize-one": "^5.1.1",
+    "openseadragon": "^4.1.1",
     "pako": "^2.0.3",
     "react": "^17.0.2",
     "react-async": "^10.0.1",
@@ -145,6 +146,7 @@
     "@types/lodash.uniq": "^4.5.6",
     "@types/lodash.zip": "^4.2.6",
     "@types/node": "^20.10.6",
+    "@types/openseadragon": "^3.0.10",
     "@types/pako": "^1.0.2",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",

client/src/actions/config.ts

@@ -0,0 +1,5 @@
+export function fetchDeepZoomImageFailed() {
+  return {
+    type: "fetchDeepZoomImageFailed",
+  };
+}

client/src/actions/index.ts

@@ -16,12 +16,7 @@ import * as genesetActions from "./geneset";
 import { AppDispatch, GetState } from "../reducers";
 import { EmbeddingSchema, Field, Schema } from "../common/types/schema";
 import { ConvertedUserColors } from "../reducers/colors";
-import type {
-  DatasetMetadata,
-  Dataset,
-  S3URI,
-  DatasetUnsMetadata,
-} from "../common/types/entities";
+import type { DatasetMetadata, Dataset, S3URI } from "../common/types/entities";
 import { postExplainNewTab } from "../components/framework/toasters";
 import { KEYS } from "../components/util/localStorage";
 import {
@@ -34,7 +29,7 @@ import { packDiffExPdu, DiffExMode, DiffExArguments } from "../util/diffexpdu";
 import { track } from "../analytics";
 import { EVENTS } from "../analytics/events";
 import AnnoMatrix from "../annoMatrix/annoMatrix";
-import { checkFeatureFlags } from "../util/featureFlags/featureFlags";
+
 import { DATASET_METADATA_RESPONSE } from "../../__tests__/__mocks__/apiMock";
 import { selectAvailableLayouts } from "../selectors/layoutChoice";
 import { getBestDefaultLayout } from "../reducers/layoutChoice";
@@ -133,30 +128,6 @@ async function datasetMetadataFetchAndLoad(
   });
 }
 
-/**
- * Fetches and loads dataset spatial metadata.
- * @param dispatch - Function facilitating update of store.
- */
-async function datasetUnsMetadataFetchAndLoad(
-  dispatch: AppDispatch,
-  metadataKey: string
-): Promise<void> {
-  try {
-    const datasetUnsMetadataResponse = await fetchJson<{
-      metadata: DatasetUnsMetadata;
-    }>(`uns/meta?key=${metadataKey}`);
-    dispatch({
-      type: "request uns metadata success",
-      data: datasetUnsMetadataResponse,
-    });
-  } catch (error) {
-    dispatch({
-      type: "request uns metadata error",
-      error,
-    });
-  }
-}
-
 interface GeneInfoAPI {
   ncbi_url: string;
   name: string;
@@ -205,14 +176,13 @@ const doInitialDataLoad = (): ((
 ) => void) =>
   catchErrorsWrap(async (dispatch: AppDispatch) => {
     dispatch({ type: "initial data load start" });
-    if (!globals.API) throw new Error("API not set");
 
-    // check URL for feature flags
-    checkFeatureFlags();
+    if (!globals.API) throw new Error("API not set");
 
     try {
       const s3URI = await s3URIFetch();
       const oldPrefix = globals.updateAPIWithS3(s3URI);
+
       const [config, schema] = await Promise.all([
         configFetchAndLoad(dispatch),
         schemaFetch(),
@@ -221,7 +191,7 @@ const doInitialDataLoad = (): ((
       ]);
 
       await datasetMetadataFetchAndLoad(dispatch, oldPrefix, config);
-      await datasetUnsMetadataFetchAndLoad(dispatch, "spatial");
+
       const baseDataUrl = `${globals.API.prefix}${globals.API.version}`;
       const annoMatrix = new AnnoMatrixLoader(baseDataUrl, schema.schema);
       const obsCrossfilter = new AnnoMatrixObsCrossfilter(annoMatrix);
@@ -247,9 +217,11 @@ const doInitialDataLoad = (): ((
         ? defaultLayout
         : fallbackLayout;
 
+      // save `isCellGuideCxg` and `s3URI` to the reducer store
       dispatch({
         type: "initial data load complete",
         isCellGuideCxg,
+        s3URI,
         layoutChoice: finalLayout,
       });
 

client/src/common/selectors.ts

@@ -0,0 +1,25 @@
+import { spatialEmbeddingKeyword } from "../globals";
+import { RootState } from "../reducers";
+import { selectIsDeepZoomSourceValid, selectS3URI } from "../selectors/config";
+import { getFeatureFlag } from "../util/featureFlags/featureFlags";
+import { FEATURES } from "../util/featureFlags/features";
+
+export function isSpatialMode(props: Partial<RootState>) {
+  const { layoutChoice } = props;
+
+  return layoutChoice?.current?.includes(spatialEmbeddingKeyword);
+}
+
+const isSpatial = getFeatureFlag(FEATURES.SPATIAL);
+
+/**
+ * (thuang): Selector to determine if the OpenSeadragon viewer should be shown
+ */
+export function shouldShowOpenseadragon(props: Partial<RootState>) {
+  return (
+    isSpatial &&
+    selectIsDeepZoomSourceValid(props) &&
+    selectS3URI(props) &&
+    isSpatialMode(props)
+  );
+}

client/src/common/types/entities.ts

@@ -62,18 +62,6 @@ export interface DatasetMetadata {
   s3_URI: S3URI;
 }
 
-/**
- * Represents the metadata for a dataset's uns (unstructured) data.
- */
-export type DatasetUnsMetadata = {
-  spatial: {
-    imageWidth: number;
-    imageHeight: number;
-    libraryId: string;
-    image: string;
-  };
-};
-
 export type S3URI = string;
 
 /**

client/src/components/graph/constants.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from "react";
+
+/**
+ * (thuang): Copied from the style of the graph-canvas element
+ * to ensure both openseadragon and the canvas are resizable
+ */
+export const COMMON_CANVAS_STYLE: CSSProperties = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  padding: 0,
+  margin: 0,
+};