Skip to content

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

Modularity: simply turn on/off crowdsourcing or histogram modules, with a bool... 

Modularity: simply turn on/off crowdsourcing or histogram modules, with a bool to set in TW.DivsFlags (in settings_explorerjs)
parent 0ca4e2f3
Hide whitespace changes
Inline Side-by-side
Showing with 403 additions and 25 deletions
crowdsourcingModule/crowdTerms.css 0 → 100644
View file @ 01263859
/* ---------------- crowdsourcingTerms module ----------------------- */
#crowdsourcing_answer{
font-size: 85%;
color: #707070 ;
padding:0 1em ;
text-align:center ;
}
#crowdsourcing_answer p {
margin: 2px 0;
}
#savesuggestion.btn {
}
#savesuggestion.btn[disabled], #savesuggestion.btn.disabled {
background-color: #B0B0B0 ;
background-image: none ;
border: 1px solid #909090 ;
}
crowdsourcingModule/init.js 0 → 100644
View file @ 01263859
// Crowdsourcing module
// ====================
// Allows suggestions from search box
// Our module_name is simultaneously 3 things:
// - a DivsFlag for settings_explorerjs
// - our current dir for this module's files (and this init.js)
// - the class of module's html elements
module_name="crowdsourcingModule"
// ---- INIT main part -------- (listing all things to load)
loadCSS(module_name+"/crowdTerms.css")
loadJS(module_name+"/suggest.js") ;
console.log("OK LOADED " + module_name) ;
crowdsourcingModule/suggest.js 0 → 100644
View file @ 01263859
/* ---------------------------------------------------------------- */
/* --------------------- crowdsourcingTerms --------------------- */
/* ---------------------------------------------------------------- */
/* 3 possible events affect crowdsourcing */
// catch noAutocomplete event when Tinaweb ui.autocomplete becomes empty
$("#searchinput").on("tw:noAutocomplete", function(e) {
// when there is no corresponding term
// the user gains the right to suggest it
$('#savesuggestion').prop('disabled', false) ;
});
// catch gotAutocomplete event when Tinaweb ui.autocomplete is full
$("#searchinput").on("tw:gotAutocomplete", function(e) {
$('#savesuggestion').prop('disabled', true) ;
});
// eraseNodeSet event when Tinawab had an empty search or unclick
$("#searchinput").on("tw:eraseNodeSet", function(e) {
clean_crowdsourcingzone() ;
});
// emptyNodeSet event when Tinawab had a search but with no matches
$("#searchinput").on("tw:emptyNodeSet", function(e) {
$('#savesuggestion').prop('disabled', false) ;
// when query has no match
if (e.nodeIds == null || e.nodeIds.length == 0) {
// activate save suggestion button
// (if subchain was in no autocomplete term, it's already on)
$('#savesuggestion').prop('disabled', false) ;
// save_suggestions
$("#crowdsourcing_answer").html("<p>The topic <i>\"" + e.q + "\"</i> is not in the map.</p> <p>(You can click the grey <span class=\"glyphicon glyphicon-save\"></span> button to propose it as a suggestion.)</p>") ;
// $("#searchinput").val() = query ;
}
});
$("#savesuggestion").click(function(){
var query = $("#searchinput").val()
if (typeof query != "string" || !query.length) {
query = TW.lastQuery ;
}
query = $.trim( query.toLowerCase() ) ;
save_suggestions(query) ;
})
function save_suggestions(term) {
var info = {
"source": window.location.href,
"data" : term,
"date" : (new Date()).toISOString(),
"geo" : "ip and geoloc"
}
// 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
// console.log( "SAVE INFO:" + info )
$.ajax({
type: "POST",
url: "crowdsourcingModule/db/s.php",
// cache:false,
// contentType: "application/json",
data: info,
dataType: "json",
success : function(data, textStatus, jqXHR) {
console.log( "SUCCESS" )
console.log( data )
//$("#sendcrowds").html(D["#sendcrowds"]["thanks"][LA]) //showing message
$("#crowdsourcing_answer").html("<p><b>Thank you !</b><br/>(<i>\"" + term + "\"</i> was saved as a suggestion)</p>") ;
// show "saved" icon
$("#saveicon").removeClass("glyphicon-save");
$("#saveicon").addClass("glyphicon-saved");
// reset state after 3 secs
setTimeout(function() {
clean_crowdsourcingzone() ;
// if we want to reset the input value too
// $("#proposed_terms").val('') ;
}, 3000);
},
error: function(exception) {
console.log(exception)
console.log("exception!:"+exception.status)
}
})
}
function clean_crowdsourcingzone() {
$("#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: "crowdsourcingModule/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_crowdsourcingzone()
//~ }, 3000);
//~ }, 1000);
//~ },
//~
//~ error: function(exception) {
//~ console.log(exception)
//~ console.log("exception!:"+exception.status)
//~ }
//~
//~ })
//~ }
explorerjs.html
View file @ 01263859
......@@ -156,7 +156,7 @@
<!-- the smaller the viewport, the larger the relative search box size -->
<div class="col-sm-3 col-md-4 col-lg-6" >
<div id="search_input_group" class="input-group input-group-sm">
<span class="input-group-btn crowdsourcingTerms">
<span class="input-group-btn crowdsourcingModule">
<button id="savesuggestion"
disabled
title="Save this topic as a new suggestion"
......@@ -193,7 +193,7 @@
<!-- messages below the search bar -->
<!-- say thanks for the suggestion, etc. -->
<div id="crowdsourcing_answer" class="crowdsourcingTerms"></div>
<div id="crowdsourcing_answer" class="crowdsourcingModule"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-5">
......@@ -231,7 +231,7 @@
<!-- Sidebar left, new css -->
<div id="leftcolumn" class="newleftbar">
<div class="row" class="£TODOhistogramModule">
<div class="row" class="histogramModule">
<!-- filled by query (user search value) to wos api -->
<div id="search_histogram_wrapper" class="col-md-12">
<div id="search_histogram"></div>
......
extras_explorerjs.js
View file @ 01263859
......@@ -482,26 +482,28 @@ function trackMouse() {
}
}
// This is for adding/removing features from TinawebJS
// each key is simultaneously 3 things:
// BASIC MODULARITY
// =================
// ProcessDivsFlags is for adding/removing features from TinawebJS
// each flag is simultaneously 3 things:
// - the key of a bool config value in DivsFlags (settings_explorerjs)
// - the dir of the submodule's files (and its init.js)
// - the dirname of the submodule's files (with a mandatory init.js)
// - the css class of all html elements added by the submodule
function ProcessDivsFlags() {
for(var key in TW.DivsFlags) {
if(TW.DivsFlags[key]===false) {
// $("#"+key).remove() ; // previous logic by id
$("."+key).remove() ; // new logic by class
$("."+key).remove() ; // hide elements of module's class
}
else {
console.log("extras:ProcessDivsFlags: key is true: "+key)
// console.log("extras:ProcessDivsFlags: key is true: "+key)
// load JS+CSS items corresponding to the flagname
// ex: flag = crowdsourcingTerms
// ==> JS = crowdsourcingTerms/init.js
// ==> CSS = crowdsourcingTerms/submodule.css
my_src_dir = key
loadJS(my_src_dir+"/init.js") ;
// ex: for the flag = crowdsourcingTerms
// will load ==> JS crowdsourcingTerms/init.js
// ==> other elements listed in init.js
// ├── "crowdsourcingTerms"+"/crowdTerms.css"
// └── "crowdsourcingTerms"+"/suggest.js"
}
}
}
......
crowdsourcingTerms/crowdTerms.css → histogramModule/histogram.css
View file @ 01263859
/* ------------- module dygraph charts pour histogramme WOS ----------------- */
/* -------- 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:18% ;
height: 100%;
overflow: auto;
text-align:center;
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;
*/
#mainform{
margin-top: .3em;
margin-bottom: .3em;
padding-right: 5px;
......@@ -29,7 +9,7 @@
}
.ui-menu, .ui-menu-item {
/* hack for autocomplete menu to end up *over* modal:z1000 */
hack for autocomplete menu to end up *over* modal:z1000
z-index: 1100;
}
......@@ -38,6 +18,7 @@
border-radius: 0px;
border: 1px solid #454545;
}
*/
#search_histogram_wrapper{
margin: 0 ;
......@@ -46,43 +27,13 @@
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;
}
/* small messages */
p.micromessage{
font-size: 85%;
color: #707070 ;
}
/* ------------- crowdsourcing proprement dit ----------------------- */
#crowdsourcing_answer{
font-size: 85%;
color: #707070 ;
padding:0 1em ;
text-align:center ;
}
#crowdsourcing_answer p {
margin: 2px 0;
}
#savesuggestion.btn {
}
#savesuggestion.btn[disabled], #savesuggestion.btn.disabled {
background-color: #B0B0B0 ;
background-image: none ;
border: 1px solid #909090 ;
}
crowdsourcingTerms/init.js → histogramModule/init.js
View file @ 01263859
// Crowdsourcing module
// ====================
// Histogram module
// =================
// Presents a histogram from WOS API
// Our module_name is simultaneously 3 things:
// - a DivsFlag for settings_explorerjs
// - our current dir for this module's files (and this init.js)
// - the class of module's html elements
module_name="crowdsourcingTerms"
module_name="histogramModule"
// ---- INIT main part -------- (listing all things to load)
// basic modal
loadCSS(module_name+"/crowdTerms.css")
loadJS(module_name+"/modal.js") ;
// our histogram controller
loadJS(module_name+"/wosHistogram.js") ;
// histogram
loadCSS(module_name+"/dygraph/gallery.css") ;
// dygraph library
// loadCSS(module_name+"/dygraph/gallery.css") ;
loadCSS(module_name+"/dygraph/textarea.css") ;
loadJS(module_name+"/dygraph/dygraph.combined.js") ;
......
crowdsourcingTerms/modal.js → histogramModule/wosHistogram.js
View file @ 01263859
/* ---------------------------------------------------------------- */
/* ----------- search histogram (à mettre dans main) ------------- */
/* --------------------- search histogram ----------------------- */
/* ---------------------------------------------------------------- */
// labels of map terms...
var Label2ID = {} ;
// ...initialized from TW.Nodes (nodes' info sorted by id)
for (id in TW.Nodes) {
// console.log("label: " + TW.Nodes[id].label) ;
// console.log("id: " + id) ;
Label2ID[TW.Nodes[id].label] = id ;
}
//method for calling the ISC-API and get pubs-distribution of the suggested term
function search_proposed_terms_and_draw( the_queries ) {
// console.log("search_proposed_terms_and_draw:\n"
// +"i'm searching:\n"
// +JSON.stringify(the_queries)) ;
$("#search_histogram").html("Searching for matching twitter data...")
$("#search_histogram").html("Searching for matching WOS data...")
var args = {
// the_queries is an array of str
......@@ -96,7 +84,7 @@ $("#searchinput").on("tw:emptyNodeSet", function(e) {
function newnodesHistogramBehavior(selectedNodeIds, unusedQuery) {
console.log('/////////\nFUN additionalSearchBehavior' + '\nselectedNodeIds:' +JSON.stringify(selectedNodeIds) ) ;
// console.log('FUN additionalSearchBehavior' + '\nselectedNodeIds:' +JSON.stringify(selectedNodeIds) ) ;
if( selectedNodeIds != null && selectedNodeIds.length > 0 ) {
// query : IF in the Map -> GO to ISC-API (search and draw it)
......@@ -111,7 +99,7 @@ function newnodesHistogramBehavior(selectedNodeIds, unusedQuery) {
console.log('ID error on TW.Nodes['+thisId+']')
}
}
console.log('\n\n\n<---!--->\nselectedLabels' + JSON.stringify(selectedLabels))
// console.log('\n\n\n<---!--->\nselectedLabels' + JSON.stringify(selectedLabels))
search_proposed_terms_and_draw ( selectedLabels ) ;
}
......@@ -133,7 +121,7 @@ function draw_histogram(counts_by_year_array, div_id) {
//~ // x values (year as int) => Date objects
//~ counts_by_year_array[i][0] = new Date(couple[0]) ;
//~ }
console.log('=== GRAPH PREPARATION ===') ;
// console.log('=== GRAPH PREPARATION ===') ;
// 3) call histogram lib
new Dygraph(document.getElementById(div_id),
......@@ -152,140 +140,3 @@ function clean_histogram() {
}
/* ---------------------------------------------------------------- */
/* ----------- crowdsourcing proprement dit ---------------------- */
/* ---------------------------------------------------------------- */
/* 3 possible events affect crowdsourcing */
// catch noAutocomplete event when Tinaweb ui.autocomplete becomes empty
$("#searchinput").on("tw:noAutocomplete", function(e) {
// when there is no corresponding term
// the user gains the right to suggest it
$('#savesuggestion').prop('disabled', false) ;
});
// catch gotAutocomplete event when Tinaweb ui.autocomplete is full
$("#searchinput").on("tw:gotAutocomplete", function(e) {
$('#savesuggestion').prop('disabled', true) ;
});
// eraseNodeSet event when Tinawab had an empty search or unclick
$("#searchinput").on("tw:eraseNodeSet", function(e) {
clean_crowdsourcingzone() ;
});
// emptyNodeSet event when Tinawab had a search but with no matches
$("#searchinput").on("tw:emptyNodeSet", function(e) {
$('#savesuggestion').prop('disabled', false) ;
// when query has no match
if (e.nodeIds == null || e.nodeIds.length == 0) {
// activate save suggestion button
// (if subchain was in no autocomplete term, it's already on)
$('#savesuggestion').prop('disabled', false) ;
// save_suggestions
$("#crowdsourcing_answer").html("<p>The topic <i>\"" + e.q + "\"</i> is not in the map.</p> <p>(You can click the grey <span class=\"glyphicon glyphicon-save\"></span> button to propose it as a suggestion.)</p>") ;
// $("#searchinput").val() = query ;
}
});
$("#savesuggestion").click(function(){
var query = $("#searchinput").val()
if (typeof query != "string" || !query.length) {
query = TW.lastQuery ;
}
query = $.trim( query.toLowerCase() ) ;
save_suggestions(query) ;
})
function save_suggestions(term) {
var info = {
"source": window.location.href,
"data" : term,
"date" : (new Date()).toISOString(),
"geo" : "ip and geoloc"
}
// 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
// console.log( "SAVE INFO:" + info )
$.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 )
//$("#sendcrowds").html(D["#sendcrowds"]["thanks"][LA]) //showing message
$("#crowdsourcing_answer").html("<p><b>Thank you !</b><br/>(<i>\"" + term + "\"</i> was saved as a suggestion)</p>") ;
// show "saved" icon
$("#saveicon").removeClass("glyphicon-save");
$("#saveicon").addClass("glyphicon-saved");
// reset state after 3 secs
setTimeout(function() {
clean_crowdsourcingzone() ;
// if we want to reset the input value too
// $("#proposed_terms").val('') ;
}, 3000);
},
error: function(exception) {
console.log(exception)
console.log("exception!:"+exception.status)
}
})
}
function clean_crowdsourcingzone() {
$("#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_crowdsourcingzone()
//~ }, 3000);
//~ }, 1000);
//~ },
//~
//~ error: function(exception) {
//~ console.log(exception)
//~ console.log("exception!:"+exception.status)
//~ }
//~
//~ })
//~ }
libs/css2/custom.css
View file @ 01263859
......@@ -333,9 +333,22 @@
float: right; width: 100%; height: 100%; background-image: url("../img2/chat.png");
}
/* GESTION DE LA BARRE DE GAUCHE */
.newleftbar {
/* TODO choix fond noir ou fond clair via variables less*/
background-color: inherit;
position:fixed;
left:0 ;
width:18% ;
height: 100%;
overflow: auto;
text-align:center;
z-index: 100 ; /* over the graph ? */
padding-top: .3em;
padding-bottom: 0;
padding-right: 1em;
padding-left: 1em;
}
.leftarrow {
......@@ -376,6 +389,12 @@
padding-left:5%;
}​
/* small messages */
p.micromessage{
font-size: 85%;
color: #707070 ;
}
.btn-sm:hover {
font-weight: bold;
}
......
settings_explorerjs.js
View file @ 01263859
......@@ -42,7 +42,8 @@ var TW = {}
// flag name is div class to be removed if false
// *and* subdirectory to import if true
// see also ProcessDivsFlags()
TW.DivsFlags["crowdsourcingTerms"] = true ;
TW.DivsFlags["crowdsourcingModule"] = true ;
TW.DivsFlags["histogramModule"] = true ;
TW.SystemStates = {}
TW.SystemStates.level = true;
......
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