feat: Dataset Download

packages/client/public/locales/en/translation.json

@@ -25,7 +25,10 @@
     "video": "video",
     "key": "key",
     "primary": "primay",
-    "redo": "Redo"
+    "redo": "Redo",
+    "dataset": "Dataset",
+    "status": "Status",
+    "dateFormat": "{{date,  datetime}}"
   },
   "languages": {
     "en": "English",
@@ -51,7 +54,8 @@
     "projectAccess": "Project Access",
     "contribute": "Contribute",
     "tagInStudy": "Tag in Study",
-    "logout": "Logout"
+    "logout": "Logout",
+    "datasetDownloads": "Dataset Downloads"
   },
   "components": {
     "environment": {
@@ -77,7 +81,15 @@
       "deleteDescription": "Are you sure you want to delete this entry? Doing so will delete all cooresponding tags",
       "addDataset": " Add New Dataset",
       "uploadEntries": " Upload Entries",
-      "deleteMultipleEntries": "Are you sure you want to delete selected entries? All cooresponding tags will be deleted"
+      "deleteMultipleEntries": "Are you sure you want to delete selected entries? All cooresponding tags will be deleted",
+      "downloadTitle": "Dataset Download Request",
+      "downloadDescription": "Would you like to download this dataset? All entries will be downloaded. Once complete, the downloaded results will be available in the download center",
+      "downloadStartedSuccess": "Download has started, go to download center to get artifacts when complete",
+      "downloadFailed": "Could not download dataset, please reach out to administrator"
+    },
+    "datasetDownload": {
+      "requestDate": "Request Date",
+      "entryDownload": "Entry Download"
     },
     "projectAccess": {
       "datasetName": "Dataset Name",

packages/client/src/App.tsx

@@ -30,6 +30,7 @@ import { EntryControls } from './pages/studies/EntryControls';
 import { PermissionProvider } from './context/Permission.context';
 import { TagTrainingView } from './pages/studies/TagTrainingView';
 import { SnackbarProvider } from './context/Snackbar.context';
+import { DatasetDownloads } from './pages/datasets/DatasetDownloads';
 
 const drawerWidth = 256;
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
@@ -137,6 +138,7 @@ const MyRoutes: FC = () => {
         <Route path={'/successpage'} element={<SuccessPage />} />
         <Route path={'/dataset/controls'} element={<DatasetControls />} />
         <Route path={'/dataset/projectaccess'} element={<ProjectAccess />} />
+        <Route path={'/dataset/downloads'} element={<DatasetDownloads />} />
         <Route path={'/contribute/landing'} element={<ContributeLanding />} />
         <Route path={'/contribute/tagging'} element={<TaggingInterface />} />
       </Route>

packages/client/src/components/DatasetsView.component.tsx

@@ -1,8 +1,13 @@
-import { Accordion, AccordionSummary, Typography, Stack, AccordionDetails } from '@mui/material';
+import { Accordion, AccordionSummary, Typography, Stack, AccordionDetails, IconButton } from '@mui/material';
 import { Dataset } from '../graphql/graphql';
 import { DatasetTable } from './DatasetTable.component';
-import { ExpandMore } from '@mui/icons-material';
+import { Download, ExpandMore } from '@mui/icons-material';
 import { GridColDef } from '@mui/x-data-grid';
+import { useConfirmation } from '../context/Confirmation.context';
+import { useTranslation } from 'react-i18next';
+import { useCreateDatasetDownloadMutation } from '../graphql/dataset/dataset';
+import { useEffect } from 'react';
+import { useSnackbar } from '../context/Snackbar.context';
 
 export interface DatasetsViewProps {
   datasets: Dataset[];
@@ -12,6 +17,39 @@ export interface DatasetsViewProps {
 
 // TODO: Implement lazy loading on accordion open to prevent loading all datasets at once
 export const DatasetsView: React.FC<DatasetsViewProps> = ({ datasets, additionalColumns, supportEntryDelete }) => {
+  const confirmation = useConfirmation();
+  const { t } = useTranslation();
+  const [createDownloadMutation, createDownloadResults] = useCreateDatasetDownloadMutation();
+  const { pushSnackbarMessage } = useSnackbar();
+
+  // Gets confirmation from the user they want to download the whole dataset
+  // TODO: Add cool down in case the user does not read the confirmation
+  const handleDatasetDownloadRequest = (dataset: Dataset) => {
+    confirmation.pushConfirmationRequest({
+      title: t('components.datasetControl.downloadTitle'),
+      message: t('components.datasetControl.downloadDescription'),
+      onConfirm: () => {
+        createDownloadMutation({
+          variables: {
+            downloadRequest: {
+              dataset: dataset._id
+            }
+          }
+        });
+      },
+      onCancel: () => {}
+    });
+  };
+
+  // Share the results with the user
+  useEffect(() => {
+    if (createDownloadResults.data) {
+      pushSnackbarMessage(t('components.datasetControl.downloadStartedSuccess'), 'success');
+    } else if (createDownloadResults.error) {
+      pushSnackbarMessage(t('components.datasetControl.downloadFailed'), 'error');
+    }
+  }, [createDownloadResults.data, createDownloadResults.error]);
+
   return (
     <>
       {datasets.map((dataset: Dataset) => (
@@ -20,6 +58,9 @@ export const DatasetsView: React.FC<DatasetsViewProps> = ({ datasets, additional
             <Stack direction="row" spacing={6}>
               <Typography>{dataset.name}</Typography>
               <Typography>{dataset.description}</Typography>
+              <IconButton onClick={() => handleDatasetDownloadRequest(dataset)}>
+                <Download />
+              </IconButton>
             </Stack>
           </AccordionSummary>
           <AccordionDetails>

packages/client/src/components/SideBar.component.tsx

@@ -63,7 +63,8 @@ export const SideBar: FC<SideBarProps> = ({ open, drawerWidth }) => {
       permission,
       subItems: [
         { name: t('menu.datasetControl'), action: () => navigate('/dataset/controls'), visible: (p) => p!.owner },
-        { name: t('menu.projectAccess'), action: () => navigate('/dataset/projectaccess'), visible: (p) => p!.owner }
+        { name: t('menu.projectAccess'), action: () => navigate('/dataset/projectaccess'), visible: (p) => p!.owner },
+        { name: t('menu.datasetDownloads'), action: () => navigate('/dataset/downloads'), visible: (p) => p!.owner }
       ]
     },
     {

packages/client/src/graphql/dataset/dataset.graphql

@@ -25,3 +25,30 @@ mutation createDataset($dataset: DatasetCreate!) {
     description
   }
 }
+
+mutation createDatasetDownload($downloadRequest: CreateDatasetDownloadRequest!) {
+  createDatasetDownload(downloadRequest: $downloadRequest) {
+    _id,
+    date,
+    status,
+    dataset {
+      _id,
+      name,
+      description
+    }
+  }
+}
+
+query getDatasetDownloads($dataset: ID!) {
+  getDatasetDownloads(dataset: $dataset) {
+    _id,
+    date,
+    status,
+    entryZip,
+    dataset {
+      _id,
+      name,
+      description
+    }
+  }
+}

packages/client/src/graphql/dataset/dataset.ts

@@ -31,6 +31,20 @@ export type CreateDatasetMutationVariables = Types.Exact<{
 
 export type CreateDatasetMutation = { __typename?: 'Mutation', createDataset: { __typename?: 'Dataset', _id: string, name: string, description: string } };
 
+export type CreateDatasetDownloadMutationVariables = Types.Exact<{
+  downloadRequest: Types.CreateDatasetDownloadRequest;
+}>;
+
+
+export type CreateDatasetDownloadMutation = { __typename?: 'Mutation', createDatasetDownload: { __typename?: 'DatasetDownloadRequest', _id: string, date: any, status: Types.DownloadStatus, dataset: { __typename?: 'Dataset', _id: string, name: string, description: string } } };
+
+export type GetDatasetDownloadsQueryVariables = Types.Exact<{
+  dataset: Types.Scalars['ID']['input'];
+}>;
+
+
+export type GetDatasetDownloadsQuery = { __typename?: 'Query', getDatasetDownloads: Array<{ __typename?: 'DatasetDownloadRequest', _id: string, date: any, status: Types.DownloadStatus, entryZip: string, dataset: { __typename?: 'Dataset', _id: string, name: string, description: string } }> };
+
 
 export const GetDatasetsDocument = gql`
     query getDatasets {
@@ -172,4 +186,87 @@ export function useCreateDatasetMutation(baseOptions?: Apollo.MutationHookOption
       }
 export type CreateDatasetMutationHookResult = ReturnType<typeof useCreateDatasetMutation>;
 export type CreateDatasetMutationResult = Apollo.MutationResult<CreateDatasetMutation>;
-export type CreateDatasetMutationOptions = Apollo.BaseMutationOptions<CreateDatasetMutation, CreateDatasetMutationVariables>;
+export type CreateDatasetMutationOptions = Apollo.BaseMutationOptions<CreateDatasetMutation, CreateDatasetMutationVariables>;
+export const CreateDatasetDownloadDocument = gql`
+    mutation createDatasetDownload($downloadRequest: CreateDatasetDownloadRequest!) {
+  createDatasetDownload(downloadRequest: $downloadRequest) {
+    _id
+    date
+    status
+    dataset {
+      _id
+      name
+      description
+    }
+  }
+}
+    `;
+export type CreateDatasetDownloadMutationFn = Apollo.MutationFunction<CreateDatasetDownloadMutation, CreateDatasetDownloadMutationVariables>;
+
+/**
+ * __useCreateDatasetDownloadMutation__
+ *
+ * To run a mutation, you first call `useCreateDatasetDownloadMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateDatasetDownloadMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createDatasetDownloadMutation, { data, loading, error }] = useCreateDatasetDownloadMutation({
+ *   variables: {
+ *      downloadRequest: // value for 'downloadRequest'
+ *   },
+ * });
+ */
+export function useCreateDatasetDownloadMutation(baseOptions?: Apollo.MutationHookOptions<CreateDatasetDownloadMutation, CreateDatasetDownloadMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateDatasetDownloadMutation, CreateDatasetDownloadMutationVariables>(CreateDatasetDownloadDocument, options);
+      }
+export type CreateDatasetDownloadMutationHookResult = ReturnType<typeof useCreateDatasetDownloadMutation>;
+export type CreateDatasetDownloadMutationResult = Apollo.MutationResult<CreateDatasetDownloadMutation>;
+export type CreateDatasetDownloadMutationOptions = Apollo.BaseMutationOptions<CreateDatasetDownloadMutation, CreateDatasetDownloadMutationVariables>;
+export const GetDatasetDownloadsDocument = gql`
+    query getDatasetDownloads($dataset: ID!) {
+  getDatasetDownloads(dataset: $dataset) {
+    _id
+    date
+    status
+    entryZip
+    dataset {
+      _id
+      name
+      description
+    }
+  }
+}
+    `;
+
+/**
+ * __useGetDatasetDownloadsQuery__
+ *
+ * To run a query within a React component, call `useGetDatasetDownloadsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetDatasetDownloadsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetDatasetDownloadsQuery({
+ *   variables: {
+ *      dataset: // value for 'dataset'
+ *   },
+ * });
+ */
+export function useGetDatasetDownloadsQuery(baseOptions: Apollo.QueryHookOptions<GetDatasetDownloadsQuery, GetDatasetDownloadsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetDatasetDownloadsQuery, GetDatasetDownloadsQueryVariables>(GetDatasetDownloadsDocument, options);
+      }
+export function useGetDatasetDownloadsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetDatasetDownloadsQuery, GetDatasetDownloadsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetDatasetDownloadsQuery, GetDatasetDownloadsQueryVariables>(GetDatasetDownloadsDocument, options);
+        }
+export type GetDatasetDownloadsQueryHookResult = ReturnType<typeof useGetDatasetDownloadsQuery>;
+export type GetDatasetDownloadsLazyQueryHookResult = ReturnType<typeof useGetDatasetDownloadsLazyQuery>;
+export type GetDatasetDownloadsQueryResult = Apollo.QueryResult<GetDatasetDownloadsQuery, GetDatasetDownloadsQueryVariables>;

packages/client/src/graphql/graphql.ts

@@ -28,6 +28,10 @@ export type BooleanField = {
   value: Scalars['Boolean']['output'];
 };
 
+export type CreateDatasetDownloadRequest = {
+  dataset: Scalars['ID']['input'];
+};
+
 export type Dataset = {
   __typename?: 'Dataset';
   _id: Scalars['ID']['output'];
@@ -40,12 +44,26 @@ export type DatasetCreate = {
   name: Scalars['String']['input'];
 };
 
+export type DatasetDownloadRequest = {
+  __typename?: 'DatasetDownloadRequest';
+  _id: Scalars['String']['output'];
+  dataset: Dataset;
+  date: Scalars['DateTime']['output'];
+  entryZip: Scalars['String']['output'];
+  status: DownloadStatus;
+};
+
 export type DatasetProjectPermission = {
   __typename?: 'DatasetProjectPermission';
   dataset: Dataset;
   projectHasAccess: Scalars['Boolean']['output'];
 };
 
+export enum DownloadStatus {
+  InProgress = 'IN_PROGRESS',
+  Ready = 'READY'
+}
+
 export type Entry = {
   __typename?: 'Entry';
   _id: Scalars['String']['output'];
@@ -125,6 +143,7 @@ export type Mutation = {
   completeTag: Scalars['Boolean']['output'];
   completeUploadSession: UploadResult;
   createDataset: Dataset;
+  createDatasetDownload: DatasetDownloadRequest;
   createOrganization: Organization;
   createStudy: Study;
   createTags: Array<Tag>;
@@ -195,6 +214,11 @@ export type MutationCreateDatasetArgs = {
 };
 
 
+export type MutationCreateDatasetDownloadArgs = {
+  downloadRequest: CreateDatasetDownloadRequest;
+};
+
+
 export type MutationCreateOrganizationArgs = {
   organization: OrganizationCreate;
 };
@@ -377,6 +401,7 @@ export type Query = {
   findStudies: Array<Study>;
   /** Get the presigned URL for where to upload the CSV against */
   getCSVUploadURL: Scalars['String']['output'];
+  getDatasetDownloads: Array<DatasetDownloadRequest>;
   getDatasetProjectPermissions: Array<DatasetProjectPermission>;
   getDatasets: Array<Dataset>;
   getDatasetsByProject: Array<Dataset>;
@@ -428,6 +453,11 @@ export type QueryGetCsvUploadUrlArgs = {
 };
 
 
+export type QueryGetDatasetDownloadsArgs = {
+  dataset: Scalars['ID']['input'];
+};
+
+
 export type QueryGetDatasetProjectPermissionsArgs = {
   project: Scalars['ID']['input'];
 };

packages/client/src/i18n.js

@@ -5,5 +5,8 @@ import Backend from 'i18next-http-backend';
 
 i18next.use(initReactI18next).use(LanguageDetector).use(Backend).init({
   fallbackLang: 'en',
-  debug: true
+  debug: true,
+  interpolation: {
+    escapeValue: false
+  }
 });