cmda-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From xingwei...@apache.org
Subject [7/9] incubator-cmda git commit: Update ApacheCMDA-Frontend with KnowledgeGraph
Date Thu, 29 Oct 2015 22:56:30 GMT
http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/knowledgeGraph.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/knowledgeGraph.scala.html b/ApacheCMDA-Frontend/app/views/climate/knowledgeGraph.scala.html
new file mode 100644
index 0000000..fe6a223
--- /dev/null
+++ b/ApacheCMDA-Frontend/app/views/climate/knowledgeGraph.scala.html
@@ -0,0 +1,320 @@
+@(jsonData: String)
+@import helper._
+
+@scripts = {
+	<link rel="stylesheet" href='@routes.Assets.at("stylesheets/vis.css")'>
+	<style type="text/css">
+	        html, body {
+	            font: 10pt arial;
+	          }
+	        #mynetwork {
+	            width: 600px;
+	            height: 600px;
+	            border: 1px solid lightgray;
+	        }
+	        #loadingBar {
+	            position:absolute;
+	            
+	            width: 610px;
+	            height: 610px;
+	            background-color:rgba(200,200,200,0.8);
+	            -webkit-transition: all 0.5s ease;
+	            -moz-transition: all 0.5s ease;
+	            -ms-transition: all 0.5s ease;
+	            -o-transition: all 0.5s ease;
+	            transition: all 0.5s ease;
+	            opacity:1;
+	        }
+	        #wrapper {
+	            position:relative;
+	            width:900px;
+	            height:900px;
+	        }
+	
+	        #text {
+	            position:absolute;
+	            top:0px;
+	            left:530px;
+	            width:30px;
+	            height:50px;
+	            margin:auto auto auto auto;
+	            font-size:22px;
+	            color: #000000;
+	        }
+	
+	
+	        div.outerBorder {
+	            position:relative;
+	            top:300px;
+	            width:600px;
+	            height:44px;
+	            margin:auto auto auto auto;
+	            border:8px solid rgba(0,0,0,0.1);
+	            background: rgb(252,252,252); /* Old browsers */
+	            background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(237,237,237,1)
100%); /* FF3.6+ */
+	            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)),
color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
+	            background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(237,237,237,1)
100%); /* Chrome10+,Safari5.1+ */
+	            background: -o-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(237,237,237,1)
100%); /* Opera 11.10+ */
+	            background: -ms-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(237,237,237,1)
100%); /* IE10+ */
+	            background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(237,237,237,1)
100%); /* W3C */
+	            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc',
endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
+	            border-radius:72px;
+	            box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
+	        }
+	
+	        #border {
+	            position:absolute;
+	            top:2px;
+	            left:2px;
+	            width:500px;
+	            height:23px;
+	            margin:auto auto auto auto;
+	            box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
+	            border-radius:10px;
+	        }
+	
+	        #bar {
+	            position:absolute;
+	            
+	            width:10px;
+	            height:20px;
+	            margin:auto auto auto auto;
+	            border-radius:11px;
+	            border:2px solid rgba(30,30,30,0.05);
+	            background: rgb(153, 255, 255); /* Old browsers */
+	            box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
+	        }
+	
+	        #config {            
+	            
+	            width: 400px;
+	            height: 600px;
+	
+	        }
+	        #config input {
+	            display: inline-block;
+	        }
+	        #config input.vis-configuration.vis-config-rangeinput {
+	            height: 15px;
+	        }
+	        #config button, input, select, textarea {
+	            line-height: 100%;
+	        }
+	</style>
+	
+	<script type="text/javascript" src='@routes.Assets.at("javascripts/exampleUtil.js")'></script>
+	<script type="text/javascript" src='@routes.Assets.at("javascripts/vis.js")'></script>
+	<script type="text/javascript">
+	$(document).ready(function() {  
+	    $("#panel").hide(); 
+	    $("#config").hide();
+	    
+	    draw();
+	  })
+
+	    var nodes = null;
+	    var edges = null;
+	    var network = null;
+
+	    var visConfig = 1;
+
+	    function hideConfig() {
+	        if (visConfig == 0) {
+	            $("#config").hide();
+	            visConfig =1;
+	        }else {
+	            $("#config").show();
+	            visConfig =0;
+	        }
+	    }
+
+	    function draw() {
+	    	console.log("draw");
+	      // create people.
+	      // value corresponds with the age of the person
+	      var jsonString = $('#jsonData').text();
+	      var test = jsonString;
+	      
+	      //test = JSON.stringify(test);
+	      console.log("test: " + test);
+	      test = JSON.parse(test);
+	      var nodes = test.nodes;
+	      console.log("nodes: " + nodes);
+	      var edges = test.edges;
+	      console.log("edges: " + edges); 
+
+	      // Instantiate our network object.
+	      var container = document.getElementById('mynetwork');
+	      var data = {
+	        nodes: nodes,
+	        edges: edges
+	      };
+	      var options = {
+   		  nodes: {
+   			    color: {
+   			      highlight: {
+   			        border: "red",
+   			        background: "pink"
+   			      }
+   			    },
+   			    scaling: {
+   			      min: 12
+   			    },
+   			    shadow: {
+   			      enabled: true,
+   			      size: 8
+   			    },
+	   			 font: {
+	   		      color: "rgba(52,52,52,1)",
+	   		      size: 10,
+	   		      strokeWidth: 4
+	   		    },
+   			    shape: "dot",
+   			    shapeProperties: {
+   			      borderRadius: 5
+   			    }
+   			  },
+   			  edges: {
+   			    arrows: {
+   			      to: {
+   			        enabled: true,
+   			        scaleFactor: 0.4
+   			      }
+   			    },
+ 			  color: {
+ 			      highlight: "rgba(244,1,0,1)",
+ 			      hover: "rgba(0,0,0,1)",
+ 			      inherit: false
+ 			    },
+		      smooth: {
+ 			      type: "continuous",
+ 			      forceDirection: "vertical"
+ 			    }
+   			  },
+   			  interaction: {
+   			    hover: true,
+   			    multiselect: true
+   			  },
+	         groups: {
+	          dataset: {
+	            color:"#A9E2F3"
+	          },
+	          user: {
+	        	color:"#F781F3"
+	          }
+	        },
+	        
+	        physics: {    
+	          barnesHut: {
+	        	  centralGravity: 1.95,	              
+	        	  springLength: 195,
+	              springConstant: 0.185,
+	        	  damping: 0.25,
+	              avoidOverlap: 0.2
+   			    },
+   			 	maxVelocity: 10,
+   			    minVelocity: 0.75,
+	          stabilization: {
+	            enabled:true,
+	            iterations:200,
+	            updateInterval:1
+	          }
+	        },
+	        configure: {
+	          filter:function (option, path) {
+	            if (path.indexOf('physics') !== -1 || option === 'physics') {
+	              return true;
+	            }
+	            if (path.indexOf('smooth') !== -1 || option === 'smooth') {
+	              return true;
+	            }
+	            return true;
+	          },
+	          container: document.getElementById('config')
+	        }
+	      };
+	      network = new vis.Network(container, data, options);
+
+	      network.on("stabilizationProgress", function(params) {
+	                var maxWidth = 496;
+	                var minWidth = 20;
+	                var widthFactor = params.iterations/params.total;
+	                var width = Math.max(minWidth,maxWidth * widthFactor);
+
+	                document.getElementById('bar').style.width = width + 'px';
+	                document.getElementById('text').innerHTML = Math.round(widthFactor*100)
+ '%';
+	            });
+	            network.once("stabilizationIterationsDone", function() {
+	                document.getElementById('text').innerHTML = '100%';
+	                document.getElementById('bar').style.width = '496px';
+	                document.getElementById('loadingBar').style.opacity = 0;
+	                // really clean the dom element
+	                setTimeout(function () {document.getElementById('loadingBar').style.display
= 'none';}, 500);
+	            });
+
+	      //network.focusOnNode(19);
+	      network.on('select', function(properties) {
+	        var select_node = $.grep(data.nodes, function(e){
+	          return e["id"] == properties.nodes[0];
+	        })[0];
+
+	        $("#nodeName").text(select_node["title"]);
+	        //alert(select_node["title"]);
+	        $("#id").text(select_node["id"]);
+	        $("#cluster").text(select_node["cluster"]);
+	        $("#label").text(select_node["label"]);
+
+	        $("#panel").show();
+	      });
+	    }
+	    
+	    
+	</script>
+	<script type="text/javascript" src='@routes.Assets.at("javascripts/googleAnalytics.js")'></script>
+}
+
+@main("Knowledge Graph", scripts){
+	<div id="jsonData" style="display: none;">@jsonData</div>
+	<div id="knowledgeGraph">
+	
+	   <div id="loadingBar" class="col-lg-3">
+	    <div class="outerBorder" >
+	        <div id="text">0%</div>
+	        <div id="border">
+	            <div id="bar"></div>
+	        </div>
+	    </div>	    
+	   </div>
+	   
+	  <div id="mynetwork" class="col-lg-3"></div>
+	  <div class = "col-lg-offset-7">
+	        <button type="button" onclick="hideConfig()" class="btn btn-default btn-lg "><span
class="glyphicon glyphicon-star" aria-hidden="true">
+	        </span> Show Advanced Settings </button>
+	  </div>
+	  <div id="config" class="col-lg-offset-7"></div>  
+	</div>
+	
+	<br>
+	
+	<div id="panel" class="col-lg-offset-7">  
+	  <div class="well col-lg-5">
+	    <div class="text-center">
+	      <img class="card-img-top" style=" width:60%;" src="/assets/images/data.png">
+	    </div>
+	    <div class="card-block text-center">
+	      <h4 class="card-title" id="nodeName">card</h4>
+	      <p class="card-text text-muted" >A data set (or dataset) is a collection of
data.</p>
+	    </div>
+	    <ul class="list-group list-group-flush">
+	      <li class="list-group-item"><strong>Id:</strong><code id="id"></code></li>
+	      <li class="list-group-item"><strong>Cluster:</strong><code id="cluster"></code></li>
+	      <li class="list-group-item"><strong>Label:</strong><code id="label"></code></li>
+	    </ul>
+	    <div class="card-block">
+	      <a href="#" class="card-link col-lg-offset-0 col-lg-6">Card link</a> 
+	      <a href="#" class="card-link col-lg-6">Another link</a>
+	    </div>    
+	  </div>  
+	</div>
+  
+}

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/main.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/main.scala.html b/ApacheCMDA-Frontend/app/views/climate/main.scala.html
index 121fc31..a45638a 100644
--- a/ApacheCMDA-Frontend/app/views/climate/main.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/main.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.											   *
- *******************************************************************************@ 
-
 @(title: String, moreScripts: Html = Html(""))(content: Html) 
 
 <!DOCTYPE html>
@@ -44,7 +27,7 @@
 <link href='@routes.Assets.at("stylesheets/style.css")'
 	rel="stylesheet" />
 
-<script src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'
+<script src="https://code.jquery.com/jquery-1.11.3.js"
 	type="text/javascript"></script>	
 <script src='@routes.Assets.at("javascripts/bootstrap.min.js")'
 	type="text/javascript"></script>

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/mostPopularServices.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/mostPopularServices.scala.html b/ApacheCMDA-Frontend/app/views/climate/mostPopularServices.scala.html
index 675c307..92441dd 100644
--- a/ApacheCMDA-Frontend/app/views/climate/mostPopularServices.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/mostPopularServices.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.											   *
- *******************************************************************************@ 
-
 @(climateServices: List[metadata.ClimateService], climateServiceForm: play.data.Form[metadata.ClimateService])
 
 @import helper._

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/mostRecentlyAddedServices.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/mostRecentlyAddedServices.scala.html b/ApacheCMDA-Frontend/app/views/climate/mostRecentlyAddedServices.scala.html
index 98d738a..6e2bd75 100644
--- a/ApacheCMDA-Frontend/app/views/climate/mostRecentlyAddedServices.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/mostRecentlyAddedServices.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.											   *
- *******************************************************************************@ 
-
 @(climateServices: List[metadata.ClimateService], climateServiceForm: play.data.Form[metadata.ClimateService])
 
 @import helper._

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/mostRecentlyUsedServices.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/mostRecentlyUsedServices.scala.html b/ApacheCMDA-Frontend/app/views/climate/mostRecentlyUsedServices.scala.html
index 0b65381..ed4df90 100644
--- a/ApacheCMDA-Frontend/app/views/climate/mostRecentlyUsedServices.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/mostRecentlyUsedServices.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.											   *
- *******************************************************************************@ 
-
 @(climateServices: List[metadata.ClimateService], climateServiceForm: play.data.Form[metadata.ClimateService])
 
 @import helper._

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/oneService.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/oneService.scala.html b/ApacheCMDA-Frontend/app/views/climate/oneService.scala.html
index ecb9373..077c691 100644
--- a/ApacheCMDA-Frontend/app/views/climate/oneService.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/oneService.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.											   *
- *******************************************************************************@ 
-
 @(url: String) 
 
 @import helper._ 

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/recommend.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/recommend.scala.html b/ApacheCMDA-Frontend/app/views/climate/recommend.scala.html
index d9ec392..55df4fa 100644
--- a/ApacheCMDA-Frontend/app/views/climate/recommend.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/recommend.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.											   *
- *******************************************************************************@ 
-
 @(jsonData: String)
 @import helper._
 

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/regridAndDownload.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/regridAndDownload.scala.html b/ApacheCMDA-Frontend/app/views/climate/regridAndDownload.scala.html
index 0da46d4..e14f746 100644
--- a/ApacheCMDA-Frontend/app/views/climate/regridAndDownload.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/regridAndDownload.scala.html
@@ -1,69 +1,72 @@
-@*******************************************************************************
- * 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.RegridAndDownload) @import helper._
+@(parameters: metadata.RegridAndDownload) 
+@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("jhtml/js/xmisc.js")'></script>
-<script type="text/javascript"
-	src='@routes.Assets.at("html/js2/varList.js")'></script>
 <script type="text/javascript"
-	src='@routes.Assets.at("html/js2/dataList2.js")'></script>
+	src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
 <script type="text/javascript"
-	src='@routes.Assets.at("html/js2/common.js")'></script>
+	src='@routes.Assets.at("javascripts/json2.js")'></script>
+<script type="text/javascript" src='@routes.Assets.at("jhtml/js/xmisc.js")'></script>
+<script type="text/javascript" src='@routes.Assets.at("html/js2/varList.js")'></script>
+<script type="text/javascript" src='@routes.Assets.at("html/js2/dataList2.js")'></script>
+<script type="text/javascript" src='@routes.Assets.at("html/js2/common.js")'></script>
+
 <script type="text/javascript">
+
+    
     var Response = null;
     var variable = "";
+ 
+    // called on load or reload
     window.onload = function() {
+
     	put_data(1);
     	changeDataSource();
         put_var(1);
         changeVariableName();
+      
       enable_download_button();
+
       $('#t0').val($('#startYearMonth').text());
       $('#t1').val($('#endYearMonth').text());
+      
       if($('#pressureLevel').text() == "-999999"){
       	disable_pres1(1);
       }else{
       	$('#pres1').val($('#pressureLevel').text());
       }
+
       $('#lat0').val($('#startLat').text());
       $('#lat1').val($('#endLat').text());
       $('#dlat').val($('#deltaLat').text());
+
       $('#lon0').val($('#startLon').text());
       $('#lon1').val($('#endLon').text());
       $('#dlon').val($('#deltaLon').text());
+
       $('#purpose').html($('#executionPurpose').text());
+      
+      
       $('#data_url').html($('#dataURL').text());
       $('#Response').html($('#serviceResponseText').text());
+      
     }
+ 
+
+
  function changeDataSource() {
 	    var dataSource = $('#dataSource').text();
+	    //dataSource = "NASA_QuikSCAT";
 	    var x = document.getElementById("data1");
+	    // if(dataSource == "NASA_AIRS" ){
 	    if(dataSource == "gfdl_esm2g" ){
      		x.options[0].selected=true;
      	}
@@ -139,31 +142,121 @@
      	else if(dataSource == "ecmwf_interim" ){
      		x.options[24].selected=true;
      	}
+      // }
       }
+
 function changeVariableName(){
       var var_string = $('#variableName').text();
       var data_string = $('#dataSource').text();
       data_string = data_string.replace("_", "/").toUpperCase();
+      
+    
       var varList2 = dataList[data_string][1];  
       var x = document.getElementById("var1");
+      
       for (var i=0; i<varList2.length; i++) {
     	  var k = varList2[i];
+    	  
           if (k == var_string) {
           	x.options[i].selected=true;
           	break;
           }
       }
+      /*
+      if (var_string == "clt")
+   		x.options[1].selected=true;
+      else if (var_string == "ts")
+      	x.options[2].selected=true;
+      else if (var_string == "tos")
+      	x.options[3].selected=true;
+      else if (var_string == "pr")
+      	x.options[0].selected=true;
+      else if (var_string == "uas")
+      	x.options[4].selected=true;
+      else if (var_string == "vas")
+      	x.options[5].selected=true;
+      else if (var_string == "sfcWind")
+      	x.options[6].selected=true;
+      else if (var_string == "zos")
+      	x.options[7].selected=true;
+      else if (var_string == "lai")
+      	x.options[8].selected=true;
+      else if (var_string == "zl")
+      	x.options[9].selected=true;
+      else if (var_string == "zo")
+      	x.options[10].selected=true;
+      else if (var_string == "ohc700")
+      	x.options[11].selected=true;
+      else if (var_string == "ohc2000")
+      	x.options[12].selected=true;
+      else if (var_string == "rlds")
+      	x.options[13].selected=true;
+      else if (var_string == "rsds")
+      	x.options[14].selected=true;
+      else if (var_string == "rlus")
+      	x.options[15].selected=true;
+      else if (var_string == "rsus")
+      	x.options[16].selected=true;
+      else if (var_string == "rldscs")
+      	x.options[17].selected=true;
+      else if (var_string == "rsdscs")
+      	x.options[18].selected=true;
+      else if (var_string == "rsuscs")
+      	x.options[19].selected=true;
+      else if (var_string == "rsdt")
+      	x.options[20].selected=true;
+      
+      else if (var_string == "rlut")
+      	x.options[21].selected=true;
+      else if (var_string == "rsut")
+       	x.options[22].selected=true;
+      else if (var_string == "rlutcs")
+       	x.options[23].selected=true;
+      else if (var_string == "rsutcs")
+      	x.options[24].selected=true;     
+      else if (var_string == "ta")
+      	x.options[25].selected=true;
+      else if (var_string == "hus")
+      	x.options[26].selected=true;
+      else if (var_string == "cli")
+      	x.options[27].selected=true;
+      else if (var_string == "clw")
+      	x.options[28].selected=true;
+      else if (var_string == "ot")
+      	x.options[29].selected=true;
+      else if (var_string == "os")
+       	x.options[30].selected=true;
+      else if (var_string == "wap")
+       	x.options[31].selected=true;
+      else if (var_string == "hur")
+       	x.options[32].selected=true;
+      */
     }
+
+// function changePres() {
+//       // var dataSource = $('#data1').text();
+//       //dataSource = "NASA_QuikSCAT";
+//       var x = document.getElementById("pres1");
+//       x.value = "sss";
+//       // if(dataSource == "NASA_AIRS" ){
+//         // x.options[1].selected=true;
+//       // }
+//       }
+
 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;
     }
+
+    // disable pressure level box for 2D var
     function disable_pres1(ID)
     {
       var x;
@@ -171,14 +264,19 @@ function disable_download_button()
       x.value = "N/A";
       x.disabled=true;
     }
+
+    // enable pressure level box for 3D var
     function enable_pres1(ID)
     {
       var x;
       x=document.getElementById("pres"+ID);
+      //x.value = "500";
       x.disabled=false;
     }
+
     function put_data(ID){
       var list1=document.getElementById("data"+ID);
+
       for(var key in dataList) {
         if (key.slice(0,5)==="group") {
           var og = document.createElement("OPTGROUP");
@@ -189,11 +287,13 @@ function disable_download_button()
         }
       }
     }
+
     function put_var(ID) {
       var list1=document.getElementById("var"+ID);
       for (var i=list1.length-1; i>=0; i--) {
       list1.remove(i);
       }
+
       data_string =  document.getElementById("data"+ID).value;
       var varList2 = dataList[data_string][1];  
       for (var i=0; i<varList2.length; i++) {
@@ -201,48 +301,90 @@ function disable_download_button()
         list1.add(new Option(varList[k][0],k));
       }
     }
+
+    // 
     function select_var1(ID)
     {
       var var_string;
       var_string = $("#var"+ID).val();
+      
       variable = var_string;
+      // alert("var_string: " + var_string)
+
       if (varList[var_string][2]==3) {
         enable_pres1(ID);
       } else {
         disable_pres1(ID);
       }
+
+      //alert("variable1: " + var_string);
     }
+
     $(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);
       });
+
+
       $("#action1").click(function(event) {
+        // alert('****** inside scatterPlot2V()!');
         Response = null;
+
+        // no data to download yet
         disable_download_button();
+
         $("#Response").html("Calculating ...");
         $("#data_url").html("Calculating ...");
+
+        // sample url: http://cmacws.jpl.nasa.gov:8090/svc/scatterPlot2V?model1=ukmo_hadgem2-a&var1=ts&pres1=200&model2=ukmo_hadgem2-a&var2=clt&pres2=200&start_time=199001&end_time=199512&lon1=0&lon2=100&lat1=-29&lat2=29
+        // form url string
+        // var url = "http://cmacws.jpl.nasa.gov:8090/svc/scatterPlot2V?";
         var url = "http://" + window.location.hostname + ":9002/svc/regridAndDownload?";
+        // alert("url: " + url);
+
         var d1 = $("#data1").val();
         var model1 = d1.replace("/", "_");
         model1 = model1.toLowerCase();
+
         var arglist = "";
         arglist = arglist.concat("model=");
         arglist = arglist.concat(model1);
+
+        // alert("arglist: " + arglist);
+
         var v1 = $("#var1").val();
         arglist = arglist.concat("&var=");
         arglist = arglist.concat(v1);
+
+        // alert("arglist: " + arglist);
+
         var pres1 = $("#pres1").val();
         arglist = arglist.concat("&plev=");
         arglist = arglist.concat(pres1);
+
         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);
+
+        // alert("arglist: " + arglist);
+
         var lon0 = $("#lon0").val();
         var lon1 = $("#lon1").val();
         var dlon = $("#dlon").val();
@@ -250,21 +392,34 @@ function disable_download_button()
         var lat1 = $("#lat1").val();
         var dlat = $("#dlat").val();
         var purpose = $("#purpose").val();
+
         arglist = arglist.concat("&lon1=");
         arglist = arglist.concat(lon0);
+
         arglist = arglist.concat("&lon2=");
         arglist = arglist.concat(lon1);
+
         arglist = arglist.concat("&dlon=");
         arglist = arglist.concat(dlon);
+
         arglist = arglist.concat("&lat1=");
         arglist = arglist.concat(lat0);
+
         arglist = arglist.concat("&lat2=");
         arglist = arglist.concat(lat1);
+
         arglist = arglist.concat("&dlat=");
         arglist = arglist.concat(dlat);
+
         arglist = arglist.concat("&purpose=");
         arglist = arglist.concat(purpose);
+        // alert("arglist: " + arglist);
+
+        // 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=");
@@ -274,6 +429,8 @@ function disable_download_button()
         arglistTB = arglistTB.concat("&var=");
         arglistTB = arglistTB.concat(variable);
         urlTimeBounds = urlTimeBounds + encodeURI(arglistTB);
+        // alert("urlTimeBounds: " + urlTimeBounds);
+
         $.ajax({
             type: "GET",
             url: urlTimeBounds,
@@ -281,7 +438,9 @@ function disable_download_button()
             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; 
@@ -290,29 +449,44 @@ function disable_download_button()
                     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.");
@@ -321,10 +495,14 @@ function disable_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);
             }
         });
+
         $.ajax({
             type: "GET",
             url: url,
@@ -332,33 +510,49 @@ function disable_download_button()
             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);
+
                     if (text.indexOf("No Data") != -1) {
                       $("#Response").html("No Data");
                       $("#data_url").html("No Data");
                       return;
                     }
+
                     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);
+
+                // 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>
@@ -376,7 +570,15 @@ function disable_download_button()
 <div id="executionPurpose" style="display: none;">@parameters.getExecutionPurpose()</div>
 <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>
@@ -387,18 +589,25 @@ function disable_download_button()
 			</center>
 		</td>
 	</tr>
+
 	<tr>
 		<td>data source:</td>
 		<td><select name="data1" id="data1" onchange="put_var(1)">
 		</select></td>
+
 		<td>variable name:</td>
 		<td><select name="var1" id="var1" onchange="select_var1(1)">
 		</select></td>
 	</tr>
+
 	<tr>
-		<td colspan=4>atmosphere pressure level (hPa), or ocean pressure
-			level (dbar) <input list="plev1" id="pres1" size="50"
-			value="@parameters.getPressureLevel()"> <datalist id="plev1">
+		<td colspan=4>atmosphere pressure level (hPa), or ocean pressure level (dbar)
+			<!--
+			<input id=pres1 size=50>
+			--> 
+			<input list="plev1" id="pres1" size="50"
+			value="@parameters.getPressureLevel()"> 
+			<datalist id="plev1">
 				<option value="100000,80000,50000,30000,20000,10000"></option>
 				<option value="100000,30000,10000"></option>
 				<option value="100000,10000"></option>
@@ -406,13 +615,16 @@ function disable_download_button()
 			</datalist>
 		</td>
 	</tr>
+
 	<tr>
 		<td>start year-month: <input id="t0"
-			value="@parameters.getStartYearMonth()" alt="start" size="10" /></td>
+			value="@parameters.getStartYearMonth()" alt="start" size="10"/></td>
 		<td>end year-month: <input id="t1"
-			value="@parameters.getEndYearMonth()" alt="end" size="10" /></td>
+			value="@parameters.getEndYearMonth()" alt="end" size="10"/></td>
 		<td colspan=2></td>
 	</tr>
+
+
 	<tr>
 		<td width="25%">start lat (deg): <input size=5 id="lat0"
 			value="@parameters.getStartLat()" /></td>
@@ -422,6 +634,7 @@ function disable_download_button()
 			value="@parameters.getDeltaLat()" /></td>
 		<td></td>
 	</tr>
+
 	<tr>
 		<td width="25%">start lon (deg): <input size=5 id="lon0"
 			value="@parameters.getStartLon()" /></td>
@@ -446,14 +659,18 @@ function disable_download_button()
 			<td colspan="2" align="center"><input id="download_data"
 				type="button" value="Download Data" style="height: 28px" /></td>
 		</form>
+
 	</tr>
+
 	<tr>
 		<td colspan="4" align="center"><textarea readonly id="data_url"
 				cols="130" rows="2">@parameters.getDataURL()</textarea></td>
 	</tr>
+
 	<tr>
 		<td colspan="4" align="center"><textarea id="Response" cols="130"
 				rows="6">@parameters.getServiceResponseText()</textarea></td>
 	</tr>
+
 </table>
 }



Mime
View raw message