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

New analysis interface

Browse Source
This commit is contained in:
Stephan Porada
2020-06-19 12:30:05 +02:00
parent be4377a231
commit ab61819005
7 changed files with 313 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,114 +1,118 @@
{% extends "nopaque.html.j2" %}
{% set headline = ' ' %}
{% set full_width = True %}
{% block page_content %}
<div class="col s12">
<ul class="collapsible expandable">
<li class="active">
<!-- <div class="collapsible-header">
<i class="material-icons">search</i>CQP Query
</div> -->
<!-- Div element above is part of valid materialize collapsible.
Commented out to prevent the user from collapsing it and also to save
space -->
<div class="collapsible-body" style="padding-top: 10px;
padding-right: 2rem;
padding-bottom: 0px;
padding-left: 2rem;">
<!-- Query form -->
<form id="query-form">
<div class="row">
<div class="col s12 m10">
<div class="input-field">
<i class="material-icons prefix">search</i>
{{ query_form.query() }}
{{ query_form.query.label }}
<span class="helper-text">
<a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
<i class="material-icons" style="font-size: inherit;">help
</i>
CQP query language tutorial
</a>
</span>
</div>
</div>
<div class="col s12 m2">
<br class="hide-on-small-only">
{{ M.render_field(query_form.submit, material_icon='send') }}
<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>
{{ query_form.query() }}
{{ query_form.query.label }}
<span class="helper-text">
<a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
<i class="material-icons" style="font-size: inherit;">help
</i>
CQP query language tutorial
</a>
</span>
</div>
</div>
</form>
</div>
</li>
<li class="hoverable">
<div class="collapsible-header">
<i class="material-icons">settings</i>Display Options
</div>
<div class="collapsible-body">
<!-- Display options form -->
<form id="display-options-form">
<div class="row">
<div class="col s12 m6">
{{ M.render_field(display_options_form.results_per_page,
material_icon='format_list_numbered') }}
</div>
<div class="col s12 m6">
{{ M.render_field(display_options_form.result_context,
material_icon='short_text') }}
</div>
<div class="col s12">
{{ M.render_field(display_options_form.expert_mode) }}
</div>
<div class="col s12 m2 right-align">
<br class="hide-on-small-only">
{{ M.render_field(query_form.submit, material_icon='send') }}
</div>
</form>
</div>
</li>
</ul>
</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;">
<span class="card-title">Query Results</span>
<div class="error-container hide show-on-error"></div>
<div class="hide show-on-success">
<div class="col s12 m6 l6">
<div class="row">
<p>
<span id="received-match-count">
</span> of
<span id="match-count"></span>
matches loaded.
<br>
Matches occured in
<span id="text-lookup-count"></span>
corpus files.
</p>
<p id="query-results-user-feedback">
<i class="material-icons">help</i>
The Server is still sending your results.
Functions like "Export Results" and "Match Inspect" will be
available after all matches have been loaded.
</p>
</div>
<div class="row">
<div class="progress" id="query-results-progress">
<div class="determinate" id="query-results-determinate"></div>
<div class="hide show-on-success" style="margin-top:-20px;">
<div class="row" style="margin-bottom: 0px;">
<div class="col s12 m3 l3" id="results-info">
<div class="row section">
<h6 style="margin-top: 0px;">Infos</h6>
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="col" id="infos">
<p>
<span id="received-match-count">
</span> of
<span id="match-count"></span>
matches loaded.
<br>
Matches occured in
<span id="text-lookup-count"></span>
corpus files:
<br>
<span id=text-titles></span>
</p>
<p id="query-results-user-feedback">
<i class="material-icons">help</i>
The Server is still sending your results.
Functions like "Export Results" and "Match Inspect" will be
available after all matches have been loaded.
</p>
<div class="progress" id="query-results-progress">
<div class="determinate" id="query-results-determinate"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div class="row">
<button id="query-results-export"
class="waves-effect
waves-light
btn-small
right disabled"
type="submit">Export Results
<i class="material-icons right">file_download</i>
</button>
<div class="col s12 m9 l9" id="actions-and-tools">
<div class="row section">
<div class="col" 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>
</div>
<div class="col" 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>
</div>
</div>
</div>
<!-- Table showing the query results -->
@ -275,11 +279,15 @@
</script>
<script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.InteractionElement.js') }}">
</script>
<script>
// ###### Defining global variables used in other functions ######
var addToSubSubcorpusElement; // Button to start adding matches to sub-subcorpus
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
var data; // full JSON object holding match results
var expertModeSwitchElement; // Expert mode switch Element
var initDisplay; // CorpusAnalysisDisplay object first undfined on DOMContentLoaded defined
var matchCountElement; // Total nr. of matches will be displayed in this element
@ -292,10 +300,11 @@
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 data; // full JSON object holding match results
var resultsList; // resultsList object
var resultsListOptions; // specifies ResultsList options
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
// ###### Defining local scope variables ######
let contextPerItemElement; // Form Element for display option
@ -315,12 +324,15 @@
// ###### Initialize variables ######
client = undefined;
addToSubSubcorpusElement = document.getElementById("add-to-sub-subcorpus");
collapsibleElements = document.querySelector('.collapsible.expandable');
contextModal = document.getElementById("context-modal");
contextPerItemElement = document.getElementById("display-options-form-result_context");
contextSentencesElement = document.getElementById("context-sentences");
displayOptionsFormElement = document.getElementById("display-options-form");
expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
exportModal = document.getElementById("query-results-download-modal");
hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
initDisplay = undefined;
initDisplayElement = document.getElementById("init-display");
matchCountElement = document.getElementById("match-count");
@ -334,8 +346,7 @@
queryResultsUserFeedbackElement = document.getElementById("query-results-user-feedback");
receivedMatchCountElement = document.getElementById("received-match-count");
textLookupCountElement = document.getElementById("text-lookup-count");
hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
contextPerItemElement = document.getElementById("display-options-form-result_context");
textTitlesElement = document.getElementById("text-titles");
// ###### js list options and intialization ######
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@ -430,25 +441,74 @@
// live update of lr context per item if context value is changed
contextPerItemElement.onchange = results.jsList.changeContext;
// stuff that happens in the list table and should also be checked and
// updated if the pagination is used
interactionElements = new Array();
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 subSubcorpusInteraction = new InteractionElement("add-to-sub-subcorpus");
subSubcorpusInteraction.setCallback("on",
results.jsList.activateAddToSubSubcorpus,
results.jsList);
subSubcorpusInteraction.setCallback("off",
results.jsList.deactivateAddToSubSubcorpus,
results.jsList);
interactionElements.push(expertModeInteraction, subSubcorpusInteraction);
// 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
for (let element of paginationElements) {
element.addEventListener("click", results.jsList.changeContext);
element.addEventListener("click", results.jsList.activateInspect);
element.addEventListener("click", results.jsList.activateAddToSubSubcorpus);
element.addEventListener("click", (event) => {
results.jsList.pageChangeEventInteractionHandler(interactionElements);
});
}
expertModeSwitchElement.addEventListener("change", (event) => {
if (event.target.checked) {
results.jsList.expertModeOn("query-display");
for (let element of paginationElements) {
element.onclick = (event) => {
results.jsList.eventHandlerCheck(event)
}
// checks if a change for every interactionElement happens and executes
// the callbacks accordingly
for (let interaction of interactionElements) {
let element = interaction.getElement()
element.addEventListener("change", (event) => {
if (event.target.checked) {
let f_on = interaction.bindThisToCallback("on");
let args_on = interaction.callbacks.on.args;
f_on(...args_on);
} else {
let f_off = interaction.bindThisToCallback("off");
let args_off = interaction.callbacks.off.args;
f_off(...args_off);
}
} else {
results.jsList.expertModeOff("query-display");
}
});
});
};
// Show add buttons for sub-subcorpus creation if this is pressed
// addToSubSubcorpusElement.addEventListener("change", (event) => {
// if (event.target.checked) {
// results.jsList.activateAddToSubSubcorpus();
// } else {
// results.jsList.deActivateAddToSubSubcorpus();
// }
// });
// expertModeSwitchElement.addEventListener("change", (event) => {
// if (event.target.checked) {
// results.jsList.expertModeOn("query-display");
// } else {
// results.jsList.expertModeOff("query-display");
// }
// });
});
// Add onclick to open download modal when Export Results button is pressed
@ -461,7 +521,7 @@
let filename = results.data.createDownloadFilename("matches");
results.data.addData(results.metaData);
results.data.downloadJSONRessource(filename, results.data,
downloadResultsJSONElement
downloadResultsJSONElement
)};
// add onclick to download JSON button and download the file

6
web/app/templates/corpora/corpus.html.j2
View File

@ -86,9 +86,9 @@
<td style="word-break: break-word;">{{ file.title }}</td>
<td>{{ file.publishing_year }}</td>
<td class="right-align">
<a class="btn-small waves-effect waves-light" href="{{ url_for('corpora.edit_corpus_file', corpus_file_id=file.id, corpus_id=corpus.id) }}"><i class="material-icons">edit</i></a>
<a class="btn-small waves-effect waves-light" href="{{ url_for('corpora.download_corpus_file', corpus_file_id=file.id, corpus_id=corpus.id) }}"><i class="material-icons">file_download</i></a>
<a data-target="delete-corpus-file-{{ file.id }}-modal" class="btn-small modal-trigger red waves-effect waves-light"><i class="material-icons">delete</i></a>
<a class="btn-floating waves-effect waves-light" href="{{ url_for('corpora.edit_corpus_file', corpus_file_id=file.id, corpus_id=corpus.id) }}"><i class="material-icons">edit</i></a>
<a class="btn-floating waves-effect waves-light" href="{{ url_for('corpora.download_corpus_file', corpus_file_id=file.id, corpus_id=corpus.id) }}"><i class="material-icons">file_download</i></a>
<a data-target="delete-corpus-file-{{ file.id }}-modal" class="btn-floating modal-trigger red waves-effect waves-light"><i class="material-icons">delete</i></a>
</td>
</tr>
{% endfor %}