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

app/static/js/nopaque.CorpusAnalysisClient.js

@@ -5,7 +5,7 @@ class CorpusAnalysisClient {
     this.displays = {};
     this.socket = socket;
 
-    // socket on event fpr corpous analysis initialization
+    // socket on event for corpous analysis initialization
     socket.on("corpus_analysis_init", (response) => {
       var errorText;
 
@@ -20,7 +20,8 @@ class CorpusAnalysisClient {
       } else {
         errorText = `Error ${response.code} - ${response.msg}`;
         if (this.displays.init.errorContainer != undefined)  {
-          this.displays.init.errorContainer.innerHTML = `<p class="red-text"><i class="material-icons tiny">error</i> ${errorText}</p>`;
+          this.displays.init.errorContainer.innerHTML = `<p class="red-text">` +
+                   `<i class="material-icons tiny">error</i> ${errorText}</p>`;
         }
         if (this.displays.init != undefined)  {
           this.displays.init.setVisibilityByStatus("error");
@@ -45,7 +46,8 @@ class CorpusAnalysisClient {
         errorText = `Error ${response.payload.code} - ${response.payload.msg}`;
         nopaque.flash("error", errorText);
         if (this.displays.query.errorContainer != undefined)  {
-          this.displays.query.errorContainer.innerHTML = `<p class="red-text"><i class="material-icons tiny">error</i> ${errorText}</p>`;
+          this.displays.query.errorContainer.innerHTML = `<p class="red-text">`+
+                    `<i class="material-icons tiny">error</i> ${errorText}</p>`;
         }
         if (this.displays.query != undefined)  {
           this.displays.query.setVisibilityByStatus("error");
@@ -54,13 +56,18 @@ class CorpusAnalysisClient {
       }
     });
 
+
     socket.on("corpus_analysis_query_results", (response) => {
-        if (this.callbacks.query_results != undefined) {this.callbacks.query_results(response.payload);}
+        if (this.callbacks.query_results != undefined) {
+          this.callbacks.query_results(response.payload);
+        }
     });
 
-    // TODO: set callback for this
+    socket.on("corpus_analysis_inspect_match", (response) => {
-    // get context of one match if inspected via socket.io
+      if (this.callbacks.query_match_context != undefined) {
-    socket.on("corpus_analysis_inspect_match", (response) => { results.resultsList.showMatchContext(response)});
+        this.callbacks.query_match_context(response);
+      }
+    });
   }
 
   init() {

app/static/js/nopaque.lists.js

@@ -129,8 +129,11 @@ RessourceList.options = {
 class ResultsList extends List {
   constructor(idOrElement, options={}) {
   super(idOrElement, options);
-  this.eventTokens = {};  // all span tokens which are holdeing events if expert mode is on
+  this.eventTokens = {};  // all span tokens which are holdeing events if expert
-  this.currentExpertTokenElements = {};
+  // mode is on. Collected here to delete later on
+  this.currentExpertTokenElements = {}; // all token elements which have added
+  // classes like chip and hoverable for expert view. Collected
+  //here to delete later on
   }
 
 
@@ -261,8 +264,8 @@ class ResultsList extends List {
       tokenHTMlElement = this.HTMLTStrToElement(htmlTokenStr)
       tokenHTMLArray.push(tokenHTMlElement);
     }
-    console.log(tokenHTMLArray);
+    // console.log(tokenHTMLArray);
-    console.log(uniqueS);
+    // console.log(uniqueS);
 
     for (let sId of uniqueS) {
       let htmlSentence = `<span class="sentence" data-sid="${sId}"></span>`;
@@ -297,7 +300,7 @@ class ResultsList extends List {
     };
 
     nrOfContextSentences.onchange = (event) => {
-      console.log(event.target.value);
+      // console.log(event.target.value);
       this.changeSentenceContext(event.target.value);
     }
 
@@ -340,7 +343,7 @@ class ResultsList extends List {
     let toHideArray;
     let toShowArray;
     sValue = maxSValue - sValue;
-    console.log(sValue);
+    // console.log(sValue);
     sentences = document.getElementById("context-results").getElementsByClassName("sentence");
     array = Array.from(sentences);
     if (sValue != 0) {
@@ -350,9 +353,9 @@ class ResultsList extends List {
       toHideArray = [];
       toShowArray = array;
     }
-    console.log(array);
+    // console.log(array);
-    console.log("#######");
+    // console.log("#######");
-    console.log(toHideArray);
+    // console.log(toHideArray);
     for (let s of toHideArray) {
       s.classList.add("hide");
     }

app/templates/corpora/analyse_corpus.html.j2

@@ -26,7 +26,8 @@
                 {{ query_form.query.label }}
                 <span class="helper-text">
                   <a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
-                    <i class="material-icons" style="font-size: inherit;">help</i>
+                    <i class="material-icons" style="font-size: inherit;">help
+                    </i>
                     CQP query language tutorial
                   </a>
                 </span>
@@ -49,10 +50,12 @@
         <form id="display-options-form">
           <div class="row">
             <div class="col s12 m6">
-              {{ M.render_field(display_options_form.results_per_page, material_icon='format_list_numbered') }}
+              {{ M.render_field(display_options_form.results_per_page,
+                                material_icon='format_list_numbered') }}
             </div>
             <div class="col s12 m6">
-              {{ M.render_field(display_options_form.result_context, material_icon='short_text') }}
+              {{ M.render_field(display_options_form.result_context,
+                                material_icon='short_text') }}
             </div>
             <div class="col s12">
               {{ M.render_field(display_options_form.expert_mode) }}
@@ -79,11 +82,15 @@
               <span id="match-count"></span>
               matches loaded.
               <br>
-              Matches occured in <span id="text-lookup-count"></span> corpus files.
+              Matches occured in
+              <span id="text-lookup-count"></span>
+              corpus files.
             </p>
             <p id="query-results-user-feedback">
               <i class="material-icons">help</i>
-              The Server is still sending your results. Functions like "Export Results" and "Match Inspect" will be available after all matches have been loaded.
+              The Server is still sending your results.
+              Functions like "Export Results" and "Match Inspect" will be
+              available after all matches have been loaded.
             </p>
           </div>
           <div class="row">
@@ -94,7 +101,14 @@
         </div>
         <div class="col s12 m6 l6">
           <div class="row">
-            <button id="query-results-export" class="waves-effect waves-light btn-small right disabled" type="submit">Export Results<i class="material-icons right">file_download</i></button>
+            <button id="query-results-export"
+                    class="waves-effect
+                           waves-light
+                           btn-small
+                           right disabled"
+                    type="submit">Export Results
+                    <i class="material-icons right">file_download</i>
+            </button>
           </div>
         </div>
         <!-- Table showing the query results -->
@@ -139,12 +153,15 @@
      class="modal modal-fixed-footer no-autoinit">
   <div class="modal-content">
     <h4>Download current query Results</h4>
-    <p>The results of the current query can be downlaoded as several files like csv or json. Those files can be used in other software like excel. Also it is easy to publish your results as raw data like this!</p>
+    <p>The results of the current query can be downloaded as several files like
+       csv or json. Those files can be used in other software like Excel.
+       Also it is easy to publish your results as raw data like this!</p>
     <table>
       <tr>
         <td>JSON</td>
         <td>
-          <a class="btn waves-effect waves-light" id="download-results-json">Download
+          <a class="btn waves-effect waves-light" id="download-results-json">
+             Download
             <i class="material-icons right">file_download</i>
           </a>
         </td>
@@ -152,7 +169,9 @@
       <tr>
         <td>CSV</td>
         <td>
-          <a class="btn waves-effect waves-light disabled" id="download-results-csv">Download
+          <a class="btn waves-effect waves-light disabled"
+             id="download-results-csv">
+             Download
             <i class="material-icons right">file_download</i>
           </a>
         </td>
@@ -186,9 +205,10 @@
     <h4>Match Inspect</h4>
     <div id="inspect-display-options">
       <form>
-        <div class="row">
         <ul class="collection with-header">
-          <li class="collection-header"><h5>Display options</h5></li>
+          <li class="collection-header">
+            <h5>Display options</h5>
+          </li>
           <li class="collection-item">
               {{ inspect_display_options_form.expert_mode_inspect.label.text }}
             <div class="secondary-content">
@@ -231,14 +251,12 @@
             </div>
           </li>
         </ul>
-        </div>
       </form>
     </div>
-    <div>
+    <div class="col s12" >
       <h5>Context</h5>
-      <div class="row">
+      <div id="context-results" style="hyphens: auto;
-        <div class="clo s12" id="context-results" style="overflow-wrap: break-word;">
+                                     overflow: auto;">
-        </div>
       </div>
     </div>
   </div>
@@ -259,25 +277,12 @@
 // ###### Defining global variables used in other functions ######
   var client;  // CorpusAnalysisClient first undefined on DOMContentLoaded defined
   var collapsibleElements;  // All collapsibleElements on this page
-  var collapsibleElements;  // all collapsibles on site
   var contextModal;  // Modal to open on inspect for further match context
-  var contextPerItemElement;
-  var contextSentencesElement;
-  var displayOptionsData;  // Getting form data from display options
-  var displayOptionsFormElement;  // Form holding the display informations
-  var downloadResultsJSONElement;  // button for downloading results as JSON
   var expertModeSwitchElement; // Expert mode switch Element
-  var exportModal;  // Download options modal
-  var firstPageElement;  // first page element of resultsList pagination
-  var hitsPerPageInputElement;
   var initDisplay;  // CorpusAnalysisDisplay object first undfined on DOMContentLoaded defined
-  var initDisplayElement;  // Element for initialization using initDisplay
-  var initModal;
   var matchCountElement;  // Total nr. of matches will be displayed in this element
-  var paginationElements;
   var progress;  // global progress value
   var queryDisplay; // CorpusAnalysisDisplay object first undfined on DOMContentLoaded defined
-  var queryDisplayElement;  // Element for initialization using queryDisplay
   var queryFormElement;  // the query form
   var queryResultsDeterminateElement;  // The progress bar for recieved results
   var queryResultsExportElement;  // Download button opens download modal
@@ -289,7 +294,21 @@
   var resultsList;  // resultsList object
   var resultsListOptions;  // specifies ResultsList options
   var textLookupCountElement  // Nr of texts the matches occured in will be shown in this element
-  var xpath;  // xpath to grab first resultsList page pagination element
+
+  // ###### Defining local scope variables ######
+  let contextPerItemElement;  // Form Element for display option
+  let contextSentencesElement;  // Form Element for display option in inspect
+  let displayOptionsData;  // Getting form data from display options
+  let displayOptionsFormElement;  // Form holding the display informations
+  let downloadResultsJSONElement;  // button for downloading results as JSON
+  let exportModal;  // Download options modal
+  let firstPageElement;  // first page element of resultsList pagination
+  let hitsPerPageInputElement;
+  let initDisplayElement;  // Element for initialization using initDisplay
+  let initModal;
+  let paginationElements;
+  let queryDisplayElement;  // Element for initialization using queryDisplay
+  let xpath;  // xpath to grab first resultsList page pagination element
 
   // ###### Initialize variables ######
   client = undefined;
@@ -312,6 +331,8 @@
   queryResultsUserFeedbackElement = document.getElementById("query-results-user-feedback");
   receivedMatchCountElement = document.getElementById("received-match-count");
   textLookupCountElement = document.getElementById("text-lookup-count");
+  hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
+  contextPerItemElement = document.getElementById("display-options-form-result_context");
 
   // ###### js list options and intialization ######
   displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@@ -360,6 +381,9 @@
     client.setCallback("query_results", (payload) => {
       queryRenderResults(payload);
     });
+    client.setCallback("query_match_context", (payload) => {
+      results.resultsList.showMatchContext(payload);
+    })
 
     // Trigger corpus analysis initialization on server side
     client.init();
@@ -374,7 +398,11 @@
         // valid result page element from the new pagination.
         firstPageElement;
         xpath = '//a[@class="page" and text()=1]';
-        firstPageElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+        firstPageElement = document.evaluate(xpath,
+                                             document,
+                                             null,
+                                             XPathResult.FIRST_ORDERED_NODE_TYPE,
+                                             null).singleNodeValue;
         firstPageElement.click();
       } catch (e) {
       }
@@ -386,20 +414,12 @@
     });
 
     // live update of hits per page if hits per page value is changed
-    hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
     let changeHitsPerPageBind = results.resultsList.changeHitsPerPage.bind(results.resultsList);
     hitsPerPageInputElement.onchange = changeHitsPerPageBind;
 
     // live update of lr context per item if context value is changed
-    contextPerItemElement = document.getElementById("display-options-form-result_context");
     contextPerItemElement.onchange = results.resultsList.changeContext;
 
-    // live update of context sentences in inspect modal
-    contextSentencesElement.onchange = (event) => {
-      let sValue = event.target.value;
-      console.log(sValue);
-    }
-
     // eventListener if pagination is used to apply new context size to new page
     // and also activate inspect match if progress is 100
     for (let element of paginationElements) {