project_conf can't work in localfile mode: better warnings in GUI

00.DOCUMENTATION/A-Introduction/project_config.md

 ## Project Configuration
 
-The directories under `data/` are called project directories and should contain:
+The directories under `data/` on the app's server are called *project directories* and should contain:
   - a graph file (ending in `.gexf` or `.json`)
   - a `project_conf.json` to declare nodetypes and optionally link DBs to each graph file.
   - optionally the said associated database of documents
 
 See for example `data/test/project_conf.json` in the project dir `test`.
 
+NB: Remember that localfile input mode can not open project directories nor project configuration.
+
 ------------------------------------------------------
 #### Minimal Config
 

twmain/extras_explorerjs.js

@@ -184,7 +184,7 @@ function RunLouvain() {
 function SomeEffect( ValueclassCode ) {
     // console.debug("highlighting:", ValueclassCode )
 
-    deselectNodes(TW.SystemState())
+    cancelSelection(false, {"norender": true})
 
     TW.gui.selectionActive = true
 
@@ -903,8 +903,25 @@ function circleLocalSubset(camX0, camY0 , camRay) {
 //   - the dirname of the submodule's files (with a mandatory init.js)
 //   - the css class of all html elements added by the submodule
 function activateModules() {
-    for(var key in TW.conf.ModulesFlags) {
 
+    // special case: can't run if explorer opened locally (loadJS cors pb)
+    // ex: location == "file:///home/romain/tw/DEV_PJXP/explorerjs.html"
+    if (window.location.protocol == "file:") {
+      let localWarning = "localfile mode: Won't sync optional modules"
+
+      // log additional details if present
+      if (TW.conf.ModulesFlags && typeof TW.conf.ModulesFlags == "object") {
+        let requestedModules = Object.keys(
+          TW.conf.ModulesFlags
+        ).filter(function(moduleName){return TW.conf.ModulesFlags[moduleName]})
+        localWarning += " (" + requestedModules.join(",") + " => not loaded)"
+      }
+      console.warn(localWarning)
+    }
+    // normal case (all other modes)
+    // -----------
+    else {
+      for(var key in TW.conf.ModulesFlags) {
         if(TW.conf.ModulesFlags[key]===false) {
             $("."+key).remove() ; // hide elements of module's class
         }
@@ -930,6 +947,7 @@ function activateModules() {
             //                └── "crowdsourcingTerms"+"/suggest.js"
         }
     }
+  }
 }
 
 

twmain/main.js

@@ -63,19 +63,24 @@ if (window.location.protocol == 'file:' || TW.sourcemode == 'localfile') {
   let inputDiv = document.getElementById('localInput')
   inputDiv.style.display = 'block'
 
+  // user can open a gexf or json from his fs
+  var graphFileInput = createFilechooserEl()
+  inputDiv.appendChild(graphFileInput)
+
   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.innerHTML = `<h5>/!\\ Running project explorer as a local html file /!\\<br>(<a id="localfile-warning" data-toggle="popover" data-content="<p>In localfile mode, it is impossible to load some interface elements: <ul><li>modules (histograms, suggestions)</li><li>related docs search engine</li><li>any custom project conf</li></ul></p><p><b>You can still explore your graph and its data attributes with our default settings</b>.</p><p>For more information, check out the <a href=https://github.com/moma/ProjectExplorer/blob/master/README.md#usage-on-a-web-server target=_blank>documentation</a>.</p>">no syncing</a>)</h5>`
     remark.classList.add('comment')
     remark.classList.add('centered')
     inputDiv.appendChild(remark)
     inputDiv.style.height = "auto";
     inputDiv.style.padding = "10px";
-  }
 
-  // user can open a gexf or json from his fs
-  var graphFileInput = createFilechooserEl()
-  inputDiv.appendChild(graphFileInput)
+    new Popover(
+      document.getElementById('localfile-warning'),
+      {"placement": 'left', "delay": 1000}
+    )
+  }
 }
 // traditional cases: remote read from API or prepared server-side file
 else {

twmain/methods.js

@@ -284,7 +284,8 @@ function cancelSelection (fromTagCloud, settings) {
         $("#information").html("");
         $("#searchinput").val("");
         $("#unselectbutton").hide();
-        $("#lefttopbox").hide();
+        $("#lefttopbox").hide();           // <= main selection list cf namesDIV
+        $("#names").html("");              // <= contained by #lefttopbox
     }
 
     // send "eraseNodeSet" event
@@ -336,7 +337,15 @@ function getNActive(someState) {
   return TW.SystemState().activetypes.filter(function(bool){return bool}).length
 }
 
-// changes attributes of nodes and edges to remove active, highlight and activeEdge flags
+
+
+// deselectNodes
+// -------------
+// works only on the sigma part:
+// changes attributes of nodes and edges to remove:
+//  - active flags
+//  - highlight flags
+//  - and activeEdge flags
 
 // NB: "low-level" <=> by design, does NOT change the state, gui nor global flag
 //                     but ought to be called by "scenario" functions that do