Commit a7b2f9e9 authored by Romain Loth's avatar Romain Loth

functions to precompute node attrs + further harmonize id names

(precomputing once common color/size properties for FillGraph and add1Elem -- and therefore for rendering)
parent ab85f4a2
...@@ -86,13 +86,13 @@ function changeType() { ...@@ -86,13 +86,13 @@ function changeType() {
if(present.level) { //If level=Global, fill all {X}-component if(present.level) { //If level=Global, fill all {X}-component
for(var n in TW.Nodes) { for(var nid in TW.Nodes) {
if(type_t1[catDict[TW.Nodes[n].type]]) if(type_t1[catDict[TW.Nodes[nid].type]])
add1Elem(n) add1Elem(nid)
} }
for(var e in TW.Edges) { for(var eid in TW.Edges) {
if(TW.Edges[e].categ==str_type_t1) if(TW.Edges[eid].categ==str_type_t1)
add1Elem(e) add1Elem(eid)
} }
} else /* Local level, change to previous or alter component*/ { } else /* Local level, change to previous or alter component*/ {
if(sels.length==0) { if(sels.length==0) {
...@@ -138,10 +138,10 @@ function changeType() { ...@@ -138,10 +138,10 @@ function changeType() {
nodes_2_colour[i] = false; nodes_2_colour[i] = false;
} }
for(var i in nodes_2_colour) for(var nid in nodes_2_colour)
add1Elem(i) add1Elem(nid)
for(var i in edges_2_colour) for(var eid in edges_2_colour)
add1Elem(i) add1Elem(eid)
nextState = type_t1; nextState = type_t1;
...@@ -235,10 +235,10 @@ function changeType() { ...@@ -235,10 +235,10 @@ function changeType() {
// Adding just selection+neighs // Adding just selection+neighs
if(!present.level) { if(!present.level) {
for(var i in nodes_2_colour) for(var nid in nodes_2_colour)
add1Elem(i) add1Elem(nid)
for(var i in edges_2_colour) for(var eid in edges_2_colour)
add1Elem(i) add1Elem(eid)
} }
var SelInst = new SelectionEngine(); var SelInst = new SelectionEngine();
...@@ -342,10 +342,10 @@ function changeLevel() { ...@@ -342,10 +342,10 @@ function changeLevel() {
var futurelevel = [] var futurelevel = []
if(present.level) { // [Change to Local] when level=Global(1) if(present.level) { // [Change to Local] when level=Global(1)
for(var i in nodes_2_colour) for(var nid in nodes_2_colour)
add1Elem(i) add1Elem(nid)
for(var i in edges_2_colour) for(var eid in edges_2_colour)
add1Elem(i) add1Elem(eid)
// Adding intra-neighbors edges O(voisinage²) // Adding intra-neighbors edges O(voisinage²)
voisinage = Object.keys(voisinage) voisinage = Object.keys(voisinage)
...@@ -366,14 +366,14 @@ function changeLevel() { ...@@ -366,14 +366,14 @@ function changeLevel() {
} else { // [Change to Global] when level=Local(0) } else { // [Change to Global] when level=Local(0)
// var t0 = performance.now() // var t0 = performance.now()
for(var n in TW.Nodes) { for(var nid in TW.Nodes) {
if(type_t0[catDict[TW.Nodes[n].type]]) if(type_t0[catDict[TW.Nodes[nid].type]])
// we add 1 by 1 // we add 1 by 1
add1Elem(n) add1Elem(nid)
} }
for(var e in TW.Edges) { for(var eid in TW.Edges) {
if(TW.Edges[e].categ==str_type_t0) if(TW.Edges[eid].categ==str_type_t0)
add1Elem(e) add1Elem(eid)
} }
// var t1 = performance.now() // var t1 = performance.now()
......
...@@ -183,6 +183,10 @@ if(RES["OK"]) { ...@@ -183,6 +183,10 @@ if(RES["OK"]) {
TW.nodeIds = Object.keys(dicts.nodes) // useful for loops TW.nodeIds = Object.keys(dicts.nodes) // useful for loops
TW.edgeIds = Object.keys(dicts.edges) TW.edgeIds = Object.keys(dicts.edges)
// in-place: pre-compute all color/grey/size properties
prepareNodesRenderingProperties(TW.Nodes)
prepareEdgesRenderingProperties(TW.Edges)
TW.selectionActive = false // changes rendering mode TW.selectionActive = false // changes rendering mode
if (the_data.clusters) TW.Clusters = the_data.clusters if (the_data.clusters) TW.Clusters = the_data.clusters
......
...@@ -518,10 +518,10 @@ function graphTagCloudElem(nodes) { ...@@ -518,10 +518,10 @@ function graphTagCloudElem(nodes) {
nodes_2_colour[sels[i]]=true; nodes_2_colour[sels[i]]=true;
for(var i in nodes_2_colour) for(var nid in nodes_2_colour)
add1Elem(i) add1Elem(nid)
for(var i in edges_2_colour) for(var eid in edges_2_colour)
add1Elem(i) add1Elem(eid)
...@@ -654,6 +654,61 @@ function greyEverything(notDefaultColors){ ...@@ -654,6 +654,61 @@ function greyEverything(notDefaultColors){
// } // }
// Converts from read nodes (sigma.parseCustom )
// Remarks:
// - modifies nodesDict in-place
// - run it once at init
// - it will be used by FillGraph and add1Elem
function prepareNodesRenderingProperties(nodesDict) {
for (var nid in nodesDict) {
var n = nodesDict[nid]
// 3 decimals is way more tractable
// and quite enough in precision !!
n.size = Math.round(n.size*1000)/1000
// new setup (TODO rm the old at TinaWebJS nodes_2_colour)
n.customAttrs = {
grey: false,
true_color : n.color,
defgrey_color : "rgba("+hex2rga(n.color)+",.4)"
}
// POSS n.type: distinguish rendtype and twtype
// POSS flags like this
// // sigma's flags: active and hidden
// active: false,
// hidden: false,
// customFlags : {
// // our status flags
// grey: false,
// neighbor: false,
// // forceLabel: false,
// }
}
}
function prepareEdgesRenderingProperties(edgesDict) {
for (var eid in edgesDict) {
var e = edgesDict[eid]
e.weight = Math.round(e.weight*1000)/1000
// e.size = e.weight // REFA s/weight/size/ ?
var rgbStr = sigmaTools.edgeRGB(e.source, e.target)
e.color = "rgba("+rgbStr+","+TW.edgeDefaultOpacity+")"
e.customAttrs = {
grey: false,
true_color : e.color,
rgb : rgbStr
}
}
}
// use case: slider, changeLevel re-add nodes // use case: slider, changeLevel re-add nodes
function add1Elem(id) { function add1Elem(id) {
id = ""+id; id = ""+id;
...@@ -663,55 +718,47 @@ function add1Elem(id) { ...@@ -663,55 +718,47 @@ function add1Elem(id) {
if(TW.Nodes[id]) { if(TW.Nodes[id]) {
var n = TW.Nodes[id] var n = TW.Nodes[id]
var anode = {} // var anode = {}
anode.id = n.id; // anode.id = n.id;
anode.label = n.label; // anode.label = n.label;
anode.size = n.size; // anode.size = n.size;
anode.x = n.x; // anode.x = n.x;
anode.y = n.y; // anode.y = n.y;
anode.hidden= n.lock ; // anode.hidden= n.lock ;
anode.type = n.type; // TODO distinguish rendtype and twtype // anode.type = n.type;
anode.color = n.color; // anode.color = n.color;
if( n.shape ) n.shape = n.shape; // if( n.shape ) n.shape = n.shape;
anode.customAttrs = { // anode.customAttrs = n.customAttrs
grey: false,
true_color : n.color, // if(Number(anode.id)==287) console.log("coordinates of node 287: ( "+anode.x+" , "+anode.y+" ) ")
defgrey_color : "rgba("+hex2rga(n.color)+",.4)"
} if(!n.lock) {
updateSearchLabels(id,n.label,n.type);
if(Number(anode.id)==287) console.log("coordinates of node 287: ( "+anode.x+" , "+anode.y+" ) ")
if(!TW.Nodes[id].lock) {
updateSearchLabels(id,TW.Nodes[id].label,TW.Nodes[id].type);
nodeslength++; nodeslength++;
} }
TW.partialGraph.graph.addNode(anode); // TW.partialGraph.graph.addNode(anode);
TW.partialGraph.graph.addNode(n);
return; return;
} }
} else { // It's an edge! } else { // It's an edge!
if(!isUndef(TW.partialGraph.graph.edges(id))) return; if(!isUndef(TW.partialGraph.graph.edges(id))) return;
var e = TW.Edges[id] var e = TW.Edges[id]
if(e && !e.lock){ if(e && !e.lock){
var computedColorInfo = sigmaTools.edgeColor(e.source, e.target, TW.Nodes) // var anedge = {
// var present = TW.partialGraph.states.slice(-1)[0]; // id: id,
var anedge = { // source: e.source,
id: id, // target: e.target,
source: e.source, // lock : false,
target: e.target, // hidden: false,
lock : false, // label: e.label,
hidden: false, // type: e.type,
label: e.label, // // categ: e.categ,
type: e.type, // weight: e.weight,
// categ: e.categ, // customAttrs : e.customAttrs
weight: e.weight, // };
customAttrs : {
grey: 0, // TW.partialGraph.graph.addEdge(anedge);
true_color : computedColorInfo.res, TW.partialGraph.graph.addEdge(e);
rgb : computedColorInfo.rgb_array
}
};
TW.partialGraph.graph.addEdge(anedge);
return; return;
} }
} }
......
...@@ -12,40 +12,25 @@ SigmaUtils = function () { ...@@ -12,40 +12,25 @@ SigmaUtils = function () {
var n = nodes[i]; var n = nodes[i];
if(initialState[catDict[n.type]]) { if(initialState[catDict[n.type]]) {
var node = { // var node = {
id : n.id, // id : n.id,
label : n.label, // label : n.label,
// 3 decimals is way more tractable // size : n.size,
// and quite enough in precision !! // color : n.color,
size : Math.round(n.size*1000)/1000, // x : n.x,
color : n.color, // y : n.y,
x : n.x, // type : n.type,
y : n.y, // customAttrs : n.customAttrs,
type : n.type, // }
// new setup (TODO rm the old at TinaWebJS nodes_2_colour) // if(n.shape) node.shape = n.shape;
customAttrs : { // // console.log("FillGraph, created new node:", node)
grey: false, //
true_color : n.color, // graph.nodes.push( node);
defgrey_color : "rgba("+hex2rga(n.color)+",.4)"
}, // no attributes to remove: I use n directly
// £TODO gather all flags like this graph.nodes.push(n);
// customFlags : {
// // status flags if(Number(n.id)==287) console.log("node 287:", n)
// grey: false,
// active: false,
// hidden: false,
// // forceLabel: false,
// neighbour: false,
// }
}
if(n.shape) node.shape = n.shape;
// console.log("FillGraph, created new node:", node)
if(Number(n.id)==287) console.log("node 287:", node)
// REFA new way => no separate id
graph.nodes.push( node);
// fill the "labels" global variable // fill the "labels" global variable
updateSearchLabels( n.id , n.label , n.type); updateSearchLabels( n.id , n.label , n.type);
...@@ -61,34 +46,27 @@ SigmaUtils = function () { ...@@ -61,34 +46,27 @@ SigmaUtils = function () {
let e = TW.Edges[s+";"+t] let e = TW.Edges[s+";"+t]
if(e) { if(e) {
if(e.source != e.target) { if(e.source != e.target) {
// var edge = {
var computedColorInfo = sigmaTools.edgeColor(e.source, e.target, nodes) //
var edge = { // // sigma mandatory properties
// id : e.id,
// sigma mandatory properties // source : e.source,
id : e.id, // target : e.target,
// REFA was: sourceID, targetID //
source : e.source, // // sigma optional properties
target : e.target, // hidden : false,
weight : e.weight, // color : e.color,
size : e.weight, // REFA s/weight/size/ ? // weight : e.weight,
// // size : e.size,
color : computedColorInfo.res, //
// // twjs additional properties
hidden : false, // type : e.type,
// twjs additional properties // customAttrs : e.customAttrs
type : e.type, // }
customAttrs : {
grey: 0,
true_color : computedColorInfo.res,
rgb : computedColorInfo.rgb_array
}
}
// console.log("edge.color", edge.color) // console.log("edge.color", edge.color)
// REFA new way graph.edges.push( e);
graph.edges.push( edge);
} }
} }
} }
...@@ -223,13 +201,13 @@ SigmaUtils = function () { ...@@ -223,13 +201,13 @@ SigmaUtils = function () {
//debug //debug
// console.warn("rendering edge", edge) // console.warn("rendering edge", edge)
var rgb = edge.customAttrs.rgb var rgbStr = edge.customAttrs.rgb
var defSize = edge[prefix + 'size'] || 1 var defSize = edge[prefix + 'size'] || 1
if (edge.customAttrs.activeEdge) { if (edge.customAttrs.activeEdge) {
size = defSize * 1.5 size = defSize * 1.5
// color with less opacity // color with less opacity
// cf. sigmaTools.edgeColor // cf. sigmaTools.edgeRGB
color = 'rgba('+rgb.join()+',.7)' color = 'rgba('+rgbStr+',.7)'
} }
else if (edge.customAttrs.grey) { else if (edge.customAttrs.grey) {
color = TW.edgeGreyColor color = TW.edgeGreyColor
......
...@@ -21,10 +21,10 @@ sigmaTools = (function(stools) { ...@@ -21,10 +21,10 @@ sigmaTools = (function(stools) {
}; };
// TODO check duplicate functionalities with repaintEdges // TODO check duplicate functionalities with repaintEdges
stools.edgeColor = function(src_id, tgt_id, nodes) { stools.edgeRGB = function(src_id, tgt_id) {
//edge color will be the combination of the 2 node colors //edge color will be the combination of the 2 node colors
var a = nodes[src_id]['color']; var a = TW.Nodes[src_id]['color'];
var b = nodes[tgt_id]['color']; var b = TW.Nodes[tgt_id]['color'];
// console.log("color a", a) // console.log("color a", a)
// console.log("color b", b) // console.log("color b", b)
...@@ -44,10 +44,8 @@ sigmaTools = (function(stools) { ...@@ -44,10 +44,8 @@ sigmaTools = (function(stools) {
var r = (a[0] + b[0]) >> 1; var r = (a[0] + b[0]) >> 1;
var g = (a[1] + b[1]) >> 1; var g = (a[1] + b[1]) >> 1;
var b = (a[2] + b[2]) >> 1; var b = (a[2] + b[2]) >> 1;
// var color = '#'+sigma.tools.rgbToHex(parseFloat(r),parseFloat(g),parseFloat(b))
var color = "rgba( "+r+", "+g+" , "+b+" , "+TW.edgeDefaultOpacity+")";
return {'res':color, 'rgb_array':[r,g,b]} return [r,g,b].join(',')
} }
return stools return stools
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment