Merge pull request #7 from Clinical-Genomics/wf_dev_branch

Wf dev branch
Clinical-Genomics · Oct 31, 2024 · a4936be · a4936be
2 parents 5a1a8f0 + 50d53b9
commit a4936be
Show file tree

Hide file tree

Showing 15 changed files with 515 additions and 170 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Basic GitHub workflows automation (PR CHANGELOG check, woke, docker publish)
 - Add Dockerfiles and serve vite locally
 - Local vite default env setting
+- Changes from WF develop (@Nirmal0809) - suggestedFeature, formatting, etc.
 #### Fixed
 - Use Dockerfile-stage in stage build 
 

diff --git a/src/components/Index.tsx b/src/components/Index.tsx
@@ -53,49 +53,49 @@ export default function Home() {
           </p>
         </div>
         <div className="flex flex-col md:flex-row md:divide-x divide-udni-teal">
-          <div className="w-full p-8   flex flex-col items-center my-5 group">
-            <div className="flex items-center space-x-2">
-              <DocumentPlusIcon className="w-5 text-udni-teal" />{' '}
-              <h3>Start new form</h3>
-            </div>
-            <p className="text-gray-600 text-sm">
-              For physicians, geneticists. Start questionnare.
-            </p>
-            <label className="mt-4">
-              <input
-                type="checkbox"
-                checked={state.autoSave}
-                onChange={(e) =>
-                  dispatch({ type: 'SET_AUTOSAVE', payload: e.target.checked })
-                }
-              />{' '}
-              Enable cookies for auto-save
-            </label>
-            {state.customFormData ||
-            state.phenoPacket?.phenotypicFeatures?.length ? (
+          <div className="w-full p-8   flex flex-col md:items-end my-5 group">
+            <div className="flex flex-col items-start">
+              <div className="flex items-center space-x-2">
+                <DocumentPlusIcon className="w-5 text-udni-teal" />{' '}
+                <h3>Start new form</h3>
+              </div>
+              <label className="mt-4">
+                <input
+                  type="checkbox"
+                  checked={state.autoSave}
+                  onChange={(e) =>
+                    dispatch({
+                      type: 'SET_AUTOSAVE',
+                      payload: e.target.checked,
+                    })
+                  }
+                />{' '}
+                Enable cookies for auto-save
+              </label>
+              {state.customFormData ||
+              state.phenoPacket?.phenotypicFeatures?.length ? (
+                <Link
+                  to="/questionnaire"
+                  className="border rounded p-3 px-6 mt-5 border-udni-teal text-udni-teal uppercase text-sm font-bold hover:bg-udni-teal hover:text-white"
+                >
+                  Resume auto-saved
+                </Link>
+              ) : null}
               <Link
                 to="/questionnaire"
+                onClick={reset}
                 className="border rounded p-3 px-6 mt-5 border-udni-teal text-udni-teal uppercase text-sm font-bold hover:bg-udni-teal hover:text-white"
               >
-                Resume auto-saved
+                Start new
               </Link>
-            ) : null}
-            <Link
-              to="/questionnaire"
-              onClick={reset}
-              className="border rounded p-3 px-6 mt-5 border-udni-teal text-udni-teal uppercase text-sm font-bold hover:bg-udni-teal hover:text-white"
-            >
-              Start new
-            </Link>
+            </div>
           </div>
-          <div className="w-full p-8   flex flex-col items-center my-5 ">
+          <div className="w-full p-8   flex flex-col items-start my-5 ">
             <div className="flex items-center space-x-2">
               <DocumentArrowDownIcon className="w-5 text-udni-teal" />
               <h3>Continue form</h3>
             </div>
-            <p className="text-gray-600 text-sm">
-              Add images, documents to an existing form.
-            </p>
+            <p className="text-gray-600 text-sm">Continue existing form.</p>
             <ContinueForm />
           </div>
         </div>

diff --git a/src/components/phenopacket/PhenotypicFeature.tsx b/src/components/phenopacket/PhenotypicFeature.tsx
@@ -1,24 +1,39 @@
 import { XMarkIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { NavLink } from 'react-router-dom';
 import { PhenotypicFeature as IPhenotypicFeature } from '../../interfaces/phenopackets/schema/v2/core/phenotypic_feature';
 import Ontology from './Ontology';
+import tip2toeForm from '../../tip2toeform';
 
 interface IProps {
   phenotypicFeature: IPhenotypicFeature;
 }
 export default function PhenotypicFeature({ phenotypicFeature }: IProps) {
   const { excluded } = phenotypicFeature;
+  const slug = phenotypicFeature.description;
+  const url = `/questionnaire/${slug}`;
+  const title = tip2toeForm.formSections?.find((s) => s.slug === slug)?.title;
   return (
-    <div className={excluded ? ' text-gray-400' : ''}>
-      <p>
-        {excluded ? (
-          <XMarkIcon className="w-5 h-5 inline-block mr-1 text-red-500" />
-        ) : (
-          <CheckIcon className="w-5 h-5 inline-block mr-1 text-green-500" />
-        )}
-        <Ontology ontology={phenotypicFeature?.type} />
-      </p>
+    <div
+      className={
+        excluded
+          ? ' flex flex-col lg:flex-row my-1 lg:my-0 space-x-1 text-gray-400'
+          : 'flex flex-col lg:flex-row my-1 lg:my-0 space-x-1'
+      }
+    >
+      <NavLink to={url} className={excluded ? ' text-gray-400' : ''}>
+        <p>
+          {excluded ? (
+            <XMarkIcon className="w-5 h-5 inline-block mr-1 text-red-500" />
+          ) : (
+            <CheckIcon className="w-5 h-5 inline-block mr-1 text-green-500" />
+          )}
+          <Ontology ontology={phenotypicFeature?.type} />
+        </p>
+      </NavLink>
       {phenotypicFeature?.description ? (
-        <p>{phenotypicFeature?.description}</p>
+        <p className="text-sm flex items-end pl-5 lg:pl-0">
+          {`Added in ${title}`}
+        </p>
       ) : null}
     </div>
   );

diff --git a/src/components/questionnaire/EditIndividual.tsx b/src/components/questionnaire/EditIndividual.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { AppContext } from '../../context/AppContext';
@@ -20,6 +20,12 @@ export interface IIndividualFormData {
 }
 
 export default function EditIndividual() {
+  useEffect(() => {
+    return () => {
+      handleSubmit(doSubmit)();
+    };
+  }, []);
+
   const navigate = useNavigate();
   const { nextUrl } = useNextUrl();
 
@@ -128,16 +134,16 @@ export default function EditIndividual() {
       </div>
       <div className="my-4">
         <Input
-          type="number"
-          label="Age of mother at time of referral"
-          {...register('customFormData.motherAge')}
+          type="date"
+          label="Date of birth mother"
+          {...register('customFormData.motherBirthdate')}
         />
       </div>
       <div className="my-4">
         <Input
-          type="number"
-          label="Age of father at time of referral"
-          {...register('customFormData.fatherAge')}
+          type="date"
+          label="Date of birth father"
+          {...register('customFormData.fatherBirthdate')}
         />
       </div>
       <div className="my-4">
@@ -153,6 +159,7 @@ export default function EditIndividual() {
             'Latino',
             'Middle East',
             'Oceanian',
+            'Mixed',
           ].map((x) => ({ label: x, value: x }))}
         />
         {errors?.customFormData?.ethnicity && (

diff --git a/src/components/questionnaire/EditPhenotypicFeatures.tsx b/src/components/questionnaire/EditPhenotypicFeatures.tsx
@@ -8,6 +8,8 @@ import { lookupHpoTerm } from '../../utils/lookupHpoTerm';
 import AddCustomTerm, { AddCustomTermFormModel } from './form/AddCustomTerm';
 import EditPhenotypicFeature from './form/EditPhenotypicFeature';
 import NavButtons from './form/NavButtons';
+import { SuggestedPhenotypicFeatures } from './SuggestedPhenotypicFeatures';
+import SuggestedFeature from '../../interfaces/suggested-feature';
 
 interface IProps {
   slug: string;
@@ -16,7 +18,11 @@ interface IProps {
 export default function EditPhenotypicFeatures({ slug, ontologies }: IProps) {
   const { state, dispatch } = useContext(AppContext);
 
-  const save = async (ontology: OntologyClass, value: YesNoUnknown) => {
+  const save = async (
+    ontology: OntologyClass,
+    value: YesNoUnknown,
+    addedViaSearch: boolean | undefined = undefined,
+  ) => {
     if (value === 'unknown')
       dispatch({
         type: 'REMOVE_PHENOTYPIC_FEATURE',
@@ -28,8 +34,18 @@ export default function EditPhenotypicFeatures({ slug, ontologies }: IProps) {
         payload: {
           type: ontology,
           excluded: value === 'no',
+          description: slug,
         },
       });
+    if (addedViaSearch === true) {
+      dispatch({
+        type: 'SEARCHED_PHENOTYPIC_FEATURE',
+        payload: {
+          ontology: ontology,
+          section: slug,
+        } as SuggestedFeature,
+      });
+    }
   };
 
   const setAllValues = async (value: YesNoUnknown) => {
@@ -106,7 +122,7 @@ export default function EditPhenotypicFeatures({ slug, ontologies }: IProps) {
         setMessage(error);
       } else {
         // add hpo term
-        save({ id: term, label: label || '' }, 'yes');
+        save({ id: term, label: label || '' }, 'yes', true);
         setMessage(undefined);
       }
     } catch (error) {
@@ -170,18 +186,7 @@ export default function EditPhenotypicFeatures({ slug, ontologies }: IProps) {
           ?.filter((x) => x.id === 'other')
           .map(({ label }) => (
             <div className="py-4" key={`chk-other`}>
-              <p className="my-2">{label}</p>
-              <AddCustomTerm onSubmit={onAddCustomTerm} key={`act-${slug}`} />
-              {message && (
-                <p
-                  key={`act-msg-${slug}`}
-                  onClick={() => setMessage(undefined)}
-                >
-                  {message}
-                </p>
-              )}
-
-              <div className="mt-4 divide-y divide-gray-300">
+              <div className="divide-y divide-gray-300">
                 {state.phenoPacket?.phenotypicFeatures
                   ?.filter(
                     (st) =>
@@ -191,24 +196,43 @@ export default function EditPhenotypicFeatures({ slug, ontologies }: IProps) {
                   .map((pf, i) => {
                     if (!pf.type) return null;
                     return (
-                      <EditPhenotypicFeature
-                        key={`et-${pf.type?.id}-${i}`}
-                        ontology={pf.type}
-                        value={getYesNoUnknown(
-                          state?.phenoPacket?.phenotypicFeatures?.find(
-                            (x) => x.type?.id === pf.type?.id,
-                          ),
-                        )}
-                        onChange={(value) => {
-                          if (pf.type) save(pf.type, value);
-                        }}
-                      />
+                      <>
+                        <EditPhenotypicFeature
+                          key={`et-${pf.type?.id}-${i}`}
+                          ontology={pf.type}
+                          value={getYesNoUnknown(
+                            state?.phenoPacket?.phenotypicFeatures?.find(
+                              (x) => x.type?.id === pf.type?.id,
+                            ),
+                          )}
+                          onChange={(value) => {
+                            if (pf.type) save(pf.type, value);
+                          }}
+                        />
+                      </>
                     );
                   })}
               </div>
+
+              <p className="my-2">{label}</p>
+              <AddCustomTerm onSubmit={onAddCustomTerm} key={`act-${slug}`} />
+              {message && (
+                <p
+                  key={`act-msg-${slug}`}
+                  onClick={() => setMessage(undefined)}
+                >
+                  {message}
+                </p>
+              )}
             </div>
           ))}
       </fieldset>
+      <SuggestedPhenotypicFeatures
+        slug={slug}
+        addTerm={(term) => {
+          onAddCustomTerm({ term });
+        }}
+      ></SuggestedPhenotypicFeatures>
       <NavButtons />
     </>
   );

diff --git a/src/components/questionnaire/FormSection.tsx b/src/components/questionnaire/FormSection.tsx
@@ -10,8 +10,15 @@ interface IProps {
 }
 
 export default function FormSection({ formSection }: IProps) {
-  const { title, description, questions, uploadSections, ontologies, slug } =
-    formSection;
+  const {
+    title,
+    description,
+    questions,
+    uploadSections,
+    uploadGroupSections,
+    ontologies,
+    slug,
+  } = formSection;
   return (
     <>
       <h2>{title}</h2>
@@ -29,6 +36,28 @@ export default function FormSection({ formSection }: IProps) {
           <NavButtons />
         </div>
       ) : null}
+
+      {uploadGroupSections ? (
+        <div>
+          {uploadGroupSections.map(
+            (group, index) =>
+              group && (
+                <div
+                  key={index}
+                  className={'flex flex-col lg:flex-row lg:space-x-2'}
+                >
+                  {group.map((x) => (
+                    <div className="basis-4/12" key={x}>
+                      <h4>{x}</h4>
+                      <UploadWidget section={`${slug}:${x}`} />
+                    </div>
+                  ))}
+                </div>
+              ),
+          )}
+          <NavButtons />
+        </div>
+      ) : null}
       <Questions questions={questions} />
       <EditPhenotypicFeatures ontologies={ontologies} slug={slug} />
     </>

diff --git a/src/components/questionnaire/SubmitForm.tsx b/src/components/questionnaire/SubmitForm.tsx
@@ -110,6 +110,13 @@ export default function SubmitForm() {
       });
       const formDataRet = (await formDataRes.json()) as ICustomFormData;
       setPassword(formDataRet.password);
+      await fetch(`${VITE_APIURL}/api/v1/suggestedfeatures`, {
+        method: 'POST',
+        body: JSON.stringify({
+          suggestedFeatures: state.suggestedFeatures,
+        }),
+        headers: { 'Content-Type': 'application/json' },
+      });
     }
   };