feat: export cohort to biodata catalyst (#4640)

app/components/Export/components/AnVILExplorer/platform/ExportMethod/exportMethod.tsx

@@ -0,0 +1,21 @@
+import { JSX } from "react";
+import { ComponentProps } from "react";
+import { ExportMethod as DXExportMethod } from "@databiosphere/findable-ui/lib/components/Export/components/ExportMethod/exportMethod";
+import { useFeatureFlag } from "@databiosphere/findable-ui/lib/hooks/useFeatureFlag/useFeatureFlag";
+import { FEATURES } from "app/shared/entities";
+
+/**
+ * Export method component for platform based export.
+ * Hidden if the platform based export feature is not enabled (NCPI Export).
+ * @param props - Export method component props.
+ * @returns Export method component.
+ */
+export const ExportMethod = (
+  props: ComponentProps<typeof DXExportMethod>
+): JSX.Element | null => {
+  const isEnabled = useFeatureFlag(FEATURES.NCPI_EXPORT);
+
+  if (!isEnabled) return null;
+
+  return <DXExportMethod {...props} />;
+};

app/components/Export/components/AnVILExplorer/platform/ExportToPlatform/exportToPlatform.tsx

@@ -0,0 +1,107 @@
+import { JSX } from "react";
+import { BUTTON_PROPS } from "@databiosphere/findable-ui/lib/components/common/Button/constants";
+import { useFileManifest } from "@databiosphere/findable-ui/lib/hooks/useFileManifest/useFileManifest";
+import { useFileManifestFileCount } from "@databiosphere/findable-ui/lib/hooks/useFileManifest/useFileManifestFileCount";
+import { useFileManifestFormat } from "@databiosphere/findable-ui/lib/hooks/useFileManifest/useFileManifestFormat";
+import { useRequestFileLocation } from "@databiosphere/findable-ui/lib/hooks/useRequestFileLocation";
+import { useRequestManifest } from "@databiosphere/findable-ui/lib/hooks/useRequestManifest/useRequestManifest";
+import { FluidPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/components/FluidPaper/fluidPaper";
+import { Loading } from "@databiosphere/findable-ui/lib/components/Loading/loading";
+import { ExportManifestDownloadFormatForm } from "@databiosphere/findable-ui/lib/components/Export/components/ExportForm/components/ExportManifestDownloadFormatForm/exportManifestDownloadFormatForm";
+import { ExportButton } from "@databiosphere/findable-ui/lib/components/Export/components/ExportForm/components/ExportButton/exportButton";
+import { ExportForm } from "@databiosphere/findable-ui/lib/components/Export/components/ExportForm/exportForm";
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+} from "@databiosphere/findable-ui/lib/components/Export/export.styles";
+import { Button } from "@mui/material";
+import {
+  REL_ATTRIBUTE,
+  ANCHOR_TARGET,
+} from "@databiosphere/findable-ui/lib/components/Links/common/entities";
+import { PAPER_PANEL_STYLE } from "@databiosphere/findable-ui/lib/components/common/Paper/paper";
+import { MANIFEST_DOWNLOAD_FORMAT } from "@databiosphere/findable-ui/lib/apis/azul/common/entities";
+import { Props } from "./types";
+
+export const ExportToPlatform = ({
+  buttonLabel,
+  description,
+  fileManifestState,
+  fileSummaryFacetName,
+  filters,
+  formFacet,
+  speciesFacetName,
+  successTitle,
+  title,
+}: Props): JSX.Element => {
+  useFileManifest(filters, fileSummaryFacetName);
+  useFileManifestFileCount(filters, speciesFacetName, fileSummaryFacetName);
+
+  const fileManifestFormatState = useFileManifestFormat(
+    MANIFEST_DOWNLOAD_FORMAT.VERBATIM_PFB
+  );
+  const { fileManifestFormat } = fileManifestFormatState;
+
+  const requestManifest = useRequestManifest(fileManifestFormat, formFacet);
+  const { requestMethod, requestUrl } = requestManifest;
+
+  const response = useRequestFileLocation(requestUrl, requestMethod);
+  const url = "";
+
+  return url ? (
+    <FluidPaper>
+      <Section>
+        <SectionContent>
+          <h3>{successTitle}</h3>
+        </SectionContent>
+        <SectionActions>
+          <Button
+            {...BUTTON_PROPS.PRIMARY_CONTAINED}
+            href={url}
+            rel={REL_ATTRIBUTE.NO_OPENER_NO_REFERRER}
+            target={ANCHOR_TARGET.BLANK}
+          >
+            {buttonLabel}
+          </Button>
+        </SectionActions>
+      </Section>
+    </FluidPaper>
+  ) : (
+    <div>
+      <Loading
+        loading={response.isLoading}
+        panelStyle={PAPER_PANEL_STYLE.FLUID}
+        text="Your link will be ready shortly..."
+      />
+      <FluidPaper>
+        <Section>
+          <SectionContent>
+            <h3>{title}</h3>
+            <p>{description}</p>
+          </SectionContent>
+          <ExportForm
+            Button={renderButton}
+            formFacet={formFacet}
+            isLoading={fileManifestState.isLoading}
+            onRequestManifest={(): void => response.run()}
+          >
+            <ExportManifestDownloadFormatForm
+              fileManifestFormatState={fileManifestFormatState}
+              manifestDownloadFormats={[MANIFEST_DOWNLOAD_FORMAT.VERBATIM_PFB]}
+            />
+          </ExportForm>
+        </Section>
+      </FluidPaper>
+    </div>
+  );
+};
+
+/**
+ * Build the export button.
+ * @param props - Button props e.g. "onClick" to request manifest.
+ * @returns button element.
+ */
+function renderButton({ ...props }): JSX.Element {
+  return <ExportButton {...props}>Request Link</ExportButton>;
+}

app/components/Export/components/AnVILExplorer/platform/ExportToPlatform/types.ts

@@ -0,0 +1,15 @@
+import { FormFacet } from "@databiosphere/findable-ui/lib/components/Export/common/entities";
+import { FileManifestState } from "@databiosphere/findable-ui/lib/providers/fileManifestState";
+import { Filters } from "@databiosphere/findable-ui/lib/common/entities";
+
+export interface Props {
+  buttonLabel: string;
+  description: string;
+  fileManifestState: FileManifestState;
+  fileSummaryFacetName: string;
+  filters: Filters;
+  formFacet: FormFacet;
+  speciesFacetName: string;
+  successTitle: string;
+  title: string;
+}

app/components/index.tsx

@@ -13,6 +13,7 @@ export {
   DownloadIconSmall,
   InventoryIconSmall,
 } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/common/constants";
+export { ExportToPlatform } from "./Export/components/AnVILExplorer/platform/ExportToPlatform/exportToPlatform";
 export { DiscourseIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/DiscourseIcon/discourseIcon";
 export { GitHubIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/GitHubIcon/gitHubIcon";
 export { OpenInNewIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/OpenInNewIcon/openInNewIcon";

app/shared/entities.ts

@@ -1,4 +1,6 @@
 /**
  * Set of possible feature flags.
  */
-export enum FEATURES {}
+export enum FEATURES {
+  NCPI_EXPORT = "ncpiexport",
+}

app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.ts

@@ -39,16 +39,13 @@ import {
   ChipProps as MChipProps,
   FadeProps as MFadeProps,
 } from "@mui/material";
-import React, { ReactNode } from "react";
+import React, { ComponentProps, ReactNode } from "react";
 import {
   ANVIL_CMG_CATEGORY_KEY,
   ANVIL_CMG_CATEGORY_LABEL,
   DATASET_RESPONSE,
 } from "../../../../../site-config/anvil-cmg/category";
-import {
-  ROUTE_EXPORT_TO_TERRA,
-  ROUTE_MANIFEST_DOWNLOAD,
-} from "../../../../../site-config/anvil-cmg/dev/export/constants";
+import { ROUTES } from "../../../../../site-config/anvil-cmg/dev/export/routes";
 import {
   AggregatedBioSampleResponse,
   AggregatedDatasetResponse,
@@ -452,7 +449,7 @@ export const buildDatasetExportMethodManifestDownload = (
     buttonLabel: "Request File Manifest",
     description:
       "Request a file manifest suitable for downloading this dataset to your HPC cluster or local machine.",
-    route: `${datasetPath}${ROUTE_MANIFEST_DOWNLOAD}`,
+    route: `${datasetPath}${ROUTES.MANIFEST_DOWNLOAD}`,
     title: "Download a File Manifest with Metadata",
   };
 };
@@ -486,7 +483,7 @@ export const buildDatasetExportMethodTerra = (
     buttonLabel: "Analyze in Terra",
     description:
       "Terra is a biomedical research platform to analyze data using workflows, Jupyter Notebooks, RStudio, and Galaxy.",
-    route: `${datasetPath}${ROUTE_EXPORT_TO_TERRA}`,
+    route: `${datasetPath}${ROUTES.TERRA}`,
     title: "Export Dataset Data and Metadata to Terra Workspace",
   };
 };
@@ -744,7 +741,7 @@ export const buildExportMethodManifestDownload = (
     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,
+    route: ROUTES.MANIFEST_DOWNLOAD,
     title: "Download a File Manifest with Metadata for the Selected Data",
   };
 };
@@ -764,7 +761,7 @@ export const buildExportMethodTerra = (
     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,
+    route: ROUTES.TERRA,
     title: "Export Study Data and Metadata to Terra Workspace",
   };
 };
@@ -793,6 +790,77 @@ export const buildExportSelectedDataSummary = (
   };
 };
 
+/**
+ * Build props for ExportToPlatform component.
+ * @param props - Props to pass to the ExportToPlatform component.
+ * @returns model to be used as props for the ExportToPlatform component.
+ */
+export const buildExportToPlatform = (
+  props: Pick<
+    ComponentProps<typeof C.ExportToPlatform>,
+    "buttonLabel" | "description" | "successTitle" | "title"
+  >
+): ((
+  _: unknown,
+  viewContext: ViewContext<unknown>
+) => ComponentProps<typeof C.ExportToPlatform>) => {
+  return (_: unknown, viewContext: ViewContext<unknown>) => {
+    const {
+      exploreState: { filterState },
+      fileManifestState,
+    } = viewContext;
+    return {
+      ...props,
+      fileManifestState,
+      fileSummaryFacetName: ANVIL_CMG_CATEGORY_KEY.FILE_FILE_FORMAT,
+      filters: filterState,
+      formFacet: getFormFacets(fileManifestState),
+      speciesFacetName: ANVIL_CMG_CATEGORY_KEY.DONOR_ORGANISM_TYPE,
+    };
+  };
+};
+
+/**
+ * Build props for ExportToPlatform BackPageHero component.
+ * @param title - Title of the export method.
+ * @returns model to be used as props for the BackPageHero component.
+ */
+export const buildExportToPlatformHero = (
+  title: string
+): ((
+  _: unknown,
+  viewContext: ViewContext<unknown>
+) => React.ComponentProps<typeof C.BackPageHero>) => {
+  return (_, viewContext) => {
+    const {
+      exploreState: { tabValue },
+    } = viewContext;
+    return getExportMethodHero(tabValue, title);
+  };
+};
+
+/**
+ * Build props for ExportMethod component for display of the export to [platform] metadata section.
+ * @param props - Props to pass to the ExportMethod component.
+ * @returns model to be used as props for the ExportMethod component.
+ */
+export const buildExportToPlatformMethod = (
+  props: Pick<
+    ComponentProps<typeof ExportMethod>,
+    "buttonLabel" | "description" | "route" | "title"
+  >
+): ((
+  _: unknown,
+  viewContext: ViewContext<unknown>
+) => ComponentProps<typeof ExportMethod>) => {
+  return (_: unknown, viewContext: ViewContext<unknown>) => {
+    return {
+      ...props,
+      ...getExportMethodAccessibility(viewContext),
+    };
+  };
+};
+
 /**
  * Build props for ExportToTerra component.
  * @param _ - Unused.

e2e/anvil/anvil-dataset.spec.ts

@@ -10,7 +10,7 @@ import {
   DatasetAccess,
 } from "./common/constants";
 import { MUI_CLASSES } from "../features/common/constants";
-import { ROUTE_MANIFEST_DOWNLOAD } from "../../site-config/anvil-cmg/dev/export/constants";
+import { ROUTES } from "../../site-config/anvil-cmg/dev/export/routes";
 import { ANVIL_CMG_CATEGORY_KEY } from "../../site-config/anvil-cmg/category";
 
 const { describe } = test;
@@ -88,7 +88,7 @@ describe("Dataset", () => {
 
     // Navigate to the export file manifest page.
     const currentUrl = page.url();
-    await page.goto(`${currentUrl}${ROUTE_MANIFEST_DOWNLOAD}`);
+    await page.goto(`${currentUrl}${ROUTES.MANIFEST_DOWNLOAD}`);
 
     // Confirm the login alert is displayed.
     await expect(

pages/export/biodata-catalyst.tsx

@@ -0,0 +1,28 @@
+import { JSX } from "react";
+import { ExportMethodView } from "@databiosphere/findable-ui/lib/views/ExportMethodView/exportMethodView";
+import { GetStaticProps } from "next";
+import { useFeatureFlag } from "@databiosphere/findable-ui/lib/hooks/useFeatureFlag/useFeatureFlag";
+import { FEATURES } from "../../app/shared/entities";
+import Error from "next/error";
+
+export const getStaticProps: GetStaticProps = async () => {
+  return {
+    props: {
+      pageTitle: "Export to NHLBI BioData Catalyst",
+    },
+  };
+};
+
+/**
+ * Export method page for BioData Catalyst.
+ * @returns export method view component.
+ */
+const ExportMethodPage = (): JSX.Element => {
+  const isEnabled = useFeatureFlag(FEATURES.NCPI_EXPORT);
+
+  if (!isEnabled) return <Error statusCode={404} />;
+
+  return <ExportMethodView />;
+};
+
+export default ExportMethodPage;

site-config/anvil-cmg/dev/detail/dataset/export/export.ts

@@ -6,10 +6,7 @@ import { sideColumn as exportSideColumn } from "../../../export/exportSideColumn
 import * as V from "../../../../../../app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders";
 import * as C from "../../../../../../app/components";
 import { DatasetsResponse } from "app/apis/azul/anvil-cmg/common/responses";
-import {
-  ROUTE_EXPORT_TO_TERRA,
-  ROUTE_MANIFEST_DOWNLOAD,
-} from "../../../export/constants";
+import { ROUTES } from "../../../export/routes";
 import * as MDX from "../../../../../../app/components/common/MDXContent/anvil-cmg";
 
 /**
@@ -66,7 +63,7 @@ export const exportConfig: ExportConfig = {
           viewBuilder: V.renderDatasetExport,
         } as ComponentConfig<typeof C.ConditionalComponent, DatasetsResponse>,
       ],
-      route: ROUTE_EXPORT_TO_TERRA,
+      route: ROUTES.TERRA,
       top: [
         {
           children: [DATASET_ACCESSIBILITY_BADGE],
@@ -119,7 +116,7 @@ export const exportConfig: ExportConfig = {
           viewBuilder: V.renderDatasetExport,
         } as ComponentConfig<typeof C.ConditionalComponent, DatasetsResponse>,
       ],
-      route: ROUTE_MANIFEST_DOWNLOAD,
+      route: ROUTES.MANIFEST_DOWNLOAD,
       top: [
         {
           children: [DATASET_ACCESSIBILITY_BADGE],