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

app/corpora/CQiWrapper/CQiWrapper.py

@@ -94,6 +94,7 @@ class CQiWrapper(CQiClient):
         cpos match positions, produced by the query
         query -- query written in cqp query language
         '''
+        self.query = query
         self.cqp_query(self.corpus_name, result_subcorpus_name, query)
         self.result_subcorpus = (self.corpus_name
                                  + ':'
@@ -198,7 +199,8 @@ class CQiWrapper(CQiClient):
         self.results = {'matches': all_matches,
                         'cpos_lookup': all_cpos_infos,
                         'text_lookup': text_lookup,
-                        'total_nr_matches': self.total_nr_matches}
+                        'total_nr_matches': self.total_nr_matches,
+                        'query': self.query}
         return self.results
 
     def get_cpos_infos(self, all_cpos):

app/templates/corpora/analyse_corpus.html.j2

@@ -36,6 +36,7 @@
 }
 </style>
 
+<!-- Query Form -->
 <form id="query-form">
   <div class="col s12">
     <ul class="collapsible expandable">
@@ -43,14 +44,25 @@
         <!-- <div class="collapsible-header">
           <i class="material-icons">search</i>CQP Query
         </div> -->
-        <div class="collapsible-body" style="padding: 0px 2rem;">
+        <!-- Div element above is part of valid materialize collapsible.
+        Commented out to prevent the user from collapsing it and also to save
+        space -->
+        <div class="collapsible-body" style="padding-top: 10px;
+                                             padding-right: 2rem;
+                                             padding-bottom: 0px;
+                                             padding-left: 2rem;">
           <div class="row">
             <div class="col s12 m11">
               <div class="input-field">
                 <i class="material-icons prefix">search</i>
                 {{ query_form.query() }}
                 {{ query_form.query.label }}
-                <span class="helper-text" data-error="wrong" data-success="right"><a href="http://cwb.sourceforge.net/files/CQP_Tutorial/"><i class="material-icons" style="font-size: inherit;">help</i> CQP query language tutorial</a></span>
+                <span class="helper-text" data-error="wrong" data-success="right">
+                  <a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
+                    <i class="material-icons" style="font-size: inherit;">help
+                    </i> CQP query language tutorial
+                  </a>
+                </span>
                 {% for error in query_form.query.errors %}
                   <span class="helper-text red-text">{{ error }}</span>
                 {% endfor %}
@@ -59,7 +71,10 @@
             <div class="col s12 m1">
               <p class="hide-on-small-only" style="
       margin: 0px;">&nbsp;</p>
-              <button class="waves-effect waves-light btn-small right" type="submit">Send<i class="material-icons right">send</i></button>
+              <button class="waves-effect waves-light btn-small right"
+                      type="submit">Send
+                <i class="material-icons right">send</i>
+              </button>
             </div>
           </div>
         </div>
@@ -106,28 +121,54 @@
   </div>
 </form>
 
-<div id="export-query-results-modal" class="modal modal-fixed-footer no-autoinit">
+<!-- Export query results modal -->
-  <!-- <form id="download-query-results-form" method="post"> -->
+<div id="export-query-results-modal"
-    <div class="modal-content">
+     class="modal modal-fixed-footer no-autoinit">
-      {{ query_download_form.hidden_tag() }}
+  <div class="modal-content">
-      <h4>Download current query Results</h4>
+    {{ query_download_form.hidden_tag() }}
-      <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>
+    <h4>Download current query Results</h4>
-      <div class="input-field">
+    <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>
-        <i class="material-icons prefix">insert_drive_file</i>
+    <table>
-        {{ query_download_form.file_type() }}
+      <tr>
-        {{ query_download_form.file_type.label }}
+        <td>JSON</td>
-        {% for error in query_download_form.file_type.errors %}
+        <td>
-        <span class="helper-text red-text">{{ error }}</span>
+          <a class="btn waves-effect waves-light" id="download-results">Download
-        {% endfor %}
+            <i class="material-icons right">file_download</i>
-      </div>
+          </a>
-    </div>
+        </td>
-    <div class="modal-footer">
+      </tr>
-      <!-- <button class="btn waves-effect waves-light" id="download-form-submit" type="submit">Download</button> -->
+      <tr>
-      <a class="btn waves-effect waves-light" id="downloadAnchorElem">Download</a>
+        <td>CSV</td>
-    </div>
+        <td>
-  <!-- </form> -->
+          <a class="btn waves-effect waves-light disabled">Download
+            <i class="material-icons right">file_download</i>
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>EXCEL</td>
+        <td>
+          <a class="btn waves-effect waves-light disabled">Download
+            <i class="material-icons right">file_download</i>
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td>HTML</td>
+        <td>
+          <a class="btn waves-effect waves-light disabled">Download
+            <i class="material-icons right">file_download</i>
+          </a>
+        </td>
+      </tr>
+    </table>
+  </div>
+  <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
+  </div>
 </div>
 
+<!-- Loading animation card when query results are being loaded -->
 <div class="row">
   <div class="col s12 hide" id="getting-query-results">
     <div class="card">
@@ -143,6 +184,7 @@
   </div>
 </div>
 
+<!-- table showing the query results -->
 <div class="row">
   <div class="col s12" id="recieved-query-results">
     <div class="card">
@@ -169,6 +211,8 @@
   </div>
 </div>
 
+<!-- Loding animation modal that waits for the CQP server container to be ready
+-->
 <div id="loading-modal" class="modal no-autoinit">
   <div class="modal-content">
     <h4>Waiting for analysis software</h4>
@@ -178,6 +222,7 @@
   </div>
 </div>
 
+<!-- Context modal used for detailed information about one match -->
 <div id="context-modal" class="modal modal-fixed-footer">
   <div class="modal-content">
     <h4>Match context and information</h4>
@@ -240,8 +285,8 @@
 
   var queryFormElement = document.getElementById("query-form");
   var queryResultsElement = document.getElementById("query-results");
-  var queryResultsMetadataElement = document.getElementById("query-results-metadata")
+  var queryResultsMetadataElement = document.getElementById("query-results-metadata");
-  var exportQueryResults = document.getElementById("export-query-results")
+  var exportQueryResults = document.getElementById("export-query-results");
   exportQueryResults.onclick = function() {
     exportModal.open();
   };
@@ -387,21 +432,42 @@
                                  }],
                      valueNames: ["text-titles", "left-context", "hit", "right-context"]};
       var userList = new List('result-list', options);
+
       var inspectBtns = document.getElementsByClassName("inspect");
       for(var i = 0; i < inspectBtns.length; i++) {
         var inspectBtn = inspectBtns[i];
         var dataIndex = inspectBtn.parentNode.parentNode.getAttribute("data-index");
         inspectBtn.onclick = function() {
-          exportModal.open();
+          contextModal.open();
           nopaque.socket.emit("inspect_match", {"cpos": matches[dataIndex]["hit"]});
         };
       }
-    // download results as JSON
+
-    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(message, undefined, 2));
+    // Function to download data to a file
-    console.log(dataStr);
+    function download(downloadElem, data, filename, type) {
-    var downloadAnchorElem = document.getElementById("downloadAnchorElem");
+        var file = new Blob([data], {type: type});
-    downloadAnchorElem.setAttribute("href", dataStr);
+        if (window.navigator.msSaveOrOpenBlob) // IE10+
-    downloadAnchorElem.setAttribute("download", "results.json");
+            window.navigator.msSaveOrOpenBlob(file, filename);
+        else { // Others
+            var url = URL.createObjectURL(file);
+            downloadElem.href = url;
+            downloadElem.download = filename;
+        }
+    }
+    // create json filename for download
+    var today = new Date();
+    var currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
+    var currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
+    var safeFilename = message['query'].replace(/[^a-z0-9_-]/gi, "_");
+    var resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename + ".json";
+    // get a where download is served
+    var downloadResults = document.getElementById("download-results");
+    // stringify JSON object for json download
+    var dataStr = JSON.stringify(message, undefined, 2);
+    downloadResults.onclick = download(downloadResults,
+                                       dataStr,
+                                       resultFilename,
+                                       "text/json");
   });