Display resource narrative

package.json

@@ -26,6 +26,7 @@
     "@types/react-pdf": "^5.0.9",
     "@types/react-redux": "^7.1.7",
     "@types/react-syntax-highlighter": "^13.5.2",
+    "dompurify": "^2.3.5",
     "eslint": "^7.11.0",
     "faker": "^5.5.3",
     "fishery": "^2.1.0",
@@ -68,6 +69,7 @@
     ]
   },
   "devDependencies": {
+    "@types/dompurify": "^2.3.3",
     "@typescript-eslint/parser": "^5.3.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.5.0",

src/app/routes/Patient.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
 
-import type { IResourceList } from "@ahryman40k/ts-fhir-types/lib/R4";
 import BackIcon from "@mui/icons-material/ArrowBack";
 import { Button, CircularProgress, Container } from "@mui/material";
 import { makeStyles } from "@mui/styles";
@@ -16,6 +15,7 @@ import ResourceFilterSelector from "features/resourceFilters/ResourceFilterSelec
 import { selectResourceFilters } from "features/resourceFilters/resourceFilterSlice";
 import ResourceCard from "features/resources/ResourceCard";
 import { sortResourcesByDate } from "features/resources/utils";
+import type { DomainResourceList } from "models/types";
 import { useApiPatientEverythingListQuery } from "services/api/api";
 
 const useStyles = makeStyles((theme) => ({
@@ -83,7 +83,7 @@ const Patient = (): JSX.Element => {
     () =>
       patientResources.reduce(
         (
-          acc: Partial<Record<IResourceList["resourceType"], number>>,
+          acc: Partial<Record<DomainResourceList["resourceType"], number>>,
           resource
         ) => ({
           ...acc,

src/app/routes/Router.tsx

@@ -3,7 +3,8 @@ import React from "react";
 import { makeStyles } from "@mui/styles";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
-import { PUBLIC_URL } from "../../constants";
+import { PUBLIC_URL } from "models/constants";
+
 import Home from "./Home";
 import PageNotFound from "./PageNotFound";
 import Patient from "./Patient";

src/common/components/DateInfo.tsx

@@ -1,15 +1,15 @@
 import React, { useMemo } from "react";
 
-import type { IResourceList } from "@ahryman40k/ts-fhir-types/lib/R4";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 import { Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { DateTime } from "luxon";
 
 import { getResourceDateOrPeriod } from "features/resources/utils";
+import type { DomainResourceList } from "models/types";
 
 type DateInfoProps = {
-  resource: IResourceList;
+  resource: DomainResourceList;
 };
 
 const useStyles = makeStyles((theme) => ({

src/common/components/InnerHTMLDiv.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import DOMPurify from "dompurify";
+
+type InnerHTMLDivProps = Omit<
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+  "dangerouslySetInnerHTML"
+> & {
+  innerHTML?: string;
+};
+
+const InnterHTMLDiv = ({
+  innerHTML,
+  ...props
+}: InnerHTMLDivProps): JSX.Element => {
+  const sanitizedHTML = innerHTML && DOMPurify.sanitize(innerHTML);
+  return (
+    <>
+      {sanitizedHTML && (
+        <div {...props} dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+      )}
+    </>
+  );
+};
+
+export default InnterHTMLDiv;

src/common/components/Tooltip.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import {
+  Tooltip as MuiTooltip,
+  TooltipProps as MuiTooltipProps,
+} from "@mui/material";
+
+type TooltipProps = Omit<MuiTooltipProps, "title"> & {
+  title?: React.ReactNode;
+};
+
+const Tooltip = ({ title, children, ...props }: TooltipProps): JSX.Element => {
+  return title ? (
+    <MuiTooltip title={title} {...props}>
+      {children}
+    </MuiTooltip>
+  ) : (
+    children
+  );
+};
+
+export default Tooltip;

src/features/conditions/ConditionCard.tsx

@@ -8,9 +8,9 @@ import { useTranslation } from "react-i18next";
 import DateInfo from "common/components/DateInfo";
 import Tag from "common/components/Tag";
 import ResourceCardActions from "features/resources/ResourceCardActions";
+import ResourceCardContent from "features/resources/ResourceCardContent";
 import { getResourceTagValues } from "features/resources/utils";
-
-import { TERMINOLOGY_SYSTEM_URL } from "../../constants";
+import { TERMINOLOGY_SYSTEM_URL } from "models/constants";
 
 const useStyles = makeStyles((theme) => ({
   flexContainer: {
@@ -65,6 +65,7 @@ const ConditionCard = ({ condition }: ConditionCardProps): JSX.Element => {
           </div>
         }
       />
+      <ResourceCardContent resource={condition} />
       {softwareName && (
         <CardContent>
           <Typography variant="caption">

src/features/documentReferences/DocumentReferenceCard.tsx

@@ -8,8 +8,8 @@ import { useTranslation } from "react-i18next";
 import DateInfo from "common/components/DateInfo";
 import Tag from "common/components/Tag";
 import ResourceCardActions from "features/resources/ResourceCardActions";
-
-import { TERMINOLOGY_SYSTEM_URL } from "../../constants";
+import ResourceCardContent from "features/resources/ResourceCardContent";
+import { TERMINOLOGY_SYSTEM_URL } from "models/constants";
 
 const useStyles = makeStyles((theme) => ({
   flexContainer: {
@@ -48,6 +48,7 @@ const DocumentReferenceCard = ({
           </div>
         }
       />
+      <ResourceCardContent resource={documentReference} />
       {softwareName && (
         <CardContent>
           <Typography variant="caption">

src/features/encounters/EncounterCard.tsx

@@ -8,9 +8,9 @@ import { useTranslation } from "react-i18next";
 import DateInfo from "common/components/DateInfo";
 import Tag from "common/components/Tag";
 import ResourceCardActions from "features/resources/ResourceCardActions";
+import ResourceCardContent from "features/resources/ResourceCardContent";
 import { getResourceTagValues } from "features/resources/utils";
-
-import { TERMINOLOGY_SYSTEM_URL } from "../../constants";
+import { TERMINOLOGY_SYSTEM_URL } from "models/constants";
 
 const useStyles = makeStyles((theme) => ({
   flexContainer: {
@@ -54,6 +54,7 @@ const EncounterCard = ({ encounter }: EncounterCardProps): JSX.Element => {
           </div>
         }
       />
+      <ResourceCardContent resource={encounter} />
       {softwareName && (
         <CardContent>
           <Typography variant="caption">

src/features/patients/PatientInfo.tsx

@@ -9,6 +9,8 @@ import { DateTime } from "luxon";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 
+import InnterHTMLDiv from "common/components/InnerHTMLDiv";
+import Tooltip from "common/components/Tooltip";
 import { useApiPatientsListQuery } from "services/api/api";
 
 import { getINS, getIPP } from "./utils";
@@ -74,11 +76,16 @@ const PatientInfo = (): JSX.Element => {
         <CircularProgress />
       ) : (
         <>
-          <div className={classes.columnContainer}>
-            <Avatar classes={{ root: classes.avatar }}>
-              <PersonIcon fontSize="large" />
-            </Avatar>
-          </div>
+          <Tooltip
+            followCursor
+            title={<InnterHTMLDiv innerHTML={patient?.text?.div} />}
+          >
+            <div className={classes.columnContainer}>
+              <Avatar classes={{ root: classes.avatar }}>
+                <PersonIcon fontSize="large" />
+              </Avatar>
+            </div>
+          </Tooltip>
           <div className={classes.columnContainer}>
             <Typography
               className={classes.nameTitle}

src/features/resourceFilters/ResourceFilterSelector.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo } from "react";
 
-import type { IResourceList } from "@ahryman40k/ts-fhir-types/lib/R4";
 import {
   Checkbox,
   CircularProgress,
@@ -13,6 +12,7 @@ import { makeStyles } from "@mui/styles";
 import { useTranslation } from "react-i18next";
 
 import { useAppDispatch, useAppSelector } from "app/store";
+import type { DomainResourceList } from "models/types";
 
 import {
   resourceFilterSet,
@@ -32,8 +32,10 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 type ResourceFilterSelectorProps = {
-  filters: Set<IResourceList["resourceType"]>;
-  resourceCountDict: Partial<Record<IResourceList["resourceType"], number>>;
+  filters: Set<DomainResourceList["resourceType"]>;
+  resourceCountDict: Partial<
+    Record<DomainResourceList["resourceType"], number>
+  >;
   isFetching?: boolean;
 };
 
@@ -65,9 +67,10 @@ const ResourceFilterSelector = ({
     }
   };
 
-  const handleFilterClick = (filter: IResourceList["resourceType"]) => () => {
-    dispatch(resourceFilterSet(filter));
-  };
+  const handleFilterClick =
+    (filter: DomainResourceList["resourceType"]) => () => {
+      dispatch(resourceFilterSet(filter));
+    };
 
   return (
     <Paper className={classes.container}>

src/features/resourceFilters/resourceFilterSlice.ts

@@ -1,9 +1,9 @@
-import type { IResourceList } from "@ahryman40k/ts-fhir-types/lib/R4";
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 import { RootState } from "app/store";
+import type { DomainResourceList } from "models/types";
 
-type ResourceFilterSlice = { filters: IResourceList["resourceType"][] };
+type ResourceFilterSlice = { filters: DomainResourceList["resourceType"][] };
 
 const initialState: ResourceFilterSlice = {
   filters: [],
@@ -15,7 +15,7 @@ const resourceFilterSlice = createSlice({
   reducers: {
     resourceFilterSet: (
       state,
-      { payload }: PayloadAction<IResourceList["resourceType"]>
+      { payload }: PayloadAction<DomainResourceList["resourceType"]>
     ) => {
       if (state.filters.some((filter) => filter === payload)) {
         state.filters = state.filters.filter((filter) => filter !== payload);
@@ -25,7 +25,7 @@ const resourceFilterSlice = createSlice({
     },
     resourceFilterListSet: (
       state,
-      { payload }: PayloadAction<IResourceList["resourceType"][]>
+      { payload }: PayloadAction<DomainResourceList["resourceType"][]>
     ) => {
       return { filters: payload };
     },
@@ -42,6 +42,6 @@ export const {
 } = resourceFilterSlice.actions;
 export const selectResourceFilters = (
   state: RootState
-): IResourceList["resourceType"][] => state.resourceFilter.filters;
+): DomainResourceList["resourceType"][] => state.resourceFilter.filters;
 
 export default resourceFilterSlice.reducer;

src/features/resources/ResourceCard.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
 
-import type { IResourceList } from "@ahryman40k/ts-fhir-types/lib/R4";
 import { Card, CardHeader } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 
@@ -9,8 +8,10 @@ import Tag from "common/components/Tag";
 import ConditionCard from "features/conditions/ConditionCard";
 import DocumentReferenceCard from "features/documentReferences/DocumentReferenceCard";
 import EncounterCard from "features/encounters/EncounterCard";
+import type { DomainResourceList } from "models/types";
 
 import ResourceCardActions from "./ResourceCardActions";
+import ResourceCardContent from "./ResourceCardContent";
 import { getResourceTagValues } from "./utils";
 
 const useStyles = makeStyles((theme) => ({
@@ -23,7 +24,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 type ResourceCardProps = {
-  resource: IResourceList;
+  resource: DomainResourceList;
 };
 
 const ResourceCard = ({ resource }: ResourceCardProps): JSX.Element => {
@@ -55,6 +56,7 @@ const ResourceCard = ({ resource }: ResourceCardProps): JSX.Element => {
                 </div>
               }
             />
+            <ResourceCardContent resource={resource} />
             <ResourceCardActions resource={resource} />
           </Card>
         );

src/features/resources/ResourceCardActions.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo, useState } from "react";
 
-import type { IResourceList } from "@ahryman40k/ts-fhir-types/lib/R4";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { CardActions, Collapse, Button, CardContent } from "@mui/material";
 import { DefaultTheme, makeStyles } from "@mui/styles";
@@ -9,6 +8,7 @@ import SyntaxHighlighter from "react-syntax-highlighter";
 import { monokai } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 import PDFDialogButton from "common/components/PDFDialogButton";
+import type { DomainResourceList } from "models/types";
 
 const useStyles = makeStyles<DefaultTheme, { isExpanded: boolean }>(
   (theme) => ({
@@ -33,7 +33,7 @@ const useStyles = makeStyles<DefaultTheme, { isExpanded: boolean }>(
 );
 
 type ResourceCardActionsType = {
-  resource: IResourceList;
+  resource: DomainResourceList;
 };
 
 const ResourceCardActions = ({

src/features/resources/ResourceCardContent.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import { CardContent } from "@mui/material";
+
+import InnterHTMLDiv from "common/components/InnerHTMLDiv";
+import type { DomainResourceList } from "models/types";
+
+type ResourceCardContentProps = {
+  resource: DomainResourceList;
+};
+
+const ResourceCardContent = ({
+  resource,
+}: ResourceCardContentProps): JSX.Element => {
+  return (
+    <>
+      {resource.text?.div && (
+        <CardContent>
+          <InnterHTMLDiv innerHTML={resource.text.div} />
+        </CardContent>
+      )}
+    </>
+  );
+};
+
+export default ResourceCardContent;

src/features/resources/__tests__/ResourceCard.test.tsx

@@ -4,13 +4,13 @@ import userEvent from "@testing-library/user-event";
 import { DateTime } from "luxon";
 
 import { render, screen } from "common/tests/test-utils";
+import { TERMINOLOGY_SYSTEM_URL } from "models/constants";
 import {
   carePlanFactory,
   conditionFactory,
   encounterFactory,
 } from "services/api/factory";
 
-import { TERMINOLOGY_SYSTEM_URL } from "../../../constants";
 import ResourceCard from "../ResourceCard";
 
 const condition = conditionFactory.build();