From 49311f58f03c77eb439f675c20d3745b2ae77aa3 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Wed, 27 Nov 2019 15:56:39 +0100
Subject: [PATCH] Add basic style for expert view
---
app/corpora/events.py | 7 +-
app/templates/corpora/analyse_corpus.html.j2 | 70 ++++++++++++++++----
2 files changed, 61 insertions(+), 16 deletions(-)
diff --git a/app/corpora/events.py b/app/corpora/events.py
index 1298a847..492d69cb 100644
--- a/app/corpora/events.py
+++ b/app/corpora/events.py
@@ -75,10 +75,11 @@ def corpus_analysis(message):
cpos_list = list(set(cpos_list))
pos_list = client.cl_cpos2str('{}.pos'.format(corpus), cpos_list)
simple_pos_list = client.cl_cpos2str('{}.simple_pos'.format(corpus), cpos_list)
- text_id_list = client.cl_cpos2struc('{}.text_title'.format(corpus), cpos_list)
+ s_id_list = client.cl_cpos2struc('{}.s'.format(corpus), cpos_list)
+ text_id_list = client.cl_cpos2struc('{}.text'.format(corpus), cpos_list)
word_list = client.cl_cpos2str('{}.word'.format(corpus), cpos_list)
- for cpos, pos, simple_pos, text_id, word in zip(cpos_list, pos_list, simple_pos_list, text_id_list, word_list):
- data['cpos_lookup'][cpos] = {'pos': pos, 'simple_pos': simple_pos, 'text_id': text_id, 'word': word}
+ for cpos, pos, simple_pos, s_id, text_id, word in zip(cpos_list, pos_list, simple_pos_list, s_id_list, text_id_list, word_list):
+ data['cpos_lookup'][cpos] = {'pos': pos, 'simple_pos': simple_pos, 's_id': s_id, 'text_id': text_id, 'word': word}
text_author_list = client.cl_struc2str('{}.text_author'.format(corpus), text_id_list)
text_publishing_year_list = client.cl_struc2str('{}.text_publishing_year'.format(corpus), text_id_list)
text_title_list = client.cl_struc2str('{}.text_title'.format(corpus), text_id_list)
diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2
index da81332b..557fb1d8 100644
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -1,6 +1,21 @@
{% extends "full_width.html.j2" %}
{% block page_content %}
+<style>
+ .token-box {
+ padding: 5px;
+ margin: 2px 0;
+ border-radius: 5px;
+ background-color: #009688;
+ display: inline-block;
+ color: white;
+ }
+ .token-box:hover {
+ background-color: #00bfa5;
+ cursor: pointer;
+ }
+</style>
+
<div class="col s12 m3 sticky">
<div class="card">
<div class="card-content">
@@ -36,6 +51,13 @@
<span class="helper-text red-text">{{ error }}</span>
{% endfor %}
</div>
+ <div class="switch">
+ <label>
+ Expert Mode
+ <input type="checkbox" id="expert-mode-switch">
+ <span class="lever"></span>
+ </label>
+ </div>
</form>
</div>
</div>
@@ -69,10 +91,10 @@
<table class="highlight">
<thead>
<tr>
- <th>Title</th>
- <th>Left context</th>
- <th>Match</th>
- <th>Right Context</th>
+ <th style="width: 5%">Title</th>
+ <th style="width: 25%">Left context</th>
+ <th style="width: 45%">Match</th>
+ <th style="width: 25%">Right Context</th>
</tr>
</thead>
<tbody id="query-results"></tbody>
@@ -103,7 +125,6 @@
<script>
var loadingModal;
-
document.addEventListener("DOMContentLoaded", function() {
loadingModal = M.Modal.init(document.getElementById("loading-modal"),
{"dismissible": false});
@@ -115,10 +136,23 @@
if (msg === "[201]: Created") {loadingModal.close();}
});
+ var expertModeSwitchElement = document.getElementById("expert-mode-switch");
+ var tokenElements = [];
+ expertModeSwitchElement.addEventListener('change', function(event) {
+ if (event.target.checked) {
+ tokenElements.forEach(function(tokenElement) {
+ tokenElement.classList.add("token-box");
+ });
+ } else {
+ tokenElements.forEach(function(tokenElement) {
+ tokenElement.classList.remove("token-box");
+ });
+ }
+ })
+
var queryFormElement = document.getElementById("query-form");
var queryFormSubmitElement = document.getElementById("query-form-submit");
var queryResultsElement = document.getElementById("query-results");
-
queryFormSubmitElement.addEventListener("click", function(event) {
event.preventDefault();
let formData = new FormData(queryFormElement);
@@ -132,6 +166,7 @@
socket.on("corpus_analysis", function(result) {
console.log(result);
var htmlString = "";
+ var textTitles;
var token;
if (result['matches'].length === 0) {
@@ -140,25 +175,32 @@
for (let match of result['matches']) {
htmlString += `<tr class="match">`;
- htmlString += `<td class="title"></td>`
+ htmlString += `<td class="title">`;
+ textTitles = new Set();
+ for (cpos of match["hit"]) {
+ token = result["cpos_lookup"][cpos];
+ textTitles.add(result["text_loopup"][token["text_id"]]["title"]);
+ }
+ htmlString += [...textTitles].join(",");
+ htmlString += `</td>`;
htmlString += `<td class="left-context">`;
for (cpos of match["lc"]) {
token = result["cpos_lookup"][cpos];
- htmlString += token["simple_pos"] != "PUNCT" ? " " : "";
+ htmlString += " ";
htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
}
htmlString += `</td>`;
htmlString += `<td class="hit">`;
for (cpos of match["hit"]) {
token = result["cpos_lookup"][cpos];
- htmlString += token["simple_pos"] != "PUNCT" ? " " : "";
+ htmlString += " ";
htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
}
htmlString += `</td>`;
htmlString += `<td class="right-context">`;
for (cpos of match["rc"]) {
token = result["cpos_lookup"][cpos];
- htmlString += token["simple_pos"] != "PUNCT" ? " " : "";
+ htmlString += " ";
htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
}
htmlString += `</td>`;
@@ -167,10 +209,12 @@
queryResultsElement.innerHTML = htmlString;
- queryResultsElement.querySelectorAll(".token").forEach(function(tokenElement) {
+ tokenElements = queryResultsElement.querySelectorAll(".token");
+ tokenElements.forEach(function(tokenElement) {
tokenElement.addEventListener("click", function(event) {
- let token = result["cpos_lookup"][tokenElement.dataset.cpos];
- let text = result["text_loopup"][token["text_id"]];
+ if (!expertModeSwitchElement.checked) {return;}
+ var token = result["cpos_lookup"][tokenElement.dataset.cpos];
+ var text = result["text_loopup"][token["text_id"]];
alert(`${token["word"]} // ${token["pos"]} // ${token["simple_pos"]} // ${text["title"]}`);
});
});
--
GitLab