fine-tune visual settings

make noverlap account for new node sizes slider ; adjust legends after changetype ; etc

settings_explorerjs.js

@@ -145,9 +145,9 @@ TW.conf = (function(TW){
   TWConf.maxDiscreteValues = 15
   TWConf.legendsBins = 7
 
-  // to normalize node sizes: (NB not very useful because tina normalizes them at display)
+  // to normalize node sizes (larger range does increase visual size difference)
   TWConf.desirableNodeSizeMin=1;
-  TWConf.desirableNodeSizeMax=2;
+  TWConf.desirableNodeSizeMax=10;
 
 
   // =============
@@ -256,8 +256,8 @@ TW.conf = (function(TW){
       font: "Droid Sans",                // font params
       fontStyle: "bold",
       defaultLabelColor: '#000',         // labels text color
-      labelSizeRatio: 1,                 // initial label size (on the slider)
-      labelThreshold: 5,                 // min node cam size to start showing label
+      labelSizeRatio: 1,                 // label size in ratio of node size
+      labelThreshold: 4,                 // min node cam size to start showing label
                                          // (old tina: showLabelsIfZoom)
 
       // hovered nodes
@@ -301,8 +301,8 @@ TW.conf = (function(TW){
 
   // relative sizes (iff ChangeType == both nodetypes)
   TWConf.sizeMult = [];
-  TWConf.sizeMult[0] = 1.0;     // ie for node type 0 (<=> sem)
-  TWConf.sizeMult[1] = 5.0;     // ie for node type 1 (<=> soc)
+  TWConf.sizeMult[0] = 1.0;      // ie for node type 0 (<=> sem)
+  TWConf.sizeMult[1] = 10.0;     // ie for node type 1 (<=> soc)
 
 
   // ===========

twmain/Tinaweb.js

@@ -756,6 +756,12 @@ var TinaWebJS = function ( sigmacanvas ) {
                 this.style.cursor = 'wait'
                 // and waiting icon
                 this.insertBefore(createWaitIcon('noverlapwait'), this.children[0])
+
+                // reconfigure to account for nodesizes (if current sizes up => margin needs up)
+                let sizeFactor = Math.max.apply(null, TW.gui.sizeRatios)
+                TW.gui.noverlapConf.nodeMargin =  .5 * sizeFactor
+                TW.gui.noverlapConf.scaleNodes = 1.5 * sizeFactor
+                TW.partialGraph.configNoverlap(TW.gui.noverlapConf)
                 var listener = TW.partialGraph.startNoverlap();
                 var noverButton = this
                 listener.bind('stop', function(event) {
@@ -1112,13 +1118,8 @@ var TinaWebJS = function ( sigmacanvas ) {
             labelSizeTimeout = setTimeout(function(){
               if (TW.gui.sizeRatios[0] != value) {
                 TW.gui.sizeRatios[0] = value
-                // -------------------------------------------------------------
-                // generic efficient method acting on entire graphs label ratio
-                // (can't use it b/c we need to distinguish by type)
-                // var adaptedLabelThreshold = 7 - value
-                // TW.partialGraph.settings('labelSizeRatio', value)
-                // TW.partialGraph.settings('labelThreshold', adaptedLabelThreshold)
-                // -------------------------------------------------------------
+                // also adapt label threshold
+                TW.partialGraph.settings('labelThreshold', getSizeFactor())
                 TW.partialGraph.render()
               }
             }, 200)
@@ -1138,6 +1139,8 @@ var TinaWebJS = function ( sigmacanvas ) {
             labelSizeTimeout = setTimeout(function(){
               if (TW.gui.sizeRatios[1] != value) {
                 TW.gui.sizeRatios[1] = value
+                // also adapt label threshold
+                TW.partialGraph.settings('labelThreshold', getSizeFactor())
                 TW.partialGraph.render()
               }
             }, 200)
@@ -1212,5 +1215,4 @@ var TinaWebJS = function ( sigmacanvas ) {
 
         return activereltypes;
     }
-
 };

twmain/enviroment.js

@@ -27,6 +27,17 @@ TW.gui.lastFilters = {}
 
 TW.gui.sizeRatios = [1,1]           // sizeRatios per nodetype
 
+TW.gui.noverlapConf = {
+  nodeMargin: .4,
+  scaleNodes: 1.5,
+  gridSize: 300,
+  speed: 7,
+  maxIterations: 8,
+  easing: 'quadraticOut', // animation transition function
+  duration: 1500   // animation duration
+                   // NB animation happens *after* processing
+}
+
 
 // POSS: themed variants (ex: for dark bg vs light bg)
 // contrasted color list for clusterColoring()
@@ -475,9 +486,13 @@ function changeType(optionaltypeFlag) {
         console.log("selection transitive projection from",sourceNids, "to", newselsArr)
     }
 
-    // update the color menu
+    // update the gui (POSS could be handled by TW.pushGUIState)
     TW.gui.handpickedcolor = false
     changeGraphAppearanceByFacets( getActivetypesNames() )
+    if (typeFlag != 'all') {
+      graphResetLabelsAndSizes()
+    }
+    TW.partialGraph.settings('labelThreshold', getSizeFactor())
 
     // recreates FA2 nodes array from new nodes
     reInitFa2({

twmain/main.js

@@ -531,18 +531,7 @@ function mainStartGraph(inFormat, inData, twInstance) {
       // init FA2 for any future forceAtlas2 calls
       TW.partialGraph.configForceAtlas2(TW.FA2Params)
 
-
-      // init noverlap for any future calls
-      TW.partialGraph.configNoverlap({
-        nodeMargin: .4,
-        scaleNodes: 1.5,
-        gridSize: 400,
-        speed: 5,
-        maxIterations: 10,
-        easing: 'quadraticOut', // animation transition function
-        duration: 1500   // animation duration
-                         // NB animation happens *after* processing
-      });
+      // NB: noverlap conf depends on sizeRatios so updated before each run
 
       // REFA new sigma.js
       TW.partialGraph.camera.goTo({x:0, y:0, ratio:0.9, angle: 0})

twmain/methods.js

@@ -175,6 +175,11 @@ function getActiverelsKey(someState) {
   }
 }
 
+// how many types are currently active
+function getNActive(someState) {
+  return TW.SystemState().activetypes.filter(function(bool){return bool}).length
+}
+
 // transitional function:
 // ----------------------
 // Goal: determine if a single nodetype or global activetype is semantic or social

twmain/sigmaUtils.js

@@ -565,6 +565,13 @@ var SigmaUtils = function () {
           else {
               if ((TW.conf.fa2Enabled || args.manual)
                   && TW.partialGraph.graph.nNodes() >= TW.conf.minNodesForAutoFA2) {
+                setTimeout(function(){
+                  // NB in here scope: 'this' is the window
+                  if (TW.partialGraph.isForceAtlas2Running())
+                    sigma_utils.ourStopFA2()
+                },
+                args.duration)
+
                 // hide edges during work for smaller cpu load
                 if (TW.partialGraph.settings('drawEdges')) {
                   this.toggleEdges(false)
@@ -578,13 +585,6 @@ var SigmaUtils = function () {
                 var btn = document.querySelector('#layoutButton')
                 btn.insertBefore(icon, btn.children[0])
 
-                setTimeout(function(){
-                  // NB in here scope: 'this' is the window
-                  if (TW.partialGraph.isForceAtlas2Running())
-                    sigma_utils.ourStopFA2()
-                },
-                args.duration)
-
                 return;
               }
 
@@ -1029,6 +1029,23 @@ function clusterColoring(daclass) {
 }
 
 
+// for labelThreshold:
+// factor to reduce speed of growth of the amount of labels when size goes up
+// /!\ important params to avoid having unreadable mess of labels or none at all
+function getSizeFactor(val) {
+  let nActive = getNActive()
+  let sliderFactor
+  let adjustmentFactor = TW.conf.sigmaJsDrawingProperties.labelThreshold
+  if (nActive == 1) {
+    let activeId = TW.catDict[getActivetypesNames()[0]]
+    sliderFactor = TW.gui.sizeRatios[activeId]
+  }
+  else {
+    sliderFactor = Math.min.apply(null, TW.gui.sizeRatios)
+  }
+  return adjustmentFactor * (sliderFactor * 1.15)
+}
+
 // mobile versions should get lighter settings
 function mobileAdaptConf() {