You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cmda.apache.org by xi...@apache.org on 2015/10/29 23:56:30 UTC
[7/9] incubator-cmda git commit: Update ApacheCMDA-Frontend with
KnowledgeGraph
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>
}