From 7dfc3ab87700c1f45b688874c5fbbad9667eabb6 Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Mon, 20 Jul 2020 13:44:57 +0200
Subject: [PATCH] Add metadata view to nalysis interface and result viewer

---
 web/app/query_results/views.py                |   2 +
 .../static/js/nopaque.CorpusAnalysisClient.js |   2 +-
 .../templates/corpora/analyse_corpus.html.j2  | 143 +++++++++++++--
 .../macros/query_result_macro.html.j2         |  12 +-
 .../templates/query_results/inspect.html.j2   | 164 +++++++++++++-----
 5 files changed, 252 insertions(+), 71 deletions(-)

diff --git a/web/app/query_results/views.py b/web/app/query_results/views.py
index 78fda741..1f17a873 100644
--- a/web/app/query_results/views.py
+++ b/web/app/query_results/views.py
@@ -93,6 +93,7 @@ def inspect_query_result(query_result_id):
     View to inspect one importe result file in a corpus analysis like interface
     '''
     query_result = QueryResult.query.get_or_404(query_result_id)
+    query_metadata = query_result.query_metadata
     if not (query_result.creator == current_user
             or current_user.is_administrator()):
         abort(403)
@@ -117,6 +118,7 @@ def inspect_query_result(query_result_id):
                            display_options_form=display_options_form,
                            inspect_display_options_form=inspect_display_options_form,
                            query_result_file_content=query_result_file_content,
+                           query_metadata=query_metadata,
                            title='Inspect query result')
 
 
diff --git a/web/app/static/js/nopaque.CorpusAnalysisClient.js b/web/app/static/js/nopaque.CorpusAnalysisClient.js
index de550fba..592d61de 100644
--- a/web/app/static/js/nopaque.CorpusAnalysisClient.js
+++ b/web/app/static/js/nopaque.CorpusAnalysisClient.js
@@ -113,7 +113,7 @@ class CorpusAnalysisClient {
   }
 
   getMetaData() {
-    // just emits thos to tell the server to gather all meta data infos and send
+    // just emits this to tell the server to gather all meta data infos and send
     // those back
     this.socket.emit("corpus_analysis_get_meta_data", this.corpusId);
   }
diff --git a/web/app/templates/corpora/analyse_corpus.html.j2 b/web/app/templates/corpora/analyse_corpus.html.j2
index fd71febc..5c1aeedf 100644
--- a/web/app/templates/corpora/analyse_corpus.html.j2
+++ b/web/app/templates/corpora/analyse_corpus.html.j2
@@ -248,14 +248,35 @@
 
 <!-- Metadata modal -->
 {% import "macros/query_result_macro.html.j2" as metadata %}
-<div id="metadata-modal" class="modal bottom-sheet">
-    <div class="modal-content">
-      {{ metadata.show_metadata("testasdasgs") }}
-    </div>
-    <div class="modal-footer">
+<div id="meta-data-modal" class="modal bottom-sheet">
+  <div class="section">
+    <div class="col s12 right-align">
       <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
     </div>
   </div>
+  {% if query_metadata is defined %}
+    <div class="modal-content">
+      {{ metadata.show_metadata(query_metadata) }}
+    </div>
+  {% else %}
+    <div class="modal-content" id="meta-data-modal-content">
+    </div>
+  {% endif %}
+  <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
+  </div>
+</div>
+
+<!-- Metadata text details modal -->
+<div id="modal-text-details" class="modal modal-fixed-footer">
+  <div class="modal-content">
+    <h4>Bibliographic data</h4>
+    <p id="bibliographic-data"></p>
+  </div>
+  <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
+  </div>
+</div>
 
 <!-- Analysis init modal -->
 <div class="modal no-autoinit" id="init-display">
@@ -433,7 +454,7 @@
   var textLookupCountElement  // Nr of texts the matches occured in will be shown in this element
   var textTitlesElement;  // matched text titles
   var nrMarkedMatches;  // count of matches marked for subresults
-  var showMetadataButton;  // Button to show corpus metadata
+  var showMetaDataButton;  // Button to show corpus metadata
   var activateInspectInteraction;  // global interaction element
   var expertModeInteraction;  // global interaction element
   var subResultsInteraction;  // global interaction element
@@ -455,6 +476,7 @@
   let paginationElements;
   let queryDisplayElement;  // Element for initialization using queryDisplay
   let xpath;  // xpath to grab first resultsList page pagination element
+  let metaDataModal;  // modal showing corpus meta data
 
   // ###### Initialize variables ######
   addToSubResultsElement = document.getElementById("add-to-sub-results");
@@ -487,7 +509,8 @@
   textLookupCountElement = document.getElementById("text-lookup-count");
   textTitlesElement = document.getElementById("text-titles");
   nrMarkedMatches = document.getElementById("nr-marked-matches");
-  showMetadataButton = document.getElementById("show-metadata");
+  showMetaDataButton = document.getElementById("show-metadata");
+  metaDataModal = document.getElementById("meta-data-modal");
 
   // ###### js list options and intialization ######
   displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@@ -514,6 +537,14 @@
     contextModal = M.Modal.init(contextModal, defaultOptions);
     exportModal = M.Modal.init(exportModal, defaultOptions);
     initModal = M.Modal.init(initDisplayElement, {"dismissible": false});
+    let deleteOverlay = () => {
+      let overlay = document.getElementsByClassName("modal-overlay")[0];
+      overlay.remove();
+    };
+    metaDataModal = M.Modal.init(metaDataModal, {"preventScrolling": false,
+                                 "opacity": 0.0,
+                                 "dismissible": false,
+                                 "onOpenEnd": deleteOverlay});
     // Init corpus analysis components
     data = new Data();
     resultsList = new ResultsList("result-list", resultsListOptions);
@@ -636,19 +667,93 @@
     }
 
     // ### Show corpus Metadata
-    showMetadataButton.onclick = () => {
-      let deleteOverlay = () => {
-        let overlay = document.getElementsByClassName("modal-overlay")[0];
-        overlay.remove();
+    showMetaDataButton.onclick = () => {
+      let tmpObject = {};
+      Object.assign(tmpObject, results.metaData);
+      tmpObject["query"] = results.data.query;
+      tmpObject["text_lookup"] = results.data.text_lookup;
+      metaDataModalContent = document.getElementById("meta-data-modal-content");
+      let table = `<div class="col s12">
+                        <table class="responsive-table highlight">
+                          <thead>
+                            <tr>
+                              <th>Metadata Description</th>
+                              <th>Value</th>
+                            </tr>
+                          </thead>
+                          <tbody>`
+      for (let [outerKey, outerValue] of Object.entries(tmpObject)) {
+        table += `<tr>
+                    <td>${outerKey}</td>`
+        if (outerKey === "corpus_all_texts" || outerKey === "text_lookup") {
+          table += `<td>
+                    <table>`
+          for (let [innerKey, innerValue] of Object.entries(outerValue)) {
+            table += `<tr style="border-bottom: none;">
+                        <td>
+                          <i>${innerValue.title}</i> written
+                          by <i>${innerValue.author}</i>
+                          in <i>${innerValue.publishing_year}</i>
+                          <a class="waves-effect
+                                    waves-light
+                                    btn
+                                    right
+                                    more-text-detials"
+                             data-metadata-key="${outerKey}"
+                             data-text-key="${innerKey}"
+                             href="#modal-text-details">More
+                              <i class="material-icons right"
+                                 data-metadata-key="${outerKey}"
+                                 data-text-key="${innerKey}">
+                                 info_outline
+                              </i>
+                          </a>
+                        </td>
+                      </tr>`
+          }
+          table += `</td>
+                    </table>`
+        } else {
+          table += `<td>${outerValue}</td>`
+        }
+        table += `</tr>`
+      }
+      table += `</tbody>
+                </table>`
+      metaDataModalContent.insertAdjacentHTML("afterbegin", table);
+      metaDataModal.open();
+      var moreTextDetailsButtons;
+      moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
+      for (var btn of moreTextDetailsButtons) {
+        btn.onclick = () => {
+          let modal = document.getElementById("modal-text-details");
+          modal = M.Modal.init(modal, {"dismissible": true});
+          modal.open();
+          let metadataKey = event.target.dataset.metadataKey;
+          let textKey = event.target.dataset.textKey;
+          let textData = tmpObject[metadataKey][textKey];
+          let bibliographicData = document.getElementById("bibliographic-data");
+          bibliographicData.innerHTML = "";
+          let table = document.createElement("table");
+          for (let [key, value] of Object.entries(textData)) {
+            table.insertAdjacentHTML("afterbegin",
+            `
+              <tr>
+                <td>${key}</td>
+                <td>${value}</td>
+              </tr>
+            `);
+          }
+          table.insertAdjacentHTML("afterbegin",
+            `
+              <thead>
+                <th>Description</th>
+                <th>Value</th>
+              </thead>
+            `)
+          bibliographicData.appendChild(table);
+        }
       }
-      let modal = document.getElementById("metadata-modal");
-      console.log(modal);
-      modal = M.Modal.init(modal, {"preventScrolling": false,
-                                   "opacity": 0.0,
-                                   "dismissible": false,
-                                   "onOpenEnd": deleteOverlay});
-      console.log(modal);
-      modal.open();
     };
 
   });
diff --git a/web/app/templates/macros/query_result_macro.html.j2 b/web/app/templates/macros/query_result_macro.html.j2
index 4d7d0dbc..4751d349 100644
--- a/web/app/templates/macros/query_result_macro.html.j2
+++ b/web/app/templates/macros/query_result_macro.html.j2
@@ -1,8 +1,6 @@
-{%- macro show_metadata(query_metadata) -%}
+{% macro show_metadata(query_metadata) %}
 
-<p>{{ query_metadata }}</p>
-
-{# <div class="col s12">
+<div class="col s12">
   <table class="responsive-table highlight">
     <thead>
       <tr>
@@ -14,8 +12,8 @@
       {% for pair in query_metadata|dictsort %}
       <tr>
         <td>{{ pair[0] }}</td>
-        {% if pair[0] == 'corpus_all_texts'
-           or pair[0] == 'text_lookup'  %}
+        {% if pair[0] == "corpus_all_texts"
+           or pair[0] == "text_lookup"  %}
           <td>
           <table>
           {% for key, value  in pair[1].items()  %}
@@ -50,7 +48,7 @@
       {% endfor %}
     </tbody>
   </table>
-</div> #}
+</div>
 
 <!-- Modal Structure -->
 <div id="modal-text-details" class="modal modal-fixed-footer">
diff --git a/web/app/templates/query_results/inspect.html.j2 b/web/app/templates/query_results/inspect.html.j2
index bac67483..308a8ecf 100644
--- a/web/app/templates/query_results/inspect.html.j2
+++ b/web/app/templates/query_results/inspect.html.j2
@@ -5,21 +5,54 @@
 {% set full_width = True %}
 
 {% block page_content %}
+
+<div class="col s12">
+  <div class="card">
+    <div class="card-content" style="padding-top: 5px;
+                             padding-bottom: 0px;">
+      <!-- Query form -->
+      <div class="row">
+      <form id="query-form">
+          <div class="col s12 m10">
+            <div class="input-field">
+              <i class="material-icons prefix">search</i>
+              <input disabled value="{{ query_metadata.query|escape }}" id="disabled" type="text" class="validate">
+          <label for="disabled">Query</label>
+            </div>
+          </div>
+          <div class="col s12 m2 right-align">
+            <br class="hide-on-small-only">
+          </div>
+      </form>
+    </div>
+    </div>
+  </div>
+</div>
+
+<!-- entire results div/card -->
 <div class="col s12" id="query-display">
   <div class="card">
     <div class="card-content" id="result-list" style="overflow: hidden;">
-      <div class="row" style="margin-bottom: 0px;">
-        <div class="col s12 m3 l3" id="results-info">
-          <div class="row section">
-            <h6 style="margin-top: 0px;">Infos</h6>
-            <div class="divider" style="margin-bottom: 10px;"></div>
-            <div class="col" id="infos">
+      <div class=" row show-on-success">
+        <div class="col s12 m2 l2" id="infos">
+          <h6 style="margin-top: 0px;">Infos</h6>
+          <div class="divider" style="margin-bottom: 10px;"></div>
+          <div class="row">
+            <div class="col s12">
+              <button id="show-metadata"
+                      class="waves-effect
+                             waves-light
+                             btn-flat"
+                      type="submit">Corpus Metadata
+                <i class="material-icons left">info_outline</i>
+              </button>
+            </div>
+            <div class="col s12">
               <p>
-                Displaying
                 <span id="received-match-count">
                 </span> of
                 <span id="match-count"></span>
-                matches.
+                matches loaded.
                 <br>
                 Matches occured in
                 <span id="text-lookup-count"></span>
@@ -27,56 +60,80 @@
                 <br>
                 <span id=text-titles></span>
               </p>
-              <div class="progress hide" id="query-results-progress">
+              <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.
+              </p>
+              <div class="progress" id="query-results-progress">
                 <div class="determinate" id="query-results-determinate"></div>
               </div>
             </div>
           </div>
         </div>
-        <div class="col s12 m9 l9" id="actions-and-tools">
-          <div class="row section">
-            <div class="col s12 m3 l3" id="display">
-              <h6 style="margin-top: 0px;">Display</h6>
-              <div class="divider" style="margin-bottom: 10px;"></div>
-              <div class="row">
-                <div class="col s12">
-                  <form id="display-options-form">
-                    {{ M.render_field(display_options_form.results_per_page,
-                                      material_icon='format_list_numbered') }}
-                    {{ M.render_field(display_options_form.result_context,
-                                      material_icon='short_text') }}
-                    {{ M.render_field(display_options_form.expert_mode) }}
-                  </form>
-                </div>
-              </div>
+        <div class="col s12 m2 l2" id="display">
+          <h6 style="margin-top: 0px;">Display</h6>
+          <div class="divider" style="margin-bottom: 10px;"></div>
+          <div class="row">
+            <div class="col s12">
+              <form id="display-options-form">
+                {{ M.render_field(display_options_form.results_per_page,
+                                  material_icon='format_list_numbered') }}
+                {{ M.render_field(display_options_form.result_context,
+                                  material_icon='short_text') }}
+                {{ M.render_field(display_options_form.expert_mode) }}
+              </form>
             </div>
           </div>
         </div>
       </div>
       <!-- Table showing the query results -->
-        <div class="col s12">
-          <ul class="pagination paginationTop"></ul>
-          <table class="responsive-table highlight">
-            <thead>
-              <tr>
-                <th style="width: 2%">Nr.</th>
-                <th style="width: 3%">Title</th>
-                <th style="width: 25%">Left context</th>
-                <th style="width: 35%">Match</th>
-                <th style="width: 10%">Actions</th>
-                <th style="width: 25%">Right Context</th>
-              </tr>
-            </thead>
-            <tbody class="list" id="query-results">
-            </tbody>
-          </table>
-          <ul class="pagination paginationBottom"></ul>
-        </div>
+      <div class="col s12">
+        <ul class="pagination paginationTop"></ul>
+        <table class="responsive-table highlight">
+          <thead>
+            <tr>
+              <th style="width: 2%">Nr.</th>
+              <th style="width: 3%">Title</th>
+              <th style="width: 25%">Left context</th>
+              <th style="width: 35%">Match</th>
+              <th style="width: 10%">Actions</th>
+              <th style="width: 25%">Right Context</th>
+            </tr>
+          </thead>
+          <tbody class="list" id="query-results">
+          </tbody>
+        </table>
+        <ul class="pagination paginationBottom"></ul>
       </div>
     </div>
   </div>
 </div>
 
+<!-- Metadata modal -->
+{% import "macros/query_result_macro.html.j2" as metadata %}
+<div id="metadata-modal" class="modal bottom-sheet">
+  <div class="section">
+    <div class="col s12 right-align">
+      <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
+    </div>
+  </div>
+  {% if query_metadata is defined %}
+    <div class="modal-content">
+      {{ metadata.show_metadata(query_metadata) }}
+    </div>
+  {% else %}
+    <div class="modal-content">
+      <div class="metaDataModal">
+      </div>
+    </div>
+  {% endif %}
+  <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
+  </div>
+</div>
+
 <!-- Context modal used for detailed information about one match -->
 <div id="context-modal" class="modal modal-fixed-footer">
   <div class="modal-content">
@@ -168,6 +225,8 @@
   let hitsPerPageInputElement;let contextPerItemElement;  // Form Element for display option
   let paginationElements;
   let inspectBtnElements;
+  let metaDataModal;
+  let showMetaDataButton
 
   // ###### Initializing variables ######
   displayOptionsFormElement = document.getElementById("display-options-form");
@@ -183,6 +242,8 @@
   contextPerItemElement = document.getElementById("display-options-form-result_context");
   paginationElements = document.getElementsByClassName("pagination");
   contextModal = document.getElementById("context-modal");
+  metaDataModal = document.getElementById("metadata-modal");
+  showMetaDataButton = document.getElementById("show-metadata");
 
   // js list options
   displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@@ -220,7 +281,15 @@
     resultsMetaData = new MetaData();
     results = new Results(data, resultsList, resultsMetaData);
     results.clearAll();  // inits some object keys and values
-    // TODO: save metadate into results.metaData
+    // init some modals
+    let deleteOverlay = () => {
+      let overlay = document.getElementsByClassName("modal-overlay")[0];
+      overlay.remove();
+    };
+    metaDataModal = M.Modal.init(metaDataModal, {"preventScrolling": false,
+                                 "opacity": 0.0,
+                                 "dismissible": false,
+                                 "onOpenEnd": deleteOverlay});
 
     // setting some initial values for user feedback
     matchCountElement.innerText = full_result_json.match_count;
@@ -270,6 +339,13 @@
     // render results in table imported parameter is true
     queryRenderResults(result_json, true);
 
+    // ### Show corpus Metadata
+    showMetaDataButton.onclick = () => {
+      console.log(results.metaData);
+      console.log(results.data.text_lookup);
+      metaDataModal.open();
+    };
+
     // live update of hits per page if hits per page value is changed
     let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList);
     hitsPerPageInputElement.onchange = changeHitsPerPageBind;