@aehrc/smart-forms-renderer 0.3.0 → 0.5.0

package/src/theme/typography.ts

@@ -0,0 +1,114 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function pxToRem(value: number) {
+  return `${value / 16}rem`;
+}
+
+export function responsiveFontSizes(props: { sm: number; md: number; lg: number }) {
+  const { sm, md, lg } = props;
+  return {
+    '@media (min-width:600px)': {
+      fontSize: pxToRem(sm)
+    },
+    '@media (min-width:900px)': {
+      fontSize: pxToRem(md)
+    },
+    '@media (min-width:1200px)': {
+      fontSize: pxToRem(lg)
+    }
+  };
+}
+
+// ----------------------------------------------------------------------
+
+const typography = {
+  fontFamily: ['Inter', 'sans-serif', 'Roboto', 'Arial', '"Helvetica Neue"', 'Helvetica'].join(','),
+  fontWeightRegular: 400,
+  fontWeightMedium: 600,
+  fontWeightBold: 700,
+  h1: {
+    fontWeight: 800,
+    lineHeight: 80 / 64,
+    fontSize: pxToRem(36),
+    ...responsiveFontSizes({ sm: 40, md: 48, lg: 54 })
+  },
+  h2: {
+    fontWeight: 800,
+    lineHeight: 64 / 48,
+    fontSize: pxToRem(28),
+    ...responsiveFontSizes({ sm: 32, md: 34, lg: 36 })
+  },
+  h3: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(20),
+    ...responsiveFontSizes({ sm: 22, md: 26, lg: 28 })
+  },
+  h4: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(16),
+    ...responsiveFontSizes({ sm: 18, md: 20, lg: 20 })
+  },
+  h5: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(14),
+    ...responsiveFontSizes({ sm: 15, md: 16, lg: 16 })
+  },
+  h6: {
+    fontWeight: 700,
+    lineHeight: 28 / 18,
+    fontSize: pxToRem(13),
+    ...responsiveFontSizes({ sm: 14, md: 14, lg: 14 })
+  },
+  subtitle1: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    fontSize: pxToRem(13)
+  },
+  subtitle2: {
+    fontWeight: 600,
+    lineHeight: 22 / 14,
+    fontSize: pxToRem(11)
+  },
+  body1: {
+    lineHeight: 1.5,
+    fontSize: pxToRem(12)
+  },
+  body2: {
+    lineHeight: 22 / 14,
+    fontSize: pxToRem(11)
+  },
+  caption: {
+    lineHeight: 1.5,
+    fontSize: pxToRem(10)
+  },
+  overline: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(10)
+  },
+  button: {
+    fontWeight: 700,
+    lineHeight: 24 / 14,
+    fontSize: pxToRem(12)
+  }
+};
+
+export default typography;

package/src/utils/calculatedExpression.ts

@@ -0,0 +1,299 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { CalculatedExpression } from '../interfaces/calculatedExpression.interface';
+import fhirpath from 'fhirpath';
+import fhirpath_r4_model from 'fhirpath/fhir-context/r4';
+import type {
+  Expression,
+  Questionnaire,
+  QuestionnaireItem,
+  QuestionnaireResponse,
+  QuestionnaireResponseItem,
+  QuestionnaireResponseItemAnswer
+} from 'fhir/r4';
+import _isEqual from 'lodash/isEqual';
+import { emptyResponse } from './emptyResource';
+import { createFhirPathContext } from './fhirpath';
+import { getQrItemsIndex, mapQItemsIndex } from './mapItem';
+import { updateQrGroup } from './qrItem';
+import cloneDeep from 'lodash.clonedeep';
+
+interface EvaluateInitialCalculatedExpressionsParams {
+  initialResponse: QuestionnaireResponse;
+  calculatedExpressions: Record<string, CalculatedExpression>;
+  variablesFhirPath: Record<string, Expression[]>;
+}
+
+export function evaluateInitialCalculatedExpressions(
+  params: EvaluateInitialCalculatedExpressionsParams
+): Record<string, CalculatedExpression> {
+  const { initialResponse, calculatedExpressions, variablesFhirPath } = params;
+
+  // Return early if initialResponse is empty
+  if (_isEqual(initialResponse, cloneDeep(emptyResponse))) {
+    return calculatedExpressions;
+  }
+
+  const initialExpressions: Record<string, CalculatedExpression> = { ...calculatedExpressions };
+
+  if (Object.keys(initialExpressions).length > 0) {
+    const fhirPathContext: Record<string, any> = createFhirPathContext(
+      initialResponse,
+      variablesFhirPath
+    );
+
+    for (const linkId in initialExpressions) {
+      try {
+        const result = fhirpath.evaluate(
+          initialResponse,
+          calculatedExpressions[linkId].expression,
+          fhirPathContext,
+          fhirpath_r4_model
+        );
+
+        if (calculatedExpressions[linkId].value !== result[0]) {
+          initialExpressions[linkId].value = result[0];
+        }
+      } catch (e) {
+        console.warn(
+          e.message,
+          `LinkId: ${linkId}\nExpression: ${calculatedExpressions[linkId].expression}`
+        );
+      }
+    }
+  }
+  return initialExpressions;
+}
+
+export function evaluateCalculatedExpressions(
+  fhirPathContext: Record<string, any>,
+  calculatedExpressions: Record<string, CalculatedExpression>
+): {
+  calculatedExpsIsUpdated: boolean;
+  updatedCalculatedExpressions: Record<string, CalculatedExpression>;
+} {
+  const updatedCalculatedExpressions: Record<string, CalculatedExpression> = {
+    ...calculatedExpressions
+  };
+
+  let isUpdated = false;
+  for (const linkId in calculatedExpressions) {
+    try {
+      const result = fhirpath.evaluate(
+        '',
+        calculatedExpressions[linkId].expression,
+        fhirPathContext,
+        fhirpath_r4_model
+      );
+
+      if (result.length > 0) {
+        if (calculatedExpressions[linkId].value !== result[0]) {
+          isUpdated = true;
+          updatedCalculatedExpressions[linkId].value = result[0];
+        }
+      }
+    } catch (e) {
+      console.warn(
+        e.message,
+        `LinkId: ${linkId}\nExpression: ${calculatedExpressions[linkId].expression}`
+      );
+    }
+  }
+
+  return {
+    calculatedExpsIsUpdated: isUpdated,
+    updatedCalculatedExpressions: updatedCalculatedExpressions
+  };
+}
+
+export function initialiseCalculatedExpressionValues(
+  questionnaire: Questionnaire,
+  populatedResponse: QuestionnaireResponse,
+  calculatedExpressions: Record<string, CalculatedExpression>
+): QuestionnaireResponse {
+  const calculatedExpressionsWithValues = Object.keys(calculatedExpressions)
+    .filter((key) => calculatedExpressions[key].value !== undefined)
+    .reduce(
+      (mapping: Record<string, CalculatedExpression>, key: string) => (
+        (mapping[key] = calculatedExpressions[key]), mapping
+      ),
+      {}
+    );
+
+  if (
+    !questionnaire.item ||
+    questionnaire.item.length === 0 ||
+    !populatedResponse.item ||
+    populatedResponse.item.length === 0
+  ) {
+    return populatedResponse;
+  }
+
+  const topLevelQrItems: QuestionnaireResponseItem[] = [];
+  for (const [index, topLevelQItem] of questionnaire.item.entries()) {
+    const populatedTopLevelQrItem = populatedResponse.item[index] ?? {
+      linkId: topLevelQItem.linkId,
+      text: topLevelQItem.text,
+      item: []
+    };
+
+    const updatedTopLevelQRItem = initialiseItemCalculatedExpressionValueRecursive(
+      topLevelQItem,
+      populatedTopLevelQrItem,
+      calculatedExpressionsWithValues
+    );
+
+    if (Array.isArray(updatedTopLevelQRItem)) {
+      if (updatedTopLevelQRItem.length > 0) {
+        topLevelQrItems.push(...updatedTopLevelQRItem);
+      }
+      continue;
+    }
+
+    if (updatedTopLevelQRItem) {
+      topLevelQrItems.push(updatedTopLevelQRItem);
+    }
+  }
+
+  return { ...populatedResponse, item: topLevelQrItems };
+}
+
+function initialiseItemCalculatedExpressionValueRecursive(
+  qItem: QuestionnaireItem,
+  qrItem: QuestionnaireResponseItem | undefined,
+  calculatedExpressions: Record<string, CalculatedExpression>
+): QuestionnaireResponseItem[] | QuestionnaireResponseItem | null {
+  const childQItems = qItem.item;
+  if (childQItems && childQItems.length > 0) {
+    // iterate through items of item recursively
+    const childQrItems = qrItem?.item ?? [];
+    // const updatedChildQrItems: QuestionnaireResponseItem[] = [];
+
+    // FIXME Not implemented for repeat groups
+    if (qItem.type === 'group' && qItem.repeats) {
+      return qrItem ?? null;
+    }
+
+    const indexMap = mapQItemsIndex(qItem);
+    const qrItemsByIndex = getQrItemsIndex(childQItems, childQrItems, indexMap);
+
+    // Otherwise loop through qItem as usual
+    for (const [index, childQItem] of childQItems.entries()) {
+      const childQrItem = qrItemsByIndex[index];
+
+      // FIXME Not implemented for repeat groups
+      if (Array.isArray(childQrItem)) {
+        continue;
+      }
+
+      const newQrItem = initialiseItemCalculatedExpressionValueRecursive(
+        childQItem,
+        childQrItem,
+        calculatedExpressions
+      );
+
+      // FIXME Not implemented for repeat groups
+      if (Array.isArray(newQrItem)) {
+        continue;
+      }
+
+      if (newQrItem) {
+        updateQrGroup(
+          newQrItem,
+          null,
+          qrItem ?? { linkId: qItem.linkId, text: qItem.text, item: [] },
+          indexMap
+        );
+      }
+    }
+
+    return constructGroupItem(qItem, qrItem, calculatedExpressions);
+  }
+
+  return constructSingleItem(qItem, calculatedExpressions);
+}
+
+function constructGroupItem(
+  qItem: QuestionnaireItem,
+  qrItem: QuestionnaireResponseItem | undefined,
+  calculatedExpressions: Record<string, CalculatedExpression>
+): QuestionnaireResponseItem | null {
+  const itemCalculatedExpression = calculatedExpressions[qItem.linkId];
+  let calculatedExpressionAnswer: QuestionnaireResponseItemAnswer | undefined;
+  if (itemCalculatedExpression && itemCalculatedExpression.value) {
+    calculatedExpressionAnswer = parseValueToAnswer(qItem, itemCalculatedExpression.value);
+  }
+
+  // If group item has an existing answer, do not overwrite it with calculated expression value
+  if (qrItem?.answer && qrItem?.answer.length > 0) {
+    return qrItem ?? null;
+  }
+
+  if (!calculatedExpressionAnswer) {
+    return qrItem ?? null;
+  }
+
+  if (qrItem) {
+    return {
+      ...qrItem,
+      answer: [calculatedExpressionAnswer]
+    };
+  }
+
+  return {
+    linkId: qItem.linkId,
+    text: qItem.text,
+    answer: [calculatedExpressionAnswer]
+  };
+}
+
+function constructSingleItem(
+  qItem: QuestionnaireItem,
+  calculatedExpressions: Record<string, CalculatedExpression>
+): QuestionnaireResponseItem | null {
+  const itemCalculatedExpression = calculatedExpressions[qItem.linkId];
+  let calculatedExpressionAnswer: QuestionnaireResponseItemAnswer | undefined;
+  if (itemCalculatedExpression && itemCalculatedExpression.value) {
+    calculatedExpressionAnswer = parseValueToAnswer(qItem, itemCalculatedExpression.value);
+  }
+
+  if (!calculatedExpressionAnswer) {
+    return null;
+  }
+
+  return {
+    linkId: qItem.linkId,
+    text: qItem.text,
+    answer: [calculatedExpressionAnswer]
+  };
+}
+
+function parseValueToAnswer(
+  qItem: QuestionnaireItem,
+  value: string | number
+): QuestionnaireResponseItemAnswer {
+  if (typeof value === 'number') {
+    if (qItem.type === 'integer') {
+      return { valueInteger: value };
+    }
+
+    return { valueDecimal: value };
+  }
+
+  return { valueString: value };
+}

package/src/utils/choice.ts

@@ -0,0 +1,194 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type {
+  Coding,
+  Extension,
+  QuestionnaireItem,
+  QuestionnaireItemAnswerOption,
+  QuestionnaireResponseItem,
+  QuestionnaireResponseItemAnswer
+} from 'fhir/r4';
+import { QItemChoiceControl, QItemChoiceOrientation } from '../interfaces/choice.enum';
+import { isSpecificItemControl } from './itemControl';
+
+/**
+ * Get choice control type based on certain criteria in choice items
+ *
+ * @author Sean Fong
+ */
+export function getChoiceControlType(qItem: QuestionnaireItem) {
+  const dropdownOptionsCount = 5;
+  if (isSpecificItemControl(qItem, 'autocomplete')) {
+    return QItemChoiceControl.Autocomplete;
+  }
+
+  if (isSpecificItemControl(qItem, 'check-box')) {
+    return QItemChoiceControl.Checkbox;
+  }
+
+  if (isSpecificItemControl(qItem, 'radio-button')) {
+    return QItemChoiceControl.Radio;
+  }
+
+  if (isSpecificItemControl(qItem, 'drop-down')) {
+    return QItemChoiceControl.Select;
+  }
+
+  if (qItem.answerOption) {
+    return qItem.answerOption.length > 0 && qItem.answerOption.length < dropdownOptionsCount
+      ? QItemChoiceControl.Radio
+      : QItemChoiceControl.Select;
+  } else {
+    return QItemChoiceControl.Select;
+  }
+}
+
+/**
+ * Find and return corresponding answerOption based on selected answer in form
+ *
+ * @author Sean Fong
+ */
+export function findInAnswerOptions(
+  answerOptions: QuestionnaireItemAnswerOption[],
+  selected: string
+): QuestionnaireResponseItemAnswer | undefined {
+  for (const option of answerOptions) {
+    if (option['valueCoding']) {
+      if (selected === option.valueCoding.code) {
+        return option;
+      }
+    } else if (option['valueString']) {
+      if (selected === option.valueString) {
+        return option;
+      }
+    } else if (option['valueInteger']) {
+      if (selected === option.valueInteger.toString()) {
+        return option;
+      }
+    }
+  }
+}
+
+/**
+ * Find and return corresponding coding from AnswerValyeSet based on selected answer in form
+ *
+ * @author Sean Fong
+ */
+export function findInAnswerValueSetCodings(
+  codings: Coding[],
+  selected: string
+): QuestionnaireResponseItemAnswer | undefined {
+  for (const coding of codings) {
+    if (selected === coding.code) {
+      return coding;
+    }
+  }
+}
+
+/**
+ * Find and return string value from selected answer
+ *
+ * @author Sean Fong
+ */
+export function getQrChoiceValue(
+  qrChoice: QuestionnaireResponseItem,
+  returnNull?: boolean
+): string | null {
+  if (qrChoice['answer']) {
+    const answer = qrChoice['answer'][0];
+    if (answer['valueCoding']) {
+      return answer.valueCoding.code ? answer.valueCoding.code : '';
+    } else if (answer['valueString'] !== undefined) {
+      return answer.valueString;
+    } else if (answer['valueInteger']) {
+      return answer.valueInteger.toString();
+    }
+  }
+  return returnNull ? null : '';
+}
+
+/**
+ * Update choice checkbox group answers based on checkbox changes
+ *
+ * @author Sean Fong
+ */
+export function updateQrCheckboxAnswers(
+  changedValue: string,
+  answers: QuestionnaireResponseItemAnswer[],
+  answerOptions: QuestionnaireItemAnswerOption[],
+  qrChoiceCheckbox: QuestionnaireResponseItem,
+  isMultiSelection: boolean
+): QuestionnaireResponseItem | null {
+  // search for answer item of changedValue from list of answer options
+  const newAnswer = findInAnswerOptions(answerOptions, changedValue);
+  if (!newAnswer) return null;
+
+  if (isMultiSelection && answers.length > 0) {
+    // check and filter if new answer exists in existing qrAnswers
+    const updatedAnswers = answers.filter(
+      (answer) => JSON.stringify(answer) !== JSON.stringify(newAnswer)
+    );
+
+    // new answer is not present in existing answers, so we add it to the array
+    if (updatedAnswers.length === answers.length) {
+      updatedAnswers.push(newAnswer);
+    }
+
+    return { ...qrChoiceCheckbox, answer: updatedAnswers };
+  } else {
+    return answers.some((answer) => JSON.stringify(answer) === JSON.stringify(newAnswer))
+      ? { ...qrChoiceCheckbox, answer: [] }
+      : { ...qrChoiceCheckbox, answer: [newAnswer] };
+  }
+}
+
+/**
+ * Get choice orientation from its itemControl
+ *
+ * @author Sean Fong
+ */
+export function getChoiceOrientation(qItem: QuestionnaireItem): QItemChoiceOrientation {
+  const itemControl = qItem.extension?.find(
+    (extension: Extension) =>
+      extension.url === 'http://hl7.org/fhir/StructureDefinition/questionnaire-choiceOrientation'
+  );
+  if (itemControl) {
+    const code = itemControl.valueCode;
+    if (code) {
+      if (code === 'horizontal') {
+        return QItemChoiceOrientation.Horizontal;
+      } else if (code === 'vertical') {
+        return QItemChoiceOrientation.Vertical;
+      }
+    }
+  }
+  return QItemChoiceOrientation.Vertical;
+}
+
+/**
+ * Converts an array of codings to an array of valueCodings which can use the QuestionnaireItemAnswerOption type
+ *
+ * @author Sean Fong
+ */
+export function mapCodingsToOptions(codings: Coding[]): QuestionnaireItemAnswerOption[] {
+  return codings.map((coding) => {
+    return {
+      valueCoding: coding
+    };
+  });
+}

package/src/utils/debounce.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const DEBOUNCE_DURATION = 200;
+
+export const AUTOCOMPLETE_DEBOUNCE_DURATION = 300;

package/src/utils/emptyResource.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
+
+export const emptyQuestionnaire: Questionnaire = {
+  resourceType: 'Questionnaire',
+  status: 'draft'
+};
+
+export const emptyResponse: QuestionnaireResponse = {
+  resourceType: 'QuestionnaireResponse',
+  status: 'in-progress'
+};