From 3b390858ff8b92f45f3c4adedc7dfe30df07e8ea Mon Sep 17 00:00:00 2001 From: Patrick Jentsch Date: Tue, 8 Aug 2023 10:48:36 +0200 Subject: [PATCH 1/4] Use macros for html generation instead of variables --- .../corpora/_analysis/concordance.html.j2 | 291 +++++++++--------- .../corpora/_analysis/reader.html.j2 | 139 ++++----- .../corpora/_analysis/template.html.j2 | 18 +- app/templates/corpora/analysis.html.j2 | 36 ++- 4 files changed, 234 insertions(+), 250 deletions(-) diff --git a/app/templates/corpora/_analysis/concordance.html.j2 b/app/templates/corpora/_analysis/concordance.html.j2 index 7fe1c6a6..a26c1a9a 100644 --- a/app/templates/corpora/_analysis/concordance.html.j2 +++ b/app/templates/corpora/_analysis/concordance.html.j2 @@ -2,168 +2,156 @@ {% import 'corpora/_analysis/query_builder/_query_builder.html.j2' as query_builder with context %} +{% set icon = 'list_alt' %} {% 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 tab_content %} -list_alt{{ name }} -{% endset %} - -{% set container_content %} -
-
-
-
-
-
- Query -
-
-
- -
-
-
-
- {{ expert_mode.card_content(id_prefix) }} -
-
- {# {{ query_builder.card_content(id_prefix) }} #} -
-
-
- search - {# #} -
- {# #} - - help Corpus Query Language tutorial - | - info Tagsets -
-
- arrow_forward - - -
-
-

Preview:

-

-
-
-
-
Use the following options to build your query.
-

- Add new token to your query - Add structural attributes to your query -
-
-

 

- -
-
-
+{% macro container_element(id_prefix) %} +
+
+
+
+ Query +
+
+
+
-
- -
-
- -
-
- Results -

-
-
-
-
-
-
-
-
-
- short_text - - -
-
- format_list_numbered - - -
-
- format_shapes - - -
-
- format_quote - - -
-
-
+
+ {{ expert_mode.card_content(id_prefix) }} +
+
+ {# {{ query_builder.card_content(id_prefix) }} #} +
+ +
+ search + {# #} +
+ {# #} + + help Corpus Query Language tutorial + | + info Tagsets +
+
+ arrow_forward + + +
+
+

Preview:

+

+
+
+
+
Use the following options to build your query.
+

+ Add new token to your query + Add structural attributes to your query +
+
+

 

+
-
-

-
-
- - - - - - - - - - - - -
SourceLeft contextKWICRight Context
-
    -{% endset %} -{% set modals %} +
    + +
    +
    + Results +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + short_text + + +
    +
    + format_list_numbered + + +
    +
    + format_shapes + + +
    +
    + format_quote + + +
    +
    +
    +
    +
    +
    +

    +
    +
    + + + + + + + + + + + + +
    SourceLeft contextKWICRight Context
    +
      +
      +
      +{% endmacro %} + +{# The extension modals #} +{% macro modals(id_prefix) %}
      -{% endset %} +{% endmacro %} -{% set scripts %} +{# The extension scripts #} +{% macro scripts(id_prefix) %} -{% endset %} +{% endmacro %} diff --git a/app/templates/corpora/_analysis/template.html.j2 b/app/templates/corpora/_analysis/template.html.j2 index 00565b16..b55ca772 100644 --- a/app/templates/corpora/_analysis/template.html.j2 +++ b/app/templates/corpora/_analysis/template.html.j2 @@ -1,3 +1,5 @@ +{# The extension icon #} +{% set icon = '' %} {# The extension name #} {% set name = '' %} @@ -5,22 +7,12 @@ {# The extension 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): - - -extension-container -#} -{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %} - -{# The extension tab content #} -{% set tab_content = name %} {# The extension container content #} -{% set container_content = '' %} +{% macro container_content(id_prefix) %}{% endmacro %} {# The extension modals #} -{% set modals = '' %} +{% macro modals(id_prefix) %}{% endmacro %} {# The extension scripts #} -{% set scripts = '' %} +{% macro scripts(id_prefix) %}{% endmacro %} diff --git a/app/templates/corpora/analysis.html.j2 b/app/templates/corpora/analysis.html.j2 index 046fa161..4c43552a 100644 --- a/app/templates/corpora/analysis.html.j2 +++ b/app/templates/corpora/analysis.html.j2 @@ -4,16 +4,25 @@ {% 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, static_visualization_extension] %} -{% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-app-container"{% endblock main_attribs %} +{% set extensions = + { + 'concordance-extension': concordance_extension, + 'reader-extension': reader_extension, + '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 %} @@ -21,9 +30,9 @@

      {{ title }}

      - {% for extension in extensions if extension.name != 'Static Visualization (beta)' %} + {% for id, extension in extensions.items() if extension.name != 'Static Visualization (beta)' %}
      -
      +
      {{ extension.name }}

      {{ extension.description }}

      @@ -37,9 +46,9 @@
      -{% for extension in extensions if extension.name != 'Static Visualization (beta)' %} -
      - {{ extension.container_content }} +{% for id, extension in extensions.items() if extension.name != 'Static Visualization (beta)' %} +
      + {{ extension.container_content(id) }}
      {% endfor %} {% endblock page_content %} @@ -61,10 +70,9 @@
      -{% for extension in extensions %} -{{ extension.modals }} +{% for id, extension in extensions.items() %} +{{ extension.modals(id) }} {% endfor %} - {% endblock modals %} {% block scripts %} @@ -73,8 +81,8 @@ const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }}); -{% for extension in extensions %} -{{ extension.scripts }} +{% for id, extension in extensions.items() %} +{{ extension.scripts(id) }} {% endfor %} -{% endset %} +{% endmacro %} diff --git a/app/templates/corpora/_analysis/static_visualization.html.j2 b/app/templates/corpora/_analysis/static_visualization.html.j2 index c457cbf3..2abd34ec 100644 --- a/app/templates/corpora/_analysis/static_visualization.html.j2 +++ b/app/templates/corpora/_analysis/static_visualization.html.j2 @@ -1,12 +1,15 @@ +{# The extension icon #} +{% set icon = '' %} + +{# The extension name #} {% set name = 'Static Visualization (beta)' %} +{# The extension description #} {% set description = '' %} -{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %} -{% set tab_content = '' %} - -{% set container_content %} +{# The extension container content #} +{% macro container_content(id_prefix) %}

      query_stats{{ name }}

      @@ -119,9 +122,9 @@
      -{% endset %} +{% endmacro %} -{% set modals %} +{% macro modals(id_prefix) %} - {{ static_visualization_extension.container_content }} + {{ static_visualization_extension.container_content('static-visualizations-extension') }}
      From 766c5ba27d763b16081def4aaa95ad757708e342 Mon Sep 17 00:00:00 2001 From: Patrick Jentsch Date: Tue, 8 Aug 2023 12:21:47 +0200 Subject: [PATCH 3/4] Update corpus analysis extensions to use dynamic id prefixes for elements --- .../CorpusAnalysisConcordance.js | 27 ++++++++++--------- .../js/CorpusAnalysis/CorpusAnalysisReader.js | 15 +++++------ .../corpora/_analysis/concordance.html.j2 | 2 +- .../corpora/_analysis/reader.html.j2 | 2 +- .../_analysis/static_visualization.html.j2 | 2 +- app/templates/corpora/analysis.html.j2 | 8 +++--- 6 files changed, 28 insertions(+), 28 deletions(-) diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js index 485daeb9..58e486a2 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js @@ -1,23 +1,22 @@ class CorpusAnalysisConcordance { name = 'Concordance'; - constructor(app) { + constructor(app, idPrefix) { this.app = app; this.data = {}; this.elements = { - // TODO: Prefix elements with "corpus-analysis-app-" - container: document.querySelector('#concordance-extension-container'), - error: document.querySelector('#concordance-extension-error'), - UIForm: document.querySelector('#concordance-extension-ui-form'), - form: document.querySelector('#concordance-extension-form'), - progress: document.querySelector('#concordance-extension-progress'), - subcorpusInfo: document.querySelector('#concordance-extension-subcorpus-info'), - subcorpusActions: document.querySelector('#concordance-extension-subcorpus-actions'), - subcorpusItems: document.querySelector('#concordance-extension-subcorpus-items'), - subcorpusList: document.querySelector('#concordance-extension-subcorpus-list'), - subcorpusPagination: document.querySelector('#concordance-extension-subcorpus-pagination') + container: document.querySelector(`#${idPrefix}-container`), + error: document.querySelector(`#${idPrefix}-error`), + UIForm: document.querySelector(`#${idPrefix}-ui-form`), + form: document.querySelector(`#${idPrefix}-form`), + progress: document.querySelector(`#${idPrefix}-progress`), + subcorpusInfo: document.querySelector(`#${idPrefix}-subcorpus-info`), + subcorpusActions: document.querySelector(`#${idPrefix}-subcorpus-actions`), + subcorpusItems: document.querySelector(`#${idPrefix}-subcorpus-items`), + subcorpusList: document.querySelector(`#${idPrefix}-subcorpus-list`), + subcorpusPagination: document.querySelector(`#${idPrefix}-subcorpus-pagination`) }; this.settings = { @@ -383,7 +382,9 @@ class CorpusAnalysisConcordance { document.getSelection().removeAllRanges(); 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')) { diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js b/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js index eb63cae9..ab103068 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js @@ -1,19 +1,18 @@ class CorpusAnalysisReader { name = 'Reader'; - constructor(app) { + constructor(app, idPrefix) { this.app = app; this.data = {}; this.elements = { - // TODO: Prefix elements with "corpus-analysis-app-" - container: document.querySelector('#reader-extension-container'), - error: document.querySelector('#reader-extension-error'), - form: document.querySelector('#reader-extension-form'), - progress: document.querySelector('#reader-extension-progress'), - corpus: document.querySelector('#reader-extension-corpus'), - corpusPagination: document.querySelector('#reader-extension-corpus-pagination') + container: document.querySelector(`#${idPrefix}-container`), + error: document.querySelector(`#${idPrefix}-error`), + form: document.querySelector(`#${idPrefix}-form`), + progress: document.querySelector(`#${idPrefix}-progress`), + corpus: document.querySelector(`#${idPrefix}-corpus`), + corpusPagination: document.querySelector(`#${idPrefix}-corpus-pagination`) }; this.settings = { diff --git a/app/templates/corpora/_analysis/concordance.html.j2 b/app/templates/corpora/_analysis/concordance.html.j2 index 6740425a..78df52e7 100644 --- a/app/templates/corpora/_analysis/concordance.html.j2 +++ b/app/templates/corpora/_analysis/concordance.html.j2 @@ -170,7 +170,7 @@ {# The extension scripts #} {% macro scripts(id_prefix) %} {% endmacro %} diff --git a/app/templates/corpora/_analysis/static_visualization.html.j2 b/app/templates/corpora/_analysis/static_visualization.html.j2 index 2abd34ec..f489c46e 100644 --- a/app/templates/corpora/_analysis/static_visualization.html.j2 +++ b/app/templates/corpora/_analysis/static_visualization.html.j2 @@ -158,7 +158,7 @@ {% macro scripts(id_prefix) %} {% endmacro %} \ No newline at end of file diff --git a/app/templates/corpora/analysis.html.j2 b/app/templates/corpora/analysis.html.j2 index 31eee99d..261eb226 100644 --- a/app/templates/corpora/analysis.html.j2 +++ b/app/templates/corpora/analysis.html.j2 @@ -6,9 +6,9 @@ {% set extensions = { - 'concordance-extension': concordance_extension, - 'reader-extension': reader_extension, - 'static-visualizations-extension': static_visualization_extension + 'corpus-analysis-app-concordance-extension': concordance_extension, + 'corpus-analysis-app-reader-extension': reader_extension, + 'corpus-analysis-app-static-visualizations-extension': static_visualization_extension } %} @@ -42,7 +42,7 @@ {% endfor %}
      - {{ static_visualization_extension.container_content('static-visualizations-extension') }} + {{ static_visualization_extension.container_content('corpus-analysis-app-static-visualizations-extension') }}
      From 0d92f221cb393f7638f2d1222696b45f8745038e Mon Sep 17 00:00:00 2001 From: Patrick Jentsch Date: Tue, 8 Aug 2023 14:07:07 +0200 Subject: [PATCH 4/4] rename ui-form --- .../CorpusAnalysisConcordance.js | 30 +++++++++---------- .../js/CorpusAnalysis/CorpusAnalysisReader.js | 30 +++++++++---------- .../corpora/_analysis/concordance.html.j2 | 2 +- .../corpora/_analysis/reader.html.j2 | 2 +- 4 files changed, 32 insertions(+), 32 deletions(-) diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js index 58e486a2..dfb92a6c 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js @@ -9,7 +9,7 @@ class CorpusAnalysisConcordance { this.elements = { container: document.querySelector(`#${idPrefix}-container`), error: document.querySelector(`#${idPrefix}-error`), - UIForm: document.querySelector(`#${idPrefix}-ui-form`), + userInterfaceForm: document.querySelector(`#${idPrefix}-user-interface-form`), form: document.querySelector(`#${idPrefix}-form`), progress: document.querySelector(`#${idPrefix}-progress`), subcorpusInfo: document.querySelector(`#${idPrefix}-subcorpus-info`), @@ -20,11 +20,11 @@ class CorpusAnalysisConcordance { }; this.settings = { - context: parseInt(this.elements.UIForm['context'].value), - perPage: parseInt(this.elements.UIForm['per-page'].value), + context: parseInt(this.elements.userInterfaceForm['context'].value), + perPage: parseInt(this.elements.userInterfaceForm['per-page'].value), selectedSubcorpus: undefined, - textStyle: parseInt(this.elements.UIForm['text-style'].value), - tokenRepresentation: this.elements.UIForm['token-representation'].value + textStyle: parseInt(this.elements.userInterfaceForm['text-style'].value), + tokenRepresentation: this.elements.userInterfaceForm['token-representation'].value }; console.log(this.settings); @@ -77,24 +77,24 @@ class CorpusAnalysisConcordance { event.preventDefault(); this.submitForm(); }); - this.elements.UIForm.addEventListener('change', (event) => { - if (event.target === this.elements.UIForm['context']) { + this.elements.userInterfaceForm.addEventListener('change', (event) => { + if (event.target === this.elements.userInterfaceForm['context']) { console.log(this.settings.context); - console.log(parseInt(this.elements.UIForm['context'].value)); - this.settings.context = parseInt(this.elements.UIForm['context'].value); + console.log(parseInt(this.elements.userInterfaceForm['context'].value)); + this.settings.context = parseInt(this.elements.userInterfaceForm['context'].value); console.log(this.settings.context); this.submitForm(); } - if (event.target === this.elements.UIForm['per-page']) { - this.settings.perPage = parseInt(this.elements.UIForm['per-page'].value); + if (event.target === this.elements.userInterfaceForm['per-page']) { + this.settings.perPage = parseInt(this.elements.userInterfaceForm['per-page'].value); this.submitForm(); } - if (event.target === this.elements.UIForm['text-style']) { - this.settings.textStyle = parseInt(this.elements.UIForm['text-style'].value); + if (event.target === this.elements.userInterfaceForm['text-style']) { + this.settings.textStyle = parseInt(this.elements.userInterfaceForm['text-style'].value); this.setTextStyle(); } - if (event.target === this.elements.UIForm['token-representation']) { - this.settings.tokenRepresentation = this.elements.UIForm['token-representation'].value; + if (event.target === this.elements.userInterfaceForm['token-representation']) { + this.settings.tokenRepresentation = this.elements.userInterfaceForm['token-representation'].value; this.setTokenRepresentation(); } }); diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js b/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js index ab103068..4990b91a 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js @@ -8,17 +8,17 @@ class CorpusAnalysisReader { this.elements = { container: document.querySelector(`#${idPrefix}-container`), - error: document.querySelector(`#${idPrefix}-error`), - form: document.querySelector(`#${idPrefix}-form`), - progress: document.querySelector(`#${idPrefix}-progress`), corpus: document.querySelector(`#${idPrefix}-corpus`), - corpusPagination: document.querySelector(`#${idPrefix}-corpus-pagination`) + corpusPagination: document.querySelector(`#${idPrefix}-corpus-pagination`), + error: document.querySelector(`#${idPrefix}-error`), + progress: document.querySelector(`#${idPrefix}-progress`), + userInterfaceForm: document.querySelector(`#${idPrefix}-user-interface-form`) }; this.settings = { - perPage: parseInt(this.elements.form['per-page'].value), - textStyle: parseInt(this.elements.form['text-style'].value), - tokenRepresentation: this.elements.form['token-representation'].value, + perPage: parseInt(this.elements.userInterfaceForm['per-page'].value), + textStyle: parseInt(this.elements.userInterfaceForm['text-style'].value), + tokenRepresentation: this.elements.userInterfaceForm['token-representation'].value, pagination: { innerWindow: 5, outerWindow: 1 @@ -56,21 +56,21 @@ class CorpusAnalysisReader { // Init data this.data.corpus = this.app.data.corpus; // Add event listeners - this.elements.form.addEventListener('submit', (event) => { + this.elements.userInterfaceForm.addEventListener('submit', (event) => { event.preventDefault(); this.submitForm(); }); - this.elements.form.addEventListener('change', (event) => { - if (event.target === this.elements.form['per-page']) { - this.settings.perPage = parseInt(this.elements.form['per-page'].value); + this.elements.userInterfaceForm.addEventListener('change', (event) => { + if (event.target === this.elements.userInterfaceForm['per-page']) { + this.settings.perPage = parseInt(this.elements.userInterfaceForm['per-page'].value); this.submitForm(); } - if (event.target === this.elements.form['text-style']) { - this.settings.textStyle = parseInt(this.elements.form['text-style'].value); + if (event.target === this.elements.userInterfaceForm['text-style']) { + this.settings.textStyle = parseInt(this.elements.userInterfaceForm['text-style'].value); this.setTextStyle(); } - if (event.target === this.elements.form['token-representation']) { - this.settings.tokenRepresentation = this.elements.form['token-representation'].value; + if (event.target === this.elements.userInterfaceForm['token-representation']) { + this.settings.tokenRepresentation = this.elements.userInterfaceForm['token-representation'].value; this.setTokenRepresentation(); } }); diff --git a/app/templates/corpora/_analysis/concordance.html.j2 b/app/templates/corpora/_analysis/concordance.html.j2 index 78df52e7..6fc3f0c6 100644 --- a/app/templates/corpora/_analysis/concordance.html.j2 +++ b/app/templates/corpora/_analysis/concordance.html.j2 @@ -80,7 +80,7 @@
      -
      +
      diff --git a/app/templates/corpora/_analysis/reader.html.j2 b/app/templates/corpora/_analysis/reader.html.j2 index 2ed756d8..df12fb6b 100644 --- a/app/templates/corpora/_analysis/reader.html.j2 +++ b/app/templates/corpora/_analysis/reader.html.j2 @@ -12,7 +12,7 @@ {% macro container_content(id_prefix) %}
      - +