mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 09:15:41 +00:00
282 lines
12 KiB
Django/Jinja
282 lines
12 KiB
Django/Jinja
{% extends "nopaque.html.j2" %}
|
|
|
|
{% set headline = ' ' %}
|
|
|
|
{% set full_width = True %}
|
|
|
|
{% block page_content %}
|
|
<div class="col s12" id="query-display">
|
|
<div class="card">
|
|
<div class="card-content" id="result-list" style="overflow: hidden;">
|
|
<div class="row" style="margin-bottom: 0px;">
|
|
<div class="col s12 m3 l3" id="results-info">
|
|
<div class="row section">
|
|
<h6 style="margin-top: 0px;">Infos</h6>
|
|
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
<div class="col" id="infos">
|
|
<p>
|
|
Displaying
|
|
<span id="received-match-count">
|
|
</span> of
|
|
<span id="match-count"></span>
|
|
matches.
|
|
<br>
|
|
Matches occured in
|
|
<span id="text-lookup-count"></span>
|
|
corpus files:
|
|
<br>
|
|
<span id=text-titles></span>
|
|
</p>
|
|
<div class="progress hide" id="query-results-progress">
|
|
<div class="determinate" id="query-results-determinate"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m9 l9" id="actions-and-tools">
|
|
<div class="row section">
|
|
<div class="col s12 m3 l3" id="display">
|
|
<h6 style="margin-top: 0px;">Display</h6>
|
|
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<form id="display-options-form">
|
|
{{ M.render_field(display_options_form.results_per_page,
|
|
material_icon='format_list_numbered') }}
|
|
{{ M.render_field(display_options_form.result_context,
|
|
material_icon='short_text') }}
|
|
{{ M.render_field(display_options_form.expert_mode) }}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Table showing the query results -->
|
|
<div class="col s12">
|
|
<ul class="pagination paginationTop"></ul>
|
|
<table class="responsive-table highlight">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 2%">Nr.</th>
|
|
<th style="width: 3%">Title</th>
|
|
<th style="width: 25%">Left context</th>
|
|
<th style="width: 35%">Match</th>
|
|
<th style="width: 10%">Actions</th>
|
|
<th style="width: 25%">Right Context</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list" id="query-results">
|
|
</tbody>
|
|
</table>
|
|
<ul class="pagination paginationBottom"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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') }}">
|
|
</script>
|
|
<script src="{{ url_for('static', filename='js/nopaque.InteractionElement.js') }}">
|
|
</script>
|
|
<script>
|
|
// ###### global variables ######
|
|
var full_result_json;
|
|
var result_json;
|
|
var queryResultsDeterminateElement; // The progress bar for recieved results
|
|
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;
|
|
|
|
// ###### Initializing variables ######
|
|
displayOptionsFormElement = document.getElementById("display-options-form");
|
|
resultItems = [];
|
|
queryResultsDeterminateElement = document.getElementById("query-results-determinate");
|
|
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");
|
|
|
|
// 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
|
|
// TODO: save metadate into results.metaData
|
|
|
|
// 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);
|
|
|
|
// 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;
|
|
});
|
|
</script>
|
|
{% endblock %}
|