O3-3660 Show trend results in a modal

packages/esm-patient-labs-app/src/index.ts

@@ -54,3 +54,8 @@ export const addLabOrderWorkspace = getAsyncLifecycle(
   () => import('./lab-orders/add-lab-order/add-lab-order.workspace'),
   options,
 );
+
+export const resultsViewerDialog = getAsyncLifecycle(
+  () => import('./test-results/panel-timeline/results-dialog.comoponent'),
+  options,
+);

packages/esm-patient-labs-app/src/routes.json

@@ -35,6 +35,10 @@
       "component": "labOrderPanel",
       "slot": "order-basket-slot",
       "order": 2
+    },
+    {
+      "name": "results-viewer-dialog",
+      "component": "resultsViewerDialog"
     }
   ],
   "pages": [],

packages/esm-patient-labs-app/src/test-results/panel-timeline/helpers.tsx

@@ -1,11 +1,11 @@
 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';
+import { Button } from '@carbon/react';
 
 export const parseTime: (sortedTimes: Array<string>) => ParsedTimeType = (sortedTimes) => {
   const yearColumns: Array<{ year: string; size: number }> = [],
@@ -116,6 +116,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('results-viewer-dialog', {
+      closeDeleteModal: () => dispose(),
+      patientUuid,
+      title,
+      testUuid,
+    });
+  };
+
   return (
     <div
       className={styles['row-start-cell']}
@@ -125,9 +134,12 @@ export const RowStartCell = ({ title, range, units, shadow = false, testUuid, is
     >
       <span className={styles['trendline-link']}>
         {!isString ? (
-          <ConfigurableLink to={`${testResultsBasePath(`/patient/${patientUuid}/chart`)}/trendline/${testUuid}`}>
+          <p
+            className={styles['trendline-link-view']}
+            onClick={() => launchResultsDialog(patientUuid, title, testUuid)}
+          >
             {title}
-          </ConfigurableLink>
+          </p>
         ) : (
           title
         )}

packages/esm-patient-labs-app/src/test-results/panel-timeline/results-dialog.comoponent.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ModalHeader } from '@carbon/react';
+import { ModalBody } from '@carbon/react';
+import Trendline from '../trendline/trendline.component';
+import { basePath } from '@openmrs/esm-patient-chart-app/src/constants';
+
+interface ResultsModalProps {
+  closeDeleteModal: () => void;
+  patientUuid: string;
+  title: string;
+  testUuid: string;
+  range: any;
+  units: any;
+}
+
+const ResultsModal: React.FC<ResultsModalProps> = ({ closeDeleteModal, patientUuid, testUuid }) => {
+  return (
+    <div>
+      <ModalHeader title="Trendline" closeModal={closeDeleteModal} />
+      <ModalBody>
+        <Trendline patientUuid={patientUuid} conceptUuid={testUuid} basePath={basePath} />
+      </ModalBody>
+    </div>
+  );
+};
+
+export default ResultsModal;

packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss

@@ -198,3 +198,12 @@
 .recent-results-grid::-webkit-scrollbar {
   display: none;
 }
+
+.trendline-link-view {
+  color: #0f62fe;
+  cursor: pointer;
+}
+
+.trendline-link-view:hover {
+  text-decoration: underline;
+}

packages/esm-patient-labs-app/src/test-results/trendline/trendline.component.tsx

@@ -71,6 +71,7 @@ const Trendline: React.FC<TrendlineProps> = ({
   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) {
@@ -235,7 +236,19 @@ const Trendline: React.FC<TrendlineProps> = ({
         <RangeSelector setLowerRange={setLowerRange} upperRange={upperRange} />
         <LineChart data={data} options={chartOptions} />
       </TrendLineBackground>
-      <DrawTable {...{ tableData, tableHeaderData }} />
+
+      {showResultsTable ? (
+        <>
+          <Button kind="ghost" onClick={() => setShowResultsTable(false)} className={styles['show-hide-table']}>
+            {t('hideResultsTable', 'Hide results table')}
+          </Button>
+          <DrawTable {...{ tableData, tableHeaderData }} />
+        </>
+      ) : (
+        <Button kind="ghost" onClick={() => setShowResultsTable(true)} className={styles['show-hide-table']}>
+          {t('showResultsTable', 'Show results table')}
+        </Button>
+      )}
     </div>
   );
 };

packages/esm-patient-labs-app/translations/en.json

@@ -19,6 +19,7 @@
   "female": "Female",
   "full": "Full",
   "goToDrugOrderForm": "Order form",
+  "hideResultsTable": "Hide results table",
   "labOrders": "Lab orders",
   "labReferenceNumber": "Lab reference number",
   "male": "Male",
@@ -58,6 +59,7 @@
   "searchResultsMatchesForTerm_one": "{{count}} result for \"{{searchTerm}}\"",
   "searchResultsMatchesForTerm_other": "{{count}} results for \"{{searchTerm}}\"",
   "seeAllResults": "See all results",
+  "showResultsTable": "Show results table",
   "showTree": "Show tree",
   "split": "Split",
   "startDate": "Start date",