sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-27 08:20:34 +00:00
Code Issues Projects Releases Wiki Activity

Further rework

Browse Source
This commit is contained in:
Stephan Porada
2020-08-17 16:15:34 +02:00
parent f94d21fa96
commit b3e8976c1c
13 changed files with 755 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,180 +54,150 @@
{% include 'modals/context_modal.html.j2' %}
<script src="{{ url_for('static', filename='js/nopaque.Results.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.InteractionElement.js') }}">
</script>
<script>
// ###### global variables ######
var full_result_json;
var result_json;
var receivedMatchCountElement; // Nr. of loaded matches will be displayed in this element
var textLookupCountElement // Nr of texts the matches occured in will be shown in this element
var textTitlesElement; // matched text titles
var progress; // global progress value
var queryResultsProgressElement; // Div element holding the progress bar
var expertModeSwitchElement; // Expert mode switch Element
var matchCountElement; // Total nr. of matches will be displayed in this element
var interactionElements; // Interaction elements and their parameters
var contextModal; // Modal to open on inspect for further match context
<script type="module">
/**
* First Phase:
* document content is loaded and scripts are being imported and executed
*/
import { CorpusAnalysisClient,
CorpusAnalysisDisplay,
SocketEventListener } from '../../static/js/modules/nopaque.CorpusAnalysisClient.js';
import { recieveSession, recieveQueryStatus,
recieveQueryData } from '../../static/js/modules/nopaque.listenerFunctions.js';
import { Results, Data, MetaData } from '../../static/js/nopaque.Results.js';
import { ResultsList } from '../../static/js/nopaque.lists.js';
import { queryRenderResults, querySetup } from '../../static/js/modules/nopaque.listenerCallbacks.js'
// ###### Defining local scope variables
let displayOptionsFormElement; // Form holding the display informations
let resultItems; // array of built html result items row element. This is called when results are transmitted and being recieved
let hitsPerPageInputElement;let contextPerItemElement; // Form Element for display option
let paginationElements;
let inspectBtnElements;
let metaDataModal;
let showMetaDataButton
/**
* Second Phase:
* Asynchronus and event driven code
*/
document.addEventListener("DOMContentLoaded", () => {
// Initialize the CorpusAnalysisClient
const client = new CorpusAnalysisClient({'logging': true,
'dynamicMode': false});
console.info("CorpusAnalysisClient created as client:", client);
// Set up display elements which hare show depending on the client status
client.getHTMLElements(['#query-display']);
const queryDisplay = new CorpusAnalysisDisplay(client.queryDisplay);
// Register those display elements to client
client.setDisplay("query", queryDisplay);
/**
* Initializing the results object holding all the data of a query.
* Also holds the metadata of one query.
* resultsListOptions is set to determine how many results per page are
* shown etc.
* Lastly it contains the object ResultsList which is a list.js
* subclass which handles the visual representation of the query data.
*/
let displayOptionsData = ResultsList.getDisplayOptions('display-options-form');
ResultsList.options.page = displayOptionsData["resultsPerPage"];
let data = new Data();
let resultsList = new ResultsList("result-list", ResultsList.options);
let resultsMetaData = new MetaData();
let results = new Results(data, resultsList, resultsMetaData);
// make results part of the client
client.results = results;
// inits some object keys and values
client.results.clearAll();
console.info('Initialized the Results object.')
// init some modals
let deleteOverlay = () => {
let overlay = document.getElementsByClassName("modal-overlay")[0];
overlay.remove();
};
client.getHTMLElements(['#meta-data-modal'])
client.metaDataModal = M.Modal.init(client.metaDataModal,
{'preventScrolling': false,
'opacity': 0.0,
'dismissible': false,
'onOpenEnd': deleteOverlay});
// saving imported data into client object
const payload = {{ query_result_file_content|tojson|safe }};
// ###### Initializing variables ######
displayOptionsFormElement = document.getElementById("display-options-form");
resultItems = [];
receivedMatchCountElement = document.getElementById("received-match-count");
textLookupCountElement = document.getElementById("text-lookup-count");
textTitlesElement = document.getElementById("text-titles");
queryResultsProgressElement = document.getElementById("query-results-progress");
expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
matchCountElement = document.getElementById("match-count");
hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
contextPerItemElement = document.getElementById("display-options-form-result_context");
paginationElements = document.getElementsByClassName("pagination");
contextModal = document.getElementById("context-modal");
metaDataModal = document.getElementById("meta-data-modal");
showMetaDataButton = document.getElementById("show-metadata");
// js list options
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
resultsListOptions = {page: displayOptionsData["resultsPerPage"],
pagination: [{
name: "paginationTop",
paginationClass: "paginationTop",
innerWindow: 8,
outerWindow: 1
}, {
paginationClass: "paginationBottom",
innerWindow: 8,
outerWindow: 1
}],
valueNames: ["titles", "lc", "c", "rc", {data: ["index"]}],
item: `<span></span>`
};
//
// // Initialization of interactionElemnts
// // An interactionElement is an object identifing a switch or button via
// // htmlID. Callbacks are set for these elements which will be triggered on
// // a pagination interaction by the user or if the status of the element has
// // been altered. (Like the switche has ben turned on or off).
// interactionElements = new InteractionElements();
// let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
// expertModeInteraction.setCallback("on",
// results.jsList.expertModeOn,
// results.jsList,
// ["query-display"])
// expertModeInteraction.setCallback("off",
// results.jsList.expertModeOff,
// results.jsList,
// ["query-display"])
//
// let activateInspectInteraction = new InteractionElement("inspect",
// false);
// activateInspectInteraction.setCallback("noCheck",
// results.jsList.activateInspect,
// results.jsList);
//
// let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
// false);
// changeContextInteraction.setCallback("noCheck",
// results.jsList.changeContext,
// results.jsList)
// interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
//
// // checks if a change for every interactionElement happens and executes
// // the callbacks accordingly
// interactionElements.onChangeExecute();
//
// // eventListener if pagination is used to apply new context size to new page
// // and also activate inspect match if progress is 100
// // also adds more interaction buttons like add to sub results
// for (let element of paginationElements) {
// element.addEventListener("click", (event) => {
// results.jsList.pageChangeEventInteractionHandler(interactionElements);
// });
// }
//
// render results directly with callbacks because we are not in dynamic mode
querySetup(payload, client);
queryRenderResults(payload, client);
document.addEventListener("DOMContentLoaded", () => {
// Initialize some Modals
contextModal = M.Modal.init(contextModal, {"dismissible": true});
// ###### recreating chunk structure to reuse callback queryRenderResults()
full_result_json = {{ query_result_file_content|tojson|safe }};
result_json = {};
result_json["chunk"] = {};
result_json.chunk["cpos_lookup"] = full_result_json.cpos_lookup;
result_json.chunk["cpos_ranges"] = full_result_json.cpos_ranges;
result_json.chunk["matches"] = full_result_json.matches;
result_json.chunk["text_lookup"] = full_result_json.text_lookup;
// Init corpus analysis components
data = new Data();
resultsList = new ResultsList("result-list", resultsListOptions);
resultsMetaData = new MetaData();
results = new Results(data, resultsList, resultsMetaData);
results.clearAll(); // inits some object keys and values
// 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;
// Initialization of interactionElemnts
// An interactionElement is an object identifing a switch or button via
// htmlID. Callbacks are set for these elements which will be triggered on
// a pagination interaction by the user or if the status of the element has
// been altered. (Like the switche has ben turned on or off).
interactionElements = new InteractionElements();
let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
expertModeInteraction.setCallback("on",
results.jsList.expertModeOn,
results.jsList,
["query-display"])
expertModeInteraction.setCallback("off",
results.jsList.expertModeOff,
results.jsList,
["query-display"])
let activateInspectInteraction = new InteractionElement("inspect",
false);
activateInspectInteraction.setCallback("noCheck",
results.jsList.activateInspect,
results.jsList);
let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
false);
changeContextInteraction.setCallback("noCheck",
results.jsList.changeContext,
results.jsList)
interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
// checks if a change for every interactionElement happens and executes
// the callbacks accordingly
interactionElements.onChangeExecute();
// eventListener if pagination is used to apply new context size to new page
// and also activate inspect match if progress is 100
// also adds more interaction buttons like add to sub results
for (let element of paginationElements) {
element.addEventListener("click", (event) => {
results.jsList.pageChangeEventInteractionHandler(interactionElements);
});
}
// render results in table imported parameter is true
queryRenderResults(result_json, true);
// ### Show corpus Metadata
showMetaDataButton.onclick = () => {
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;
// live update of lr context per item if context value is changed
contextPerItemElement.onchange = results.jsList.changeContext;
// new insepct event listener makeing use of javascript bubbleing
let resultsTable = document.getElementById("query-results");
resultsTable.addEventListener("click", (event) => {
if (event.target.classList.contains("inspect-btn")) {
const dataIndex = event.target.closest("tr").dataset.index;
const fakeResponse = results.jsList.createFakeResponse();
results.jsList.showMatchContext(fakeResponse);
}
});
// scroll to top button if user scrolled down the list
let headline = document.querySelector(".headline");
let scrollToTop = document.querySelector("#menu-scroll-to-top-div");
window.addEventListener("scroll", (event) => {
if (pageYOffset > 250) {
scrollToTop.classList.toggle("hide", false);
} else {
scrollToTop.classList.toggle("hide", true);
}
});
scrollToTop.onclick = () => {
headline.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
};
});
// // ### Show corpus Metadata
// showMetaDataButton.onclick = () => {
// 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;
//
// // live update of lr context per item if context value is changed
// contextPerItemElement.onchange = results.jsList.changeContext;
//
// // new insepct event listener makeing use of javascript bubbleing
// let resultsTable = document.getElementById("query-results");
// resultsTable.addEventListener("click", (event) => {
// if (event.target.classList.contains("inspect-btn")) {
// const dataIndex = event.target.closest("tr").dataset.index;
// const fakeResponse = results.jsList.createFakeResponse();
// results.jsList.showMatchContext(fakeResponse);
// }
// });
//
// // scroll to top button if user scrolled down the list
// let headline = document.querySelector(".headline");
// let scrollToTop = document.querySelector("#menu-scroll-to-top-div");
// window.addEventListener("scroll", (event) => {
// if (pageYOffset > 250) {
// scrollToTop.classList.toggle("hide", false);
// } else {
// scrollToTop.classList.toggle("hide", true);
// }
// });
// scrollToTop.onclick = () => {
// headline.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
// };
});
</script>
{% endblock %}

233
web/app/templates/query_results/inspect.html.j2.bak Normal file
View File

@ -0,0 +1,233 @@
{% extends "nopaque.html.j2" %}
{% set headline = ' ' %}
{% set full_width = True %}
{% set imported = 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 show-on-success">
{% include 'interactions/infos.html.j2' %}
{% include 'interactions/display.html.j2' %}
{% include 'interactions/analysis.html.j2' %}
{% include 'interactions/cite.html.j2' %}
</div>
{% include 'tables/query_results.html.j2' %}
</div>
</div>
</div>
<!-- Scroll to top element -->
{% include 'interactions/scroll_to_top.html.j2' %}
<!-- Modals -->
{% include 'modals/show_metadata.html.j2' %}
{% include 'modals/show_text_details.html.j2' %}
{% include 'modals/context_modal.html.j2' %}
<script src="{{ url_for('static', filename='js/nopaque.Results.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.InteractionElement.js') }}">
</script>
<script>
// ###### global variables ######
var full_result_json;
var result_json;
var receivedMatchCountElement; // Nr. of loaded matches will be displayed in this element
var textLookupCountElement // Nr of texts the matches occured in will be shown in this element
var textTitlesElement; // matched text titles
var progress; // global progress value
var queryResultsProgressElement; // Div element holding the progress bar
var expertModeSwitchElement; // Expert mode switch Element
var matchCountElement; // Total nr. of matches will be displayed in this element
var interactionElements; // Interaction elements and their parameters
var contextModal; // Modal to open on inspect for further match context
// ###### Defining local scope variables
let displayOptionsFormElement; // Form holding the display informations
let resultItems; // array of built html result items row element. This is called when results are transmitted and being recieved
let hitsPerPageInputElement;let contextPerItemElement; // Form Element for display option
let paginationElements;
let inspectBtnElements;
let metaDataModal;
let showMetaDataButton
// ###### Initializing variables ######
displayOptionsFormElement = document.getElementById("display-options-form");
resultItems = [];
receivedMatchCountElement = document.getElementById("received-match-count");
textLookupCountElement = document.getElementById("text-lookup-count");
textTitlesElement = document.getElementById("text-titles");
queryResultsProgressElement = document.getElementById("query-results-progress");
expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
matchCountElement = document.getElementById("match-count");
hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
contextPerItemElement = document.getElementById("display-options-form-result_context");
paginationElements = document.getElementsByClassName("pagination");
contextModal = document.getElementById("context-modal");
metaDataModal = document.getElementById("meta-data-modal");
showMetaDataButton = document.getElementById("show-metadata");
// js list options
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
resultsListOptions = {page: displayOptionsData["resultsPerPage"],
pagination: [{
name: "paginationTop",
paginationClass: "paginationTop",
innerWindow: 8,
outerWindow: 1
}, {
paginationClass: "paginationBottom",
innerWindow: 8,
outerWindow: 1
}],
valueNames: ["titles", "lc", "c", "rc", {data: ["index"]}],
item: `<span></span>`
};
document.addEventListener("DOMContentLoaded", () => {
// Initialize some Modals
contextModal = M.Modal.init(contextModal, {"dismissible": true});
// ###### recreating chunk structure to reuse callback queryRenderResults()
full_result_json = {{ query_result_file_content|tojson|safe }};
result_json = {};
result_json["chunk"] = {};
result_json.chunk["cpos_lookup"] = full_result_json.cpos_lookup;
result_json.chunk["cpos_ranges"] = full_result_json.cpos_ranges;
result_json.chunk["matches"] = full_result_json.matches;
result_json.chunk["text_lookup"] = full_result_json.text_lookup;
// Init corpus analysis components
data = new Data();
resultsList = new ResultsList("result-list", resultsListOptions);
resultsMetaData = new MetaData();
results = new Results(data, resultsList, resultsMetaData);
results.clearAll(); // inits some object keys and values
// 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;
// Initialization of interactionElemnts
// An interactionElement is an object identifing a switch or button via
// htmlID. Callbacks are set for these elements which will be triggered on
// a pagination interaction by the user or if the status of the element has
// been altered. (Like the switche has ben turned on or off).
interactionElements = new InteractionElements();
let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
expertModeInteraction.setCallback("on",
results.jsList.expertModeOn,
results.jsList,
["query-display"])
expertModeInteraction.setCallback("off",
results.jsList.expertModeOff,
results.jsList,
["query-display"])
let activateInspectInteraction = new InteractionElement("inspect",
false);
activateInspectInteraction.setCallback("noCheck",
results.jsList.activateInspect,
results.jsList);
let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
false);
changeContextInteraction.setCallback("noCheck",
results.jsList.changeContext,
results.jsList)
interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
// checks if a change for every interactionElement happens and executes
// the callbacks accordingly
interactionElements.onChangeExecute();
// eventListener if pagination is used to apply new context size to new page
// and also activate inspect match if progress is 100
// also adds more interaction buttons like add to sub results
for (let element of paginationElements) {
element.addEventListener("click", (event) => {
results.jsList.pageChangeEventInteractionHandler(interactionElements);
});
}
// render results in table imported parameter is true
queryRenderResults(result_json, true);
// ### Show corpus Metadata
showMetaDataButton.onclick = () => {
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;
// live update of lr context per item if context value is changed
contextPerItemElement.onchange = results.jsList.changeContext;
// new insepct event listener makeing use of javascript bubbleing
let resultsTable = document.getElementById("query-results");
resultsTable.addEventListener("click", (event) => {
if (event.target.classList.contains("inspect-btn")) {
const dataIndex = event.target.closest("tr").dataset.index;
const fakeResponse = results.jsList.createFakeResponse();
results.jsList.showMatchContext(fakeResponse);
}
});
// scroll to top button if user scrolled down the list
let headline = document.querySelector(".headline");
let scrollToTop = document.querySelector("#menu-scroll-to-top-div");
window.addEventListener("scroll", (event) => {
if (pageYOffset > 250) {
scrollToTop.classList.toggle("hide", false);
} else {
scrollToTop.classList.toggle("hide", true);
}
});
scrollToTop.onclick = () => {
headline.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
};
});
</script>
{% endblock %}