sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-14 16:55: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 16:00:34 +02:00
commit bf0213edbc
6 changed files with 86 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/static/js/CorpusAnalysis/CorpusAnalysisApp.js
View File

@ -6,10 +6,10 @@ class CorpusAnalysisApp {
// HTML elements // HTML elements
this.elements = { this.elements = {
container: document.querySelector('#corpus-analysis-app-container'), container: document.querySelector('#corpus-analysis-container'),
extensionCards: document.querySelector('#corpus-analysis-app-extension-cards'), extensionCards: document.querySelector('#corpus-analysis-extension-cards'),
extensionTabs: document.querySelector('#corpus-analysis-app-extension-tabs'), extensionTabs: document.querySelector('#corpus-analysis-extension-tabs'),
initModal: document.querySelector('#corpus-analysis-app-init-modal') initModal: document.querySelector('#corpus-analysis-init-modal')
}; };
// Materialize elements // Materialize elements
this.elements.m = { this.elements.m = {

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

@ -1,22 +1,22 @@
class CorpusAnalysisConcordance { class CorpusAnalysisConcordance {
name = 'Concordance'; name = 'Concordance';
constructor(app, idPrefix) { constructor(app) {
this.app = app; this.app = app;
this.data = {}; this.data = {};
this.elements = { this.elements = {
container: document.querySelector(`#${idPrefix}-container`), container: document.querySelector(`#corpus-analysis-concordance-container`),
error: document.querySelector(`#${idPrefix}-error`), error: document.querySelector(`#corpus-analysis-concordance-error`),
userInterfaceForm: document.querySelector(`#${idPrefix}-user-interface-form`), userInterfaceForm: document.querySelector(`#corpus-analysis-concordance-user-interface-form`),
form: document.querySelector(`#${idPrefix}-form`), form: document.querySelector(`#corpus-analysis-concordance-form`),
progress: document.querySelector(`#${idPrefix}-progress`), progress: document.querySelector(`#corpus-analysis-concordance-progress`),
subcorpusInfo: document.querySelector(`#${idPrefix}-subcorpus-info`), subcorpusInfo: document.querySelector(`#corpus-analysis-concordance-subcorpus-info`),
subcorpusActions: document.querySelector(`#${idPrefix}-subcorpus-actions`), subcorpusActions: document.querySelector(`#corpus-analysis-concordance-subcorpus-actions`),
subcorpusItems: document.querySelector(`#${idPrefix}-subcorpus-items`), subcorpusItems: document.querySelector(`#corpus-analysis-concordance-subcorpus-items`),
subcorpusList: document.querySelector(`#${idPrefix}-subcorpus-list`), subcorpusList: document.querySelector(`#corpus-analysis-concordance-subcorpus-list`),
subcorpusPagination: document.querySelector(`#${idPrefix}-subcorpus-pagination`) subcorpusPagination: document.querySelector(`#corpus-analysis-concordance-subcorpus-pagination`)
}; };
this.settings = { this.settings = {

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

@ -1,18 +1,18 @@
class CorpusAnalysisReader { class CorpusAnalysisReader {
name = 'Reader'; name = 'Reader';
constructor(app, idPrefix) { constructor(app) {
this.app = app; this.app = app;
this.data = {}; this.data = {};
this.elements = { this.elements = {
container: document.querySelector(`#${idPrefix}-container`), container: document.querySelector(`#corpus-analysis-reader-container`),
corpus: document.querySelector(`#${idPrefix}-corpus`), corpus: document.querySelector(`#corpus-analysis-reader-corpus`),
corpusPagination: document.querySelector(`#${idPrefix}-corpus-pagination`), corpusPagination: document.querySelector(`#corpus-analysis-reader-corpus-pagination`),
error: document.querySelector(`#${idPrefix}-error`), error: document.querySelector(`#corpus-analysis-reader-error`),
progress: document.querySelector(`#${idPrefix}-progress`), progress: document.querySelector(`#corpus-analysis-reader-progress`),
userInterfaceForm: document.querySelector(`#${idPrefix}-user-interface-form`) userInterfaceForm: document.querySelector(`#corpus-analysis-reader-user-interface-form`)
}; };
this.settings = { this.settings = {

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

@ -13,7 +13,7 @@
{# The extension container content #} {# The extension container content #}
{% macro container_content(id_prefix) %} {% macro container_content() %}
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<div class="row"> <div class="row">
@ -23,33 +23,33 @@
<div class="col s2"> <div class="col s2">
<div class="switch" style="margin-top:8px; margin-left:0px;"> <div class="switch" style="margin-top:8px; margin-left:0px;">
<label> <label>
<input type="checkbox" id="{{ id_prefix }}-expert-mode-switch"> <input type="checkbox" id="corpus-analysis-concordance-expert-mode-switch">
<span class="lever"></span> <span class="lever"></span>
expert mode expert mode
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div id="{{ id_prefix }}-expert-mode-display" class="hide"> <div id="corpus-analysis-concordance-expert-mode-display" class="hide">
{{ expert_mode.card_content(id_prefix) }} {{ expert_mode.card_content() }}
</div> </div>
<div id="{{ id_prefix }}-query-builder-display"> <div id="corpus-analysis-concordance-query-builder-display">
{{ query_builder.card_content(id_prefix) }} {{ query_builder.card_content() }}
</div> </div>
</div> </div>
</div> </div>
<div id="{{ id_prefix }}-subcorpus-list"></div> <div id="corpus-analysis-concordance-subcorpus-list"></div>
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<span class="card-title">Results</span> <span class="card-title">Results</span>
<p></p> <p></p>
<br> <br>
<div class="progress hide" id="{{ id_prefix }}-progress"> <div class="progress hide" id="corpus-analysis-concordance-progress">
<div class="indeterminate"></div> <div class="indeterminate"></div>
</div> </div>
<form id="{{ id_prefix }}-user-interface-form"> <form id="corpus-analysis-concordance-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">
@ -98,8 +98,8 @@
</div> </div>
</form> </form>
<div class="row"> <div class="row">
<div class="col s9"><p class="hide" id="{{ id_prefix }}-subcorpus-info"></p></div> <div class="col s9"><p class="hide" id="corpus-analysis-concordance-subcorpus-info"></p></div>
<div class="col s3 right-align" id="{{ id_prefix }}-subcorpus-actions"></div> <div class="col s3 right-align" id="corpus-analysis-concordance-subcorpus-actions"></div>
</div> </div>
<table class="highlight"> <table class="highlight">
<thead> <thead>
@ -112,27 +112,27 @@
<th class="left-align" style="width: 5%;"></th> <th class="left-align" style="width: 5%;"></th>
</tr> </tr>
</thead> </thead>
<tbody id="{{ id_prefix }}-subcorpus-items"></tbody> <tbody id="corpus-analysis-concordance-subcorpus-items"></tbody>
</table> </table>
<ul class="pagination hide" id="{{ id_prefix }}-subcorpus-pagination"></ul> <ul class="pagination hide" id="corpus-analysis-concordance-subcorpus-pagination"></ul>
</div> </div>
</div> </div>
{% endmacro %} {% endmacro %}
{# The extension modals #} {# The extension modals #}
{% macro modals(id_prefix) %} {% macro modals() %}
{{ query_builder.structural_attribute_modal(id_prefix) }} {{ query_builder.structural_attribute_modal() }}
{{ query_builder.positional_attribute_modal(id_prefix) }} {{ query_builder.positional_attribute_modal() }}
{% endmacro %} {% endmacro %}
{# The extension scripts #} {# The extension scripts #}
{% macro scripts(id_prefix) %} {% macro scripts() %}
<script> <script>
const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp, "{{ id_prefix }}"); const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
let queryBuilderDisplay = document.getElementById("{{ id_prefix }}-query-builder-display"); let queryBuilderDisplay = document.getElementById("corpus-analysis-concordance-query-builder-display");
let expertModeDisplay = document.getElementById("{{ id_prefix }}-expert-mode-display"); let expertModeDisplay = document.getElementById("corpus-analysis-concordance-expert-mode-display");
let expertModeSwitch = document.getElementById("{{ id_prefix }}-expert-mode-switch"); let expertModeSwitch = document.getElementById("corpus-analysis-concordance-expert-mode-switch");
expertModeSwitch.addEventListener("change", function() { expertModeSwitch.addEventListener("change", function() {
if (this.checked) { if (this.checked) {

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

@ -9,10 +9,10 @@
{# The extension container content #} {# The extension container content #}
{% macro container_content(id_prefix) %} {% macro container_content() %}
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<form id="{{ id_prefix }}-user-interface-form"> <form id="corpus-analysis-reader-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">
@ -45,13 +45,13 @@
<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="{{ id_prefix }}-error"></span> <span class="error-color-text helper-text hide" id="corpus-analysis-reader-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="{{ id_prefix }}-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="corpus-analysis-reader-form-submit" type="submit" name="submit">Send <i class="material-icons right">send</i></button>
</div> </div>
</div> </div>
</form> </form>
@ -60,25 +60,25 @@
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<div class="progress hide" id="{{ id_prefix }}-progress"> <div class="progress hide" id="corpus-analysis-reader-progress">
<div class="indeterminate"></div> <div class="indeterminate"></div>
</div> </div>
<table> <table>
<tbody> <tbody>
<tr><td id="{{ id_prefix }}-corpus"></td></tr> <tr><td id="corpus-analysis-reader-corpus"></td></tr>
</tbody> </tbody>
</table> </table>
<ul class="pagination hide" id="{{ id_prefix }}-corpus-pagination"></ul> <ul class="pagination hide" id="corpus-analysis-reader-corpus-pagination"></ul>
</div> </div>
</div> </div>
{% endmacro %} {% endmacro %}
{# The extension modals #} {# The extension modals #}
{% macro modals(id_prefix) %}{% endmacro %} {% macro modals() %}{% endmacro %}
{# The extension scripts #} {# The extension scripts #}
{% macro scripts(id_prefix) %} {% macro scripts() %}
<script> <script>
const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp, "{{ id_prefix }}"); const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
</script> </script>
{% endmacro %} {% endmacro %}

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

@ -4,58 +4,59 @@
{% 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 =
{
'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-container"{% endblock main_attribs %}
{% 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-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>
{% for id, extension in extensions.items() if extension.name != 'Static Visualization (beta)' %}
<li class="tab col s3"> <li class="tab col s3">
<a href="#{{ id }}-container"><i class="material-icons left">{{ extension.icon }}</i>{{ extension.name }}</a> <a class="active" href="#corpus-analysis-home-container"><i class="nopaque-icons service-icons left" data-service="corpus-analysis"></i>Corpus analysis</a>
</li>
<li class="tab col s3">
<a href="#corpus-analysis-concordance-container"><i class="material-icons left">{{ concordance_extension.icon }}</i>{{ concordance_extension.name }}</a>
</li>
<li class="tab col s3">
<a href="#corpus-analysis-reader-container"><i class="material-icons left">{{ reader_extension.icon }}</i>{{ reader_extension.name }}</a>
</li> </li>
{% endfor %}
</ul> </ul>
<div id="corpus-analysis-app-home-container"> <div id="corpus-analysis-home-container">
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<div class="row" id="corpus-analysis-app-extension-cards"> <div class="row" id="corpus-analysis-extension-cards">
{% 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="{{ id }}-container"> <div class="card extension-selector hoverable" data-target="corpus-analysis-concordance-container">
<div class="card-content"> <div class="card-content">
<span class="card-title">{{ extension.name }}</span> <span class="card-title">{{ concordance_extension.name }}</span>
<p>{{ extension.description }}</p> <p>{{ concordance_extension.description }}</p>
</div>
</div>
</div>
<div class="col s3">
<div class="card extension-selector hoverable" data-target="corpus-analysis-reader-container">
<div class="card-content">
<span class="card-title">{{ reader_extension.name }}</span>
<p>{{ reader_extension.description }}</p>
</div> </div>
</div> </div>
</div> </div>
{% endfor %}
</div> </div>
{{ static_visualization_extension.container_content('corpus-analysis-app-static-visualizations-extension') }} {{ static_visualization_extension.container_content() }}
</div> </div>
{% for id, extension in extensions.items() if extension.name != 'Static Visualization (beta)' %} {% for extension in extensions if extension.name != 'Static Visualization (beta)' %}
<div id="{{ id }}-container"> <div id="corpus-analysis-concordance-container">
{{ extension.container_content(id) }} {{ extension.container_content() }}
</div> </div>
{% endfor %} {% endfor %}
{% endblock page_content %} {% endblock page_content %}
{% block modals %} {% block modals %}
{{ super() }} {{ super() }}
<div class="modal no-autoinit" id="corpus-analysis-app-init-modal"> <div class="modal no-autoinit" id="corpus-analysis-init-modal">
<div class="modal-content"> <div class="modal-content">
<h4>We are preparing your analysis session</h4> <h4>We are preparing your analysis session</h4>
<p> <p>
@ -70,9 +71,9 @@
</div> </div>
</div> </div>
{% for id, extension in extensions.items() %} {{ concordance_extension.modals() }}
{{ extension.modals(id) }} {{ reader_extension.modals() }}
{% endfor %} {{ static_visualization_extension.modals() }}
{% endblock modals %} {% endblock modals %}
{% block scripts %} {% block scripts %}
@ -81,9 +82,9 @@
const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }}); const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
</script> </script>
{% for id, extension in extensions.items() %} {{ concordance_extension.scripts() }}
{{ extension.scripts(id) }} {{ reader_extension.scripts() }}
{% endfor %} {{ static_visualization_extension.scripts() }}
<script> <script>
corpusAnalysisApp.init(); corpusAnalysisApp.init();