Add metadata view to nalysis interface and result viewer

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;