diff --git a/app/components/Export/components/AnVILExplorer/components/ExportMethod/components/ExportIcon/exportIcon.tsx b/app/components/Export/components/AnVILExplorer/components/ExportMethod/components/ExportIcon/exportIcon.tsx new file mode 100644 index 000000000..aa5b63be5 --- /dev/null +++ b/app/components/Export/components/AnVILExplorer/components/ExportMethod/components/ExportIcon/exportIcon.tsx @@ -0,0 +1,13 @@ +import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage"; +import type { ComponentProps, JSX } from "react"; + +/** + * Icon component that wraps the StaticImage component. + * @param props - Component props. + * @returns JSX element representing the icon. + */ +export const ExportIcon = ( + props: ComponentProps +): JSX.Element => { + return ; +}; diff --git a/app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.tsx b/app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.tsx index 20d5ed31f..a39c9e8e1 100644 --- a/app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.tsx +++ b/app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.tsx @@ -39,7 +39,6 @@ import { FadeProps as MFadeProps, Tooltip, } from "@mui/material"; -import { ExportEntity } from "app/components/Export/components/AnVILExplorer/components/ExportEntity/exportEntity"; import React, { ComponentProps, ReactNode } from "react"; import { ANVIL_CMG_CATEGORY_KEY, @@ -104,6 +103,8 @@ import * as C from "../../../../components"; import * as MDX from "../../../../components/common/MDXContent/anvil-cmg"; import { RequestAccess } from "../../../../components/Detail/components/AnVILCMG/components/RequestAccess/requestAccess"; import { Description } from "../../../../components/Detail/components/MDX/components/Description/description"; +import { ExportEntity } from "../../../../components/Export/components/AnVILExplorer/components/ExportEntity/exportEntity"; +import { ExportIcon } from "../../../../components/Export/components/AnVILExplorer/components/ExportMethod/components/ExportIcon/exportIcon"; import { METADATA_KEY } from "../../../../components/Index/common/entities"; import { getPluralizedMetadataLabel } from "../../../../components/Index/common/indexTransformer"; import { SUMMARY_DISPLAY_TEXT } from "./summaryMapper/constants"; @@ -472,6 +473,7 @@ export const buildDatasetExportMethodManifestDownload = ( return { description: "Download a TSV manifest containing metadata for all data files in the dataset.", + icon: , route: `${datasetPath}${ROUTES.MANIFEST_DOWNLOAD}`, title: "Download TSV Manifest", }; @@ -505,6 +507,7 @@ export const buildDatasetExportMethodTerra = ( return { description: "Terra is a biomedical research platform to analyze data using workflows, Jupyter Notebooks, RStudio, and Galaxy.", + icon: , route: `${datasetPath}${ROUTES.TERRA}`, title: "Export to Terra", }; @@ -534,6 +537,7 @@ export const buildDatasetExportMethodCurlCommand = ( return { description: "Generate a curl command to download all files in this open-access dataset.", + icon: , route: `${datasetPath}${ROUTES.CURL_DOWNLOAD}`, title: "Download Open-Access Data Files (No Data Transfer Fees)", }; @@ -620,7 +624,7 @@ export const buildDatasetExportToPlatformMethod = ({ ...props }: Pick< ComponentProps, - "description" | "route" | "title" + "description" | "icon" | "route" | "title" >): (( response: DatasetsResponse, viewContext: ViewContext @@ -887,6 +891,7 @@ export const buildExportMethodManifestDownload = ( ...getExportMethodAccessibility(viewContext), description: "Download a TSV manifest containing metadata for all data files in the current selection, including managed-access files.", + icon: , route: ROUTES.MANIFEST_DOWNLOAD, title: "Download TSV Manifest for All Selected Data Files", }; @@ -906,6 +911,7 @@ export const buildExportMethodTerra = ( ...getExportMethodAccessibility(viewContext), description: "Terra is a biomedical research platform to analyze data using workflows, Jupyter Notebooks, RStudio, and Galaxy.", + icon: , route: ROUTES.TERRA, title: "Export to Terra", }; @@ -956,6 +962,7 @@ export const buildExportMethodBulkDownload = ( files in the current selection. ), + icon: , route: ROUTES.CURL_DOWNLOAD, title: "Download Open-Access Data Files (No Data Transfer Fees)", }; @@ -1059,7 +1066,7 @@ export const buildExportToPlatformHero = ( export const buildExportToPlatformMethod = ( props: Pick< ComponentProps, - "description" | "route" | "title" + "description" | "icon" | "route" | "title" > ): (( _: unknown, diff --git a/e2e/anvil/anvil-dataset.spec.ts b/e2e/anvil/anvil-dataset.spec.ts index e3d623a10..6b0ebe84b 100644 --- a/e2e/anvil/anvil-dataset.spec.ts +++ b/e2e/anvil/anvil-dataset.spec.ts @@ -176,7 +176,8 @@ describe("Dataset", () => { */ async function clickCard(page: Page, headingText: string): Promise { await getHeadingWithText(page, headingText) - .locator("xpath=ancestor::a") + .locator("xpath=ancestor::*[contains(@class,'MuiPaper-root')]") + .locator(".MuiCardActionArea-root") .click(); } diff --git a/e2e/testFunctions.ts b/e2e/testFunctions.ts index 4467a7c0d..517c7f8ac 100644 --- a/e2e/testFunctions.ts +++ b/e2e/testFunctions.ts @@ -1199,7 +1199,9 @@ export async function testPaginationContent( * @returns - Playwright locator object for the card with the given heading text. */ function getCard(page: Page, headingText: string): Locator { - return getHeadingWithText(page, headingText).locator("xpath=ancestor::a"); + return getHeadingWithText(page, headingText) + .locator("xpath=ancestor::*[contains(@class,'MuiPaper-root')]") + .locator(".MuiCardActionArea-root"); } /** diff --git a/package-lock.json b/package-lock.json index 828a5221f..13b8f29c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "explorer", "version": "2.30.0", "dependencies": { - "@databiosphere/findable-ui": "^50.4.0", + "@databiosphere/findable-ui": "^50.5.0", "@emotion/react": "^11", "@emotion/styled": "^11", "@mdx-js/loader": "^3", @@ -1052,9 +1052,9 @@ } }, "node_modules/@databiosphere/findable-ui": { - "version": "50.4.0", - "resolved": "https://registry.npmjs.org/@databiosphere/findable-ui/-/findable-ui-50.4.0.tgz", - "integrity": "sha512-mCcfpekFvYDITqy6FMQk+lVyMWVIUz/kTGEH7i2Bx0OZd+T4AWseuYE+OZal/mYp7NQCCQoV4HO481sFKKcNzw==", + "version": "50.5.0", + "resolved": "https://registry.npmjs.org/@databiosphere/findable-ui/-/findable-ui-50.5.0.tgz", + "integrity": "sha512-bf00fAtteVi7BIJats97w6frN1iaQNLQTQVH7SDQ/IoQbvhCPQgM77xJwNwgsFWnaH/jf4hjIuGsPR8Z/NBbZw==", "license": "Apache-2.0", "engines": { "node": "22.12.0" diff --git a/package.json b/package.json index ab588fda3..93c882e6d 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "check-system-status:anvil-cmg": "esrun e2e/anvil/anvil-check-system-status.ts" }, "dependencies": { - "@databiosphere/findable-ui": "^50.4.0", + "@databiosphere/findable-ui": "^50.5.0", "@emotion/react": "^11", "@emotion/styled": "^11", "@mdx-js/loader": "^3", diff --git a/public/export/bdc.webp b/public/export/bdc.webp new file mode 100644 index 000000000..92b253a9c Binary files /dev/null and b/public/export/bdc.webp differ diff --git a/public/export/cavatica.webp b/public/export/cavatica.webp new file mode 100644 index 000000000..3e91ad90d Binary files /dev/null and b/public/export/cavatica.webp differ diff --git a/public/export/cgc.webp b/public/export/cgc.webp new file mode 100644 index 000000000..d34066904 Binary files /dev/null and b/public/export/cgc.webp differ diff --git a/public/export/curl.webp b/public/export/curl.webp new file mode 100644 index 000000000..83718523c Binary files /dev/null and b/public/export/curl.webp differ diff --git a/public/export/manifest.webp b/public/export/manifest.webp new file mode 100644 index 000000000..f193cdef7 Binary files /dev/null and b/public/export/manifest.webp differ diff --git a/public/export/terra.webp b/public/export/terra.webp new file mode 100644 index 000000000..ed46acf2b Binary files /dev/null and b/public/export/terra.webp differ diff --git a/site-config/anvil-cmg/dev/export/constants.ts b/site-config/anvil-cmg/dev/export/constants.tsx similarity index 80% rename from site-config/anvil-cmg/dev/export/constants.ts rename to site-config/anvil-cmg/dev/export/constants.tsx index 80de619cb..b2d2dc83c 100644 --- a/site-config/anvil-cmg/dev/export/constants.ts +++ b/site-config/anvil-cmg/dev/export/constants.tsx @@ -1,6 +1,7 @@ import { ExportMethod } from "@databiosphere/findable-ui/lib/components/Export/components/ExportMethod/exportMethod"; import { ComponentProps } from "react"; import { ExportToPlatform } from "../../../../app/components"; +import { ExportIcon } from "../../../../app/components/Export/components/AnVILExplorer/components/ExportMethod/components/ExportIcon/exportIcon"; import { ROUTES } from "./routes"; export const EXPORTS: Record< @@ -35,20 +36,26 @@ export const EXPORTS: Record< export const EXPORT_METHODS: Record< string, - Pick, "description" | "route" | "title"> + Pick< + ComponentProps, + "description" | "icon" | "route" | "title" + > > = { BIO_DATA_CATALYST: { description: EXPORTS.BIO_DATA_CATALYST.description, + icon: , route: ROUTES.BIO_DATA_CATALYST, title: "Export to BioData Catalyst Powered by Seven Bridges (BDC-SB)", }, CANCER_GENOMICS_CLOUD: { description: EXPORTS.CANCER_GENOMICS_CLOUD.description, + icon: , route: ROUTES.CANCER_GENOMICS_CLOUD, title: "Export to Cancer Genomics Cloud (CGC)", }, CAVATICA: { description: EXPORTS.CAVATICA.description, + icon: , route: ROUTES.CAVATICA, title: "Export to CAVATICA", },