feat: show banner warning and disable export if azul is indexing (#3775…

…) (#3808) * feat: show banner warning and disable export if azul is indexing (#3775) * feat: disable export if azul is indexing (#3775) * feat: updated app layout (#3775) * chore: updated package (#3775) --------- Co-authored-by: Fran McDade <franmcdade@Frans-MacBook-Pro.local>
DataBiosphere · Dec 6, 2023 · 05b8f50 · 05b8f50
1 parent 6b483b7
commit 05b8f50
Show file tree

Hide file tree

Showing 13 changed files with 192 additions and 76 deletions.
diff --git a/explorer/app/components/common/RenderComponents/renderComponents.tsx b/explorer/app/components/common/RenderComponents/renderComponents.tsx
@@ -0,0 +1,17 @@
+import { ComponentCreator } from "@clevercanary/data-explorer-ui/lib/components/ComponentCreator/ComponentCreator";
+import { ComponentsConfig } from "@clevercanary/data-explorer-ui/lib/config/entities";
+import React, { Fragment } from "react";
+
+export interface RenderComponentsProps {
+  components?: ComponentsConfig;
+}
+
+export const RenderComponents = ({
+  components,
+}: RenderComponentsProps): JSX.Element => {
+  return (
+    <Fragment>
+      {components && <ComponentCreator components={components} response={{}} />}
+    </Fragment>
+  );
+};
diff --git a/explorer/app/components/index.tsx b/explorer/app/components/index.tsx
@@ -1,5 +1,7 @@
 export { Alert } from "@clevercanary/data-explorer-ui/lib/components/common/Alert/alert";
 export { FluidAlert } from "@clevercanary/data-explorer-ui/lib/components/common/Alert/alert.styles";
+export { SystemIndexing } from "@clevercanary/data-explorer-ui/lib/components/common/Banner/components/SystemIndexing/systemIndexing";
+export { SystemStatus } from "@clevercanary/data-explorer-ui/lib/components/common/Banner/components/SystemStatus/systemStatus";
 export { ButtonGroup } from "@clevercanary/data-explorer-ui/lib/components/common/ButtonGroup/buttonGroup";
 export {
   ContentCopyIconSmall,
@@ -73,6 +75,7 @@ export { SupportRequest } from "@clevercanary/data-explorer-ui/lib/components/Su
 export { ExportMethodView } from "@clevercanary/data-explorer-ui/lib/views/ExportMethodView/exportMethodView";
 export { Fade } from "./common/Fade/fade";
 export { MdxMarkdown } from "./common/MDXMarkdown/mdxMarkdown";
+export { RenderComponents } from "./common/RenderComponents/renderComponents";
 export { ConsentCodeList } from "./Detail/components/ConsentCodeList/consentCodeList";
 export { ConsentTooltip } from "./Detail/components/ConsentTooltip/consentTooltip";
 export { ConsortiumOverview } from "./Detail/components/Consortium/ConsortiumOverview/consortiumOverview";

diff --git a/explorer/app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.ts b/explorer/app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.ts
@@ -514,10 +514,12 @@ export const buildExportMethodTerra = (
     buttonLabel: "Analyze in Terra",
     description:
       "Terra is a biomedical research platform to analyze data using workflows, Jupyter Notebooks, RStudio, and Galaxy.",
-    disabled: !isFacetsSuccess || !isAccessible,
-    disabledByLine: isFacetsSuccess
-      ? "You currently don’t have access to any files matching the query."
-      : undefined,
+    footnote: isFacetsSuccess
+      ? isAccessible
+        ? null
+        : "You currently don’t have access to any files matching the query."
+      : null,
+    isAccessible: isFacetsSuccess && isAccessible,
     route: ROUTE_EXPORT_TO_TERRA,
     title: "Export Study Data and Metadata to Terra Workspace",
   };

diff --git a/explorer/app/viewModelBuilders/azul/hca-dcp/common/systemStatusMapper/entities.ts b/explorer/app/viewModelBuilders/azul/hca-dcp/common/systemStatusMapper/entities.ts
@@ -0,0 +1,10 @@
+/**
+ * Model of raw HTTP index response.
+ */
+export interface IndexHttpResponse {
+  progress: {
+    unindexed_bundles: number;
+    unindexed_documents: number;
+  };
+  up: boolean;
+}
diff --git a/explorer/app/viewModelBuilders/azul/hca-dcp/common/systemStatusMapper/systemStatusMapper.ts b/explorer/app/viewModelBuilders/azul/hca-dcp/common/systemStatusMapper/systemStatusMapper.ts
@@ -0,0 +1,33 @@
+import {
+  INDEXING_STATUS,
+  SystemStatusResponse,
+} from "@clevercanary/data-explorer-ui/lib/providers/systemStatus";
+import { IndexHttpResponse } from "./entities";
+
+/**
+ * Normalize system status response.
+ * @param response - HTTP response.
+ * @returns normalized system status response.
+ */
+export function bindSystemStatusResponse(
+  response?: IndexHttpResponse
+): SystemStatusResponse | undefined {
+  if (!response) return;
+  return {
+    indexing: isIndexing(response),
+    indexingStatus: INDEXING_STATUS.COMPLETE,
+    ok: response.up,
+  };
+}
+
+/**
+ * Returns true if the system is currently indexing.
+ * @param response - HTTP response.
+ * @returns true if the system is currently indexing.
+ */
+function isIndexing(response: IndexHttpResponse): boolean {
+  return (
+    response.progress.unindexed_bundles > 0 ||
+    response.progress.unindexed_documents > 0
+  );
+}
diff --git a/explorer/app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.ts b/explorer/app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.ts
@@ -547,13 +547,14 @@ export function buildExportHero(
  */
 export const buildExportMethodBulkDownload = (): React.ComponentProps<
   typeof C.ExportMethod
-> => ({
-  buttonLabel: "Request curl Command",
-  description: "Obtain a curl command for downloading the selected data.",
-  disabled: false,
-  route: ROUTE_BULK_DOWNLOAD,
-  title: "Download Study Data and Metadata (Curl Command)",
-});
+> => {
+  return {
+    buttonLabel: "Request curl Command",
+    description: "Obtain a curl command for downloading the selected data.",
+    route: ROUTE_BULK_DOWNLOAD,
+    title: "Download Study Data and Metadata (Curl Command)",
+  };
+};
 
 /**
  * Build props for download curl command Hero component.
@@ -612,29 +613,31 @@ export const buildExportMethodHeroTerra = (
  */
 export const buildExportMethodManifestDownload = (): React.ComponentProps<
   typeof C.ExportMethod
-> => ({
-  buttonLabel: "Request File Manifest",
-  description:
-    "Request a file manifest for the current query containing the full list of selected files and the metadata for each file.",
-  disabled: false,
-  route: ROUTE_MANIFEST_DOWNLOAD,
-  title: "Download a File Manifest with Metadata for the Selected Data",
-});
+> => {
+  return {
+    buttonLabel: "Request File Manifest",
+    description:
+      "Request a file manifest for the current query containing the full list of selected files and the metadata for each file.",
+    route: ROUTE_MANIFEST_DOWNLOAD,
+    title: "Download a File Manifest with Metadata for the Selected Data",
+  };
+};
 
 /**
  * Build props for ExportMethod component for display of the export to terra section.
  * @returns model to be used as props for the ExportMethod component.
  */
 export const buildExportMethodTerra = (): React.ComponentProps<
   typeof C.ExportMethod
-> => ({
-  buttonLabel: "Analyze in Terra",
-  description:
-    "Terra is a biomedical research platform to analyze data using workflows, Jupyter Notebooks, RStudio, and Galaxy.",
-  disabled: false,
-  route: ROUTE_EXPORT_TO_TERRA,
-  title: "Export Study Data and Metadata to Terra Workspace",
-});
+> => {
+  return {
+    buttonLabel: "Analyze in Terra",
+    description:
+      "Terra is a biomedical research platform to analyze data using workflows, Jupyter Notebooks, RStudio, and Galaxy.",
+    route: ROUTE_EXPORT_TO_TERRA,
+    title: "Export Study Data and Metadata to Terra Workspace",
+  };
+};
 
 /**
  * Build props for ExportSelectedDataSummary component.

diff --git a/explorer/package-lock.json b/explorer/package-lock.json
diff --git a/explorer/package.json b/explorer/package.json
@@ -34,7 +34,7 @@
     "test:anvil-catalog": "playwright test -c playwright_anvil-catalog.config.ts"
   },
   "dependencies": {
-    "@clevercanary/data-explorer-ui": "0.58.0",
+    "@clevercanary/data-explorer-ui": "0.60.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@mdx-js/loader": "^2.3.0",

diff --git a/explorer/pages/[entityListType]/[...params].tsx b/explorer/pages/[entityListType]/[...params].tsx
@@ -123,7 +123,7 @@ export const getStaticPaths: GetStaticPaths<PageUrl> = async () => {
 
       // Fetch entity data.
       if (entityConfig.detail.staticLoad) {
-        const { fetchAllEntities, getId, path } = getEntityService(
+        const { fetchAllEntities, path } = getEntityService(
           entityConfig,
           undefined
         );
@@ -139,7 +139,7 @@ export const getStaticPaths: GetStaticPaths<PageUrl> = async () => {
             resultParams.push({
               params: {
                 entityListType: entityConfig.route,
-                params: [getId?.(hit) ?? "", tab],
+                params: [entityConfig.getId?.(hit) ?? "", tab],
               },
             });
           });
@@ -216,7 +216,7 @@ GetStaticPropsContext) => {
       await seedDatabase(entityConfig.route, entityConfig);
     }
     // Grab the entity detail, either from database or API.
-    const { entityMapper, fetchEntity, fetchEntityDetail, getId, path } =
+    const { entityMapper, fetchEntity, fetchEntityDetail, path } =
       getEntityService(entityConfig, undefined);
     // When the entity detail is to be fetched from API, we only do so for the first tab.
     if (
@@ -227,11 +227,10 @@ GetStaticPropsContext) => {
     }
 
     if (exploreMode === EXPLORE_MODE.SS_FETCH_CS_FILTERING) {
-      if (getId && fetchEntity) {
+      if (fetchEntity) {
         props.data = await fetchEntity(
           (params as PageUrl).params[PARAMS_INDEX_UUID],
           path,
-          getId,
           entityMapper
         );
       }

diff --git a/explorer/pages/[entityListType]/index.tsx b/explorer/pages/[entityListType]/index.tsx
@@ -1,4 +1,5 @@
 import { AzulEntitiesStaticResponse } from "@clevercanary/data-explorer-ui/lib/apis/azul/common/entities";
+import { Main as DXMain } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Main/main.styles";
 import { EntityConfig } from "@clevercanary/data-explorer-ui/lib/config/entities";
 import { getEntityConfig } from "@clevercanary/data-explorer-ui/lib/config/utils";
 import { getEntityService } from "@clevercanary/data-explorer-ui/lib/hooks/useEntityService";
@@ -111,4 +112,6 @@ export const getStaticProps: GetStaticProps<
   };
 };
 
+IndexPage.Main = DXMain;
+
 export default IndexPage;
diff --git a/explorer/pages/_app.tsx b/explorer/pages/_app.tsx
@@ -6,18 +6,21 @@ import { Head } from "@clevercanary/data-explorer-ui/lib/components/Head/head";
 import { AppLayout } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/AppLayout/appLayout.styles";
 import { Footer } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Footer/footer";
 import { Header } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Header/header";
-import { Main } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Main/main.styles";
+import { Main as DXMain } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Main/main";
 import { Support } from "@clevercanary/data-explorer-ui/lib/components/Support/support";
 import { AuthProvider } from "@clevercanary/data-explorer-ui/lib/providers/authentication";
 import { ConfigProvider as DXConfigProvider } from "@clevercanary/data-explorer-ui/lib/providers/config";
 import { ExploreStateProvider } from "@clevercanary/data-explorer-ui/lib/providers/exploreState";
 import { FileManifestStateProvider } from "@clevercanary/data-explorer-ui/lib/providers/fileManifestState";
+import { LayoutStateProvider } from "@clevercanary/data-explorer-ui/lib/providers/layoutState";
+import { SystemStatusProvider } from "@clevercanary/data-explorer-ui/lib/providers/systemStatus";
 import { createAppTheme } from "@clevercanary/data-explorer-ui/lib/theme/theme";
 import { DataExplorerError } from "@clevercanary/data-explorer-ui/lib/types/error";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { CssBaseline } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 import { config } from "app/config/config";
+import { NextPage } from "next";
 import type { AppProps } from "next/app";
 import { useEffect, useMemo } from "react";
 import TagManager from "react-gtm-module";
@@ -28,9 +31,17 @@ import { configureHeader } from "../app/shared/utils";
 
 const SESSION_TIMEOUT = 15 * 60 * 1000; // 15 minutes
 
+export type NextPageWithComponent = NextPage & {
+  Main?: typeof DXMain;
+};
+
+export type AppPropsWithComponent = AppProps & {
+  Component: NextPageWithComponent;
+};
+
 setFeatureFlags();
 
-function MyApp({ Component, pageProps }: AppProps): JSX.Element {
+function MyApp({ Component, pageProps }: AppPropsWithComponent): JSX.Element {
   // Set up the site configuration, layout and theme.
   const appConfig = config();
   const { analytics, layout, redirectRootToPath, themeOptions } = appConfig;
@@ -42,6 +53,7 @@ function MyApp({ Component, pageProps }: AppProps): JSX.Element {
     () => configureHeader(appConfig, isFeatureFlag),
     [appConfig, isFeatureFlag]
   ); // Configure header.
+  const Main = Component.Main || DXMain;
 
   // Initialize Google Tag Manager.
   useEffect(() => {
@@ -56,37 +68,41 @@ function MyApp({ Component, pageProps }: AppProps): JSX.Element {
         <DXConfigProvider config={appConfig} entityListType={entityListType}>
           <Head />
           <CssBaseline />
-          <AuthProvider sessionTimeout={SESSION_TIMEOUT}>
-            <AppLayout>
-              <Header {...configuredHeaderProps} />
-              <ExploreStateProvider entityListType={entityListType}>
-                <FileManifestStateProvider>
-                  <Main>
-                    <ErrorBoundary
-                      fallbackRender={({
-                        error,
-                        reset,
-                      }: {
-                        error: DataExplorerError;
-                        reset: () => void;
-                      }): JSX.Element => (
-                        <Error
-                          errorMessage={error.message}
-                          requestUrlMessage={error.requestUrlMessage}
-                          rootPath={redirectRootToPath}
-                          onReset={reset}
-                        />
-                      )}
-                    >
-                      <Component {...pageProps} />
-                    </ErrorBoundary>
-                    {layout.support && <Support {...layout.support} />}
-                  </Main>
-                </FileManifestStateProvider>
-              </ExploreStateProvider>
-              <Footer {...layout.footer} />
-            </AppLayout>
-          </AuthProvider>
+          <SystemStatusProvider>
+            <AuthProvider sessionTimeout={SESSION_TIMEOUT}>
+              <LayoutStateProvider>
+                <AppLayout>
+                  <Header {...configuredHeaderProps} />
+                  <ExploreStateProvider entityListType={entityListType}>
+                    <FileManifestStateProvider>
+                      <Main>
+                        <ErrorBoundary
+                          fallbackRender={({
+                            error,
+                            reset,
+                          }: {
+                            error: DataExplorerError;
+                            reset: () => void;
+                          }): JSX.Element => (
+                            <Error
+                              errorMessage={error.message}
+                              requestUrlMessage={error.requestUrlMessage}
+                              rootPath={redirectRootToPath}
+                              onReset={reset}
+                            />
+                          )}
+                        >
+                          <Component {...pageProps} />
+                        </ErrorBoundary>
+                        {layout.support && <Support {...layout.support} />}
+                      </Main>
+                    </FileManifestStateProvider>
+                  </ExploreStateProvider>
+                  <Footer {...layout.footer} />
+                </AppLayout>
+              </LayoutStateProvider>
+            </AuthProvider>
+          </SystemStatusProvider>
         </DXConfigProvider>
       </ThemeProvider>
     </EmotionThemeProvider>