mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-12 17:10:41 +00:00
Outsource Static Viz to extensions logic
This commit is contained in:
Inga Kirschnick
@ -29,6 +29,7 @@
|
||||
'js/CorpusAnalysis/CorpusAnalysisApp.js',
|
||||
'js/CorpusAnalysis/CorpusAnalysisConcordance.js',
|
||||
'js/CorpusAnalysis/CorpusAnalysisReader.js',
|
||||
'js/CorpusAnalysis/CorpusAnalysisStaticVisualization.js',
|
||||
'js/CorpusAnalysis/QueryBuilder.js',
|
||||
'js/XMLtoObject.js'
|
||||
%}
|
||||
|
||||
157
app/templates/corpora/_analysis/static_visualization.html.j2
Normal file
157
app/templates/corpora/_analysis/static_visualization.html.j2
Normal file
@ -0,0 +1,157 @@
|
||||
{% set name = 'Static Visualization' %}
|
||||
|
||||
{% set description = '' %}
|
||||
|
||||
{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %}
|
||||
|
||||
{% set tab_content = '' %}
|
||||
|
||||
{% set container_content %}
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<h4><i class="material-icons left">query_stats</i>{{ name }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center;">
|
||||
<p><b>Tokens</b></p>
|
||||
<span class="card-title corpus-num-tokens"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p><b>Sentences</b></p>
|
||||
<span class="card-title corpus-num-s"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p><b>Unique words</b></p>
|
||||
<span class="card-title corpus-num-unique-words"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p><b>Unique lemmas</b></p>
|
||||
<span class="card-title corpus-num-unique-lemmas"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p><b>Unique pos</b></p>
|
||||
<span class="card-title corpus-num-unique-pos"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p><b>Unique simple_pos</b></p>
|
||||
<span class="card-title corpus-num-unique-simple-pos"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Text Information Overview</span>
|
||||
<div class="chip text-count-chip" style="background-color:#6b3f89; color:white""></div>
|
||||
<div class="corpus-text-info-list no-autoinit"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s4">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Proportions</span>
|
||||
<p>of texts within the corpus</p>
|
||||
<div id="text-proportions-graphic" style="width:100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s8">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Frequencies</span>
|
||||
<ul id="frequencies-token-category-dropdown" class="dropdown-content">
|
||||
<li><a data-token-category="word">Word</a></li>
|
||||
<li><a data-token-category="lemma">Lemma</a></li>
|
||||
<li><a data-token-category="pos">Pos</a></li>
|
||||
<li><a data-token-category="simple_pos">Simple_pos</a></li>
|
||||
</ul>
|
||||
<p>within the texts of the 5 most frequent words in the corpus</p>
|
||||
<div id="frequencies-graphic"></div>
|
||||
<a class="dropdown-trigger btn" data-target="frequencies-token-category-dropdown">Word<i class="material-icons right">arrow_drop_down</i></a>
|
||||
<a class="btn disabled frequencies-graph-mode-button" data-graph-type="bar"><i class="material-icons">equalizer</i></a>
|
||||
<a class="btn frequencies-graph-mode-button" data-graph-type="scatter"><i class="material-icons">show_chart</i></a>
|
||||
<a class="btn frequencies-graph-mode-button" data-graph-type="markers"><i class="material-icons">bubble_chart</i></a>
|
||||
<a class="btn-flat modal-trigger no-autoinit" id="frequencies-stopwords-setting-modal-button" href="#frequencies-stopwords-setting-modal"><i class="material-icons grey-text text-darken-2">settings</i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Text Bounds</span>
|
||||
<div id="bounds-graphic"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endset %}
|
||||
|
||||
{% set modals %}
|
||||
<div class="modal modal-fixed-footer" id="frequencies-stopwords-setting-modal">
|
||||
<div class="modal-content">
|
||||
<h4>Settings</h4>
|
||||
<div class="row">
|
||||
<p>Here you can change the stopword-lists. Stopwords are common words in a language,
|
||||
like "the" or "and," that carry little meaning and are often removed in text analysis
|
||||
to improve efficiency and accuracy.</p>
|
||||
<div id="user-stopword-list-container"></div>
|
||||
<div class="chips col s8 no-autoinit input-field" id="stopword-input-field">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>Below you can find a list of all stopwords that are always filtered out.
|
||||
The lists are sorted by language, you can remove single words or remove
|
||||
whole languages via the settings on the right.</p>
|
||||
<div class="input-field col s3">
|
||||
<select id="stopword-language-selection"></select>
|
||||
<label>Stopword language select</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="chip btn white-text red" id="delete-language-stopword-list-entries-button">Delete all below<i class="material-icons right">delete</i></div>
|
||||
<div class="chip btn white-text blue" id="reset-language-stopword-list-entries-button">Reset stopword list<i class="material-icons right">refresh</i></div>
|
||||
</div>
|
||||
<div id="stopword-language-chip-list"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<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>
|
||||
</div>
|
||||
{% endset %}
|
||||
|
||||
{% set scripts %}
|
||||
<script>
|
||||
const corpusAnalysisStaticVisualization = new CorpusAnalysisStaticVisualization(corpusAnalysisApp);
|
||||
</script>
|
||||
{% endset %}
|
||||
@ -2,8 +2,9 @@
|
||||
{% import "materialize/wtf.html.j2" as wtf %}
|
||||
{% import 'corpora/_analysis/concordance.html.j2' as concordance_extension %}
|
||||
{% import 'corpora/_analysis/reader.html.j2' as reader_extension %}
|
||||
{% import 'corpora/_analysis/static_visualization.html.j2' as static_visualization_extension%}
|
||||
|
||||
{% set extensions = [concordance_extension, reader_extension] %}
|
||||
{% set extensions = [concordance_extension, reader_extension, static_visualization_extension] %}
|
||||
{% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-app-container"{% endblock main_attribs %}
|
||||
|
||||
|
||||
@ -12,7 +13,9 @@
|
||||
<ul class="row tabs no-autoinit" id="corpus-analysis-app-extension-tabs">
|
||||
<li class="tab col s3"><a class="active" href="#corpus-analysis-app-overview"><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' %}
|
||||
<li class="tab col s3"><a href="#{{ extension.id_prefix }}-container">{{ extension.tab_content }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@ -21,6 +24,7 @@
|
||||
<h1>{{ title }}</h1>
|
||||
|
||||
{% for extension in extensions %}
|
||||
{% if extension.name != 'Static Visualization' %}
|
||||
<div class="col s3">
|
||||
<div class="card extension-selector hoverable" data-target="{{ extension.id_prefix }}-container">
|
||||
<div class="card-content">
|
||||
@ -29,116 +33,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<h4><i class="material-icons left">query_stats</i>Visualizations</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center;">
|
||||
<p><b>Tokens</b></p>
|
||||
<span class="card-title corpus-num-tokens"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p><b>Sentences</b></p>
|
||||
<span class="card-title corpus-num-s"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p><b>Unique words</b></p>
|
||||
<span class="card-title corpus-num-unique-words"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p><b>Unique lemmas</b></p>
|
||||
<span class="card-title corpus-num-unique-lemmas"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p><b>Unique pos</b></p>
|
||||
<span class="card-title corpus-num-unique-pos"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
<div class="card hoverable" style="border-radius: 10px !important; background-color:#6b3f89; color:white">
|
||||
<div class="card-content" style="padding:10px !important; text-align:center">
|
||||
<p><b>Unique simple_pos</b></p>
|
||||
<span class="card-title corpus-num-unique-simple-pos"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Text Information Overview</span>
|
||||
<div class="chip text-count-chip" style="background-color:#6b3f89; color:white""></div>
|
||||
<div class="corpus-text-info-list no-autoinit"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s4">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Proportions</span>
|
||||
<p>of texts within the corpus</p>
|
||||
<div id="text-proportions-graphic" style="width:100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s8">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Frequencies</span>
|
||||
<ul id="frequencies-token-category-dropdown" class="dropdown-content">
|
||||
<li><a data-token-category="word">Word</a></li>
|
||||
<li><a data-token-category="lemma">Lemma</a></li>
|
||||
<li><a data-token-category="pos">Pos</a></li>
|
||||
<li><a data-token-category="simple_pos">Simple_pos</a></li>
|
||||
</ul>
|
||||
<p>within the texts of the 5 most frequent words in the corpus</p>
|
||||
<div id="frequencies-graphic"></div>
|
||||
<a class="dropdown-trigger btn" data-target="frequencies-token-category-dropdown">Word<i class="material-icons right">arrow_drop_down</i></a>
|
||||
<a class="btn disabled frequencies-graph-mode-button" data-graph-type="bar"><i class="material-icons">equalizer</i></a>
|
||||
<a class="btn frequencies-graph-mode-button" data-graph-type="scatter"><i class="material-icons">show_chart</i></a>
|
||||
<a class="btn frequencies-graph-mode-button" data-graph-type="markers"><i class="material-icons">bubble_chart</i></a>
|
||||
<a class="btn-flat modal-trigger no-autoinit" id="frequencies-stopwords-setting-modal-button" href="#frequencies-stopwords-setting-modal"><i class="material-icons grey-text text-darken-2">settings</i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card hoverable">
|
||||
<div class="card-content">
|
||||
<span class="card-title">Text Bounds</span>
|
||||
<div id="bounds-graphic"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -165,38 +62,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal modal-fixed-footer" id="frequencies-stopwords-setting-modal">
|
||||
<div class="modal-content">
|
||||
<h4>Settings</h4>
|
||||
<div class="row">
|
||||
<p>Here you can change the stopword-lists. Stopwords are common words in a language,
|
||||
like "the" or "and," that carry little meaning and are often removed in text analysis
|
||||
to improve efficiency and accuracy.</p>
|
||||
<div id="user-stopword-list-container"></div>
|
||||
<div class="chips col s8 no-autoinit input-field" id="stopword-input-field">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>Below you can find a list of all stopwords that are always filtered out.
|
||||
The lists are sorted by language, you can remove single words or remove
|
||||
whole languages via the settings on the right.</p>
|
||||
<div class="input-field col s3">
|
||||
<select id="stopword-language-selection"></select>
|
||||
<label>Stopword language select</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="chip btn white-text red" id="delete-language-stopword-list-entries-button">Delete all below<i class="material-icons right">delete</i></div>
|
||||
<div class="chip btn white-text blue" id="reset-language-stopword-list-entries-button">Reset stopword list<i class="material-icons right">refresh</i></div>
|
||||
</div>
|
||||
<div id="stopword-language-chip-list"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
{% for extension in extensions %}
|
||||
{{ extension.modals }}
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user