fix: Assume navbar present by default and only remove padding if data…

…set metadata errors (#517) * branch init * assume navbar present by default and don't remove padding unless metadata errors * update * update test Co-authored-by: atarashansky <[email protected]>
chanzuckerberg · Oct 25, 2022 · fde15ae · fde15ae
1 parent 31ce63c
commit fde15ae
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 30 deletions.
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: "1131",
+          count: "1094",
         },
       ],
       categorical: [

diff --git a/client/src/actions/index.ts b/client/src/actions/index.ts
@@ -89,26 +89,33 @@ async function datasetMetadataFetchAndLoad(
   oldPrefix: string,
   config: Config
 ): Promise<void> {
-  const datasetMetadataResponse = await fetchJson<{
-    metadata: DatasetMetadata;
-  }>("dataset-metadata", oldPrefix);
-
-  // Create new dataset array with large datasets removed
-  const { metadata: datasetMetadata } = datasetMetadataResponse;
-  const datasets = removeLargeDatasets(
-    datasetMetadata.collection_datasets,
-    globals.DATASET_MAX_CELL_COUNT
-  );
-
-  const { links } = config;
-  dispatch({
-    type: "dataset metadata load complete",
-    datasetMetadata: {
-      ...datasetMetadata,
-      collection_datasets: datasets,
-    },
-    portalUrl: links["collections-home-page"],
-  });
+  try {
+    const datasetMetadataResponse = await fetchJson<{
+      metadata: DatasetMetadata;
+    }>("dataset-metadata", oldPrefix);
+
+    // Create new dataset array with large datasets removed
+    const { metadata: datasetMetadata } = datasetMetadataResponse;
+    const datasets = removeLargeDatasets(
+      datasetMetadata.collection_datasets,
+      globals.DATASET_MAX_CELL_COUNT
+    );
+
+    const { links } = config;
+    dispatch({
+      type: "dataset metadata load complete",
+      datasetMetadata: {
+        ...datasetMetadata,
+        collection_datasets: datasets,
+      },
+      portalUrl: links["collections-home-page"],
+    });
+  } catch (error) {
+    dispatch({
+      type: "dataset metadata load error",
+      error,
+    });
+  }
 }
 
 interface GeneInfoAPI {

diff --git a/client/src/components/app.tsx b/client/src/components/app.tsx
@@ -29,6 +29,7 @@ interface Props {
   tosURL: string | undefined;
   privacyURL: string | undefined;
   seamlessEnabled: boolean;
+  datasetMetadataError: string | null;
 }
 
 class App extends React.Component<Props> {
@@ -55,8 +56,8 @@ class App extends React.Component<Props> {
       tosURL,
       privacyURL,
       seamlessEnabled,
+      datasetMetadataError,
     } = this.props;
-
     return (
       <Container>
         <StylesProvider injectFirst>
@@ -76,12 +77,12 @@ class App extends React.Component<Props> {
                   error loading cellxgene
                 </div>
               ) : null}
-              {seamlessEnabled && (
+              {(seamlessEnabled || datasetMetadataError === null) && (
                 <Header tosURL={tosURL} privacyURL={privacyURL} />
               )}
               {loading || error ? null : (
                 <Layout
-                  seamlessEnabled={seamlessEnabled}
+                  datasetMetadataError={datasetMetadataError}
                   renderGraph={(viewportRef: HTMLDivElement) => (
                     <>
                       <GlobalHotkeys />
@@ -120,4 +121,5 @@ export default connect((state: RootState) => ({
   tosURL: state.config?.parameters?.about_legal_tos,
   privacyURL: state.config?.parameters?.about_legal_privacy,
   seamlessEnabled: selectIsSeamlessEnabled(state),
+  datasetMetadataError: state.datasetMetadata.error,
 }))(App);
diff --git a/client/src/components/framework/layout.tsx b/client/src/components/framework/layout.tsx
@@ -2,7 +2,7 @@ import React, { Children, useState } from "react";
 import * as globals from "../../globals";
 
 interface Props {
-  seamlessEnabled?: boolean;
+  datasetMetadataError: string | null;
   renderGraph?: (viewport: HTMLDivElement) => React.ReactNode;
 }
 
@@ -20,7 +20,7 @@ interface Props {
 const Layout: React.FC<Props> = (props) => {
   const [viewportRef, setViewportRef] = useState<HTMLDivElement | null>(null);
 
-  const { children, seamlessEnabled, renderGraph } = props;
+  const { children, datasetMetadataError, renderGraph } = props;
   const [leftSidebar, rightSidebar] = Children.toArray(children);
   let graphComponent = null;
   if (viewportRef && renderGraph) {
@@ -30,7 +30,7 @@ const Layout: React.FC<Props> = (props) => {
     <div
       style={{
         display: "grid",
-        paddingTop: seamlessEnabled ? globals.HEADER_HEIGHT_PX : 0,
+        paddingTop: !datasetMetadataError ? globals.HEADER_HEIGHT_PX : 0,
         gridTemplateColumns: `
         [left-sidebar-start] ${globals.leftSidebarWidth + 1}px
         [left-sidebar-end graph-start] auto
@@ -90,7 +90,6 @@ const Layout: React.FC<Props> = (props) => {
 };
 
 Layout.defaultProps = {
-  seamlessEnabled: undefined,
   renderGraph: undefined,
 };
 export default Layout;
diff --git a/client/src/components/framework/layoutSkeleton.tsx b/client/src/components/framework/layoutSkeleton.tsx
@@ -20,7 +20,7 @@ const WIDTH_MENUBAR = 482;
  */
 function LayoutSkeleton(): JSX.Element {
   return (
-    <Layout>
+    <Layout datasetMetadataError={null}>
       <LeftSidebarSkeleton />
       {() => (
         <Controls>

diff --git a/client/src/reducers/datasetMetadata.ts b/client/src/reducers/datasetMetadata.ts
@@ -56,7 +56,7 @@ const DatasetMetadata = (
         portalUrl,
       };
     }
-    case "initial data load error": {
+    case "dataset metadata load error": {
       const { error } = action as DatasetMetadataAction;
 
       return {