From 8f929f89762124bd5f7fef4f906ff5f9f57f1ba3 Mon Sep 17 00:00:00 2001 From: Mary McGrath Date: Mon, 9 Dec 2024 14:54:25 -0500 Subject: [PATCH] Update tooltips per spec (#2998) * refactor: tooltip content -> children * feat: add tooltip to accordion sub section * fix: dynamic min width so tooltip always displays * feat: add new tooltips * test: update tests * fix: add back warning * test: get dynamic tooltip IDs working with snapshots * fix: botched merge --- .../src/app/services/ecrMetadataService.ts | 1 - .../src/app/services/formatService.tsx | 6 +- .../app/tests/components/Encounter.test.tsx | 8 +++ .../AccordionContent.test.tsx.snap | 46 ++++++------- .../__snapshots__/Clinical.test.tsx.snap | 42 ++++++------ .../__snapshots__/EcrMetadata.test.tsx.snap | 58 ++++++++++++++-- .../__snapshots__/Encounter.test.tsx.snap | 66 ++++++++++++++++--- .../tests/services/ecrMetadataService.test.ts | 1 - .../ecr-viewer/src/app/tests/utils.test.tsx | 4 +- .../src/app/view-data/component-utils.tsx | 8 ++- .../app/view-data/components/DataDisplay.tsx | 2 +- .../app/view-data/components/EcrMetadata.tsx | 26 +++++--- .../app/view-data/components/Encounter.tsx | 16 ++++- .../view-data/components/ToolTipElement.tsx | 10 +-- .../src/app/view-data/components/common.tsx | 2 + .../ecr-viewer/src/styles/custom-styles.scss | 4 +- 16 files changed, 213 insertions(+), 87 deletions(-) diff --git a/containers/ecr-viewer/src/app/services/ecrMetadataService.ts b/containers/ecr-viewer/src/app/services/ecrMetadataService.ts index 2d71e63288..96cc185a1a 100644 --- a/containers/ecr-viewer/src/app/services/ecrMetadataService.ts +++ b/containers/ecr-viewer/src/app/services/ecrMetadataService.ts @@ -164,7 +164,6 @@ export const evaluateEcrMetadata = ( }, { title: "EHR Software Name", - toolTip: "EHR system used by the sending provider.", value: evaluate(fhirBundle, mappings.ehrSoftware)[0], }, ]; diff --git a/containers/ecr-viewer/src/app/services/formatService.tsx b/containers/ecr-viewer/src/app/services/formatService.tsx index f7ad0edb27..38d6bdb424 100644 --- a/containers/ecr-viewer/src/app/services/formatService.tsx +++ b/containers/ecr-viewer/src/app/services/formatService.tsx @@ -599,9 +599,9 @@ export const addCaptionToTable = ( if (React.isValidElement(element) && element.type === "table") { return React.cloneElement(element, {}, [ -
- -
+ +
{caption}
+ , ...React.Children.toArray(element.props.children), ]); diff --git a/containers/ecr-viewer/src/app/tests/components/Encounter.test.tsx b/containers/ecr-viewer/src/app/tests/components/Encounter.test.tsx index 1f3b4d7fd9..e5aac24c63 100644 --- a/containers/ecr-viewer/src/app/tests/components/Encounter.test.tsx +++ b/containers/ecr-viewer/src/app/tests/components/Encounter.test.tsx @@ -1,10 +1,18 @@ import { render } from "@testing-library/react"; import { axe } from "jest-axe"; import EncounterDetails from "../../view-data/components/Encounter"; +import React from "react"; describe("Encounter", () => { let container: HTMLElement; beforeAll(() => { + const mockChildMethod = jest.fn(); + // This gets the dynamic tooltip IDs to show up as stable "[object Object]" + jest.spyOn(React, "useRef").mockReturnValue({ + current: { + childMethod: mockChildMethod, + }, + }); const encounterData = [ { title: "Encounter Type", diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/AccordionContent.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/AccordionContent.test.tsx.snap index a3387b3d2a..2a54fe1720 100644 --- a/containers/ecr-viewer/src/app/tests/components/__snapshots__/AccordionContent.test.tsx.snap +++ b/containers/ecr-viewer/src/app/tests/components/__snapshots__/AccordionContent.test.tsx.snap @@ -975,7 +975,28 @@ exports[`Snapshot test for Accordion Content Given no data, info message for emp
- Miscellaneous Notes + +
+ Miscellaneous Notes +
+ +
- -
- EHR Software Name -
- - + EHR Software Name
diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrMetadata.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrMetadata.test.tsx.snap index 3d7a727952..6645da10d4 100644 --- a/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrMetadata.test.tsx.snap +++ b/containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrMetadata.test.tsx.snap @@ -168,7 +168,30 @@ exports[`ECR Metadata should match snapshot 1`] = ` data-testid="table" > @@ -459,12 +482,35 @@ Palmdale, CA
-

- eICR Custodian Details -

+
+

+ eICR Custodian Details +

+
+ +
diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/Encounter.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/Encounter.test.tsx.snap index 3e0bfe2295..f0e03af0bf 100644 --- a/containers/ecr-viewer/src/app/tests/components/__snapshots__/Encounter.test.tsx.snap +++ b/containers/ecr-viewer/src/app/tests/components/__snapshots__/Encounter.test.tsx.snap @@ -101,12 +101,35 @@ exports[`Encounter should match snapshot 1`] = `
-

- Facility Details -

+
+

+ Facility Details +

+
+ +
@@ -212,12 +235,35 @@ North Canton, MA 02740
-

- Provider Details -

+
+

+ Provider Details +

+
+ +
diff --git a/containers/ecr-viewer/src/app/tests/services/ecrMetadataService.test.ts b/containers/ecr-viewer/src/app/tests/services/ecrMetadataService.test.ts index 9ed3caaad8..fc750191f4 100644 --- a/containers/ecr-viewer/src/app/tests/services/ecrMetadataService.test.ts +++ b/containers/ecr-viewer/src/app/tests/services/ecrMetadataService.test.ts @@ -33,7 +33,6 @@ describe("Evaluate Ecr Metadata", () => { { title: "EHR Manufacturer Model Name", value: "Epic - Version 10.1" }, { title: "EHR Software Name", - toolTip: "EHR system used by the sending provider.", value: "Epic - Version 10.1", }, ]); diff --git a/containers/ecr-viewer/src/app/tests/utils.test.tsx b/containers/ecr-viewer/src/app/tests/utils.test.tsx index ca93dd2c8b..0a3b479270 100644 --- a/containers/ecr-viewer/src/app/tests/utils.test.tsx +++ b/containers/ecr-viewer/src/app/tests/utils.test.tsx @@ -559,7 +559,7 @@ describe("Utils", () => { expect(tip.textContent).toInclude("Test child"); }); it("should make a tooltip", () => { - render(); + render(Item Title); const tip = screen.getByTestId("triggerElement"); expect(tip.className).toInclude("short-tooltip"); expect(tip.textContent).toInclude("Item Title"); @@ -567,7 +567,7 @@ describe("Utils", () => { it("should not make the tool tip short if the tip has more than 100 character", () => { const toolTip = "1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890"; - render(); + render(Item Title); const tip = screen.getByTestId("triggerElement"); expect(tip.className).not.toInclude("short-tooltip"); }); diff --git a/containers/ecr-viewer/src/app/view-data/component-utils.tsx b/containers/ecr-viewer/src/app/view-data/component-utils.tsx index 1d805edb29..3577d4b781 100644 --- a/containers/ecr-viewer/src/app/view-data/component-utils.tsx +++ b/containers/ecr-viewer/src/app/view-data/component-utils.tsx @@ -1,6 +1,7 @@ import React, { ReactNode } from "react"; import classNames from "classnames"; import { toKebabCase } from "../services/formatService"; +import { ToolTipElement } from "./components/ToolTipElement"; type AccordionSectionProps = { children: ReactNode; @@ -34,6 +35,7 @@ interface AccordionSubSectionProps { title: string; className?: string; idPrefix?: string; + toolTip?: string; children: React.ReactNode; } @@ -43,6 +45,7 @@ interface AccordionSubSectionProps { * @param props.children - The children elements. * @param [props.className] - Additional CSS classes for customization. * @param [props.idPrefix] - Optional prefix for the ID. + * @param [props.toolTip] - Optional content for a tooltip. * @param [props.title] - The title of the subsection. * @returns React element representing the AccordionSubSection component. */ @@ -50,11 +53,14 @@ export const AccordionSubSection = ({ title, className, idPrefix = "", + toolTip, children, }: AccordionSubSectionProps) => { return (
- {title} + + {title} + {children}
); diff --git a/containers/ecr-viewer/src/app/view-data/components/DataDisplay.tsx b/containers/ecr-viewer/src/app/view-data/components/DataDisplay.tsx index 3993f82ab0..a22bab09c4 100644 --- a/containers/ecr-viewer/src/app/view-data/components/DataDisplay.tsx +++ b/containers/ecr-viewer/src/app/view-data/components/DataDisplay.tsx @@ -41,7 +41,7 @@ export const DataDisplay: React.FC<{
- + {item.title}
@@ -119,10 +122,14 @@ const EcrMetadata = ({
-
-
Miscellaneous Notes
- +
+ - +
- eRSD Warnings + +
+ eRSD Warnings +
+ +
+ > + Reportable Condition + + > + RCKMS Rule Summary + + > + Jurisdiction Sent eCR +
+ @@ -171,7 +178,10 @@ const EcrMetadata = ({ ); })} - + {eCRCustodianDetails.map((item, index) => { return ; })} diff --git a/containers/ecr-viewer/src/app/view-data/components/Encounter.tsx b/containers/ecr-viewer/src/app/view-data/components/Encounter.tsx index 5140d772ed..ee000e5102 100644 --- a/containers/ecr-viewer/src/app/view-data/components/Encounter.tsx +++ b/containers/ecr-viewer/src/app/view-data/components/Encounter.tsx @@ -28,8 +28,16 @@ const EncounterDetails = ({ return ( - - + + ); }; @@ -37,13 +45,15 @@ const EncounterDetails = ({ const EncounterSection = ({ title, data, + toolTip, }: { title: string; + toolTip?: string; data: DisplayDataProps[]; }) => { return ( data.length > 0 && ( - + {data.map((item, index) => { if (item.table) { return ; diff --git a/containers/ecr-viewer/src/app/view-data/components/ToolTipElement.tsx b/containers/ecr-viewer/src/app/view-data/components/ToolTipElement.tsx index 43c99f36be..e09f01a28c 100644 --- a/containers/ecr-viewer/src/app/view-data/components/ToolTipElement.tsx +++ b/containers/ecr-viewer/src/app/view-data/components/ToolTipElement.tsx @@ -29,8 +29,8 @@ const CustomDivForwardRef: React.ForwardRefRenderFunction< export const TooltipDiv = React.forwardRef(CustomDivForwardRef); interface ToolTipProps { - content?: string; toolTip?: string; + children: React.ReactNode; } /** @@ -38,13 +38,13 @@ interface ToolTipProps { * The tooltip is only applied when the `toolTip` parameter is not null or undefined. If the tooltip text * is less than 100 characters, a specific class `short-tooltip` is added to style the tooltip differently. * @param content - The properties object for tooltips. - * @param content.content - The content to be displayed, which can be any valid React node or text * @param content.toolTip - The text for the tooltip. If this is provided, the content will be wrapped in a tooltip. + * @param content.children - The content to be displayed, which can be any valid React node or text * @returns A React JSX element containing either the plain content or content wrapped in a tooltip, depending on the tooltip parameter. */ export const ToolTipElement = ({ - content, toolTip, + children, }: ToolTipProps): React.JSX.Element => { return toolTip ? ( - {content} + {children} ) : ( - <>{content} + <>{children} ); }; diff --git a/containers/ecr-viewer/src/app/view-data/components/common.tsx b/containers/ecr-viewer/src/app/view-data/components/common.tsx index 940d76be05..68b632b57f 100644 --- a/containers/ecr-viewer/src/app/view-data/components/common.tsx +++ b/containers/ecr-viewer/src/app/view-data/components/common.tsx @@ -508,6 +508,8 @@ export const evaluateClinicalData = ( value: safeParse( evaluateValue(fhirBundle, mappings["historyOfPresentIllness"]) ?? "", ), + toolTip: + "Clinical notes from various parts of a medical record. Type of note found here depends on how the provider's EHR system onboarded to send eCR.", }, ]; diff --git a/containers/ecr-viewer/src/styles/custom-styles.scss b/containers/ecr-viewer/src/styles/custom-styles.scss index e64e7605c8..a7b2ee2f40 100644 --- a/containers/ecr-viewer/src/styles/custom-styles.scss +++ b/containers/ecr-viewer/src/styles/custom-styles.scss @@ -483,7 +483,7 @@ ul.usa-sidenav>li.usa-sidenav__item>ul.usa-sidenav__sublist>li.usa-sidenav__item .usa-tooltip__body { max-width: 700px; - min-width: 450px; + min-width: min(450px, 0.25 * (100vw - $nav-wrapper-width)); white-space: normal; text-align: left; font-weight: normal; @@ -492,7 +492,7 @@ ul.usa-sidenav>li.usa-sidenav__item>ul.usa-sidenav__sublist>li.usa-sidenav__item } .short-tooltip+.usa-tooltip__body { - min-width: 350px; + min-width: min(350px, 0.25 * (100vw - $nav-wrapper-width)); }
+ + eRSD Warnings + +
Warning