You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@climate.apache.org by ah...@apache.org on 2013/08/20 00:38:28 UTC
svn commit: r1515647 - in
/incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app: index.html
js/controllers/ParameterSelectCtrl.js js/controllers/RcmedSelectionCtrl.js
js/services/EvaluationSettings.js
Author: ahart
Date: Mon Aug 19 22:38:28 2013
New Revision: 1515647
URL: http://svn.apache.org/r1515647
Log:
CLIMATE-259: updates to the web user interface to support passing information for multiple models/datasets to the back-end services
Modified:
incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/index.html
incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/controllers/ParameterSelectCtrl.js
incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/controllers/RcmedSelectionCtrl.js
incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/services/EvaluationSettings.js
Modified: incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/index.html
URL: http://svn.apache.org/viewvc/incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/index.html?rev=1515647&r1=1515646&r2=1515647&view=diff
==============================================================================
--- incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/index.html (original)
+++ incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/index.html Mon Aug 19 22:38:28 2013
@@ -36,32 +36,236 @@
</head>
<body ng-cloak>
+ <bootstrap-modal modal-id="evaluationSettings">
+ <div class="modal-header">
+ <button class="close">×</button>
+ <h3>Settings</h3>
+ </div>
+ <div class="modal-body" ng-controller="SettingsCtrl">
+ <h4>Select the metrics you would like to run.</h4>
+ <div ng-repeat="metric in settings.metrics">
+ <label><input type="checkbox" ng-model="metric.select"> {{metric.name}}</label>
+ </div>
+ <hr />
+ <h4>Select how you would like to temporally re-grid the datasets.</h4>
+ <select ng-model="settings.temporal.selected" ng-options="opt for opt in settings.temporal.options"></select>
+ <hr />
+ <h4>Select which dataset to use as the grid base.</h4>
+ <select ng-model="settings.spatialSelect" ng-options="dataset as dataset.name for dataset in datasets"></select>
+ <hr />
+ <h4>Select a file which will define the bounds of subregions.</h4>
+ <form class="form-inline" autocomplete="off">
+ <input id="subregionFileInput" predictive-file-browser-input ng-model="settings.subregionFile" type="text" class="input-xlarge" autocomplete="off" />
+ </form>
+ {{settings}}
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn btn-primary close">Close</a>
+ </div>
+ </bootstrap-modal>
+
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
- <!-- Title -->
- <div class="row-fluid">
- <div class="span12 text-center">
- <br><br>
- <h2>Apache Open Climate Workbench UI</h2>
- </div>
- </div>
- <!-- Navigation bar -->
- <div class="row-fluid">
- <div class="navbar navbar-fixed-top">
- <div class="navbar-inner">
- <div class="container">
- <a class="brand" href="#">A.OCW</a>
- <ul class="nav">
- <li ng-class="{ active: $state.includes('main') }"><a href="#">Evaluate</a></li>
- <li ng-class="{ active: $state.includes('results') }"><a href="#/results">Results</a></li>
- </ul>
- </div>
- </div>
- </div>
- <hr />
- </div>
- </div>
+ <div class="row-fluid">
+ <div class="span12 text-center">
+ <h2>Apache Open Climate Workbench UI</h2>
+ </div>
+ </div>
+ <div class="row-fluid">
+ <hr />
+ </div>
+ <div class="row-fluid">
+ <div class="span12">
+ <div class="row-fluid">
+ <div class="span6">
+ <!--Dataset Select Controls-->
+ <div ng-controller="DatasetSelectCtrl">
+ <div class="row-fluid">
+ <div class="span1 offset10">
+ <button class="btn btn-link no-color-link" ng-click="clearDatasets()" ng-disabled="shouldDisableClearButton()">
+ <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Clear Datasets">
+ <i class="icon-trash icon-2x"></i>
+ </span>
+ </button>
+ </div>
+ <div class="span1">
+ <button class="btn btn-link no-color-link" bootstrap-modal-open="datasetSelect">
+ <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Add Dataset">
+ <i class="icon-plus icon-2x"></i>
+ </span>
+ </button>
+ </div>
+ </div>
+ <div class="row-fluid">
+ <div class="span12">
+ <hr />
+ </div>
+ </div>
+ </div>
+ <!--Dataset display-->
+ <div ng-controller="DatasetDisplayCtrl" id="datasetDiv">
+ {{datasets}}
+ <div ng-repeat="dataset in datasets">
+ <div class="row-fluid">
+ <!--Data section-->
+ <div class="span8 offset1 muted">
+ {{dataset.name}}
+ </div>
+ <div class="span1 offset2">
+ <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Remove Dataset">
+ <a class="no-color-link" href="#" ng-click="removeDataset($index)">
+ <i class="icon-remove"></i>
+ </a>
+ </span>
+ </div>
+ </div>
+ <!--Time Values!-->
+ <div class="row-fluid">
+ <!--Dataset Info Section-->
+ <div class="span9">
+ <div class="row-fluid">
+ <div class="span2 offset1 text-center">Start:</div>
+ <div class="span2">
+ <div class="span2 text-center">{{dataset.timeVals.start | ISODateToMiddleEndian}}</div>
+ </div>
+ <div class="span2 text-center">End:</div>
+ <div class="span2">
+ <div class="span2 text-center">{{dataset.timeVals.end | ISODateToMiddleEndian}}</div>
+ </div>
+ </div>
+ <!--Lat/Long Values!-->
+ <div class="row-fluid">
+ <div class="span2 offset1 text-center">North:</div>
+ <div class="span2 text-center">
+ {{dataset.latlonVals.latMax}}
+ </div>
+ <div class="span2 text-center">East:</div>
+ <div class="span2 text-center">
+ {{dataset.latlonVals.lonMax}}
+ </div>
+ </div>
+ <div class="row-fluid">
+ <div class="span2 offset1 text-center">South:</div>
+ <div class="span2 text-center">
+ {{dataset.latlonVals.latMin}}
+ </div>
+ <div class="span2 text-center">West:</div>
+ <div class="span2 text-center">
+ {{dataset.latlonVals.lonMin}}
+ </div>
+ </div>
+ </div>
+ <!--Preview Map Section-->
+ <div class="span3">
+ <!--If the dataset is global we show a picture of a globe instead of the actual map-->
+ <div ng-hide="dataset.latlonVals.lonMin == -180 && dataset.latlonVals.lonMax == 180 &&
+ dataset.latlonVals.latMin == -90 && dataset.latlonVals.latMax == 90"
+ preview-map="dataset" index="$index"></div>
+ <div ng-show="dataset.latlonVals.lonMin == -180 && dataset.latlonVals.lonMax == 180 &&
+ dataset.latlonVals.latMin == -90 && dataset.latlonVals.latMax == 90">
+ <img src="img/globe.png" class="preview-map">
+ </div>
+ </div>
+ </div>
+ <div class="row-fluid">
+ <div class="span6 offset3"><hr /></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="span6">
+ <!--Map-->
+ <div class="row-fluid" ng-controller="WorldMapCtrl">
+ <div class="span12">
+ <leaflet-map id="map"></leaflet-map>
+ </div>
+ </div>
+
+ <!--Timeline-->
+ <div class="row-fluid">
+ <div class="span12" ng-controller="TimelineCtrl">
+ <div class="timeline"></div>
+ </div>
+ </div>
+
+ <div class="row-fluid">
+ <div class="span12" ng-controller="ParameterSelectCtrl">
+ <div class="row-fluid">
+ <div class="span2 text-center">Start Date:</div>
+ <div class="span4">
+ <form>
+ <!--This styling HAD to be done inline. Using a class wouldn't work and for some -->
+ <!--reason the input boxes refused to be 100% wide when their span size was set.-->
+ <input ng-disabled="shouldDisableControls()" on-blur="checkParameters();" ng-model="displayParams.start" ui-date="datepickerSettings" ui-date-format="yy-mm-dd" type="text" class="text-center span4" style="width:100%" />
+ </form>
+ </div>
+ <div class="span2 text-center">End Date:</div>
+ <div class="span4">
+ <form>
+ <!--This styling HAD to be done inline. Using a class wouldn't work and for some -->
+ <!--reason the input boxes refused to be 100% wide when their span size was set.-->
+ <input ng-disabled="shouldDisableControls()" on-blur="checkParameters();" ng-model="displayParams.end" ui-date="datepickerSettings" ui-date-format="yy-mm-dd" type="text" class="text-center span4" style="width:100%"/>
+ </form>
+ </div>
+ </div>
+ <div class="row-fluid">
+ <div class="span2 text-center">North:</div>
+ <div class="span4">
+ <form action="">
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMax" on-blur="checkParameters();" type="text" class="span4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ <div class="span2 text-center">South:</div>
+ <div class="span4">
+ <form action="">
+ <!--This styling HAD to be done inline. Using a class wouldn't work and for some -->
+ <!--reason the input boxes refused to be 100% wide when their span size was set.-->
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.latMin" on-blur="checkParameters();" type="text" class="span4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ </div>
+ <div class="row-fluid">
+ <div class="span2 text-center">East:</div>
+ <div class="span4">
+ <form>
+ <!--This styling HAD to be done inline. Using a class wouldn't work and for some -->
+ <!--reason the input boxes refused to be 100% wide when their span size was set.-->
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.lonMax" on-blur="checkParameters();" type="text" class="span4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ <div class="span2 text-center">West:</div>
+ <div class="span4">
+ <form>
+ <!--This styling HAD to be done inline. Using a class wouldn't work and for some -->
+ <!--reason the input boxes refused to be 100% wide when their span size was set.-->
+ <input ng-disabled="shouldDisableControls()" ng-model="displayParams.lonMin" on-blur="checkParameters();"; type="text" class="span4 text-center" style="width:100%"/>
+ </form>
+ </div>
+ </div>
+ <div class="row-fluid">
+ <div class="span2 offset6">
+ <button class="btn btn-link no-color-link pull-right" bootstrap-modal-open="evaluationSettings">
+ <span tooltip-placement="left" tooltip-popup-delay="700" tooltip="Settings">
+ <span class="icon-stack">
+ <i class="icon-check-empty icon-stack-base"></i>
+ <i class="icon-cogs"></i>
+ </span>
+ </span>
+ </button>
+ </div>
+ <div class="span4">
+ <button ng-click="runEvaluation()" ng-disabled="shouldDisableEvaluateButton()" class="btn btn-block btn-primary">
+ <div ng-hide="runningEval">Evaluate</div>
+ <div ng-show="runningEval"><i class="icon-spinner icon-spin"></i></div>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
<!-- Main Content -->
<div class="container" style="margin-top:60px" ui-view ng-animate="{enter:'fade-enter'}"></div>
Modified: incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/controllers/ParameterSelectCtrl.js
URL: http://svn.apache.org/viewvc/incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/controllers/ParameterSelectCtrl.js?rev=1515647&r1=1515646&r2=1515647&view=diff
==============================================================================
--- incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/controllers/ParameterSelectCtrl.js (original)
+++ incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/controllers/ParameterSelectCtrl.js Mon Aug 19 22:38:28 2013
@@ -102,17 +102,28 @@ function($rootScope, $scope, $http, $tim
$scope.runEvaluation = function() {
$scope.runningEval = true;
- // TODO
- // Currently this has the 1 model, 1 observation format hard coded in. This shouldn't
- // be the long-term case! This needs to be changed!!!!!!!!
- var obsIndex = -1,
- modelIndex = -1;
+ // Containers for dataset information
+ var obsDatasetIds = [],
+ obsDatasetParameterIds = [],
+ modelDatasetIds = [],
+ modelDatasetParameterIds = [],
+ modelDatasetTimes = [],
+ modelDatasetLats = [],
+ modelDatasetLons = [];
+ // Populate containers with information for each selected dataset
for (var i = 0; i < $scope.datasets.length; i++) {
- if ($scope.datasets[i]['isObs'] == 1)
- obsIndex = i;
- else
- modelIndex = i;
+ console.log($scope.datasets[i].id)
+ if ($scope.datasets[i]['isObs'] == 1) {
+ obsDatasetIds.push($scope.datasets[i].datasetId)
+ obsDatasetParameterIds.push($scope.datasets[i].id)
+ } else {
+ modelDatasetIds.push($scope.datasets[i].id)
+ modelDatasetParameterIds.push($scope.datasets[i].param)
+ modelDatasetTimes.push($scope.datasets[i].time)
+ modelDatasetLats.push($scope.datasets[i].lat)
+ modelDatasetLons.push($scope.datasets[i].lon)
+ }
}
// TODO At the moment we aren't running all the metrics that the user selected. We're only
@@ -129,38 +140,36 @@ function($rootScope, $scope, $http, $tim
}
};
+ // Prepare information to send to backend service
var data = {params: {
- 'obsDatasetId' : $scope.datasets[obsIndex]['id'],
- 'obsParameterId' : $scope.datasets[obsIndex]['param'],
+ 'obsDatasetIds' : obsDatasetIds,
+ 'obsParameterIds' : obsDatasetParameterIds,
+
'startTime' : $scope.displayParams.start + " 00:00:00",
'endTime' : $scope.displayParams.end + " 00:00:00",
'latMin' : $scope.displayParams.latMin,
'latMax' : $scope.displayParams.latMax,
'lonMin' : $scope.displayParams.lonMin,
'lonMax' : $scope.displayParams.lonMax,
- 'filelist' : $scope.datasets[modelIndex]['id'],
- 'modelVarName' : $scope.datasets[modelIndex]['param'],
- 'modelTimeVarName' : $scope.datasets[modelIndex]['time'],
- 'modelLatVarName' : $scope.datasets[modelIndex]['lat'],
- 'modelLonVarName' : $scope.datasets[modelIndex]['lon'],
- 'regridOption' : 'model',
+
+ 'filelist' : modelDatasetIds,
+ 'modelVarName' : modelDatasetParameterIds,
+ 'modelTimeVarName' : modelDatasetTimes,
+ 'modelLatVarName' : modelDatasetLats,
+ 'modelLonVarName' : modelDatasetLons,
+
+ 'regridOption' : ((evaluationSettings.getSettings().spatialSelect.isObs) ? 'obs' : 'model'),
+ 'regridBasis' : evaluationSettings.getSettings().spatialSelect.id,
'timeRegridOption' : evaluationSettings.getSettings().temporal.selected,
- 'metricOption' : metricToRun,
+ 'metricOption' : metricToRun, // Should be a list of metrics to run
+ 'subregionFile' : evaluationSettings.getSettings().subregionFile,
'callback' : 'JSON_CALLBACK',
}};
$http.jsonp($rootScope.baseURL + '/rcmes/run/', data).
success(function(data) {
- var comp = data['comparisonPath'].split('/');
- var model = data['modelPath'].split('/');
- var obs = data['obsPath'].split('/');
var evalWorkDir = data['evalWorkDir'];
- $rootScope.evalResults = {};
- $rootScope.evalResults.comparisonPath = comp[comp.length - 1];
- $rootScope.evalResults.modelPath = model[model.length - 1];
- $rootScope.evalResults.obsPath = obs[obs.length - 1];
-
$scope.runningEval = false;
$timeout(function() {
@@ -170,6 +179,7 @@ function($rootScope, $scope, $http, $tim
window.location = "#/results";
}
}, 100);
+
}).error(function() {
$scope.runningEval = false;
});
Modified: incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/controllers/RcmedSelectionCtrl.js
URL: http://svn.apache.org/viewvc/incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/controllers/RcmedSelectionCtrl.js?rev=1515647&r1=1515646&r2=1515647&view=diff
==============================================================================
--- incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/controllers/RcmedSelectionCtrl.js (original)
+++ incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/controllers/RcmedSelectionCtrl.js Mon Aug 19 22:38:28 2013
@@ -71,9 +71,10 @@ function($rootScope, $scope, $http, $tim
newDataset['isObs'] = 1;
// Save the dataset id (the important part) and name (for display purposes)
- newDataset['id'] = $scope.datasetSelection['dataset_id'];
+ newDataset['datasetId'] = $scope.datasetSelection['dataset_id'];
newDataset['name'] = $scope.datasetSelection['longname'];
// Save the parameter id (the important part) and name (for display purposes)
+ newDataset['id'] = $scope.parameterSelection['parameter_id'];
newDataset['param'] = $scope.parameterSelection['parameter_id'];
newDataset['paramName'] = $scope.parameterSelection['longname'];
// Save the (fake) lat/lon information. We test with the TRMM dataset. RCMED currently
Modified: incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/services/EvaluationSettings.js
URL: http://svn.apache.org/viewvc/incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/services/EvaluationSettings.js?rev=1515647&r1=1515646&r2=1515647&view=diff
==============================================================================
--- incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/services/EvaluationSettings.js (original)
+++ incubator/climate/branches/RefactorPlots/rcmet/src/main/ui/app/js/services/EvaluationSettings.js Mon Aug 19 22:38:28 2013
@@ -27,7 +27,9 @@ App.Services.service('evaluationSettings
'options': ['daily', 'monthly', 'yearly'],
'selected': 'monthly',
},
+ /* TODO: Consider renaming this to reflect reference dataset selection */
'spatialSelect': '',
+ 'subregionFile': ''
};
return {