@kenyaemr/esm-ward-app 7.0.3-pre.88 → 7.0.3-pre.94

package/src/routes.json

@@ -4,28 +4,95 @@
     "webservices.rest": "^2.2.0",
     "emrapi": "^2.0.0 || 2.0.0-SNAPSHOT"
   },
-  "optionalBackendDependencies":{
-     "bedmanagement":{
+  "optionalBackendDependencies": {
+    "bedmanagement": {
       "version": "^6.0.0 || 6.0.0-SNAPSHOT",
       "feature": {
         "flagName": "bedmanagement-module",
-        "label":"Ward App Patient Service",
+        "label": "Ward App Patient Service",
         "description": "This module, if installed, provides services for managing patients admitted to the ward."
       }
-     }
+    }
   },
-   "workspaces": [
+  "extensions": [
     {
-      "name":"admission-requests-cards",
-      "component": "admissionRequestWorkspace",
-      "title":"admissionRequests",
-       "type":"admission-requests"
+      "name": "ward-dashboard-link",
+      "component": "wardDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "meta": {
+        "name": "ward",
+        "slot": "ward-dashboard-slot",
+        "title": "Wards"
+      }
+    },
+    {
+      "component": "root",
+      "name": "ward-dashboard",
+      "slot": "ward-dashboard-slot"
+    },
+    {
+      "component": "wardPatientActionButtonExtension",
+      "name": "ward-patient-action-button",
+      "slot": "action-menu-ward-patient-items-slot"
+    },
+    {
+      "component": "wardPatientNotesActionButtonExtension",
+      "name": "ward-inpatient-notes-form-action-button",
+      "slot": "action-menu-ward-patient-items-slot"
+    },
+    {
+      "component": "coloredObsTagCardRowExtension",
+      "name": "colored-obs-tags-card-row",
+      "slot": "ward-patient-card-slot"
+    },
+    {
+      "name": "transfer-swap-patient-siderail-button",
+      "slot": "action-menu-ward-patient-items-slot",
+      "component": "patientTransferAndSwapWorkspaceSiderailIcon"
+    },
+    {
+      "component": "admissionRequestNoteRowExtension",
+      "name": "admission-request-note-card-row",
+      "slot": "ward-patient-card-slot"
     }
   ],
-  "pages": [
+  "workspaces": [
     {
-      "component": "root",
-      "route": "ward"
+      "name": "admission-requests-workspace",
+      "component": "admissionRequestWorkspace",
+      "title": "admissionRequests",
+      "type": "admission-requests"
+    },
+    {
+      "name": "ward-patient-notes-workspace",
+      "component": "wardPatientNotesWorkspace",
+      "type": "ward-patient-notes",
+      "title": "inpatientNotesWorkspaceTitle",
+      "sidebarFamily": "ward-patient",
+      "hasOwnSidebar": true
+    },
+    {
+      "name": "admit-patient-form-workspace",
+      "component": "admitPatientFormWorkspace",
+      "title": "admissionRequests",
+      "type": "admission-requests"
+    },
+    {
+      "name": "ward-patient-workspace",
+      "component": "wardPatientWorkspace",
+      "type": "ward",
+      "title": "Ward Patient",
+      "width": "extra-wide",
+      "hasOwnSidebar": true,
+      "sidebarFamily": "ward-patient"
+    },
+    {
+      "name": "patient-transfer-swap-workspace",
+      "component": "patientTransferAndSwapWorkspace",
+      "title": "transfers",
+      "type": "transfer-swap-bed-form",
+      "hasOwnSidebar": true,
+      "sidebarFamily": "ward-patient"
     }
   ]
 }

package/src/types/index.ts

@@ -1,45 +1,59 @@
-import {
-  type OpenmrsResource,
-  type OpenmrsResourceStrict,
-  type Person,
-  type Visit,
-  type Location,
-  type Patient,
+import type {
+  Concept,
+  DefaultWorkspaceProps,
+  Location,
+  OpenmrsResource,
+  OpenmrsResourceStrict,
+  Patient,
+  Person,
+  Visit,
 } from '@openmrs/esm-framework';
 import type React from 'react';
 
-export interface WardPatientCardProps {
+export type WardPatientCard = React.FC<WardPatient>;
+
+// WardPatient is a patient admitted to a ward, and/or in a bed on a ward
+export type WardPatient = {
+  /**
+   * The patient and their current visit. These values are taken either
+   * from either the inpatientAdmission object, the inpatientRequest object
+   * or the admissionLocation object (which contains the bed)
+   */
   patient: Patient;
   visit: Visit;
-  bed: Bed;
-}
 
-export type WardPatientCardRow = React.FC<WardPatientCardProps>;
-export type WardPatientCardElement = React.FC<WardPatientCardProps>;
-
-export const patientCardElementTypes = [
-  'bed-number',
-  'patient-name',
-  'patient-age',
-  'patient-address',
-  'patient-obs',
-  'patient-coded-obs-tags',
-  'admission-time',
-] as const;
-export type PatientCardElementType = (typeof patientCardElementTypes)[number];
+  /**
+   * the bed assigned to the patient. This object is only set if the patient
+   * has a bed assigned
+   */
+  bed: Bed;
 
-// a Ward Patient can either be a patient that is already admitted or a
-// patient that is awaiting admission
-export type WardPatient = (AdmittedPatient & { admitted: true }) | (InpatientRequest & { admitted: false });
+  /**
+   * The admission detail. This object is only set if the patient has been
+   * admitted to the ward
+   */
+  inpatientAdmission: InpatientAdmission;
+
+  /**
+   * The admission request. The object is only set if the patient has a
+   * pending admission / transfer request.
+   */
+  inpatientRequest: InpatientRequest;
+};
+export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps {
+  wardPatient: WardPatient;
+}
 
 // server-side types defined in openmrs-module-bedmanagement:
 
-export interface AdmissionLocation {
+// note "AdmissionLocationResponse" isn't the clearest name, but it matches the endpoint; endpoint fetches bed information (including info about patients in those beds) for a location (as provided by the bed management module)
+export interface AdmissionLocationFetchResponse {
   totalBeds: number;
   occupiedBeds: number;
   ward: Location;
   bedLayouts: Array<BedLayout>;
 }
+
 export interface Bed {
   id: number;
   uuid: string;
@@ -83,34 +97,43 @@ interface BedTagMap {
 
 export type BedStatus = 'AVAILABLE' | 'OCCUPIED';
 
-// server-side types defined in openmrs-module-emrapi:
-
-export type DispositionType = 'ADMISSION' | 'TRANSFER' | 'DISCHARGE';
+// GET /rest/emrapi/inpatient/request
+export interface InpatientRequestFetchResponse {
+  results: InpatientRequest[];
+}
 
-// InpatientRequest[] returned by:
-// GET /rest/emrapi/inpatient/admissionRequests
-// GET /rest/emrapi/inpatient/transferRequests
-// GET /rest/emrapi/inpatient/admissionAndTransferRequests
 export interface InpatientRequest {
   patient: Patient;
-  visit: Visit;
-  type: DispositionType;
-
-  // as of now, these fields are not included in the backend
-  encounter?: Encounter;
-  dispositionObs?: Observation;
+  dispositionType: DispositionType;
+  disposition: Concept;
+  dispositionEncounter?: Encounter;
+  dispositionObsGroup?: Observation;
   dispositionLocation?: Location;
-  dispositionDate?: Date;
+  visit: Visit;
 }
 
-// AdmittedPatient[] returned by:
+export type DispositionType = 'ADMIT' | 'TRANSFER' | 'DISCHARGE';
+
 // GET /rest/emrapi/inpatient/visits
-export interface AdmittedPatient {
+export interface InpatientAdmissionFetchResponse {
+  results: InpatientAdmission[];
+}
+
+export interface InpatientAdmission {
   patient: Patient;
   visit: Visit;
-  currentLocation: Location;
-  timeSinceAdmissionInMinutes: number;
-  timeAtInpatientLocationInMinutes: number;
+
+  // the encounter of type "Admission" or "Transfer" that is responsible
+  // for assigning the patient to the current inpatient location. For example,
+  // if the patient has been admitted /transferred to multiple locations as follows:
+  // A -> B -> A
+  // then encounterAssigningToCurrentInpatientLocation
+  // would be the transfer encounter that lands the patient back to A.
+  encounterAssigningToCurrentInpatientLocation: Encounter;
+
+  // the first encounter of the visit that is of encounterType "Admission" or "Transfer",
+  // regardless of the admission location
+  firstAdmissionOrTransferEncounter: Encounter;
 }
 
 // TODO: Move these types to esm-core
@@ -161,3 +184,21 @@ export interface EncounterRole extends OpenmrsResourceStrict {
   description?: string;
   retired?: boolean;
 }
+
+export interface EncounterPayload {
+  encounterDatetime?: string;
+  encounterType: string;
+  patient: string;
+  location: string;
+  encounterProviders?: Array<{ encounterRole: string; provider: string }>;
+  obs: Array<ObsPayload>;
+  form?: string;
+  orders?: Array<any>;
+  visit?: string;
+}
+
+export interface ObsPayload {
+  concept: Concept | string;
+  value?: string;
+  groupMembers?: Array<ObsPayload>;
+}

package/src/ward-patient-card/card-rows/admission-request-note.extension.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { type ObsElementDefinition } from '../../config-schema';
+import { type WardPatientCard } from '../../types';
+import WardPatientObs from '../row-elements/ward-patient-obs';
+import { useConfig } from '@openmrs/esm-framework';
+
+const AdmissionRequestNoteRowExtension: WardPatientCard = ({ patient, visit, inpatientAdmission }) => {
+  const { conceptUuid } = useConfig<ObsElementDefinition>();
+  const config: ObsElementDefinition = {
+    conceptUuid,
+    limit: 0,
+    id: 'admission-note',
+    onlyWithinCurrentVisit: true,
+    orderBy: 'ascending',
+    label: 'Admission Note',
+  };
+
+  // only show if the patient has not been admitted yet
+  const admitted = inpatientAdmission != null;
+  if (admitted) {
+    return <></>;
+  } else {
+    return <WardPatientObs config={config} patient={patient} visit={visit} />;
+  }
+};
+
+export default AdmissionRequestNoteRowExtension;

package/src/ward-patient-card/card-rows/colored-obs-tags-card-row.extension.tsx

@@ -0,0 +1,13 @@
+import { useConfig } from '@openmrs/esm-framework';
+import React from 'react';
+import { type ColoredObsTagsCardRowConfigObject } from '../../config-schema-extension-colored-obs-tags';
+import { type WardPatientCard } from '../../types';
+import WardPatientCodedObsTags from '../row-elements/ward-patient-coded-obs-tags';
+
+const ColoredObsTagsCardRowExtension: WardPatientCard = ({ patient, visit }) => {
+  const config = useConfig<ColoredObsTagsCardRowConfigObject>();
+
+  return <WardPatientCodedObsTags config={config} patient={patient} visit={visit} />;
+};
+
+export default ColoredObsTagsCardRowExtension;

package/src/ward-patient-card/row-elements/ward-patient-age.tsx

@@ -1,18 +1,12 @@
+import { age, type Patient } from '@openmrs/esm-framework';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { type WardPatientCardElement } from '../../types';
 
-const WardPatientAge: WardPatientCardElement = ({ patient }) => {
-  const { t } = useTranslation();
-  // TODO: BED-10
-  // make the backend return patient.person.birthdate so we can use the age() function to calculate age
-  return (
-    <div>
-      {t('yearsOld', '{{age}} yrs', {
-        age: patient?.person?.age,
-      })}
-    </div>
-  );
+export interface WardPatientAgeProps {
+  patient: Patient;
+}
+
+const WardPatientAge: React.FC<WardPatientAgeProps> = ({ patient }) => {
+  return <div>{age(patient.person?.birthdate)}</div>;
 };
 
 export default WardPatientAge;

package/src/ward-patient-card/row-elements/ward-patient-bed-number.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
+import { type Bed } from '../../types';
 import styles from '../ward-patient-card.scss';
-import { type WardPatientCardElement } from '../../types';
 
-const WardPatientBedNumber: WardPatientCardElement = ({ bed }) => {
+const WardPatientBedNumber: React.FC<{ bed: Bed }> = ({ bed }) => {
   if (!bed) {
     return <></>;
   }

package/src/ward-patient-card/row-elements/ward-patient-coded-obs-tags.tsx

@@ -1,13 +1,18 @@
 import { SkeletonText, Tag } from '@carbon/react';
-import { translateFrom, type OpenmrsResource } from '@openmrs/esm-framework';
+import { type Patient, translateFrom, type Visit, type OpenmrsResource } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { type PatientCodedObsTagsElementConfig } from '../../config-schema';
 import { moduleName } from '../../constant';
 import { useObs } from '../../hooks/useObs';
-import { type WardPatientCardElement } from '../../types';
 import styles from '../ward-patient-card.scss';
 import { obsCustomRepresentation, useConceptToTagColorMap } from './ward-patient-obs.resource';
+import { type ColoredObsTagsCardRowConfigObject } from '../../config-schema-extension-colored-obs-tags';
+
+interface WardPatientCodedObsTagsProps {
+  config: ColoredObsTagsCardRowConfigObject;
+  patient: Patient;
+  visit: Visit;
+}
 
 /**
  * The WardPatientCodedObsTags displays observations of coded values of a particular concept in the active visit as tags.
@@ -19,62 +24,58 @@ import { obsCustomRepresentation, useConceptToTagColorMap } from './ward-patient
  * @param config
  * @returns
  */
-const wardPatientCodedObsTags = (config: PatientCodedObsTagsElementConfig) => {
-  const WardPatientCodedObsTags: WardPatientCardElement = ({ patient, visit }) => {
-    const { conceptUuid, summaryLabel, summaryLabelColor, summaryLabelI18nModule } = config;
-    const { data, isLoading } = useObs({ patient: patient.uuid, concept: conceptUuid }, obsCustomRepresentation);
-    const { t } = useTranslation();
-    const { data: conceptToTagColorMap } = useConceptToTagColorMap(config);
-
-    if (isLoading) {
-      return <SkeletonText />;
-    } else {
-      const obsToDisplay = data?.data?.results?.filter((o) => {
-        const matchVisit = o.encounter.visit?.uuid == visit?.uuid;
-        return matchVisit || visit == null; // TODO: remove visit == null hack when server API supports returning visit
-      });
+const WardPatientCodedObsTags: React.FC<WardPatientCodedObsTagsProps> = ({ config, patient, visit }) => {
+  const { conceptUuid, summaryLabel, summaryLabelColor, summaryLabelI18nModule } = config;
+  const { data, isLoading } = useObs({ patient: patient.uuid, concept: conceptUuid }, obsCustomRepresentation);
+  const { t } = useTranslation();
+  const { data: conceptToTagColorMap } = useConceptToTagColorMap(config.tags);
 
-      const summaryLabelToDisplay =
-        summaryLabel != null
-          ? translateFrom(summaryLabelI18nModule ?? moduleName, summaryLabel)
-          : obsToDisplay?.[0]?.concept?.display;
+  if (isLoading) {
+    return <SkeletonText />;
+  } else {
+    const obsToDisplay = data?.data?.results?.filter((o) => {
+      const matchVisit = o.encounter.visit?.uuid == visit?.uuid;
+      return matchVisit || visit == null; // TODO: remove visit == null hack when server API supports returning visit
+    });
 
-      const obsNodes = obsToDisplay?.map((o) => {
-        const { display, uuid } = o.value as OpenmrsResource;
+    const summaryLabelToDisplay =
+      summaryLabel != null
+        ? translateFrom(summaryLabelI18nModule ?? moduleName, summaryLabel)
+        : obsToDisplay?.[0]?.concept?.display;
 
-        const color = conceptToTagColorMap?.get(uuid);
-        if (color) {
-          return (
-            <Tag type={color} key={uuid}>
-              {display}
-            </Tag>
-          );
-        } else {
-          return null;
-        }
-      });
+    const obsNodes = obsToDisplay?.map((o) => {
+      const { display, uuid } = o.value as OpenmrsResource;
 
-      const obsWithNoTagCount = obsNodes.filter((o) => o == null).length;
-      if (obsNodes?.length > 0 || obsWithNoTagCount > 0) {
+      const color = conceptToTagColorMap?.get(uuid);
+      if (color) {
         return (
-          <div>
-            <span className={styles.wardPatientObsLabel}>
-              {obsNodes}
-              {obsWithNoTagCount > 0 ? (
-                <Tag type={summaryLabelColor}>
-                  {t('countItems', '{{count}} {{item}}', { count: obsWithNoTagCount, item: summaryLabelToDisplay })}
-                </Tag>
-              ) : null}
-            </span>
-          </div>
+          <Tag type={color} key={`ward-coded-obs-tag-${o.uuid}`}>
+            {display}
+          </Tag>
         );
       } else {
         return null;
       }
-    }
-  };
+    });
 
-  return WardPatientCodedObsTags;
+    const obsWithNoTagCount = obsNodes.filter((o) => o == null).length;
+    if (obsNodes?.length > 0 || obsWithNoTagCount > 0) {
+      return (
+        <div>
+          <span className={styles.wardPatientObsLabel}>
+            {obsNodes}
+            {obsWithNoTagCount > 0 ? (
+              <Tag type={summaryLabelColor}>
+                {t('countItems', '{{count}} {{item}}', { count: obsWithNoTagCount, item: summaryLabelToDisplay })}
+              </Tag>
+            ) : null}
+          </span>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
 };
 
-export default wardPatientCodedObsTags;
+export default WardPatientCodedObsTags;

package/src/ward-patient-card/row-elements/ward-patient-gender.component.tsx

@@ -0,0 +1,27 @@
+import { type Patient } from '@openmrs/esm-framework';
+import { type TFunction } from 'i18next';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const WardPatientGender: React.FC<{ patient: Patient }> = ({ patient }) => {
+  const { t } = useTranslation();
+
+  return <div>{getGender(t, patient?.person?.gender)}</div>;
+};
+
+export const getGender = (t: TFunction, gender: string): string => {
+  switch (gender) {
+    case 'M':
+      return t('male', 'Male');
+    case 'F':
+      return t('female', 'Female');
+    case 'O':
+      return t('other', 'Other');
+    case 'unknown':
+      return t('unknown', 'Unknown');
+    default:
+      return gender;
+  }
+};
+
+export default WardPatientGender;

package/src/ward-patient-card/row-elements/ward-patient-header-address.tsx

@@ -1,22 +1,23 @@
 import React from 'react';
-import { type WardPatientCardElement } from '../../types';
 import styles from '../ward-patient-card.scss';
-import { type PatientAddressElementConfig } from '../../config-schema';
+import { type Patient } from '@openmrs/esm-framework';
+import { type AddressElementDefinition } from '../../config-schema';
 
-const wardPatientAddress = (config: PatientAddressElementConfig) => {
-  const wardPatientAddress: WardPatientCardElement = ({ patient }) => {
-    const { addressFields } = config;
+export interface WardPatientAddressProps {
+  patient: Patient;
+  config: AddressElementDefinition;
+}
 
-    const preferredAddress = patient?.person?.preferredAddress;
+const WardPatientAddress: React.FC<WardPatientAddressProps> = ({ patient, config }) => {
+  const preferredAddress = patient?.person?.preferredAddress;
 
-    return (
-      <div className={styles.wardPatientAddress}>
-        {addressFields?.map((field, i) => <div key={i}>{preferredAddress?.[field] as string}</div>)}
-      </div>
-    );
-  };
-
-  return wardPatientAddress;
+  return (
+    <>
+      {config.fields?.map((field, i) =>
+        preferredAddress?.[field] ? <div key={i}>{preferredAddress?.[field] as string}</div> : <div key={i}></div>,
+      )}
+    </>
+  );
 };
 
-export default wardPatientAddress;
+export default WardPatientAddress;

package/src/ward-patient-card/row-elements/ward-patient-identifier.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { type IdentifierElementDefinition } from '../../config-schema';
+import { Tag } from '@carbon/react';
+import { type Patient, translateFrom, type PatientIdentifier } from '@openmrs/esm-framework';
+import { moduleName } from '../../constant';
+import { useTranslation } from 'react-i18next';
+
+/** Sort the identifiers by preferred first. The identifier with value of true
+ * takes precedence over false. If both identifiers have same preferred value,
+ * sort them by most recently created or changed. */
+const identifierCompareFunction = (pi1: PatientIdentifier, pi2: PatientIdentifier) => {
+  let comp = (pi2.preferred ? 1 : 0) - (pi1.preferred ? 1 : 0);
+
+  if (comp == 0) {
+    const date1 = pi1.auditInfo.dateChanged ?? pi1.auditInfo.dateCreated;
+    const date2 = pi2.auditInfo.dateChanged ?? pi2.auditInfo.dateCreated;
+    comp = date2.localeCompare(date1);
+  }
+  return comp;
+};
+
+export interface WardPatientIdentifierProps {
+  patient: Patient;
+  /** If the config is not passed, this will be the default identifier element, which uses the preferred identifier type. */
+  config?: IdentifierElementDefinition;
+}
+
+const defaultConfig: IdentifierElementDefinition = {
+  id: 'patient-identifier',
+  identifierTypeUuid: null,
+};
+
+const WardPatientIdentifier: React.FC<WardPatientIdentifierProps> = ({ config: configProp, patient }) => {
+  const { t } = useTranslation();
+  const config = configProp ?? defaultConfig;
+  const { identifierTypeUuid, labelI18nModule: labelModule, label } = config;
+  const patientIdentifiers = patient.identifiers.filter(
+    (patientIdentifier: PatientIdentifier) =>
+      identifierTypeUuid == null || patientIdentifier.identifierType?.uuid === identifierTypeUuid,
+  );
+  patientIdentifiers.sort(identifierCompareFunction);
+  const patientIdentifier = patientIdentifiers[0];
+  const labelToDisplay =
+    label != null ? translateFrom(labelModule ?? moduleName, label) : patientIdentifier?.identifierType?.name;
+  return (
+    <div>
+      {labelToDisplay ? <Tag>{t('identifierTypelabel', '{{label}}:', { label: labelToDisplay })}</Tag> : <></>}
+      <span>{patientIdentifier?.identifier}</span>
+    </div>
+  );
+};
+
+export default WardPatientIdentifier;

package/src/ward-patient-card/row-elements/ward-patient-name.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { type WardPatientCardElement } from '../../types';
+import { type Patient } from '@openmrs/esm-framework';
 import styles from '../ward-patient-card.scss';
 
-const WardPatientName: WardPatientCardElement = ({ patient }) => {
-  // TODO: BED-10
-  // make server return patient.display and use that instead
-  const { givenName, familyName } = patient?.person?.preferredName;
-  const name = `${givenName} ${familyName}`;
-  return <div className={styles.wardPatientName}>{name}</div>;
+export interface WardPatientNameProps {
+  patient: Patient;
+}
+
+const WardPatientName: React.FC<WardPatientNameProps> = ({ patient }) => {
+  return <div className={styles.wardPatientName}>{patient?.person?.preferredName?.display}</div>;
 };
 
 export default WardPatientName;

package/src/ward-patient-card/row-elements/ward-patient-obs.resource.ts

@@ -1,6 +1,6 @@
 import { openmrsFetch, restBaseUrl, type Concept } from '@openmrs/esm-framework';
 import useSWRImmutable from 'swr/immutable';
-import { type PatientCodedObsTagsElementConfig } from '../../config-schema';
+import { type TagConfigObject } from '../../config-schema-extension-colored-obs-tags';
 
 // prettier-ignore
 export const obsCustomRepresentation = 
@@ -12,13 +12,13 @@ export const obsCustomRepresentation =
 //  get the setMembers of a concept set
 const conceptSetCustomRepresentation = 'custom:(uuid,setMembers:(uuid))';
 
-export function useConceptToTagColorMap(codedObsTagsConfig: PatientCodedObsTagsElementConfig) {
+export function useConceptToTagColorMap(tags: Array<TagConfigObject>) {
   // fetch the members of the concept sets and process the data
   // to return conceptToTagColorMap (wrapped in a promise).
   // Let swr cache the result of this function.
   const fetchAndMap = (url: string) => {
     const conceptSetToTagColorMap = new Map<string, string>();
-    for (const tag of codedObsTagsConfig.tags) {
+    for (const tag of tags) {
       const { color, appliedToConceptSets } = tag;
       for (const answer of appliedToConceptSets ?? []) {
         if (!conceptSetToTagColorMap.has(answer)) {
@@ -44,7 +44,7 @@ export function useConceptToTagColorMap(codedObsTagsConfig: PatientCodedObsTagsE
     });
   };
 
-  const conceptSetUuids = codedObsTagsConfig.tags.flatMap((tag) => tag.appliedToConceptSets);
+  const conceptSetUuids = tags.flatMap((tag) => tag.appliedToConceptSets);
   const apiUrl = `${restBaseUrl}/concept?references=${conceptSetUuids.join()}&v=${conceptSetCustomRepresentation}`;
   const conceptToTagColorMap = useSWRImmutable(apiUrl, fetchAndMap);