mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
First setup for metadata modal view
This commit is contained in:
Stephan Porada
parent
398d5c2989
commit
3e50c2f275
@ -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,
|
||||
|
||||
@ -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}`;
|
||||
|
||||
@ -330,7 +330,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");
|
||||
@ -427,14 +427,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
|
||||
@ -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
|
||||
// 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,18 @@
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
<div class="modal no-autoinit" id="init-display">
|
||||
<div class="modal-content">
|
||||
@ -421,6 +434,11 @@
|
||||
var textTitlesElement; // matched text titles
|
||||
var nrMarkedMatches; // count of matches marked for subresults
|
||||
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
|
||||
@ -490,11 +508,11 @@
|
||||
|
||||
// ###### 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});
|
||||
// Init corpus analysis components
|
||||
data = new Data();
|
||||
@ -572,8 +590,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 +601,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 +609,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 +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 ###
|
||||
var loadingSpinnerHTML = `
|
||||
@ -653,9 +683,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 +705,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
|
||||
@ -690,6 +720,6 @@
|
||||
results.data.downloadJSONRessource(filename,
|
||||
results.jsList.contextData,
|
||||
downloadInspectContextElement);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,65 +1,56 @@
|
||||
{% 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>
|
||||
{%- macro show_metadata(query_metadata) -%}
|
||||
|
||||
</div>
|
||||
<p>{{ query_metadata }}</p>
|
||||
|
||||
<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_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"
|
||||
{# <div class="col s12">
|
||||
<table class="responsive-table highlight">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Metadata Description</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for pair in 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 }}"
|
||||
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>
|
||||
data-text-key="{{ key }}">
|
||||
info_outline
|
||||
</i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</table>
|
||||
</td>
|
||||
{% else %}
|
||||
<td>{{ pair[1] }}</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div> #}
|
||||
|
||||
<!-- Modal Structure -->
|
||||
<div id="modal-text-details" class="modal modal-fixed-footer">
|
||||
@ -107,3 +98,4 @@ for (var btn of moreTextDetailsButtons) {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endmacro %}
|
||||
@ -230,7 +230,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 +252,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
|
||||
|
||||
@ -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