sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 09:15:41 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/nopaque into development

Browse Source
This commit is contained in:
Patrick Jentsch 2020-07-20 14:08:18 +02:00
commit 914ee5d98a
11 changed files with 386 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/corpora/views.py
View File

@ -76,7 +76,6 @@ def analyse_corpus(corpus_id):
prefix='inspect-display-options-form') prefix='inspect-display-options-form')
return render_template( return render_template(
'corpora/analyse_corpus.html.j2', 'corpora/analyse_corpus.html.j2',
corpus=corpus,
corpus_id=corpus_id, corpus_id=corpus_id,
display_options_form=display_options_form, display_options_form=display_options_form,
query_form=query_form, query_form=query_form,

2
web/app/query_results/views.py
View File

@ -93,6 +93,7 @@ def inspect_query_result(query_result_id):
View to inspect one importe result file in a corpus analysis like interface View to inspect one importe result file in a corpus analysis like interface
''' '''
query_result = QueryResult.query.get_or_404(query_result_id) query_result = QueryResult.query.get_or_404(query_result_id)
query_metadata = query_result.query_metadata
if not (query_result.creator == current_user if not (query_result.creator == current_user
or current_user.is_administrator()): or current_user.is_administrator()):
abort(403) abort(403)
@ -117,6 +118,7 @@ def inspect_query_result(query_result_id):
display_options_form=display_options_form, display_options_form=display_options_form,
inspect_display_options_form=inspect_display_options_form, inspect_display_options_form=inspect_display_options_form,
query_result_file_content=query_result_file_content, query_result_file_content=query_result_file_content,
query_metadata=query_metadata,
title='Inspect query result') title='Inspect query result')

2
web/app/static/js/nopaque.CorpusAnalysisClient.js
View File

@ -113,7 +113,7 @@ class CorpusAnalysisClient {
} }
getMetaData() { 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 // those back
this.socket.emit("corpus_analysis_get_meta_data", this.corpusId); this.socket.emit("corpus_analysis_get_meta_data", this.corpusId);
} }

20
web/app/static/js/nopaque.InteractionElement.js
View File

@ -29,17 +29,21 @@ class InteractionElement {
let boundedCallback = callback["function"].bind(callback.bindThis); let boundedCallback = callback["function"].bind(callback.bindThis);
return boundedCallback; 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 // checks if a change for every interactionElement happens and executes
// the callbacks accordingly // the callbacks accordingly
// TODO: This function scould be a static function of the Class InteractionElements for (let interaction of this.interactions) {
// 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) {
if (interaction.checkStatus) { if (interaction.checkStatus) {
interaction.element.addEventListener("change", (event) => { interaction.element.addEventListener("change", (event) => {
if (event.target.checked) { if (event.target.checked) {

10
web/app/static/js/nopaque.Results.js
View File

@ -12,6 +12,7 @@ class Results {
this.jsList.update(); this.jsList.update();
this.data.init(); this.data.init();
this.metaData.init(); this.metaData.init();
this.resultsData.init()
this.subResultsData.init(); this.subResultsData.init();
} }
@ -92,6 +93,15 @@ class Data {
// create results data either from all results or from al lmarked sub results // create results data either from all results or from al lmarked sub results
createResultsData(type) { 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") { if (type === "sub-results") {
resultsCreateElement.classList.add("disabled"); // cqp server cannot handle more than one request at a time. Thus we deactivate the resultsCreateElement 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}); let tmp = [...results.jsList.addToSubResultsIdsToShow].sort(function(a, b){return a-b});

20
web/app/static/js/nopaque.callbacks.js
View File

@ -56,12 +56,18 @@ function saveSubResultsChoices(response) {
clearTimeout(); clearTimeout();
}, 3000) }, 3000)
// Resets the resultsCreateElement (removing spinner with setting innerText) // 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>`); resultsCreateElement.insertAdjacentHTML("beforeend", `<i class="material-icons left">build</i>`);
// reactivate subResultsCreateElement // reactivate subResultsCreateElement
subResultsCreateElement.classList.remove("disabled"); 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". // This callback is called on socket.on "query".
@ -79,6 +85,9 @@ function querySetup(payload) {
queryResultsDeterminateElement.style.width = "0%"; queryResultsDeterminateElement.style.width = "0%";
queryResultsProgressElement.classList.remove("hide"); queryResultsProgressElement.classList.remove("hide");
queryResultsUserFeedbackElement.classList.remove("hide"); queryResultsUserFeedbackElement.classList.remove("hide");
resultsCreateElement.classList.add("disabled");
resultsCreateElement.classList.remove("hide");
resultsExportElement.classList.add("hide");
// some initial values // some initial values
receivedMatchCountElement.innerText = "0"; receivedMatchCountElement.innerText = "0";
textLookupCountElement.innerText = "0"; textLookupCountElement.innerText = "0";
@ -118,6 +127,7 @@ function queryRenderResults(payload, imported=false) {
} }
helperQueryRenderResults(payload); helperQueryRenderResults(payload);
if (progress === 100) { if (progress === 100) {
resultsCreateElement.classList.remove("disabled");
queryResultsProgressElement.classList.add("hide"); queryResultsProgressElement.classList.add("hide");
queryResultsUserFeedbackElement.classList.add("hide"); queryResultsUserFeedbackElement.classList.add("hide");
resultsExportElement.classList.remove("disabled"); resultsExportElement.classList.remove("disabled");
@ -154,8 +164,10 @@ function helperQueryRenderResults (payload) {
results.jsList.changeContext(); // sets lr context on first result load results.jsList.changeContext(); // sets lr context on first result load
// incorporating new chunk results into full results // incorporating new chunk results into full results
results.data.matches.push(...payload.chunk.matches); results.data.matches.push(...payload.chunk.matches);
Object.assign(results.data.cpos_lookup, payload.chunk.cpos_lookup); results.data.addData(payload.chunk.cpos_lookup, "cpos_lookup");
Object.assign(results.data.text_lookup, payload.chunk.text_lookup); results.data.addData(payload.chunk.text_lookup, "text_lookup");
// complete metaData
// results.metaData.add();
// show user current and total match count // show user current and total match count
receivedMatchCountElement.innerText = `${results.data.matches.length}`; receivedMatchCountElement.innerText = `${results.data.matches.length}`;
textLookupCountElement.innerText = `${Object.keys(results.data.text_lookup).length}`; textLookupCountElement.innerText = `${Object.keys(results.data.text_lookup).length}`;

19
web/app/static/js/nopaque.lists.js
View File

@ -340,7 +340,7 @@ class ResultsList extends List {
// loops over interactionElements and executes callback functions accordingly // loops over interactionElements and executes callback functions accordingly
pageChangeEventInteractionHandler(interactionElements) { pageChangeEventInteractionHandler(interactionElements) {
// get elements to check thier status // get elements to check thier status
for (let interaction of interactionElements) { for (let interaction of interactionElements.interactions) {
if (interaction.checkStatus) { if (interaction.checkStatus) {
if (interaction.element.checked) { if (interaction.element.checked) {
let f_on = interaction.bindThisToCallback("on"); let f_on = interaction.bindThisToCallback("on");
@ -437,14 +437,18 @@ class ResultsList extends List {
nrMarkedMatches.innerText = [...this.addToSubResultsIdsToShow].length; nrMarkedMatches.innerText = [...this.addToSubResultsIdsToShow].length;
M.textareaAutoResize(textarea); // after an insert textarea has to be resized manually 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) { if ([...this.addToSubResultsIdsToShow].length > 0) {
subResultsCreateElement.classList.remove("disabled"); subResultsCreateElement.classList.remove("disabled");
} else if ([...this.addToSubResultsIdsToShow].length === 0) { } else if ([...this.addToSubResultsIdsToShow].length === 0) {
subResultsCreateElement.classList.add("disabled"); subResultsCreateElement.classList.add("disabled");
} }
if (resultCreationRunning) {
subResultsCreateElement.classList.add("disabled");
}
// After a match as been added or removed the export button will be // 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"); subResultsExportElement.classList.add("hide");
subResultsCreateElement.classList.remove("hide"); subResultsCreateElement.classList.remove("hide");
// Also activate/deactivate buttons in the table/jsList results accordingly // 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 // ### functions to inspect imported Matches
// This function creates an object that is similar to the object that is // This function creates an object that is similar to the object that is
// being recieved as an answere to the getMatchWithContext Method, which is // being recieved as an answere to the getMatchWithContext Method, which is

181
web/app/templates/corpora/analyse_corpus.html.j2
View File

@ -87,7 +87,8 @@
<div class="col s12"> <div class="col s12">
<button class="waves-effect <button class="waves-effect
waves-light waves-light
btn-flat" btn-flat
disabled"
type="submit" type="submit"
id="results-create">Create Results id="results-create">Create Results
<i class="material-icons left">build</i> <i class="material-icons left">build</i>
@ -244,6 +245,39 @@
<!-- Modals --> <!-- 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 --> <!-- Analysis init modal -->
<div class="modal no-autoinit" id="init-display"> <div class="modal no-autoinit" id="init-display">
<div class="modal-content"> <div class="modal-content">
@ -420,7 +454,12 @@
var textLookupCountElement // Nr of texts the matches occured in will be shown in this element var textLookupCountElement // Nr of texts the matches occured in will be shown in this element
var textTitlesElement; // matched text titles var textTitlesElement; // matched text titles
var nrMarkedMatches; // count of matches marked for subresults 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 ###### // ###### Defining local scope variables ######
let contextPerItemElement; // Form Element for display option let contextPerItemElement; // Form Element for display option
@ -437,6 +476,7 @@
let paginationElements; let paginationElements;
let queryDisplayElement; // Element for initialization using queryDisplay let queryDisplayElement; // Element for initialization using queryDisplay
let xpath; // xpath to grab first resultsList page pagination element let xpath; // xpath to grab first resultsList page pagination element
let metaDataModal; // modal showing corpus meta data
// ###### Initialize variables ###### // ###### Initialize variables ######
addToSubResultsElement = document.getElementById("add-to-sub-results"); addToSubResultsElement = document.getElementById("add-to-sub-results");
@ -469,7 +509,8 @@
textLookupCountElement = document.getElementById("text-lookup-count"); textLookupCountElement = document.getElementById("text-lookup-count");
textTitlesElement = document.getElementById("text-titles"); textTitlesElement = document.getElementById("text-titles");
nrMarkedMatches = document.getElementById("nr-marked-matches"); 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 ###### // ###### js list options and intialization ######
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement); displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@ -490,12 +531,20 @@
// ###### event on DOMContentLoaded ###### // ###### event on DOMContentLoaded ######
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
//set accordion of collapsibles to false
M.Collapsible.init(collapsibleElements, {accordion: false});
// creates some modals on DOMContentLoaded // creates some modals on DOMContentLoaded
contextModal = M.Modal.init(contextModal, {"dismissible": true}); let defaultOptions = {"dismissible": true,
exportModal = M.Modal.init(exportModal, {"dismissible": true}); "preventScrolling": false};
contextModal = M.Modal.init(contextModal, defaultOptions);
exportModal = M.Modal.init(exportModal, defaultOptions);
initModal = M.Modal.init(initDisplayElement, {"dismissible": false}); 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 // Init corpus analysis components
data = new Data(); data = new Data();
resultsList = new ResultsList("result-list", resultsListOptions); resultsList = new ResultsList("result-list", resultsListOptions);
@ -572,8 +621,8 @@
// htmlID. Callbacks are set for these elements which will be triggered on // 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 // 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). // 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 = new InteractionElement("display-options-form-expert_mode");
expertModeInteraction.setCallback("on", expertModeInteraction.setCallback("on",
results.jsList.expertModeOn, results.jsList.expertModeOn,
results.jsList, results.jsList,
@ -583,7 +632,7 @@
results.jsList, results.jsList,
["query-display"]) ["query-display"])
let subResultsInteraction = new InteractionElement("add-to-sub-results"); subResultsInteraction = new InteractionElement("add-to-sub-results");
subResultsInteraction.setCallback("on", subResultsInteraction.setCallback("on",
results.jsList.activateAddToSubResults, results.jsList.activateAddToSubResults,
results.jsList); results.jsList);
@ -591,22 +640,22 @@
results.jsList.deactivateAddToSubResults, results.jsList.deactivateAddToSubResults,
results.jsList); results.jsList);
let activateInspectInteraction = new InteractionElement("inspect", activateInspectInteraction = new InteractionElement("inspect",
false); false);
activateInspectInteraction.setCallback("noCheck", activateInspectInteraction.setCallback("noCheck",
results.jsList.activateInspect, results.jsList.activateInspect,
results.jsList); results.jsList);
let changeContextInteraction = new InteractionElement("display-options-form-results_per_page", changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
false); false);
changeContextInteraction.setCallback("noCheck", changeContextInteraction.setCallback("noCheck",
results.jsList.changeContext, results.jsList.changeContext,
results.jsList) results.jsList)
interactionElements.push(expertModeInteraction, subResultsInteraction, activateInspectInteraction, changeContextInteraction); interactionElements.addInteractions([expertModeInteraction, subResultsInteraction, activateInspectInteraction, changeContextInteraction]);
// checks if a change for every interactionElement happens and executes // checks if a change for every interactionElement happens and executes
// the callbacks accordingly // the callbacks accordingly
InteractionElement.onChangeExecute(interactionElements); interactionElements.onChangeExecute();
// eventListener if pagination is used to apply new context size to new page // eventListener if pagination is used to apply new context size to new page
// and also activate inspect match if progress is 100 // 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 ### // ### Download events and sub-results creation ###
var loadingSpinnerHTML = ` var loadingSpinnerHTML = `
@ -653,9 +788,9 @@
// add onclick to download JSON button and download the file // add onclick to download JSON button and download the file
downloadResultsJSONElement = document.getElementById("download-results-json") downloadResultsJSONElement = document.getElementById("download-results-json")
downloadResultsJSONElement.onclick = () => { downloadResultsJSONElement.onclick = () => {
let filename = results.data.createDownloadFilename("matches"); let filename = results.resultsData.createDownloadFilename("matches-results");
results.data.addData(results.metaData); results.resultsData.addData(results.metaData);
results.data.downloadJSONRessource(filename, results.resultsData, results.resultsData.downloadJSONRessource(filename, results.resultsData,
downloadResultsJSONElement downloadResultsJSONElement
)}; )};
} }
@ -675,7 +810,7 @@
// add onclick to download JSON button and download the file // add onclick to download JSON button and download the file
downloadResultsJSONElement = document.getElementById("download-results-json") downloadResultsJSONElement = document.getElementById("download-results-json")
downloadResultsJSONElement.onclick = () => { downloadResultsJSONElement.onclick = () => {
let filename = results.data.createDownloadFilename("matches-sub-results"); let filename = results.subResultsData.createDownloadFilename("matches-sub-results");
results.subResultsData.downloadJSONRessource(filename, results.subResultsData.downloadJSONRessource(filename,
results.subResultsData, results.subResultsData,
downloadResultsJSONElement downloadResultsJSONElement
@ -690,6 +825,6 @@
results.data.downloadJSONRessource(filename, results.data.downloadJSONRessource(filename,
results.jsList.contextData, results.jsList.contextData,
downloadInspectContextElement); downloadInspectContextElement);
}; };
</script> </script>
{% endblock %} {% endblock %}

102
web/app/templates/macros/query_result_macro.html.j2
View File

@ -1,64 +1,53 @@
{% macro show_metadata(query_metadata) %} {% 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="col s12">
<div class="card"> <table class="responsive-table highlight">
<div class="card-content" id="results"> <thead>
<table class="responsive-table highlight"> <tr>
<thead> <th>Metadata Description</th>
<tr> <th>Value</th>
<th>Metadata Description</th> </tr>
<th>Value</th> </thead>
</tr> <tbody>
</thead> {% for pair in query_metadata|dictsort %}
<tbody> <tr>
{% for pair in query_metadata|dictsort %} <td>{{ pair[0] }}</td>
<tr> {% if pair[0] == "corpus_all_texts"
<td>{{ pair[0] }}</td> or pair[0] == "text_lookup" %}
{% if pair[0] == 'corpus_all_texts' <td>
or pair[0] == 'text_lookup' %} <table>
<td> {% for key, value in pair[1].items() %}
<table> <tr style="border-bottom: none;">
{% for key, value in pair[1].items() %} <td>
<tr style="border-bottom: none;"> <i>{{ value['title'] }}</i> written
<td> by <i>{{ value['author'] }}</i>
<i>{{ value['title'] }}</i> written in <i>{{ value['publishing_year'] }}</i>
by <i>{{ value['author'] }}</i> <a class="waves-effect
in <i>{{ value['publishing_year'] }}</i> waves-light
<a class="waves-effect btn
waves-light right
btn more-text-detials"
right data-metadata-key="{{ pair[0] }}"
more-text-detials" data-text-key="{{ key }}"
href="#modal-text-details">More
<i class="material-icons right"
data-metadata-key="{{ pair[0] }}" data-metadata-key="{{ pair[0] }}"
data-text-key="{{ key }}" data-text-key="{{ key }}">
href="#modal-text-details">More info_outline
<i class="material-icons right" </i>
data-metadata-key="{{ pair[0] }}" </a>
data-text-key="{{ key }}"> </td>
info_outline </tr>
</i>
</a>
</td>
</tr>
{% endfor %}
</table>
</td>
{% else %}
<td>{{ pair[1] }}</td>
{% endif %}
</tr>
{% endfor %} {% endfor %}
</tbody> </table>
</table> </td>
</div> {% else %}
</div> <td>{{ pair[1] }}</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div> </div>
<!-- Modal Structure --> <!-- Modal Structure -->
@ -107,3 +96,4 @@ for (var btn of moreTextDetailsButtons) {
} }
} }
</script> </script>
{% endmacro %}

170
web/app/templates/query_results/inspect.html.j2
View File

@ -5,21 +5,54 @@
{% set full_width = True %} {% set full_width = True %}
{% block page_content %} {% 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="col s12" id="query-display">
<div class="card"> <div class="card">
<div class="card-content" id="result-list" style="overflow: hidden;"> <div class="card-content" id="result-list" style="overflow: hidden;">
<div class="row" style="margin-bottom: 0px;"> <div class=" row show-on-success">
<div class="col s12 m3 l3" id="results-info"> <div class="col s12 m2 l2" id="infos">
<div class="row section"> <h6 style="margin-top: 0px;">Infos</h6>
<h6 style="margin-top: 0px;">Infos</h6> <div class="divider" style="margin-bottom: 10px;"></div>
<div class="divider" style="margin-bottom: 10px;"></div> <div class="row">
<div class="col" id="infos"> <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> <p>
Displaying
<span id="received-match-count"> <span id="received-match-count">
</span> of </span> of
<span id="match-count"></span> <span id="match-count"></span>
matches. matches loaded.
<br> <br>
Matches occured in Matches occured in
<span id="text-lookup-count"></span> <span id="text-lookup-count"></span>
@ -27,56 +60,80 @@
<br> <br>
<span id=text-titles></span> <span id=text-titles></span>
</p> </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 class="determinate" id="query-results-determinate"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col s12 m9 l9" id="actions-and-tools"> <div class="col s12 m2 l2" id="display">
<div class="row section"> <h6 style="margin-top: 0px;">Display</h6>
<div class="col s12 m3 l3" id="display"> <div class="divider" style="margin-bottom: 10px;"></div>
<h6 style="margin-top: 0px;">Display</h6> <div class="row">
<div class="divider" style="margin-bottom: 10px;"></div> <div class="col s12">
<div class="row"> <form id="display-options-form">
<div class="col s12"> {{ M.render_field(display_options_form.results_per_page,
<form id="display-options-form"> material_icon='format_list_numbered') }}
{{ M.render_field(display_options_form.results_per_page, {{ M.render_field(display_options_form.result_context,
material_icon='format_list_numbered') }} material_icon='short_text') }}
{{ M.render_field(display_options_form.result_context, {{ M.render_field(display_options_form.expert_mode) }}
material_icon='short_text') }} </form>
{{ M.render_field(display_options_form.expert_mode) }}
</form>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Table showing the query results --> <!-- Table showing the query results -->
<div class="col s12"> <div class="col s12">
<ul class="pagination paginationTop"></ul> <ul class="pagination paginationTop"></ul>
<table class="responsive-table highlight"> <table class="responsive-table highlight">
<thead> <thead>
<tr> <tr>
<th style="width: 2%">Nr.</th> <th style="width: 2%">Nr.</th>
<th style="width: 3%">Title</th> <th style="width: 3%">Title</th>
<th style="width: 25%">Left context</th> <th style="width: 25%">Left context</th>
<th style="width: 35%">Match</th> <th style="width: 35%">Match</th>
<th style="width: 10%">Actions</th> <th style="width: 10%">Actions</th>
<th style="width: 25%">Right Context</th> <th style="width: 25%">Right Context</th>
</tr> </tr>
</thead> </thead>
<tbody class="list" id="query-results"> <tbody class="list" id="query-results">
</tbody> </tbody>
</table> </table>
<ul class="pagination paginationBottom"></ul> <ul class="pagination paginationBottom"></ul>
</div>
</div> </div>
</div> </div>
</div> </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 --> <!-- Context modal used for detailed information about one match -->
<div id="context-modal" class="modal modal-fixed-footer"> <div id="context-modal" class="modal modal-fixed-footer">
<div class="modal-content"> <div class="modal-content">
@ -168,6 +225,8 @@
let hitsPerPageInputElement;let contextPerItemElement; // Form Element for display option let hitsPerPageInputElement;let contextPerItemElement; // Form Element for display option
let paginationElements; let paginationElements;
let inspectBtnElements; let inspectBtnElements;
let metaDataModal;
let showMetaDataButton
// ###### Initializing variables ###### // ###### Initializing variables ######
displayOptionsFormElement = document.getElementById("display-options-form"); displayOptionsFormElement = document.getElementById("display-options-form");
@ -183,6 +242,8 @@
contextPerItemElement = document.getElementById("display-options-form-result_context"); contextPerItemElement = document.getElementById("display-options-form-result_context");
paginationElements = document.getElementsByClassName("pagination"); paginationElements = document.getElementsByClassName("pagination");
contextModal = document.getElementById("context-modal"); contextModal = document.getElementById("context-modal");
metaDataModal = document.getElementById("metadata-modal");
showMetaDataButton = document.getElementById("show-metadata");
// js list options // js list options
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement); displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@ -220,7 +281,15 @@
resultsMetaData = new MetaData(); resultsMetaData = new MetaData();
results = new Results(data, resultsList, resultsMetaData); results = new Results(data, resultsList, resultsMetaData);
results.clearAll(); // inits some object keys and values 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 // setting some initial values for user feedback
matchCountElement.innerText = full_result_json.match_count; matchCountElement.innerText = full_result_json.match_count;
@ -230,7 +299,7 @@
// htmlID. Callbacks are set for these elements which will be triggered on // 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 // 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). // 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"); let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
expertModeInteraction.setCallback("on", expertModeInteraction.setCallback("on",
results.jsList.expertModeOn, results.jsList.expertModeOn,
@ -252,11 +321,11 @@
changeContextInteraction.setCallback("noCheck", changeContextInteraction.setCallback("noCheck",
results.jsList.changeContext, results.jsList.changeContext,
results.jsList) results.jsList)
interactionElements.push(expertModeInteraction, activateInspectInteraction, changeContextInteraction); interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
// checks if a change for every interactionElement happens and executes // checks if a change for every interactionElement happens and executes
// the callbacks accordingly // the callbacks accordingly
InteractionElement.onChangeExecute(interactionElements); interactionElements.onChangeExecute();
// eventListener if pagination is used to apply new context size to new page // eventListener if pagination is used to apply new context size to new page
// and also activate inspect match if progress is 100 // and also activate inspect match if progress is 100
@ -270,6 +339,13 @@
// render results in table imported parameter is true // render results in table imported parameter is true
queryRenderResults(result_json, 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 // live update of hits per page if hits per page value is changed
let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList); let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList);
hitsPerPageInputElement.onchange = changeHitsPerPageBind; hitsPerPageInputElement.onchange = changeHitsPerPageBind;

3
web/app/templates/query_results/query_result.html.j2
View File

@ -41,8 +41,7 @@
right right
more-text-detials" more-text-detials"
data-metadata-key="{{ pair[0] }}" data-metadata-key="{{ pair[0] }}"
data-text-key="{{ key }}" data-text-key="{{ key }}">More
href="#modal-text-details">More
<i class="material-icons right" <i class="material-icons right"
data-metadata-key="{{ pair[0] }}" data-metadata-key="{{ pair[0] }}"
data-text-key="{{ key }}"> data-text-key="{{ key }}">