Update valid values in output variables table

Author: jochenklar

app/src/components/tables/VariableTable.js

@@ -185,48 +185,34 @@ const VariableTable = function({ config, caption, rows, groups, actions }) {
     }
   }
 
-  const getValid = (row, field, label) => {
-    const value = filterField(config, row[field])
+  const getUnit = (row) => {
+    const unit = filterField(config, row.units)
+    return !isUndefined(unit) && (
+      <>
+        <p className="mb-1">
+          <strong>Unit:</strong>
+        </p>
+        <p>
+          {unit}
+        </p>
+      </>
+    )
+  }
 
-    if (typeof value === 'object') {
-      if (Object.keys(value).length > 1) {
-        return <>
-          <p><strong>{label}</strong></p>
-          <ul>
-            {
-              Object.keys(value).map((sector, index) => {
-                return (
-                  <li key={index}>
-                    <em className="sector">{sector}:</em>{' '}{value[sector]}
-                    {
-                      (row.units != 1) && <>{' '}<span>{row.units}</span></>
-                    }
-                  </li>
-                )
-              })
-            }
-          </ul>
-        </>
-      } else {
-        return (
-          <p>
-            <strong>{label}</strong>{' '}<span>{Object.values(value)[0]}</span>
-            {
-              (row.units && row.units != 1) && <>{' '}<span>{row.units}</span></>
-            }
-          </p>
-        )
-      }
-    } else {
-      return (
+  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>
-          <strong>{label}</strong>{' '}<span>{value}</span>
-          {
-            (row.units && row.units != 1) && <>{' '}<span>{row.units}</span></>
-          }
+          {valid_min} - {valid_max}
         </p>
-      )
-    }
+      </>
+    )
   }
 
   return (
@@ -269,7 +255,8 @@ const VariableTable = function({ config, caption, rows, groups, actions }) {
                         <td>{row.long_name}</td>
                         <td>{getSpecifier(row)}</td>
                         <td>
-                          <p>{row.units}</p>
+                          {getUnit(row)}
+                          {getValid(row)}
                         </td>
                         <td>
                           <ul className="resolution-list">
@@ -284,8 +271,6 @@ const VariableTable = function({ config, caption, rows, groups, actions }) {
                             <Sectors config={config} sectors={row.sectors} />
                           </p>
                           {getDimensions(row)}
-                          {getValid(row, 'valid_min', 'Minimum valid value:')}
-                          {getValid(row, 'valid_max', 'Maximum valid value:')}
                           {getComment(row)}
                         </td>
                       </tr>

assets/style.css

@@ -402,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