after esth. choice to color edges, restore fixed repaintEdges

tinawebJS/main.js

@@ -206,7 +206,7 @@ if(RES["OK"]) {
 
     // in-place: pre-compute all color/grey/size properties
     prepareNodesRenderingProperties(TW.Nodes)
-    prepareEdgesRenderingProperties(TW.Edges)
+    prepareEdgesRenderingProperties(TW.Edges, TW.Nodes)
 
     TW.selectionActive = false  // changes rendering mode
 

tinawebJS/methods.js

@@ -583,7 +583,7 @@ function unHide(nodeId) {
 
 // edges greyish color for unselected, when we have a selection
 // NB: we just change the flags, not the colors
-//     - renderer will see the flags and handle the case accordingly
+//     renderer will see the flags and handle the case accordingly
 function greyEverything(){
 
   for(var j=0 ; j<TW.nNodes ; j++){
@@ -597,12 +597,6 @@ function greyEverything(){
       n.active = false
       n.customAttrs.forceLabel = false;
       n.customAttrs.highlight = false;
-
-      // special case after a coloredBy or clustersBy
-      // (now handled in renderer)
-      // if (TW.handpickedcolor) {
-      //   n.color = "rgba("+hex2rgba(n.color+"55").join(','))"
-      // }
     }
   }
 
@@ -612,9 +606,6 @@ function greyEverything(){
       if (e && !e.hidden && !e.customAttrs.grey) {
         e.customAttrs.grey = 1
         e.customAttrs.activeEdge = 0
-
-        // new specification: coloredBy does not affect edges
-        // (ie no special case for notDefaultColors)
       }
     }
   }
@@ -681,14 +672,14 @@ function prepareNodesRenderingProperties(nodesDict) {
   }
 }
 
-function prepareEdgesRenderingProperties(edgesDict) {
+function prepareEdgesRenderingProperties(edgesDict, nodesDict) {
   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)
+    var rgbStr = sigmaTools.edgeRGB(nodesDict[e.source].color, nodesDict[e.target].color)
 
     e.color = "rgba("+rgbStr+","+TW.edgeDefaultOpacity+")"
     e.customAttrs = {

tinawebJS/sigmaUtils.js

@@ -201,12 +201,17 @@ SigmaUtils = function () {
       // console.warn("rendering edge", edge)
 
       var defSize = edge[prefix + 'size'] || settings("minEdgeSize") || 1 ;
+
+      // precomputed color with no opacity
+      // cf. sigmaTools.edgeRGB
+      var baseRGB = TW.handpickedcolor ? edge.customAttrs.alt_rgb : edge.customAttrs.rgb
+
       if (edge.customAttrs.activeEdge) {
         size = (defSize * 2) + 1
-        // color with no opacity
-        // cf. sigmaTools.edgeRGB
-        color = 'rgb('+edge.customAttrs.rgb+')'
-        // console.log("drawing activeEdge with size", size)
+
+        // active edges look well with no opacity
+        color = `rgb(${baseRGB})`
+
         // edge.customAttrs.activeEdge = false // for one-time
       }
       else if (edge.customAttrs.grey) {
@@ -214,8 +219,7 @@ SigmaUtils = function () {
         size = 1
       }
       else {
-        // color = "rgba( "+rgb.join()+" , "+TW.edgeDefaultOpacity+")";
-        color = edge.customAttrs.true_color
+        color = "rgba( "+baseRGB+" , "+TW.edgeDefaultOpacity+")";
         size = defSize
       }
 
@@ -686,12 +690,10 @@ function clustersBy(daclass) {
 
     TW.handpickedcolor = true
 
-    // TODO avoid this strategy and also double loop below
-    var v_nodes = getVisibleNodes();
     var min_pow = 0;
-    for(var i in v_nodes) {
-        var the_node = TW.Nodes[ v_nodes[i].id ]
-        var attval = ( isUndef(the_node.attributes) || isUndef(the_node.attributes[daclass]) )? v_nodes[i][daclass]: the_node.attributes[daclass];
+    for(var j in TW.nodeIds) {
+        var the_node = TW.Nodes[ TW.nodeIds[j] ]
+        var attval = the_node.attributes[daclass];
         if( !isNaN(parseFloat(attval)) ) { //is float
             while(true) {
                 var themult = Math.pow(10,min_pow);
@@ -707,13 +709,14 @@ function clustersBy(daclass) {
     var real_min = 1000000;
     var real_max = -1;
     var themult = Math.pow(10,min_pow);
-    for(var i in v_nodes) {
-        var the_node = TW.Nodes[ v_nodes[i].id ]
-        var attval = ( isUndef(the_node.attributes) || isUndef(the_node.attributes[daclass]) )? v_nodes[i][daclass]: the_node.attributes[daclass];
+
+    for(var j in TW.nodeIds) {
+        var the_node = TW.Nodes[ TW.nodeIds[j] ]
+        var attval = the_node.attributes[daclass];
         var attnumber = Number(attval);
         var round_number = Math.round(  attnumber*themult ) ;
 
-        NodeID_Val[v_nodes[i].id] = { "round":round_number , "real":attnumber };
+        NodeID_Val[TW.nodeIds[j]] = { "round":round_number , "real":attnumber };
 
         if (round_number<real_min) real_min = round_number;
         if (round_number>real_max) real_max = round_number;
@@ -749,12 +752,8 @@ function clustersBy(daclass) {
     }
     //    [ / Scaling node colours(0-255) and sizes(3-5) ]
 
-
-
-
-    //    [ Edge-colour by source-target nodes-colours combination ]
+    // Edge precompute alt_rgb by new source-target nodes-colours combination
     repaintEdges()
-    //    [ / Edge-colour by source-target nodes-colours combination ]
 
     set_ClustersLegend ( null )
 
@@ -765,26 +764,29 @@ function clustersBy(daclass) {
 // for debug of colorsRelByBins
 var totalsPerBinMin = {}
 
-// Edge-colour by source-target nodes-colours combination
-// TODO rm because duplicate with edgeRGB
+// Edge-colour: precompute alt_rgb by source-target node.alt_color combination
 function repaintEdges() {
-  console.log('skipping repaintEdges')
-  // var v_edges = getVisibleEdges();
-  // for(var e in v_edges) {
-  //     var e_id = v_edges[e].id;
-  //     var a = TW.partialGraph.graph.nodes(v_edges[e].source).color;
-  //     var b = TW.partialGraph.graph.nodes(v_edges[e].target).color;
-  //     a = hex2rgba(a);
-  //     b = hex2rgba(b);
-  //     var r = (a[0] + b[0]) >> 1;
-  //     var g = (a[1] + b[1]) >> 1;
-  //     var b = (a[2] + b[2]) >> 1;
-  //
-  //     TW.partialGraph.graph.edges(e_id).color = "rgba("+[r,g,b].join(",")+",0.5)";
-  //
-  //     // also keep components array (useful if we change opacity when selected)
-  //     TW.partialGraph.graph.edges(e_id).customAttrs.rgb = [r,g,b]
-  // }
+
+  for (var i in TW.edgeIds) {
+    let eid = TW.edgeIds[i]
+
+    if (eid) {
+      let idPair = eid.split(';')
+      if (idPair.length != 2) {
+        console.warn('skipping invalid edgeId', eid)
+      }
+      else {
+        let e = TW.partialGraph.graph.edges(eid)
+        let src = TW.partialGraph.graph.nodes(idPair[0])
+        let tgt = TW.partialGraph.graph.nodes(idPair[1])
+
+        let src_color = src.customAttrs.alt_color || '#555'
+        let tgt_color = tgt.customAttrs.alt_color || '#555'
+        e.customAttrs.alt_rgb = sigmaTools.edgeRGB(src_color,tgt_color)
+        // we don't set e.color because opacity may vary if selected or not
+      }
+    }
+  }
 }
 
 // rewrite of clustersBy with binning and for attributes that can have negative float values
@@ -910,10 +912,11 @@ function colorsRelByBins(daclass) {
             if((theVal >= binMin) && (theVal < binMax)) {
                 // TW.partialGraph._core.graph.nodesIndex[n.id].binMin = binMin
                 // TW.partialGraph._core.graph.nodesIndex[n.id].color = binColors[j]
-                TW.partialGraph.graph.nodes(n.id).binMin = binMin
-                TW.partialGraph.graph.nodes(n.id).color = binColors[k]
-                TW.partialGraph.graph.nodes(n.id).customAttrs.alt_color = binColors[k]
-                TW.partialGraph.graph.nodes(n.id).customAttrs.altgrey_color = false
+
+                n.binMin = binMin
+                n.color = binColors[k]
+                n.customAttrs.alt_color = binColors[k]
+                n.customAttrs.altgrey_color = false
                 foundBin = true
                 // console.log(`theVal ${theVal} => found its bin ${binMin} ... ${binColors[k]}`)
 
@@ -926,21 +929,22 @@ function colorsRelByBins(daclass) {
                 break
             }
           }
+        }
 
-          if (!foundBin) {
-            TW.partialGraph.graph.nodes(n.id).binMin = null
-            TW.partialGraph.graph.nodes(n.id).color = '#555'
-            TW.partialGraph.graph.nodes(n.id).customAttrs.alt_color = '#555'
-          }
+        // case no val or no bin
+        if (!foundBin) {
+          // console.log('no val for', n.id)
+          n.binMin = null
+          n.color = '#555'
+          n.customAttrs.alt_color = '#555'
         }
       }
     }
 
-    console.info('coloring distribution per tick thresholds' , totalsPerBinMin[binMin])
+    console.info('coloring distribution per tick thresholds' , totalsPerBinMin)
 
-    //    [ Edge-colour by source-target nodes-colours combination ]
-    // repaintEdges()
-    //    [ / Edge-colour by source-target nodes-colours combination ]
+    // Edge precompute alt_rgb by new source-target nodes-colours combination
+    repaintEdges()
 
     set_ClustersLegend ( null )
 
@@ -996,22 +1000,8 @@ function colorsBy(daclass) {
       TW.handpickedcolor = true
     }
 
-    //    [ Edge-colour by source-target nodes-colours combination ]
-    // var v_edges = getVisibleEdges();
-    // for(var e in v_edges) {
-    //     var e_id = v_edges[e].id;
-    //     var a = v_edges[e].source.color;
-    //     var b = v_edges[e].target.color;
-    //     if (a && b) {
-    //         a = hex2rgba(a);
-    //         b = hex2rgba(b);
-    //         var r = (a[0] + b[0]) >> 1;
-    //         var g = (a[1] + b[1]) >> 1;
-    //         var b = (a[2] + b[2]) >> 1;
-    //         TW.partialGraph.graph.edges(e_id).color = "rgba("+[r,g,b].join(",")+",0.5)";
-    //     }
-    // }
-    //    [ / Edge-colour by source-target nodes-colours combination ]
+    // Edge precompute alt_rgb by new source-target nodes-colours combination
+    repaintEdges()
 
     // £TODO fix ClustersLegend
     set_ClustersLegend ( daclass )

tinawebJS/sigma_tools.js

@@ -44,7 +44,7 @@ sigmaTools = (function(stools) {
       for (var i in rawGexfEdges) {
         var rawEdge = rawGexfEdges[i]
 
-        var rgbStr = sigmaTools.edgeRGB(rawEdge.source, rawEdge.target, newNodes)
+        var rgbStr = sigmaTools.edgeRGB(newNodes[rawEdge.source].color, newNodes[rawEdge.target].color)
         var leColor = "rgba("+rgbStr+","+TW.edgeDefaultOpacity+")"
 
         var newEid = rawEdge.source+";"+rawEdge.target;
@@ -86,52 +86,35 @@ sigmaTools = (function(stools) {
     };
 
     // TODO check duplicate functionalities with repaintEdges
-    stools.edgeRGB = function(src_id, tgt_id, nodeIndex) {
+    stools.edgeRGB = function(color_a, color_b) {
 
-      if (!nodeIndex) {
-        nodeIndex = TW.Nodes
-      }
+      //edge color will be the combination of the 2 node colors
 
-      if (!Object.keys(nodeIndex).length) {
-        console.warn('empty nodeIndex')
-      }
+      // console.log("color a", color_a)
+      // console.log("color b", color_b)
 
-      // console.log('edgeRGB, src_id', src_id)
-      // console.log('edgeRGB, tgt_id', tgt_id)
-      //
-      if (!nodeIndex[src_id] || !nodeIndex[tgt_id]) {
-        return '0,0,0'
-      }
-
-      //edge color will be the combination of the 2 node colors
-      var a = nodeIndex[src_id]['color'];
-      var b = nodeIndex[tgt_id]['color'];
       var tmp
-      // console.log("color a", a)
-      // console.log("color b", b)
 
-      if(a.charAt(0)!="#") {
-          tmp = a.replace(/rgba?\(/,"").replace(")","").split(",")
+      if(color_a.charAt(0)!="#") {
+          tmp = color_a.replace(/rgba?\(/,"").replace(")","").split(",")
 
           // rgb array
-          a = [parseFloat( tmp[0] ) , parseFloat( tmp[1] ) , parseFloat( tmp[2] )];
+          color_a = [parseFloat( tmp[0] ) , parseFloat( tmp[1] ) , parseFloat( tmp[2] )];
       }
       else {
-        a = hex2rgba(a);
+        color_a = hex2rgba(color_a);
       }
 
-      if(b.charAt(0)!="#") {
-          tmp = b.replace(/rgba?\(/,"").replace(")","").split(",")
-          b = [parseFloat( tmp[0] ) , parseFloat( tmp[1] ) , parseFloat( tmp[2] )];
+      if(color_b.charAt(0)!="#") {
+          tmp = color_b.replace(/rgba?\(/,"").replace(")","").split(",")
+          color_b = [parseFloat( tmp[0] ) , parseFloat( tmp[1] ) , parseFloat( tmp[2] )];
       }
       else {
-        b = hex2rgba(b);
+        color_b = hex2rgba(color_b);
       }
-      // console.log(source+" : "+a+"\t|\t"+target+" : "+b)
-
-      var r = (a[0] + b[0]) >> 1;
-      var g = (a[1] + b[1]) >> 1;
-      var b = (a[2] + b[2]) >> 1;
+      var r = (color_a[0] + color_b[0]) >> 1;
+      var g = (color_a[1] + color_b[1]) >> 1;
+      var b = (color_a[2] + color_b[2]) >> 1;
 
       return [r,g,b].join(',')
     }