Skip to content

VAHub Front End Trellising Grid Component

Kantemir Tvorogov edited this page Aug 9, 2023 · 3 revisions

Grid component (<trellis-grid>) shows trellised plots in a grid. Plots are shown in rows from left to right and then from top to bottom.
Plots are displayed with the help of Plot component (<trellising-plot>).

Grid Component Structure
Grid Component Structure.svg

Component inputs:

  • tabId: TabId
    current plugin tab id
  • limit: number
    maximum plots shown on grid
    this value is taken from trellising store and set up in paginationLimit() method from TabStoreUtils class
  • actualLimit: number
    actual maximum number of plots shown on grid (see actualLimit() method in PagesService class)
  • columnLimit: number
    the number of columns per row. This value is taken from tabStore and has a default value 2 set in TabRecord, except for 'Population' plugin with a value of 1
  • columns: number
    actual number of columns to display (see actualColumns() method in PagesService class)
  • plots: List
    a list of plots to display taken from trellising store
  • trellisDesign: TrellisDesign
    a trellising approach applied to the plots can be one of TrellisDesign enum values (see TrellisDesign in ITrellising.ts)
  • height: number total grid height; the height will be split equally between grid rows

The number of grid rows to display is calculated using 'actualLimit' and 'columns' parameters

See also

Clone this wiki locally