query flow redirect followup

query-connector/src/app/CustomQuery.ts

@@ -75,7 +75,7 @@ export class CustomQuery {
  : "";
  this.medicationRequestQuery =
  rxnormFilter !== ""
- ? `/MedicationRequest?subject=${patientId}&code=${rxnormFilter}&_include=MedicationRequest:medication&_include=MedicationRequest:intended-performer`
+ ? `/MedicationRequest?subject=${patientId}&code=${rxnormFilter}&_include=MedicationRequest:medication&_revinclude=MedicationAdministration:request`
  : "";
  this.socialHistoryQuery = `/Observation?subject=${patientId}&category=social-history`;
  this.encounterQuery =

query-connector/src/app/query/components/SelectQuery.tsx → query-connector/src/app/query/SelectQuery.tsx

@@ -1,16 +1,16 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { FHIR_SERVERS, USE_CASES, ValueSetItem } from "../../constants";
-import CustomizeQuery from "./CustomizeQuery";
-import SelectSavedQuery from "./selectQuery/SelectSavedQuery";
+import { FHIR_SERVERS, USE_CASES, ValueSetItem } from "../constants";
+import CustomizeQuery from "./components/CustomizeQuery";
+import SelectSavedQuery from "./components/selectQuery/SelectSavedQuery";
 
 import { QueryResponse } from "@/app/query-service";
 import { Patient } from "fhir/r4";
 import {
  fetchQueryResponse,
  fetchUseCaseValueSets,
-} from "./selectQuery/queryHooks";
-import LoadingView from "./LoadingView";
+} from "./components/selectQuery/queryHooks";
+import LoadingView from "./components/LoadingView";
 
 interface SelectQueryProps {
  goForward: () => void;
@@ -23,18 +23,23 @@ interface SelectQueryProps {
  fhirServer: FHIR_SERVERS;
  setFhirServer: React.Dispatch<React.SetStateAction<FHIR_SERVERS>>;
  setLoading: (isLoading: boolean) => void;
+ showCustomizeQuery: boolean;
+ setShowCustomizeQuery: (showCustomizeQuery: boolean) => void;
 }
 
 /**
  * @param root0 - SelectQueryProps
  * @param root0.goBack - Callback to return to previous page
  * @param root0.goForward - Callback to go to the next page
  * @param root0.selectedQuery - query we chose for further customization
+ * @param root0.showCustomizeQuery - toggle to navigate to show customize query
  * @param root0.setSelectedQuery - callback function to update the selected query
  * @param root0.patientForQuery - patient to apply a particular query for
  * @param root0.resultsQueryResponse - Response of selected query
  * @param root0.setResultsQueryResponse - Callback function to update selected
  * query
+ * @param root0.setShowCustomizeQuery - state function to update location of
+ * show customize query
  * @param root0.fhirServer - the FHIR server that we're running the query against
  * @param root0.setFhirServer - callback function to update the FHIR server
  * @returns - The selectQuery component.
@@ -44,13 +49,14 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
  patientForQuery,
  resultsQueryResponse,
  fhirServer,
+ showCustomizeQuery,
  goForward,
  goBack,
  setSelectedQuery,
  setResultsQueryResponse,
  setFhirServer,
+ setShowCustomizeQuery,
 }) => {
- const [showCustomizeQuery, setShowCustomizedQuery] = useState(false);
  const [queryValueSets, setQueryValueSets] = useState<ValueSetItem[]>(
  [] as ValueSetItem[],
  );
@@ -92,7 +98,7 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
 
  const displayLoading = loadingResultResponse || loadingQueryValueSets;
  return (
- <>
+ <div>
  {displayLoading && <LoadingView loading={loadingResultResponse} />}
 
  {showCustomizeQuery ? (
@@ -101,7 +107,7 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
  queryType={selectedQuery}
  queryValuesets={queryValueSets}
  setQueryValuesets={setQueryValueSets}
- goBack={() => setShowCustomizedQuery(false)}
+ goBack={() => setShowCustomizeQuery(false)}
  ></CustomizeQuery>
  ) : (
  <SelectSavedQuery
@@ -110,12 +116,12 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
  loadingQueryValueSets={loadingQueryValueSets}
  goBack={goBack}
  setSelectedQuery={setSelectedQuery}
- setShowCustomizedQuery={setShowCustomizedQuery}
+ setShowCustomizedQuery={setShowCustomizeQuery}
  handleSubmit={onSubmit}
  setFhirServer={setFhirServer}
  ></SelectSavedQuery>
  )}
- </>
+ </div>
  );
 };
 

query-connector/src/app/query/components/CustomizeQuery.tsx

@@ -138,7 +138,7 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
  goBack();
  showRedirectConfirmation({
  heading: QUERY_CUSTOMIZATION_CONFIRMATION_HEADER,
- body: QUERY_CUSTOMIZATION_CONFIRMATION_BODY,
+ body: "",
  headingLevel: "h4",
  });
  };
@@ -163,16 +163,14 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
  <Backlink onClick={goBack} label={RETURN_LABEL["results"]} />
  </div>
  <LoadingView loading={!useCaseQueryResponse} />
- <h1 className="font-sans-2xl text-bold margin-top-205">
- Customize query
- </h1>
- <div className="font-sans-lg text-light padding-bottom-0 padding-top-05">
+ <h1 className="page-title margin-bottom-05-important">Customize query</h1>
+ <h2 className="page-explainer margin-x-0-important">
  Query: {demoQueryValToLabelMap[queryType]}
- </div>
- <div className="font-sans-sm text-light padding-bottom-0 padding-top-05">
+ </h2>
+ <h3 className="margin-x-0-important font-sans-sm text-light padding-bottom-0 padding-top-05">
  {countLabs} labs found, {countMedications} medications found,{" "}
  {countConditions} conditions found.
- </div>
+ </h3>
 
  <CustomizeQueryNav
  activeTab={activeTab}
@@ -221,5 +219,3 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
 export default CustomizeQuery;
 export const QUERY_CUSTOMIZATION_CONFIRMATION_HEADER =
  "Query Customization Successful!";
-export const QUERY_CUSTOMIZATION_CONFIRMATION_BODY =
- "You've successfully customized your query. Once you're done adding patient details, submit your completed query to get results";

query-connector/src/app/query/components/LoadingView.tsx

@@ -17,7 +17,7 @@ const LoadingView: React.FC<LoadingViewProps> = ({ loading }) => {
  return (
  <div className="overlay">
  <div className="spinner"></div>
- <h2>Loading...</h2>
+ <div className="margin-left-1-important page-title">Loading...</div>
  </div>
  );
  } else {

query-connector/src/app/query/components/ResultsView.tsx

@@ -4,7 +4,7 @@ import ResultsViewSideNav, {
 } from "./resultsView/ResultsViewSideNav";
 import React, { useEffect } from "react";
 import ResultsViewTable from "./resultsView/ResultsViewTable";
-import styles from "../page.module.css";
+import styles from "./resultsView/resultsView.module.scss";
 import ConditionsTable from "./resultsView/tableComponents/ConditionsTable";
 import Demographics from "./resultsView/tableComponents/Demographics";
 import DiagnosticReportTable from "./resultsView/tableComponents/DiagnosticReportTable";
@@ -63,28 +63,24 @@ const ResultsView: React.FC<ResultsViewProps> = ({
 
  return (
  <>
- <div className="results-banner">
- <div className={`${styles.resultsBannerContent}`}>
- <Backlink onClick={() => goBack()} label={RETURN_LABEL["results"]} />
- <button
- className="usa-button usa-button--outline margin-left-auto"
- onClick={() => goToBeginning()}
- >
- New patient search
- </button>
- </div>
- </div>
- <div className="margin-bottom-3">
- <h2 className="margin-0" id="ecr-summary">
- {PAGE_TITLES["results"]}
- </h2>
- <h3>
- Query:{" "}
- <span className="text-normal display-inline-block">
- {demoQueryValToLabelMap[selectedQuery]}
- </span>
- </h3>
+ <div className={`${styles.resultsBannerContent}`}>
+ <Backlink onClick={() => goBack()} label={RETURN_LABEL["results"]} />
+ <button
+ className="usa-button usa-button--outline margin-left-auto"
+ onClick={() => goToBeginning()}
+ >
+ New patient search
+ </button>
  </div>
+ <h1 className="page-title margin-bottom-0-important">
+ {PAGE_TITLES["results"]}
+ </h1>
+ <h2 className="page-explainer margin-bottom-3-important margin-top-0-important">
+ <strong>Query: </strong>
+ <span className="text-normal display-inline-block">
+ {demoQueryValToLabelMap[selectedQuery]}
+ </span>
+ </h2>
 
  <div className=" grid-container grid-row grid-gap-md padding-0 ">
  <div className="tablet:grid-col-3">

query-connector/src/app/query/components/searchForm/SearchForm.tsx → query-connector/src/app/query/components/SearchForm.tsx

@@ -15,7 +15,7 @@ import {
 } from "@/app/constants";
 import { UseCaseQueryResponse, UseCaseQuery } from "@/app/query-service";
 import { fhirServers } from "@/app/fhir-servers";
-import styles from "./searchForm.module.css";
+import styles from "./searchForm/searchForm.module.scss";
 import { FormatPhoneAsDigits } from "@/app/format-service";
 import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
 
@@ -108,18 +108,16 @@ const SearchForm: React.FC<SearchFormProps> = ({
 
  return (
  <>
- <form className="content-container-smaller-width" onSubmit={HandleSubmit}>
- <h1 className="font-sans-2xl text-bold margin-bottom-105">
- {PAGE_TITLES["search"]}
- </h1>
- <h2 className="font-sans-lg text-normal margin-top-0 margin-bottom-105">
+ <form onSubmit={HandleSubmit}>
+ <h1 className="page-title">{PAGE_TITLES["search"]}</h1>
+ <h2 className="page-explainer">
  Enter patient information below to search for a patient. We will query
  the connected network to find matching records.{" "}
  </h2>
  {
  <div className={`usa-summary-box ${styles.demoQueryFiller}`}>
  <Label
- className="no-margin-top-important maxw-full font-sans text-normal"
+ className="margin-top-0-important maxw-full font-sans text-normal"
  htmlFor="query"
  >
  The demo site uses synthetic data to provide examples of possible
@@ -157,7 +155,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
  </h3>
  <Label
  htmlFor="fhir_server"
- className="no-margin-top-important width-full"
+ className="margin-top-0-important width-full"
  >
  FHIR Server (QHIN)
  </Label>
@@ -188,7 +186,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
  Name
  </h3>
  <div className="tablet:grid-col-6">
- <Label htmlFor="firstName" className="no-margin-top-important">
+ <Label htmlFor="firstName" className="margin-top-0-important">
  First Name
  </Label>
  <TextInput
@@ -207,7 +205,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
  />
  </div>
  <div className="tablet:grid-col-6">
- <Label htmlFor="lastName" className="no-margin-top-important">
+ <Label htmlFor="lastName" className="margin-top-0-important">
  Last Name
  </Label>
  <TextInput
@@ -231,7 +229,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
  Phone Number
  </h3>
  <div className="grid-col-6">
- <Label htmlFor="phone" className="no-margin-top-important">
+ <Label htmlFor="phone" className="margin-top-0-important">
  Phone Number
  </Label>
  <TextInput
@@ -254,7 +252,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
  Date of Birth
  </h3>
  <div className="grid-col-6">
- <Label htmlFor="dob" className="no-margin-top-important">
+ <Label htmlFor="dob" className="margin-top-0-important">
  Date of Birth
  </Label>
  <div className="usa-date-picker">
@@ -282,7 +280,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
  <div className="grid-col">
  <Label
  htmlFor="street_address_1"
- className="no-margin-top-important"
+ className="margin-top-0-important"
  >
  Street address
  </Label>
@@ -297,7 +295,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
  <div className="grid-col">
  <Label
  htmlFor="street_address_2"
- className="no-margin-top-important"
+ className="margin-top-0-important"
  >
  Address Line 2
  </Label>
@@ -310,13 +308,13 @@ const SearchForm: React.FC<SearchFormProps> = ({
  </div>
  <div className="grid-row grid-gap margin-bottom-4">
  <div className="tablet:grid-col-5">
- <Label htmlFor="city" className="no-margin-top-important">
+ <Label htmlFor="city" className="margin-top-0-important">
  City
  </Label>
  <TextInput id="city" name="city" type="text" />
  </div>
  <div className="tablet:grid-col-3">
- <Label htmlFor="state" className="no-margin-top-important">
+ <Label htmlFor="state" className="margin-top-0-important">
  State
  </Label>
  <Select id="state" name="state" defaultValue="">
@@ -331,7 +329,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
  </Select>
  </div>
  <div className="tablet:grid-col-4">
- <Label htmlFor="zip" className="no-margin-top-important">
+ <Label htmlFor="zip" className="margin-top-0-important">
  ZIP code
  </Label>
  <TextInput
@@ -348,7 +346,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
  Medical Record Number (MRN)
  </h3>
  <div className="grid-col-6">
- <Label htmlFor="mrn" className="no-margin-top-important">
+ <Label htmlFor="mrn" className="margin-top-0-important">
  Medical Record Number
  </Label>
  <TextInput

query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx

@@ -28,10 +28,8 @@ const PatientSearchResultsTable: React.FC<PatientSeacrchResultsTableProps> = ({
 }) => {
  return (
  <>
- <h1 className="font-sans-2xl text-bold margin-top-205">
- {PAGE_TITLES["patient-results"]}
- </h1>
- <p className="font-sans-lg text-light">
+ <h1 className="page-title">{PAGE_TITLES["patient-results"]}</h1>
+ <p className="page-explainer">
  The following records match your search. Select a patient to continue.
  </p>
  <Table className="margin-top-5">

query-connector/src/app/query/components/resultsView/ResultsViewAccordionBody.tsx

@@ -1,4 +1,4 @@
-import styles from "./resultsTable.module.css";
+import styles from "./resultsView.module.scss";
 
 type ResultsViewAccordionBodyProps = {
  title: string;

query-connector/src/app/query/components/resultsView/ResultsViewTable.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Accordion from "../../designSystem/Accordion";
-import styles from "./resultsTable.module.css";
+import styles from "./resultsView.module.scss";
 import ResultsViewAccordionBody from "./ResultsViewAccordionBody";
 import { ResultsViewAccordionItem } from "../ResultsView";
 
@@ -22,7 +22,7 @@ const ResultsViewTable: React.FC<ResultsViewTable> = ({ accordionItems }) => {
  const titleId = formatIdForAnchorTag(item.title);
  return (
  item.content && (
- <div className="padding-bottom-2" key={item.title}>
+ <div className={styles.accordionInstance} key={item.title}>
  <Accordion
  title={item.title}
  content={

query-connector/src/app/query/components/resultsView/resultsTable.module.css → query-connector/src/app/query/components/resultsView/resultsView.module.scss

@@ -1,3 +1,9 @@
+@use "../../../../styles/_variables" as *;
+
+.accordionInstance {
+ margin-bottom: $margin-between-group;
+}
+
 .accordionWrapper > h3 {
  font-size: 32px;
  color: white !important;
@@ -18,6 +24,11 @@
  "Arial", "sans-serif" !important;
  font-size: 1.46rem !important;
  line-height: 1.1 !important;
- padding: 0.75rem 0;
+ padding-bottom: 0.75rem;
  margin-bottom: 0.5rem !important;
 }
+
+.resultsBannerContent {
+ display: flex;
+ align-items: center;
+}