Add automatic query display option changes

app/corpora/CQiWrapper/CQiWrapper.py

@@ -248,7 +248,7 @@ class CQiWrapper(CQiClient):
             s_value = s_value[0].split('_', 1)[-1]
             logger.warning('S_VALUE: {}'.format(s_value))
             struct_values = self.cl_struc2str(s_key[0], text_lookup_ids)
-            logger.warning('Extracted Value with key {}: {}'.format(s_key[0],struct_values))
+            logger.warning('Extracted Value with key {}: {}'.format(s_key[0], struct_values))
             zipped = dict(zip(text_lookup_ids, struct_values))
             for zip_key, zip_value in zipped.items():
                 logger.warning('Text id as key is: {}'.format(zip_key))

app/corpora/events.py

@@ -37,7 +37,7 @@ def corpus_analysis(message):
     # Prepare and execute a query
     corpus_name = 'CORPUS'
     query = str(message['query'])
-    result_len = 200
+    result_len = 200  # int(message['hits_per_page'])
     context_len = int(message['context'])
     result_offset = 0
     client.select_corpus(corpus_name)

app/templates/corpora/analyse_corpus.html.j2

@@ -53,7 +53,7 @@
         <div class="collapsible-body">
           <div class="row">
             <div class="col s6">
-              <div class="input-field">
+              <div class="input-field" id="hits-per-page">
                 <i class="material-icons prefix">format_list_numbered</i>
                 {{ query_form.hits_per_page() }}
                 {{ query_form.hits_per_page.label }}
@@ -63,7 +63,7 @@
               </div>
             </div>
             <div class="col s6">
-              <div class="input-field">
+              <div class="input-field" id ="context-per-item">
                 <i class="material-icons prefix">short_text</i>
                 {{ query_form.context() }}
                 {{ query_form.context.label }}
@@ -253,16 +253,23 @@
   var result;
   var resultList;
 
-  // Get query form element and save its data on submit and send this data via
+  //function to get queryData
-  // socket.io to the CQP server
+  function getQueryData(queryFormElement) {
-  var queryFormElement = document.getElementById("query-form");
+    // Get query form element and save its data on submit and send this data via
-  queryFormElement.addEventListener("submit", function(event) {
+    formData = new FormData(queryFormElement);
-    event.preventDefault();
-    let formData = new FormData(queryFormElement);
     queryData = {"context": formData.get("context"), // global declaration
                  "hits_per_page": formData.get("hits_per_page"),
                  "query": formData.get("query")};
-    hitsPerPage = formData.get("hits_per_page");
+    return queryData
+  }
+
+  // socket.io analysis submit to the CQP server
+  let queryFormElement = document.getElementById("query-form");
+  queryFormElement.addEventListener("submit", sendQuery);
+
+  function sendQuery(event) {
+    event.preventDefault();
+    queryData = getQueryData(queryFormElement);
     nopaque.socket.emit("corpus_analysis", queryData);
     // full results object declaration, kind of global maybe store it later?
     // will always be reset if a query is sent, so that only the chunks of the
@@ -271,6 +278,7 @@
     result["matches"] = [];
     result["cpos_lookup"] = {};
     result["text_lookup"] = {};
+    result["loaded_match_count"] = 0;
     result["match_count"] = 0;
     result["query"] = "";
     // some hiding/showing for loading animation
@@ -278,7 +286,7 @@
     queryResultsTableElement.classList.add("hide");
     nopaque.toast("Query has been sent!");
 
-    var options = {page: hitsPerPage,
+    resultListOptions = {page: queryData["hits_per_page"],
       pagination: [{
         name: "paginationTop",
         paginationClass: "paginationTop",
@@ -291,10 +299,41 @@
       }],
       valueNames: ["titles", "lc", "hit", "rc", {data: ["index"]}],
       item: `<span class="hidden"></span>`};
-      resultList = new ResultList('result-list', options);
+      resultList = new ResultList('result-list', resultListOptions);
       resultList.clear(); // empty list for new query
-  });
+  }
 
+  // live update of hits per page
+  var hitsPerPageInputElement = document.getElementById("hits-per-page");
+  hitsPerPageInputElement.addEventListener("change", changeResultList);
+
+  function changeResultList(event) {
+    let queryFormElement = document.getElementById("query-form");
+    queryData = getQueryData(queryFormElement);
+    try {
+      resultList.page = queryData["hits_per_page"];
+      resultList.update();
+      nopaque.toast("Updated matches per page.")
+    } catch (e) {
+      console.log("resultList has no results right now. Live update of items per page is useless for now.");
+    }
+  }
+
+  // live update of lr context per item
+  var contextPerItemElement = document.getElementById("context-per-item");
+  contextPerItemElement.addEventListener("change", changeContext);
+
+  function changeContext(event) {
+    let queryFormElement = document.getElementById("query-form");
+    queryData = getQueryData(queryFormElement);
+    console.log(queryData);
+    try {
+      nopaque.toast("Loading more context.");
+      sendQuery(event);
+    } catch (e) {
+      console.log("No query given.");
+    }
+  }
 
   // socket.on triggered when result chunks are recieved
   nopaque.socket.on("corpus_analysis_query", function(response) {
@@ -327,6 +366,7 @@
     Object.assign(result["cpos_lookup"], chunk["cpos_lookup"]);
     Object.assign(result["text_lookup"], chunk["text_lookup"]);
     result["match_count"] = chunk["match_count"];
+    console.log("Before Current match count", result["loaded_match_count"]);
     result["query"] = queryData["query"];
     console.log(result);
     // Some hiding and showing of loading animations
@@ -344,20 +384,22 @@
     // List building/appending the chunks when query had results
     match_count = chunk["match_count"];
     let count_corpus_files = Object.keys(result["text_lookup"]).length;
-    queryResultsMetadataElement.innerHTML = chunk["match_count"] + " matches in " + count_corpus_files + " corpus files.";
-    queryResultsMetadataElement.appendChild(exportQueryResults);
-    exportQueryResults.classList.remove("hide");
 
     var resultItems = []; // list for holding every row item
     // get infos for full match row
     for (let [index, match] of chunk["matches"].entries()) {
-      resultItems.push({...match, ...{"index": index}});
+      resultItems.push({...match, ...{"index": index + result["loaded_match_count"]}});
     }
     resultList.add(resultItems, items => {
       for (let item of items) {
         item.elm = resultList.createResultRowElement(item, chunk);}
       resultList.update();
     });
+    result["loaded_match_count"] += Object.keys(chunk["matches"]).length;
+    console.log("After current match count", result["loaded_match_count"]);
+    queryResultsMetadataElement.innerHTML = `<p>The query resulted in a total of ${chunk["match_count"]} matches. </p> <p> ${result["loaded_match_count"]} of ${result["match_count"]} matches in ${count_corpus_files} corpus files have been loaded.</p>`;
+    queryResultsMetadataElement.appendChild(exportQueryResults);
+    exportQueryResults.classList.remove("hide");
     });
 
     // inspect match functions
@@ -403,14 +445,6 @@
         }
     }
 
-    // TODO:
-    // if expert switch is clicked and true
-      // add chips and expert info to visible tokenElements
-    // else if expert switch is true and user is using pagination:
-      //add chips and expert info to visible token elements AND remove that information from the tokens that have been visible before (saves later removal steps)
-    // else if expert switch is false:
-      // remove chips and expert info from visible tokens
-
   // epxert mode
   var expertModeSwitchElement = document.getElementById("expert-mode-switch");
   expertModeSwitchElement.addEventListener("change", function(event) {