mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-11-04 04:12:45 +00:00
Export sub results
This commit is contained in:
Stephan Porada
@@ -74,43 +74,109 @@
|
||||
</div>
|
||||
<div class="col s12 m9 l9" id="actions-and-tools">
|
||||
<div class="row section">
|
||||
<div class="col" id="Export">
|
||||
<div class="col s12 m3 l3" id="export">
|
||||
<h6 style="margin-top: 0px;">Export</h6>
|
||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||
<button id="query-results-export"
|
||||
class="waves-effect
|
||||
waves-light
|
||||
btn-flat
|
||||
disabled"
|
||||
type="submit">Export Results
|
||||
<i class="material-icons left">file_download</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col" id="Create">
|
||||
<h6 style="margin-top: 0px;">Create</h6>
|
||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||
<div class="switch">
|
||||
Sub-Subcorpus creation:
|
||||
<label>
|
||||
Off
|
||||
<input disabled
|
||||
type="checkbox"
|
||||
id="add-to-sub-subcorpus">
|
||||
<span class="lever"></span>
|
||||
On
|
||||
</label>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button id="query-results-export"
|
||||
class="waves-effect
|
||||
waves-light
|
||||
btn-flat
|
||||
disabled"
|
||||
type="submit">Export Results
|
||||
<i class="material-icons left">file_download</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button id="sub-results-export"
|
||||
class="waves-effect
|
||||
waves-light
|
||||
btn-flat
|
||||
disabled"
|
||||
type="submit">Export Sub-Results
|
||||
<i class="material-icons left">file_download</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" id="Display">
|
||||
<div class="col s12 m3 l3" id="create">
|
||||
<h6 style="margin-top: 0px;">Create</h6>
|
||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="switch">
|
||||
Sub-Results creation:
|
||||
<label>
|
||||
Off
|
||||
<input disabled
|
||||
type="checkbox"
|
||||
id="add-to-sub-results">
|
||||
<span class="lever"></span>
|
||||
On
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col hide" id="sub-results-match-ids-div">
|
||||
<div class="input-field">
|
||||
<p>Marked matches for Sub-Results:</p>
|
||||
<textarea id="sub-results-match-ids"
|
||||
class="materialize-textarea"
|
||||
disabled>
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col 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">
|
||||
<h6 style="margin-top: 0px;">Display</h6>
|
||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||
<form id="display-options-form">
|
||||
{{ M.render_field(display_options_form.results_per_page,
|
||||
material_icon='format_list_numbered') }}
|
||||
{{ M.render_field(display_options_form.result_context,
|
||||
material_icon='short_text') }}
|
||||
{{ M.render_field(display_options_form.expert_mode) }}
|
||||
</form>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<form id="display-options-form">
|
||||
{{ M.render_field(display_options_form.results_per_page,
|
||||
material_icon='format_list_numbered') }}
|
||||
{{ M.render_field(display_options_form.result_context,
|
||||
material_icon='short_text') }}
|
||||
{{ M.render_field(display_options_form.expert_mode) }}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m3 l3" id="anlysis">
|
||||
<h6 style="margin-top: 0px;">Analysis</h6>
|
||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button id="placeholder1"
|
||||
class="waves-effect
|
||||
waves-light
|
||||
btn-flat
|
||||
disabled"
|
||||
type="submit">Action One
|
||||
<i class="material-icons left">cloud</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button id="placeholder2"
|
||||
class="waves-effect
|
||||
waves-light
|
||||
btn-flat
|
||||
disabled"
|
||||
type="submit">Action Two
|
||||
<i class="material-icons left">add</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -254,6 +320,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="collection-item">
|
||||
Add to Sub Results
|
||||
<div class="secondary-content" id="add-to-sub-results-from-inspect">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
@@ -265,7 +336,7 @@
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="inspect-download-context" class="left waves-effect waves-light btn">
|
||||
Export Context
|
||||
Export Single Context
|
||||
<i class="material-icons right">file_download</i>
|
||||
</a>
|
||||
<a href="#!" class="modal-close waves-effect waves-light red btn">Close</a>
|
||||
@@ -283,7 +354,7 @@
|
||||
</script>
|
||||
<script>
|
||||
// ###### Defining global variables used in other functions ######
|
||||
var addToSubSubcorpusElement; // Button to start adding matches to sub-subcorpus
|
||||
var addToSubResultsElement; // Button to start adding matches to sub-results
|
||||
var client; // CorpusAnalysisClient first undefined on DOMContentLoaded defined
|
||||
var collapsibleElements; // All collapsibleElements on this page
|
||||
var contextModal; // Modal to open on inspect for further match context
|
||||
@@ -305,6 +376,10 @@
|
||||
var textLookupCountElement // Nr of texts the matches occured in will be shown in this element
|
||||
var interactionElements; // Interaction elements and their parameters
|
||||
var textTitlesElement; // matched text titles
|
||||
var subResultsIdListElement; // list showing marked matches for sub corpus creation
|
||||
var subResultsExportElement; // button to download sub results
|
||||
var subResultsCreateElement; // if presses sub results will be created from ids
|
||||
var addToSubResultsFromInspectElement; // button in inspect mdoal to add this match to the sub results
|
||||
|
||||
// ###### Defining local scope variables ######
|
||||
let contextPerItemElement; // Form Element for display option
|
||||
@@ -324,7 +399,7 @@
|
||||
|
||||
// ###### Initialize variables ######
|
||||
client = undefined;
|
||||
addToSubSubcorpusElement = document.getElementById("add-to-sub-subcorpus");
|
||||
addToSubResultsElement = document.getElementById("add-to-sub-results");
|
||||
collapsibleElements = document.querySelector('.collapsible.expandable');
|
||||
contextModal = document.getElementById("context-modal");
|
||||
contextPerItemElement = document.getElementById("display-options-form-result_context");
|
||||
@@ -347,6 +422,10 @@
|
||||
receivedMatchCountElement = document.getElementById("received-match-count");
|
||||
textLookupCountElement = document.getElementById("text-lookup-count");
|
||||
textTitlesElement = document.getElementById("text-titles");
|
||||
subResultsIdListElement = document.getElementById("sub-results-match-ids-div");
|
||||
subResultsExportElement = document.getElementById("sub-results-export");
|
||||
subResultsCreateElement = document.getElementById("sub-results-create-div");
|
||||
addToSubResultsFromInspectElement = document.getElementById("add-to-sub-results-from-inspect");
|
||||
|
||||
// ###### js list options and intialization ######
|
||||
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
|
||||
@@ -405,11 +484,8 @@
|
||||
client.setCallback("query_match_context", (payload) => {
|
||||
results.jsList.showMatchContext(payload);
|
||||
});
|
||||
client.setCallback("show_sub_subcorpus_choices", (payload) => {
|
||||
results.jsList.showSubSubcorpusChoices(payload);
|
||||
});
|
||||
client.setCallback("save_sub_subcorpus_choices", (payload) => {
|
||||
saveSubSubcorpusChoices(payload);
|
||||
client.setCallback("save_sub_results_choices", (payload) => {
|
||||
saveSubResultsChoices(payload);
|
||||
});
|
||||
|
||||
// Trigger corpus analysis initialization on server side
|
||||
@@ -460,12 +536,12 @@
|
||||
results.jsList,
|
||||
["query-display"])
|
||||
|
||||
let subSubcorpusInteraction = new InteractionElement("add-to-sub-subcorpus");
|
||||
subSubcorpusInteraction.setCallback("on",
|
||||
results.jsList.activateAddToSubSubcorpus,
|
||||
let subResultsInteraction = new InteractionElement("add-to-sub-results");
|
||||
subResultsInteraction.setCallback("on",
|
||||
results.jsList.activateAddToSubResults,
|
||||
results.jsList);
|
||||
subSubcorpusInteraction.setCallback("off",
|
||||
results.jsList.deactivateAddToSubSubcorpus,
|
||||
subResultsInteraction.setCallback("off",
|
||||
results.jsList.deactivateAddToSubResults,
|
||||
results.jsList);
|
||||
|
||||
let activateInspectInteraction = new InteractionElement("inspect",
|
||||
@@ -479,12 +555,12 @@
|
||||
changeContextInteraction.setCallback("noCheck",
|
||||
results.jsList.changeContext,
|
||||
results.jsList)
|
||||
interactionElements.push(expertModeInteraction, subSubcorpusInteraction, activateInspectInteraction, changeContextInteraction);
|
||||
interactionElements.push(expertModeInteraction, subResultsInteraction, activateInspectInteraction, changeContextInteraction);
|
||||
|
||||
|
||||
// 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 subcorpus
|
||||
// also adds more interaction buttons like add to sub results
|
||||
for (let element of paginationElements) {
|
||||
element.addEventListener("click", (event) => {
|
||||
results.jsList.pageChangeEventInteractionHandler(interactionElements);
|
||||
@@ -516,15 +592,49 @@
|
||||
// Add onclick to open download modal when Export Results button is pressed
|
||||
queryResultsExportElement.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,
|
||||
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();
|
||||
}
|
||||
|
||||
// Add onclick to open download modal when sub results button is pressed
|
||||
subResultsExportElement.onclick = () => {
|
||||
exportModal.open();
|
||||
console.log(results.subResultsData);
|
||||
// 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");
|
||||
results.subResultsData.downloadJSONRessource(filename,
|
||||
results.subResultsData,
|
||||
downloadResultsJSONElement
|
||||
)};
|
||||
}
|
||||
// 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,
|
||||
downloadResultsJSONElement
|
||||
)};
|
||||
|
||||
// add onclick to download JSON button and download the file
|
||||
downloadInspectContextElement = document.getElementById("inspect-download-context")
|
||||
|
||||
Reference in New Issue
Block a user