mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-12-26 03:14:19 +00:00
Compare commits
6 Commits
df2bffe0fd
...
713a7645db
Author | SHA1 | Date | |
---|---|---|---|
|
713a7645db | ||
|
0c64c07925 | ||
|
a6ddf4c980 | ||
|
cab5f7ea05 | ||
|
07f09cdbd9 | ||
|
c97b2a886e |
@ -162,7 +162,7 @@ class CQiOverSocketIONamespace(Namespace):
|
||||
|
||||
if fn_name in CQI_API_FUNCTION_NAMES:
|
||||
fn = getattr(cqi_client.api, fn_name)
|
||||
elif fn_name in cqi_extension_functions.CQI_EXTENSION_FUNCTION_NAMES:
|
||||
elif fn_name in CQI_EXTENSION_FUNCTION_NAMES:
|
||||
fn = getattr(cqi_extension_functions, fn_name)
|
||||
else:
|
||||
return {'code': 400, 'msg': 'Bad Request'}
|
||||
|
@ -2,6 +2,10 @@
|
||||
--corpus-status-content: "unprepared";
|
||||
}
|
||||
|
||||
[data-corpus-status="SUBMITTED"] {
|
||||
--corpus-status-content: "submitted";
|
||||
}
|
||||
|
||||
[data-corpus-status="QUEUED"] {
|
||||
--corpus-status-content: "queued";
|
||||
}
|
||||
|
@ -2,33 +2,19 @@ nopaque.App = class App {
|
||||
constructor() {
|
||||
this.socket = io({transports: ['websocket'], upgrade: false});
|
||||
|
||||
this.ui = new nopaque.UIExtension(this);
|
||||
this.liveUserRegistry = new nopaque.LiveUserRegistryExtension(this);
|
||||
this.users = new nopaque.UsersExtension(this);
|
||||
// Endpoints
|
||||
this.users = new nopaque.app.endpoints.Users(this);
|
||||
|
||||
// Extensions
|
||||
this.toaster = new nopaque.app.extensions.Toaster(this);
|
||||
this.ui = new nopaque.app.extensions.UI(this);
|
||||
this.userHub = new nopaque.app.extensions.UserHub(this);
|
||||
}
|
||||
|
||||
// onPatch(patch) {
|
||||
// // Filter Patch to only include operations on users that are initialized
|
||||
// let regExp = new RegExp(`^/users/(${Object.keys(this.data.users).join('|')})`);
|
||||
// let filteredPatch = patch.filter(operation => regExp.test(operation.path));
|
||||
|
||||
// // Handle job status updates
|
||||
// let subRegExp = new RegExp(`^/users/([A-Za-z0-9]*)/jobs/([A-Za-z0-9]*)/status$`);
|
||||
// let subFilteredPatch = filteredPatch
|
||||
// .filter((operation) => {return operation.op === 'replace';})
|
||||
// .filter((operation) => {return subRegExp.test(operation.path);});
|
||||
// for (let operation of subFilteredPatch) {
|
||||
// let [match, userId, jobId] = operation.path.match(subRegExp);
|
||||
// this.flash(`[<a href="/jobs/${jobId}">${this.data.users[userId].jobs[jobId].title}</a>] New status: <span class="job-status-text" data-job-status="${operation.value}"></span>`, 'job');
|
||||
// }
|
||||
|
||||
// // Apply Patch
|
||||
// jsonpatch.applyPatch(this.data, filteredPatch);
|
||||
// }
|
||||
|
||||
init() {
|
||||
// Initialize extensions
|
||||
this.toaster.init();
|
||||
this.ui.init();
|
||||
this.liveUserRegistry.init();
|
||||
this.users.init();
|
||||
this.userHub.init();
|
||||
}
|
||||
};
|
||||
|
1
app/static/js/app/endpoints/index.js
Normal file
1
app/static/js/app/endpoints/index.js
Normal file
@ -0,0 +1 @@
|
||||
nopaque.app.endpoints = {};
|
@ -1,12 +1,10 @@
|
||||
nopaque.UsersExtension = class UsersExtension {
|
||||
nopaque.app.endpoints.Users = class Users {
|
||||
constructor(app) {
|
||||
this.app = app;
|
||||
|
||||
this.socket = io('/users', {transports: ['websocket'], upgrade: false});
|
||||
}
|
||||
|
||||
init() {}
|
||||
|
||||
async get(userId) {
|
||||
const response = await this.socket.emitWithAck('get', userId);
|
||||
|
1
app/static/js/app/extensions/index.js
Normal file
1
app/static/js/app/extensions/index.js
Normal file
@ -0,0 +1 @@
|
||||
nopaque.app.extensions = {};
|
56
app/static/js/app/extensions/toaster.js
Normal file
56
app/static/js/app/extensions/toaster.js
Normal file
@ -0,0 +1,56 @@
|
||||
nopaque.app.extensions.Toaster = class Toaster {
|
||||
constructor(app) {
|
||||
this.app = app;
|
||||
}
|
||||
|
||||
init() {
|
||||
this.app.userHub.addEventListener('patch', (event) => {this.#onPatch(event.detail);});
|
||||
}
|
||||
|
||||
async #onPatch(patch) {
|
||||
// Handle corpus updates
|
||||
const corpusRegExp = new RegExp(`^/users/([A-Za-z0-9]+)/corpora/([A-Za-z0-9]+)`);
|
||||
const corpusPatch = patch.filter((operation) => {return corpusRegExp.test(operation.path);});
|
||||
|
||||
this.#onCorpusPatch(corpusPatch);
|
||||
|
||||
// Handle job updates
|
||||
const jobRegExp = new RegExp(`^/users/([A-Za-z0-9]+)/jobs/([A-Za-z0-9]+)`);
|
||||
const jobPatch = patch.filter((operation) => {return jobRegExp.test(operation.path);});
|
||||
|
||||
this.#onJobPatch(jobPatch);
|
||||
}
|
||||
|
||||
async #onCorpusPatch(patch) {
|
||||
return;
|
||||
// Handle corpus status updates
|
||||
const corpusStatusRegExp = new RegExp(`^/users/([A-Za-z0-9]+)/corpora/([A-Za-z0-9]+)/status$`);
|
||||
const corpusStatusPatch = patch
|
||||
.filter((operation) => {return corpusStatusRegExp.test(operation.path);})
|
||||
.filter((operation) => {return operation.op === 'replace';});
|
||||
|
||||
for (let operation of corpusStatusPatch) {
|
||||
const [match, userId, corpusId] = operation.path.match(corpusStatusRegExp);
|
||||
const user = await this.app.userHub.get(userId);
|
||||
const corpus = user.corpora[corpusId];
|
||||
|
||||
this.app.ui.flash(`[<a href="/corpora/${corpusId}">${corpus.title}</a>] New status: <span class="corpus-status-text" data-corpus-status="${operation.value}"></span>`, 'corpus');
|
||||
}
|
||||
}
|
||||
|
||||
async #onJobPatch(patch) {
|
||||
// Handle job status updates
|
||||
const jobStatusRegExp = new RegExp(`^/users/([A-Za-z0-9]+)/jobs/([A-Za-z0-9]+)/status$`);
|
||||
const jobStatusPatch = patch
|
||||
.filter((operation) => {return jobStatusRegExp.test(operation.path);})
|
||||
.filter((operation) => {return operation.op === 'replace';});
|
||||
|
||||
for (let operation of jobStatusPatch) {
|
||||
const [match, userId, jobId] = operation.path.match(jobStatusRegExp);
|
||||
const user = await this.app.userHub.get(userId);
|
||||
const job = user.jobs[jobId];
|
||||
|
||||
this.app.ui.flash(`[<a href="/jobs/${jobId}">${job.title}</a>] New status: <span class="job-status-text" data-job-status="${operation.value}"></span>`, 'job');
|
||||
}
|
||||
}
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
nopaque.UIExtension = class UIExtension {
|
||||
nopaque.app.extensions.UI = class UI {
|
||||
constructor(app) {
|
||||
this.app = app;
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
nopaque.LiveUserRegistryExtension = class LiveUserRegistryExtension extends EventTarget {
|
||||
nopaque.app.extensions.UserHub = class UserHub extends EventTarget {
|
||||
#data;
|
||||
|
||||
constructor(app) {
|
||||
@ -36,35 +36,33 @@ nopaque.LiveUserRegistryExtension = class LiveUserRegistryExtension extends Even
|
||||
|
||||
#onPatch(patch) {
|
||||
// Filter patch to only include operations on users that are initialized
|
||||
let filterRegExp = new RegExp(`^/users/(${Object.keys(this.#data.users).join('|')})`);
|
||||
let filteredPatch = patch.filter(operation => filterRegExp.test(operation.path));
|
||||
const filterRegExp = new RegExp(`^/users/(${Object.keys(this.#data.users).join('|')})`);
|
||||
const filteredPatch = patch.filter(operation => filterRegExp.test(operation.path));
|
||||
|
||||
// Apply patch
|
||||
jsonpatch.applyPatch(this.#data, filteredPatch);
|
||||
|
||||
// Notify event listeners
|
||||
let event = new CustomEvent('patch', {detail: filteredPatch});
|
||||
this.dispatchEvent(event);
|
||||
const patchEventa = new CustomEvent('patch', {detail: filteredPatch});
|
||||
this.dispatchEvent(patchEventa);
|
||||
|
||||
/*
|
||||
// Notify event listeners. Event type: "patch *"
|
||||
let event = new CustomEvent('patch *', {detail: filteredPatch});
|
||||
this.dispatchEvent(event);
|
||||
const patchEvent = new CustomEvent('patch *', {detail: filteredPatch});
|
||||
this.dispatchEvent(patchEvent);
|
||||
|
||||
// Group patches by user id: {<user-id>: [op, ...], ...}
|
||||
let patches = {};
|
||||
let matchRegExp = new RegExp(`^/users/([A-Za-z0-9]+)`);
|
||||
const patches = {};
|
||||
const matchRegExp = new RegExp(`^/users/([A-Za-z0-9]+)`);
|
||||
for (let operation of filteredPatch) {
|
||||
let [match, userId] = operation.path.match(matchRegExp);
|
||||
const [match, userId] = operation.path.match(matchRegExp);
|
||||
if (!(userId in patches)) {patches[userId] = [];}
|
||||
patches[userId].push(operation);
|
||||
}
|
||||
|
||||
// Notify event listeners. Event type: "patch <user-id>"
|
||||
for (let [userId, patch] of Object.entries(patches)) {
|
||||
let event = new CustomEvent(`patch ${userId}`, {detail: patch});
|
||||
this.dispatchEvent(event);
|
||||
const userPatchEvent = new CustomEvent(`patch ${userId}`, {detail: patch});
|
||||
this.dispatchEvent(userPatchEvent);
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
1
app/static/js/app/index.js
Normal file
1
app/static/js/app/index.js
Normal file
@ -0,0 +1 @@
|
||||
nopaque.app = {};
|
@ -52,22 +52,23 @@ nopaque.resource_displays.CorpusDisplay = class CorpusDisplay extends nopaque.re
|
||||
}
|
||||
}
|
||||
|
||||
setTitle(title) {
|
||||
this.setElements(this.displayElement.querySelectorAll('.corpus-title'), title);
|
||||
async setTitle(title) {
|
||||
const corpusTitleElements = this.displayElement.querySelectorAll('.corpus-title');
|
||||
this.setElements(corpusTitleElements, title);
|
||||
}
|
||||
|
||||
setNumTokens(numTokens) {
|
||||
this.setElements(
|
||||
this.displayElement.querySelectorAll('.corpus-token-ratio'),
|
||||
`${numTokens}/${app.data.users[this.userId].corpora[this.corpusId].max_num_tokens}`
|
||||
);
|
||||
const corpusTokenRatioElements = this.displayElement.querySelectorAll('.corpus-token-ratio');
|
||||
const maxNumTokens = 2147483647;
|
||||
|
||||
this.setElements(corpusTokenRatioElements, `${numTokens}/${maxNumTokens}`);
|
||||
}
|
||||
|
||||
setDescription(description) {
|
||||
this.setElements(this.displayElement.querySelectorAll('.corpus-description'), description);
|
||||
}
|
||||
|
||||
setStatus(status) {
|
||||
async setStatus(status) {
|
||||
let elements = this.displayElement.querySelectorAll('.action-button[data-action="analyze"]');
|
||||
for (let element of elements) {
|
||||
if (['BUILT', 'STARTING_ANALYSIS_SESSION', 'RUNNING_ANALYSIS_SESSION', 'CANCELING_ANALYSIS_SESSION'].includes(status)) {
|
||||
@ -77,8 +78,10 @@ nopaque.resource_displays.CorpusDisplay = class CorpusDisplay extends nopaque.re
|
||||
}
|
||||
}
|
||||
elements = this.displayElement.querySelectorAll('.action-button[data-action="build-request"]');
|
||||
const user = await app.userHub.get(this.userId);
|
||||
const corpusFiles = user.corpora[this.corpusId].files;
|
||||
for (let element of elements) {
|
||||
if (['UNPREPARED', 'FAILED'].includes(status) && Object.values(app.data.users[this.userId].corpora[this.corpusId].files).length > 0) {
|
||||
if (['UNPREPARED', 'FAILED'].includes(status) && Object.values(corpusFiles.length > 0)) {
|
||||
element.classList.remove('disabled');
|
||||
} else {
|
||||
element.classList.add('disabled');
|
||||
|
@ -6,10 +6,10 @@ nopaque.resource_displays.ResourceDisplay = class ResourceDisplay {
|
||||
this.userId = this.displayElement.dataset.userId;
|
||||
this.isInitialized = false;
|
||||
if (this.userId === undefined) {return;}
|
||||
app.liveUserRegistry.addEventListener('patch', (event) => {
|
||||
app.userHub.addEventListener('patch', (event) => {
|
||||
if (this.isInitialized) {this.onPatch(event.detail);}
|
||||
});
|
||||
app.liveUserRegistry.get(this.userId).then((user) => {
|
||||
app.userHub.get(this.userId).then((user) => {
|
||||
this.init(user);
|
||||
this.isInitialized = true;
|
||||
});
|
||||
|
@ -14,10 +14,10 @@ nopaque.resource_lists.CorpusFileList = class CorpusFileList extends nopaque.res
|
||||
this.hasPermissionView = listContainerElement.dataset?.hasPermissionView == 'true' || false;
|
||||
this.hasPermissionManageFiles = listContainerElement.dataset?.hasPermissionManageFiles == 'true' || false;
|
||||
if (this.userId === undefined || this.corpusId === undefined) {return;}
|
||||
app.liveUserRegistry.addEventListener('patch', (event) => {
|
||||
app.userHub.addEventListener('patch', (event) => {
|
||||
if (this.isInitialized) {this.onPatch(event.detail);}
|
||||
});
|
||||
app.liveUserRegistry.get(this.userId).then((user) => {
|
||||
app.userHub.get(this.userId).then((user) => {
|
||||
// TODO: Make this better understandable
|
||||
this.add(Object.values(user.corpora[this.corpusId].files || user.followed_corpora[this.corpusId].files));
|
||||
this.isInitialized = true;
|
||||
|
@ -12,10 +12,10 @@ nopaque.resource_lists.CorpusFollowerList = class CorpusFollowerList extends nop
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
this.corpusId = listContainerElement.dataset.corpusId;
|
||||
if (this.userId === undefined || this.corpusId === undefined) {return;}
|
||||
app.liveUserRegistry.addEventListener('patch', (event) => {
|
||||
app.userHub.addEventListener('patch', (event) => {
|
||||
if (this.isInitialized) {this.onPatch(event.detail);}
|
||||
});
|
||||
app.liveUserRegistry.get(this.userId).then((user) => {
|
||||
app.userHub.get(this.userId).then((user) => {
|
||||
// TODO: Check if the following is better
|
||||
// let corpusFollowerAssociations = Object.values(user.corpora[this.corpusId].corpus_follower_associations);
|
||||
// let filteredList = corpusFollowerAssociations.filter(association => association.follower.id != currentUserId);
|
||||
|
@ -11,10 +11,10 @@ nopaque.resource_lists.CorpusList = class CorpusList extends nopaque.resource_li
|
||||
this.selectedItemIds = new Set();
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
if (this.userId === undefined) {return;}
|
||||
app.liveUserRegistry.addEventListener('patch', (event) => {
|
||||
app.userHub.addEventListener('patch', (event) => {
|
||||
if (this.isInitialized) {this.onPatch(event.detail);}
|
||||
});
|
||||
app.liveUserRegistry.get(this.userId).then((user) => {
|
||||
app.userHub.get(this.userId).then((user) => {
|
||||
this.add(this.aggregateData(user));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
|
@ -8,10 +8,10 @@ nopaque.resource_lists.JobInputList = class JobInputList extends nopaque.resourc
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
this.jobId = listContainerElement.dataset.jobId;
|
||||
if (this.userId === undefined || this.jobId === undefined) {return;}
|
||||
// app.liveUserRegistry.addEventListener('patch', (event) => {
|
||||
// app.userHub.addEventListener('patch', (event) => {
|
||||
// if (this.isInitialized) {this.onPatch(event.detail);}
|
||||
// });
|
||||
app.liveUserRegistry.get(this.userId).then((user) => {
|
||||
app.userHub.get(this.userId).then((user) => {
|
||||
this.add(Object.values(user.jobs[this.jobId].inputs));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
|
@ -12,10 +12,10 @@ nopaque.resource_lists.JobList = class JobList extends nopaque.resource_lists.Re
|
||||
this.selectedItemIds = new Set();
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
if (this.userId === undefined) {return;}
|
||||
app.liveUserRegistry.addEventListener('patch', (event) => {
|
||||
app.userHub.addEventListener('patch', (event) => {
|
||||
if (this.isInitialized) {this.onPatch(event.detail);}
|
||||
});
|
||||
app.liveUserRegistry.get(this.userId).then((user) => {
|
||||
app.userHub.get(this.userId).then((user) => {
|
||||
this.add(Object.values(user.jobs));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
|
@ -8,10 +8,10 @@ nopaque.resource_lists.JobResultList = class JobResultList extends nopaque.resou
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
this.jobId = listContainerElement.dataset.jobId;
|
||||
if (this.userId === undefined || this.jobId === undefined) {return;}
|
||||
app.liveUserRegistry.addEventListener('patch', (event) => {
|
||||
app.userHub.addEventListener('patch', (event) => {
|
||||
if (this.isInitialized) {this.onPatch(event.detail);}
|
||||
});
|
||||
app.liveUserRegistry.get(this.userId).then((user) => {
|
||||
app.userHub.get(this.userId).then((user) => {
|
||||
this.add(Object.values(user.jobs[this.jobId].results));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
|
@ -8,10 +8,10 @@ nopaque.resource_lists.SpaCyNLPPipelineModelList = class SpaCyNLPPipelineModelLi
|
||||
this.isInitialized = false;
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
if (this.userId === undefined) {return;}
|
||||
app.liveUserRegistry.addEventListener('patch', (event) => {
|
||||
app.userHub.addEventListener('patch', (event) => {
|
||||
if (this.isInitialized) {this.onPatch(event.detail);}
|
||||
});
|
||||
app.liveUserRegistry.get(this.userId).then((user) => {
|
||||
app.userHub.get(this.userId).then((user) => {
|
||||
this.add(Object.values(user.spacy_nlp_pipeline_models));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
|
@ -8,10 +8,10 @@ nopaque.resource_lists.TesseractOCRPipelineModelList = class TesseractOCRPipelin
|
||||
this.isInitialized = false;
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
if (this.userId === undefined) {return;}
|
||||
app.liveUserRegistry.addEventListener('patch', (event) => {
|
||||
app.userHub.addEventListener('patch', (event) => {
|
||||
if (this.isInitialized) {this.onPatch(event.detail);}
|
||||
});
|
||||
app.liveUserRegistry.get(this.userId).then((user) => {
|
||||
app.userHub.get(this.userId).then((user) => {
|
||||
this.add(Object.values(user.tesseract_ocr_pipeline_models));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
|
@ -9,9 +9,13 @@
|
||||
output='gen/nopaque.%(version)s.js',
|
||||
'js/index.js',
|
||||
'js/app.js',
|
||||
'js/app/ui.js',
|
||||
'js/app/user-live-registry.js',
|
||||
'js/app/users.js',
|
||||
'js/app/index.js',
|
||||
'js/app/endpoints/index.js',
|
||||
'js/app/endpoints/users.js',
|
||||
'js/app/extensions/index.js',
|
||||
'js/app/extensions/toaster.js',
|
||||
'js/app/extensions/ui.js',
|
||||
'js/app/extensions/user-hub.js',
|
||||
'js/utils.js',
|
||||
|
||||
'js/forms/index.js',
|
||||
@ -80,16 +84,18 @@
|
||||
const app = new nopaque.App();
|
||||
app.init();
|
||||
|
||||
{% if current_user.is_authenticated -%}
|
||||
{% if current_user.is_authenticated %}
|
||||
const currentUserId = {{ current_user.hashid|tojson }};
|
||||
|
||||
app.liveUserRegistry.add(currentUserId)
|
||||
app.userHub.add(currentUserId)
|
||||
.catch((error) => {throw JSON.stringify(error);});
|
||||
|
||||
{% if not current_user.terms_of_use_accepted -%}
|
||||
{% if not current_user.terms_of_use_accepted %}
|
||||
M.Modal.getInstance(document.querySelector('#terms-of-use-modal')).open();
|
||||
{% endif -%}
|
||||
{% endif -%}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
const currentUserId = null;
|
||||
{% endif %}
|
||||
|
||||
// Display flashed messages
|
||||
for (let [category, message] of {{ get_flashed_messages(with_categories=True)|tojson }}) {
|
||||
|
@ -69,10 +69,9 @@
|
||||
{{ super() }}
|
||||
<div class="modal no-autoinit" id="corpus-analysis-init-modal">
|
||||
<div class="modal-content">
|
||||
<div class="card-panel service-color darken white-text" data-service="corpus-analysis">
|
||||
<div class="card-panel primary-color white-text" data-service="corpus-analysis">
|
||||
<h4 class="m-3"><i class="material-icons left" style="font-size: inherit; line-height: inherit;">hourglass_empty</i>We are preparing your analysis session</h4>
|
||||
</div>
|
||||
<h4>We are preparing your analysis session</h4>
|
||||
<p>
|
||||
Our server works as hard as it can to prepare your analysis session. Please be patient and give it some time.<br>
|
||||
If initialization takes longer than usual or an error occurs, <a onclick="window.location.reload()" href="#">reload the page</a>.
|
||||
|
@ -26,7 +26,6 @@
|
||||
<div class="corpus-list" data-user-id="{{ current_user.hashid }}"></div>
|
||||
</div>
|
||||
<div class="card-action right-align">
|
||||
<a class="btn service-color darken disabled waves-effect waves-light" href="{{ url_for('corpora.import_corpus') }}">Import Corpus<i class="material-icons right">import_export</i></a>
|
||||
<a class="btn service-color darken waves-effect waves-light" href="{{ url_for('corpora.create_corpus') }}">Create corpus<i class="material-icons right">add</i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user