Skip to content

C
clinicaltrials
Commit e64c1dfa authored by Romain Loth's avatar Romain Loth
Browse files
Options

[FEAT] first working version of module for crowdsourcing modal

parent 34b0fb54
Hide whitespace changes
Inline Side-by-side
Showing with 491 additions and 57 deletions
crowdsourcingTerms/crowdTerms.css
View file @ e64c1dfa
/* left bar contains modules */
.newleftbar {
/* TODO choix fond noir ou fond clair via variables less*/
background-color: inherit;
position:fixed;
left:0 ;
width:20% ;
height: 100%;
overflow: auto;
}
#crowdsource_legend{
display: block;
position:absolute;
left: 5px ;
top: 200px;
position:relative;
text-align:center;
margin: 30 10 10 10;
}
.ui-menu, .ui-menu-item {
/* hack for autocomplete menu to end up *over* modal:z1000 */
z-index: 1100;
......
crowdsourcingTerms/db/s.php 0 → 100644
View file @ e64c1dfa
<?php
header('Content-Type: application/json');
if ($_POST) {
$source = ( ($_POST['source'])? $_POST['source'] : "" );
$suggestion = ( ($_POST['data'])? $_POST['data'] : "" );
$date = ( ($_POST['date'])? $_POST['date'] : "" );
$geo = ( ($_POST['geo'])? $_POST['geo'] : "" );
$new_ = ( ($_POST['new'])? $_POST['new'] : -1 )-2;
$sql_insert = 'INSERT into terms values ( "'.$source.'" , "'.$suggestion.'" , "'.$date.'" , "'.$geo.'" , '.$new_.' )';
$base = new PDO("sqlite:crowdsourcing.db");
$base->exec($sql_insert);
$base = null;
echo json_encode( [ $suggestion , "OK"] );
} else {
echo json_encode( [ "OK"] );
}
?>
\ No newline at end of file
crowdsourcingTerms/dygraph/dygraph.combined.js 0 → 100755
View file @ e64c1dfa
This source diff could not be displayed because it is too large. You can view the blob instead.
crowdsourcingTerms/dygraph/gallery.css 0 → 100755
View file @ e64c1dfa
body {
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
font-size: 90%;
}
aside {
font-size: 90%;
}
#toc {
vertical-align: top;
width: 200px;
}
#gap {
style="width:0.5em;"
}
#rhs, #lhs {
vertical-align: top;
}
#subtitle a:visited {
color: blue;
}
#workarea {
border-style: solid;
border-color: #ddd;
padding: 4px;
}
#toc .entry {
background-color: #eee;
padding: .7em;
/* These two lines result in indenting wrapped lines forward a little bit. */
/* text-indent: -1em;
padding-left: 1em; */
}
#toc .entry:hover {
color: blue;
cursor: pointer;
}
#toc .entry .selected {
color: #090;
}
#code a:hover {
color: blue;
cursor: pointer;
}
#demotitle {
text-align: center;
font-size: 1.5em;
vertical-align: bottom;
}
.subdued:link,
.subdued:visited,
.subdued:active {
color: #000;
}
.subdued:hover {
color: blue;
}
a {
text-decoration: none;
}
/* CSS for drawing tool */
#workarea #drawing #tool_zoom {
background: url('images/tool-palette.png');
background-position: 0px 0px;
width: 32px;
height: 33px;
margin-left: 50px;
display: inline-block;
}
#workarea #drawing #tool_pencil {
background: url('images/tool-palette.png');
background-position: -32px 0px;
width: 32px;
height: 33px;
display: inline-block;
}
#workarea #drawing #tool_eraser {
background: url('images/tool-palette.png');
background-position: -64px 0px;
width: 33px;
height: 33px;
display: inline-block;
}
#workarea #drawing #toolbar {
display: inline-block;
}
/* CSS for independent series */
#workarea #independent-series .thinborder {
border-width: 1px;
border-spacing: 0px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
#workarea #independent-series .thinborder td,
#workarea #independent-series .thinborder th {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: black;
}
/* CSS for resize */
#workarea #resize #div_g {
/* The left and top are just guesses, this needs a proper run-through */
position: absolute;
left: 200px;
right: 10px;
top: 100px;
bottom: 10px;
}
/* CSS for styled-chart-label */
#workarea #styled-chart-labels .infotext {
}
#workarea #styled-chart-labels #div_g .dygraph-label {
/* This applies to the title, x-axis label and y-axis label */
font-family: Georgia, Verdana, serif;
}
#workarea #styled-chart-labels #div_g .dygraph-title {
/* This rule only applies to the chart title */
font-size: 36px;
text-shadow: gray 2px 2px 2px; /* color, delta-x, delta-y, blur radius */
}
#workarea #styled-chart-labels #div_g .dygraph-ylabel {
/* This rule only applies to the y-axis label */
font-size: 18px;
text-shadow: gray -2px 2px 2px; /* (offsets are in a rotated frame) */
}
#workarea #styled-chart-labels .chart {
border: 1px dashed black;
margin: 5px 5px 5px 50px;
padding: 2px;
}
#workarea #temperature-sf-ny #bordered {
border: 1px solid red;
}
#workarea #highlighted-series .few .dygraph-legend > span.highlight { border: 1px solid grey; }
#workarea #highlighted-series .many .dygraph-legend > span { display: none; }
#workarea #highlighted-series .many .dygraph-legend > span.highlight { display: inline; }
#workarea #edge-padding fieldset { display: inline-block; vertical-align: top; }
crowdsourcingTerms/dygraph/textarea.css 0 → 100755
View file @ e64c1dfa
.textarea {
position: absolute;
border: 1px solid black;
background-color: #dddddd;
z-index: 12;
}
.textarea .prompt {
padding-left: 2px;
}
.textarea .buttons {
position: absolute;
bottom: 5px;
right: 5px;
}
.textarea button {
color: #222222;
}
.textarea .editor {
font-family: Inconsolata, Courier New, Courier;
margin: 4px;
}
#modalBackground {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 11;
background-color:#333333;
display: none;
opacity: 0.40;
filter: alpha(opacity=40)
}
crowdsourcingTerms/init.js
View file @ e64c1dfa
......@@ -8,6 +8,14 @@
module_name="crowdsourcingTerms"
// ---- INIT main part -------- (listing all things to load)
loadJS(module_name+"/modal.js") ;
// basic modal
loadCSS(module_name+"/crowdTerms.css")
loadJS(module_name+"/modal.js") ;
// histogram
loadJS(module_name+"/dygraph/dygraph.combined.js") ;
loadCSS(module_name+"/dygraph/gallery.css") ;
loadCSS(module_name+"/dygraph/textarea.css") ;
console.log("OK LOADED " + module_name) ;
crowdsourcingTerms/modal.js
View file @ e64c1dfa
var ExtraWords = {} ;
var Label2ID = {}; // initialize from TW.Nodes ?
// labels of map terms...
var Label2ID = {} ;
// ...initialized from TW.Nodes
for (id in TW.Nodes) {
// console.log("label: " + TW.Nodes[id].label) ;
// console.log("id: " + id) ;
Label2ID[TW.Nodes[id].label] = id ;
}
// TODO: use ExtraWords to know already suggested terms
// var ExtraWords = {'a miam term': true} ;
// Crowdsourcing terms open
// When click in "Proposez nouveaux mots"
......@@ -9,37 +23,15 @@ var Label2ID = {}; // initialize from TW.Nodes ?
// Output: ExtraWords
$("#openthemodal").click(function(){
$("#crowdsourcing_modal").modal("show")
if( Object.keys(ExtraWords).length >0 )
return true;
// first time
$.ajax({
type: "GET",
url: module_name+"/temp_autocomplete/keywords.txt", // (miam - map)
dataType: "text",
success: function(data) {
var wordlist = data.split("\n");
for(var i in wordlist) {
if (wordlist[i] && wordlist[i].length) {
var normalize_word = wordlist[i].toLowerCase()
if( !Label2ID[normalize_word] )
ExtraWords[normalize_word] = true
}
}
delete wordlist;
// console.log("ExtraWords"+JSON.stringify(ExtraWords))
$( "#proposed_terms" ).autocomplete({
source: Object.keys(ExtraWords) //building the autocomplete
});
},
error: function(xhr, ajaxOptions, thrownError) {
console.log("Status: " + xhr.status + " Error: " + thrownError);
}
// this gives data to jquery autocomplete
$( "#proposed_terms" ).autocomplete({
source: Object.keys(Label2ID)
});
})
// input with autocomplete
// autocomplete the user input
$("#proposed_terms").keypress(function(e) {
if(e.keyCode == 13) { //if press enter then:
e.preventDefault();
......@@ -47,3 +39,181 @@ $("#proposed_terms").keypress(function(e) {
$(this).autocomplete('close');
}
})
//method for calling the ISC-API and get pubs-distribution of the suggested term
function search_proposed_terms_and_draw( the_query ) {
// alert("i'm searching:\n"+JSON.stringify(the_query)) ;
var args = {
// query is an array of str
"q": the_query,
"since": 1989,
"until": 2013
}
var docs_years = [] ;
$.ajax({
type: "GET",
url: 'https://api.iscpif.fr/1/wos/search/histogram.json',
data: args,
dataType: "json",
success : function(data, textStatus, jqXHR) {
// ES aggs response, for example
// data = {"took":91,"total":121673,"aggs":{"publicationCount":{"buckets":[{"key":1989,"doc_count":880},{"key":1990,"doc_count":1088},...,{"key":2012,"doc_count":9543},{"key":2013,"doc_count":8832}]}},"hits":{"total":121673,"max_score":0,"hits":[]}}
if(data.total==0) {
return false;
}
else {
for(var i in data.aggs.publicationCount.buckets) {
var elem = data.aggs.publicationCount.buckets[i]
docs_years.push( [ elem.key+"" , elem.doc_count] )
}
// counts_by_year_array
draw_histogram(docs_years, "crowdsourcing_histogram") ;
}
},
error: function(exception) {
console.log("exception!:"+exception.status)
$("#wos_chart").prepend(msg)
}
})
}
// input value retrieval/handling
$("#search_proposed_terms").click(function() {
clean_crowdsourcingform()
if($("#proposed_terms").val()=="")
return false;
var msg = "" ;
var query = $("#proposed_terms").val()
query = $.trim( query.toLowerCase() )
console.log('===\nyour query was: "'+query+'"');
if( Label2ID[query] ) {
// query : IF in the Map !!!
// -> GO to ISC-API
//
$("#crowdsourcing_answer").prepend("<h3 class='modal-title'>The term <i>" + query + "</i> already exists in the map</h3>") ;
$("#crowdsourcing_histogram").width(500) ;
$("#crowdsourcing_histogram").height(300) ;
// search it and draw it
search_proposed_terms_and_draw ( [query] ) ;
}
else {
// send ajax DB post
$("#crowdsourcing_answer").html(
"<h3 class='modal-title'>The term <i>" + query + "</i> is not in the map yet.</h3>"
+ '<center><button style="position: relative; bottom: 0;" id="savesuggestion" class="btn btn-xl btn-info ">Save the suggestion !</button></center>'
) ;
}
});
$("#savesuggestion").click(function(){
save_suggestions(query) ;
$("#crowdsourcing_answer").prepend("<h3 class='modal-title'>Saved suggested term: <i>" + query + "</i></h3>") ;
})
function save_suggestions(term) {
var info = {
"source": window.location.href,
"data" : term,
"date" : (new Date()).toISOString(),
"geo" : "ip and geoloc"
}
console.log( "SAVE INFO:" + info )
console.log(" - - - - -")
$.ajax({
type: "POST",
url: "crowdsourcingTerms/db/s.php",
// cache:false,
// contentType: "application/json",
data: info,
dataType: "json",
success : function(data, textStatus, jqXHR) {
console.log( "SUCCESS" )
console.log( data )
setTimeout(function(){
//$("#sendcrowds").html(D["#sendcrowds"]["thanks"][LA]) //showing message
setTimeout(function(){
clean_crowdsourcingform()
}, 3000);
}, 1000);
},
error: function(exception) {
console.log(exception)
console.log("exception!:"+exception.status)
}
})
}
function clean_crowdsourcingform() {
$("#crowdsourcing_answer").html("") ;
$("#crowdsourcing_histogram").html("") ;
$("#crowdsourcing_histogram").width(0) ;
$("#crowdsourcing_histogram").height(0) ;
}
function get_already_suggested_terms() {
$("#sendcrowds").html("...")
$.ajax({
type: "POST",
url: "crowdsourcingTerms/db/s.php",
// cache:false,
// contentType: "application/json",
data: info,
dataType: "json",
success : function(data, textStatus, jqXHR) {
console.log( "SUCCESS" )
console.log( data )
setTimeout(function(){
//$("#sendcrowds").html(D["#sendcrowds"]["thanks"][LA]) //showing message
setTimeout(function(){
clean_crowdsourcingform()
}, 3000);
}, 1000);
},
error: function(exception) {
console.log(exception)
console.log("exception!:"+exception.status)
}
})
}
// sqlite columns in table 'terms'
// 0|source|CHAR(250)|0||0
// 1|suggestion|CHAR(250)|0||0
// 2|time|CHAR(30)|0||0
// 3|space|CHAR(100)|0||0
// 4|new|INTEGER|0||0
// use dygraph lib to draw in the modal
function draw_histogram(counts_by_year_array, div_id) {
var years = [] ;
for (i in counts_by_year_array) {
couple = counts_by_year_array[i] ;
// x values (year as int) => Date objects
counts_by_year_array[i][0] = new Date(couple[0]) ;
}
console.log('=== GRAPH PREPARATION ===') ;
new Dygraph(document.getElementById(div_id),
counts_by_year_array,
{
labels: ['x', 'occurrences']
});
}
explorerjs.html
View file @ e64c1dfa
......@@ -184,7 +184,7 @@
<div id="wrapper">
<div id="zonecentre">
......@@ -249,8 +249,21 @@
</ul>
</div>
<!-- Sidebar -->
<div id="leftcolumn">
<!-- Sidebar left, new css -->
<div id="leftcolumn" class="newleftbar">
<div id="crowdsource_legend" style="text-align:center; margin:10px;" class="crowdsourcingTerms">
<br><h2>Contribute</h2>Add topics here
<center>
<button style="position: relative; bottom: 0;" id="openthemodal" class="btn btn-xl btn-danger ">Suggest new terms !</button>
</center>
</div>
<div id="legend_for_clusters"></div>
</div>
<!-- Sidebar right, old css -->
<div id="rightcolumn">
<div style="text-align: center;">
<a href="http://www.cnrs.fr" target="_blank"><img width="40%" src="https://www.ipmc.cnrs.fr/~duprat/comm/images/logo_cnrs_transparent.gif"></a>
</div>
......@@ -286,20 +299,9 @@
<br><br><br><br><br><br>
</div>
</div>
<div id="crowdsource_legend" style="text-align:center; margin:10px;" class="crowdsourcingTerms">
<br><h2>Contribute</h2>Add topics here
<center>
<button style="position: relative; bottom: 0;" id="openthemodal" class="btn btn-xl btn-danger ">Suggest new terms !</button>
</center>
</div>
<div id="legend_for_clusters"></div>
<div id="savemodal" class="modal fade">
<div class="modal-dialog">
......@@ -376,7 +378,7 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Contribuez à l'analyse en suggérant des termes !</h3>
<h3 class="modal-title">Contribute to the map by suggesting new topics!</h3>
</div>
<div class="modal-body form-horizontal">
......@@ -395,7 +397,10 @@
</div>
<br>
<center><div id="wos_chart"></div></center>
<center>
<div id="crowdsourcing_answer"></div>
<div id="crowdsourcing_histogram"></div>
</center>
</div>
</div>
......
libs/css2/sidebar.css
View file @ e64c1dfa
......@@ -21,7 +21,7 @@ box-shadow: 0px 0px 3px 0px #888888;
}*/
#leftcolumn {
#rightcolumn {
overflow-y: scroll;
margin-right: -300px;
margin-left: 0px;
......
settings_explorerjs.js
View file @ e64c1dfa
......@@ -42,7 +42,7 @@ var TW = {}
// flag name is div class to be removed if false
// *and* subdirectory to import if true
// see also ProcessDivsFlags()
TW.DivsFlags["crowdsourcingTerms"] = false ;
TW.DivsFlags["crowdsourcingTerms"] = true ;
TW.SystemStates = {}
TW.SystemStates.level = true;
......
tinawebJS/Tinaweb.js
View file @ e64c1dfa
......@@ -26,14 +26,21 @@ function sigmaLimits( sigmacanvas ) {
pw=$( sigmacanvas ).width();
ph=$( sigmacanvas ).height();
sidebar=$('#leftcolumn').width();
sidebar=$('#rightcolumn').width();
anchototal=$('#fixedtop').width();
altototal=$('#leftcolumn').height();
altototal=$('#rightcolumn').height();
altofixtop=$('#fixedtop').height()
altodeftop=$('#defaultop').height()
$( sigmacanvas ).width(anchototal-sidebar);
$( sigmacanvas ).height(altototal-altofixtop-altodeftop-4);
// todo take into account leftcolumn
//sidebar_left=$('#leftcolumn').width();
//sidebar_right=$('#rightcolumn').width();
//$( sigmacanvas ).width(anchototal-sidebar_right-sidebar_left);
pw=$( sigmacanvas ).width();
ph=$( sigmacanvas ).height();
return "new canvas! w:"+pw+" , h:"+ph;
......@@ -538,8 +545,8 @@ TinaWebJS = function ( sigmacanvas ) {
// === un/hide leftpanel === //
$("#aUnfold").click(function(e) {
//SHOW leftcolumn
sidebar = $("#leftcolumn");
//SHOW rightcolumn
sidebar = $("#rightcolumn");
fullwidth=$('#fixedtop').width();
e.preventDefault();
// $("#wrapper").toggleClass("active");
......@@ -563,7 +570,7 @@ TinaWebJS = function ( sigmacanvas ) {
}, 400);
}
else {
//HIDE leftcolumn
//HIDE rightcolumn
$("#aUnfold").attr("class","leftarrow");
sidebar.animate({
"right" : "-" + sidebar.width() + "px"
......
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