mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 09:15:41 +00:00
330 lines
13 KiB
JavaScript
330 lines
13 KiB
JavaScript
class CorpusList extends List {
|
|
constructor(idOrElement, subscriberList, options={}) {
|
|
super(idOrElement, {...CorpusList.DEFAULT_OPTIONS, ...options});
|
|
subscriberList.push(this);
|
|
}
|
|
|
|
|
|
_init(corpora) {
|
|
this.addCorpora(Object.values(corpora));
|
|
}
|
|
|
|
|
|
_update(patch) {
|
|
let item, corpusStatusElement, operation, pathArray;
|
|
|
|
for (operation of patch) {
|
|
/* "/corpusId/valueName" -> ["corpusId", "valueName"] */
|
|
pathArray = operation.path.split("/").slice(1);
|
|
switch(operation.op) {
|
|
case "add":
|
|
if (pathArray.includes("results")) {break;}
|
|
this.addCorpora([operation.value]);
|
|
break;
|
|
case "remove":
|
|
this.remove("id", pathArray[0]);
|
|
break;
|
|
case "replace":
|
|
item = this.get("id", pathArray[0])[0];
|
|
switch(pathArray[1]) {
|
|
case "status":
|
|
corpusStatusElement = item.elm.querySelector(".status");
|
|
corpusStatusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
|
|
corpusStatusElement.classList.add(CorpusList.STATUS_COLORS[operation.value] || CorpusList.STATUS_COLORS['default']);
|
|
corpusStatusElement.innerHTML = operation.value;
|
|
item.values({status: operation.value});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
addCorpora(corpora) {
|
|
this.add(corpora, items => {
|
|
for (let item of items) {item.elm = this.createElement(item);}
|
|
});
|
|
this.update();
|
|
}
|
|
|
|
|
|
createElement(item) {
|
|
let columnElement, descriptionElement, rowElement, serviceElement,
|
|
serviceIconElement, titleElement, statusElement, values, viewElement,
|
|
viewIconElement;
|
|
|
|
// Gather values from item
|
|
values = item.values();
|
|
|
|
// Create a row elment, where all related information get stored
|
|
rowElement = document.createElement("tr");
|
|
rowElement.dataset.id = values.id;
|
|
|
|
// Create a column containing a service type identifying icon
|
|
columnElement = document.createElement("td");
|
|
serviceElement = document.createElement("a");
|
|
serviceElement.classList.add("btn-floating", "disabled");
|
|
serviceIconElement = document.createElement("i");
|
|
serviceIconElement.classList.add("material-icons");
|
|
serviceIconElement.innerText = "book";
|
|
serviceElement.appendChild(serviceIconElement);
|
|
columnElement.appendChild(serviceElement);
|
|
rowElement.appendChild(columnElement);
|
|
|
|
// Create a column containing the title and description
|
|
columnElement = document.createElement("td");
|
|
titleElement = document.createElement("b");
|
|
titleElement.classList.add("title");
|
|
titleElement.innerText = values.title;
|
|
descriptionElement = document.createElement("i");
|
|
descriptionElement.classList.add("description");
|
|
descriptionElement.innerText = values.description;
|
|
columnElement.appendChild(titleElement);
|
|
columnElement.appendChild(document.createElement("br"));
|
|
columnElement.appendChild(descriptionElement);
|
|
rowElement.appendChild(columnElement);
|
|
|
|
// Create a column containing the current status
|
|
columnElement = document.createElement("td");
|
|
statusElement = document.createElement("span");
|
|
statusElement.classList.add("badge", "new", "status", CorpusList.STATUS_COLORS[values.status] || CorpusList.STATUS_COLORS['default']);
|
|
statusElement.dataset.badgeCaption = "";
|
|
statusElement.innerText = values.status;
|
|
columnElement.appendChild(statusElement);
|
|
rowElement.appendChild(columnElement);
|
|
|
|
// Create a column containing a button leading to a details page
|
|
columnElement = document.createElement("td");
|
|
columnElement.classList.add("right-align");
|
|
viewElement = document.createElement("a");
|
|
viewElement.classList.add("waves-effect", "waves-light", "btn-small");
|
|
viewElement.href = `/corpora/${values.id}`;
|
|
viewElement.innerText = "View ";
|
|
viewIconElement = document.createElement("i");
|
|
viewIconElement.classList.add("material-icons", "right");
|
|
viewIconElement.innerText = "send";
|
|
viewElement.appendChild(viewIconElement);
|
|
columnElement.appendChild(viewElement);
|
|
rowElement.appendChild(columnElement);
|
|
|
|
return rowElement;
|
|
}
|
|
}
|
|
CorpusList.DEFAULT_OPTIONS = {item: "<br>",
|
|
page: 4,
|
|
pagination: {innerWindow: 8, outerWindow: 1},
|
|
valueNames: ["description", "title", {data: ["id"]}]};
|
|
CorpusList.STATUS_COLORS = {"unprepared": "grey",
|
|
"preparable": "orange",
|
|
"preparing": "yellow",
|
|
"prepared": "green",
|
|
"start analysis": "yellow",
|
|
"analysing": "green",
|
|
"stop analysis": "red",
|
|
"default": "red"};
|
|
|
|
|
|
class JobList extends List {
|
|
constructor(idOrElement, subscriberList, options={}) {
|
|
super(idOrElement, {...JobList.DEFAULT_OPTIONS, ...options});
|
|
subscriberList.push(this);
|
|
}
|
|
|
|
|
|
_init(jobs) {
|
|
this.addJobs(Object.values(jobs));
|
|
}
|
|
|
|
|
|
_update(patch) {
|
|
let item, jobStatusElement, operation, pathArray;
|
|
|
|
for (operation of patch) {
|
|
/* "/jobId/valueName" -> ["jobId", "valueName"] */
|
|
pathArray = operation.path.split("/").slice(1);
|
|
switch(operation.op) {
|
|
case "add":
|
|
if (pathArray.includes("results")) {break;}
|
|
this.addJobs([operation.value]);
|
|
break;
|
|
case "remove":
|
|
this.remove("id", pathArray[0]);
|
|
break;
|
|
case "replace":
|
|
item = this.get("id", pathArray[0])[0];
|
|
switch(pathArray[1]) {
|
|
case "status":
|
|
jobStatusElement = item.elm.querySelector(".status");
|
|
jobStatusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
|
|
jobStatusElement.classList.add(JobList.STATUS_COLORS[operation.value] || JobList.STATUS_COLORS['default']);
|
|
jobStatusElement.innerHTML = operation.value;
|
|
item.values({status: operation.value});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
addJobs(jobs) {
|
|
this.add(jobs, items => {
|
|
for (let item of items) {item.elm = this.createElement(item);}
|
|
});
|
|
this.update();
|
|
}
|
|
|
|
|
|
createElement(item) {
|
|
let columnElement, descriptionElement, rowElement, serviceElement,
|
|
serviceIconElement, titleElement, statusElement, values, viewElement, viewIconElement;
|
|
|
|
// Gather values from item
|
|
values = item.values();
|
|
|
|
// Create a row elment, where all related information get stored
|
|
rowElement = document.createElement("tr");
|
|
rowElement.dataset.id = values.id;
|
|
|
|
// Create a column containing a service type identifying icon
|
|
columnElement = document.createElement("td");
|
|
serviceElement = document.createElement("a");
|
|
serviceElement.classList.add("btn-floating", "disabled");
|
|
serviceIconElement = document.createElement("i");
|
|
serviceIconElement.classList.add("material-icons");
|
|
serviceIconElement.innerText = JobList.SERVICE_ICONS[values.service] || JobList.SERVICE_ICONS['default'];
|
|
serviceElement.appendChild(serviceIconElement);
|
|
columnElement.appendChild(serviceElement);
|
|
rowElement.appendChild(columnElement);
|
|
|
|
// Create a column containing the title and description
|
|
columnElement = document.createElement("td");
|
|
titleElement = document.createElement("b");
|
|
titleElement.classList.add("title");
|
|
titleElement.innerText = values.title;
|
|
descriptionElement = document.createElement("i");
|
|
descriptionElement.classList.add("description");
|
|
descriptionElement.innerText = values.description;
|
|
columnElement.appendChild(titleElement);
|
|
columnElement.appendChild(document.createElement("br"));
|
|
columnElement.appendChild(descriptionElement);
|
|
rowElement.appendChild(columnElement);
|
|
|
|
// Create a column containing the current status
|
|
columnElement = document.createElement("td");
|
|
statusElement = document.createElement("span");
|
|
statusElement.classList.add("badge", "new", "status", JobList.STATUS_COLORS[values.status] || JobList.STATUS_COLORS['default']);
|
|
statusElement.dataset.badgeCaption = "";
|
|
statusElement.innerText = values.status;
|
|
columnElement.appendChild(statusElement);
|
|
rowElement.appendChild(columnElement);
|
|
|
|
// Create a column containing a button leading to a details page
|
|
columnElement = document.createElement("td");
|
|
columnElement.classList.add("right-align");
|
|
viewElement = document.createElement("a");
|
|
viewElement.classList.add("waves-effect", "waves-light", "btn-small");
|
|
viewElement.href = `/jobs/${values.id}`;
|
|
viewElement.innerText = "View ";
|
|
viewIconElement = document.createElement("i");
|
|
viewIconElement.classList.add("material-icons", "right");
|
|
viewIconElement.innerText = "send";
|
|
viewElement.appendChild(viewIconElement);
|
|
columnElement.appendChild(viewElement);
|
|
rowElement.appendChild(columnElement);
|
|
|
|
return rowElement;
|
|
}
|
|
}
|
|
JobList.DEFAULT_OPTIONS = {item: "<br>",
|
|
page: 4,
|
|
pagination: {innerWindow: 8, outerWindow: 1},
|
|
valueNames: ["description", "service", "status", "title", {data: ["id"]}]};
|
|
JobList.SERVICE_ICONS = {"merge_images": "burst_mode",
|
|
"nlp": "format_textdirection_l_to_r",
|
|
"ocr": "find_in_page",
|
|
"default": "help"};
|
|
JobList.STATUS_COLORS = {"submitted": "blue",
|
|
"preparing": "light-blue",
|
|
"pending": "orange",
|
|
"running": "amber",
|
|
"complete": "green",
|
|
"stopping": "orange",
|
|
"removing": "deep-orange",
|
|
"default": "red"};
|
|
|
|
|
|
class ResultList extends List {
|
|
|
|
createResultRowElement(item, chunk) {
|
|
let values, cpos, matchRowElement, lcCellElement, lcTokenElement, token;
|
|
// gather values from item
|
|
values = item.values();
|
|
console.log("CHONK");
|
|
console.log(chunk);
|
|
// get infos for full match row
|
|
matchRowElement = document.createElement("tr");
|
|
for (cpos of values["lc"]) {
|
|
console.log(cpos);
|
|
lcCellElement = document.createElement("td");
|
|
lcTokenElement = document.createElement("span");
|
|
lcTokenElement.classList.add("token");
|
|
lcTokenElement.dataset.cpos = cpos;
|
|
token = chunk["cpos_lookup"][cpos];
|
|
lcTokenElement.innerText = token["word"];
|
|
lcCellElement.appendChild(lcTokenElement);
|
|
// let hit_tokens = "";
|
|
}
|
|
matchRowElement.appendChild(lcCellElement);
|
|
// // get infos of match
|
|
// let textTitles = new Set();
|
|
// for (cpos of match["hit"]) {
|
|
// tokenElement = document.createElement("span");
|
|
// tokenElement.classList.add("token");
|
|
// tokenElement.dataset.cpos = cpos;
|
|
// token = chunk["cpos_lookup"][cpos];
|
|
// tokenElement.innerText = token["word"];
|
|
// hit_tokens += " " + tokenElement.outerHTML;
|
|
// // get text titles of every hit cpos token
|
|
// textTitles.add(chunk["text_lookup"][token["text"]]["title"]);
|
|
// }
|
|
// // add button to trigger more context to every match td
|
|
// var inspectBtn = document.createElement("a");
|
|
// inspectBtn.setAttribute("class", "btn-floating btn-flat waves-effect waves-light grey right inspect");
|
|
// inspectBtn.onclick = function() {inspect()};
|
|
// inspectBtn.innerHTML = '<i class="material-icons">search</i>';
|
|
// hit_tokens += "<p>" + inspectBtn.outerHTML + "</p>";
|
|
// // get infos for right context of match
|
|
// let rc_tokens = "";
|
|
// for (cpos of match["rc"]) {
|
|
// tokenElement = document.createElement("span");
|
|
// tokenElement.classList.add("token");
|
|
// tokenElement.dataset.cpos = cpos;
|
|
// token = chunk["cpos_lookup"][cpos];
|
|
// tokenElement.innerText = token["word"];
|
|
// rc_tokens += " " + tokenElement.outerHTML;
|
|
// }
|
|
// // put all infos into an javascribt object
|
|
// textTitleElement = document.createElement("span");
|
|
// textTitleElement.classList.add("text-titles");
|
|
// textTitles = [...textTitles].join(",");
|
|
// textTitleElement.innerText = textTitles;
|
|
//
|
|
// matchRowElement.appendChild(textTitleElement);
|
|
// // matchRowElement.appendChild(lc_tokens);
|
|
// // matchRowElement.appendChild(hit_tokens);
|
|
// // matchRowElement.appendChild(rc_tokens);
|
|
// // matchRowElement.appendChild(index);
|
|
// }
|
|
console.log(matchRowElement.outerHTML);
|
|
return matchRowElement
|
|
}
|
|
}
|