From 77b03335c43b2beaf77ca1f5d752cec002e6e41e Mon Sep 17 00:00:00 2001
From: dcz <dcz@ipipan.waw.pl>
Date: Tue, 12 Jul 2022 13:53:57 +0200
Subject: [PATCH] Styles for unified frame. First attempt for Vue
implementation of entries.js frame visualization.
---
.../js/components/LexicalUnitDisplay.js | 23 ++-
.../entries/js/components/LexicalUnitEdit.js | 90 ++++++-----
.../components/SemanticsSchemataComponent.js | 150 ++++++++++++++++++
entries/templates/unification.html | 1 +
4 files changed, 219 insertions(+), 45 deletions(-)
create mode 100644 entries/static/entries/js/components/SemanticsSchemataComponent.js
diff --git a/entries/static/entries/js/components/LexicalUnitDisplay.js b/entries/static/entries/js/components/LexicalUnitDisplay.js
index f975605..183a810 100644
--- a/entries/static/entries/js/components/LexicalUnitDisplay.js
+++ b/entries/static/entries/js/components/LexicalUnitDisplay.js
@@ -1,13 +1,20 @@
import Spinner from './Spinner.js';
+import SemanticsSchemataComponent from "./SemanticsSchemataComponent.js";
+
export default {
- components: { Spinner },
+ components: { Spinner, SemanticsSchemataComponent },
props: {
entryId: Number,
lexicalUnitId: Number
},
data() {
- return { frame: null, unifiedFrame: undefined, gettext: window.gettext, hasPermission: window.has_permission }
+ return { frame: null, unifiedFrame: undefined, gettext: window.gettext, hasPermission: window.has_permission,
+ subentries: null,
+ alternations: null,
+ realisation_phrases: null,
+ realisation_descriptions: null,
+ }
},
emits: ['refresh', 'refreshEntriesList'],
methods: {
@@ -72,6 +79,10 @@ export default {
get_entry(this.entryId, false, this.lexicalUnitId).then(entry => {
this.frame = entry.frames[0];
this.unifiedFrame = entry.unified_frame;
+ this.subentries = entry.subentries;
+ this.alternations = entry.alternations;
+ this.realisation_phrases = entry.realisation_phrases;
+ this.realisation_descriptions = entry.realisation_descriptions;
setup_notes($('#lexical-unit-notes'), $('#lexical-unit-notes-template'), this.lexicalUnitId, 'meanings.LexicalUnit', this.setup_notes);
});
}
@@ -135,6 +146,14 @@ export default {
<div id="lexical-unit-notes"></div>
</div>
<div class="col h-100 px-1 pt-0 pb-0 overflow-auto" id="semantics-schemata-pane">
+<!-- <semantics-schemata-component -->
+<!-- :subentries="subentries"-->
+<!-- :key="subentries"-->
+<!-- :frame="frame"-->
+<!-- :alternations="alternations"-->
+<!-- :realisation_phrases="realisation_phrases"-->
+<!-- :realisation_descriptions="realisation_descriptions"-->
+<!-- />-->
<div id="semantics-schemata"></div>
</div>
`
diff --git a/entries/static/entries/js/components/LexicalUnitEdit.js b/entries/static/entries/js/components/LexicalUnitEdit.js
index f0442ee..9a130e2 100644
--- a/entries/static/entries/js/components/LexicalUnitEdit.js
+++ b/entries/static/entries/js/components/LexicalUnitEdit.js
@@ -816,26 +816,27 @@ Object.assign(LexicalUnitEdit, {
changeShowVerifiedFrames (val) {
this.showVerifiedFrames = val;
},
+ getArgumentCSS(argument) {
+ return (argument.role ? argument.role.str + ' ' : '') + (argument == this.active_unified_frame_argument ? 'active' : '');
+ }
},
mounted() {
this.changeStatusButtonTitleToDefault();
- if(!this.readOnly) {
- Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
- sizes: [40, 60],
- minSize: 400,
- gutterSize: 4,
- elementStyle: (dimension, size, gutterSize) => {
- return {
- 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
- }
- },
- });
- Split(['#semantics-unified-frame-pane', '#semantics-slowal-frames-pane', '#examples'], {
- sizes: [40, 40, 20],
- direction: 'vertical',
- gutterSize: 4,
- });
- }
+ Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
+ sizes: [40, 60],
+ minSize: 400,
+ gutterSize: 4,
+ elementStyle: (dimension, size, gutterSize) => {
+ return {
+ 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+ }
+ },
+ });
+ Split(['#semantics-unified-frame-pane', '#semantics-slowal-frames-pane', '#examples'], {
+ sizes: [40, 40, 20],
+ direction: 'vertical',
+ gutterSize: 4,
+ });
if(this.unifiedFrameId) {
this.loadFrame();
}
@@ -864,34 +865,37 @@ Object.assign(LexicalUnitEdit, {
<div align="center">
<div align="left" style="display: table;">
<div class="unifiedFrame mt-3" v-bind:data-frame_id="unified_frame.id" id="lexical-unit" v-html="unified_frame_title"></div>
- <table v-if="unified_frame.id" id="unified-frame" class="m-0 table-borderless border border-secondary text-dark">
+ <table v-if="unified_frame.id" id="unified-frame" class="m-0 table-borderless border border-secondary text-dark frame active">
<tbody>
<tr>
<th scope="row" class="py-2 px-1 text-secondary role-header">Role</th>
- <td
- class="argument py-2 px-1 border-top border-left border-secondary role-column"
- :class="argument == active_unified_frame_argument && 'active'"
- v-for="argument in unified_frame_arguments"
- :key="argument.id"
- @click="unifiedFrameArgumentSelected(argument)"
- @mouseover="unifiedFrameArgumentHovered(argument)"
- @mouseleave="unifiedFrameArgumentHovered(null)"
- >
- {{ argument.role_type }}
-
- <div
- v-if="argument.role"
- >
- [{{ argument.role.str }}]
- </div>
- <div v-else>
- <ul class="ul-role">
- <li v-for="proposed_role in argument.proposed_roles">
- {{ proposed_role.str }}
- </li>
- </ul>
- </div>
- </td>
+
+ <template v-for="argument in unified_frame_arguments">
+ <td
+ class="argument py-2 px-1 border-top border-left border-secondary role-column"
+ :class="getArgumentCSS(argument)"
+ @click="unifiedFrameArgumentSelected(argument)"
+ @mouseover="unifiedFrameArgumentHovered(argument)"
+ @mouseleave="unifiedFrameArgumentHovered(null)"
+ >
+ {{ argument.role_type }}
+
+ <div
+ v-if="argument.role"
+ >
+ [{{ argument.role.str }}]
+ </div>
+ <div v-else>
+ <ul class="ul-role">
+ <li v-for="proposed_role in argument.proposed_roles">
+ {{ proposed_role.str }}
+ </li>
+ </ul>
+ </div>
+ </td>
+ </template>
+
+
</tr>
<tr>
<th scope="row" class="py-0 px-1 text-secondary role-header">Selectional preferences</th>
@@ -1009,7 +1013,7 @@ Object.assign(LexicalUnitEdit, {
</div>
</div>
</div>
- <div v-if="!readOnly" class="col w-100 p-0 tab-pane overflow-auto" id="examples">
+ <div class="col w-100 p-0 tab-pane overflow-auto" id="examples">
<table id="semantics-examples" class="table table-sm table-hover">
<thead>
<tr>
diff --git a/entries/static/entries/js/components/SemanticsSchemataComponent.js b/entries/static/entries/js/components/SemanticsSchemataComponent.js
new file mode 100644
index 0000000..6591d18
--- /dev/null
+++ b/entries/static/entries/js/components/SemanticsSchemataComponent.js
@@ -0,0 +1,150 @@
+
+export default {
+ props: {
+ subentries: Object,
+ frame: Object,
+ alternations: Object,
+ realisation_phrases: Object,
+ realisation_descriptions: Object,
+ },
+ data() {
+ return {
+ img_prefix: String
+ }
+ },
+ methods: {
+ getFunctions(position) {
+ const props_spans = [];
+ if (position.func.str !== '') {
+ props_spans.push({str: position.func.str, tooltip: position.func.desc});
+ }
+ if (position.control.str !== '') {
+ props_spans.push({str: position.control.str, tooltip: position.control.desc});
+ }
+ if (position.p_control.str !== '') {
+ props_spans.push({str: position.p_control.str, tooltip: position.p_control.desc});
+ }
+ return props_spans;
+ },
+ getSchemataPositionCnt(schema) {
+ return schema.positions.length;
+ },
+ getRealisationDescriptions(schema) {
+ const alternationDescList = [];
+ if(this.alternations) {
+ const curr_alternations = this.alternations[this.frame.id][schema.id];
+ const curr_realisation_descriptions = this.realisation_descriptions[this.frame.id][schema.id];
+ for (let i in curr_alternations) {
+ alternationDescList.push(curr_realisation_descriptions[i]);
+ }
+ }
+ return '<i>' + alternationDescList + '</i>';
+ },
+ getRoleCss(schema, position) {
+ const roles = [];
+ if(this.alternations) {
+ const argumentIdSet = new Set();
+
+ const curr_alternations = this.alternations[this.frame.id][schema.id];
+ for (let i in curr_alternations) {
+ const alternation = curr_alternations[i]
+
+ for (var arg_id in alternation){
+ const phrase_ids = alternation[arg_id];
+ phrase_ids.forEach(phrase_id => {
+ if (phrase_id.startsWith(position.id)) {
+ argumentIdSet.add(arg_id);
+ }
+ });
+ }
+ }
+
+ argumentIdSet.forEach(argumentId => {
+ const argument = this.frame.arguments.find(arg => argumentId.endsWith(arg.argument_id));
+ const role = argument.role;
+ roles.push(role);
+ });
+
+ }
+ return roles;
+ },
+ getPositionPhrases(schema, position) {
+ const phrases = [];
+ if(this.alternations) {
+ const curr_alternations = this.alternations[this.frame.id][schema.id];
+ for (let i in curr_alternations) {
+ const alternation = curr_alternations[i]
+
+ for (var arg_id in alternation){
+ const phrase_ids = alternation[arg_id];
+ phrase_ids.forEach(phrase_id => {
+ if (phrase_id.startsWith(position.id)) {
+ phrases.push(curr_realisation_phrases[arg_id][i][phrase_id]);
+ }
+ });
+ }
+ }
+ }
+ return phrases;
+ }
+
+ },
+ mounted () {
+ this.img_prefix = window.STATIC_URL;
+ console.log(this.subentries);
+ },
+ created () {
+ console.log(this.subentries);
+ },
+ template: `
+ <div>
+ <div class="subentry" v-for="subentry in subentries">
+ <div class="mb-1 sticky-top"><h5 class="bg-dark text-light p-1">{{subentry.str}}</h5></div>
+ <div class="schema mb-3" v-for="schema in subentry.schemata">
+ <table class="table m-0 table-borderless border border-secondary text-dark">
+ <tbody>
+ <tr class="opinion-row">
+ <th scope="row" class="py-2 px-1 text-secondary" style="width: 3em;">Opinia</th>
+ <td class="opinion-cell py-2 px-1" :colspan="getSchemataPositionCnt(schema)"><img
+ :src="img_prefix + 'entries/img/' + schema.opinion_key + '.svg'" width="12"
+ height="12" :alt="schema.opinion"> {{schema.opinion}}
+ </td>
+ </tr>
+
+ <tr>
+ <th scope="row" class="py-2 px-1 text-secondary">Funkcja</th>
+
+ <td class="position py-2 px-1 border-top border-left border-secondary"
+ v-for="position in schema.positions">
+ <div v-for="f in getFunctions(position)" class="phrase px-1 py-2 " data-alternation="0" data-phrase_id="42-2-1"><span data-toggle="tooltip"
+ data-placement="bottom"
+ :title="f.tooltip">{{f.str}}</span>
+ </div>
+ </td>
+
+ </tr>
+
+ <tr class="realisation-description">
+ <td class="px-1 py-2" :colspan="getSchemataPositionCnt(schema)" v-html="getRealisationDescriptions(schema)"></td>
+ </tr>
+ <tr class="phrase-types alt-0">
+ <th scope="row" class="py-0 px-1 text-secondary">Typy fraz</th>
+ <td v-for="position in schema.positions" class="px-0 py-0 border-top border-left border-secondary">
+ <div v-for="phrase in position.phrases" class="phrase px-1 py-2"
+ :class="getRoleCss(schema, position)"
+ data-alternation="0" data-phrase_id="45-8-7">
+ <span data-toggle="tooltip" data-placement="bottom"
+ :title="phrase.desc">{{phrase.str}}</span>
+ </div>
+ <div v-for="phrase in getPositionPhrases(schema, position)" class="realisation-phrase px-1 py-2"><i>{{phrase}}</i></div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ `
+}
+
+
diff --git a/entries/templates/unification.html b/entries/templates/unification.html
index 9bf5d2f..af416ac 100644
--- a/entries/templates/unification.html
+++ b/entries/templates/unification.html
@@ -8,6 +8,7 @@
{% block scripts %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'entries/css/unification_frames.css' %}">
+ <link rel="stylesheet" type="text/css" href="{% static 'common/css/role_colours.css' %}">
<script src="{% static 'entries/js/unification_entries_list.js' %}"></script>
<script src="{% static 'entries/js/unification_frames_list.js' %}"></script>
<script src="{% static 'entries/js/unification_entries_for_frames_list.js' %}"></script>
--
GitLab