Dashboards & Analytics
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboards & Analytics module provides a centralized interface for visualizing organizational data and performance metrics. It allows clinicians and administrators to access high-level analytical reports, often through embedded external services such as AWS QuickSight, and manage a searchable list of available dashboards.
The system is built using the Marionette and Backbone.Radio architecture, leveraging App classes for lifecycle management and Entities Service for data retrieval.
Sources: test/integration/dashboards/dashboards-all.js:1-5, src/js/i18n/en-US.yml:68-76
Architecture and Data Flow
Dashboards are managed through a specialized application tree. The entry point is typically the Dashboard App, which handles routing to either the aggregate list of dashboards or a specific dashboard detail view.
Navigation and Routing
Users access the module via the global navigation sidebar under the "Dashboards" link. Navigation events are handled by the app-nav.js component, which routes the user to the /dashboards path.
The diagram above illustrates the typical user flow from the global navigation to specific dashboard reports.
Sources: test/integration/globals/app-nav.js:95-101, test/integration/dashboards/dashboards-all.js:1-40
Application Lifecycle
Following the project's standard Marionette.Toolkit.App pattern, the Dashboard App manages its state and views through a structured lifecycle:
- beforeStart: Requests dashboard entities from the
entities-service. - onBeforeStart: Sets the layout view and initializes child regions.
- onStart: Populates the content regions with either a collection of dashboards or a specific dashboard model.
Sources: README.md:120-140, test/integration/dashboards/dashboards-all.js:1-35
Dashboard Listing
The Dashboard List provides a searchable, tabular overview of all available reports.
Key Features
- Table-based Display: Dashboards are presented in a list format showing the "Name" attribute.
- Find in List: A localized search feature allows users to filter the dashboard collection in real-time.
- Empty States: The system provides specialized views when no dashboards are available or when a search returns no results.
| UI Component | Description | i18n Key |
|---|---|---|
| Layout Title | The header text for the list page | dashboards.dashboardsAllViews.layoutView.title |
| Name Header | Table column header for dashboard names | dashboards.dashboardsAllViews.layoutView.nameHeader |
| Empty View | Displayed when no dashboards exist | dashboards.dashboardsAllViews.emptyView |
| Search Empty | Displayed when filters return no matches | dashboards.dashboardsAllViews.emptyFindInListView.noResults |
Sources: test/integration/dashboards/dashboards-all.js:52-70, src/js/i18n/en-US.yml:71-76
Dashboard Detail and Analytics Integration
When a specific dashboard is selected, the application transitions to a detail view. This view is responsible for rendering the context trail (breadcrumbs) and the actual analytical content.
External Report Embedding
The primary mechanism for rendering analytical data is via an iframe pointing to AWS QuickSight. The application retrieves the necessary metadata (such as embed URLs) from the API and dynamically generates an iframe.
This sequence shows how dashboard data is retrieved and how external reporting services are integrated into the frontend.
Sources: test/integration/dashboards/dashboards-all.js:33-40, src/js/i18n/en-US.yml:77-80
Context Trail
To maintain navigation context, the detail view includes a "Back to List" button. This is implemented via a contextTrailView, allowing users to return to the filtered dashboard list without losing their previous state.
Sources: src/js/i18n/en-US.yml:79-80, test/integration/dashboards/dashboards-all.js:42-45
Technical Implementation Details
API Interaction
Interaction with the backend for dashboard data is strictly routed through the entities-service. Standard endpoints include:
GET /ajax/dashboards: Retrieves the collection of dashboards.GET /ajax/dashboards/:id: Retrieves detailed metadata for a specific dashboard.
Sources: test/integration/dashboards/dashboards-all.js:14-35, src/js/README.md:120-125
Localized Strings
All dashboard labels and messages are localized using the standard i18n service.
dashboards:
dashboardApp:
notFound: The Dashboard you requested does not exist.
dashboardsAllViews:
emptyFindInListView:
noResults: No results match your Find in List search
emptyView: No Dashboards
layoutView:
nameHeader: Name
title: Dashboards
Sources: src/js/i18n/en-US.yml:68-76
Summary
The Dashboards & Analytics system provides a robust framework for data visualization by combining internal Marionette-based view management with external analytics providers. By utilizing a standardized "Find in List" pattern and centralized entity services, it ensures consistent performance and usability across the organizational reporting landscape.