🔀 merge: staging to main (#159)

Co-authored-by: Heath Harrelson <[email protected]> Co-authored-by: Erik Benton <[email protected]> Co-authored-by: Erik Benton <[email protected]> Co-authored-by: Aydawka <[email protected]> Co-authored-by: Aydan <[email protected]>
AI-READI · Nov 7, 2024 · 2c1adc0 · 2c1adc0
1 parent 3887a3b
commit 2c1adc0
Show file tree

Hide file tree

Showing 21 changed files with 1,043 additions and 934 deletions.
diff --git a/components/download/FolderSelector.vue b/components/download/FolderSelector.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import prettyBytes from "pretty-bytes";
+
 const props = defineProps({
   datasetStructureDescription: {
     required: true,
@@ -14,7 +16,9 @@ const selectedFolders = defineModel<string[]>({ required: true });
 
 type FolderDescriptor = {
   name: string;
-  description: string;
+  description: string | undefined;
+  numberOfFiles: number | undefined;
+  size: number | undefined;
   type: string;
 };
 
@@ -24,6 +28,8 @@ const folderMetadata = computed(() => {
     .map((item) => ({
       name: item.directoryName,
       description: item.directoryDescription,
+      numberOfFiles: item.numberOfFiles,
+      size: item.size,
       type: item.directoryType,
     }))
     .reduce((acc, item) => acc.set(item.name, item), metadata);
@@ -35,17 +41,31 @@ const folders = computed(() =>
     .filter((file) => file.children)
     .map((folder) => {
       const metadata = folderMetadata.value;
+      const folderDescriptor = metadata.get(folder.label);
       const description =
-        metadata.get(folder.label)?.description ??
-        "No description found for this folder";
+        folderDescriptor?.description ?? "No description found for this folder";
+      const size = folderDescriptor?.size;
+      const numberOfFiles = folderDescriptor?.numberOfFiles;
       return {
         id: useId(),
         description,
         label: folder.label,
+        numberOfFiles,
         selected: false,
+        size,
       };
     }),
 );
+
+const hasFolderSizes = computed(() =>
+  folders.value.every((folder) => Number.isFinite(folder.size)),
+);
+
+const totalBytes = computed(() =>
+  selectedFolders.value
+    .map((label) => folderMetadata.value.get(label))
+    .reduce((prev, curr) => (curr?.size ? prev + curr?.size : prev + 0), 0),
+);
 </script>
 
 <template>
@@ -68,9 +88,18 @@ const folders = computed(() =>
             <span :id="`folder-description-${folder.id}`">
               {{ folder.description }}
             </span>
+
+            <span v-if="folder.size" class="text-xs font-thin"
+              >{{ folder.numberOfFiles }} files,
+              {{ prettyBytes(folder.size) }}</span
+            >
           </div>
         </div>
       </n-card>
     </n-flex>
   </n-checkbox-group>
+
+  <p v-if="hasFolderSizes">
+    Total size of selected folders: {{ prettyBytes(totalBytes) }}
+  </p>
 </template>
diff --git a/components/download/StepNav.vue b/components/download/StepNav.vue
@@ -3,8 +3,9 @@ import type { StepsProps } from "naive-ui";
 
 const steps = [
   "Overview",
-  "Training",
   "Log In",
+  "Diabetes Research",
+  "Training",
   "Research Purpose",
   "License",
   "Select Data",

diff --git a/components/side/DatasetSize.vue b/components/side/DatasetSize.vue
@@ -14,7 +14,7 @@ const props = defineProps({
   },
 });
 
-const parsedSize = byteSize(props.size).toString();
+const parsedSize = byteSize(props.size, { precision: 2 }).toString();
 </script>
 
 <template>

diff --git a/composables/useDownloadAgreementForm.ts b/composables/useDownloadAgreementForm.ts
@@ -0,0 +1,11 @@
+import type { DownloadAgreementFormState } from "~/types/download";
+
+/**
+ * Provides access to the cookie where the answers about the user's research purpose are stored.
+ */
+export default function useDownloadAgreementForm(datasetid: string) {
+  return useState<DownloadAgreementFormState>(
+    `dataset-${datasetid}-research-purpose-state`,
+    () => ({}),
+  );
+}
diff --git a/dev/datasetRecord.json b/dev/datasetRecord.json
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -138,6 +138,11 @@ export default defineNuxtConfig({
           : process.env.NUXT_SITE_ENV === "staging"
             ? "https://staging.api.fairhub.io"
             : "https://api.fairhub.io",
+      STUDY_RELEASE_TIMESTAMP:
+        process.env.NUXT_SITE_ENV === "dev" ||
+        process.env.NUXT_SITE_ENV === "staging"
+          ? "1730950200" // Wed Nov 06 2024 19:30:00 GMT-0800 (Pacific Standard Time)
+          : "1731060000", // Fri Nov 07 2024 02:00:00 GMT-0800 (Pacific Standard Time)
       UMAMI_SHARE_URL:
         process.env.NUXT_SITE_ENV === "dev" ||
         process.env.NUXT_SITE_ENV === "staging"

diff --git a/pages/datasets/[datasetid]/access/diabetes-research.vue b/pages/datasets/[datasetid]/access/diabetes-research.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import useDownloadAgreementForm from "~/composables/useDownloadAgreementForm";
+
+const route = useRoute();
+
+const { datasetid } = route.params as { datasetid: string };
+const { data: dataset, error } = await useDataset(datasetid);
+const agreementFormState = useDownloadAgreementForm(datasetid);
+
+if (error.value) {
+  console.error(error.value);
+
+  push.error({
+    title: "Something went wrong",
+    message: "Failed to fetch dataset",
+  });
+
+  throw new Error("Failed to fetch dataset");
+}
+
+// TODO: Convert to a utility or extract a component?
+const generateCombinedFullName = (name: string) => {
+  const nameArray = name.split(",");
+
+  if (nameArray.length > 1) {
+    return `${nameArray[1]} ${nameArray[0]}`;
+  } else {
+    return name;
+  }
+};
+
+const currentStep = ref<number>(3);
+const researchTypeSelected = computed(
+  () => agreementFormState.value.is_diabetes_research !== null,
+);
+</script>
+
+<template>
+  <main class="h-screen overflow-auto bg-gradient-to-b from-white to-blue-50">
+    <div
+      class="mx-auto mt-10 flex w-full max-w-screen-xl items-center justify-between px-3"
+    >
+      <n-flex vertical>
+        <h1>{{ dataset?.title }}</h1>
+
+        <div
+          v-for="(creator, index) in dataset?.metadata.datasetDescription
+            .creator"
+          :key="index"
+          class="flex flex-row flex-wrap items-center align-middle text-black"
+        >
+          <!-- if on the last index create a different span -->
+          <span class="mr-1 text-sm font-light">{{
+            generateCombinedFullName(creator.creatorName)
+          }}</span>
+
+          <ButtonIdentifierBadge
+            v-if="creator?.nameIdentifier"
+            class="pt-1"
+            :type="creator.nameIdentifier[0]"
+          />
+
+          <span
+            v-if="
+              dataset?.metadata.datasetDescription.creator &&
+              index != dataset?.metadata.datasetDescription.creator.length - 1
+            "
+            class="text-sm"
+          >
+            ,
+          </span>
+        </div>
+
+        <p class="hidden">{{ dataset?.description }}</p>
+      </n-flex>
+
+      <n-image
+        src="https://raw.githubusercontent.com/AI-READI/AI-READI-logo/main/logo/png/option2.png"
+        :alt="dataset?.title"
+        class="size-32 h-32 w-32 rounded-lg"
+        object-fit="contain"
+      />
+    </div>
+
+    <n-divider />
+
+    <div class="mx-auto w-full max-w-screen-xl px-3 pb-8">
+      <div class="prose mt-0 min-h-[300px] max-w-none text-black">
+        <h2>Access this dataset</h2>
+
+        <DownloadStepNav :current-step="currentStep" />
+
+        <TransitionFade>
+          <div>
+            <h4>Diabetes or non-diabetes research</h4>
+
+            <n-form-item
+              label="Is your research studying type II diabetes, or is it non-diabetes research?"
+            >
+              <n-radio-group
+                v-model:value="agreementFormState.is_diabetes_research"
+              >
+                <n-space>
+                  <n-radio :value="true" label="Diabetes research" />
+
+                  <n-radio :value="false" label="Non-diabetes research" />
+                </n-space>
+              </n-radio-group>
+            </n-form-item>
+
+            <NuxtLink :to="`/datasets/${dataset?.id}/access/training`">
+              <n-button
+                size="large"
+                type="info"
+                secondary
+                class="my-3"
+                :disabled="!researchTypeSelected"
+                >Next</n-button
+              >
+            </NuxtLink>
+          </div>
+        </TransitionFade>
+      </div>
+    </div>
+  </main>
+</template>
diff --git a/pages/datasets/[datasetid]/access/index.vue b/pages/datasets/[datasetid]/access/index.vue
@@ -86,29 +86,26 @@ const currentStep = ref<number>(1);
 
         <TransitionFade>
           <div>
-            <n-alert title="For Type 2 Diabetes Research Only" type="info">
-              <p class="font-bold">
-                This public data is for Type 2 Diabetes research only. Please do
-                not continue through the steps for data access if that is not
-                the focus of your research. For requests for non-Type 2 Diabetes
-                research, please contact the
+            <p>To obtain access to this dataset, you must:</p>
+
+            <ol>
+              <li>
+                Authenticate using CILogon (contact the
                 <a href="mailto:[email protected]"
                   >AI-READI Data Access Committee</a
                 >
-                to begin the access process.
-              </p>
-            </n-alert>
+                if you are not at a research institution)
+              </li>
 
-            <p>To obtain access to this dataset, you must:</p>
+              <li>
+                Indicate whether your research is related to Type 2 Diabetes
+              </li>
 
-            <ol>
               <li>
                 Answer some questions about your training in research methods
                 and ethics
               </li>
 
-              <li>Log in using our authentication provider</li>
-
               <li>
                 Describe the purpose of your research <br />
                 This information, along with your name, will be publicly shared
@@ -125,7 +122,7 @@ const currentStep = ref<number>(1);
               </li>
             </ol>
 
-            <NuxtLink :to="`/datasets/${dataset?.id}/access/training`">
+            <NuxtLink :to="`/datasets/${dataset?.id}/access/login`">
               <n-button size="large" type="info" secondary class="my-3">
                 Begin
               </n-button>

diff --git a/pages/datasets/[datasetid]/access/license.vue b/pages/datasets/[datasetid]/access/license.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import useDownloadAgreementForm from "~/composables/useDownloadAgreementForm";
+
 definePageMeta({
   middleware: ["auth"],
 });
@@ -7,9 +9,8 @@ const route = useRoute();
 
 const { datasetid } = route.params as { datasetid: string };
 const { data: dataset, error } = await useDataset(datasetid);
-const researchPurpose = useCookie(`dataset-${datasetid}-research-purpose`, {
-  default: () => "",
-});
+const agreementFormState = useDownloadAgreementForm(datasetid);
+console.log(agreementFormState.value);
 
 if (error.value) {
   console.error(error.value);
@@ -22,7 +23,12 @@ if (error.value) {
   throw new Error("Failed to fetch dataset");
 }
 
-if (!researchPurpose.value?.trim()) {
+if (agreementFormState.value.is_diabetes_research === null) {
+  console.warn("Redirecting to collect whether this is non-diabetes research");
+  await navigateTo(`/datasets/${dataset.value?.id}/access/diabetes-research`);
+}
+
+if (!agreementFormState.value.research_purpose?.trim()) {
   console.warn("Redirecting to collect research purpose");
   await navigateTo(`/datasets/${dataset.value?.id}/access/research-purpose`);
 }
@@ -38,7 +44,7 @@ const generateCombinedFullName = (name: string) => {
   }
 };
 
-const currentStep = ref<number>(5);
+const currentStep = ref<number>(6);
 
 const licenseAccepted = ref<boolean>(false);
 const licenseText =
@@ -79,7 +85,7 @@ const attestations = [
   "I will not attempt to identify any individual who has contributed data to this dataset.",
   "I will follow the cybersecurity guidelines and agree to be tracked by an embedded token.",
   "I will not distribute this dataset per the License.",
-  "I will only use this dataset to conduct research related to Type 2 Diabetes.",
+  "I will only use this dataset to conduct the research described in my research purpose.",
 ];
 
 const licenseAndAttestationComplete = computed(() => {
@@ -93,13 +99,13 @@ const handleSubmit = async () => {
         attestation_accepted: attestationsAccepted.value,
         dataset_id: dataset.value?.id,
         license_accepted: licenseAccepted.value,
-        research_purpose: researchPurpose.value.trim(),
+        ...agreementFormState.value,
       },
       headers: useRequestHeaders(["cookie"]),
       method: "POST",
     });
 
-    researchPurpose.value = "";
+    agreementFormState.value = {};
     await navigateTo(`/datasets/${dataset.value?.id}/access/select`);
   } catch (error) {
     console.error(error);

diff --git a/pages/datasets/[datasetid]/access/login.vue b/pages/datasets/[datasetid]/access/login.vue
@@ -27,7 +27,7 @@ const generateCombinedFullName = (name: string) => {
   }
 };
 
-const currentStep = ref<number>(3);
+const currentStep = ref<number>(2);
 
 const userDescription = computed(() => {
   if (authenticated.value) {
@@ -113,7 +113,7 @@ const handleLogin = async () => {
               <p>Logged in as {{ userDescription }}.</p>
 
               <NuxtLink
-                :to="`/datasets/${dataset?.id}/access/research-purpose`"
+                :to="`/datasets/${dataset?.id}/access/diabetes-research`"
               >
                 <n-button size="large" type="info" secondary class="my-3"
                   >Next</n-button