- Fixing Missing calculatedExpression animations Fixes aehrc#1643 (aehrc#1776)

* - Fixing Missing calculatedExpression animations Fixes aehrc#1643

Test with below Questionnaire

{
  "resourceType": "Questionnaire",
  "id": "AssemblyInstructions",
  "meta": {
    "profile": []
  },
  "extension": [
    {
      "url": "http://hl7.org/fhir/StructureDefinition/variable",
      "valueExpression": {
        "name": "heightValue",
        "language": "text/fhirpath",
        "expression": "%resource.descendants().where(linkId='heightValue').answer.valueDecimal"
      }
    },

    {
      "url": "http://hl7.org/fhir/StructureDefinition/variable",
      "valueExpression": {
        "name": "mxValueDisplay",
        "language": "text/fhirpath",
        "expression": "%resource.descendants().where(linkId='medical-history-condition1').answer.valueCoding.display"
      }
    },
        {
      "url": "http://hl7.org/fhir/StructureDefinition/variable",
      "valueExpression": {
        "name": "mxValue",
        "language": "text/fhirpath",
        "expression": "%resource.descendants().where(linkId='medical-history-condition1').answer.valueCoding"
      }
    },

    {
      "url": "http://hl7.org/fhir/StructureDefinition/variable",
      "valueExpression": {
        "name": "dob",
        "language": "text/fhirpath",
        "expression": "%resource.descendants().where(linkId='dob1').answer.value"
      }
    }
  ],
  "contained": [
    {
      "resourceType": "ValueSet",
      "id": "MedicalHistory",
      "url": "https://smartforms.csiro.au/ig/ValueSet/MedicalHistory",
      "name": "MedicalHistory",
      "title": "Medical History",
      "status": "draft",
      "experimental": false,
      "description": "The Medical History value set includes values that may be used to represent medical history, operations and hospital admissions.",
      "compose": {
        "include": [
          {
            "system": "http://snomed.info/sct",
            "filter": [
              {
                "property": "constraint",
                "op": "=",
                "value": "^32570581000036105|Problem/Diagnosis reference set| OR ^32570141000036105|Procedure foundation reference set|"
              }
            ]
          }
        ]
      }
    },
        {
      "resourceType": "ValueSet",
      "id": "MedicalHistory2",
      "url": "https://smartforms.csiro.au/ig/ValueSet/MedicalHistory",
      "name": "MedicalHistory",
      "title": "Medical History",
      "status": "draft",
      "experimental": false,
      "description": "The Medical History value set includes values that may be used to represent medical history, operations and hospital admissions.",
      "compose": {
        "include": [
          {
            "system": "http://snomed.info/sct",
            "filter": [
              {
                "property": "constraint",
                "op": "=",
                "value": "^32570581000036105|Problem/Diagnosis reference set| OR ^32570141000036105|Procedure foundation reference set|"
              }
            ]
          }
        ]
      }
    }
  ],
  "url": "http://www.health.gov.au/assessments/mbs/715",
  "version": "0.3.0-assembled",
  "name": "AboriginalTorresStraitIslanderHealthCheck",
  "title": "Aboriginal and Torres Strait Islander Health Check",
  "status": "draft",
  "experimental": false,
  "subjectType": [
    "Patient"
  ],
  "date": "2025-03-14",
  "publisher": "AEHRC CSIRO",
  "contact": [
    {
      "name": "AEHRC CSIRO",
      "telecom": [
        {
          "system": "url",
          "value": "https://confluence.csiro.au/display/PCDQFPhase2/Primary+Care+Data+Quality+Foundations+-+Phase+2"
        }
      ]
    }
  ],
  "jurisdiction": [
    {
      "coding": [
        {
          "system": "urn:iso:std:iso:3166",
          "code": "AU",
          "display": "Australia"
        }
      ]
    }
  ],
  "copyright": "Copyright © 2022+ Australian Government Department of Health and Aged Care - All rights reserved.\nThis content is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.\nSee https://creativecommons.org/licenses/by-sa/4.0/.\n",
  "item": [
    {
      "extension": [
        {
          "url": "http://hl7.org/fhir/StructureDefinition/entryFormat",
          "valueString": "Height"
        }
      ],
      "linkId": "heightValue",
      "text": "Height (Change Here)",
      "type": "decimal",
      "required": true,
      "item": [
        {
          "extension": [
            {
              "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
              "valueCodeableConcept": {
                "coding": [
                  {
                    "system": "http://hl7.org/fhir/questionnaire-item-control",
                    "code": "unit"
                  }
                ]
              }
            }
          ],
          "linkId": "bmi-height-unit1",
          "text": "m",
          "type": "display"
        }
      ]
    },
    {
      "extension": [
        {
          "url": "http://hl7.org/fhir/StructureDefinition/entryFormat",
          "valueString": "Height"
        },
        {
          "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-calculatedExpression",
          "valueExpression": {
            "language": "text/fhirpath",
            "expression": "iif(exists(%heightValue), %heightValue, 0.0)"
          }
        }
      ],
      "linkId": "bmi-height-decimal",
      "text": "Height Calc Expr Animation",
      "type": "decimal",
      "required": true,
      "item": [
        {
          "extension": [
            {
              "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
              "valueCodeableConcept": {
                "coding": [
                  {
                    "system": "http://hl7.org/fhir/questionnaire-item-control",
                    "code": "unit"
                  }
                ]
              }
            }
          ],
          "linkId": "bmi-height-unit",
          "text": "m",
          "type": "display"
        }
      ]
    },
    {
      "extension": [
        {
          "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
          "valueCodeableConcept": {
            "coding": [
              {
                "system": "http://hl7.org/fhir/questionnaire-item-control",
                "code": "autocomplete"
              }
            ]
          }
        }
      ],
      "linkId": "medical-history-condition1",
      "text": "Medical History Condition (Change Here)",
      "type": "open-choice",
      "answerValueSet": "#MedicalHistory"
    },
        {
      "extension": [
        {
          "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
          "valueCodeableConcept": {
            "coding": [
              {
                "system": "http://hl7.org/fhir/questionnaire-item-control",
                "code": "autocomplete"
              }
            ]
          }
        },
         {
              "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-calculatedExpression",
              "valueExpression": {
                "language": "text/fhirpath",
                "expression": "%resource.descendants().where(linkId='medical-history-condition1').answer.valueCoding"
              }
            }
      ],
      "linkId": "medical-history-condition2",
      "text": "Medical History Condition Open Choice CalcExp Animation",
      "type": "open-choice",
      "answerValueSet": "#MedicalHistory2"
    },
    {
      "extension": [
        {
          "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
          "valueCodeableConcept": {
            "coding": [
              {
                "system": "http://hl7.org/fhir/questionnaire-item-control",
                "code": "autocomplete"
              }
            ]
          }
        },
         {
              "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-calculatedExpression",
              "valueExpression": {
                "language": "text/fhirpath",
                "expression": "%mxValue"
              }
            }
      ],
      "linkId": "medical-history-condition3",
      "text": "Medical History Condition Choice CalcExp Animation",
      "type": "choice",
      "answerValueSet": "#MedicalHistory2"
    },
    {
          "extension": [
            {
              "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-calculatedExpression",
              "valueExpression": {
                "language": "text/fhirpath",
                "expression": "iif(%mxValue.exists(), %mxValue.code, {})"
              }
            }
          ],
          "linkId": "medical-health-condition-text",
          "text": "Medical History Condition Text",
          "type": "text"

      },

    {
      "linkId": "dob1",
      "type": "dateTime",
      "repeats": false,
      "text": "Datetime of birth change here"
    },

    {
      "extension": [
            {
              "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-calculatedExpression",
              "valueExpression": {
                "language": "text/fhirpath",
                "expression": "iif(%dob.exists(), %dob, {}        )"
              }
            }
          ],

      "linkId": "dob2",
      "type": "dateTime",
      "repeats": false,
      "text": "Datetime of birth CalcExpr Animation"
    }

  ]
}

* Refactor QR Item ID handling across form components

- Introduced `getQRItemId` utility function to manage QR Item IDs, ensuring that IDs generated from calculated expressions are unique.
- Updated multiple form components (AttachmentItem, BooleanItem, ChoiceAutocompleteItem, etc.) to utilize `getQRItemId` for initializing answer keys.
- This change enhances the reliability of ID handling in components that rely on QR Item answers, particularly in scenarios involving calculated expressions.

* - Reverting SingleItemSwitcher based on code review.

* - fix lint

---------

Co-authored-by: Janardhan Vignarajan <itzjana@gmail.com>

Author: janadh

packages/smart-forms-renderer/src/components/FormComponents/AttachmentItem/AttachmentItem.tsx

@@ -18,7 +18,7 @@
 import React, { useCallback, useState } from 'react';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import debounce from 'lodash.debounce';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import useReadOnly from '../../../hooks/useReadOnly';
 import AttachmentFieldWrapper from './AttachmentFieldWrapper';
@@ -45,7 +45,7 @@ function AttachmentItem(props: BaseItemProps) {
   } = props;
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   let valueString = '';
   if (qrItem?.answer && qrItem?.answer[0].valueString) {
     valueString = qrItem.answer[0].valueString;

packages/smart-forms-renderer/src/components/FormComponents/BooleanItem/BooleanItem.tsx

@@ -20,7 +20,7 @@ import useReadOnly from '../../../hooks/useReadOnly';
 import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import ItemLabel from '../ItemParts/ItemLabel';
@@ -46,7 +46,7 @@ function BooleanItem(props: BaseItemProps) {
   const feedback = useValidationFeedback(qItem, feedbackFromParent);
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   let valueBoolean: boolean | undefined = undefined;
   if (qrItem?.answer?.[0]?.valueBoolean !== undefined) {
     valueBoolean = qrItem.answer[0].valueBoolean;

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteField.tsx

@@ -36,6 +36,7 @@ import type {
 import type { AlertColor } from '@mui/material/Alert';
 import { useRendererConfigStore } from '../../../stores';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
+import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
 
 interface ChoiceAutocompleteFieldsProps
   extends PropsWithIsTabledAttribute,
@@ -47,6 +48,8 @@ interface ChoiceAutocompleteFieldsProps
   loading: boolean;
   feedback: { message: string; color: AlertColor } | null;
   readOnly: boolean;
+  calcExpUpdated: boolean;
+
   onInputChange: (newInput: string) => void;
   onValueChange: (newValue: Coding | null) => void;
 }
@@ -59,6 +62,7 @@ function ChoiceAutocompleteField(props: ChoiceAutocompleteFieldsProps) {
     loading,
     feedback,
     readOnly,
+    calcExpUpdated,
     isTabled,
     renderingExtensions,
     onInputChange,
@@ -123,6 +127,7 @@ function ChoiceAutocompleteField(props: ChoiceAutocompleteFieldsProps) {
                       </Tooltip>
                     </Fade>
                   ) : null}
+                  <ExpressionUpdateFadingIcon fadeIn={calcExpUpdated} disabled={readOnly} />
                   {params.InputProps.endAdornment}
                   <DisplayUnitText readOnly={readOnly}>{displayUnit}</DisplayUnitText>
                 </>

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteItem.tsx

@@ -26,7 +26,7 @@ import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import ItemLabel from '../ItemParts/ItemLabel';
@@ -41,14 +41,14 @@ function ChoiceAutocompleteItem(props: BaseItemProps) {
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
-    onQrItemChange
+    onQrItemChange,
+    calcExpUpdated
   } = props;
-  // TODO no calcExpUpdated
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoice = qrItem ?? createEmptyQrItem(qItem, answerKey);
 
   let valueCoding: Coding | undefined;
@@ -108,6 +108,7 @@ function ChoiceAutocompleteItem(props: BaseItemProps) {
         loading={loading}
         feedback={feedback}
         readOnly={readOnly}
+        calcExpUpdated={calcExpUpdated}
         isTabled={isTabled}
         renderingExtensions={renderingExtensions}
         onInputChange={setInput}
@@ -134,6 +135,7 @@ function ChoiceAutocompleteItem(props: BaseItemProps) {
             loading={loading}
             feedback={feedback}
             readOnly={readOnly}
+            calcExpUpdated={calcExpUpdated}
             isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             onInputChange={setInput}

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionItem.tsx

@@ -21,7 +21,7 @@ import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { updateChoiceCheckboxAnswers } from '../../../utils/choice';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
@@ -44,7 +44,7 @@ function ChoiceCheckboxAnswerOptionItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem, answerKey);
   const answers = qrChoiceCheckbox.answer ?? [];
 

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetItem.tsx

@@ -23,7 +23,7 @@ import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { convertCodingsToAnswerOptions, updateChoiceCheckboxAnswers } from '../../../utils/choice';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
@@ -46,7 +46,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem, answerKey);
   const answers = qrChoiceCheckbox.answer ?? [];
 

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerOptionItem.tsx

@@ -24,7 +24,7 @@ import { ChoiceItemControl } from '../../../interfaces/choice.enum';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { findInAnswerOptions, getChoiceControlType, getQrChoiceValue } from '../../../utils/choice';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import ChoiceRadioAnswerOptionView from './ChoiceRadioAnswerOptionView';
 import ChoiceSelectAnswerOptionView from './ChoiceSelectAnswerOptionView';
 
@@ -44,7 +44,7 @@ function ChoiceRadioAnswerOptionItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoice = qrItem ?? createEmptyQrItem(qItem, answerKey);
   const valueChoice = getQrChoiceValue(qrChoice);
 

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx

@@ -23,7 +23,7 @@ import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { convertCodingsToAnswerOptions, findInAnswerOptions } from '../../../utils/choice';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import ItemLabel from '../ItemParts/ItemLabel';
@@ -44,7 +44,7 @@ function ChoiceRadioAnswerValueSetItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoiceRadio = qrItem ?? createEmptyQrItem(qItem, answerKey);
 
   let valueRadio: string | null = null;

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionItem.tsx

@@ -22,7 +22,7 @@ import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import ChoiceSelectAnswerOptionView from './ChoiceSelectAnswerOptionView';
 
 function ChoiceSelectAnswerOptionItem(props: BaseItemProps) {
@@ -46,7 +46,7 @@ function ChoiceSelectAnswerOptionItem(props: BaseItemProps) {
   const feedback = useValidationFeedback(qItem, feedbackFromParent);
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoice = qrItem ?? createEmptyQrItem(qItem, answerKey);
   const valueChoice = getQrChoiceValue(qrChoice);
 

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetItem.tsx

@@ -24,7 +24,7 @@ import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import ItemLabel from '../ItemParts/ItemLabel';
@@ -46,7 +46,7 @@ function ChoiceSelectAnswerValueSetItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoiceSelect = qrItem ?? createEmptyQrItem(qItem, answerKey);
 
   let valueCoding: Coding | null = null;