Update Demo Mode (#2262)

* Updating TEFCA landing page UI * adding demo options * trying to get ui to look better * fixing bottom of landing page * updating e2e test * fixing e2e tests, part 2 * rewrite demo directions * formatting * update searchform to autofill & dynamically changes options based on query * add multiple patients per query type * rename passed values to match constants * merge * merge fix * add descriptions for consts * add notes for clarification * [pre-commit.ci] auto fixes from pre-commit hooks * add Suspense... * add full details for w.mcgee * [pre-commit.ci] auto fixes from pre-commit hooks * update label to technical failure (no s) * remove "customize queries" button for now * remove case investigation topic from bottom of demo query page * move state options to constants * [pre-commit.ci] auto fixes from pre-commit hooks * update e2e with new formatting * [pre-commit.ci] auto fixes from pre-commit hooks * update for demo mode * [pre-commit.ci] auto fixes from pre-commit hooks --------- Co-authored-by: Rob Mitchell <[email protected]> Co-authored-by: Rob Mitchell <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
CDCgov · Jul 26, 2024 · 3d51a0c · 3d51a0c
1 parent 79380d0
commit 3d51a0c
Show file tree

Hide file tree

Showing 6 changed files with 284 additions and 174 deletions.
diff --git a/containers/tefca-viewer/e2e/query_workflow.spec.ts b/containers/tefca-viewer/e2e/query_workflow.spec.ts
@@ -50,11 +50,17 @@ test.describe("querying with the TryTEFCA viewer", () => {
     );
 
     // Put in the search parameters for the elusive fruit person
+    await page
+      .getByLabel("Query", { exact: true })
+      .selectOption("demo-newborn-screening");
+    await page
+      .getByLabel("Patient", { exact: true })
+      .selectOption("demo-newborn-screening-referral");
     await page.getByLabel("First Name").fill("Watermelon");
     await page.getByLabel("Last Name").fill("McGee");
-    await page
-      .getByLabel("Use case", { exact: true })
-      .selectOption("newborn-screening");
+    await page.getByLabel("Date of Birth").fill("2024-07-12");
+    await page.getByLabel("Medical Record Number").fill("18091");
+    await page.getByLabel("Phone Number").fill("5555555555");
     await page.getByLabel("FHIR Server").selectOption("HELIOS Meld: Direct");
 
     await page.getByRole("button", { name: "Search for patient" }).click();
@@ -96,14 +102,14 @@ test.describe("querying with the TryTEFCA viewer", () => {
   test("unsuccessful user query: no patients", async ({ page }) => {
     await page.getByRole("button", { name: "Go to the demo" }).click();
     await page.getByRole("button", { name: "Next" }).click();
+    await page
+      .getByLabel("Query", { exact: true })
+      .selectOption("demo-social-determinants");
 
     await page.getByLabel("First Name").fill("Ellie");
     await page.getByLabel("Last Name").fill("Williams");
     await page.getByLabel("Date of Birth").fill("2030-07-07");
     await page.getByLabel("Medical Record Number").fill("TLOU1TLOU2");
-    await page
-      .getByLabel("Use case", { exact: true })
-      .selectOption("social-determinants");
     await page.getByLabel("FHIR Server").selectOption("HELIOS Meld: Direct");
     await page.getByRole("button", { name: "Search for patient" }).click();
 

diff --git a/containers/tefca-viewer/src/app/constants.ts b/containers/tefca-viewer/src/app/constants.ts
@@ -25,6 +25,9 @@ export const FhirServers = [
 ] as const;
 export type FHIR_SERVERS = (typeof FhirServers)[number];
 
+/*
+Demo patient data used to populate the form fields
+*/
 export const demoData = {
   "demo-cancer": {
     FirstName: "Lee",
@@ -35,7 +38,7 @@ export const demoData = {
     FhirServer: "HELIOS Meld: Direct",
     UseCase: "cancer",
   },
-  "demo-sti-chlamydia": {
+  "demo-sti-chlamydia-positive": {
     FirstName: "Chlamydia",
     LastName: "JMC",
     DOB: "2001-05-07",
@@ -44,7 +47,7 @@ export const demoData = {
     FhirServer: "JMC Meld: Direct",
     UseCase: "chlamydia",
   },
-  "demo-sti-gonorrhea": {
+  "demo-sti-gonorrhea-positive": {
     FirstName: "GC",
     LastName: "JMC",
     DOB: "1998-05-31",
@@ -53,13 +56,31 @@ export const demoData = {
     FhirServer: "JMC Meld: Direct",
     UseCase: "gonorrhea",
   },
-  "demo-newborn-screening": {
+  "demo-newborn-screening-technical-fail": {
     FirstName: "Mango",
     LastName: "Smith",
     DOB: "2024-07-12",
     MRN: "67890",
     Phone: "555-123-4567",
-    FhirServer: "HELIOS Meld: eHealthExchange",
+    FhirServer: "HELIOS Meld: Direct",
+    UseCase: "newborn-screening",
+  },
+  "demo-newborn-screening-referral": {
+    FirstName: "Watermelon",
+    LastName: "McGee",
+    DOB: "2024-07-12",
+    MRN: "18091",
+    Phone: "5555555555",
+    FhirServer: "HELIOS Meld: Direct",
+    UseCase: "newborn-screening",
+  },
+  "demo-newborn-screening-pass": {
+    FirstName: "Cucumber",
+    LastName: "Hill",
+    DOB: "2023-08-29",
+    MRN: "18091",
+    Phone: "8161112222",
+    FhirServer: "CernerHelios: eHealthExchange",
     UseCase: "newborn-screening",
   },
   "demo-social-determinants": {
@@ -71,7 +92,7 @@ export const demoData = {
     FhirServer: "HELIOS Meld: Direct",
     UseCase: "social-determinants",
   },
-  "demo-sti-syphilis": {
+  "demo-sti-syphilis-positive": {
     FirstName: "Veronica",
     LastName: "Blackstone",
     DOB: "1998-06-18",
@@ -82,3 +103,131 @@ export const demoData = {
   },
 };
 export type demoDataUseCase = keyof typeof demoData;
+
+/*Labels and values for the query options dropdown on the query page*/
+export const demoQueryOptions = [
+  { value: "demo-cancer", label: "Cancer case investigation" },
+  { value: "demo-sti-chlamydia", label: "Chlamydia case investigation" },
+  { value: "demo-sti-gonorrhea", label: "Gonorrhea case investigation" },
+  { value: "demo-newborn-screening", label: "Newborn screening follow-up" },
+  {
+    value: "demo-social-determinants",
+    label: "Gather social determinants of health",
+  },
+  { value: "demo-sti-syphilis", label: "Syphilis case investigation" },
+];
+
+type Option = {
+  value: string;
+  label: string;
+};
+
+/* Labels and values for the patient options that are available based on the query option selected */
+export const patientOptions: Record<string, Option[]> = {
+  "demo-cancer": [{ value: "demo-cancer", label: "A patient with leukemia" }],
+  "demo-sti-chlamydia": [
+    {
+      value: "demo-sti-chlamydia-positive",
+      label: "A male patient with a positive chlamydia lab test",
+    },
+  ],
+  "demo-sti-gonorrhea": [
+    {
+      value: "demo-sti-gonorrhea-positive",
+      label: "A male patient with a positive gonorrhea lab test",
+    },
+  ],
+  "demo-newborn-screening": [
+    {
+      value: "demo-newborn-screening-technical-fail",
+      label: "A newborn with a technical failure on screening",
+    },
+    {
+      value: "demo-newborn-screening-referral",
+      label: "A newborn with a hearing referral & risk indicator",
+    },
+    {
+      value: "demo-newborn-screening-pass",
+      label: "A newborn with a passed screening",
+    },
+  ],
+  "demo-social-determinants": [
+    {
+      value: "demo-social-determinants",
+      label: "A patient with housing insecurity",
+    },
+  ],
+  "demo-sti-syphilis": [
+    {
+      value: "demo-sti-syphilis-positive",
+      label: "A patient with a positive syphilis lab test",
+    },
+  ],
+};
+
+/*Labels and values for the state options dropdown on the query page*/
+export const stateOptions = [
+  { value: "AL", label: "AL - Alabama" },
+  { value: "AK", label: "AK - Alaska" },
+  { value: "AS", label: "AS - American Samoa" },
+  { value: "AZ", label: "AZ - Arizona" },
+  { value: "AR", label: "AR - Arkansas" },
+  { value: "CA", label: "CA - California" },
+  { value: "CO", label: "CO - Colorado" },
+  { value: "CT", label: "CT - Connecticut" },
+  { value: "DE", label: "DE - Delaware" },
+  { value: "DC", label: "DC - District of Columbia" },
+  { value: "FL", label: "FL - Florida" },
+  { value: "GA", label: "GA - Georgia" },
+  { value: "GU", label: "GU - Guam" },
+  { value: "HI", label: "HI - Hawaii" },
+  { value: "ID", label: "ID - Idaho" },
+  { value: "IL", label: "IL - Illinois" },
+  { value: "IN", label: "IN - Indiana" },
+  { value: "IA", label: "IA - Iowa" },
+  { value: "KS", label: "KS - Kansas" },
+  { value: "KY", label: "KY - Kentucky" },
+  { value: "LA", label: "LA - Louisiana" },
+  { value: "ME", label: "ME - Maine" },
+  { value: "MD", label: "MD - Maryland" },
+  { value: "MA", label: "MA - Massachusetts" },
+  { value: "MI", label: "MI - Michigan" },
+  { value: "MN", label: "MN - Minnesota" },
+  { value: "MS", label: "MS - Mississippi" },
+  { value: "MO", label: "MO - Missouri" },
+  { value: "MT", label: "MT - Montana" },
+  { value: "NE", label: "NE - Nebraska" },
+  { value: "NV", label: "NV - Nevada" },
+  { value: "NH", label: "NH - New Hampshire" },
+  { value: "NJ", label: "NJ - New Jersey" },
+  { value: "NM", label: "NM - New Mexico" },
+  { value: "NY", label: "NY - New York" },
+  { value: "NC", label: "NC - North Carolina" },
+  { value: "ND", label: "ND - North Dakota" },
+  { value: "MP", label: "MP - Northern Mariana Islands" },
+  { value: "OH", label: "OH - Ohio" },
+  { value: "OK", label: "OK - Oklahoma" },
+  { value: "OR", label: "OR - Oregon" },
+  { value: "PA", label: "PA - Pennsylvania" },
+  { value: "PR", label: "PR - Puerto Rico" },
+  { value: "RI", label: "RI - Rhode Island" },
+  { value: "SC", label: "SC - South Carolina" },
+  { value: "SD", label: "SD - South Dakota" },
+  { value: "TN", label: "TN - Tennessee" },
+  { value: "TX", label: "TX - Texas" },
+  { value: "UM", label: "UM - United States Minor Outlying Islands" },
+  { value: "UT", label: "UT - Utah" },
+  { value: "VT", label: "VT - Vermont" },
+  { value: "VI", label: "VI - Virgin Islands" },
+  { value: "VA", label: "VA - Virginia" },
+  { value: "WA", label: "WA - Washington" },
+  { value: "WV", label: "WV - West Virginia" },
+  { value: "WI", label: "WI - Wisconsin" },
+  { value: "WY", label: "WY - Wyoming" },
+  { value: "AA", label: "AA - Armed Forces Americas" },
+  { value: "AE", label: "AE - Armed Forces Africa" },
+  { value: "AE", label: "AE - Armed Forces Canada" },
+  { value: "AE", label: "AE - Armed Forces Europe" },
+  { value: "AE", label: "AE - Armed Forces Middle East" },
+  { value: "AP", label: "AP - Armed Forces Pacific" },
+];
diff --git a/containers/tefca-viewer/src/app/page.tsx b/containers/tefca-viewer/src/app/page.tsx
@@ -148,75 +148,54 @@ export default function LandingPage() {
               <Button
                 type="button"
                 className={`modal-option ${
-                  selectedOption === "Chlamydia case investigation"
-                    ? "selected"
-                    : ""
+                  selectedOption === "demo-sti-chlamydia"
                 }`}
-                onClick={() =>
-                  handleOptionClick("Chlamydia case investigation")
-                }
+                onClick={() => handleOptionClick("demo-sti-chlamydia")}
               >
                 Chlamydia case investigation
               </Button>
               <Button
                 type="button"
                 className={`modal-option ${
-                  selectedOption === "Gonorrhea case investigation"
-                    ? "selected"
-                    : ""
+                  selectedOption === "demo-sti-gonorrhea"
                 }`}
-                onClick={() =>
-                  handleOptionClick("Gonorrhea case investigation")
-                }
+                onClick={() => handleOptionClick("demo-sti-gonorrhea")}
               >
                 Gonorrhea case investigation
               </Button>
               <Button
                 type="button"
                 className={`modal-option ${
-                  selectedOption === "Syphilis case investigation"
-                    ? "selected"
-                    : ""
+                  selectedOption === "demo-sti-syphilis"
                 }`}
-                onClick={() => handleOptionClick("Syphilis case investigation")}
+                onClick={() => handleOptionClick("demo-sti-syphilis")}
               >
                 Syphilis case investigation
               </Button>
               <Button
                 type="button"
-                className={`modal-option ${
-                  selectedOption === "Cancer case investigation"
-                    ? "selected"
-                    : ""
-                }`}
-                onClick={() => handleOptionClick("Cancer case investigation")}
+                className={`modal-option ${selectedOption === "demo-cancer"}`}
+                onClick={() => handleOptionClick("demo-cancer")}
               >
                 Cancer case investigation
               </Button>
               <Button
                 type="button"
                 className={`modal-option ${
-                  selectedOption === "Newborn screening follow-up"
-                    ? "selected"
-                    : ""
+                  selectedOption === "demo-newborn-screening"
                 }`}
-                onClick={() => handleOptionClick("Newborn screening follow-up")}
+                onClick={() => handleOptionClick("demo-newborn-screening")}
               >
                 Newborn screening follow-up
               </Button>
               <Button
                 type="button"
                 className={`modal-option ${
-                  selectedOption ===
-                  "Gather social determinants of health for a patient"
+                  selectedOption === "demo-social-determinants"
                     ? "selected"
                     : ""
                 }`}
-                onClick={() =>
-                  handleOptionClick(
-                    "Gather social determinants of health for a patient",
-                  )
-                }
+                onClick={() => handleOptionClick("demo-social-determinants")}
               >
                 Gather social determinants of health for a patient
               </Button>