[code-cleanup] Cleanup and minor optimisation of the Questions components params interchange

modules/data-entry/src/main/frontend/src/questionnaire/Answer.jsx

@@ -35,11 +35,14 @@ export const IS_DEFAULT_ANSWER_POS = 4;
 // Holds answers and automatically generates hidden inputs
 // for form submission
 function Answer (props) {
-  let { answers, answerMetadata, answerNodeType, existingAnswer, pageActive, path, questionName, questionDefinition, valueType, isMultivalued, onChangeNote, noteComponent, noteProps, onAddedAnswerPath, onDecidedOutputPath, sectionAnswersState } = props;
-  let { enableNotes } = { ...props, ...questionDefinition };
+  let { answers, answerMetadata, existingAnswer, pageActive, path, questionName, questionDefinition, valueType, onChangeNote, noteComponent, noteProps, onAddedAnswerPath, onDecidedOutputPath, sectionAnswersState } = props;
+  let { dataType, enableNotes } = { ...props, ...questionDefinition };
   let { onAddSuggestion } = { ...props, ...noteProps };
   let [ answerID ] = useState((existingAnswer && existingAnswer[0]) || uuidv4());
-  let answerPath = path + "/" + answerID;
+
+  const answerPath = path + "/" + answerID;
+  const answerNodeType = props.answerNodeType || "cards:" + dataType.charAt(0).toUpperCase() + dataType.slice(1) + "Answer";
+  const isMultivalued = questionDefinition.maxAnswers != 1;
 
   useEffect(() => {
     if (sectionAnswersState !== undefined) {
@@ -133,15 +136,12 @@ Answer.propTypes = {
   answers: PropTypes.array,
   answerNodeType: PropTypes.string,
   valueType: PropTypes.string,
-  isMultivalued: PropTypes.bool,
   noteComponent: PropTypes.elementType,
   pageActive: PropTypes.bool
 };
 
 Answer.defaultProps = {
-  answerNodeType: "cards:TextAnswer",
   valueType: 'String',
-  isMultivalued: false,
   noteComponent: Note,
   pageActive: true
 };

modules/data-entry/src/main/frontend/src/questionnaire/AutocreatedQuestion.jsx

@@ -19,7 +19,6 @@
 
 import React, { useEffect, useState } from "react";
 import PropTypes from 'prop-types';
-import { InputAdornment, TextField } from "@mui/material";
 
 import withStyles from '@mui/styles/withStyles';
 
@@ -34,13 +33,11 @@ import { useFormWriterContext } from "./FormContext";
 // Other options are passed to the <question> widget
 let AutocreatedQuestion = (props) => {
   const { isEdit, ...rest } = props;
-  const { existingAnswer, classes, pageActive, questionName} = rest;
-  const { unitOfMeasurement, displayMode } = {...props.questionDefinition, ...rest};
+  const { existingAnswer, questionName } = rest;
+  const { displayMode } = props.questionDefinition;
 
-  const [muiInputProps, changeMuiInputProps] = useState({});
   const [isFormatted, changeIsFormatted] = useState(false);
 
-
   // If we are in edit mode, upon loading the pre-filled answers, place them
   // in the form context where they can be accessed by computed answers
   const changeFormContext = useFormWriterContext();

modules/data-entry/src/main/frontend/src/questionnaire/BooleanQuestion.jsx

@@ -56,8 +56,8 @@ import AnswerComponentManager from "./AnswerComponentManager";
 //   unknownLabel="Does not compute"
 //   />
 function BooleanQuestion(props) {
-  const {classes, ...rest} = props;
-  const {yesLabel, noLabel, unknownLabel, enableUnknown} = { ...props.questionDefinition, ...props }
+  const {classes, questionDefinition, ...rest} = props;
+  const {yesLabel, noLabel, unknownLabel, enableUnknown} = questionDefinition;
 
   // Define the defaults for yesLabel, etc. here because we want questionDefinition to be able to
   // override them, and the props to be able to override the questionDefinition
@@ -72,10 +72,9 @@ function BooleanQuestion(props) {
       {...props}
       >
       <MultipleChoice
-        answerNodeType="cards:BooleanAnswer"
         valueType="Long" /* Notably not "Boolean", since we need it to be stored as a long in the backend */
-        maxAnswers={1}
         defaults={options}
+        questionDefinition={{...questionDefinition, maxAnswers: 1}}
         {...rest}
         />
     </Question>);
@@ -85,12 +84,11 @@ BooleanQuestion.propTypes = {
   classes: PropTypes.object.isRequired,
   questionDefinition: PropTypes.shape({
     text: PropTypes.string,
+    enableUnknown: PropTypes.bool,
+    yesLabel: PropTypes.string,
+    noLabel: PropTypes.string,
+    unknownLabel: PropTypes.string
   }).isRequired,
-  text: PropTypes.string,
-  enableUnknown: PropTypes.bool,
-  yesLabel: PropTypes.string,
-  noLabel: PropTypes.string,
-  unknownLabel: PropTypes.string
 };
 
 const StyledBooleanQuestion = withStyles(QuestionnaireStyle)(BooleanQuestion)

modules/data-entry/src/main/frontend/src/questionnaire/ChromosomeQuestion.jsx

@@ -62,15 +62,14 @@ function ChromosomeQuestion(props) {
     'MT': false
   };
 
-  let { chromosomeNumber } = {...defaultValues, ...props.questionDefinition, ...props};
+  let { chromosomeNumber } = {...defaultValues, ...props.questionDefinition};
   let defaults = [];
   for (let i = 1; i <= chromosomeNumber; i++) {
     defaults.push([i.toString(), i.toString(), true]);
   }
 
-  // We override the defaults above with the questionnaire definition,
-  // and then we override with explicit properties
-  const enabledChromosomes = {...Object.entries(defaultValues).reduce((accumulator, [key, value]) => {accumulator[`enable${key}`] = value; return accumulator;}, {}), ...props.questionDefinition, ...props};
+  // We override the defaults above with the questionnaire definition
+  const enabledChromosomes = {...Object.entries(defaultValues).reduce((accumulator, [key, value]) => {accumulator[`enable${key}`] = value; return accumulator;}, {}), ...props.questionDefinition};
 
   // Whatever is left enabled, we display
   for (let chromosome of Object.keys(defaultValues)) {
@@ -85,7 +84,6 @@ function ChromosomeQuestion(props) {
       {...props}
       >
       <MultipleChoice
-        answerNodeType="cards:ChromosomeAnswer"
         defaults={defaults}
         {...props}
         />
@@ -100,10 +98,6 @@ ChromosomeQuestion.propTypes = {
     maxAnswers: PropTypes.number,
     chromosomeNumber: PropTypes.number
   }).isRequired,
-  text: PropTypes.string,
-  minAnswers: PropTypes.number,
-  maxAnswers: PropTypes.number,
-  chromosomeNumber: PropTypes.number
 };
 
 const StyledChromosomeQuestion = withStyles(QuestionnaireStyle)(ChromosomeQuestion)

modules/data-entry/src/main/frontend/src/questionnaire/ComputedQuestion.jsx

@@ -52,8 +52,8 @@ import { MakeRequest } from "../vocabQuery/util.jsx";
 //  expression="if (@{question_b} === 0) setError('Can not divide by 0'); return @{question_a}/@{question_b}"
 //  />
 let ComputedQuestion = (props) => {
-  const { existingAnswer, classes, pageActive, questionDefinition, ...rest} = props;
-  const { text, expression, unitOfMeasurement, dataType, displayMode, dateFormat, yesLabel, noLabel, unknownLabel } = {...props.questionDefinition, ...props};
+  const { existingAnswer, classes, pageActive, ...rest} = props;
+  const { expression, unitOfMeasurement, dataType, displayMode, dateFormat, yesLabel, noLabel, unknownLabel } = {...props.questionDefinition, ...props};
   const [error, changeError] = useState(false);
   const [errorMessage, changeErrorMessage] = useState(false);
 
@@ -354,7 +354,6 @@ let ComputedQuestion = (props) => {
       }
       <Answer
         answers={answer}
-        questionDefinition={props.questionDefinition}
         existingAnswer={existingAnswer}
         answerNodeType={answerNodeType}
         valueType={answerType}

modules/data-entry/src/main/frontend/src/questionnaire/DateQuestionFull.jsx

@@ -44,15 +44,14 @@ import DateQuestionUtilities from "./DateQuestionUtilities";
 //
 // Sample usage:
 //<DateQuestion
-//  text="Please enter a date-time in 2019"
 //  dateFormat="yyyy-MM-dd HH:mm:ss"
 //  lowerLimit={new Date("01-01-2019")}
 //  upperLimit={new Date("12-31-2019")}
 //  type="timestamp"
 //  />
 function DateQuestionFull(props) {
-  let {existingAnswer, classes, pageActive, ...rest} = props;
-  let {text, dateFormat, minAnswers, type, lowerLimit, upperLimit} = {dateFormat: "yyyy-MM-dd", minAnswers: 0, type: DateQuestionUtilities.TIMESTAMP_TYPE, ...props.questionDefinition, ...props};
+  let {classes, ...rest} = props;
+  let {dateFormat, type, lowerLimit, upperLimit, existingAnswer, pageActive} = {dateFormat: "yyyy-MM-dd", minAnswers: 0, type: DateQuestionUtilities.TIMESTAMP_TYPE, ...props.questionDefinition, ...props};
 
   let startValues = existingAnswer && existingAnswer[1].value || "";
 
@@ -165,11 +164,7 @@ function DateQuestionFull(props) {
       }
       <Answer
         answers={outputAnswers}
-        questionDefinition={props.questionDefinition}
-        existingAnswer={existingAnswer}
-        answerNodeType="cards:DateAnswer"
         valueType="Date"
-        pageActive={pageActive}
         {...rest}
         />
     </Question>);

modules/data-entry/src/main/frontend/src/questionnaire/DateQuestionMonth.jsx

@@ -44,15 +44,14 @@ import DateQuestionUtilities from "./DateQuestionUtilities";
 //
 // Sample usage:
 //<DateQuestion
-//  text="Please enter a date-time in 2019"
 //  dateFormat="yyyy-MM"
 //  lowerLimit={new Date("01-01-2019")}
 //  upperLimit={new Date("12-31-2019")}
 //  type="timestamp"
 //  />
 function DateQuestionMonth(props) {
-  let {existingAnswer, classes, pageActive, ...rest} = props;
-  let {text, dateFormat, minAnswers, type, lowerLimit, upperLimit} = {dateFormat: "yyyy/MM", minAnswers: 0, type: DateQuestionUtilities.TIMESTAMP_TYPE, ...props.questionDefinition, ...props};
+  let {classes, ...rest} = props;
+  let {dateFormat, minAnswers, type, lowerLimit, upperLimit, existingAnswer, pageActive} = {dateFormat: "yyyy/MM", minAnswers: 0, type: DateQuestionUtilities.TIMESTAMP_TYPE, ...props.questionDefinition, ...props};
 
   let startValues = existingAnswer && existingAnswer[1].value || "";
 
@@ -207,11 +206,7 @@ function DateQuestionMonth(props) {
       </>}
       <Answer
         answers={outputAnswers}
-        questionDefinition={props.questionDefinition}
-        existingAnswer={existingAnswer}
-        answerNodeType="cards:DateAnswer"
         valueType="Date"
-        pageActive={pageActive}
         {...rest}
         />
     </Question>);

modules/data-entry/src/main/frontend/src/questionnaire/DateQuestionYear.jsx

@@ -32,36 +32,31 @@ import DateQuestionUtilities from "./DateQuestionUtilities";
 // submission.
 //
 // Optional props:
-// text: the question to be displayed
 // type: "timestamp" for a single date or "interval" for two dates
-// dateFormat: yyyy
 // lowerLimit: lower date limit (inclusive) given as an object or string parsable by luxon
 // upperLimit: upper date limit (inclusive) given as an object or string parsable by luxon
 // Other options are passed to the <question> widget
 //
 // Sample usage:
 //<DateQuestionYear
-//  text="Please enter a date-time in 2019"
-//  dateFormat="yyyy-MM-dd HH:mm:ss"
 //  lowerLimit={new Date("01-01-2019")}
 //  upperLimit={new Date("12-31-2019")}
 //  type="timestamp"
 //  />
 function DateQuestionYear(props) {
-  let {existingAnswer, classes, ...rest} = props;
-  let {text, dateFormat, minAnswers, type, lowerLimit, upperLimit} = {dateFormat: "yyyy", minAnswers: 0, type: DateQuestionUtilities.TIMESTAMP_TYPE, ...props.questionDefinition, ...props};
+  let {classes, questionDefinition, ...rest} = props;
+  let {minAnswers, type, lowerLimit, upperLimit} = {minAnswers: 0, type: DateQuestionUtilities.TIMESTAMP_TYPE, ...questionDefinition, ...props};
   return (
     <NumberQuestion
-      minAnswers={minAnswers}
-      maxAnswers={1}
-      dataType="long"
+      questionDefinition={{...questionDefinition,
+        minAnswers: minAnswers,
+        maxAnswers: 1,
+        maxValue: upperLimit || 9999,
+        minValue: lowerLimit || 1000,
+        dataType: "long"
+      }}
       errorText="Please insert a valid year."
-      isRange={(type === DateQuestionUtilities.INTERVAL_TYPE)}
-      answerNodeType="cards:DateAnswer"
-      valueType="Long"
-      existingAnswer={existingAnswer}
-      maxValue={upperLimit || 9999}
-      minValue={lowerLimit || 1000}
+      isRange={type === DateQuestionUtilities.INTERVAL_TYPE}
       disableValueInstructions={typeof(upperLimit) == 'undefined' && typeof(lowerLimit) == 'undefined'}
       {...rest}
       />

modules/data-entry/src/main/frontend/src/questionnaire/DicomQuestion.jsx

@@ -71,7 +71,7 @@ const useStyles = makeStyles(theme => ({
 // submission.
 //
 function DicomQuestion(props) {
-  const { existingAnswer, questionDefinition, ...rest } = props;
+  const { questionDefinition, ...rest } = props;
 
   let [ dicomMetadataNote, setDicomMetadataNote ] = useState();
   let [ dicomImagePreviewURL, setDicomImagePreviewURL ] = useState();
@@ -123,7 +123,7 @@ function DicomQuestion(props) {
   }
 
   let fetchDicomFile = () => {
-    let dicomFilePath = existingAnswer?.[1]
+    let dicomFilePath = props.existingAnswer?.[1]
         .value?.split("/")
         .map(s => encodeURIComponent(s))
         .join("/");
@@ -310,15 +310,13 @@ function DicomQuestion(props) {
       </ResponsiveDialog>
       <FileQuestion
         questionDefinition={{...questionDefinition, maxAnswers: 1, enableNotes: true}}
-        existingAnswer={existingAnswer}
         {...rest}
         onBeforeUpload={processDicomFile}
         onDelete={() => {
           setDicomMetadataNote("");
           setDicomImagePreviewURL(undefined);
         }}
         previewRenderer={previewRenderer}
-        answerNodeType="cards:DicomAnswer"
         noteProps={{
           fullSize: true,
           placeholder: "Dicom metadata",

modules/data-entry/src/main/frontend/src/questionnaire/FileQuestion.jsx

@@ -46,9 +46,9 @@ import AnswerComponentManager from "./AnswerComponentManager";
 // Sample usage:
 // (TODO)
 function FileQuestion(props) {
-  const { classes, existingAnswer, pageActive, ...rest } = props;
-  const { maxAnswers, namePattern } = { ...props.questionDefinition, ...props }
-  const { onBeforeUpload, onAfterUpload, onDelete, previewRenderer, answerNodeType } = props;
+  const { classes, ...rest } = props;
+  const { maxAnswers, namePattern } = props.questionDefinition;
+  const { existingAnswer, onBeforeUpload, onAfterUpload, onDelete, pageActive, previewRenderer } = props;
   let initialValues =
     // Check whether or not we have an initial value
     (!existingAnswer || existingAnswer[1].value === undefined) ? [] :
@@ -348,13 +348,8 @@ function FileQuestion(props) {
       }
       <Answer
         answers={answers}
-        questionDefinition={props.questionDefinition}
-        existingAnswer={existingAnswer}
-        answerNodeType={ answerNodeType || "cards:FileAnswer" }
         onDecidedOutputPath={setAnswerPath}
         valueType="path"
-        isMultivalued={maxAnswers != 1}
-        pageActive={pageActive}
         {...rest}
         />
     </Question>);

modules/data-entry/src/main/frontend/src/questionnaire/MultipleChoice.jsx

@@ -53,7 +53,7 @@ const GHOST_SENTINEL = "custom-input";
   */
 function MultipleChoice(props) {
   let { classes, customInput, customInputProps, existingAnswer, input, textbox, onUpdate, onChange, additionalInputProps, muiInputProps, naValue, noneOfTheAboveValue, error, questionName, ...rest } = props;
-  let { maxAnswers, minAnswers, displayMode, enableSeparatorDetection } = {...props.questionDefinition, ...props};
+  let { maxAnswers, displayMode, enableSeparatorDetection } = {...props.questionDefinition, ...props};
   let { validate, validationErrorText, liveValidation } = {...props.questionDefinition, ...props};
   // pageActive should be passed to the Answer component, so we make sure to include it in the `rest` variable above
   let { instanceId, pageActive } = props;
@@ -584,7 +584,6 @@ function MultipleChoice(props) {
           answers={answers}
           existingAnswer={existingAnswer}
           questionName={questionName}
-          isMultivalued={true}
           onAddSuggestion={acceptOptionFromWidget}
           {...rest}
           />
@@ -690,9 +689,6 @@ function ResponseChild(props) {
 
 MultipleChoice.propTypes = {
   classes: PropTypes.object.isRequired,
-  text: PropTypes.string,
-  description: PropTypes.string,
-  maxAnswers: PropTypes.number,
   defaults: PropTypes.array,
   input: PropTypes.bool,
   additionalInputProps: PropTypes.object,