factorized and enhanced layout launching

gathered all conditional FA2 into one function using the switch itself as flag + added wait overlays on layout icons while they're running

libs/css2/selection-panels.css

@@ -219,6 +219,10 @@
     margin: 0 auto;
 }
 
+.zoombarbuttons {
+  position:relative;  /* b/c they can contain absolute wait icon */
+}
+
 .zoombarbuttons:hover {
     opacity: .7;
 }

settings_explorerjs.js

@@ -10,7 +10,7 @@ var TW = {}
     TW.minimap=false;
     TW.getAdditionalInfo = true;// True: Activate TopPapers feature.
     // TW.mainfile = "data/mysuperproject/my.gexf"
-    TW.mainfile = "data/politoscope/ProgrammeDesCandidats.sans_outliers.gexf"
+    TW.mainfile = "data/politoscope/ProgrammeDesCandidats.enrichi.gexf"
     TW.APINAME = "http://127.0.0.1:5000/twitter_search";
     TW.tagcloud_limit = 50;
     TW.bridge={};
@@ -77,21 +77,21 @@ var desirableScholarSize=6; //Remember that all scholars have the same size!
  *Three states:
  *  - true: fa2 auto-running at start
  *  - false: fa2 stopped at start, button exists
- *  - "off": button doesn't exist, fa2 stopped forever // £TODO restore case
- **/ var fa2enabled=false;//"off";
-var stopcriteria = false;
-var fa2milliseconds=10000;  // for initial auto-run if fa2enabled and any
-                            // subsequent auto-runs if graph modified
+ *  - "off": button doesn't exist, fa2 stopped forever
+ **/  TW.fa2enabled=true;//"off";
+
+TW.minNodesForAutoFA2 = 5
+
 
-// deprecated ?
-var seed=999999999;//defaultseed
-var semanticConverged=false;
 
 
 // ============ < / DEVELOPER OPTIONS > ============
 TW.branding = 'test bipart'
+TW.libspath = 'static/newtinalibs'
+
 TW.nodeClusAtt = "modularity_class"
 
+
 TW.filterSliders = true
 
 TW.histogramStartThreshold = 10 ;
@@ -132,7 +132,6 @@ TW.debugFlags = {
 // triggers overriding sigma.canvas renderers: nodes.def, labels.def, edges.def
 TW.ourRendering = true ;
 
-
 // ============ < / DEVELOPER OPTIONS > ============
 
 
@@ -240,6 +239,12 @@ TW.maxDiscreteValues = 40  // max discrete levels in facet legend (aka bins)
 //      if continuous or many possible values (>30) (clustersBy, colorsRelByBins)
 //         => TW.Clusters[nodeType][clusterType].ranges.[interval] = list of ids in the interval
 
+
+TW.fa2milliseconds=5000;   // for initial auto-run if fa2enabled and any
+                           // subsequent auto-runs if graph modified
+
+
+
 var nodeslength=0;
 
 var labels = [];

tinawebJS/Tinaweb.js

@@ -928,42 +928,28 @@ TinaWebJS = function ( sigmacanvas ) {
 
 
 
-        var fa2HadEdges = false
         $("#layoutButton").click(function () {
-
-          if(TW.partialGraph.isForceAtlas2Running()) {
-
-              partialGraph.stopForceAtlas2();
-
-              // restore edges if needed
-              if (fa2HadEdges) {
-                sigma_utils.toggleEdges(true)
-                fa2HadEdges = false
-              }
-              return;
-          }
-          else {
-              // hide edges during work for smaller cpu load
-              if (TW.partialGraph.settings('drawEdges')) {
-                sigma_utils.toggleEdges(false)
-                fa2HadEdges = true
-              }
-
-              partialGraph.startForceAtlas2();
-
-              return;
-          }
+          sigma_utils.smartForceAtlas()
         });
 
         $("#noverlapButton").click(function () {
+
           if(! TW.partialGraph.isNoverlapRunning()) {
               // show waiting cursor on page and button
               theHtml.classList.add('waiting');
-              $("#noverlapButton").css('cursor', 'wait')
+              this.style.cursor = 'wait'
+              // and waiting icon
+              this.insertBefore(createWaitIcon('noverlapwait'), this.children[0])
+
               var listener = TW.partialGraph.startNoverlap();
+              var noverButton = this
               listener.bind('stop', function(event) {
-                theHtml.classList.remove('waiting');
-                $("#noverlapButton").css('cursor', 'auto')
+                var stillRunning = document.getElementById('noverlapwait')
+                if (stillRunning) {
+                  theHtml.classList.remove('waiting');
+                  noverButton.style.cursor = 'auto'
+                  stillRunning.remove()
+                }
               });
 
               return;
@@ -971,7 +957,7 @@ TinaWebJS = function ( sigmacanvas ) {
         });
 
         $("#edges-switch").click(function () {
-            sigma_utils.toggleEdges()
+            sigma_utils.toggleEdges(this.checked)
         });
 
 

tinawebJS/enviroment.js

@@ -287,11 +287,7 @@ function changeType() {
     reInitFa2({
       useSoftMethod: false,
       callback: function() {
-        TW.partialGraph.startForceAtlas2();
-        setTimeout(function(){
-            TW.partialGraph.stopForceAtlas2();
-          },
-        fa2milliseconds ? parseInt(fa2milliseconds/2) : 2000)
+        sigma_utils.smartForceAtlas()
       }
     })
 }
@@ -444,11 +440,7 @@ function changeLevel() {
 
           // when going local, it's nice to see the selected nodes rearrange
           if (!futurelevel) {
-            TW.partialGraph.startForceAtlas2();
-            setTimeout(function(){
-                TW.partialGraph.stopForceAtlas2();
-              },
-            fa2milliseconds)
+            sigma_utils.smartForceAtlas()
           }
         }
       })
@@ -700,15 +692,7 @@ function EdgeWeightFilter(sliderDivID , typestr ,  criteria) {
                   // console.log("\t\t[ Starting FA2 ]")
                   // [ Starting FA2 ]
                   setTimeout(function() {
-                    if (!TW.partialGraph.isForceAtlas2Running()
-                        && TW.partialGraph.graph.nNodes() > 8) {
-                          TW.partialGraph.startForceAtlas2();
-                          setTimeout(function(){
-                            if (TW.partialGraph.isForceAtlas2Running())
-                              TW.partialGraph.stopForceAtlas2();
-                            },
-                            2000) // shorter FA2 sufficient
-                    }
+                    sigma_utils.smartForceAtlas(2000) // shorter FA2 sufficient
                   }, 10)
                 // [ / Starting FA2 ]
 
@@ -827,15 +811,7 @@ function NodeWeightFilter( sliderDivID , tgtNodeType ,  criteria) {
 
                     // [ Starting FA2 ]
                     setTimeout(function() {
-                      if (!TW.partialGraph.isForceAtlas2Running()
-                          && TW.partialGraph.graph.nNodes() > 8) {
-                            TW.partialGraph.startForceAtlas2();
-                            setTimeout(function(){
-                              if (TW.partialGraph.isForceAtlas2Running())
-                                TW.partialGraph.stopForceAtlas2();
-                              },
-                              2000) // shorter FA2 sufficient
-                      }
+                      sigma_utils.smartForceAtlas(2000) // shorter FA2 sufficient
                     }, 10)
                   // [ / Starting FA2 ]
 

tinawebJS/main.js

@@ -293,8 +293,8 @@ else {
               TW.gexfDict[path+"/"+aGexf] = aGexf
               // ex : data/AXA/RiskV2PageRank1000.gexf:"RiskV2PageRank1000.gexf"
 
-              var selected = (the_file==(path+"/"+aGexf))?"selected":""
-              files_selector += '<option '+selected+'>'+gexfBasename+'</option>'
+              let cssFileSelected = (the_file==(path+"/"+aGexf))?"selected":""
+              files_selector += '<option '+cssFileSelected+'>'+gexfBasename+'</option>'
           }
           // console.log( files_selector )
           break;
@@ -698,17 +698,10 @@ else {
     twjs_.initListeners(TW.categories , TW.partialGraph);
 
     // mostly json data are extracts provided by DB apis => no positions
-    if (inFormat == "json")  fa2enabled = true
-
-    // run fa2 if settings_explorerjs.fa2enabled == true
-    if (fa2enabled) {
-      TW.partialGraph.startForceAtlas2();
-      setTimeout(function(){
-          TW.partialGraph.stopForceAtlas2();
-      },
-      parseInt(fa2milliseconds) || 5000
-      );
-    }
+    if (inFormat == "json")  TW.fa2enabled = true
+
+    // will run fa2 if enough nodes and TW.fa2enabled == true
+    sigma_utils.smartForceAtlas()
 
 
     // adapt the enviroment to monopartite vs. bipartite cases

tinawebJS/methods.js

@@ -571,7 +571,7 @@ function graphTagCloudElem(nodes) {
     }
 
     // Nodes Selection now:
-    // £TODO fix low-level selectionlogic duplicate with MultipleSelection2 function 2/2
+    // £TODO fix  low-level selectionlogic duplicate with MultipleSelection2 function 2/2
     if(ndsids.length>0) {
         var SelInst = new SelectionEngine();
         SelInst.MultipleSelection2({
@@ -602,9 +602,11 @@ function graphTagCloudElem(nodes) {
         oppos: []
     })
 
+    TW.partialGraph.camera.goTo({x:0, y:0, ratio:0.9, angle: 0})
     TW.partialGraph.refresh({skipIndexation:true});
 
-    // fa2enabled=true; TW.partialGraph.zoomTo(TW.partialGraph._core.width / 2, TW.partialGraph._core.height / 2, 0.8).draw().startForceAtlas2();
+    sigma_utils.smartForceAtlas(TW.fa2milliseconds/2)
+
     //
     // ChangeGraphAppearanceByAtt(true)
 }

tinawebJS/sigmaUtils.js

@@ -482,6 +482,7 @@ SigmaUtils = function () {
 
       // ================ /alternative rendering =====================
 
+
       this.toggleEdges = function(optionalTargetFlag) {
         var targetFlag
         if (typeof optionalTargetFlag == "undefined") {
@@ -496,7 +497,79 @@ SigmaUtils = function () {
         TW.partialGraph.render()
       }
 
+
+
+      this.ourStopFA2 = function() {
+        document.getElementById('layoutwait').remove()
+        TW.partialGraph.stopForceAtlas2();
+
+        // restore edges if needed
+        if (document.getElementById('edges-switch').checked) {
+          this.toggleEdges(true)
+        }
+      }
+
+      // factorized: forceAtlas2 supervisor call with:
+      //  - togglability (ie. turns FA2 off if called again)
+      //  - custom expiration duration
+      //  - conditions on graph size (£TODO use these to slowDown small graphs)
+      //  - edges management (turns them off and restores them after finished)
+      this.smartForceAtlas = function (fa2duration) {
+
+        if (!fa2duration) {
+          fa2duration = parseInt(TW.fa2milliseconds) || 4000
+        }
+
+        // togglability case
+        if(TW.partialGraph.isForceAtlas2Running()) {
+            this.ourStopFA2()
+            return;
+        }
+        // normal case
+        else {
+            if ( TW.fa2enabled && TW.partialGraph.graph.nNodes() >= TW.minNodesForAutoFA2) {
+              // hide edges during work for smaller cpu load
+              if (TW.partialGraph.settings('drawEdges')) {
+                this.toggleEdges(false)
+              }
+
+              TW.partialGraph.startForceAtlas2();
+
+              var icon = createWaitIcon('layoutwait')
+              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()
+              },
+              fa2duration)
+
+              return;
+            }
+
+        }
+      }
+
 } // /SigmaUtils object
+
+
+function createWaitIcon(idname, width) {
+  let icon = document.createElement('img')
+
+  icon.src = TW.libspath + '/img2/loader.gif'
+
+  icon.style.position = 'absolute'
+  icon.style.left = '0'
+  icon.style.width = width || '100%'
+
+  if (idname) {
+    icon.id = idname
+  }
+
+  return icon
+}
 //
 // //for socialgraph
 // function showMeSomeLabels(N){