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

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

Browse Source
This commit is contained in:
Patrick Jentsch 2020-07-16 14:41:05 +02:00
commit d4c6b72761
6 changed files with 130 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/static/css/nopaque.css
View File

@ -21,8 +21,8 @@ main {
/* preloader circle in the size of a button icon */
.button-icon-spinner {
bottom: -8px !important;
right: -16px !important;
bottom: -5px !important;
right: 0px !important;
margin-right: 12px !important;
width: 19.5px !important;
height: 19.5px !important;

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

@ -93,7 +93,8 @@ class CorpusAnalysisClient {
if (this.callbacks.query_match_context != undefined) {
this.callbacks.query_match_context(response);
}
} else if (response.type === "sub-results"){
} else if (response.type === "sub-results"
|| response.type ==="results"){
if (this.callbacks.save_sub_results_choices != undefined) {
this.callbacks.save_sub_results_choices(response);
}

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

@ -3,6 +3,7 @@ class Results {
this.data = data;
this.jsList = jsList;
this.metaData = metaData
this.resultsData = new Data();
this.subResultsData = new Data();
}
@ -89,15 +90,20 @@ class Data {
this.download(downloadElement, dataStr, resultFilename, "text/json", ".json")
}
// createSubResultsData from subResultsTmpData
createSubResultsData() {
// create results data either from all results or from al lmarked sub results
createResultsData(type) {
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});
let dataIndexes = [];
tmp.forEach((index) => dataIndexes.push(index - 1));
console.log(dataIndexes);
results.jsList.getMatchWithContext(dataIndexes, "sub-results");
} else if (type === "results") {
subResultsCreateElement.classList.add("disabled"); // cqp server cannot handle more than one request at a time. Thus we deactivate the subResultsCreateElement
let dataIndexes = [...Array(results.data.match_count).keys()];
results.jsList.getMatchWithContext(dataIndexes, "results");
}
}
}
class MetaData {

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

@ -2,34 +2,65 @@
// Handels incoming corpus metadata
function recvMetaData(payload) {
results.metaData.init(payload)
console.log(results.metaData);
console.log("Metada recieved:", results.metaData);
}
// This callback is called in socket.on "corpus_analysis_inspect_match" but
// only if the response.type is "sub-results".
// Saves the incoming inspect match results into results.subResultsData.
function saveSubResultsChoices(response) {
console.log("Recieve match with context");
results.subResultsData.init();
results.subResultsData.matches.push(...response.payload.matches);
results.subResultsData.addData(response.payload.cpos_lookup, "cpos_lookup");
results.subResultsData.addData(response.payload.text_lookup, "text_lookup");
results.subResultsData.addData(results.metaData);
results.subResultsData.query = results.data.query;
results.subResultsData.corpus_type = "sub-results";
results.subResultsData.match_count = [...response.payload.matches].length;
results.subResultsData.cpos_ranges = response.payload.cpos_ranges;
console.log(results.subResultsData);
subResultsCreateElement.getElementsByClassName("button-icon-spinner")[0].remove();
subResultsCreateElement.getElementsByTagName("i")[0].classList.remove("hide");
subResultsCreateElement.firstElementChild.classList.add("disabled");
subResultsExportElement.classList.remove("disabled", "btn-flat");
subResultsExportElement.classList.add("pulse", "btn-small");
setTimeout(() => {
subResultsExportElement.classList.remove("pulse", "btn-small");
subResultsExportElement.classList.add("btn-flat");
clearTimeout();
}, 3000)
console.log("Recieving results for export.");
if (response.type === "sub-results") {
results.subResultsData.init();
results.subResultsData.matches.push(...response.payload.matches);
results.subResultsData.addData(response.payload.cpos_lookup, "cpos_lookup");
results.subResultsData.addData(response.payload.text_lookup, "text_lookup");
results.subResultsData.addData(results.metaData);
results.subResultsData.query = results.data.query;
results.subResultsData.corpus_type = response.type;
results.subResultsData.match_count = [...response.payload.matches].length;
results.subResultsData.cpos_ranges = response.payload.cpos_ranges;
// hides create element after all results are revieved
subResultsCreateElement.classList.add("hide");
// shows export element after create element hs been hidden
subResultsExportElement.classList.remove("hide", "btn-flat");
subResultsExportElement.classList.add("pulse", "btn-small");
setTimeout(() => {
subResultsExportElement.classList.remove("pulse", "btn-small");
subResultsExportElement.classList.add("btn-flat");
clearTimeout();
}, 3000)
// Resets the subResultsCreateElement (removing spinner with setting innerText)
subResultsCreateElement.innerText = "Create Sub-Results";
subResultsCreateElement.insertAdjacentHTML("beforeend", `<i class="material-icons left">build</i>`);
// reactivate resultsCreateElement
resultsCreateElement.classList.remove("disabled");
} else if (response.type === "results") {
results.resultsData.init();
results.resultsData.matches.push(...response.payload.matches);
results.resultsData.addData(response.payload.cpos_lookup, "cpos_lookup");
results.resultsData.addData(response.payload.text_lookup, "text_lookup");
results.resultsData.addData(results.metaData);
results.resultsData.query = results.data.query;
results.resultsData.corpus_type = response.type;
results.resultsData.match_count = [...response.payload.matches].length;
results.resultsData.cpos_ranges = response.payload.cpos_ranges;
// hides create element after all results are revieved
resultsCreateElement.classList.add("hide");
// shows export element after create element hs been hidden
resultsExportElement.classList.remove("hide", "btn-flat");
resultsExportElement.classList.add("pulse", "btn-small");
setTimeout(() => {
resultsExportElement.classList.remove("pulse", "btn-small");
resultsExportElement.classList.add("btn-flat");
clearTimeout();
}, 3000)
// Resets the resultsCreateElement (removing spinner with setting innerText)
resultsCreateElement.innerText = "Create Sub-Results";
resultsCreateElement.insertAdjacentHTML("beforeend", `<i class="material-icons left">build</i>`);
// reactivate subResultsCreateElement
subResultsCreateElement.classList.remove("disabled");
}
}
@ -43,7 +74,7 @@ function querySetup(payload) {
nrMarkedMatches.innerText = 0;
results.jsList.addToSubResultsStatus = {};
results.jsList.addToSubResultsIdsToShow = new Set();
queryResultsExportElement.classList.add("disabled");
resultsExportElement.classList.add("disabled");
addToSubResultsElement.setAttribute("disabled", "");
queryResultsDeterminateElement.style.width = "0%";
queryResultsProgressElement.classList.remove("hide");
@ -89,7 +120,7 @@ function queryRenderResults(payload, imported=false) {
if (progress === 100) {
queryResultsProgressElement.classList.add("hide");
queryResultsUserFeedbackElement.classList.add("hide");
queryResultsExportElement.classList.remove("disabled");
resultsExportElement.classList.remove("disabled");
addToSubResultsElement.removeAttribute("disabled");
// inital expert mode check and sub results activation
results.jsList.activateInspect();
@ -109,7 +140,6 @@ function queryRenderResults(payload, imported=false) {
}
helperQueryRenderResults(payload);
progress = 100;
console.log(progress);
results.jsList.activateInspect();
if (expertModeSwitchElement.checked) {
results.jsList.expertModeOn("query-display");

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

@ -368,7 +368,9 @@ class ResultsList extends List {
// activate the add buttons
activateAddToSubResults() {
subResultsIdListElement.classList.remove("hide");
subResultsCreateElement.classList.remove("hide");
if (subResultsExportElement.classList.contains("hide")) {
subResultsCreateElement.classList.remove("hide");
}
let addToSubResultsBtnElements = document.getElementsByClassName("add");
for (let addToSubResultsBtn of addToSubResultsBtnElements) {
addToSubResultsBtn.classList.remove("hide");
@ -427,13 +429,14 @@ class ResultsList extends List {
}
// Toggles the create button accoring to the number of ids in addToSubResultsIdsToShow
if ([...this.addToSubResultsIdsToShow].length > 0) {
subResultsCreateElement.firstElementChild.classList.remove("disabled");
subResultsCreateElement.classList.remove("disabled");
} else if ([...this.addToSubResultsIdsToShow].length === 0) {
subResultsCreateElement.firstElementChild.classList.add("disabled");
subResultsCreateElement.classList.add("disabled");
}
// After a match as been added or removed the export button will be
// disabled because the sub-results have been alterd and have to be built //// again.
subResultsExportElement.classList.add("disabled");
// hidden because the sub-results have been alterd 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
//if button in inspect was activated/deactivated.
// This part only runs if tableCall is false.

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

@ -79,21 +79,37 @@
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
<div class="col s12">
<button class="waves-effect
waves-light
btn-flat"
type="submit"
id="results-create">Create Results
<i class="material-icons left">build</i>
</button>
<button id="query-results-export"
class="waves-effect
waves-light
btn-flat
disabled"
hide"
type="submit">Results
<i class="material-icons left">file_download</i>
</button>
</div>
<div class="col s12">
<button class="waves-effect
waves-light
btn-flat
hide
disabled"
type="submit"
id="sub-results-create">Create Sub-Results
<i class="material-icons left">build</i>
</button>
<button id="sub-results-export"
class="waves-effect
waves-light
btn-flat
disabled"
hide"
type="submit">Sub-Results
<i class="material-icons left">file_download</i>
</button>
@ -127,15 +143,6 @@
</textarea>
</div>
</div>
<div class="col s12 hide" id="sub-results-create-div">
<button class="waves-effect
waves-light
btn-flat
disabled"
type="submit">Create
<i class="material-icons left">build</i>
</button>
</div>
</div>
</div>
<div class="col s12 m3 l3" id="display">
@ -370,14 +377,15 @@
var queryDisplay; // CorpusAnalysisDisplay object first undfined on DOMContentLoaded defined
var queryFormElement; // the query form
var queryResultsDeterminateElement; // The progress bar for recieved results
var queryResultsExportElement; // Download button opens download modal
var resultsExportElement; // Download button opens download modal
var queryResultsProgressElement; // Div element holding the progress bar
var queryResultsUserFeedbackElement; // Element showing match count|total etc
var receivedMatchCountElement; // Nr. of loaded matches will be displayed in this element
var results; // results object
var resultsList; // resultsList object
var resultsListOptions; // specifies ResultsList options
var subResultsCreateElement; // if presses sub results will be created from ids
var subResultsCreateElement; // if pressed sub results will be created from ids
var resultsCreateElement; // if pressed results will pe created for all matches
var subResultsExportElement; // button to download sub results
var subResultsIdListElement; // list showing marked matches for sub corpus creation
var textLookupCountElement // Nr of texts the matches occured in will be shown in this element
@ -420,11 +428,12 @@
queryDisplayElement = document.getElementById("query-display");
queryFormElement = document.getElementById("query-form");
queryResultsDeterminateElement = document.getElementById("query-results-determinate");
queryResultsExportElement = document.getElementById("query-results-export");
resultsExportElement = document.getElementById("query-results-export");
queryResultsProgressElement = document.getElementById("query-results-progress");
queryResultsUserFeedbackElement = document.getElementById("query-results-user-feedback");
receivedMatchCountElement = document.getElementById("received-match-count");
subResultsCreateElement = document.getElementById("sub-results-create-div");
subResultsCreateElement = document.getElementById("sub-results-create");
resultsCreateElement = document.getElementById("results-create");
subResultsExportElement = document.getElementById("sub-results-export");
subResultsIdListElement = document.getElementById("sub-results-match-ids-div");
textLookupCountElement = document.getElementById("text-lookup-count");
@ -580,37 +589,48 @@
});
// ### Download events and sub-results creation ###
var loadingSpinnerHTML = `
<div class="preloader-wrapper button-icon-spinner small active">
<div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
`
// create results on click from all match ids
resultsCreateElement.onclick = () => {
resultsCreateElement.getElementsByTagName("i")[0].classList.add("hide");
resultsCreateElement.innerText = "Creating...";
resultsCreateElement.insertAdjacentHTML("afterbegin", loadingSpinnerHTML);
results.data.createResultsData("results");
}
// Add onclick to open download modal when Export Results button is pressed
queryResultsExportElement.onclick = () => {
resultsExportElement.onclick = () => {
exportModal.open();
// 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.data,
results.data.downloadJSONRessource(filename, results.resultsData,
downloadResultsJSONElement
)};
}
// create sub results on click from shown marked match ids
subResultsCreateElement.onclick = () => {
subResultsCreateElement.getElementsByTagName("i")[0].classList.add("hide");
let html = `
<div class="preloader-wrapper button-icon-spinner small active">
<div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
`
subResultsCreateElement.insertAdjacentHTML("afterbegin", html);
results.data.createSubResultsData();
subResultsCreateElement.getElementsByTagName("i")[0].remove();
subResultsCreateElement.innerText = "Creating...";
subResultsCreateElement.insertAdjacentHTML("afterbegin", loadingSpinnerHTML);
results.data.createResultsData("sub-results");
}
// Add onclick to open download modal when sub-results button is pressed