Merge pull request #310 from pacificclimate/feature/309

Address #309, arrange variables in dropdown menu

public/variable-options.yaml

@@ -40,18 +40,32 @@
 #        UNIT1, will be substituted for UNIT1 in user-visible
 #        displays like graphs and tables.
 #        (default: no substitutions)
+#   - menuGroup
+#        INTEGER
+#        variables with the same menuGroup number will be
+#        displayed together in the variable dropdown menu
+#        to make it easier for the user to find related
+#        variables and match their descriptions to the
+#        help file.
+#        0: model output
+#        1: climdex
+#        2: degree-days
+#        3: return periods
+#        (default: MAXINT - uncategorized data is listed last)
 ################################################################
 
 #GCM output variables
 tasmin:
   decimalPrecision: 1
   shiftAnnualCycle:
     - tasmax
+  menuGroup: 0
 
 tasmax:
   decimalPrecision: 1
   shiftAnnualCycle:
     - tasmin
+  menuGroup: 0
 
 pr:
   overrideLogarithmicScale: true
@@ -61,151 +75,197 @@ pr:
   userFriendlyUnits:
     - kg m-2 d-1: mm/day
     - kg d-1 m-2: mm/day
+  menuGroup: 0
 
 prsn:
   overrideLogarithmicScale: true
   percentageAnomalies: true
+  menuGroup: 0
 
 #CLIMDEX variables
 altcddETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 altcsdiETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 altcwdETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 altwsdiETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 cddETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 csdiETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 cwdETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 dtrETCCDI:
   decimalPrecision: 1
+  menuGroup: 1
 
 fdETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 gslETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 idETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 prcptotETCCDI:
   percentageAnomalies: true
   decimalPrecision: 0
+  menuGroup: 1
 
 rx1dayETCCDI:
   percentageAnomalies: true
   decimalPrecision: 0
+  menuGroup: 1
 
 rx5dayETCCDI:
   percentageAnomalies: true
   decimalPrecision: 0
+  menuGroup: 1
 
 r1mmETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 r10mmETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 r20mmETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 r95pETCCDI:
   percentageAnomalies: true
   decimalPrecision: 0
+  menuGroup: 1
 
 r99pETCCDI:
   percentageAnomalies: true
   decimalPrecision: 0
+  menuGroup: 1
 
 sdiiETCCDI:
   percentageAnomalies: true
   decimalPrecision: 0
+  menuGroup: 1
 
 suETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 tn10pETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 tn90pETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 tnnETCCDI:
   decimalPrecision: 1
+  menuGroup: 1
 
 tnxETCCDI:
   decimalPrecision: 1
+  menuGroup: 1
 
 trETCCDI:
   decimalPrecision: 1
+  menuGroup: 1
 
 tx10pETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 tx90pETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 txnETCCDI:
   decimalPrecision: 1
+  menuGroup: 1
 
 txxETCCDI:
   decimalPrecision: 1
+  menuGroup: 1
 
 wsdiETCCDI:
   decimalPrecision: 0
+  menuGroup: 1
 
 #degree-day variables
 cdd:
   decimalPrecision: 0
+  menuGroup: 2
 
 fdd:
   decimalPrecision: 0
+  menuGroup: 2
 
 gdd:
   decimalPrecision: 0
+  menuGroup: 2
 
 hdd:
   decimalPrecision: 0
+  menuGroup: 2
 
 #return period variables
 rp20pr:
   decimalPrecision: 0
   percentageAnomalies: true
+  menuGroup: 3
 
 rp20tasmax:
   decimalPrecision: 1
+  menuGroup: 3
 
 rp20tasmin:
   decimalPrecision: 1
+  menuGroup: 3
 
 rp50pr:
   decimalPrecision: 0
   percentageAnomalies: true
+  menuGroup: 3
 
 rp50tasmax:
   decimalPrecision: 1
+  menuGroup: 3
 
 rp50tasmin:
   decimalPrecision: 1
+  menuGroup: 3
 
 rp5pr:
   decimalPrecision: 0
   percentageAnomalies: true
+  menuGroup: 3
 
 rp5tasmax:
   decimalPrecision: 1
+  menuGroup: 3
 
 rp5tasmin:
   decimalPrecision: 1
+  menuGroup: 3

src/components/AppMixin/AppMixin.js

@@ -91,7 +91,7 @@ var AppMixin = {
         // Merge the selection information
         // If a dataset is already selected, use that. Otherwise, use
         // defaults if available. Otherwise, first available.
-        // CanESM2 and rcp85 are most likely to be of interest to users.
+        // Default dataset: CanESM2, rcp85, pr
         function specifiedIfAvailable(attribute, value, items) {
           return _.pluck(items, attribute).includes(value) ? value : items[0][attribute];
         }
@@ -100,10 +100,12 @@ var AppMixin = {
           specifiedIfAvailable("model_id", "CanESM2", models);
         const experiment = this.state.experiment ? this.state.experiment :
           specifiedIfAvailable("experiment", "historical, rcp85", _.where(models, {model_id: model_id}));
-        const variable_id = _.where(models, {model_id: model_id, experiment: experiment})[0].variable_id;
+        const variable_id = specifiedIfAvailable("variable_id", "pr",
+          _.where(models, {model_id: model_id, experiment: experiment}));
+        // variable_name has no default, because it must match variable_id.
         const variable_name = _.where(models, {model_id: model_id, experiment: experiment, 
           variable_id: variable_id})[0].variable_name;
-        
+
         this.setState({
           meta: models,
           model_id,

src/components/VariableDescriptionSelector/VariableDescriptionSelector.js

@@ -26,6 +26,7 @@ import _ from 'underscore';
 import IndexedSelector from '../IndexedSelector';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { getVariableOptions } from '../../core/util';
 
 export default class VariableDescriptionSelector extends React.Component {
   static propTypes = {
@@ -42,10 +43,21 @@ export default class VariableDescriptionSelector extends React.Component {
 
   //generate items for dropdown.
   update(meta, constraints) {
+	// variables are sorted into groups based on the "menuGroup"
+	// attribute in the variable configuration file.
+	// Within a group, they're alphabetical by variable_id
+	function sortVariables(variables) {
+	  let groups = _.groupBy(variables, v => {
+		const membership = getVariableOptions(v.variable_id, "menuGroup");
+		return _.isUndefined(membership) ? Number.MAX_SAFE_INTEGER : membership;});
+	  groups = _.map(groups, g=> {return _.sortBy(g, 'variable_id');});
+	  return _.flatten(groups);
+    }
+
     function varDesList(meta, constraints) {
-      return _.uniq(_.map(_.where(meta, constraints), m=> {
+      return sortVariables(_.uniq(_.map(_.where(meta, constraints), m=> {
         return _.pick(m, "variable_id", "variable_name");
-      }), false, JSON.stringify);
+      }), false, JSON.stringify));
     } 
 
     const allVars = varDesList(meta, {});