Skip to content

Commit

Permalink
added i18n support for the capability map, ticket vivo-1892
Browse files Browse the repository at this point in the history
  • Loading branch information
@dofeldsc
dofeldsc authored and Andrew Woods committed Jul 2, 2020
1 parent d1a7032 commit 48acad0
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 55 deletions.
5 changes: 3 additions & 2 deletions webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js
View file
Expand Up @@ -33,6 +33,7 @@ if (typeof i18nStringsCap == 'undefined')
group: 'Group',
pause: 'pause',
resume: 'resume',
reset: 'Reset',
show_group_labels: 'show group labels',
hide_group_labels: 'hide group labels',
delete_selected: 'delete selected',
Expand Down Expand Up @@ -630,12 +631,12 @@ var ipretResults = function(results) {
var disableSubButton = function() {
subButton.disabled = true;
$("#sExpand").attr("disabled", true);
$("#resetButton").val("Stop");
$("#resetButton").val(i18nStringsCap.pause);
}
var enableSubButton = function() {
subButton.disabled = false;
$("#sExpand").attr("disabled", false);
$("#resetButton").val("Reset");
$("#resetButton").val(i18nStringsCap.reset);
}
var getLinkColor = function() {
var linkColor = $("#linkColor").val();
Expand Down
77 changes: 24 additions & 53 deletions webapp/src/main/webapp/templates/freemarker/visualization/capabilitymap/capabilityMap.ftl
View file
Expand Up @@ -20,6 +20,7 @@ ${stylesheets.add(
group: '${i18n().group_capitalized}',
pause: '${i18n().pause}',
resume: '${i18n().resume}',
reset: '${i18n().cap_map_reset}',
show_group_labels: '${i18n().show_group_labels}',
hide_group_labels: '${i18n().hide_group_labels}',
delete_selected: '${i18n().delete_selected}',
Expand All @@ -46,8 +47,8 @@ ${stylesheets.add(
</script>
<div class="main" id="main-content" role="main">
<div class="col-8">
<h2>Capability Map</h2>
<p>Build a &lsquo;first pass&rsquo; capability map by typing in a<!-- set of--> search term<!--s--> that could be said to represent a broad research capability.</p>
<h2>${i18n().capability_map}</h2>
<p>${i18n().cap_map_intro}</p>
</div>

<div id="queryform">
Expand All @@ -56,9 +57,9 @@ ${stylesheets.add(
<input name="query" id="query" size="34" value="" onfocus="" accesskey="q" onblur="" type="text" onkeydown="queryKeyDown(event);">
<label id="cutofflabel" for="queryCutoff">Cutoff:</label>
<input id="queryCutoff" name="queryCutoff" type="text" title="Cutoff" size="4" value="10">
<input type="submit" value="Search" id="add" type="button" onclick="addKwd();">
<input value="Search and Expand" type="submit" id="sExpand" onclick="expandLastQuery = 1; addKwd();">
<input value="Reset" id="resetButton" type="submit" onclick="reset()" disabled>
<input value="${i18n().cap_map_search}" type="submit" id="add" type="button" onclick="addKwd();">
<input value="${i18n().cap_map_search_expand}" type="submit" id="sExpand" onclick="expandLastQuery = 1; addKwd();">
<input value="${i18n().cap_map_reset}" id="resetButton" type="submit" onclick="reset()" disabled>
<!-- a style="display:inline-block; float:right; line-height:32px; height:32px; cursor:pointer" onclick="showhideadvanced(this)">Show advanced</a -->
</span>
</p>
Expand All @@ -69,56 +70,27 @@ ${stylesheets.add(
<div id="container">
<div id="helptext">
<p>
Welcome to the Capability Mapping tool.
This tool visualises how researchers relate to other
researchers via search terms.
${i18n().cap_map_text_intro}
</p>
<h3>Getting Started</h3>
<h3>${i18n().cap_map_text_headline1}</h3>
<p>
Enter a research area into the search field above and press 'Search'.
The resulting diagram displays the search term, rendered in orange,
connected to the blue group of researchers that are active in that area.
Enter another search term to see how researchers from both searches relate.
Keep adding search terms to build a capability map.
${i18n().cap_map_text1}
</p>
<p>
Tip: you can expand a broad search term into smaller concepts
by clicking &lsquo;search and expand&rsquo;.
${i18n().cap_map_text2}
</p>
<h3>Interacting with the visualisation</h3>
<h3>${i18n().cap_map_text_headline2}</h3>
<p>
By clicking on any node in the visualisation,
additional information can be viewed in the
'Info' tab on the right-hand side.
For groups of people, the participants in the group
and their information can be viewed,
and individual researchers can be removed from the graph.
Selecting a search term will display all attached groups.
Under each group full information for each person is retrieved,
and the number of matching grants and publications
for each researcher within the mapped capabilities is shown.
Clicking on a researcher's name will lead to the original search
results.
${i18n().cap_map_text3}
</p>
<h4>Visual cues</h4>
<h4>${i18n().cap_map_text_headline3}</h4>
<p>
To make the visualisation easier to read,
search terms and groups are scaled according
to the number of results returned.
Groups are also given different shades
according to the number of connected search terms.
The darker the shade, the more search terms a group is connected to.
${i18n().cap_map_text4}
</p>
<h3>Advanced features</h3>
<h4>Changing the cutoff value</h4>
<h3>${i18n().cap_map_text_headline4}</h3>
<h4>${i18n().cap_map_text_headline5}</h4>
<p>
The amount of researchers retrieved for each search term
for is limited by the cutoff value in the search form
(10 by default).
Increasing this cutoff will increase the likelihood
of an intersection between different search terms.
This will also increase the complexity of the graph,
however, and may make it difficult to identify patterns.
${i18n().cap_map_text5}
</p>
</div>

Expand All @@ -131,17 +103,18 @@ ${stylesheets.add(
<div id="right-container">
<div class="tabs">
<ul class="titles">
<li><a href="#demo">Search terms</a></li>
<li><a href="#logg">Info</a></li>
<li><a href="#demo">${i18n().cap_map_search_terms}</a></li>
<li><a href="#logg">${i18n().cap_map_info}</a></li>
<!-- li><a href="#extractData">Data</a></li -->
</ul>

<div class="result_body">
<div class="result_section" id="demo">
<h2>Current search terms</h2>
<h2>${i18n().cap_map_cur_search_terms}</h2>
<ul id="log_printout">
<li>This panel displays a list of the search terms currently
on the graph. Search for something to begin.</li>
<li>
${i18n().cap_map_text6}
</li>
</ul>
<p style="position:absolute; bottom:10px">
<img src="${urls.base}/images/visualization/capabilitymap/key.png" alt="Key">
Expand All @@ -150,9 +123,7 @@ ${stylesheets.add(
<div class="result_section" id="logg">
<div id="inner-details">
<p>
This panel displays information about individual
search terms and groups. Click on a group to display
its information.
${i18n().cap_map_text7}
</p>
</div>
</div>
Expand Down

0 comments on commit 48acad0

Please sign in to comment.