basic version of one search bar

crowdsourcingTerms/crowdTerms.css

@@ -58,15 +58,28 @@
   margin: 0 ;
   padding: 0;
 }
+
+/* small messages */
+p.micromessage{
+  font-size: 85%;
+  color: #707070 ;
+}
 /* ------------- crowdsourcing proprement dit ----------------------- */
 
 
-#crowdsourcing_intro{
+#crowdsourcing_answer{
+  font-size: 85%;
+  color: #707070 ;
+  padding:0 1em ;
+  text-align:center ;
 }
 
-#savesuggestion.btn {
+#crowdsourcing_answer p {
+  margin: 2px 0;
 }
 
+#savesuggestion.btn {
+}
 
 #savesuggestion.btn[disabled], #savesuggestion.btn.disabled {
   background-color: #B0B0B0 ;

crowdsourcingTerms/init.js

@@ -14,8 +14,9 @@ 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") ;
+loadJS(module_name+"/dygraph/dygraph.combined.js") ;
+
 
 console.log("OK LOADED " + module_name) ;

explorerjs.html

@@ -147,19 +147,63 @@
                   </ul>
 
 
-                  <ul class="nav navbar-nav navbar-right">
-                     <li><a>
-                              <input type="checkbox" id="checkboxdiv" onclick="alertCheckBox(this);">Add</input>
-                     </a></li>
-                  </ul>
-                  <ul class="nav navbar-nav navbar-right">
-                     <li><a>
-                              <input id="searchinput"  autocomplete="off" class="form-control input-sm col-lg-8" placeholder="Search" type="text">
-                     </a></li>
-                  </ul>
 
                   <div class="colorgraph_div"></div>
 
+            <div class="container" >
+
+                   <div class='row' id="searchnav">
+                       <!-- 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">
+                            <button id="savesuggestion"
+                                    disabled
+                                    title="Save this topic as a new suggestion"
+                                    class="btn btn-default" 
+                                    type="button">
+                              <span class="glyphicon glyphicon-save"
+                                     id="saveicon">
+                              </span>
+                            </button>
+                          </span>
+                          
+                          <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>
+                          
+                          <!-- ########## THE SEARCH BAR ########## -->
+                          
+                          <input id="searchinput" 
+                                  type="text"
+                                  class="form-control" 
+                                  placeholder="Select node(s)" />
+                          
+                          <!-- strSearchBar will replace placeholder value -->
+                       
+                          <!-- #################################### -->
+
+                       </div>
+                       
+                       <!-- messages below the search bar -->
+                       <!-- say thanks for the suggestion, etc. -->
+                       <div id="crowdsourcing_answer" class="crowdsourcingTerms"></div>
+                    </div>
+
+                    <div class="col-sm-3 col-md-3 col-lg-5">
+                            <input id="checkboxdiv"  onclick="alertCheckBox(this);"
+                                    title="Add next search results to current selection"
+                                    class="btn btn-info" 
+                                    type="checkbox"></input>
+                            <p style="font-size:75%; line-height:90%">Add to selection</p>
+                    </div>
+                    
                   </div>
 
             <!--
@@ -177,61 +221,17 @@
               </li>
             </ul>
             -->
+            </div>
               
         </div><!-- /.nav-collapse -->
         </div><!-- /.navbar -->
-
-
+    </div>
     <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">
+          <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>
@@ -350,8 +350,7 @@
 	    </div>
     
 
-    </div>
-
+    <!-- £TODO check </div> -->
 
     <div id="savemodal" class="modal fade">
       <div class="modal-dialog">

extras_explorerjs.js

@@ -11,6 +11,7 @@ function newPopup(url) {
 // Execution:    ChangeGraphAppearanceByAtt( true )
 // It scans the existing node-attributes and t keeps only those which are Numeric.
 //  then, add the button in the html with the sigmaUtils.clustersBy(x) listener.
+// [TODO: fonction un peu lourde dans le profilage]
 function ChangeGraphAppearanceByAtt( manualflag ) {
 
     if ( !isUndef(manualflag) && !TW.colorByAtt ) TW.colorByAtt = manualflag;

libs/css2/custom.css

@@ -28,6 +28,11 @@
     max-height: 10%;
 }
 
+/* searchnav gets same padding as bootstrap's .navbar-nav > li > a */
+#defaultop div#searchnav {
+    padding-top: 13px; 
+    padding-bottom: 9px;
+}
 #sigma-example {
     width: 100%;
     height: 300px;
@@ -45,6 +50,10 @@
 
 .my-legend {
     position:fixed;
+    /* width: we set it smaller than #leftcolumn container's width */
+    width:16%;
+    max-height: 40%;
+    overflow-y:scroll;
     bottom:5px;
     left:5px;
 

libs/css2/freshslider.css

 .fsslider {
 position: relative;
-min-width: 100px;
+/* min-width: 100px; */
+min-width: 75px;
 height: 8px;
 display: inline-block;
 width: 100%;

settings_explorerjs.js

@@ -52,6 +52,8 @@ var TW = {}
     TW.catSoc = "Document";
     TW.catSem = "NGram";
     
+    TW.strSearchBar = "Select or suggest topics";
+
 var ParseCustom = function () {};
 var SigmaUtils = function () {};
 var TinaWebJS = function () {};
@@ -67,7 +69,6 @@ var inactiveColor = '#666';
 var startingNodeId = "1";
 var minLengthAutoComplete = 1;
 var maxSearchResults = 10;
-var strSearchBar = "Search";
 
 var cursor_size_min= 0;
 var cursor_size= 0;

tinawebJS/enviroment.js

@@ -833,6 +833,8 @@ function extractContext(string, context) {
     return begin_pts + str + end_pts;
 }
 
+
+// TODO check duplicate function with sigmaUtils exactfind()
 function searchLabel(string){    
     var id_node = '';
     var n;

tinawebJS/globalUtils.js

@@ -193,6 +193,46 @@ function rgbToHex(r, g, b) {
 }
 
 
+// lowercase etc query strings
+normalizeString = function(string) {
+    if (! typeof string == "string") {
+        return "" ;
+    }
+    else {
+        return $.trim( string.toLowerCase() )
+    }
+}
+
+// html-escape user input strings
+// /!\ TODO check if safe enough?
+saferString = function(string) {
+    // TODO table in an outer scope
+    conversions = { 
+        '&' : '&'   ,
+        '<' : '&lt;'    ,
+        '>' : '&gt;'    ,
+        '"' : '&quot;'  ,
+        "'" : '&apos;'  ,
+        '%' : '&percnt;' 
+    } ;
+    
+    matchables = /[&<>"'%]/ ;
+    
+    if (! typeof string == "string") {
+        return "" ;
+    }
+    else {
+        return string.replace(
+            matchables, 
+            function(char) {
+                return conversions[char]
+            }
+        )
+    }
+}
+
+
+
  /**
   * function to load a given css file 
   */ 

tinawebJS/main.js

@@ -265,7 +265,7 @@ if(RES["OK"]) {
         console.log(typestring)
 
         if(typestring=="0|1") {
-            $("#category0").hide();set_ClustersLegend
+            $("#category0").hide();
             $("#category1").show();
 
             if($("#slidercat1nodesweight").html()=="") 
@@ -364,6 +364,9 @@ if(RES["OK"]) {
 // load optional modules
 ProcessDivsFlags() ;
 
+// grey message in the search bar from settings
+$("#searchinput").attr('placeholder', TW.strSearchBar) ;
+
 console.log("finish")
 
 

tinawebJS/methods.js

@@ -38,6 +38,11 @@ function cancelSelection (fromTagCloud) {
         $("#unselectbutton").hide();
         $("#tips").html(getTips());
     }
+    
+    // we send our "eraseNodeSet" event
+    // (signal for plugins that any selection behavior is finished)
+    $('#searchinput').trigger("tw:eraseNodeSet");
+    
     for(var i in deselections){
         if( !isUndef(TW.partialGraph._core.graph.nodesIndex[i]) ) {
             TW.partialGraph._core.graph.nodesIndex[i].forceLabel=false;

tinawebJS/sigmaUtils.js

@@ -27,6 +27,8 @@ SigmaUtils = function () {
                 
                 if(Number(n.id)==287) console.log("coordinates of node 287: ( "+n.x+" , "+n.y+" ) ")
                 graph.addNode( n.id , node);
+                
+                // fill the "labels" global variable
                 updateSearchLabels( n.id , n.label , n.type);
             }
         }
@@ -148,24 +150,28 @@ function gete(id){
 }
 
 
-function find(label){
+function find(lquery){
     var results=[];
+    if (typeof lquery == 'string' && lquery.length > 0) {
+        lquery=lquery.toLowerCase() ;
         var nds=getnodesIndex();
-    label=label.toLowerCase()
         for(var i in nds){
             var n=nds[i];
             if(n.hidden==false){
                 var possiblematch=n.label.toLowerCase()
-            if (possiblematch.indexOf(label)!==-1) {
+                // string.indexOf(substring) faster than search/match
+                if (possiblematch.indexOf(lquery)!==-1) {
                     results.push(n);
                 }  
             }
         }
+    }
     return results;
 }
 
 function exactfind(label) {
     nds=getnodesIndex();
+    if (typeof lquery == 'string' && lquery.length > 0) {
         for(var i in nds){
             n=nds[i];
             if(!n.hidden){
@@ -174,6 +180,7 @@ function exactfind(label) {
                 }
             }
         }
+    }
     return null;
 }