1. Create a new scala template in geodashboard/app/views/detail_view/tabs

    @()(implicit lang: Lang)
<div class="tab-pane" id="dissolved-oxygen-profile">

</div>


  2. In Geodashboard/app/views/detail.scala.html

    1. Create the tab

       <li id="dissolved-oxygen-tab"><a href="#dissolved-oxygen-profile" data-toggle="tab">Dissolved Oxygen</a></li>

      Note: The href needs to match the id in the Scala Template

    2. Import the scala template

      @detail_view.tabs.dissolved_oxygen()

      This adds the code from the template to the DOM

  3. In Geodashboard /src/javascript/views/DetailView.js

    1. Create the following objects:


      var dissolved_oxygen_params = [];
var dissolvedOxygenMap = {};



    2. Where properties are being assigned to a params map for each tab add something similar to: 

       else if (parr[0].id.indexOf('ignored') == -1 && parr[0].get('detailView') === 'dissolved_oxygen') {
      dissolvedOxygenMap[parr[0].id] = key;
      dissolved_oxygen_params.push(parr[0].id);
}


    3. Add code to toggle on and off the tab based on if there is at least one parameter for that tab. 

      if (dissolved_oxygen_params.length > 0) {
   $("#dissolved-oxygen-tab").toggle(true);
} else {
   $("#dissolved-oxygen-tab").toggle(false);
}


    4. Set the tab title

       if (source.get('tabs').dissolvedOxygen) {
     $('#dissolved-oxygen-tab').find('a').text(source.get('tabs').dissolvedOxygen);
}


  4. Add a Changelog entry
  5. Define the specifics of the tab on the Seagrant/GLTG/IMLCZO project, so it gets copied over
  6. Define the functionality for creating the graphs and filling up the tab in 3.c after toggling on the tab. 

Sample Pull request: https://opensource.ncsa.illinois.edu/bitbucket/projects/GEOD/repos/geodashboard/pull-requests/543/overview