Skip to content
This repository has been archived by the owner on May 28, 2019. It is now read-only.

Commit

Permalink
Merge pull request #552 from gem/irv-new-separate-widgets
Browse files Browse the repository at this point in the history 
IRV - Use separate widgets (instead of tabs), to display charts
  • Loading branch information
@daniviga
daniviga committed Feb 19, 2016
2 parents 7af3ba9 + 6605949 commit 10ca98f
Show file tree
Hide file tree
Showing 8 changed files with 240 additions and 121 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
* irv: let the d3 tree layout look like in the QGIS IRMT plugin
* irv: handle case in which a zone with no available data is clicked on the map
* irv: when switching project definition, restyle the map accordingly
* irv: display charts in separate widgets instead of tabs
* irv: fix displaying the 'median' text when moving the mouse over a median line
* irv: enable zooming/panning for all d3 charts

python-oq-platform (1.3.1)

Expand Down
4 changes: 3 additions & 1 deletion openquakeplatform/openquakeplatform/irv/static/irv/css/irv_legend.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@

#mapInfo {
position: fixed;
margin-top: 40px;
right: 20px;
padding: 10px 10px 15px;
background-color: whitesmoke;
border-radius: 15px;
visibility: hidden;
}

.my-legend .legend-title {
Expand Down Expand Up @@ -47,4 +49,4 @@
}
.my-legend a {
color: #777;
}
}
185 changes: 123 additions & 62 deletions openquakeplatform/openquakeplatform/irv/static/irv/js/irv_viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,21 @@
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/agpl.html>.
*/
var widgetsAndButtons = {
'projDef': {'widget': '#project-def-widget',
'button': '#toggleProjDefWidgetBtn',
'buttonText': 'Show Project Definition'},
'iri': {'widget': '#iri-chart-widget',
'button': '#toggleIriChartWidgetBtn',
'buttonText': 'Show IRI Chart Widget'},
'svi': {'widget': '#cat-chart-widget',
'button': '#toggleSviThemeWidgetBtn',
'buttonText': 'Show SVI Theme Chart'},
'indicators': {'widget': '#primary-tab-widget',
'button': '#toggleCompIndWidgetBtn',
'buttonText': 'Show Composite Indicator Chart'}
};


$(document).ready(function() {
$('#cover').remove();
Expand Down Expand Up @@ -49,10 +64,19 @@ var baseMapUrl = new L.TileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x
var app = new OQLeaflet.OQLeafletApp(baseMapUrl);
var indicatorChildrenKey = [];

$(document).ready(function() {
$('#cover').remove();
$('.alert-unscaled-data').hide();
});
function setWidgetsToDefault(){
$('#pdSelection').empty();
// set tabs back default
$('#projectDef-spinner').text('Loading ...');
$('#projectDef-spinner').append('<img id="download-button-spinner" src="/static/img/ajax-loader.gif" />');
$('#projectDef-spinner').show();
$('#iri-spinner').show();
$('#regionSelectionDialog').empty();
$('#projectDef-tree').empty();
$('#iri-chart').empty();
$('#cat-chart').empty();
$('#primary-chart').empty();
}

function scaleTheData() {
// Create a list of primary indicators that need to be scaled
Expand Down Expand Up @@ -765,8 +789,8 @@ function processIndicators(layerAttributes, projectDef) {
SVI.plotElement = "SVI"; // Label within the object
iriPcpData.push(SVI);
} else {
// Disable the primary tab.
$("#themeTabs").tabs("disable", 3);
disableWidget(widgetsAndButtons.svi);
disableWidget(widgetsAndButtons.indicators);
}

if (riskIndicators !== undefined) {
Expand All @@ -779,6 +803,15 @@ function processIndicators(layerAttributes, projectDef) {

} // End processIndicators

function disableWidget(widgetAndBtn) {
// if the widget is visible, click the button to toggle it
if ($(widgetAndBtn.widget).is(':visible')) {
$(widgetAndBtn.button).click();
}
// in any case, disable the button that shows the widget
$(widgetAndBtn.button).prop('disabled', true);
}

function scale(IndicatorObj) {
var ValueArray = [];
var scaledValues = [];
Expand All @@ -794,9 +827,9 @@ function scale(IndicatorObj) {
if (tempMax == tempMin) {
scaledValues = [1];
// Disable the chart tabs
$("#themeTabs").tabs("disable", 1);
$("#themeTabs").tabs("disable", 2);
$("#themeTabs").tabs("disable", 3);
$.each(['indicators', 'svi', 'iri'], function(i, widgetName) {
disableWidget(widgetsAndButtons[widgetName]);
});
} else {
scaledValues.push( (ValueArray[j] - tempMin) / (tempMax - tempMin) );
}
Expand Down Expand Up @@ -1120,6 +1153,7 @@ function mapboxGlLayerCreation() {
map.featuresAt(e.point, { radius : 6}, function(err, features) {
if (err) throw err;
$('#mapInfo').empty();
$('#mapInfo').css({'visibility': 'visible'});
if (typeof features[0] === 'undefined') {
$('#mapInfo').append('No data available');
} else {
Expand Down Expand Up @@ -1415,21 +1449,35 @@ var startApp = function() {

webGl = webglDetect();

// using the list, otherwise we would lose the order
$.each(['projDef', 'iri', 'svi', 'indicators'], function(i, widgetName) {
// Theme tabs behavior
var widget = $(widgetsAndButtons[widgetName].widget);
widget.resizable({
minHeight: 220,
minWidth: 220
});

// Theme tabs behavior
$('#themeTabs').resizable({
minHeight: 220,
minWidth: 220
});

$('#themeTabs').tabs({
collapsible: false,
selected: -1,
active: false,
});
widget.tabs({
collapsible: false,
selected: -1,
active: false,
});

$( "#themeTabs" ).draggable({
cancel: "#project-def"
widget.draggable({
stack: "div", // put on top of the others when dragging
distance: 0, // do it even if it's not actually moved
cancel: "#project-def, #primary-tab, #cat-chart, #iri-chart"
});
widget.css({
'display': 'none',
'width': '700px',
'height': '600px',
'overflow': 'hidden',
'position': 'fixed',
'left': (10 + i * 40) + 'px',
'top': (110 + i * 40) + 'px'
});
});

$('#cover').remove();
Expand Down Expand Up @@ -1457,6 +1505,15 @@ var startApp = function() {
$('#map-tools').append(
'<button id="loadProjectdialogBtn" type="button" class="btn btn-blue">Load Project</button>'
);
// Using the list in order to keep the order
$.each(['indicators', 'svi', 'iri', 'projDef'], function(i, widgetName) {
// slice(1) removes the heading # from the selector
var buttonId = widgetsAndButtons[widgetName].button.slice(1);
var buttonText = widgetsAndButtons[widgetName].buttonText;
$('#map-tools').append(
'<button id="' + buttonId + '" type="button" class="btn btn-blue" disabled>' + buttonText + '</button>'
);
});

if (webGl === false) {
$('#map-tools').append(
Expand Down Expand Up @@ -1497,6 +1554,27 @@ var startApp = function() {
$('#loadProjectDialog').dialog('open');
});

function toggleWidget(widgetAndBtn) {
// toggle widget and change text on the corresponding button
var btnText = $(widgetAndBtn.button).html();
// If the widget is visible, the button text is 'Hide Widgetname'
// Otherwise it is 'Show Widgetname'
// Let's change the button text before toggling the widget
if (btnText.indexOf('Hide ') >= 0) { // Change Hide -> Show
btnText = 'Show ' + btnText.slice(5);
} else { // Change Show -> Hide
btnText = 'Hide ' + btnText.slice(5);
}
$(widgetAndBtn.button).html(btnText);
$(widgetAndBtn.widget).toggle();
}

$.each(widgetsAndButtons, function(key, widgetAndBtn) {
$(widgetAndBtn.button).click(function() {
toggleWidget(widgetAndBtn);
});
});

// TODO check these are all needed
$('#region-selection-list').hide();
$('#svir-project-list').hide();
Expand All @@ -1510,21 +1588,7 @@ var startApp = function() {
});

$('#loadProjectBtn').click(function() {
$('#pdSelection').empty();
// set tabs back default
$("#themeTabs").tabs("enable", 2);
$("#themeTabs").tabs("enable", 3);

$('#themeTabs').tabs('option', 'active', 0);
$('#projectDef-spinner').text('Loading ...');
$('#projectDef-spinner').append('<img id="download-button-spinner" src="/static/img/ajax-loader.gif" />');
$('#projectDef-spinner').show();
$('#iri-spinner').show();
$('#regionSelectionDialog').empty();
$('#projectDef-tree').empty();
$('#iri-chart').empty();
$('#cat-chart').empty();
$('#primary-chart').empty();
setWidgetsToDefault();

// FIXME This will not work if the title contains '(' or ')'
// Get the selected layer
Expand Down Expand Up @@ -1561,6 +1625,11 @@ var startApp = function() {
closeOnEscape: true
});

$('#loadProjectDialog').draggable({
stack: "div", // put on top of the others when dragging
distance: 0, // do it even if it's not actually moved
});

$('#map-tools').css({
'padding': '6px',
'position': 'absolute',
Expand All @@ -1570,20 +1639,19 @@ var startApp = function() {
'z-index': 6
});

$('#themeTabs').css({
'width': '700px',
'height': '600px',
'overflow': 'hidden',
'position': 'fixed',
'left': '10px',
'top': '110px'
});

$('#loadProjectdialogBtn').css({
'position': 'fixed',
'left': '50px'
});

$.each(widgetsAndButtons, function(key, widgetAndBtn) {
$(widgetAndBtn.button).css({
'position': 'relative',
'float': 'right',
'margin-left': '2px'
});
});

$('#base-map-menu').css({
'position': 'fixed',
'left': '390px'
Expand Down Expand Up @@ -1619,24 +1687,17 @@ var startApp = function() {
};

function loadProject() {
$('#pdSelection').empty();
// set tabs to back default
$("#themeTabs").tabs("enable", 2);
$("#themeTabs").tabs("enable", 3);

$('#themeTabs').tabs('option', 'active', 0);
setWidgetsToDefault();
$('#thematic-map-selection').show();
$('#projectDef-spinner').text('Loading ...');
$('#projectDef-spinner').append('<img id="download-button-spinner" src="/static/img/ajax-loader.gif" />');
$('#projectDef-spinner').show();
$('#iri-spinner').show();
$('#regionSelectionDialog').empty();
$('#projectDef-tree').empty();
$('#iri-chart').empty();
$('#cat-chart').empty();
$('#primary-chart').empty();

attributeInfoRequest(selectedLayer);
$.each(widgetsAndButtons, function(key, widgetAndBtn) {
// just enable buttons without opening widgets
$(widgetAndBtn.button).prop('disabled', false);
});
// open the project definition widget if it's not already open
if (!$(widgetsAndButtons.projDef.widget).is(':visible')) {
$(widgetsAndButtons.projDef.button).click();
}
}

function attributeInfoRequest(selectedLayer) {
Expand Down
Loading

0 comments on commit 10ca98f

Please sign in to comment.