WIP mini optimize render 1/2

start integrating neighbors in systemstate (objective: avoid loops on full graph when deselecting with greyEverything) + removed grey flag which was now always == (!active && !highlight)

settings_explorerjs.js

@@ -172,7 +172,7 @@ TW.conf = (function(TW){
 
   TWConf.clusterColorsAtt = true;      // show "Set colors" menu
 
-  TWConf.dragNodesAvailable = true;    // allow dragging nodes with CTRL+click
+  TWConf.dragNodesAvailable = false;    // allow dragging nodes with CTRL+click
 
   TWConf.deselectOnclickStage = true   // click on background remove selection ?
                                        // (except when dragging)
@@ -300,7 +300,7 @@ TW.conf = (function(TW){
     logFacets: false,                // ...about parsing node attribute:value facets
     logSettings: false,              // ...about settings at Tina and Sigma init time
     logStates: false,                // ...about TW.states array
-    logSelections: false
+    logSelections: true
   }
 
 

tinawebJS/main.js

@@ -374,7 +374,7 @@ function mainStartGraph(inFormat, inData, twInstance) {
       TW.nodeIds = Object.keys(dicts.nodes)  // useful for loops
       TW.edgeIds = Object.keys(dicts.edges)
 
-      // in-place: pre-compute all color/grey/size properties
+      // in-place: pre-compute all color/unselected color/size properties
       prepareNodesRenderingProperties(TW.Nodes)
       prepareEdgesRenderingProperties(TW.Edges, TW.Nodes)
 

tinawebJS/methods.js

@@ -23,7 +23,10 @@ TW.pushState = function( args ) {
     if (!isUndef(args.activetypes))  newState.activetypes = args.activetypes
     if (!isUndef(args.level))        newState.level = args.level;
 
-    // POSS1: add neighbors (of both types) in a .neighborsNids[type] slot
+    // neighbors (of both types) in a .neighborsNids[type] slot
+    if(!isUndef(args.same))          newState.samesideSortdNeighs = args.same;
+    if(!isUndef(args.oppos))         newState.opposideSortdNeighs = args.oppos;
+
     // POSS2: add filterSliders params to be able to recreate subsets at a given time
 
     // useful shortcut
@@ -124,7 +127,7 @@ function cancelSelection (fromTagCloud, settings) {
     // clear the current state's selection and neighbors arrays
 
     // new state
-    TW.pushState({sels:[]})
+    TW.pushState({sels:[], oppos:[], same:[]})
 
     // global flag
     TW.gui.selectionActive = false
@@ -137,7 +140,6 @@ function cancelSelection (fromTagCloud, settings) {
         // console.log("cancelSelection: edge", e)
         if (e) {
           e.color = e.customAttrs['true_color'];
-          e.customAttrs.grey = 0;
 
           if (e.customAttrs.activeEdge) {
             e.customAttrs.activeEdge = 0;
@@ -147,17 +149,16 @@ function cancelSelection (fromTagCloud, settings) {
     }
 
     //Nodes colors go back to previous
-    // £TODO partly duplicate effort with (de)highlightSelectedNodes and greyEverything
+    // ££TODO partly duplicate effort with (de)highlightSelectedNodes and greyEverything
     //       => could be replaced by a (de)highlightSelectedAndNeighbors
     //          on smaller set (here entire nodeset!)
     for(let j in TW.nodeIds){
       let n = TW.partialGraph.graph.nodes(TW.nodeIds[j])
       // console.log("cancelSelection: node", n)
       if (n) {
-        n.active = false;
-        n.customAttrs.grey = 0
-        n.customAttrs.forceLabel = 0
+        n.customAttrs.active = 0
         n.customAttrs.highlight = 0
+        n.customAttrs.forceLabel = 0
 
         // some colorings cases also modify size and label
         if (settings.resetLabels) {
@@ -246,19 +247,14 @@ function highlightSelectedNodes(flag){
       console.log("\t***methods.js:highlightSelectedNodes(flag)"+flag+" sel:"+sels)
     for(let i in sels) {
       let nid = sels[i]
-      TW.partialGraph.graph.nodes(nid).active = flag
+      TW.partialGraph.graph.nodes(nid).customAttrs.active = flag
     }
 }
 
 function manualForceLabel(nodeid, active, justHover) {
-	// console.log("manual|"+nodeid+"|"+active)
-  var nd = TW.partialGraph.graph.nodes(nodeid)
+  let nd = TW.partialGraph.graph.nodes(nodeid)
 
-  // TODO harmonize with other status => bien re-distinguer neighbor et active
-  // nd.active=active;
-
-  // console.log('justHover', justHover)
-  // var t0, t1
+  nd.customAttrs.forceLabel = true
 
   if (justHover) {
     // using single node redraw in hover layer (much faster ~ 0.5ms)
@@ -461,7 +457,7 @@ function LevelButtonDisable( TF ){
 // NB: we just change the flags, not the colors
 //     renderer will see the flags and handle the case accordingly
 
-// £TODO rendering optimization: reduce effort by looping only on previously selected and neighbors
+// ££TODO rendering optimization: reduce effort by looping only on previously selected and neighbors
 //       and having (!active && !highlight) tested instead of then useless grey flag
 function greyEverything(){
 
@@ -470,10 +466,8 @@ function greyEverything(){
 
     if (n && !n.hidden) {
       // normal case handled by node renderers
-      // will see the n.customAttrs.grey flag => use n.customAttrs.defgrey_color
-      n.customAttrs.grey=1
-
-      n.active = false
+      // will trigger defgrey_color if (!active && !highlight)
+      n.customAttrs.active = false
       n.customAttrs.forceLabel = false;
       n.customAttrs.highlight = false;
     }
@@ -482,8 +476,7 @@ function greyEverything(){
   if (TW.partialGraph.settings('drawEdges')) {
     for(var i in TW.edgeIds){
       let e = TW.partialGraph.graph.edges(TW.edgeIds[i])
-      if (e && !e.hidden && !e.customAttrs.grey) {
-        e.customAttrs.grey = 1
+      if (e && !e.hidden && e.customAttrs.activeEdge) {
         e.customAttrs.activeEdge = 0
       }
     }
@@ -508,7 +501,6 @@ function prepareNodesRenderingProperties(nodesDict) {
     n.size = Math.round(n.size*sizeFactor*1000)/1000
 
     // new initial setup of properties
-    n.active = false
 
     var rgba, rgbStr, invalidFormat = false;
 
@@ -551,8 +543,8 @@ function prepareNodesRenderingProperties(nodesDict) {
 
     n.customAttrs = {
       // status flags
-      grey: false,                // deselected
-      highlight: false,           // neighbors or legend's click
+      active: false,              // when selected
+      highlight: false,           // when neighbors or legend's click
 
       // default unselected color
       defgrey_color : "rgba("+rgbStr+","+TW.conf.sigmaJsDrawingProperties.twNodesGreyOpacity+")",
@@ -565,14 +557,13 @@ function prepareNodesRenderingProperties(nodesDict) {
     // POSS n.type: distinguish rendtype and twtype
 
     // POSS flags like this
-    // // sigma's flags: active and hidden
-    // active: false,
+    // // sigma's flag: hidden (not used)
     // hidden: false,
     // customFlags : {
     //   // our status flags
-    //   grey: false,
+    //   active: false,
     //   highlight: false,
-    //   // forceLabel: false,
+    //   forceLabel: false,
     // }
   }
 }
@@ -588,7 +579,6 @@ function prepareEdgesRenderingProperties(edgesDict, nodesDict) {
 
     e.color = "rgba("+rgbStr+","+TW.conf.sigmaJsDrawingProperties.twEdgeDefaultOpacity+")"
     e.customAttrs = {
-      grey: false,
       activeEdge : false,
       true_color : e.color,
       rgb : rgbStr

tinawebJS/sigmaUtils.js

@@ -74,7 +74,7 @@ var SigmaUtils = function () {
       var fontSize,
           prefix = settings('prefix') || '',
           size = node[prefix + 'size'],
-          activeFlag = node['active'] || node.customAttrs['forceLabel'],
+          activeFlag = node.customAttrs['active'] || node.customAttrs['forceLabel'],
           neighborFlag = node.customAttrs['highlight'],
           labelColor = (settings('labelColor') === 'node') ?
             (node.color || settings('defaultNodeColor')) :
@@ -153,7 +153,7 @@ var SigmaUtils = function () {
       }
       else if (neighborFlag) {
         // larger neighbors or highlight
-        fontSize *= 1.4
+        fontSize *= 1.3
       }
 
       context.font = (settings('fontStyle') ? settings('fontStyle') + ' ' : '') +
@@ -191,12 +191,8 @@ var SigmaUtils = function () {
 
         // console.debug(`t=${tstamp()} curve render activeedge: ${edgeInfos(edge)})`)
       }
-      else if (edge.customAttrs.grey) {
-        color = settings('twEdgeGreyColor')
-        size = 1
-      }
       else {
-        color = "rgba( "+baseRGB+" , "+TW.conf.sigmaJsDrawingProperties.twEdgeDefaultOpacity+")";
+        color = settings('twEdgeGreyColor')
         size = defSize
       }
 
@@ -243,13 +239,8 @@ var SigmaUtils = function () {
         // cf. sigmaTools.edgeColor
         color = 'rgba('+rgb.join()+',.7)'
       }
-      else if (edge.customAttrs.grey) {
-        color = settings('twEdgeGreyColor')
-        size = 1
-      }
       else {
-        // color = "rgba( "+rgb.join()+" , "+TW.conf.sigmaJsDrawingProperties.twEdgeDefaultOpacity+")";
-        color = edge.customAttrs.true_color
+        color = settings('twEdgeGreyColor')
         size = defSize
       }
 
@@ -302,9 +293,23 @@ var SigmaUtils = function () {
 
         // mode variants 2: if node is selected, highlighted or unselected
         if (TW.gui.selectionActive) {
+
+
+          // the selected node(s)
+          if (node.customAttrs.active) {
+            // called by label+background overlay cf. "subcall"
+            nodeSize *= 1.1
+            borderSize *= 1.1
+            nodeColor = "#222" // metro ticket
+          }
+          // the neighbor node(s)
+          else if (node.customAttrs.highlight) {
+            nodeSize *= 1.3
+            borderSize *= 1.3
+          }
           // passive nodes should blend in the grey of twEdgeGreyColor
           // cf settings_explorerjs, defgrey_color and greyEverything()
-          if (node.customAttrs.grey) {
+          else {
             if (! TW.gui.handpickedcolor) {
               nodeColor = node.customAttrs.defgrey_color
             }
@@ -314,20 +319,11 @@ var SigmaUtils = function () {
             // nice looking uniform grey
             borderColor = TW.conf.sigmaJsDrawingProperties.twBorderGreyColor
           }
-          else {
-            nodeSize *= 1.4
-            borderSize *= 1.4
-
-            if(node.active) {
-            // called by label+background overlay cf. "subcall"
-            nodeColor = "#222" // metro ticket
-            }
-          }
         }
         // highlight AND (NOT selectionActive) => highlight just this one time
         else if (node.customAttrs.highlight) {
-          nodeSize *= 1.4
-          borderSize *= 1.4
+          nodeSize *= 1.3
+          borderSize *= 1.3
           node.customAttrs.highlight = false
         }
 
@@ -408,8 +404,8 @@ var SigmaUtils = function () {
               settings('labelSizeRatio') * size;
 
         // largerall: our customized size boosts
-        if (!node.active) {
-          fontSize *= 1.4
+        if (!node.customAttrs.active) {
+          fontSize *= 1.3
 
           let X = node[prefix + 'x']
           let Y = node[prefix + 'y']

tinawebJS/sigma_tools.js

@@ -25,10 +25,9 @@ sigmaTools = (function(stools) {
           y: rawNode.viz.position.y,
           color: rawNode.viz.color,
           size: Math.round(rawNode.viz.size*1000)/1000,
-          active: false,
           hidden: false,
           customAttrs: {
-            grey: false,
+            active: false,
             highlight: false,
             defgrey_color : "rgba("+rgbStr+",.4)"
           },
@@ -54,7 +53,6 @@ sigmaTools = (function(stools) {
           color: leColor,
           weight: Math.round(rawEdge.weight*1000)/1000,
           customAttrs: {
-            grey: false,
             activeEdge: false,
             true_color: leColor,
             rgb: rgbStr