From 19b4f3b2856b3ef2e4399984fc932def9fe79bca Mon Sep 17 00:00:00 2001
From: dcz <dcz@ipipan.waw.pl>
Date: Sat, 19 Aug 2023 09:22:34 +0200
Subject: [PATCH] Rolling buttons for selectional preferencies and lexical
units
---
.../Unification/LexicalUnitEdit.vue | 38 +++++++++++++++++--
.../frame-components/SlowalFrameComponent.vue | 32 ++++++++++++----
2 files changed, 59 insertions(+), 11 deletions(-)
diff --git a/frontend/src/components/unification/Unification/LexicalUnitEdit.vue b/frontend/src/components/unification/Unification/LexicalUnitEdit.vue
index 6f85ccc..6062271 100644
--- a/frontend/src/components/unification/Unification/LexicalUnitEdit.vue
+++ b/frontend/src/components/unification/Unification/LexicalUnitEdit.vue
@@ -53,6 +53,8 @@ Object.assign(LexicalUnitEdit, {
selectedSchemas: null,
selectedExamples: null,
hidden_frames: [],
+ lexicalUnitsVisible: true,
+ selectionalPreferenciesVisible: true
}
},
components: {InfoTooltip, Spinner, UnificationFramePreview, SlowalFrameComponent, ExamplesComponent, SemanticsSchemataComponent, MeaningComponent},
@@ -886,6 +888,18 @@ Object.assign(LexicalUnitEdit, {
slowal_frame.arguments = new_slowal_frame_arguments;
}
}
+ },
+ hideLexicalUnits() {
+ this.lexicalUnitsVisible = false;
+ },
+ showLexicalUnits() {
+ this.lexicalUnitsVisible = true;
+ },
+ hideSelectionalPreferencies() {
+ this.selectionalPreferenciesVisible = false;
+ },
+ showSelectionalPreferencies() {
+ this.selectionalPreferenciesVisible = true;
}
},
mounted() {
@@ -956,8 +970,10 @@ export default LexicalUnitEdit;
<div align="center">
<div align="left" style="display: table;">
<div class="unifiedFrame mt-3" v-bind:data-frame_id="unified_frame.id" id="unified-frame-title" 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 frame active">
- <tbody>
+ <table v-if="unified_frame.id" id="unified-frame-opac" class="table-borderless">
+ <tr><td>
+ <table 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>
@@ -988,7 +1004,7 @@ export default LexicalUnitEdit;
</tr>
- <tr>
+ <tr v-if="selectionalPreferenciesVisible">
<th scope="row" class="py-0 px-1 text-secondary role-header">Selectional preferences</th>
<td class="preferences py-0 px-0 border-top border-left border-secondary role-column align-top"
v-for='argument in unified_frame_arguments'
@@ -1017,10 +1033,17 @@ export default LexicalUnitEdit;
</td>
</tr>
</tbody>
+ </table>
+ </td><td style="vertical-align: text-top; padding-left: 10px; padding-top: 8px;">
+ <span class="cursor-pointer" @click.stop="hideSelectionalPreferencies()" title="Ukryj jednostki leksykalne">▴</span> /
+ <span class="cursor-pointer" @click.stop="showSelectionalPreferencies()" title="Pokaż jednostki leksykalne">▾</span>
+ </td></tr>
</table>
</div>
<div v-if="unified_frame.id" class="lu-table mt-3 mb-3">
- <table class="m-0 table-borderless border border-secondary text-dark">
+ <table class="m-0 table-borderless text-dark">
+ <tr><td>
+ <table class="m-0 border border-secondary text-dark">
<tbody>
<tr>
<th scope="row" class="py-2 px-1 text-secondary">Jednostka leksykalna</th>
@@ -1028,6 +1051,7 @@ export default LexicalUnitEdit;
<th scope="row" class="py-2 px-1 text-secondary">Status</th>
</tr>
<tr class="preferences py-0 px-0 border-top border-left border-secondary"
+ v-if="lexicalUnitsVisible"
v-for='lexical_unit in lexical_units'
>
<template v-if="isFrameVisible(lexical_unit.frame_status)">
@@ -1041,6 +1065,12 @@ export default LexicalUnitEdit;
</tr>
</tbody>
</table>
+ </td>
+ <td style="vertical-align: text-top; padding-left: 10px; padding-top: 8px;">
+ <span class="cursor-pointer" @click.stop="hideLexicalUnits()" title="Ukryj jednostki leksykalne">▴</span> /
+ <span class="cursor-pointer" @click.stop="showLexicalUnits()" title="Pokaż jednostki leksykalne">▾</span></td>
+ </tr>
+ </table>
</div>
</div>
</div>
diff --git a/frontend/src/components/unification/shared/frame-components/SlowalFrameComponent.vue b/frontend/src/components/unification/shared/frame-components/SlowalFrameComponent.vue
index 88361c5..c1f06ae 100644
--- a/frontend/src/components/unification/shared/frame-components/SlowalFrameComponent.vue
+++ b/frontend/src/components/unification/shared/frame-components/SlowalFrameComponent.vue
@@ -4,13 +4,14 @@ import InfoTooltip from "/src/components/shared/InfoTooltip.vue";
export default {
props: {
frame: Object,
- selectedExamples: Object
+ selectedExamples: Object,
},
components: {InfoTooltip},
emits: ['frameSelectionChanged'],
data() {
return {
img_prefix: window.STATIC_URL,
+ selectionalPreferenciesShow: Boolean
}
},
methods: {
@@ -18,9 +19,6 @@ export default {
const ret = window.lexical_units2dom(this.frame.lexical_units);
return ret;
},
- getOpinionHTML() {
- return window.make_opinion_row(this.frame, this.frame.arguments.length, 3).outerHTML;
- },
getArguments() {
return this.frame.arguments;
},
@@ -33,7 +31,13 @@ export default {
const selectedExampleFrameArguments = this.selectedExamples && this.selectedExamples.length > 0 ? new Set(this.selectedExamples.map(e => e.argument_ids).flat()) : null;
return argument.role + ' ' + (argument.selected ? 'active' : argument.hover ? 'bg-highlight' : '')
+ (selectedExampleFrameArguments != null ? selectedExampleFrameArguments.has(argument.id) ? 'example-yes' : 'example-no' : '');
- }
+ },
+ hideSelectionalPreferencies() {
+ this.selectionalPreferenciesShow = false;
+ },
+ showSelectionalPreferencies() {
+ this.selectionalPreferenciesShow = true;
+ }
},
mounted() {
this.img_prefix = window.STATIC_URL;
@@ -44,7 +48,21 @@ export default {
<template>
<table class="table m-0 table-borderless border border-secondary text-dark">
<tbody>
- <tr class="opinion-row" v-html="getOpinionHTML()">
+ <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="frame.arguments.length">
+ <table class="table m-0 p-0 table-borderless">
+ <tr>
+ <td class="opinion-cell p-0">
+ <img :src="'/static/entries/img/' + frame.opinion_key + '.svg'" :alt="frame.opinion"
+ width="12" height="12"> {{frame.opinion}}
+ </td>
+ <td class="opinion-cell p-0" style="text-align: right;">
+ <span class="cursor-pointer" @click.stop="hideSelectionalPreferencies()" title="Ukryj preferencje selekcyjne">▴</span> /
+ <span class="cursor-pointer" @click.stop="showSelectionalPreferencies()" title="Pokaż preferencje selekcyjne">▾</span></td>
+ </tr>
+ </table>
+ </td>
</tr>
<tr>
<th scope="row" class="py-2 px-1 text-secondary">Rola</th>
@@ -59,7 +77,7 @@ export default {
</td>
</template>
</tr>
- <tr>
+ <tr v-if="selectionalPreferenciesShow">
<th scope="row" class="py-0 px-1 text-secondary">Preferencje selekcyjne</th>
<template v-for="argument in getArguments()">
--
GitLab