Get Tips Graph: interactive buttons

static/lib/graphExplorer/extras_explorerjs.js

@@ -1004,9 +1004,9 @@ function getTips(){
     param='';
 
     text =
-				"<center><b>Graph Explorer  </b></center>"+
+				"<center><b>Graph Explorer</b></center>"+
         "<ul><b>Basic Interactions:</b>"+
-        "<li>With the mouse selector, click on a node to select/unselect and get its contextual information. Associated terms, neighbours and the first 5 documents will appears in this window.</li>"+
+        "<li>With the <b>mouse selector</b>, click on a node to select/unselect and get its contextual information. Associated terms, neighbours and the first 5 documents will appears in this window.</li>"+
 				"<li>In case of node selection(simple or multiple), the button <button class='delete'>Delete</button> clears all the active selections.</li>"+
 				"<!--<li>You can search a specific term in the search bar: <div id='search_input_group' class='input-group input-group-sm'><span class='input-group-btn'><button id='searchbutton' title='Search the topic in the map' class='btn btn-info' type='button'><span class='glyphicon glyphicon-search'></span></button></span><input id='searchinput' type='text' class='form-control' placeholder='Search' /></li>-->"+
 				"</ul>"+
@@ -1015,18 +1015,18 @@ function getTips(){
         "<li>To fold/unfold the graph (keep only strong links or weak links), use the 'edges filter' slider:</li> <img src='/static/img/slider_edges.png'/>"+
 				"<li>To select a more of less specific area of the graph, use the 'nodes filter' slider :</li><img src='/static/img/slider_nodes.png'/>"+
 				"<li>To change size of label (proportionnal to their strenght) use the 'label size slider':</li> <img src='/static/img/slider_label.png'/>"+
-				"<li>Change cluster coloration using a different algorithm in the options<img class='float: right' src='/static/img/slider_color.png'/></li> "+
-				"<li>Change size of cluster using the options <img class='float: right' src='/static/img/slider_size.png'/></li>"+
+				"<li>Change cluster coloration using a different algorithm in the options <ul><li class='dropdown'><a href='#' class='dropdown-toggle' data-toggle='dropdown'>        <img title='Set Colors' src='/static/img/colors.png' width='22px'><b class='caret'></b></a>  <ul class='dropdown-menu'><li><a href='#' onclick='colorsBy(&quot;clust_default&quot; , &quot;color&quot;)'>By default</a></li><li><a href='#' onclick='clustersBy(&quot;degree&quot; , &quot;color&quot;)'>By degree</a></li><li><a href='#' onclick='colorsBy(&quot;clust_louvain&quot; , &quot;color&quot;)'>By community (louvain)</a></li>  </ul> </li></ul> "+
+				"<li>Change size of cluster using the options <ul id='sizeGraph'><li class='dropdown'><a href='#' class='dropdown-toggle' data-toggle='dropdown'>        <img title='Set Sizes' src='/static/img/NodeSize.png' width='18px'><b class='caret'></b></a>  <ul class='dropdown-menu'><li><a href='#' onclick='clustersBy(&quot;degree&quot; , &quot;size&quot;)'>By degree</a></li><li><a href='#' onclick='clustersBy(&quot;default&quot; , &quot;size&quot;)'>By default</a></li>  </ul> </li></ul>"+
         "</ul>"+
         "<ul><b>Micro/Macro view:</b>"+
-				"<a style='float: right;' class='btn-xs' href='' id='lensButton'></a>"+
+				"<a style='float: right;' class='btn-xs' href='#' id='lensButton'></a>"+
 				"<li>To center the graph, click on the center button. </li>"+
         "<li>To explore the neighborhood of a selection, double click on the selected nodes</li>"+
-				"<a style='float: right;' class='btn-xs' href='' id='zoomPlusButton'></a>"+
-				"<a style='float: right;' class='btn-xs' href='' id='zoomMinusButton'></a>"+
 				"<li>You can explore the graph using the slider and the  macro/mesolevel button.</li>"+
-				"<a style='float:right;' href='#' id='edgesButton'> </a>"+
-        "<li>Recalculate the clusters of your graph using the edge button</li>"+
+				"<a style='float: right;' class='btn-xs' href='#' id='zoomPlusButton'></a>"+
+				"<a style='float: right;' class='btn-xs' href='#' id='zoomMinusButton'></a>"+
+				"<li>Recalculate the clusters of your graph using the edge button</li>"
+				"<a style='float:right;' href='#' id='edgesButton'></a>"+
         "</ul>";
 
     $("#tab-container").hide();