feat: cell type info and info panel refactor (#1043)

Co-authored-by: Timmy Huang <[email protected]>
chanzuckerberg · Jul 23, 2024 · f4ddb1a · f4ddb1a
1 parent ec42d18
commit f4ddb1a
Show file tree

Hide file tree

Showing 37 changed files with 935 additions and 279 deletions.
diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml
@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-ec7bd16c
+        tag: sha-bf4bef92
       replicaCount: 1
       env:
         # env vars common to all deployment stages

diff --git a/client/__tests__/e2e/cellxgeneActions.ts b/client/__tests__/e2e/cellxgeneActions.ts
@@ -602,43 +602,51 @@ export async function expandGene(
 
 export async function requestGeneInfo(gene: string, page: Page): Promise<void> {
   await page.getByTestId(`get-info-${gene}`).click();
-  await expect(page.getByTestId(`${gene}:gene-info`)).toBeTruthy();
+}
+
+export async function requestCellTypeInfo(cell: string, page: Page) {
+  await page.getByTestId(`cell_type:category-expand`).click();
+  await page.getByTestId(`get-info-cell_type-${cell}`).click();
 }
 
 export async function assertInfoPanelExists(
-  gene: string,
+  id: string,
+  infoType: string,
   page: Page
 ): Promise<void> {
-  await expect(page.getByTestId(`${gene}:gene-info`)).toBeTruthy();
-  await expect(page.getByTestId(`info-panel-header`)).toBeTruthy();
-  await expect(page.getByTestId(`min-info-panel`)).toBeTruthy();
+  await expect(
+    page.getByTestId(`${id}:${infoType}-info-wrapper`)
+  ).toBeVisible();
+  await expect(page.getByTestId(`info-panel-header`)).toBeVisible();
+  await expect(page.getByTestId(`min-info-panel`)).toBeVisible();
 
-  await expect(page.getByTestId(`gene-info-synonyms`).innerText).not.toEqual(
-    ""
-  );
+  await expect(
+    page.getByTestId(`${infoType}-info-synonyms`).innerText
+  ).not.toEqual("");
 
-  await expect(page.getByTestId(`gene-info-link`)).toBeTruthy();
+  await expect(page.getByTestId(`${infoType}-info-link`)).toBeTruthy();
 }
 
 export async function minimizeInfoPanel(page: Page): Promise<void> {
   await page.getByTestId("min-info-panel").click();
 }
 
 export async function assertInfoPanelIsMinimized(
-  gene: string,
+  id: string,
+  infoType: string,
   page: Page
 ): Promise<void> {
   const testIds = [
-    `${gene}:gene-info`,
+    `${id}:${infoType}-info-wrapper`,
     "info-panel-header",
     "max-info-panel",
     "close-info-panel",
   ];
 
   await tryUntil(
     async () => {
-      for (const id of testIds) {
-        const result = await page.getByTestId(id).isVisible();
+      for (const testId of testIds) {
+        const result = await page.getByTestId(testId).isVisible();
         await expect(result).toBe(true);
       }
     },
@@ -651,19 +659,20 @@ export async function closeInfoPanel(page: Page): Promise<void> {
 }
 
 export async function assertInfoPanelClosed(
-  gene: string,
+  id: string,
+  infoType: string,
   page: Page
 ): Promise<void> {
   const testIds = [
-    `${gene}:gene-info`,
+    `${id}:${infoType}-info-wrapper`,
     "info-panel-header",
     "min-info-panel",
     "close-info-panel",
   ];
   await tryUntil(
     async () => {
-      for (const id of testIds) {
-        const result = await page.getByTestId(id).isVisible();
+      for (const testId of testIds) {
+        const result = await page.getByTestId(testId).isVisible();
         await expect(result).toBe(false);
       }
     },

diff --git a/client/__tests__/e2e/e2e.test.ts b/client/__tests__/e2e/e2e.test.ts
@@ -52,6 +52,7 @@ import {
   snapshotTestGraph,
   getAllCategories,
   selectLayout,
+  requestCellTypeInfo,
 } from "./cellxgeneActions";
 
 import { datasets } from "./data";
@@ -66,6 +67,7 @@ import {
   conditionallyToggleSidePanel,
   goToPage,
   shouldSkipTests,
+  skipIfPbmcDataset,
   skipIfSidePanel,
   toggleSidePanel,
 } from "../util/helpers";
@@ -99,6 +101,7 @@ const brushThisGeneGeneset = "brush_this_gene";
 
 // open gene info card
 const geneToRequestInfo = "SIK1";
+const cellToRequestInfo = "monocyte";
 
 const genesetDescriptionString = "fourth_gene_set: fourth description";
 const genesetToCheckForDescription = "fourth_gene_set";
@@ -1382,6 +1385,12 @@ for (const testDataset of testDatasets) {
               test("open info panel and hide/remove", async ({
                 page,
               }, testInfo) => {
+                skipIfSidePanel(graphTestId, MAIN_PANEL);
+                /*
+                 * Skip since there's no cell_type data in pbmc3k.cxg
+                 */
+                skipIfPbmcDataset(testDataset, DATASET);
+
                 await setup({ option, page, url, testInfo });
                 await addGeneToSearch(geneToRequestInfo, page);
 
@@ -1390,7 +1399,11 @@ for (const testDataset of testDatasets) {
                 await tryUntil(
                   async () => {
                     await requestGeneInfo(geneToRequestInfo, page);
-                    await assertInfoPanelExists(geneToRequestInfo, page);
+                    await assertInfoPanelExists(
+                      geneToRequestInfo,
+                      "gene",
+                      page
+                    );
                   },
                   { page }
                 );
@@ -1400,7 +1413,11 @@ for (const testDataset of testDatasets) {
                 await tryUntil(
                   async () => {
                     await minimizeInfoPanel(page);
-                    await assertInfoPanelIsMinimized(geneToRequestInfo, page);
+                    await assertInfoPanelIsMinimized(
+                      geneToRequestInfo,
+                      "gene",
+                      page
+                    );
                   },
                   { page }
                 );
@@ -1410,7 +1427,39 @@ for (const testDataset of testDatasets) {
                 await tryUntil(
                   async () => {
                     await closeInfoPanel(page);
-                    await assertInfoPanelClosed(geneToRequestInfo, page);
+                    await assertInfoPanelClosed(
+                      geneToRequestInfo,
+                      "gene",
+                      page
+                    );
+                  },
+                  { page }
+                );
+
+                await snapshotTestGraph(page, testInfo);
+
+                await tryUntil(
+                  async () => {
+                    await requestCellTypeInfo(cellToRequestInfo, page);
+                    await assertInfoPanelExists(
+                      cellToRequestInfo,
+                      "cell-type",
+                      page
+                    );
+                  },
+                  { page }
+                );
+
+                await snapshotTestGraph(page, testInfo);
+
+                await tryUntil(
+                  async () => {
+                    await minimizeInfoPanel(page);
+                    await assertInfoPanelIsMinimized(
+                      cellToRequestInfo,
+                      "cell-type",
+                      page
+                    );
                   },
                   { page }
                 );

diff --git a/client/__tests__/util/helpers.ts b/client/__tests__/util/helpers.ts
@@ -291,6 +291,13 @@ export function skipIfSidePanel(graphTestId: string, MAIN_PANEL: string) {
   skip(graphTestId !== MAIN_PANEL, "This test is only for the main panel");
 }
 
+export function skipIfPbmcDataset(graphTestId: string, PBMC_DATASET: string) {
+  skip(
+    graphTestId === PBMC_DATASET,
+    "This test is only for the spatial dataset, since there's not cell_type data in pbmc3k.cxg dataset"
+  );
+}
+
 export function shouldSkipTests(
   graphTestId: string,
   SIDE_PANEL: string

diff --git a/client/src/actions/index.ts b/client/src/actions/index.ts
@@ -179,6 +179,30 @@ async function fetchGeneInfo(
   return response;
 }
 
+interface CellTypeInfoAPI {
+  name: string;
+  summary: string;
+}
+/**
+ * Fetch cell type summary information
+ * @param cell human-readable name of cell type
+ */
+async function fetchCellTypeInfo(
+  cell: string,
+  dispatch: AppDispatch
+): Promise<CellTypeInfoAPI | undefined> {
+  try {
+    return await fetchJson<CellTypeInfoAPI>(`cellinfo?cell=${cell}`);
+  } catch (error) {
+    dispatchNetworkErrorMessageToUser("Failed to fetch cell type information.");
+    dispatch({
+      type: "request cell info error",
+      error,
+    });
+    return undefined;
+  }
+}
+
 function prefetchEmbeddings(annoMatrix: AnnoMatrix) {
   /*
   prefetch requests for all embeddings
@@ -539,6 +563,7 @@ export default {
   checkExplainNewTab,
   navigateCheckUserState,
   selectDataset,
+  fetchCellTypeInfo,
   fetchGeneInfo,
   selectContinuousMetadataAction: selnActions.selectContinuousMetadataAction,
   selectCategoricalMetadataAction: selnActions.selectCategoricalMetadataAction,

diff --git a/client/src/analytics/events.ts b/client/src/analytics/events.ts
@@ -48,6 +48,8 @@ export enum EVENTS {
   EXPLORER_GENE_DISPLAY_PLOT = "EXPLORER_GENE_DISPLAY_PLOT",
   EXPLORER_GENE_HISTOGRAM_HIGHLIGHT = "EXPLORER_GENE_HISTOGRAM_HIGHLIGHT",
   EXPLORER_SELECT_HISTOGRAM = "EXPLORER_SELECT_HISTOGRAM",
+  EXPLORER_GENE_INFO_BUTTON_CLICKED = "EXPLORER_GENE_INFO_BUTTON_CLICKED",
+  EXPLORER_CELLTYPE_INFO_BUTTON_CLICKED = "EXPLORER_CELLTYPE_INFO_BUTTON_CLICKED",
   EXPLORER_VIEW_GENE_INFO = "EXPLORER_VIEW_GENE_INFO",
   EXPLORER_IMAGE_SELECT = "EXPLORER_IMAGE_SELECT",
   EXPLORER_IMAGE_DESELECT = "EXPLORER_IMAGE_DESELECT",

diff --git a/client/src/common/types/entities.ts b/client/src/common/types/entities.ts
@@ -143,3 +143,30 @@ export interface PublisherMetadata {
   published_month: number;
   published_year: number;
 }
+
+export interface CellInfo {
+  cellId: string;
+  cellName: string;
+  cellDescription: string;
+  synonyms: string[];
+  references: string[];
+  error: string | null;
+  loading: boolean;
+}
+
+export interface GeneInfo {
+  gene: string | null;
+  geneName: string;
+  geneSummary: string;
+  geneSynonyms: string[];
+  geneUrl: string;
+  showWarningBanner: boolean;
+  infoError: string | null;
+  loading: boolean;
+}
+
+export enum ActiveTab {
+  Gene = "Gene",
+  CellType = "CellType",
+  Dataset = "Dataset",
+}