Token list first implementation+ query builder fix

This commit is contained in:
Inga Kirschnick
2023-07-18 16:01:31 +02:00
parent 6c744fc3ba
commit 691d4757ff
8 changed files with 322 additions and 474 deletions

View File

@ -7,7 +7,7 @@ class CorpusTextInfoList extends ResourceList {
}
static defaultOptions = {
page: 4
page: 5
};
constructor(listContainerElement, options = {}) {
@ -67,12 +67,12 @@ class CorpusTextInfoList extends ResourceList {
<thead>
<tr>
<th>Text<span class="sort right material-icons" data-sort="title" style="cursor:pointer; color:#aa9cc9">arrow_drop_down</span></th>
<th>Number of tokens<span class="sort right material-icons" data-sort="num_tokens" style="cursor:pointer">arrow_drop_down</span></th>
<th>Number of sentences<span class="sort right material-icons" data-sort="num_sentences" style="cursor:pointer">arrow_drop_down</span></th>
<th>Number of unique words<span class="sort right material-icons" data-sort="num_unique_words" style="cursor:pointer">arrow_drop_down</span></th>
<th>Number of unique lemmas<span class="sort right material-icons" data-sort="num_unique_lemmas" style="cursor:pointer">arrow_drop_down</span></th>
<th>Number of unique pos<span class="sort right material-icons" data-sort="num_unique_pos" style="cursor:pointer">arrow_drop_down</span></th>
<th>Number of unique simple pos<span class="sort right material-icons" data-sort="num_unique_simple_pos" style="cursor:pointer">arrow_drop_down</span></th>
<th>Tokens<span class="sort right material-icons" data-sort="num_tokens" style="cursor:pointer">arrow_drop_down</span></th>
<th>Sentences<span class="sort right material-icons" data-sort="num_sentences" style="cursor:pointer">arrow_drop_down</span></th>
<th>Unique words<span class="sort right material-icons" data-sort="num_unique_words" style="cursor:pointer">arrow_drop_down</span></th>
<th>Unique lemmas<span class="sort right material-icons" data-sort="num_unique_lemmas" style="cursor:pointer">arrow_drop_down</span></th>
<th>Unique pos<span class="sort right material-icons" data-sort="num_unique_pos" style="cursor:pointer">arrow_drop_down</span></th>
<th>Unique simple pos<span class="sort right material-icons" data-sort="num_unique_simple_pos" style="cursor:pointer">arrow_drop_down</span></th>
</tr>
</thead>
<tbody class="list"></tbody>

View File

@ -0,0 +1,121 @@
class CorpusTokenList extends ResourceList {
static autoInit() {
for (let corpusTokenListElement of document.querySelectorAll('.corpus-token-list:not(.no-autoinit)')) {
new CorpusTokenList(corpusTokenListElement);
}
}
static defaultOptions = {
page: 100
};
constructor(listContainerElement, options = {}) {
let _options = Utils.mergeObjectsDeep(
CorpusTokenList.defaultOptions,
options
);
super(listContainerElement, _options);
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
this.selectedItemIds = new Set();
}
get item() {
return (values) => {
return `
<tr class="list-item clickable hoverable">
<td>
<label class="list-action-trigger" data-list-action="select">
<input class="select-checkbox" type="checkbox" ${values.mostFrequent ? 'checked="checked"' : ''}>
<span class="disable-on-click"></span>
</label>
</td>
<td><span class="term"></span></td>
<td><span class="count"></span></td>
<td><span class="frequency"></span></td>
</tr>
`.trim();
}
}
get valueNames() {
return [
'term',
'count',
'mostFrequent',
'frequency'
];
}
initListContainerElement() {
if (!this.listContainerElement.hasAttribute('id')) {
this.listContainerElement.id = Utils.generateElementId('corpus-token-list-');
}
let listSearchElementId = Utils.generateElementId(`${this.listContainerElement.id}-search-`);
this.listContainerElement.innerHTML = `
<div class="input-field">
<i class="material-icons prefix">search</i>
<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>
<ul class="pagination"></ul>
`.trim();
this.listContainerElement.style.padding = '30px';
}
mapResourceToValue(corpusTokenData) {
return {
term: corpusTokenData.term,
count: corpusTokenData.count,
mostFrequent: corpusTokenData.mostFrequent,
frequency: '-'
};
}
sort() {
this.listjs.sort('count', {order: 'desc'});
}
onClick(event) {
let listItemElement = event.target.closest('.list-item[data-id]');
if (listItemElement === null) {return;}
let itemId = listItemElement.dataset.id;
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);
} else {
this.selectedItemIds.delete(itemId);
}
this.renderingItemSelection();
break;
}
default: {
break;
}
}
}
renderingItemSelection() {
}
}

View File

@ -16,6 +16,7 @@ class ResourceList {
AdminUserList.autoInit();
CorpusFollowerList.autoInit();
CorpusTextInfoList.autoInit();
CorpusTokenList.autoInit();
}
static defaultOptions = {