diff --git a/CHANGELOG-add-bulk-download-to-detail-pages.md b/CHANGELOG-add-bulk-download-to-detail-pages.md new file mode 100644 index 0000000000..b32d40bbd0 --- /dev/null +++ b/CHANGELOG-add-bulk-download-to-detail-pages.md @@ -0,0 +1 @@ +- Add bulk file download option to the Bulk Download section of dataset detail pages. \ No newline at end of file diff --git a/context/app/static/js/components/bulkDownload/BulkDownloadButton/BulkDownloadButton.tsx b/context/app/static/js/components/bulkDownload/buttons/BulkDownloadButton/BulkDownloadButton.tsx similarity index 100% rename from context/app/static/js/components/bulkDownload/BulkDownloadButton/BulkDownloadButton.tsx rename to context/app/static/js/components/bulkDownload/buttons/BulkDownloadButton/BulkDownloadButton.tsx diff --git a/context/app/static/js/components/bulkDownload/BulkDownloadButton/index.ts b/context/app/static/js/components/bulkDownload/buttons/BulkDownloadButton/index.ts similarity index 100% rename from context/app/static/js/components/bulkDownload/BulkDownloadButton/index.ts rename to context/app/static/js/components/bulkDownload/buttons/BulkDownloadButton/index.ts diff --git a/context/app/static/js/components/bulkDownload/BulkDownloadButtonFromSearch/BulkDownloadButtonFromSearch.tsx b/context/app/static/js/components/bulkDownload/buttons/BulkDownloadButtonFromSearch/BulkDownloadButtonFromSearch.tsx similarity index 88% rename from context/app/static/js/components/bulkDownload/BulkDownloadButtonFromSearch/BulkDownloadButtonFromSearch.tsx rename to context/app/static/js/components/bulkDownload/buttons/BulkDownloadButtonFromSearch/BulkDownloadButtonFromSearch.tsx index a4c72c3c06..d2f008db0a 100644 --- a/context/app/static/js/components/bulkDownload/BulkDownloadButtonFromSearch/BulkDownloadButtonFromSearch.tsx +++ b/context/app/static/js/components/bulkDownload/buttons/BulkDownloadButtonFromSearch/BulkDownloadButtonFromSearch.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import BulkDownloadButton from 'js/components/bulkDownload/BulkDownloadButton/BulkDownloadButton'; +import BulkDownloadButton from 'js/components/bulkDownload/buttons/BulkDownloadButton/BulkDownloadButton'; import { useSelectableTableStore } from 'js/shared-styles/tables/SelectableTableProvider'; const tooltip = 'Bulk download files for selected datasets.'; diff --git a/context/app/static/js/components/bulkDownload/BulkDownloadButtonFromSearch/index.ts b/context/app/static/js/components/bulkDownload/buttons/BulkDownloadButtonFromSearch/index.ts similarity index 100% rename from context/app/static/js/components/bulkDownload/BulkDownloadButtonFromSearch/index.ts rename to context/app/static/js/components/bulkDownload/buttons/BulkDownloadButtonFromSearch/index.ts diff --git a/context/app/static/js/components/bulkDownload/buttons/BulkDownloadTextButton/BulkDownloadTextButton.tsx b/context/app/static/js/components/bulkDownload/buttons/BulkDownloadTextButton/BulkDownloadTextButton.tsx new file mode 100644 index 0000000000..1ab1b56061 --- /dev/null +++ b/context/app/static/js/components/bulkDownload/buttons/BulkDownloadTextButton/BulkDownloadTextButton.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import Box from '@mui/material/Box'; +import { ButtonProps } from '@mui/material/Button'; +import { useBulkDownloadDialog } from 'js/components/bulkDownload/hooks'; +import BulkDownloadDialog from 'js/components/bulkDownload/BulkDownloadDialog'; +import OutlinedButton from 'js/shared-styles/buttons/OutlinedButton'; + +interface BulkDownloadTextButtonProps extends ButtonProps { + uuids: Set; +} +function BulkDownloadTextButton({ uuids, ...rest }: BulkDownloadTextButtonProps) { + const { openDialog, isOpen } = useBulkDownloadDialog(); + + return ( + + openDialog(uuids)} {...rest}> + Download Files with HuBMAP CLT + + {isOpen && } + + ); +} + +export default BulkDownloadTextButton; diff --git a/context/app/static/js/components/bulkDownload/buttons/BulkDownloadTextButton/index.ts b/context/app/static/js/components/bulkDownload/buttons/BulkDownloadTextButton/index.ts new file mode 100644 index 0000000000..370b26b300 --- /dev/null +++ b/context/app/static/js/components/bulkDownload/buttons/BulkDownloadTextButton/index.ts @@ -0,0 +1,3 @@ +import BulkDownloadTextButton from './BulkDownloadTextButton'; + +export default BulkDownloadTextButton; diff --git a/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferSection.tsx b/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferSection.tsx index d129a7e5d8..6eef6ae9cd 100644 --- a/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferSection.tsx +++ b/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferSection.tsx @@ -1,18 +1,33 @@ import React, { useState } from 'react'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; import { CollapsibleDetailPageSection } from 'js/components/detailPage/DetailPageSection'; import { FilesContextProvider } from 'js/components/detailPage/files/FilesContext'; import { Tabs, Tab, TabPanel } from 'js/shared-styles/tables/TableTabs'; import { DetailSectionPaper } from 'js/shared-styles/surfaces'; +import { OutboundLink } from 'js/shared-styles/Links'; import withShouldDisplay from 'js/helpers/withShouldDisplay'; import { sectionIconMap } from 'js/shared-styles/icons/sectionIconMap'; import { SectionDescription } from 'js/shared-styles/sections/SectionDescription'; +import BulkDownloadTextButton from 'js/components/bulkDownload/buttons/BulkDownloadTextButton'; +import { LINKS } from 'js/components/bulkDownload/constants'; import BulkDataTransferPanels from './BulkDataTransferPanels'; import { useProcessedDatasetTabs } from '../ProcessedData/ProcessedDataset/hooks'; -import { BULK_DATA_DESCRIPTION_TEXT } from './const'; + +const description = ( + + This section explains how to bulk download the raw and processed data for this dataset. Files for individual raw or + processed data can be downloaded via Globus or dbGaP from the respective tabs. To download files from multiple + Globus directories simultaneously, use the + HuBMAP Command Line Transfer (CLT) Tool. Note that + processed data has separate download directories in Globus or dbGaP, distinct from the raw data directory. + +); function BulkDataTransfer() { const tabs = useProcessedDatasetTabs(); + const uuids = new Set(tabs.map((tab) => tab.uuid)); const [openTabIndex, setOpenTabIndex] = useState(0); @@ -24,7 +39,12 @@ function BulkDataTransfer() { icon={sectionIconMap['bulk-data-transfer']} > - {BULK_DATA_DESCRIPTION_TEXT} + + + {description} + + + { diff --git a/context/app/static/js/components/detailPage/BulkDataTransfer/const.ts b/context/app/static/js/components/detailPage/BulkDataTransfer/const.ts index 401ef6a8e9..97c9e62f78 100644 --- a/context/app/static/js/components/detailPage/BulkDataTransfer/const.ts +++ b/context/app/static/js/components/detailPage/BulkDataTransfer/const.ts @@ -17,6 +17,3 @@ export const SRA_EXPERIMENT_TEXT = { description: 'Select the "Run" link on the page to download the dataset information.', outboundLink: 'https://www.ncbi.nlm.nih.gov/sra/docs/', }; - -export const BULK_DATA_DESCRIPTION_TEXT = - 'This section explains how to download data in bulk from raw and processed datasets. Processed datasets have separate download directories in Globus or dbGaP, distinct from the raw dataset.'; diff --git a/context/app/static/js/components/detailPage/CollectionDatasetsTable/CollectionDatasetsTable.tsx b/context/app/static/js/components/detailPage/CollectionDatasetsTable/CollectionDatasetsTable.tsx index 22b35e7aee..9d4254f846 100644 --- a/context/app/static/js/components/detailPage/CollectionDatasetsTable/CollectionDatasetsTable.tsx +++ b/context/app/static/js/components/detailPage/CollectionDatasetsTable/CollectionDatasetsTable.tsx @@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography'; import type { Entity } from 'js/components/types'; import { CollapsibleDetailPageSection } from 'js/components/detailPage/DetailPageSection'; import RelatedEntitiesTable from 'js/components/detailPage/related-entities/RelatedEntitiesTable'; -import BulkDownloadButton from 'js/components/bulkDownload/BulkDownloadButton'; +import BulkDownloadButton from 'js/components/bulkDownload/buttons/BulkDownloadButton'; import { SpacedSectionButtonRow } from 'js/shared-styles/sections/SectionButtonRow'; import { sectionIconMap } from 'js/shared-styles/icons/sectionIconMap'; diff --git a/context/app/static/js/components/detailPage/related-entities/RelatedEntitiesSectionActions/RelatedEntitiesSectionActions.tsx b/context/app/static/js/components/detailPage/related-entities/RelatedEntitiesSectionActions/RelatedEntitiesSectionActions.tsx index 4fb1847dbe..fc63f9a3a7 100644 --- a/context/app/static/js/components/detailPage/related-entities/RelatedEntitiesSectionActions/RelatedEntitiesSectionActions.tsx +++ b/context/app/static/js/components/detailPage/related-entities/RelatedEntitiesSectionActions/RelatedEntitiesSectionActions.tsx @@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack'; import { useFlaskDataContext } from 'js/components/Contexts'; import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent'; -import BulkDownloadButton from 'js/components/bulkDownload/BulkDownloadButton'; +import BulkDownloadButton from 'js/components/bulkDownload/buttons/BulkDownloadButton'; interface RelatedEntitiesSectionHeaderProps { searchPageHref: string; diff --git a/context/app/static/js/components/search/Search.tsx b/context/app/static/js/components/search/Search.tsx index 0cee7b1ffd..0700ef76c3 100644 --- a/context/app/static/js/components/search/Search.tsx +++ b/context/app/static/js/components/search/Search.tsx @@ -16,7 +16,7 @@ import history from 'history/browser'; import { useAppContext } from 'js/components/Contexts'; import SelectableTableProvider from 'js/shared-styles/tables/SelectableTableProvider'; import WorkspacesDropdownMenu, { WorkspaceSearchDialogs } from 'js/components/workspaces/WorkspacesDropdownMenu'; -import BulkDownloadButtonFromSearch from 'js/components/bulkDownload/BulkDownloadButtonFromSearch'; +import BulkDownloadButtonFromSearch from 'js/components/bulkDownload/buttons/BulkDownloadButtonFromSearch'; import { entityIconMap } from 'js/shared-styles/icons/entityIconMap'; import { SearchStoreProvider, diff --git a/context/app/static/js/components/searchPage/SearchBarLayout/SearchBarLayout.jsx b/context/app/static/js/components/searchPage/SearchBarLayout/SearchBarLayout.jsx index df245a594c..bf4d551df2 100644 --- a/context/app/static/js/components/searchPage/SearchBarLayout/SearchBarLayout.jsx +++ b/context/app/static/js/components/searchPage/SearchBarLayout/SearchBarLayout.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { SearchBox, SelectedFilters, SortingSelector, ViewSwitcherToggle, SimpleQueryString } from 'searchkit'; import Stack from '@mui/material/Stack'; -import BulkDownloadButtonFromSearch from 'js/components/bulkDownload/BulkDownloadButtonFromSearch'; +import BulkDownloadButtonFromSearch from 'js/components/bulkDownload/buttons/BulkDownloadButtonFromSearch'; import { withAnalyticsCategory } from 'js/components/searchPage/hooks'; import WorkspacesDropdownMenu from 'js/components/workspaces/WorkspacesDropdownMenu'; import SearchViewSwitch, { DevSearchViewSwitch } from './SearchViewSwitch'; diff --git a/context/app/static/js/shared-styles/buttons/OutlinedButton/index.ts b/context/app/static/js/shared-styles/buttons/OutlinedButton/index.ts new file mode 100644 index 0000000000..97749e55a4 --- /dev/null +++ b/context/app/static/js/shared-styles/buttons/OutlinedButton/index.ts @@ -0,0 +1,3 @@ +import OutlinedButton from './style'; + +export default OutlinedButton; diff --git a/context/app/static/js/shared-styles/buttons/OutlinedButton/style.tsx b/context/app/static/js/shared-styles/buttons/OutlinedButton/style.tsx new file mode 100644 index 0000000000..29bd4278b8 --- /dev/null +++ b/context/app/static/js/shared-styles/buttons/OutlinedButton/style.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { styled } from '@mui/material/styles'; +import Button, { ButtonProps } from '@mui/material/Button'; + +const OutlinedButton = styled((props: ButtonProps) =>