WIP port: tidy up

explorerjs.html

@@ -19,8 +19,7 @@
   <link rel="stylesheet" href="libs/css2/twjs.css">
   <link rel="stylesheet" href="libs/css2/selection-panels.css">
   <link rel="stylesheet" href="libs/jquery-3/jquery-ui-1.12.1/jquery-ui.min.css" media="screen">
-  <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css" media="screen">
-  <!-- <link rel="stylesheet" href="libs/bootstrap-3/css/bootstrap.min.css"> -->
+  <link rel="stylesheet" href="libs/bootstrap-3/css/bootstrap.min.css" media="screen">
   <!-- NB bs2/3 not used for main grid (graph + bars) but inside the bars -->
   <link rel="stylesheet" href="libs/css2/freshslider.css" media="screen">
 
@@ -34,7 +33,10 @@
     <div class="container">
 
       <div class="navbar-header">
-        <a href="#" class="navbar-brand"> <img width="20px" src="libs/img2/home.png">Mapping Risk Research</a>
+        <a href="#" class="navbar-brand"><img style="width:20px;" src="libs/img2/home.png"></a>
+      </div>
+      <div class="navbar-header">
+        <a href="#" class="navbar-brand">Mapping Risk Research</a>
       </div>
 
       <div class="navbar-collapse collapse" id="navbar-main">
@@ -110,7 +112,7 @@
 
             <li>
                <a>
-                <button type="button" id="changelevel" class="btn btn-info btn-sm" disabled>Change Level</button>
+                <button type="button" id="changelevel" class="btn btn-primary btn-sm" disabled>Change Level</button>
                </a>
             </li>
 
@@ -125,8 +127,12 @@
               <div id="slidercat0nodessize" class="settingslider"></div>
             </a></li>
 
-             <li><a>
-               Colors<div class="colorgraph_div"></div>
+             <li class="dropdown">
+               <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
+               Set Colors <img title="Set Colors" src="libs/img2/colors.png" width="20px"><span class="caret"></span>
+               </a>
+                <ul id="colorgraph-menu" class="dropdown-menu">
+                </ul>
              </a></li>
 
             <!--
@@ -203,7 +209,7 @@
                   <span class="input-group-btn">
                     <button id="searchbutton"
                             title="Search the topic in the map"
-                            class="btn btn-info"
+                            class="btn btn-primary"
                             type="button">
                       <span class="glyphicon glyphicon-search">
                       </span>
@@ -233,8 +239,8 @@
                 <input id="checkboxdiv" onclick="alertCheckBox(this);"
                       title="Add next search results to current selection"
                       class="nav btn btn-info"
-                      type="checkbox"></input>
-                <p style="font-size:75%; line-height:90%">Add to selection</p>
+                      type="checkbox">
+                <span style="position: relative; top: 4px; left: 5px;">Add to selection</span>
 
               </li> <!-- /checkbox group -->
             </ul> <!-- /searchnav -->
@@ -370,8 +376,7 @@
       <div class="panel panel-default" id="video_explanation">
         <div class="panel-heading">
           <h4 class="panel-title">
-            <a data-toggle="collapse" data-target="#le_tutorial"
-                                             href="#">
+            <a data-toggle="collapse" data-target="#le_tutorial" href="#le_tutorial">
               <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
               &nbsp;Tutorial video
             </a>
@@ -388,8 +393,7 @@
       <div class="panel panel-default" id="tips_panel">
         <div class="panel-heading">
           <h4 class="panel-title">
-            <a data-toggle="collapse" data-target="#tips"
-                                             href="#">
+            <a data-toggle="collapse" data-target="#tips" href="#tips">
               <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
               &nbsp;Tips
             </a>
@@ -402,8 +406,7 @@
       <div class="panel panel-default" id="credits_panel">
         <div class="panel-heading">
           <h4 class="panel-title">
-            <a data-toggle="collapse" data-target="#credits"
-                                             href="#">
+            <a data-toggle="collapse" data-target="#credits" href="#credits">
               <span class="glyphicon glyphicon-flag" aria-hidden="true"></span>
               &nbsp;Credits
             </a>
@@ -525,15 +528,11 @@
   <script src="libs/freshslider.1.0.js" type="text/javascript" ></script>
   <script src="libs/readmore.js" type="text/javascript"></script>
 
-  <script src="libs/bootstrap/js/bootstrap.min.js"></script>
-
-  <script src="libs/bootstrap/js/bootstrap-modal.js" type="text/javascript"></script>
-  <script src="libs/bootstrap/js/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
-
+  <script src="libs/bootstrap-native/bootstrap-native.min.js"></script>
 
   <script src="tinawebJS/globalUtils.js" type="text/javascript"></script>
 
-  <!-- new sigma 1.2  imports -->
+  <!-- new sigma 1.2 imports -->
   <script src="tinawebJS/sigma_v1.2/sigma.js" type="text/javascript" language="javascript"></script>
   <script src="tinawebJS/sigma_v1.2/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
   <script src="tinawebJS/sigma_v1.2/plugins/sigma.layout.forceAtlas2/worker.js"></script>
@@ -543,7 +542,7 @@
   <script src="tinawebJS/sigma_tools.js"></script>
 
   <!-- classic tinawebJS imports -->
-  <!-- <script type="text/javascript" src="tinawebJS/jLouvain.js"></script> -->
+  <script type="text/javascript" src="tinawebJS/jLouvain.js"></script>
   <!-- <script src="tinawebJS/sigma.v1.customized.js" type="text/javascript" language="javascript"></script> -->
   <!-- <script src="tinawebJS/sigma.forceatlas2.js" type="text/javascript" language="javascript"></script> -->
   <script src="settings_explorerjs.js" type="text/javascript" language="javascript"></script>

extras_explorerjs.js

@@ -447,7 +447,7 @@ function trackMouse(e) {
             ctx.beginPath();
 
             // labels appear
-            var nds = TW.partialGraph.graph.nodes()
+            // var nds = TW.partialGraph.graph.nodes()
 
             // TODO replace by a hover binding (and POSS use quadtree zone)
             //

tinawebJS/methods.js

@@ -174,7 +174,7 @@ function RefreshState(newNOW){
         $("#category-B").show();
     }
 
-    TW.partialGraph.draw();
+    TW.partialGraph.refresh({skipIndexation: true});
 
 }
 

tinawebJS/sigmaUtils.js

@@ -163,14 +163,18 @@ SigmaUtils = function () {
       };
 
 
+      this.toggleEdges = function() {
+        var now_flag = TW.partialGraph.settings('drawEdges')
+        TW.partialGraph.settings('drawEdges', !now_flag)
+        TW.partialGraph.refresh({skipIndexation:true})
+      }
 
-    // ================ /alternative rendering =====================
-
-}
 
 
 
+    // ================ /alternative rendering =====================
 
+}
 
 //for socialgraph
 function showMeSomeLabels(N){
@@ -240,25 +244,26 @@ function getedges(){
 }
 
 function getVisibleEdges() {
-	return TW.partialGraph.graph.edges().filter(function(e) {
+  // new sigma js POSS custom index to avoid loop
+  return TW.partialGraph.graph.edges().filter(function(e) {
                 return !e['hidden'];
-    });
+  });
 }
 
 function getVisibleNodes() {
-    return TW.partialGraph.graph.nodes().filter(function(n) {
-                return !n['hidden'];
-    });
+  // new sigma js POSS custom index to avoid loop
+  return TW.partialGraph.graph.nodes().filter(function(n) {
+              return !n['hidden'];
+  });
 }
 
 
 function getNodesByAtt(att) {
-    return TW.partialGraph._core.graph.nodes.filter(function(n) {
+    return TW.partialGraph.graph.nodes().filter(function(n) {
                 return n['type']==att;
     });
 }
 
-
 // new sigma.js
 function find(lquery){
     var results=[];
@@ -426,28 +431,15 @@ function clustersBy(daclass) {
     //    [ / Scaling node colours(0-255) and sizes(3-5) ]
 
 
-    TW.partialGraph.refresh({skipIndexation: true});
 
 
     //    [ Edge-colour by source-target nodes-colours combination ]
-    var v_edges = getVisibleEdges();
-    for(var e in v_edges) {
-        var e_id = v_edges[e].id;
-        var a = v_edges[e].source.color;
-        var b = v_edges[e].target.color;
-        a = hex2rga(a);
-        b = hex2rga(b);
-        var r = (a[0] + b[0]) >> 1;
-        var g = (a[1] + b[1]) >> 1;
-        var b = (a[2] + b[2]) >> 1;
-        TW.partialGraph.graph.edges(e_id).color = "rgba("+[r,g,b].join(",")+",0.5)";
-    }
+    repaintEdges()
     //    [ / Edge-colour by source-target nodes-colours combination ]
 
     set_ClustersLegend ( null )
 
-    TW.partialGraph.refresh();
-    TW.partialGraph.draw();
+    TW.partialGraph.refresh({skipIndexation: true});
 }
 
 
@@ -456,6 +448,22 @@ var totalsPerBinMin = {
     '-1000000':0, '-75':0, '-50':0, '-25':0, '-10':0, '10':0, '25':0, '50':0, '75':0, '100':0, '125':0, '150':0
   }
 
+// Edge-colour by source-target nodes-colours combination
+function repaintEdges() {
+  var v_edges = getVisibleEdges();
+  for(var e in v_edges) {
+      var e_id = v_edges[e].id;
+      var a = TW.partialGraph.graph.nodes(v_edges[e].source).color;
+      var b = TW.partialGraph.graph.nodes(v_edges[e].target).color;
+      a = hex2rga(a);
+      b = hex2rga(b);
+      var r = (a[0] + b[0]) >> 1;
+      var g = (a[1] + b[1]) >> 1;
+      var b = (a[2] + b[2]) >> 1;
+      TW.partialGraph.graph.edges(e_id).color = "rgba("+[r,g,b].join(",")+",0.5)";
+  }
+}
+
 // rewrite of clustersBy with binning and for attributes that can have negative float values
 function colorsRelByBins(daclass) {
 
@@ -528,29 +536,14 @@ function colorsRelByBins(daclass) {
         }
     }
 
-    TW.partialGraph.refresh();
-    TW.partialGraph.draw();
-
 
     //    [ Edge-colour by source-target nodes-colours combination ]
-    var v_edges = getVisibleEdges();
-    for(var e in v_edges) {
-        var e_id = v_edges[e].id;
-        var a = v_edges[e].source.color;
-        var b = v_edges[e].target.color;
-        a = hex2rga(a);
-        b = hex2rga(b);
-        var r = (a[0] + b[0]) >> 1;
-        var g = (a[1] + b[1]) >> 1;
-        var b = (a[2] + b[2]) >> 1;
-        TW.partialGraph._core.graph.edgesIndex[e_id].color = "rgba("+[r,g,b].join(",")+",0.5)";
-    }
+    repaintEdges()
     //    [ / Edge-colour by source-target nodes-colours combination ]
 
     set_ClustersLegend ( null )
 
-    TW.partialGraph.refresh();
-    TW.partialGraph.draw();
+    TW.partialGraph.refresh({skipIndexation: true});
 }
 
 

tinawebJS/sigma_v1.2/sigma.js

@@ -11431,7 +11431,7 @@
 
         self.dispatchEvent('click', e.data);
 
-        nodes = getNodes(e);
+        nodes = getNodes(e); /// <----------- cf. classic tina "targeted"
         edges = getEdges(e);
 
         if (nodes.length) {