List lab values

app/(dashboard)/patients/[id]/Labs.tsx

@@ -0,0 +1,41 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+'use client'
+import { createColumnHelper } from '@tanstack/table-core'
+import { type LabsData } from '@/app/(dashboard)/patients/utils'
+import { DataTable } from '@/packages/design-system/src/components/DataTable'
+
+interface LabsProps extends LabsData {}
+
+type Observation = LabsData['observations'][number]
+
+const columnHelper = createColumnHelper<Observation>()
+const columns = [
+  columnHelper.accessor('effectiveDateTime', {
+    header: 'Date',
+    cell: (props) => {
+      const value = props.getValue()
+      const date = value ? new Date(value) : undefined
+      return date?.toLocaleDateString() ?? ''
+    },
+  }),
+  columnHelper.accessor('type', {
+    header: 'Type',
+  }),
+  columnHelper.accessor('value', {
+    header: 'Value',
+    cell: (props) => {
+      const observation = props.row.original
+      return `${observation.value} ${observation.unit}`
+    },
+  }),
+]
+
+export const Labs = ({ observations }: LabsProps) => {
+  return <DataTable columns={columns} data={observations} />
+}

app/(dashboard)/patients/[id]/page.tsx

@@ -15,6 +15,7 @@
 } from '@/app/(dashboard)/patients/PatientForm'
 import {
   getFormProps,
+  getLabsData,
   getMedicationsData,
 } from '@/app/(dashboard)/patients/utils'
 import { getAuthenticatedOnlyApp } from '@/modules/firebase/guards'
@@ -39,6 +40,7 @@
 import { getUserName } from '@/packages/design-system/src/modules/auth/user'
 import { PageTitle } from '@/packages/design-system/src/molecules/DashboardLayout'
 import { GenerateHealthSummary } from './GenerateHealthSummary'
+import { Labs } from './Labs'
 import { DashboardLayout } from '../../DashboardLayout'
 import { Medications, type MedicationsFormSchema } from '../Medications'
 
@@ -70,6 +72,7 @@
 enum Tab {
   information = 'information',
   medications = 'medications',
+  labs = 'labs',
 }
 
 const PatientPage = async ({ params }: PatientPageProps) => {
@@ -176,6 +179,9 @@
           <TabsTrigger value={Tab.medications} className="grow">
             Medications
           </TabsTrigger>
+          <TabsTrigger value={Tab.labs} className="grow">
+            Labs
+          </TabsTrigger>
         </TabsList>
         <TabsContent value={Tab.information}>
           <PatientForm
@@ -194,6 +200,9 @@
             }}
           />
         </TabsContent>
+        <TabsContent value={Tab.labs}>
+          <Labs {...await getLabsData({ userId, resourceType })} />
+        </TabsContent>
       </Tabs>
     </DashboardLayout>
   )

app/(dashboard)/patients/utils.ts

@@ -9,7 +9,12 @@
 import { query, where } from 'firebase/firestore'
 import { getAuthenticatedOnlyApp } from '@/modules/firebase/guards'
 import { mapAuthData } from '@/modules/firebase/user'
-import { getDocsData, UserType } from '@/modules/firebase/utils'
+import {
+  getDocsData,
+  ObservationType,
+  type ResourceType,
+  UserType,
+} from '@/modules/firebase/utils'
 import { getUserOrganizations } from '@/modules/user/queries'
 
 export const getUserClinicians = async () => {
@@ -120,4 +125,36 @@
   return { medications }
 }
 
+export const getLabsData = async ({
+  userId,
+  resourceType,
+}: {
+  userId: string
+  resourceType: ResourceType
+}) => {
+  const { refs } = await getAuthenticatedOnlyApp()
+  const rawObservations = await Promise.all(
+    Object.values(ObservationType).map(async (type) => {
+      return {
+        type,
+        data: await getDocsData(
+          refs.userObservation({ userId, resourceType, observationType: type }),
+        ),
+      }
+    }),
+  )
+
+  const observations = rawObservations.flatMap((observations) =>
+    observations.data.map((observation) => ({
+      effectiveDateTime: observation.effectiveDateTime,
+      value: observation.valueQuantity?.value,
+      unit: observation.valueQuantity?.unit,
+      type: observations.type,
+    })),
+  )
+
+  return { observations }
+}
+
+export type LabsData = Awaited<ReturnType<typeof getLabsData>>
 export type MedicationsData = Awaited<ReturnType<typeof getMedicationsData>>

modules/firebase/models/baseTypes.ts

@@ -38,6 +38,10 @@ export interface FHIRPeriod {
   end?: string
 }
 
+export interface FHIRResource extends FHIRElement {
+  resourceType: string
+}
+
 export interface FHIRRatio {
   numerator?: FHIRSimpleQuantity
   denominator?: FHIRSimpleQuantity

modules/firebase/models/medication.ts

@@ -12,6 +12,8 @@
   type FHIRElement,
   type FHIRRatio,
   type FHIRReference,
+  type FHIRPeriod,
+  type FHIRResource,
 } from './baseTypes.js'
 
 export interface FHIRMedication extends FHIRElement {
@@ -64,6 +66,32 @@
   videoPath: string
 }
 
+export interface FHIRObservationComponent {
+  code: FHIRCodeableConcept
+  valueQuantity?: FHIRSimpleQuantity
+}
+
+export enum FHIRObservationStatus {
+  registered = 'registered',
+  preliminary = 'preliminary',
+  final = 'final',
+  amended = 'amended',
+  corrected = 'corrected',
+  cancelled = 'cancelled',
+  entered_in_error = 'entered-in-error',
+  unknown = 'unknown',
+}
+
+export interface FHIRObservation extends FHIRResource {
+  status: FHIRObservationStatus
+  code: FHIRCodeableConcept
+  component?: FHIRObservationComponent[]
+  valueQuantity?: FHIRSimpleQuantity
+  effectivePeriod?: FHIRPeriod
+  effectiveDateTime?: string
+  effectiveInstant?: string
+}
+
 export const getMedicationRequestData = (medication: {
   medication: string
   drug: string

modules/firebase/utils.ts

@@ -20,7 +20,9 @@
   type FHIRMedication,
   type FHIRMedicationRequest,
   type MedicationClass,
+  type FHIRObservation,
 } from '@/modules/firebase/models/medication'
+import { strategy } from '@/packages/design-system/src/utils/misc'
 
 export interface Organization {
   id: string
@@ -77,14 +79,37 @@
   medicationClasses: 'medicationClasses',
   drugs: 'drugs',
   medicationRequests: 'medicationRequests',
+  creatinineObservations: 'creatinineObservations',
+  eGfrObservations: 'eGfrObservations',
+  potassiumObservations: 'potassiumObservations',
 }
 
 export type ResourceType = 'invitation' | 'user'
 
 export const userPath = (resourceType: ResourceType) =>
-  resourceType === 'invitation' ?
-    collectionNames.invitations
-  : collectionNames.users
+  strategy(
+    {
+      invitation: collectionNames.invitations,
+      user: collectionNames.users,
+    },
+    resourceType,
+  )
+
+export enum ObservationType {
+  creatinine = 'creatinine',
+  eGFR = 'eGFR',
+  potassium = 'potassium',
+}
+
+export const observationPath = (type: ObservationType) =>
+  strategy(
+    {
+      [ObservationType.creatinine]: collectionNames.creatinineObservations,
+      [ObservationType.eGFR]: collectionNames.eGfrObservations,
+      [ObservationType.potassium]: collectionNames.potassiumObservations,
+    },
+    type,
+  )
 
 export const getCollectionRefs = (db: Firestore) => ({
   users: () =>
@@ -125,6 +150,19 @@
       db,
       collectionNames.medicationClasses,
     ) as CollectionReference<MedicationClass>,
+  userObservation: ({
+    userId,
+    resourceType,
+    observationType,
+  }: {
+    userId: string
+    resourceType: ResourceType
+    observationType: ObservationType
+  }) =>
+    collection(
+      db,
+      `/${userPath(resourceType)}/${userId}/${observationPath(observationType)}`,
+    ) as CollectionReference<FHIRObservation>,
 })
 
 export const getDocumentsRefs = (db: Firestore) => ({
@@ -157,6 +195,21 @@
       db,
       `/${userPath(resourceType)}/${userId}/${collectionNames.medicationRequests}/${medicationRequestId}`,
     ) as DocumentReference<FHIRMedicationRequest>,
+  userObservation: ({
+    userId,
+    resourceType,
+    observationType,
+    observationId,
+  }: {
+    userId: string
+    resourceType: ResourceType
+    observationType: ObservationType
+    observationId: string
+  }) =>
+    doc(
+      db,
+      `/${userPath(resourceType)}/${userId}/${observationPath(observationType)}/${observationId}`,
+    ) as DocumentReference<FHIRObservation>,
 })
 
 interface Result<T> {

packages/design-system/src/components/DataTable/DataTable.stories.tsx

@@ -8,6 +8,7 @@
 import { type Meta, type StoryObj } from '@storybook/react'
 import { DataTable } from './DataTable'
 import { peopleColumns, peopleData, type Person } from './DataTable.mocks'
+import { Button } from '../Button'
 
 const meta: Meta<typeof DataTable> = {
   title: 'Components/DataTable',
@@ -36,3 +37,16 @@ export const Paginated: Story = {
     pageSize: 2,
   },
 }
+
+export const HeaderAction: Story = {
+  args: {
+    ...Default.args,
+    header: (
+      <>
+        <Button className="ml-auto" size="sm">
+          Action
+        </Button>
+      </>
+    ),
+  },
+}

packages/design-system/src/components/DataTable/DataTable.tsx

@@ -16,7 +16,7 @@ import {
   useReactTable,
 } from '@tanstack/react-table'
 import { type TableOptions } from '@tanstack/table-core'
-import { useState } from 'react'
+import { type ReactNode, useState } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 import { fuzzyFilter } from './DataTable.utils'
 import { GlobalFilterInput } from './GlobalFilterInput'
@@ -46,6 +46,7 @@ export interface DataTableProps<Data>
    * */
   entityName?: string
   pageSize?: number
+  header?: ReactNode
 }
 
 export const DataTable = <Data,>({
@@ -54,6 +55,7 @@ export const DataTable = <Data,>({
   entityName,
   data,
   pageSize = 50,
+  header,
   ...props
 }: DataTableProps<Data>) => {
   const [sorting, setSorting] = useState<SortingState>([])
@@ -95,11 +97,12 @@ export const DataTable = <Data,>({
   const pageCount = table.getPageCount()
   return (
     <div className={cn('rounded-md border bg-surface-primary', className)}>
-      <header className="flex border-b p-4">
+      <header className="flex items-center border-b p-4">
         <GlobalFilterInput
           onChange={(event) => setGlobalFilterDebounced(event.target.value)}
           entityName={entityName}
         />
+        {header}
       </header>
       <Table>
         <TableHeader>

packages/design-system/src/utils/misc/misc.ts

@@ -53,3 +53,11 @@
  * */
 export const times = <T>(length: number, callback: (index: number) => T) =>
   new Array(length).fill(undefined).map((_, index) => callback(index))
+
+/**
+ * Utility to dynamically resolve strategy pattern
+ */
+export const strategy = <T extends string | number | symbol, F>(
+  record: Record<T, F>,
+  enumValue: T,
+) => record[enumValue]