The Trio in the Front End

The Trio structure is requested from the back end whenever a new module is requested. The 3-level JSON object returned contains the complete categories/groups/options structure. The normalizeTrio() function "normalizes" this object into three separate structures:

• categories array

• groupsObj

• optionsObj

  They are then stored in TrioStore.trio:

 trio = {
    categories: [
        'Registration',
        'Basic Characteristics',
        // ...
    ],
    groupsObj: {
        '00' : {
            "label": "Season",
            "code": "RV",
            "dependency": [],
            "options": [ '001', '002',  ]
        },
        '01' : {
            "label": "Area",
            "code": "RV",
            "dependency": [],
            "options": [ '008', '009',  ]
        },,
        // ...
    }
    optionsObj : {
        '000': {
                text: '2013',
                extra: 0,
                groupKey: 00
            },
        '001': {
                text: '2014',
                extra: 1,
                groupKey: 00
            },
        // ...
    }
 }

  const groupLabelToGroupKeyObj =   {
    'Season': '00',
    'Area': '01'
    //
  }

Note that the keys to groupObj and optionsObj are zero padded string representations of running integers assigned by trioNormalize(). This allows for a simple uniform representation of groups and options that keeps track of their original order.

Three "selected" arrays are routinely used by the front end to store optionKeys:

• filterSelected: currently active filters
• itemSelected: currently loaded item options (enums, lookups, categorized filters)
• newItemSelected: newly selected option keys ready to be synchronized to the back end

Two indices, catgoryIndex and groupIndex, keep track of the current displayed category and group tabs in either the FilterSelector or ItemTagger forms.

The currently selected options are displayed in the TrioSelectedForm in a three-level structure.