@openmrs/esm-cohort-builder-app 3.0.0

package/src/cohort-builder.scss

@@ -0,0 +1,126 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.heading {
+  @include type.type-style('productive-heading-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-05;;
+}
+
+.heading:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.mainContainer {
+  padding-bottom: 1.5rem;
+  background: $ui-01;
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  padding: 1rem;
+  font-size: 1.2rem;
+}
+
+.desktopContainer {
+  width: 50%;
+}
+
+.tabletContainer {
+  width: 90%;
+}
+
+.cohortBuilder {
+  :global(.cds--date-picker.cds--date-picker--single .cds--date-picker__input) {
+    width: auto;
+  }
+
+  :global(.cds--tab-content) {
+    width: 80%;
+    padding: 0;
+  }
+
+  :global(.cds--inline-loading__text) {
+    color: white
+  }
+
+  :global(.cds--tab--list) {
+    flex-direction: column;
+    margin: 1rem;
+  }
+
+  :global(.cds--tabs) {
+    width: auto;
+    max-height: 100%;
+  }
+
+  :global(.cds--tabs .cds--tabs__nav-link) {
+    border-bottom: 0;
+    border-left: 3px solid $ui-03;
+  }
+
+  :global(.cds--tabs .cds--tabs__nav-item--selected) {
+    border-left: 3px solid var(--brand-03);
+    border-bottom: 0;
+    font-weight: 600;
+  }
+
+  :global(.cds--number) {
+    width: 68%;
+  }
+
+  :global(.cds--tabs__nav-link) {
+    &:active, &:focus { 
+      outline: 0 !important;
+      outline-offset: 0 !important;
+    }
+  }
+
+  :global(.cds--multi-select__wrapper .cds--list-box__wrapper) {
+    width: 90% !important;
+  }
+
+  :global(.cds--col) {
+    padding-left: 0;
+    width: 100%;
+  }
+}
+
+.tabletTab {
+  width: 25%;
+}
+
+.desktopTab {
+  width: 20%;
+}
+
+.tab {
+  display: flex;
+}
+
+.tabContainer {
+  background: white;
+  padding-left: 1.5rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.optionCell {
+  padding: 0 !important;
+}
+
+.optionHeader {
+  width: 1.5rem !important;
+}
+
+.text {
+ font-size: 0.9rem;
+ padding: 0.5rem;
+}

package/src/cohort-builder.test.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+import { render, cleanup } from "@testing-library/react";
+
+import CohortBuilder from "./cohort-builder";
+
+describe("Test the cohort builder", () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    render(<CohortBuilder />);
+  });
+});

package/src/cohort-builder.tsx

@@ -0,0 +1,213 @@
+import React, { useState } from "react";
+
+import { Tab, Tabs, TabList, TabPanels, TabPanel } from "@carbon/react";
+import { showToast, useLayoutType } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+
+import {
+  getCohortMembers,
+  getDataSet,
+  search,
+} from "./cohort-builder.resources";
+import styles from "./cohort-builder.scss";
+import { addToHistory } from "./cohort-builder.utils";
+import Composition from "./components/composition/composition.component";
+import SavedCohorts from "./components/saved-cohorts/saved-cohorts.component";
+import SavedQueries from "./components/saved-queries/saved-queries.component";
+import SearchByConcepts from "./components/search-by-concepts/search-by-concepts.component";
+import SearchByDemographics from "./components/search-by-demographics/search-by-demographics.component";
+import SearchByDrugOrder from "./components/search-by-drug-orders/search-by-drug-orders.component";
+import SearchByEncounters from "./components/search-by-encounters/search-by-encounters.component";
+import SearchByEnrollments from "./components/search-by-enrollments/search-by-enrollments.component";
+import SearchByLocation from "./components/search-by-location/search-by-location.component";
+import SearchByPersonAttributes from "./components/search-by-person-attributes/search-by-person-attributes.component";
+import SearchHistory from "./components/search-history/search-history.component";
+import SearchResultsTable from "./components/search-results-table/search-results-table.component";
+import { Patient, SearchParams } from "./types";
+
+interface TabItem {
+  name: string;
+  component: JSX.Element;
+}
+
+const CohortBuilder: React.FC = () => {
+  const { t } = useTranslation();
+  const [patients, setPatients] = useState<Patient[]>([]);
+  const [isHistoryUpdated, setIsHistoryUpdated] = useState(true);
+  const isLayoutTablet = useLayoutType() === "tablet";
+
+  const runSearch = (
+    searchParams: SearchParams,
+    queryDescription: string
+  ): Promise<boolean> => {
+    return new Promise(async (resolve) => {
+      setPatients([]);
+      try {
+        const {
+          data: { rows },
+        } = await search(searchParams);
+        rows.map((patient: Patient) => {
+          patient.id = patient.patientId.toString();
+          patient.name = `${patient.firstname} ${patient.lastname}`;
+        });
+        setPatients(rows);
+        addToHistory(queryDescription, rows, searchParams.query);
+        showToast({
+          title: t("success", "Success!"),
+          kind: "success",
+          critical: true,
+          description: t(
+            "searchIsCompleted",
+            `Search is completed with ${rows.length} result(s)`,
+            { numOfResults: rows.length }
+          ),
+        });
+        setIsHistoryUpdated(true);
+        resolve(true);
+      } catch (error) {
+        showToast({
+          title: t("error", "Error"),
+          kind: "error",
+          critical: true,
+          description: error?.message,
+        });
+        resolve(true);
+      }
+    });
+  };
+
+  const getQueryResults = async (queryId: string) => {
+    try {
+      const patients = await getDataSet(queryId);
+      setPatients(patients);
+      showToast({
+        title: t("success", "Success!"),
+        kind: "success",
+        critical: true,
+        description: t(
+          "searchIsCompleted",
+          `Search is completed with ${patients.length} result(s)`,
+          { numOfResults: patients.length }
+        ),
+      });
+    } catch (error) {
+      showToast({
+        title: t("error", "Error"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  const getCohortResults = async (cohortId: string) => {
+    try {
+      const patients = await getCohortMembers(cohortId);
+      setPatients(patients);
+      showToast({
+        title: t("success", "Success!"),
+        kind: "success",
+        critical: true,
+        description: t(
+          "searchIsCompleted",
+          `Search is completed with ${patients.length} result(s)`,
+          { numOfResults: patients.length }
+        ),
+      });
+    } catch (error) {
+      showToast({
+        title: t("error", "Error"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  const tabs: TabItem[] = [
+    {
+      name: t("concepts", "Concepts"),
+      component: <SearchByConcepts onSubmit={runSearch} />,
+    },
+    {
+      name: t("demographics", "Demographics"),
+      component: <SearchByDemographics onSubmit={runSearch} />,
+    },
+    {
+      name: t("personAttributes", "Person Attributes"),
+      component: <SearchByPersonAttributes onSubmit={runSearch} />,
+    },
+    {
+      name: t("encounters", "Encounters"),
+      component: <SearchByEncounters onSubmit={runSearch} />,
+    },
+    {
+      name: t("location", "Location"),
+      component: <SearchByLocation onSubmit={runSearch} />,
+    },
+    {
+      name: t("enrollments", "Enrollments"),
+      component: <SearchByEnrollments onSubmit={runSearch} />,
+    },
+    {
+      name: t("drugOrder", "Drug Order"),
+      component: <SearchByDrugOrder onSubmit={runSearch} />,
+    },
+    {
+      name: t("composition", "Composition"),
+      component: <Composition onSubmit={runSearch} />,
+    },
+    {
+      name: t("savedDefinitions", "Saved Cohorts"),
+      component: <SavedCohorts onViewCohort={getCohortResults} />,
+    },
+    {
+      name: t("savedDefinitions", "Saved Queries"),
+      component: <SavedQueries onViewQuery={getQueryResults} />,
+    },
+  ];
+
+  return (
+    <div
+      className={`omrs-main-content ${styles.mainContainer} ${styles.cohortBuilder}`}
+    >
+      <div
+        className={
+          isLayoutTablet ? styles.tabletContainer : styles.desktopContainer
+        }
+      >
+        <p className={styles.title}>{t("cohortBuilder", "Cohort Builder")}</p>
+        <div className={styles.tabContainer}>
+          <p className={styles.heading}>
+            {t("searchCriteria", "Search Criteria")}
+          </p>
+          <div className={styles.tab}>
+            <Tabs
+              className={`${styles.verticalTabs} ${
+                isLayoutTablet ? styles.tabletTab : styles.desktopTab
+              }`}
+            >
+              <TabList aria-label="navigation">
+                {tabs.map((tab: TabItem, index: number) => (
+                  <Tab key={index}>{tab.name}</Tab>
+                ))}
+              </TabList>
+              <TabPanels>
+                {tabs.map((tab: TabItem, index: number) => (
+                  <TabPanel key={index}>{tab.component}</TabPanel>
+                ))}
+              </TabPanels>
+            </Tabs>
+          </div>
+        </div>
+        <SearchResultsTable patients={patients} />
+        <SearchHistory
+          isHistoryUpdated={isHistoryUpdated}
+          setIsHistoryUpdated={setIsHistoryUpdated}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CohortBuilder;

package/src/cohort-builder.utils.ts

@@ -0,0 +1,197 @@
+import { Column, Patient, Query } from "./types";
+
+export const composeJson = (searchParameters) => {
+  const query: Query = {
+    type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+    columns: [],
+    rowFilters: [],
+    customRowFilterCombination: "",
+  };
+  query.columns = addColumnsToDisplay();
+  let counter = 0;
+  query.rowFilters = [];
+  for (let field in searchParameters) {
+    if (isNullValues(searchParameters[field])) {
+      delete searchParameters[field];
+      continue;
+    }
+    if (searchParameters[field] != "all" && searchParameters != "") {
+      query.rowFilters[counter] = {};
+      query.rowFilters[counter].key = getDefinitionLibraryKey(
+        field,
+        searchParameters[field]
+      );
+    }
+    if (Array.isArray(searchParameters[field])) {
+      query.rowFilters[counter].parameterValues = getParameterValues(
+        searchParameters[field]
+      );
+    }
+    if (
+      searchParameters[field].length >= 1 &&
+      searchParameters[field][0].livingStatus === "alive"
+    ) {
+      query.rowFilters[counter].livingStatus = "alive";
+    }
+    query.rowFilters[counter].type =
+      "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition";
+    counter += 1;
+  }
+  query.customRowFilterCombination = composeFilterCombination(query.rowFilters);
+  return { query };
+};
+
+export const isNullValues = (fieldValues) => {
+  if (Array.isArray(fieldValues) && fieldValues.length >= 1) {
+    return !fieldValues[0].value;
+  }
+  return fieldValues === "all" || !fieldValues;
+};
+
+export const getDefinitionLibraryKey = (field: string, value: string) => {
+  let definitionLibraryKey = "reporting.library.cohortDefinition.builtIn";
+  switch (field) {
+    case "gender":
+      definitionLibraryKey += `.${value}`;
+      break;
+    default:
+      definitionLibraryKey += `.${field}`;
+  }
+  return definitionLibraryKey;
+};
+
+export const getParameterValues = (parameterFields) => {
+  const parameter = {};
+  parameterFields.forEach((eachParam) => {
+    parameter[eachParam.name] = eachParam.value;
+  });
+  return parameter;
+};
+
+export const composeFilterCombination = (filterColumns) => {
+  let compositionTitle = "";
+  const totalNumber = filterColumns.length;
+  for (let index = 1; index <= totalNumber; index++) {
+    if (filterColumns[index - 1].livingStatus === "alive") {
+      compositionTitle += `NOT ${index}`;
+      delete filterColumns[index - 1].livingStatus;
+    } else {
+      compositionTitle += `${index}`;
+    }
+    compositionTitle += index < totalNumber ? " AND " : "";
+  }
+  return compositionTitle;
+};
+
+export const addColumnsToDisplay = () => {
+  const columns = [
+    {
+      name: "firstname",
+      key: "preferredName.givenName",
+    },
+    {
+      name: "lastname",
+      key: "preferredName.familyName",
+    },
+    {
+      name: "gender",
+      key: "gender",
+    },
+    {
+      name: "age",
+      key: "ageOnDate.fullYears",
+    },
+    {
+      name: "patientId",
+      key: "patientId",
+    },
+  ];
+
+  const columnValues = columns.map((aColumn: Column) => {
+    aColumn.type =
+      "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition";
+    aColumn.key = `reporting.library.patientDataDefinition.builtIn.${aColumn.key}`;
+    return aColumn;
+  });
+  return columnValues;
+};
+
+export const addToHistory = (
+  description: string,
+  patients: Patient[],
+  parameters: {}
+) => {
+  const oldHistory = JSON.parse(
+    window.sessionStorage.getItem("openmrsHistory")
+  );
+  let newHistory = [];
+
+  if (oldHistory) {
+    newHistory = [...oldHistory, { description, patients, parameters }];
+  } else {
+    newHistory = [{ description, patients, parameters }];
+  }
+  window.sessionStorage.setItem("openmrsHistory", JSON.stringify(newHistory));
+};
+
+export const formatDate = (dateString: string) => {
+  const date = new Date(dateString);
+  const day = date.getDate();
+  const month = date.getMonth() + 1;
+  const year = date.getFullYear();
+  return `${day}/${month}/${year}`;
+};
+
+/**
+ * builds a query description based on query input
+ * @param {object} state the current state
+ * @param {string} conceptName the concept name
+ * @returns {string} date in the required format
+ */
+export const queryDescriptionBuilder = (state, conceptName: string) => {
+  const { timeModifier, onOrAfter, onOrBefore } = state;
+
+  const onOrAfterDescription = onOrAfter
+    ? `since ${formatDate(onOrAfter)}`
+    : "";
+  const onOrBeforeDescription = onOrBefore
+    ? `until ${formatDate(onOrBefore)}`
+    : "";
+
+  return `Patients with ${timeModifier} ${conceptName} ${onOrAfterDescription} ${onOrBeforeDescription}`.trim();
+};
+
+const convertToCSV = (patients: Patient[]) => {
+  const csv =
+    "patient_id, full_name, age, gender\n" +
+    patients
+      .map((patient) => {
+        const orderedPatient = {
+          patientId: patient.patientId,
+          name: patient.name,
+          age: patient.age,
+          gender: patient.gender,
+        };
+
+        return Object.keys(orderedPatient)
+          .map((key) => {
+            return `"${patient[key]}"`;
+          })
+          .join(",");
+      })
+      .join("\n");
+
+  return csv;
+};
+
+export const downloadCSV = (data, filename) => {
+  const blob = new Blob([convertToCSV(data)], {
+    type: "text/csv;charset=utf-8;",
+  });
+  const url = URL.createObjectURL(blob);
+
+  const pom = document.createElement("a");
+  pom.href = url;
+  pom.setAttribute("download", filename);
+  pom.click();
+};

package/src/components/composition/composition.component.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+
+import { TextInput } from "@carbon/react";
+import { showNotification } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+
+import { SearchByProps } from "../../types";
+import SearchButtonSet from "../search-button-set/search-button-set";
+import styles from "./composition.style.css";
+import {
+  createCompositionQuery,
+  isCompositionValid,
+} from "./composition.utils";
+
+const Composition: React.FC<SearchByProps> = ({ onSubmit }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [compositionQuery, setCompositionQuery] = useState("");
+  const [description, setDescription] = useState("");
+  const { t } = useTranslation();
+
+  const handleResetInputs = () => {
+    setDescription("");
+    setCompositionQuery("");
+  };
+
+  const handleCompositionQuery = (composition: string) => {
+    setCompositionQuery(composition);
+    setDescription("Composition of " + composition);
+  };
+
+  const submit = async () => {
+    setIsLoading(true);
+    try {
+      if (isCompositionValid(compositionQuery)) {
+        const searchParams = createCompositionQuery(compositionQuery);
+        await onSubmit(searchParams, description);
+      } else {
+        showNotification({
+          title: t("error", "Error!"),
+          kind: "error",
+          critical: true,
+          description: t("invalidComposition", "Composition is not valid"),
+        });
+      }
+      setIsLoading(false);
+    } catch (error) {
+      setIsLoading(false);
+      showNotification({
+        title: t("error", "Error!"),
+        kind: "error",
+        critical: true,
+        description: t("invalidComposition", "Composition is not valid"),
+      });
+    }
+  };
+
+  return (
+    <>
+      <TextInput
+        data-modal-primary-focus
+        required
+        labelText={t("composition", "Composition")}
+        data-testid="composition-query"
+        id="composition-query"
+        onChange={(e) => handleCompositionQuery(e.target.value)}
+        value={compositionQuery}
+      />
+      <br />
+      <TextInput
+        data-modal-primary-focus
+        required
+        labelText={t("description", "Description")}
+        data-testid="composition-description"
+        id="composition-description"
+        onChange={(e) => setDescription(e.target.value)}
+        value={description}
+      />
+      <br />
+      <p className={styles.text}>
+        {t(
+          "compositionExplanationOne",
+          "A composition query combines together the results of multiple cohorts using the logical operators: AND, OR and NOT."
+        )}
+      </p>
+      <br />
+      <p className={styles.text}>
+        {t(
+          "compositionExplanationTwo",
+          "To use this query you need to already have query results in your search history. Those existing query results can then be combined to yield the results of the composition query."
+        )}
+      </p>
+      <br />
+      <p className={styles.text}>
+        {t(
+          "compositionExplanationThree",
+          "Example: if the search history #1 is a cohort of patients who are males, and if the search history #2 is a cohort of patients with ages between 23 and 35 years; then '1 AND 2' will result in a cohort of patients who are males with ages between 23 and 35 years."
+        )}
+      </p>
+      <br />
+      <SearchButtonSet
+        onHandleReset={handleResetInputs}
+        onHandleSubmit={submit}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default Composition;

package/src/components/composition/composition.style.css

@@ -0,0 +1,3 @@
+.text {
+  font-size: 0.85rem;
+}