esth: selected nodes on the left, gexf basename, updated tips and edge width

explorerjs.html

@@ -36,7 +36,7 @@
 
             <li class="disabled">
               <a>
-                <span class="label label-default label-lg">NETWORK: </span>
+                <span class="label label-default label-lg">MAP: </span>
               </a>
             </li>
 
@@ -220,18 +220,29 @@
 
       <!-- Sidebar left, new css -->
       <div id="leftcolumn" class="newleftbar">
-        
-          <div class="row" class="histogramModule">
-            <!-- filled by query (user search value) to wos api -->
-            <div id="search_histogram_wrapper" class="col-md-12">
-              <div id="search_histogram"></div>
-            </div>
-          </div><!-- /row -->
 
+        <!-- selected nodes -->
+        <div class="row">
+            <button id="unselectbutton"
+                style="color: #900;font-weight: bold;font-size: 70%;text-transform: uppercase;float:right;margin-right:.5em" 
+                onClick='cancelSelection(false);'
+                title="Unselect these terms">
+              <span class="glyphicon glyphicon-remove" alt="X"></span>
+            </button>
+            <div id="names"></div>
+        </div>
+        
+        <!-- histogram of selected nodes -->
+        <div class="row histogramModule">
+          <!-- filled by query (user search value) to wos api -->
+          <div id="search_histogram_wrapper" class="col-md-12">
+            <div id="search_histogram"></div>
+          </div>
+        </div><!-- /row -->
 
-            <!-- class="my-legend" (absolute position bottom) -->
-            <div id="legend_for_clusters"></div>
 
+        <!-- class="my-legend" (absolute position bottom) -->
+        <div id="legend_for_clusters"></div>
       </div>
 
 
@@ -303,21 +314,13 @@
       <!-- Sidebar right, old css -->
       <div id="rightcolumn">
 
-        <button id="unselectbutton"
-            style="color: #900;font-weight: bold;font-size: 70%;text-transform: uppercase;float:right;" 
-            onClick='cancelSelection(false);'>
-              <span class="glyphicon glyphicon-remove" alt="X"></span>
-        </button>
-        
-        <div id="names"></div>
-        
-        
-        <br>
         <div id="tab-container" class='tab-container' style="display: none;">
 
            <ul class='etabs'>
+             <!-- for related elements from the combined graph (eg soc => sem) -->
              <li id="taboppos" class='tab'><a href="#tabs1">Opposite-Neighbors</a></li>
-             <li id="tabneigh" class='tab'><a href="#tabs2">Neighbors</a></li>
+             <!-- for neighbors within this graph -->
+             <li id="tabneigh" class='tab'><a href="#tabs2">Related</a></li>
            </ul>
 
            <div class='panel-container'>

extras_explorerjs.js

@@ -384,21 +384,22 @@ function getTips(){
         "<br>"+
         "Basic Interactions:"+
         "<ul>"+
-        "<li>Click on a node to select/unselect and get its information. In case of multiple selection, the button unselect clears all selections.</li>"+
-        "<li>The switch button switch allows to change the view type.</li>"+
+        "<li>Click on a node to select/unselect and get its information. In case of multiple selection, the button unselect clears all selections,</li>"+
+        "<li> Use your mouse scroll to zoom in and out in the graph.</li>"+
         "</ul>"+
         "<br>"+
         "Graph manipulation:"+
         "<ul>"+
-        "<li>Link and node sizes indicate their strength.</li>"+
-        "<li>To fold/unfold the graph (keep only strong links or weak links), use the 'edges filter' sliders.</li>"+
-        "<li>To select a more of less specific area of the graph, use the 'nodes filter' slider.</li>"+
+        "<li>Node size is proportional to the number of documents with the associated term,</li>"+
+        "<li>Use the node filter to create a subgraph with nodes of a given size range (e.g. display only generic terms),</li>"+
+        "<li>Link strength is proportional to the strenght of terms association,</li>"+
+        "<li>Use the edge filter so create a subgraph with links in a given range (e.g. keep the strongest association).</li>"+
         "</ul>"+
         "<br>"+
-        "Micro/Macro view:"+
+        "Global/local view:"+
         "<ul>"+
-        "<li>To explore the neighborhood of a selection, either double click on the selected nodes, either click on the macro/meso level button. Zoom out in meso view return to macro view.</li>"+
-        "<li>Click on the 'all nodes' tab below to view the full clickable list of nodes.</li>"+
+        "<li>The 'change level' button allows to change between global view and node centered view,</li>"+
+        "<li>To explore the neighborhood of a selection click on the 'change level' button.</li>"+
         "</ul>";
         
     $("#tab-container").hide();

histogramModule/histogram.css

@@ -24,8 +24,8 @@
   margin: 0 ;
   /* overwrite bootstrap's 
    * grid element padding*/
-  padding-right: 1em;
-  padding-left: 0;
+  padding-right: 2em ;
+  margin-left: -.5em ;
 }
 /* graph div */
 #search_histogram{

histogramModule/init.js

@@ -9,6 +9,9 @@
 module_name="histogramModule"
 // ---- INIT main part -------- (listing all things to load)
 
+// our histogram wrapper styles
+loadCSS(module_name+"/histogram.css") ;
+
 // our histogram controller
 loadJS(module_name+"/wosHistogram.js") ;
 

settings_explorerjs.js

@@ -113,7 +113,7 @@ var sigmaJsDrawingProperties = {
 };
 var sigmaJsGraphProperties = {
     minEdgeSize: 2,
-    maxEdgeSize: 2
+    maxEdgeSize: 3
 };
 var sigmaJsMouseProperties = {
     minRatio:0.1,

tinawebJS/main.js

@@ -59,8 +59,9 @@ function getGexfPath(v){
     return gexfpath;
 }
 
-function jsActionOnGexfSelector(gexfLegend , db_json){
+function jsActionOnGexfSelector(gexfBasename , db_json){
     db_json = (db_json)?"&mode=db.json":""
+    gexfLegend = gexfBasename+".gexf"
     if(getGexfPath[gexfLegend])
         window.location=window.location.origin+window.location.pathname+"?file="+encodeURIComponent(getGexfPath(gexfLegend))+db_json;
     else
@@ -116,12 +117,13 @@ if(RES["OK"]) {
             var the_gexfs = the_data[path]["gexfs"]
             pr("\t\tThese are the available  Gexfs:")
             for(var gexf in the_gexfs) {
+                var gexfBasename = gexf.replace(/\.gexf$/, "") // more human-readable in the menu
                 pr("\t\t\t"+gexf+ "   -> table:" +the_gexfs[gexf]["semantic"]["table"] )
                 TW.field[path+"/"+gexf] = the_gexfs[gexf]["semantic"]["table"]
                 TW.gexfDict[path+"/"+gexf] = gexf
 
                 var selected = (the_file==(path+"/"+gexf))?"selected":""
-                files_selector += '<option '+selected+'>'+gexf+'</option>'
+                files_selector += '<option '+selected+'>'+gexfBasename+'</option>'
             }
             console.log( files_selector )
             break;