Merge pull request #149 from mistercrunch/immune_to_filter
Allowing to make certain widgets immune to filter
This commit is contained in:
Maxime Beauchemin
commit
8b0f2afc0a
|
|
@ -10,146 +10,148 @@ require('brace/theme/crimson_editor');
|
|||
|
||||
require('select2');
|
||||
require('../node_modules/gridster/dist/jquery.gridster.min.js');
|
||||
require('../node_modules/gridster/dist/jquery.gridster.min.js');
|
||||
|
||||
var dashboard;
|
||||
|
||||
var Dashboard = function(id){
|
||||
var dash = {
|
||||
slices: [],
|
||||
var Dashboard = function (dashboardData) {
|
||||
var dashboard = $.extend(dashboardData, {
|
||||
filters: {},
|
||||
id: id,
|
||||
addFilter: function(slice_id, filters) {
|
||||
init: function () {
|
||||
this.initDashboardView();
|
||||
var sliceObjects = [],
|
||||
dash = this;
|
||||
dashboard.slices.forEach(function (data) {
|
||||
var slice = px.Slice(data, dash);
|
||||
$("#slice_" + data.slice_id).find('a.refresh').click(function () {
|
||||
slice.render();
|
||||
});
|
||||
sliceObjects.push(slice);
|
||||
slice.render();
|
||||
});
|
||||
this.slices = sliceObjects;
|
||||
},
|
||||
addFilter: function (slice_id, filters) {
|
||||
this.filters[slice_id] = filters;
|
||||
this.refreshExcept(slice_id);
|
||||
},
|
||||
readFilters: function() {
|
||||
readFilters: function () {
|
||||
// Returns a list of human readable active filters
|
||||
return JSON.stringify(this.filters, null, 4);
|
||||
},
|
||||
refreshExcept: function(slice_id) {
|
||||
this.slices.forEach(function(slice){
|
||||
if(slice.data.slice_id != slice_id){
|
||||
refreshExcept: function (slice_id) {
|
||||
var immune = this.metadata.filter_immune_slices;
|
||||
this.slices.forEach(function (slice) {
|
||||
if(slice.data.slice_id !== slice_id && immune.indexOf(slice.data.slice_id) === -1) {
|
||||
slice.render();
|
||||
}
|
||||
});
|
||||
},
|
||||
clearFilter: function(slice_id) {
|
||||
clearFilter: function (slice_id) {
|
||||
delete this.filters[slice_id];
|
||||
this.refreshExcept(slice_id);
|
||||
},
|
||||
getSlice: function(slice_id) {
|
||||
for(var i=0; i<this.slices.length; i++){
|
||||
if (this.slices[i].data.slice_id == slice_id)
|
||||
return this.slices[i];
|
||||
}
|
||||
getSlice: function (slice_id) {
|
||||
this.slices.forEach(function (slice, i) {
|
||||
if (slice.slice_id === slice_id) {
|
||||
return slice;
|
||||
}
|
||||
});
|
||||
},
|
||||
initDashboardView: function () {
|
||||
dashboard = this;
|
||||
var gridster = $(".gridster ul").gridster({
|
||||
widget_margins: [5, 5],
|
||||
widget_base_dimensions: [100, 100],
|
||||
draggable: {
|
||||
handle: '.drag',
|
||||
},
|
||||
resize: {
|
||||
enabled: true,
|
||||
stop: function (e, ui, element) {
|
||||
var slice_data = $(element).data('slice');
|
||||
dashboard.getSlice(slice_data.slice_id).resize();
|
||||
}
|
||||
},
|
||||
serialize_params: function (_w, wgd) {
|
||||
return {
|
||||
slice_id: $(_w).attr('slice_id'),
|
||||
col: wgd.col,
|
||||
row: wgd.row,
|
||||
size_x: wgd.size_x,
|
||||
size_y: wgd.size_y
|
||||
};
|
||||
},
|
||||
}).data('gridster');
|
||||
$("div.gridster").css('visibility', 'visible');
|
||||
$("#savedash").click(function () {
|
||||
var expanded_slices = {};
|
||||
$.each($(".slice_info"), function (i, d) {
|
||||
var widget = $(this).parents('.widget');
|
||||
var slice_description = widget.find('.slice_description');
|
||||
if(slice_description.is(":visible"))
|
||||
expanded_slices[$(d).attr('slice_id')] = true;
|
||||
});
|
||||
var data = {
|
||||
positions: gridster.serialize(),
|
||||
css: editor.getValue(),
|
||||
expanded_slices: expanded_slices,
|
||||
};
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: '/panoramix/save_dash/' + dashboard.id + '/',
|
||||
data: {'data': JSON.stringify(data)},
|
||||
success: function () {alert("Saved!");},
|
||||
error: function () {alert("Error :(");},
|
||||
});
|
||||
});
|
||||
|
||||
var editor = ace.edit("dash_css");
|
||||
editor.$blockScrolling = Infinity;
|
||||
|
||||
editor.setTheme("ace/theme/crimson_editor");
|
||||
editor.setOptions({
|
||||
minLines: 16,
|
||||
maxLines: Infinity,
|
||||
});
|
||||
editor.getSession().setMode("ace/mode/css");
|
||||
|
||||
$(".select2").select2({dropdownAutoWidth : true});
|
||||
$("#css_template").on("change", function () {
|
||||
var css = $(this).find('option:selected').data('css');
|
||||
editor.setValue(css);
|
||||
$('#dash_css').val(css);
|
||||
$("#user_style").html(css);
|
||||
});
|
||||
$('#filters').click( function () {
|
||||
alert(dashboard.readFilters());
|
||||
});
|
||||
$("a.closeslice").click(function () {
|
||||
var li = $(this).parents("li");
|
||||
gridster.remove_widget(li);
|
||||
});
|
||||
$(".slice_info").click(function () {
|
||||
var widget = $(this).parents('.widget');
|
||||
var slice_description = widget.find('.slice_description');
|
||||
slice_description.slideToggle(500, function () {
|
||||
widget.find('.refresh').click();
|
||||
});
|
||||
});
|
||||
$("table.slice_header").mouseover(function () {
|
||||
$(this).find("td.icons nobr").show();
|
||||
});
|
||||
$("table.slice_header").mouseout(function () {
|
||||
$(this).find("td.icons nobr").hide();
|
||||
});
|
||||
editor.on("change", function () {
|
||||
var css = editor.getValue();
|
||||
$('#dash_css').val(css);
|
||||
$("#user_style").html(css);
|
||||
});
|
||||
}
|
||||
}
|
||||
$('.dashboard li.widget').each(function() {
|
||||
var data = $(this).data('slice');
|
||||
var slice = px.Slice(data, dash);
|
||||
$(this).find('a.refresh').click(function(){
|
||||
slice.render();
|
||||
});
|
||||
dash.slices.push(slice);
|
||||
slice.render();
|
||||
});
|
||||
dashboard = dash;
|
||||
return dash;
|
||||
}
|
||||
dashboard.init();
|
||||
return dashboard;
|
||||
};
|
||||
|
||||
function initDashboardView() {
|
||||
var gridster = $(".gridster ul").gridster({
|
||||
widget_margins: [5, 5],
|
||||
widget_base_dimensions: [100, 100],
|
||||
draggable: {
|
||||
handle: '.drag',
|
||||
},
|
||||
resize: {
|
||||
enabled: true,
|
||||
stop: function(e, ui, element) {
|
||||
var slice_data = $(element).data('slice');
|
||||
dashboard.getSlice(slice_data.slice_id).resize();
|
||||
}
|
||||
},
|
||||
serialize_params: function(_w, wgd) {
|
||||
return {
|
||||
slice_id: $(_w).attr('slice_id'),
|
||||
col: wgd.col,
|
||||
row: wgd.row,
|
||||
size_x: wgd.size_x,
|
||||
size_y: wgd.size_y
|
||||
};
|
||||
},
|
||||
}).data('gridster');
|
||||
$("div.gridster").css('visibility', 'visible');
|
||||
$("#savedash").click(function() {
|
||||
var expanded_slices = {};
|
||||
$.each($(".slice_info"), function(i, d){
|
||||
var widget = $(this).parents('.widget');
|
||||
var slice_description = widget.find('.slice_description');
|
||||
if(slice_description.is(":visible"))
|
||||
expanded_slices[$(d).attr('slice_id')] = true;
|
||||
});
|
||||
var data = {
|
||||
positions: gridster.serialize(),
|
||||
css: editor.getValue(),
|
||||
expanded_slices: expanded_slices,
|
||||
};
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: '/panoramix/save_dash/' + dashboard.id + '/',
|
||||
data: {'data': JSON.stringify(data)},
|
||||
success: function() {alert("Saved!")},
|
||||
error: function() {alert("Error :(")},
|
||||
});
|
||||
});
|
||||
|
||||
var editor = ace.edit("dash_css");
|
||||
editor.$blockScrolling = Infinity
|
||||
|
||||
editor.setTheme("ace/theme/crimson_editor");
|
||||
editor.setOptions({
|
||||
minLines: 16,
|
||||
maxLines: Infinity,
|
||||
});
|
||||
editor.getSession().setMode("ace/mode/css");
|
||||
|
||||
$(".select2").select2({dropdownAutoWidth : true});
|
||||
$("#css_template").on("change", function() {
|
||||
var css = $(this).find('option:selected').data('css');
|
||||
editor.setValue(css);
|
||||
$('#dash_css').val(css);
|
||||
$("#user_style").html(css);
|
||||
});
|
||||
$('#filters').click( function(){
|
||||
alert(dashboard.readFilters());
|
||||
});
|
||||
$("a.closeslice").click(function() {
|
||||
var li = $(this).parents("li");
|
||||
gridster.remove_widget(li);
|
||||
});
|
||||
$(".slice_info").click(function(){
|
||||
var widget = $(this).parents('.widget');
|
||||
var slice_description = widget.find('.slice_description');
|
||||
slice_description.slideToggle(500, function(){
|
||||
widget.find('.refresh').click();
|
||||
});
|
||||
});
|
||||
$("table.slice_header").mouseover(function() {
|
||||
$(this).find("td.icons nobr").show();
|
||||
});
|
||||
$("table.slice_header").mouseout(function() {
|
||||
$(this).find("td.icons nobr").hide();
|
||||
});
|
||||
editor.on("change", function(){
|
||||
var css = editor.getValue();
|
||||
$('#dash_css').val(css);
|
||||
$("#user_style").html(css);
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
initDashboardView();
|
||||
var dashboard = Dashboard($('#dashboard_id').val());
|
||||
$(document).ready(function () {
|
||||
var dashboard = Dashboard($('.dashboard').data('dashboard'));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,8 +8,10 @@ var jQuery = window.jQuery = $;
|
|||
var px = require('./modules/panoramix.js');
|
||||
var d3 = require('d3');
|
||||
|
||||
require('bootstrap');
|
||||
require('jquery-ui');
|
||||
$.widget.bridge('uitooltip', $.ui.tooltip); // Shutting down jq-ui tooltips
|
||||
require('bootstrap');
|
||||
|
||||
require('select2');
|
||||
require('../node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js');
|
||||
require('../vendor/select2.sortable.js');
|
||||
|
|
@ -109,7 +111,7 @@ function initExploreView() {
|
|||
$(".select2Sortable").select2({dropdownAutoWidth : true});
|
||||
$(".select2Sortable").select2Sortable({bindOrder: 'sortableStop'});
|
||||
$("form").show();
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
|
||||
$(".ui-helper-hidden-accessible").remove(); // jQuery-ui 1.11+ creates a div for every tooltip
|
||||
|
||||
function set_filters(){
|
||||
|
|
|
|||
|
|
@ -217,6 +217,17 @@ class Dashboard(Model, AuditMixinNullable):
|
|||
l += o.css_files
|
||||
return list(set(l))
|
||||
|
||||
@property
|
||||
def json_data(self):
|
||||
d = {
|
||||
'id': self.id,
|
||||
'metadata': self.metadata_dejson,
|
||||
'dashboard_title': self.dashboard_title,
|
||||
'slug': self.slug,
|
||||
'slices': [slc.data for slc in self.slices],
|
||||
}
|
||||
return json.dumps(d)
|
||||
|
||||
|
||||
class Queryable(object):
|
||||
@property
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="dashboard">
|
||||
<div class="dashboard container-fluid" data-dashboard="{{ dashboard.json_data }}">
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="css_modal" tabindex="-1" role="dialog">
|
||||
|
|
@ -75,7 +75,6 @@
|
|||
id="slice_{{ slice.id }}"
|
||||
slice_id="{{ slice.id }}"
|
||||
class="widget {{ slice.viz.viz_type }}"
|
||||
data-slice="{{ slice.json_data }}"
|
||||
data-row="{{ pos.row or 1 }}"
|
||||
data-col="{{ pos.col or loop.index }}"
|
||||
data-sizex="{{ pos.size_x or 4 }}"
|
||||
|
|
|
|||
|
|
@ -516,9 +516,11 @@ class Panoramix(BaseView):
|
|||
dash = session.query(Dash).filter_by(id=dashboard_id).first()
|
||||
dash.slices = [o for o in dash.slices if o.id in slice_ids]
|
||||
dash.position_json = json.dumps(data['positions'], indent=4)
|
||||
dash.json_metadata = json.dumps({
|
||||
'expanded_slices': data['expanded_slices'],
|
||||
}, indent=4)
|
||||
md = dash.metadata_dejson
|
||||
if 'filter_immune_slices' not in md:
|
||||
md['filter_immune_slices'] = []
|
||||
md['expanded_slices'] = data['expanded_slices']
|
||||
dash.json_metadata = json.dumps(md, indent=4)
|
||||
dash.css = data['css']
|
||||
session.merge(dash)
|
||||
session.commit()
|
||||
|
|
|
|||
Loading…
Reference in New Issue