Group3

README.md

@@ -2,7 +2,7 @@ ISIMIP3 simulation protocol
 ===========================
 
 This project builds sector-specific ISIMIP protocols from a common data source.
-Machine-readable data is under [definitions](definitions/), and text under [protocol](protocol/).
+Machine-readable data are under [definitions](definitions/), and text under [protocol](protocol/).
 
 The rendered protocols are found at https://protocol.isimip.org.
 

app/src/app.js

@@ -137,15 +137,21 @@ setTimeout(() => {
       </Provider>
     )
   })
-}, 100)
 
-setTimeout(() => {
-  // scroll to anchor or position once everthing is settled
-  if (anchor) {
-    anchor.scrollIntoView()
-  }
-
-  // remove the cover div
-  const cover = document.getElementsByClassName('cover')[0]
-  cover.remove()
-}, 200)
+  setTimeout(() => {
+    // scroll to anchor or position once everthing is settled
+    if (anchor) {
+      anchor.scrollIntoView()
+    }
+
+    // set the main height to auto
+    const main = document.getElementsByTagName('main')[0]
+    main.style.height = 'auto'
+
+    setTimeout(() => {
+      // remove the cover div
+      const cover = document.getElementsByClassName('cover')[0]
+      cover.remove()
+    }, 100)
+  }, 200)
+}, 100)

app/src/components/Config.js

@@ -7,6 +7,50 @@ import { actions } from '../store'
 
 
 const Config = ({ definitions, config, actions }) => {
+  const dev_note = 'Currently in development.'
+
+  const group3_full_note = 'Ready for Group III.'
+  const group3_half_note = 'Some data are still under construction (see Table 3.1), but models' +
+    ' not needing those data may already start.'
+  const group3_none_note = 'Since most of the data are still under construction, the sector is not ready for Group III simulations.'
+
+  const group3_full_badge = (
+    <span className="badge-split" title={group3_full_note}>
+      <span className="badge badge-info badge-left">
+        <span className="circle circle-green"></span>
+      </span>
+      <span className="badge badge-info badge-right">III</span>
+    </span>
+  )
+
+  const group3_half_badge = (
+    <span className="badge-split" title={group3_half_note}>
+      <span className="badge badge-info badge-left">
+        <span className="circle-left circle-green"></span>
+        <span className="circle-right circle-yellow"></span>
+      </span>
+      <span className="badge badge-info badge-right">III</span>
+    </span>
+  )
+  const group3_none_badge = (
+    <span className="badge-split" title={group3_none_note}>
+      <span className="badge badge-info badge-left">
+        <span className="circle circle-yellow"></span>
+      </span>
+      <span className="badge badge-info badge-right">III</span>
+    </span>
+  )
+
+  const getGroup3Badge = (row) => {
+    if (row.group3) {
+      return group3_full_badge
+    } else if (row.group3_dev) {
+      return group3_half_badge
+    } else {
+      return group3_none_badge
+    }
+  }
+
   return (
     <div className="config">
       <div className="mb-3">
@@ -42,16 +86,33 @@ const Config = ({ definitions, config, actions }) => {
                          value={row.specifier}
                          checked={config.sectors.includes(row.specifier)}
                          onChange={(event) => actions.changeSector(event.target.value)} />
-                  <label className="form-check-label" htmlFor={id}>{row.title} {row.dev && <span>🚧</span>}</label>
+                  <label className="form-check-label d-flex" htmlFor={id}>
+                    <div>
+                      {row.title}
+                      {row.dev && <span className="ml-1" title={dev_note}>🚧</span>}
+                    </div>
+                    <div className="ml-auto text-nowrap">
+                      &nbsp;{getGroup3Badge(row)}
+                    </div>
+                  </label>
                 </div>
               )
             })
           }
         </div>
       </div>
-      <div className="text-muted">
-        Sectors marked with the 🚧 sign are currently in development and the protocol will not contain all nessesary information, yet.
-      </div>
+      <p className="text-muted mb-1">
+        🚧: {dev_note}
+      </p>
+      <p className="text-muted mb-1">
+        {group3_full_badge} {group3_full_note}
+      </p>
+      <p className="text-muted mb-1">
+        {group3_half_badge} {group3_half_note}
+      </p>
+      <p className="text-muted mb-1">
+        {group3_none_badge} {group3_none_note}
+      </p>
     </div>
   )
 }

app/src/components/Show.js

@@ -7,6 +7,7 @@ import Sectors from './badges/Sectors'
 
 const Show = ({ config, simulationRound, sector, html }) => {
   let className = 'show-component'
+  let tocClassName = ''
 
   const simulationRounds = simulationRound === undefined ? [] : simulationRound.split(',')
   const sectors = sector === undefined ? [] : sector.split(',')
@@ -16,13 +17,24 @@ const Show = ({ config, simulationRound, sector, html }) => {
 
     if (!simulationRounds.includes(config.simulation_round)) {
       className += ' hidden'
+      tocClassName = 'hidden'
     }
   }
   if (sectors.length > 0) {
     className += ' sectors'
 
     if (!(config.sectors.length == 0 || sectors.filter(sector => config.sectors.includes(sector)).length)) {
       className += ' hidden'
+      tocClassName = 'hidden'
+    }
+  }
+
+  const matches = html.matchAll('<h3 id="(.*?)"');
+  for (const match of matches) {
+    const id = match[1]
+    const tocLinks = document.querySelectorAll(`a[href="#${id}"]`)
+    for (let tocLink of tocLinks) {
+      tocLink.className = tocClassName
     }
   }
 

app/src/components/Table.js

@@ -7,12 +7,15 @@ import { actions } from '../store'
 
 import BiasAdjustmentTable from './tables/BiasAdjustmentTable'
 import ClimateForcingTable from './tables/ClimateForcingTable'
-import InputDatasetTable from './tables/InputDatasetTable'
-import InputVariableTable from './tables/InputVariableTable'
 import CropTable from './tables/CropTable'
-import ForestStandTable from './tables/ForestStandTable'
 import ExperimentsTable from './tables/ExperimentsTable'
+import ForcingDataTable from './tables/ForcingDataTable'
+import ForestStandTable from './tables/ForestStandTable'
+import Group3RankingTable from './tables/Group3RankingTable'
+import Group3RequirementsTable from './tables/Group3RequirementsTable'
 import HarmonizationTable from './tables/HarmonizationTable'
+import InputDatasetTable from './tables/InputDatasetTable'
+import InputVariableTable from './tables/InputVariableTable'
 import IrrigationTable from './tables/IrrigationTable'
 import LakeSiteTable from './tables/LakeSiteTable'
 import OceanRegionTable from './tables/OceanRegionTable'
@@ -21,7 +24,6 @@ import ScenarioTable from './tables/ScenarioTable'
 import SpeciesTable from './tables/SpeciesTable'
 import VariableTable from './tables/VariableTable'
 
-
 const Table = ({ definitions, config, identifier, caption, actions }) => {
   const groups = definitions.group.filter(group => group.identifier == identifier)
   const rows = definitions[identifier]
@@ -39,8 +41,14 @@ const Table = ({ definitions, config, identifier, caption, actions }) => {
       return <CropTable config={config} caption={caption} rows={rows} groups={groups} actions={actions} />
     case 'experiments':
       return <ExperimentsTable definitions={definitions} config={config} caption={caption} rows={rows} actions={actions} />
+    case 'forcing_data':
+      return <ForcingDataTable definitions={definitions} config={config} caption={caption} rows={rows} groups={groups} actions={actions} />
     case 'forest_stand':
       return <ForestStandTable config={config} caption={caption} rows={rows} actions={actions} />
+    case 'group3_ranking':
+      return <Group3RankingTable config={config} caption={caption} rows={rows} groups={groups} actions={actions} />
+    case 'group3_requirements':
+      return <Group3RequirementsTable config={config} caption={caption} rows={rows} actions={actions} />
     case 'geo_dataset':
       return <InputDatasetTable config={config} caption={caption} rows={rows} groups={groups} actions={actions} />
     case 'harmonization':

app/src/components/badges/Mandatory.js

@@ -0,0 +1,26 @@
+import React, { Component} from 'react'
+import PropTypes from 'prop-types'
+
+const Mandatory = ({ mandatory }) => {
+  if (mandatory === undefined) {
+    return null
+  } else if (mandatory) {
+    return (
+      <span className="badge badge-info badge-mandatory" title="If your models uses input data of this kind, we require to use the specified dataset. Please see the note above.">
+        mandatory
+      </span>
+    )
+  } else {
+    return (
+      <span className="badge badge-light badge-optional">
+        optional
+      </span>
+    )
+  }
+}
+
+Mandatory.propTypes = {
+  status: PropTypes.string
+}
+
+export default Mandatory

app/src/components/badges/Sectors.js

@@ -6,6 +6,9 @@ const Sectors = ({ config, sectors }) => {
   // sectors are the sectors configured for this badge
   if (sectors === undefined) {
     return <span className="badge badge-success badge-sector">all sectors</span>
+  } else if (sectors === []) {
+    // by setting `sectors: []` the display of sectors can be ommited
+    return null
   } else if (sectors === null) {
     // for the title just display the configured sectors
     if (config.sectors !== undefined && config.sectors.length > 0) {

app/src/components/badges/SocForcing.js

@@ -0,0 +1,14 @@
+import React, { Component} from 'react'
+import PropTypes from 'prop-types'
+
+const SocForcing = ({ socForcings }) => {
+  return socForcings.map(socForcing => {
+    return <span className="badge badge-secondary badge-soc-forcing" key={socForcing}>{socForcing}</span>
+  })
+}
+
+SocForcing.propTypes = {
+  socForcings: PropTypes.array
+}
+
+export default SocForcing

app/src/components/tables/ExperimentsTable.js

@@ -83,7 +83,7 @@ const ExperimentsTable = function({ definitions, config, caption, rows, actions
                         {row.priority && <p><strong>{row.priority}</strong></p>}
                         <p>
                           <SimulationRounds config={config} simulationRounds={row.simulation_rounds} />
-                          {row.group3 && <span className="badge badge-info">Group 3</span>}
+                          {row.group3 && <span className="badge badge-info">Group III</span>}
                           <Sectors config={config} sectors={row.sectors} />
                         </p>
                     </td>