Merge branch 'main' into dependabot/npm_and_yarn/query-connector/cros…

…s-spawn-7.0.6

query-connector/.env.sample

@@ -3,5 +3,6 @@ AUTH_SECRET="ido5D/uybeAB3AmMQwn+ubw2zYC4t2h7RJlW2R79598="
 AUTH_KEYCLOAK_ID=query-connector
 AUTH_KEYCLOAK_SECRET=ZG3f7R1J3qIwBaw8QtttJnJMinpERQKs
 AUTH_KEYCLOAK_ISSUER=http://localhost:8081/realms/master
+E2E_LOCAL_FHIR_SERVER=http://localhost:8080/fhir
 ERSD_API_KEY=
 UMLS_API_KEY=

query-connector/README.md

@@ -77,7 +77,42 @@ The Query Connector will eventually require other inputs from other DIBBs servic
 
 ### Developer Documentation
 
-Can be found in [api-documentation.md](api-documentation.md).
+A Postman collection demonstrating use of the API can be found [here](https://github.com/CDCgov/dibbs-query-connector/blob/main/query-connector/src/app/assets/DIBBs_Query_Connector_API.postman_collection.json).
+
+### Query Connector Data for Query Building
+
+When initializing the backend database for the first time, the Query Connector makes the value sets associated with 200+ reportable conditions available to users tasked with building queries for their jurisdiction. To group value sets by condition and to group the conditions by type, the Query Connector obtains and organizes data from the eRSD and the VSAC in the following way:
+
+1. The Query Connector retrieves the 200+ reportable conditions from the eRSD as well as the value sets' associated IDs.
+2. Using the value set IDs from the eRSD, the Query Connector retrieves the value set's comprehensive information from the VSAC, i.e., the LOINC, SNOMED, etc. codes associated with each value set ID.
+3. The Query Connector then organizes these value sets according to the conditions with which they're associated, making the result available to users interested in building queries. The conditions are additionally organized by category, e.g., sexually transmitted diseases or respiratory conditions, using a mapping curated by HLN Consulting.
+
+#### Query Building Data in `dev` mode
+
+In order to make the dev process as low-lift as possible, we want to avoid executing the `db-creation` scripts when booting up the application in dev mode via `npm run dev` or `npm run dev-win`. To that end, we've created a `pg_dump` file containing all the value sets, concepts, and foreign key mappings that would be extracted from a fresh pull of the eRSD and processed through our creation functions. This file, `vs_dump.sql` has been mounted into the docker volume of our postgres DB when running in dev mode as an entrypoint script. This means it will be automatically executed when the DB is freshly spun up. You shouldn't need to do anything to facilitate this mounting or file running.
+
+#### Updating the pg_dump
+
+If the DB extract file ever needs to be updated, you can use the following simple process:
+
+1. Start up the application on your local machine using a regular `docker compose up`, and wait for the DB to be ready.
+2. Load the eRSD and value sets into the DIBBs DB by using the `Create Query` button on the `/queryBuilding` page. Optionally, use DBeaver to verify that value sets exist in the database.
+3. In a fresh terminal window, run
+
+```
+pg_dump -U postgres -f vs_dump.sql -h localhost -p 5432 tefca_db
+```
+
+If the above doesn't work, try replacing `localhost` with `0.0.0.0`.
+
+4. Enter the DB password when prompted.
+5. The extract file, `vs_dump.sql`, should now be created. It should automatically be located in `/query-connector`, but if it isn't, put `vs_dump.sql` there.
+
+#### Running the e2e tests locally
+
+Our e2e's are available locally via `npm run test:playright:local`. You'll need to have the app running locally at `localhost:3000` first (ie using `npm run dev`).
+
+You'll need to set `E2E_LOCAL_FHIR_SERVER` in your local `.env` file first in order for the flows that use the local HAPI server to route correctly. This is pre-set for you in the `.env.sample` file.
 
 ### Architecture Diagram
 

query-connector/e2e/customize_query.spec.ts

@@ -54,15 +54,14 @@ test.describe("querying with the Query Connector", () => {
     await page.getByRole("link", { name: "Medications" }).click();
     await page.getByRole("button", { name: "Chlamydia Medication" }).click();
     await page
-      .getByRole("row")
-      .filter({ hasText: "azithromycin 1000 MG" })
-      .getByRole("img")
+      .getByRole("row", { name: "azithromycin 1000 MG" })
+      .locator("label")
       .click();
     await expect(page.getByText("3 of 4 selected")).toBeVisible();
     await page
       .getByRole("row")
       .filter({ hasText: "ceftriaxone 500 MG Injection" })
-      .getByRole("img")
+      .locator("label")
       .click();
     await expect(page.getByText("2 of 4 selected")).toBeVisible();
     await page.getByRole("button", { name: "Apply changes" }).click();
@@ -124,7 +123,7 @@ test.describe("querying with the Query Connector", () => {
     await page.getByRole("link", { name: "Medications" }).click();
     await page
       .getByRole("button", { name: "Chlamydia Medication" })
-      .getByRole("img")
+      .locator("label")
       .click();
     await expect(page.getByText("0 of 4 selected")).toBeVisible();
 

query-connector/src/app/fhir-servers.ts

@@ -13,6 +13,8 @@ type FHIR_SERVER_CONFIG = {
 /**
  * The configurations for the FHIR servers currently supported.
  */
+const localE2EFhirServer =
+  process.env.E2E_LOCAL_FHIR_SERVER ?? "http://hapi-fhir-server:8080/fhir";
 export const fhirServers: Record<FHIR_SERVERS, FHIR_SERVER_CONFIG> = {
   "HELIOS Meld: Direct": {
     hostname: "https://gw.interop.community/HeliosConnectathonSa/open",
@@ -29,7 +31,7 @@ export const fhirServers: Record<FHIR_SERVERS, FHIR_SERVER_CONFIG> = {
     init: {} as RequestInit,
   },
   "Local e2e HAPI Server: Direct": {
-    hostname: "http://hapi-fhir-server:8080/fhir",
+    hostname: localE2EFhirServer,
     init: {} as RequestInit,
   },
   "OpenEpic: eHealthExchange": configureEHX("OpenEpic"),

query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx

@@ -1,7 +1,7 @@
-import { Icon } from "@trussworks/react-uswds";
 import styles from "./customizeQuery.module.css";
 import { GroupedValueSet } from "./customizeQueryUtils";
 import Table from "../../designSystem/Table";
+import CustomizeQueryCheckbox from "./vanityCheckbox/CustomizeQueryCheckbox";
 
 type CustomizeQueryAccordionBodyProps = {
   group: GroupedValueSet;
@@ -52,22 +52,14 @@ const CustomizeQueryAccordionBody: React.FC<
           }, [] as ValueSetIndexedConcept[])
           .map((item, conceptIndex) => (
             <tr className={`${styles.customizeQueryGridRow}`} key={item.code}>
-              <td
-                className={`${styles.customizeQueryCheckbox}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  toggleInclude(groupIndex, item.vsIndex, conceptIndex);
-                }}
-              >
-                {item.include && (
-                  <Icon.Check
-                    aria-label="Check icon indicating selection"
-                    className="usa-icon"
-                    style={{ backgroundColor: "white" }}
-                    size={4}
-                    color="#005EA2"
-                  />
-                )}
+              <td className={styles.noBorderNoBackgroundNoPadding}>
+                <CustomizeQueryCheckbox
+                  id={item.code}
+                  checked={item.include}
+                  onChange={() => {
+                    toggleInclude(groupIndex, item.vsIndex, conceptIndex);
+                  }}
+                />
               </td>
               <td className={styles.noBorderNoBackgroundNoPadding}>
                 {item.code}

query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx

@@ -1,6 +1,6 @@
-import { Icon } from "@trussworks/react-uswds";
 import styles from "./customizeQuery.module.css";
 import { GroupedValueSet } from "./customizeQueryUtils";
+import CustomizeQueryCheckbox from "./vanityCheckbox/CustomizeQueryCheckbox";
 
 type CustomizeQueryAccordionProps = {
   handleSelectAllChange: (groupIndex: string, checked: boolean) => void;
@@ -31,36 +31,24 @@ const CustomizeQueryAccordionHeader: React.FC<CustomizeQueryAccordionProps> = ({
     sum += includedConcepts.length;
     return sum;
   }, 0);
+  const isMinusState = selectedCount !== selectedTotal && selectedCount !== 0;
 
   return (
     <div
       className={`${styles.accordionHeader} display-flex flex-no-wrap flex-align-start customize-query-header`}
     >
-      <div
-        id="select-all"
-        className={`hide-checkbox-label ${styles.customizeQueryCheckbox}`}
-        onClick={(e) => {
-          e.stopPropagation();
-          handleSelectAllChange(groupIndex, selectedCount !== selectedTotal);
+      <CustomizeQueryCheckbox
+        id={group.valueSetName}
+        checked={selectedCount === selectedTotal}
+        isMinusState={isMinusState}
+        isHeader
+        onChange={() => {
+          handleSelectAllChange(
+            groupIndex,
+            isMinusState ? false : selectedCount !== selectedTotal,
+          );
         }}
-      >
-        {selectedCount === selectedTotal && (
-          <Icon.Check
-            className="usa-icon bg-base-lightest"
-            size={4}
-            color="#565C65"
-            aria-label="Checkmark icon indicating addition"
-          />
-        )}
-        {selectedCount > 0 && selectedCount < selectedTotal && (
-          <Icon.Remove
-            className="usa-icon bg-base-lightest"
-            size={4}
-            color="#565C65"
-            aria-label="Minus icon indicating removal"
-          />
-        )}
-      </div>
+      />
       <div className={`${styles.accordionButtonTitle}`}>
         {`${group.valueSetName}`}
 

query-connector/src/app/query/components/customizeQuery/customizeQuery.module.css

@@ -70,26 +70,6 @@
   padding: 0 !important;
 }
 
-.customizeQueryCheckbox {
-  width: 2.25rem;
-  height: 2.25rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background-color: #fff;
-  border: 1px solid #a9aeb1 !important;
-  border-radius: 0.25rem;
-  margin: 0.5rem;
-  padding: 0 !important;
-}
-
-.customizeQueryCheckbox svg {
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-}
-
 .accordionHeader {
   display: flex;
   width: 100%;

query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx

@@ -0,0 +1,43 @@
+import classNames from "classnames";
+import Checkbox, {
+  CheckboxProps,
+} from "../../../designSystem/checkbox/Checkbox";
+import styles from "./checkbox.module.css";
+
+type VanityCheckboxProps = CheckboxProps & {
+  isHeader?: boolean;
+  isMinusState?: boolean;
+};
+/**
+ * Vanity component wrapper around the checkbox component for the query customization
+ * checkboxes
+ * @param root0 - params
+ * @param root0.id - ID for checkbox
+ * @param root0.checked - whether the checkbox is checked
+ * @param root0.onChange - handler for when the checkbox is clicked
+ * @param root0.isHeader - whether the checkbox is in the header
+ * @param root0.isMinusState - whether to display the minus checkbox state
+ * @returns A checkbox for the customize query page
+ */
+const CustomizeQueryCheckbox: React.FC<VanityCheckboxProps> = ({
+  id,
+  checked,
+  onChange,
+  isHeader,
+  isMinusState,
+}) => {
+  return (
+    <Checkbox
+      id={id}
+      checked={checked}
+      onChange={onChange}
+      className={classNames(
+        styles.vanity,
+        isHeader ? styles.vanityHeader : "",
+        isMinusState ? styles.isMinusCheckboxState : "",
+      )}
+    />
+  );
+};
+
+export default CustomizeQueryCheckbox;

query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css

@@ -0,0 +1,35 @@
+.vanity {
+  background: inherit;
+  margin: 0.5rem;
+}
+
+.vanity label {
+  margin-top: 0;
+  padding-left: 0;
+}
+
+.vanity label::before {
+  width: 2.25rem;
+  height: 2.25rem;
+  background-color: #fff;
+  box-shadow: 0 0 0 1px #a9aeb1 !important;
+  border-radius: 0.25rem;
+  margin: 0;
+  padding: 0 !important;
+  position: relative !important;
+}
+
+.vanity input:checked + label::before {
+  background-color: #fff !important;
+  background-image: url("bodyCheckmark.svg") !important;
+  background-size: cover !important;
+}
+
+.vanityHeader input:checked + label::before {
+  background-image: url("headerCheckmark.svg") !important;
+}
+
+.isMinusCheckboxState input + label::before {
+  background-image: url("minus.svg") !important;
+  background-size: cover !important;
+}

query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx

@@ -2,12 +2,13 @@ import { Checkbox as TrussCheckbox } from "@trussworks/react-uswds";
 import classNames from "classnames";
 import styles from "./checkbox.module.css";
 
-type CheckboxProps = {
+export type CheckboxProps = {
   id: string;
-  label: string;
+  label?: string;
   className?: string;
   onClick?: () => void;
-  checked: boolean;
+  onChange?: () => void;
+  checked?: boolean;
 };
 
 /**
@@ -18,13 +19,16 @@ type CheckboxProps = {
  * @param root0.className Optional styling classes
  * @param root0.onClick Event listener for checkbox click
  * @param root0.checked Boolean indicating whether the checkbox is checked
+ * @param root0.onChange - Event listener for checkbox change. Use this one
+ * over onClick if the component is controlled (ie checked is passed in)
  * @returns A checkbox styled according to our design system
  */
 const Checkbox: React.FC<CheckboxProps> = ({
   label,
   id,
   className,
   onClick,
+  onChange,
   checked,
 }) => {
   return (
@@ -34,7 +38,8 @@ const Checkbox: React.FC<CheckboxProps> = ({
       name={id}
       className={classNames(styles.checkbox, className)}
       onClick={onClick}
-      defaultChecked={checked}
+      onChange={onChange}
+      checked={checked}
     ></TrussCheckbox>
   );
 };