mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
Soem clean up and restructure
This commit is contained in:
Stephan Porada
parent
7dfc3ab877
commit
1b853f3338
@ -112,8 +112,6 @@ function queryRenderResults(payload, imported=false) {
|
|||||||
} else {
|
} else {
|
||||||
results.data["cpos_ranges"] = false;
|
results.data["cpos_ranges"] = false;
|
||||||
}
|
}
|
||||||
// update progress bar
|
|
||||||
queryResultsDeterminateElement.style.width = `${payload.progress}%`;
|
|
||||||
// building the result list js list from incoming chunk
|
// building the result list js list from incoming chunk
|
||||||
resultItems = []; // list for holding every row item
|
resultItems = []; // list for holding every row item
|
||||||
// get infos for full match row
|
// get infos for full match row
|
||||||
@ -121,6 +119,8 @@ function queryRenderResults(payload, imported=false) {
|
|||||||
resultItems.push({...match, ...{"index": index + results.data.matches.length}});
|
resultItems.push({...match, ...{"index": index + results.data.matches.length}});
|
||||||
}
|
}
|
||||||
if (!imported) {
|
if (!imported) {
|
||||||
|
// update progress bar
|
||||||
|
queryResultsDeterminateElement.style.width = `${payload.progress}%`;
|
||||||
results.jsList.add(resultItems, (items) => {
|
results.jsList.add(resultItems, (items) => {
|
||||||
for (let item of items) {
|
for (let item of items) {
|
||||||
item.elm = results.jsList.createResultRowElement(item, payload.chunk);
|
item.elm = results.jsList.createResultRowElement(item, payload.chunk);
|
||||||
|
|||||||
@ -1015,4 +1015,87 @@ class ResultsList extends List {
|
|||||||
}
|
}
|
||||||
return matchRowElement
|
return matchRowElement
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// creates the HTML table code for the metadata vie in the corpus analysis interface
|
||||||
|
createMetaDataForModal(metaDataObject) {
|
||||||
|
let table = `<div class="col s12">
|
||||||
|
<table class="highlight">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Metadata Description</th>
|
||||||
|
<th>Value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>`
|
||||||
|
for (let [outerKey, outerValue] of Object.entries(metaDataObject)) {
|
||||||
|
table += `<tr>
|
||||||
|
<td>${outerKey}</td>`
|
||||||
|
if (outerKey === "corpus_all_texts" || outerKey === "text_lookup") {
|
||||||
|
table += `<td>
|
||||||
|
<table>`
|
||||||
|
for (let [innerKey, innerValue] of Object.entries(outerValue)) {
|
||||||
|
table += `<tr style="border-bottom: none;">
|
||||||
|
<td>
|
||||||
|
<i>${innerValue.title}</i> written
|
||||||
|
by <i>${innerValue.author}</i>
|
||||||
|
in <i>${innerValue.publishing_year}</i>
|
||||||
|
<a class="waves-effect
|
||||||
|
waves-light
|
||||||
|
btn
|
||||||
|
right
|
||||||
|
more-text-detials"
|
||||||
|
data-metadata-key="${outerKey}"
|
||||||
|
data-text-key="${innerKey}"
|
||||||
|
href="#modal-text-details">More
|
||||||
|
<i class="material-icons right"
|
||||||
|
data-metadata-key="${outerKey}"
|
||||||
|
data-text-key="${innerKey}">
|
||||||
|
info_outline
|
||||||
|
</i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>`
|
||||||
|
}
|
||||||
|
table += `</td>
|
||||||
|
</table>`
|
||||||
|
} else {
|
||||||
|
table += `<td>${outerValue}</td>`
|
||||||
|
}
|
||||||
|
table += `</tr>`
|
||||||
|
}
|
||||||
|
table += `</tbody>
|
||||||
|
</table>`
|
||||||
|
return table
|
||||||
|
}
|
||||||
|
|
||||||
|
// Creates the text details for the texts shown in the corpus analysis metadata modal.
|
||||||
|
createTextDetails(metaDataObject) {
|
||||||
|
let modal = document.getElementById("modal-text-details");
|
||||||
|
modal = M.Modal.init(modal, {"dismissible": true});
|
||||||
|
modal.open();
|
||||||
|
let metadataKey = event.target.dataset.metadataKey;
|
||||||
|
let textKey = event.target.dataset.textKey;
|
||||||
|
let textData = metaDataObject[metadataKey][textKey];
|
||||||
|
let bibliographicData = document.getElementById("bibliographic-data");
|
||||||
|
bibliographicData.innerHTML = "";
|
||||||
|
let table = document.createElement("table");
|
||||||
|
for (let [key, value] of Object.entries(textData)) {
|
||||||
|
table.insertAdjacentHTML("afterbegin",
|
||||||
|
`
|
||||||
|
<tr>
|
||||||
|
<td>${key}</td>
|
||||||
|
<td>${value}</td>
|
||||||
|
</tr>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
table.insertAdjacentHTML("afterbegin",
|
||||||
|
`
|
||||||
|
<thead>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Value</th>
|
||||||
|
</thead>
|
||||||
|
`)
|
||||||
|
bibliographicData.appendChild(table);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,6 +3,7 @@
|
|||||||
{% set headline = ' ' %}
|
{% set headline = ' ' %}
|
||||||
|
|
||||||
{% set full_width = True %}
|
{% set full_width = True %}
|
||||||
|
{% set imported = False %}
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12">
|
<div class="col s12">
|
||||||
@ -42,378 +43,25 @@
|
|||||||
<div class="card-content" id="result-list" style="overflow: hidden;">
|
<div class="card-content" id="result-list" style="overflow: hidden;">
|
||||||
<div class="error-container hide show-on-error"></div>
|
<div class="error-container hide show-on-error"></div>
|
||||||
<div class=" row hide show-on-success">
|
<div class=" row hide show-on-success">
|
||||||
<div class="col s12 m2 l2" id="infos">
|
{% include 'interactions/infos.html.j2' %}
|
||||||
<h6 style="margin-top: 0px;">Infos</h6>
|
{% include 'interactions/export.html.j2' %}
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
{% include 'interactions/create.html.j2' %}
|
||||||
<div class="row">
|
{% include 'interactions/display.html.j2' %}
|
||||||
<div class="col s12">
|
{% include 'interactions/analysis.html.j2' %}
|
||||||
<button id="show-metadata"
|
{% include 'interactions/cite.html.j2' %}
|
||||||
class="waves-effect
|
|
||||||
waves-light
|
|
||||||
btn-flat"
|
|
||||||
type="submit">Corpus Metadata
|
|
||||||
<i class="material-icons left">info_outline</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col s12">
|
|
||||||
<p>
|
|
||||||
<span id="received-match-count">
|
|
||||||
</span> of
|
|
||||||
<span id="match-count"></span>
|
|
||||||
matches loaded.
|
|
||||||
<br>
|
|
||||||
Matches occured in
|
|
||||||
<span id="text-lookup-count"></span>
|
|
||||||
corpus files:
|
|
||||||
<br>
|
|
||||||
<span id=text-titles></span>
|
|
||||||
</p>
|
|
||||||
<p id="query-results-user-feedback">
|
|
||||||
<i class="material-icons">help</i>
|
|
||||||
The Server is still sending your results.
|
|
||||||
Functions like "Export Results" and "Match Inspect" will be
|
|
||||||
available after all matches have been loaded.
|
|
||||||
</p>
|
|
||||||
<div class="progress" id="query-results-progress">
|
|
||||||
<div class="determinate" id="query-results-determinate"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m2 l2" id="export">
|
|
||||||
<h6 style="margin-top: 0px;">Export</h6>
|
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s12">
|
|
||||||
<button class="waves-effect
|
|
||||||
waves-light
|
|
||||||
btn-flat
|
|
||||||
disabled"
|
|
||||||
type="submit"
|
|
||||||
id="results-create">Create Results
|
|
||||||
<i class="material-icons left">build</i>
|
|
||||||
</button>
|
|
||||||
<button id="query-results-export"
|
|
||||||
class="waves-effect
|
|
||||||
waves-light
|
|
||||||
btn-flat
|
|
||||||
hide"
|
|
||||||
type="submit">Results
|
|
||||||
<i class="material-icons left">file_download</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col s12">
|
|
||||||
<button class="waves-effect
|
|
||||||
waves-light
|
|
||||||
btn-flat
|
|
||||||
hide
|
|
||||||
disabled"
|
|
||||||
type="submit"
|
|
||||||
id="sub-results-create">Create Sub-Results
|
|
||||||
<i class="material-icons left">build</i>
|
|
||||||
</button>
|
|
||||||
<button id="sub-results-export"
|
|
||||||
class="waves-effect
|
|
||||||
waves-light
|
|
||||||
btn-flat
|
|
||||||
hide"
|
|
||||||
type="submit">Sub-Results
|
|
||||||
<i class="material-icons left">file_download</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m2 l2" id="create">
|
|
||||||
<h6 style="margin-top: 0px;">Create</h6>
|
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s12">
|
|
||||||
<div class="switch">
|
|
||||||
Sub-Results creation:
|
|
||||||
<label>
|
|
||||||
Off
|
|
||||||
<input disabled
|
|
||||||
type="checkbox"
|
|
||||||
id="add-to-sub-results">
|
|
||||||
<span class="lever"></span>
|
|
||||||
On
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 hide" id="sub-results-match-ids-div">
|
|
||||||
<div class="input-field">
|
|
||||||
<p><span id="nr-marked-matches"></span> matches marked
|
|
||||||
for Sub-Results:</p>
|
|
||||||
<textarea id="sub-results-match-ids"
|
|
||||||
class="materialize-textarea"
|
|
||||||
disabled>
|
|
||||||
</textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m2 l2" id="display">
|
|
||||||
<h6 style="margin-top: 0px;">Display</h6>
|
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s12">
|
|
||||||
<form id="display-options-form">
|
|
||||||
{{ M.render_field(display_options_form.results_per_page,
|
|
||||||
material_icon='format_list_numbered') }}
|
|
||||||
{{ M.render_field(display_options_form.result_context,
|
|
||||||
material_icon='short_text') }}
|
|
||||||
{{ M.render_field(display_options_form.expert_mode) }}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m2 l2" id="anlysis">
|
|
||||||
<h6 style="margin-top: 0px;">Analysis</h6>
|
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s12">
|
|
||||||
<button id="placeholder1"
|
|
||||||
class="waves-effect
|
|
||||||
waves-light
|
|
||||||
btn-flat
|
|
||||||
disabled"
|
|
||||||
type="submit">Action One
|
|
||||||
<i class="material-icons left">cloud</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col s12">
|
|
||||||
<button id="placeholder2"
|
|
||||||
class="waves-effect
|
|
||||||
waves-light
|
|
||||||
btn-flat
|
|
||||||
disabled"
|
|
||||||
type="submit">Action Two
|
|
||||||
<i class="material-icons left">add</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m2 l2" id="cite">
|
|
||||||
<h6 style="margin-top: 0px;">Cite Nopaque</h6>
|
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s12">
|
|
||||||
<button id="placeholder1"
|
|
||||||
class="waves-effect
|
|
||||||
waves-light
|
|
||||||
btn-flat
|
|
||||||
disabled"
|
|
||||||
type="submit">Action One
|
|
||||||
<i class="material-icons left">cloud</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col s12">
|
|
||||||
<button id="placeholder2"
|
|
||||||
class="waves-effect
|
|
||||||
waves-light
|
|
||||||
btn-flat
|
|
||||||
disabled"
|
|
||||||
type="submit">Action Two
|
|
||||||
<i class="material-icons left">add</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Table showing the query results -->
|
|
||||||
<div class="col s12">
|
|
||||||
<ul class="pagination paginationTop"></ul>
|
|
||||||
<table class="responsive-table highlight">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="width: 2%">Nr.</th>
|
|
||||||
<th style="width: 3%">Title</th>
|
|
||||||
<th style="width: 25%">Left context</th>
|
|
||||||
<th style="width: 35%">Match</th>
|
|
||||||
<th style="width: 10%">Actions</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>
|
||||||
|
{% include 'tables/query_results.html.j2' %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Modals -->
|
<!-- Modals -->
|
||||||
|
{% include 'modals/show_metadata.html.j2' %}
|
||||||
<!-- Metadata modal -->
|
{% include 'modals/show_text_details.html.j2' %}
|
||||||
{% import "macros/query_result_macro.html.j2" as metadata %}
|
{% include 'modals/analysis_init.html.j2' %}
|
||||||
<div id="meta-data-modal" class="modal bottom-sheet">
|
{% include 'modals/export_query_results.html.j2' %}
|
||||||
<div class="section">
|
{% include 'modals/context_modal.html.j2' %}
|
||||||
<div class="col s12 right-align">
|
|
||||||
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% if query_metadata is defined %}
|
|
||||||
<div class="modal-content">
|
|
||||||
{{ metadata.show_metadata(query_metadata) }}
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<div class="modal-content" id="meta-data-modal-content">
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
<div class="modal-footer">
|
|
||||||
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Metadata text details modal -->
|
|
||||||
<div id="modal-text-details" class="modal modal-fixed-footer">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h4>Bibliographic data</h4>
|
|
||||||
<p id="bibliographic-data"></p>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Analysis init modal -->
|
|
||||||
<div class="modal no-autoinit" id="init-display">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h4>Initializing your corpus analysis session...</h4>
|
|
||||||
<div class="error-container hide show-on-error"></div>
|
|
||||||
<div class="hide progress show-while-waiting">
|
|
||||||
<div class="indeterminate"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Export query results modal -->
|
|
||||||
<div id="query-results-download-modal"
|
|
||||||
class="modal modal-fixed-footer no-autoinit">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h4>Download current query Results</h4>
|
|
||||||
<p>The results of the current query can be downloaded 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-json">
|
|
||||||
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"
|
|
||||||
id="download-results-csv">
|
|
||||||
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-light red btn">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Context modal used for detailed information about one match -->
|
|
||||||
<div id="context-modal" class="modal modal-fixed-footer">
|
|
||||||
<div class="modal-content">
|
|
||||||
<form>
|
|
||||||
<div class="row" style="margin-bottom: 0px; margin-top: -20px;">
|
|
||||||
<div class="col s12 m6 l6">
|
|
||||||
<div class="section">
|
|
||||||
<h6 style="margin-top: 0px;">Display</h6>
|
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
||||||
<div class="col s12" style="margin-bottom: 10px;" id="display-inspect">
|
|
||||||
{{ inspect_display_options_form.expert_mode_inspect.label.text }}
|
|
||||||
<div class="switch right">
|
|
||||||
<label>
|
|
||||||
{{ inspect_display_options_form.expert_mode_inspect() }}
|
|
||||||
<span class="lever"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12" style="margin-bottom: 10px;" id="create-inspect">
|
|
||||||
{{ inspect_display_options_form.highlight_sentences.label.text }}
|
|
||||||
<div class="switch right">
|
|
||||||
<label>
|
|
||||||
{{ inspect_display_options_form.highlight_sentences() }}
|
|
||||||
<span class="lever"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12" style="margin-bottom: 10px;">
|
|
||||||
Sentences around match
|
|
||||||
<div class="input-field right" style="margin-top: -2rem;
|
|
||||||
margin-bottom: -2rem;
|
|
||||||
height: 0px;">
|
|
||||||
<p class="range-field">
|
|
||||||
<input type="range"
|
|
||||||
id="context-sentences"
|
|
||||||
min="1"
|
|
||||||
max="10"
|
|
||||||
value="3" />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m6 l6">
|
|
||||||
<div class="section">
|
|
||||||
<h6 style="margin-top: 0px;">Create</h6>
|
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
||||||
<div class="col s12">
|
|
||||||
Add to Sub Results
|
|
||||||
<div class="secondary-content right" id="add-to-sub-results-from-inspect">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div class="row section">
|
|
||||||
<h5 style="margin-top: 0px;">Context for match:
|
|
||||||
<span id="context-match-nr"></span></h5>
|
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
||||||
<div class="col s12" >
|
|
||||||
<div id="context-results">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<a id="inspect-download-context" class="left waves-effect waves-light btn">
|
|
||||||
Export Single Context
|
|
||||||
<i class="material-icons right">file_download</i>
|
|
||||||
</a>
|
|
||||||
<a href="#!" class="modal-close waves-effect waves-light red btn">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="{{ url_for('static', filename='js/nopaque.CorpusAnalysisClient.js') }}">
|
<script src="{{ url_for('static', filename='js/nopaque.CorpusAnalysisClient.js') }}">
|
||||||
@ -668,90 +316,20 @@
|
|||||||
|
|
||||||
// ### Show corpus Metadata
|
// ### Show corpus Metadata
|
||||||
showMetaDataButton.onclick = () => {
|
showMetaDataButton.onclick = () => {
|
||||||
let tmpObject = {};
|
let metaDataObject = {};
|
||||||
Object.assign(tmpObject, results.metaData);
|
Object.assign(metaDataObject, results.metaData);
|
||||||
tmpObject["query"] = results.data.query;
|
metaDataObject["query"] = results.data.query;
|
||||||
tmpObject["text_lookup"] = results.data.text_lookup;
|
metaDataObject["text_lookup"] = results.data.text_lookup;
|
||||||
metaDataModalContent = document.getElementById("meta-data-modal-content");
|
metaDataModalContent = document.getElementById("meta-data-modal-content");
|
||||||
let table = `<div class="col s12">
|
metaDataModalContent.innerHTML = "";
|
||||||
<table class="responsive-table highlight">
|
let table = results.jsList.createMetaDataForModal(metaDataObject);
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Metadata Description</th>
|
|
||||||
<th>Value</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>`
|
|
||||||
for (let [outerKey, outerValue] of Object.entries(tmpObject)) {
|
|
||||||
table += `<tr>
|
|
||||||
<td>${outerKey}</td>`
|
|
||||||
if (outerKey === "corpus_all_texts" || outerKey === "text_lookup") {
|
|
||||||
table += `<td>
|
|
||||||
<table>`
|
|
||||||
for (let [innerKey, innerValue] of Object.entries(outerValue)) {
|
|
||||||
table += `<tr style="border-bottom: none;">
|
|
||||||
<td>
|
|
||||||
<i>${innerValue.title}</i> written
|
|
||||||
by <i>${innerValue.author}</i>
|
|
||||||
in <i>${innerValue.publishing_year}</i>
|
|
||||||
<a class="waves-effect
|
|
||||||
waves-light
|
|
||||||
btn
|
|
||||||
right
|
|
||||||
more-text-detials"
|
|
||||||
data-metadata-key="${outerKey}"
|
|
||||||
data-text-key="${innerKey}"
|
|
||||||
href="#modal-text-details">More
|
|
||||||
<i class="material-icons right"
|
|
||||||
data-metadata-key="${outerKey}"
|
|
||||||
data-text-key="${innerKey}">
|
|
||||||
info_outline
|
|
||||||
</i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>`
|
|
||||||
}
|
|
||||||
table += `</td>
|
|
||||||
</table>`
|
|
||||||
} else {
|
|
||||||
table += `<td>${outerValue}</td>`
|
|
||||||
}
|
|
||||||
table += `</tr>`
|
|
||||||
}
|
|
||||||
table += `</tbody>
|
|
||||||
</table>`
|
|
||||||
metaDataModalContent.insertAdjacentHTML("afterbegin", table);
|
metaDataModalContent.insertAdjacentHTML("afterbegin", table);
|
||||||
metaDataModal.open();
|
metaDataModal.open();
|
||||||
var moreTextDetailsButtons;
|
var moreTextDetailsButtons;
|
||||||
moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
|
moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
|
||||||
for (var btn of moreTextDetailsButtons) {
|
for (var btn of moreTextDetailsButtons) {
|
||||||
btn.onclick = () => {
|
btn.onclick = () => {
|
||||||
let modal = document.getElementById("modal-text-details");
|
results.jsList.createTextDetails(metaDataObject);
|
||||||
modal = M.Modal.init(modal, {"dismissible": true});
|
|
||||||
modal.open();
|
|
||||||
let metadataKey = event.target.dataset.metadataKey;
|
|
||||||
let textKey = event.target.dataset.textKey;
|
|
||||||
let textData = tmpObject[metadataKey][textKey];
|
|
||||||
let bibliographicData = document.getElementById("bibliographic-data");
|
|
||||||
bibliographicData.innerHTML = "";
|
|
||||||
let table = document.createElement("table");
|
|
||||||
for (let [key, value] of Object.entries(textData)) {
|
|
||||||
table.insertAdjacentHTML("afterbegin",
|
|
||||||
`
|
|
||||||
<tr>
|
|
||||||
<td>${key}</td>
|
|
||||||
<td>${value}</td>
|
|
||||||
</tr>
|
|
||||||
`);
|
|
||||||
}
|
|
||||||
table.insertAdjacentHTML("afterbegin",
|
|
||||||
`
|
|
||||||
<thead>
|
|
||||||
<th>Description</th>
|
|
||||||
<th>Value</th>
|
|
||||||
</thead>
|
|
||||||
`)
|
|
||||||
bibliographicData.appendChild(table);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
28
web/app/templates/interactions/analysis.html.j2
Normal file
28
web/app/templates/interactions/analysis.html.j2
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<!-- WIP. The user should be able to call several analysis tools from here.-->
|
||||||
|
|
||||||
|
<div class="col s12 m2 l2" id="anlysis">
|
||||||
|
<h6 style="margin-top: 0px;">Analysis</h6>
|
||||||
|
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s12">
|
||||||
|
<button id="placeholder1"
|
||||||
|
class="waves-effect
|
||||||
|
waves-light
|
||||||
|
btn-flat
|
||||||
|
disabled"
|
||||||
|
type="submit">Action One
|
||||||
|
<i class="material-icons left">cloud</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col s12">
|
||||||
|
<button id="placeholder2"
|
||||||
|
class="waves-effect
|
||||||
|
waves-light
|
||||||
|
btn-flat
|
||||||
|
disabled"
|
||||||
|
type="submit">Action Two
|
||||||
|
<i class="material-icons left">add</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
28
web/app/templates/interactions/cite.html.j2
Normal file
28
web/app/templates/interactions/cite.html.j2
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<!-- WIP. The user should be able to cite nopaque and the current service easily using these buttons.-->
|
||||||
|
|
||||||
|
<div class="col s12 m2 l2" id="cite">
|
||||||
|
<h6 style="margin-top: 0px;">Cite Nopaque</h6>
|
||||||
|
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s12">
|
||||||
|
<button id="placeholder1"
|
||||||
|
class="waves-effect
|
||||||
|
waves-light
|
||||||
|
btn-flat
|
||||||
|
disabled"
|
||||||
|
type="submit">Action One
|
||||||
|
<i class="material-icons left">cloud</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col s12">
|
||||||
|
<button id="placeholder2"
|
||||||
|
class="waves-effect
|
||||||
|
waves-light
|
||||||
|
btn-flat
|
||||||
|
disabled"
|
||||||
|
type="submit">Action Two
|
||||||
|
<i class="material-icons left">add</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
32
web/app/templates/interactions/create.html.j2
Normal file
32
web/app/templates/interactions/create.html.j2
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<!-- HTML to allow the user to create sub results from the current query
|
||||||
|
results.-->
|
||||||
|
|
||||||
|
<div class="col s12 m2 l2" id="create">
|
||||||
|
<h6 style="margin-top: 0px;">Create</h6>
|
||||||
|
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s12">
|
||||||
|
<div class="switch">
|
||||||
|
Sub-Results creation:
|
||||||
|
<label>
|
||||||
|
Off
|
||||||
|
<input disabled
|
||||||
|
type="checkbox"
|
||||||
|
id="add-to-sub-results">
|
||||||
|
<span class="lever"></span>
|
||||||
|
On
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col s12 hide" id="sub-results-match-ids-div">
|
||||||
|
<div class="input-field">
|
||||||
|
<p><span id="nr-marked-matches"></span> matches marked
|
||||||
|
for Sub-Results:</p>
|
||||||
|
<textarea id="sub-results-match-ids"
|
||||||
|
class="materialize-textarea"
|
||||||
|
disabled>
|
||||||
|
</textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
17
web/app/templates/interactions/display.html.j2
Normal file
17
web/app/templates/interactions/display.html.j2
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!-- HTML to allow the user to change how the results are being displayed.-->
|
||||||
|
|
||||||
|
<div class="col s12 m2 l2" id="display">
|
||||||
|
<h6 style="margin-top: 0px;">Display</h6>
|
||||||
|
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s12">
|
||||||
|
<form id="display-options-form">
|
||||||
|
{{ M.render_field(display_options_form.results_per_page,
|
||||||
|
material_icon='format_list_numbered') }}
|
||||||
|
{{ M.render_field(display_options_form.result_context,
|
||||||
|
material_icon='short_text') }}
|
||||||
|
{{ M.render_field(display_options_form.expert_mode) }}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
46
web/app/templates/interactions/export.html.j2
Normal file
46
web/app/templates/interactions/export.html.j2
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<!-- HTML to allow the user to export the current querey results in full or
|
||||||
|
the selected sub results.-->
|
||||||
|
|
||||||
|
<div class="col s12 m2 l2" id="export">
|
||||||
|
<h6 style="margin-top: 0px;">Export</h6>
|
||||||
|
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s12">
|
||||||
|
<button class="waves-effect
|
||||||
|
waves-light
|
||||||
|
btn-flat
|
||||||
|
disabled"
|
||||||
|
type="submit"
|
||||||
|
id="results-create">Create Results
|
||||||
|
<i class="material-icons left">build</i>
|
||||||
|
</button>
|
||||||
|
<button id="query-results-export"
|
||||||
|
class="waves-effect
|
||||||
|
waves-light
|
||||||
|
btn-flat
|
||||||
|
hide"
|
||||||
|
type="submit">Results
|
||||||
|
<i class="material-icons left">file_download</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col s12">
|
||||||
|
<button class="waves-effect
|
||||||
|
waves-light
|
||||||
|
btn-flat
|
||||||
|
hide
|
||||||
|
disabled"
|
||||||
|
type="submit"
|
||||||
|
id="sub-results-create">Create Sub-Results
|
||||||
|
<i class="material-icons left">build</i>
|
||||||
|
</button>
|
||||||
|
<button id="sub-results-export"
|
||||||
|
class="waves-effect
|
||||||
|
waves-light
|
||||||
|
btn-flat
|
||||||
|
hide"
|
||||||
|
type="submit">Sub-Results
|
||||||
|
<i class="material-icons left">file_download</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
44
web/app/templates/interactions/infos.html.j2
Normal file
44
web/app/templates/interactions/infos.html.j2
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<!-- HTML for showing infos about the current query or result. Also gives
|
||||||
|
the user the abiltiy to access the meta data for the current query or
|
||||||
|
result.-->
|
||||||
|
|
||||||
|
<div class="col s12 m2 l2" id="infos">
|
||||||
|
<h6 style="margin-top: 0px;">Infos</h6>
|
||||||
|
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s12">
|
||||||
|
<button id="show-metadata"
|
||||||
|
class="waves-effect
|
||||||
|
waves-light
|
||||||
|
btn-flat"
|
||||||
|
type="submit">Corpus Metadata
|
||||||
|
<i class="material-icons left">info_outline</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col s12">
|
||||||
|
<p>
|
||||||
|
<span id="received-match-count">
|
||||||
|
</span> of
|
||||||
|
<span id="match-count"></span>
|
||||||
|
matches loaded.
|
||||||
|
<br>
|
||||||
|
Matches occured in
|
||||||
|
<span id="text-lookup-count"></span>
|
||||||
|
corpus files:
|
||||||
|
<br>
|
||||||
|
<span id=text-titles></span>
|
||||||
|
</p>
|
||||||
|
{% if not imported %}
|
||||||
|
<p id="query-results-user-feedback">
|
||||||
|
<i class="material-icons">help</i>
|
||||||
|
The Server is still sending your results.
|
||||||
|
Functions like "Export Results" and "Match Inspect" will be
|
||||||
|
available after all matches have been loaded.
|
||||||
|
</p>
|
||||||
|
<div class="progress" id="query-results-progress">
|
||||||
|
<div class="determinate" id="query-results-determinate"></div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -1,7 +1,7 @@
|
|||||||
{% macro show_metadata(query_metadata) %}
|
{% macro show_metadata(query_metadata) %}
|
||||||
|
|
||||||
<div class="col s12">
|
<div class="col s12">
|
||||||
<table class="responsive-table highlight">
|
<table class="highlight">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Metadata Description</th>
|
<th>Metadata Description</th>
|
||||||
|
|||||||
12
web/app/templates/modals/analysis_init.html.j2
Normal file
12
web/app/templates/modals/analysis_init.html.j2
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!-- Analysis init modal. User feedback showing that the analysis session is
|
||||||
|
loading. -->
|
||||||
|
|
||||||
|
<div class="modal no-autoinit" id="init-display">
|
||||||
|
<div class="modal-content">
|
||||||
|
<h4>Initializing your corpus analysis session...</h4>
|
||||||
|
<div class="error-container hide show-on-error"></div>
|
||||||
|
<div class="hide progress show-while-waiting">
|
||||||
|
<div class="indeterminate"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
77
web/app/templates/modals/context_modal.html.j2
Normal file
77
web/app/templates/modals/context_modal.html.j2
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<!-- Modal showing detailed context info for one match. -->
|
||||||
|
|
||||||
|
<div id="context-modal" class="modal modal-fixed-footer">
|
||||||
|
<div class="modal-content">
|
||||||
|
<form>
|
||||||
|
<div class="row" style="margin-bottom: 0px; margin-top: -20px;">
|
||||||
|
<div class="col s12 m6 l6">
|
||||||
|
<div class="section">
|
||||||
|
<h6 style="margin-top: 0px;">Display</h6>
|
||||||
|
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||||
|
<div class="col s12" style="margin-bottom: 10px;" id="display-inspect">
|
||||||
|
{{ inspect_display_options_form.expert_mode_inspect.label.text }}
|
||||||
|
<div class="switch right">
|
||||||
|
<label>
|
||||||
|
{{ inspect_display_options_form.expert_mode_inspect() }}
|
||||||
|
<span class="lever"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col s12" style="margin-bottom: 10px;" id="create-inspect">
|
||||||
|
{{ inspect_display_options_form.highlight_sentences.label.text }}
|
||||||
|
<div class="switch right">
|
||||||
|
<label>
|
||||||
|
{{ inspect_display_options_form.highlight_sentences() }}
|
||||||
|
<span class="lever"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col s12" style="margin-bottom: 10px;">
|
||||||
|
Sentences around match
|
||||||
|
<div class="input-field right" style="margin-top: -2rem;
|
||||||
|
margin-bottom: -2rem;
|
||||||
|
height: 0px;">
|
||||||
|
<p class="range-field">
|
||||||
|
<input type="range"
|
||||||
|
id="context-sentences"
|
||||||
|
min="1"
|
||||||
|
max="10"
|
||||||
|
value="3" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% if not imported %}
|
||||||
|
<div class="col s12 m6 l6">
|
||||||
|
<div class="section">
|
||||||
|
<h6 style="margin-top: 0px;">Create</h6>
|
||||||
|
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||||
|
<div class="col s12">
|
||||||
|
Add to Sub Results
|
||||||
|
<div class="secondary-content right" id="add-to-sub-results-from-inspect">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div class="row section">
|
||||||
|
<h5 style="margin-top: 0px;">Context for match:
|
||||||
|
<span id="context-match-nr"></span></h5>
|
||||||
|
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||||
|
<div class="col s12" >
|
||||||
|
<div id="context-results">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<a id="inspect-download-context" class="left waves-effect waves-light btn">
|
||||||
|
Export Single Context
|
||||||
|
<i class="material-icons right">file_download</i>
|
||||||
|
</a>
|
||||||
|
<a href="#!" class="modal-close waves-effect waves-light red btn">Close</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
54
web/app/templates/modals/export_query_results.html.j2
Normal file
54
web/app/templates/modals/export_query_results.html.j2
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<!-- Export query results modal. Allos the user to download the results in
|
||||||
|
different file formats. WIP -->
|
||||||
|
|
||||||
|
<div id="query-results-download-modal"
|
||||||
|
class="modal modal-fixed-footer no-autoinit">
|
||||||
|
<div class="modal-content">
|
||||||
|
<h4>Download your results</h4>
|
||||||
|
<p>Download your results or sub results in different file formats like JSON
|
||||||
|
or CSV, so you can reuse them in Excel or other software.
|
||||||
|
You can also simply publish your results as raw data using one of these
|
||||||
|
formats. We recommend JSON!
|
||||||
|
</p>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>JSON</td>
|
||||||
|
<td>
|
||||||
|
<a class="btn waves-effect waves-light" id="download-results-json">
|
||||||
|
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"
|
||||||
|
id="download-results-csv">
|
||||||
|
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-light red btn">Close</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
22
web/app/templates/modals/show_metadata.html.j2
Normal file
22
web/app/templates/modals/show_metadata.html.j2
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<!-- Modal showing the meta data for the current query results or the imported
|
||||||
|
results -->
|
||||||
|
|
||||||
|
{% import "macros/query_result_macro.html.j2" as metadata %}
|
||||||
|
<div id="meta-data-modal" class="modal bottom-sheet">
|
||||||
|
<div class="section">
|
||||||
|
<div class="col s12 right-align">
|
||||||
|
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% if query_metadata is defined %}
|
||||||
|
<div class="modal-content">
|
||||||
|
{{ metadata.show_metadata(query_metadata) }}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div class="modal-content" id="meta-data-modal-content">
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<div class="modal-footer">
|
||||||
|
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
12
web/app/templates/modals/show_text_details.html.j2
Normal file
12
web/app/templates/modals/show_text_details.html.j2
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!-- Modal to show all metadata of one text/corpus file. Used in conjunction
|
||||||
|
with the show_meta_data.html.j2 template.-->
|
||||||
|
|
||||||
|
<div id="modal-text-details" class="modal modal-fixed-footer">
|
||||||
|
<div class="modal-content">
|
||||||
|
<h4>Bibliographic data</h4>
|
||||||
|
<p id="bibliographic-data"></p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -3,6 +3,7 @@
|
|||||||
{% set headline = ' ' %}
|
{% set headline = ' ' %}
|
||||||
|
|
||||||
{% set full_width = True %}
|
{% set full_width = True %}
|
||||||
|
{% set imported = True %}
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
|
|
||||||
@ -34,169 +35,21 @@
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-content" id="result-list" style="overflow: hidden;">
|
<div class="card-content" id="result-list" style="overflow: hidden;">
|
||||||
<div class=" row show-on-success">
|
<div class=" row show-on-success">
|
||||||
<div class="col s12 m2 l2" id="infos">
|
{% include 'interactions/infos.html.j2' %}
|
||||||
<h6 style="margin-top: 0px;">Infos</h6>
|
{% include 'interactions/display.html.j2' %}
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
{% include 'interactions/analysis.html.j2' %}
|
||||||
<div class="row">
|
{% include 'interactions/cite.html.j2' %}
|
||||||
<div class="col s12">
|
|
||||||
<button id="show-metadata"
|
|
||||||
class="waves-effect
|
|
||||||
waves-light
|
|
||||||
btn-flat"
|
|
||||||
type="submit">Corpus Metadata
|
|
||||||
<i class="material-icons left">info_outline</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col s12">
|
|
||||||
<p>
|
|
||||||
<span id="received-match-count">
|
|
||||||
</span> of
|
|
||||||
<span id="match-count"></span>
|
|
||||||
matches loaded.
|
|
||||||
<br>
|
|
||||||
Matches occured in
|
|
||||||
<span id="text-lookup-count"></span>
|
|
||||||
corpus files:
|
|
||||||
<br>
|
|
||||||
<span id=text-titles></span>
|
|
||||||
</p>
|
|
||||||
<p id="query-results-user-feedback">
|
|
||||||
<i class="material-icons">help</i>
|
|
||||||
The Server is still sending your results.
|
|
||||||
Functions like "Export Results" and "Match Inspect" will be
|
|
||||||
available after all matches have been loaded.
|
|
||||||
</p>
|
|
||||||
<div class="progress" id="query-results-progress">
|
|
||||||
<div class="determinate" id="query-results-determinate"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m2 l2" id="display">
|
|
||||||
<h6 style="margin-top: 0px;">Display</h6>
|
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s12">
|
|
||||||
<form id="display-options-form">
|
|
||||||
{{ M.render_field(display_options_form.results_per_page,
|
|
||||||
material_icon='format_list_numbered') }}
|
|
||||||
{{ M.render_field(display_options_form.result_context,
|
|
||||||
material_icon='short_text') }}
|
|
||||||
{{ M.render_field(display_options_form.expert_mode) }}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Table showing the query results -->
|
|
||||||
<div class="col s12">
|
|
||||||
<ul class="pagination paginationTop"></ul>
|
|
||||||
<table class="responsive-table highlight">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="width: 2%">Nr.</th>
|
|
||||||
<th style="width: 3%">Title</th>
|
|
||||||
<th style="width: 25%">Left context</th>
|
|
||||||
<th style="width: 35%">Match</th>
|
|
||||||
<th style="width: 10%">Actions</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>
|
||||||
|
{% include 'tables/query_results.html.j2' %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Metadata modal -->
|
<!-- Modals -->
|
||||||
{% import "macros/query_result_macro.html.j2" as metadata %}
|
{% include 'modals/show_metadata.html.j2' %}
|
||||||
<div id="metadata-modal" class="modal bottom-sheet">
|
{% include 'modals/show_text_details.html.j2' %}
|
||||||
<div class="section">
|
{% include 'modals/context_modal.html.j2' %}
|
||||||
<div class="col s12 right-align">
|
|
||||||
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% if query_metadata is defined %}
|
|
||||||
<div class="modal-content">
|
|
||||||
{{ metadata.show_metadata(query_metadata) }}
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="metaDataModal">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
<div class="modal-footer">
|
|
||||||
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Context modal used for detailed information about one match -->
|
|
||||||
<div id="context-modal" class="modal modal-fixed-footer">
|
|
||||||
<div class="modal-content">
|
|
||||||
<form>
|
|
||||||
<div class="row" style="margin-bottom: 0px; margin-top: -20px;">
|
|
||||||
<div class="col s12 m6 l6">
|
|
||||||
<div class="section">
|
|
||||||
<h6 style="margin-top: 0px;">Display</h6>
|
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
||||||
<div class="col s12" style="margin-bottom: 10px;" id="display-inspect">
|
|
||||||
{{ inspect_display_options_form.expert_mode_inspect.label.text }}
|
|
||||||
<div class="switch right">
|
|
||||||
<label>
|
|
||||||
{{ inspect_display_options_form.expert_mode_inspect() }}
|
|
||||||
<span class="lever"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12" style="margin-bottom: 10px;" id="create-inspect">
|
|
||||||
{{ inspect_display_options_form.highlight_sentences.label.text }}
|
|
||||||
<div class="switch right">
|
|
||||||
<label>
|
|
||||||
{{ inspect_display_options_form.highlight_sentences() }}
|
|
||||||
<span class="lever"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12" style="margin-bottom: 10px;">
|
|
||||||
Sentences around match
|
|
||||||
<div class="input-field right" style="margin-top: -2rem;
|
|
||||||
margin-bottom: -2rem;
|
|
||||||
height: 0px;">
|
|
||||||
<p class="range-field">
|
|
||||||
<input type="range"
|
|
||||||
id="context-sentences"
|
|
||||||
min="1"
|
|
||||||
max="10"
|
|
||||||
value="3" />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div class="row section">
|
|
||||||
<h5 style="margin-top: 0px;">Context for match:
|
|
||||||
<span id="context-match-nr"></span></h5>
|
|
||||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
|
||||||
<div class="col s12" >
|
|
||||||
<div id="context-results">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
{# <a id="inspect-download-context" class="left waves-effect waves-light btn">
|
|
||||||
Export Single Context
|
|
||||||
<i class="material-icons right">file_download</i>
|
|
||||||
</a> #}
|
|
||||||
<a href="#!" class="modal-close waves-effect waves-light red btn">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="{{ url_for('static', filename='js/nopaque.Results.js') }}">
|
<script src="{{ url_for('static', filename='js/nopaque.Results.js') }}">
|
||||||
</script>
|
</script>
|
||||||
@ -208,7 +61,6 @@
|
|||||||
// ###### global variables ######
|
// ###### global variables ######
|
||||||
var full_result_json;
|
var full_result_json;
|
||||||
var result_json;
|
var result_json;
|
||||||
var queryResultsDeterminateElement; // The progress bar for recieved results
|
|
||||||
var receivedMatchCountElement; // Nr. of loaded matches will be displayed in this element
|
var receivedMatchCountElement; // Nr. of loaded matches will be displayed in this element
|
||||||
var textLookupCountElement // Nr of texts the matches occured in will be shown in this element
|
var textLookupCountElement // Nr of texts the matches occured in will be shown in this element
|
||||||
var textTitlesElement; // matched text titles
|
var textTitlesElement; // matched text titles
|
||||||
@ -231,7 +83,6 @@
|
|||||||
// ###### Initializing variables ######
|
// ###### Initializing variables ######
|
||||||
displayOptionsFormElement = document.getElementById("display-options-form");
|
displayOptionsFormElement = document.getElementById("display-options-form");
|
||||||
resultItems = [];
|
resultItems = [];
|
||||||
queryResultsDeterminateElement = document.getElementById("query-results-determinate");
|
|
||||||
receivedMatchCountElement = document.getElementById("received-match-count");
|
receivedMatchCountElement = document.getElementById("received-match-count");
|
||||||
textLookupCountElement = document.getElementById("text-lookup-count");
|
textLookupCountElement = document.getElementById("text-lookup-count");
|
||||||
textTitlesElement = document.getElementById("text-titles");
|
textTitlesElement = document.getElementById("text-titles");
|
||||||
|
|||||||
21
web/app/templates/tables/query_results.html.j2
Normal file
21
web/app/templates/tables/query_results.html.j2
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<!-- Table showing the query results of the current query or the imported
|
||||||
|
results. -->
|
||||||
|
|
||||||
|
<div class="col s12">
|
||||||
|
<ul class="pagination paginationTop"></ul>
|
||||||
|
<table class="responsive-table highlight">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 2%">Nr.</th>
|
||||||
|
<th style="width: 3%">Title</th>
|
||||||
|
<th style="width: 25%">Left context</th>
|
||||||
|
<th style="width: 35%">Match</th>
|
||||||
|
<th style="width: 10%">Actions</th>
|
||||||
|
<th style="width: 25%">Right Context</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="list" id="query-results">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<ul class="pagination paginationBottom"></ul>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user