Merge branch 'color_by_dyn_attrs' into dev

explorerjs.html

@@ -661,6 +661,10 @@
                        <select id="choose-attr" name="choose-attr"
                                class="custom-select form-control">
                                <option selected value="0"></option>
+                               <option value="auto-size" data-opttype="auto">Auto size</option>
+                               <option value="auto-degree" data-opttype="auto">Auto degree</option>
+                               <option value="auto-indegree" data-opttype="auto">Auto in degree</option>
+                               <option value="auto-outdegree" data-opttype="auto">Auto out degree</option>
                                <!-- filled by fillAttrsInForm(.) -->
                        </select>
                      </div>
@@ -689,10 +693,10 @@
                        <label for="attr-titling-metric" class="smlabel input-group-addon">Titling metric</label>
                        <select id="attr-titling-metric" name="attr-titling-metric"
                                class="custom-select form-control">
-                               <option selected value="size" data-opttype="auto">Auto size</option>
-                               <option selected value="degree" data-opttype="auto">Auto degree</option>
-                               <option selected value="inDegree" data-opttype="auto">Auto in degree</option>
-                               <option selected value="outDegree" data-opttype="auto">Auto out degree</option>
+                               <option value="auto-size" data-opttype="auto">Auto size</option>
+                               <option value="auto-degree" data-opttype="auto">Auto degree</option>
+                               <option value="auto-indegree" data-opttype="auto">Auto in degree</option>
+                               <option value="auto-outdegree" data-opttype="auto">Auto out degree</option>
                                <!-- other attrs filled by fillAttrsInForm(., 'num') -->
                        </select>
                      </div>

settings_explorerjs.js

@@ -66,7 +66,11 @@ TW.conf = (function(TW){
   // (values overridden by data/myproject/project_conf.json "facets" if present)
   TWConf.defaultFacetOptions = {
 
-    // attr title
+    // attr title          coloring fun       nbins       binning strategy
+    'auto-size'       : {'col': "heatmap",  'n': 5,  'binmode': 'samerange'  },
+    'auto-degree'     : {'col': "gradient", 'n': 7,  'binmode': 'samepop'    },
+    'auto-indegree'   : {'col': "gradient", 'n': 7,  'binmode': 'samepop'    },
+    'auto-outdegree'  : {'col': "gradient", 'n': 7,  'binmode': 'samepop'    },
     'cluster_index'   : {'col': "cluster" ,          'binmode': 'off'        },
     'clust_louvain'   : {'col': "cluster" ,          'binmode': 'off',
                          'legend':'Louvain clustering'                       },

twmain/enviroment.js

@@ -516,7 +516,9 @@ function changeType(optionaltypeFlag) {
 
     // update the gui (POSS could be handled by TW.pushGUIState)
     TW.gui.handpickedcolor = false
+    updateDynamicFacets()
     changeGraphAppearanceByFacets( getActivetypesNames() )
+
     if (typeFlag != 'all') {
       graphResetLabelsAndSizes()
     }
@@ -685,6 +687,9 @@ function changeLevel(optionalTgtState) {
       TW.partialGraph.camera.goTo({x:0, y:0, ratio:1.2, angle: 0})
       TW.partialGraph.refresh()
 
+      updateDynamicFacets()
+      changeGraphAppearanceByFacets( getActivetypesNames() )
+
       // recreate FA2 nodes array after you change the nodes
       reInitFa2({
         useSoftMethod: false,

twmain/extras_explorerjs.js

@@ -13,12 +13,52 @@ TW.gui.colorFuns = {
 
 // sigma has dynamic attributes.. the functions below return their resp. getters
 TW.sigmaAttributes = {
-  'degree' :    function(sigInst) { return function(nd) {return sigInst.graph.degree(nd.id)}},
-  'outDegree' : function(sigInst) { return function(nd) {return sigInst.graph.degree(nd.id, 'out')}},
-  'inDegree' :  function(sigInst) { return function(nd) {return sigInst.graph.degree(nd.id, 'in')}}
+  'auto-degree' :    function(sigInst) { return function(nd) {return sigInst.graph.degree(nd.id)}},
+  'auto-outdegree' : function(sigInst) { return function(nd) {return sigInst.graph.degree(nd.id, 'out')}},
+  'auto-indegree' :  function(sigInst) { return function(nd) {return sigInst.graph.degree(nd.id, 'in')}},
+  'auto-size' :    function() { return function(nd) {return nd.size}}
 }
 
 
+
+// £TODO: allow updating only one of them for user-setup
+// update the Auto-Facets
+//     (bins over dynamic sigma attributes like degree,
+//      available since we initialized the sigma instance)
+function updateDynamicFacets() {
+    let autoVals = {}
+    for (var icat in TW.categories) {
+      let nodecat = TW.categories[icat]
+      autoVals[nodecat] = {}
+      for (var autoAttr in TW.sigmaAttributes) {
+        autoVals[nodecat][autoAttr] = {'map':{},'vals':{'vstr':[],'vnum':[]}}
+        let getVal = TW.sigmaAttributes[autoAttr](TW.partialGraph)
+        for (var nid of TW.ByType[icat]) {
+          let nd = TW.partialGraph.graph.nodes(nid)
+          if (nd) {
+            let val = getVal(TW.partialGraph.graph.nodes(nid))
+            if (! (val in autoVals[nodecat][autoAttr].map))
+              autoVals[nodecat][autoAttr].map[val] = []
+            autoVals[nodecat][autoAttr].map[val].push(nid)
+            autoVals[nodecat][autoAttr].vals.vnum.push(val)
+          }
+        }
+      }
+    }
+
+    let autoFacets = facetsBinning(autoVals)
+    // merge them into clusters
+    for (var icat in TW.categories) {
+      let nodecat = TW.categories[icat]
+      for (var autoAttr in TW.sigmaAttributes) {
+        for (var facet in autoFacets[nodecat]) {
+          TW.Clusters[nodecat][facet] = autoFacets[nodecat][facet]
+        }
+      }
+    }
+
+}
+
 // Execution:    changeGraphAppearanceByFacets( true )
 // It reads scanned node-attributes and prepared legends in TW.Facets
 //  to add the button in the html with the sigmaUtils.gradientColoring(x) listener.

twmain/main.js

@@ -498,7 +498,7 @@ function mainStartGraph(inFormat, inData, twInstance) {
       });
       // ==================================================================
 
-      // a new state
+      // a new GUI state (updates sliders and menus)
       TW.pushGUIState({
         'activetypes': initialActivetypes,
         'activereltypes': initialActivereltypes
@@ -576,8 +576,8 @@ function mainStartGraph(inFormat, inData, twInstance) {
       // will run fa2 if enough nodes and TW.conf.fa2Enabled == true
       sigma_utils.smartForceAtlas()
 
-      // should prepare the colors/clusters menu once and for all
-      // (previously, needed to be called after changeType/changeLevel)
+      // prepare the colors/clusters menu until next changeType/changeLevel
+      updateDynamicFacets()
       changeGraphAppearanceByFacets()
   }
 

twmain/sigmaUtils.js

@@ -662,10 +662,19 @@ function gradientColoring(daclass) {
 
     TW.gui.handpickedcolor = true
 
+    // value getter
+    let getVal
+    if (daclass in TW.sigmaAttributes) {
+      getVal = TW.sigmaAttributes[daclass](TW.partialGraph)
+    }
+    else {
+      getVal = function (nd) { return nd.attributes[daclass]}
+    }
+
     var min_pow = 0;
     for(var nid in TW.Nodes) {
         var the_node = TW.Nodes[ nid ]
-        var attval = the_node.attributes[daclass];
+        var attval = getVal(the_node);
         if( !isNaN(parseFloat(attval)) ) { //is float
             while(true) {
                 var themult = Math.pow(10,min_pow);
@@ -685,7 +694,8 @@ function gradientColoring(daclass) {
 
     for(var nid in TW.Nodes) {
         var the_node = TW.Nodes[ nid ]
-        var attval = the_node.attributes[daclass];
+        var attval = getVal(the_node)
+
         var attnumber = Number(attval);
         if (isNaN(attnumber)) {
           continue;