Merge branch 'mvp-2.1.0' of https://github.com/CBIIT/crdc-datahub-ui …

…into CRDCDH-828
CBIIT · Mar 4, 2024 · 1115c06 · 1115c06
2 parents d32e571 + 2856906
commit 1115c06
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 150 deletions.
diff --git a/src/components/Questionnaire/PlannedPublication.tsx b/src/components/Questionnaire/PlannedPublication.tsx
@@ -45,8 +45,8 @@ const PlannedPublication: FC<Props> = ({
           label="Publication Title"
           name={`study[plannedPublications][${index}][title]`}
           value={title}
-          placeholder="Enter title"
-          maxLength={100}
+          placeholder="500 characters allowed"
+          maxLength={500}
           gridWidth={12}
           required
           readOnly={readOnly}

diff --git a/src/components/Questionnaire/Publication.tsx b/src/components/Questionnaire/Publication.tsx
@@ -44,8 +44,8 @@ const Publication: FC<Props> = ({
           label="Publication Title"
           name={`study[publications][${index}][title]`}
           value={title}
-          placeholder="Enter Publication Title"
-          maxLength={100}
+          placeholder="500 characters allowed"
+          maxLength={500}
           gridWidth={12}
           required
           readOnly={readOnly}

diff --git a/src/components/Questionnaire/Repository.tsx b/src/components/Questionnaire/Repository.tsx
@@ -17,9 +17,7 @@ export const repositoryDataTypesOptions = [
   DataTypes.clinicalTrial,
   DataTypes.genomics,
   DataTypes.imaging,
-  DataTypes.immunology,
   DataTypes.proteomics,
-  DataTypes.epidemiologicOrCohort,
 ];
 
 type Props = {

diff --git a/src/config/DataTypesConfig.ts b/src/config/DataTypesConfig.ts
@@ -5,11 +5,7 @@
 const DataTypes = {
   clinicalTrial: {
     name: "clinicalTrial",
-    label: "Clinical Trial"
-  },
-  immunology: {
-    name: "immunology",
-    label: "Immunology"
+    label: "Clinical"
   },
   genomics: {
     name: "genomics",
@@ -23,10 +19,6 @@ const DataTypes = {
     name: "imaging",
     label: "Imaging"
   },
-  epidemiologicOrCohort: {
-    name: "epidemiologicOrCohort",
-    label: "Epidemiologic or Cohort"
-  },
   demographicData: {
     name: "demographicData",
     label: "Demographic Data"

diff --git a/src/config/SectionMetadata.tsx b/src/config/SectionMetadata.tsx
@@ -61,7 +61,7 @@ const sectionMetadata = {
       },
       REPOSITORY: {
         title: "REPOSITORY",
-        description: "Add repository if your study has submitted data to a non-CRDC repository.",
+        description: "Add repository if your data has been submitted to another repository",
       },
     }
   },

diff --git a/src/content/dataSubmissions/DataSubmission.tsx b/src/content/dataSubmissions/DataSubmission.tsx
@@ -127,20 +127,22 @@ const StyledCardActions = styled(CardActions, {
 }));
 
 const StyledTabs = styled(Tabs)(() => ({
-  position: 'relative',
+  position: "relative",
+  display: "flex",
+  alignItems: "flex-end",
   "& .MuiTabs-flexContainer": {
-    justifyContent: "center"
+    justifyContent: "center",
   },
   "& .MuiTabs-indicator": {
-    display: "none !important"
+    display: "none !important",
   },
-  '&::before': {
+  "&::before": {
     content: '""',
-    position: 'absolute',
+    position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
-    borderBottom: '1.25px solid #6CACDA',
+    borderBottom: "1.25px solid #6CACDA",
     zIndex: 1,
   },
 }));

diff --git a/src/content/questionnaire/sections/B.tsx b/src/content/questionnaire/sections/B.tsx
@@ -304,8 +304,8 @@ const FormSectionB: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
           value={predefinedProgram ? programOption?.abbreviation : program?.abbreviation}
           filter={(input: string) => filterAlphaNumeric(input, "- ")}
           onChange={(e) => { e.target.value = e.target.value.toUpperCase(); }}
-          maxLength={20}
-          placeholder="20 characters allowed"
+          maxLength={100}
+          placeholder="100 characters allowed"
           hideValidation={readOnlyProgram}
           required
           readOnly={readOnlyProgram}
@@ -364,7 +364,7 @@ const FormSectionB: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
           placeholder="100 characters allowed"
           readOnly={readOnlyInputs}
           hideValidation={readOnlyInputs}
-          tooltipText="The title should provide a snapshot of the study; it should include a broad goal or conclusion of the project. It must use title case. For example, the manuscript title."
+          tooltipText="A descriptive name that will be used to identify the study."
           required
         />
         <TextInput
@@ -395,17 +395,7 @@ const FormSectionB: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
           hideValidation={readOnlyInputs}
           required
           multiline
-          tooltipText={(
-            <>
-              Describe your study and the data being submitted. Include objectives of the study and convey information about the experimental approach.
-              <br />
-              <br />
-              Provide a brief description of the scientific value of the data for submission. For example, how can other researchers benefit from the value of these data.
-              <br />
-              <br />
-              If the description is taken verbatim from a published or soon to be published article, please submit copyright permission from the Journal. Summaries with copyrighted material must include the following within the description: “Reprinted from [Article Citation], with permission from [Publisher]."
-            </>
-          )}
+          tooltipText="Describe your study and the data being submitted. Include objectives of the study and provide a brief description of the scientific value of the study."
         />
       </SectionGroup>
 
@@ -454,12 +444,12 @@ const FormSectionB: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
         />
         <TextInput
           id="section-b-if-yes-provide-dbgap-phs-number"
-          label="If yes, provide dbGaP PHS number"
+          label="If yes, provide dbGaP PHS number with the version number"
           name="study[dbGaPPPHSNumber]"
           value={dbGaPPPHSNumber}
           onChange={(e) => setDbGaPPPHSNumber(e.target.value || "")}
           maxLength={50}
-          placeholder="50 characters allowed"
+          placeholder={"Ex/ \"phs002529.v1.p1\". 50 characters allowed"}
           gridWidth={12}
           readOnly={readOnlyInputs || !isDbGapRegistered}
           required={isDbGapRegistered}

diff --git a/src/content/questionnaire/sections/D.tsx b/src/content/questionnaire/sections/D.tsx
@@ -31,6 +31,7 @@ import useFormMode from "../../../hooks/useFormMode";
 import SectionMetadata from "../../../config/SectionMetadata";
 import FormGroupCheckbox from "../../../components/Questionnaire/FormGroupCheckbox";
 import cellLineModelSystemOptions from "../../../config/CellLineModelSystemConfig";
+import { InitialQuestionnaire } from "../../../config/InitialValues";
 
 export type KeyedFileTypeData = {
   key: string;
@@ -146,6 +147,7 @@ const FormSectionD: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
   const { D: SectionDMetadata } = SectionMetadata;
 
   const [dataTypes, setDataTypes] = useState<string[]>(data.dataTypes);
+  const [isClinical, setIsClinical] = useState<boolean>(dataTypes?.includes("clinicalTrial"));
   const formContainerRef = useRef<HTMLDivElement>();
   const formRef = useRef<HTMLFormElement>();
   const [dataTypesErrorMsg, setDataTypesErrorMsg] = useState<string>("");
@@ -186,7 +188,12 @@ const FormSectionD: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
       dataTypesInputRef.current.setCustomValidity("At least one data type is required");
     }
 
-    combinedData.clinicalData.dataTypes = combinedData.clinicalData.dataTypes.filter((str) => str !== "");
+    if (!combinedData.dataTypes.includes("clinicalTrial")) {
+      combinedData.clinicalData = InitialQuestionnaire.clinicalData;
+    } else {
+      combinedData.clinicalData.dataTypes = combinedData.clinicalData.dataTypes.filter((str) => str !== "");
+    }
+
     combinedData.targetedReleaseDate = dayjs(formObject.targetedReleaseDate).isValid() ? formObject.targetedReleaseDate : "";
     combinedData.targetedSubmissionDate = dayjs(formObject.targetedSubmissionDate).isValid() ? formObject.targetedSubmissionDate : "";
     if (formObject.imagingDataDeIdentified === "true") {
@@ -249,7 +256,7 @@ const FormSectionD: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
           inputID="section-d-expected-publication-date"
           label="Expected Publication Date"
           name="targetedReleaseDate"
-          tooltipText="The date that submitters would like their data to be released to the public."
+          tooltipText="The date that submitters expect any paper using this data will be published."
           initialValue={data.targetedReleaseDate}
           gridWidth={6}
           disablePast
@@ -266,22 +273,14 @@ const FormSectionD: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
         <InvisibleInput ref={dataTypesInputRef} aria-label={SectionDMetadata.sections.DATA_TYPES.title} />
         <SwitchInput
           id="section-d-clinical-trial"
-          label="Clinical Trial"
+          label="Clinical"
           name="dataTypes[]"
           graphQLValue="clinicalTrial"
           value={dataTypes.includes("clinicalTrial")}
+          onChange={(e, val) => setIsClinical(val)}
           tooltipText="A research study in which one or more subjects are prospectively assigned to one or more interventions (which may include placebo or other control) to evaluate the effects of those interventions on health-related biomedical outcomes."
           readOnly={readOnlyInputs}
         />
-        <SwitchInput
-          id="section-d-immunology"
-          label="Immunology"
-          name="dataTypes[]"
-          graphQLValue="immunology"
-          value={dataTypes.includes("immunology")}
-          tooltipText="Data from experiments studying the function of a body's immune system.  Experiments that focus primarily on genomic or imaging approaches should be classified in those areas as well."
-          readOnly={readOnlyInputs}
-        />
         <SwitchInput
           id="section-d-genomics"
           label="Genomics"
@@ -324,15 +323,6 @@ const FormSectionD: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
           readOnly={readOnlyInputs}
           sx={{ paddingBottom: "8px" }}
         />
-        <SwitchInput
-          id="section-d-epidemiologic-or-cohort"
-          label="Epidemiologic or Cohort"
-          graphQLValue="epidemiologicOrCohort"
-          name="dataTypes[]"
-          value={dataTypes.includes("epidemiologicOrCohort")}
-          tooltipText="Data related to the incidence and distribution of disease across populations."
-          readOnly={readOnlyInputs}
-        />
         <TextInput
           id="section-d-other-data-types"
           label="Other Data Type(s)"
@@ -347,87 +337,89 @@ const FormSectionD: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
       </SectionGroup>
 
       {/* Clinical Data Types Section */}
-      <SectionGroup
-        title={SectionDMetadata.sections.CLINICAL_DATA_TYPES.title}
-        description={SectionDMetadata.sections.CLINICAL_DATA_TYPES.description}
-      >
-        <SwitchInput
-          id="section-d-demographic-data"
-          label="Demographic Data"
-          name="clinicalData[dataTypes][]"
-          graphQLValue="demographicData"
-          value={data.clinicalData.dataTypes.includes("demographicData")}
-          tooltipText="Indicate whether demographics information is available for the study (such as age or gender)."
-          readOnly={readOnlyInputs}
-        />
-        <SwitchInput
-          id="section-d-relapse-recurrence-data"
-          label="Relapse/Recurrence Data"
-          name="clinicalData[dataTypes][]"
-          graphQLValue="relapseRecurrenceData"
-          value={data.clinicalData.dataTypes.includes("relapseRecurrenceData")}
-          tooltipText="Relapse/recurrence data refers to information associated with the return of a disease after a period of remission. Indicate whether relapse/recurrence data is available for the study."
-          readOnly={readOnlyInputs}
-        />
-        <SwitchInput
-          id="section-d-diagnosis-data"
-          label="Diagnosis Data"
-          name="clinicalData[dataTypes][]"
-          graphQLValue="diagnosisData"
-          value={data.clinicalData.dataTypes.includes("diagnosisData")}
-          tooltipText="Indicate whether diagnosis information is available for the study."
-          readOnly={readOnlyInputs}
-        />
-        <SwitchInput
-          id="section-d-outcome-data"
-          label="Outcome Data"
-          name="clinicalData[dataTypes][]"
-          graphQLValue="outcomeData"
-          value={data.clinicalData.dataTypes.includes("outcomeData")}
-          tooltipText="Outcome data refers to information on a specific result or effect that can be measured. Examples of outcomes include decreased pain, reduced tumor size, and improvement of disease. Indicate whether outcome data is available for the study."
-          readOnly={readOnlyInputs}
-        />
-        <SwitchInput
-          id="section-d-treatment-data"
-          label="Treatment Data"
-          name="clinicalData[dataTypes][]"
-          graphQLValue="treatmentData"
-          value={data.clinicalData.dataTypes.includes("treatmentData")}
-          tooltipText="Treatment data refers to information on the action or administration of therapeutic agents to produce an effect that is intended to alter the course of a pathological process. Indicate whether treatment data is available for the study."
-          readOnly={readOnlyInputs}
-          sx={{ paddingBottom: "8px" }}
-        />
-        <SwitchInput
-          id="section-d-biospecimen-data"
-          label="Biospecimen Data"
-          name="clinicalData[dataTypes][]"
-          graphQLValue="biospecimenData"
-          value={data.clinicalData.dataTypes.includes("biospecimenData")}
-          tooltipText="Biospecimen data refers to information associated with the biological sample, portion, analyte, or aliquot. Indicate whether biospecimen data is available for the study."
-          readOnly={readOnlyInputs}
-        />
-        <TextInput
-          id="section-d-clinical-data-other-data-types"
-          label="Other Clinical Data Types"
-          name="clinicalData[otherDataTypes]"
-          value={data.clinicalData.otherDataTypes}
-          placeholder="Other clinical data types (Specify)"
-          gridWidth={12}
-          tooltipText="If there are any additional types of data included with the study not already specified above, describe here."
-          readOnly={readOnlyInputs}
-          maxLength={200}
-        />
-        <SwitchInput
-          id="section-d-additional-data-in-future"
-          label="Additional Data Types with a future submission?"
-          name="clinicalData[futureDataTypes]"
-          value={data.clinicalData.futureDataTypes}
-          gridWidth={8}
-          isBoolean
-          readOnly={readOnlyInputs}
-          tooltipText="Indicate if there will be additional types of data included with a future submission."
-        />
-      </SectionGroup>
+      {isClinical && (
+        <SectionGroup
+          title={SectionDMetadata.sections.CLINICAL_DATA_TYPES.title}
+          description={SectionDMetadata.sections.CLINICAL_DATA_TYPES.description}
+        >
+          <SwitchInput
+            id="section-d-demographic-data"
+            label="Demographic Data"
+            name="clinicalData[dataTypes][]"
+            graphQLValue="demographicData"
+            value={data.clinicalData.dataTypes.includes("demographicData")}
+            tooltipText="Indicate whether demographics information is available for the study (such as age or gender)."
+            readOnly={readOnlyInputs}
+          />
+          <SwitchInput
+            id="section-d-relapse-recurrence-data"
+            label="Relapse/Recurrence Data"
+            name="clinicalData[dataTypes][]"
+            graphQLValue="relapseRecurrenceData"
+            value={data.clinicalData.dataTypes.includes("relapseRecurrenceData")}
+            tooltipText="Relapse/recurrence data refers to information associated with the return of a disease after a period of remission. Indicate whether relapse/recurrence data is available for the study."
+            readOnly={readOnlyInputs}
+          />
+          <SwitchInput
+            id="section-d-diagnosis-data"
+            label="Diagnosis Data"
+            name="clinicalData[dataTypes][]"
+            graphQLValue="diagnosisData"
+            value={data.clinicalData.dataTypes.includes("diagnosisData")}
+            tooltipText="Indicate whether diagnosis information is available for the study."
+            readOnly={readOnlyInputs}
+          />
+          <SwitchInput
+            id="section-d-outcome-data"
+            label="Outcome Data"
+            name="clinicalData[dataTypes][]"
+            graphQLValue="outcomeData"
+            value={data.clinicalData.dataTypes.includes("outcomeData")}
+            tooltipText="Outcome data refers to information on a specific result or effect that can be measured. Examples of outcomes include decreased pain, reduced tumor size, and improvement of disease. Indicate whether outcome data is available for the study."
+            readOnly={readOnlyInputs}
+          />
+          <SwitchInput
+            id="section-d-treatment-data"
+            label="Treatment Data"
+            name="clinicalData[dataTypes][]"
+            graphQLValue="treatmentData"
+            value={data.clinicalData.dataTypes.includes("treatmentData")}
+            tooltipText="Treatment data refers to information on the action or administration of therapeutic agents to produce an effect that is intended to alter the course of a pathological process. Indicate whether treatment data is available for the study."
+            readOnly={readOnlyInputs}
+            sx={{ paddingBottom: "8px" }}
+          />
+          <SwitchInput
+            id="section-d-biospecimen-data"
+            label="Biospecimen Data"
+            name="clinicalData[dataTypes][]"
+            graphQLValue="biospecimenData"
+            value={data.clinicalData.dataTypes.includes("biospecimenData")}
+            tooltipText="Biospecimen data refers to information associated with the biological sample, portion, analyte, or aliquot. Indicate whether biospecimen data is available for the study."
+            readOnly={readOnlyInputs}
+          />
+          <TextInput
+            id="section-d-clinical-data-other-data-types"
+            label="Other Clinical Data Types"
+            name="clinicalData[otherDataTypes]"
+            value={data.clinicalData.otherDataTypes}
+            placeholder="Other clinical data types (Specify)"
+            gridWidth={12}
+            tooltipText="If there are any additional types of data included with the study not already specified above, describe here."
+            readOnly={readOnlyInputs}
+            maxLength={200}
+          />
+          <SwitchInput
+            id="section-d-additional-data-in-future"
+            label="Additional Data Types with a future submission?"
+            name="clinicalData[futureDataTypes]"
+            value={data.clinicalData.futureDataTypes}
+            gridWidth={8}
+            isBoolean
+            readOnly={readOnlyInputs}
+            tooltipText="Indicate if there will be additional types of data included with a future submission."
+          />
+        </SectionGroup>
+      )}
 
       {/* File Types Section */}
       <SectionGroup