Handle empty travel histories as unavailable data

containers/ecr-viewer/src/app/services/formatService.tsx

@@ -21,12 +21,6 @@ export interface TableJson {
   tables?: TableRow[][];
 }
 
-export interface TableJson {
-  resultId?: string;
-  resultName?: string;
-  tables?: TableRow[][];
-}
-
 /**
  * Formats a person's name using given name(s), family name, optional prefix(es), and optional suffix(es).
  * @param given - Optional array of given name(s).

containers/ecr-viewer/src/app/services/socialHistoryService.tsx

@@ -1,9 +1,10 @@
 import { Bundle, Observation } from "fhir/r4";
-import { PathMappings } from "../view-data/utils/utils";
-import EvaluateTable, {
-  ColumnInfoInput,
-} from "../view-data/components/EvaluateTable";
+import { PathMappings, noData } from "../view-data/utils/utils";
+
 import { evaluate } from "../view-data/utils/evaluate";
+import { evaluateValue } from "./evaluateFhirDataService";
+import { returnTableFromJson } from "../view-data/components/common";
+import { TableRow, formatDate } from "./formatService";
 
 /**
  * Extracts travel history information from the provided FHIR bundle based on the FHIR path mappings.
@@ -20,35 +21,47 @@ export const evaluateTravelHistoryTable = (
     mappings.patientTravelHistory,
   );
 
-  const columnInfo: ColumnInfoInput[] = [
+  const columnInfo = [
     {
       columnName: "Location",
       infoPath: "travelHistoryLocation",
     },
     {
       columnName: "Start Date",
       infoPath: "travelHistoryStartDate",
+      applyToValue: formatDate,
     },
     {
       columnName: "End Date",
       infoPath: "travelHistoryEndDate",
+      applyToValue: formatDate,
     },
     {
       columnName: "Purpose",
       infoPath: "travelHistoryPurpose",
     },
   ];
 
-  if (travelHistory.length > 0) {
-    return (
-      <EvaluateTable
-        resources={travelHistory}
-        mappings={mappings}
-        columns={columnInfo}
-        caption={"Travel History"}
-        className={"margin-y-0"}
-      />
+  const tables = travelHistory
+    .map((act) => {
+      return columnInfo.reduce(
+        (row, { columnName, infoPath, applyToValue }) => {
+          let val = evaluateValue(act, mappings[infoPath]);
+          if (applyToValue) {
+            val = applyToValue(val) ?? "";
+          }
+          return { ...row, [columnName]: { value: val || noData } };
+        },
+        {} as TableRow[],
+      );
+    })
+    .filter((row) =>
+      Object.values(row).some((v) => (v.value as any) !== noData),
     );
-  }
-  return undefined;
+
+  return returnTableFromJson(
+    { tables, resultName: "Travel History" },
+    true,
+    "caption-data-title margin-y-0",
+  );
 };

containers/ecr-viewer/src/app/tests/assets/BundleTravelHistoryEmpty.json

@@ -0,0 +1,49 @@
+{
+  "resourceType": "Bundle",
+  "type": "batch",
+  "entry": [
+    {
+      "fullUrl": "urn:uuid:595b1386-09d2-7dfb-d414-fb1e5043013d",
+      "resource": {
+        "resourceType": "Observation",
+        "id": "595b1386-09d2-7dfb-d414-fb1e5043013d",
+        "meta": {
+          "profile": [
+            "http://hl7.org/fhir/us/ecr/StructureDefinition/us-ph-travel-history"
+          ],
+          "source": [
+            "ecr"
+          ]
+        },
+        "code": {
+          "coding": [
+            {
+              "system": "http://snomed.info/sct",
+              "code": "420008001",
+              "display": "Travel"
+            }
+          ],
+          "text": "Travel History"
+        },
+        "status": "final",
+        "component": [
+          {
+            "code": {
+              "coding": [
+                {
+                  "system": "http://terminology.hl7.org/CodeSystem/v3-ParticipationType",
+                  "code": "LOC",
+                  "display": "Location"
+                }
+              ]
+            }
+          }
+        ]
+      },
+      "request": {
+        "method": "PUT",
+        "url": "Observation/595b1386-09d2-7dfb-d414-fb1e5043013d"
+      }
+    }
+  ]
+}

containers/ecr-viewer/src/app/tests/components/EvaluateTable.test.tsx

@@ -70,21 +70,47 @@ describe("Evaluate table", () => {
   it("should not apply a function to the row value if value is null", () => {
     render(
       <EvaluateTable
-        resources={[{}]}
-        mappings={{ getId: "id" }}
+        resources={[{ id: "hi" }]}
+        mappings={{ getId: "id", getName: "name" }}
         columns={[
           {
             columnName: "Col1",
-            infoPath: "getId",
+            infoPath: "getName",
             applyToValue: (value) => value?.toUpperCase(),
           },
+          {
+            columnName: "Col2",
+            infoPath: "getId",
+          },
         ]}
       />,
     );
 
     expect(screen.getByText("Col1")).toBeInTheDocument();
     expect(screen.getByText("No data")).toBeInTheDocument();
   });
+  it("should not render totally empty rows", () => {
+    render(
+      <EvaluateTable
+        resources={[{}]}
+        mappings={{ getId: "id", getName: "name" }}
+        columns={[
+          {
+            columnName: "Col1",
+            infoPath: "getName",
+            applyToValue: (value) => value?.toUpperCase(),
+          },
+          {
+            columnName: "Col2",
+            infoPath: "getId",
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText("Col1")).toBeInTheDocument();
+    expect(screen.queryByText("No data")).not.toBeInTheDocument();
+  });
   describe("hiddenBaseText", () => {
     const pathMapping: PathMappings = { idPath: "id", notePath: "note.text" };
     describe("single column", () => {

containers/ecr-viewer/src/app/tests/components/__snapshots__/Clinical.test.tsx.snap

@@ -254,10 +254,10 @@ exports[`Snapshot test for Procedures (Treatment Details) should match snapshot
                     </tbody>
                   </table>
                 </div>
-                <div
-                  class="section__line_gray"
-                />
               </div>
+              <div
+                class="section__line_gray"
+              />
             </div>
           </div>
         </div>

containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrSummary.test.tsx.snap

@@ -289,10 +289,10 @@ End: 05/13/2022 9:57 AM UTC
                 >
                   covid clinical
                 </div>
-                <div
-                  class="section__line_gray"
-                />
               </div>
+              <div
+                class="section__line_gray"
+              />
             </div>
             <div
               class="text-bold margin-0 margin-bottom-1"
@@ -311,10 +311,10 @@ End: 05/13/2022 9:57 AM UTC
                 >
                   covid lab
                 </div>
-                <div
-                  class="section__line_gray"
-                />
               </div>
+              <div
+                class="section__line_gray"
+              />
             </div>
           </div>
         </div>

containers/ecr-viewer/src/app/tests/components/__snapshots__/Encounter.test.tsx.snap

@@ -92,10 +92,10 @@ exports[`Encounter should match snapshot 1`] = `
                   </tr>
                 </table>
               </div>
-              <div
-                class="section__line_gray"
-              />
             </div>
+            <div
+              class="section__line_gray"
+            />
           </div>
         </div>
         <div

containers/ecr-viewer/src/app/tests/services/__snapshots__/socialHistoryService.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Travel History should display a table  1`] = `
 <div>
   <table
-    class="usa-table usa-table--borderless width-full _fixed_1khz6_1 table-caption-margin margin-y-0 border-top border-left border-right"
+    class="usa-table usa-table--borderless width-full table-caption-margin caption-normal-weight margin-bottom-2 caption-data-title margin-y-0 border-top border-left border-right"
     data-testid="table"
   >
     <caption>
@@ -12,25 +12,25 @@ exports[`Travel History should display a table  1`] = `
     <thead>
       <tr>
         <th
-          class="tableHeader"
+          class="tableHeader bg-gray-5 minw-10"
           scope="col"
         >
           Location
         </th>
         <th
-          class="tableHeader"
+          class="tableHeader bg-gray-5 minw-10"
           scope="col"
         >
           Start Date
         </th>
         <th
-          class="tableHeader"
+          class="tableHeader bg-gray-5 minw-10"
           scope="col"
         >
           End Date
         </th>
         <th
-          class="tableHeader"
+          class="tableHeader bg-gray-5 minw-10"
           scope="col"
         >
           Purpose
@@ -39,24 +39,16 @@ exports[`Travel History should display a table  1`] = `
     </thead>
     <tbody>
       <tr>
-        <td
-          class="text-top"
-        >
+        <td>
           Traveled to Singapore, Malaysia and Bali with my family.
         </td>
-        <td
-          class="text-top"
-        >
-          2018-01-18
+        <td>
+          01/18/2018
         </td>
-        <td
-          class="text-top"
-        >
-          2018-02-18
+        <td>
+          02/18/2018
         </td>
-        <td
-          class="text-top"
-        >
+        <td>
           Active duty military (occupation)
         </td>
       </tr>

containers/ecr-viewer/src/app/tests/utils.test.tsx

@@ -2,6 +2,7 @@ import { isDataAvailable, safeParse } from "@/app/view-data/utils/utils";
 import { loadYamlConfig } from "@/app/api/utils";
 import { Bundle } from "fhir/r4";
 import BundleWithTravelHistory from "./assets/BundleTravelHistory.json";
+import BundleWithTravelHistoryEmpty from "./assets/BundleTravelHistoryEmpty.json";
 import BundleWithPatient from "./assets/BundlePatient.json";
 import BundleWithDeceasedPatient from "./assets/BundlePatientDeceased.json";
 import BundleWithSexualOrientation from "./assets/BundleSexualOrientation.json";
@@ -56,6 +57,14 @@ describe("Utils", () => {
       render(actual.availableData[0].value);
       expect(screen.getByText("Travel History"));
     });
+    it("should not have travel history when there is an empty travel history observation present", () => {
+      const actual = evaluateSocialData(
+        BundleWithTravelHistoryEmpty as unknown as Bundle,
+        mappings,
+      );
+
+      expect(actual.availableData).toBeEmpty();
+    });
     it("should have patient sexual orientation when available", () => {
       const actual = evaluateSocialData(
         BundleWithSexualOrientation as unknown as Bundle,

containers/ecr-viewer/src/app/view-data/components/DataDisplay.tsx

@@ -73,19 +73,16 @@ export const DataTableDisplay: React.FC<{
   item: DisplayDataProps;
   themeColor?: string;
 }> = ({ item, themeColor = "gray" }): React.JSX.Element => {
-  item.dividerLine =
-    item.dividerLine == null || item.dividerLine == undefined
-      ? true
-      : item.dividerLine;
+  const dividerLine = item.dividerLine ?? true;
   return (
-    <div className="grid-row">
-      <div className="grid-col-auto width-full text-pre-line">{item.value}</div>
-      {item.dividerLine ? (
-        <div className={`section__line_${themeColor}`} />
-      ) : (
-        ""
-      )}
-    </div>
+    <>
+      <div className="grid-row">
+        <div className="grid-col-auto width-full text-pre-line">
+          {item.value}
+        </div>
+      </div>
+      {dividerLine && <div className={`section__line_${themeColor}`} />}
+    </>
   );
 };