balkian/soil
1
0
Fork 0
mirror of https://github.com/gsi-upm/soil synced 2025-08-24 12:02:20 +00:00
Code Issues Releases Wiki Activity

Colors and shapes

Browse Source
This commit is contained in:
Tasio Mendez
2018-04-10 18:26:24 +02:00
parent 9caec2dad3
commit da1ce1ea30
14 changed files with 485 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
templates/js/socket.js
View File

@@ -15,15 +15,15 @@ ws.onmessage = function(message) {
switch(msg['type']) {
case 'trials':
$('#load').removeClass('loader');
reset_trials();
set_trials(msg['data']);
// $('#load').removeClass('loader');
break;
case 'get_trial':
console.log(msg['data']);
GraphVisualization.import(convertJSON(msg['data']), function() {
$('#load').hide();
self.GraphVisualization.import(convertJSON(msg['data']), function() {
reset_configuration();
set_configuration();
$('#home_menu').click(function() {
@@ -34,6 +34,7 @@ ws.onmessage = function(message) {
});
reset_timeline();
set_timeline(msg['data']);
$('#load').hide();
});
$('#charts .chart').removeClass('no-data');
set_chart_nodes(msg['data'], chart_nodes)
@@ -61,6 +62,11 @@ ws.onmessage = function(message) {
$('.console').animate({ scrollTop: $('.console')[0].scrollHeight }, 'fast');
break;
case 'visualization_params':
console.log(msg['data']);
self.GraphVisualization.set_params(msg['data']['shape_property'], msg['data']['shapes'], msg['data']['colors']);
break;
default:
console.log('Unexpected message!')
}
@@ -103,6 +109,16 @@ var reset_trials = function() {
}
var convertJSON = function(json) {
// For NetworkX Geometric Graphs get positions
json.nodes.forEach(function(node) {
var scx = d3.scale.linear().domain([0, 1]).range([0, height]);
var scy = d3.scale.linear().domain([0, 1]).range([height, 0]);
if ( node.pos ) {
node.scx = scx(node.pos[0]);
node.scy = scy(node.pos[1]);
}
delete node.pos;
});
json.links.forEach(function(link) {
link.source = json.nodes[link.source]
link.target = json.nodes[link.target]
@@ -136,7 +152,7 @@ var update_statistics_table = function() {
statisticsSorted[i].split('.').pop().split('\'')[0] : statisticsSorted[i];
$('<tr>').addClass('col-sm-12').appendTo('#percentTable > tbody');
$('<td>').css('background-color', self.GraphVisualization.color(statisticsSorted[i])).addClass('col-sm-1').appendTo(appendTo);
$('<td>').css('background-color', self.GraphVisualization.color($('.config-item #properties').val(), statisticsSorted[i])).addClass('col-sm-1').appendTo(appendTo);
$('<td>').addClass('text-left col-sm-4').text(self.GraphVisualization.statistics[statisticsSorted[i]] + ' %').appendTo(appendTo);
$('<td>').addClass('text-right col-sm-6 property-name').text(propertyName).appendTo(appendTo);
}
@@ -211,6 +227,9 @@ var set_timeline = function(graph) {
// Draw graph for the first time
self.GraphVisualization.update_graph($('.config-item #properties').val(), maxUnix, function() {
update_statistics_table();
setTimeout(function() {
self.GraphVisualization.fit();
}, 100);
});
// 'Speed' slider

4
templates/js/template.js
View File

@@ -70,7 +70,7 @@ var initGUI = function(model_params) {
};
for (var option in model_params) {
var type = typeof(model_params[option]);
var param_str = String(option);
@@ -82,7 +82,7 @@ var initGUI = function(model_params) {
addSliderInput(model_params[option]['label'], model_params[option]['value']);
break;
default:
console.log(model_params[option]['type'] + ' not defined!');
console.log(model_params[option]['label'] + ' not defined!');
break;
}
}

145
templates/js/visualization.js
View File

@@ -14,7 +14,7 @@
// Private constants
var focus_opacity = 0.1,
radius = 8,
required_node = ['id', 'index', 'label', 'px', 'py', 'spells', 'weight', 'x', 'y'];
required_node = ['id', 'index', 'label', 'px', 'py', 'spells', 'weight', 'x', 'y', 'pos', 'scx', 'scy'];
// Private variables
var width,
@@ -35,7 +35,10 @@
data_link, // Actual link data for the graph
link, // Line svgs
node; // Circles for the nodes
node, // Circles for the nodes
shape_property, // Property to whom the shape will be applied
shapes, // Dictionary of shapes for nodes
colors; // Dictionary of colors for nodes
Number.prototype.between = function(min, max) {
var min = (min || min === 0) ? min : Math.max(),
@@ -60,15 +63,29 @@
.attr('r', radius)
.style('fill', function (d) {
if ( Array.isArray(d[property]) ) {
var color_node = color(d[property][0][0]);
var color_node = _helpers.set_color(property, d[property][0][0]);
d[property].forEach(function(p) {
if ( time.between(p[1], p[2]) ) color_node = color(p[0]);
if ( time.between(p[1], p[2]) ) color_node = _helpers.set_color(property, p[0]);
});
return color_node;
} else {
return color(d[property]);
return _helpers.set_color(property, d[property]);
}
})
.style('stroke', function(d) {
if (_helpers.set_shape(d[shape_property]) !== (-1))
if ( Array.isArray(d[property]) ) {
var color_node = _helpers.set_color(property, d[property][0][0]);
d[property].forEach(function(p) {
if ( time.between(p[1], p[2]) ) color_node = _helpers.set_color(property, p[0]);
});
return color_node;
} else {
return _helpers.set_color(property, d[property]);
}
else
return '#ffffff';
})
// Cancel zoom movement so you can move the node
.on('mousedown', function(d) {
d3.event.stopPropagation();
@@ -93,16 +110,33 @@
node.attr('class', 'node')
.attr('r', radius)
.style('fill', function (d) {
if (_helpers.set_shape(d[shape_property]) !== (-1)) {
return 'url(#' + _helpers.set_shape(d[shape_property]) + ')';
}
if ( Array.isArray(d[property]) ) {
var color_node = color(d[property][0][0]);
var color_node = _helpers.set_color(property, d[property][0][0]);
d[property].forEach(function(p) {
if ( time.between(p[1], p[2]) ) color_node = color(p[0]);
if ( time.between(p[1], p[2]) ) color_node = _helpers.set_color(property, p[0]);
});
return color_node;
} else {
return color(d[property]);
return _helpers.set_color(property, d[property]);
}
})
.style('stroke', function(d) {
if (_helpers.set_shape(d[shape_property]) !== (-1))
if ( Array.isArray(d[property]) ) {
var color_node = _helpers.set_color(property, d[property][0][0]);
d[property].forEach(function(p) {
if ( time.between(p[1], p[2]) ) color_node = _helpers.set_color(property, p[0]);
});
return color_node;
} else {
return _helpers.set_color(property, d[property]);
}
else
return '#ffffff';
})
.on('dblclick', function(d) {
d3.event.stopPropagation();
if (d === lastFocusNode) {
@@ -139,12 +173,33 @@
});
},
push_once: function(array, item, key) {
for (var i in array) {
if ( array[i][key] == item[key] ) return false;
for (var i in array) {
if ( array[i][key] == item[key] ) return false;
}
array.push(item);
return true;
},
set_color: function(property, value) {
if ( colors instanceof Array ) {
for ( var c in colors ) {
if ( colors[c][property] == value ) { return colors[c]['color']; }
}
return color(value);
} else {
return color(value);
}
},
set_shape: function(value) {
if ( shapes instanceof Object && shape_property ) {
for ( var s in shapes ) {
var str_value = (value.includes('class')) ? value.split('.').pop().split('\'')[0] : value;
if ( str_value == s ) return shapes[s];
}
return (-1);
} else {
return (-1);
}
}
array.push(item);
return true;
}
}
@@ -170,6 +225,29 @@
glinks = groot.append('g') .attr('id', 'links');
gnodes = groot.append('g') .attr('id', 'nodes');
// Add patterns for shapes
var defs = [];
for ( var i in shapes )
if (!defs.includes(shapes[i])) defs.push(shapes[i])
svg.append('defs')
.selectAll('pattern')
.data(defs)
.enter()
.append('pattern')
.attr('id', function(d, i) {
return d;
})
.attr('patternUnits', 'objectBoundingBox')
.attr('width', 1)
.attr('height', 1)
.append('image')
.attr('href', function(d) {
return window.location.protocol + '//' + window.location.host + '/img/svg/' + d + '.svg';
})
.attr('width', 16)
.attr('height', 16);
// Zoom
zoom = d3.behavior
.zoom()
@@ -200,17 +278,22 @@
force.on('tick', function () {
link.attr('x1', function (d) {
return d.source.x;
if ( d.source.scx ) return d.source.scx;
else return d.source.x;
}).attr('y1', function (d) {
return d.source.y;
if ( d.source.scy ) return d.source.scy;
else return d.source.y;
}).attr('x2', function (d) {
return d.target.x;
if ( d.target.scx ) return d.target.scx;
else return d.target.x;
}).attr('y2', function (d) {
return d.target.y;
if ( d.target.scy ) return d.target.scy;
else return d.target.y;
});
node.attr('transform', function translate(d) {
return 'translate(' + d.x + ',' + d.y + ')';
if ( d.scx || d.scy ) return 'translate(' + d.scx + ',' + d.scy + ')';
else return 'translate(' + d.x + ',' + d.y + ')';
});
});
@@ -384,6 +467,25 @@
}
}
/**
* Set shapes and color of graph.
* A function that set the shapes and colors of the nodes depending on their status.
*
* @param {object} set_shapes Shapes for nodes.
* @param {object} set_colors Colors for nodes.
* @param {object} callback A function called at the end.
*/
function set_params(set_shape_property, set_shapes, set_colors, callback) {
shape_property = set_shape_property;
shapes = set_shapes;
colors = set_colors;
self.GraphVisualization.shapes = shapes;
self.GraphVisualization.colors = colors;
if (callback) { callback(); }
}
/**
* Adjust the graph to the whole area.
* A function that adjust the graph to the svg item.
@@ -437,9 +539,9 @@
* @param {object} value Value.
* @return {object} color The color in hexadecimal.
*/
function color(value) {
function color(property, value) {
if (graph) {
return color(value);
return _helpers.set_color(property, value);
}
}
@@ -519,6 +621,7 @@
create: create,
import: importJSON,
update_graph: update_graph,
set_params: set_params,
set_link_distance: set_link_distance,
fit: zoom_to_fit,
reset: reset,
@@ -530,6 +633,8 @@
// Getters
color: color,
shapes: shapes,
colors: colors,
get_attributes: get_attributes,
get_nodes: get_nodes,