diff --git a/packages/esm-patient-labs-app/src/constants.ts b/packages/esm-patient-labs-app/src/constants.ts
new file mode 100644
index 0000000000..ba283e9af2
--- /dev/null
+++ b/packages/esm-patient-labs-app/src/constants.ts
@@ -0,0 +1 @@
+export const basePath = '/patient/:patientUuid/chart';
diff --git a/packages/esm-patient-labs-app/src/index.ts b/packages/esm-patient-labs-app/src/index.ts
index 292640e8c0..2a027504b6 100644
--- a/packages/esm-patient-labs-app/src/index.ts
+++ b/packages/esm-patient-labs-app/src/index.ts
@@ -54,3 +54,11 @@ export const addLabOrderWorkspace = getAsyncLifecycle(
() => import('./lab-orders/add-lab-order/add-lab-order.workspace'),
options,
);
+
+export const timelineResultsModal = getAsyncLifecycle(
+ () => import('./test-results/panel-timeline/timeline-results.modal'),
+ {
+ featureName: 'Timeline results',
+ moduleName,
+ },
+);
diff --git a/packages/esm-patient-labs-app/src/routes.json b/packages/esm-patient-labs-app/src/routes.json
index 0f76bbc986..6da2192390 100644
--- a/packages/esm-patient-labs-app/src/routes.json
+++ b/packages/esm-patient-labs-app/src/routes.json
@@ -37,6 +37,12 @@
"order": 2
}
],
+ "modals": [
+ {
+ "name": "timeline-results-modal",
+ "component": "timelineResultsModal"
+ }
+ ],
"pages": [],
"workspaces": [
{
diff --git a/packages/esm-patient-labs-app/src/test-results/panel-timeline/helpers.tsx b/packages/esm-patient-labs-app/src/test-results/panel-timeline/helpers.tsx
index 01ca1098aa..9b47014ace 100644
--- a/packages/esm-patient-labs-app/src/test-results/panel-timeline/helpers.tsx
+++ b/packages/esm-patient-labs-app/src/test-results/panel-timeline/helpers.tsx
@@ -1,9 +1,8 @@
import * as React from 'react';
import classNames from 'classnames';
-import { ConfigurableLink, formatDate, formatTime, parseDate } from '@openmrs/esm-framework';
+import { formatDate, formatTime, parseDate, showModal } from '@openmrs/esm-framework';
import { type OBSERVATION_INTERPRETATION, getPatientUuidFromUrl } from '@openmrs/esm-patient-common-lib';
import { type ParsedTimeType } from '../filter/filter-types';
-import { testResultsBasePath } from '../helpers';
import type { ObsRecord } from '../../types';
import styles from './timeline.scss';
@@ -115,6 +114,15 @@ export const TimelineCell: React.FC<{
export const RowStartCell = ({ title, range, units, shadow = false, testUuid, isString = false }) => {
const patientUuid = getPatientUuidFromUrl();
+ const launchResultsDialog = (patientUuid: string, title: string, testUuid: string) => {
+ const dispose = showModal('timeline-results-modal', {
+ closeDeleteModal: () => dispose(),
+ patientUuid,
+ title,
+ testUuid,
+ });
+ };
+
return (
{!isString ? (
-
+ launchResultsDialog(patientUuid, title, testUuid)}
+ >
{title}
-
+
) : (
title
)}
diff --git a/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline-results.modal.tsx b/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline-results.modal.tsx
new file mode 100644
index 0000000000..0d554d38b4
--- /dev/null
+++ b/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline-results.modal.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { ModalHeader, ModalBody } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { basePath } from '../../constants';
+import Trendline from '../trendline/trendline.component';
+
+interface TimelineResultsModalProps {
+ closeDeleteModal: () => void;
+ patientUuid: string;
+ testUuid: string;
+ title: string;
+}
+
+const TimelineResultsModal: React.FC
= ({ closeDeleteModal, patientUuid, testUuid }) => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default TimelineResultsModal;
diff --git a/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss b/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss
index 252e999ac9..ec0b385e6e 100644
--- a/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss
+++ b/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss
@@ -206,3 +206,13 @@
.recent-results-grid::-webkit-scrollbar {
display: none;
}
+
+.trendline-link-view {
+ @include type.type-style('helper-text-01');
+ color: colors.$blue-60;
+ cursor: pointer;
+}
+
+.trendline-link-view:hover {
+ text-decoration: underline;
+}
diff --git a/packages/esm-patient-labs-app/src/test-results/trendline/range-selector.component.tsx b/packages/esm-patient-labs-app/src/test-results/trendline/range-selector.component.tsx
index d7a5c133eb..9f15d8e73b 100644
--- a/packages/esm-patient-labs-app/src/test-results/trendline/range-selector.component.tsx
+++ b/packages/esm-patient-labs-app/src/test-results/trendline/range-selector.component.tsx
@@ -38,7 +38,7 @@ const RangeSelector: React.FC<{ setLowerRange: (lowerRange: Date) => void; upper
return (
-
+
{ranges.map(([label, onClick], index) => (
{label}
diff --git a/packages/esm-patient-labs-app/src/test-results/trendline/trendline.component.tsx b/packages/esm-patient-labs-app/src/test-results/trendline/trendline.component.tsx
index 060021e070..b0275346cf 100644
--- a/packages/esm-patient-labs-app/src/test-results/trendline/trendline.component.tsx
+++ b/packages/esm-patient-labs-app/src/test-results/trendline/trendline.component.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
import { Button, InlineLoading, SkeletonText } from '@carbon/react';
import { ArrowLeft } from '@carbon/react/icons';
import { LineChart } from '@carbon/charts-react';
-import { formatDate, formatTime, parseDate, ConfigurableLink } from '@openmrs/esm-framework';
+import { formatDate, ConfigurableLink } from '@openmrs/esm-framework';
import { EmptyState, type OBSERVATION_INTERPRETATION } from '@openmrs/esm-patient-common-lib';
import { useObstreeData } from './trendline-resource';
import { testResultsBasePath } from '../helpers';
@@ -71,6 +71,7 @@ const Trendline: React.FC = ({
const { obs, display: chartTitle, hiNormal, lowNormal, units: leftAxisTitle, range: referenceRange } = trendlineData;
const bottomAxisTitle = t('date', 'Date');
const [range, setRange] = useState<[Date, Date]>();
+ const [showResultsTable, setShowResultsTable] = useState(false);
const [upperRange, lowerRange] = useMemo(() => {
if (obs.length === 0) {
@@ -108,8 +109,7 @@ const Trendline: React.FC = ({
const tableData: Array<{
id: string;
- date: string;
- time: string;
+ dateTime: string;
value:
| number
| {
@@ -138,8 +138,7 @@ const Trendline: React.FC = ({
tableData.push({
id: `${idx}`,
- date: formatDate(parseDate(obs.obsDatetime)),
- time: formatTime(parseDate(obs.obsDatetime)),
+ dateTime: obs.obsDatetime,
value: {
value: parseFloat(obs.value),
interpretation: obs.interpretation,
@@ -197,12 +196,8 @@ const Trendline: React.FC = ({
const tableHeaderData = useMemo(
() => [
{
- header: t('date', 'Date'),
- key: 'date',
- },
- {
- header: t('timeOfTest', 'Time of Test'),
- key: 'time',
+ header: t('dateTime', 'Date and time'),
+ key: 'dateTime',
},
{
header: `${t('value', 'Value')} (${leftAxisTitle})`,
@@ -235,7 +230,19 @@ const Trendline: React.FC = ({
-
+
+ {showResultsTable ? (
+ <>
+
+
+ >
+ ) : (
+
+ )}
);
};
diff --git a/packages/esm-patient-labs-app/src/test-results/trendline/trendline.scss b/packages/esm-patient-labs-app/src/test-results/trendline/trendline.scss
index 252413c228..95b04264f1 100644
--- a/packages/esm-patient-labs-app/src/test-results/trendline/trendline.scss
+++ b/packages/esm-patient-labs-app/src/test-results/trendline/trendline.scss
@@ -86,3 +86,9 @@
.range-tabs :global(.cds--tabs--scrollable__nav-link) {
width: 7rem;
}
+
+.tabPanel {
+ :global(.cds--tab--list) {
+ width: 100%;
+ }
+}
diff --git a/packages/esm-patient-labs-app/translations/en.json b/packages/esm-patient-labs-app/translations/en.json
index 9c9bf3935a..7590a896c6 100644
--- a/packages/esm-patient-labs-app/translations/en.json
+++ b/packages/esm-patient-labs-app/translations/en.json
@@ -15,6 +15,7 @@
"dataTimelineText": "Data timeline",
"date": "Date",
"dateCollected": "Displaying date collected",
+ "dateTime": "Date and time",
"directlyAddToBasket": "Add to basket",
"discard": "Discard",
"endDate": "End date",
@@ -24,6 +25,7 @@
"female": "Female",
"full": "Full",
"goToDrugOrderForm": "Order form",
+ "hideResultsTable": "Hide results table",
"labOrders": "Lab orders",
"labReferenceNumber": "Lab reference number",
"male": "Male",
@@ -71,6 +73,7 @@
"searchResultsTextFor_one": "{{count}} search result for {{searchTerm}}",
"searchResultsTextFor_other": "{{count}} search results for {{searchTerm}}",
"seeAllResults": "See all results",
+ "showResultsTable": "Show results table",
"showTree": "Show tree",
"split": "Split",
"startDate": "Start date",
@@ -80,7 +83,6 @@
"testResultsData": "Test results data",
"testType": "Test type",
"timeline": "Timeline",
- "timeOfTest": "Time of Test",
"tree": "Tree",
"trend": "Trend",
"trendline": "Trendline",