Added highlighting for reasonDetail

[sarahmcdougall]

Summary

When accessing the Accordion View results and hovering over the GuidanceResponse reasonDetail, the relevant property that the reasonDetail is referencing is highlighted in the JSON viewer.

New Behavior

All previous behavior is the same, aside from the addition of the highlighted property in the JSON viewer when hovering over the Accordion view results.

Code Changes

A function getSearchString was created in src/components/Results/DetectedIssueResources.tsx to obtain the string in the JSON viewer that we want to highlight. The function takes in a resource and a path, and it traverses through the path’s layers to find the final value that should be highlighted.

A function highlightJSON was created to separate the string we want to highlight from the rest of the resource JSON, and then apply <mark> tags to apply the yellow highlighting. If we cannot find a string to highlight (which is the case with EXM124’s GuidanceResponse for ValueMissing, the stringified JSON is shown in the viewer like before.

These functions are used in handlePopoverOpen() to set the popover content with the highlighted JSON.

Testing Guidance

• Run the demo app with the EXM130 measure bundle and denominator patient bundle, and select “Gaps in Care” as the output type. Under the Accordion view, click on the first GuidanceResponse, which is for DateOutofRange. Hover over the reasonDetail and check that the ”end” key and corresponding value are highlighted under performedPeriod. This should be the only highlighted content.
• Run the demo app with the EXM124 measure bundle and denominator patient bundle, and select “Gaps in Care” as the output type. Under the Accordion view, click on the first GuidanceResponse, which is for ValueMissingValueMissing. Hover over the reasonDetail and check that all the JSON output appears in the viewer and that none of it is highlighted (since we are missing values).
• To further check the functionality of the getSearchString and highlightJSON functions, you could change the const path in handlePopoverOpen() to a hard-coded value, such as subject.reference. Check with EXM130 to see that the highlighting has appropriately changed.

[natjoe4]

Code all looks great and functionality works as described :)