cmda-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From xingwei...@apache.org
Subject [4/9] incubator-cmda git commit: Update ApacheCMDA-Frontend with KnowledgeGraph
Date Thu, 29 Oct 2015 22:56:27 GMT
http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/threeDVariableZonalMean.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/threeDVariableZonalMean.scala.html b/ApacheCMDA-Frontend/app/views/climate/threeDVariableZonalMean.scala.html
index 4ed6e83..fb4c924 100644
--- a/ApacheCMDA-Frontend/app/views/climate/threeDVariableZonalMean.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/threeDVariableZonalMean.scala.html
@@ -1,45 +1,31 @@
-@*******************************************************************************
- * Licensed to the Apache Software Foundation (ASF) under one or more		   *
- * contributor license agreements.  See the NOTICE file distributed with	   *
- * this work for additional information regarding copyright ownership.         *
- * The ASF licenses this file to You under the Apache License, Version 2.0     *
- * (the "License"); you may not use this file except in compliance with        *
- * the License.  You may obtain a copy of the License at                       *
- *                                                                             *
- *    http://www.apache.org/licenses/LICENSE-2.0                               *
- *																			   *
- * Unless required by applicable law or agreed to in writing, software         *
- * distributed under the License is distributed on an "AS IS" BASIS,           *
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.    *
- * See the License for the specific language governing permissions and         *
- * limitations under the License.											   *
- *******************************************************************************@ 
-
-@(parameters: metadata.ThreeDVarZonalMean) @import helper._
+@(parameters: metadata.ThreeDVarZonalMean)
+
+@import helper._
+
 <link rel="stylesheet"
 	href='@routes.Assets.at("stylesheets/livefitler.css")'>
+	
 @scripts = {
-<script src='@routes.Assets.at("javascripts/edit_button.js")'></script>
-<script src='@routes.Assets.at("javascripts/livefilter.js")'></script>
-<script type="text/javascript"
-	src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'></script>
-<script type="text/javascript"
-	src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
-<script type="
-	text/javascript"
-	src='@routes.Assets.at("javascripts/json2.js")'></script>
-<script type="text/javascript"
-	src='@routes.Assets.at("javascripts/xmisc.js")'></script>
-<script type="text/javascript">
+	<script src='@routes.Assets.at("javascripts/edit_button.js")'></script>
+	<script src='@routes.Assets.at("javascripts/livefilter.js")'></script>
+	<script type="text/javascript" src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
+	<script type="text/javascript" src='@routes.Assets.at("javascripts/json2.js")'></script>
+	<script type="text/javascript" src="@routes.Assets.at("javascripts/xmisc.js")"></script>
+	<script type="text/javascript">
 	var Response = null;
     var variable = "";
+
+    // called on load or reload
     window.onload = function() {
       changeMonths();
       changeDataSource();
       select_data();
       changeVariableName();
       select_var();
+
       enable_download_button();
+      // no data to download yet
       $('#t0').val($('#startYearMonth').text());
       $('#t1').val($('#endYearMonth').text());
       $('#pres').val($('#pressureRange').text());
@@ -69,16 +55,23 @@
         $('#radioLog2').prop("checked", true);
       }
     }
+
+
+    // disable download data button
     function disable_download_button()
     {
       var x=document.getElementById("download_data");
       x.disabled=true;
     }
+
+
+    // enable download data button
     function enable_download_button()
     {
       var x=document.getElementById("download_data");
       x.disabled=false;
     }
+
     function changeMonths(){
       var months = $("#monthsPara").text();
       var temp = months.split(", ");
@@ -110,6 +103,8 @@
         }
       }
     }
+    
+    // select all months in the checkboxes
     function select_all_months()
     {
         document.getElementById('Jan').checked = true;
@@ -125,6 +120,8 @@
         document.getElementById('Nov').checked = true;
         document.getElementById('Dec').checked = true;
     }
+
+    // see if no month is selected
     function no_month_check()
     {
         if (document.getElementById('Jan').checked == false &&
@@ -139,11 +136,14 @@
            document.getElementById('Oct').checked == false &&
            document.getElementById('Nov').checked == false &&
            document.getElementById('Dec').checked == false) {
+           // alert("No month check!");
            return true;
           }
         else
            return false;
     }
+
+    // unselect all months in the checkboxes
     function reset_months()
     {
         document.getElementById('Jan').checked = false;
@@ -159,9 +159,12 @@
         document.getElementById('Nov').checked = false;
         document.getElementById('Dec').checked = false;
     }
+
+    // enable all vars in dropdown menu
     function reset_vars()
     {
       var x=document.getElementById("var");
+
       x.options[0].disabled=false;
       x.options[1].disabled=false;
       x.options[2].disabled=false;
@@ -171,10 +174,15 @@
       x.options[6].disabled=false;
       x.options[7].disabled=false;
     }
+
+    // form variable string based on "var" dropdown selection
     function select_var()
     {
       var var_string = $("#var").val();
+
+      // disable the download button because of this change
       disable_download_button();
+
       if (var_string == "Air Temperature")
         variable = "ta";
       else if (var_string == "Specific Humidity")
@@ -191,15 +199,28 @@
         variable = "wap";
       else if (var_string == "Relative Humidity")
         variable = "hur";
+
+      // alert("variable: " + variable)
     }
+
+    // set up "var" dropdown based status of "data" dropdown
     function select_data()
     {
       var data_string = $("#data").val();
       var x=document.getElementById("var");
+
+      // disable the download button because of this change
       disable_download_button();
+
+      // enable all options in "var" dropdown first
       reset_vars();
+
+      // alert(data_string);
+
+      // disable corresponding "var" options
       if (data_string == "NASA/AIRS") {
         x.options[0].selected=true;
+        //x.options[1].selected=true;
         x.options[2].disabled=true;
         x.options[3].disabled=true;
         x.options[4].disabled=true;
@@ -209,6 +230,7 @@
       }
       else if (data_string == "NASA/MLS") {
         x.options[0].selected=true;
+        //x.options[1].selected=true;
         x.options[2].disabled=true;
         x.options[3].disabled=true;
         x.options[4].disabled=true;
@@ -222,6 +244,7 @@
         x.options[2].disabled=true;
         x.options[3].disabled=true;
         x.options[4].selected=true;
+        //x.options[5].selected=true;
         x.options[6].disabled=true;
         x.options[7].disabled=true;
       }
@@ -232,17 +255,26 @@
         x.options[3].disabled=true;
         x.options[4].disabled=true;
         x.options[5].disabled=true;
+        //x.options[6].disabled=true;
+        //x.options[7].disabled=true;
         x.options[6].selected=true;
       }
       else {
         x.options[0].selected=true;
+        //x.options[1].selected=true;
+        //x.options[2].selected=true;
+        //x.options[3].selected=true;
         x.options[4].disabled=true;
         x.options[5].disabled=true;
       }
+
+      // form variable string
       select_var();
     }
+
     function changeDataSource(){
       var dataSource = $('#dataSource').text();
+      //dataSource = "NASA_QuikSCAT";
       var x = document.getElementById("data");
       if(dataSource == "NASA_AIRS" ){
         x.options[0].selected=true;
@@ -295,7 +327,9 @@
       else if(dataSource == "ECMWF_interim" ){
         x.options[16].selected=true;
       }
+        //$('#data option:contains('+dataSource+')').prop({selected: true});
     }
+    
     function changeVariableName(){
       var var_string = $('#variableName').text();
       var x = document.getElementById("var");
@@ -316,80 +350,121 @@
         else if (var_string == "hur")
           x.options[7].selected=true;
     }
+    
+    // select checkboxes based on "months" dropdown
     function select_months()
     {
       var s1=document.getElementById("months");
+      // alert(s1.selectedIndex);
+      // alert(s1.options[s1.selectedIndex].value);
+
+      // disable the download button because of this change
       disable_download_button();
+
+      // "select none"
       if (s1.selectedIndex == 1) {
         reset_months();
       }
+      // "select all"
       if (s1.selectedIndex == 0) {
         select_all_months();
       }
+      // "summer"
       if (s1.selectedIndex == 2) {
         reset_months();
         document.getElementById('Jun').checked = true;
         document.getElementById('Jul').checked = true;
         document.getElementById('Aug').checked = true;
       }
+      // "autumn"
       if (s1.selectedIndex == 3) {
         reset_months();
         document.getElementById('Sep').checked = true;
         document.getElementById('Oct').checked = true;
         document.getElementById('Nov').checked = true;
       }
+      // "winter"
       if (s1.selectedIndex == 4) {
         reset_months();
         document.getElementById('Dec').checked = true;
         document.getElementById('Jan').checked = true;
         document.getElementById('Feb').checked = true;
       }
+      // "spring"
       if (s1.selectedIndex == 5) {
         reset_months();
         document.getElementById('Mar').checked = true;
         document.getElementById('Apr').checked = true;
         document.getElementById('May').checked = true;
       }
+        
     }
+
     $(document).ready(function(){
+
       $("#download_data").click(function(event) {
         var durl = $("#data_url").val();
+         //alert(durl);
         window.location.assign(durl);
       });
+         
+
       $("#threedvarzonalmean").click(function(event) {
 	Response = null;
+
+        // no data to download yet
         disable_download_button();
+   
+        // flag error if no month box is checked
         if (no_month_check()) {
+           // $("#Response").html("<span style='color:red'>Error: please check at least one month.</span>");
            $("#Response").html("Error: please check at least one month.");
            $("#Image").html("");
            return;
         }
+
         $("#Response").html("Calculating ...");
         $("#data_url").html("Calculating ...");
         $("#Image").html("");
+
+        // sample url: http://cmacws.jpl.nasa.gov:9002/svc/threeDimZonalMean?model=ukmo_hadgem2-a&var=ts&start_time=199001&end_time=199512&lat1=-29&lat2=29&pres1=90&pres2=20months=1,2,4,5,6,10,12
+
+        // form url string
         var url = "http://" + window.location.hostname + ":9002/svc/threeDimZonalMean?";
+        // alert(url);
+
         var d1 = $("#data").val();
         var model1 = d1.replace("/", "_");
+
         var arglist = "";
         arglist = arglist.concat("model=");
         arglist = arglist.concat(model1);
+
         var v1 = $("#var").val();
         arglist = arglist.concat("&var=");
         arglist = arglist.concat(variable);
+
         var t0 = $("#t0").val();
         var t1 = $("#t1").val();
+
         t0 = t0.replace("-", "");
         t1 = t1.replace("-", "");
+
         arglist = arglist.concat("&start_time=");
         arglist = arglist.concat(t0);
+
         arglist = arglist.concat("&end_time=");
         arglist = arglist.concat(t1);
+
         var lat0 = $("#lat0").val();
         var lat1 = $("#lat1").val();
+
         arglist = arglist.concat("&lat1=");
         arglist = arglist.concat(lat0);
+
         arglist = arglist.concat("&lat2=");
         arglist = arglist.concat(lat1);
+
         var pres = $("#pres").val();
         var splitty = pres.split(',');
         if (splitty.length != 2) {
@@ -399,80 +474,118 @@
         else {
           pres1 = splitty[0];
           pres2 = splitty[1];
+
+          // alert("variable: " + variable);
+
+          // when variable is the 3D Ocean Salinity or Ocean Temperature
           if (variable == 'ot' || variable == 'os') {
-            pres1 = pres1 * 10000;  
-            pres2 = pres2 * 10000;  
+            pres1 = pres1 * 10000;  // convert from dbar on GUI
+            pres2 = pres2 * 10000;  // convert from dbar on GUI
           }
+          // when variable is 2D
           else {
-            pres1 = pres1 * 100;  
-            pres2 = pres2 * 100;  
+            pres1 = pres1 * 100;  // convert from hPa on GUI
+            pres2 = pres2 * 100;  // convert from hPa on GUI
           }
         }
+
         arglist = arglist.concat("&pres1=");
         arglist = arglist.concat(pres1);
+
         arglist = arglist.concat("&pres2=");
         arglist = arglist.concat(pres2);
+
         var s1 = document.getElementById('months');
+
+        // get months checked by client
         var month_str = "";
+
         var mm = document.getElementById('Jan');
         if (mm.checked == true)
           month_str = month_str.concat(",1");
+
         var mm = document.getElementById('Feb');
         if (mm.checked == true)
           month_str = month_str.concat(",2");
+
         var mm = document.getElementById('Mar');
         if (mm.checked == true)
           month_str = month_str.concat(",3");
+
         var mm = document.getElementById('Apr');
         if (mm.checked == true)
           month_str = month_str.concat(",4");
+
         var mm = document.getElementById('May');
         if (mm.checked == true)
           month_str = month_str.concat(",5");
+
         var mm = document.getElementById('Jun');
         if (mm.checked == true)
           month_str = month_str.concat(",6");
+
         var mm = document.getElementById('Jul');
         if (mm.checked == true)
           month_str = month_str.concat(",7");
+
         var mm = document.getElementById('Aug');
         if (mm.checked == true)
           month_str = month_str.concat(",8");
+
         var mm = document.getElementById('Sep');
         if (mm.checked == true)
           month_str = month_str.concat(",9");
+
         var mm = document.getElementById('Oct');
         if (mm.checked == true)
           month_str = month_str.concat(",10");
+
         var mm = document.getElementById('Nov');
         if (mm.checked == true)
           month_str = month_str.concat(",11");
+
         var mm = document.getElementById('Dec');
         if (mm.checked == true)
           month_str = month_str.concat(",12");
+
+        // remove the leading ','
         month_str = month_str.substr(1);
+        // alert(month_str);
+
         arglist = arglist.concat("&months=");
         arglist = arglist.concat(month_str);
+        // alert("arglist: " + arglist);
+
         arglist = arglist.concat("&scale=");
         var y = document.getElementById("radioLin").checked;
         var yval;
         var z = document.getElementById("radioLin2").checked;
         var zval;
+        // alert(y);
         if (y == true)
           yval = 0;
         else
           yval = 2;
+
         if (z == true)
           zval = 0;
         else
           zval = 4;
+
         var scale1 =  yval + zval;
         var scale1_str =  scale1.toString();
+
         arglist = arglist.concat(scale1_str);
+
         var purpose = $("#purpose").val();
         arglist = arglist.concat("&purpose=");
         arglist = arglist.concat(purpose);
+
+        // url = url + encodeURIComponent(arglist);
         url = url + encodeURI(arglist);
+        // url = url + arglist;
+        // alert("url: " + url);
+
         var urlTimeBounds = "http://" + window.location.hostname + ":9002/svc/time_bounds?";
         var arglistTB = "";
         arglistTB = arglistTB.concat("serviceType=");
@@ -482,6 +595,8 @@
         arglistTB = arglistTB.concat("&var=");
         arglistTB = arglistTB.concat(variable);
         urlTimeBounds = urlTimeBounds + encodeURI(arglistTB);
+        // alert("urlTimeBounds: " + urlTimeBounds);
+
         $.ajax({
             type: "GET",
             url: urlTimeBounds,
@@ -489,7 +604,9 @@
             data: null,
             success: function(data, textStatus, xhr) {
                 Response = data;
+                // alert("data: " + data);
                 if (data.success == false) {
+                    // alert(data.error);
                     Response = null;
                     var text = JSON.stringify(data, null, 4);
                     text = "Error in backend: <br>" + text; 
@@ -498,29 +615,44 @@
                     return;
                 }
                 var text = JSON.stringify(data, null, 4);
+                // alert("text: " + text);
+                // $("#Response").html("<pre>"+text+"</pre>");
+                // $("#Response").html(text);
+
                 var tb = data.time_bounds;
                 var bds = String(tb).split(",");
+                // alert("tb: " + tb);
+                // alert("bds: " + bds);
                 var lowerT = parseInt(bds[0]);
                 var upperT = parseInt(bds[1]);
+                // alert("lowerT: " + lowerT);
+                // alert("upperT: " + upperT);
                 var t0I = parseInt(t0);
                 var t1I = parseInt(t1);
+                // alert("t0: " + t0I);
+                // alert("t1: " + t1I);
+
                 if ( lowerT == 0 && upperT ==0 ) {
                   alert("We do not have data for this source and variable configuration.");
                   return;
                 }
+
                 if (t0I < lowerT && t1I < lowerT ||
                     t0I > upperT && t1I > upperT) {
                   alert("We do not have data that span your time range. Try the range inside ["+lowerT+", "+upperT+"].");
                   return;
                 }
+
                 if (t0I < lowerT && t1I <= upperT) {
                   alert("Your start year-month is out of bound. It has to be in or later than " + lowerT +
                         ". We will use the range ["+lowerT+", "+t1I+"] for you.");
                 }
+
                 if (t1I > upperT && t0I >= lowerT) {
                   alert("Your end year-month is out of bound. It has to be in or earlier than " + upperT +
                         ". We will use the range ["+t0I+", "+upperT+"] for you.");
                 }
+
                 if (t0I < lowerT && t1I > upperT ) {
                   alert("Both of your start and end year-months are out of bounds. They have to be in or earlier than " + upperT +
                         ", and in or later than " + lowerT + ". We will use the range ["+lowerT+", "+upperT+"] for you.");
@@ -529,10 +661,14 @@
             error: function(xhr, textStatus, errorThrown) {
 		$("#Response").html("error!");
 		$("#data_url").html("error!");
+                // alert("xhr.status: "+xhr.status);
+                // alert("error status: "+textStatus);
             },
             complete: function(xhr, textStatus) {
+                //alert("complete status: "+textStatus);
             }
         });
+
         $.ajax({
             type: "GET",
             url: url,
@@ -540,33 +676,52 @@
             data: null,
             success: function(data, textStatus, xhr) {
                 Response = data;
+                // alert("data: " + data);
                 if (data.success == false) {
+                    // alert(data.error);
                     Response = null;
                     var text = JSON.stringify(data, null, 4);
                     text = "Error in backend: <br>" + text; 
+                    // $("#Response").html("<span style='color:red'>" + text + "</span>");
                     $("#Response").html(text);
                     $("#data_url").html(text);
                     return;
                 }
                 var text = JSON.stringify(data, null, 4);
+                // alert(text);
+                // $("#Response").html("<pre>"+text+"</pre>");
                 $("#Response").html(text);
+
                 var html1 = "<img src='"+data.url+"' width='680'/>";
+                // alert(html1);
                 $("#Image").html(html1);
+
+                // post dataUrl to textarea and enable download button
                 $("#data_url").html(data.dataUrl);
                 enable_download_button();
             },
             error: function(xhr, textStatus, errorThrown) {
 		$("#Response").html("error!");
                 $("#data_url").html("error!");
+                // alert("xhr.status: "+xhr.status);
+                // alert("error status: "+textStatus);
             },
             complete: function(xhr, textStatus) {
+                //alert("complete status: "+textStatus);
             }
         });
+
       });
+
+
     });
+    
   </script>
-} @main("Parameters of ConfId", scripts){ @flash_message()
-<p>
+  }
+  @main("Parameters of ConfId", scripts){
+	
+	@flash_message()   
+	<p>
 <div id="dataSource" style="display: none;">@parameters.getDataSource()</div>
 <div id="variableName" style="display: none;">@parameters.getVariableName()</div>
 <div id="startYearMonth" style="display: none;">@parameters.getStartYearMonth()</div>
@@ -583,155 +738,163 @@
 <div id="dataURL" style="display: none;">@parameters.getDataURL()</div>
 <div id="serviceResponseText" style="display: none;">@parameters.getServiceResponseText()</div>
 <table border="1" WIDTH="800" align="center">
-	<tr>
-		<td colspan="4">
-			<center>
-				<b>Service: 3-D Variable Zonal Mean</b> <br>
-				<br> This service generates a contour plot of zonal-mean
-				vertical profiles of a 3-dimensional variable. <br> Select a
-				data source, a variable name, a time range, and a pressure range
-				below.<br>
-				<br>
-			</center>
-		</td>
-	</tr>
-	<tr>
-		<td>data source:</td>
-		<td><select name="data" , id="data" onchange="select_data()">
-				<optgroup label="Observation">
-					<option selected="NASA/AIRS">NASA/AIRS</option>
-					<option>NASA/MLS</option>
-					<option>ARGO/ARGO</option>
-				</optgroup>
-				<optgroup label="Model: Historical">
-					<option>CCCMA/CANESM2</option>
-					<option>GFDL/ESM2G</option>
-					<option>GISS/E2-H</option>
-					<option>GISS/E2-R</option>
-					<option>NCAR/CAM5</option>
-					<option>NCC/NORESM</option>
-					<option>UKMO/HadGEM2-ES</option>
-				</optgroup>
-				<optgroup label="Model: AMIP">
-					<option>CCCMA/CANAM4</option>
-					<option>CSIRO/MK3.6</option>
-					<option>GFDL/CM3</option>
-					<option>IPSL/CM5A-LR</option>
-					<option>MIROC/MIROC5</option>
-					<option>UKMO/HadGEM2-A</option>
-				</optgroup>
-				<optgroup label="Reanalysis">
-					<option>ECMWF/interim</option>
-		</select></td>
-		<td>variable name:</td>
-		<td><select name="var" , id="var" onchange="select_var()">
-				<option>Air Temperature</option>
-				<option>Specific Humidity</option>
-				<option>Cloud Ice Water Content</option>
-				<option>Cloud Liquid Water Content</option>
-				<option>Ocean Temperature</option>
-				<option>Ocean Salinity</option>
-				<option>Vertical Wind Velocity</option>
-				<option>Relative Humidity</option>
-		</select></td>
-	</tr>
-	<tr>
-		<td>start year-month:</td>
-		<td><input id="t0" value="2004-01" alt="start" /></td>
-		<td>end year-month:</td>
-		<td><input id="t1" value="2004-12" alt="end" /></td>
-	</tr>
-	<tr>
-		<td>select months:</td>
-		<td><select name="months" id="months" onchange="select_months()">
-				<option id="all">select all</option>
-				<option id="none">select none</option>
-				<option id="summer">Summer:Jun-Jul-Aug</option>
-				<option id="autum">Autumn:Sep-Oct-Nov</option>
-				<option id="winter">Winter:Dec-Jan-Feb</option>
-				<option id="spring">Spring:Mar-Apr-May</option>
-		</select></td>
-		<td>atmosphere pressure range (hPa) <br> or ocean pressure
-			range (dbar):
-		</td>
-		<td><input id="pres" value="200,900" alt="pressure" /></td>
-	</tr>
-	<tr>
-		<td><label><input type="checkbox" name="option1" id="Jan"
-				value="Jan" /> Jan<br></label> <label><input type="checkbox"
-				name="option1" id="Feb" value="Feb" /> Feb<br></label> <label><input
-				type="checkbox" name="option1" id="Mar" value="Mar" /> Mar<br></label>
-		</td>
-		<td><label><input type="checkbox" name="option1" id="Apr"
-				value="Apr" /> Apr<br></label> <label><input type="checkbox"
-				name="option1" id="May" value="May" /> May<br></label> <label><input
-				type="checkbox" name="option1" id="Jun" value="Jun" /> Jun<br></label>
-		</td>
-		<td><label><input type="checkbox" name="option1" id="Jul"
-				value="Jul" /> Jul<br></label> <label><input type="checkbox"
-				name="option1" id="Aug" value="Aug" /> Aug<br></label> <label><input
-				type="checkbox" name="option1" id="Sep" value="Sep" /> Sep<br></label>
-		</td>
-		<td><label><input type="checkbox" name="option1" id="Oct"
-				value="Oct" /> Oct<br></label> <label><input type="checkbox"
-				name="option1" id="Nov" value="Nov" /> Nov<br></label> <label><input
-				type="checkbox" name="option1" id="Dec" value="Dec" /> Dec<br></label>
-		</td>
-	</tr>
-	<tr>
-		<td>start lat (deg):</td>
-		<td><input id="lat0" value="-90" /></td>
-		<td>end lat (deg):</td>
-		<td><input id="lat1" value="90" /></td>
-	</tr>
-	<tr>
-		<td colspan="1">pressure level scale:</td>
-		<td colspan="1">
-			<form>
-				<input type="radio" name="scale1" value="linear" id="radioLin">linear
-				<input type="radio" name="scale1" value="logarithmic" id="radioLog"
-					checked>logarithmic
-			</form>
-		</td>
-		<td colspan="1">color scale:</td>
-		<td colspan="1">
-			<form>
-				<input type="radio" name="scale2" value="linear" id="radioLin2"
-					checked>linear <input type="radio" name="scale2"
-					value="logarithmic" id="radioLog2">logarithmic
-			</form>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="1">Execution purpose</td>
-		<td colspan="3">
-			<form>
-				<textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea>
-			</form>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="2" align="center"><input id="threedvarzonalmean"
-			type="submit" value="            Run  Again            "
-			style="height: 28px" /></td>
-		<form>
-			<td colspan="2" align="center"><input id="download_data"
-				type="button" value="Download Data" style="height: 28px" /></td>
-		</form>
-	</tr>
-	<tr>
-		<td colspan="4">
-			<div id="Image">Image Here</div>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="4" align="center"><textarea readonly id="data_url"
-				cols="89" rows="2">Data URL Here</textarea></td>
-	</tr>
-	<tr>
-		<td colspan="4" align="center"><textarea readonly id="Response"
-				cols="89" rows="6">Service Response Text Here</textarea></td>
-	</tr>
-	</p>
+
+<tr>
+<td colspan="4">
+<center>
+<b>Service: 3-D Variable Zonal Mean</b> <br><br>
+This service generates a contour plot of zonal-mean vertical profiles of a 3-dimensional variable. <br>
+Select a data source, a variable name, a time range, and a pressure range below.<br><br>
+
+</center>
+</td>
+</tr>
+
+<tr>
+<td>data source:</td><td><select name="data", id="data" onchange="select_data()">
+<optgroup label="Observation">
+<option selected="NASA/AIRS">NASA/AIRS</option>
+<option>NASA/MLS</option>
+<option>ARGO/ARGO</option>
+</optgroup>
+<optgroup label="Model: Historical">
+<option>CCCMA/CANESM2</option>
+<option>GFDL/ESM2G</option>
+<option>GISS/E2-H</option>
+<option>GISS/E2-R</option>
+<option>NCAR/CAM5</option>
+<option>NCC/NORESM</option>
+<option>UKMO/HadGEM2-ES</option>
+</optgroup>
+<optgroup label="Model: AMIP">
+<option>CCCMA/CANAM4</option>
+<option>CSIRO/MK3.6</option>
+<option>GFDL/CM3</option>
+<option>IPSL/CM5A-LR</option>
+<option>MIROC/MIROC5</option>
+<option>UKMO/HadGEM2-A</option>
+</optgroup>
+<optgroup label="Reanalysis">
+<option>ECMWF/interim</option>
+</select></td>
+
+<td>variable name:</td><td><select name="var", id="var" onchange="select_var()">
+<option>Air Temperature</option>
+<option>Specific Humidity</option>
+<option>Cloud Ice Water Content</option>
+<option>Cloud Liquid Water Content</option>
+<option>Ocean Temperature</option>
+<option>Ocean Salinity</option>
+<option>Vertical Wind Velocity</option>
+<option>Relative Humidity</option>
+</select></td>
+
+</tr>
+
+<tr>
+<td>start year-month:</td><td><input id="t0" value="2004-01" alt="start"/></td>
+<td>end year-month:</td><td><input id="t1" value="2004-12" alt="end"/></td>
+</tr>
+
+<tr>
+<td>select months:</td>
+<td><select name="months" id="months" onchange="select_months()">
+<option id="all">select all</option>
+<option id="none">select none</option>
+<option id="summer">Summer:Jun-Jul-Aug</option>
+<option id="autum">Autumn:Sep-Oct-Nov</option>
+<option id="winter">Winter:Dec-Jan-Feb</option>
+<option id="spring">Spring:Mar-Apr-May</option> </select>
+</td>
+<td>   
+atmosphere pressure range (hPa) <br> or ocean pressure range (dbar):
+</td>
+<td><input id="pres" value="200,900" alt="pressure"/></td>
+</tr>
+
+<tr>
+<td>
+<label><input type="checkbox" name="option1" id="Jan" value="Jan" /> Jan<br></label>
+<label><input type="checkbox" name="option1" id="Feb" value="Feb" /> Feb<br></label>
+<label><input type="checkbox" name="option1" id="Mar" value="Mar" /> Mar<br></label>
+</td>
+<td>
+<label><input type="checkbox" name="option1" id="Apr" value="Apr" /> Apr<br></label>
+<label><input type="checkbox" name="option1" id="May" value="May" /> May<br></label>
+<label><input type="checkbox" name="option1" id="Jun" value="Jun" /> Jun<br></label>
+</td>
+<td>
+<label><input type="checkbox" name="option1" id="Jul" value="Jul" /> Jul<br></label>
+<label><input type="checkbox" name="option1" id="Aug" value="Aug" /> Aug<br></label>
+<label><input type="checkbox" name="option1" id="Sep" value="Sep" /> Sep<br></label>
+</td>
+<td>
+<label><input type="checkbox" name="option1" id="Oct" value="Oct" /> Oct<br></label>
+<label><input type="checkbox" name="option1" id="Nov" value="Nov" /> Nov<br></label>
+<label><input type="checkbox" name="option1" id="Dec" value="Dec" /> Dec<br></label>
+</td>
+</tr>
+
+<tr>
+<td>start lat (deg):</td><td><input id="lat0" value="-90"/></td>
+<td>end lat (deg):</td><td><input id="lat1" value="90"/></td>
+</tr>
+
+<tr>
+<td colspan="1">
+pressure level scale:
+</td>
+<td colspan="1">
+<form> <input type="radio" name="scale1" value="linear" id="radioLin">linear
+<input type="radio" name="scale1" value="logarithmic" id="radioLog" checked>logarithmic
+</form>
+</td>
+<td colspan="1">
+color scale:
+</td>
+<td colspan="1">
+<form> <input type="radio" name="scale2" value="linear" id="radioLin2" checked>linear
+<input type="radio" name="scale2" value="logarithmic" id="radioLog2">logarithmic
+</form>
+</td>
+</tr>
+
+<tr>
+<td colspan="1">
+Execution purpose
+</td>
+<td colspan="3">
+<form>
+<textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea>
+</form>
+</td>
+</tr>
+
+<tr>
+<td colspan="2" align="center"><input id="threedvarzonalmean" type="submit" value="            Run  Again            " style="height:28px"/></td>
+<form>
+<td colspan="2" align="center"><input id="download_data" type="button" value="Download Data" style="height:28px"/>
+</td>
+</form>
+
+</tr>
+
+<tr>
+<td colspan="4">
+<div id="Image">Image Here</div>
+</td>
+</tr>
+<tr>
+<td colspan="4" align="center">
+<textarea readonly id="data_url" cols="89" rows="2">Data URL Here</textarea>
+</td>
+</tr>
+<tr>
+<td colspan="4" align="center">
+<textarea readonly id="Response" cols="89" rows="6">Service Response Text Here</textarea>
+</td>
+</tr>
+</p>
+
 </table>
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/tutorial.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/tutorial.scala.html b/ApacheCMDA-Frontend/app/views/climate/tutorial.scala.html
index f515cac..ea692be 100644
--- a/ApacheCMDA-Frontend/app/views/climate/tutorial.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/tutorial.scala.html
@@ -1,20 +1,3 @@
-@*******************************************************************************
- * Licensed to the Apache Software Foundation (ASF) under one or more		   *
- * contributor license agreements.  See the NOTICE file distributed with	   *
- * this work for additional information regarding copyright ownership.         *
- * The ASF licenses this file to You under the Apache License, Version 2.0     *
- * (the "License"); you may not use this file except in compliance with        *
- * the License.  You may obtain a copy of the License at                       *
- *                                                                             *
- *    http://www.apache.org/licenses/LICENSE-2.0                               *
- *																			   *
- * Unless required by applicable law or agreed to in writing, software         *
- * distributed under the License is distributed on an "AS IS" BASIS,           *
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.    *
- * See the License for the specific language governing permissions and         *
- * limitations under the License.											   *
- *******************************************************************************@ 
-
 @main("Tutorial") {
 
 <ol class="breadcrumb">

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/twoDVariableMap.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/twoDVariableMap.scala.html b/ApacheCMDA-Frontend/app/views/climate/twoDVariableMap.scala.html
index 4721488..83bcd96 100644
--- a/ApacheCMDA-Frontend/app/views/climate/twoDVariableMap.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/twoDVariableMap.scala.html
@@ -1,45 +1,37 @@
-@*******************************************************************************
- * Licensed to the Apache Software Foundation (ASF) under one or more		   *
- * contributor license agreements.  See the NOTICE file distributed with	   *
- * this work for additional information regarding copyright ownership.         *
- * The ASF licenses this file to You under the Apache License, Version 2.0     *
- * (the "License"); you may not use this file except in compliance with        *
- * the License.  You may obtain a copy of the License at                       *
- *                                                                             *
- *    http://www.apache.org/licenses/LICENSE-2.0                               *
- *																			   *
- * Unless required by applicable law or agreed to in writing, software         *
- * distributed under the License is distributed on an "AS IS" BASIS,           *
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.    *
- * See the License for the specific language governing permissions and         *
- * limitations under the License.											   *
- *******************************************************************************@ 
-
-@(parameters: metadata.TwoDVarMap) @import helper._
+@(parameters: metadata.TwoDVarMap)
+
+@import helper._
+
 <link rel="stylesheet"
 	href='@routes.Assets.at("stylesheets/livefitler.css")'>
+
 @scripts = {
-<script src='@routes.Assets.at("javascripts/edit_button.js")'></script>
-<script src='@routes.Assets.at("javascripts/livefilter.js")'></script>
-<script type="text/javascript"
-	src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'></script>
-<script type="text/javascript"
-	src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
-<script type="
-	text/javascript"
-	src='@routes.Assets.at("javascripts/json2.js")'></script>
-<script type="text/javascript"
-	src='@routes.Assets.at("javascripts/xmisc.js")'></script>
-<script type="text/javascript">
+	<script src='@routes.Assets.at("javascripts/edit_button.js")'></script>
+	<script src='@routes.Assets.at("javascripts/livefilter.js")'></script>
+	<script type="text/javascript" src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
+	<script type="text/javascript" src='@routes.Assets.at("javascripts/json2.js")'></script>
+	<script type="text/javascript" src='@routes.Assets.at("javascripts/xmisc.js")'></script>
+	<script type="text/javascript">
 	var Response = null;
     var variable = "";
+
+    // called on load or reload
     window.onload = function() {
+      //select_all_months();
+      
+      // no data to download yet
+      //disable_download_button();
+      
       var z=document.getElementById("download_data");
       z.disabled=false;
+      
       changeDataSource();
       select_data();
       changeVariableName();
       select_var();
+      
+      
       $('#t0').val($('#startYearMonth').text());
       $('#t1').val($('#endYearMonth').text());
       var selectMonths = $('#selectMonths').text();
@@ -64,9 +56,13 @@
       $('#Image').html('<img src="'+imageUrl+'" width=680 />');
       $('#data_url').html($('#dataURL').text());
       $('#Response').html($('serviceResponseText').text());
+      
+      
     }
+    
     function changeDataSource(){
     	var dataSource = $('#dataSource').text();
+     	//dataSource = "NASA_QuikSCAT";
      	var x = document.getElementById("data");
      	if(dataSource == "NASA_MODIS" ){
      		x.options[0].selected=true;
@@ -137,7 +133,9 @@
      	else if(dataSource == "ECMWF_interim" ){
      		x.options[22].selected=true;
      	}
+        //$('#data option:contains('+dataSource+')').prop({selected: true});
     }
+    
     function changeVariableName(){
     	var var_string = $('#variableName').text();
      	var x=document.getElementById("var");
@@ -192,6 +190,7 @@
         else if (var_string == "rsut")
         	x.options[24].selected=true;
     }
+    
     function select_monthsByPara(){
     	var monthsByPara = $('#monthsPara').text();
     	if(monthsByPara.search("jan")>-1){
@@ -231,16 +230,23 @@
     		document.getElementById('Dec').checked = true;
     	}
     }
+
+    // disable download data button
     function disable_download_button()
     {
       var x=document.getElementById("download_data");
+      //x.disabled=true;
       x.disabled = false;
     }
+
+    // enable download data button
     function enable_download_button()
     {
       var x=document.getElementById("download_data");
       x.disabled=false;
     }
+
+    // select all months in the checkboxes
     function select_all_months()
     {
         document.getElementById('Jan').checked = true;
@@ -256,6 +262,8 @@
         document.getElementById('Nov').checked = true;
         document.getElementById('Dec').checked = true;
     }
+
+    // see if no month is selected
     function no_month_check()
     {
         if (document.getElementById('Jan').checked == false &&
@@ -270,11 +278,14 @@
            document.getElementById('Oct').checked == false &&
            document.getElementById('Nov').checked == false &&
            document.getElementById('Dec').checked == false) {
+           // alert("No month check!");
            return true;
           }
         else
            return false;
     }
+
+    // unselect all months in the checkboxes
     function reset_months()
     {
         document.getElementById('Jan').checked = false;
@@ -290,9 +301,12 @@
         document.getElementById('Nov').checked = false;
         document.getElementById('Dec').checked = false;
     }
+
+    // enable all vars in dropdown menu
     function reset_vars()
     {
       var x=document.getElementById("var");
+
       x.options[0].disabled=false;
       x.options[1].disabled=false;
       x.options[2].disabled=false;
@@ -319,10 +333,15 @@
       x.options[23].disabled=false;
       x.options[24].disabled=false;
     }
+
+    // form variable string based on "var" dropdown selection
     function select_var()
     {
       var var_string = $("#var").val();
+
+      // disable the download button because of this change
       disable_download_button();
+
       if (var_string == "Total Cloud Fraction")
         variable = "clt";
       else if (var_string == "Surface Temperature")
@@ -373,13 +392,25 @@
         variable = "rsutcs";
       else if (var_string == "TOA Outgoing Shortwave Radiation")
         variable = "rsut";
+
+      // alert("variable: " + variable)
     }
+
+    // set up "var" dropdown based status of "data" dropdown
     function select_data()
     {
       var data_string = $("#data").val();
       var x=document.getElementById("var");
+
+      // disable the download button because of this change
       disable_download_button();
+
+      // enable all options in "var" dropdown first
       reset_vars();
+
+      // alert(data_string);
+
+      // disable corresponding "var" options
       if (data_string == "NASA/AMSRE") {
         x.options[0].disabled=true;
         x.options[1].disabled=true;
@@ -405,6 +436,7 @@
         x.options[22].disabled=true;
         x.options[23].disabled=true;
         x.options[24].disabled=true;
+
         x.options[3].selected=true;
       }
       else if (data_string == "NASA/MODIS") {
@@ -431,7 +463,9 @@
         x.options[22].disabled=true;
         x.options[23].disabled=true;
         x.options[24].disabled=true;
+
         x.options[1].selected=true;
+        //x.options[8].selected=true;
       }
       else if (data_string == "NASA/TRMM") {
         x.options[0].selected=true;
@@ -488,6 +522,7 @@
         x.options[24].disabled=true;
       }
       else if (data_string == "NASA/QuikSCAT") {
+
         x.options[0].disabled=true;
         x.options[1].disabled=true;
         x.options[2].disabled=true;
@@ -510,7 +545,10 @@
         x.options[22].disabled=true;
         x.options[23].disabled=true;
         x.options[24].disabled=true;
+
         x.options[4].selected=true;
+        //x.options[5].selected=true;
+        //x.options[6].selected=true;
       }
       else if (data_string == "NASA/AVISO") {
         x.options[0].disabled=true;
@@ -537,9 +575,11 @@
         x.options[22].disabled=true;
         x.options[23].disabled=true;
         x.options[24].disabled=true;
+
         x.options[7].selected=true;
       }
       else if (data_string == "NASA/GRACE") {
+
         x.options[0].disabled=true;
         x.options[1].disabled=true;
         x.options[2].disabled=true;
@@ -563,9 +603,12 @@
         x.options[22].disabled=true;
         x.options[23].disabled=true;
         x.options[24].disabled=true;
+
         x.options[9].selected=true;
+        //x.options[10].selected=true;
       }
       else if (data_string == "NOAA/NODC") {
+
         x.options[0].disabled=true;
         x.options[1].disabled=true;
         x.options[2].disabled=true;
@@ -589,9 +632,12 @@
         x.options[22].disabled=true;
         x.options[23].disabled=true;
         x.options[24].disabled=true;
+
         x.options[11].selected=true;
+        //x.options[12].selected=true;
       }
       else if (data_string == "NASA/CERES") {
+
         x.options[0].disabled=true;
         x.options[1].disabled=true;
         x.options[2].disabled=true;
@@ -605,9 +651,11 @@
         x.options[10].disabled=true;
         x.options[11].disabled=true;
         x.options[12].disabled=true;
+
         x.options[13].selected=true;
       }
       else if (data_string == "ECMWF/interim") {
+
         x.options[0].disabled=true;
         x.options[1].disabled=true;
         x.options[2].disabled=true;
@@ -632,9 +680,11 @@
         x.options[22].disabled=true;
         x.options[23].disabled=true;
         x.options[24].disabled=true;
+
         x.options[3].selected=true;
       }
       else if (data_string == "CCCMA/CANAM4" || data_string == "CSIRO/MK3.6") {
+
         x.options[3].disabled=true;
         x.options[7].disabled=true;
         x.options[8].disabled=true;
@@ -642,149 +692,235 @@
         x.options[10].disabled=true;
         x.options[11].disabled=true;
         x.options[12].disabled=true;
+
         x.options[0].selected=true;
       }
+      // for all other models
       else {
         x.options[9].disabled=true;
         x.options[10].disabled=true;
         x.options[11].disabled=true;
         x.options[12].disabled=true;
+
         x.options[0].selected=true;
       }
+
+      // form variable string
       select_var();
     }
+
+    // select checkboxes based on "months" dropdown
     function select_months()
     {
       var s1=document.getElementById("months");
+      // alert(s1.selectedIndex);
+      // alert(s1.options[s1.selectedIndex].value);
+
+      // disable the download button because of this change
       disable_download_button();
+
+      // "select none"
       if (s1.selectedIndex == 1) {
         reset_months();
       }
+      // "select all"
       if (s1.selectedIndex == 0) {
         select_all_months();
       }
+      // "summer"
       if (s1.selectedIndex == 2) {
         reset_months();
         document.getElementById('Jun').checked = true;
         document.getElementById('Jul').checked = true;
         document.getElementById('Aug').checked = true;
       }
+      // "autumn"
       if (s1.selectedIndex == 3) {
         reset_months();
         document.getElementById('Sep').checked = true;
         document.getElementById('Oct').checked = true;
         document.getElementById('Nov').checked = true;
       }
+      // "winter"
       if (s1.selectedIndex == 4) {
         reset_months();
         document.getElementById('Dec').checked = true;
         document.getElementById('Jan').checked = true;
         document.getElementById('Feb').checked = true;
       }
+      // "spring"
       if (s1.selectedIndex == 5) {
         reset_months();
         document.getElementById('Mar').checked = true;
         document.getElementById('Apr').checked = true;
         document.getElementById('May').checked = true;
       }
+        
     }
+
+
+
     $(document).ready(function(){
+
+      /* $("a").click(function(event){
+        alert("As you can see, the link no longer took you to jquery.com");
+        event.preventDefault();
+      }); */
+
       $("#download_data").click(function(event) {
         var durl = $("#data_url").val();
+        // alert(durl);
         window.location.assign(durl);
       });
+
       $("#twodvarmap").click(function(event) {
 	Response = null;
+
+        // no data to download yet
         disable_download_button();
+
+        // flag error if no month box is checked
         if (no_month_check()) {
+           // $("#Response").html("<span style='color:red'>Error: please check at least one month.</span>");
            $("#Response").html("Error: please check at least one month.");
            $("#Image").html("");
            return;
         }
+
         $("#Response").html("Calculating ...");
         $("#data_url").html("Calculating ...");
         $("#Image").html("");
+
+        // sample url: http://cmacws.jpl.nasa.gov:8090/svc/twoDimMap?model=ukmo_hadgem2-a&var=ts&start_time=199001&end_time=199512&lon1=0&lon2=100&lat1=-29&lat2=29&months=1,2,4,5,6,10,12
+
+        // form url string
+        // var url = "http://cmacws.jpl.nasa.gov:8090/svc/twoDimMap?";
         var url = "http://" + window.location.hostname + ":9002/svc/twoDimMap?";
+        //var url = "http://" + "einstein.sv.cmu.edu" + ":9002/svc/twoDimMap?";
+        //alert(url);
+
         var d1 = $("#data").val();
         var model1 = d1.replace("/", "_");
+        // alert(model1);
+        // alert(d1);
+
         var arglist = "";
         arglist = arglist.concat("model=");
         arglist = arglist.concat(model1);
+
         var v1 = $("#var").val();
         arglist = arglist.concat("&var=");
         arglist = arglist.concat(variable);
+
         var t0 = $("#t0").val();
         var t1 = $("#t1").val();
+
         t0 = t0.replace("-", "");
         t1 = t1.replace("-", "");
+
         arglist = arglist.concat("&start_time=");
         arglist = arglist.concat(t0);
+
         arglist = arglist.concat("&end_time=");
         arglist = arglist.concat(t1);
+
         var lon0 = $("#lon0").val();
         var lon1 = $("#lon1").val();
         var lat0 = $("#lat0").val();
         var lat1 = $("#lat1").val();
+
         arglist = arglist.concat("&lon1=");
         arglist = arglist.concat(lon0);
+
         arglist = arglist.concat("&lon2=");
         arglist = arglist.concat(lon1);
+
         arglist = arglist.concat("&lat1=");
         arglist = arglist.concat(lat0);
+
         arglist = arglist.concat("&lat2=");
         arglist = arglist.concat(lat1);
+
         var s1 = document.getElementById('months');
+
+        // get months checked by client
         var month_str = "";
+
         var mm = document.getElementById('Jan');
         if (mm.checked == true)
           month_str = month_str.concat(",1");
+
         var mm = document.getElementById('Feb');
         if (mm.checked == true)
           month_str = month_str.concat(",2");
+
         var mm = document.getElementById('Mar');
         if (mm.checked == true)
           month_str = month_str.concat(",3");
+
         var mm = document.getElementById('Apr');
         if (mm.checked == true)
           month_str = month_str.concat(",4");
+
         var mm = document.getElementById('May');
         if (mm.checked == true)
           month_str = month_str.concat(",5");
+
         var mm = document.getElementById('Jun');
         if (mm.checked == true)
           month_str = month_str.concat(",6");
+
         var mm = document.getElementById('Jul');
         if (mm.checked == true)
           month_str = month_str.concat(",7");
+
         var mm = document.getElementById('Aug');
         if (mm.checked == true)
           month_str = month_str.concat(",8");
+
         var mm = document.getElementById('Sep');
         if (mm.checked == true)
           month_str = month_str.concat(",9");
+
         var mm = document.getElementById('Oct');
         if (mm.checked == true)
           month_str = month_str.concat(",10");
+
         var mm = document.getElementById('Nov');
         if (mm.checked == true)
           month_str = month_str.concat(",11");
+
         var mm = document.getElementById('Dec');
         if (mm.checked == true)
           month_str = month_str.concat(",12");
+
+        // remove the leading ','
         month_str = month_str.substr(1);
+        // alert(month_str);
+
         arglist = arglist.concat("&months=");
         arglist = arglist.concat(month_str);
+        // alert("arglist: " + arglist);
+
         arglist = arglist.concat("&scale=");
         var z = document.getElementById("radioLin").checked;
+        // alert(z);
         if (z == true)
           arglist = arglist.concat('0');
         else
           arglist = arglist.concat('4');
+
         var purpose = $("#purpose").val();
         arglist = arglist.concat("&purpose=");
         arglist = arglist.concat(purpose);
+
+        // url = url + encodeURIComponent(arglist);
         url = url + encodeURI(arglist);
+        // url = url + arglist;
+        //alert("url: " + url);
+
         var urlTimeBounds = "http://" + window.location.hostname + ":9002/svc/time_bounds?";
+        //var urlTimeBounds = "http://" + "einstein.sv.cmu.edu" + ":9002/svc/time_bounds?";
         var arglistTB = "";
         arglistTB = arglistTB.concat("serviceType=");
         arglistTB = arglistTB.concat("1");
@@ -793,6 +929,9 @@
         arglistTB = arglistTB.concat("&var=");
         arglistTB = arglistTB.concat(variable);
         urlTimeBounds = urlTimeBounds + encodeURI(arglistTB);
+        // alert("urlTimeBounds: " + urlTimeBounds);
+
+
         $.ajax({
             type: "GET",
             url: urlTimeBounds,
@@ -800,7 +939,9 @@
             data: null,
             success: function(data, textStatus, xhr) {
                 Response = data;
+                // alert("data: " + data);
                 if (data.success == false) {
+                    // alert(data.error);
                     Response = null;
                     var text = JSON.stringify(data, null, 4);
                     text = "Error in backend: <br>" + text; 
@@ -809,29 +950,44 @@
                     return;
                 }
                 var text = JSON.stringify(data, null, 4);
+                // alert("text: " + text);
+                // $("#Response").html("<pre>"+text+"</pre>");
+                // $("#Response").html(text);
+
                 var tb = data.time_bounds;
                 var bds = String(tb).split(",");
+                // alert("tb: " + tb);
+                // alert("bds: " + bds);
                 var lowerT = parseInt(bds[0]);
                 var upperT = parseInt(bds[1]);
+                // alert("lowerT: " + lowerT);
+                // alert("upperT: " + upperT);
                 var t0I = parseInt(t0);
                 var t1I = parseInt(t1);
+                // alert("t0: " + t0I);
+                // alert("t1: " + t1I);
+
                 if ( lowerT == 0 && upperT ==0 ) {
                   alert("We do not have data for this source and variable configuration.");
                   return;
                 }
+
                 if (t0I < lowerT && t1I < lowerT ||
                     t0I > upperT && t1I > upperT) {
                   alert("We do not have data that span your time range. Try the range inside ["+lowerT+", "+upperT+"].");
                   return;
                 }
+
                 if (t0I < lowerT && t1I <= upperT) {
                   alert("Your start year-month is out of bound. It has to be in or later than " + lowerT +
                         ". We will use the range ["+lowerT+", "+t1I+"] for you.");
                 }
+
                 if (t1I > upperT && t0I >= lowerT) {
                   alert("Your end year-month is out of bound. It has to be in or earlier than " + upperT +
                         ". We will use the range ["+t0I+", "+upperT+"] for you.");
                 }
+
                 if (t0I < lowerT && t1I > upperT ) {
                   alert("Both of your start and end year-months are out of bounds. They have to be in or earlier than " + upperT +
                         ", and in or later than " + lowerT + ". We will use the range ["+lowerT+", "+upperT+"] for you.");
@@ -840,10 +996,14 @@
             error: function(xhr, textStatus, errorThrown) {
 		$("#Response").html("error!");
 		$("#data_url").html("error!");
+                // alert("xhr.status: "+xhr.status);
+                // alert("error status: "+textStatus);
             },
             complete: function(xhr, textStatus) {
+                //alert("complete status: "+textStatus);
             }
         });
+
         $.ajax({
             type: "GET",
             url: url,
@@ -851,32 +1011,53 @@
             data: null,
             success: function(data, textStatus, xhr) {
                 Response = data;
+                // alert("data: " + data);
                 if (data.success == false) {
+                    // alert(data.error);
                     Response = null;
                     var text = JSON.stringify(data, null, 4);
                     text = "Error in backend: <br>" + text; 
+                    // $("#Response").html("<span style='color:red'>" + text + "</span>");
                     $("#Response").html(text);
                     $("#data_url").html(text);
                     return;
                 }
                 var text = JSON.stringify(data, null, 4);
+                // alert(text);
+                // $("#Response").html("<pre>"+text+"</pre>");
                 $("#Response").html(text);
+
                 var html1 = "<img src='"+data.url+"' width='680'/>";
+                // alert(html1);
                 $("#Image").html(html1);
+
+                // post dataUrl to textarea and enable download button
                 $("#data_url").html(data.dataUrl);
                 enable_download_button();
             },
             error: function(xhr, textStatus, errorThrown) {
 		$("#Response").html("error!");
 		$("#data_url").html("error!");
+                // alert("xhr.status: "+xhr.status);
+                // alert("error status: "+textStatus);
             },
             complete: function(xhr, textStatus) {
+                //alert("complete status: "+textStatus);
             }
         });
+
       });
+
+
     });
+    
   </script>
-} @main("Service 12", scripts){ @flash_message()
+}
+
+@main("Service 12", scripts){
+	
+	@flash_message() 
+
 <p>
 <div id="dataSource" style="display: none;">@parameters.getDataSource()</div>
 <div id="variableName" style="display: none;">@parameters.getVariableName()</div>
@@ -893,176 +1074,190 @@
 <div id="image" style="display: none;">@parameters.getImage()</div>
 <div id="dataURL" style="display: none;">@parameters.getDataURL()</div>
 <div id="serviceResponseText" style="display: none;">@parameters.getServiceResponseText()</div>
+
 <table border="1" align="center">
-	<tr>
-		<td colspan="4">
-			<center>
-				<b>Service: 2-D Variable Map</b> <br> <br> This service
-				generates a map of a 2-dimensional variable with time averaging and
-				spatial subsetting. <br> Select a data source (model or
-				observation), a variable name, a time range, and a spatial range
-				(lat-lon box) below.<br>
-				<br>
-			</center>
-		</td>
-	</tr>
-	<tr>
-		<td>data source:</td>
-		<td><select name="data" , id="data" onchange="select_data()">
-				<optgroup label="Observation">
-					<option selected="NASA/MODIS">NASA/MODIS</option>
-					<option>NASA/AMSRE</option>
-					<option>NASA/TRMM</option>
-					<option>NASA/GPCP</option>
-					<option>NASA/QuikSCAT</option>
-					<option>NASA/AVISO</option>
-					<option>NASA/GRACE</option>
-					<option>NOAA/NODC</option>
-					<option>NASA/CERES</option>
-				</optgroup>
-				<optgroup label="Model: Historical">
-					<option>CCCMA/CANESM2</option>
-					<option>GFDL/ESM2G</option>
-					<option>GISS/E2-H</option>
-					<option>GISS/E2-R</option>
-					<option>NCAR/CAM5</option>
-					<option>NCC/NORESM</option>
-					<option>UKMO/HadGEM2-ES</option>
-				</optgroup>
-				<optgroup label="Model: AMIP">
-					<option>CCCMA/CANAM4</option>
-					<option>CSIRO/MK3.6</option>
-					<option>GFDL/CM3</option>
-					<option>IPSL/CM5A-LR</option>
-					<option>MIROC/MIROC5</option>
-					<option>UKMO/HadGEM2-A</option>
-				</optgroup>
-				<optgroup label="Reanalysis">
-					<option>ECMWF/interim</option>
-				</optgroup>
-		</select></td>
-		<td>variable name:</td>
-		<td><select name="var" , id="var" onchange="select_var()">
-				<option>Precipitation Flux</option>
-				<option>Total Cloud Fraction</option>
-				<option>Surface Temperature</option>
-				<option>Sea Surface Temperature</option>
-				<option>Eastward Near-Surface Wind</option>
-				<option>Northward Near-Surface Wind</option>
-				<option>Near-Surface Wind Speed</option>
-				<option>Sea Surface Height</option>
-				<option>Leaf Area Index</option>
-				<option>Equivalent Water Height Over Land</option>
-				<option>Equivalent Water Height Over Ocean</option>
-				<option>Ocean Heat Content Anomaly within 700 m Depth</option>
-				<option>Ocean Heat Content Anomaly within 2000 m Depth</option>
-				<option>Surface Downwelling Longwave Radiation</option>
-				<option>Surface Downwelling Shortwave Radiation</option>
-				<option>Surface Upwelling Longwave Radiation</option>
-				<option>Surface Upwelling Shortwave Radiation</option>
-				<option>Surface Downwelling Clear-Sky Longwave Radiation</option>
-				<option>Surface Downwelling Clear-Sky Shortwave Radiation</option>
-				<option>Surface Upwelling Clear-Sky Shortwave Radiation</option>
-				<option>TOA Incident Shortwave Radiation</option>
-				<option>TOA Outgoing Longwave Radiation</option>
-				<option>TOA Outgoing Shortwave Radiation</option>
-				<option>TOA Outgoing Clear-Sky Longwave Radiation</option>
-				<option>TOA Outgoing Clear-Sky Shortwave Radiation</option>
-		</select></td>
-	</tr>
-	<tr>
-		<td>start year-month:</td>
-		<td><input id="t0" value="2004-01" alt="start" /></td>
-		<td>end year-month:</td>
-		<td><input id="t1" value="2004-12" alt="end" /></td>
-	</tr>
-	<tr>
-		<td>select months:</td>
-		<td><select name="months" id="months" onchange="select_months()">
-				<option id="all">select all</option>
-				<option id="none">select none</option>
-				<option id="summer">Summer:Jun-Jul-Aug</option>
-				<option id="autum">Autumn:Sep-Oct-Nov</option>
-				<option id="winter">Winter:Dec-Jan-Feb</option>
-				<option id="spring">Spring:Mar-Apr-May</option>
-		</select></td>
-		<td></td>
-		<td>
-	</tr>
-	<tr>
-		<td><label><input type="checkbox" name="option1" id="Jan"
-				value="Jan" /> Jan<br></label> <label><input type="checkbox"
-				name="option1" id="Feb" value="Feb" /> Feb<br></label> <label><input
-				type="checkbox" name="option1" id="Mar" value="Mar" /> Mar<br></label>
-		</td>
-		<td><label><input type="checkbox" name="option1" id="Apr"
-				value="Apr" /> Apr<br></label> <label><input type="checkbox"
-				name="option1" id="May" value="May" /> May<br></label> <label><input
-				type="checkbox" name="option1" id="Jun" value="Jun" /> Jun<br></label>
-		</td>
-		<td><label><input type="checkbox" name="option1" id="Jul"
-				value="Jul" /> Jul<br></label> <label><input type="checkbox"
-				name="option1" id="Aug" value="Aug" /> Aug<br></label> <label><input
-				type="checkbox" name="option1" id="Sep" value="Sep" /> Sep<br></label>
-		</td>
-		<td><label><input type="checkbox" name="option1" id="Oct"
-				value="Oct" /> Oct<br></label> <label><input type="checkbox"
-				name="option1" id="Nov" value="Nov" /> Nov<br></label> <label><input
-				type="checkbox" name="option1" id="Dec" value="Dec" /> Dec<br></label>
-		</td>
-	</tr>
-	<tr>
-		<td>start lat (deg):</td>
-		<td><input id="lat0" value="-90" /></td>
-		<td>end lat (deg):</td>
-		<td><input id="lat1" value="90" /></td>
-	</tr>
-	<tr>
-		<td>start lon (deg):</td>
-		<td><input id="lon0" value="0" /></td>
-		<td>end lon (deg):</td>
-		<td><input id="lon1" value="360" /></td>
-	</tr>
-	<tr>
-		<td colspan="1">color scale:</td>
-		<td colspan="3">
-			<form>
-				<input type="radio" name="scale1" value="linear" id="radioLin"
-					checked>linear <input type="radio" name="scale1"
-					value="logarithmic" id="radioLog">logarithmic
-			</form>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="1">Execution purpose</td>
-		<td colspan="3">
-			<form>
-				<textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea>
-			</form>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="2" align="center"><input id="twodvarmap"
-			type="submit" value="            Run  Again            "
-			style="height: 28px" /></td>
-		<form>
-			<td colspan="2" align="center"><input id="download_data"
-				type="button" value="Download Data" style="height: 28px" /></td>
-		</form>
-	</tr>
-	<tr>
-		<td colspan="4">
-			<div id="Image">Image Here</div>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="4" align="center"><textarea readonly id="data_url"
-				cols="89" rows="2">Data URL Here</textarea></td>
-	</tr>
-	<tr>
-		<td colspan="4" align="center"><textarea readonly id="Response"
-				cols="89" rows="6">Service Response Text Here</textarea></td>
-	</tr>
-	</p>
+
+<tr>
+<td colspan="4">
+<center>
+<b>Service: 2-D Variable Map</b> <br> <br>
+This service generates a map of a 2-dimensional variable with time averaging and spatial subsetting. <br>
+Select a data source (model or observation), a variable name, a time range, and a spatial range (lat-lon box) below.<br><br>
+</center>
+</td>
+</tr>
+
+<tr>
+<td>data source:</td><td><select name="data", id="data" onchange="select_data()">
+<!-- <option>NASA/obs4MIPs</option>  -->
+<optgroup label="Observation">
+<option selected="NASA/MODIS">NASA/MODIS</option>
+<option>NASA/AMSRE</option>
+<option>NASA/TRMM</option>
+<option>NASA/GPCP</option>
+<option>NASA/QuikSCAT</option>
+<option>NASA/AVISO</option>
+<option>NASA/GRACE</option>
+<option>NOAA/NODC</option>
+<option>NASA/CERES</option>
+</optgroup>
+<optgroup label="Model: Historical">
+<option>CCCMA/CANESM2</option>
+<option>GFDL/ESM2G</option>
+<option>GISS/E2-H</option>
+<option>GISS/E2-R</option>
+<option>NCAR/CAM5</option>
+<option>NCC/NORESM</option>
+<option>UKMO/HadGEM2-ES</option>
+</optgroup>
+<optgroup label="Model: AMIP">
+<option>CCCMA/CANAM4</option>
+<option>CSIRO/MK3.6</option>
+<option>GFDL/CM3</option>
+<option>IPSL/CM5A-LR</option>
+<option>MIROC/MIROC5</option>
+<option>UKMO/HadGEM2-A</option>
+</optgroup>
+<optgroup label="Reanalysis">
+<option>ECMWF/interim</option>
+</optgroup>
+</select></td>
+
+<td>variable name:</td><td><select name="var", id="var" onchange="select_var()">
+<option>Precipitation Flux</option>
+<option>Total Cloud Fraction</option>
+<option>Surface Temperature</option>
+<option>Sea Surface Temperature</option>
+<option>Eastward Near-Surface Wind</option>
+<option>Northward Near-Surface Wind</option>
+<option>Near-Surface Wind Speed</option>
+<option>Sea Surface Height</option>
+<option>Leaf Area Index</option>
+<option>Equivalent Water Height Over Land</option>
+<option>Equivalent Water Height Over Ocean</option>
+<option>Ocean Heat Content Anomaly within 700 m Depth</option>
+<option>Ocean Heat Content Anomaly within 2000 m Depth</option>
+<option>Surface Downwelling Longwave Radiation</option>
+<option>Surface Downwelling Shortwave Radiation</option>
+<option>Surface Upwelling Longwave Radiation</option>
+<option>Surface Upwelling Shortwave Radiation</option>
+<option>Surface Downwelling Clear-Sky Longwave Radiation</option>
+<option>Surface Downwelling Clear-Sky Shortwave Radiation</option>
+<option>Surface Upwelling Clear-Sky Shortwave Radiation</option>
+<option>TOA Incident Shortwave Radiation</option>
+<option>TOA Outgoing Longwave Radiation</option>
+<option>TOA Outgoing Shortwave Radiation</option>
+<option>TOA Outgoing Clear-Sky Longwave Radiation</option>
+<option>TOA Outgoing Clear-Sky Shortwave Radiation</option>
+</select></td>
+
+</tr>
+
+<tr>
+<td>start year-month:</td><td><input id="t0" value="2004-01" alt="start"/></td>
+<td>end year-month:</td><td><input id="t1" value="2004-12" alt="end"/></td>
+</tr>
+
+<tr>
+<td>select months:</td>
+<td><select name="months" id="months" onchange="select_months()">
+<option id="all">select all</option>
+<option id="none">select none</option>
+<option id="summer">Summer:Jun-Jul-Aug</option>
+<option id="autum">Autumn:Sep-Oct-Nov</option>
+<option id="winter">Winter:Dec-Jan-Feb</option>
+<option id="spring">Spring:Mar-Apr-May</option> </select>
+</td>
+<td>
+</td>
+<td>
+</tr>
+
+<tr>
+<td>
+<label><input type="checkbox" name="option1" id="Jan" value="Jan" /> Jan<br></label>
+<label><input type="checkbox" name="option1" id="Feb" value="Feb" /> Feb<br></label>
+<label><input type="checkbox" name="option1" id="Mar" value="Mar" /> Mar<br></label>
+</td>
+<td>
+<label><input type="checkbox" name="option1" id="Apr" value="Apr" /> Apr<br></label>
+<label><input type="checkbox" name="option1" id="May" value="May" /> May<br></label>
+<label><input type="checkbox" name="option1" id="Jun" value="Jun" /> Jun<br></label>
+</td>
+<td>
+<label><input type="checkbox" name="option1" id="Jul" value="Jul" /> Jul<br></label>
+<label><input type="checkbox" name="option1" id="Aug" value="Aug" /> Aug<br></label>
+<label><input type="checkbox" name="option1" id="Sep" value="Sep" /> Sep<br></label>
+</td>
+<td>
+<label><input type="checkbox" name="option1" id="Oct" value="Oct" /> Oct<br></label>
+<label><input type="checkbox" name="option1" id="Nov" value="Nov" /> Nov<br></label>
+<label><input type="checkbox" name="option1" id="Dec" value="Dec" /> Dec<br></label>
+</td>
+</tr>
+
+<tr>
+<td>start lat (deg):</td><td><input id="lat0" value="-90"/></td>
+<td>end lat (deg):</td><td><input id="lat1" value="90"/></td>
+</tr>
+
+<tr>
+<td>start lon (deg):</td><td><input id="lon0" value="0"/></td>
+<td>end lon (deg):</td><td><input id="lon1" value="360"/></td>
+</tr>
+
+<tr>
+<td colspan="1">
+color scale: 
+</td>
+<td colspan="3">
+<form> <input type="radio" name="scale1" value="linear" id="radioLin" checked>linear 
+<input type="radio" name="scale1" value="logarithmic" id="radioLog">logarithmic 
+</form>
+</td>
+</tr>
+
+<tr>
+<td colspan="1">
+Execution purpose
+</td>
+<td colspan="3">
+<form>
+<textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea>
+</form>
+</td>
+</tr>
+
+
+
+
+
+<tr>
+<td colspan="2" align="center"><input id="twodvarmap" type="submit" value="            Run  Again            " style="height:28px"/></td>
+<form>
+<td colspan="2" align="center"><input id="download_data" type="button" value="Download Data" style="height:28px"/>
+</td>
+</form>
+
+</tr>
+
+<tr>
+<td colspan="4">
+<div id="Image">Image Here</div>
+</td>
+</tr>
+<tr>
+<td colspan="4" align="center">
+<textarea readonly id="data_url" cols="89" rows="2">Data URL Here</textarea>
+</td>
+</tr>
+<tr>
+<td colspan="4" align="center">
+<textarea readonly id="Response" cols="89" rows="6">Service Response Text Here</textarea>
+</td>
+</tr>
+</p>
+
 </table>
 }
+  
\ No newline at end of file


Mime
View raw message