mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-12-25 02:44:18 +00:00
Small changes everywhere
This commit is contained in:
Patrick Jentsch
parent
4de2fdf6d8
commit
a1d33077a3
@ -1,10 +1,7 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="page-header">
|
<div class="col s12">
|
||||||
<p>This site is forbidden for you.</p>
|
<p>This site is forbidden for you.</p>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
@ -1,10 +1,7 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="page-header">
|
<div class="col s12">
|
||||||
<p>Site has not been found.</p>
|
<p>Site has not been found.</p>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
@ -1,10 +1,7 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="page-header">
|
<div class="col s12">
|
||||||
<p>Internal Server Error. We are Sorry!</p>
|
<p>Internal Server Error. We are Sorry!</p>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m4">
|
<div class="col s12 m4">
|
||||||
<h3 id="title">{{ user.username }}</h3>
|
<h3 id="title">{{ user.username }}</h3>
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = True %}
|
{% set full_width = True %}
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12">
|
<div class="col s12">
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m4">
|
<div class="col s12 m4">
|
||||||
<h3 id="title">{{ user.username }}</h3>
|
<h3 id="title">{{ user.username }}</h3>
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m4">
|
<div class="col s12 m4">
|
||||||
<h3>DSGVO</h3>
|
<h3>DSGVO</h3>
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m4">
|
<div class="col s12 m4">
|
||||||
<h3>Lorem ipsum</h3>
|
<h3>Lorem ipsum</h3>
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m4">
|
<div class="col s12 m4">
|
||||||
<h3>Lost password?</h3>
|
<h3>Lost password?</h3>
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block title %}Opaque - Confirm your account{% endblock %}
|
{% block title %}Opaque - Confirm your account{% endblock %}
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = True %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m4">
|
<div class="col s12 m4">
|
||||||
<h3>...</h3>
|
<h3>...</h3>
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m4">
|
<div class="col s12 m4">
|
||||||
<h3>{{ corpus.title }}</h3>
|
<h3>{{ corpus.title }}</h3>
|
||||||
|
|||||||
@ -1,543 +0,0 @@
|
|||||||
{% extends "full_width.html.j2" %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
|
||||||
<style>
|
|
||||||
.token.chip.bold {
|
|
||||||
background-color: #48a54b;
|
|
||||||
}
|
|
||||||
.token.bold {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
.token.chip:hover {
|
|
||||||
background-color: #9e9e9e;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.material-tooltip {
|
|
||||||
padding: 5px 20px 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: rgba(37, 36, 36);
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-tooltip .backdrop {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.material-tooltip:after {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
top: 100%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -8px;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 15px 13px 0 13px;
|
|
||||||
border-color: rgba(37, 36, 36) transparent transparent transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!-- Query Form -->
|
|
||||||
<form id="query-form">
|
|
||||||
<div class="col s12">
|
|
||||||
<ul class="collapsible expandable">
|
|
||||||
<li class="active">
|
|
||||||
<!-- <div class="collapsible-header">
|
|
||||||
<i class="material-icons">search</i>CQP Query
|
|
||||||
</div> -->
|
|
||||||
<!-- Div element above is part of valid materialize collapsible.
|
|
||||||
Commented out to prevent the user from collapsing it and also to save
|
|
||||||
space -->
|
|
||||||
<div class="collapsible-body" style="padding-top: 10px;
|
|
||||||
padding-right: 2rem;
|
|
||||||
padding-bottom: 0px;
|
|
||||||
padding-left: 2rem;">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s12 m11">
|
|
||||||
<div class="input-field">
|
|
||||||
<i class="material-icons prefix">search</i>
|
|
||||||
{{ query_form.query() }}
|
|
||||||
{{ query_form.query.label }}
|
|
||||||
<span class="helper-text" data-error="wrong" data-success="right">
|
|
||||||
<a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
|
|
||||||
<i class="material-icons" style="font-size: inherit;">help
|
|
||||||
</i> CQP query language tutorial
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
{% for error in query_form.query.errors %}
|
|
||||||
<span class="helper-text red-text">{{ error }}</span>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m1">
|
|
||||||
<p class="hide-on-small-only" style="
|
|
||||||
margin: 0px;"> </p>
|
|
||||||
<button class="waves-effect waves-light btn-small right"
|
|
||||||
type="submit">Send
|
|
||||||
<i class="material-icons right">send</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="hoverable">
|
|
||||||
<div class="collapsible-header">
|
|
||||||
<i class="material-icons">settings</i>Display Options
|
|
||||||
</div>
|
|
||||||
<div class="collapsible-body">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s6">
|
|
||||||
<div class="input-field">
|
|
||||||
<i class="material-icons prefix">format_list_numbered</i>
|
|
||||||
{{ query_form.hits_per_page() }}
|
|
||||||
{{ query_form.hits_per_page.label }}
|
|
||||||
{% for error in query_form.hits_per_page.errors %}
|
|
||||||
<span class="helper-text red-text">{{ error }}</span>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s6">
|
|
||||||
<div class="input-field">
|
|
||||||
<i class="material-icons prefix">short_text</i>
|
|
||||||
{{ query_form.context() }}
|
|
||||||
{{ query_form.context.label }}
|
|
||||||
{% for error in query_form.context.errors %}
|
|
||||||
<span class="helper-text red-text">{{ error }}</span>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="switch">
|
|
||||||
<label>
|
|
||||||
Expert Mode
|
|
||||||
<input type="checkbox" id="expert-mode-switch">
|
|
||||||
<span class="lever"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Export query results modal -->
|
|
||||||
<div id="export-query-results-modal"
|
|
||||||
class="modal modal-fixed-footer no-autoinit">
|
|
||||||
<div class="modal-content">
|
|
||||||
{{ query_download_form.hidden_tag() }}
|
|
||||||
<h4>Download current query Results</h4>
|
|
||||||
<p>The results of the current query can be downlaoded as several files like csv or json. Those files can be used in other software like excel. Also it is easy to publish your results as raw data like this!</p>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>JSON</td>
|
|
||||||
<td>
|
|
||||||
<a class="btn waves-effect waves-light" id="download-results">Download
|
|
||||||
<i class="material-icons right">file_download</i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>CSV</td>
|
|
||||||
<td>
|
|
||||||
<a class="btn waves-effect waves-light disabled">Download
|
|
||||||
<i class="material-icons right">file_download</i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>EXCEL</td>
|
|
||||||
<td>
|
|
||||||
<a class="btn waves-effect waves-light disabled">Download
|
|
||||||
<i class="material-icons right">file_download</i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>HTML</td>
|
|
||||||
<td>
|
|
||||||
<a class="btn waves-effect waves-light disabled">Download
|
|
||||||
<i class="material-icons right">file_download</i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Loading animation card when query results are being loaded -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s12 hide" id="getting-query-results">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-content">
|
|
||||||
<span class="card-title">Fetching your results!</span>
|
|
||||||
<div>
|
|
||||||
<div class="progress">
|
|
||||||
<div class="indeterminate"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- table showing the query results -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s12" id="recieved-query-results">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-content" id="result-list">
|
|
||||||
<span class="card-title">Query Results</span>
|
|
||||||
<p id="query-results-metadata">
|
|
||||||
<button id="export-query-results" class="waves-effect waves-light btn-small right hide" type="submit">Export Results<i class="material-icons right">file_download</i></button>
|
|
||||||
</p>
|
|
||||||
<ul class="pagination paginationTop"></ul>
|
|
||||||
<table class="responsive-table highlight">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="width: 5%">Title</th>
|
|
||||||
<th style="width: 25%">Left context</th>
|
|
||||||
<th style="width: 45%">Match</th>
|
|
||||||
<th style="width: 25%">Right Context</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="list" id="query-results"></tbody>
|
|
||||||
</table>
|
|
||||||
<ul class="pagination paginationBottom"></ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Loding animation modal that waits for the CQP server container to be ready
|
|
||||||
-->
|
|
||||||
<div id="loading-modal" class="modal no-autoinit">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h4>Waiting for analysis software</h4>
|
|
||||||
<div class="progress">
|
|
||||||
<div class="indeterminate"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Context modal used for detailed information about one match -->
|
|
||||||
<div id="context-modal" class="modal modal-fixed-footer">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h4>Match context and information</h4>
|
|
||||||
<div id="context-modal-loading">
|
|
||||||
<div class="progress">
|
|
||||||
<div class="indeterminate"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="context-modal-ready" class="hide">
|
|
||||||
<div id="context-results"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<a href="#!" class="left waves-effect waves-green btn">Export</a>
|
|
||||||
<a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
var contextModal;
|
|
||||||
var loadingModal;
|
|
||||||
var exportModal;
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
|
||||||
contextModal = M.Modal.init(document.getElementById("context-modal"),
|
|
||||||
{"onCloseEnd": function() {
|
|
||||||
document.getElementById("context-modal-loading").classList.remove("hide");
|
|
||||||
document.getElementById("context-modal-ready").classList.add("hide");}});
|
|
||||||
loadingModal = M.Modal.init(document.getElementById("loading-modal"),
|
|
||||||
{"dismissible": false});
|
|
||||||
exportModal = M.Modal.init(document.getElementById("export-query-results-modal"),
|
|
||||||
{"dismissible": true});
|
|
||||||
M.Collapsible.init(elem, {accordion: false});
|
|
||||||
loadingModal.open();
|
|
||||||
nopaque.socket.emit("request_corpus_analysis", {{ corpus_id }});
|
|
||||||
});
|
|
||||||
|
|
||||||
nopaque.socket.on("request_corpus_analysis", function(msg) {
|
|
||||||
if (msg === "[201]: Created") {loadingModal.close();}
|
|
||||||
});
|
|
||||||
|
|
||||||
var expertModeSwitchElement = document.getElementById("expert-mode-switch");
|
|
||||||
var lookup = {"cpos": null, "s": null, "text": null};
|
|
||||||
var matches = null;
|
|
||||||
var tokenElements = null;
|
|
||||||
|
|
||||||
expertModeSwitchElement.addEventListener('change', function(event) {
|
|
||||||
if (event.target.checked) {
|
|
||||||
tokenElements.forEach(function(tokenElement) {
|
|
||||||
tokenElement.classList.add("chip");
|
|
||||||
token = lookup["cpos"][tokenElement.dataset.cpos];
|
|
||||||
addToolTipToTokenElement(tokenElement, token);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
tokenElements.forEach(function(tokenElement) {
|
|
||||||
tokenElement.classList.remove("chip");
|
|
||||||
tokenElement.M_Tooltip.destroy()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
var queryFormElement = document.getElementById("query-form");
|
|
||||||
var queryResultsElement = document.getElementById("query-results");
|
|
||||||
var queryResultsMetadataElement = document.getElementById("query-results-metadata");
|
|
||||||
var exportQueryResults = document.getElementById("export-query-results");
|
|
||||||
exportQueryResults.onclick = function() {
|
|
||||||
exportModal.open();
|
|
||||||
};
|
|
||||||
var contextResultsElement = document.getElementById("context-results");
|
|
||||||
var queryLoadingElement = document.getElementById("getting-query-results");
|
|
||||||
var queryResultsTableElement = document.getElementById("recieved-query-results");
|
|
||||||
var hitsPerPage;
|
|
||||||
queryFormElement.addEventListener("submit", function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
let formData = new FormData(queryFormElement);
|
|
||||||
let queryData = {"context": formData.get("context"),
|
|
||||||
"hits_per_page": formData.get("hits_per_page"),
|
|
||||||
"query": formData.get("query")};
|
|
||||||
hitsPerPage = formData.get("hits_per_page");
|
|
||||||
nopaque.socket.emit("corpus_analysis", queryData);
|
|
||||||
queryLoadingElement.classList.remove("hide");
|
|
||||||
queryResultsTableElement.classList.add("hide");
|
|
||||||
nopaque.toast("Query has been sent!")
|
|
||||||
});
|
|
||||||
|
|
||||||
nopaque.socket.on("corpus_analysis", function(message) {
|
|
||||||
console.log("### corpus_analysis ###");
|
|
||||||
console.log(message);
|
|
||||||
queryLoadingElement.classList.add("hide");
|
|
||||||
queryResultsTableElement.classList.remove("hide");
|
|
||||||
queryResultsElement.innerHTML = "";
|
|
||||||
|
|
||||||
// Reset related global values
|
|
||||||
lookup = {"cpos": null, "s": null, "text": null};
|
|
||||||
matches = null;
|
|
||||||
tokenElements = null;
|
|
||||||
|
|
||||||
if (message === null) {
|
|
||||||
queryResultsTableElement.classList.add("hide");
|
|
||||||
nopaque.toast("No results for this query!")
|
|
||||||
return;
|
|
||||||
} else if (message === "CQI_CQP_ERROR_GENERAL") {
|
|
||||||
queryResultsTableElement.classList.add("hide");
|
|
||||||
nopaque.toast("Invalid query entered!", "red");
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
total_nr_matches = message["total_nr_matches"];
|
|
||||||
let count_corpus_files = Object.keys(message["text_lookup"]).length;
|
|
||||||
queryResultsMetadataElement.innerHTML = message["total_nr_matches"] + " matches in " + count_corpus_files + " corpus files.";
|
|
||||||
queryResultsMetadataElement.appendChild(exportQueryResults);
|
|
||||||
exportQueryResults.classList.remove("hide");
|
|
||||||
|
|
||||||
var matchElement;
|
|
||||||
var matchTextTitlesElement;
|
|
||||||
var matchLeftContextElement;
|
|
||||||
var matchHitElement;
|
|
||||||
var matchRightContextElement;
|
|
||||||
var textTitles;
|
|
||||||
var token;
|
|
||||||
var tokenElement;
|
|
||||||
|
|
||||||
// Set related global values
|
|
||||||
lookup["cpos"] = message["cpos_lookup"];
|
|
||||||
lookup["text"] = message["text_lookup"];
|
|
||||||
matches = message["matches"];
|
|
||||||
tokenElements = new Set();
|
|
||||||
|
|
||||||
for (let [index, match] of matches.entries()) {
|
|
||||||
matchElement = document.createElement("tr");
|
|
||||||
matchElement.classList.add("match");
|
|
||||||
matchElement.dataset.index = index;
|
|
||||||
matchTextTitlesElement = document.createElement("td");
|
|
||||||
matchTextTitlesElement.classList.add("text-titles");
|
|
||||||
matchElement.append(matchTextTitlesElement);
|
|
||||||
matchLeftContextElement = document.createElement("td");
|
|
||||||
matchLeftContextElement.classList.add("left-context");
|
|
||||||
for (cpos of match["lc"]) {
|
|
||||||
token = lookup["cpos"][cpos];
|
|
||||||
tokenElement = document.createElement("span");
|
|
||||||
tokenElement.classList.add("token");
|
|
||||||
tokenElement.dataset.cpos = cpos;
|
|
||||||
tokenElement.innerText = token["word"];
|
|
||||||
if (expertModeSwitchElement.checked) {
|
|
||||||
tokenElement.classList.add("chip");
|
|
||||||
addToolTipToTokenElement(tokenElement, token);
|
|
||||||
}
|
|
||||||
matchLeftContextElement.append(tokenElement);
|
|
||||||
matchLeftContextElement.append(document.createTextNode(" "));
|
|
||||||
tokenElements.add(tokenElement);
|
|
||||||
}
|
|
||||||
matchElement.append(matchLeftContextElement);
|
|
||||||
matchHitElement = document.createElement("td");
|
|
||||||
matchHitElement.classList.add("hit");
|
|
||||||
textTitles = new Set();
|
|
||||||
for (cpos of match["hit"]) {
|
|
||||||
token = lookup["cpos"][cpos];
|
|
||||||
tokenElement = document.createElement("span");
|
|
||||||
tokenElement.classList.add("token");
|
|
||||||
tokenElement.dataset.cpos = cpos;
|
|
||||||
tokenElement.innerText = token["word"];
|
|
||||||
if (expertModeSwitchElement.checked) {
|
|
||||||
tokenElement.classList.add("chip");
|
|
||||||
addToolTipToTokenElement(tokenElement, token);
|
|
||||||
}
|
|
||||||
matchHitElement.append(tokenElement);
|
|
||||||
matchHitElement.append(document.createTextNode(" "));
|
|
||||||
tokenElements.add(tokenElement);
|
|
||||||
textTitles.add(lookup["text"][token["text"]]["title"]);
|
|
||||||
}
|
|
||||||
var moreContextBtn = document.createElement("a");
|
|
||||||
moreContextBtn.setAttribute("class", "btn-floating btn waves-effect waves-light teal right inspect");
|
|
||||||
moreContextBtn.innerHTML = '<i class="material-icons">search</i>';
|
|
||||||
matchHitElement.append(document.createElement("br"), document.createElement("br"));
|
|
||||||
matchHitElement.append(moreContextBtn);
|
|
||||||
|
|
||||||
matchTextTitlesElement.innerText = [...textTitles].join(",");
|
|
||||||
matchElement.append(matchHitElement);
|
|
||||||
matchRightContextElement = document.createElement("td");
|
|
||||||
matchRightContextElement.classList.add("right-context");
|
|
||||||
for (cpos of match["rc"]) {
|
|
||||||
token = lookup["cpos"][cpos];
|
|
||||||
tokenElement = document.createElement("span");
|
|
||||||
tokenElement.classList.add("token");
|
|
||||||
tokenElement.dataset.cpos = cpos;
|
|
||||||
tokenElement.innerText = token["word"];
|
|
||||||
if (expertModeSwitchElement.checked) {
|
|
||||||
tokenElement.classList.add("chip");
|
|
||||||
addToolTipToTokenElement(tokenElement, token);
|
|
||||||
}
|
|
||||||
matchRightContextElement.append(tokenElement);
|
|
||||||
matchRightContextElement.append(document.createTextNode(" "));
|
|
||||||
tokenElements.add(tokenElement);
|
|
||||||
}
|
|
||||||
matchElement.append(matchRightContextElement);
|
|
||||||
queryResultsElement.append(matchElement);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var options = {page: hitsPerPage,
|
|
||||||
pagination: [{
|
|
||||||
name: "paginationTop",
|
|
||||||
paginationClass: "paginationTop",
|
|
||||||
innerWindow: 8,
|
|
||||||
outerWindow: 1
|
|
||||||
}, {
|
|
||||||
paginationClass: "paginationBottom",
|
|
||||||
innerWindow: 8,
|
|
||||||
outerWindow: 1
|
|
||||||
}],
|
|
||||||
valueNames: ["text-titles", "left-context", "hit", "right-context"]};
|
|
||||||
var userList = new List('result-list', options);
|
|
||||||
|
|
||||||
var inspectBtns = document.getElementsByClassName("inspect");
|
|
||||||
for(var i = 0; i < inspectBtns.length; i++) {
|
|
||||||
var inspectBtn = inspectBtns[i];
|
|
||||||
var dataIndex = inspectBtn.parentNode.parentNode.getAttribute("data-index");
|
|
||||||
inspectBtn.onclick = function() {
|
|
||||||
contextModal.open();
|
|
||||||
nopaque.socket.emit("inspect_match", {"cpos": matches[dataIndex]["hit"]});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to download data to a file
|
|
||||||
function download(downloadElem, data, filename, type) {
|
|
||||||
var file = new Blob([data], {type: type});
|
|
||||||
if (window.navigator.msSaveOrOpenBlob) // IE10+
|
|
||||||
window.navigator.msSaveOrOpenBlob(file, filename);
|
|
||||||
else { // Others
|
|
||||||
var url = URL.createObjectURL(file);
|
|
||||||
downloadElem.href = url;
|
|
||||||
downloadElem.download = filename;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// create json filename for download
|
|
||||||
var today = new Date();
|
|
||||||
var currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
|
|
||||||
var currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
|
|
||||||
var safeFilename = message['query'].replace(/[^a-z0-9_-]/gi, "_");
|
|
||||||
var resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename + ".json";
|
|
||||||
// get a where download is served
|
|
||||||
var downloadResults = document.getElementById("download-results");
|
|
||||||
// stringify JSON object for json download
|
|
||||||
var dataStr = JSON.stringify(message, undefined, 2);
|
|
||||||
downloadResults.onclick = download(downloadResults,
|
|
||||||
dataStr,
|
|
||||||
resultFilename,
|
|
||||||
"text/json");
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
function addToolTipToTokenElement(tokenElement, token) {
|
|
||||||
M.Tooltip.init(tokenElement,
|
|
||||||
{"html": `<table>
|
|
||||||
<tr>
|
|
||||||
<th>Token information</th>
|
|
||||||
<th>Source information</th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="left-align">
|
|
||||||
Word: ${token["word"]}<br>
|
|
||||||
Lemma: ${token["lemma"]}<br>
|
|
||||||
POS: ${token["pos"]}<br>
|
|
||||||
Simple POS: ${token["simple_pos"]}<br>
|
|
||||||
NER: ${token["ner"]}
|
|
||||||
</td>
|
|
||||||
<td class="left-align">
|
|
||||||
Title: ${lookup["text"][token["text"]]["title"]}<br>
|
|
||||||
Author: ${lookup["text"][token["text"]]["author"]}<br>
|
|
||||||
Publishing year: ${lookup["text"][token["text"]]["publishing_year"]}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>`,
|
|
||||||
"inDuration": 1500,
|
|
||||||
"margin": 15,
|
|
||||||
"position": "top",
|
|
||||||
"transitionMovement": 0});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
nopaque.socket.on("match_context", function(message) {
|
|
||||||
console.log("### match_context ###");
|
|
||||||
console.log(message);
|
|
||||||
contextResultsElement.innerHTML = "<p> </p>";
|
|
||||||
document.getElementById("context-modal-loading").classList.add("hide");
|
|
||||||
document.getElementById("context-modal-ready").classList.remove("hide");
|
|
||||||
|
|
||||||
var sentenceElement;
|
|
||||||
var token;
|
|
||||||
var tokenElement;
|
|
||||||
|
|
||||||
lookup["cpos"] = {...lookup["cpos"], ...message["cpos_lookup"]};
|
|
||||||
lookup["s"] = message["context_s_cpos"];
|
|
||||||
lookup["text"] = {...lookup["text"], ...message["text_lookup"]};
|
|
||||||
|
|
||||||
for (let [key, value] of Object.entries(message['context_s_cpos'])) {
|
|
||||||
sentenceElement = document.createElement("p");
|
|
||||||
for (cpos of value) {
|
|
||||||
token = lookup["cpos"][cpos];
|
|
||||||
tokenElement = document.createElement("span");
|
|
||||||
tokenElement.classList.add("token");
|
|
||||||
if (message["match_cpos_list"].includes(cpos)) {
|
|
||||||
tokenElement.classList.add("bold");
|
|
||||||
}
|
|
||||||
tokenElement.dataset.cpos = cpos;
|
|
||||||
tokenElement.innerText = token["word"];
|
|
||||||
if (expertModeSwitchElement.checked) {
|
|
||||||
tokenElement.classList.add("chip");
|
|
||||||
addToolTipToTokenElement(tokenElement, token);
|
|
||||||
}
|
|
||||||
tokenElements.add(tokenElement);
|
|
||||||
sentenceElement.append(tokenElement);
|
|
||||||
sentenceElement.append(document.createTextNode(" "));
|
|
||||||
}
|
|
||||||
contextResultsElement.append(sentenceElement);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// collapsible display options
|
|
||||||
var elem = document.querySelector('.collapsible.expandable');
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
||||||
@ -1,7 +1,6 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = True %}
|
{% set full_width = True %}
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<!-- Query Form -->
|
<!-- Query Form -->
|
||||||
|
|||||||
@ -1,423 +0,0 @@
|
|||||||
{% extends "full_width.html.j2" %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
|
||||||
|
|
||||||
<!-- Query Form -->
|
|
||||||
<div class="col s12">
|
|
||||||
<form id="query-form">
|
|
||||||
{{ query_form.hidden_tag() }}
|
|
||||||
<ul class="collapsible expandable" id="query-form-collapsible">
|
|
||||||
<li class="active">
|
|
||||||
<div class="collapsible-body" style="padding-top: 10px; padding-right: 2rem; padding-bottom: 0px; padding-left: 2rem;">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s12 m11 input-field">
|
|
||||||
<i class="material-icons prefix">search</i>
|
|
||||||
{{ query_form.query() }}
|
|
||||||
{{ query_form.query.label }}
|
|
||||||
<span class="helper-text">
|
|
||||||
<a href="http://cwb.sourceforge.net/files/CQP_Tutorial/"><i class="material-icons" style="font-size: inherit;">help</i> CQP query language tutorial</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m1 right-align">
|
|
||||||
<p class="hide-on-small-only" style="margin: 0px;"> </p>
|
|
||||||
<button class="btn-small waves-effect waves-light" type="submit">Send<i class="material-icons right">send</i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="collapsible-header"><i class="material-icons">settings</i>Display Options</div>
|
|
||||||
<div class="collapsible-body">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s12 m6 input-field">
|
|
||||||
<i class="material-icons prefix">format_list_numbered</i>
|
|
||||||
{{ query_form.hits_per_page() }}
|
|
||||||
{{ query_form.hits_per_page.label }}
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m6 input-field">
|
|
||||||
<i class="material-icons prefix">short_text</i>
|
|
||||||
{{ query_form.context() }}
|
|
||||||
{{ query_form.context.label }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12">
|
|
||||||
<div class="switch">
|
|
||||||
<label>
|
|
||||||
{{ query_form.expert_mode.label.text }}
|
|
||||||
{{ query_form.expert_mode() }}
|
|
||||||
<span class="lever"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Loading animation card when query results are being loaded -->
|
|
||||||
<div class="col s12">
|
|
||||||
<div class="card hide" id="query-loading-card">
|
|
||||||
<div class="card-content">
|
|
||||||
<span class="card-title">Fetching your results!</span>
|
|
||||||
<div>
|
|
||||||
<div class="progress">
|
|
||||||
<div class="indeterminate"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col s12">
|
|
||||||
<div class="card" id="query-results-card">
|
|
||||||
<div class="card-content" id="result-list">
|
|
||||||
<span class="card-title">Query Results</span>
|
|
||||||
<p id="query-results-metadata">
|
|
||||||
<button id="export-query-results" class="waves-effect waves-light btn-small right" type="submit">Export Results<i class="material-icons right">file_download</i></button>
|
|
||||||
</p>
|
|
||||||
<ul class="pagination pagination-top"></ul>
|
|
||||||
<table class="responsive-table highlight">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="width: 5%">Title</th>
|
|
||||||
<th style="width: 25%">Left context</th>
|
|
||||||
<th style="width: 45%">Match</th>
|
|
||||||
<th style="width: 25%">Right Context</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="list" id="query-results"></tbody>
|
|
||||||
</table>
|
|
||||||
<ul class="pagination pagination-bottom"></ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Context modal used for detailed information about one match -->
|
|
||||||
<div class="modal modal-fixed-footer" id="context-modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h4>Match context and information</h4>
|
|
||||||
<div id="context-modal-loading">
|
|
||||||
<div class="progress">
|
|
||||||
<div class="indeterminate"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="context-modal-ready" class="hide">
|
|
||||||
<div id="context-results"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<a href="#!" class="left waves-effect waves-green btn">Export</a>
|
|
||||||
<a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Export query results modal -->
|
|
||||||
<div class="modal modal-fixed-footer" id="export-modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
{{ query_download_form.hidden_tag() }}
|
|
||||||
<h4>Download current query Results</h4>
|
|
||||||
<p>The results of the current query can be downlaoded as several files like csv or json. Those files can be used in other software like excel. Also it is easy to publish your results as raw data like this!</p>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>JSON</td>
|
|
||||||
<td>
|
|
||||||
<a class="btn waves-effect waves-light" id="download-results">Download
|
|
||||||
<i class="material-icons right">file_download</i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>CSV</td>
|
|
||||||
<td>
|
|
||||||
<a class="btn waves-effect waves-light disabled">Download
|
|
||||||
<i class="material-icons right">file_download</i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>EXCEL</td>
|
|
||||||
<td>
|
|
||||||
<a class="btn waves-effect waves-light disabled">Download
|
|
||||||
<i class="material-icons right">file_download</i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>HTML</td>
|
|
||||||
<td>
|
|
||||||
<a class="btn waves-effect waves-light disabled">Download
|
|
||||||
<i class="material-icons right">file_download</i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="init-modal" class="modal no-autoinit">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h4>Initializing analysis</h4>
|
|
||||||
<div class="progress">
|
|
||||||
<div class="indeterminate"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Modal objects (initialized after DOM content is loaded)
|
|
||||||
var contextModal, exportModal, initModal;
|
|
||||||
// Query form elements
|
|
||||||
var queryFormElement = document.getElementById("query-form"),
|
|
||||||
queryElement = document.getElementById("query");
|
|
||||||
// Display option elements
|
|
||||||
var contextElement = document.getElementById("context"),
|
|
||||||
expertModeElement = document.getElementById("expert_mode"),
|
|
||||||
hitsPerPageElement = document.getElementById("hits_per_page");
|
|
||||||
var queryLoadingCardElement = document.getElementById("query-loading-card"),
|
|
||||||
queryResultsCardElement = document.getElementById("query-results-card"),
|
|
||||||
exportQueryResultsElement = document.getElementById("export-query-results"),
|
|
||||||
resultListElement = document.getElementById("resultList"),
|
|
||||||
resultList = new List('result-list',
|
|
||||||
{"pagination": [{"name": "paginationTop",
|
|
||||||
"paginationClass": "pagination-top",
|
|
||||||
"innerWindow": 8,
|
|
||||||
"outerWindow": 1},
|
|
||||||
{"name": "paginationBottom",
|
|
||||||
"paginationClass": "pagination-bottom",
|
|
||||||
"innerWindow": 8,
|
|
||||||
"outerWindow": 1}],
|
|
||||||
"valueNames": ["titles", "lc", "hit", "rc"],
|
|
||||||
"item": `<tr>
|
|
||||||
<td class="titles"></td>
|
|
||||||
<td class="lc"></td>
|
|
||||||
<td class="hit"></td>
|
|
||||||
<td class="rc"></td>
|
|
||||||
</tr>`});
|
|
||||||
// Query result data store
|
|
||||||
var result = {"lookup": {"cpos": {}, "s": {}, "text": {}}, "matches": []};
|
|
||||||
var tokenElements = [];
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
|
||||||
contextModal = M.Modal.getInstance(document.getElementById("context-modal"));
|
|
||||||
exportQueryResultsModal = M.Modal.getInstance(document.getElementById("export-modal"));
|
|
||||||
initModal = M.Modal.init(document.getElementById("init-modal"), {"dismissible": false});
|
|
||||||
M.Collapsible.init(document.getElementById("query-form-collapsible"), {"accordion": false});
|
|
||||||
initModal.open();
|
|
||||||
nopaque.socket.emit("corpus_analysis_init", {{ corpus_id }});
|
|
||||||
});
|
|
||||||
|
|
||||||
// close loading modal if container for analysis has started
|
|
||||||
nopaque.socket.on("corpus_analysis_init", function(response) {
|
|
||||||
if (response.code === 201) {
|
|
||||||
initModal.close();
|
|
||||||
} else {
|
|
||||||
console.log("[ERROR] corpus_analysis_init");
|
|
||||||
console.log(response);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
expertModeElement.addEventListener("change", function(event) {
|
|
||||||
var tooltip;
|
|
||||||
|
|
||||||
if (expertModeElement.checked) {
|
|
||||||
for (let tokenElement of tokenElements) {
|
|
||||||
tokenElement.classList.add("chip");
|
|
||||||
token = lookup["cpos"][tokenElement.dataset.cpos];
|
|
||||||
addToolTipToTokenElement(tokenElement, token);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (let tokenElement of tokenElements) {
|
|
||||||
tooltip = M.Tooltip.getInstance(tokenElement);
|
|
||||||
tooltip.destroy();
|
|
||||||
tokenElement.classList.remove("chip");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
exportQueryResultsElement.addEventListener("click", function() {
|
|
||||||
exportModal.open();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Get query form element and save its data on submit and send this data via
|
|
||||||
// socket.io to the CQP server
|
|
||||||
queryFormElement.addEventListener("submit", function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
let queryData = {"context": contextElement.value,
|
|
||||||
"hits_per_page": hitsPerPageElement.value,
|
|
||||||
"query": queryElement.value};
|
|
||||||
nopaque.socket.emit("corpus_analysis", queryData);
|
|
||||||
nopaque.toast("Query has been sent!");
|
|
||||||
// Unhide (show) loading card and hide result card
|
|
||||||
queryLoadingCardElement.classList.remove("hide");
|
|
||||||
queryResultsCardElement.classList.add("hide");
|
|
||||||
resultList.clear();
|
|
||||||
lookup = {"cpos": {}, "s": {}, "text": {}};
|
|
||||||
matches = [];
|
|
||||||
tokenElements = [];
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// socket.on triggered when result chunks are recieved
|
|
||||||
nopaque.socket.on("corpus_analysis", function(chunk) {
|
|
||||||
console.log("### Recieved query results chunk ###");
|
|
||||||
console.log(chunk);
|
|
||||||
|
|
||||||
// Sanity checks
|
|
||||||
if (!chunk) {
|
|
||||||
// No results for this query
|
|
||||||
nopaque.toast("No results!");
|
|
||||||
return;
|
|
||||||
} else if (chunk === "CQI_CQP_ERROR_GENERAL") {
|
|
||||||
// Invalid query
|
|
||||||
queryResultsTableElement.classList.add("hide");
|
|
||||||
nopaque.toast("Invalid query!", "red");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add chunk to the query result data stores
|
|
||||||
matches.push(...chunk["matches"]);
|
|
||||||
lookup["cpos"] = {...lookup["cpos"], ...chunk["cpos_lookup"]};
|
|
||||||
lookup["text"] = {...lookup["text"], ...chunk["text_lookup"]};
|
|
||||||
console.log("### Updated query result data stores ###");
|
|
||||||
console.log(matches);
|
|
||||||
console.log(lookup);
|
|
||||||
// Hide loading card and Unhide (show) result card
|
|
||||||
queryLoadingCardElement.classList.add("hide");
|
|
||||||
queryResultsCardElement.classList.remove("hide");
|
|
||||||
|
|
||||||
// write metadata query information into HTML elements
|
|
||||||
// like nr. of all matches in how many files etc.
|
|
||||||
// TODO: count_corpus_files müssen aus full results genommen werden.
|
|
||||||
let count_corpus_files = Object.keys(lookup["text"]).length;
|
|
||||||
queryResultsMetadataElement.innerHTML = chunk["total_nr_matches"] + " matches in " + count_corpus_files + " corpus files.";
|
|
||||||
queryResultsMetadataElement.appendChild(exportQueryResults);
|
|
||||||
|
|
||||||
var toAdd = [];
|
|
||||||
for (let [index, match] of chunk["matches"].entries()) {
|
|
||||||
lc_tokens = "";
|
|
||||||
for (cpos of match["lc"]) {
|
|
||||||
word = chunk["cpos_lookup"][cpos]["word"];
|
|
||||||
lc_tokens += " " + word;
|
|
||||||
}
|
|
||||||
// console.log(lc_tokens);
|
|
||||||
hit_tokens = "";
|
|
||||||
for (cpos of match["hit"]) {
|
|
||||||
word = chunk["cpos_lookup"][cpos]["word"];
|
|
||||||
hit_tokens += " " + word;
|
|
||||||
}
|
|
||||||
// console.log(hit_tokens);
|
|
||||||
rc_tokens = "";
|
|
||||||
for (cpos of match["rc"]) {
|
|
||||||
word = chunk["cpos_lookup"][cpos]["word"];
|
|
||||||
rc_tokens += " " + word;
|
|
||||||
}
|
|
||||||
// console.log(rc_tokens);
|
|
||||||
item = { titles: "test", lc: lc_tokens, hit: hit_tokens, rc: rc_tokens };
|
|
||||||
toAdd.push(item);
|
|
||||||
}
|
|
||||||
resultList.add(toAdd, function(toAdd) {console.log('All ' + toAdd.length + 'results were added!')});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Function to download data to a file
|
|
||||||
function download(downloadElem, data, filename, type) {
|
|
||||||
var file = new Blob([data], {type: type});
|
|
||||||
if (window.navigator.msSaveOrOpenBlob) // IE10+
|
|
||||||
window.navigator.msSaveOrOpenBlob(file, filename);
|
|
||||||
else { // Others
|
|
||||||
var url = URL.createObjectURL(file);
|
|
||||||
downloadElem.href = url;
|
|
||||||
downloadElem.download = filename;
|
|
||||||
}
|
|
||||||
// create json filename for download
|
|
||||||
var today = new Date();
|
|
||||||
var currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
|
|
||||||
var currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
|
|
||||||
var safeFilename = message['query'].replace(/[^a-z0-9_-]/gi, "_");
|
|
||||||
var resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename + ".json";
|
|
||||||
// get a where download is served
|
|
||||||
var downloadResults = document.getElementById("download-results");
|
|
||||||
// stringify JSON object for json download
|
|
||||||
var dataStr = JSON.stringify(message, undefined, 2);
|
|
||||||
downloadResults.onclick = download(downloadResults,
|
|
||||||
dataStr,
|
|
||||||
resultFilename,
|
|
||||||
"text/json");
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
function addToolTipToTokenElement(tokenElement, token) {
|
|
||||||
M.Tooltip.init(tokenElement,
|
|
||||||
{"html": `<table>
|
|
||||||
<tr>
|
|
||||||
<th>Token information</th>
|
|
||||||
<th>Source information</th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="left-align">
|
|
||||||
Word: ${token["word"]}<br>
|
|
||||||
Lemma: ${token["lemma"]}<br>
|
|
||||||
POS: ${token["pos"]}<br>
|
|
||||||
Simple POS: ${token["simple_pos"]}<br>
|
|
||||||
NER: ${token["ner"]}
|
|
||||||
</td>
|
|
||||||
<td class="left-align">
|
|
||||||
Title: ${lookup["text"][token["text"]]["title"]}<br>
|
|
||||||
Author: ${lookup["text"][token["text"]]["author"]}<br>
|
|
||||||
Publishing year: ${lookup["text"][token["text"]]["publishing_year"]}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>`,
|
|
||||||
"inDuration": 1500,
|
|
||||||
"margin": 15,
|
|
||||||
"position": "top",
|
|
||||||
"transitionMovement": 0});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
nopaque.socket.on("match_context", function(message) {
|
|
||||||
console.log("### match_context ###");
|
|
||||||
console.log(message);
|
|
||||||
contextResultsElement.innerHTML = "<p> </p>";
|
|
||||||
document.getElementById("context-modal-loading").classList.add("hide");
|
|
||||||
document.getElementById("context-modal-ready").classList.remove("hide");
|
|
||||||
|
|
||||||
var sentenceElement;
|
|
||||||
var token;
|
|
||||||
var tokenElement;
|
|
||||||
|
|
||||||
lookup["cpos"] = {...lookup["cpos"], ...message["cpos_lookup"]};
|
|
||||||
lookup["s"] = message["context_s_cpos"];
|
|
||||||
lookup["text"] = {...lookup["text"], ...message["text_lookup"]};
|
|
||||||
|
|
||||||
for (let [key, value] of Object.entries(message['context_s_cpos'])) {
|
|
||||||
sentenceElement = document.createElement("p");
|
|
||||||
for (cpos of value) {
|
|
||||||
token = lookup["cpos"][cpos];
|
|
||||||
tokenElement = document.createElement("span");
|
|
||||||
tokenElement.classList.add("token");
|
|
||||||
if (message["match_cpos_list"].includes(cpos)) {
|
|
||||||
tokenElement.classList.add("bold");
|
|
||||||
}
|
|
||||||
tokenElement.dataset.cpos = cpos;
|
|
||||||
tokenElement.innerText = token["word"];
|
|
||||||
if (expertModeSwitchElement.checked) {
|
|
||||||
tokenElement.classList.add("chip");
|
|
||||||
addToolTipToTokenElement(tokenElement, token);
|
|
||||||
}
|
|
||||||
tokenElements.add(tokenElement);
|
|
||||||
sentenceElement.append(tokenElement);
|
|
||||||
sentenceElement.append(document.createTextNode(" "));
|
|
||||||
}
|
|
||||||
contextResultsElement.append(sentenceElement);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// collapsible display options
|
|
||||||
var elem = document.querySelector('.collapsible.expandable');
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m4">
|
<div class="col s12 m4">
|
||||||
<h3 id="title">{{ corpus.title }}</h3>
|
<h3 id="title">{{ corpus.title }}</h3>
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m4">
|
<div class="col s12 m4">
|
||||||
<h3 id="title">...</h3>
|
<h3 id="title">...</h3>
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
<!-- Override title -->
|
|
||||||
{% set title = '<i class="material-icons left service" data-service="{service}" style="font-size: inherit;"></i>Job'.format(service=job.service) %}
|
{% set title = '<i class="material-icons left service" data-service="{service}" style="font-size: inherit;"></i>Job'.format(service=job.service) %}
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12" id="corpora">
|
<div class="col s12" id="corpora">
|
||||||
<h3>My Corpora</h3>
|
<h3>My Corpora</h3>
|
||||||
|
|||||||
@ -4,6 +4,23 @@
|
|||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
{% if current_user.is_anonymous %}
|
{% if current_user.is_anonymous %}
|
||||||
|
<script>
|
||||||
|
document.getElementById("sidenav-main").classList.add("hide");
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
header, main, footer {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal:not(.bottom-sheet) {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-fixed > nav {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class="parallax-container">
|
<div class="parallax-container">
|
||||||
<div class="parallax">
|
<div class="parallax">
|
||||||
<img src="{{ url_for('static', filename='images/bible_text.jpg') }}" alt="">
|
<img src="{{ url_for('static', filename='images/bible_text.jpg') }}" alt="">
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<style>
|
<style>
|
||||||
input::placeholder {
|
input::placeholder {
|
||||||
|
|||||||
@ -1,68 +0,0 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
|
||||||
<div class="col s6">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-content">
|
|
||||||
<span class="card-title"><i class="material-icons left">burst_mode</i>Setup files</span>
|
|
||||||
<p>
|
|
||||||
Häufig liegen Datenbestände in verschiedenen Formaten und verstreut
|
|
||||||
vor. Da eine Verarbeitung via nopaque ein einheitliches Datenformat
|
|
||||||
vorsieht, wird dieser Dienst zur Verfügung gestellt, um etwaig
|
|
||||||
anfallende Konvertierungsprozesse durchzuführen.
|
|
||||||
</p>
|
|
||||||
<blockquote>Umgesetzt mit <i>ImageMagick</i></blockquote>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col s6">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-content">
|
|
||||||
<span class="card-title"><i class="material-icons left">find_in_page</i>Optical Character Recognition</span>
|
|
||||||
<p>
|
|
||||||
Durch optische Analysemethoden mit werden aus Bilddaten, wie Fotos
|
|
||||||
oder Scans, Textdaten erzeugt. Erst dieser Vorverarbeitungsschritt
|
|
||||||
ermöglicht eine weitere computergestützte Verarbeitung von Dokumenten.
|
|
||||||
<br><br>
|
|
||||||
</p>
|
|
||||||
<blockquote>Umgesetzt mit <i>Tesseract OCR</i></blockquote>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col s12"></div>
|
|
||||||
|
|
||||||
<div class="col s6">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-content">
|
|
||||||
<span class="card-title"><i class="material-icons left">format_textdirection_l_to_r</i>Natural Language Processing</span>
|
|
||||||
<p>
|
|
||||||
Mit Hilfe computergestützter linguistischer
|
|
||||||
Datenverarbeitungsmethoden (Tokenisierung, Lemmatisierung,
|
|
||||||
Part-of-speech-Tagging und Eigennamenerkennung) werden Textdateien
|
|
||||||
mit weiteren Informationen angereichert.
|
|
||||||
</p>
|
|
||||||
<blockquote>Umgesetzt mit <i>spaCy</i></blockquote>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col s6">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-content">
|
|
||||||
<span class="card-title"><i class="material-icons left">search</i>Corpus Analysis</span>
|
|
||||||
<p>
|
|
||||||
Mittels CQP Query Language als Abfragesprache können komplexe
|
|
||||||
Suchanfragen unter Zuhilfenahme von Metadaten und NLP-Auszeichnungen
|
|
||||||
ausgeführt werden. Ergebnisse können als Text oder in abstrakter
|
|
||||||
Darstellung ausgewertet werden.
|
|
||||||
</p>
|
|
||||||
<blockquote>Umgesetzt mit <i>IMS Open Corpus Workbench</i></blockquote>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
@ -154,23 +154,5 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{% if not current_user.is_authenticated %}
|
|
||||||
<script>
|
|
||||||
document.getElementById("slide-out").classList.add("hide");
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
header, main, footer {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal:not(.bottom-sheet) {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-fixed > nav {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
{% endif %}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = False %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m4">
|
<div class="col s12 m4">
|
||||||
<h3>Dark Mode</h3>
|
<h3>Dark Mode</h3>
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = True %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m9 l10">
|
<div class="col s12 m9 l10">
|
||||||
<div class="col s12">
|
<div class="col s12">
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = True %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m9 l10">
|
<div class="col s12 m9 l10">
|
||||||
<div class="col s12">
|
<div class="col s12">
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = True %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m9 l10">
|
<div class="col s12 m9 l10">
|
||||||
<div class="col s12">
|
<div class="col s12">
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
{% extends "nopaque.html.j2" %}
|
{% extends "nopaque.html.j2" %}
|
||||||
|
|
||||||
{% set full_width = False %}
|
|
||||||
{% set roadmap = True %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m9 l10">
|
<div class="col s12 m9 l10">
|
||||||
<div class="col s12">
|
<div class="col s12">
|
||||||
|
|||||||
@ -1,80 +0,0 @@
|
|||||||
{% extends "limited_width.html.j2" %}
|
|
||||||
|
|
||||||
{% block page_content %}
|
|
||||||
<div class="col s12">
|
|
||||||
<h3>Submit a Test</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col s12">
|
|
||||||
<div class="card">
|
|
||||||
<form class="nopaque-form" data-loading-modal="test-progress-modal" id="test-form">
|
|
||||||
{{ test_form.hidden_tag() }}
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s12 m4">
|
|
||||||
<div class="input-field">
|
|
||||||
<i class="material-icons prefix">title</i>
|
|
||||||
{{ test_form.title(class='validate', data_length='32') }}
|
|
||||||
{{ test_form.title.label }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m8">
|
|
||||||
<div class="input-field">
|
|
||||||
<i class="material-icons prefix">description</i>
|
|
||||||
{{ test_form.description(class='validate', data_length='255') }}
|
|
||||||
{{ test_form.description.label }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12">
|
|
||||||
<div class="file-field input-field">
|
|
||||||
<div class="btn">
|
|
||||||
<span>{{ test_form.file.label.text }}</span>
|
|
||||||
{{ test_form.file() }}
|
|
||||||
</div>
|
|
||||||
<div class="file-path-wrapper">
|
|
||||||
<input class="file-path validate" type="text">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-action right-align">
|
|
||||||
<button class="btn waves-effect waves-light" name="submit" type="submit">Submit<i class="material-icons right">send</i></button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal" id="test-progress-modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h4>Waiting for data transfer</h4>
|
|
||||||
<div class="progress">
|
|
||||||
<div class="indeterminate"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
var testFormElement = document.forms.namedItem("test-form");
|
|
||||||
|
|
||||||
nopaque.socket.on("submit-test-form", function(response) {
|
|
||||||
let loadingModalElement = document.getElementById(testFormElement.dataset.loadingModal);
|
|
||||||
if (response.status === 201) {
|
|
||||||
testFormElement.reset();
|
|
||||||
for (let helperText of testFormElement.querySelectorAll(".helper-text")) {
|
|
||||||
helperText.remove();
|
|
||||||
}
|
|
||||||
nopaque.toast("Success!");
|
|
||||||
} else if (response.status === 400) {
|
|
||||||
let errorElement;
|
|
||||||
for (let [field, error] of Object.entries(response.msg)) {
|
|
||||||
errorElement = document.createElement("span");
|
|
||||||
errorElement.classList.add("helper-text", "red-text");
|
|
||||||
errorElement.innerText = error;
|
|
||||||
testFormElement.querySelector(`input[name="${field}"]`).closest(".input-field").appendChild(errorElement);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
M.Modal.getInstance(loadingModalElement).close();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
||||||
Loading…
Reference in New Issue
Block a user