Add valid values to output variables table

app/src/components/tables/VariableTable.js

@@ -1,6 +1,7 @@
 import React, { Component} from 'react'
 import ReactMarkdown from 'react-markdown'
 import PropTypes from 'prop-types'
+import { isUndefined } from 'lodash'
 
 import Sectors from '../badges/Sectors'
 import { GroupToggleLink, filterGroups, filterField, toggleGroups } from '../../utils'
@@ -184,6 +185,36 @@ const VariableTable = function({ config, caption, rows, groups, actions }) {
     }
   }
 
+  const getUnit = (row) => {
+    const unit = filterField(config, row.units)
+    return !isUndefined(unit) && (
+      <>
+        <p className="mb-1">
+          <strong>Unit:</strong>
+        </p>
+        <p>
+          {unit}
+        </p>
+      </>
+    )
+  }
+
+  const getValid = (row) => {
+    const valid_min = filterField(config, row.valid_min)
+    const valid_max = filterField(config, row.valid_max)
+    return !isUndefined(valid_min) && !isUndefined(valid_max) && (
+      <>
+        <div className="separator"></div>
+        <p className="mb-1">
+          <strong>Valid range:</strong>
+        </p>
+        <p>
+          {valid_min} - {valid_max}
+        </p>
+      </>
+    )
+  }
+
   return (
     <div className="w-100">
       <table className="table table-bordered table-fixed">
@@ -194,7 +225,7 @@ const VariableTable = function({ config, caption, rows, groups, actions }) {
           <tr>
             <th style={{width: '20%'}}>Variable long name</th>
             <th style={{width: '15%'}}>Variable specifier</th>
-            <th style={{width: '15%'}}>Unit</th>
+            <th style={{width: '15%'}}>Unit / Valid range</th>
             <th style={{width: '15%'}}>Resolution</th>
             <th style={{width: '35%'}}>
               Comments
@@ -223,7 +254,10 @@ const VariableTable = function({ config, caption, rows, groups, actions }) {
                       <tr key={index}>
                         <td>{row.long_name}</td>
                         <td>{getSpecifier(row)}</td>
-                        <td>{row.units}</td>
+                        <td>
+                          {getUnit(row)}
+                          {getValid(row)}
+                        </td>
                         <td>
                           <ul className="resolution-list">
                             {getResolution(row)}

assets/style.css

@@ -144,6 +144,7 @@ td :last-child {
 }
 td > ul {
     padding-left: 1.2rem;
+    margin-bottom: 0.5rem;
 }
 td > ul > li {
     margin-bottom: 0.5rem;
@@ -401,6 +402,12 @@ td.nowrap > div {
     margin-bottom: 0;
 }
 
+div.separator {
+    border-top: 1px solid #dee2e6;
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+}
+
 @media print {
     body {
         /* fix colors in printing */

definitions/variable/hydrological.yaml

@@ -376,14 +376,8 @@
   - peat
   - permafrost
   - water_global
-  valid_max:
-    other: 1000.0
-    lakes_local: 5.0
-    lakes_global: 5.0
-  valid_min:
-    other: 0.0
-    lakes_local: 0.0
-    lakes_global: 0.0
+  valid_max: 1000.0
+  valid_min: 0.0
 
 - specifier: snm
   long_name: Snow Melt