Merge pull request #593 from aehrc/fix/renderer-issues

Fix/renderer issues

apps/smart-forms-app/.env.production

@@ -2,7 +2,7 @@ VITE_ONTOSERVER_URL=https://r4.ontoserver.csiro.au/fhir
 VITE_FORMS_SERVER_URL=https://smartforms.csiro.au/api/fhir
 
 VITE_LAUNCH_SCOPE=fhirUser online_access openid profile patient/Condition.rs patient/Observation.rs launch patient/Encounter.rs patient/QuestionnaireResponse.cruds patient/Patient.rs
-VITE_LAUNCH_CLIENT_ID=csiro-smart-forms
+VITE_LAUNCH_CLIENT_ID=9cbba311-bf9b-4200-8dd3-8459046fc522
 
 VITE_IN_APP_POPULATE=true
 

apps/smart-forms-app/src/api/saveQr.ts

@@ -137,17 +137,15 @@ function addQuestionnaireReference(
   questionnaireResponseToSave: QuestionnaireResponse,
   endpointUrl: string
 ): QuestionnaireResponse {
-  let questionnaireReference: string;
   if (endpointUrl.includes('https://launch.smarthealthit.org/v/r4/fhir')) {
-    // Plugging questionnaire.id in because SMART Health IT has these weird requirements for canonicals
-    questionnaireReference = questionnaire.id ? `Questionnaire/${questionnaire.id}` : '';
-  } else {
-    questionnaireReference = questionnaire.url ?? '';
+    // Plugging questionnaire.id in because SMART Health IT requires QRs to have Questionnaire/{id} as reference
+    questionnaireResponseToSave.questionnaire = questionnaire.id
+      ? `Questionnaire/${questionnaire.id}`
+      : '';
   }
 
   // Add questionnaire reference if it is not an empty string
-  if (questionnaireReference) {
-    questionnaireResponseToSave.questionnaire = questionnaireReference;
+  if (questionnaireResponseToSave.questionnaire) {
     questionnaireResponseToSave._questionnaire = {
       extension: [
         {

apps/smart-forms-app/src/features/prepopulate/hooks/usePopulate.tsx

@@ -90,8 +90,8 @@ function usePopulate(spinner: RendererSpinner, onStopSpinner: () => void): void
       onStopSpinner();
       if (hasWarnings) {
         enqueueSnackbar(
-          'Form partially populated, there might be issues while populating the form. View console for details.',
-          { action: <CloseSnackbar />, variant: 'warning' }
+          'Form partially populated, there might be pre-population issues. View console for details.',
+          { action: <CloseSnackbar /> }
         );
         return;
       }

apps/smart-forms-app/src/features/renderer/components/RendererActions/RepopulateAction.tsx

@@ -99,7 +99,7 @@ function RepopulateAction(props: RepopulateActionProps) {
       if (hasWarnings) {
         enqueueSnackbar(
           'There might be issues while retrieving the latest information, data is partially retrieved. View console for details.',
-          { action: <CloseSnackbar />, variant: 'warning' }
+          { action: <CloseSnackbar /> }
         );
         return;
       }

packages/smart-forms-renderer/README.md

@@ -28,7 +28,7 @@ export default function App () {
   )
 }
 ```
-Note: The SmartFormsRenderer component is extremely basic and experimental, do not use it in production!
+Note: The SmartFormsRenderer component trades customisability for simplicity. If you need more control over the rendering engine, refer to the Advanced Usage section.
 
 
 ### SmartFormsRenderer Props 

packages/smart-forms-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {

packages/smart-forms-renderer/src/components/Tabs/FormBodyTabListWrapper.tsx

@@ -45,14 +45,20 @@ const FormBodyTabListWrapper = memo(function FormBodyTabListWrapper(
   return (
     <Card sx={{ p: 0.75, mb: 2 }}>
       <Box sx={{ flexGrow: 1 }}>
-        <PrimarySelectableList dense disablePadding sx={{ mb: 1 }} data-test="renderer-tab-list">
+        <PrimarySelectableList
+          dense
+          disablePadding
+          sx={{ mb: 0.5, mt: completedDisplayItemExists ? 0 : 0.5 }}
+          data-test="renderer-tab-list">
           {completedDisplayItemExists ? (
-            <ShowCompletedTabsSection
-              completedTabsExpanded={completedTabsExpanded}
-              setCompletedTabsExpanded={setCompletedTabsExpanded}
-            />
+            <>
+              <ShowCompletedTabsSection
+                completedTabsExpanded={completedTabsExpanded}
+                setCompletedTabsExpanded={setCompletedTabsExpanded}
+              />
+              <Divider sx={{ mx: 1 }} light />
+            </>
           ) : null}
-          <Divider sx={{ mx: 1 }} light />
           <FormBodyTabList
             topLevelItems={topLevelItems}
             currentTabIndex={currentTabIndex}

packages/smart-forms-renderer/src/hooks/useInitialiseRenderer.ts

@@ -17,7 +17,7 @@
 
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import { useLayoutEffect, useState } from 'react';
-import { createEmptyQuestionnaireResponse } from '../utils/qrItem';
+import { initialiseQuestionnaireResponse } from '../utils/qrItem';
 import type Client from 'fhirclient/lib/Client';
 import { readEncounter, readPatient, readUser } from '../api/smartClient';
 import {
@@ -79,7 +79,7 @@ function useInitialiseRenderer(
       additionalVariables,
       terminologyServerUrl
     ).then(() => {
-      buildSourceResponse(createEmptyQuestionnaireResponse(questionnaire));
+      buildSourceResponse(initialiseQuestionnaireResponse(questionnaire));
 
       if (questionnaireResponse) {
         const updatedResponse = updatePopulatedProperties(questionnaireResponse);

packages/smart-forms-renderer/src/index.ts

@@ -1,6 +1,6 @@
 import { questionnaireResponseStore, questionnaireStore } from './stores';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
-import { createEmptyQuestionnaireResponse } from './utils/qrItem';
+import { initialiseQuestionnaireResponse } from './utils/qrItem';
 import { removeHiddenAnswers } from './utils/removeHidden';
 import type { ItemToRepopulate } from './utils/repopulateItems';
 import { getItemsToRepopulate } from './utils/repopulateItems';
@@ -25,13 +25,16 @@ export async function buildForm(
   await questionnaireStore.getState().buildSourceQuestionnaire(questionnaire);
 
   if (!questionnaireResponse) {
-    questionnaireResponseStore
-      .getState()
-      .buildSourceResponse(createEmptyQuestionnaireResponse(questionnaire));
+    const initialisedQuestionnaireResponse = initialiseQuestionnaireResponse(questionnaire);
+    questionnaireResponseStore.getState().buildSourceResponse(initialisedQuestionnaireResponse);
     return;
   }
 
-  questionnaireResponseStore.getState().buildSourceResponse(questionnaireResponse);
+  const initialisedQuestionnaireResponse = initialiseQuestionnaireResponse(
+    questionnaire,
+    questionnaireResponse
+  );
+  questionnaireResponseStore.getState().buildSourceResponse(initialisedQuestionnaireResponse);
   questionnaireStore.getState().updatePopulatedProperties(questionnaireResponse);
 }
 

packages/smart-forms-renderer/src/utils/qrItem.ts

@@ -25,20 +25,28 @@ import type {
 import type { QrRepeatGroup } from '../interfaces/repeatGroup.interface';
 
 /**
- * Create an empty questionnaireResponse from a given questionnaire
+ * Initialise a conformant questionnaireResponse from a given questionnaire
+ * optionally takes in an existing questionnaireResponse to be initialised
  *
  * @author Sean Fong
  */
-export function createEmptyQuestionnaireResponse(
-  questionnaire: Questionnaire
-): QuestionnaireResponse {
-  const questionnaireResponse: QuestionnaireResponse = {
-    resourceType: 'QuestionnaireResponse',
-    status: 'in-progress'
-  };
-  const firstTopLevelItem = questionnaire?.item?.[0];
+export function initialiseQuestionnaireResponse(
+  questionnaire: Questionnaire,
+  questionnaireResponse?: QuestionnaireResponse
+) {
+  if (!questionnaireResponse) {
+    questionnaireResponse = {
+      resourceType: 'QuestionnaireResponse',
+      status: 'in-progress'
+    };
+  }
+
+  if (!questionnaireResponse.status) {
+    questionnaireResponse.status = 'in-progress';
+  }
 
-  if (firstTopLevelItem) {
+  const firstTopLevelItem = questionnaire?.item?.[0];
+  if (firstTopLevelItem && !questionnaireResponse.item) {
     questionnaireResponse.item = [
       {
         linkId: firstTopLevelItem.linkId,
@@ -48,13 +56,31 @@ export function createEmptyQuestionnaireResponse(
     ];
   }
 
-  if (questionnaire.id) {
-    questionnaireResponse.questionnaire = `Questionnaire/${questionnaire.id}`;
+  if (!questionnaireResponse.questionnaire) {
+    questionnaireResponse.questionnaire = setQuestionnaireReference(questionnaire);
   }
 
   return questionnaireResponse;
 }
 
+export function setQuestionnaireReference(questionnaire: Questionnaire) {
+  // Use {url}|{version} - the ideal way
+  if (questionnaire.url) {
+    let questionnaireReference = questionnaire.url;
+    if (questionnaire.version) {
+      questionnaireReference += '|' + questionnaire.version;
+    }
+    return questionnaireReference;
+  }
+
+  // If no url exists, use Questionnaire/{id}
+  if (questionnaire.id) {
+    return `Questionnaire/${questionnaire.id}`;
+  }
+
+  return '';
+}
+
 /**
  * Remove items with no answers from a given questionnaireResponse
  * Also remove any starting or trailing whitespace from valueStrings