sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-27 08:20:34 +00:00
Code Issues Projects Releases Wiki Activity

dynamic token visualization

Browse Source
This commit is contained in:
Inga Kirschnick
2023-07-21 13:14:29 +02:00
parent e4f435c5ee
commit d08f95e944
4 changed files with 138 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/static/js/ResourceLists/CorpusTokenList.js
View File

@ -6,7 +6,7 @@ class CorpusTokenList extends ResourceList {
}
static defaultOptions = {
page: 100
page: 7
};
constructor(listContainerElement, options = {}) {
@ -16,8 +16,35 @@ class CorpusTokenList extends ResourceList {
);
super(listContainerElement, _options);
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
this.selectedItemIds = new Set();
this.selectedItemTerms = new Set();
this.listjs.on('sortComplete', () => {
let listItems = Array.from(this.listjs.items).filter(item => item.elm);
for (let item of listItems) {
let termElement = item.elm.querySelector('.term');
let mostFrequent = item.elm.dataset.mostfrequent === 'true';
if (mostFrequent) {
this.selectedItemTerms.add(termElement.textContent);
}
}
corpusAnalysisApp.extensions['Static Visualization'].renderFrequenciesGraphic(this.selectedItemTerms);
});
let tokenListResetButtonElement = this.listContainerElement.querySelector('#token-list-reset-button');
tokenListResetButtonElement.addEventListener('click', () => {
this.selectedItemTerms.clear();
let listItems = Array.from(this.listjs.items).filter(item => item.elm);
for (let item of listItems) {
let termElement = item.elm.querySelector('.term');
let mostFrequent = item.elm.dataset.mostfrequent === 'true';
if (mostFrequent) {
item.elm.querySelector('.select-checkbox').checked = true;
this.selectedItemTerms.add(termElement.textContent);
} else {
item.elm.querySelector('.select-checkbox').checked = false;
}
}
corpusAnalysisApp.extensions['Static Visualization'].renderFrequenciesGraphic(this.selectedItemTerms);
});
}
get item() {
@ -42,7 +69,7 @@ class CorpusTokenList extends ResourceList {
return [
'term',
'count',
'mostFrequent',
{data: ['mostFrequent']},
'frequency'
];
}
@ -58,24 +85,21 @@ class CorpusTokenList extends ResourceList {
<input id="${listSearchElementId}" class="search" type="text"></input>
<label for="${listSearchElementId}">Search token</label>
</div>
<div class="scrollable-list-container-wrapper" style="height:276px; overflow:scroll;">
<div class="scrollable-list-container">
<table>
<thead>
<tr>
<th></th>
<th>Term</th>
<th>Count</th>
<th>Frequency</th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
</div>
</div>
<table>
<thead>
<tr>
<th style="width:15%;">
<span class="material-icons" style="cursor:pointer" id="token-list-reset-button">refresh</span>
</th>
<th>Term</th>
<th>Count</th>
<th>Frequency</th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
`.trim();
this.listContainerElement.style.padding = '30px';
}
mapResourceToValue(corpusTokenData) {
@ -92,19 +116,20 @@ class CorpusTokenList extends ResourceList {
}
onClick(event) {
let listItemElement = event.target.closest('.list-item[data-id]');
if (event.target.closest('.disable-on-click') !== null) {return;}
let listItemElement = event.target.closest('.list-item');
if (listItemElement === null) {return;}
let itemId = listItemElement.dataset.id;
let item = listItemElement.querySelector('.term').textContent;
let listActionElement = event.target.closest('.list-action-trigger[data-list-action]');
let listAction = listActionElement === null ? '' : listActionElement.dataset.listAction;
switch (listAction) {
case 'select': {
if (event.target.checked) {
this.selectedItemIds.add(itemId);
this.selectedItemTerms.add(item);
} else {
this.selectedItemIds.delete(itemId);
this.selectedItemTerms.delete(item);
}
this.renderingItemSelection();
corpusAnalysisApp.extensions['Static Visualization'].renderFrequenciesGraphic(this.selectedItemTerms);
break;
}
default: {
@ -113,9 +138,4 @@ class CorpusTokenList extends ResourceList {
}
}
renderingItemSelection() {
}
}