Select Git revision
requirements.txt
This project manages its dependencies using pip.
Learn more
FreeLuEdit.vue 42.95 KiB
<script>
import InfoTooltip from "../../shared/InfoTooltip.vue";
import Spinner from "../../shared/Spinner.vue";
import ExamplesComponent from "../shared/frame-components/ExamplesComponent.vue";
import SlowalFrameComponent from "../shared/frame-components/SlowalFrameComponent.vue";
import SemanticsSchemataComponent from "../shared/frame-components/SemanticsSchemataComponent.vue";
import MeaningComponent from "../shared/frame-components/MeaningComponent.vue";
import SelectionalPreference from "../Unification/SelectionalPreference.js";
import {frames2lexical_units, send_post_request} from "../shared/utils";
export default {
props: {
entryId: Number,
},
data() {
return {
gettext: window.gettext,
lexical_units: [],
free_lexical_units: [],
frame_in_progress: null,
frame_in_progress_arguments: null,
img_prefix: window.STATIC_URL,
frames: [],
right_pane_tabs: [
{id: 'schemata', label: gettext('Schematy')},
],
active_slowal_frame: null,
subentries: null,
alternations: null,
realisation_phrases: null,
realisation_descriptions: null,
examples: null,
selectedFrameArguments: null,
frame_arguments_or_type: false,
selectedLus: null,
selectedSchemas: null,
selectedExamples: null,
lexicalUnitsVisible: true,
selected_frame_argument_id: null,
selected_schemata_position_id: null,
selected_schemata_position_alternation_id: null,
selected_schemata_subentry_id: null,
}
},
components: {
InfoTooltip,
Spinner,
SlowalFrameComponent,
ExamplesComponent,
SemanticsSchemataComponent,
MeaningComponent
},
emits: ['frameSelectionChanged'],
watch: {
forceRefresh(newVal, oldVal) {
this.loadFrame();
}
},
computed: {
selectionalPreference() {
return new SelectionalPreference();
},
},
methods: {
hideLexicalUnits() {
this.lexicalUnitsVisible = false;
},
showLexicalUnits() {
this.lexicalUnitsVisible = true;
},
loadEntry() {
$('#lexical-unit-notes').html('');
var data = {'entry': this.entryId, 'no_filters': false, 'lexical_unit_id': this.lexicalUnitId};
$.ajax({
type: 'post',
url: '/' + lang + '/entries/get_entry/',
dataType: 'json',
data: data,
timeout: 60000,
success: function (response) {
window.clear_info();
this.frames = response.frames;
this.unifiedFrame = response.unified_frame;
this.subentries = response.subentries;
this.alternations = response.alternations;
this.realisation_phrases = response.realisation_phrases;
this.realisation_descriptions = response.realisation_descriptions;
this.examples = response.examples;
this.lexical_units = frames2lexical_units(response.frames);
this.free_lexical_units = response.free_lexical_units;
this.frame_in_progress = null;
this.frame_in_progress_arguments = null;
if (response.frames_in_building_process.length > 0) {
this.frame_in_progress = response.frames_in_building_process[0];
this.frame_in_progress_arguments = response.frames_in_building_process[0]['arguments'];
}
window.update_last_visited(response.last_visited);
}.bind(this),
error: function (request, errorType, errorMessage) {
show_error(errorType + ' (' + errorMessage + ')');
}
});
},
deselectSlowalFrameSelectedElements() {
this.subentries.forEach(subentry => {
subentry.schemata.forEach(s => {
s.selected = false;
});
});
this.frames.forEach(frame => {
frame.lexical_units.forEach(lu => {
lu.selected = false;
});
frame.arguments.forEach(argument => {
argument.selected = false;
});
});
this.examples.forEach(example => {
example.selected = false;
});
this.selectedLus = [];
this.selectedFrameArguments = [];
this.selectedSchemas = [];
this.selectedExamples = [];
},
schemataSelected(schemas) {
this.selectedSchemas = schemas;
},
selectSchemaPositionSelected(selected_schemata_position_id, subentry, alternation_id) {
this.selected_schemata_position_id = selected_schemata_position_id;
this.selected_schemata_position_alternation_id = alternation_id;
this.selected_schemata_subentry_id = subentry ? subentry.id : null;
},
exampleSelected(selectedExamples) {
this.selectedExamples = selectedExamples;
},
meaningLuSelected(selectedLus) {
this.selectedLus = selectedLus;
},
insideFrameSelectionChanged(selectedFrameArguments) {
this.selectedFrameArguments = selectedFrameArguments;
},
slowalFrameSelected(frame) {
this.deselectSlowalFrameSelectedElements();
if (this.active_slowal_frame === frame) {
this.active_slowal_frame = null;
} else {
this.active_slowal_frame = frame;
}
},
connect_lus_to_slowal_frame(frame_in_progress) {
const frame_in_progress_lus = frame_in_progress ? frames2lexical_units([frame_in_progress]).map(l => {
l.id = l.id;
l.str = l.str;
return l;
}) : [];
const free_lus = this.free_lexical_units.map(l => {
l.id = l.pk;
l.str = l.display;
return l;
});
const frame_in_progress_lus_ids = new Set(frame_in_progress_lus.map(l => l.id));
const lusSelect = function () {
return free_lus.concat(frame_in_progress_lus).map(lu => {
return `<label><input type="checkbox" ${frame_in_progress_lus_ids.has(lu.id) ? 'checked' : ''} name="lus" value="${lu.id}" /> ${lu.str}</label><br />`;
}).join("");
}.bind(this);
const extract_frames_to_new_frame_popup = {
state0: {
title: 'Wybierz jednostki leksykalne',
html: lusSelect,
buttons: {Anuluj: 0, Stwórz: 1},
focus: -1,
submit: function (e, v, m, f) {
if (v == 0) {
e.preventDefault();
$.prompt.close();
}
if (v === 1) {
e.preventDefault();
let lu_ids = normalizeFormData(f.lus);
const data = {
'lu_ids': JSON.stringify(lu_ids),
'entry_id': this.entryId,
'frame_id': frame_in_progress ? frame_in_progress.id : null
};
$.ajax({
type: 'post',
url: '/' + lang + '/freelus/' + (frame_in_progress ? 'change_lus_in_slowal_frame' : 'create_new_slowal_frame') + '/',
dataType: 'json',
data: data,
timeout: 60000,
success: function (response) {
// show_info(frame_in_progress ? 'Nowa rama została stworzona.' : 'Lista podpiętych jednostek leksyklanych zostala zmieniona.');
this.loadEntry();
$.prompt.close();
}.bind(this),
error: function (request, errorType, errorMessage) {
show_error(errorType + ' (' + errorMessage + ')');
$.prompt.close();
}
});
}
}.bind(this)
}
}
$.prompt(extract_frames_to_new_frame_popup);
},
attach_examples() {
if (this.frame_in_progress) {
if (this.selectedLus && this.selectedLus.length > 0) {
const examplesSelect = function () {
return '<div class="attach-examples-table-wrapper-scroll-y attach-examples-custom-scrollbar"><table id="attach-examples" class="table table-bordered table-striped mb-0"><thead><tr class="font-weight-bold"><th></th><th>Zdanie</th><th>Źródło</th><th>Opinia</th></tr></thead>' + this.examples.map(example => {
return `<tr><td><input type="checkbox" ${this.selectedLus && example.lu_ids.includes(this.selectedLus[0].id) ? 'checked' : ''} name="lus" value="${example.id}" /></td><td>${example.sentence}</td><td>${example.source}</td><td>${example.opinion}</td></tr>`;
}).join("") + '</table></div>';
}.bind(this);
const attach_examples_popup = {
state0: {
title: 'Wybierz przykłady dla: ' + this.selectedLus.map(e => e.str).join(', '),
html: examplesSelect,
buttons: {Anuluj: 0, Wybierz: 1},
focus: -1,
submit: function (e, v, m, f) {
if (v == 0) {
e.preventDefault();
$.prompt.close();
}
if (v === 1) {
e.preventDefault();
let example_ids = normalizeFormData(f.lus);
const data = {
'example_ids': JSON.stringify(example_ids),
'selected_lus': JSON.stringify(this.selectedLus.map(e => e.id)),
};
$.ajax({
type: 'post',
url: '/' + lang + '/freelus/attach_examples_to_frame/',
dataType: 'json',
data: data,
timeout: 60000,
success: function (response) {
show_info('Przykłady zostały przypisane.');
this.loadEntry();
$.prompt.close();
}.bind(this),
error: function (request, errorType, errorMessage) {
show_error(errorType + ' (' + errorMessage + ')');
$.prompt.close();
}
});
}
}.bind(this)
}
}
$.prompt(attach_examples_popup);
} else {
alert(gettext("Zaznacz jednostkę leksykalną, do którego chcesz podłączyć przykłady."));
}
} else {
alert(gettext("Stwórz nową ramę."));
}
},
change_frame_opinion() {
if (this.frame_in_progress) {
const frame_opinion_select = function () {
return frame_opinions.map(frame_opinion => {
return `<label><input type="radio" name="opinion" value="${frame_opinion.id}" /> ${frame_opinion.key}</label><br />`;
}).join("");
}.bind(this);
const change_frame_opinion_popup = {
state0: {
title: 'Wybierz opinię',
html: frame_opinion_select,
buttons: {Anuluj: 0, Wybierz: 1},
focus: -1,
submit: function (e, v, m, f) {
if (v == 0) {
e.preventDefault();
$.prompt.close();
}
if (v === 1) {
e.preventDefault();
let opinion_id = normalizeFormData(f.opinion)[0];
send_post_request('/freelus/change_frame_opinion/',
{
'frame_id': this.frame_in_progress.id,
'opinion_id': opinion_id,
},
(reponse) => {
// show_info('Opinia została zmieniona.');
alert(gettext("Opinia została zmieniona."));
this.loadEntry();
$.prompt.close();
},
(request, errorType, errorMessage) => {
show_error(errorType + ' (' + errorMessage + ')');
alert(gettext("Zmiana opinii nie powiodła się. Błąd: " + errorType + ' (' + errorMessage + ')'));
$.prompt.close();
})
}
}.bind(this)
}
}
$.prompt(change_frame_opinion_popup);
} else {
alert(gettext("Stwórz nową ramę."));
}
},
roleStrMapping(roleName) {
if (roleName === 'role') {
return 'required';
} else if (roleName === 'modifier') {
return 'typical';
} else {
return roleName;
}
},
remove_argument() {
if (this.selected_frame_argument_id === null) {
alert(gettext("Zaznacz argument, który chcesz usunąć."));
} else {
const data = {
'argument_id': parseInt(this.selected_frame_argument_id.split('-')[1]),
};
$.ajax({
type: 'post',
url: '/' + lang + '/freelus/remove_argument_from_frame/',
dataType: 'json',
data: data,
timeout: 60000,
success: function (response) {
// alert(gettext("Argument został usunięty."));
show_info('Argument został usunięty.');
this.loadEntry();
$.prompt.close();
}.bind(this),
error: function (request, errorType, errorMessage) {
show_error(errorType + ' (' + errorMessage + ')');
$.prompt.close();
}
});
}
},
change_role(selected_frame_argument_id, api_path) {
if (selected_frame_argument_id === null) {
alert(gettext("Zaznacz argument, dla którego chcesz wybrać rolę."));
} else {
const newSelect = function () {
let rolesHTML = roles.map(role => {
return `<label style="background-color:rgb(${role.color})"><input type="radio" name="role" value="${role.id}" /> ${role.role}</label><br />`;
}).join("");
let attributesHTML = role_attributes.map(attribute => {
return `<label><input type="radio" name="attribute" value="${attribute.id}" /> ${attribute.attribute}</label><br />`;
}).join("");
let subAttributesHTML = role_sub_attributes.map(subAttribute => {
return `<label><input type="radio" name="sub_attribute" value="${subAttribute.id}" /> ${subAttribute.sub_attribute}</label><br />`;
}).join("");
return '<div class="row">' +
'<div class="column"><div class="role_select_header">Role</div>' + rolesHTML + '</div>' +
'<div class="column"><div class="role_select_header">Atrybuty</div>' + attributesHTML + '</div>' +
'<div class="column"><div class="role_select_header">Podatrybuty</div>' + subAttributesHTML + '</div>' +
'</div>';
}.bind(this);
let change_role_popup = {
state0: {
title: 'Dodaj rolę',
html: newSelect(),
buttons: {Anuluj: -1, Zatwierdź: 1},
focus: -1,
submit: function (e, v, m, f) {
if (v == -1) {
$.prompt.close();
}
if (v == 1) {
e.preventDefault();
const role_id = normalizeFormData(f.role)[0];
if (role_id != null) {
const attribute_id = normalizeFormData(f.attribute)[0];
const sub_attribute_id = normalizeFormData(f.sub_attribute)[0];
const data = {
'frame_id': this.frame_in_progress.id,
'argument_id': selected_frame_argument_id,
'role_id': role_id,
'attribute_id': attribute_id,
'sub_attribute_id': sub_attribute_id
};
$.ajax({
type: 'post',
url: '/' + lang + '/freelus/' + api_path + '/',
dataType: 'json',
data: data,
timeout: 60000,
success: function (response) {
// alert(gettext("Nowa rola zosała zapisana."));
show_info('Nowa rola zosała zapisana.');
this.loadEntry();
$.prompt.close();
}.bind(this),
error: function (request, errorType, errorMessage) {
alert(errorType + ' (' + errorMessage + ')');
show_error(errorType + ' (' + errorMessage + ')');
$.prompt.close();
}
});
} else {
alert(gettext("Musisz wybrać typ oraz rolę."));
}
}
}.bind(this)
}
};
$.prompt(change_role_popup);
}
},
computeArgumentCSS(argument) {
const selectedExampleFrameArguments = this.selectedExamples && this.selectedExamples.length > 0 ? new Set(this.selectedExamples.map(e => e.argument_ids).flat()) : null;
return argument.role + ' ' + (argument.id === this.selected_frame_argument_id ? 'active' : argument.hover ? 'bg-highlight' : '')
+ (selectedExampleFrameArguments != null ? selectedExampleFrameArguments.has(argument.id) ? 'example-yes' : 'example-no' : '');
},
selectArgument(argument) {
if (this.selected_frame_argument_id != argument.id) {
this.selected_frame_argument_id = argument.id;
this.selectedFrameArguments = [argument];
} else {
this.selected_frame_argument_id = null;
this.selectedFrameArguments = [];
}
// const selectedArguments = this.frame_in_progress.arguments.filter(argument => argument.selected)
// this.$emit('frameSelectionChanged', selectedArguments);
},
assign_schema() {
if (this.frame_in_progress && this.selected_schemata_position_id && this.selected_frame_argument_id) {
const data = {
'frame_id': parseInt(this.frame_in_progress.id),
'subentry_id': parseInt(this.selected_schemata_subentry_id),
'argument_id': parseInt(this.selected_frame_argument_id.split('-')[1]),
'schema_id': parseInt(this.selectedSchemas[0].id),
'schema_position_id': parseInt(this.selected_schemata_position_id.split('-')[1]),
'schema_alternation_id': (parseInt(this.selected_schemata_position_alternation_id)+1)
};
$.ajax({
type: 'post',
url: '/' + lang + '/freelus/attach_schema_to_argument/',
dataType: 'json',
data: data,
timeout: 60000,
success: function (response) {
if(response['succ'] == true) {
// alert(gettext("Argument ramy został powiązany z tybranym argumentem schematu."));
show_info('Argument ramy został powiązany z tybranym argumentem schematu.');
this.loadEntry();
} else {
alert(gettext(response['error']));
show_info(response['error']);
}
$.prompt.close();
}.bind(this),
error: function (request, errorType, errorMessage) {
alert(errorType + ' (' + errorMessage + ')');
show_error(errorType + ' (' + errorMessage + ')');
$.prompt.close();
}
});
} else {
alert(gettext("W celu powiązania schamatu oraz ramy zaznacz argument ramy oraz argument schematu."));
}
},
delete_schema_connections() {
if (this.frame_in_progress && this.selected_schemata_position_id && this.selected_frame_argument_id) {
const data = {
'frame_id': this.frame_in_progress.id,
'subentry_id': parseInt(this.selected_schemata_subentry_id),
'argument_id': this.selected_frame_argument_id.split('-')[1],
'schema_id': this.selectedSchemas[0].id,
'schema_position_id': this.selected_schemata_position_id.split('-')[1],
'schema_alternation_id': (parseInt(this.selected_schemata_position_alternation_id)+1)
};
$.ajax({
type: 'post',
url: '/' + lang + '/freelus/delete_schema_to_argument_connection/',
dataType: 'json',
data: data,
timeout: 60000,
success: function (response) {
// alert(gettext("Powiązanie pomiędzy argumentem ramy a argumentem schematu zostało usunięte."));
show_info('Powiązanie pomiędzy argumentem ramy a argumentem schematu zostało usunięte.');
this.loadEntry();
$.prompt.close();
}.bind(this),
error: function (request, errorType, errorMessage) {
alert(errorType + ' (' + errorMessage + ')');
show_error(errorType + ' (' + errorMessage + ')');
$.prompt.close();
}
});
} else {
alert(gettext("W celu usunięcia powiązania schamatu oraz ramy zaznacz argument ramy oraz argument schematu."));
}
},
finish_frame_building() {
if (this.frame_in_progress) {
const data = {
'frame_id': this.frame_in_progress.id,
};
$.ajax({
type: 'post',
url: '/' + lang + '/freelus/finish_frame_processing/',
dataType: 'json',
data: data,
timeout: 60000,
success: function (response) {
alert(gettext("Rama została oznaczona jako gotowa."));
show_info('Rama została oznaczona jako gotowa.');
this.loadEntry();
$.prompt.close();
}.bind(this),
error: function (request, errorType, errorMessage) {
alert(errorType + ' (' + errorMessage + ')');
show_error(errorType + ' (' + errorMessage + ')');
$.prompt.close();
}
});
} else {
alert(gettext("W celu usunięcia powiązania schamatu oraz ramy zaznacz argument ramy oraz argument schematu."));
}
}
},
mounted() {
if (this.entryId) {
this.loadEntry();
}
Split(['#semantics-frames-pane', '#free-lus-schemata-pane'], {
sizes: [60, 40],
minSize: 10,
gutterSize: 4,
elementStyle: (dimension, size, gutterSize) => {
return {
'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
}
},
});
Split(['#free-lus-pane', '#free-lus-examples'], {
sizes: [60, 40],
direction: 'vertical',
gutterSize: 4,
minSize: 10,
});
}
}
</script>
<template>
<div class="col h-100 px-0 pt-0 pb-0 overflow-auto" id="semantics-frames-pane">
<div id="free-lus-pane" class="col w-100 p-0 overflow-auto">
<table class="table-button-menu sticky-top" cellspacing="1">
<tr style="background-color: white;">
<td id="create-new-frame" class="table-button-menu-td" @click="connect_lus_to_slowal_frame(this.frame_in_progress)"
style="padding: 10px 15px 10px 15px; color: #000000;">{{this.frame_in_progress ? 'Dodaj/Usuń jednostki' : 'Nowa rama'}}
</td>
<td id="add-argument" class="table-button-menu-td" @click="change_role(-1, 'add_argument_to_frame')"
style="padding: 10px 15px 10px 15px; color: #000000;">Dodaj argument
</td>
<td id="assign-schema" class="table-button-menu-td" @click="assign_schema()"
style="padding: 10px 15px 10px 15px; color: #000000;">Podłącz argument
</td>
<td id="assign-examples" class="table-button-menu-td" @click="attach_examples()"
style="padding: 10px 15px 10px 15px; color: #000000;">Podłącz przykłady
</td>
<td id="finish-frame-building" class="table-button-menu-td" @click="finish_frame_building()"
style="padding: 10px 15px 10px 15px; color: #000000;">Gotowe
</td>
</tr>
<tr style="background-color: white;">
<td id="change-role" class="table-button-menu-td"
@click="change_role(selected_frame_argument_id ? selected_frame_argument_id.split('-')[1] : null, 'change_role')"
style="padding: 10px 15px 10px 15px; color: #000000;">Zmień rolę
</td>
<td id="remove-argument" class="table-button-menu-td" @click="remove_argument()"
style="padding: 10px 15px 10px 15px; color: #000000;">Usuń argument
</td>
<td id="delete-schema" class="table-button-menu-td" @click="delete_schema_connections()"
style="padding: 10px 15px 10px 15px; color: #000000;">Odłącz argument
</td>
<td id="change-frame-opinion" class="table-button-menu-td" @click="change_frame_opinion()"
style="padding: 10px 15px 10px 15px; color: #000000;">Zmień opinię
</td>
</tr>
</table>
<spinner/>
<div align="center">
<div class="lu-table mt-3 mb-3">
<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>
<th scope="row" class="py-2 px-1 text-secondary">Opinia</th>
<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'
>
<td class="argument py-2 px-1 border-top border-left border-secondary">{{
lexical_unit.str }}
</td>
<td class="argument py-2 px-1 border-top border-left border-secondary">
<img v-bind:src="img_prefix + 'entries/img/' +lexical_unit.opinion_key + '.svg'"
width="12" height="12" v-bind:alt="lexical_unit.opinion">
{{ lexical_unit.opinion }}
</td>
<td class="argument py-2 px-1 border-top border-left border-secondary">[{{
lexical_unit.frame_status }}]
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align: text-top; padding-left: 10px; padding-top: 8px; min-width: 50px;">
<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 class="lu-table mt-3 mb-3">
<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">Wolne jednostki leksykalne</th>
</tr>
<tr class="preferences py-0 px-0 border-top border-left border-secondary"
v-if="lexicalUnitsVisible"
v-for='lexical_unit in free_lexical_units'
>
<td class="argument py-2 px-1 border-top border-left border-secondary">{{
lexical_unit.display }}
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align: text-top; padding-left: 10px; padding-top: 8px; min-width: 50px;">
<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 id="semantics-frames-processing-head">
<span class="font-weight-bold h4">Rama w opracowaniu</span>
</div>
<div class="row pt-3" style="flex-wrap: nowrap;" v-if="frame_in_progress">
<div class="col pl-5 pr-5">
<div class="row">
<div class="col frame px-0 text-left" id="lexical-unit-frame_in_progress">
<meaning-component
:key="frame_in_progress.lexical_units"
:lexicalUnits="frame_in_progress.lexical_units"
:selectedExamples="selectedExamples"
@meaning-lu-selected="meaningLuSelected"
></meaning-component>
</div>
</div>
<div class="row">
<div class="col px-0 frame mb-3 active">
<table id="free-lus-frame"
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="frame_in_progress.arguments.length">
<table class="table m-0 p-0 table-borderless">
<tr>
<td class="opinion-cell p-0">
<img :src="'/static/entries/img/' + frame_in_progress.opinion_key + '.svg'"
:alt="frame_in_progress.opinion"
width="12" height="12"> {{frame_in_progress.opinion}}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th scope="row" class="py-2 px-1 text-secondary">Rola</th>
<template v-for="argument in frame_in_progress.arguments">
<td class="argument py-2 px-1 border-top border-left border-secondary"
@mouseenter="argument.hover=true"
@mouseleave="argument.hover=false"
@click.stop="selectArgument(argument)"
:class="computeArgumentCSS(argument)"
>
{{argument.str}}
</td>
</template>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="semantics-frames-head">
<span class="font-weight-bold h4">Ramy Opracowane</span>
</div>
<div id="semantics-frames">
<template v-for="frame in frames">
<div class="row pt-3" style="flex-wrap: nowrap;">
<div class="col pl-5 pr-5">
<div class="row">
<div class="col frame px-0" id="lexical-unit">
<meaning-component
:key="frame.lexical_units"
:lexicalUnits="frame.lexical_units"
:selectedExamples="selectedExamples"
@meaning-lu-selected="meaningLuSelected"
></meaning-component>
</div>
</div>
<div class="row">
<div class="col px-0 frame mb-3 active"
@mouseenter="frame.hover=true"
@mouseleave="frame.hover=false"
@click="slowalFrameSelected(frame)"
:class="frame === active_slowal_frame ? 'active-frame' : frame.hover ? 'bg-highlight' : ''">
<slowal-frame-component
:frame="frame"
:key="frame"
:selectedExamples="selectedExamples"
@frame-selection-changed="insideFrameSelectionChanged"
/>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
<div id="free-lus-examples" class="col w-100 p-0 tab-pane overflow-auto">
<examples-component v-if="examples"
:examples="examples"
:frame="active_slowal_frame"
:frame_arguments="selectedFrameArguments"
:frame_arguments_or_type="frame_arguments_or_type"
:lus="selectedLus"
:schemas="selectedSchemas"
:key="examples"
@example-selected="exampleSelected"
/>
</div>
</div>
<div class="col h-100 px-1 pt-0 pb-0 overflow-auto"
style="padding-left: 0px!important; padding-right: 0px!important;" id="free-lus-schemata-pane">
<semantics-schemata-component
:subentries="subentries"
:key="subentries"
:frame="frame_in_progress"
:alternations="alternations"
:realisation_phrases="realisation_phrases"
:realisation_descriptions="realisation_descriptions"
:selectedExamples="selectedExamples"
@schemata-selected="schemataSelected"
@schema-position-selected="selectSchemaPositionSelected"
/>
</div>
</template>