Add more contextual helps (#924)

Health-Informatics-UoN · Dec 17, 2024 · 95f0f05 · 95f0f05
1 parent d029d5b
commit 95f0f05
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 83 deletions.
diff --git a/app/next-client-app/app/(protected)/scanreports/create/page.tsx b/app/next-client-app/app/(protected)/scanreports/create/page.tsx
@@ -17,7 +17,7 @@ export default async function ScanReports() {
         </Link>
       </div>
       <div className="flex justify-between mt-3">
-        <h1 className="text-4xl font-semibold">New Scan Report</h1>
+        <h1 className="text-4xl font-semibold">Upload Scan Report</h1>
       </div>
       <div className="mt-4">
         <CreateScanReportForm dataPartners={partners} projects={projects} />

diff --git a/app/next-client-app/app/globals.css b/app/next-client-app/app/globals.css
@@ -5,15 +5,15 @@
 @tailwind components {
   @layer components {
     .my-react-select-container .my-react-select__control {
-      @apply bg-white dark:bg-carrot-950 rounded-md border border-carrot-200 dark:border-carrot-800 hover:border-carrot-400 dark:hover:border-carrot-500;
+      @apply bg-white dark:bg-carrot-950 rounded-md border border-carrot-200 dark:border-carrot-800 hover:border-carrot-600 dark:hover:border-carrot-400;
     }
 
     .my-react-select-container .my-react-select__control--is-disabled {
       @apply bg-neutral-200 dark:bg-carrot-900 border-carrot-300 dark:border-carrot-700 cursor-not-allowed;
     }
 
     .my-react-select-container .my-react-select__control--is-focused {
-      @apply border-carrot-500 hover:border-carrot-500 dark:border-carrot-400 dark:hover:border-carrot-400 shadow-none;
+      @apply ring-2 ring-carrot-950 ring-offset-2 hover:border-carrot-500 dark:border-carrot-400 dark:hover:border-carrot-400 shadow-none;
     }
 
     .my-react-select-container .my-react-select__menu {

diff --git a/app/next-client-app/components/Modal.tsx b/app/next-client-app/components/Modal.tsx
diff --git a/app/next-client-app/components/Tooltips.tsx b/app/next-client-app/components/Tooltips.tsx
@@ -15,7 +15,7 @@ export function Tooltips({
   link?: string;
 }) {
   return (
-    <TooltipProvider>
+    <TooltipProvider delayDuration={100}>
       <Tooltip>
         <TooltipTrigger asChild>
           <InfoIcon className="ml-1 size-4 text-carrot" />

diff --git a/app/next-client-app/components/core/footer.tsx b/app/next-client-app/components/core/footer.tsx
@@ -1,5 +1,4 @@
 import Link from "next/link";
-import Image from "next/image";
 import { ReceiptText, ShieldQuestion } from "lucide-react";
 
 const Footer = () => {

diff --git a/app/next-client-app/components/datasets/CreateDatasetForm.tsx b/app/next-client-app/components/datasets/CreateDatasetForm.tsx
@@ -195,13 +195,17 @@ export function CreateDatasetForm({
                     {" "}
                     Viewers
                     <Tooltips
-                      content="All Dataset admins and editors also have Dataset viewer permissions."
+                      content="Members of the chosen projects above. All Dataset admins and editors also have Dataset viewer permissions."
                       link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
                     />
                   </h3>
                   <FormikSelectUsers
                     name="viewers"
-                    placeholder="Choose Viewers"
+                    placeholder={
+                      values.projects
+                        ? "Choose viewers"
+                        : "To choose viewers, please select at least one Project"
+                    }
                     isMulti={true}
                     isDisabled={values.projects === 0}
                   />
@@ -212,13 +216,17 @@ export function CreateDatasetForm({
                   {" "}
                   Editors
                   <Tooltips
-                    content="Dataset admins and editors also have Scan Report editor permissions."
+                    content="Members of the chosen projects above. Dataset admins and editors also have Scan Report editor permissions."
                     link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
                   />
                 </h3>
                 <FormikSelectUsers
                   name="editors"
-                  placeholder="Choose Editors"
+                  placeholder={
+                    values.projects
+                      ? "Choose editors"
+                      : "To choose editors, please select at least one Project"
+                  }
                   isMulti={true}
                   isDisabled={values.projects === 0}
                 />
@@ -228,13 +236,17 @@ export function CreateDatasetForm({
                   {" "}
                   Admins
                   <Tooltips
-                    content="Dataset admins and editors also have Scan Report editor permissions."
+                    content="Members of the chosen projects above. Dataset admins and editors also have Scan Report editor permissions."
                     link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
                   />
                 </h3>
                 <FormikSelectUsers
                   name="admins"
-                  placeholder="Choose Admins"
+                  placeholder={
+                    values.projects
+                      ? "Choose admins"
+                      : "To choose admins, please select at least one Project"
+                  }
                   isMulti={true}
                   isDisabled={values.projects === 0}
                 />

diff --git a/app/next-client-app/components/scanreports/CreateScanReportForm.tsx b/app/next-client-app/components/scanreports/CreateScanReportForm.tsx
@@ -111,6 +111,19 @@ export function CreateScanReportForm({
             encType="multipart/form-data"
           >
             <div className="flex flex-col gap-3 text-lg">
+              <div className="flex flex-col gap-2">
+                <h3 className="flex">
+                  {" "}
+                  Scan Report Name
+                  <Tooltips content="Name of the new Scan Report." />
+                </h3>
+                <Input
+                  onChange={handleChange}
+                  name="name"
+                  className="text-lg text-carrot"
+                  required
+                />
+              </div>
               <div className="flex flex-col gap-2">
                 <h3 className="flex">
                   Data Partner{" "}
@@ -129,25 +142,34 @@ export function CreateScanReportForm({
                 />
               </div>
               <div className="flex flex-col gap-2">
-                <h3 className="flex items-center">
-                  {" "}
-                  Dataset
-                  <Tooltips
-                    content="The Dataset to add the new Scan Report to."
-                    link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
-                  />
-                  {values.dataPartner !== 0 && (
-                    <CreateDatasetDialog
-                      projects={projects}
-                      dataPartnerID={values.dataPartner}
-                      description={true}
-                      setReloadDataset={setReloadDataset}
+                <div className="flex items-center">
+                  <h3 className="flex">
+                    {" "}
+                    Dataset
+                    <Tooltips
+                      content="The Dataset to add the new Scan Report to."
+                      link="https://carrot4omop.ac.uk/Carrot-Mapper/projects-datasets-and-scanreports/#access-controls"
                     />
+                  </h3>
+                  {values.dataPartner !== 0 && (
+                    <div className="flex">
+                      <CreateDatasetDialog
+                        projects={projects}
+                        dataPartnerID={values.dataPartner}
+                        description={true}
+                        setReloadDataset={setReloadDataset}
+                      />
+                      <Tooltips content="If you couldn't find a dataset you wanted, you can create a new dataset here" />
+                    </div>
                   )}
-                </h3>
+                </div>
                 <FormikSelectDataset
                   name="dataset"
-                  placeholder="Choose a Dataset"
+                  placeholder={
+                    values.dataPartner
+                      ? "Choose a Dataset"
+                      : "To choose a dataset, please select a Data partner"
+                  }
                   isMulti={false}
                   isDisabled={values.dataPartner === 0}
                   required={true}
@@ -188,7 +210,11 @@ export function CreateScanReportForm({
                   {/* Viewers field uses the same logic and data as Editors field */}
                   <FormikSelectEditors
                     name="viewers"
-                    placeholder="Choose viewers"
+                    placeholder={
+                      values.dataset
+                        ? "Choose viewers"
+                        : "To choose viewers, please select a Dataset"
+                    }
                     isMulti={true}
                     isDisabled={values.dataset === 0 || values.dataset === -1}
                   />
@@ -205,28 +231,21 @@ export function CreateScanReportForm({
                 </h3>
                 <FormikSelectEditors
                   name="editors"
-                  placeholder="Choose Editors"
+                  placeholder={
+                    values.dataset
+                      ? "Choose editors"
+                      : "To choose editors, please select a Dataset"
+                  }
                   isMulti={true}
                   isDisabled={values.dataset === 0 || values.dataset === -1}
                 />
               </div>
               <div className="flex flex-col gap-2">
                 <h3 className="flex">
-                  {" "}
-                  Scan Report Name
-                  <Tooltips content="Name of the new Scan Report." />
-                </h3>
-                <Input
-                  onChange={handleChange}
-                  name="name"
-                  className="text-lg text-carrot"
-                  required
-                />
-              </div>
-              <div className="flex flex-col gap-2">
-                <h3 className="flex">
-                  {" "}
-                  WhiteRabbit Scan Report
+                  <div className="flex items-center gap-2">
+                    WhiteRabbit Scan Report{" "}
+                    <span className="text-gray-500 text-sm">(.xlsx file)</span>
+                  </div>
                   <Tooltips
                     content="Scan Report file generated from White Rabbit application."
                     link="https://carrot4omop.ac.uk/Carrot-Mapper/uploading-scan-report/#the-scan-report-file-format"
@@ -252,10 +271,14 @@ export function CreateScanReportForm({
 
               <div className="flex flex-col gap-2">
                 <h3 className="flex">
-                  {" "}
-                  Data Dictionary
+                  <div className="flex items-center gap-2">
+                    Data Dictionary{" "}
+                    <span className="text-gray-500 text-sm">
+                      (.csv file, optional)
+                    </span>
+                  </div>
                   <Tooltips
-                    content="Optional data dictionary to enable automatic OMOP mapping."
+                    content="Optional data dictionary to enable automatic building concepts from OMOP vocalubary."
                     link="https://carrot4omop.ac.uk/Carrot-Mapper/uploading-scan-report/#the-data-dictionary-file-format"
                   />
                 </h3>