Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SCRUM 2755 Mod specific fields are made required in new annotation pop up form #1467

Merged
merged 5 commits into from
Mar 20, 2024
Merged

SCRUM 2755 Mod specific fields are made required in new annotation pop up form #1467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c086505
Added other fields XBStaff
VarunReddy1111 Mar 12, 2024
6201cfd
Changes to display mod fields required fields
VarunReddy1111 Mar 19, 2024
a0e9a29
Change made to validate the new annotation fields on input
VarunReddy1111 Mar 20, 2024
27b6766
Merge branch 'alpha' into SCRUM-2755
VarunReddy1111 Mar 20, 2024
a115b22
Resolved validation check errors
VarunReddy1111 Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/main/cliapp/src/components/DataTableHeaderFooterTemplate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function DataTableHeaderFooterTemplate({title, multiselectComponent, butt
/>
{modReset &&
<ConfirmButton
buttonText="Set MOD Defaults"
buttonText="Set to MOD Defaults"
headerText={`${title} MOD Default Reset`}
messageText= {`Are you sure? This will reset the local state of the ${title} to the MOD default settings.`}
acceptHandler={setToModDefault}
Expand Down
2 changes: 1 addition & 1 deletion src/main/cliapp/src/components/Error/FormErrorMessageComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';

export function FormErrorMessageComponent({ errorField, errorMessages }){
if(errorMessages){
return <small className="p-error">{errorMessages[errorField]}</small>;
return <small className="text-lg p-error">{errorMessages[errorField]}</small>;
} else {
return null;
}
Expand Down
84 changes: 51 additions & 33 deletions src/main/cliapp/src/containers/diseaseAnnotationsPage/NewAnnotationForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { ControlledVocabularyFormDropdown } from '../../components/ControlledVoc
import { useControlledVocabularyService } from '../../service/useControlledVocabularyService';
import { ControlledVocabularyFormMultiSelectDropdown } from '../../components/ControlledVocabularyFormMultiSelector';
import { AutocompleteFormEditor } from "../../components/Autocomplete/AutocompleteFormEditor";
import { autocompleteSearch, buildAutocompleteFilter, validateFormBioEntityFields, validateTable } from "../../utils/utils";
import { autocompleteSearch, buildAutocompleteFilter, validateModFormFields, validateFormBioEntityFields, validateTable } from "../../utils/utils";
import { AutocompleteFormMultiEditor } from "../../components/Autocomplete/AutocompleteFormMultiEditor";
import { SubjectAdditionalFieldData } from "../../components/FieldData/SubjectAdditionalFieldData";
import { AssertedAlleleAdditionalFieldData } from "../../components/FieldData/AssertedAlleleAdditionalFieldData";
Expand Down Expand Up @@ -76,8 +76,10 @@ export const NewAnnotationForm = ({
const geneticModifierRelationTerms = useControlledVocabularyService('disease_genetic_modifier_relation');
const [uiErrorMessages, setUiErrorMessages] = useState({});
const areUiErrors = useRef(false);
const newAnnotationOptionalFields = ["Asserted Genes", "Asserted Allele", "NOT", "With", "Related Notes", "Experimental Conditions", "Experiments", "Genetic Sex",
let newAnnotationOptionalFields = ["Asserted Genes", "Asserted Allele", "NOT", "With", "Related Notes", "Experimental Conditions", "Experiments", "Genetic Sex",
"Disease Qualifiers", "SGD Strain Background", "Annotation Type", "Genetic Modifier Relation", "Genetic Modifiers","Internal"];
const modFormFields = getModFormFields("DiseaseAnnotations");
newAnnotationOptionalFields = newAnnotationOptionalFields.filter(field => !modFormFields.includes(field));
let defaultUserSettings = getDefaultFormState("DiseaseAnnotations", newAnnotationOptionalFields, undefined);
const { settings: settingsKey , mutate: setSettingsKey } = useGetUserSettings('DiseaseAnnotationsFormSettings', defaultUserSettings, false);
const { selectedFormFields } = settingsKey;
Expand Down Expand Up @@ -113,10 +115,11 @@ export const NewAnnotationForm = ({
);

areUiErrors.current = false;
validateModFormFields(newAnnotation, modFormFields, uiErrorMessages, setUiErrorMessages, areUiErrors);
validateFormBioEntityFields(newAnnotation, uiErrorMessages, setUiErrorMessages, areUiErrors);
if (areUiErrors.current) {
newAnnotationDispatch({type: "UPDATE_ERROR_MESSAGES", errorType: "errorMessages", errorMessages: uiErrorMessages});
newAnnotationDispatch({ type: "SET_IS_ENABLED", value: false });
//newAnnotationDispatch({type: "UPDATE_ERROR_MESSAGES", errorType: "errorMessages", errorMessages: uiErrorMessages});
VarunReddy1111 marked this conversation as resolved.
Show resolved Hide resolved
newAnnotationDispatch({ type: "SET_IS_ENABLED", value: true });

VarunReddy1111 marked this conversation as resolved.
Show resolved Hide resolved
return;
}
Expand Down Expand Up @@ -415,7 +418,6 @@ export const NewAnnotationForm = ({
}

const setToModDefault = () => {
const modFormFields = getModFormFields("DiseaseAnnotations");
updateFormFields(modFormFields);
}

Expand Down Expand Up @@ -451,9 +453,11 @@ export const NewAnnotationForm = ({
</>
);

const labelColumnSize = "col-3";
const labelColumnSize = "col-2";
const widgetColumnSize = "col-4";
const fieldDetailsColumnSize = "col-5";
const requiredfield = <font color={'red'}>*</font>;
let required = '';

return(
<div>
Expand Down Expand Up @@ -487,11 +491,11 @@ export const NewAnnotationForm = ({
</div>
</div>

{selectedFormFields?.includes("Asserted Genes") && (
{(modFormFields.includes("Asserted Genes") ? required = requiredfield : (required = '', selectedFormFields?.includes("Asserted Genes"))) && (
VarunReddy1111 marked this conversation as resolved.
Show resolved Hide resolved
<>
<div className="grid">
<div className={labelColumnSize}>
<label htmlFor="assertedGenes">Asserted Genes</label>
<label htmlFor="assertedGenes">{required}Asserted Genes</label>
</div>
<div className={widgetColumnSize}>
<AutocompleteFormMultiEditor
Expand All @@ -511,17 +515,18 @@ export const NewAnnotationForm = ({
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"assertedGenes"}/>
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"assertedGenes"}/>
<AssertedGenesAdditionalFieldData fieldData={newAnnotation.assertedGenes}/>
</div>
</div>
</>
)}

{selectedFormFields?.includes("Asserted Allele") && (
{(modFormFields.includes("Asserted Allele") ? required = requiredfield : (required = '', selectedFormFields?.includes("Asserted Allele"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
<label htmlFor="assertedAllele">Asserted Allele</label>
<label htmlFor="assertedAllele">{required}Asserted Allele</label>
</div>
<div className={widgetColumnSize}>
<AutocompleteFormEditor
Expand Down Expand Up @@ -564,20 +569,22 @@ export const NewAnnotationForm = ({
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"relation"}/>
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"relation"}/>
</div>
</div>

{selectedFormFields?.includes("NOT") && (
{(modFormFields.includes("NOT") ? required = requiredfield : (required = '', selectedFormFields?.includes("NOT"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
<label htmlFor="negated">NOT</label>
<label htmlFor="negated">{required}NOT</label>
</div>
<div className={widgetColumnSize}>
<NotEditor value={newAnnotation.negated} editorChange={onDropdownFieldChange}/>
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"negated"}/>
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"negated"}/>
</div>
</div>
</>
Expand All @@ -600,6 +607,7 @@ export const NewAnnotationForm = ({
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"diseaseAnnotationObject"}/>
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"diseaseAnnotationObject"}/>
<DiseaseAdditionalFieldData fieldData={newAnnotation.diseaseAnnotationObject}/>
</div>
</div>
Expand All @@ -623,6 +631,7 @@ export const NewAnnotationForm = ({
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"singleReference"}/>
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"singleReference"}/>
<SingleReferenceAdditionalFieldData fieldData={newAnnotation.singleReference}/>
</div>
</div>
Expand All @@ -647,15 +656,16 @@ export const NewAnnotationForm = ({
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"evidenceCodes"}/>
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"evidenceCodes"}/>
<EvidenceCodesAdditionalFieldData fieldData={newAnnotation.evidenceCodes}/>
</div>
</div>

{selectedFormFields?.includes("With") && (
{(modFormFields.includes("With") ? required = requiredfield : (required = '', selectedFormFields?.includes("With"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
<label htmlFor="with">With</label>
<label htmlFor="with">{required}With</label>
</div>
<div className={widgetColumnSize}>
<AutocompleteFormMultiEditor
Expand All @@ -674,17 +684,18 @@ export const NewAnnotationForm = ({
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"with"}/>
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"with"}/>
<WithAdditionalFieldData fieldData={newAnnotation.with}/>
</div>
</div>
</>
)}

{selectedFormFields?.includes("Related Notes") && (
{(modFormFields.includes("Related Notes") ? required = requiredfield : (required = '', selectedFormFields?.includes("Related Notes"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
<label>Related Notes</label>
<label>{required}Related Notes</label>
</div>
<div className={classNames('col-9', {'border-2 border-red-300': submitted && errorMessages.relatedNotes && Object.keys(relatedNotesErrorMessages).length === 0})}>
<RelatedNotesForm
Expand All @@ -701,11 +712,11 @@ export const NewAnnotationForm = ({
</>
)}

{selectedFormFields?.includes("Experimental Conditions") && (
{(modFormFields.includes("Experimental Conditions") ? required = requiredfield : (required = '', selectedFormFields?.includes("Experimental Conditions"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
<label>Experimental Conditions</label>
<label>{required}Experimental Conditions</label>
</div>
<div className={classNames('col-9')} >
<ConditionRelationsForm
Expand All @@ -717,16 +728,17 @@ export const NewAnnotationForm = ({
buttonIsDisabled={isConditionRelationButtonEnabled()}
editingRows={conditionRelationsEditingRows}
/>
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"conditionRelations"}/>
</div>
</div>
</>
)}

{selectedFormFields?.includes("Experiments") && (
{(modFormFields.includes("Experiments") ? required = requiredfield : (required = '', selectedFormFields?.includes("Experiments"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
<label htmlFor="experiments">Experiments</label>
<label htmlFor="experiments">{required}Experiments</label>
</div>
<div className={widgetColumnSize}>
<ConditionRelationHandleFormDropdown
Expand All @@ -742,17 +754,18 @@ export const NewAnnotationForm = ({
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"conditionRelations[0]?.handle"}/>
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"conditionRelations"}/>
</div>
</div>
</>
)}


{selectedFormFields?.includes("Genetic Sex") && (
{(modFormFields.includes("Genetic Sex") ? required = requiredfield : (required = '', selectedFormFields?.includes("Genetic Sex"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
<label htmlFor="geneticSex">Genetic Sex</label>
<label htmlFor="geneticSex">{required}Genetic Sex</label>
</div>
<div className={widgetColumnSize}>
<ControlledVocabularyFormDropdown
Expand All @@ -766,16 +779,17 @@ export const NewAnnotationForm = ({
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"geneticSex"} />
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"geneticSex"}/>
</div>
</div>
</>
)}

{selectedFormFields?.includes("Disease Qualifiers") && (
{(modFormFields.includes("Disease Qualifiers") ? required = requiredfield : (required = '', selectedFormFields?.includes("Disease Qualifiers"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
<label htmlFor="diseaseQualifiers">Disease Qualifiers</label>
<label htmlFor="diseaseQualifiers">{required}Disease Qualifiers</label>
</div>
<div className={widgetColumnSize}>
<ControlledVocabularyFormMultiSelectDropdown
Expand All @@ -788,16 +802,17 @@ export const NewAnnotationForm = ({
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"diseaseQualifiers"} />
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"diseaseQualifiers"}/>
</div>
</div>
</>
)}

{selectedFormFields?.includes("SGD Strain Background") && (
{(modFormFields.includes("SGD Strain Background") ? required = requiredfield : (required = '', selectedFormFields?.includes("SGD Strain Background"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
<label htmlFor="sgdStrainBackground">SGD Strain Background</label>
<label htmlFor="sgdStrainBackground">{required}SGD Strain Background</label>
</div>
<div className={widgetColumnSize}>
<AutocompleteFormEditor
Expand All @@ -823,11 +838,11 @@ export const NewAnnotationForm = ({
</>
)}

{selectedFormFields?.includes("Annotation Type") && (
{(modFormFields.includes("Annotation Type") ? required = requiredfield : (required = '', selectedFormFields?.includes("Annotation Type"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
<label htmlFor="annotationType">Annotation Type</label>
<label htmlFor="annotationType">{required}Annotation Type</label>
</div>
<div className={widgetColumnSize}>
<ControlledVocabularyFormDropdown
Expand All @@ -842,16 +857,17 @@ export const NewAnnotationForm = ({
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"annotationType"} />
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"annotationType"}/>
</div>
</div>
</>
)}

{selectedFormFields?.includes("Genetic Modifier Relation") && (
{(modFormFields.includes("Genetic Modifier Relation") ? required = requiredfield : (required = '', selectedFormFields?.includes("Genetic Modifier Relation"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
<label htmlFor="diseaseGeneticModifierRelation">Genetic Modifier Relation</label>
<label htmlFor="diseaseGeneticModifierRelation">{required}Genetic Modifier Relation</label>
</div>
<div className={widgetColumnSize}>
<ControlledVocabularyFormDropdown
Expand All @@ -872,11 +888,11 @@ export const NewAnnotationForm = ({
</>
)}

{selectedFormFields?.includes("Genetic Modifiers") && (
{(modFormFields.includes("Genetic Modifiers") ? required = requiredfield : (required = '', selectedFormFields?.includes("Genetic Modifiers"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
<label htmlFor="diseaseGeneticModifier">Genetic Modifiers</label>
<label htmlFor="diseaseGeneticModifier">{required}Genetic Modifiers</label>
</div>
<div className={widgetColumnSize}>
<AutocompleteFormMultiEditor
Expand All @@ -893,13 +909,14 @@ export const NewAnnotationForm = ({
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"diseaseGeneticModifiers"}/>
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"diseaseGeneticModifiers"}/>
<GeneticModifiersAdditionalFieldData fieldData={newAnnotation.diseaseGeneticModifiers}/>
</div>
</div>
</>
)}

{selectedFormFields?.includes("Internal") && (
{(modFormFields.includes("Internal") ? required = requiredfield : (required = '', selectedFormFields?.includes("Internal"))) && (
<>
<div className="grid">
<div className={labelColumnSize}>
Expand All @@ -918,6 +935,7 @@ export const NewAnnotationForm = ({
</div>
<div className={fieldDetailsColumnSize}>
<FormErrorMessageComponent errorMessages={errorMessages} errorField={"internal"}/>
<FormErrorMessageComponent errorMessages={uiErrorMessages} errorField={"internal"}/>
</div>
</div>
</>
Expand Down
Loading
Loading