@aehrc/smart-forms-renderer 0.39.0 → 0.40.1

package/src/components/Renderer/FormTopLevelItem.tsx

@@ -34,8 +34,10 @@ import useHidden from '../../hooks/useHidden';
 import GroupItemSwitcher from '../FormComponents/GroupItem/GroupItemSwitcher';
 import useReadOnly from '../../hooks/useReadOnly';
 import Box from '@mui/material/Box';
-import { isSpecificItemControl } from '../../utils';
+import { isRepeatItemAndNotCheckbox, isSpecificItemControl } from '../../utils';
 import GroupTable from '../FormComponents/Tables/GroupTable';
+import RepeatItem from '../FormComponents/RepeatItem/RepeatItem';
+import GridGroup from '../FormComponents/GridGroup/GridGroup';
 
 interface FormTopLevelItemProps
   extends PropsWithQrItemChangeHandler,
@@ -127,6 +129,20 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
 
   // If form is untabbed, it is rendered as a regular group
   if (itemIsGroup) {
+    // Item is 'grid'
+    const itemIsGrid = isSpecificItemControl(topLevelQItem, 'grid');
+    if (itemIsGrid) {
+      return (
+        <GridGroup
+          qItem={topLevelQItem}
+          qrItem={topLevelQRItem}
+          groupCardElevation={1}
+          parentIsReadOnly={parentIsReadOnly}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    }
+
     // GroupTable "gtable" can be rendered with either repeats:true or false
     if (isSpecificItemControl(topLevelQItem, 'gtable')) {
       return (
@@ -156,6 +172,20 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
   }
 
   // Otherwise, it is rendered as a non-group item
+  const itemRepeatsAndIsNotCheckbox = isRepeatItemAndNotCheckbox(topLevelQItem);
+  if (itemRepeatsAndIsNotCheckbox) {
+    return (
+      <RepeatItem
+        key={topLevelQItem.linkId}
+        qItem={topLevelQItem}
+        qrItem={topLevelQRItem}
+        groupCardElevation={1}
+        parentIsReadOnly={readOnly}
+        onQrItemChange={onQrItemChange}
+      />
+    );
+  }
+
   return (
     <Box mt={1}>
       <SingleItem

package/src/hooks/useDateValidation.tsx

@@ -55,8 +55,8 @@ function useDateValidation(input: string, parseFail: boolean = false): string |
 
     const matches = input.split('/');
 
-    if (validateTwoMatches(matches[0], matches[1])) {
-      return null;
+    if (!validateTwoMatches(matches[0], matches[1])) {
+      return 'Input is an invalid date.';
     }
 
     return null;

package/src/hooks/useGroupTableRows.ts

@@ -19,8 +19,8 @@ import { useState } from 'react';
 import useInitialiseGroupTable from './useInitialiseGroupTable';
 import type { QuestionnaireResponseItem } from 'fhir/r4';
 
-function useGroupTableRows(qrItems: QuestionnaireResponseItem[]) {
-  const initialisedGroupTableRows = useInitialiseGroupTable(qrItems);
+function useGroupTableRows(linkId: string, qrItems: QuestionnaireResponseItem[]) {
+  const initialisedGroupTableRows = useInitialiseGroupTable(linkId, qrItems);
 
   const [tableRows, setTableRows] = useState(initialisedGroupTableRows);
   const [selectedIds, setSelectedIds] = useState<string[]>(

package/src/hooks/useInitialiseGroupTable.ts

@@ -16,21 +16,24 @@
  */
 
 import type { QuestionnaireResponseItem } from 'fhir/r4';
-import { nanoid } from 'nanoid';
 import type { GroupTableRowModel } from '../interfaces/groupTable.interface';
+import { generateExistingRepeatId, generateNewRepeatId } from '../utils/repeatId';
 
-function useInitialiseGroupTable(qrItems: QuestionnaireResponseItem[]): GroupTableRowModel[] {
+function useInitialiseGroupTable(
+  linkId: string,
+  qrItems: QuestionnaireResponseItem[]
+): GroupTableRowModel[] {
   let initialGroupTableRows: GroupTableRowModel[] = [
     {
-      nanoId: nanoid(),
+      nanoId: generateNewRepeatId(linkId),
       qrItem: null
     }
   ];
 
   if (qrItems.length > 0) {
-    initialGroupTableRows = qrItems.map((qrItem) => {
+    initialGroupTableRows = qrItems.map((qrItem, index) => {
       return {
-        nanoId: nanoid(),
+        nanoId: generateExistingRepeatId(linkId, index),
         qrItem
       };
     });

package/src/hooks/useInitialiseRepeatAnswers.ts

@@ -16,26 +16,23 @@
  */
 
 import type { QuestionnaireResponseItem, QuestionnaireResponseItemAnswer } from 'fhir/r4';
-import { nanoid } from 'nanoid';
 import { useMemo } from 'react';
+import { generateExistingRepeatId, generateNewRepeatId } from '../utils/repeatId';
 
 function useInitialiseRepeatAnswers(
+  linkId: string,
   qrItem: QuestionnaireResponseItem | null
 ): (QuestionnaireResponseItemAnswer | null)[] {
   return useMemo(() => {
-    let initialRepeatAnswers: (QuestionnaireResponseItemAnswer | null)[] = [{ id: nanoid() }];
-
-    if (qrItem?.answer) {
-      initialRepeatAnswers = qrItem.answer.map((answer) => {
-        if (!answer.id) {
-          answer.id = nanoid();
-        }
-        return answer;
-      });
+    if (!qrItem?.answer) {
+      return [{ id: generateNewRepeatId(linkId) }];
     }
 
-    return initialRepeatAnswers;
-  }, [qrItem]);
+    return qrItem.answer.map((answer, index) => ({
+      ...answer,
+      id: answer.id ?? generateExistingRepeatId(linkId, index)
+    }));
+  }, [linkId, qrItem]);
 }
 
 export default useInitialiseRepeatAnswers;

package/src/hooks/useInitialiseRepeatGroups.ts

@@ -16,9 +16,9 @@
  */
 
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { nanoid } from 'nanoid';
 import type { RepeatGroupSingle } from '../interfaces/repeatGroup.interface';
 import { useMemo } from 'react';
+import { generateExistingRepeatId, generateNewRepeatId } from '../utils/repeatId';
 
 function useInitialiseRepeatGroups(
   qItem: QuestionnaireItem,
@@ -28,15 +28,15 @@ function useInitialiseRepeatGroups(
     () => {
       let initialRepeatGroupAnswers: RepeatGroupSingle[] = [
         {
-          nanoId: nanoid(),
+          nanoId: generateNewRepeatId(qItem.linkId),
           qrItem: null
         }
       ];
 
       if (qrItems.length > 0) {
-        initialRepeatGroupAnswers = qrItems.map((qrItem) => {
+        initialRepeatGroupAnswers = qrItems.map((qrItem, index) => {
           return {
-            nanoId: nanoid(),
+            nanoId: generateExistingRepeatId(qItem.linkId, index),
             qrItem
           };
         });

package/src/index.ts

@@ -46,7 +46,8 @@ export {
   isRepeatItemAndNotCheckbox,
   initialiseQuestionnaireResponse,
   generateItemsToRepopulate,
-  repopulateResponse
+  repopulateResponse,
+  extractObservationBased
 } from './utils';
 
 // theme provider exports

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

@@ -0,0 +1,161 @@
+/*
+ * 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 { Questionnaire } from 'fhir/r4';
+
+export const qMyPatient: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'canshare-myPatient1',
+  meta: {
+    versionId: '9',
+    lastUpdated: '2024-09-18T07:23:35.7317908+00:00'
+  },
+  extension: [
+    {
+      extension: [
+        {
+          url: 'name',
+          valueId: 'LaunchPatient'
+        },
+        {
+          url: 'type',
+          valueCode: 'Patient'
+        },
+        {
+          url: 'description',
+          valueString: 'The patient that is to be used to pre-populate the form'
+        }
+      ],
+      url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-launchContext'
+    },
+    {
+      extension: [
+        {
+          url: 'name',
+          valueId: 'LaunchPractitioner'
+        },
+        {
+          url: 'type',
+          valueCode: 'Practitioner'
+        },
+        {
+          url: 'description',
+          valueString: 'The practitioner that is to be used to pre-populate the form'
+        }
+      ],
+      url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-launchContext'
+    },
+    {
+      url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-itemExtractionContext',
+      valueCode: 'Patient'
+    }
+  ],
+  url: 'http://canshare.co.nz/questionnaire/myPatient1',
+  name: 'myPatient1',
+  status: 'active',
+  publisher: 'DEMO: David Hay',
+  useContext: [
+    {
+      code: {
+        system: 'http://terminology.hl7.org/CodeSystem/usage-context-type',
+        code: 'user',
+        display: 'User Type'
+      },
+      valueCodeableConcept: {
+        coding: [
+          {
+            code: 'extract',
+            display: 'Demo Extract'
+          }
+        ]
+      }
+    }
+  ],
+  item: [
+    {
+      linkId: 'myPatient1',
+      text: 'myPatient1',
+      type: 'group',
+      item: [
+        {
+          linkId: 'myPatient1.name',
+          definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.name',
+          text: 'name *',
+          type: 'group',
+          repeats: true,
+          item: [
+            {
+              linkId: 'myPatient1.name.first',
+              definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.name.given',
+              text: 'firstName *',
+              type: 'string',
+              repeats: true
+            },
+            {
+              linkId: 'myPatient1.name.lastName',
+              definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.name.family',
+              text: 'lastName',
+              type: 'string'
+            }
+          ]
+        },
+        {
+          linkId: 'myPatient1.hair',
+          definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.extension',
+          text: 'hair',
+          type: 'group',
+          item: [
+            {
+              linkId: 'myPatient1.hair.colour',
+              definition:
+                'http://hl7.org/fhir/StructureDefinition/Patient#Patient.extension.valueString',
+              text: 'colour',
+              type: 'string'
+            },
+            {
+              linkId: 'myPatient1.hair.url',
+              definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.extension.url',
+              text: 'url',
+              type: 'string'
+            }
+          ]
+        },
+        {
+          linkId: 'myPatient1.religion',
+          definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.extension',
+          text: 'religion',
+          type: 'group',
+          item: [
+            {
+              linkId: 'myPatient1.religion.brand',
+              definition:
+                'http://hl7.org/fhir/StructureDefinition/Patient#Patient.extension.valueString',
+              text: 'brand',
+              type: 'string'
+            },
+            {
+              linkId: 'myPatient1.religion.url1',
+              definition: 'http://hl7.org/fhir/StructureDefinition/Patient#Patient.extension.url',
+              text: 'url',
+              type: 'string'
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};

package/src/stories/storybookWrappers/IdRemoverButtonForStorybook.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+
+// @ts-ignore
+import React from 'react';
+import type { QuestionnaireResponse } from 'fhir/r4';
+import { Box, IconButton, Tooltip } from '@mui/material';
+import ContentCutIcon from '@mui/icons-material/ContentCut';
+
+interface IdRemoverButtonProps {
+  questionnaireResponse: QuestionnaireResponse;
+}
+
+function IdRemoverButtonForStorybook(props: IdRemoverButtonProps) {
+  const { questionnaireResponse } = props;
+
+  async function handleRemoveIds() {
+    console.log('handle remove IDs');
+
+    // return buildForm()
+    // updateQuestionnaireResponse(
+    //   questionnaire,
+    //   populatedResponse,
+    //   initialiseItemCalculatedExpressionValueRecursive,
+    //   calculatedExpressionsWithValues
+    // );
+  }
+
+  return (
+    <Box display="flex" mb={0.5} alignItems="center" columnGap={3}>
+      <Tooltip title="Remove IDs from questionnaire response" placement="right">
+        <IconButton onClick={handleRemoveIds} size="small" color="primary">
+          <ContentCutIcon />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  );
+}
+
+export default IdRemoverButtonForStorybook;

package/src/stories/storybookWrappers/IdRemoverDebuggerWrapperForStorybook.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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.
+ */
+
+// @ts-ignore
+import React from 'react';
+import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
+import { BaseRenderer } from '../../components';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { RendererThemeProvider } from '../../theme';
+import { useBuildForm, useRendererQueryClient } from '../../hooks';
+import { STORYBOOK_TERMINOLOGY_SERVER_URL } from './globals';
+import IdRemoverButtonForStorybook from './IdRemoverButtonForStorybook';
+import { Grid } from '@mui/material';
+import { useQuestionnaireResponseStore, useQuestionnaireStore } from '../../stores';
+
+interface IdRemoverDebuggerWrapperForStorybookProps {
+  questionnaire: Questionnaire;
+  questionnaireResponse?: QuestionnaireResponse;
+}
+
+/**
+ * This is a wrapper which for debugging answer/item IDs in repeating items and groups.
+ * It features a button to remove answer/item IDs from the QuestionnaireResponse.
+ *
+ * @author Sean Fong
+ */
+function IdRemoverDebuggerWrapperForStorybook(props: IdRemoverDebuggerWrapperForStorybookProps) {
+  const { questionnaire, questionnaireResponse } = props;
+
+  const queryClient = useRendererQueryClient();
+
+  const focusedLinkId = useQuestionnaireStore.use.focusedLinkId();
+  const updatableResponse = useQuestionnaireResponseStore.use.updatableResponse();
+
+  const isBuilding = useBuildForm(
+    questionnaire,
+    undefined,
+    undefined,
+    STORYBOOK_TERMINOLOGY_SERVER_URL
+  );
+
+  if (isBuilding) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <RendererThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <div>
+          <Grid container>
+            <Grid item xs={6}>
+              <IdRemoverButtonForStorybook questionnaireResponse={questionnaireResponse} />
+              <BaseRenderer />
+            </Grid>
+            <Grid item xs={6}>
+              <pre>{JSON.stringify(focusedLinkId, null, 2)}</pre>
+              ----
+              <pre style={{ fontSize: 10 }}>{JSON.stringify(updatableResponse, null, 2)}</pre>
+            </Grid>
+          </Grid>
+        </div>
+      </QueryClientProvider>
+    </RendererThemeProvider>
+  );
+}
+
+export default IdRemoverDebuggerWrapperForStorybook;

package/src/stories/testing/IdRemoverDebuggerWrapper.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 { Meta, StoryObj } from '@storybook/react';
+import IdRemoverDebuggerWrapperForStorybook from '../storybookWrappers/IdRemoverDebuggerWrapperForStorybook';
+import { qMyPatient } from '../assets/questionnaires/QIdRemoverDebugger';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Component/Testing/ID Remover Debugger',
+  component: IdRemoverDebuggerWrapperForStorybook,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: []
+} satisfies Meta<typeof IdRemoverDebuggerWrapperForStorybook>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+export const MyPatient: Story = {
+  args: {
+    questionnaire: qMyPatient
+  }
+};

package/src/tests/extractObservation.test.ts

@@ -0,0 +1,129 @@
+import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
+
+import type { Extractable } from '../utils/extractObservation';
+import { extractObservationBased, mapQItemsExtractable } from '../utils/extractObservation';
+import {
+  observationResults,
+  qExtractSample,
+  qObservationSample,
+  qObservationSampleWithExtractExtension,
+  qrObservationSample
+} from './test-data/observationSample';
+
+describe('extractObservationBased', () => {
+  it('should correctly extract Observations from a QuestionnaireResponse', () => {
+    const observations = extractObservationBased(
+      qObservationSampleWithExtractExtension,
+      qrObservationSample
+    );
+    expect(observations).toHaveLength(4);
+    expect(observations[0]).toEqual(observationResults[0]);
+  });
+
+  it('should return an Observations array only if there are observation-extract extensions', () => {
+    const singleExtractExtension: Questionnaire = JSON.parse(
+      JSON.stringify(qObservationSampleWithExtractExtension)
+    );
+    singleExtractExtension.item!.at(0)!.extension!.at(0)!.valueBoolean = false;
+
+    const observations = extractObservationBased(singleExtractExtension, qrObservationSample);
+    expect(observations).toHaveLength(2);
+    expect(observations[0].id).toContain('phq2-4');
+  });
+
+  it('should return all Observations expect for observation-extract extensions false', () => {
+    const topLevelExtract: Questionnaire = JSON.parse(
+      JSON.stringify(qObservationSampleWithExtractExtension)
+    );
+    topLevelExtract.extension!.at(0)!.valueBoolean = true;
+
+    const observations = extractObservationBased(topLevelExtract, qrObservationSample);
+    expect(observations).toHaveLength(6);
+  });
+
+  it('should return an empty array if there are no observation-extract extensions', () => {
+    const observations = extractObservationBased(qObservationSample, qrObservationSample);
+    expect(observations).toHaveLength(0);
+  });
+
+  it('should return an empty array if there are no items in the Questionnaire or QuestionnaireResponse', () => {
+    const emptyQuestionnaire: Questionnaire = {
+      resourceType: 'Questionnaire',
+      item: [],
+      status: 'draft'
+    };
+    const emptyResponse: QuestionnaireResponse = {
+      resourceType: 'QuestionnaireResponse',
+      item: [],
+      status: 'completed'
+    };
+
+    const observations = extractObservationBased(emptyQuestionnaire, emptyResponse);
+    expect(observations).toHaveLength(0);
+  });
+
+  it('should return an empty array if no matching Questionnaire item is found for a QuestionnaireResponse item', () => {
+    const responseWithNoMatch: QuestionnaireResponse = {
+      resourceType: 'QuestionnaireResponse',
+      status: 'completed',
+      id: 'qr2',
+      item: [
+        {
+          linkId: '999', // No matching linkId in the questionnaire
+          answer: [
+            {
+              valueQuantity: {
+                value: 100,
+                unit: 'kg',
+                system: 'http://unitsofmeasure.org',
+                code: 'kg'
+              }
+            }
+          ]
+        }
+      ],
+      subject: {
+        reference: 'Patient/456'
+      }
+    };
+
+    const observations = extractObservationBased(qObservationSample, responseWithNoMatch);
+    expect(observations).toHaveLength(0);
+  });
+});
+
+describe('mapQItemsExtractable', () => {
+  it('should correctly return extractionMap from a Questionnaire', () => {
+    const extractionMap = mapQItemsExtractable(qExtractSample);
+    expect(extractionMap).toEqual({
+      'phq-2-questionnaire': { extractable: false, extractCategories: [] },
+      'phq2-1': { extractable: true, extractCategories: [] },
+      'phq2-2': { extractable: false, extractCategories: [] },
+      'phq2-3': { extractable: false, extractCategories: [] },
+      'phq2-4': { extractable: true, extractCategories: [] },
+      'phq2-5': { extractable: true, extractCategories: [] },
+      'phq2-6': { extractable: false, extractCategories: [] },
+      'phq2-7': { extractable: false, extractCategories: [] },
+      'phq2-8': { extractable: true, extractCategories: [] }
+    } satisfies Record<string, Extractable>);
+  });
+
+  it('should correctly return extractionMap even with topLevel observation-extract extensions true', () => {
+    const topLevelExtract: Questionnaire = JSON.parse(JSON.stringify(qExtractSample));
+    topLevelExtract.extension!.at(0)!.valueBoolean = true;
+
+    const extractionMap = mapQItemsExtractable(topLevelExtract);
+
+    expect(extractionMap).toEqual({
+      'phq-2-questionnaire': { extractable: true, extractCategories: [] },
+      'phq2-1': { extractable: true, extractCategories: [] },
+      'phq2-2': { extractable: false, extractCategories: [] },
+      'phq2-3': { extractable: true, extractCategories: [] },
+      'phq2-4': { extractable: true, extractCategories: [] },
+      'phq2-5': { extractable: true, extractCategories: [] },
+      'phq2-6': { extractable: false, extractCategories: [] },
+      'phq2-7': { extractable: true, extractCategories: [] },
+      'phq2-8': { extractable: true, extractCategories: [] }
+    } satisfies Record<string, Extractable>);
+  });
+});