diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js b/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js
index 7f0462d562c53a247036a10973f8288d06760d8f..25f58a65cd6dad3d35a5622146b4c35a512ec0e4 100644
--- a/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js
+++ b/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js
@@ -1,11 +1,6 @@
class CorpusAnalysisApp {
constructor(corpusId) {
- this.data = {
- stopwords: undefined,
- originalStopwords: {},
- stopwordCache: {},
- promises: {getStopwords: undefined}
- };
+ this.data = {};
// HTML elements
this.elements = {
@@ -27,24 +22,6 @@ class CorpusAnalysisApp {
};
}
- getStopwords() {
- this.data.promises.getStopwords = new Promise((resolve, reject) => {
- Requests.corpora.entity.getStopwords()
- .then((response) => {
- response.json()
- .then((json) => {
- this.data.originalStopwords = structuredClone(json);
- this.data.stopwords = structuredClone(json);
- resolve(this.data.stopwords);
- })
- .catch((error) => {
- reject(error);
- });
- });
- });
- return this.data.promises.getStopwords;
- }
-
init() {
this.disableActionElements();
this.elements.m.initModal.open();
@@ -57,11 +34,12 @@ class CorpusAnalysisApp {
.then((cqiCorpora) => {
this.data.corpus = {o: cqiCorpora[0]};
console.log(this.data.corpus.o.staticData);
- this.renderGeneralCorpusInfo();
- this.renderTextInfoList();
- this.renderTextProportionsGraphic()
- this.renderFrequenciesGraphic();
- this.renderBoundsGraphic();
+ // this.renderGeneralCorpusInfo();
+ // this.renderTextInfoList();
+ // this.renderTextProportionsGraphic()
+ // this.renderFrequenciesGraphic();
+ // this.renderBoundsGraphic();
+
// TODO: Don't do this hgere
this.data.corpus.o.updateDb();
this.enableActionElements();
@@ -78,7 +56,6 @@ class CorpusAnalysisApp {
progressElement.classList.add('hide');
}
);
-
// Add event listeners
for (let extensionSelectorElement of this.elements.overview.querySelectorAll('.extension-selector')) {
@@ -86,25 +63,6 @@ class CorpusAnalysisApp {
this.elements.m.extensionTabs.select(extensionSelectorElement.dataset.target);
});
}
-
- let frequenciesStopwordSettingModal = document.querySelector('#frequencies-stopwords-setting-modal');
- let frequenciesStopwordSettingModalButton = document.querySelector('#frequencies-stopwords-setting-modal-button');
- frequenciesStopwordSettingModalButton.addEventListener('click', () => {
- this.data.stopwordCache = structuredClone(this.data.stopwords);
- this.renderStopwordSettingsModal(this.data.stopwords);
- M.Modal.init(frequenciesStopwordSettingModal, {dismissible: false});
- });
-
- for (let actionButton of document.querySelectorAll('.frequencies-stopword-setting-modal-action-buttons')) {
- actionButton.addEventListener('click', (event) => {
- let action = event.target.closest('.frequencies-stopword-setting-modal-action-buttons').dataset.action;
- if (action === 'submit') {
- this.renderFrequenciesGraphic();
- } else if (action === 'cancel') {
- this.data.stopwords = structuredClone(this.data.stopwordCache);
- }
- });
- }
}
registerExtension(extension) {
@@ -141,306 +99,4 @@ class CorpusAnalysisApp {
}
}
}
-
- renderGeneralCorpusInfo() {
- let corpusData = this.data.corpus.o.staticData;
- document.querySelector('.corpus-num-tokens').innerHTML = corpusData.corpus.counts.token;
- document.querySelector('.corpus-num-s').innerHTML = corpusData.corpus.counts.s;
- document.querySelector('.corpus-num-unique-words').innerHTML = Object.entries(corpusData.corpus.freqs.word).length;
- document.querySelector('.corpus-num-unique-lemmas').innerHTML = Object.entries(corpusData.corpus.freqs.lemma).length;
- document.querySelector('.corpus-num-unique-pos').innerHTML = Object.entries(corpusData.corpus.freqs.pos).length;
- document.querySelector('.corpus-num-unique-simple-pos').innerHTML = Object.entries(corpusData.corpus.freqs.simple_pos).length;
- }
-
- renderTextInfoList() {
- let corpusData = this.data.corpus.o.staticData;
- let corpusTextInfoListElement = document.querySelector('.corpus-text-info-list');
- let corpusTextInfoList = new CorpusTextInfoList(corpusTextInfoListElement);
- let texts = corpusData.s_attrs.text.lexicon;
- let textData = [];
- for (let i = 0; i < Object.entries(texts).length; i++) {
- let resource = {
- title: corpusData.values.s_attrs.text[i].title,
- publishing_year: corpusData.values.s_attrs.text[i].publishing_year,
- num_tokens: corpusData.s_attrs.text.lexicon[i].counts.token,
- num_sentences: corpusData.s_attrs.text.lexicon[i].counts.s,
- num_unique_words: Object.entries(corpusData.s_attrs.text.lexicon[i].freqs.word).length,
- num_unique_lemmas: Object.entries(corpusData.s_attrs.text.lexicon[i].freqs.lemma).length,
- num_unique_pos: Object.entries(corpusData.s_attrs.text.lexicon[i].freqs.pos).length,
- num_unique_simple_pos: Object.entries(corpusData.s_attrs.text.lexicon[i].freqs.simple_pos).length
- };
-
- textData.push(resource);
- }
-
- corpusTextInfoList.add(textData);
-
- let textCountChipElement = document.querySelector('.text-count-chip');
- textCountChipElement.innerHTML = `Text count: ${corpusData.corpus.counts.text}`;
- }
-
- renderTextProportionsGraphic() {
- let corpusData = this.data.corpus.o.staticData;
- let textProportionsGraphicElement = document.querySelector('#text-proportions-graphic');
- let texts = Object.entries(corpusData.s_attrs.text.lexicon);
- let graphData = [
- {
- values: texts.map(text => text[1].counts.token),
- labels: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
- type: 'pie'
- }
- ];
- let graphLayout = {
- showlegend: true,
- height: 486,
- margin: {
- l: 10,
- r: 10,
- b: 10,
- t: 10
- },
- legend: {
- "orientation": "h",
- font: {
- size: 10
- }
- }
- };
- let config = {
- responsive: true,
- displaylogo: false
- };
-
- Plotly.newPlot(textProportionsGraphicElement, graphData, graphLayout, config);
- }
-
- async renderFrequenciesGraphic() {
- let corpusData = this.data.corpus.o.staticData;
- let frequenciesTokenCategoryDropdownElement = document.querySelector('[data-target="frequencies-token-category-dropdown"]');
- let frequenciesTokenCategoryDropdownListElement = document.querySelector("#frequencies-token-category-dropdown");
- let frequenciesGraphicElement = document.querySelector('#frequencies-graphic');
- let texts = Object.entries(corpusData.s_attrs.text.lexicon);
- let graphtype = document.querySelector('.frequencies-graph-mode-button.disabled').dataset.graphType;
- let graphModeButtons = document.querySelectorAll('.frequencies-graph-mode-button');
-
- frequenciesTokenCategoryDropdownListElement.addEventListener('click', (event) => {
- frequenciesTokenCategoryDropdownElement.firstChild.textContent = event.target.innerHTML;
- this.renderFrequenciesGraphic(corpusData);
- });
-
- graphModeButtons.forEach(graphModeButton => {
- graphModeButton.addEventListener('click', (event) => {
- graphModeButtons.forEach(btn => {
- btn.classList.remove('disabled');
- });
- event.target.closest('.frequencies-graph-mode-button').classList.add('disabled');
- this.renderFrequenciesGraphic(corpusData);
- });
- });
-
- let tokenCategory = frequenciesTokenCategoryDropdownElement.firstChild.textContent.toLowerCase();
-
- let graphData = await this.createFrequenciesGraphData(tokenCategory, texts, corpusData, graphtype);
- let graphLayout = {
- barmode: graphtype === 'bar' ? 'stack' : '',
- margin: {
- t: 20,
- l: 50
- },
- yaxis: {
- showticklabels: graphtype === 'markers' ? false : true
- },
- };
- let config = {
- responsive: true,
- modeBarButtonsToRemove: ['zoom2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'],
- displaylogo: false
- };
- Plotly.newPlot(frequenciesGraphicElement, graphData, graphLayout, config);
- }
-
- async createFrequenciesGraphData(category, texts, corpusData, graphtype) {
- let stopwords = this.data.stopwords;
- if (this.data.stopwords === undefined) {
- stopwords = await this.getStopwords();
- }
- let stopwordList = Object.values(stopwords).flat();
- let graphData = [];
- let filteredData = Object.entries(corpusData.corpus.freqs[category])
- .sort((a, b) => b[1] - a[1])
- .filter(item => !stopwordList.includes(corpusData.values.p_attrs[category][item[0]].toLowerCase()))
- .slice(0, 5);
-
- if (graphtype !== 'markers') {
- for (let item of filteredData) {
- let data = {
- x: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
- y: texts.map(text => text[1].freqs[category][item[0]] || 0),
- name: corpusData.values.p_attrs[category][item[0]],
- type: graphtype
- };
- graphData.push(data);
- }
- } else {
- for (let item of filteredData) {
- let size = texts.map(text => text[1].freqs[category][item[0]] || 0);
- let data = {
- x: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
- y: texts.map(text => corpusData.values.p_attrs[category][item[0]]),
- name: corpusData.values.p_attrs[category][item[0]],
- text: texts.map(text => `${corpusData.values.p_attrs[category][item[0]]}<br>${text[1].freqs[category][item[0]] || 0}`),
- mode: 'markers',
- marker: {
- size: size,
- sizeref: 0.4
- }
- };
- graphData.push(data);
- }
- }
- return graphData;
- }
-
- renderStopwordSettingsModal(stopwords) {
- let stopwordInputField = document.querySelector('#stopword-input-field');
- let userStopwordListContainer = document.querySelector('#user-stopword-list-container');
- let stopwordLanguageSelection = document.querySelector('#stopword-language-selection');
- let stopwordLanguageChipList = document.querySelector('#stopword-language-chip-list');
- let deleteLanguageStopwordListEntriesButton = document.querySelector('#delete-language-stopword-list-entries-button');
- let resetLanguageStopwordListEntriesButton = document.querySelector('#reset-language-stopword-list-entries-button');
-
- stopwordLanguageChipList.innerHTML = '';
- userStopwordListContainer.innerHTML = '';
- stopwordInputField.value = '';
-
- // Render stopword language selection. Set english as default language. Filter out user_stopwords.
- if (stopwordLanguageSelection.children.length === 0) {
- Object.keys(stopwords).forEach(language => {
- if (language !== 'user_stopwords') {
- let optionElement = Utils.HTMLToElement(`<option value="${language}" ${language === 'english' ? 'selected' : ''}>${language}</option>`);
- stopwordLanguageSelection.appendChild(optionElement);
- }
- });
- }
-
- // Render user stopwords over input field.
- if (this.data.stopwords['user_stopwords'].length > 0) {
- for (let word of this.data.stopwords['user_stopwords']) {
- let chipElement = Utils.HTMLToElement(`<div class="chip">${word}<i class="close material-icons">close</i></div>`);
- chipElement.addEventListener('click', (event) => {
- let removedListItem = event.target.closest('.chip').firstChild.textContent;
- this.data.stopwords['user_stopwords'] = structuredClone(this.data.stopwords['user_stopwords'].filter(item => item !== removedListItem));
- });
- userStopwordListContainer.appendChild(chipElement);
- }
- }
-
- // Render english stopwords as default ...
- let selectedLanguage = document.querySelector('#stopword-language-selection').value;
- this.renderStopwordLanguageChipList(selectedLanguage, stopwords[selectedLanguage]);
-
- // ... or render selected language stopwords.
- stopwordLanguageSelection.addEventListener('change', (event) => {
- this.renderStopwordLanguageChipList(event.target.value, stopwords[event.target.value]);
- });
-
- // Eventlistener for deleting all stopwords of a language.
- deleteLanguageStopwordListEntriesButton.addEventListener('click', (event) => {
- let selectedLanguage = stopwordLanguageSelection.value;
- this.data.stopwords[selectedLanguage] = [];
- stopwordLanguageChipList.innerHTML = '';
- this.buttonRendering();
- });
-
- // Eventlistener for resetting all stopwords of a language to the original stopwords.
- resetLanguageStopwordListEntriesButton.addEventListener('click', () => {
- let selectedLanguage = stopwordLanguageSelection.value;
- this.data.stopwords[selectedLanguage] = structuredClone(this.data.originalStopwords[selectedLanguage]);
- this.renderStopwordLanguageChipList(selectedLanguage, this.data.stopwords[selectedLanguage]);
- });
-
- // Initialize Materialize components.
- M.Chips.init(
- stopwordInputField,
- {
- placeholder: 'Add stopwords',
- onChipAdd: (event) => {
- for (let word of event[0].M_Chips.chipsData) {
- if (!this.data.stopwords['user_stopwords'].includes(word.tag.toLowerCase())) {
- this.data.stopwords['user_stopwords'].push(word.tag.toLowerCase());
- }
- }
- }
- }
- );
- M.FormSelect.init(stopwordLanguageSelection);
-
- }
-
- buttonRendering() {
- let deleteLanguageStopwordListEntriesButton = document.querySelector('#delete-language-stopword-list-entries-button');
- let resetLanguageStopwordListEntriesButton = document.querySelector('#reset-language-stopword-list-entries-button');
- let selectedLanguage = document.querySelector('#stopword-language-selection').value;
- let stopwordLength = this.data.stopwords[selectedLanguage].length;
- let originalStopwordListLength = this.data.originalStopwords[selectedLanguage].length;
-
- deleteLanguageStopwordListEntriesButton.classList.toggle('disabled', stopwordLength === 0);
- resetLanguageStopwordListEntriesButton.classList.toggle('disabled', stopwordLength === originalStopwordListLength);
- }
-
- renderStopwordLanguageChipList(language, stopwords) {
- let stopwordLanguageChipList = document.querySelector('#stopword-language-chip-list');
- stopwordLanguageChipList.innerHTML = '';
- for (let word of stopwords) {
- let chipElement = Utils.HTMLToElement(`<div class="chip">${word}<i class="close material-icons">close</i></div>`);
- chipElement.addEventListener('click', (event) => {
- let removedListItem = event.target.closest('.chip').firstChild.textContent;
- this.data.stopwords[language] = structuredClone(this.data.stopwords[language].filter(item => item !== removedListItem));
- this.buttonRendering();
- });
- stopwordLanguageChipList.appendChild(chipElement);
- }
- this.buttonRendering();
- }
-
- renderBoundsGraphic() {
- let corpusData = this.data.corpus.o.staticData;
- let boundsGraphicElement = document.querySelector('#bounds-graphic');
-
- let graphData = [];
- let texts = Object.entries(corpusData.s_attrs.text.lexicon);
-
- graphData = [{
- type: 'bar',
- x: texts.map(text => text[1].bounds[1] - text[1].bounds[0]),
- y: texts.map(text => corpusData.values.s_attrs.text[text[0]].title),
- base: texts.map(text => text[1].bounds[0]),
- text: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
- orientation: 'h',
- hovertemplate: '%{base} - %{x} <br>%{y}',
- showlegend: false
- }];
-
- let graphLayout = {
- barmode: 'stack',
- type: 'bar',
- showgrid: false,
- xaxis: {
- rangemode: 'nonnegative',
- autorange: true
- },
- yaxis: {
- autorange: true,
- showticklabels: false
- }
- };
-
- let config = {
- responsive: true,
- modeBarButtonsToRemove: ['zoom2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'],
- displaylogo: false
- };
-
- Plotly.newPlot(boundsGraphicElement, graphData, graphLayout, config);
- }
}
diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisStaticVisualization.js b/app/static/js/CorpusAnalysis/CorpusAnalysisStaticVisualization.js
new file mode 100644
index 0000000000000000000000000000000000000000..81e1d4668bcd86addaf1542a01d5653cb81cea4b
--- /dev/null
+++ b/app/static/js/CorpusAnalysis/CorpusAnalysisStaticVisualization.js
@@ -0,0 +1,364 @@
+class CorpusAnalysisStaticVisualization {
+ name = 'Static Visualization';
+
+ constructor(app) {
+ this.app = app;
+ this.data = {
+ stopwords: undefined,
+ originalStopwords: {},
+ stopwordCache: {},
+ promises: {getStopwords: undefined}
+ };
+
+ this.app.registerExtension(this);
+ }
+
+ init() {
+ // Init data
+ this.data.corpus = this.app.data.corpus;
+ this.renderGeneralCorpusInfo();
+ this.renderTextInfoList();
+ this.renderTextProportionsGraphic()
+ this.renderFrequenciesGraphic();
+ this.renderBoundsGraphic();
+ // Add event listeners
+ let frequenciesStopwordSettingModal = document.querySelector('#frequencies-stopwords-setting-modal');
+ let frequenciesStopwordSettingModalButton = document.querySelector('#frequencies-stopwords-setting-modal-button');
+ frequenciesStopwordSettingModalButton.addEventListener('click', () => {
+ this.data.stopwordCache = structuredClone(this.data.stopwords);
+ this.renderStopwordSettingsModal(this.data.stopwords);
+ M.Modal.init(frequenciesStopwordSettingModal, {dismissible: false});
+ });
+
+ for (let actionButton of document.querySelectorAll('.frequencies-stopword-setting-modal-action-buttons')) {
+ actionButton.addEventListener('click', (event) => {
+ let action = event.target.closest('.frequencies-stopword-setting-modal-action-buttons').dataset.action;
+ if (action === 'submit') {
+ this.renderFrequenciesGraphic();
+ } else if (action === 'cancel') {
+ this.data.stopwords = structuredClone(this.data.stopwordCache);
+ }
+ });
+ }
+ }
+
+ getStopwords() {
+ this.data.promises.getStopwords = new Promise((resolve, reject) => {
+ Requests.corpora.entity.getStopwords()
+ .then((response) => {
+ response.json()
+ .then((json) => {
+ this.data.originalStopwords = structuredClone(json);
+ this.data.stopwords = structuredClone(json);
+ resolve(this.data.stopwords);
+ })
+ .catch((error) => {
+ reject(error);
+ });
+ });
+ });
+ return this.data.promises.getStopwords;
+ }
+
+ renderGeneralCorpusInfo() {
+ let corpusData = this.data.corpus.o.staticData;
+ document.querySelector('.corpus-num-tokens').innerHTML = corpusData.corpus.counts.token;
+ document.querySelector('.corpus-num-s').innerHTML = corpusData.corpus.counts.s;
+ document.querySelector('.corpus-num-unique-words').innerHTML = Object.entries(corpusData.corpus.freqs.word).length;
+ document.querySelector('.corpus-num-unique-lemmas').innerHTML = Object.entries(corpusData.corpus.freqs.lemma).length;
+ document.querySelector('.corpus-num-unique-pos').innerHTML = Object.entries(corpusData.corpus.freqs.pos).length;
+ document.querySelector('.corpus-num-unique-simple-pos').innerHTML = Object.entries(corpusData.corpus.freqs.simple_pos).length;
+ }
+
+ renderTextInfoList() {
+ let corpusData = this.data.corpus.o.staticData;
+ let corpusTextInfoListElement = document.querySelector('.corpus-text-info-list');
+ let corpusTextInfoList = new CorpusTextInfoList(corpusTextInfoListElement);
+ let texts = corpusData.s_attrs.text.lexicon;
+ let textData = [];
+ for (let i = 0; i < Object.entries(texts).length; i++) {
+ let resource = {
+ title: corpusData.values.s_attrs.text[i].title,
+ publishing_year: corpusData.values.s_attrs.text[i].publishing_year,
+ num_tokens: corpusData.s_attrs.text.lexicon[i].counts.token,
+ num_sentences: corpusData.s_attrs.text.lexicon[i].counts.s,
+ num_unique_words: Object.entries(corpusData.s_attrs.text.lexicon[i].freqs.word).length,
+ num_unique_lemmas: Object.entries(corpusData.s_attrs.text.lexicon[i].freqs.lemma).length,
+ num_unique_pos: Object.entries(corpusData.s_attrs.text.lexicon[i].freqs.pos).length,
+ num_unique_simple_pos: Object.entries(corpusData.s_attrs.text.lexicon[i].freqs.simple_pos).length
+ };
+
+ textData.push(resource);
+ }
+
+ corpusTextInfoList.add(textData);
+
+ let textCountChipElement = document.querySelector('.text-count-chip');
+ textCountChipElement.innerHTML = `Text count: ${corpusData.corpus.counts.text}`;
+ }
+
+ renderTextProportionsGraphic() {
+ let corpusData = this.data.corpus.o.staticData;
+ let textProportionsGraphicElement = document.querySelector('#text-proportions-graphic');
+ let texts = Object.entries(corpusData.s_attrs.text.lexicon);
+ let graphData = [
+ {
+ values: texts.map(text => text[1].counts.token),
+ labels: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
+ type: 'pie'
+ }
+ ];
+ let graphLayout = {
+ showlegend: true,
+ height: 486,
+ margin: {
+ l: 10,
+ r: 10,
+ b: 10,
+ t: 10
+ },
+ legend: {
+ "orientation": "h",
+ font: {
+ size: 10
+ }
+ }
+ };
+ let config = {
+ responsive: true,
+ displaylogo: false
+ };
+
+ Plotly.newPlot(textProportionsGraphicElement, graphData, graphLayout, config);
+ }
+
+ async renderFrequenciesGraphic() {
+ let corpusData = this.data.corpus.o.staticData;
+ let frequenciesTokenCategoryDropdownElement = document.querySelector('[data-target="frequencies-token-category-dropdown"]');
+ let frequenciesTokenCategoryDropdownListElement = document.querySelector("#frequencies-token-category-dropdown");
+ let frequenciesGraphicElement = document.querySelector('#frequencies-graphic');
+ let texts = Object.entries(corpusData.s_attrs.text.lexicon);
+ let graphtype = document.querySelector('.frequencies-graph-mode-button.disabled').dataset.graphType;
+ let graphModeButtons = document.querySelectorAll('.frequencies-graph-mode-button');
+
+ frequenciesTokenCategoryDropdownListElement.addEventListener('click', (event) => {
+ frequenciesTokenCategoryDropdownElement.firstChild.textContent = event.target.innerHTML;
+ this.renderFrequenciesGraphic(corpusData);
+ });
+
+ graphModeButtons.forEach(graphModeButton => {
+ graphModeButton.addEventListener('click', (event) => {
+ graphModeButtons.forEach(btn => {
+ btn.classList.remove('disabled');
+ });
+ event.target.closest('.frequencies-graph-mode-button').classList.add('disabled');
+ this.renderFrequenciesGraphic(corpusData);
+ });
+ });
+
+ let tokenCategory = frequenciesTokenCategoryDropdownElement.firstChild.textContent.toLowerCase();
+
+ let graphData = await this.createFrequenciesGraphData(tokenCategory, texts, corpusData, graphtype);
+ let graphLayout = {
+ barmode: graphtype === 'bar' ? 'stack' : '',
+ margin: {
+ t: 20,
+ l: 50
+ },
+ yaxis: {
+ showticklabels: graphtype === 'markers' ? false : true
+ },
+ };
+ let config = {
+ responsive: true,
+ modeBarButtonsToRemove: ['zoom2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'],
+ displaylogo: false
+ };
+ Plotly.newPlot(frequenciesGraphicElement, graphData, graphLayout, config);
+ }
+
+ async createFrequenciesGraphData(category, texts, corpusData, graphtype) {
+ let stopwords = this.data.stopwords;
+ if (this.data.stopwords === undefined) {
+ stopwords = await this.getStopwords();
+ }
+ let stopwordList = Object.values(stopwords).flat();
+ let graphData = [];
+ let filteredData = Object.entries(corpusData.corpus.freqs[category])
+ .sort((a, b) => b[1] - a[1])
+ .filter(item => !stopwordList.includes(corpusData.values.p_attrs[category][item[0]].toLowerCase()))
+ .slice(0, 5);
+
+ if (graphtype !== 'markers') {
+ for (let item of filteredData) {
+ let data = {
+ x: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
+ y: texts.map(text => text[1].freqs[category][item[0]] || 0),
+ name: corpusData.values.p_attrs[category][item[0]],
+ type: graphtype
+ };
+ graphData.push(data);
+ }
+ } else {
+ for (let item of filteredData) {
+ let size = texts.map(text => text[1].freqs[category][item[0]] || 0);
+ let data = {
+ x: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
+ y: texts.map(text => corpusData.values.p_attrs[category][item[0]]),
+ name: corpusData.values.p_attrs[category][item[0]],
+ text: texts.map(text => `${corpusData.values.p_attrs[category][item[0]]}<br>${text[1].freqs[category][item[0]] || 0}`),
+ mode: 'markers',
+ marker: {
+ size: size,
+ sizeref: 0.4
+ }
+ };
+ graphData.push(data);
+ }
+ }
+ return graphData;
+ }
+
+ renderStopwordSettingsModal(stopwords) {
+ let stopwordInputField = document.querySelector('#stopword-input-field');
+ let userStopwordListContainer = document.querySelector('#user-stopword-list-container');
+ let stopwordLanguageSelection = document.querySelector('#stopword-language-selection');
+ let stopwordLanguageChipList = document.querySelector('#stopword-language-chip-list');
+ let deleteLanguageStopwordListEntriesButton = document.querySelector('#delete-language-stopword-list-entries-button');
+ let resetLanguageStopwordListEntriesButton = document.querySelector('#reset-language-stopword-list-entries-button');
+
+ stopwordLanguageChipList.innerHTML = '';
+ userStopwordListContainer.innerHTML = '';
+ stopwordInputField.value = '';
+
+ // Render stopword language selection. Set english as default language. Filter out user_stopwords.
+ if (stopwordLanguageSelection.children.length === 0) {
+ Object.keys(stopwords).forEach(language => {
+ if (language !== 'user_stopwords') {
+ let optionElement = Utils.HTMLToElement(`<option value="${language}" ${language === 'english' ? 'selected' : ''}>${language}</option>`);
+ stopwordLanguageSelection.appendChild(optionElement);
+ }
+ });
+ }
+
+ // Render user stopwords over input field.
+ if (this.data.stopwords['user_stopwords'].length > 0) {
+ for (let word of this.data.stopwords['user_stopwords']) {
+ let chipElement = Utils.HTMLToElement(`<div class="chip">${word}<i class="close material-icons">close</i></div>`);
+ chipElement.addEventListener('click', (event) => {
+ let removedListItem = event.target.closest('.chip').firstChild.textContent;
+ this.data.stopwords['user_stopwords'] = structuredClone(this.data.stopwords['user_stopwords'].filter(item => item !== removedListItem));
+ });
+ userStopwordListContainer.appendChild(chipElement);
+ }
+ }
+
+ // Render english stopwords as default ...
+ let selectedLanguage = document.querySelector('#stopword-language-selection').value;
+ this.renderStopwordLanguageChipList(selectedLanguage, stopwords[selectedLanguage]);
+
+ // ... or render selected language stopwords.
+ stopwordLanguageSelection.addEventListener('change', (event) => {
+ this.renderStopwordLanguageChipList(event.target.value, stopwords[event.target.value]);
+ });
+
+ // Eventlistener for deleting all stopwords of a language.
+ deleteLanguageStopwordListEntriesButton.addEventListener('click', (event) => {
+ let selectedLanguage = stopwordLanguageSelection.value;
+ this.data.stopwords[selectedLanguage] = [];
+ stopwordLanguageChipList.innerHTML = '';
+ this.buttonRendering();
+ });
+
+ // Eventlistener for resetting all stopwords of a language to the original stopwords.
+ resetLanguageStopwordListEntriesButton.addEventListener('click', () => {
+ let selectedLanguage = stopwordLanguageSelection.value;
+ this.data.stopwords[selectedLanguage] = structuredClone(this.data.originalStopwords[selectedLanguage]);
+ this.renderStopwordLanguageChipList(selectedLanguage, this.data.stopwords[selectedLanguage]);
+ });
+
+ // Initialize Materialize components.
+ M.Chips.init(
+ stopwordInputField,
+ {
+ placeholder: 'Add stopwords',
+ onChipAdd: (event) => {
+ for (let word of event[0].M_Chips.chipsData) {
+ if (!this.data.stopwords['user_stopwords'].includes(word.tag.toLowerCase())) {
+ this.data.stopwords['user_stopwords'].push(word.tag.toLowerCase());
+ }
+ }
+ }
+ }
+ );
+ M.FormSelect.init(stopwordLanguageSelection);
+
+ }
+
+ buttonRendering() {
+ let deleteLanguageStopwordListEntriesButton = document.querySelector('#delete-language-stopword-list-entries-button');
+ let resetLanguageStopwordListEntriesButton = document.querySelector('#reset-language-stopword-list-entries-button');
+ let selectedLanguage = document.querySelector('#stopword-language-selection').value;
+ let stopwordLength = this.data.stopwords[selectedLanguage].length;
+ let originalStopwordListLength = this.data.originalStopwords[selectedLanguage].length;
+
+ deleteLanguageStopwordListEntriesButton.classList.toggle('disabled', stopwordLength === 0);
+ resetLanguageStopwordListEntriesButton.classList.toggle('disabled', stopwordLength === originalStopwordListLength);
+ }
+
+ renderStopwordLanguageChipList(language, stopwords) {
+ let stopwordLanguageChipList = document.querySelector('#stopword-language-chip-list');
+ stopwordLanguageChipList.innerHTML = '';
+ for (let word of stopwords) {
+ let chipElement = Utils.HTMLToElement(`<div class="chip">${word}<i class="close material-icons">close</i></div>`);
+ chipElement.addEventListener('click', (event) => {
+ let removedListItem = event.target.closest('.chip').firstChild.textContent;
+ this.data.stopwords[language] = structuredClone(this.data.stopwords[language].filter(item => item !== removedListItem));
+ this.buttonRendering();
+ });
+ stopwordLanguageChipList.appendChild(chipElement);
+ }
+ this.buttonRendering();
+ }
+
+ renderBoundsGraphic() {
+ let corpusData = this.data.corpus.o.staticData;
+ let boundsGraphicElement = document.querySelector('#bounds-graphic');
+
+ let graphData = [];
+ let texts = Object.entries(corpusData.s_attrs.text.lexicon);
+
+ graphData = [{
+ type: 'bar',
+ x: texts.map(text => text[1].bounds[1] - text[1].bounds[0]),
+ y: texts.map(text => corpusData.values.s_attrs.text[text[0]].title),
+ base: texts.map(text => text[1].bounds[0]),
+ text: texts.map(text => `${corpusData.values.s_attrs.text[text[0]].title} (${corpusData.values.s_attrs.text[text[0]].publishing_year})`),
+ orientation: 'h',
+ hovertemplate: '%{base} - %{x} <br>%{y}',
+ showlegend: false
+ }];
+
+ let graphLayout = {
+ barmode: 'stack',
+ type: 'bar',
+ showgrid: false,
+ xaxis: {
+ rangemode: 'nonnegative',
+ autorange: true
+ },
+ yaxis: {
+ autorange: true,
+ showticklabels: false
+ }
+ };
+
+ let config = {
+ responsive: true,
+ modeBarButtonsToRemove: ['zoom2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'],
+ displaylogo: false
+ };
+
+ Plotly.newPlot(boundsGraphicElement, graphData, graphLayout, config);
+ }
+}
diff --git a/app/templates/_scripts.html.j2 b/app/templates/_scripts.html.j2
index d8dfa6d18ab4c42ae9dcfe065175cfdd9a54f497..772a05967ad65c78f51b44fde5cdb063159ae96d 100644
--- a/app/templates/_scripts.html.j2
+++ b/app/templates/_scripts.html.j2
@@ -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'
%}
diff --git a/app/templates/corpora/_analysis/static_visualization.html.j2 b/app/templates/corpora/_analysis/static_visualization.html.j2
new file mode 100644
index 0000000000000000000000000000000000000000..3e6cfcff9b59437a2412ebcf36dcaac8545c5084
--- /dev/null
+++ b/app/templates/corpora/_analysis/static_visualization.html.j2
@@ -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 %}
diff --git a/app/templates/corpora/analysis.html.j2 b/app/templates/corpora/analysis.html.j2
index 715361a412a52be5474318b975ae814bd571e082..6d7e962226899f6bb77a9b1b59a764528a538d2f 100644
--- a/app/templates/corpora/analysis.html.j2
+++ b/app/templates/corpora/analysis.html.j2
@@ -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 %}