diff --git a/web/app/query_results/views.py b/web/app/query_results/views.py
index 70c879f04b68751d38a361ab432eb49e16eda4e6..8a2e01765319f2b512e15941d54dc85873ef8e3f 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 eaf0f2e71848139af548515eef4f5dd0bef0cc1d..c7ec8fa899135e2b615d04a2333b90c4218b1b03 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 73910f8251c005df132e128aa74659131878e249..a2e810c316352b54967f2cb8fe350d4e1a64992a 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 %}