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 'query-builder' of gitlab.ub.uni-bielefeld.de:sfb1288inf/nopaque into query-builder

Browse Source
This commit is contained in:
Inga Kirschnick 2023-08-08 14:15:44 +02:00
commit dd04623278
7 changed files with 231 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js
View File

@ -1,31 +1,30 @@
class CorpusAnalysisConcordance { class CorpusAnalysisConcordance {
name = 'Concordance'; name = 'Concordance';
constructor(app) { constructor(app, idPrefix) {
this.app = app; this.app = app;
this.data = {}; this.data = {};
this.elements = { this.elements = {
// TODO: Prefix elements with "corpus-analysis-app-" container: document.querySelector(`#${idPrefix}-container`),
container: document.querySelector('#concordance-extension-container'), error: document.querySelector(`#${idPrefix}-error`),
error: document.querySelector('#concordance-extension-error'), userInterfaceForm: document.querySelector(`#${idPrefix}-user-interface-form`),
UIForm: document.querySelector('#concordance-extension-ui-form'), form: document.querySelector(`#${idPrefix}-form`),
form: document.querySelector('#concordance-extension-form'), progress: document.querySelector(`#${idPrefix}-progress`),
progress: document.querySelector('#concordance-extension-progress'), subcorpusInfo: document.querySelector(`#${idPrefix}-subcorpus-info`),
subcorpusInfo: document.querySelector('#concordance-extension-subcorpus-info'), subcorpusActions: document.querySelector(`#${idPrefix}-subcorpus-actions`),
subcorpusActions: document.querySelector('#concordance-extension-subcorpus-actions'), subcorpusItems: document.querySelector(`#${idPrefix}-subcorpus-items`),
subcorpusItems: document.querySelector('#concordance-extension-subcorpus-items'), subcorpusList: document.querySelector(`#${idPrefix}-subcorpus-list`),
subcorpusList: document.querySelector('#concordance-extension-subcorpus-list'), subcorpusPagination: document.querySelector(`#${idPrefix}-subcorpus-pagination`)
subcorpusPagination: document.querySelector('#concordance-extension-subcorpus-pagination')
}; };
this.settings = { this.settings = {
context: parseInt(this.elements.UIForm['context'].value), context: parseInt(this.elements.userInterfaceForm['context'].value),
perPage: parseInt(this.elements.UIForm['per-page'].value), perPage: parseInt(this.elements.userInterfaceForm['per-page'].value),
selectedSubcorpus: undefined, selectedSubcorpus: undefined,
textStyle: parseInt(this.elements.UIForm['text-style'].value), textStyle: parseInt(this.elements.userInterfaceForm['text-style'].value),
tokenRepresentation: this.elements.UIForm['token-representation'].value tokenRepresentation: this.elements.userInterfaceForm['token-representation'].value
}; };
this.app.registerExtension(this); this.app.registerExtension(this);
@ -77,21 +76,24 @@ class CorpusAnalysisConcordance {
event.preventDefault(); event.preventDefault();
this.submitForm(); this.submitForm();
}); });
this.elements.UIForm.addEventListener('change', (event) => { this.elements.userInterfaceForm.addEventListener('change', (event) => {
if (event.target === this.elements.UIForm['context']) { if (event.target === this.elements.userInterfaceForm['context']) {
this.settings.context = parseInt(this.elements.UIForm['context'].value); console.log(this.settings.context);
console.log(parseInt(this.elements.userInterfaceForm['context'].value));
this.settings.context = parseInt(this.elements.userInterfaceForm['context'].value);
console.log(this.settings.context);
this.submitForm(); this.submitForm();
} }
if (event.target === this.elements.UIForm['per-page']) { if (event.target === this.elements.userInterfaceForm['per-page']) {
this.settings.perPage = parseInt(this.elements.UIForm['per-page'].value); this.settings.perPage = parseInt(this.elements.userInterfaceForm['per-page'].value);
this.submitForm(); this.submitForm();
} }
if (event.target === this.elements.UIForm['text-style']) { if (event.target === this.elements.userInterfaceForm['text-style']) {
this.settings.textStyle = parseInt(this.elements.UIForm['text-style'].value); this.settings.textStyle = parseInt(this.elements.userInterfaceForm['text-style'].value);
this.setTextStyle(); this.setTextStyle();
} }
if (event.target === this.elements.UIForm['token-representation']) { if (event.target === this.elements.userInterfaceForm['token-representation']) {
this.settings.tokenRepresentation = this.elements.UIForm['token-representation'].value; this.settings.tokenRepresentation = this.elements.userInterfaceForm['token-representation'].value;
this.setTokenRepresentation(); this.setTokenRepresentation();
} }
}); });
@ -379,7 +381,9 @@ class CorpusAnalysisConcordance {
document.getSelection().removeAllRanges(); document.getSelection().removeAllRanges();
document.getSelection().addRange(range); document.getSelection().addRange(range);
}); });
this.app.elements.m.extensionTabs.select('reader-extension-container'); this.app.elements.m.extensionTabs.select(
this.app.extensions.Reader.elements.container.id
);
}); });
} }
for (let selectTriggerElement of this.elements.subcorpusItems.querySelectorAll('.select-trigger')) { for (let selectTriggerElement of this.elements.subcorpusItems.querySelectorAll('.select-trigger')) {

37
app/static/js/CorpusAnalysis/CorpusAnalysisReader.js
View File

@ -1,25 +1,24 @@
class CorpusAnalysisReader { class CorpusAnalysisReader {
name = 'Reader'; name = 'Reader';
constructor(app) { constructor(app, idPrefix) {
this.app = app; this.app = app;
this.data = {}; this.data = {};
this.elements = { this.elements = {
// TODO: Prefix elements with "corpus-analysis-app-" container: document.querySelector(`#${idPrefix}-container`),
container: document.querySelector('#reader-extension-container'), corpus: document.querySelector(`#${idPrefix}-corpus`),
error: document.querySelector('#reader-extension-error'), corpusPagination: document.querySelector(`#${idPrefix}-corpus-pagination`),
form: document.querySelector('#reader-extension-form'), error: document.querySelector(`#${idPrefix}-error`),
progress: document.querySelector('#reader-extension-progress'), progress: document.querySelector(`#${idPrefix}-progress`),
corpus: document.querySelector('#reader-extension-corpus'), userInterfaceForm: document.querySelector(`#${idPrefix}-user-interface-form`)
corpusPagination: document.querySelector('#reader-extension-corpus-pagination')
}; };
this.settings = { this.settings = {
perPage: parseInt(this.elements.form['per-page'].value), perPage: parseInt(this.elements.userInterfaceForm['per-page'].value),
textStyle: parseInt(this.elements.form['text-style'].value), textStyle: parseInt(this.elements.userInterfaceForm['text-style'].value),
tokenRepresentation: this.elements.form['token-representation'].value, tokenRepresentation: this.elements.userInterfaceForm['token-representation'].value,
pagination: { pagination: {
innerWindow: 5, innerWindow: 5,
outerWindow: 1 outerWindow: 1
@ -57,21 +56,21 @@ class CorpusAnalysisReader {
// Init data // Init data
this.data.corpus = this.app.data.corpus; this.data.corpus = this.app.data.corpus;
// Add event listeners // Add event listeners
this.elements.form.addEventListener('submit', (event) => { this.elements.userInterfaceForm.addEventListener('submit', (event) => {
event.preventDefault(); event.preventDefault();
this.submitForm(); this.submitForm();
}); });
this.elements.form.addEventListener('change', (event) => { this.elements.userInterfaceForm.addEventListener('change', (event) => {
if (event.target === this.elements.form['per-page']) { if (event.target === this.elements.userInterfaceForm['per-page']) {
this.settings.perPage = parseInt(this.elements.form['per-page'].value); this.settings.perPage = parseInt(this.elements.userInterfaceForm['per-page'].value);
this.submitForm(); this.submitForm();
} }
if (event.target === this.elements.form['text-style']) { if (event.target === this.elements.userInterfaceForm['text-style']) {
this.settings.textStyle = parseInt(this.elements.form['text-style'].value); this.settings.textStyle = parseInt(this.elements.userInterfaceForm['text-style'].value);
this.setTextStyle(); this.setTextStyle();
} }
if (event.target === this.elements.form['token-representation']) { if (event.target === this.elements.userInterfaceForm['token-representation']) {
this.settings.tokenRepresentation = this.elements.form['token-representation'].value; this.settings.tokenRepresentation = this.elements.userInterfaceForm['token-representation'].value;
this.setTokenRepresentation(); this.setTokenRepresentation();
} }
}); });

15
app/templates/corpora/_analysis/concordance.html.j2
View File

@ -2,11 +2,10 @@
{% import 'corpora/_analysis/query_builder/_query_builder.html.j2' as query_builder with context %} {% import 'corpora/_analysis/query_builder/_query_builder.html.j2' as query_builder with context %}
{% set icon = 'list_alt' %}
{% set name = 'Concordance' %} {% set name = 'Concordance' %}
{% set description = 'Query your corpus with the CQP query language utilizing a KWIC view.' %}
{% set description %}
Query your corpus with the CQP query language utilizing a KWIC view.
{% endset %}
{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %} {% set id_prefix = name.lower().replace(' ', '-') + '-extension' %}
@ -43,7 +42,6 @@ Query your corpus with the CQP query language utilizing a KWIC view.
</div> </div>
</div> </div>
<div class="col s12">
<div id="{{ id_prefix }}-subcorpus-list"></div> <div id="{{ id_prefix }}-subcorpus-list"></div>
<div class="card"> <div class="card">
@ -54,7 +52,7 @@ Query your corpus with the CQP query language utilizing a KWIC view.
<div class="progress hide" id="{{ id_prefix }}-progress"> <div class="progress hide" id="{{ id_prefix }}-progress">
<div class="indeterminate"></div> <div class="indeterminate"></div>
</div> </div>
<form id="{{ id_prefix }}-ui-form"> <form id="{{ id_prefix }}-user-interface-form">
<div class="row"> <div class="row">
<div class="col s12 m9 l9"> <div class="col s12 m9 l9">
<div class="row"> <div class="row">
@ -122,16 +120,15 @@ Query your corpus with the CQP query language utilizing a KWIC view.
<ul class="pagination hide" id="{{ id_prefix }}-subcorpus-pagination"></ul> <ul class="pagination hide" id="{{ id_prefix }}-subcorpus-pagination"></ul>
</div> </div>
</div> </div>
</div> {% endmacro %}
</div>
{% endset %}
{% set modals %} {% set modals %}
{{ query_builder.structural_attribute_modal() }} {{ query_builder.structural_attribute_modal() }}
{{ query_builder.positional_attribute_modal() }} {{ query_builder.positional_attribute_modal() }}
{% endset %} {% endset %}
{% set scripts %} {# The extension scripts #}
{% macro scripts(id_prefix) %}
<script> <script>
const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp); const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);

47
app/templates/corpora/_analysis/reader.html.j2
View File

@ -1,21 +1,18 @@
{# The extension icon #}
{% set icon = 'chrome_reader_mode' %}
{# The extension name #}
{% set name = 'Reader' %} {% set name = 'Reader' %}
{% set description %} {# The extension description #}
Inspect your corpus in detail with a full text view, including annotations. {% set description = 'Inspect your corpus in detail with a full text view, including annotations.' %}
{% endset %}
{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %}
{% set tab_content %} {# The extension container content #}
<i class="material-icons left">chrome_reader_mode</i>{{ name }}</a> {% macro container_content(id_prefix) %}
{% endset %}
{% set container_content %}
<div class="row">
<div class="col s12">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<form id="reader-extension-form"> <form id="{{ id_prefix }}-user-interface-form">
<div class="row"> <div class="row">
<div class="col s12 m9 l10"> <div class="col s12 m9 l10">
<div class="row"> <div class="row">
@ -48,42 +45,40 @@ Inspect your corpus in detail with a full text view, including annotations.
<label>Token representation</label> <label>Token representation</label>
</div> </div>
<div class="col s12"> <div class="col s12">
<span class="error-color-text helper-text hide" id="reader-extension-error"></span> <span class="error-color-text helper-text hide" id="{{ id_prefix }}-error"></span>
</div> </div>
</div> </div>
</div> </div>
<div class="col s12 m3 l2 right-align"> <div class="col s12 m3 l2 right-align">
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<button class="btn hide waves-effect waves-light corpus-analysis-action" id="reader-extension-form-submit" type="submit" name="submit">Send <i class="material-icons right">send</i></button> <button class="btn hide waves-effect waves-light corpus-analysis-action" id="{{ id_prefix }}-form-submit" type="submit" name="submit">Send <i class="material-icons right">send</i></button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div>
<div class="col s12">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<div class="progress hide" id="reader-extension-progress"> <div class="progress hide" id="{{ id_prefix }}-progress">
<div class="indeterminate"></div> <div class="indeterminate"></div>
</div> </div>
<table> <table>
<tbody> <tbody>
<tr><td id="reader-extension-corpus"></td></tr> <tr><td id="{{ id_prefix }}-corpus"></td></tr>
</tbody> </tbody>
</table> </table>
<ul class="pagination hide" id="reader-extension-corpus-pagination"></ul> <ul class="pagination hide" id="{{ id_prefix }}-corpus-pagination"></ul>
</div> </div>
</div> </div>
</div> {% endmacro %}
</div>
{% endset %}
{% set modals = '' %} {# The extension modals #}
{% macro modals(id_prefix) %}{% endmacro %}
{% set scripts %} {# The extension scripts #}
{% macro scripts(id_prefix) %}
<script> <script>
const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp); const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp, "{{ id_prefix }}");
</script> </script>
{% endset %} {% endmacro %}

23
app/templates/corpora/_analysis/static_visualization.html.j2
View File

@ -1,12 +1,15 @@
{# The extension icon #}
{% set icon = '' %}
{# The extension name #}
{% set name = 'Static Visualization (beta)' %} {% set name = 'Static Visualization (beta)' %}
{# The extension description #}
{% set description = '' %} {% set description = '' %}
{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %}
{% set tab_content = '' %} {# The extension container content #}
{% macro container_content(id_prefix) %}
{% set container_content %}
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<h4><i class="material-icons left">query_stats</i>{{ name }}</h4> <h4><i class="material-icons left">query_stats</i>{{ name }}</h4>
@ -119,9 +122,9 @@
<div class="row"> <div class="row">
</div> </div>
{% endset %} {% endmacro %}
{% set modals %} {% macro modals(id_prefix) %}
<div class="modal modal-fixed-footer" id="frequencies-stopwords-setting-modal"> <div class="modal modal-fixed-footer" id="frequencies-stopwords-setting-modal">
<div class="modal-content"> <div class="modal-content">
<h4>Settings</h4> <h4>Settings</h4>
@ -151,11 +154,11 @@
<a class="modal-close waves-effect waves-green btn frequencies-stopword-setting-modal-action-buttons" data-action="cancel">Cancel</a> <a class="modal-close waves-effect waves-green btn frequencies-stopword-setting-modal-action-buttons" data-action="cancel">Cancel</a>
<a class="modal-close waves-effect waves-green btn frequencies-stopword-setting-modal-action-buttons" data-action="submit">Submit</a> <a class="modal-close waves-effect waves-green btn frequencies-stopword-setting-modal-action-buttons" data-action="submit">Submit</a>
</div> </div>
{% endset %} {% endmacro %}
{% set scripts %} {% macro scripts(id_prefix) %}
<script> <script>
const corpusAnalysisStaticVisualization = new CorpusAnalysisStaticVisualization(corpusAnalysisApp); const corpusAnalysisStaticVisualization = new CorpusAnalysisStaticVisualization(corpusAnalysisApp, "{{ id_prefix }}");
</script> </script>
{% endset %} {% endmacro %}

18
app/templates/corpora/_analysis/template.html.j2
View File

@ -1,3 +1,5 @@
{# The extension icon #}
{% set icon = '' %}
{# The extension name #} {# The extension name #}
{% set name = '' %} {% set name = '' %}
@ -5,22 +7,12 @@
{# The extension description #} {# The extension description #}
{% set description = '' %} {% set description = '' %}
{#
The extension id prefix, used for related HTML elements with an id.
The prefix is used to avoid id conflicts with other extensions.
Reserved ids (do not use):
- <id_prefix>-extension-container
#}
{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %}
{# The extension tab content #}
{% set tab_content = name %}
{# The extension container content #} {# The extension container content #}
{% set container_content = '' %} {% macro container_content(id_prefix) %}{% endmacro %}
{# The extension modals #} {# The extension modals #}
{% set modals = '' %} {% macro modals(id_prefix) %}{% endmacro %}
{# The extension scripts #} {# The extension scripts #}
{% set scripts = '' %} {% macro scripts(id_prefix) %}{% endmacro %}

38
app/templates/corpora/analysis.html.j2
View File

@ -4,16 +4,25 @@
{% import 'corpora/_analysis/reader.html.j2' as reader_extension %} {% import 'corpora/_analysis/reader.html.j2' as reader_extension %}
{% import 'corpora/_analysis/static_visualization.html.j2' as static_visualization_extension %} {% import 'corpora/_analysis/static_visualization.html.j2' as static_visualization_extension %}
{% set extensions = [concordance_extension, reader_extension, static_visualization_extension] %} {% set extensions =
{% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-app-container"{% endblock main_attribs %} {
'corpus-analysis-app-concordance-extension': concordance_extension,
'corpus-analysis-app-reader-extension': reader_extension,
'corpus-analysis-app-static-visualizations-extension': static_visualization_extension
}
%}
{% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-app-container"{% endblock main_attribs %}
{% block page_content %} {% block page_content %}
<ul class="row tabs no-autoinit" id="corpus-analysis-app-extension-tabs"> <ul class="row tabs no-autoinit" id="corpus-analysis-app-extension-tabs">
<li class="tab col s3"><a class="active" href="#corpus-analysis-app-home-container"><i class="nopaque-icons service-icons left" data-service="corpus-analysis"></i>Corpus analysis</a></li> <li class="tab col s3"><a class="active" href="#corpus-analysis-app-home-container"><i class="nopaque-icons service-icons left" data-service="corpus-analysis"></i>Corpus analysis</a></li>
{% for extension in extensions if extension.name != 'Static Visualization (beta)' %} {% for id, extension in extensions.items() if extension.name != 'Static Visualization (beta)' %}
<li class="tab col s3"><a href="#{{ extension.id_prefix }}-container">{{ extension.tab_content }}</a></li> <li class="tab col s3">
<a href="#{{ id }}-container"><i class="material-icons left">{{ extension.icon }}</i>{{ extension.name }}</a>
</li>
{% endfor %} {% endfor %}
</ul> </ul>
@ -21,9 +30,9 @@
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<div class="row" id="corpus-analysis-app-extension-cards"> <div class="row" id="corpus-analysis-app-extension-cards">
{% for extension in extensions if extension.name != 'Static Visualization (beta)' %} {% for id, extension in extensions.items() if extension.name != 'Static Visualization (beta)' %}
<div class="col s3"> <div class="col s3">
<div class="card extension-selector hoverable" data-target="{{ extension.id_prefix }}-container"> <div class="card extension-selector hoverable" data-target="{{ id }}-container">
<div class="card-content"> <div class="card-content">
<span class="card-title">{{ extension.name }}</span> <span class="card-title">{{ extension.name }}</span>
<p>{{ extension.description }}</p> <p>{{ extension.description }}</p>
@ -33,13 +42,13 @@
{% endfor %} {% endfor %}
</div> </div>
{{ static_visualization_extension.container_content }} {{ static_visualization_extension.container_content('corpus-analysis-app-static-visualizations-extension') }}
</div> </div>
{% for extension in extensions if extension.name != 'Static Visualization (beta)' %} {% for id, extension in extensions.items() if extension.name != 'Static Visualization (beta)' %}
<div id="{{ extension.id_prefix }}-container"> <div id="{{ id }}-container">
{{ extension.container_content }} {{ extension.container_content(id) }}
</div> </div>
{% endfor %} {% endfor %}
{% endblock page_content %} {% endblock page_content %}
@ -61,10 +70,9 @@
</div> </div>
</div> </div>
{% for extension in extensions %} {% for id, extension in extensions.items() %}
{{ extension.modals }} {{ extension.modals(id) }}
{% endfor %} {% endfor %}
{% endblock modals %} {% endblock modals %}
{% block scripts %} {% block scripts %}
@ -73,8 +81,8 @@
const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }}); const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
</script> </script>
{% for extension in extensions %} {% for id, extension in extensions.items() %}
{{ extension.scripts }} {{ extension.scripts(id) }}
{% endfor %} {% endfor %}
<script> <script>