Skip to content
Snippets Groups Projects
Commit 1bb265b7 authored by Stephan Porada's avatar Stephan Porada :speech_balloon:
Browse files

Add show corpus metadata function to result inspect.

parent 0b4e151b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 25 additions and 321 deletions
web/app/static/js/modules/corpus_analysis/view/ResultsView.js
+ 16
− 2
View file @ 1bb265b7
......@@ -792,8 +792,22 @@ class ResultsList extends List {
</thead>
<tbody>`
for (let [outerKey, outerValue] of Object.entries(metaDataObject)) {
html += `<tr>
<td style="text-transform: uppercase;">${outerKey.replace(/_/g, " ")}</td>`
// Use more descriptive names
if (outerKey === 'corpus_all_texts') {
let tmpName = 'All texts in this corpus';
html += `<tr>
<td style="text-transform: uppercase;">${tmpName.replace(/_/g, " ")}
</td>`
} else if (outerKey === 'text_lookup') {
let tmpName = 'Texts where the query resulted in matches'
html += `<tr>
<td style="text-transform: uppercase;">${tmpName.replace(/_/g, " ")}
</td>`
} else {
html += `<tr>
<td style="text-transform: uppercase;">${outerKey.replace(/_/g, " ")}
</td>`
}
if (outerKey === "corpus_all_texts" || outerKey === "text_lookup") {
html += `<td>
<ul class="collapsible">`
......
web/app/templates/corpora/analyse_corpus.html.j2
+ 0
− 2
View file @ 1bb265b7
......@@ -59,7 +59,6 @@
<!-- Modals -->
{% 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' %}
......@@ -187,7 +186,6 @@ document.addEventListener("DOMContentLoaded", () => {
listenForMetaData,
listenForViewNotification,
listenForResults]);
console.log(client.eventListeners);
// Load the listeners so that they will be executed if triggered
client.loadSocketEventListeners();
/**
......
web/app/templates/interactions/scroll_to_top.html.j2
+ 0
− 1
View file @ 1bb265b7
<!-- Scroll to top element -->
<div id="menu-scroll-to-top-div" class="fixed-action-btn direction-top active hide" style="bottom: 45px; right: 24px;">
<a id="menu-scroll-to-top" class="btn btn-floating btn-large cyan">
<i class="material-icons">arrow_upward</i>
......
web/app/templates/modals/show_metadata.html.j2
+ 0
− 6
View file @ 1bb265b7
......@@ -7,14 +7,8 @@ results -->
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
</div>
</div>
{% if query_metadata is defined %}
<div class="modal-content">
{{ Macros.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>
......
web/app/templates/query_results/inspect.html.j2
+ 9
− 2
View file @ 1bb265b7
......@@ -40,6 +40,7 @@
{% include 'interactions/analysis.html.j2' %}
{% include 'interactions/cite.html.j2' %}
<div class="hide">
{# Hide those because they are not needed when inspecting results #}
{% include 'interactions/export.html.j2' %}
{% include 'interactions/create.html.j2' %}
</div>
......@@ -54,7 +55,6 @@
<!-- Modals -->
{% include 'modals/show_metadata.html.j2' %}
{% include 'modals/show_text_details.html.j2' %}
{% include 'modals/context_modal.html.j2' %}
......@@ -122,7 +122,9 @@ document.addEventListener("DOMContentLoaded", () => {
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 }};
/**
* Register needed listeners and their callbacks. But we will
* just call the attached callbacks manually. Because dynamicMode is false.
*/
......@@ -159,14 +161,19 @@ document.addEventListener("DOMContentLoaded", () => {
'#display-options-form-result_context',
'#display-options-form-results_per_page',
'#full-results-create',
'#inspect-results-export',
'#meta-data-modal-content',
'#meta-data-modal',
'#query-results-table',
'#show-meta-data',
'#sub-results-create',
]);
// Hide buttons which are not needed when just inspecting results
resultsList.inspectResultsExport.classList.add('hide');
// 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])
/**
* The following listener handles what functions are called when the user
......
web/app/templates/query_results/inspect.html.j2.bak deleted 100644 → 0
+ 0
− 233
View file @ 0b4e151b
{% extends "nopaque.html.j2" %}
{% set headline = ' ' %}
{% set full_width = True %}
{% set imported = True %}
{% 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="card">
<div class="card-content" id="result-list" style="overflow: hidden;">
<div class=" row show-on-success">
{% 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>
<!-- Scroll to top element -->
{% include 'interactions/scroll_to_top.html.j2' %}
<!-- Modals -->
{% include 'modals/show_metadata.html.j2' %}
{% include 'modals/show_text_details.html.j2' %}
{% include 'modals/context_modal.html.j2' %}
<script src="{{ url_for('static', filename='js/nopaque.Results.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.InteractionElement.js') }}">
</script>
<script>
// ###### global variables ######
var full_result_json;
var result_json;
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
var progress; // global progress value
var queryResultsProgressElement; // Div element holding the progress bar
var expertModeSwitchElement; // Expert mode switch Element
var matchCountElement; // Total nr. of matches will be displayed in this element
var interactionElements; // Interaction elements and their parameters
var contextModal; // Modal to open on inspect for further match context
// ###### Defining local scope variables
let displayOptionsFormElement; // Form holding the display informations
let resultItems; // array of built html result items row element. This is called when results are transmitted and being recieved
let hitsPerPageInputElement;let contextPerItemElement; // Form Element for display option
let paginationElements;
let inspectBtnElements;
let metaDataModal;
let showMetaDataButton
// ###### Initializing variables ######
displayOptionsFormElement = document.getElementById("display-options-form");
resultItems = [];
receivedMatchCountElement = document.getElementById("received-match-count");
textLookupCountElement = document.getElementById("text-lookup-count");
textTitlesElement = document.getElementById("text-titles");
queryResultsProgressElement = document.getElementById("query-results-progress");
expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
matchCountElement = document.getElementById("match-count");
hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
contextPerItemElement = document.getElementById("display-options-form-result_context");
paginationElements = document.getElementsByClassName("pagination");
contextModal = document.getElementById("context-modal");
metaDataModal = document.getElementById("meta-data-modal");
showMetaDataButton = document.getElementById("show-metadata");
// js list options
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
resultsListOptions = {page: displayOptionsData["resultsPerPage"],
pagination: [{
name: "paginationTop",
paginationClass: "paginationTop",
innerWindow: 8,
outerWindow: 1
}, {
paginationClass: "paginationBottom",
innerWindow: 8,
outerWindow: 1
}],
valueNames: ["titles", "lc", "c", "rc", {data: ["index"]}],
item: `<span></span>`
};
document.addEventListener("DOMContentLoaded", () => {
// Initialize some Modals
contextModal = M.Modal.init(contextModal, {"dismissible": true});
// ###### recreating chunk structure to reuse callback queryRenderResults()
full_result_json = {{ query_result_file_content|tojson|safe }};
result_json = {};
result_json["chunk"] = {};
result_json.chunk["cpos_lookup"] = full_result_json.cpos_lookup;
result_json.chunk["cpos_ranges"] = full_result_json.cpos_ranges;
result_json.chunk["matches"] = full_result_json.matches;
result_json.chunk["text_lookup"] = full_result_json.text_lookup;
// Init corpus analysis components
data = new Data();
resultsList = new ResultsList("result-list", resultsListOptions);
resultsMetaData = new MetaData();
results = new Results(data, resultsList, resultsMetaData);
results.clearAll(); // inits some object keys and values
// 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
matchCountElement.innerText = full_result_json.match_count;
// Initialization of interactionElemnts
// An interactionElement is an object identifing a switch or button via
// htmlID. Callbacks are set for these elements which will be triggered on
// a pagination interaction by the user or if the status of the element has
// been altered. (Like the switche has ben turned on or off).
interactionElements = new InteractionElements();
let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
expertModeInteraction.setCallback("on",
results.jsList.expertModeOn,
results.jsList,
["query-display"])
expertModeInteraction.setCallback("off",
results.jsList.expertModeOff,
results.jsList,
["query-display"])
let activateInspectInteraction = new InteractionElement("inspect",
false);
activateInspectInteraction.setCallback("noCheck",
results.jsList.activateInspect,
results.jsList);
let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
false);
changeContextInteraction.setCallback("noCheck",
results.jsList.changeContext,
results.jsList)
interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
// checks if a change for every interactionElement happens and executes
// the callbacks accordingly
interactionElements.onChangeExecute();
// eventListener if pagination is used to apply new context size to new page
// and also activate inspect match if progress is 100
// also adds more interaction buttons like add to sub results
for (let element of paginationElements) {
element.addEventListener("click", (event) => {
results.jsList.pageChangeEventInteractionHandler(interactionElements);
});
}
// render results in table imported parameter is true
queryRenderResults(result_json, true);
// ### Show corpus Metadata
showMetaDataButton.onclick = () => {
metaDataModal.open();
};
// live update of hits per page if hits per page value is changed
let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList);
hitsPerPageInputElement.onchange = changeHitsPerPageBind;
// live update of lr context per item if context value is changed
contextPerItemElement.onchange = results.jsList.changeContext;
// new insepct event listener makeing use of javascript bubbleing
let resultsTable = document.getElementById("query-results");
resultsTable.addEventListener("click", (event) => {
if (event.target.classList.contains("inspect-btn")) {
const dataIndex = event.target.closest("tr").dataset.index;
const fakeResponse = results.jsList.createFakeResponse();
results.jsList.showMatchContext(fakeResponse);
}
});
// scroll to top button if user scrolled down the list
let headline = document.querySelector(".headline");
let scrollToTop = document.querySelector("#menu-scroll-to-top-div");
window.addEventListener("scroll", (event) => {
if (pageYOffset > 250) {
scrollToTop.classList.toggle("hide", false);
} else {
scrollToTop.classList.toggle("hide", true);
}
});
scrollToTop.onclick = () => {
headline.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
};
});
</script>
{% endblock %}
web/app/templates/utils/macros.html.j2
+ 0
− 75
View file @ 1bb265b7
......@@ -35,78 +35,3 @@
main .tabs .indicator {background-color: {{ hex_color }};}
</style>
{%- endmacro -%}
{% macro show_metadata(query_metadata) %}
<div class="col s12">
<table class="highlight">
<thead>
<tr>
<th style="width: 33%">Metadata Description</th>
<th style="width: 66%">Value</th>
</tr>
</thead>
<tbody>
{% for pair in query_metadata|dictsort %}
<tr>
<td>{{ pair[0]|replace("_", " ")|upper() }}</td>
{% if pair[0] == "corpus_all_texts"
or pair[0] == "text_lookup" %}
<td>
<ul class="collapsible">
{% for key, value in pair[1].items() %}
<li class="text-metadata"
data-metadata-key="{{ pair[0] }}"
data-text-key="{{ key }}">
<div class="collapsible-header"
data-metadata-key="{{ pair[0] }}"
data-text-key="{{ key }}">
<i class="material-icons"
data-metadata-key="{{ pair[0] }}"
data-text-key="{{ key }}">info_outline</i>
{{ value['author'] }} - {{ value['publishing_year'] }}
- {{ value['title'] }}
</div>
<div class="collapsible-body">
<span>
<ul id="bibliographic-data-{{ pair[0] }}-{{ key }}"
style="column-count: 2;">
</ul>
</span>
</div>
</li>
{% endfor %}
</ul>
</td>
{% else %}
<td>{{ pair[1] }}</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let elems = document.querySelectorAll('.collapsible');
let instances = M.Collapsible.init(elems, {accordion: false});
});
let collapsibles = document.getElementsByClassName("text-metadata");
for (let collapsible of collapsibles) {
collapsible.onclick = () => {
let metadataKey = event.target.dataset.metadataKey;
let textKey = event.target.dataset.textKey;
let textData = {{ query_metadata|tojson|safe }}[metadataKey][textKey];
let bibliographicData = document.getElementById(`bibliographic-data-${metadataKey}-${textKey}`);
bibliographicData.innerHTML = "";
for (let [key, value] of Object.entries(textData)) {
bibliographicData.insertAdjacentHTML("afterbegin",
`
<li><span style="text-transform: capitalize;">${key}:</span> ${value}</li>
`);
}
}
}
</script>
{% endmacro %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment