Skip to content

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

histogram + crowdsourcing in the leftside bar (no more modal)

parent 94b7c701
Show whitespace changes
Inline Side-by-side
Showing with 267 additions and 150 deletions
crowdsourcingTerms/crowdTerms.css
View file @ b976bd2e
/* -------- todo décaler dans custom.css ou un module charts -------- */
/* left bar contains modules */
.newleftbar {
/* TODO choix fond noir ou fond clair via variables less*/
background-color: inherit;
position:fixed;
left:0 ;
width:20% ;
width:18% ;
height: 100%;
overflow: auto;
}
#crowdsource_legend{
position:relative;
text-align:center;
margin: 30 10 10 10;
z-index: 100 ; /* over the graph ? */
padding-top: .3em;
padding-bottom: 0;
padding-right: 1em;
padding-left: 1em;
}
/* ------------- todo décaler dans un module charts ----------------- */
#mainform{
/*
max-width: 45em;
*/
margin-top: .3em;
margin-bottom: .3em;
padding-right: 5px;
padding-left: 5px;
}
.ui-menu, .ui-menu-item {
/* hack for autocomplete menu to end up *over* modal:z1000 */
......@@ -30,3 +38,39 @@
border-radius: 0px;
border: 1px solid #454545;
}
#search_histogram_wrapper{
margin: 0 ;
/* overwrite bootstrap's
* grid element padding*/
padding-right: 1em;
padding-left: 0;
}
/* graph div */
#search_histogram{
min-height: 15em ;
font-size: 85%;
}
/* dygraph internal canvas */
#search_histogram canvas{
margin: 0 ;
padding: 0;
}
/* ------------- crowdsourcing proprement dit ----------------------- */
#crowdsourcing_intro{
}
#savesuggestion.btn {
}
#savesuggestion.btn[disabled], #savesuggestion.btn.disabled {
background-color: #B0B0B0 ;
background-image: none ;
border: 1px solid #909090 ;
}
crowdsourcingTerms/dygraph/gallery.css
View file @ b976bd2e
/*
body {
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
font-size: 90%;
}
*/
aside {
font-size: 90%;
......@@ -68,9 +70,11 @@ aside {
color: blue;
}
/*
a {
text-decoration: none;
}
*/
/* CSS for drawing tool */
#workarea #drawing #tool_zoom {
......@@ -134,23 +138,24 @@ a {
#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;
/* can't set font-size because of inline values?? */
}
#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 */
font-size: 12px;
text-shadow: gray 1px 1px 1px; /* 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) */
font-size: 6px;
text-shadow: gray -1px 1px 1px; /* (offsets are in a rotated frame) */
}
#workarea #styled-chart-labels .chart {
border: 1px dashed black;
margin: 5px 5px 5px 50px;
margin: 2px 2px 2px 2px;
padding: 2px;
}
......
crowdsourcingTerms/modal.js
View file @ b976bd2e
/* ---------------------------------------------------------------- */
/* ----------- search histogram (à mettre dans main) ------------- */
/* ---------------------------------------------------------------- */
// labels of map terms...
var Label2ID = {} ;
......@@ -16,37 +21,57 @@ for (id in TW.Nodes) {
// Crowdsourcing terms open
// When click in "Proposez nouveaux mots"
// and then building the autocomplete data
// Crowdsourcing terms load
// => building the autocomplete data
// Input: Label2ID
// Output: ExtraWords
$("#openthemodal").click(function(){
$("#crowdsourcing_modal").modal("show")
// this gives data to jquery autocomplete
$( "#proposed_terms" ).autocomplete({
source: Object.keys(Label2ID)
});
})
$( "#proposed_terms" ).autocomplete({
source: Object.keys(Label2ID),
// on response callback
// (only if crowdsourcingTerms module)
response: function (event, ui_response_array) {
// console.log(JSON.stringify(ui_response_array)) ;
// exemple in ui_response_array
// {"content":
// [{"label":"warning system","value":"warning system"},
// {"label":"training programme","value":"training programme"}
// ]
// }
if (ui_response_array.content.length == 0) {
// when there is no corresponding term
// the user gains the right to suggest it
$('#savesuggestion').prop('disabled', false) ;
}
else {
$('#savesuggestion').prop('disabled', true) ;
}
},
});
// autocomplete the user input
$("#proposed_terms").keypress(function(e) {
clean_histogram() ;
if(e.keyCode == 13) { //if press enter then:
e.preventDefault();
$("#search_proposed_terms").click();
$(this).autocomplete('close');
}
})
// (only if crowdsourcingTerms module)
clean_crowdsourcingform();
})
//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,
......@@ -54,6 +79,9 @@ function search_proposed_terms_and_draw( the_query ) {
"until": 2013
}
var docs_years = [] ;
$.ajax({
type: "GET",
url: 'https://api.iscpif.fr/1/wos/search/histogram.json',
......@@ -73,13 +101,13 @@ function search_proposed_terms_and_draw( the_query ) {
}
// counts_by_year_array
draw_histogram(docs_years, "crowdsourcing_histogram") ;
draw_histogram(docs_years, "search_histogram") ;
}
},
error: function(exception) {
console.log("exception!:"+exception.status)
$("#wos_chart").prepend(msg)
$("#search_histogram").prepend(msg)
}
})
}
......@@ -87,39 +115,75 @@ function search_proposed_terms_and_draw( the_query ) {
// input value retrieval/handling
$("#search_proposed_terms").click(function() {
clean_crowdsourcingform()
clean_crowdsourcingform() ;
if($("#proposed_terms").val()=="")
return false;
var msg = "" ;
// 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
// -> GO to ISC-API (search it and draw it)
search_proposed_terms_and_draw ( [query] ) ;
}
else {
// send ajax DB post
// activate save suggestion button
// (if subchain was in no autocomplete term, it's already on)
$('#savesuggestion').prop('disabled', false) ;
$("#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>'
) ;
// save_suggestions
$("#crowdsourcing_answer").html("<p>This topic (<i>\"" + query + "\"</i> isn't in the maps. You can click the grey button to propose it as a suggestion.</p>") ;
}
$("#proposed_terms").autocomplete('close');
});
// use dygraph lib to draw below the crowdsourcing div
function draw_histogram(counts_by_year_array, div_id) {
// 1) layout for the div#search_histogram
// /!\ this div *needs* padding:0 /!\;
$("#"+div_id).height("15em") ;
// 2) data preparation
//~ 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 ===') ;
// 3) call histogram lib
new Dygraph(document.getElementById(div_id),
counts_by_year_array,
{
labels: ['year', 'n'],
drawPoints: true,
fillGraph: true
});
}
function clean_histogram() {
$("#search_histogram").html("") ;
}
/* ---------------------------------------------------------------- */
/* ----------- crowdsourcing proprement dit ---------------------- */
/* ---------------------------------------------------------------- */
$("#savesuggestion").click(function(){
var query = $("#proposed_terms").val()
query = $.trim( query.toLowerCase() ) ;
save_suggestions(query) ;
$("#crowdsourcing_answer").prepend("<h3 class='modal-title'>Saved suggested term: <i>" + query + "</i></h3>") ;
})
function save_suggestions(term) {
......@@ -129,8 +193,7 @@ function save_suggestions(term) {
"date" : (new Date()).toISOString(),
"geo" : "ip and geoloc"
}
console.log( "SAVE INFO:" + info )
console.log(" - - - - -")
// console.log( "SAVE INFO:" + info )
$.ajax({
type: "POST",
url: "crowdsourcingTerms/db/s.php",
......@@ -141,12 +204,20 @@ function save_suggestions(term) {
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()
$("#crowdsourcing_answer").html("<p><b>Thank you !</b><br/>(<i>\"" + term + "\"</i> was saved in database)</p>") ;
// show "saved" icon
$("#saveicon").removeClass("glyphicon-save");
$("#saveicon").addClass("glyphicon-saved");
// reset state after 3 secs
setTimeout(function() {
clean_crowdsourcingform() ;
// if we want to reset the input value too
// $("#proposed_terms").val('') ;
}, 3000);
}, 1000);
},
error: function(exception) {
......@@ -159,39 +230,41 @@ function save_suggestions(term) {
function clean_crowdsourcingform() {
$("#crowdsourcing_answer").html("") ;
$("#crowdsourcing_histogram").html("") ;
$("#crowdsourcing_histogram").width(0) ;
$("#crowdsourcing_histogram").height(0) ;
$("#crowdsourcing_answer").html('') ;
$("#saveicon").removeClass("glyphicon-saved");
$("#saveicon").addClass("glyphicon-save");
$('#savesuggestion').prop('disabled', true) ;
}
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)
}
})
}
// non utilisé si termes depuis map
//~ 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
......@@ -199,21 +272,3 @@ $("#sendcrowds").html("...")
// 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 @ b976bd2e
......@@ -185,6 +185,68 @@
<div id="wrapper">
<!-- Sidebar left, new css -->
<div id="leftcolumn" class="newleftbar">
<div class="row">
<div id="crowdsourcing_intro" class="col-md-12 crowdsourcingTerms">
<!-- <button type="button" class="close">×</button> -->
<h5>Search or suggest topics</h5>
</div>
</div><!-- /row -->
<div class="row">
<div id="mainform" class="form-horizontal col-md-12">
<div id="search_input_group" class="input-group input-group-sm">
<span class="input-group-btn crowdsourcingTerms">
<button id="savesuggestion"
disabled
title="Save this topic as a new suggestion"
class="btn btn-default"
type="button"><i id="saveicon" class="glyphicon glyphicon-save"></i></button>
</span>
<span class="input-group-btn">
<button id="search_proposed_terms"
title="Search the topic in the map"
class="btn btn-info"
type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
<!-- ideally should be appended by jquery for autocomplete -->
<input id="proposed_terms" type="text" class="form-control" placeholder="Recherche" />
</div><!-- /search_input_group -->
</div><!-- /form -->
</div><!-- /row -->
<div class="row" class="crowdsourcingTerms">
<!-- say thanks for the suggestion -->
<div id="crowdsourcing_answer" class="col-md-12"></div>
</div><!-- /row -->
<div class="row" class="TODOhistogramModule">
<!-- 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>
</div>
<div id="zonecentre">
......@@ -249,19 +311,6 @@
</ul>
</div>
<!-- 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;">
......@@ -373,42 +422,6 @@
</div>
<div id="crowdsourcing_modal" class="modal fade crowdsourcingTerms" style="color:black;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Contribute to the map by suggesting new topics!</h3>
</div>
<div class="modal-body form-horizontal">
<div class="row">
<div id="custom-search-input">
<div class="input-group col-md-12">
<!-- ideally should be appended by jquery for autocomplete -->
<input id="proposed_terms" type="text" class="form-control input-lg" placeholder="Recherche" />
<span class="input-group-btn">
<button id="search_proposed_terms" class="btn btn-info btn-lg" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
<br>
<center>
<div id="crowdsourcing_answer"></div>
<div id="crowdsourcing_histogram"></div>
</center>
</div>
</div>
</div><!-- /modal-content -->
</div><!-- /modal-dialog -->
</div><!-- /#crowdsourcing_modal -->
<div id="geomapmodal" class="modal fade">
<!-- <div class="modal-content"> -->
......
libs/css2/custom.css
View file @ b976bd2e
......@@ -44,7 +44,7 @@
}
.my-legend {
position:absolute;
position:fixed;
bottom:5px;
left:5px;
......
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