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

web/app/corpora/views.py

@@ -76,7 +76,6 @@ def analyse_corpus(corpus_id):
         prefix='inspect-display-options-form')
     return render_template(
         'corpora/analyse_corpus.html.j2',
-        corpus=corpus,
         corpus_id=corpus_id,
         display_options_form=display_options_form,
         query_form=query_form,

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')
 
 

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);
   }

web/app/static/js/nopaque.InteractionElement.js

@@ -29,17 +29,21 @@ class InteractionElement {
     let boundedCallback = callback["function"].bind(callback.bindThis);
     return boundedCallback;
   }
+}
 
-  static onChangeExecute(interactionElements) {
+class InteractionElements {
+  constructor() {
+    this.interactions = [];
+  }
+
+  addInteractions (interactionsArray) {
+    this.interactions.push(...interactionsArray);
+  }
+
+  onChangeExecute() {
     // checks if a change for every interactionElement happens and executes
     // the callbacks accordingly
-    // TODO: This function scould be a static function of the Class InteractionElements
+    for (let interaction of this.interactions) {
-    // This class does not exist yet. The Class InteractionElements should hold
-    // a list of InteractionElement objects. onChangeExecute loops over InteractionElements
-    // and executes the callbacks as mentioned accordingly. An additional
-    // InteractionElements Class is logically right but also makes things a little more
-    // complex. It is not yet decided.
-    for (let interaction of interactionElements) {
       if (interaction.checkStatus) {
         interaction.element.addEventListener("change", (event) => {
           if (event.target.checked) {

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

@@ -12,6 +12,7 @@ class Results {
     this.jsList.update();
     this.data.init();
     this.metaData.init();
+    this.resultsData.init()
     this.subResultsData.init();
   }
 
@@ -92,6 +93,15 @@ class Data {
 
   // create results data either from all results or from al lmarked sub results
   createResultsData(type) {
+    // deactivate inspect, because cqp server cannot handle multiple requests
+    results.jsList.deactivateInspect();
+    activateInspectInteraction.setCallback("noCheck",
+                                            results.jsList.deactivateInspect,
+                                            results.jsList);
+    // set flag that results are being created to avoid reactivation of
+    // sub results creation if marked matches are changed
+    resultCreationRunning = true;
+    console.log(resultCreationRunning);
     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});

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

@@ -56,12 +56,18 @@ function saveSubResultsChoices(response) {
       clearTimeout();
     }, 3000)
     // Resets the resultsCreateElement (removing spinner with setting innerText)
-    resultsCreateElement.innerText = "Create Sub-Results";
+    resultsCreateElement.innerText = "Create Results";
     resultsCreateElement.insertAdjacentHTML("beforeend", `<i class="material-icons left">build</i>`);
     // reactivate subResultsCreateElement
     subResultsCreateElement.classList.remove("disabled");
   }
-
+  // reactivate inspect
+  results.jsList.activateInspect();
+  activateInspectInteraction.setCallback("noCheck",
+                                          results.jsList.activateInspect,
+                                          results.jsList);
+  // set resultCreationRunning to flase
+  resultCreationRunning = false;
 }
 
 // This callback is called on socket.on "query".
@@ -79,6 +85,9 @@ function querySetup(payload) {
   queryResultsDeterminateElement.style.width = "0%";
   queryResultsProgressElement.classList.remove("hide");
   queryResultsUserFeedbackElement.classList.remove("hide");
+  resultsCreateElement.classList.add("disabled");
+  resultsCreateElement.classList.remove("hide");
+  resultsExportElement.classList.add("hide");
   // some initial values
   receivedMatchCountElement.innerText = "0";
   textLookupCountElement.innerText = "0";
@@ -118,6 +127,7 @@ function queryRenderResults(payload, imported=false) {
       }
       helperQueryRenderResults(payload);
       if (progress === 100) {
+        resultsCreateElement.classList.remove("disabled");
         queryResultsProgressElement.classList.add("hide");
         queryResultsUserFeedbackElement.classList.add("hide");
         resultsExportElement.classList.remove("disabled");
@@ -154,8 +164,10 @@ function helperQueryRenderResults (payload) {
   results.jsList.changeContext(); // sets lr context on first result load
   // incorporating new chunk results into full results
   results.data.matches.push(...payload.chunk.matches);
-  Object.assign(results.data.cpos_lookup, payload.chunk.cpos_lookup);
+  results.data.addData(payload.chunk.cpos_lookup, "cpos_lookup");
-  Object.assign(results.data.text_lookup, payload.chunk.text_lookup);
+  results.data.addData(payload.chunk.text_lookup, "text_lookup");
+  // complete metaData
+  // results.metaData.add();
   // show user current and total match count
   receivedMatchCountElement.innerText = `${results.data.matches.length}`;
   textLookupCountElement.innerText = `${Object.keys(results.data.text_lookup).length}`;

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

@@ -340,7 +340,7 @@ class ResultsList extends List {
   // loops over interactionElements and executes callback functions accordingly
   pageChangeEventInteractionHandler(interactionElements) {
     // get elements to check thier status
-    for (let interaction of interactionElements) {
+    for (let interaction of interactionElements.interactions) {
       if (interaction.checkStatus) {
         if (interaction.element.checked) {
           let f_on = interaction.bindThisToCallback("on");
@@ -437,14 +437,18 @@ class ResultsList extends List {
       nrMarkedMatches.innerText = [...this.addToSubResultsIdsToShow].length;
       M.textareaAutoResize(textarea); // after an insert textarea has to be resized manually
     }
-    // Toggles the create button accoring to the number of ids in addToSubResultsIdsToShow
+    // Toggles the create button according to the number of ids in addToSubResultsIdsToShow
     if ([...this.addToSubResultsIdsToShow].length > 0) {
       subResultsCreateElement.classList.remove("disabled");
     } else if ([...this.addToSubResultsIdsToShow].length === 0) {
       subResultsCreateElement.classList.add("disabled");
     }
+    if (resultCreationRunning) {
+      subResultsCreateElement.classList.add("disabled");
+    }
     // After a match as been added or removed the export button will be
-    // hidden because the sub-results have been alterd and have to be built //// again. Thus subResultsCreateElement has to be shown again.
+    // hidden because the sub-results have been altered and have to be built
+    // again. Thus subResultsCreateElement has to be shown again.
     subResultsExportElement.classList.add("hide");
     subResultsCreateElement.classList.remove("hide");
     // Also activate/deactivate buttons in the table/jsList results accordingly
@@ -493,6 +497,15 @@ class ResultsList extends List {
     }
   }
 
+  // deactivate inspect buttons
+  deactivateInspect() {
+    let inspectBtnElements;
+    inspectBtnElements = document.getElementsByClassName("inspect");
+    for (let inspectBtn of inspectBtnElements) {
+      inspectBtn.classList.add("disabled");
+    }
+  }
+
   // ### functions to inspect imported Matches
   // This function creates an object that is similar to the object that is
   // being recieved as an answere to the getMatchWithContext Method, which is

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

@@ -87,7 +87,8 @@
             <div class="col s12">
               <button class="waves-effect
                       waves-light
-                      btn-flat"
+                      btn-flat
+                      disabled"
                       type="submit"
                       id="results-create">Create Results
                 <i class="material-icons left">build</i>
@@ -244,6 +245,39 @@
 
 
 <!-- Modals -->
+
+<!-- Metadata modal -->
+{% import "macros/query_result_macro.html.j2" as metadata %}
+<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">
   <div class="modal-content">
@@ -420,7 +454,12 @@
   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
+  var changeContextInteraction;  // global interaction element
+  var resultCreationRunning;
 
   // ###### Defining local scope variables ######
   let contextPerItemElement;  // Form Element for display option
@@ -437,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");
@@ -469,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);
@@ -490,12 +531,20 @@
 
   // ###### event on DOMContentLoaded ######
   document.addEventListener("DOMContentLoaded", () => {
-    //set accordion of collapsibles to false
-    M.Collapsible.init(collapsibleElements, {accordion: false});
     // creates some modals on DOMContentLoaded
-    contextModal = M.Modal.init(contextModal, {"dismissible": true});
+    let defaultOptions = {"dismissible": true,
-    exportModal = M.Modal.init(exportModal, {"dismissible": true});
+                          "preventScrolling": false};
+    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);
@@ -572,8 +621,8 @@
     // htmlID. Callbacks are set for these elements which will be triggered on
     // a pagination interaction by the user or if the status of the element has
     // been altered. (Like the switche has ben turned on or off).
-    interactionElements = new Array();
+    interactionElements = new InteractionElements();
-    let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
+    expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
     expertModeInteraction.setCallback("on",
                                       results.jsList.expertModeOn,
                                       results.jsList,
@@ -583,7 +632,7 @@
                                       results.jsList,
                                       ["query-display"])
 
-    let subResultsInteraction = new InteractionElement("add-to-sub-results");
+    subResultsInteraction = new InteractionElement("add-to-sub-results");
     subResultsInteraction.setCallback("on",
                                         results.jsList.activateAddToSubResults,
                                         results.jsList);
@@ -591,22 +640,22 @@
                                         results.jsList.deactivateAddToSubResults,
                                         results.jsList);
 
-    let activateInspectInteraction = new InteractionElement("inspect",
+    activateInspectInteraction = new InteractionElement("inspect",
                                                             false);
     activateInspectInteraction.setCallback("noCheck",
                                             results.jsList.activateInspect,
                                             results.jsList);
 
-    let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
+    changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
                                                           false);
     changeContextInteraction.setCallback("noCheck",
                                         results.jsList.changeContext,
                                         results.jsList)
-    interactionElements.push(expertModeInteraction, subResultsInteraction, activateInspectInteraction, changeContextInteraction);
+    interactionElements.addInteractions([expertModeInteraction, subResultsInteraction, activateInspectInteraction, changeContextInteraction]);
 
     // checks if a change for every interactionElement happens and executes
     // the callbacks accordingly
-    InteractionElement.onChangeExecute(interactionElements);
+    interactionElements.onChangeExecute();
 
     // eventListener if pagination is used to apply new context size to new page
     // and also activate inspect match if progress is 100
@@ -617,12 +666,98 @@
       });
     }
 
+    // ### Show corpus Metadata
+    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);
+        }
+      }
+    };
+
   });
 
-  // ### Show corpus Metadata
-  showMetadataButton.onclick = () => {
-    console.log("click");
-  }
 
   // ### Download events and sub-results creation ###
   var loadingSpinnerHTML = `
@@ -653,9 +788,9 @@
     // add onclick to download JSON button and download the file
     downloadResultsJSONElement = document.getElementById("download-results-json")
     downloadResultsJSONElement.onclick = () => {
-      let filename = results.data.createDownloadFilename("matches");
+      let filename = results.resultsData.createDownloadFilename("matches-results");
-      results.data.addData(results.metaData);
+      results.resultsData.addData(results.metaData);
-      results.data.downloadJSONRessource(filename, results.resultsData,
+      results.resultsData.downloadJSONRessource(filename, results.resultsData,
                                          downloadResultsJSONElement
       )};
   }
@@ -675,7 +810,7 @@
     // add onclick to download JSON button and download the file
     downloadResultsJSONElement = document.getElementById("download-results-json")
     downloadResultsJSONElement.onclick = () => {
-      let filename = results.data.createDownloadFilename("matches-sub-results");
+      let filename = results.subResultsData.createDownloadFilename("matches-sub-results");
       results.subResultsData.downloadJSONRessource(filename,
                                                    results.subResultsData,
                                                    downloadResultsJSONElement
@@ -690,6 +825,6 @@
     results.data.downloadJSONRessource(filename,
                                        results.jsList.contextData,
                                        downloadInspectContextElement);
-};
+  };
 </script>
 {% endblock %}

web/app/templates/macros/query_result_macro.html.j2

@@ -1,15 +1,6 @@
 {% macro show_metadata(query_metadata) %}
-<div class="col s12">
-  <p>Below the metadata for the results from the Corpus
-    <i>{{ query_metadata.corpus_name }}</i> generated with the query
-    <i>{{ query_metadata.query }}</i> are shown.
-  </p>
-
-</div>
 
 <div class="col s12">
-  <div class="card">
-    <div class="card-content" id="results">
   <table class="responsive-table highlight">
     <thead>
       <tr>
@@ -21,8 +12,8 @@
       {% for pair in query_metadata|dictsort %}
       <tr>
         <td>{{ pair[0] }}</td>
-            {% if pair[0] == 'corpus_all_texts'
+        {% if pair[0] == "corpus_all_texts"
-               or pair[0] == 'text_lookup'  %}
+           or pair[0] == "text_lookup"  %}
           <td>
           <table>
           {% for key, value  in pair[1].items()  %}
@@ -57,8 +48,6 @@
       {% endfor %}
     </tbody>
   </table>
-    </div>
-  </div>
 </div>
 
 <!-- Modal Structure -->
@@ -107,3 +96,4 @@ for (var btn of moreTextDetailsButtons) {
   }
 }
 </script>
+{% endmacro %}

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=" row show-on-success">
-        <div class="col s12 m3 l3" id="results-info">
+        <div class="col s12 m2 l2" id="infos">
-          <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">
+            <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,15 +60,19 @@
                 <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="col s12 m2 l2" id="display">
-          <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">
@@ -51,8 +88,6 @@
           </div>
         </div>
       </div>
-        </div>
-      </div>
       <!-- Table showing the query results -->
       <div class="col s12">
         <ul class="pagination paginationTop"></ul>
@@ -74,6 +109,28 @@
       </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>
 
@@ -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;
@@ -230,7 +299,7 @@
     // htmlID. Callbacks are set for these elements which will be triggered on
     // a pagination interaction by the user or if the status of the element has
     // been altered. (Like the switche has ben turned on or off).
-    interactionElements = new Array();
+    interactionElements = new InteractionElements();
     let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
     expertModeInteraction.setCallback("on",
                                       results.jsList.expertModeOn,
@@ -252,11 +321,11 @@
     changeContextInteraction.setCallback("noCheck",
                                         results.jsList.changeContext,
                                         results.jsList)
-    interactionElements.push(expertModeInteraction, activateInspectInteraction, changeContextInteraction);
+    interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
 
     // checks if a change for every interactionElement happens and executes
     // the callbacks accordingly
-    InteractionElement.onChangeExecute(interactionElements);
+    interactionElements.onChangeExecute();
 
     // eventListener if pagination is used to apply new context size to new page
     // and also activate inspect match if progress is 100
@@ -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;

web/app/templates/query_results/query_result.html.j2

@@ -41,8 +41,7 @@
                                 right
                                 more-text-detials"
                          data-metadata-key="{{ pair[0] }}"
-                         data-text-key="{{ key }}"
+                         data-text-key="{{ key }}">More
-                         href="#modal-text-details">More
                           <i class="material-icons right"
                              data-metadata-key="{{ pair[0] }}"
                              data-text-key="{{ key }}">