First setup for metadata modal view

2025-11-04 04:12:45 +00:00 · 2020-07-20 09:31:27 +02:00
parent 398d5c2989
commit 3e50c2f275
9 changed files with 160 additions and 101 deletions
--- a/web/app/corpora/views.py
+++ b/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,
--- a/web/app/static/js/nopaque.InteractionElement.js
+++ b/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
-    // 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) {
+    for (let interaction of this.interactions) {
      if (interaction.checkStatus) {
        interaction.element.addEventListener("change", (event) => {
          if (event.target.checked) {
--- a/web/app/static/js/nopaque.Results.js
+++ b/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});
--- a/web/app/static/js/nopaque.callbacks.js
+++ 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);
-  Object.assign(results.data.text_lookup, payload.chunk.text_lookup);
+  results.data.addData(payload.chunk.cpos_lookup, "cpos_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}`;
--- a/web/app/static/js/nopaque.lists.js
+++ b/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
--- a/web/app/templates/corpora/analyse_corpus.html.j2
+++ b/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});
-    exportModal = M.Modal.init(exportModal, {"dismissible": true});
+    let defaultOptions = {"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();
-    let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
+    interactionElements = new InteractionElements();
+    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");
-      results.data.addData(results.metaData);
-      results.data.downloadJSONRessource(filename, results.resultsData,
+      let filename = results.resultsData.createDownloadFilename("matches-results");
+      results.resultsData.addData(results.metaData);
+      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 %}
--- a/web/app/templates/macros/query_result_macro.html.j2
+++ b/web/app/templates/macros/query_result_macro.html.j2
@@ -1,65 +1,56 @@
-{% 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>
+{%- macro show_metadata(query_metadata) -%}

-</div>
+<p>{{ query_metadata }}</p>

-<div class="col s12">
-  <div class="card">
-    <div class="card-content" id="results">
-      <table class="responsive-table highlight">
-        <thead>
-          <tr>
-            <th>Metadata Description</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for pair in query_metadata|dictsort %}
-          <tr>
-            <td>{{ pair[0] }}</td>
-            {% if pair[0] == 'corpus_all_texts'
-               or pair[0] == 'text_lookup'  %}
-              <td>
-              <table>
-              {% for key, value  in pair[1].items()  %}
-                  <tr style="border-bottom: none;">
-                    <td>
-                      <i>{{ value['title'] }}</i> written
-                      by <i>{{ value['author'] }}</i>
-                      in <i>{{ value['publishing_year'] }}</i>
-                      <a class="waves-effect
-                                waves-light
-                                btn
-                                right
-                                more-text-detials"
+{# <div class="col s12">
+  <table class="responsive-table highlight">
+    <thead>
+      <tr>
+        <th>Metadata Description</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for pair in query_metadata|dictsort %}
+      <tr>
+        <td>{{ pair[0] }}</td>
+        {% if pair[0] == 'corpus_all_texts'
+           or pair[0] == 'text_lookup'  %}
+          <td>
+          <table>
+          {% for key, value  in pair[1].items()  %}
+              <tr style="border-bottom: none;">
+                <td>
+                  <i>{{ value['title'] }}</i> written
+                  by <i>{{ value['author'] }}</i>
+                  in <i>{{ value['publishing_year'] }}</i>
+                  <a class="waves-effect
+                            waves-light
+                            btn
+                            right
+                            more-text-detials"
+                     data-metadata-key="{{ pair[0] }}"
+                     data-text-key="{{ key }}"
+                     href="#modal-text-details">More
+                      <i class="material-icons right"
                         data-metadata-key="{{ pair[0] }}"
-                         data-text-key="{{ key }}"
-                         href="#modal-text-details">More
-                          <i class="material-icons right"
-                             data-metadata-key="{{ pair[0] }}"
-                             data-text-key="{{ key }}">
-                             info_outline
-                          </i>
-                      </a>
-                    </td>
-                  </tr>
-              {% endfor %}
-              </table>
-              </td>
-            {% else %}
-              <td>{{ pair[1] }}</td>
-            {% endif %}
-          </tr>
+                         data-text-key="{{ key }}">
+                         info_outline
+                      </i>
+                  </a>
+                </td>
+              </tr>
          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
+          </table>
+          </td>
+        {% else %}
+          <td>{{ pair[1] }}</td>
+        {% 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 %}
--- a/web/app/templates/query_results/inspect.html.j2
+++ b/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
--- a/web/app/templates/query_results/query_result.html.j2
+++ b/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 }}"
-                         href="#modal-text-details">More
+                         data-text-key="{{ key }}">More
                          <i class="material-icons right"
                             data-metadata-key="{{ pair[0] }}"
                             data-text-key="{{ key }}">