Soem clean up and restructure

This commit is contained in:
Stephan Porada 2020-07-21 13:40:17 +02:00
parent 7dfc3ab877
commit 1b853f3338
17 changed files with 509 additions and 604 deletions

View File

@ -112,8 +112,6 @@ function queryRenderResults(payload, imported=false) {
} else {
results.data["cpos_ranges"] = false;
}
// update progress bar
queryResultsDeterminateElement.style.width = `${payload.progress}%`;
// building the result list js list from incoming chunk
resultItems = []; // list for holding every row item
// get infos for full match row
@ -121,6 +119,8 @@ function queryRenderResults(payload, imported=false) {
resultItems.push({...match, ...{"index": index + results.data.matches.length}});
}
if (!imported) {
// update progress bar
queryResultsDeterminateElement.style.width = `${payload.progress}%`;
results.jsList.add(resultItems, (items) => {
for (let item of items) {
item.elm = results.jsList.createResultRowElement(item, payload.chunk);

View File

@ -1015,4 +1015,87 @@ class ResultsList extends List {
}
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);
}
}

View File

@ -3,6 +3,7 @@
{% set headline = ' ' %}
{% set full_width = True %}
{% set imported = False %}
{% block page_content %}
<div class="col s12">
@ -42,378 +43,25 @@
<div class="card-content" id="result-list" style="overflow: hidden;">
<div class="error-container hide show-on-error"></div>
<div class=" row hide show-on-success">
<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>
<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>
{% include 'interactions/infos.html.j2' %}
{% include 'interactions/export.html.j2' %}
{% include 'interactions/create.html.j2' %}
{% include 'interactions/display.html.j2' %}
{% include 'interactions/analysis.html.j2' %}
{% include 'interactions/cite.html.j2' %}
</div>
{% include 'tables/query_results.html.j2' %}
</div>
</div>
</div>
<!-- Modals -->
<!-- Metadata modal -->
{% 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>
<!-- 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>
{% include 'modals/show_metadata.html.j2' %}
{% include 'modals/show_text_details.html.j2' %}
{% include 'modals/analysis_init.html.j2' %}
{% include 'modals/export_query_results.html.j2' %}
{% include 'modals/context_modal.html.j2' %}
<script src="{{ url_for('static', filename='js/nopaque.CorpusAnalysisClient.js') }}">
@ -668,90 +316,20 @@
// ### Show corpus Metadata
showMetaDataButton.onclick = () => {
let tmpObject = {};
Object.assign(tmpObject, results.metaData);
tmpObject["query"] = results.data.query;
tmpObject["text_lookup"] = results.data.text_lookup;
let metaDataObject = {};
Object.assign(metaDataObject, results.metaData);
metaDataObject["query"] = results.data.query;
metaDataObject["text_lookup"] = results.data.text_lookup;
metaDataModalContent = document.getElementById("meta-data-modal-content");
let table = `<div class="col s12">
<table class="responsive-table highlight">
<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.innerHTML = "";
let table = results.jsList.createMetaDataForModal(metaDataObject);
metaDataModalContent.insertAdjacentHTML("afterbegin", table);
metaDataModal.open();
var moreTextDetailsButtons;
moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
for (var btn of moreTextDetailsButtons) {
btn.onclick = () => {
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 = 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);
results.jsList.createTextDetails(metaDataObject);
}
}
};

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View File

@ -1,7 +1,7 @@
{% macro show_metadata(query_metadata) %}
<div class="col s12">
<table class="responsive-table highlight">
<table class="highlight">
<thead>
<tr>
<th>Metadata Description</th>

View 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>

View 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>

View 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>

View 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>

View 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>

View File

@ -3,6 +3,7 @@
{% set headline = ' ' %}
{% set full_width = True %}
{% set imported = True %}
{% block page_content %}
@ -34,169 +35,21 @@
<div class="card">
<div class="card-content" id="result-list" style="overflow: hidden;">
<div class=" row show-on-success">
<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>
<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>
{% include 'interactions/infos.html.j2' %}
{% include 'interactions/display.html.j2' %}
{% include 'interactions/analysis.html.j2' %}
{% include 'interactions/cite.html.j2' %}
</div>
{% include 'tables/query_results.html.j2' %}
</div>
</div>
</div>
<!-- Metadata modal -->
{% import "macros/query_result_macro.html.j2" as metadata %}
<div id="metadata-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">
<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>
<!-- Modals -->
{% include 'modals/show_metadata.html.j2' %}
{% include 'modals/show_text_details.html.j2' %}
{% include 'modals/context_modal.html.j2' %}
<!-- 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>
@ -208,7 +61,6 @@
// ###### global variables ######
var full_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 textLookupCountElement // Nr of texts the matches occured in will be shown in this element
var textTitlesElement; // matched text titles
@ -231,7 +83,6 @@
// ###### Initializing variables ######
displayOptionsFormElement = document.getElementById("display-options-form");
resultItems = [];
queryResultsDeterminateElement = document.getElementById("query-results-determinate");
receivedMatchCountElement = document.getElementById("received-match-count");
textLookupCountElement = document.getElementById("text-lookup-count");
textTitlesElement = document.getElementById("text-titles");

View 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>