Commit a0d7fd82 authored by Romain Loth's avatar Romain Loth

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

parent 4594dfcb
......@@ -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'>
......
......@@ -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();
......
......@@ -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{
......
......@@ -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") ;
......
......@@ -113,7 +113,7 @@ var sigmaJsDrawingProperties = {
};
var sigmaJsGraphProperties = {
minEdgeSize: 2,
maxEdgeSize: 2
maxEdgeSize: 3
};
var sigmaJsMouseProperties = {
minRatio:0.1,
......
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment