Ctw 354/manage inconsistent coding in history panel (#88)

Manage inconsistent coding in Conditions History Panel. Now supports
SNOMED, ICD-10, ICD-10CM, ICD-9, ICD-9CM for code matching. Will now
filter out summary and lens tags as well. Also now uses react query for
history searches for faster performance when going back to already
visited history searches.

.changeset/dirty-pandas-dream.md

@@ -0,0 +1,5 @@
+---
+"@zus-health/ctw-component-library": minor
+---
+
+Manage inconsistent coding in Conditions History Panel. Now supports SNOMED, ICD-10, ICD-10CM, ICD-9, ICD-9CM for code matching. Will now filter out summary and lens tags as well.

src/components/content/conditions-history-drawer.tsx

@@ -4,7 +4,7 @@ import { ConditionHistory } from "./conditions-history";
 
 export type ConditionHistoryDrawerProps = {
   className?: string;
-  condition?: ConditionModel;
+  condition: ConditionModel;
   isOpen: boolean;
   onClose: () => void;
 };
@@ -15,11 +15,8 @@ export function ConditionHistoryDrawer({
   isOpen,
   onClose,
 }: ConditionHistoryDrawerProps) {
-  const data = ConditionHistory({
-    icd10Code: condition?.icd10Code,
-    snomedCode: condition?.snomedCode,
-  });
-  const conditionName = condition?.display;
+  const data = ConditionHistory({ condition });
+  const conditionName = condition.display;
   const title = "Condition History";
 
   return (

src/components/content/conditions-history.tsx

@@ -1,7 +1,8 @@
 import { getConditionHistory } from "@/fhir/conditions";
+import { useFhirClientRef } from "@/fhir/utils";
 import { ConditionModel } from "@/models/conditions";
+import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
-import { useCTW } from "../core/ctw-provider";
 import {
   DataListStack,
   DataListStackEntries,
@@ -12,110 +13,108 @@ import { Spinner } from "../core/spinner";
 
 const CONDITION_HISTORY_LIMIT = 10;
 
-export type ConditionHistoryProps = {
-  icd10Code?: string | undefined;
-  snomedCode?: string | undefined;
-};
-
-export function ConditionHistory({
-  icd10Code,
-  snomedCode,
-}: ConditionHistoryProps) {
+export function ConditionHistory({ condition }: { condition: ConditionModel }) {
   const [conditions, setConditions] = useState<DataListStackEntries>([]);
   const [loading, setLoading] = useState(true);
-  const { getCTWFhirClient } = useCTW();
+  const [patientUPID, setPatientUPID] = useState("");
+  const [conditionForSearch, setConditionForSearch] =
+    useState<ConditionModel>();
+  const fhirClientRef = useFhirClientRef();
   const { patientPromise } = usePatient();
+  const historyResponse = useQuery(
+    ["conditions", patientUPID, conditionForSearch],
+    getConditionHistory,
+    {
+      enabled: !!patientUPID && !!fhirClientRef,
+      meta: { fhirClientRef },
+    }
+  );
 
   useEffect(() => {
     async function load() {
-      const fhirClient = await getCTWFhirClient();
+      setConditionForSearch(condition);
       const patientTemp = await patientPromise;
+      if (patientTemp.UPID) {
+        setPatientUPID(patientTemp.UPID);
+      }
 
-      const allConditions = await getConditionHistory(
-        fhirClient,
-        patientTemp.UPID
-      );
-      const models = allConditions.map(
-        (condition) => new ConditionModel(condition)
-      );
-
-      const filteredConditions = models.filter(
-        (condition) =>
-          (condition.icd10Code === icd10Code &&
-            typeof icd10Code !== "undefined") ||
-          (condition.snomedCode === snomedCode &&
-            typeof snomedCode !== "undefined")
-      );
-
-      setConditions(filteredConditions.map((model) => setupData(model)));
-      setLoading(false);
-    }
-
-    load();
-
-    function setupData(condition: ConditionModel): DataListStackEntry {
-      let data = [
-        {
-          label: "Verification Status",
-          value: condition.verificationStatus,
-        },
-        {
-          label: "Clinical Status",
-          value: condition.clinicalStatus,
-        },
-        {
-          label: "Recorded Date",
-          value: condition.recordedDate,
-        },
-      ];
-      const ICD10Fields = [
-        {
-          label: "ICD10 Display",
-          value: condition.icd10Display,
-        },
-        {
-          label: "ICD10 Code",
-          value: condition.icd10Code,
-        },
-        {
-          label: "ICD10 System",
-          value: condition.icd10System,
-        },
-      ];
-      const SNOMEDFields = [
-        {
-          label: "SNOMED Display",
-          value: condition.snomedDisplay,
-        },
-        {
-          label: "SNOMED Code",
-          value: condition.snomedCode,
-        },
-        {
-          label: "SNOMED System",
-          value: condition.snomedSystem,
-        },
-      ];
+      if (historyResponse.data) {
+        const filteredConditions = historyResponse.data.map(
+          (c) => new ConditionModel(c)
+        );
 
-      if (icd10Code) {
-        data = data.concat(ICD10Fields);
+        setConditions(filteredConditions.map((model) => setupData(model)));
+        setLoading(false);
       }
 
-      if (snomedCode) {
-        data = data.concat(SNOMEDFields);
+      function setupData(
+        conditionForSetup: ConditionModel
+      ): DataListStackEntry {
+        let data = [
+          {
+            label: "Verification Status",
+            value: conditionForSetup.verificationStatus,
+          },
+          {
+            label: "Clinical Status",
+            value: conditionForSetup.clinicalStatus,
+          },
+          {
+            label: "Recorded Date",
+            value: conditionForSetup.recordedDate,
+          },
+        ];
+        const ICD10Fields = [
+          {
+            label: "ICD10 Display",
+            value: conditionForSetup.icd10Display,
+          },
+          {
+            label: "ICD10 Code",
+            value: conditionForSetup.icd10Code,
+          },
+          {
+            label: "ICD10 System",
+            value: conditionForSetup.icd10System,
+          },
+        ];
+        const SNOMEDFields = [
+          {
+            label: "SNOMED Display",
+            value: conditionForSetup.snomedDisplay,
+          },
+          {
+            label: "SNOMED Code",
+            value: conditionForSetup.snomedCode,
+          },
+          {
+            label: "SNOMED System",
+            value: conditionForSetup.snomedSystem,
+          },
+        ];
+
+        if (conditionForSetup.icd10Code) {
+          data = data.concat(ICD10Fields);
+        }
+
+        if (conditionForSetup.snomedCode) {
+          data = data.concat(SNOMEDFields);
+        }
+
+        return {
+          id: conditionForSetup.id,
+          data: [...data],
+        };
       }
-
-      return {
-        id: condition.id,
-        data: [...data],
-      };
     }
 
+    load();
+
     return function cleanup() {
       setConditions([]);
       setLoading(true);
     };
-  }, [getCTWFhirClient, icd10Code, snomedCode, patientPromise]);
+  }, [condition, patientPromise, historyResponse.data]);
 
   if (conditions.length === 0 && !loading) {
     return <div>No history found.</div>;

src/components/core/ctw-provider.tsx

@@ -85,11 +85,11 @@ function CTWProvider({ theme, children, ...ctwState }: CTWProviderProps) {
 
   return (
     <div style={mapToCSSVar(theme?.colors || {})}>
-      <QueryClientProvider client={queryClient}>
-        <CTWStateContext.Provider value={providerState}>
+      <CTWStateContext.Provider value={providerState}>
+        <QueryClientProvider client={queryClient}>
           {children}
-        </CTWStateContext.Provider>
-      </QueryClientProvider>
+        </QueryClientProvider>
+      </CTWStateContext.Provider>
     </div>
   );
 }

src/fhir/conditions.ts

@@ -1,6 +1,5 @@
 import { ConditionModel } from "@/models/conditions";
 import { QueryFunctionContext } from "@tanstack/react-query";
-import Client from "fhir-kit-client";
 import { sortBy } from "lodash";
 
 import {
@@ -19,10 +18,10 @@ import {
 import { getFhirClientFromQuery } from "./utils";
 
 export const CONDITION_CODE_SYSTEMS = [
-  SYSTEM_ICD9_CM,
   SYSTEM_ICD9,
-  SYSTEM_ICD10_CM,
+  SYSTEM_ICD9_CM,
   SYSTEM_ICD10,
+  SYSTEM_ICD10_CM,
   SYSTEM_SNOMED,
 ];
 
@@ -38,6 +37,11 @@ export type ConditionFilters = {
   "clinical-status"?: ClinicalStatus | ClinicalStatus[];
 };
 
+export type QueryKeyConditionHistory = [
+  string,
+  string,
+  ConditionModel | undefined
+];
 export type QueryKeyPatientConditions = [string, string, ConditionFilters];
 export type QueryKeyOtherProviderConditions = [string, string];
 
@@ -87,18 +91,31 @@ export async function getOtherProviderConditions(
 }
 
 export async function getConditionHistory(
-  fhirClient: Client,
-  patientUPID: string
+  queryParams: QueryFunctionContext<QueryKeyConditionHistory>
 ) {
   try {
+    const { meta, queryKey } = queryParams;
+    const fhirClient = getFhirClientFromQuery(meta);
+    const [_, patientUPID, condition] = queryKey;
+
+    if (!condition) {
+      throw Error("Condition is required");
+    }
+
+    const tokens = condition.knownCodings.map(
+      (coding) => `${coding.system}|${coding.code}`
+    );
+
     const { resources: conditions } = await searchCommonRecords(
       "Condition",
       fhirClient,
       {
         patientUPID,
         _include: ["Condition:patient", "Condition:encounter"],
+        code: tokens.join(","),
       }
     );
+
     return conditions;
   } catch (e) {
     throw new Error(

src/fhir/search-helpers.ts

@@ -100,7 +100,7 @@ export async function searchCommonRecords<T extends ResourceTypeString>(
 ): Promise<SearchReturn<T>> {
   return searchAllRecords(resourceType, fhirClient, {
     ...searchParams,
-    "_tag:not": LENS_TAGS.join(","),
+    "_tag:not": [...LENS_TAGS, ...SUMMARY_TAGS].join(","),
   });
 }
 

src/fhir/system-urls.ts

@@ -1,12 +1,12 @@
 export const SYSTEM_CCS =
   "https://www.hcup-us.ahrq.gov/toolssoftware/ccsr/dxccsr.jsp";
 
-export const SYSTEM_CONDITION_VERIFICATION_STATUS =
-  "http://terminology.hl7.org/CodeSystem/condition-ver-status";
-
 export const SYSTEM_CONDITION_CLINICAL =
   "http://terminology.hl7.org/CodeSystem/condition-clinical";
 
+export const SYSTEM_CONDITION_VERIFICATION_STATUS =
+  "http://terminology.hl7.org/CodeSystem/condition-ver-status";
+
 export const SYSTEM_ICD9 = "http://hl7.org/fhir/sid/icd-9";
 
 export const SYSTEM_ICD9_CM = "http://hl7.org/fhir/sid/icd-9-cm";

src/models/conditions.ts

@@ -53,6 +53,10 @@ export class ConditionModel {
     );
   }
 
+  get ccsGrouping(): string | undefined {
+    return findCoding(SYSTEM_CCS, this.resource.code)?.display;
+  }
+
   get clinicalStatus(): string {
     return codeableConceptLabel(this.resource.clinicalStatus);
   }
@@ -73,14 +77,6 @@ export class ConditionModel {
     );
   }
 
-  get knownCodings(): fhir4.Coding[] {
-    return compact(
-      CONDITION_CODE_SYSTEMS.map((system) =>
-        findCoding(system, this.resource.code)
-      )
-    );
-  }
-
   get icd10Code(): string | undefined {
     return findCoding(SYSTEM_ICD10, this.resource.code)?.code;
   }
@@ -93,14 +89,18 @@ export class ConditionModel {
     return findCoding(SYSTEM_ICD10, this.resource.code)?.display;
   }
 
-  get ccsGrouping(): string | undefined {
-    return findCoding(SYSTEM_CCS, this.resource.code)?.display;
-  }
-
   get id(): string {
     return this.resource.id || "";
   }
 
+  get knownCodings(): fhir4.Coding[] {
+    return compact(
+      CONDITION_CODE_SYSTEMS.map((system) =>
+        findCoding(system, this.resource.code)
+      )
+    );
+  }
+
   get notes(): string[] {
     return this.resource.note?.map((note) => note.text) || [];
   }