From 1bb265b7f4807fd5607cff2cef4fba0a1a68c914 Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Fri, 11 Sep 2020 15:53:30 +0200
Subject: [PATCH] Add show corpus metadata function to result inspect.

---
 .../corpus_analysis/view/ResultsView.js       |  18 +-
 .../templates/corpora/analyse_corpus.html.j2  |   2 -
 .../interactions/scroll_to_top.html.j2        |   1 -
 .../templates/modals/show_metadata.html.j2    |   6 -
 .../templates/query_results/inspect.html.j2   |  11 +-
 .../query_results/inspect.html.j2.bak         | 233 ------------------
 web/app/templates/utils/macros.html.j2        |  75 ------
 7 files changed, 25 insertions(+), 321 deletions(-)
 delete mode 100644 web/app/templates/query_results/inspect.html.j2.bak

diff --git a/web/app/static/js/modules/corpus_analysis/view/ResultsView.js b/web/app/static/js/modules/corpus_analysis/view/ResultsView.js
index e2afbf74..cffdd1b1 100644
--- a/web/app/static/js/modules/corpus_analysis/view/ResultsView.js
+++ b/web/app/static/js/modules/corpus_analysis/view/ResultsView.js
@@ -792,8 +792,22 @@ class ResultsList extends List {
                         </thead>
                         <tbody>`
     for (let [outerKey, outerValue] of Object.entries(metaDataObject)) {
-      html += `<tr>
-                  <td style="text-transform: uppercase;">${outerKey.replace(/_/g, " ")}</td>`
+      // Use more descriptive names
+      if (outerKey === 'corpus_all_texts') {
+        let tmpName = 'All texts in this corpus';
+        html += `<tr>
+                   <td style="text-transform: uppercase;">${tmpName.replace(/_/g, " ")}
+                 </td>`
+      } else if (outerKey === 'text_lookup') {
+        let tmpName = 'Texts where the query resulted in matches'
+        html += `<tr>
+                   <td style="text-transform: uppercase;">${tmpName.replace(/_/g, " ")}
+                 </td>`
+      } else {
+        html += `<tr>
+                   <td style="text-transform: uppercase;">${outerKey.replace(/_/g, " ")}
+                 </td>`
+      }
       if (outerKey === "corpus_all_texts" || outerKey === "text_lookup") {
         html += `<td>
                   <ul class="collapsible">`
diff --git a/web/app/templates/corpora/analyse_corpus.html.j2 b/web/app/templates/corpora/analyse_corpus.html.j2
index f3ad7959..61132d65 100644
--- a/web/app/templates/corpora/analyse_corpus.html.j2
+++ b/web/app/templates/corpora/analyse_corpus.html.j2
@@ -59,7 +59,6 @@
 
 <!-- Modals -->
 {% include 'modals/show_metadata.html.j2' %}
-{% include 'modals/show_text_details.html.j2' %}
 {% include 'modals/analysis_init.html.j2' %}
 {% include 'modals/export_query_results.html.j2' %}
 {% include 'modals/context_modal.html.j2' %}
@@ -187,7 +186,6 @@ document.addEventListener("DOMContentLoaded", () => {
                                   listenForMetaData,
                                   listenForViewNotification,
                                   listenForResults]);
-  console.log(client.eventListeners);
   // Load the listeners so that they will be executed if triggered
   client.loadSocketEventListeners();
   /**
diff --git a/web/app/templates/interactions/scroll_to_top.html.j2 b/web/app/templates/interactions/scroll_to_top.html.j2
index 4e1c4971..69caae7e 100644
--- a/web/app/templates/interactions/scroll_to_top.html.j2
+++ b/web/app/templates/interactions/scroll_to_top.html.j2
@@ -1,4 +1,3 @@
-<!-- Scroll to top element -->
 <div id="menu-scroll-to-top-div" class="fixed-action-btn direction-top active hide" style="bottom: 45px; right: 24px;">
   <a id="menu-scroll-to-top" class="btn btn-floating btn-large cyan">
     <i class="material-icons">arrow_upward</i>
diff --git a/web/app/templates/modals/show_metadata.html.j2 b/web/app/templates/modals/show_metadata.html.j2
index 8064f7ad..708d77f9 100644
--- a/web/app/templates/modals/show_metadata.html.j2
+++ b/web/app/templates/modals/show_metadata.html.j2
@@ -7,14 +7,8 @@ results -->
       <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
     </div>
   </div>
-  {% if query_metadata is defined %}
-    <div class="modal-content">
-      {{ Macros.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>
diff --git a/web/app/templates/query_results/inspect.html.j2 b/web/app/templates/query_results/inspect.html.j2
index 9bc800c6..998dbba6 100644
--- a/web/app/templates/query_results/inspect.html.j2
+++ b/web/app/templates/query_results/inspect.html.j2
@@ -40,6 +40,7 @@
         {% include 'interactions/analysis.html.j2' %}
         {% include 'interactions/cite.html.j2' %}
         <div class="hide">
+          {# Hide those because they are not needed when inspecting results #}
           {% include 'interactions/export.html.j2' %}
           {% include 'interactions/create.html.j2' %}
         </div>
@@ -54,7 +55,6 @@
 
 <!-- Modals -->
 {% include 'modals/show_metadata.html.j2' %}
-{% include 'modals/show_text_details.html.j2' %}
 {% include 'modals/context_modal.html.j2' %}
 
 
@@ -122,7 +122,9 @@ document.addEventListener("DOMContentLoaded", () => {
   let resultsList = new ResultsList('result-list', ResultsList.options);
   // Import results data from json file.
   const resultsJson = {{ query_result_file_content|tojson|safe }};
-  /**
+  // Import metadata from DB passed to this view
+  const metaDataJson = {{ query_metadata|tojson|safe }};
+    /**
    * Register needed listeners and their callbacks. But we will
    * just call the attached callbacks manually. Because dynamicMode is false.
    */
@@ -159,14 +161,19 @@ document.addEventListener("DOMContentLoaded", () => {
     '#display-options-form-result_context',
     '#display-options-form-results_per_page',
     '#full-results-create',
+    '#inspect-results-export',
     '#meta-data-modal-content',
     '#meta-data-modal',
     '#query-results-table',
     '#show-meta-data',
     '#sub-results-create',
   ]);
+  // Hide buttons which are not needed when just inspecting results
+  resultsList.inspectResultsExport.classList.add('hide');
   // Execute client event listener callbacks manually because dynamicMode is false
   client.eventListeners['corpus_analysis_query'].executeCallbacks([resultsJson])
+  // Save meta data to results after the init callback from line above
+  results.metaData = metaDataJson;
   client.eventListeners['corpus_analysis_query_results'].executeCallbacks([resultsJson])
   /**
    * The following listener handles what functions are called when the user
diff --git a/web/app/templates/query_results/inspect.html.j2.bak b/web/app/templates/query_results/inspect.html.j2.bak
deleted file mode 100644
index 85f954da..00000000
--- a/web/app/templates/query_results/inspect.html.j2.bak
+++ /dev/null
@@ -1,233 +0,0 @@
-{% extends "nopaque.html.j2" %}
-
-{% set headline = ' ' %}
-
-{% set full_width = True %}
-{% set imported = 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 show-on-success">
-        {% include 'interactions/infos.html.j2' %}
-        {% include 'interactions/display.html.j2' %}
-        {% include 'interactions/analysis.html.j2' %}
-        {% include 'interactions/cite.html.j2' %}
-      </div>
-      {% include 'tables/query_results.html.j2' %}
-    </div>
-  </div>
-</div>
-
-<!-- Scroll to top element -->
-{% include 'interactions/scroll_to_top.html.j2' %}
-
-<!-- Modals -->
-{% include 'modals/show_metadata.html.j2' %}
-{% include 'modals/show_text_details.html.j2' %}
-{% include 'modals/context_modal.html.j2' %}
-
-
-<script src="{{ url_for('static', filename='js/nopaque.Results.js') }}">
-</script>
-<script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
-</script>
-<script src="{{ url_for('static', filename='js/nopaque.InteractionElement.js') }}">
-</script>
-<script>
-  // ###### global variables ######
-  var full_result_json;
-  var result_json;
-  var receivedMatchCountElement;  // Nr. of loaded matches will be displayed in this element
-  var textLookupCountElement  // Nr of texts the matches occured in will be shown in this element
-  var textTitlesElement;  // matched text titles
-  var progress;  // global progress value
-  var queryResultsProgressElement;  // Div element holding the progress bar
-  var expertModeSwitchElement; // Expert mode switch Element
-  var matchCountElement;  // Total nr. of matches will be displayed in this element
-  var interactionElements;  // Interaction elements and their parameters
-  var contextModal;  // Modal to open on inspect for further match context
-
-  // ###### Defining local scope variables
-  let displayOptionsFormElement;  // Form holding the display informations
-  let resultItems;  // array of built html result items row element. This is called when results are transmitted and being recieved
-  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");
-  resultItems = [];
-  receivedMatchCountElement = document.getElementById("received-match-count");
-  textLookupCountElement = document.getElementById("text-lookup-count");
-  textTitlesElement = document.getElementById("text-titles");
-  queryResultsProgressElement = document.getElementById("query-results-progress");
-  expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
-  matchCountElement = document.getElementById("match-count");
-  hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
-  contextPerItemElement = document.getElementById("display-options-form-result_context");
-  paginationElements = document.getElementsByClassName("pagination");
-  contextModal = document.getElementById("context-modal");
-  metaDataModal = document.getElementById("meta-data-modal");
-  showMetaDataButton = document.getElementById("show-metadata");
-
-  // js list options
-  displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
-  resultsListOptions = {page: displayOptionsData["resultsPerPage"],
-  pagination: [{
-      name: "paginationTop",
-      paginationClass: "paginationTop",
-      innerWindow: 8,
-      outerWindow: 1
-    }, {
-      paginationClass: "paginationBottom",
-      innerWindow: 8,
-      outerWindow: 1
-    }],
-    valueNames: ["titles", "lc", "c", "rc", {data: ["index"]}],
-    item: `<span></span>`
-  };
-
-  document.addEventListener("DOMContentLoaded", () => {
-    // Initialize some Modals
-    contextModal = M.Modal.init(contextModal, {"dismissible": true});
-
-    // ###### recreating chunk structure to reuse callback queryRenderResults()
-    full_result_json = {{ query_result_file_content|tojson|safe }};
-    result_json = {};
-    result_json["chunk"] = {};
-    result_json.chunk["cpos_lookup"] = full_result_json.cpos_lookup;
-    result_json.chunk["cpos_ranges"] = full_result_json.cpos_ranges;
-    result_json.chunk["matches"] = full_result_json.matches;
-    result_json.chunk["text_lookup"] = full_result_json.text_lookup;
-
-    // Init corpus analysis components
-    data = new Data();
-    resultsList = new ResultsList("result-list", resultsListOptions);
-    resultsMetaData = new MetaData();
-    results = new Results(data, resultsList, resultsMetaData);
-    results.clearAll();  // inits some object keys and values
-    // 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;
-
-    // Initialization of interactionElemnts
-    // An interactionElement is an object identifing a switch or button via
-    // 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 InteractionElements();
-    let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
-    expertModeInteraction.setCallback("on",
-                                      results.jsList.expertModeOn,
-                                      results.jsList,
-                                      ["query-display"])
-    expertModeInteraction.setCallback("off",
-                                      results.jsList.expertModeOff,
-                                      results.jsList,
-                                      ["query-display"])
-
-    let activateInspectInteraction = new InteractionElement("inspect",
-                                                            false);
-    activateInspectInteraction.setCallback("noCheck",
-                                            results.jsList.activateInspect,
-                                            results.jsList);
-
-    let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
-                                                          false);
-    changeContextInteraction.setCallback("noCheck",
-                                        results.jsList.changeContext,
-                                        results.jsList)
-    interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
-
-    // checks if a change for every interactionElement happens and executes
-    // the callbacks accordingly
-    interactionElements.onChangeExecute();
-
-    // eventListener if pagination is used to apply new context size to new page
-    // and also activate inspect match if progress is 100
-    // also adds more interaction buttons like add to sub results
-    for (let element of paginationElements) {
-      element.addEventListener("click", (event) => {
-        results.jsList.pageChangeEventInteractionHandler(interactionElements);
-      });
-    }
-
-    // render results in table imported parameter is true
-    queryRenderResults(result_json, true);
-
-    // ### Show corpus Metadata
-    showMetaDataButton.onclick = () => {
-      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;
-
-    // live update of lr context per item if context value is changed
-    contextPerItemElement.onchange = results.jsList.changeContext;
-
-    // new insepct event listener makeing use of javascript bubbleing
-    let resultsTable = document.getElementById("query-results");
-    resultsTable.addEventListener("click", (event) => {
-      if (event.target.classList.contains("inspect-btn")) {
-        const dataIndex = event.target.closest("tr").dataset.index;
-        const fakeResponse = results.jsList.createFakeResponse();
-        results.jsList.showMatchContext(fakeResponse);
-      }
-    });
-
-    // scroll to top button if user scrolled down the list
-    let headline = document.querySelector(".headline");
-    let scrollToTop = document.querySelector("#menu-scroll-to-top-div");
-    window.addEventListener("scroll", (event) => {
-      if (pageYOffset > 250) {
-        scrollToTop.classList.toggle("hide", false);
-      } else {
-        scrollToTop.classList.toggle("hide", true);
-      }
-    });
-    scrollToTop.onclick = () => {
-      headline.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
-    };
-  });
-</script>
-{% endblock %}
diff --git a/web/app/templates/utils/macros.html.j2 b/web/app/templates/utils/macros.html.j2
index 07766e4d..54fa671d 100644
--- a/web/app/templates/utils/macros.html.j2
+++ b/web/app/templates/utils/macros.html.j2
@@ -35,78 +35,3 @@
   main .tabs .indicator {background-color: {{ hex_color }};}
 </style>
 {%- endmacro -%}
-
-{% macro show_metadata(query_metadata) %}
-
-<div class="col s12">
-  <table class="highlight">
-    <thead>
-      <tr>
-        <th style="width: 33%">Metadata Description</th>
-        <th style="width: 66%">Value</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for pair in query_metadata|dictsort %}
-      <tr>
-        <td>{{ pair[0]|replace("_", " ")|upper() }}</td>
-        {% if pair[0] == "corpus_all_texts"
-           or pair[0] == "text_lookup"  %}
-          <td>
-            <ul class="collapsible">
-            {% for key, value  in pair[1].items()  %}
-              <li class="text-metadata"
-                  data-metadata-key="{{ pair[0] }}"
-                  data-text-key="{{ key }}">
-                <div class="collapsible-header"
-                     data-metadata-key="{{ pair[0] }}"
-                     data-text-key="{{ key }}">
-                  <i class="material-icons"
-                     data-metadata-key="{{ pair[0] }}"
-                     data-text-key="{{ key }}">info_outline</i>
-                  {{ value['author'] }} - {{ value['publishing_year'] }}
-                  - {{ value['title'] }}
-                </div>
-                <div class="collapsible-body">
-                  <span>
-                    <ul id="bibliographic-data-{{ pair[0] }}-{{ key }}"
-                        style="column-count: 2;">
-                    </ul>
-                  </span>
-                </div>
-              </li>
-            {% endfor %}
-          </ul>
-          </td>
-        {% else %}
-          <td>{{ pair[1] }}</td>
-        {% endif %}
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    let elems = document.querySelectorAll('.collapsible');
-    let instances = M.Collapsible.init(elems, {accordion: false});
-  });
-let collapsibles = document.getElementsByClassName("text-metadata");
-for (let collapsible of collapsibles) {
-  collapsible.onclick = () => {
-    let metadataKey = event.target.dataset.metadataKey;
-    let textKey = event.target.dataset.textKey;
-    let textData = {{ query_metadata|tojson|safe }}[metadataKey][textKey];
-    let bibliographicData = document.getElementById(`bibliographic-data-${metadataKey}-${textKey}`);
-    bibliographicData.innerHTML = "";
-    for (let [key, value] of Object.entries(textData)) {
-      bibliographicData.insertAdjacentHTML("afterbegin",
-      `
-      <li><span style="text-transform: capitalize;">${key}:</span> ${value}</li>
-      `);
-    }
-  }
-}
-</script>
-{% endmacro %}