more settings harmonization (presentation, sourcefile, sigma drawing params)

settings_explorerjs.js

@@ -13,7 +13,6 @@ TW.conf = (function(TW){
   // TINA POSSIBLE DATA SOURCES
   // ==========================
 
-
   // Graph data source
   // -----------------
   // the graph input depends on TWConf.sourcemode (or manual url arg 'sourcemode')
@@ -42,18 +41,16 @@ TW.conf = (function(TW){
   // TWConf.relatedDocsType
 
 
-  // ===========
-  // DATA FACETS
-  // ===========
-
+  // =======================
+  // DATA FACETS AND LEGENDS
+  // =======================
+  // to process node attributes values from data
+  //    => colors   (continuous numeric attributes)
+  //    => clusters (discrete numeric or str attributes),
 
   // create facets ?
   TWConf.scanClusters = true
 
-  // to handle node attributes from data
-  //    => clusters (discrete numeric or str vars),
-  //    => colors   (continuous numeric vars)
-
   // for continuous attrvalues/colors (cf. clustersBy), how many levels in legend?
   TWConf.legendsBins = 7 ;
 
@@ -67,7 +64,7 @@ TW.conf = (function(TW){
     'growth_rate': 12
   }
 
-  // default clustering (used to show as initial color)
+  // default clustering attribute (<---> used for initial node colors)
   TWConf.nodeClusAtt = "modularity_class"
 
 
@@ -121,7 +118,7 @@ TW.conf = (function(TW){
 
   // if fa2Available, the auto-run config:
 
-    TWConf.fa2Enabled= false;       // fa2 auto-run at start and after graph modified ?
+    TWConf.fa2Enabled= true;        // fa2 auto-run at start and after graph modified ?
     TWConf.fa2Milliseconds=5000;    // duration of auto-run
     TWConf.minNodesForAutoFA2 = 5   // graph size threshold to auto-run
 
@@ -133,86 +130,81 @@ TW.conf = (function(TW){
   TWConf.strSearchBar = "Select topics";
 
 
-  // =======================
-  // TINA RENDERING SETTINGS
-  // =======================
-  TWConf.overSampling = true    // costly hi-def rendering (true => pixelRatio x 2)
-
-  // relative sizes (iff graph display with both nodetypes)
-  TWConf.sizeMult = [];
-  TWConf.sizeMult[0] = 1.5;    // ie for node type 0
-  TWConf.sizeMult[1] = 1.0;    // ie for node type 1
-
-  // circle selection cursor
-  TWConf.circleSizeMin = 0;
-  TWConf.circleSizeMax = 100;
-
-  // size range for neighbor nodes "tagcloud"
-  TWConf.tagcloudFontsizeMin = 12;
-  TWConf.tagcloudFontsizeMax = 24;
-
-  TWConf.tagcloudSameLimit = 50   // display at most how many neighbors of the same type
-  TWConf.tagcloudOpposLimit = 10    // display at most how many neighbors of the opposite type
-
+  // ===================
+  // RENDERING SETTINGS
+  // ===================
+  TWConf.twRendering = true ;     // false: use sigma "stock" rendering
+                                  // true:  use our rendering customizations
+                                  //        (nodes with borders,
+                                  //         edges with curves,
+                                  //         better labels, etc)
 
-  TWConf.defaultNodeColor = "rgb(40,40,40)"
+  TWConf.overSampling = true      // hi-def rendering (true => pixelRatio x 2)
 
-  // selected/deselected rendering
-  TWConf.nodesGreyBorderColor = "rgba(100, 100, 100, 0.5)";  // not selected nodes
-
-
-  TWConf.selectedColor = "default"  // "node" for a background like the node's color,
-                                    // "default" for note-like yellow
+  // sigma rendering settings
+  // ------------------------
+  TWConf.sigmaJsDrawingProperties = {
+      // nodes
+      defaultNodeColor: "#333",
+      twNodeRendBorderSize: 1,           // node borders (only iff ourRendering)
+      twNodeRendBorderColor: "#eee",
+
+      // edges
+      minEdgeSize: 2,                    // in fact used in tina as edge size
+      defaultEdgeType: 'curve',          // 'curve' or 'line' (curve only iff ourRendering)
+      twEdgeDefaultOpacity: 0.4,         // initial opacity added to src/tgt colors
+
+      // labels
+      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
+                                         // (old tina: showLabelsIfZoom)
 
-  TWConf.edgeDefaultOpacity = 0.4                      // opacity when true_color
-  TWConf.edgeGreyColor = "rgba(150, 150, 150, 0.5)";   // not selected edges
+      // hovered nodes
+      defaultHoverLabelBGColor: '#fff',
+      defaultHoverLabelColor: '#000',
+      borderSize: 2.5,                   // for ex, bigger border when hover
+      nodeBorderColor: "node",           // choices: 'default' color vs. node color
+      defaultNodeBorderColor: "black",   // <- if nodeBorderColor = 'default'
 
 
-  // ========================
-  // SIGMA RENDERING SETTINGS
-  // ========================
-  // triggers overriding sigma.canvas renderers: nodes.def, labels.def, edges.def
-  TWConf.ourRendering = true ;
+      // selected nodes <=> special label
+      twSelectedColor: "node",     // "node" for a label bg like the node color,
+                                   // "default" for note-like yellow
 
+      // not selected <=> grey
+      twNodesGreyOpacity: .35,                       // smaller value: more grey
+      twBorderGreyColor: "rgba(100, 100, 100, 0.5)",
+      twEdgeGreyColor: "rgba(150, 150, 150, 0.5)",
+  };
+  // NB: sigmaJsDrawingProperties are available as 'settings' in all renderers
+  // cf. https://github.com/jacomyal/sigma.js/wiki/Settings#renderers-settings
 
-  TWConf.sigmaJsDrawingProperties = {
-      defaultLabelColor: 'black',
-      defaultLabelSize: 30, // in fact usually overridden by node data...
-      labelSizeRatio: 1,   // ...but this ratio allows truly adjusting the sizes
 
-      labelThreshold: 5,   // <- replaces deprecated showLabelsIfZoom
+  // tina environment rendering settings
+  // -----------------------------------
+  // mouse captor zoom limits
+  TWConf.zoomMin = .015625         // for zoom IN   (ex: 1/64 to allow zoom x64)
+  TWConf.zoomMax = 2               // for zoom OUT
 
-      defaultEdgeType: 'curve',  // 'curve' or 'line'
+  // circle selection cursor
+  TWConf.circleSizeMin = 0;
+  TWConf.circleSizeMax = 100;
 
-      defaultBorderView: "always",
+  // size range for neighbor nodes "tagcloud"
+  TWConf.tagcloudFontsizeMin = 12;
+  TWConf.tagcloudFontsizeMax = 24;
 
-      // new sigma.js only for hover + new settingnames
-      defaultHoverLabelBGColor: '#fff',
-      defaultHoverLabelColor: '#000',
-      borderSize: 2.5, // (only for hovered nodes)
-      defaultNodeBorderColor: "black",
-      nodeBorderColor: "default",  // vs. node
-
-      // for custom TW node renderer with borders
-      twNodeRendBorderSize: 1,   // (for all normal nodes, iff TWConf.nodeRendBorder)
-      twNodeRendBorderColor: "#222",
-      // twNodeRendBorderColor: "#eee",
-
-      font: "Droid Sans",
-      // font: "Crete Round",
-      // font: "Ubuntu Condensed",
-      fontStyle: "bold",
-  };
+  TWConf.tagcloudSameLimit = 50     // max displayed neighbors of the same type
+  TWConf.tagcloudOpposLimit = 10    // max displayed neighbors of the opposite type
 
-  TWConf.sigmaJsGraphProperties = {
-      minEdgeSize: 3,
-      // maxEdgeSize: 10
-  };
+  // relative sizes (iff ChangeType == both nodetypes)
+  TWConf.sizeMult = [];
+  TWConf.sizeMult[0] = 1.5;    // ie for node type 0
+  TWConf.sizeMult[1] = 1.0;    // ie for node type 1
 
-  TWConf.sigmaJsMouseProperties = {
-      minRatio: .03125,  // 1/32  pour permettre zoom x32
-      maxRatio: 2
-  };
 
 
   // ===========

tinawebJS/Tinaweb.js

@@ -873,7 +873,7 @@ TinaWebJS = function ( sigmacanvas ) {
 
     // to init local, instance-related listeners (need to run at new sigma instance)
     // args: @partialGraph = a sigma instance
-    this.SigmaListeners = function(partialGraph, initialActivetypes) {
+    this.initSigmaListeners = function(partialGraph, initialActivetypes) {
 
       var SelInst = new SelectionEngine();
 
@@ -1009,8 +1009,8 @@ TinaWebJS = function ( sigmacanvas ) {
 
           // new sigma.js current zoom ratio
           value: partialGraph.camera.ratio,
-          min: 1 / TW.conf.sigmaJsMouseProperties.maxRatio,   // ex x.5
-          max: 1 / TW.conf.sigmaJsMouseProperties.minRatio,   // ex x32
+          min: 1 / TW.conf.zoomMax,   // ex x.5
+          max: 1 / TW.conf.zoomMin,   // ex x32
           // range: true,
           step: .2,
           value: 1,
@@ -1098,6 +1098,16 @@ TinaWebJS = function ( sigmacanvas ) {
     }
 
 
+    // clears the graph instance
+    this.clearSigma = function() {
+      if (TW.partialGraph && TW.partialGraph.graph) {
+        TW.partialGraph.graph.clear()
+        TW.partialGraph.refresh()
+        selections = []
+      }
+    }
+
+
     this.initialActivetypes = function( categories ) {
         var firstActivetypes = []
         for(var i=0; i<categories.length ; i++) {

tinawebJS/enviroment.js

@@ -52,11 +52,7 @@ function createFilechooserEl () {
         }
         else {
           // we might have a previous graph opened
-          if (TW.partialGraph && TW.partialGraph.graph) {
-            TW.partialGraph.graph.clear()
-            TW.partialGraph.refresh()
-            selections = []
-          }
+          TW.instance.clearSigma()
 
           // run
           if (theFormat == 'json')
@@ -978,7 +974,11 @@ function jsActionOnGexfSelector(gexfBasename){
       if (pathcomponents[i] != 'explorerjs.html')
         serverPrefix += '/'+pathcomponents[i]
     }
-    var newDataRes = AjaxSync({ URL: window.location.origin+serverPrefix+'/'+gexfPath });
+    var newDataRes = AjaxSync({ URL: window.location.origin+serverPrefix+gexfPath });
+
+    // remove any previous instance
+    TW.instance.clearSigma()
+
     mainStartGraph(newDataRes["format"], newDataRes["data"], TW.instance)
     writeLabel(gexfBasename)
 }

tinawebJS/main.js

@@ -104,11 +104,13 @@ if (window.location.protocol == 'file:'
   let inputDiv = document.getElementById('localInput')
   inputDiv.style.display = 'block'
 
-  var remark = document.createElement("p")
-  remark.innerHTML = `You're running project explorer as a local html file (no syncing).`
-  remark.classList.add('comment')
-  remark.classList.add('centered')
-  inputDiv.appendChild(remark)
+  if (window.location.protocol == 'file:') {
+    var remark = document.createElement("p")
+    remark.innerHTML = `You're running project explorer as a local html file (no syncing).`
+    remark.classList.add('comment')
+    remark.classList.add('centered')
+    inputDiv.appendChild(remark)
+  }
 
   // user can open a gexf or json from his fs
   var graphFileInput = createFilechooserEl()
@@ -263,11 +265,11 @@ function syncRemoteGraphData () {
 
     // menufile case : a list of source files in ./db.json
     if (sourcemode == 'servermenu') {
-        console.log("no @file arg nor TW.mainfile: trying FILEMENU TW.conf.sourceMenu")
+        console.log("reading from FILEMENU TW.conf.sourceMenu")
         // we'll first retrieve the menu of available files in db.json, then get the real data in a second ajax
         var infofile = TW.conf.sourceMenu
 
-        if (TW.conf.debug.logFetchers)  console.info(`attempting to load infofile ${infofile}`)
+        if (TW.conf.debug.logFetchers)  console.info(`attempting to load filemenu ${infofile}`)
         var preRES = AjaxSync({ URL: infofile, DT:"json" });
 
         if (preRES['OK'] && preRES.data) {
@@ -323,7 +325,6 @@ function syncRemoteGraphData () {
                 files_selector += '<option '+cssFileSelected+'>'+gexfBasename+'</option>'
             }
             // console.log( files_selector )
-            break;
         }
         files_selector += "</select>"
         console.log("files_selector HTML", files_selector)
@@ -336,7 +337,7 @@ function syncRemoteGraphData () {
     }
     // direct file fallback case: specified file in settings_explorer
     else if (TW.conf.sourceFile && linkCheck(TW.conf.sourceFile)) {
-      console.log("no @file arg: trying TW.mainfile from settings")
+      console.log("no @file arg: trying TW.conf.sourceFile from settings")
       the_file = TW.conf.sourceFile;
     }
     else {
@@ -495,15 +496,13 @@ function mainStartGraph(inFormat, inData, twInstance) {
       // our final sigma params (cf github.com/jacomyal/sigma.js/wiki/Settings)
       TW.customSettings = Object.assign(
 
-          // 1) default values
+          // 1) optimal low-level values (was: "developer settings")
           {
               drawEdges: true,
               drawNodes: true,
               drawLabels: true,
 
               labelSize: "proportional",
-              // font: "Ubuntu Condensed",   // overridden by settings_explorer.js
-              // labelColor: "node",
 
               // nodesPowRatio: .3,
               batchEdgesDrawing: false,
@@ -520,13 +519,14 @@ function mainStartGraph(inFormat, inData, twInstance) {
               touchEnabled: false,
 
               animationsTime:150,
-              mouseZoomDuration:250
+              mouseZoomDuration:250,
+
+              zoomMin: TW.conf.zoomMin,
+              zoomMax: TW.conf.zoomMax
           },
 
-          // 2) settings_explorer values
+          // 2) user-configurable values (cf. settings_explorer)
           TW.conf.sigmaJsDrawingProperties,
-          TW.conf.sigmaJsGraphProperties,
-          TW.conf.sigmaJsMouseProperties
       )
 
 
@@ -574,7 +574,7 @@ function mainStartGraph(inFormat, inData, twInstance) {
       // (new graph => new categories combinations => new array)
 
       // now that we have a sigma instance, let's bind our click handlers to it
-      TW.instance.SigmaListeners(TW.partialGraph, initialActivetypes)
+      TW.instance.initSigmaListeners(TW.partialGraph, initialActivetypes)
 
       // [ / Poblating the Sigma-Graph ]
 

tinawebJS/methods.js

@@ -735,15 +735,15 @@ function prepareNodesRenderingProperties(nodesDict) {
       n.color = `rgb(${rgbStr})`
     }
     else {
-      n.color = TW.conf.defaultNodeColor
-      rgbStr = TW.conf.defaultNodeColor.split(',').splice(0, 3).join(',');
+      n.color = TW.conf.sigmaJsDrawingProperties.defaultNodeColor
+      rgbStr = n.color.split(',').splice(0, 3).join(',');
     }
 
     n.customAttrs = {
       grey: false,
       highlight: false,
       true_color : n.color,
-      defgrey_color : "rgba("+rgbStr+",.35)"
+      defgrey_color : "rgba("+rgbStr+","+TW.conf.sigmaJsDrawingProperties.twNodesGreyOpacity+")"
     }
 
     // POSS n.type: distinguish rendtype and twtype
@@ -770,7 +770,7 @@ function prepareEdgesRenderingProperties(edgesDict, nodesDict) {
 
     var rgbStr = sigmaTools.edgeRGB(nodesDict[e.source].color, nodesDict[e.target].color)
 
-    e.color = "rgba("+rgbStr+","+TW.conf.edgeDefaultOpacity+")"
+    e.color = "rgba("+rgbStr+","+TW.conf.sigmaJsDrawingProperties.twEdgeDefaultOpacity+")"
     e.customAttrs = {
       grey: false,
       activeEdge : false,

tinawebJS/sigmaUtils.js

@@ -110,7 +110,7 @@ SigmaUtils = function () {
 
         context.beginPath();
 
-        if (TW.conf.nodesGreyBorderColor == "node")
+        if (settings('twSelectedColor') == "node")
           context.fillStyle = TW.handpickedcolor? node.customAttrs.alt_color : node.color; // node's
         else
           context.fillStyle = "#F7E521"; // yellow
@@ -203,11 +203,11 @@ SigmaUtils = function () {
         // console.debug(`t=${tstamp()} curve render activeedge: ${edgeInfos(edge)})`)
       }
       else if (edge.customAttrs.grey) {
-        color = TW.conf.edgeGreyColor
+        color = settings('twEdgeGreyColor')
         size = 1
       }
       else {
-        color = "rgba( "+baseRGB+" , "+TW.conf.edgeDefaultOpacity+")";
+        color = "rgba( "+baseRGB+" , "+TW.conf.sigmaJsDrawingProperties.twEdgeDefaultOpacity+")";
         size = defSize
       }
 
@@ -255,11 +255,11 @@ SigmaUtils = function () {
         color = 'rgba('+rgb.join()+',.7)'
       }
       else if (edge.customAttrs.grey) {
-        color = TW.conf.edgeGreyColor
+        color = settings('twEdgeGreyColor')
         size = 1
       }
       else {
-        // color = "rgba( "+rgb.join()+" , "+TW.conf.edgeDefaultOpacity+")";
+        // color = "rgba( "+rgb.join()+" , "+TW.conf.sigmaJsDrawingProperties.twEdgeDefaultOpacity+")";
         color = edge.customAttrs.true_color
         size = defSize
       }
@@ -293,7 +293,7 @@ SigmaUtils = function () {
 
         // mode variants
         if (TW.selectionActive) {
-          // passive nodes should blend in the grey of TW.conf.edgeGreyColor
+          // passive nodes should blend in the grey of twEdgeGreyColor
           // cf settings_explorerjs, defgrey_color and greyEverything()
           if (node.customAttrs.grey) {
             if (! TW.handpickedcolor) {
@@ -309,7 +309,7 @@ SigmaUtils = function () {
               nodeColor = node.customAttrs.altgrey_color
             }
             // nice looking uniform grey
-            borderColor = TW.conf.nodesGreyBorderColor
+            borderColor = TW.conf.sigmaJsDrawingProperties.twBorderGreyColor
           }
           // neighbor nodes <=> (highlight flag AND selectionActive)
           else if(node.customAttrs.highlight) {

tinawebJS/sigma_tools.js

@@ -45,7 +45,7 @@ sigmaTools = (function(stools) {
         var rawEdge = rawGexfEdges[i]
 
         var rgbStr = sigmaTools.edgeRGB(newNodes[rawEdge.source].color, newNodes[rawEdge.target].color)
-        var leColor = "rgba("+rgbStr+","+TW.conf.edgeDefaultOpacity+")"
+        var leColor = "rgba("+rgbStr+","+TW.conf.sigmaJsDrawingProperties.twEdgeDefaultOpacity+")"
 
         var newEid = rawEdge.source+";"+rawEdge.target;
         var newEdge = {