mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/nopaque into development
This commit is contained in:
commit
914ee5d98a
@ -76,7 +76,6 @@ def analyse_corpus(corpus_id):
|
||||
prefix='inspect-display-options-form')
|
||||
return render_template(
|
||||
'corpora/analyse_corpus.html.j2',
|
||||
corpus=corpus,
|
||||
corpus_id=corpus_id,
|
||||
display_options_form=display_options_form,
|
||||
query_form=query_form,
|
||||
|
@ -93,6 +93,7 @@ def inspect_query_result(query_result_id):
|
||||
View to inspect one importe result file in a corpus analysis like interface
|
||||
'''
|
||||
query_result = QueryResult.query.get_or_404(query_result_id)
|
||||
query_metadata = query_result.query_metadata
|
||||
if not (query_result.creator == current_user
|
||||
or current_user.is_administrator()):
|
||||
abort(403)
|
||||
@ -117,6 +118,7 @@ def inspect_query_result(query_result_id):
|
||||
display_options_form=display_options_form,
|
||||
inspect_display_options_form=inspect_display_options_form,
|
||||
query_result_file_content=query_result_file_content,
|
||||
query_metadata=query_metadata,
|
||||
title='Inspect query result')
|
||||
|
||||
|
||||
|
@ -113,7 +113,7 @@ class CorpusAnalysisClient {
|
||||
}
|
||||
|
||||
getMetaData() {
|
||||
// just emits thos to tell the server to gather all meta data infos and send
|
||||
// just emits this to tell the server to gather all meta data infos and send
|
||||
// those back
|
||||
this.socket.emit("corpus_analysis_get_meta_data", this.corpusId);
|
||||
}
|
||||
|
@ -29,17 +29,21 @@ class InteractionElement {
|
||||
let boundedCallback = callback["function"].bind(callback.bindThis);
|
||||
return boundedCallback;
|
||||
}
|
||||
}
|
||||
|
||||
static onChangeExecute(interactionElements) {
|
||||
class InteractionElements {
|
||||
constructor() {
|
||||
this.interactions = [];
|
||||
}
|
||||
|
||||
addInteractions (interactionsArray) {
|
||||
this.interactions.push(...interactionsArray);
|
||||
}
|
||||
|
||||
onChangeExecute() {
|
||||
// checks if a change for every interactionElement happens and executes
|
||||
// the callbacks accordingly
|
||||
// TODO: This function scould be a static function of the Class InteractionElements
|
||||
// This class does not exist yet. The Class InteractionElements should hold
|
||||
// a list of InteractionElement objects. onChangeExecute loops over InteractionElements
|
||||
// and executes the callbacks as mentioned accordingly. An additional
|
||||
// InteractionElements Class is logically right but also makes things a little more
|
||||
// complex. It is not yet decided.
|
||||
for (let interaction of interactionElements) {
|
||||
for (let interaction of this.interactions) {
|
||||
if (interaction.checkStatus) {
|
||||
interaction.element.addEventListener("change", (event) => {
|
||||
if (event.target.checked) {
|
||||
|
@ -12,6 +12,7 @@ class Results {
|
||||
this.jsList.update();
|
||||
this.data.init();
|
||||
this.metaData.init();
|
||||
this.resultsData.init()
|
||||
this.subResultsData.init();
|
||||
}
|
||||
|
||||
@ -92,6 +93,15 @@ class Data {
|
||||
|
||||
// create results data either from all results or from al lmarked sub results
|
||||
createResultsData(type) {
|
||||
// deactivate inspect, because cqp server cannot handle multiple requests
|
||||
results.jsList.deactivateInspect();
|
||||
activateInspectInteraction.setCallback("noCheck",
|
||||
results.jsList.deactivateInspect,
|
||||
results.jsList);
|
||||
// set flag that results are being created to avoid reactivation of
|
||||
// sub results creation if marked matches are changed
|
||||
resultCreationRunning = true;
|
||||
console.log(resultCreationRunning);
|
||||
if (type === "sub-results") {
|
||||
resultsCreateElement.classList.add("disabled"); // cqp server cannot handle more than one request at a time. Thus we deactivate the resultsCreateElement
|
||||
let tmp = [...results.jsList.addToSubResultsIdsToShow].sort(function(a, b){return a-b});
|
||||
|
@ -56,12 +56,18 @@ function saveSubResultsChoices(response) {
|
||||
clearTimeout();
|
||||
}, 3000)
|
||||
// Resets the resultsCreateElement (removing spinner with setting innerText)
|
||||
resultsCreateElement.innerText = "Create Sub-Results";
|
||||
resultsCreateElement.innerText = "Create Results";
|
||||
resultsCreateElement.insertAdjacentHTML("beforeend", `<i class="material-icons left">build</i>`);
|
||||
// reactivate subResultsCreateElement
|
||||
subResultsCreateElement.classList.remove("disabled");
|
||||
}
|
||||
|
||||
// reactivate inspect
|
||||
results.jsList.activateInspect();
|
||||
activateInspectInteraction.setCallback("noCheck",
|
||||
results.jsList.activateInspect,
|
||||
results.jsList);
|
||||
// set resultCreationRunning to flase
|
||||
resultCreationRunning = false;
|
||||
}
|
||||
|
||||
// This callback is called on socket.on "query".
|
||||
@ -79,6 +85,9 @@ function querySetup(payload) {
|
||||
queryResultsDeterminateElement.style.width = "0%";
|
||||
queryResultsProgressElement.classList.remove("hide");
|
||||
queryResultsUserFeedbackElement.classList.remove("hide");
|
||||
resultsCreateElement.classList.add("disabled");
|
||||
resultsCreateElement.classList.remove("hide");
|
||||
resultsExportElement.classList.add("hide");
|
||||
// some initial values
|
||||
receivedMatchCountElement.innerText = "0";
|
||||
textLookupCountElement.innerText = "0";
|
||||
@ -118,6 +127,7 @@ function queryRenderResults(payload, imported=false) {
|
||||
}
|
||||
helperQueryRenderResults(payload);
|
||||
if (progress === 100) {
|
||||
resultsCreateElement.classList.remove("disabled");
|
||||
queryResultsProgressElement.classList.add("hide");
|
||||
queryResultsUserFeedbackElement.classList.add("hide");
|
||||
resultsExportElement.classList.remove("disabled");
|
||||
@ -154,8 +164,10 @@ function helperQueryRenderResults (payload) {
|
||||
results.jsList.changeContext(); // sets lr context on first result load
|
||||
// incorporating new chunk results into full results
|
||||
results.data.matches.push(...payload.chunk.matches);
|
||||
Object.assign(results.data.cpos_lookup, payload.chunk.cpos_lookup);
|
||||
Object.assign(results.data.text_lookup, payload.chunk.text_lookup);
|
||||
results.data.addData(payload.chunk.cpos_lookup, "cpos_lookup");
|
||||
results.data.addData(payload.chunk.text_lookup, "text_lookup");
|
||||
// complete metaData
|
||||
// results.metaData.add();
|
||||
// show user current and total match count
|
||||
receivedMatchCountElement.innerText = `${results.data.matches.length}`;
|
||||
textLookupCountElement.innerText = `${Object.keys(results.data.text_lookup).length}`;
|
||||
|
@ -340,7 +340,7 @@ class ResultsList extends List {
|
||||
// loops over interactionElements and executes callback functions accordingly
|
||||
pageChangeEventInteractionHandler(interactionElements) {
|
||||
// get elements to check thier status
|
||||
for (let interaction of interactionElements) {
|
||||
for (let interaction of interactionElements.interactions) {
|
||||
if (interaction.checkStatus) {
|
||||
if (interaction.element.checked) {
|
||||
let f_on = interaction.bindThisToCallback("on");
|
||||
@ -437,14 +437,18 @@ class ResultsList extends List {
|
||||
nrMarkedMatches.innerText = [...this.addToSubResultsIdsToShow].length;
|
||||
M.textareaAutoResize(textarea); // after an insert textarea has to be resized manually
|
||||
}
|
||||
// Toggles the create button accoring to the number of ids in addToSubResultsIdsToShow
|
||||
// Toggles the create button according to the number of ids in addToSubResultsIdsToShow
|
||||
if ([...this.addToSubResultsIdsToShow].length > 0) {
|
||||
subResultsCreateElement.classList.remove("disabled");
|
||||
} else if ([...this.addToSubResultsIdsToShow].length === 0) {
|
||||
subResultsCreateElement.classList.add("disabled");
|
||||
}
|
||||
if (resultCreationRunning) {
|
||||
subResultsCreateElement.classList.add("disabled");
|
||||
}
|
||||
// After a match as been added or removed the export button will be
|
||||
// hidden because the sub-results have been alterd and have to be built //// again. Thus subResultsCreateElement has to be shown again.
|
||||
// hidden because the sub-results have been altered and have to be built
|
||||
// again. Thus subResultsCreateElement has to be shown again.
|
||||
subResultsExportElement.classList.add("hide");
|
||||
subResultsCreateElement.classList.remove("hide");
|
||||
// Also activate/deactivate buttons in the table/jsList results accordingly
|
||||
@ -493,6 +497,15 @@ class ResultsList extends List {
|
||||
}
|
||||
}
|
||||
|
||||
// deactivate inspect buttons
|
||||
deactivateInspect() {
|
||||
let inspectBtnElements;
|
||||
inspectBtnElements = document.getElementsByClassName("inspect");
|
||||
for (let inspectBtn of inspectBtnElements) {
|
||||
inspectBtn.classList.add("disabled");
|
||||
}
|
||||
}
|
||||
|
||||
// ### functions to inspect imported Matches
|
||||
// This function creates an object that is similar to the object that is
|
||||
// being recieved as an answere to the getMatchWithContext Method, which is
|
||||
|
@ -87,7 +87,8 @@
|
||||
<div class="col s12">
|
||||
<button class="waves-effect
|
||||
waves-light
|
||||
btn-flat"
|
||||
btn-flat
|
||||
disabled"
|
||||
type="submit"
|
||||
id="results-create">Create Results
|
||||
<i class="material-icons left">build</i>
|
||||
@ -244,6 +245,39 @@
|
||||
|
||||
|
||||
<!-- Modals -->
|
||||
|
||||
<!-- Metadata modal -->
|
||||
{% import "macros/query_result_macro.html.j2" as metadata %}
|
||||
<div id="meta-data-modal" class="modal bottom-sheet">
|
||||
<div class="section">
|
||||
<div class="col s12 right-align">
|
||||
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
{% if query_metadata is defined %}
|
||||
<div class="modal-content">
|
||||
{{ metadata.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>
|
||||
</div>
|
||||
|
||||
<!-- Metadata text details modal -->
|
||||
<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>
|
||||
|
||||
<!-- Analysis init modal -->
|
||||
<div class="modal no-autoinit" id="init-display">
|
||||
<div class="modal-content">
|
||||
@ -420,7 +454,12 @@
|
||||
var textLookupCountElement // Nr of texts the matches occured in will be shown in this element
|
||||
var textTitlesElement; // matched text titles
|
||||
var nrMarkedMatches; // count of matches marked for subresults
|
||||
var showMetadataButton; // Button to show corpus metadata
|
||||
var showMetaDataButton; // Button to show corpus metadata
|
||||
var activateInspectInteraction; // global interaction element
|
||||
var expertModeInteraction; // global interaction element
|
||||
var subResultsInteraction; // global interaction element
|
||||
var changeContextInteraction; // global interaction element
|
||||
var resultCreationRunning;
|
||||
|
||||
// ###### Defining local scope variables ######
|
||||
let contextPerItemElement; // Form Element for display option
|
||||
@ -437,6 +476,7 @@
|
||||
let paginationElements;
|
||||
let queryDisplayElement; // Element for initialization using queryDisplay
|
||||
let xpath; // xpath to grab first resultsList page pagination element
|
||||
let metaDataModal; // modal showing corpus meta data
|
||||
|
||||
// ###### Initialize variables ######
|
||||
addToSubResultsElement = document.getElementById("add-to-sub-results");
|
||||
@ -469,7 +509,8 @@
|
||||
textLookupCountElement = document.getElementById("text-lookup-count");
|
||||
textTitlesElement = document.getElementById("text-titles");
|
||||
nrMarkedMatches = document.getElementById("nr-marked-matches");
|
||||
showMetadataButton = document.getElementById("show-metadata");
|
||||
showMetaDataButton = document.getElementById("show-metadata");
|
||||
metaDataModal = document.getElementById("meta-data-modal");
|
||||
|
||||
// ###### js list options and intialization ######
|
||||
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
|
||||
@ -490,12 +531,20 @@
|
||||
|
||||
// ###### event on DOMContentLoaded ######
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
//set accordion of collapsibles to false
|
||||
M.Collapsible.init(collapsibleElements, {accordion: false});
|
||||
// creates some modals on DOMContentLoaded
|
||||
contextModal = M.Modal.init(contextModal, {"dismissible": true});
|
||||
exportModal = M.Modal.init(exportModal, {"dismissible": true});
|
||||
let defaultOptions = {"dismissible": true,
|
||||
"preventScrolling": false};
|
||||
contextModal = M.Modal.init(contextModal, defaultOptions);
|
||||
exportModal = M.Modal.init(exportModal, defaultOptions);
|
||||
initModal = M.Modal.init(initDisplayElement, {"dismissible": false});
|
||||
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});
|
||||
// Init corpus analysis components
|
||||
data = new Data();
|
||||
resultsList = new ResultsList("result-list", resultsListOptions);
|
||||
@ -572,8 +621,8 @@
|
||||
// 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");
|
||||
interactionElements = new InteractionElements();
|
||||
expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
|
||||
expertModeInteraction.setCallback("on",
|
||||
results.jsList.expertModeOn,
|
||||
results.jsList,
|
||||
@ -583,7 +632,7 @@
|
||||
results.jsList,
|
||||
["query-display"])
|
||||
|
||||
let subResultsInteraction = new InteractionElement("add-to-sub-results");
|
||||
subResultsInteraction = new InteractionElement("add-to-sub-results");
|
||||
subResultsInteraction.setCallback("on",
|
||||
results.jsList.activateAddToSubResults,
|
||||
results.jsList);
|
||||
@ -591,22 +640,22 @@
|
||||
results.jsList.deactivateAddToSubResults,
|
||||
results.jsList);
|
||||
|
||||
let activateInspectInteraction = new InteractionElement("inspect",
|
||||
activateInspectInteraction = new InteractionElement("inspect",
|
||||
false);
|
||||
activateInspectInteraction.setCallback("noCheck",
|
||||
results.jsList.activateInspect,
|
||||
results.jsList);
|
||||
|
||||
let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
|
||||
changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
|
||||
false);
|
||||
changeContextInteraction.setCallback("noCheck",
|
||||
results.jsList.changeContext,
|
||||
results.jsList)
|
||||
interactionElements.push(expertModeInteraction, subResultsInteraction, activateInspectInteraction, changeContextInteraction);
|
||||
interactionElements.addInteractions([expertModeInteraction, subResultsInteraction, activateInspectInteraction, changeContextInteraction]);
|
||||
|
||||
// checks if a change for every interactionElement happens and executes
|
||||
// the callbacks accordingly
|
||||
InteractionElement.onChangeExecute(interactionElements);
|
||||
interactionElements.onChangeExecute();
|
||||
|
||||
// eventListener if pagination is used to apply new context size to new page
|
||||
// and also activate inspect match if progress is 100
|
||||
@ -617,12 +666,98 @@
|
||||
});
|
||||
}
|
||||
|
||||
// ### Show corpus Metadata
|
||||
showMetaDataButton.onclick = () => {
|
||||
let tmpObject = {};
|
||||
Object.assign(tmpObject, results.metaData);
|
||||
tmpObject["query"] = results.data.query;
|
||||
tmpObject["text_lookup"] = results.data.text_lookup;
|
||||
metaDataModalContent = document.getElementById("meta-data-modal-content");
|
||||
let table = `<div class="col s12">
|
||||
<table class="responsive-table highlight">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Metadata Description</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>`
|
||||
for (let [outerKey, outerValue] of Object.entries(tmpObject)) {
|
||||
table += `<tr>
|
||||
<td>${outerKey}</td>`
|
||||
if (outerKey === "corpus_all_texts" || outerKey === "text_lookup") {
|
||||
table += `<td>
|
||||
<table>`
|
||||
for (let [innerKey, innerValue] of Object.entries(outerValue)) {
|
||||
table += `<tr style="border-bottom: none;">
|
||||
<td>
|
||||
<i>${innerValue.title}</i> written
|
||||
by <i>${innerValue.author}</i>
|
||||
in <i>${innerValue.publishing_year}</i>
|
||||
<a class="waves-effect
|
||||
waves-light
|
||||
btn
|
||||
right
|
||||
more-text-detials"
|
||||
data-metadata-key="${outerKey}"
|
||||
data-text-key="${innerKey}"
|
||||
href="#modal-text-details">More
|
||||
<i class="material-icons right"
|
||||
data-metadata-key="${outerKey}"
|
||||
data-text-key="${innerKey}">
|
||||
info_outline
|
||||
</i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>`
|
||||
}
|
||||
table += `</td>
|
||||
</table>`
|
||||
} else {
|
||||
table += `<td>${outerValue}</td>`
|
||||
}
|
||||
table += `</tr>`
|
||||
}
|
||||
table += `</tbody>
|
||||
</table>`
|
||||
metaDataModalContent.insertAdjacentHTML("afterbegin", table);
|
||||
metaDataModal.open();
|
||||
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 = tmpObject[metadataKey][textKey];
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
// ### Show corpus Metadata
|
||||
showMetadataButton.onclick = () => {
|
||||
console.log("click");
|
||||
}
|
||||
|
||||
// ### Download events and sub-results creation ###
|
||||
var loadingSpinnerHTML = `
|
||||
@ -653,9 +788,9 @@
|
||||
// add onclick to download JSON button and download the file
|
||||
downloadResultsJSONElement = document.getElementById("download-results-json")
|
||||
downloadResultsJSONElement.onclick = () => {
|
||||
let filename = results.data.createDownloadFilename("matches");
|
||||
results.data.addData(results.metaData);
|
||||
results.data.downloadJSONRessource(filename, results.resultsData,
|
||||
let filename = results.resultsData.createDownloadFilename("matches-results");
|
||||
results.resultsData.addData(results.metaData);
|
||||
results.resultsData.downloadJSONRessource(filename, results.resultsData,
|
||||
downloadResultsJSONElement
|
||||
)};
|
||||
}
|
||||
@ -675,7 +810,7 @@
|
||||
// add onclick to download JSON button and download the file
|
||||
downloadResultsJSONElement = document.getElementById("download-results-json")
|
||||
downloadResultsJSONElement.onclick = () => {
|
||||
let filename = results.data.createDownloadFilename("matches-sub-results");
|
||||
let filename = results.subResultsData.createDownloadFilename("matches-sub-results");
|
||||
results.subResultsData.downloadJSONRessource(filename,
|
||||
results.subResultsData,
|
||||
downloadResultsJSONElement
|
||||
|
@ -1,15 +1,6 @@
|
||||
{% macro show_metadata(query_metadata) %}
|
||||
<div class="col s12">
|
||||
<p>Below the metadata for the results from the Corpus
|
||||
<i>{{ query_metadata.corpus_name }}</i> generated with the query
|
||||
<i>{{ 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>
|
||||
@ -21,8 +12,8 @@
|
||||
{% for pair in query_metadata|dictsort %}
|
||||
<tr>
|
||||
<td>{{ pair[0] }}</td>
|
||||
{% if pair[0] == 'corpus_all_texts'
|
||||
or pair[0] == 'text_lookup' %}
|
||||
{% if pair[0] == "corpus_all_texts"
|
||||
or pair[0] == "text_lookup" %}
|
||||
<td>
|
||||
<table>
|
||||
{% for key, value in pair[1].items() %}
|
||||
@ -58,8 +49,6 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Structure -->
|
||||
<div id="modal-text-details" class="modal modal-fixed-footer">
|
||||
@ -107,3 +96,4 @@ for (var btn of moreTextDetailsButtons) {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endmacro %}
|
@ -5,21 +5,54 @@
|
||||
{% set full_width = 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" style="margin-bottom: 0px;">
|
||||
<div class="col s12 m3 l3" id="results-info">
|
||||
<div class="row section">
|
||||
<div class=" row show-on-success">
|
||||
<div class="col s12 m2 l2" id="infos">
|
||||
<h6 style="margin-top: 0px;">Infos</h6>
|
||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||
<div class="col" id="infos">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<button id="show-metadata"
|
||||
class="waves-effect
|
||||
waves-light
|
||||
btn-flat"
|
||||
type="submit">Corpus Metadata
|
||||
<i class="material-icons left">info_outline</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col s12">
|
||||
<p>
|
||||
Displaying
|
||||
<span id="received-match-count">
|
||||
</span> of
|
||||
<span id="match-count"></span>
|
||||
matches.
|
||||
matches loaded.
|
||||
<br>
|
||||
Matches occured in
|
||||
<span id="text-lookup-count"></span>
|
||||
@ -27,15 +60,19 @@
|
||||
<br>
|
||||
<span id=text-titles></span>
|
||||
</p>
|
||||
<div class="progress hide" id="query-results-progress">
|
||||
<p id="query-results-user-feedback">
|
||||
<i class="material-icons">help</i>
|
||||
The Server is still sending your results.
|
||||
Functions like "Export Results" and "Match Inspect" will be
|
||||
available after all matches have been loaded.
|
||||
</p>
|
||||
<div class="progress" 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">
|
||||
<div class="col s12 m2 l2" id="display">
|
||||
<h6 style="margin-top: 0px;">Display</h6>
|
||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||
<div class="row">
|
||||
@ -51,8 +88,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table showing the query results -->
|
||||
<div class="col s12">
|
||||
<ul class="pagination paginationTop"></ul>
|
||||
@ -75,6 +110,28 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metadata modal -->
|
||||
{% import "macros/query_result_macro.html.j2" as metadata %}
|
||||
<div id="metadata-modal" class="modal bottom-sheet">
|
||||
<div class="section">
|
||||
<div class="col s12 right-align">
|
||||
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
{% if query_metadata is defined %}
|
||||
<div class="modal-content">
|
||||
{{ metadata.show_metadata(query_metadata) }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="modal-content">
|
||||
<div class="metaDataModal">
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Context modal used for detailed information about one match -->
|
||||
@ -168,6 +225,8 @@
|
||||
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");
|
||||
@ -183,6 +242,8 @@
|
||||
contextPerItemElement = document.getElementById("display-options-form-result_context");
|
||||
paginationElements = document.getElementsByClassName("pagination");
|
||||
contextModal = document.getElementById("context-modal");
|
||||
metaDataModal = document.getElementById("metadata-modal");
|
||||
showMetaDataButton = document.getElementById("show-metadata");
|
||||
|
||||
// js list options
|
||||
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
|
||||
@ -220,7 +281,15 @@
|
||||
resultsMetaData = new MetaData();
|
||||
results = new Results(data, resultsList, resultsMetaData);
|
||||
results.clearAll(); // inits some object keys and values
|
||||
// TODO: save metadate into results.metaData
|
||||
// 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;
|
||||
@ -230,7 +299,7 @@
|
||||
// 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();
|
||||
interactionElements = new InteractionElements();
|
||||
let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
|
||||
expertModeInteraction.setCallback("on",
|
||||
results.jsList.expertModeOn,
|
||||
@ -252,11 +321,11 @@
|
||||
changeContextInteraction.setCallback("noCheck",
|
||||
results.jsList.changeContext,
|
||||
results.jsList)
|
||||
interactionElements.push(expertModeInteraction, activateInspectInteraction, changeContextInteraction);
|
||||
interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
|
||||
|
||||
// checks if a change for every interactionElement happens and executes
|
||||
// the callbacks accordingly
|
||||
InteractionElement.onChangeExecute(interactionElements);
|
||||
interactionElements.onChangeExecute();
|
||||
|
||||
// eventListener if pagination is used to apply new context size to new page
|
||||
// and also activate inspect match if progress is 100
|
||||
@ -270,6 +339,13 @@
|
||||
// render results in table imported parameter is true
|
||||
queryRenderResults(result_json, true);
|
||||
|
||||
// ### Show corpus Metadata
|
||||
showMetaDataButton.onclick = () => {
|
||||
console.log(results.metaData);
|
||||
console.log(results.data.text_lookup);
|
||||
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;
|
||||
|
@ -41,8 +41,7 @@
|
||||
right
|
||||
more-text-detials"
|
||||
data-metadata-key="{{ pair[0] }}"
|
||||
data-text-key="{{ key }}"
|
||||
href="#modal-text-details">More
|
||||
data-text-key="{{ key }}">More
|
||||
<i class="material-icons right"
|
||||
data-metadata-key="{{ pair[0] }}"
|
||||
data-text-key="{{ key }}">
|
||||
|
Loading…
Reference in New Issue
Block a user