Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/nopaque into development

web/app/static/css/nopaque.css

@@ -21,8 +21,8 @@ main {
 
 /* preloader circle in the size of a button icon */
 .button-icon-spinner {
-  bottom: -8px !important;
+  bottom: -5px !important;
-  right: -16px !important;
+  right: 0px !important;
   margin-right: 12px !important;
   width: 19.5px !important;
   height: 19.5px !important;

web/app/static/js/nopaque.CorpusAnalysisClient.js

@@ -93,7 +93,8 @@ class CorpusAnalysisClient {
         if (this.callbacks.query_match_context != undefined) {
           this.callbacks.query_match_context(response);
         }
-      } else if (response.type === "sub-results"){
+      } else if (response.type === "sub-results"
+                 || response.type ==="results"){
         if (this.callbacks.save_sub_results_choices != undefined) {
           this.callbacks.save_sub_results_choices(response);
         }

web/app/static/js/nopaque.Results.js

@@ -3,6 +3,7 @@ class Results {
   this.data = data;
   this.jsList = jsList;
   this.metaData = metaData
+  this.resultsData = new Data();
   this.subResultsData = new Data();
   }
 
@@ -89,15 +90,20 @@ class Data {
     this.download(downloadElement, dataStr, resultFilename, "text/json", ".json")
   }
 
-  // createSubResultsData from subResultsTmpData
+  // create results data either from all results or from al lmarked sub results
-  createSubResultsData() {
+  createResultsData(type) {
+    if (type === "sub-results") {
+      resultsCreateElement.classList.add("disabled");  // cqp server cannot handle more than one request at a time. Thus we deactivate the resultsCreateElement
       let tmp = [...results.jsList.addToSubResultsIdsToShow].sort(function(a, b){return a-b});
       let dataIndexes = [];
       tmp.forEach((index) => dataIndexes.push(index - 1));
-      console.log(dataIndexes);
       results.jsList.getMatchWithContext(dataIndexes, "sub-results");
+    } else if (type === "results") {
+      subResultsCreateElement.classList.add("disabled");  // cqp server cannot handle more than one request at a time. Thus we deactivate the subResultsCreateElement
+      let dataIndexes = [...Array(results.data.match_count).keys()];
+      results.jsList.getMatchWithContext(dataIndexes, "results");
+    }
   }
-
 }
 
 class MetaData {

web/app/static/js/nopaque.callbacks.js

@@ -2,34 +2,65 @@
 // Handels incoming corpus metadata
 function recvMetaData(payload) {
   results.metaData.init(payload)
-  console.log(results.metaData);
+  console.log("Metada recieved:", results.metaData);
 }
 
 // This callback is called in socket.on "corpus_analysis_inspect_match" but
 // only if the response.type is "sub-results".
 // Saves the incoming inspect match results into results.subResultsData.
 function saveSubResultsChoices(response) {
-  console.log("Recieve match with context");
+  console.log("Recieving results for export.");
-  results.subResultsData.init();
+  if (response.type === "sub-results") {
-  results.subResultsData.matches.push(...response.payload.matches);
+    results.subResultsData.init();
-  results.subResultsData.addData(response.payload.cpos_lookup, "cpos_lookup");
+    results.subResultsData.matches.push(...response.payload.matches);
-  results.subResultsData.addData(response.payload.text_lookup, "text_lookup");
+    results.subResultsData.addData(response.payload.cpos_lookup, "cpos_lookup");
-  results.subResultsData.addData(results.metaData);
+    results.subResultsData.addData(response.payload.text_lookup, "text_lookup");
-  results.subResultsData.query = results.data.query;
+    results.subResultsData.addData(results.metaData);
-  results.subResultsData.corpus_type = "sub-results";
+    results.subResultsData.query = results.data.query;
-  results.subResultsData.match_count = [...response.payload.matches].length;
+    results.subResultsData.corpus_type = response.type;
-  results.subResultsData.cpos_ranges = response.payload.cpos_ranges;
+    results.subResultsData.match_count = [...response.payload.matches].length;
-  console.log(results.subResultsData);
+    results.subResultsData.cpos_ranges = response.payload.cpos_ranges;
-  subResultsCreateElement.getElementsByClassName("button-icon-spinner")[0].remove();
+    // hides create element after all results are revieved
-  subResultsCreateElement.getElementsByTagName("i")[0].classList.remove("hide");
+    subResultsCreateElement.classList.add("hide");
-  subResultsCreateElement.firstElementChild.classList.add("disabled");
+    // shows export element after create element hs been hidden
-  subResultsExportElement.classList.remove("disabled", "btn-flat");
+    subResultsExportElement.classList.remove("hide", "btn-flat");
-  subResultsExportElement.classList.add("pulse", "btn-small");
+    subResultsExportElement.classList.add("pulse", "btn-small");
-  setTimeout(() => {
+    setTimeout(() => {
-    subResultsExportElement.classList.remove("pulse", "btn-small");
+      subResultsExportElement.classList.remove("pulse", "btn-small");
-    subResultsExportElement.classList.add("btn-flat");
+      subResultsExportElement.classList.add("btn-flat");
-    clearTimeout();
+      clearTimeout();
-  }, 3000)
+    }, 3000)
+    // Resets the subResultsCreateElement (removing spinner with setting innerText)
+    subResultsCreateElement.innerText = "Create Sub-Results";
+    subResultsCreateElement.insertAdjacentHTML("beforeend", `<i class="material-icons left">build</i>`);
+    // reactivate resultsCreateElement
+    resultsCreateElement.classList.remove("disabled");
+  } else if (response.type === "results") {
+    results.resultsData.init();
+    results.resultsData.matches.push(...response.payload.matches);
+    results.resultsData.addData(response.payload.cpos_lookup, "cpos_lookup");
+    results.resultsData.addData(response.payload.text_lookup, "text_lookup");
+    results.resultsData.addData(results.metaData);
+    results.resultsData.query = results.data.query;
+    results.resultsData.corpus_type = response.type;
+    results.resultsData.match_count = [...response.payload.matches].length;
+    results.resultsData.cpos_ranges = response.payload.cpos_ranges;
+    // hides create element after all results are revieved
+    resultsCreateElement.classList.add("hide");
+    // shows export element after create element hs been hidden
+    resultsExportElement.classList.remove("hide", "btn-flat");
+    resultsExportElement.classList.add("pulse", "btn-small");
+    setTimeout(() => {
+      resultsExportElement.classList.remove("pulse", "btn-small");
+      resultsExportElement.classList.add("btn-flat");
+      clearTimeout();
+    }, 3000)
+    // Resets the resultsCreateElement (removing spinner with setting innerText)
+    resultsCreateElement.innerText = "Create Sub-Results";
+    resultsCreateElement.insertAdjacentHTML("beforeend", `<i class="material-icons left">build</i>`);
+    // reactivate subResultsCreateElement
+    subResultsCreateElement.classList.remove("disabled");
+  }
 
 }
 
@@ -43,7 +74,7 @@ function querySetup(payload) {
   nrMarkedMatches.innerText = 0;
   results.jsList.addToSubResultsStatus = {};
   results.jsList.addToSubResultsIdsToShow = new Set();
-  queryResultsExportElement.classList.add("disabled");
+  resultsExportElement.classList.add("disabled");
   addToSubResultsElement.setAttribute("disabled", "");
   queryResultsDeterminateElement.style.width = "0%";
   queryResultsProgressElement.classList.remove("hide");
@@ -89,7 +120,7 @@ function queryRenderResults(payload, imported=false) {
       if (progress === 100) {
         queryResultsProgressElement.classList.add("hide");
         queryResultsUserFeedbackElement.classList.add("hide");
-        queryResultsExportElement.classList.remove("disabled");
+        resultsExportElement.classList.remove("disabled");
         addToSubResultsElement.removeAttribute("disabled");
         // inital expert mode check and sub results activation
         results.jsList.activateInspect();
@@ -109,7 +140,6 @@ function queryRenderResults(payload, imported=false) {
       }
       helperQueryRenderResults(payload);
       progress = 100;
-      console.log(progress);
       results.jsList.activateInspect();
       if (expertModeSwitchElement.checked) {
         results.jsList.expertModeOn("query-display");

web/app/static/js/nopaque.lists.js

@@ -368,7 +368,9 @@ class ResultsList extends List {
   // activate the add buttons
   activateAddToSubResults() {
     subResultsIdListElement.classList.remove("hide");
-    subResultsCreateElement.classList.remove("hide");
+    if (subResultsExportElement.classList.contains("hide")) {
+      subResultsCreateElement.classList.remove("hide");
+    }
     let addToSubResultsBtnElements = document.getElementsByClassName("add");
     for (let addToSubResultsBtn of addToSubResultsBtnElements) {
       addToSubResultsBtn.classList.remove("hide");
@@ -427,13 +429,14 @@ class ResultsList extends List {
     }
     // Toggles the create button accoring to the number of ids in addToSubResultsIdsToShow
     if ([...this.addToSubResultsIdsToShow].length > 0) {
-      subResultsCreateElement.firstElementChild.classList.remove("disabled");
+      subResultsCreateElement.classList.remove("disabled");
     } else if ([...this.addToSubResultsIdsToShow].length === 0) {
-      subResultsCreateElement.firstElementChild.classList.add("disabled");
+      subResultsCreateElement.classList.add("disabled");
     }
     // After a match as been added or removed the export button will be
-    // disabled because the sub-results have been alterd and have to be built //// again.
+    // hidden because the sub-results have been alterd and have to be built //// again. Thus subResultsCreateElement has to be shown again.
-    subResultsExportElement.classList.add("disabled");
+    subResultsExportElement.classList.add("hide");
+    subResultsCreateElement.classList.remove("hide");
     // Also activate/deactivate buttons in the table/jsList results accordingly
     //if button in inspect was activated/deactivated.
     // This part only runs if tableCall is false.

web/app/templates/corpora/analyse_corpus.html.j2

@@ -79,21 +79,37 @@
                 <div class="divider" style="margin-bottom: 10px;"></div>
                 <div class="row">
                   <div class="col s12">
+                    <button class="waves-effect
+                            waves-light
+                            btn-flat"
+                            type="submit"
+                            id="results-create">Create Results
+                      <i class="material-icons left">build</i>
+                    </button>
                     <button id="query-results-export"
                             class="waves-effect
                             waves-light
                             btn-flat
-                            disabled"
+                            hide"
                             type="submit">Results
                       <i class="material-icons left">file_download</i>
                     </button>
                   </div>
                   <div class="col s12">
+                    <button class="waves-effect
+                            waves-light
+                            btn-flat
+                            hide
+                            disabled"
+                            type="submit"
+                            id="sub-results-create">Create Sub-Results
+                      <i class="material-icons left">build</i>
+                    </button>
                     <button id="sub-results-export"
                             class="waves-effect
                             waves-light
                             btn-flat
-                            disabled"
+                            hide"
                             type="submit">Sub-Results
                       <i class="material-icons left">file_download</i>
                     </button>
@@ -127,15 +143,6 @@
                       </textarea>
                     </div>
                   </div>
-                  <div class="col s12 hide" id="sub-results-create-div">
-                    <button class="waves-effect
-                            waves-light
-                            btn-flat
-                            disabled"
-                            type="submit">Create
-                      <i class="material-icons left">build</i>
-                    </button>
-                  </div>
                 </div>
               </div>
               <div class="col s12 m3 l3" id="display">
@@ -370,14 +377,15 @@
   var queryDisplay; // CorpusAnalysisDisplay object first undfined on DOMContentLoaded defined
   var queryFormElement;  // the query form
   var queryResultsDeterminateElement;  // The progress bar for recieved results
-  var queryResultsExportElement;  // Download button opens download modal
+  var resultsExportElement;  // Download button opens download modal
   var queryResultsProgressElement;  // Div element holding the progress bar
   var queryResultsUserFeedbackElement;  // Element showing match count|total etc
   var receivedMatchCountElement;  // Nr. of loaded matches will be displayed in this element
   var results;  // results object
   var resultsList;  // resultsList object
   var resultsListOptions;  // specifies ResultsList options
-  var subResultsCreateElement; // if presses sub results will be created from ids
+  var subResultsCreateElement; // if pressed sub results will be created from ids
+  var resultsCreateElement; // if pressed results will pe created for all matches
   var subResultsExportElement;  // button to download sub results
   var subResultsIdListElement;  // list showing marked matches for sub corpus creation
   var textLookupCountElement  // Nr of texts the matches occured in will be shown in this element
@@ -420,11 +428,12 @@
   queryDisplayElement = document.getElementById("query-display");
   queryFormElement = document.getElementById("query-form");
   queryResultsDeterminateElement = document.getElementById("query-results-determinate");
-  queryResultsExportElement = document.getElementById("query-results-export");
+  resultsExportElement = document.getElementById("query-results-export");
   queryResultsProgressElement = document.getElementById("query-results-progress");
   queryResultsUserFeedbackElement = document.getElementById("query-results-user-feedback");
   receivedMatchCountElement = document.getElementById("received-match-count");
-  subResultsCreateElement = document.getElementById("sub-results-create-div");
+  subResultsCreateElement = document.getElementById("sub-results-create");
+  resultsCreateElement = document.getElementById("results-create");
   subResultsExportElement = document.getElementById("sub-results-export");
   subResultsIdListElement = document.getElementById("sub-results-match-ids-div");
   textLookupCountElement = document.getElementById("text-lookup-count");
@@ -580,37 +589,48 @@
   });
 
   // ### Download events and sub-results creation ###
+
+  var loadingSpinnerHTML = `
+              <div class="preloader-wrapper button-icon-spinner small active">
+                <div class="spinner-layer spinner-green-only">
+                  <div class="circle-clipper left">
+                    <div class="circle"></div>
+                    </div><div class="gap-patch">
+                    <div class="circle"></div>
+                    </div><div class="circle-clipper right">
+                    <div class="circle"></div>
+                  </div>
+                </div>
+              </div>
+              `
+
+  // create results on click from all match ids
+  resultsCreateElement.onclick = () => {
+    resultsCreateElement.getElementsByTagName("i")[0].classList.add("hide");
+    resultsCreateElement.innerText = "Creating...";
+    resultsCreateElement.insertAdjacentHTML("afterbegin", loadingSpinnerHTML);
+    results.data.createResultsData("results");
+  }
+
   // Add onclick to open download modal when Export Results button is pressed
-  queryResultsExportElement.onclick = () => {
+  resultsExportElement.onclick = () => {
     exportModal.open();
     // add onclick to download JSON button and download the file
     downloadResultsJSONElement = document.getElementById("download-results-json")
     downloadResultsJSONElement.onclick = () => {
       let filename = results.data.createDownloadFilename("matches");
       results.data.addData(results.metaData);
-      results.data.downloadJSONRessource(filename, results.data,
+      results.data.downloadJSONRessource(filename, results.resultsData,
                                          downloadResultsJSONElement
       )};
   }
 
   // create sub results on click from shown marked match ids
   subResultsCreateElement.onclick = () => {
-    subResultsCreateElement.getElementsByTagName("i")[0].classList.add("hide");
+    subResultsCreateElement.getElementsByTagName("i")[0].remove();
-    let html = `
+    subResultsCreateElement.innerText = "Creating...";
-                <div class="preloader-wrapper button-icon-spinner small active">
+    subResultsCreateElement.insertAdjacentHTML("afterbegin", loadingSpinnerHTML);
-                  <div class="spinner-layer spinner-green-only">
+    results.data.createResultsData("sub-results");
-                    <div class="circle-clipper left">
-                      <div class="circle"></div>
-                      </div><div class="gap-patch">
-                      <div class="circle"></div>
-                      </div><div class="circle-clipper right">
-                      <div class="circle"></div>
-                    </div>
-                  </div>
-                </div>
-                `
-    subResultsCreateElement.insertAdjacentHTML("afterbegin", html);
-    results.data.createSubResultsData();
   }
 
   // Add onclick to open download modal when sub-results button is pressed