From 0714070a9b33571da185773ec882099a14bbbaeb Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <pjentsch@sfb1288inf-Laptop.fritz.box>
Date: Wed, 15 Jul 2020 13:16:31 +0200
Subject: [PATCH] Fully integrate new query_results model. old one is now
 deprecated.

---
 web/app/query_results/views.py                | 12 ++-
 web/app/static/js/nopaque.lists.js            |  5 ++
 ...t_query_result.html.j2 => inspect.html.j2} | 78 ++++++++++++++++++-
 3 files changed, 87 insertions(+), 8 deletions(-)
 rename web/app/templates/query_results/{inspect_query_result.html.j2 => inspect.html.j2} (75%)

diff --git a/web/app/query_results/views.py b/web/app/query_results/views.py
index 70c879f0..8a2e0176 100644
--- a/web/app/query_results/views.py
+++ b/web/app/query_results/views.py
@@ -1,7 +1,7 @@
 from . import query_results
 from . import tasks
 from .. import db
-from ..corpora.forms import DisplayOptionsForm
+from ..corpora.forms import DisplayOptionsForm, InspectDisplayOptionsForm
 from ..models import QueryResult
 from .forms import AddQueryResultForm
 from flask import (abort, current_app, flash, make_response, redirect,
@@ -101,6 +101,9 @@ def inspect_query_result(query_result_id):
         results_per_page=request.args.get('results_per_page', 30),
         result_context=request.args.get('context', 20)
     )
+    inspect_display_options_form = InspectDisplayOptionsForm(
+        prefix='inspect-display-options-form'
+    )
     query_result_file_path = os.path.join(
         current_app.config['NOPAQUE_STORAGE'],
         str(current_user.id),
@@ -109,10 +112,11 @@ def inspect_query_result(query_result_id):
         query_result.filename
     )
     with open(query_result_file_path, 'r') as query_result_file:
-        query_result_content = json.load(query_result_file)
-    return render_template('query_results/inspect_query_result.html.j2',
+        query_result_file_content = json.load(query_result_file)
+    return render_template('query_results/inspect.html.j2',
                            display_options_form=display_options_form,
-                           query_result_content=query_result_content,
+                           inspect_display_options_form=inspect_display_options_form,
+                           query_result_file_content=query_result_file_content,
                            title='Inspect query result')
 
 
diff --git a/web/app/static/js/nopaque.lists.js b/web/app/static/js/nopaque.lists.js
index eaf0f2e7..c7ec8fa8 100644
--- a/web/app/static/js/nopaque.lists.js
+++ b/web/app/static/js/nopaque.lists.js
@@ -120,6 +120,7 @@ RessourceList.dataMapper = {
   QueryResult: query_result => ({corpus_name: query_result.query_metadata.corpus_name,
                                  description: query_result.description,
                                  id: query_result.id,
+                                 "inspect-link": `/query_results/${query_result.id}/inspect`,
                                  link: `/query_results/${query_result.id}`,
                                  query: query_result.query_metadata.query,
                                  title: query_result.title}),
@@ -261,6 +262,9 @@ RessourceList.options = {
                            <span class="query"></span>
                          </td>
                          <td class="actions right-align">
+                           <a class="btn-floating tooltipped waves-effect waves-light inspect-link" data-position="top" data-tooltip="View Results">
+                             <i class="material-icons">search</i>
+                           </a>
                            <a class="btn-floating tooltipped link waves-effect waves-light" data-position="top" data-tooltip="Go to query result">
                              <i class="material-icons">send</i>
                            </a>
@@ -271,6 +275,7 @@ RessourceList.options = {
                              "query",
                              "title",
                              {data: ["id"]},
+                             {name: "inspect-link", attr: "href"},
                              {name: "link", attr: "href"}]},
   // Result (imported from corpus analysis) entity blueprint setting html
   // strucuture per entity per row
diff --git a/web/app/templates/query_results/inspect_query_result.html.j2 b/web/app/templates/query_results/inspect.html.j2
similarity index 75%
rename from web/app/templates/query_results/inspect_query_result.html.j2
rename to web/app/templates/query_results/inspect.html.j2
index 73910f82..a2e810c3 100644
--- a/web/app/templates/query_results/inspect_query_result.html.j2
+++ b/web/app/templates/query_results/inspect.html.j2
@@ -77,6 +77,70 @@
   </div>
 </div>
 
+<!-- Context modal used for detailed information about one match -->
+<div id="context-modal" class="modal modal-fixed-footer">
+  <div class="modal-content">
+    <form>
+      <div class="row" style="margin-bottom: 0px; margin-top: -20px;">
+        <div class="col s12 m6 l6">
+          <div class="section">
+            <h6 style="margin-top: 0px;">Display</h6>
+            <div class="divider" style="margin-bottom: 10px;"></div>
+            <div class="col s12" style="margin-bottom: 10px;" id="display-inspect">
+              {{ inspect_display_options_form.expert_mode_inspect.label.text }}
+              <div class="switch right">
+                <label>
+                  {{ inspect_display_options_form.expert_mode_inspect() }}
+                  <span class="lever"></span>
+                </label>
+              </div>
+            </div>
+            <div class="col s12" style="margin-bottom: 10px;" id="create-inspect">
+              {{ inspect_display_options_form.highlight_sentences.label.text }}
+              <div class="switch right">
+                <label>
+                  {{ inspect_display_options_form.highlight_sentences() }}
+                  <span class="lever"></span>
+                </label>
+              </div>
+            </div>
+            <div class="col s12" style="margin-bottom: 10px;">
+              Sentences around match
+              <div class="input-field right" style="margin-top: -2rem;
+                                                    margin-bottom: -2rem;
+                                                    height: 0px;">
+                <p class="range-field">
+                  <input type="range"
+                         id="context-sentences"
+                         min="1"
+                         max="10"
+                         value="3" />
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+    <div class="row section">
+      <h5 style="margin-top: 0px;">Context for match:
+        <span id="context-match-nr"></span></h5>
+      <div class="divider" style="margin-bottom: 10px;"></div>
+      <div class="col s12" >
+        <div id="context-results">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    {# <a id="inspect-download-context" class="left waves-effect waves-light btn">
+      Export Single Context
+      <i class="material-icons right">file_download</i>
+    </a> #}
+    <a href="#!" class="modal-close waves-effect waves-light red btn">Close</a>
+  </div>
+</div>
+
 <script src="{{ url_for('static', filename='js/nopaque.Results.js') }}">
 </script>
 <script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
@@ -96,12 +160,14 @@
   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;
 
   // ###### Initializing variables ######
   displayOptionsFormElement = document.getElementById("display-options-form");
@@ -116,6 +182,7 @@
   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");
 
   // js list options
   displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@@ -135,10 +202,13 @@
   };
 
   document.addEventListener("DOMContentLoaded", () => {
+    // Initialize some Modals
+    contextModal = M.Modal.init(contextModal, {"dismissible": true});
+
     // ###### recreating chunk structure to reuse callback queryRenderResults()
-    full_result_json = {{ result_json|tojson|safe }};
+    full_result_json = {{ query_result_file_content|tojson|safe }};
     result_json = {};
-    result_json.chunk = {};
+    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;
@@ -198,7 +268,7 @@
     }
 
     // render results in table imported parameter is true
-    queryRenderResults(result_json, true)
+    queryRenderResults(result_json, true);
 
     // live update of hits per page if hits per page value is changed
     let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList);
@@ -208,4 +278,4 @@
     contextPerItemElement.onchange = results.jsList.changeContext;
   });
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}