diff --git a/packages/esm-patient-labs-app/src/routes.json b/packages/esm-patient-labs-app/src/routes.json index 6da2192390..e999edb316 100644 --- a/packages/esm-patient-labs-app/src/routes.json +++ b/packages/esm-patient-labs-app/src/routes.json @@ -11,7 +11,7 @@ "slot": "patient-chart-dashboard-slot", "meta": { "slot": "patient-chart-test-results-dashboard-slot", - "path": "Results Viewer", + "path": "Results", "hideDashboardTitle": true }, "order": 4 diff --git a/packages/esm-patient-labs-app/src/test-results/dashboard.meta.ts b/packages/esm-patient-labs-app/src/test-results/dashboard.meta.ts index e4b43cc179..769157bdd0 100644 --- a/packages/esm-patient-labs-app/src/test-results/dashboard.meta.ts +++ b/packages/esm-patient-labs-app/src/test-results/dashboard.meta.ts @@ -1,7 +1,7 @@ export const dashboardMeta = { slot: 'patient-chart-test-results-dashboard-slot', columns: 1, - path: 'Results Viewer', - title: 'Results Viewer', + path: 'Results', + title: 'Results', hideDashboardTitle: true, }; diff --git a/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.extension.tsx b/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.extension.tsx index d6172f241d..510d84da2c 100644 --- a/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.extension.tsx +++ b/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.extension.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useContext, useState } from 'react'; +import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'; import classNames from 'classnames'; import { type TFunction, useTranslation } from 'react-i18next'; import { useParams } from 'react-router-dom'; @@ -65,6 +65,54 @@ const ResultsViewer: React.FC = ({ patientUuid, basePath, lo const isExpanded = view === 'full'; const trendlineView = testUuid && type === 'trendline'; const responsiveSize = isTablet ? 'lg' : 'md'; + const headerRef = useRef(null); + + useEffect(() => { + const headerElement = headerRef.current; + + if (!headerElement) { + const fallbackElement = document.querySelector(`.${styles.resultsHeader}`); + if (fallbackElement) { + const observer = new IntersectionObserver( + ([entry]) => { + if (!entry.isIntersecting) { + (fallbackElement as HTMLElement).style.borderBottom = '0px'; + } else { + (fallbackElement as HTMLElement).style.borderBottom = '1px solid #e0e0e0'; + } + }, + { + rootMargin: '0px 0px -80% 0px', + threshold: [1], + }, + ); + observer.observe(fallbackElement); + } + return; + } + + const observer = new IntersectionObserver( + ([entry]) => { + if (!entry.isIntersecting) { + headerElement.style.borderBottom = '1px solid #e0e0e0'; + } else { + headerElement.style.borderBottom = '0px'; + } + }, + { + rootMargin: '0px 0px -80% 0px', + threshold: [1], + }, + ); + + observer.observe(headerElement); + + return () => { + if (headerElement) { + observer.unobserve(headerElement); + } + }; + }, []); const navigateBackFromTrendlineView = useCallback(() => { navigate({ @@ -75,7 +123,7 @@ const ResultsViewer: React.FC = ({ patientUuid, basePath, lo if (isTablet) { return (
-
+

{`${t('results', 'Results')} ${ totalResultsCount ? `(${totalResultsCount})` : '' }`}

diff --git a/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.scss b/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.scss index d7bdb71895..9750a275f4 100644 --- a/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.scss +++ b/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.scss @@ -104,6 +104,7 @@ grid-template-columns: 1fr 1fr; width: max-content; justify-content: flex-start; + height: 32px; } .trendlineOverlayHeader {