@aehrc/smart-forms-renderer 0.40.2 → 0.41.0

package/src/hooks/useInitialiseRepeatGroups.ts

@@ -16,14 +16,14 @@
  */
 
 import type { QuestionnaireResponseItem } from 'fhir/r4';
-import type { RepeatGroupSingle } from '../interfaces/repeatGroup.interface';
+import type { RepeatGroupSingleModel } from '../interfaces/repeatGroup.interface';
 import { useMemo } from 'react';
 import { generateExistingRepeatId, generateNewRepeatId } from '../utils/repeatId';
 
 function useInitialiseRepeatGroups(
   linkId: string,
   qrItems: QuestionnaireResponseItem[]
-): RepeatGroupSingle[] {
+): RepeatGroupSingleModel[] {
   return useMemo(() => {
     if (qrItems.length === 0) {
       return [{ id: generateNewRepeatId(linkId), qrItem: null }];

package/src/interfaces/repeatGroup.interface.ts

@@ -22,7 +22,7 @@ export interface QrRepeatGroup {
   qrItems: QuestionnaireResponseItem[];
 }
 
-export interface RepeatGroupSingle {
+export interface RepeatGroupSingleModel {
   id: string;
   qrItem: QuestionnaireResponseItem | null;
 }

package/src/stores/questionnaireResponseStore.ts

@@ -30,12 +30,14 @@ import { createSelectors } from './selector';
 import { validateQuestionnaire } from '../utils/validateQuestionnaire';
 import { questionnaireStore } from './questionnaireStore';
 import { createQuestionnaireResponseItemMap } from '../utils/questionnaireResponseStoreUtils/updatableResponseItems';
+import { generateUniqueId } from '../utils/extractObservation';
 
 /**
  * QuestionnaireResponseStore properties and methods
  * Properties can be accessed for fine-grain details.
  * Methods are usually used internally, using them from an external source is not recommended.
  *
+ * @property key - The React key of the questionnaireResponse, used internally for refreshing the BaseRenderer
  * @property sourceResponse - The original response created when the form is first initialised i.e. empty, pre-populated, opened saved draft
  * @property updatableResponse - The current state of the response that is being updated via form fields
  * @property updatableResponseItems - Key-value pair of updatableResponse items `Record<linkId, QR.item(s)>`
@@ -53,6 +55,7 @@ import { createQuestionnaireResponseItemMap } from '../utils/questionnaireRespon
  * @author Sean Fong
  */
 export interface QuestionnaireResponseStoreType {
+  key: string;
   sourceResponse: QuestionnaireResponse;
   updatableResponse: QuestionnaireResponse;
   updatableResponseItems: Record<string, QuestionnaireResponseItem[]>;
@@ -80,6 +83,7 @@ export interface QuestionnaireResponseStoreType {
  */
 export const questionnaireResponseStore = createStore<QuestionnaireResponseStoreType>()(
   (set, get) => ({
+    key: 'QR-initial-key',
     sourceResponse: cloneDeep(emptyResponse),
     updatableResponse: cloneDeep(emptyResponse),
     updatableResponseItems: {},
@@ -108,6 +112,7 @@ export const questionnaireResponseStore = createStore<QuestionnaireResponseStore
       });
 
       set(() => ({
+        key: generateUniqueId('QR'),
         sourceResponse: questionnaireResponse,
         updatableResponse: questionnaireResponse,
         updatableResponseItems: createQuestionnaireResponseItemMap(questionnaireResponse),
@@ -153,6 +158,7 @@ export const questionnaireResponseStore = createStore<QuestionnaireResponseStore
       });
 
       set(() => ({
+        key: generateUniqueId('QR'),
         sourceResponse: savedResponse,
         updatableResponse: savedResponse,
         updatableResponseItems: createQuestionnaireResponseItemMap(savedResponse),
@@ -178,6 +184,7 @@ export const questionnaireResponseStore = createStore<QuestionnaireResponseStore
     },
     destroySourceResponse: () =>
       set(() => ({
+        key: generateUniqueId('QR'),
         sourceResponse: cloneDeep(emptyResponse),
         updatableResponse: cloneDeep(emptyResponse),
         updatableResponseItems: createQuestionnaireResponseItemMap(cloneDeep(emptyResponse)),

package/src/stories/assets/questionnaires/QButtonTester.ts

@@ -238,6 +238,67 @@ export const qButtonTester: Questionnaire = {
             'https://healthterminologies.gov.au/fhir/ValueSet/australian-states-territories-2'
         }
       ]
+    },
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-itemPopulationContext',
+          valueExpression: {
+            name: 'PostalAddressRepeat',
+            language: 'text/fhirpath',
+            expression: "%patient.address.where(type='postal')"
+          }
+        },
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+          valueCodeableConcept: {
+            coding: [
+              {
+                system: 'http://hl7.org/fhir/questionnaire-item-control',
+                code: 'gtable'
+              }
+            ]
+          }
+        }
+      ],
+      linkId: 'repeats-gtable',
+      type: 'group',
+      repeats: true,
+      text: 'Repeats Group Table Test',
+      item: [
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression',
+              valueExpression: {
+                language: 'text/fhirpath',
+                expression: '%PostalAddressRepeat.city'
+              }
+            }
+          ],
+          linkId: 'repeats-gtable-string',
+          text: 'String',
+          type: 'string',
+          repeats: false
+        },
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression',
+              valueExpression: {
+                language: 'text/fhirpath',
+                expression: '%PostalAddressRepeat.state'
+              }
+            }
+          ],
+          linkId: 'repeats-gtable-choice',
+          text: 'Choice',
+          type: 'choice',
+          repeats: false,
+          answerValueSet:
+            'https://healthterminologies.gov.au/fhir/ValueSet/australian-states-territories-2'
+        }
+      ]
     }
   ]
 };
@@ -373,6 +434,62 @@ export const qrButtonTesterResponse: QuestionnaireResponse = {
           ]
         }
       ]
+    },
+    {
+      linkId: 'repeats-gtable',
+      text: 'Repeats Group Table Test',
+      item: [
+        {
+          linkId: 'repeats-gtable-string',
+          text: 'String',
+          answer: [
+            {
+              valueString: 'Group Table String 1'
+            }
+          ]
+        },
+        {
+          linkId: 'repeats-gtable-choice',
+          text: 'Choice',
+          answer: [
+            {
+              valueCoding: {
+                system:
+                  'https://healthterminologies.gov.au/fhir/CodeSystem/australian-states-territories-1',
+                code: 'NSW'
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      linkId: 'repeats-gtable',
+      text: 'Repeats Group Table Test',
+      item: [
+        {
+          linkId: 'repeats-gtable-string',
+          text: 'String',
+          answer: [
+            {
+              valueString: 'Group Table String 2'
+            }
+          ]
+        },
+        {
+          linkId: 'repeats-gtable-choice',
+          text: 'Choice',
+          answer: [
+            {
+              valueCoding: {
+                system:
+                  'https://healthterminologies.gov.au/fhir/CodeSystem/australian-states-territories-1',
+                code: 'SA'
+              }
+            }
+          ]
+        }
+      ]
     }
   ],
 

package/src/stories/storybookWrappers/IdRemoverButtonForStorybook.tsx

@@ -20,8 +20,7 @@ import React from 'react';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import { Box, IconButton, Tooltip } from '@mui/material';
 import ContentCutIcon from '@mui/icons-material/ContentCut';
-import { useQuestionnaireResponseStore } from '../../stores';
-import { removeInternalIdsFromResponse } from '../../utils/manageForm';
+import { buildForm, removeInternalIdsFromResponse } from '../../utils/manageForm';
 
 interface IdRemoverButtonProps {
   questionnaire: Questionnaire;
@@ -31,10 +30,9 @@ interface IdRemoverButtonProps {
 function IdRemoverButtonForStorybook(props: IdRemoverButtonProps) {
   const { questionnaire, questionnaireResponse } = props;
 
-  const updateResponse = useQuestionnaireResponseStore.use.updateResponse();
-
   async function handleRemoveIds() {
-    updateResponse(removeInternalIdsFromResponse(questionnaire, questionnaireResponse));
+    const updatedResponse = removeInternalIdsFromResponse(questionnaire, questionnaireResponse);
+    await buildForm(questionnaire, updatedResponse);
   }
 
   return (

package/{lib/hooks/useInitialiseGroupTable.js → src/tests/removeId.test.ts}

@@ -14,17 +14,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { generateExistingRepeatId, generateNewRepeatId } from '../utils/repeatId';
-function useInitialiseGroupTable(linkId, qrItems) {
-    if (qrItems.length === 0) {
-        return [{ id: generateNewRepeatId(linkId), qrItem: null }];
-    }
-    return qrItems.map((qrItem, index) => {
-        return {
-            id: generateExistingRepeatId(linkId, index),
-            qrItem
-        };
-    });
-}
-export default useInitialiseGroupTable;
-//# sourceMappingURL=useInitialiseGroupTable.js.map
+
+import { expect, test } from '@jest/globals';
+import { removeInternalIdsFromResponse } from '../utils';
+import { qrRemoveIdResult, qrRemoveIdSample } from './test-data/removeIdSample';
+import { qMyPatient } from '../stories/assets/questionnaires/QIdRemoverDebugger';
+
+test('item.initial is properly pre-filled into QuestionnaireResponse', () => {
+  const outputResponse = removeInternalIdsFromResponse(qMyPatient, qrRemoveIdSample);
+
+  expect(outputResponse).toStrictEqual(qrRemoveIdResult);
+});

package/src/tests/test-data/removeIdSample.ts

@@ -0,0 +1,101 @@
+import type { QuestionnaireResponse } from 'fhir/r4';
+
+export const qrRemoveIdSample: QuestionnaireResponse = {
+  resourceType: 'QuestionnaireResponse',
+  status: 'in-progress',
+  questionnaire: 'http://canshare.co.nz/questionnaire/myPatient1',
+  item: [
+    {
+      linkId: 'myPatient1',
+      text: 'myPatient1',
+      item: [
+        {
+          linkId: 'myPatient1.name',
+          text: 'name *',
+          item: [
+            {
+              linkId: 'myPatient1.name.first',
+              text: 'firstName *',
+              answer: [
+                {
+                  id: 'myPatient1.name.first-repeat-000000',
+                  valueString: '1st firstName 1.0'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          linkId: 'myPatient1.name',
+          text: 'name *',
+          item: [
+            {
+              linkId: 'myPatient1.name.first',
+              text: 'firstName *',
+              answer: [
+                {
+                  id: 'myPatient1.name.first-repeat-000000',
+                  valueString: '2nd firstName 1.0'
+                },
+                {
+                  id: 'myPatient1.name.first-repeat-O-r6YSxx81TBFf_yiHWk6',
+                  valueString: '2nd firstName 2.0'
+                },
+                {
+                  id: 'myPatient1.name.first-repeat-ZQR77gdy6utsT_JkbuHKc'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+export const qrRemoveIdResult: QuestionnaireResponse = {
+  resourceType: 'QuestionnaireResponse',
+  status: 'in-progress',
+  questionnaire: 'http://canshare.co.nz/questionnaire/myPatient1',
+  item: [
+    {
+      linkId: 'myPatient1',
+      text: 'myPatient1',
+      item: [
+        {
+          linkId: 'myPatient1.name',
+          text: 'name *',
+          item: [
+            {
+              linkId: 'myPatient1.name.first',
+              text: 'firstName *',
+              answer: [
+                {
+                  valueString: '1st firstName 1.0'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          linkId: 'myPatient1.name',
+          text: 'name *',
+          item: [
+            {
+              linkId: 'myPatient1.name.first',
+              text: 'firstName *',
+              answer: [
+                {
+                  valueString: '2nd firstName 1.0'
+                },
+                {
+                  valueString: '2nd firstName 2.0'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};

package/src/theme/Theme.tsx

@@ -23,7 +23,6 @@ import {
   StyledEngineProvider,
   ThemeProvider as MUIThemeProvider
 } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
 import palette from './palette';
 import typography from './typography';
 import CustomGlobalStyles from './customGlobalStyles';
@@ -102,7 +101,6 @@ export function RendererThemeProvider({ children }: { children: ReactNode }) {
   return (
     <StyledEngineProvider injectFirst>
       <MUIThemeProvider theme={theme}>
-        <CssBaseline />
         <CustomGlobalStyles />
         {children}
       </MUIThemeProvider>

package/src/utils/calculatedExpression.ts

@@ -27,7 +27,6 @@ import type {
   QuestionnaireResponseItem,
   QuestionnaireResponseItemAnswer
 } from 'fhir/r4';
-import _isEqual from 'lodash/isEqual';
 import { emptyResponse } from './emptyResource';
 import { createFhirPathContext } from './fhirpath';
 import { getQrItemsIndex, mapQItemsIndex } from './mapItem';
@@ -35,6 +34,7 @@ import { updateQrItemsInGroup } from './qrItem';
 import cloneDeep from 'lodash.clonedeep';
 import dayjs from 'dayjs';
 import { updateQuestionnaireResponse } from './genericRecursive';
+import isEqual from 'lodash.isequal';
 
 interface EvaluateInitialCalculatedExpressionsParams {
   initialResponse: QuestionnaireResponse;
@@ -60,7 +60,7 @@ export function evaluateInitialCalculatedExpressions(
 
   // Return early if initialResponse is empty or there are no calculated expressions to evaluate
   if (
-    _isEqual(initialResponse, cloneDeep(emptyResponse)) ||
+    isEqual(initialResponse, cloneDeep(emptyResponse)) ||
     Object.keys(calculatedExpressions).length === 0
   ) {
     return {
@@ -93,7 +93,7 @@ export function evaluateInitialCalculatedExpressions(
         );
 
         // Only update calculatedExpressions if length of result array > 0
-        if (result.length > 0 && !_isEqual(calcExpression.value, result[0])) {
+        if (result.length > 0 && !isEqual(calcExpression.value, result[0])) {
           calcExpression.value = result[0];
         }
       } catch (e) {
@@ -136,7 +136,7 @@ export function evaluateCalculatedExpressions(
 
         // Update calculatedExpressions if length of result array > 0
         // Only update when current calcExpression value is different from the result, otherwise it will result in an infinite loop as per issue #733
-        if (result.length > 0 && !_isEqual(calcExpression.value, result[0])) {
+        if (result.length > 0 && !isEqual(calcExpression.value, result[0])) {
           isUpdated = true;
           calcExpression.value = result[0];
         }

package/src/utils/extractObservation.ts

@@ -261,7 +261,7 @@ export function createObservation(
 
 let ID_COUNTER = 0;
 
-function generateUniqueId(prefix: string) {
+export function generateUniqueId(prefix: string) {
   if (ID_COUNTER) {
     ID_COUNTER = 0;
   }

package/src/utils/manageForm.ts

@@ -11,7 +11,7 @@ import { readEncounter, readPatient, readUser } from '../api/smartClient';
 import type Client from 'fhirclient/lib/Client';
 import cloneDeep from 'lodash.clonedeep';
 import { updateQuestionnaireResponse } from './genericRecursive';
-import { removeInternalRepeatIdsRecursive } from './repeatId';
+import { removeInternalRepeatIdsRecursive } from './removeRepeatId';
 
 /**
  * Build the form with an initial Questionnaire and an optional filled QuestionnaireResponse.

package/src/utils/openChoice.ts

@@ -23,7 +23,7 @@ import type {
 } from 'fhir/r4';
 import { OpenChoiceItemControl } from '../interfaces/choice.enum';
 import { isSpecificItemControl } from './itemControl';
-import _isEqual from 'lodash/isEqual';
+import isEqual from 'lodash.isequal';
 
 /**
  * Update open choice answer based on open label value
@@ -100,7 +100,7 @@ export function updateOpenLabelAnswer(
 
   // Old open label answer equals to new open label answer
   // This should not happen, but return oldQrItem
-  if (_isEqual(oldOpenLabelAnswer, newOpenLabelAnswer)) {
+  if (isEqual(oldOpenLabelAnswer, newOpenLabelAnswer)) {
     return oldQrItem;
   }
 
@@ -122,7 +122,7 @@ export function getOldOpenLabelAnswer(
   options: QuestionnaireItemAnswerOption[]
 ): QuestionnaireResponseItemAnswer | null {
   const openLabelAnswer = answers.find(
-    (answer) => !options.some((option) => _isEqual(option, answer))
+    (answer) => !options.some((option) => isEqual(option, answer))
   );
   return openLabelAnswer ?? null;
 }

package/src/utils/removeRepeatId.ts

@@ -0,0 +1,113 @@
+/*
+ * Copyright 2024 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 {
+  QuestionnaireItem,
+  QuestionnaireResponseItem,
+  QuestionnaireResponseItemAnswer
+} from 'fhir/r4';
+import { getQrItemsIndex, mapQItemsIndex } from './mapItem';
+
+export function removeInternalRepeatIdsRecursive(
+  qItem: QuestionnaireItem,
+  qrItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[] | null
+): QuestionnaireResponseItem | QuestionnaireResponseItem[] | null {
+  // Process repeating group items separately
+  const hasMultipleAnswers = Array.isArray(qrItemOrItems);
+  if (hasMultipleAnswers) {
+    return removeInternalRepeatIdsFromRepeatGroup(qItem, qrItemOrItems);
+  }
+
+  // At this point qrItemOrItems is a single QuestionnaireResponseItem
+  const qrItem = qrItemOrItems;
+
+  // Process items with child items
+  const childQItems = qItem.item ?? [];
+  const childQrItems = qrItem?.item ?? [];
+  const updatedChildQrItems: QuestionnaireResponseItem[] = [];
+  if (childQItems.length > 0) {
+    const indexMap = mapQItemsIndex(qItem);
+    const qrItemsByIndex = getQrItemsIndex(childQItems, childQrItems, indexMap);
+
+    // Iterate child items
+    for (const [index, childQItem] of childQItems.entries()) {
+      const childQRItemOrItems = qrItemsByIndex[index];
+
+      const updatedChildQRItemOrItems = removeInternalRepeatIdsRecursive(
+        childQItem,
+        childQRItemOrItems ?? null
+      );
+
+      if (Array.isArray(updatedChildQRItemOrItems)) {
+        if (updatedChildQRItemOrItems.length > 0) {
+          updatedChildQrItems.push(...updatedChildQRItemOrItems);
+        }
+        continue;
+      }
+
+      if (updatedChildQRItemOrItems) {
+        updatedChildQrItems.push(updatedChildQRItemOrItems);
+      }
+    }
+  }
+
+  // Construct updated qrItem
+  return removeInternalRepeatIdsFromItem(qItem, qrItem, updatedChildQrItems);
+}
+
+function removeInternalRepeatIdsFromRepeatGroup(
+  qItem: QuestionnaireItem,
+  qrItems: QuestionnaireResponseItem[]
+) {
+  if (!qItem.item) {
+    return [];
+  }
+
+  return qrItems
+    .flatMap((childQrItem) => removeInternalRepeatIdsRecursive(qItem, childQrItem))
+    .filter((childQRItem): childQRItem is QuestionnaireResponseItem => !!childQRItem);
+}
+
+function removeInternalRepeatIdsFromItem(
+  qItem: QuestionnaireItem,
+  qrItem: QuestionnaireResponseItem | null,
+  childQrItems: QuestionnaireResponseItem[]
+): QuestionnaireResponseItem | null {
+  if (!qrItem) {
+    return null;
+  }
+
+  // Remove internal repeatId from all answers
+  const updatedAnswers: QuestionnaireResponseItemAnswer[] =
+    qrItem.answer
+      ?.map(
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        ({ id, ...rest }) => {
+          return {
+            ...rest
+          };
+        }
+      )
+      .filter((answer) => !!answer && Object.keys(answer).length > 0) ?? [];
+
+  return {
+    linkId: qItem.linkId,
+    ...(qItem.text && { text: qItem.text }),
+    ...(childQrItems.length > 0 && { item: childQrItems }),
+    ...(updatedAnswers.length > 0 && { answer: updatedAnswers })
+  };
+}