VAHub Front End Overview
VAHub front end application can be found in <vahub-root>/boot/src/main/webapp directory.
The application runs on the Angular framework.
Below is the list of libraries and technologies used in the project.
You may explore their manuals beforehand to better understand project source code.
Basics
Main Libraries
Testing
State Management
UI
CSS preprocessor
Utils
AE — Adverse Events plugin
DoD — Details on Demand component at the bottom of the plugin page. The component shows details for data points selected on the plot (to select you may click on a data point or draw a selection rectangle on a plot)
Plugin is a separate page that shows a particular visualization of the selected dataset. Plugins are shown on the application left side bar. Examples of plugins are: "Population Summary", "Adverse Events", "Respiratory", "Timeline".
Trellising is a technique of rendering series of similar graphs or charts using the same scale and axes, allowing them to be easily compared. It uses multiple views to show different partitions of a dataset. Example of trellis charts:
All project source files are located in the /src directory.
/src directory top-level folders:
-
/app- project source code -
/assets- project assets (images) -
/environments- environment configuration files
The contents of these directories are described below.
Contains project source code. The most part of the application logic resides in directories /common and /plugins.
Below is the list of /app inner directories and description of their contents.
| Name | Description |
|---|---|
| /about /home /manual /support |
directories with respective page components (About, Home, Manual, Support) |
| /studyselection /studylist /studylistcontrols |
directories with components for study selection (used on the start page) |
| /common | components/directives/pipes/services etc used by more then one component/service; contains /trellising directory and Trellising Component responsible for displaying all plots in the system |
| /configuration | configuration service used to fetch environment settings (see TODO: VAHub Branding) |
| /data | services for fetching data from the back end using HTTP requests organized by <plugin name>/<plot type> (see State Management and Data Retrieval) |
| /filters | all code related to filtering component and filtering functionality (see TODO: Filtering Architecture Overview) |
| /nav | navigation components (top navigation bar, left side navigation bar with plugins list, on-screen help) |
| /plugins | components for rendering plugins |
| /resolvers | router resolvers (see Angular Docs: Angular Router Resolve) |
| /security | services for checking user permissions for viewing a dataset |
| /session | services for user authentication and session maintenance (see Authentication and Security) |
Contains project assets (images). Child directories are:
-
/images- common project images -
/dECMT images- branding images
Angular auxiliary directory with config files for different environments (see Angular Docs: Configuring application environments)