make custom colors stable by selection

extras_explorerjs.js

@@ -63,7 +63,7 @@ function ChangeGraphAppearanceByAtt( manualflag ) {
     // console.log( AttsDict_sorted )
 
 
-    var color_menu_info = "";
+    var color_menu_info = '<li><a href="#" onclick="graphResetColor()">By Default</a></li>';
 
     if( $( "#colorgraph-menu" ).length>0 ){
       for (var i in AttsDict_sorted) {
@@ -110,6 +110,7 @@ function RunLouvain() {
 
 
 function SomeEffect( ClusterCode ) {
+    console.log( "SomeEffect" )
     console.log( ClusterCode )
 
     // ex: ISItermsriskV2_140 & ISItermsriskV2_140||clust_default||7
@@ -205,6 +206,30 @@ function SomeEffect( ClusterCode ) {
     TW.partialGraph.refresh()
 }
 
+function graphResetColor(){
+
+    // reset global var
+    TW.handpickedcolor = false
+
+    // reset each node's color and label
+    for (var j in TW.nodeIds) {
+      let n = TW.partialGraph.graph.nodes(TW.nodeIds[j])
+      n.color = n.customAttrs["true_color"];
+
+      n.label = TW.Nodes[n.id].label
+    }
+
+    // if (TW.partialGraph.settings('drawEdges')) {
+    //   for(var x in eds){
+    //       e=eds[x];
+    //       e.customAttrs["grey"] = 0;
+    //       e.color = e.customAttrs["true_color"];
+    //   }
+    // }
+
+    TW.partialGraph.render()
+}
+
 
 function set_ClustersLegend ( daclass ) {
     //TW.partialGraph.states.slice(-1)[0].LouvainFait = true
@@ -231,6 +256,8 @@ function set_ClustersLegend ( daclass ) {
     if (daclass=="clust_louvain")
         daclass = "louvain"
     OrderedClustDicts = Object.keys(ClustNB_CurrentColor).sort()
+
+    // TODO allow external cluster legends dict
     if( daclass.indexOf("clust")>-1 ) {
         for(var i in OrderedClustDicts) {
             var IDx = OrderedClustDicts[i]

tinawebJS/Tinaweb.js

@@ -155,6 +155,7 @@ function SelectionEngine() {
 
         console.log("IN SelectionEngine.MultipleSelection2:")
         console.log("nodes", nodes)
+
         greyEverything();
 
         var sameSideNeighbors = {}

tinawebJS/methods.js

@@ -17,28 +17,26 @@ function cancelSelection (fromTagCloud, settings) {
     //Nodes colors go back to normal
     overNodes=false;
 
-    // £TODO case with return to alternate colors
-
+    //Edges colors go back to normal
     if (TW.partialGraph.settings('drawEdges')) {
       for(let i=0;i<TW.nEdges;i++){
         let e = TW.partialGraph.graph.edges(TW.edgeIds[i])
         // console.log("cancelSelection: edge", e)
         if (e) {
-          e.color = e.customAttrs['grey'] ? e.customAttrs['true_color'] : e.color;
+          e.color = e.customAttrs['true_color'];
           e.customAttrs.grey = 0;
           e.customAttrs.activeEdge = 0;
         }
       }
     }
 
-    //Nodes colors go back to normal
+    //Nodes colors go back to previous
     for(let j=0;j<TW.nNodes;j++){
       let n = TW.partialGraph.graph.nodes(TW.nodeIds[j])
       // console.log("cancelSelection: node", n)
       if (n) {
         n.active = false;
-        // n.color = n.customAttrs['grey'] ? n.customAttrs['true_color'] : n.color;
-        n.color = n.customAttrs['true_color'];
+        n.color = TW.handpickedcolor ? n.customAttrs['alt_color'] : n.customAttrs['true_color'];
         n.customAttrs.grey = 0
         n.customAttrs.forceLabel = 0
       }
@@ -582,13 +580,11 @@ function unHide(nodeId) {
   TW.partialGraph.graph.nodes(nodeId).hidden=false
 }
 
+
 // edges greyish color for unselected, when we have a selection
-// case default: we just change the flags
-//                - greyish color was precomputed in prepareNodesRenderingProperties
-//                  as n.customAttrs.defgrey_color
+// NB: we just change the flags, not the colors
 //     - renderer will see the flags and handle the case accordingly
-// cases when coloredBy (ex: centrality): color must be recomputed here
-function greyEverything(notDefaultColors){
+function greyEverything(){
 
   for(var j=0 ; j<TW.nNodes ; j++){
     let n = TW.partialGraph.graph.nodes(TW.nodeIds[j])
@@ -603,8 +599,9 @@ function greyEverything(notDefaultColors){
       n.customAttrs.highlight = false;
 
       // special case after a coloredBy or clustersBy
-      if (notDefaultColors)
-        n.color = "rgba("+hex2rga(n.color)+",0.5)"
+      // if (TW.handpickedcolor) {
+      //   n.color = "rgba("+hex2rga(n.color)+",0.5)"
+      // }
     }
   }
 
@@ -623,30 +620,6 @@ function greyEverything(notDefaultColors){
 
 }
 
-// new sigma.js: TODO change logic (the reverse of greyEverything is done by redraw for the colors, and cancelSelection for the flags...)
-//               but this could be used for colorsBy menu
-// function graphResetColor(){
-//     nds = TW.partialGraph.graph.nodes().filter(function(x) {
-//                             return !x['hidden'];
-//           });
-//     eds = TW.partialGraph.graph.edges().filter(function(x) {
-//                             return !x['hidden'];
-//           });
-//
-//     for(var x in nds){
-//         n=nds[x];
-//         n.customAttrs["grey"] = 0;
-//         n.color = n.customAttrs["true_color"];
-//     }
-//
-//     if (TW.partialGraph.settings('drawEdges')) {
-//       for(var x in eds){
-//           e=eds[x];
-//           e.customAttrs["grey"] = 0;
-//           e.color = e.customAttrs["true_color"];
-//       }
-//     }
-// }
 //
 // function hideEverything(){
 //     console.log("\thiding all");

tinawebJS/sigmaUtils.js

@@ -302,16 +302,29 @@ SigmaUtils = function () {
         // mode variants
         if (TW.selectionActive) {
           // passive nodes should blend in the grey of TW.edgeGreyColor
+          // cf settings_explorerjs, defgrey_color and greyEverything()
           if (node.customAttrs.grey) {
+            if (! TW.handpickedcolor) {
               nodeColor = node.customAttrs.defgrey_color
+            }
+            else {
+              // #C01O3 += alpha 55
+              //                     => #C01O355
+              nodeColor = node.customAttrs.alt_color+"55"
+
+              // old way:
+              // nodeColor = "rgba("+hex2rga(node.customAttrs.alt_color)+",0.5)"
+            }
+            // nice looking uniform grey
             borderColor = TW.nodesGreyBorderColor
-            // cf settings_explorerjs, defgrey_color and greyEverything()
           }
           // neighbor nodes <=> (highlight flag AND selectionActive)
           else if(node.customAttrs.highlight) {
-            // borderColor = "rgba(220, 220, 220, 0.7)"
             nodeSize *= 1.4
             borderSize *= 1.4
+            if (TW.handpickedcolor) {
+              nodeColor = node.customAttrs.alt_color
+            }
           }
           else if(node.active) {
             borderColor = null
@@ -669,6 +682,8 @@ function clustersBy(daclass) {
 
     cancelSelection(false);
 
+    TW.handpickedcolor = true
+
     // TODO avoid this strategy and also double loop below
     var v_nodes = getVisibleNodes();
     var min_pow = 0;
@@ -772,12 +787,17 @@ function repaintEdges() {
 // rewrite of clustersBy with binning and for attributes that can have negative float values
 // /!\ age and growth_rate attributes referred to by name
 function colorsRelByBins(daclass) {
+  cancelSelection(false);
+
+  var doModifyLabel = false
+
+  TW.handpickedcolor = true
 
   var nTicksParam = 12
   // do first loop entirely to get percentiles => bins, then modify alt_color
 
   // estimating ticks
-  let ticksArray = []
+  let tickThresholds = []
   let valArray = []
   for (var j=0 ; j < TW.nNodes ; j++) {
     let n = TW.partialGraph.graph.nodes(TW.nodeIds[j])
@@ -799,10 +819,10 @@ function colorsRelByBins(daclass) {
   for (var l=0 ; l < nTicksParam ; l++) {
     let nthVal = Math.floor(len * l / nTicksParam)
 
-    ticksArray.push(valArray[nthVal])
+    tickThresholds.push(valArray[nthVal])
   }
 
-  console.info(`===|===|=== ${nTicksParam} color ticks ===|===|===\n`, ticksArray)
+  console.info(`===|===|=== ${nTicksParam} color ticks ===|===|===\n`, tickThresholds)
 
 
     cancelSelection(false);
@@ -824,11 +844,10 @@ function colorsRelByBins(daclass) {
 
     // spare color 13 "#64e0f2",
 
-    var tickThresholds = [-1000000,-75,-50,-25,-15,15,25,50,75,100,125,150, 1000000]
+    // tickThresholds = [-1000000,-75,-50,-25,-15,15,25,50,75,100,125,150, 1000000]
 
     // £TODO put colors and thresholds as params or calculate thresholds like eg d3.histogram
     if (daclass == 'age') {
-        tickThresholds = ticksArray
         // and add a grey color for the first timeperiod
         binColors.unshift("#F9F7ED")
 
@@ -836,7 +855,8 @@ function colorsRelByBins(daclass) {
     }
     else if (daclass == 'growth_rate') {
 
-      tickThresholds = ticksArray
+      doModifyLabel = true
+
       binColors[4] = ""
       binColors = [
           "#005197",  //blue    binMin -∞
@@ -864,7 +884,14 @@ function colorsRelByBins(daclass) {
         && n.attributes.category == 'terms'
         && ! isUndef(n.attributes[daclass])
       ) {
-        var theVal = parseFloat(n.attributes[daclass])
+
+        var valSt = n.attributes[daclass]
+
+        if (doModifyLabel) {
+          n.label = `(${valSt}) ${n.label}`          
+        }
+
+        var theVal = parseFloat(valSt)
         var foundBin = false
         // console.log('theVal:',theVal)
 
@@ -879,10 +906,6 @@ function colorsRelByBins(daclass) {
                 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.handpickedcolor = true
-
-                // £TODO handpickedcolor flag support in sigmaUtils subrenderers
-
                 foundBin = true
                 // console.log(`theVal ${theVal} => found its bin ${binMin} ... ${binColors[k]}`)
 
@@ -946,6 +969,9 @@ function colorsBy(daclass) {
           // reset the alt_color valflag
           TW.partialGraph.graph.nodes(v_nodes[i].id).customAttrs.alt_color = null
         }
+
+        // reset the global state
+        TW.handpickedcolor = false
     }
     else {
       // shuffle on entire array is better than random sorting function on each element
@@ -957,6 +983,8 @@ function colorsBy(daclass) {
           TW.partialGraph.graph.nodes(v_nodes[i].id).color = randomColorList[ attval ]
           TW.partialGraph.graph.nodes(v_nodes[i].id).customAttrs.alt_color = randomColorList[ attval ]
       }
+      // set the global state
+      TW.handpickedcolor = false
     }
 
 
@@ -977,6 +1005,8 @@ function colorsBy(daclass) {
         }
     }
     //    [ / Edge-colour by source-target nodes-colours combination ]
+
+    // £TODO fix ClustersLegend
     set_ClustersLegend ( daclass )
     TW.partialGraph.render();
 }