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

First setup for metadata modal view

Browse Source
This commit is contained in:
Stephan Porada 2020-07-20 09:31:27 +02:00
parent 398d5c2989
commit 3e50c2f275
9 changed files with 160 additions and 101 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,

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

@ -330,7 +330,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");
@ -427,14 +427,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
@ -483,6 +487,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

72
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,18 @@
<!-- Modals --> <!-- Modals -->
<!-- Metadata modal -->
{% import "macros/query_result_macro.html.j2" as metadata %}
<div id="metadata-modal" class="modal bottom-sheet">
<div class="modal-content">
{{ metadata.show_metadata("testasdasgs") }}
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn red">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">
@ -421,6 +434,11 @@
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
@ -490,11 +508,11 @@
// ###### 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});
// Init corpus analysis components // Init corpus analysis components
data = new Data(); data = new Data();
@ -572,8 +590,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 +601,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 +609,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 +635,24 @@
}); });
} }
// ### Show corpus Metadata
showMetadataButton.onclick = () => {
let deleteOverlay = () => {
let overlay = document.getElementsByClassName("modal-overlay")[0];
overlay.remove();
}
let modal = document.getElementById("metadata-modal");
console.log(modal);
modal = M.Modal.init(modal, {"preventScrolling": false,
"opacity": 0.0,
"dismissible": false,
"onOpenEnd": deleteOverlay});
console.log(modal);
modal.open();
};
}); });
// ### 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 +683,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 +705,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 +720,6 @@
results.data.downloadJSONRessource(filename, results.data.downloadJSONRessource(filename,
results.jsList.contextData, results.jsList.contextData,
downloadInspectContextElement); downloadInspectContextElement);
}; };
</script> </script>
{% endblock %} {% endblock %}

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

@ -1,65 +1,56 @@
{% 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> <p>{{ query_metadata }}</p>
<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>
</div> {% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div> #}
<!-- Modal Structure --> <!-- Modal Structure -->
<div id="modal-text-details" class="modal modal-fixed-footer"> <div id="modal-text-details" class="modal modal-fixed-footer">
@ -107,3 +98,4 @@ for (var btn of moreTextDetailsButtons) {
} }
} }
</script> </script>
{% endmacro %}

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

@ -230,7 +230,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 +252,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

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 }}">