mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-14 18:10:40 +00:00
Add a parallel package for query results.
This commit is contained in:
Patrick Jentsch
44
web/app/templates/query_results/add_query_result.html.j2
Normal file
44
web/app/templates/query_results/add_query_result.html.j2
Normal file
@ -0,0 +1,44 @@
|
||||
{% extends "nopaque.html.j2" %}
|
||||
|
||||
{% block page_content %}
|
||||
<div class="col s12 m4">
|
||||
<p>Fill out the following form to upload and view your exported query data from the corpus analsis.</p>
|
||||
<a class="waves-effect waves-light btn" href="{{ url_for('main.dashboard') }}"><i class="material-icons left">arrow_back</i>Back to dashboard</a>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m8">
|
||||
<form class="nopaque-submit-form" data-progress-modal="progress-modal">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
{{ add_query_result_form.hidden_tag() }}
|
||||
<div class="row">
|
||||
<div class="col s12 m4">
|
||||
{{ M.render_field(add_query_result_form.title, data_length='32', material_icon='title') }}
|
||||
</div>
|
||||
<div class="col s12 m8">
|
||||
{{ M.render_field(add_query_result_form.description, data_length='255', material_icon='description') }}
|
||||
</div>
|
||||
<div class="col s12">
|
||||
{{ M.render_field(add_query_result_form.file, accept='.json', placeholder='Choose your .json file') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action right-align">
|
||||
{{ M.render_field(add_query_result_form.submit, material_icon='send') }}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="progress-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4><i class="material-icons prefix">file_upload</i> Uploading file...</h4>
|
||||
<div class="progress">
|
||||
<div class="determinate" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="modal-close waves-effect waves-light btn red abort-request">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
211
web/app/templates/query_results/inspect_query_result.html.j2
Normal file
211
web/app/templates/query_results/inspect_query_result.html.j2
Normal file
@ -0,0 +1,211 @@
|
||||
{% 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>
|
||||
|
||||
<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
|
||||
|
||||
// ###### 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;
|
||||
|
||||
// ###### 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");
|
||||
|
||||
// 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", () => {
|
||||
// ###### recreating chunk structure to reuse callback queryRenderResults()
|
||||
full_result_json = {{ result_json|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 Array();
|
||||
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.push(expertModeInteraction, activateInspectInteraction, changeContextInteraction);
|
||||
|
||||
// checks if a change for every interactionElement happens and executes
|
||||
// the callbacks accordingly
|
||||
InteractionElement.onChangeExecute(interactionElements);
|
||||
|
||||
// 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 %}
|
||||
119
web/app/templates/query_results/query_result.html.j2
Normal file
119
web/app/templates/query_results/query_result.html.j2
Normal file
@ -0,0 +1,119 @@
|
||||
{% extends "nopaque.html.j2" %}
|
||||
|
||||
{% block page_content %}
|
||||
|
||||
|
||||
<div class="col s12">
|
||||
<p>Below the metadata for the results from the Corpus
|
||||
<i>{{ query_result.query_metadata.corpus_name }}</i> generated with the query
|
||||
<i>{{ query_result.query_metadata.query }}</i> are shown.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<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_result.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 }}">
|
||||
info_outline
|
||||
</i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</td>
|
||||
{% else %}
|
||||
<td>{{ pair[1] }}</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-action right-align">
|
||||
<a class="waves-effect waves-light btn left-align" href="{{ url_for('services.service', service='corpus_analysis') }}">Back To Overview<i class="material-icons right">arrow_back</i></a>
|
||||
<a class="waves-effect waves-light btn" href="{{ url_for('query_results.inspect_query_result', query_result_id=query_result.id) }}">Inspect Results<i class="material-icons right">search</i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Structure -->
|
||||
<div id="modal-text-details" class="modal modal-fixed-footer">
|
||||
<div class="modal-content">
|
||||
<h4>Bibliographic data</h4>
|
||||
<p id="bibliographic-data"></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var moreTextDetailsButtons;
|
||||
moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
|
||||
for (var btn of moreTextDetailsButtons) {
|
||||
btn.onclick = () => {
|
||||
let modal = document.getElementById("modal-text-details");
|
||||
modal = M.Modal.init(modal, {"dismissible": true});
|
||||
modal.open();
|
||||
let metadataKey = event.target.dataset.metadataKey;
|
||||
let textKey = event.target.dataset.textKey;
|
||||
let textData = {{ query_result.query_metadata|tojson|safe }}[metadataKey][textKey];
|
||||
console.log(textData);
|
||||
let bibliographicData = document.getElementById("bibliographic-data");
|
||||
bibliographicData.innerHTML = "";
|
||||
let table = document.createElement("table");
|
||||
for (let [key, value] of Object.entries(textData)) {
|
||||
table.insertAdjacentHTML("afterbegin",
|
||||
`
|
||||
<tr>
|
||||
<td>${key}</td>
|
||||
<td>${value}</td>
|
||||
</tr>
|
||||
`);
|
||||
}
|
||||
table.insertAdjacentHTML("afterbegin",
|
||||
`
|
||||
<thead>
|
||||
<th>Description</th>
|
||||
<th>Value</th>
|
||||
</thead>
|
||||
`)
|
||||
bibliographicData.appendChild(table);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
71
web/app/templates/query_results/results.html.j2
Normal file
71
web/app/templates/query_results/results.html.j2
Normal file
@ -0,0 +1,71 @@
|
||||
{% extends "nopaque.html.j2" %}
|
||||
|
||||
{% set full_width = True %}
|
||||
|
||||
{% block page_content %}
|
||||
|
||||
<div class="col s12">
|
||||
<p>This is an overview of all your imported results.</p>
|
||||
</div>
|
||||
|
||||
<div class="col s12">
|
||||
<div class="card">
|
||||
<div class="card-content" id="results">
|
||||
<div class="input-field">
|
||||
<i class="material-icons prefix">search</i>
|
||||
<input id="search-results" class="search" type="search"></input>
|
||||
<label for="search-results">Search results</label>
|
||||
</div>
|
||||
<ul class="pagination paginationTop"></ul>
|
||||
<table class="highlight responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sort" data-sort="query">Query</th>
|
||||
<th class="sort" data-sort="match_count">Match count</th>
|
||||
<th class="sort" data-sort="corpus_name">Corpus name</th>
|
||||
<th class="sort" data-sort="corpus_creation_date">Corpus creation date</th>
|
||||
<th class="sort" data-sort="corpus_analysis_date">Corpus analysis date</th>
|
||||
<th class="sort" data-sort="corpus_type">Corpus type</th>
|
||||
<th>{# Actions #}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list">
|
||||
<tr class="show-if-only-child">
|
||||
<td colspan="5">
|
||||
<span class="card-title"><i class="material-icons left">folder</i>Nothing here...</span>
|
||||
<p>No results yet imported.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination paginationBottom"></ul>
|
||||
</div>
|
||||
<div class="card-action right-align">
|
||||
<a class="waves-effect waves-light btn" href="{{ url_for('results.import_results') }}">Import Results<i class="material-icons right">file_upload</i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Delete modals #}
|
||||
{% for result in results %}
|
||||
<div id="delete-result-{{ result.id }}-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm result file deletion</h4>
|
||||
<p>Do you really want to delete the result file created on <i>{{ result.corpus_analysis_date }}</i>?
|
||||
<p>The file holds results for the query <i>{{ result.query }}</i>.</p>
|
||||
<p>The file will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="btn modal-close red waves-effect waves-light" href="{{ url_for('results.result_delete', result_id=result.id) }}"><i class="material-icons left">delete</i>Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<script>
|
||||
var ressources = {{ results|tojson|safe }};
|
||||
var importedResultsList = new RessourceList("results", null, "result");
|
||||
importedResultsList.addRessources(ressources);
|
||||
RessourceList.modifyTooltips();
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user