fix: hide navbar when seamless not enabled (#482)

* hide navbar when seamless not enabled * update smoke tests and refactor some components for typescript * remove comment Co-authored-by: atarashansky <[email protected]>
chanzuckerberg · Oct 4, 2022 · 5901e1e · 5901e1e
1 parent 556da57
commit 5901e1e
Show file tree

Hide file tree

Showing 9 changed files with 216 additions and 163 deletions.
diff --git a/client/__tests__/e2e/__snapshots__/e2e.test.ts.snap b/client/__tests__/e2e/__snapshots__/e2e.test.ts.snap
@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`breadcrumbs loads dataset and collection from breadcrumbs appears 1`] = `"<span class=\\"bp3-popover-wrapper\\"><span aria-haspopup=\\"true\\" class=\\"bp3-popover-target datasetSelector__datasetSelectorMenuPopoverTarget___lopQZ\\"><span class=\\"bp3-breadcrumb datasetSelector__datasetSelectorBreadcrumb___Bjpl3\\">Nullam ultrices urna nec congue aliquam<span icon=\\"chevron-down\\" aria-hidden=\\"true\\" class=\\"bp3-icon bp3-icon-chevron-down\\" style=\\"margin-left: 5px; margin-right: 0px;\\"><svg data-icon=\\"chevron-down\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\"><path d=\\"M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z\\" fill-rule=\\"evenodd\\"></path></svg></span></span></span></span>"`;
+
+exports[`breadcrumbs loads dataset and collection from breadcrumbs appears 2`] = `"<a class=\\"bp3-breadcrumb datasetSelector__datasetSelectorBreadcrumb___Bjpl3\\" tabindex=\\"0\\">Lorem ipsum dolor sit amet</a>"`;
+
+exports[`breadcrumbs loads datasets from breadcrumbs appears on clicking collections 1`] = `"<div class=\\"bp3-fill bp3-text-overflow-ellipsis\\">Sed eu nisi condimentum</div>"`;
+
 exports[`clipping clip continuous 1`] = `"<div style=\\"display: flex; justify-content: space-between; align-items: baseline;\\"><div style=\\"display: flex; justify-content: flex-start; align-items: flex-start;\\"><label class=\\"bp3-control bp3-checkbox\\" for=\\"category-select-louvain\\"><input id=\\"category-select-louvain\\" data-testclass=\\"category-select\\" data-testid=\\"louvain:category-select\\" type=\\"checkbox\\" checked=\\"\\"><span class=\\"bp3-control-indicator\\"></span></label><span role=\\"menuitem\\" tabindex=\\"0\\" data-testclass=\\"category-expand\\" data-testid=\\"louvain:category-expand\\" style=\\"cursor: pointer;\\"><span class=\\"bp3-popover2-target\\"><span data-testid=\\"louvain:category-label\\" tabindex=\\"-1\\" aria-label=\\"louvain\\" class=\\"\\" style=\\"max-width: 265px;\\"><span style=\\"max-width: 265px; display: flex; overflow: hidden; justify-content: flex-start; width: 100%; padding: 0px;\\"><span style=\\"overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 5px;\\">lou</span><span style=\\"position: relative; overflow: hidden; white-space: nowrap;\\"><span style=\\"color: transparent;\\">vain</span><span style=\\"position: absolute; right: 0px; color: inherit;\\">vain</span></span></span></span></span><svg stroke=\\"currentColor\\" fill=\\"currentColor\\" stroke-width=\\"0\\" viewBox=\\"0 0 320 512\\" data-testclass=\\"category-expand-is-not-expanded\\" height=\\"1em\\" width=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\" style=\\"font-size: 10px; margin-left: 5px;\\"><path d=\\"M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z\\"></path></svg></span></div><div><span class=\\"bp3-popover-wrapper\\"><span aria-haspopup=\\"true\\" class=\\"bp3-popover-target\\"><a role=\\"button\\" data-testclass=\\"colorby\\" data-testid=\\"colorby-louvain\\" class=\\"bp3-button\\" tabindex=\\"0\\"><span icon=\\"tint\\" aria-hidden=\\"true\\" tabindex=\\"0\\" class=\\"bp3-icon bp3-icon-tint\\"><svg data-icon=\\"tint\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\"><path d=\\"M7.88 1s-4.9 6.28-4.9 8.9c.01 2.82 2.34 5.1 4.99 5.1 2.65-.01 5.03-2.3 5.03-5.13C12.99 7.17 7.88 1 7.88 1z\\" fill-rule=\\"evenodd\\"></path></svg></span></a></span></span></div></div><div style=\\"margin-left: 26px;\\"></div>"`;
 
 exports[`did launch page launched 1`] = `"<div class=\\"css-6q0ddy\\"><span class=\\"css-iz9ysv\\"><a href=\\"/\\"><svg width=\\"23\\" height=\\"23\\" viewBox=\\"0 0 23 23\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.10758 5.97949H0.521711C0.233578 5.97949 0 6.21307 0 6.5012V22.1616C0 22.4497 0.233578 22.6833 0.521711 22.6833H3.10758C3.39571 22.6833 3.62929 22.4497 3.62929 22.1616V6.5012C3.62929 6.21307 3.39571 5.97949 3.10758 5.97949Z\\" fill=\\"white\\"></path><path d=\\"M22.6741 22.1613C22.6741 22.4471 22.4382 22.683 22.1523 22.683H6.50102C6.21521 22.683 5.97931 22.4471 5.97931 22.1613V6.50999C5.97931 6.22419 6.21521 5.98828 6.50102 5.98828H22.1523C22.4382 5.98828 22.6741 6.22419 22.6741 6.50999V22.1613ZM9.6086 18.532C9.6086 18.8178 9.84451 19.0537 10.1303 19.0537H18.5231C18.8089 19.0537 19.0448 18.8178 19.0448 18.532V10.1393C19.0448 9.85348 18.8089 9.61757 18.5231 9.61757H10.1303C9.84451 9.61757 9.6086 9.85348 9.6086 10.1393V18.532Z\\" fill=\\"white\\"></path><path d=\\"M22.1569 0H6.4965C6.20837 0 5.97479 0.233578 5.97479 0.521711V3.10758C5.97479 3.39571 6.20837 3.62929 6.4965 3.62929H22.1569C22.445 3.62929 22.6786 3.39571 22.6786 3.10758V0.521711C22.6786 0.233578 22.445 0 22.1569 0Z\\" fill=\\"#8282FF\\"></path></svg></a><span class=\\"css-1o97835\\"><span class=\\"css-6piv1m\\"><a role=\\"button\\" href=\\"/collections\\" class=\\"bp3-button bp3-minimal\\" tabindex=\\"0\\"><span class=\\"bp3-button-text\\">Collections</span></a></span><span class=\\"css-6piv1m\\"><a role=\\"button\\" href=\\"/datasets\\" class=\\"bp3-button bp3-minimal\\" tabindex=\\"0\\"><span class=\\"bp3-button-text\\">Datasets</span></a></span><span class=\\"css-6piv1m\\"><a role=\\"button\\" href=\\"/gene-expression\\" class=\\"bp3-button bp3-minimal\\" tabindex=\\"0\\"><span class=\\"bp3-button-text\\">Gene Expression</span></a><div class=\\"MuiChip-root css-1012r7m MuiChip-sizeSmall\\"><span class=\\"MuiChip-label MuiChip-labelSmall\\">Beta</span></div></span></span></span><span class=\\"css-13tdomi\\"><span class=\\"css-6piv1m\\"><span class=\\"bp3-popover2-target\\"><a role=\\"button\\" data-testid=\\"menu\\" class=\\"bp3-button bp3-minimal\\" tabindex=\\"0\\"><span class=\\"bp3-button-text\\">Help &amp; Documentation</span><span icon=\\"chevron-down\\" aria-hidden=\\"true\\" class=\\"bp3-icon bp3-icon-chevron-down\\"><svg data-icon=\\"chevron-down\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\"><path d=\\"M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z\\" fill-rule=\\"evenodd\\"></path></svg></span></a></span></span></span></div>"`;

diff --git a/client/__tests__/e2e/cellxgeneActions.ts b/client/__tests__/e2e/cellxgeneActions.ts
@@ -166,6 +166,27 @@ export async function calcCoordinate(
   };
 }
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
+export async function calcTransformCoordinate(
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
+  testId: any,
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
+  xAsPercent: any,
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
+  yAsPercent: any
+) {
+  const el = await waitByID(testId);
+  // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+  const size = await el.boxModel();
+  // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+  const height = size.height - size.content[0].y
+  return {
+    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+    x: Math.floor(size.width * xAsPercent),
+    y: Math.floor(height * yAsPercent),
+  };
+}
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
 export async function calcDragCoordinates(
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
@@ -187,6 +208,27 @@ export async function calcDragCoordinates(
   };
 }
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
+export async function calcTransformDragCoordinates(
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
+  testId: any,
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
+  coordinateAsPercent: any
+) {
+  return {
+    start: await calcTransformCoordinate(
+      testId,
+      coordinateAsPercent.x1,
+      coordinateAsPercent.y1
+    ),
+    end: await calcTransformCoordinate(
+      testId,
+      coordinateAsPercent.x2,
+      coordinateAsPercent.y2
+    ),
+  };
+}
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
 export async function selectCategory(category: any, values: any, reset = true) {
   if (reset) await resetCategory(category);

diff --git a/client/__tests__/e2e/data.ts b/client/__tests__/e2e/data.ts
@@ -41,7 +41,7 @@ export const datasets = {
       lasso: [
         {
           "coordinates-as-percent": { x1: 0.1, y1: 0.25, x2: 0.7, y2: 0.75 },
-          count: "1094",
+          count: "1131",
         },
       ],
       categorical: [
@@ -112,7 +112,7 @@ export const datasets = {
       },
       lasso: {
         "coordinates-as-percent": { x1: 0.25, y1: 0.05, x2: 0.75, y2: 0.55 },
-        count: "332",
+        count: "357",
       },
     },
     scatter: {

diff --git a/client/__tests__/e2e/e2e.test.ts b/client/__tests__/e2e/e2e.test.ts
@@ -24,6 +24,7 @@ import {
 
 import {
   calcDragCoordinates,
+  calcTransformDragCoordinates,
   drag,
   expandCategory,
   subset,
@@ -111,7 +112,7 @@ describe("did launch", () => {
   });
 });
 
-/* TODO: Fix this test
+
 describe("breadcrumbs loads", () => {
   test("dataset and collection from breadcrumbs appears", async () => {
     await goToPage(pageUrl);
@@ -125,13 +126,13 @@ describe("breadcrumbs loads", () => {
   test("datasets from breadcrumbs appears on clicking collections", async () => {
     await goToPage(pageUrl);
 
-    await clickOn(`bc-Collection`);
+    await clickOn(`bc-Dataset`);
     await waitByID("dataset-menu-item-Sed eu nisi condimentum")
     const element = await getOneElementInnerHTML(getTestId("dataset-menu-item-Sed eu nisi condimentum"));
     expect(element).toMatchSnapshot();
   });
 });
-*/
+
 
 describe("metadata loads", () => {
   test("categories and values from dataset appear", async () => {
@@ -415,7 +416,7 @@ describe("graph overlay", () => {
     await clickOn("centroid-label-toggle");
     await clickOn("mode-pan-zoom");
 
-    const panCoords = await calcDragCoordinates(
+    const panCoords = await calcTransformDragCoordinates(
       "layout-graph",
       data.pan["coordinates-as-percent"]
     );

diff --git a/client/__tests__/e2e/puppeteer.setup.ts b/client/__tests__/e2e/puppeteer.setup.ts
@@ -5,13 +5,11 @@
  */
 
 import { setDefaultOptions } from "expect-puppeteer";
+import fetch from "puppeteer-fetch";
 import { isDebug, isDev } from "./config";
 import * as ENV_DEFAULT from "../../../environment.default.json";
 import { DATASET_METADATA_RESPONSE } from "../__mocks__/apiMock";
 
-// TODO: uncomment this for breadcrumbs tests
-// const fetch = require("puppeteer-fetch").default;
-
 // (thuang): This is the max time a test can take to run.
 // Since when debugging, we run slowMo and !headless, this means
 // a test can take more time to finish, so we don't want
@@ -40,7 +38,7 @@ beforeEach(async () => {
         },
       });
       return;
-    } /* else if (interceptedRequest.url().endsWith("/config")) {
+    } if (interceptedRequest.url().endsWith("/config")) {
       const { referer } = interceptedRequest.headers();
 
       fetch(interceptedRequest.url()).then((response: any) => {
@@ -49,10 +47,12 @@ beforeEach(async () => {
             status: 200,
             contentType: "application/json",
             body: JSON.stringify({
-              ...body,
-              links: {
-                ...body.links,
-                "collections-home-page": "https://cellxgene.cziscience.com/dummy-collection",
+              config: {
+                ...body.config,
+                links: {
+                  ...body.config.links,                
+                  "collections-home-page": "https://cellxgene.cziscience.com/dummy-collection",
+                },              
               }
             }),
             headers: {
@@ -63,7 +63,7 @@ beforeEach(async () => {
         });
       });
       return;      
-    } */
+    }
     interceptedRequest.continue();
   });
 

diff --git a/client/src/components/app.tsx b/client/src/components/app.tsx
@@ -1,4 +1,4 @@
-import React, { RefObject } from "react";
+import React from "react";
 import Helmet from "react-helmet";
 import { connect } from "react-redux";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
@@ -19,6 +19,7 @@ import Header from "./NavBar";
 import actions from "../actions";
 import { RootState, AppDispatch } from "../reducers";
 import GlobalHotkeys from "./hotkeys";
+import { selectIsSeamlessEnabled } from "../selectors/datasetMetadata";
 
 interface Props {
   dispatch: AppDispatch;
@@ -27,6 +28,7 @@ interface Props {
   graphRenderCounter: number;
   tosURL: string | undefined;
   privacyURL: string | undefined;
+  seamlessEnabled: boolean;
 }
 
 class App extends React.Component<Props> {
@@ -46,8 +48,14 @@ class App extends React.Component<Props> {
   }
 
   render(): JSX.Element {
-    const { loading, error, graphRenderCounter, tosURL, privacyURL } =
-      this.props;
+    const {
+      loading,
+      error,
+      graphRenderCounter,
+      tosURL,
+      privacyURL,
+      seamlessEnabled,
+    } = this.props;
 
     return (
       <Container>
@@ -68,11 +76,13 @@ class App extends React.Component<Props> {
                   error loading cellxgene
                 </div>
               ) : null}
-              <Header tosURL={tosURL} privacyURL={privacyURL} />
+              {seamlessEnabled && (
+                <Header tosURL={tosURL} privacyURL={privacyURL} />
+              )}
               {loading || error ? null : (
-                <Layout>
-                  <LeftSideBar />
-                  {(viewportRef: RefObject<HTMLDivElement>) => (
+                <Layout
+                  seamlessEnabled={seamlessEnabled}
+                  renderGraph={(viewportRef: HTMLDivElement) => (
                     <>
                       <GlobalHotkeys />
                       <Controls>
@@ -90,6 +100,8 @@ class App extends React.Component<Props> {
                       </Controls>
                     </>
                   )}
+                >
+                  <LeftSideBar />
                   <RightSideBar />
                 </Layout>
               )}
@@ -107,4 +119,5 @@ export default connect((state: RootState) => ({
   graphRenderCounter: state.controls.graphRenderCounter,
   tosURL: state.config?.parameters?.about_legal_tos,
   privacyURL: state.config?.parameters?.about_legal_privacy,
+  seamlessEnabled: selectIsSeamlessEnabled(state),
 }))(App);