Commit 3ed6dc08 authored by c24b's avatar c24b

Merge OK

parents 5423efcf 384031f5
......@@ -23,7 +23,7 @@ help = { "#project":{
"<li>Click on 'Chose a file...'</li>"+
"<li>And give a name to your corpus</li>"+
"<li>Click on 'Process this!'</li></ol>"+
"<b><span class='glyphicon glyphicon-hand-right'> If you want to import a corpus from an open database</b> <small>(only supported by PubMed, IsTex or SCOAP3 right now):</small>"+
"<b><span class='glyphicon glyphicon-hand-right'></span> If you want to import a corpus from an open database <small>(only supported by PubMed, IsTex or SCOAP3 right now)</small>:</b>"+
"<ol>"+
"<li>Select No option to the question 'Do you have a file already?'</li>"+
"<li>Enter your query (syntax of the database is still the same)</li>"+
......@@ -42,7 +42,7 @@ help = { "#project":{
"<li>Cliquez sur 'Choisir un fichier...'</li>"+
"<li>Puis donnez un nom à votre corpus</li>"+
"<li>Cliquez sur 'Process this!'</li></ol>"+
"<b><span class='glyphicon glyphicon-hand-right'> </span> Si vous souhaitez importer un corpus directement depuis une base de donnée ouverte</b> <small>(PubMed ou IsTex pour le moment):</small>"+
"<b><span class='glyphicon glyphicon-hand-right'></span> Si vous souhaitez importer un corpus directement depuis une base de donnée ouverte <small>(SCOAP3, PubMed ou IsTex pour le moment)</small>:</b>"+
"<ol>"+
"<li>Sélectionnez l'option No à la question Do you have a file already?</li>"+
"<li>Entrez votre requête (la syntaxe de la base de donnée cible est conservée)</li>"+
......@@ -65,7 +65,7 @@ help = { "#project":{
"content": "En selectionnant l'option correspondante dans le menu déroulant, vous pouvez afficher ici tous les documents, uniquement vos favoris ou encore rechercher les doublons pour les supprimer",
},
"placement":"right",
"position": "after",
"position": "inside",
},
'#titles_time':{
"en":{
......@@ -130,13 +130,7 @@ help = { "#project":{
"placement": "right",
"position": "inside",
},
// '#export_terms':{
// "title": "Exporter",
// "content": "Vous pouvez exporter votre liste de sources <a href=''>format CSV</a>",
// "placement": "right",
// "position": "after",
// "class":"push-right"
// }
"#filter_analytics":{
"en":{"title":"Filter documents",
"content":"You can filter the documents containing a certain type of data (words, authors, etc.) and see the changes in their number over time",
......@@ -171,232 +165,79 @@ help = { "#project":{
"placement": "right",
"position": "inside",
},
// "#filter_graph":{
// "en":{
// "title":"Filter edges and nodes of the graph",
// "content":"Filter the edges and nodes of your graph according to their weight. Use each slippery extremity to remove the weakest elements (left) or the strongest (right)",
// },
// "fr":{
// "title": "Filtrer les arcs et les noeuds du graph",
// "content": "Filtrer les arcs et les noeuds de votre graphe en fonction de leur poids. Utilisez chaque extremité glissante pour retirer les éléments les plus faibles (à gauche) ou les plus forts (à droite)",
// },
// "placement": "right",
// "position":"before",
// },
// "#nodeweight":{
// "en":{
// "title": "Filter Nodes Weight",
// "content": "Node sizes maps (on a log scale) correspond to the number of documents that"+
// "mention its label and its associated terms (if any). Filter node weight using the slider"
//
// },
// "fr":{
// "title": "Filtrer les noeuds par leur poids",
// "content": "La taille des noeuds (sur une echelle logarithmique) correspond au nombre de documents qui mentionnent leur label et leur termes associés (s'ils sont associés). Filtrer les noeuds par leur poids",
// },
// "placement": "right",
// "position": "before",
//
//
// },
// "#edgeweight":{
// "en":{
// "title": "Filter Edges Weight",
// "content": "Edges sizes maps"
//
// },
// "fr":{
// "title": "Filtrer les arcs par leur poids",
// "content": "La taille des arcs ",
// },
// "placement": "right",
// "position": "before",
//
//
// },
// "#labelsize":{
// "en":{
// "title":"Filter Label Size",
// "content":"Filter on label size????",
//
// },
// "fr":{
// "title": "Filtrer par la taille des labels",
// "content": "????",
//
// },
// "placement": "right",
// "position": "before",
// },
// "#colorgraph":{
// "en":{
// "title":"Color cluster",
// "content":"Color clusters using options"
//
// },
// "fr":{
// "title": "Colorer les clusters",
// "content":"Colorer les clusters en utilisant les options"
//
// },
// "placement": "right",
// "position": "before",
// },
// "#sizegraph":{
// "en":{
// "title":"Size graph",
// "content":"Spatialize cluster using size options"
//
// },
// "fr":{
// "title": "Size graph",
// "content":"Spatialize cluster using size options"
//
// },
// "placement": "right",
// "position": "before",
// },
// "#selectorsize":{
// "en":{
// "title":"Selector size",
// "content":"Use the mouse on the graph to select nodes. Change the size of the selector"
//
// },
// "fr":{
// "title":"Selector size",
// "content":"Use the mouse on the graph to select nodes. Change the size of the selector"
//
// },
// "placement": "right",
// "position": "before",
// },
// "#addgraph":{
// "en":{
// "title":"Add results",
// "content":"Add next search results to current selection"
//
// },
// "fr":{
// "title":"Ajouter",
// "content":"Ajouter les resultats de la recherche à la selection active"
//
// },
// "placement": "right",
// "position": "inside",
// },
// "#search":{
// "en":{
// "title":"Search in corpus",
// "content":"Search nodes in graph: results will show the corresponding documents in corpus"
//
// },
// "fr":{
// "title":"rechercher dans le corpus",
// "content":"Rechercher les noeuds du graph:les resultats montreront leur emploi dans le corpus"
//
// },
// "placement": "top",
// "position": "inside",
// },
// "#unfold":{
// "type": "slider-content",
// "en":{
// "title":"Search in corpus",
// "content":"Search nodes in graph: results will show the corresponding documents in corpus"
//
// },
// "fr":{
// "title":"rechercher dans le corpus",
// "content":"Rechercher les noeuds du graph:les resultats montreront leur emploi dans le corpus"
//
// },
// "placement": "top",
// "position": "inside",
// },
// "#edition":{
// "en":{
// "title":"Graph Edition and Manipulation Toolbar",
// "content":"Manipulate and edit your graph using this toolbar"+
// "<ul>"+
// "<li>Node sizes maps (on a log scale) the number of documents that"+
// "mention its label and its associated terms (if any ).</li>"+
// "<li>When according to the chosen proximity measure, the proximity"+
// "between two terms is strong enough, a link is displayed.</li>"+
// "<li>You can filter links by strength using the 'edges filter' slider"+
// "(this will fold/unfold the graph):"+
// "</li>"+
// "<img src='/static/img/slider_edges.png'/>"+
// "<li>You can decide to remove small nodes or large nodes using the"+
// "'nodes filter' slider (e.g. to get only the most popular"+
// "expressions):</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 <label>'Colors'</label> button choosing in the options"+
// "<img src='/static/img/slider_color.png'/>"+
// "<li>Change size of the nodes using <label>'Sizes'</label> button choosing in the options"+
// "<img src='/static/img/slider_size.png'/>"+
// "</ul>",
//
// },
// "fr":{
// "title":"Outil d'édition et de manipulation du graph",
// "content":"Manipuler and éditer le graph grace à cette barre d'outil"+
// "<ul>"+
// "<li>Node sizes maps (on a log scale) the number of documents that"+
// "mention its label and its associated terms (if any ).</li>"+
// "<li>When according to the chosen proximity measure, the proximity"+
// "between two terms is strong enough, a link is displayed.</li>"+
// "<li>You can filter links by strength using the 'edges filter' slider"+
// "(this will fold/unfold the graph):"+
// "</li>"+
// "<img src='/static/img/slider_edges.png'/>"+
// "<li>You can decide to remove small nodes or large nodes using the"+
// "'nodes filter' slider (e.g. to get only the most popular"+
// "expressions):</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 <label>'Colors'</label> button choosing in the options"+
// "<img src='/static/img/slider_color.png'/>"+
// "<li>Change size of the nodes using <label>'Sizes'</label> button choosing in the options"+
// "<img src='/static/img/slider_size.png'/>"+
// "</ul>",
//
// },
// "placement": "right",
// "position": "inside",
// },
// "#exploration":{
// "en":{
// "title":"Graph Exploration Toolbar",
// "content":"<div>Explore your graph using this navigation bar"+
// "<ul>"+
// "<a style='float: right;' class='btn-xs' href='#' id='lensButton'></a>"+
// "<li>To center the graph, click on the center button. </li>"+
// "<a style='float: right;' class='btn-xs' href='#' id='edgesButton'></a>"+
// "<li>To calculate proximity measure and show the edges click on the button</li>"+
// "<li>You can explore the graph using the slider and the macro/mesolevel button."+
// "<div class='inline'><a style='float: right;' class='small btn-xs' href='#' id='zoomPlusButton'></a>"+
// "<a style='float: right;' class='small btn-xs' href='#' id='zoomMinusButton'></a></div>"+
// "</li></ul>",
// },
// "fr":{
// "title":"Outils d'exploration du Graphe",
// "content":"<div>Explorer le graph en utilisant cette barre d'outils"+
// "<ul>"+
// "<a style='float: right;' class='btn-xs' href='#' id='lensButton'></a>"+
// "<li>To center the graph, click on the center button. </li>"+
// "<a style='float: right;' class='btn-xs' href='#' id='edgesButton'></a>"+
// "<li>To calculate proximity measure and show the edges click on the button</li>"+
// "<li>You can explore the graph using the slider and the +/- button."+
// "<div class='inline'><a style='float: right;' class='small btn-xs' href='#' id='zoomPlusButton'></a>"+
// "<a style='float: right;' class='small btn-xs' href='#' id='zoomMinusButton'></a></div>"+
// "</li></ul>",
// },
// "placement": "right",
// "position": "inside",
// },
"#edition":{
"en":{
"title":"Graph Edition and Manipulation Toolbar",
"content":"Manipulate and edit your graph using this toolbar"+
"<ul>"+
"<img src='/static/img/slider_edges.png'/>"+
"<li>You can decide to remove small nodes or large nodes using the"+
"'nodes filter' slider (e.g. to get only the most popular"+
"expressions):</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 <label>'Colors'</label> button choosing in the options"+
"<img src='/static/img/slider_color.png'/>"+
"<li>Change size of the nodes using <label>'Sizes'</label> button choosing in the options"+
"<img src='/static/img/slider_size.png'/>"+
"</ul>",
},
"fr":{
"title":"Outil d'édition et de manipulation du graph",
"content":"Manipuler and éditer le graph grace à cette barre d'outil"+
"<ul>"+
"<img src='/static/img/slider_edges.png'/>"+
"<li>Vous pouvez supprimer en fonction de leur taille en utilisant"+
"la barre glissante 'nodes filter' (e.g. supprimer les petits noeuds pour conserver simplement les expressions les plus populaires):</li>"+
"<img src='/static/img/slider_nodes.png'/>"+
"<li>Pour changer la taille des labels (proportionnel à leur poids) utilisez la barre glissante 'label size slider':</li> "+
"<img src='/static/img/slider_label.png'/>"+
"<li>Changez la coloration des clusters en utilsant le boutton <label>'Colors'</label> et en selectionnant une option de coloration</li>"+
"<img src='/static/img/slider_color.png'/>"+
"<li>Changez la taille des noeuds en utilisant le bouton <label>'Sizes'</label> et en selectionnant une option de calcul"+
"<img src='/static/img/slider_size.png'/>"+
"</ul>",
},
"placement": "bottom",
"position": "inside",
},
"#exploration":{
"en":{
"title":"Graph Exploration Toolbar",
"content":"<div>Explore your graph using this navigation bar"+
"<ul>"+
"<a style='float:right' href='#' id='edgesButton'></a>"+
"<li>To calculate proximity measure and show the edges click on the button</li>"+
"<a style='float: right;' class='btn-xs' href='#' id='lensButton'></a>"+
"<li>To center the graph, click on the center button.</li>"+
"<li>You can explore the graph using the slider and the macro/mesolevel button."+
"<div class='inline'><a style='float: right;' class='small btn-xs' href='#' id='zoomMinusButton'></a>"+
"<a style='float: right;' class='small btn-xs' href='#' id='zoomPlusButton'></a>"+
"</div>"+
"</li></ul>",
},
"fr":{
"title":"Barre d'outil d'exploration",
"content":"<div>Explorez votre graphe en utilisant la barre d'outil"+
"<ul>"+
"<a style='float:right' href='#' id='edgesButton'></a>"+
"<li>Calculez la mesure de proximité des noeuds et affichez les arc en cliquant sur le bouton</li>"+
"<a style='float: right;' class='btn-xs' href='#' id='lensButton'></a>"+
"<li>Centrez le graphe en clickant sur le bouton.</li>"+
"<div style='display:inline-block; float:right'><a class='small btn-xs' href='#' id='zoomPlusButton'></a><a class='small btn-xs' href='#' id='zoomMinusButton'></a></div>"+
"<li>Vous pouvez explorer le graph en utilisant le zoom et les boutons:"+
"</li>"+
"</ul>",
},
"placement": "right",
"position": "inside",
},
}
......@@ -411,15 +252,16 @@ $("a.new_lang").on("click", function(){
$('.popover').popover('hide');
old_lang = $("a#lang").data("lang")
new_lang = $(this).data("lang")
updateLang(lang, new_lang)
loadHelp(new_lang)
updateLang(lang, new_lang);
location.reload();
loadHelp(new_lang);
});
function updateLang(old_lang, new_lang){
console.log("Old", old_lang)
console.log("Updating to", new_lang)
//update lang in db
//update lang in db via API
$.ajax({
url: '/api/user/parameters/',
type: 'PUT',
......@@ -472,7 +314,7 @@ function loadHelp(lang){
console.log(info[lang]["content"])
help_btn = '<img src="/static/img/question-mark.png" width="20px" height="20px" class="help-btn" data-html="true" tab-index=0 data-container="body" data-toggle="popover" data-placement="'+info["placement"]+'" title="'+info[lang]["title"]+'" data-content="'+info[lang]["content"]+'"></i>'
console.log("position of the btn", info["position"])
if (info["position"] == "inside"){
$(help_btn).appendTo(el);
}
......@@ -482,17 +324,9 @@ function loadHelp(lang){
else if (info["position"] == "before"){
$(help_btn).insertBefore(el);
}
else if (info["position"] == "dup_child"){
//copy the first child inside the element and create a custom one with btn
console.log(el.children())
}
else if (info["position"] == "dup_parent"){
//copy the element and create a copy with btn
console.log(el.parent())
}
else{
//duplicate element and insert the button
//$(help_btn).insertBefore(el);
$(help_btn).appendTo(el);
}
});
......
......@@ -997,6 +997,42 @@ function camaraButton(){
*/
});
}
function updateLang(old_lang, new_lang){
console.log("Old", old_lang)
console.log("Updating to", new_lang)
//update lang in db
$.ajax({
url: '/api/user/parameters/',
type: 'PUT',
data: {"language":new_lang},
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
},
success: function(response, data) {
console.log(data)
var old_lang = $("a#lang").data("lang")
//var new_lang = data["language"]
//change active langue
$("a#lang").attr("data-lang", new_lang);
$("a#lang > img").attr({"value":new_lang, "src":"/static/img/"+new_lang+".png"})
$("a#lang > span").text(new_lang)
//switch lang to option
$("a.new_lang").attr("data-lang", old_lang);
$("a.new_lang > img").attr({"value":old_lang, "src":"/static/img/"+lang+".png"})
$("a.new_lang > span").text(old_lang)
console.log(response, data)
},
error: function(xhr) {
console.log("EDIT FAIL!")
},
});
console.log("defaut lang is now", $("a#lang").data("lang"))
};
function getTips(){
......@@ -1011,67 +1047,22 @@ function getTips(){
});
active_lang = $("a#lang").data("lang")
param='';
text = {"en":"<center><b>Graph Explorer</b></center>"+
"<ul><b>Basic Interactions:</b>"+
"<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> remove selected terms from map list.</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>"+
"<ul><b>Graph edition:</b>"+
"<p>Node sizes maps (on a log scale) the number of documents that"+
"mention its label and its associated terms (if any ).<br>"+
"When according to the chosen proximity measure, the proximity"+
"between two terms is strong enough, a link is displayed.</p>"+
"<li>You can filter links by strength using the 'edges filter' slider"+
"(this will fold/unfold the graph):"+
"</li>"+
"<img src='/static/img/slider_edges.png'/>"+
"<li>You can decide to remove small nodes or large nodes using the"+
"'nodes filter' slider (e.g. to get only the most popular"+
"expressions):</li>"+
"<img src='/static/img/slider_nodes.png'/>"+
"<li>To change size of label (proportionnal to their strenght) use the 'label size slider':</li> "+
"<li>Change cluster coloration using <label>'Colors'</label> button choosing in the options"+
"<li>Change size of the nodes using <label>'Sizes'</label> button choosing in the options"+
"</ul>"+
"<ul><b>Graph Exploration</b>"+
"<a style='float: right;' class='btn-xs' href='#' id='lensButton'></a>"+
"<li>To center the graph, click on the center button. </li>"+
"<a style='float: right;' class='btn-xs' href='#' id='edgesButton'></a>"+
"<li>To see the edges, click on the edges button. </li>"+
"</ul>",
"fr":"<center><b>Graph Explorer</b></center>"+
"<ul><b>Manipulation simple du graphe:</b>"+
"<li>Avec la souris, 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> remove selected terms from map list.</li>"+
"</ul>"+
"<ul><b>Modifier le Graphe :</b>"+
"<p>Node sizes maps (on a log scale) the number of documents that"+
"mention its label and its associated terms (if any ).<br>"+
"When according to the chosen proximity measure, the proximity"+
"between two terms is strong enough, a link is displayed.</p>"+
"<li>You can filter links by strength using the 'edges filter' slider"+
"(this will fold/unfold the graph):"+
"</li>"+
"<img src='/static/img/slider_edges.png'/>"+
"<li>You can decide to remove small nodes or large nodes using the"+
"'nodes filter' slider (e.g. to get only the most popular"+
"expressions):</li>"+
"<img src='/static/img/slider_nodes.png'/>"+
"<li>To change size of label (proportionnal to their strenght) use the 'label size slider':</li> "+
"<li>Change cluster coloration using <label>'Colors'</label> button choosing in the options"+
"<li>Change size of the nodes using <label>'Sizes'</label> button choosing in the options"+
"</ul>"+
"<ul><b>Explorer le graphe</b>"+
"<a style='float: right;' class='btn-xs' href='#' id='lensButton'></a>"+
"<li>To center the graph, click on the center button. </li>"+
"<a style='float: right;' class='btn-xs' href='#' id='edgesButton'></a>"+
"<li>To see the edges, click on the edges button. </li>"+
"</ul>",
}
$("#tab-container").hide();
$("#tab-container-top").hide();
console.log("loading getTips in", active_lang)
return text[active_lang];
$("a.new_lang").on("click", function(){
//close all popover while changing lang
$("#tab-container").hide();
$("#tab-container-top").hide();
old_lang = $("a#lang").data("lang")
new_lang = $(this).data("lang")
updateLang(lang, new_lang);
location.reload();
});
active_lang = $("a#lang").data("lang")
help = {"en":"<h4>Graph basic manipulation</h4><p>Whenever you click on a node inside the graph. This window will show the label of the node and the common expressions associated with the term.It will also display the list of associated documents. You can remove this node for candidate list by clicking on the button delete. You can edit the terms of this map by managing terms list<p> <a href='https://iscpif.fr/gargantext/improve-your-map/' target='_blank'>Discover how to improve your map</a>", "fr":"<h4>Manipuler les noeuds du graph</h4>"}
$("#tab-container").hide();
$("#tab-container-top").hide();
return help[active_lang];
}
......@@ -62,6 +62,8 @@
<div id="left" class="col-sm-8 col-md-8 col-lg-7">
<ul class="nav navbar-nav">
<li class="basicitem"><a class="help" style="display:inline-block;padding:15px;" id="edition">
</a></li>
<!--
<li>
<a>
......@@ -122,8 +124,7 @@
</a>
</li>
-->
<li class="basicitem"><a class="help" id="edition">
</a></li>
</ul>
</div><!-- /div#left -->
......@@ -207,6 +208,9 @@
<ul id="ctlzoom">
<li >
<a style="display:inline-block;padding:5px;" id="exploration" class="help"></a>
</li>
<!-- <div class="content-header">
<button id="menu-toggle">X</button>
</div> -->
......@@ -250,10 +254,7 @@
<img width="30px" title="Save As..." src="{% static "img/save.png" %}" ></img>
</a>
</li>
<li>
<a id="exploration" class="help">
</a>
</li>
</ul>
</div>
......
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