@aehrc/smart-forms-renderer 0.13.1 → 0.14.0

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerValueSetField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
-import { StandardTextField } from '../Textfield.styles';
+import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
 import Typography from '@mui/material/Typography';
 import type {
   PropsWithIsTabledAttribute,
@@ -8,6 +8,7 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 
 interface OpenChoiceSelectAnswerValueSetFieldProps
   extends PropsWithIsTabledAttribute,
@@ -15,13 +16,14 @@ interface OpenChoiceSelectAnswerValueSetFieldProps
   qItem: QuestionnaireItem;
   options: Coding[];
   valueSelect: Coding | null;
-  serverError: Error | null;
+  terminologyError: TerminologyError;
   readOnly: boolean;
   onValueChange: (newValue: Coding | string | null) => void;
 }
 
 function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueSetFieldProps) {
-  const { qItem, options, valueSelect, serverError, readOnly, isTabled, onValueChange } = props;
+  const { qItem, options, valueSelect, terminologyError, readOnly, isTabled, onValueChange } =
+    props;
 
   const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
@@ -36,7 +38,7 @@ function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueS
         onInputChange={(_, newValue) => onValueChange(newValue)}
         freeSolo
         autoHighlight
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
         disabled={readOnly}
         size="small"
         renderInput={(params) => (
@@ -57,9 +59,10 @@ function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueS
           />
         )}
       />
-      {serverError ? (
+      {terminologyError.error ? (
         <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server.
+          There was an error fetching options from the terminology server for{' '}
+          {terminologyError.answerValueSet}
         </Typography>
       ) : null}
     </>

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerValueSetItem.tsx

@@ -20,7 +20,6 @@ import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
@@ -44,7 +43,6 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Init input value
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
@@ -54,7 +52,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
   }
 
   // Get codings/options from valueSet
-  const { codings, serverError } = useValueSetCodings(qItem);
+  const { codings, terminologyError } = useValueSetCodings(qItem);
 
   // Event handlers
   function handleValueChange(newValue: Coding | string | null) {
@@ -81,7 +79,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
         qItem={qItem}
         options={codings}
         valueSelect={valueSelect}
-        serverError={serverError}
+        terminologyError={terminologyError}
         isTabled={isTabled}
         readOnly={readOnly}
         onValueChange={handleValueChange}
@@ -91,16 +89,12 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
 
   return (
     <FullWidthFormComponentBox>
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceSelectAnswerValueSetField
           qItem={qItem}
           options={codings}
           valueSelect={valueSelect}
-          serverError={serverError}
+          terminologyError={terminologyError}
           isTabled={isTabled}
           readOnly={readOnly}
           onValueChange={handleValueChange}

package/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -23,7 +23,6 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { nanoid } from 'nanoid';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import AddItemButton from './AddItemButton';
@@ -46,7 +45,6 @@ function RepeatItem(props: RepeatItemProps) {
   const { qItem, qrItem, showMinimalView, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   const initialRepeatAnswers = useInitialiseRepeatAnswers(qItem, qrItem);
 
@@ -119,11 +117,7 @@ function RepeatItem(props: RepeatItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-repeat-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <TransitionGroup>
           {repeatAnswers.map(({ nanoId, answer }, index) => {
             const repeatAnswerQrItem = createEmptyQrItem(qItem);

package/src/components/FormComponents/SingleItem/SingleItemSwitcher.tsx

@@ -39,6 +39,7 @@ import CustomDateItem from '../CustomDateItem/CustomDateItem';
 import { isSpecificItemControl } from '../../../utils';
 import SliderItem from '../SliderItem/SliderItem';
 import IntegerItem from '../IntegerItem/IntegerItem';
+import AttachmentItem from '../AttachmentItem/AttachmentItem';
 
 interface SingleItemSwitcherProps
   extends PropsWithQrItemChangeHandler,
@@ -55,9 +56,11 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
     props;
 
   switch (qItem.type) {
-    case 'string':
+    case 'display':
+      return <DisplayItem qItem={qItem} />;
+    case 'boolean':
       return (
-        <StringItem
+        <BooleanItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -66,9 +69,9 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           onQrItemChange={onQrItemChange}
         />
       );
-    case 'boolean':
+    case 'decimal':
       return (
-        <BooleanItem
+        <DecimalItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -77,9 +80,22 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           onQrItemChange={onQrItemChange}
         />
       );
-    case 'time':
+    case 'integer':
+      if (isSpecificItemControl(qItem, 'slider')) {
+        return (
+          <SliderItem
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            parentIsReadOnly={parentIsReadOnly}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      }
+
       return (
-        <TimeItem
+        <IntegerItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -110,34 +126,20 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           onQrItemChange={onQrItemChange}
         />
       );
-    case 'text':
+    case 'time':
       return (
-        <TextItem
+        <TimeItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
+          isTabled={isTabled}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
-    case 'display':
-      return <DisplayItem qItem={qItem} />;
-    case 'integer':
-      if (isSpecificItemControl(qItem, 'slider')) {
-        return (
-          <SliderItem
-            qItem={qItem}
-            qrItem={qrItem}
-            isRepeated={isRepeated}
-            isTabled={isTabled}
-            parentIsReadOnly={parentIsReadOnly}
-            onQrItemChange={onQrItemChange}
-          />
-        );
-      }
-
+    case 'string':
       return (
-        <IntegerItem
+        <StringItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -146,9 +148,19 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           onQrItemChange={onQrItemChange}
         />
       );
-    case 'decimal':
+    case 'text':
       return (
-        <DecimalItem
+        <TextItem
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={isRepeated}
+          parentIsReadOnly={parentIsReadOnly}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    case 'url':
+      return (
+        <UrlItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -181,9 +193,33 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           onQrItemChange={onQrItemChange}
         />
       );
-    case 'url':
+    case 'attachment':
       return (
-        <UrlItem
+        <AttachmentItem
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={isRepeated}
+          isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    case 'reference':
+      // FIXME reference item uses the same component as string item currently
+      return (
+        <StringItem
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={isRepeated}
+          isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    case 'quantity':
+      // FIXME quantity item uses the same component as decimal item currently
+      return (
+        <DecimalItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -195,8 +231,8 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
     default:
       return (
         <Typography>
-          Item type not supported yet, or something has went wrong. If your questionnnaire is not a
-          FHIR R4 resource, there might be issues rendering it.
+          Item type <b>{qItem.type}</b> not supported yet, or something has went wrong. If your
+          questionnnaire is not a FHIR R4 resource, there might be issues rendering it.
         </Typography>
       );
   }

package/src/components/FormComponents/SliderItem/SliderField.tsx

@@ -22,6 +22,7 @@ import { getSliderMarks } from '../../../utils/slider';
 import Stack from '@mui/material/Stack';
 import SliderLabels from './SliderLabels';
 import SliderDisplayValue from './SliderDisplayValue';
+import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
 
 interface SliderFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
@@ -54,7 +55,7 @@ function SliderField(props: SliderFieldProps) {
   const sliderMarks = getSliderMarks(minValue, maxValue, minLabel, maxLabel, stepValue);
 
   const sliderSx = {
-    maxWidth: !isTabled ? 280 : 3000,
+    maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000,
     minWidth: 160
   };
 

package/src/components/FormComponents/SliderItem/SliderItem.tsx

@@ -23,7 +23,6 @@ import type {
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
@@ -45,7 +44,6 @@ function SliderItem(props: SliderItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions, required } = useRenderingExtensions(qItem);
   const { minValue, maxValue, stepValue, minLabel, maxLabel } = useSliderExtensions(qItem);
 
   const isInteracted = !!qrItem?.answer;
@@ -91,11 +89,7 @@ function SliderItem(props: SliderItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-slider-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <Box px={4}>
           <SliderField
             linkId={qItem.linkId}

package/src/components/FormComponents/StringItem/StringItem.tsx

@@ -47,16 +47,8 @@ function StringItem(props: StringItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const {
-    displayUnit,
-    displayPrompt,
-    displayInstructions,
-    entryFormat,
-    required,
-    regexValidation,
-    minLength,
-    maxLength
-  } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat, regexValidation, minLength, maxLength } =
+    useRenderingExtensions(qItem);
 
   // Init input value
   let valueString = '';
@@ -115,11 +107,7 @@ function StringItem(props: StringItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-string-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <StringField
           linkId={qItem.linkId}
           input={input}

package/src/components/FormComponents/TextItem/TextItem.tsx

@@ -46,16 +46,8 @@ function TextItem(props: TextItemProps) {
   const { qItem, qrItem, isRepeated, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const {
-    displayUnit,
-    displayPrompt,
-    displayInstructions,
-    entryFormat,
-    required,
-    regexValidation,
-    minLength,
-    maxLength
-  } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat, regexValidation, minLength, maxLength } =
+    useRenderingExtensions(qItem);
 
   // Init input value
   let valueText = '';
@@ -113,11 +105,7 @@ function TextItem(props: TextItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-text-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <TextField
           linkId={qItem.linkId}
           input={input}

package/src/components/FormComponents/Textfield.styles.ts

@@ -18,12 +18,14 @@
 import { styled } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 
+export const TEXT_FIELD_WIDTH = 320;
+
 // Always use this accompanied by the TextField prop fullWidth
 export const StandardTextField = styled(TextField, {
   shouldForwardProp: (prop) => prop !== 'isTabled'
 })<{ isTabled: boolean }>(({ isTabled }) => ({
   // Set 280 as the standard width for a field
   // Set a theoretical infinite maxWidth if field is within a table to fill the table row
-  maxWidth: !isTabled ? 280 : 3000,
+  maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000,
   minWidth: 160
 }));

package/src/components/FormComponents/TimeItem/TimeField.tsx

@@ -20,6 +20,7 @@ import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps
 import type { Dayjs } from 'dayjs';
 import { LocalizationProvider, TimePicker as MuiTimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
 
 interface TimeFieldProps extends PropsWithIsTabledAttribute {
   value: Dayjs | null;
@@ -39,7 +40,7 @@ function TimeField(props: TimeFieldProps) {
         value={value}
         disabled={readOnly}
         label={displayPrompt}
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}
         slotProps={{
           textField: {
             fullWidth: true

package/src/components/FormComponents/TimeItem/TimeItem.tsx

@@ -45,8 +45,7 @@ function TimeItem(props: TimeItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayPrompt, displayInstructions, entryFormat, required } =
-    useRenderingExtensions(qItem);
+  const { displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
   // Init input value
   let timeString: string | null = null;
@@ -80,11 +79,7 @@ function TimeItem(props: TimeItemProps) {
 
   return (
     <FullWidthFormComponentBox>
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <TimeField
           value={timeDayJs}
           displayPrompt={displayPrompt}

package/src/components/FormComponents/UrlItem/UrlItem.tsx

@@ -45,16 +45,8 @@ function UrlItem(props: UrlItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const {
-    displayUnit,
-    displayPrompt,
-    displayInstructions,
-    entryFormat,
-    required,
-    regexValidation,
-    minLength,
-    maxLength
-  } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat, regexValidation, minLength, maxLength } =
+    useRenderingExtensions(qItem);
 
   // Init input value
   let valueUri = '';
@@ -102,11 +94,7 @@ function UrlItem(props: UrlItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-string-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <UrlField
           linkId={qItem.linkId}
           input={input}

package/src/hooks/UseFileDrop.ts

@@ -0,0 +1,53 @@
+/*
+ * 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 { ConnectDropTarget, DropTargetMonitor } from 'react-dnd';
+import { useDrop } from 'react-dnd';
+import { NativeTypes } from 'react-dnd-html5-backend';
+
+interface UseFileDrop {
+  canDrop: boolean;
+  isOver: boolean;
+  dropTarget: ConnectDropTarget;
+}
+
+function UseFileDrop(onDrop: (item: { files: any[] }) => void): UseFileDrop {
+  const [{ canDrop, isOver }, drop] = useDrop(
+    () => ({
+      accept: [NativeTypes.FILE],
+      drop(item: { files: any[] }) {
+        if (onDrop) {
+          onDrop(item);
+        }
+      },
+      canDrop() {
+        return true;
+      },
+      collect: (monitor: DropTargetMonitor) => {
+        return {
+          isOver: monitor.isOver(),
+          canDrop: monitor.canDrop()
+        };
+      }
+    }),
+    [onDrop]
+  );
+
+  return { canDrop, isOver, dropTarget: drop };
+}
+
+export default UseFileDrop;

package/src/{components/FormComponents/ItemParts/ItemExtensionLabels.tsx → hooks/useAttachmentUrlValidation.ts}

@@ -15,28 +15,13 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { ReadOnlyLabel, RequiredLabel } from '../../Box.styles';
-import Box from '@mui/material/Box';
-
-interface ItemExtensionLabelsProps {
-  required: boolean;
-  readOnly: boolean;
-}
-
-function ItemExtensionLabels(props: ItemExtensionLabelsProps) {
-  const { required, readOnly } = props;
-
-  if (!required && !readOnly) {
-    return null;
+function useAttachmentUrlValidation(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch (error) {
+    return false;
   }
-
-  return (
-    <Box display="flex" columnGap={0.5}>
-      {required ? <RequiredLabel>Required</RequiredLabel> : null}
-      {readOnly ? <ReadOnlyLabel>Read-only</ReadOnlyLabel> : null}
-    </Box>
-  );
 }
 
-export default ItemExtensionLabels;
+export default useAttachmentUrlValidation;

package/src/hooks/useRenderingExtensions.ts

@@ -17,6 +17,7 @@
 
 import {
   getRegexValidation,
+  getTextDisplayFlyover,
   getTextDisplayInstructions,
   getTextDisplayPrompt,
   getTextDisplayUnit
@@ -30,6 +31,7 @@ interface RenderingExtensions {
   displayUnit: string;
   displayPrompt: string;
   displayInstructions: string;
+  displayFlyover: string;
   readOnly: boolean;
   entryFormat: string;
   required: boolean;
@@ -44,6 +46,7 @@ function useRenderingExtensions(qItem: QuestionnaireItem): RenderingExtensions {
       displayUnit: getTextDisplayUnit(qItem),
       displayPrompt: getTextDisplayPrompt(qItem),
       displayInstructions: getTextDisplayInstructions(qItem),
+      displayFlyover: getTextDisplayFlyover(qItem),
       readOnly: !!qItem.readOnly,
       entryFormat: structuredDataCapture.getEntryFormat(qItem) ?? '',
       required: qItem.required ?? false,

package/src/hooks/useValueSetCodings.ts

@@ -28,7 +28,15 @@ import fhirpath from 'fhirpath';
 import fhirpath_r4_model from 'fhirpath/fhir-context/r4';
 import { useQuestionnaireStore, useSmartConfigStore, useTerminologyServerStore } from '../stores';
 
-function useValueSetCodings(qItem: QuestionnaireItem) {
+export interface TerminologyError {
+  error: Error | null;
+  answerValueSet: string;
+}
+
+function useValueSetCodings(qItem: QuestionnaireItem): {
+  codings: Coding[];
+  terminologyError: TerminologyError;
+} {
   const patient = useSmartConfigStore.use.patient();
   const user = useSmartConfigStore.use.user();
   const encounter = useSmartConfigStore.use.encounter();
@@ -145,7 +153,7 @@ function useValueSetCodings(qItem: QuestionnaireItem) {
     }
   }, [qItem]);
 
-  return { codings, serverError };
+  return { codings, terminologyError: { error: serverError, answerValueSet: valueSetUrl ?? '' } };
 }
 
 export default useValueSetCodings;