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

Add metadata view to nalysis interface and result viewer

Browse Source
This commit is contained in:
Stephan Porada 2020-07-20 13:44:57 +02:00
parent ce79b59bf8
commit 7dfc3ab877
5 changed files with 252 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/query_results/views.py
View File

@ -93,6 +93,7 @@ def inspect_query_result(query_result_id):
View to inspect one importe result file in a corpus analysis like interface View to inspect one importe result file in a corpus analysis like interface
''' '''
query_result = QueryResult.query.get_or_404(query_result_id) query_result = QueryResult.query.get_or_404(query_result_id)
query_metadata = query_result.query_metadata
if not (query_result.creator == current_user if not (query_result.creator == current_user
or current_user.is_administrator()): or current_user.is_administrator()):
abort(403) abort(403)
@ -117,6 +118,7 @@ def inspect_query_result(query_result_id):
display_options_form=display_options_form, display_options_form=display_options_form,
inspect_display_options_form=inspect_display_options_form, inspect_display_options_form=inspect_display_options_form,
query_result_file_content=query_result_file_content, query_result_file_content=query_result_file_content,
query_metadata=query_metadata,
title='Inspect query result') title='Inspect query result')

2
web/app/static/js/nopaque.CorpusAnalysisClient.js
View File

@ -113,7 +113,7 @@ class CorpusAnalysisClient {
} }
getMetaData() { getMetaData() {
// just emits thos to tell the server to gather all meta data infos and send // just emits this to tell the server to gather all meta data infos and send
// those back // those back
this.socket.emit("corpus_analysis_get_meta_data", this.corpusId); this.socket.emit("corpus_analysis_get_meta_data", this.corpusId);
} }

143
web/app/templates/corpora/analyse_corpus.html.j2
View File

@ -248,14 +248,35 @@
<!-- Metadata modal --> <!-- Metadata modal -->
{% import "macros/query_result_macro.html.j2" as metadata %} {% import "macros/query_result_macro.html.j2" as metadata %}
<div id="metadata-modal" class="modal bottom-sheet"> <div id="meta-data-modal" class="modal bottom-sheet">
<div class="modal-content"> <div class="section">
{{ metadata.show_metadata("testasdasgs") }} <div class="col s12 right-align">
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a> <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
</div> </div>
</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 --> <!-- Analysis init modal -->
<div class="modal no-autoinit" id="init-display"> <div class="modal no-autoinit" id="init-display">
@ -433,7 +454,7 @@
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
var nrMarkedMatches; // count of matches marked for subresults var nrMarkedMatches; // count of matches marked for subresults
var showMetadataButton; // Button to show corpus metadata var showMetaDataButton; // Button to show corpus metadata
var activateInspectInteraction; // global interaction element var activateInspectInteraction; // global interaction element
var expertModeInteraction; // global interaction element var expertModeInteraction; // global interaction element
var subResultsInteraction; // global interaction element var subResultsInteraction; // global interaction element
@ -455,6 +476,7 @@
let paginationElements; let paginationElements;
let queryDisplayElement; // Element for initialization using queryDisplay let queryDisplayElement; // Element for initialization using queryDisplay
let xpath; // xpath to grab first resultsList page pagination element let xpath; // xpath to grab first resultsList page pagination element
let metaDataModal; // modal showing corpus meta data
// ###### Initialize variables ###### // ###### Initialize variables ######
addToSubResultsElement = document.getElementById("add-to-sub-results"); addToSubResultsElement = document.getElementById("add-to-sub-results");
@ -487,7 +509,8 @@
textLookupCountElement = document.getElementById("text-lookup-count"); textLookupCountElement = document.getElementById("text-lookup-count");
textTitlesElement = document.getElementById("text-titles"); textTitlesElement = document.getElementById("text-titles");
nrMarkedMatches = document.getElementById("nr-marked-matches"); nrMarkedMatches = document.getElementById("nr-marked-matches");
showMetadataButton = document.getElementById("show-metadata"); showMetaDataButton = document.getElementById("show-metadata");
metaDataModal = document.getElementById("meta-data-modal");
// ###### js list options and intialization ###### // ###### js list options and intialization ######
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement); displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@ -514,6 +537,14 @@
contextModal = M.Modal.init(contextModal, defaultOptions); contextModal = M.Modal.init(contextModal, defaultOptions);
exportModal = M.Modal.init(exportModal, defaultOptions); exportModal = M.Modal.init(exportModal, defaultOptions);
initModal = M.Modal.init(initDisplayElement, {"dismissible": false}); initModal = M.Modal.init(initDisplayElement, {"dismissible": false});
let deleteOverlay = () => {
let overlay = document.getElementsByClassName("modal-overlay")[0];
overlay.remove();
};
metaDataModal = M.Modal.init(metaDataModal, {"preventScrolling": false,
"opacity": 0.0,
"dismissible": false,
"onOpenEnd": deleteOverlay});
// Init corpus analysis components // Init corpus analysis components
data = new Data(); data = new Data();
resultsList = new ResultsList("result-list", resultsListOptions); resultsList = new ResultsList("result-list", resultsListOptions);
@ -636,19 +667,93 @@
} }
// ### Show corpus Metadata // ### Show corpus Metadata
showMetadataButton.onclick = () => { showMetaDataButton.onclick = () => {
let deleteOverlay = () => { let tmpObject = {};
let overlay = document.getElementsByClassName("modal-overlay")[0]; Object.assign(tmpObject, results.metaData);
overlay.remove(); tmpObject["query"] = results.data.query;
tmpObject["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.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);
}
} }
let modal = document.getElementById("metadata-modal");
console.log(modal);
modal = M.Modal.init(modal, {"preventScrolling": false,
"opacity": 0.0,
"dismissible": false,
"onOpenEnd": deleteOverlay});
console.log(modal);
modal.open();
}; };
}); });

12
web/app/templates/macros/query_result_macro.html.j2
View File

@ -1,8 +1,6 @@
{%- macro show_metadata(query_metadata) -%} {% macro show_metadata(query_metadata) %}
<p>{{ query_metadata }}</p> <div class="col s12">
{# <div class="col s12">
<table class="responsive-table highlight"> <table class="responsive-table highlight">
<thead> <thead>
<tr> <tr>
@ -14,8 +12,8 @@
{% for pair in query_metadata|dictsort %} {% for pair in query_metadata|dictsort %}
<tr> <tr>
<td>{{ pair[0] }}</td> <td>{{ pair[0] }}</td>
{% if pair[0] == 'corpus_all_texts' {% if pair[0] == "corpus_all_texts"
or pair[0] == 'text_lookup' %} or pair[0] == "text_lookup" %}
<td> <td>
<table> <table>
{% for key, value in pair[1].items() %} {% for key, value in pair[1].items() %}
@ -50,7 +48,7 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div> #} </div>
<!-- Modal Structure --> <!-- Modal Structure -->
<div id="modal-text-details" class="modal modal-fixed-footer"> <div id="modal-text-details" class="modal modal-fixed-footer">

164
web/app/templates/query_results/inspect.html.j2
View File

@ -5,21 +5,54 @@
{% set full_width = True %} {% set full_width = True %}
{% block page_content %} {% block page_content %}
<div class="col s12">
<div class="card">
<div class="card-content" style="padding-top: 5px;
padding-bottom: 0px;">
<!-- Query form -->
<div class="row">
<form id="query-form">
<div class="col s12 m10">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input disabled value="{{ query_metadata.query|escape }}" id="disabled" type="text" class="validate">
<label for="disabled">Query</label>
</div>
</div>
<div class="col s12 m2 right-align">
<br class="hide-on-small-only">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- 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" style="margin-bottom: 0px;"> <div class=" row show-on-success">
<div class="col s12 m3 l3" id="results-info"> <div class="col s12 m2 l2" id="infos">
<div class="row section"> <h6 style="margin-top: 0px;">Infos</h6>
<h6 style="margin-top: 0px;">Infos</h6> <div class="divider" style="margin-bottom: 10px;"></div>
<div class="divider" style="margin-bottom: 10px;"></div> <div class="row">
<div class="col" id="infos"> <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> <p>
Displaying
<span id="received-match-count"> <span id="received-match-count">
</span> of </span> of
<span id="match-count"></span> <span id="match-count"></span>
matches. matches loaded.
<br> <br>
Matches occured in Matches occured in
<span id="text-lookup-count"></span> <span id="text-lookup-count"></span>
@ -27,56 +60,80 @@
<br> <br>
<span id=text-titles></span> <span id=text-titles></span>
</p> </p>
<div class="progress hide" id="query-results-progress"> <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 class="determinate" id="query-results-determinate"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col s12 m9 l9" id="actions-and-tools"> <div class="col s12 m2 l2" id="display">
<div class="row section"> <h6 style="margin-top: 0px;">Display</h6>
<div class="col s12 m3 l3" id="display"> <div class="divider" style="margin-bottom: 10px;"></div>
<h6 style="margin-top: 0px;">Display</h6> <div class="row">
<div class="divider" style="margin-bottom: 10px;"></div> <div class="col s12">
<div class="row"> <form id="display-options-form">
<div class="col s12"> {{ M.render_field(display_options_form.results_per_page,
<form id="display-options-form"> material_icon='format_list_numbered') }}
{{ M.render_field(display_options_form.results_per_page, {{ M.render_field(display_options_form.result_context,
material_icon='format_list_numbered') }} material_icon='short_text') }}
{{ M.render_field(display_options_form.result_context, {{ M.render_field(display_options_form.expert_mode) }}
material_icon='short_text') }} </form>
{{ M.render_field(display_options_form.expert_mode) }}
</form>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Table showing the query results --> <!-- Table showing the query results -->
<div class="col s12"> <div class="col s12">
<ul class="pagination paginationTop"></ul> <ul class="pagination paginationTop"></ul>
<table class="responsive-table highlight"> <table class="responsive-table highlight">
<thead> <thead>
<tr> <tr>
<th style="width: 2%">Nr.</th> <th style="width: 2%">Nr.</th>
<th style="width: 3%">Title</th> <th style="width: 3%">Title</th>
<th style="width: 25%">Left context</th> <th style="width: 25%">Left context</th>
<th style="width: 35%">Match</th> <th style="width: 35%">Match</th>
<th style="width: 10%">Actions</th> <th style="width: 10%">Actions</th>
<th style="width: 25%">Right Context</th> <th style="width: 25%">Right Context</th>
</tr> </tr>
</thead> </thead>
<tbody class="list" id="query-results"> <tbody class="list" id="query-results">
</tbody> </tbody>
</table> </table>
<ul class="pagination paginationBottom"></ul> <ul class="pagination paginationBottom"></ul>
</div>
</div> </div>
</div> </div>
</div> </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>
<!-- Context modal used for detailed information about one match --> <!-- Context modal used for detailed information about one match -->
<div id="context-modal" class="modal modal-fixed-footer"> <div id="context-modal" class="modal modal-fixed-footer">
<div class="modal-content"> <div class="modal-content">
@ -168,6 +225,8 @@
let hitsPerPageInputElement;let contextPerItemElement; // Form Element for display option let hitsPerPageInputElement;let contextPerItemElement; // Form Element for display option
let paginationElements; let paginationElements;
let inspectBtnElements; let inspectBtnElements;
let metaDataModal;
let showMetaDataButton
// ###### Initializing variables ###### // ###### Initializing variables ######
displayOptionsFormElement = document.getElementById("display-options-form"); displayOptionsFormElement = document.getElementById("display-options-form");
@ -183,6 +242,8 @@
contextPerItemElement = document.getElementById("display-options-form-result_context"); contextPerItemElement = document.getElementById("display-options-form-result_context");
paginationElements = document.getElementsByClassName("pagination"); paginationElements = document.getElementsByClassName("pagination");
contextModal = document.getElementById("context-modal"); contextModal = document.getElementById("context-modal");
metaDataModal = document.getElementById("metadata-modal");
showMetaDataButton = document.getElementById("show-metadata");
// js list options // js list options
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement); displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@ -220,7 +281,15 @@
resultsMetaData = new MetaData(); resultsMetaData = new MetaData();
results = new Results(data, resultsList, resultsMetaData); results = new Results(data, resultsList, resultsMetaData);
results.clearAll(); // inits some object keys and values results.clearAll(); // inits some object keys and values
// TODO: save metadate into results.metaData // init some modals
let deleteOverlay = () => {
let overlay = document.getElementsByClassName("modal-overlay")[0];
overlay.remove();
};
metaDataModal = M.Modal.init(metaDataModal, {"preventScrolling": false,
"opacity": 0.0,
"dismissible": false,
"onOpenEnd": deleteOverlay});
// setting some initial values for user feedback // setting some initial values for user feedback
matchCountElement.innerText = full_result_json.match_count; matchCountElement.innerText = full_result_json.match_count;
@ -270,6 +339,13 @@
// render results in table imported parameter is true // render results in table imported parameter is true
queryRenderResults(result_json, true); queryRenderResults(result_json, true);
// ### Show corpus Metadata
showMetaDataButton.onclick = () => {
console.log(results.metaData);
console.log(results.data.text_lookup);
metaDataModal.open();
};
// live update of hits per page if hits per page value is changed // live update of hits per page if hits per page value is changed
let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList); let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList);
hitsPerPageInputElement.onchange = changeHitsPerPageBind; hitsPerPageInputElement.onchange = changeHitsPerPageBind;