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/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/CustomizeQuery.tsx → query-connector/src/app/query/components/customizeQuery/CustomizeQuery.tsx

@@ -7,17 +7,17 @@ import {
  ValueSetItem,
  USE_CASES,
  demoQueryValToLabelMap,
-} from "../../constants";
+} from "../../../constants";
 import { UseCaseQueryResponse } from "@/app/query-service";
-import LoadingView from "./LoadingView";
-import { showRedirectConfirmation } from "../designSystem/redirectToast/RedirectToast";
-import styles from "./customizeQuery/customizeQuery.module.css";
-import CustomizeQueryAccordionHeader from "./customizeQuery/CustomizeQueryAccordionHeader";
-import CustomizeQueryAccordionBody from "./customizeQuery/CustomizeQueryAccordionBody";
-import Accordion from "../designSystem/Accordion";
-import CustomizeQueryNav from "./customizeQuery/CustomizeQueryNav";
-import { mapValueSetItemsToValueSetTypes } from "./customizeQuery/customizeQueryUtils";
-import Backlink from "./backLink/Backlink";
+import LoadingView from "../LoadingView";
+import { showRedirectConfirmation } from "../../designSystem/redirectToast/RedirectToast";
+import styles from "./customizeQuery.module.css";
+import CustomizeQueryAccordionHeader from "./CustomizeQueryAccordionHeader";
+import CustomizeQueryAccordionBody from "./CustomizeQueryAccordionBody";
+import Accordion from "../../designSystem/Accordion";
+import CustomizeQueryNav from "./CustomizeQueryNav";
+import { mapValueSetItemsToValueSetTypes } from "./customizeQueryUtils";
+import Backlink from "../backLink/Backlink";
 
 interface CustomizeQueryProps {
  useCaseQueryResponse: UseCaseQueryResponse;
@@ -137,7 +137,7 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
  goBack();
  showRedirectConfirmation({
  heading: QUERY_CUSTOMIZATION_CONFIRMATION_HEADER,
- body: QUERY_CUSTOMIZATION_CONFIRMATION_BODY,
+ body: "",
  headingLevel: "h4",
  });
  };
@@ -158,20 +158,18 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
 
  return (
  <div>
- <div className="padding-top-3">
+ <div className="margin-bottom-3">
  <Backlink onClick={goBack} label="Return to Select query" />
  </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 @@ 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/PatientSearchResults.tsx → query-connector/src/app/query/components/patientSearchResults/PatientSearchResults.tsx

@@ -2,9 +2,9 @@ import React, { useEffect } from "react";
 import { Patient } from "fhir/r4";
 
 import { Mode } from "@/app/constants";
-import Backlink from "./backLink/Backlink";
-import PatientSearchResultsTable from "./patientSearchResults/PatientSearchResultsTable";
-import NoPatientsFound from "./patientSearchResults/NoPatientsFound";
+import Backlink from "../backLink/Backlink";
+import PatientSearchResultsTable from "./PatientSearchResultsTable";
+import NoPatientsFound from "./NoPatientsFound";
 
 /**
  * The props for the PatientSearchResults component.

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

@@ -27,10 +27,8 @@ const PatientSearchResultsTable: React.FC<PatientSeacrchResultsTableProps> = ({
 }) => {
  return (
  <>
- <h1 className="font-sans-2xl text-bold margin-top-205">
- {STEP_TWO_PAGE_TITLE}
- </h1>
- <p className="font-sans-lg text-light">
+ <h1 className="page-title">{STEP_TWO_PAGE_TITLE}</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.tsx → query-connector/src/app/query/components/resultsView/ResultsView.tsx

@@ -1,17 +1,15 @@
-import { UseCaseQueryResponse } from "../../query-service";
-import ResultsViewSideNav, {
- NavSection,
-} from "./resultsView/ResultsViewSideNav";
+import { UseCaseQueryResponse } from "../../../query-service";
+import ResultsViewSideNav, { NavSection } from "./ResultsViewSideNav";
 import React, { useEffect } from "react";
-import ResultsViewTable from "./resultsView/ResultsViewTable";
-import styles from "../page.module.css";
-import ConditionsTable from "./resultsView/tableComponents/ConditionsTable";
-import Demographics from "./resultsView/tableComponents/Demographics";
-import DiagnosticReportTable from "./resultsView/tableComponents/DiagnosticReportTable";
-import EncounterTable from "./resultsView/tableComponents/EncounterTable";
-import MedicationRequestTable from "./resultsView/tableComponents/MedicationRequestTable";
-import ObservationTable from "./resultsView/tableComponents/ObservationTable";
-import Backlink from "./backLink/Backlink";
+import ResultsViewTable from "./ResultsViewTable";
+import styles from "./resultsView.module.scss";
+import ConditionsTable from "./tableComponents/ConditionsTable";
+import Demographics from "./tableComponents/Demographics";
+import DiagnosticReportTable from "./tableComponents/DiagnosticReportTable";
+import EncounterTable from "./tableComponents/EncounterTable";
+import MedicationRequestTable from "./tableComponents/MedicationRequestTable";
+import ObservationTable from "./tableComponents/ObservationTable";
+import Backlink from "../backLink/Backlink";
 import { USE_CASES, demoQueryValToLabelMap } from "@/app/constants";
 
 type ResultsViewProps = {
@@ -59,31 +57,25 @@ const ResultsView: React.FC<ResultsViewProps> = ({
 
  return (
  <>
- <div className="results-banner">
- <div className={`${styles.resultsBannerContent}`}>
- <Backlink
- onClick={() => goBack()}
- label={"Return to query selection"}
- />
- <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">
- Patient Record
- </h2>
- <h3>
- Query:{" "}
- <span className="text-normal display-inline-block">
- {demoQueryValToLabelMap[selectedQuery]}
- </span>
- </h3>
+ <div className={`${styles.resultsBannerContent}`}>
+ <Backlink
+ onClick={() => goBack()}
+ label={"Return to query selection"}
+ />
+ <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">Patient Record</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/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,8 +1,8 @@
 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";
+import { ResultsViewAccordionItem } from "./ResultsView";
 
 type ResultsViewTable = {
  accordionItems: ResultsViewAccordionItem[];
@@ -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;
+}

query-connector/src/app/query/components/resultsView/tableComponents/ConditionsTable.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Table from "@/app/query/designSystem/Table";
 import { Condition } from "fhir/r4";
 import { formatCodeableConcept, formatDate } from "../../../../format-service";
+import { checkIfSomeElementWithPropertyExists } from "./utils";
 
 /**
  * The props for the ConditionTable component.
@@ -17,23 +18,42 @@ export interface ConditionTableProps {
  * @returns - The ConditionTable component.
  */
 const ConditionsTable: React.FC<ConditionTableProps> = ({ conditions }) => {
+ const anyResolution = checkIfSomeElementWithPropertyExists(
+ conditions,
+ "abatementDateTime",
+ );
+
+ const anyStatus = checkIfSomeElementWithPropertyExists(
+ conditions,
+ "clinicalStatus",
+ );
+
+ const anyOnset = checkIfSomeElementWithPropertyExists(
+ conditions,
+ "onsetDateTime",
+ );
+
  return (
- <Table>
+ <Table className="margin-top-0-important">
  <thead>
  <tr>
  <th>Condition</th>
- <th>Status</th>
- <th>Onset</th>
- <th>Resolution</th>
+ {anyStatus && <th>Status</th>}
+ {anyOnset && <th>Onset</th>}
+ {anyResolution && <th>Resolution</th>}
  </tr>
  </thead>
  <tbody>
  {conditions.map((condition) => (
  <tr key={condition.id}>
  <td>{formatCodeableConcept(condition.code ?? {})}</td>
- <td>{formatCodeableConcept(condition.clinicalStatus ?? {})}</td>
- <td>{formatDate(condition.onsetDateTime)}</td>
- <td>{formatDate(condition.abatementDateTime)}</td>
+ {anyStatus && (
+ <td>{formatCodeableConcept(condition.clinicalStatus ?? {})}</td>
+ )}
+ {anyOnset && <td>{formatDate(condition.onsetDateTime)}</td>}
+ {anyResolution && (
+ <td>{formatDate(condition.abatementDateTime)}</td>
+ )}
  </tr>
  ))}
  </tbody>

query-connector/src/app/query/components/resultsView/tableComponents/Demographics.tsx

@@ -31,7 +31,7 @@ const Demographics: React.FC<DemographicsProps> = ({ patient }) => {
  const demographicData = formatDemographics(patient);
 
  return (
- <div>
+ <div className="margin-top-0-important">
  {demographicData.map((item) => (
  <DataDisplay item={item} key={item.title} />
  ))}

query-connector/src/app/query/components/resultsView/tableComponents/DiagnosticReportTable.tsx

@@ -20,7 +20,7 @@ const DiagnosticReportTable: React.FC<DiagnosticReportTableProps> = ({
  diagnosticReports,
 }) => {
  return (
- <Table>
+ <Table className="margin-top-0-important">
  <thead>
  <tr>
  <th>Date</th>

query-connector/src/app/query/components/resultsView/tableComponents/EncounterTable.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Table from "@/app/query/designSystem/Table";
 import { Encounter } from "fhir/r4";
 import { formatCodeableConcept, formatDate } from "../../../../format-service";
+import { checkIfSomeElementWithPropertyExists } from "./utils";
 
 /**
  * The props for the EncounterTable component.
@@ -19,13 +20,22 @@ export interface EncounterTableProps {
 const EncounterTable: React.FC<EncounterTableProps> = ({
  encounters: encounters,
 }) => {
+ const anyClincType =
+ checkIfSomeElementWithPropertyExists(encounters, "class") ||
+ checkIfSomeElementWithPropertyExists(encounters, "serviceType");
+
+ const anyServiceType = checkIfSomeElementWithPropertyExists(
+ encounters,
+ "serviceProvider",
+ );
+ encounters.forEach((e) => console.log(e?.class));
  return (
- <Table>
+ <Table className="margin-top-0-important">
  <thead>
  <tr>
  <th>Visit Reason</th>
- <th>Clinic Type</th>
- <th>Service Provider</th>
+ {anyClincType && <th>Clinic Type</th>}
+ {anyServiceType && <th>Service Provider</th>}
  <th>Encounter Status</th>
  <th>Encounter Start</th>
  <th>Encounter End</th>
@@ -35,13 +45,15 @@ const EncounterTable: React.FC<EncounterTableProps> = ({
  {encounters.map((encounter) => (
  <tr key={encounter.id}>
  <td>{formatCodeableConcept(encounter?.reasonCode?.[0])} </td>
- <td>
- {formatCodeableConcept(encounter?.class)} <br></br>
- {encounter?.serviceType
- ? formatCodeableConcept(encounter.serviceType)
- : ""}
- </td>
- <td>{encounter?.serviceProvider?.display}</td>
+ {anyClincType && (
+ <td>
+ {formatCodeableConcept(encounter?.class)} <br></br>
+ {encounter?.serviceType
+ ? formatCodeableConcept(encounter.serviceType)
+ : ""}
+ </td>
+ )}
+ {anyServiceType && <td>{encounter?.serviceProvider?.display}</td>}
  <td>{encounter?.status}</td>
  <td>{formatDate(encounter?.period?.start)}</td>
  <td>{formatDate(encounter?.period?.end)}</td>