VAHub Front End Plugins

'Plugin' term is described in Project Terminology and Abbreviations#Plugin

The code for all plugins is located at the /src/app/plugins directory

Plugin Structure

A basic plugin includes a "main" component which renders a navigation bar with plugin tabs and a list of components to display a specific plugin tab. For example, for the "Population Summary" plugin there is a main component PopulationSummaryComponent and two components PopulationSummaryPlotComponent and PopulationSummaryTableComponent for displaying two plugin tabs: "Summary Plot" and "Summary Table".

Plugin Directory Organization

A plugin directory typically contains:

• {PluginName}Component.html

  "main" component template with a list of plugin tabs and <router-outlet> element. For example, in /src/app/plugins/populationsummary/PopulationSummaryComponent.ts:

<ul class="nav nav-tabs">
    <li>
        <a routerLink="/plugins/population-summary/summary-plot" routerLinkActive="active">{{tabName.POPULATION_SUMMARY_PLOT}}</a>
    </li>
    <li>
        <a routerLink="/plugins/population-summary/summary-table" routerLinkActive="active">{{tabName.POPULATION_SUMMARY_TABLE}}</a>
    </li>
</ul>
<br/>
<router-outlet></router-outlet>

• {PluginName}Component.ts

  component logic

• {PluginName}Component.routing.ts

  routes for plugin tabs

• {PluginName}Component.module.ts

  plugin module

• subdirectories with plugin tabs.

  E.g.:

/src/app/plugins/populationsummary/
├── /populationSummaryPlot
└── /populationSummaryTable

Plugin Tab Template

The majority of plugin tabs visualize data on plots using trellising component. Trellising component encapsulates all trellising and plot rendering logic, hence for most plugin tabs the template is as simple as:

<trellising-component [tabId]="..."></trellising-component>

The list of all tabIds is stored in the class TabId in /src/app/common/trellising/store/ITrellising.ts.

Outstanding Plugins

There are several plugins that don't conform to the standard pattern. They are:

• Timeline plugin: contains a single plot that displays all available timeline tracks for the subjects
• Single Subject plugin: provides detailed information about a single subject
• Cohort Editor plugin: allows to create a cohort — a number of subjects selected by the population attributes or existence of events that meet certain criteria

See Next

Trellising Component