sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-04-06 01:04:22 +00:00
Code Issues Projects Releases Wiki Activity

Rework corpora/query results

Browse Source
This commit is contained in:
Patrick Jentsch 2020-10-28 16:13:41 +01:00
parent 9c36ed3cc8
commit ffa7a7812a
5 changed files with 280 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/corpora/views.py
View File

@ -51,8 +51,7 @@ def corpus(corpus_id):
title=corpus_file.title, title=corpus_file.title,
publishing_year=corpus_file.publishing_year, publishing_year=corpus_file.publishing_year,
corpus_id=corpus.id, corpus_id=corpus.id,
id=corpus_file.id id=corpus_file.id)
)
for corpus_file in corpus.files] for corpus_file in corpus.files]
return render_template('corpora/corpus.html.j2', return render_template('corpora/corpus.html.j2',
corpus=corpus, corpus=corpus,

8
web/app/templates/corpora/interactions/display.html.j2
View File

@ -1,14 +1,15 @@
<!-- HTML to allow the user to change how the results are being displayed.--> {% import 'materialize/wtf.html.j2' as wtf %}
<!-- HTML to allow the user to change how the results are being displayed.-->
<div class="col s12 m3 l2" id="display"> <div class="col s12 m3 l2" id="display">
<h6 style="margin-top: 0px;">Display</h6> <h6 style="margin-top: 0px;">Display</h6>
<div class="divider" style="margin-bottom: 10px;"></div> <div class="divider" style="margin-bottom: 10px;"></div>
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<form id="display-options-form"> <form id="display-options-form">
{{ M.render_field(display_options_form.results_per_page, {{ wtf.render_field(display_options_form.results_per_page,
material_icon='format_list_numbered') }} material_icon='format_list_numbered') }}
{{ M.render_field(display_options_form.result_context, {{ wtf.render_field(display_options_form.result_context,
material_icon='short_text') }} material_icon='short_text') }}
<div class="col s12" style="line-height: 38px;"> <div class="col s12" style="line-height: 38px;">
<div class="col s8"> <div class="col s8">
@ -27,4 +28,3 @@
</div> </div>
</div> </div>
</div> </div>

53
web/app/templates/corpora/query_results/add_query_result.html.j2
View File

@ -1,33 +1,42 @@
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% import 'materialize/wtf.html.j2' as wtf %}
{% block page_content %} {% block page_content %}
<div class="col s12 m4"> <div class="container">
<p>Fill out the following form to upload and view your exported query data from the corpus analsis.</p> <div class="row">
<a class="waves-effect waves-light btn" href="{{ url_for('main.dashboard') }}"><i class="material-icons left">arrow_back</i>Back to dashboard</a> <div class="col s12">
</div> <h1 id="title">{{ title }}</h1>
</div>
<div class="col s12 m8"> <div class="col s12 m4">
<form class="nopaque-submit-form" data-progress-modal="progress-modal"> <p>Fill out the following form to upload and view your exported query data from the corpus analsis.</p>
<div class="card"> <a class="waves-effect waves-light btn" href="{{ url_for('main.dashboard') }}"><i class="material-icons left">arrow_back</i>Back to dashboard</a>
<div class="card-content"> </div>
{{ add_query_result_form.hidden_tag() }}
<div class="row"> <div class="col s12 m8">
<div class="col s12 m4"> <form class="nopaque-submit-form" data-progress-modal="progress-modal">
{{ M.render_field(add_query_result_form.title, data_length='32', material_icon='title') }} <div class="card">
<div class="card-content">
{{ add_query_result_form.hidden_tag() }}
<div class="row">
<div class="col s12 m4">
{{ wtf.render_field(add_query_result_form.title, data_length='32', material_icon='title') }}
</div>
<div class="col s12 m8">
{{ wtf.render_field(add_query_result_form.description, data_length='255', material_icon='description') }}
</div>
<div class="col s12">
{{ wtf.render_field(add_query_result_form.file, accept='.json', placeholder='Choose your .json file') }}
</div>
</div>
</div> </div>
<div class="col s12 m8"> <div class="card-action right-align">
{{ M.render_field(add_query_result_form.description, data_length='255', material_icon='description') }} {{ wtf.render_field(add_query_result_form.submit, material_icon='send') }}
</div>
<div class="col s12">
{{ M.render_field(add_query_result_form.file, accept='.json', placeholder='Choose your .json file') }}
</div> </div>
</div> </div>
</div> </form>
<div class="card-action right-align">
{{ M.render_field(add_query_result_form.submit, material_icon='send') }}
</div>
</div> </div>
</form> </div>
</div> </div>
<div id="progress-modal" class="modal"> <div id="progress-modal" class="modal">

328
web/app/templates/corpora/query_results/inspect.html.j2
View File

@ -1,64 +1,70 @@
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% from '_colors.html.j2' import colors %}
{% set headline = ' ' %} {% set scheme_primary_color = colors.corpus_analysis_darken %}
{% set scheme_secondary_color = colors.corpus_analysis %}
{% set full_width = True %} {% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}
{% block page_content %} {% block page_content %}
{{ Macros.insert_color_scheme(corpus_analysis_color_darken) }} <div class="row">
<div class="col s12"> <div class="col s12">
<div class="card"> <div class="card">
<div class="card-content" style="padding-top: 5px; <div class="card-content" style="padding-top: 5px;
padding-bottom: 0px;"> padding-bottom: 0px;">
<!-- Query form --> <!-- Query form -->
<div class="row"> <div class="row">
<form id="query-form"> <form id="query-form">
<div class="col s12 m10"> <div class="col s12 m10">
<div class="input-field"> <div class="input-field">
<i class="material-icons prefix">search</i> <i class="material-icons prefix">search</i>
<input disabled value="{{ query_metadata.query|escape }}" id="disabled" type="text" class="validate"> <input disabled value="{{ query_metadata.query|escape }}" id="disabled" type="text" class="validate">
<label for="disabled">Query</label> <label for="disabled">Query</label>
</div>
</div> </div>
</div> <div class="col s12 m2 right-align">
<div class="col s12 m2 right-align"> <br class="hide-on-small-only">
<br class="hide-on-small-only"> </div>
</div> </form>
</form> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- entire results div/card -->
<!-- entire results div/card --> <div class="col s12" id="query-display">
<div class="col s12" id="query-display"> <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" id="interactions-menu">
<div class="row" id="interactions-menu"> {% include 'corpora/interactions/infos.html.j2' %}
{% include 'corpora/interactions/infos.html.j2' %} {% include 'corpora/interactions/display.html.j2' %}
{% include 'corpora/interactions/display.html.j2' %} {% include 'corpora/interactions/analysis.html.j2' %}
{% include 'corpora/interactions/analysis.html.j2' %} {% include 'corpora/interactions/cite.html.j2' %}
{% include 'corpora/interactions/cite.html.j2' %} <div class="hide">
<div class="hide"> {# Hide those because they are not needed when inspecting results.
{# Hide those because they are not needed when inspecting results. But some of their elements are being asked for by the client. #}
But some of their elements are being asked for by the client. #} {% include 'corpora/interactions/export.html.j2' %}
{% include 'corpora/interactions/export.html.j2' %} {% include 'corpora/interactions/create.html.j2' %}
{% include 'corpora/interactions/create.html.j2' %} </div>
</div> </div>
{% include 'tables/query_results.html.j2' %}
</div> </div>
{% include 'tables/query_results.html.j2' %}
</div> </div>
</div> </div>
</div> </div>
<!-- Scroll to top element --> {# Import modals #}
{% include 'corpora/interactions/scroll_to_top.html.j2' %}
<!-- Modals -->
{% include 'modals/show_metadata.html.j2' %} {% include 'modals/show_metadata.html.j2' %}
{% include 'modals/show_corpus_files.html.j2' %} {% include 'modals/show_corpus_files.html.j2' %}
{% include 'modals/context_modal.html.j2' %} {% include 'modals/context_modal.html.j2' %}
<!-- Scroll to top element -->
{% include 'corpora/interactions/scroll_to_top.html.j2' %}
{% endblock page_content %}
{% block scripts %}
{{ super() }}
<script type="module"> <script type="module">
/** /**
* First Phase: * First Phase:
@ -117,125 +123,123 @@ import {
* Second Phase: * Second Phase:
* Asynchronus and event driven code. * Asynchronus and event driven code.
*/ */
document.addEventListener("DOMContentLoaded", () => { /**
* Initializing the results object as a model holding all the data of a
* query. Also holds the metadata of one query and results data.
* After that initialize the ResultsList object as the View handeling the
* representation of the data for the user.
*/
let results = new Results();
let resultsList = new ResultsList('result-list', ResultsList.options);
// Import results data from json file.
const resultsJson = {{ query_result_file_content|tojson|safe }};
// Import metadata from DB passed to this view
const metaDataJson = {{ query_metadata|tojson|safe }};
// Initialize the client with dynamicMode set to false.
const client = new Client({'logging': true,
'dynamicMode': false,
'fullContext': metaDataJson.fullContext});
/** /**
* Initializing the results object as a model holding all the data of a * Register needed listeners and their callbacks. But we will
* query. Also holds the metadata of one query and results data. * just call the attached callbacks manually. Because dynamicMode is false.
* After that initialize the ResultsList object as the View handeling the */
* representation of the data for the user. const listenForQueryStatus = new ClientEventListener('corpus_analysis_query',
*/ recieveQueryStatus);
let results = new Results(); const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
let resultsList = new ResultsList('result-list', ResultsList.options); prepareQueryData,
// Import results data from json file.
const resultsJson = {{ query_result_file_content|tojson|safe }};
// Import metadata from DB passed to this view
const metaDataJson = {{ query_metadata|tojson|safe }};
// Initialize the client with dynamicMode set to false.
const client = new Client({'logging': true,
'dynamicMode': false,
'fullContext': metaDataJson.fullContext});
/**
* Register needed listeners and their callbacks. But we will
* just call the attached callbacks manually. Because dynamicMode is false.
*/
const listenForQueryStatus = new ClientEventListener('corpus_analysis_query',
recieveQueryStatus);
const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
prepareQueryData,
[client, results]);
listenForQueryStatus.setCallbacks([queryStatusCallback]);
const listenForQueryData = new ClientEventListener('corpus_analysis_query_results',
recieveQueryData);
const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
saveQueryData,
[client, results]); [client, results]);
listenForQueryData.setCallbacks([queryDataCallback]); listenForQueryStatus.setCallbacks([queryStatusCallback]);
// Set the event listeners const listenForQueryData = new ClientEventListener('corpus_analysis_query_results',
client.setSocketEventListeners([ recieveQueryData);
listenForQueryStatus, const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
listenForQueryData, saveQueryData,
]); [client, results]);
/** listenForQueryData.setCallbacks([queryDataCallback]);
* Register resultsList listeners listening to notification events emitted by // Set the event listeners
* the Client class. client.setSocketEventListeners([
*/ listenForQueryStatus,
const listenForClientNotification = new ViewEventListener('notify-view', listenForQueryData,
recieveClientNotification); ]);
/** /**
* Register vanilla Javascript events to the resultList listening for button * Register resultsList listeners listening to notification events emitted by
* clicks etc. done by the user. * the Client class.
* Get all needed HTMLElements for those event listeners before. */
*/ const listenForClientNotification = new ViewEventListener('notify-view',
resultsList.getHTMLElements([ recieveClientNotification);
'.add-btn', /**
'.pagination', * Register vanilla Javascript events to the resultList listening for button
'#display-options-form-expert_mode', * clicks etc. done by the user.
'#display-options-form-result_context', * Get all needed HTMLElements for those event listeners before.
'#display-options-form-results_per_page', */
'#full-results-create', resultsList.getHTMLElements([
'#full-results-export', '.add-btn',
'#inspect-results-export', '.pagination',
'#meta-data-modal-content', '#display-options-form-expert_mode',
['#meta-data-modal', { '#display-options-form-result_context',
'preventScrolling': false, '#display-options-form-results_per_page',
'opacity': 0.0, '#full-results-create',
'dismissible': false, '#full-results-export',
'onOpenEnd': (() => {document.querySelector(".modal-overlay").remove()}) '#inspect-results-export',
} '#meta-data-modal-content',
], ['#meta-data-modal', {
'#query-results-table', 'preventScrolling': false,
'#show-meta-data', 'opacity': 0.0,
'#show-corpus-files', 'dismissible': false,
'#show-corpus-files-modal-content', 'onOpenEnd': (() => {document.querySelector(".modal-overlay").remove()})
['#show-corpus-files-modal', { }
'preventScrolling': false, ],
'opacity': 0.0, '#query-results-table',
'dismissible': false, '#show-meta-data',
'onOpenEnd': (() => {document.querySelector(".modal-overlay").remove()}) '#show-corpus-files',
} '#show-corpus-files-modal-content',
], ['#show-corpus-files-modal', {
'#sub-results-create', 'preventScrolling': false,
'#sub-results-export', 'opacity': 0.0,
]); 'dismissible': false,
let args = [resultsList, results, client]; 'onOpenEnd': (() => {document.querySelector(".modal-overlay").remove()})
const listenForPageNavigation = new ViewEventListener('page-navigation', }
pageNavigation, ],
args); '#sub-results-create',
const listenForExpertModeSwitch = new ViewEventListener('expert-mode', '#sub-results-export',
expertModeSwitch, ]);
args); let args = [resultsList, results, client];
const listenForActionButtons = new ViewEventListener('action-buttons', const listenForPageNavigation = new ViewEventListener('page-navigation',
actionButtons, pageNavigation,
args); args);
const listenForDisplayOptions = new ViewEventListener('display-otions', const listenForExpertModeSwitch = new ViewEventListener('expert-mode',
displayOptions, expertModeSwitch,
args); args);
const listenForShowMetaData = new ViewEventListener('show-meta-data', const listenForActionButtons = new ViewEventListener('action-buttons',
showMetaData, actionButtons,
args); args);
const listenForShowCorpusFiles = new ViewEventListener('show-corpus-files', const listenForDisplayOptions = new ViewEventListener('display-otions',
showCorpusFiles, displayOptions,
args); args);
// Set and load defined listeners const listenForShowMetaData = new ViewEventListener('show-meta-data',
resultsList.setViewEventListeners([ showMetaData,
listenForClientNotification, args);
listenForPageNavigation, const listenForShowCorpusFiles = new ViewEventListener('show-corpus-files',
listenForExpertModeSwitch, showCorpusFiles,
listenForActionButtons, args);
listenForDisplayOptions, // Set and load defined listeners
listenForShowMetaData, resultsList.setViewEventListeners([
listenForShowCorpusFiles, listenForClientNotification,
]); listenForPageNavigation,
resultsList.loadViewEventListeners(); listenForExpertModeSwitch,
// Hide buttons which are not needed when just inspecting results listenForActionButtons,
resultsList.inspectResultsExport.classList.add('hide'); listenForDisplayOptions,
// Execute client event listener callbacks manually because dynamicMode is false listenForShowMetaData,
client.eventListeners['corpus_analysis_query'].executeCallbacks([resultsJson]); listenForShowCorpusFiles,
// Save meta data to results after the init callback from line above ]);
results.metaData = metaDataJson; resultsList.loadViewEventListeners();
client.eventListeners['corpus_analysis_query_results'].executeCallbacks([resultsJson]); // Hide buttons which are not needed when just inspecting results
// Enable scroll to Top functionality. resultsList.inspectResultsExport.classList.add('hide');
scrollToTop('#headline', '#menu-scroll-to-top-div'); // Execute client event listener callbacks manually because dynamicMode is false
}); client.eventListeners['corpus_analysis_query'].executeCallbacks([resultsJson]);
// Save meta data to results after the init callback from line above
results.metaData = metaDataJson;
client.eventListeners['corpus_analysis_query_results'].executeCallbacks([resultsJson]);
// Enable scroll to Top functionality.
scrollToTop('#headline', '#menu-scroll-to-top-div');
</script> </script>
{% endblock %} {% endblock %}

143
web/app/templates/corpora/query_results/query_result.html.j2
View File

@ -1,77 +1,88 @@
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% from '_colors.html.j2' import colors %}
{% set scheme_primary_color = colors.corpus_analysis_darken %}
{% set scheme_secondary_color = colors.corpus_analysis %}
{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}
{% block page_content %} {% block page_content %}
{{ Macros.insert_color_scheme(corpus_analysis_color_darken) }} <div class="container">
<div class="col s12"> <div class="row">
<p>Below the metadata for the results from the Corpus <div class="col s12">
<i>{{ query_result.query_metadata.corpus_name }}</i> generated with the query <h1 id="title">{{ title }}</h1>
<i>{{ query_result.query_metadata.query }}</i> are shown.
</p>
</div>
<div class="col s12">
<div class="card">
<div class="card-action right-align">
<a class="waves-effect waves-light btn left-align" href="{{ url_for('services.service', service='corpus_analysis') }}">Back To Overview<i class="material-icons right">arrow_back</i></a>
<a class="waves-effect waves-light btn" href="{{ url_for('corpora.inspect_query_result', query_result_id=query_result.id) }}">Inspect Results<i class="material-icons right">search</i></a>
</div> </div>
<div class="card-content" id="results">
<table class="responsive-table highlight"> <div class="col s12">
<thead> <p>Below the metadata for the results from the Corpus
<tr> <i>{{ query_result.query_metadata.corpus_name }}</i> generated with the query
<th>Metadata Description</th> <i>{{ query_result.query_metadata.query }}</i> are shown.
<th>Value</th> </p>
</tr> </div>
</thead>
<tbody> <div class="col s12">
{% for pair in query_result.query_metadata|dictsort %} <div class="card">
<tr> <div class="card-action right-align">
<td>{{ pair[0] }}</td> <a class="waves-effect waves-light btn left-align" href="{{ url_for('services.service', service='corpus_analysis') }}">Back To Overview<i class="material-icons right">arrow_back</i></a>
{% if pair[0] == 'corpus_all_texts' <a class="waves-effect waves-light btn" href="{{ url_for('corpora.inspect_query_result', query_result_id=query_result.id) }}">Inspect Results<i class="material-icons right">search</i></a>
or pair[0] == 'text_lookup' %} </div>
<td> <div class="card-content" id="results">
<table> <table class="responsive-table highlight">
{% for key, value in pair[1].items() %} <thead>
<tr style="border-bottom: none;"> <tr>
<td> <th>Metadata Description</th>
<i>{{ value['title'] }}</i> written <th>Value</th>
by <i>{{ value['author'] }}</i> </tr>
in <i>{{ value['publishing_year'] }}</i> </thead>
<a class="waves-effect <tbody>
waves-light {% for pair in query_result.query_metadata|dictsort %}
btn <tr>
right <td>{{ pair[0] }}</td>
more-text-detials" {% if pair[0] == 'corpus_all_texts'
data-metadata-key="{{ pair[0] }}" or pair[0] == 'text_lookup' %}
data-text-key="{{ key }}">More <td>
<i class="material-icons right" <table>
{% for key, value in pair[1].items() %}
<tr style="border-bottom: none;">
<td>
<i>{{ value['title'] }}</i> written
by <i>{{ value['author'] }}</i>
in <i>{{ value['publishing_year'] }}</i>
<a class="waves-effect
waves-light
btn
right
more-text-detials"
data-metadata-key="{{ pair[0] }}" data-metadata-key="{{ pair[0] }}"
data-text-key="{{ key }}"> data-text-key="{{ key }}">More
info_outline <i class="material-icons right"
</i> data-metadata-key="{{ pair[0] }}"
</a> data-text-key="{{ key }}">
</td> info_outline
</tr> </i>
</a>
</td>
</tr>
{% endfor %}
</table>
</td>
{% else %}
<td>{{ pair[1] }}</td>
{% endif %}
</tr>
{% endfor %} {% endfor %}
</table> </tbody>
</td> </table>
{% else %} </div>
<td>{{ pair[1] }}</td> <div class="card-action right-align">
{% endif %} <a class="waves-effect waves-light btn left-align" href="{{ url_for('services.service', service='corpus_analysis') }}">Back To Overview<i class="material-icons right">arrow_back</i></a>
</tr> <a class="waves-effect waves-light btn" href="{{ url_for('corpora.inspect_query_result', query_result_id=query_result.id) }}">Inspect Results<i class="material-icons right">search</i></a>
{% endfor %} </div>
</tbody> </div>
</table>
</div>
<div class="card-action right-align">
<a class="waves-effect waves-light btn left-align" href="{{ url_for('services.service', service='corpus_analysis') }}">Back To Overview<i class="material-icons right">arrow_back</i></a>
<a class="waves-effect waves-light btn" href="{{ url_for('corpora.inspect_query_result', query_result_id=query_result.id) }}">Inspect Results<i class="material-icons right">search</i></a>
</div> </div>
</div> </div>
</div> </div>
<!-- Modal Structure -->
<div id="modal-text-details" class="modal modal-fixed-footer"> <div id="modal-text-details" class="modal modal-fixed-footer">
<div class="modal-content"> <div class="modal-content">
<h4>Bibliographic data</h4> <h4>Bibliographic data</h4>
@ -81,7 +92,10 @@
<a href="#!" class="modal-close waves-effect waves-green red btn">Close</a> <a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
</div> </div>
</div> </div>
{% endblock page_content %}
{% block scripts %}
{{ super() }}
<script> <script>
var moreTextDetailsButtons; var moreTextDetailsButtons;
moreTextDetailsButtons = document.getElementsByClassName("more-text-detials"); moreTextDetailsButtons = document.getElementsByClassName("more-text-detials");
@ -117,5 +131,4 @@ for (var btn of moreTextDetailsButtons) {
} }
} }
</script> </script>
{% endblock %} {% endblock %}