First setup for metadata modal view

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/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

@@ -330,7 +330,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");
@@ -427,14 +427,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
@@ -483,6 +487,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,18 @@
 
 
 <!-- Modals -->
+
+<!-- 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">
+      <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
+    </div>
+  </div>
+
 <!-- Analysis init modal -->
 <div class="modal no-autoinit" id="init-display">
   <div class="modal-content">
@@ -421,6 +434,11 @@
   var textTitlesElement;  // matched text titles
   var nrMarkedMatches;  // count of matches marked for subresults
   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
@@ -490,11 +508,11 @@
 
   // ###### 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});
     // Init corpus analysis components
     data = new Data();
@@ -572,8 +590,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 +601,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 +609,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 +635,24 @@
       });
     }
 
+    // ### Show corpus Metadata
+    showMetadataButton.onclick = () => {
+      let deleteOverlay = () => {
+        let overlay = document.getElementsByClassName("modal-overlay")[0];
+        overlay.remove();
+      }
+      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();
+    };
+
   });
 
-  // ### Show corpus Metadata
-  showMetadataButton.onclick = () => {
-    console.log("click");
-  }
 
   // ### Download events and sub-results creation ###
   var loadingSpinnerHTML = `
@@ -653,9 +683,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 +705,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 +720,6 @@
     results.data.downloadJSONRessource(filename,
                                        results.jsList.contextData,
                                        downloadInspectContextElement);
-};
+  };
 </script>
 {% endblock %}

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

@@ -1,65 +1,56 @@
-{% macro show_metadata(query_metadata) %}
+{%- 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>
+<p>{{ query_metadata }}</p>
 
-<div class="col s12">
+{# <div class="col s12">
-  <div class="card">
+  <table class="responsive-table highlight">
-    <div class="card-content" id="results">
+    <thead>
-      <table class="responsive-table highlight">
+      <tr>
-        <thead>
+        <th>Metadata Description</th>
-          <tr>
+        <th>Value</th>
-            <th>Metadata Description</th>
+      </tr>
-            <th>Value</th>
+    </thead>
-          </tr>
+    <tbody>
-        </thead>
+      {% for pair in query_metadata|dictsort %}
-        <tbody>
+      <tr>
-          {% for pair in query_metadata|dictsort %}
+        <td>{{ pair[0] }}</td>
-          <tr>
+        {% if pair[0] == 'corpus_all_texts'
-            <td>{{ pair[0] }}</td>
+           or pair[0] == 'text_lookup'  %}
-            {% if pair[0] == 'corpus_all_texts'
+          <td>
-               or pair[0] == 'text_lookup'  %}
+          <table>
-              <td>
+          {% for key, value  in pair[1].items()  %}
-              <table>
+              <tr style="border-bottom: none;">
-              {% for key, value  in pair[1].items()  %}
+                <td>
-                  <tr style="border-bottom: none;">
+                  <i>{{ value['title'] }}</i> written
-                    <td>
+                  by <i>{{ value['author'] }}</i>
-                      <i>{{ value['title'] }}</i> written
+                  in <i>{{ value['publishing_year'] }}</i>
-                      by <i>{{ value['author'] }}</i>
+                  <a class="waves-effect
-                      in <i>{{ value['publishing_year'] }}</i>
+                            waves-light
-                      <a class="waves-effect
+                            btn
-                                waves-light
+                            right
-                                btn
+                            more-text-detials"
-                                right
+                     data-metadata-key="{{ pair[0] }}"
-                                more-text-detials"
+                     data-text-key="{{ key }}"
+                     href="#modal-text-details">More
+                      <i class="material-icons right"
                          data-metadata-key="{{ pair[0] }}"
-                         data-text-key="{{ key }}"
+                         data-text-key="{{ key }}">
-                         href="#modal-text-details">More
+                         info_outline
-                          <i class="material-icons right"
+                      </i>
-                             data-metadata-key="{{ pair[0] }}"
+                  </a>
-                             data-text-key="{{ key }}">
+                </td>
-                             info_outline
+              </tr>
-                          </i>
-                      </a>
-                    </td>
-                  </tr>
-              {% endfor %}
-              </table>
-              </td>
-            {% else %}
-              <td>{{ pair[1] }}</td>
-            {% endif %}
-          </tr>
           {% endfor %}
-        </tbody>
+          </table>
-      </table>
+          </td>
-    </div>
+        {% else %}
-  </div>
+          <td>{{ pair[1] }}</td>
-</div>
+        {% endif %}
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div> #}
 
 <!-- Modal Structure -->
 <div id="modal-text-details" class="modal modal-fixed-footer">
@@ -106,4 +97,5 @@ for (var btn of moreTextDetailsButtons) {
     bibliographicData.appendChild(table);
   }
 }
-</script>
+</script>
+{% endmacro %}

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

@@ -230,7 +230,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 +252,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

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 }}">