Patient Summary - a SoF App in React

This application was built via Vite. You can learn more in the Vite documentation. To learn about React, check out the React documentation. The UI components are imported from Material UI, a library of React UI components that implements Google's Material Design. The application can be launched via the SMART^® app launch framework.

Usage

A number of options are available for local usage to support testing with synthetic data.

Setup

This project manages dependencies using the NPM package manager in the Node environment (Node version >= 20 is recommended for this application). Make sure to have both NPM and Node installed before proceeding. The dependencies for the application can be installed locally by typing npm install at the command line. A local version of the app can be launched by typing npm start at the command line and the page will reload when you make changes. A copy suitable for distribution can be built using the npm run build command (see the build folder).

Docker

To start services via docker, first copy the default configuration files and modify as necessary:

# docker-compose service/project configuration
cp .env.default .env

# React App configuration
cp frontend.env.default frontend.env

To start all services, run the below command:

docker-compose up

Configuration

Parameters for the app are stored in environmental variables that are stored in an .env file (run cp frontend.env.default .env at command line to create the .env file) and it allows the environment variables thus specified to be read by the application at build time. The dotenv package is used to store the default variable values, which can be overwritten by defining a more specific env (e.g., .env.local) file or by setting the variables in the deployment system. For more information, see the React documentation. Note: for setting up environment file for a docker instance, please see example here.

Parameters

Parameter	Description	Allowed Values
REACT_APP_FHIR_OBSERVATION_CATEGORIES	Define what categor(ies) of FHIR observations to load for the patient	social-history,vital-signs,imaging,laboratory,procedure,survey,exam,therapy,activity,smartdata
REACT_APP_AUTH_SCOPES	For allowing the app to specify the delegation of a specific set of access rights via launch context. see App Launch: Scopes and Launch Context	profile roles email patient/*.read openid fhirUser patient/QuestionnaireResponse.write
REACT_APP_QUESTIONNAIRES	Define the id(s) for questionnaire(s) for which responses and graph should be rendered. NOTE: querying from EPIC requires exact Id for each questionnaire. If not provided, the app will extract Id(s) from questionnaire of each QuestionnaireResponse resource.	example: minicog or minicog,phq9 or CIRG-MINICOG,CIRG-PHQ9
REACT_APP_DASHBOARD_URL	Define the (f)EMR URL to which the app can return to	example: https://dashboard.acc.dev.cosri.cirg.washington.edu
REACT_APP_PROJECT_ID	Definition of which will allow project-specific theme, logo, etc.	example: DCW
REACT_APP_CLIENT_ID	Define unique client id for when launching as a confidential client	example: summary_openid_client
REACT_APP_SECTIONS	Definition of which sections to show in app.	default: scoreSummary,conditions,observations,questionnaireResponses
REACT_APP_CONF_API_URL	Define the backend auth URL for launching as a confidential client
REACT_APP_SYSTEM_TYPE	Define the system type of the app	example: development
REACT_APP_DISABLE_HEADER	Define whether the patient info in header element should appear, default is false	true, false
REACT_APP_DISABLE_NAV	Define whether the navigation menu element should appear, default is false	true, false
REACT_APP_MATOMO_SITE_ID	Define the site id used to for tracking via MATOMO	Example: 24
REACT_APP_EPIC_QUERIES	Define whether the site is quering data from EPIC	example: true, default is false

Using with Public SMART Sandbox

A public SMART^® App Launcher is available for sandbox tesing of SMART on FHIR apps with synthetic data.

Launch for SMART App Launcher

Launching from a local instance

1. Make sure Node and NPM package manager have been installed
2. Make sure environment file is set up (see under Configuration)
3. Run npm install to install all dependencies (this step can be skipped subsequently unless dependencies have changed)
4. Run npm start to install dependencies
5. Navigate to the public SMART^® App Launcher and choose the "Provider EHR Launch" Launch Type. Uncheck "Simulate launch within the EHR user interface". Leave all other options unselected. Paste the launch URL, e.g. http://localhost:3000/launch.html into the "App Launch URL" box at the bottom of the SMART^® App Launcher page. Select "Launch App!" which will bring up a patient selector widget before the app is launched.

Testing

to test UI components run npm run test