Skip to content

This repo houses all EMR patient chart components for OpenMRS v3

License

Notifications You must be signed in to change notification settings

openmrs/openmrs-esm-patient-chart

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f91aa86 · Feb 27, 2024
Feb 20, 2024
Sep 28, 2023
Jan 21, 2024
Jun 26, 2023
Sep 28, 2023
Jan 3, 2024
Feb 24, 2024
Feb 27, 2024
Feb 20, 2024
May 5, 2021
Sep 28, 2023
Nov 23, 2023
Oct 16, 2023
Aug 16, 2022
Sep 28, 2023
Nov 14, 2019
Feb 22, 2024
Jun 6, 2023
Jan 10, 2024
Feb 9, 2024
Feb 7, 2024
Nov 8, 2023
Sep 28, 2023
Feb 27, 2024
Jan 3, 2024
Jul 24, 2023
Feb 24, 2024

Repository files navigation

👋 *New to our project? Be sure to review the OpenMRS 3 Frontend Developer Documentation 🧑‍🏫

OpenMRS CI

OpenMRS ESM Patient Chart

The openmrs-esm-patient-chart is a frontend module for the OpenMRS SPA. It contains various microfrontends that constitute widgets in a patient dashboard. These widgets include:

In addition to these widgets, two other microfrontends exist that encapsulate cross-cutting concerns. These are:

Setup

Check out the developer documentation here.

This monorepo uses yarn and lerna.

To install the dependencies, run:

yarn

To start a dev server for a specific microfrontend, run:

yarn start --sources 'packages/esm-patient-<insert-package-name>-app'

This command uses the openmrs tooling to fire up a dev server running esm-patient-chart as well as the specified microfrontend.

There are two approaches for working on multiple microfrontends simultaneously.

You could run yarn start with as many sources arguments as you require. For example, to run the biometrics and vitals microfrontends simultaneously, you'd use:

yarn start --sources 'packages/esm-patient-biometrics-app' --sources 'packages/esm-patient-vitals-app'

Alternatively, you could run yarn serve from within the individual packages and then use import map overrides.

Running tests

To run tests for all packages, run:

yarn turbo test

To run tests in watch mode, run:

yarn turbo test:watch

To run tests for a specific package, pass the package name to the --filter flag. For example, to run tests for esm-patient-conditions-app, run:

yarn turbo test --filter="esm-patient-conditions-app"

To run a specific test file, run:

yarn turbo test -- visit-notes-form

The above command will only run tests in the file or files that match the provided string.

You can also run the matching tests from above in watch mode by running:

yarn turbo test:watch -- visit-notes-form

To generate a coverage report, run:

yarn turbo coverage

By default, turbo will cache test runs. This means that re-running tests wihout changing any of the related files will return the cached logs from the last run. To bypass the cache, run tests with the force flag, as follows:

yarn turbo test --force

To run end-to-end tests, run:

yarn test-e2e

Read the e2e testing guide to learn more about End-to-End tests in this project.

Updating Playwright

The Playwright version in the Bamboo e2e Dockerfile and the package.json file must match. If you update the Playwright version in one place, you must update it in the other.

Troubleshooting

If you notice that your local version of the application is not working or that there's a mismatch between what you see locally versus what's in dev3, you likely have outdated versions of core libraries. To update core libraries, run the following commands:

# Upgrade core libraries
yarn up openmrs@next @openmrs/esm-framework@next

# Reset version specifiers to `next`. Don't commit actual version numbers.
git checkout package.json

# Run `yarn` to recreate the lockfile
yarn

Layout

The patient chart consists of the following parts:

  • Navigation menu
  • Breadcrumbs menu
  • Patient header
  • Chart review / Dashboards
  • Workspace
  • Side menu

The navigation menu lives on the left side of the screen and provides links to dashboards in the patient chart.

The breadcrumbs menu gets shown at the top of the page under the navigation bar. It shows the user their current location relative to the information architecture and helps them quickly navigate to a parent level or previous step.

The patient header contains the patient banner. Uninvasive notifications also appear in this area following actions such as form submissions.

The chart review area is the main part of the screen. It displays whatever dashboard is active.

A dashboard is a collection of widgets.

The workspace is where data entry takes place. On mobile devices it covers the screen; on desktop it appears in a sidebar.

The side menu provides access to features that do not have their own pages, such as the notifications menu.

Design Patterns

For documentation about our design patterns, please visit our design system documentation website.

Configuration

Please see the Implementer Documentation for information about configuring modules.

Deployment

See Creating a Distribution for information about adding microfrontends to a distribution.