Merge lp:~ben-hutchings/ensoft-sextant/autocomplete-fix into lp:ensoft-sextant

[Ben Hutchings]

Web gui now has a hard limit on how many functions it is willing to get for the autocomplete menu. If there are more than this number of functions in the program, the empty list will be returned. Maximum number of functions is set to 75 at present - more than this leads to drop down lists not displaying properly sometimes.

Substring search in function names. Debouncing (one second timer at present).

Fixed bug that was completely stopping the autocomplete from being called!

[Ben Hutchings (ben-hutchings)]

Also the limit is hardcoded in web/server.py, not db_api.py.

[Robert (rjwills)]

review: Approve

[lp:~ben-hutchings/ensoft-sextant/autocomplete-fix]

37. By Ben Hutchings on 2014-11-21

whitespace changes, added missing var

38. By Ben Hutchings on 2014-11-21

indentation fix

Unmerged revisions

=== modified file 'resources/sextant/web/interface.html'
--- resources/sextant/web/interface.html	2014-09-04 09:46:18 +0000
+++ resources/sextant/web/interface.html	2014-11-21 12:32:15 +0000
@@ -17,8 +17,8 @@
     <div class="toolbar">
         <div>
             Program: 
-            <input list="program_names" id="program_name" class="textbox"
-                   onblur="get_names_for_autocomplete('funcs')" style="width: 150px" />
+            <input list="program_names" id="program_name" class="textbox" style="width: 150px" /> 
+            <!-- onblur="get_names_for_autocomplete('funcs')" -->
             <datalist id="program_names"></datalist>
 
             <select id="query_list" class="dropdown" onchange="display_when();">
@@ -44,13 +44,14 @@
         </div>
         <div id="toolbar-row2" style="margin-left: 234px;">
             <!--list to populate arguments.  Updates when program name is specified-->
-            <datalist id="function_names"></datalist>
+            <datalist id="function_names_1"></datalist>
+            <datalist id="function_names_2"></datalist>
 
             <span id="argument_1" style="size:20;"></span>
-            <input list="function_names" id="function_1" class="textbox" style="size:20;"></input>
+            <input list="function_names_1" autocomplete="off" id="function_1" class="textbox" style="size:20;" onkeyup="get_names_for_autocomplete('funcs_with_timeout_1')"></input>
 
             <span id="argument_2" style="size:20;"></span>
-            <input list="function_names" id="function_2" class="textbox" style="size:20;"></input>
+            <input list="function_names_2" autocomplete="off" id="function_2" class="textbox" style="size:20;" onkeyup="get_names_for_autocomplete('funcs_with_timeout_2')"></input>
         </div>
     </div>
 

=== modified file 'resources/sextant/web/queryjavascript.js'
--- resources/sextant/web/queryjavascript.js	2014-09-29 21:08:33 +0000
+++ resources/sextant/web/queryjavascript.js	2014-11-21 12:32:15 +0000
@@ -6,54 +6,84 @@
 //server or function names from a specific program.
 
 
-function get_names_for_autocomplete(info_needed){
+var timeout = null;
+var do_timeout = false;
+
+
+function get_names_for_autocomplete(info_needed, search) {
     //Function queries to database to create a list 
     //which is used to populate the auto-complete text boxes.
+    if (typeof search == 'undefined') {
+        search = "";
+    }
+    
     var xmlhttp = new XMLHttpRequest();
-    xmlhttp.onreadystatechange = function(){
-        if (xmlhttp.status = 200){
+    xmlhttp.onreadystatechange = function() {
+        if (xmlhttp.status = 200) {
             var values_list = xmlhttp.responseText;
             if (values_list != "") {
                 values_list = JSON.parse(values_list);
-                if (info_needed =='programs'){
+                if (info_needed =='programs') {
                     //We need to populate the program names list
                     add_options("program_names", values_list);
-                }
-                if (info_needed =='funcs'){
-                    //We need to populate the functions list for the arguments
-                    add_options("function_names", values_list);
-                }    
+                    do_timeout = false;
+                }
+                if (info_needed == 'funcs_with_timeout_1') {
+                    add_options("function_names_1", values_list);
+                    do_timeout = true;
+                }
+                if (info_needed == 'funcs_with_timeout_2') {
+                    add_options("function_names_2", values_list);
+                    do_timeout = true;
+                }
             }
         }
     }
-    if (info_needed == 'programs'){
+    
+    if (info_needed == 'programs') {
         var string = "/database_properties?query=" + info_needed + "&program_name=";
-    }
-    else{
-        var string = "/database_properties?query=" + "functions" + 
-        "&program_name=" + document.getElementById("program_name").value;
-    if (info_needed == 'programs'){
-        var string = "/database_properties?query=" + 
-        info_needed + "&program_name=" + prog_name;
-    }
+        xmlhttp.open("GET", string, true);
+        xmlhttp.send();
+    } else {
+        var target = null;
+
+        if (info_needed == 'funcs_with_timeout_1') {
+            target = 'function_1';
+        } else {
+            target = 'function_2';
+        }
+
+        var timeoutfn = function() {
+                var string = "/database_properties?query=" + "functions" + 
+                "&program_name=" + document.getElementById("program_name").value +
+                "&search=" + document.getElementById(target).value;
+                xmlhttp.open("GET", string, true);
+                xmlhttp.send();
+                timeout = null;
+        };
+
+        if (do_timeout == true && timeout === null) {
+            timeout = window.setTimeout(timeoutfn, 1000);
+        } else if (do_timeout == true) {
+            window.clearTimeout(timeout);
+            timeout = window.setTimeout(timeoutfn, 1000);
+        } else {
+            timeoutfn();
+        }
+
     //"GET" information from the specified url (string)
-    xmlhttp.open("GET", string, true);
-    xmlhttp.send();
     }
-    xmlhttp.open("GET", string, true);
-    xmlhttp.send();
 }
 
 
-function add_options(selectedlist, values_list){
+function add_options(selectedlist, values_list) {
     //Adds all the options obtained from the list of program 
     //names or function names to an auto complete drop-down box
     var options = ''
-    if (values_list.length == 1 || values_list.length ==0){
+    if (values_list.length == 1 || values_list.length ==0) {
         options += '<option value="'+values_list+'"/>';
-    }
-    else{
-        for (var i=0; i < values_list.length;++i){
+    } else {
+        for (var i=0; i < values_list.length;++i) {
             options += '<option value="'+values_list[i]+'"/>';
         }
     }
@@ -84,48 +114,47 @@
 }
 
     
-function display_when(){
+function display_when() {
     //For each query specifies when auto-complete text boxes should be made 
     //visible or invisible and makes them read only
     var query_list = document.getElementById("query_list");
 
     var no_functions = new Array();
     var prog_name = document.getElementById("program_name").value;
-    if (query_list.options[query_list.selectedIndex].value == "functions_calling"){
+    if (query_list.options[query_list.selectedIndex].value == "functions_calling") {
         set_arguments("Function being called", "");
     }
-    if (query_list.options[query_list.selectedIndex].value == "functions_called_by"){
+    if (query_list.options[query_list.selectedIndex].value == "functions_called_by") {
         set_arguments("Function calling", "");
     }
-    if (query_list.options[query_list.selectedIndex].value == "all_call_paths"){
+    if (query_list.options[query_list.selectedIndex].value == "all_call_paths") {
         set_arguments("Function calling", "Function being called");
     }
-    if (query_list.options[query_list.selectedIndex].value == "shortest_call_path"){
+    if (query_list.options[query_list.selectedIndex].value == "shortest_call_path") {
         set_arguments("Function calling", "Function being called");
     }
     if (query_list.options[query_list.selectedIndex].value == "whole_program") {
         set_arguments("", "");
     }
-    if (query_list.options[query_list.selectedIndex].value == "function_names"){
+    if (query_list.options[query_list.selectedIndex].value == "function_names") {
         set_arguments("", "");
     }
 }
 
 
 
-function execute_query(){
+function execute_query() {
     document.getElementById("output_image").src = "";
 
     //Returns error in alert window if query not executed properly, 
     //otherwise performs the query and outputs it
     show_item("please-wait");
     var query_id = document.getElementById("query_list").value;
-    if (query_id == "function_names"){
+    if (query_id == "function_names") {
         //url for page containing all function names
         var string = "/database_properties?program_name=" + 
         document.getElementById("program_name").value + "&query=functions";
-    }
-    else{
+    } else {
         //If not function names we will want a graph as an output; 
         //url returns svg file of graph.
                 // We use a random number argument to prevent caching.
@@ -141,11 +170,11 @@
     var xmlhttp = new XMLHttpRequest();
         xmlhttp.open("GET", string, true);
         xmlhttp.send();
-    xmlhttp.onreadystatechange = function(){
-        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
+    xmlhttp.onreadystatechange = function() {
+        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             //readyState == 4 means query has finished executing.
             //status == 200 means "GET"ing has been successful.
-            if (query_id == "function_names"){
+            if (query_id == "function_names") {
                 //Text output displayed in paragraph.
                 document.getElementById("function_names_output").innerHTML = 
                         xmlhttp.responseText;
@@ -158,24 +187,19 @@
                 var dataUrl = "data:image/svg+xml;base64," + btoa(xmlhttp.responseText);
                 document.getElementById("output_image").src = dataUrl;
             }
-        }
-        else if (xmlhttp.readyState == 4 && xmlhttp.status == 400){
-            //Error occurred during query; display response.
-            show_error(xmlhttp.responseText);
-        }
-        else if(xmlhttp.readyState == 4 && xmlhttp.status == 404){
-            //Error occurred during query; display response.
-            show_error(xmlhttp.responseText);
-        }
-        else if(xmlhttp.readyState ==4 && xmlhttp.status == 204){
+        } else if (xmlhttp.readyState == 4 && xmlhttp.status == 400) {
+            //Error occurred during query; display response.
+            show_error(xmlhttp.responseText);
+        } else if(xmlhttp.readyState == 4 && xmlhttp.status == 404) {
+            //Error occurred during query; display response.
+            show_error(xmlhttp.responseText);
+        } else if(xmlhttp.readyState ==4 && xmlhttp.status == 204) {
             //Query executed correctly but graph returned is empty
             show_error("Graph returned was empty");
-        }
-        else if (xmlhttp.readyState == 4 && xmlhttp.status == 502) {
+        } else if (xmlhttp.readyState == 4 && xmlhttp.status == 502) {
             //Error occurs if Neo4j isn't running
             show_error("Bad Gateway received - are you sure the database server is running?");
-        }
-        else if(xmlhttp.readyState ==4){
+        } else if(xmlhttp.readyState ==4) {
             //query executed correctly
             show_error("An unknown error occurred");
         }

=== modified file 'src/sextant/db_api.py'
--- src/sextant/db_api.py	2014-10-23 11:15:48 +0000
+++ src/sextant/db_api.py	2014-11-21 12:32:15 +0000
@@ -832,7 +832,7 @@
         result = self._db.query(q, returns=neo4jrestclient.Node)
         return bool(result)
 
-    def get_function_names(self, program_name):
+    def get_function_names(self, program_name, search, max_funcs):
         """
         Execute query to retrieve a list of all functions in the program.
         Any of the output names can be used verbatim in any SextantConnection
@@ -845,8 +845,13 @@
         if not validate_query(program_name):
             return set()
 
-        q = (' MATCH (:program {{name: "{}"}})-[:subject]->(f:func)'
-             ' RETURN f.name').format(program_name)
+        if not search:
+            q = (' MATCH (:program {{name: "{}"}})-[:subject]->(f:func)'
+                 ' RETURN f.name LIMIT {}').format(program_name, max_funcs)
+        else:
+            q = (' MATCH (:program {{name: "{}"}})-[:subject]->(f:func)'
+                 ' WHERE f.name =~ ".*{}.*" RETURN f.name LIMIT {}'
+                 .format(program_name, search, max_funcs))
         return {func[0] for func in self._db.query(q)}
 
     def get_all_functions_called(self, program_name, function_calling):

=== modified file 'src/sextant/web/server.py'
--- src/sextant/web/server.py	2014-10-13 15:09:08 +0000
+++ src/sextant/web/server.py	2014-11-21 12:32:15 +0000
@@ -29,6 +29,10 @@
 # global SextantConnection object which deals with the port forwarding
 CONNECTION = None
 
+# The maximum number of matches to display for autocomplete. If more than
+# this are matched, nothing will be returned.
+AUTOCOMPLETE_NAMES_LIMIT = 75
+
 RESPONSE_CODE_OK = 200
 RESPONSE_CODE_BAD_REQUEST = 400
 RESPONSE_CODE_NOT_FOUND = 404
@@ -218,8 +222,15 @@
         return CONNECTION.get_program_names()
 
     @staticmethod
-    def _get_function_names(program_name):
-        return CONNECTION.get_function_names(program_name)
+    def _get_function_names(program_name, search=""):
+        # For the returned data, we must allow one more name than
+        # the maximum so that we know if the maximum was exceeded rather
+        # than only met.
+        max_funcs = AUTOCOMPLETE_NAMES_LIMIT + 1
+        programs = CONNECTION.programs_with_metadata()
+        result = CONNECTION.get_function_names(program_name, search, max_funcs)
+        return result if len(result) < max_funcs else set()
+        
 
     @defer.inlineCallbacks
     def _render_GET(self, request):
@@ -247,19 +258,21 @@
                 request.finish()
                 defer.returnValue(None)
             program_name = request.args['program_name'][0]
+            search = request.args.get('search', [''])[0]
 
-            funcnames = yield deferToThread(self._get_function_names, program_name)
+            funcnames = yield deferToThread(self._get_function_names, program_name, search)
             if funcnames is None:
                 request.setResponseCode(404)
                 request.setHeader("content-type", "text/plain")
                 request.write("No program with name %s was found in the Sextant." % escape(program_name))
                 request.finish()
                 defer.returnValue(None)
+            else:
+                request.setHeader("content-type", "application/json")
+                request.write(json.dumps(list(funcnames)))
 
-            request.setHeader("content-type", "application/json")
-            request.write(json.dumps(list(funcnames)))
-            request.finish()
-            defer.returnValue(None)
+                request.finish()
+                defer.returnValue(None)
 
         else:
             request.setResponseCode(400)