From 9d26e02aee3ae0b012fefb2aad9f796aa8e04e64 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Fri, 6 Oct 2023 17:40:51 +0530
Subject: [PATCH] Vitals Monitor: Shows relative time for blood pressure and
 hide if stale (30 mins) (#6407)

* shows relative time for bp (part of #6393)

* add comments
---
 .../VitalsMonitor/HL7PatientVitalsMonitor.tsx | 36 ++++++++++++++++---
 src/Components/VitalsMonitor/types.ts         |  2 +-
 .../VitalsMonitor/useHL7VitalsMonitor.ts      |  3 +-
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 1b45fd80ddc..44cadd8263c 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -8,6 +8,15 @@ import { classNames } from "../../Utils/utils";
 import { IVitalsComponentProps, VitalsValueBase } from "./types";
 import { triggerGoal } from "../../Integrations/Plausible";
 import useAuthUser from "../../Common/hooks/useAuthUser";
+import dayjs from "dayjs";
+
+const minutesAgo = (timestamp: string) => {
+  return `${dayjs().diff(dayjs(timestamp), "minute")}m ago`;
+};
+
+const isWithinMinutes = (timestamp: string, minutes: number) => {
+  return dayjs().diff(dayjs(timestamp), "minute") < minutes;
+};
 
 export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
   const { connect, waveformCanvas, data, isOnline } = useHL7VitalsMonitor(
@@ -30,6 +39,10 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
     connect(props.socketUrl);
   }, [props.socketUrl]);
 
+  const bpWithinMaxPersistence = !!(
+    (data.bp?.["date-time"] && isWithinMinutes(data.bp?.["date-time"], 30)) // Max blood pressure persistence is 30 minutes
+  );
+
   return (
     <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
       {props.patientAssetBed && (
@@ -97,24 +110,37 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
 
           {/* Blood Pressure */}
           <div className="flex flex-col p-1">
-            <div className="flex w-full gap-2 font-bold text-orange-500">
+            <div className="flex w-full justify-between gap-2 font-bold text-orange-500">
               <span className="text-sm">NIBP</span>
-              <span className="text-xs">{data.bp?.systolic.unit ?? "--"}</span>
+              <span className="text-xs">
+                {bpWithinMaxPersistence ? data.bp?.systolic.unit ?? "--" : "--"}
+              </span>
+              <span className="text-xs">
+                {data.bp?.["date-time"] && minutesAgo(data.bp?.["date-time"])}
+              </span>
             </div>
             <div className="flex w-full justify-center text-sm font-medium text-orange-500">
               Sys / Dia
             </div>
             <div className="flex w-full justify-center text-2xl font-black text-orange-300 md:text-4xl">
-              <span>{data.bp?.systolic.value ?? "--"}</span>
+              <span>
+                {bpWithinMaxPersistence
+                  ? data.bp?.systolic.value ?? "--"
+                  : "--"}
+              </span>
               <span>/</span>
-              <span>{data.bp?.diastolic.value ?? "--"}</span>
+              <span>
+                {bpWithinMaxPersistence
+                  ? data.bp?.diastolic.value ?? "--"
+                  : "--"}
+              </span>
             </div>
             <div className="flex items-end">
               <span className="flex-1 text-sm font-bold text-orange-500">
                 Mean
               </span>
               <span className="flex-1 text-xl font-bold text-gray-300">
-                {data.bp?.map.value ?? "--"}
+                {bpWithinMaxPersistence ? data.bp?.map.value ?? "--" : "--"}
               </span>
             </div>
           </div>
diff --git a/src/Components/VitalsMonitor/types.ts b/src/Components/VitalsMonitor/types.ts
index 066b7a7cc78..60979a6f9b0 100644
--- a/src/Components/VitalsMonitor/types.ts
+++ b/src/Components/VitalsMonitor/types.ts
@@ -8,7 +8,7 @@ export interface VitalsDataBase {
   "patient-name": string;
 }
 
-export interface VitalsValueBase {
+export interface VitalsValueBase extends VitalsDataBase {
   value: number;
   unit: string;
   interpretation: string;
diff --git a/src/Components/VitalsMonitor/useHL7VitalsMonitor.ts b/src/Components/VitalsMonitor/useHL7VitalsMonitor.ts
index 8b74a2d05d2..ed16cc2edfd 100644
--- a/src/Components/VitalsMonitor/useHL7VitalsMonitor.ts
+++ b/src/Components/VitalsMonitor/useHL7VitalsMonitor.ts
@@ -8,11 +8,12 @@ import useCanvas from "../../Common/hooks/useCanvas";
 import {
   ChannelOptions,
   IVitalsComponentProps,
+  VitalsDataBase,
   VitalsValueBase as VitalsValue,
 } from "./types";
 import { getChannel, getVitalsCanvasSizeAndDuration } from "./utils";
 
-interface VitalsBPValue {
+interface VitalsBPValue extends VitalsDataBase {
   systolic: VitalsValue;
   diastolic: VitalsValue;
   map: VitalsValue;