Skip to content

Commit

Permalink
fix: #399
Browse files Browse the repository at this point in the history
  • Loading branch information
@khansadaoudi
khansadaoudi committed Nov 7, 2024
1 parent 731c47e commit 5180a74
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 99 deletions.
124 changes: 38 additions & 86 deletions src/components/sentence/SentenceSegmentation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,17 @@
<q-space />
<q-btn v-close-popup flat dense icon="close" @click="closeDialog" />
</q-bar>

<q-card-section class="row">
<div class="col text-h6">
<q-card-section>
<div class="row text-h6">
{{ $t('sentenceSegmentation.title') }}
</div>
<div class="col">
<q-select
dense
outlined
v-model="option"
:label="$t('sentenceSegmentation.selectOptionLabel')"
option-label="label"
option-value="value"
:options="segmentOptions"
@update:model-value="showResults = false"
>
</q-select>
<div class="row text-caption">
{{ $t('sentenceSegmentation.splitSentenceHint') }}
</div>
</q-card-section>

<!-- split sentences -->
<q-card-section v-if="option.value === 'split'">
<q-card-section v-if="segmentationOption === 'SPLIT'">
<div class="row">
<q-chip class="text-center" :color="$q.dark.isActive ? 'grey' : ''" dense> {{ sentId }} </q-chip>
{{ sentence }}
Expand All @@ -41,36 +30,10 @@
:sentence-bus="sentenceBus"
:tree-user-id="userId"
:has-pending-changes="hasPendingChanges"
:is-split-dial="true"
>
</VueDepTree>
</div>
<div class="row q-py-md q-gutter-md">
<div class="col">
<q-select
dense
outlined
v-model="token"
option-label="form"
:label="$t('sentenceSegmentation.selectSplitLabel')"
:options="getSentenceForms"
@update:model-value="splitSentence(token.index)"
>
<template v-slot:selected-item="scope">
{{ scope.opt.form }}
</template>
</q-select>
</div>
<div class="col">
<q-btn
:disable="token.form == ''"
flat
color="primary"
:label="$t('sentenceSegmentation.showResultBtn')"
@click="showReactiveSentences()"
/>
</div>
</div>

<!-- Show split results -->
<div v-if="showResults">
<div class="row q-gutter-md">
Expand All @@ -90,6 +53,7 @@
:sentence-bus="sentenceBus"
:tree-user-id="userId"
:has-pending-changes="hasPendingChanges"
:interactive="false"
>
</VueDepTree>
</div>
Expand All @@ -110,6 +74,7 @@
:sentence-bus="sentenceBus"
:tree-user-id="userId"
:has-pending-changes="hasPendingChanges"
:interactive="false"
>
</VueDepTree>
</div>
Expand Down Expand Up @@ -172,28 +137,6 @@
</q-card-section>
<!-- Merge sentences -->
<q-card-section v-else>
<div class="row q-py-md q-gutter-md">
<div class="col">
<q-select
dense
outlined
v-model="mergedSentId"
:label="$t('sentenceSegmentation.selectMergeLabel')"
:options="sortedSentIds.filter((sent) => sent !== sentId)"
@update:model-value="MergeSentences()"
>
</q-select>
</div>
<div class="col">
<q-btn
:disable="mergedSentId == ''"
flat
color="primary"
:label="$t('sentenceSegmentation.showResultBtn')"
@click="showReactiveSentences()"
/>
</div>
</div>
<div v-if="showResults">
<div class="row">
<q-chip class="text-center" :color="$q.dark.isActive ? 'grey' : ''" dense>
Expand All @@ -212,6 +155,7 @@
:sentence-bus="sentenceBus"
:tree-user-id="userId"
:has-pending-changes="hasPendingChanges"
:interactive="false"
>
</VueDepTree>
</div>
Expand Down Expand Up @@ -252,7 +196,7 @@
</q-dialog>
</template>
<script lang="ts">
import { emptySentenceJson, metaJson_T, sentenceConllToJson, sentenceJsonToConll, sentenceJson_T, treeJson_T } from 'conllup/lib/conll';
import { emptySentenceJson, metaJson_T, sentenceConllToJson, sentenceJsonToConll, sentenceJson_T, tokenJson_T, treeJson_T } from 'conllup/lib/conll';
import { ReactiveSentence } from 'dependencytreejs/src/ReactiveSentence';
import { mapState, mapWritableState } from 'pinia';
import api from 'src/api/backend-api';
Expand Down Expand Up @@ -289,29 +233,25 @@ export default defineComponent({
sampleName: {
type: String as PropType<string>,
required: true,
}
},
segmentationOption: {
type: String as PropType<'MERGE_BEFORE' | 'MERGE_AFTER' | 'SPLIT'>,
required: true,
},
},
data() {
const segmentOptions = [
{ value: 'split', label: this.$t('sentenceSegmentation.segmentOptions[0]') },
{ value: 'merge', label: this.$t('sentenceSegmentation.segmentOptions[1]') },
];
const hasPendingChanges: { [key: string]: boolean } = {};
const firstSentences: sentence_t = {};
const secondSentences: sentence_t = {};
const mergedSentences: sentence_t = {};
const firstReactiveSentence: reactive_sentences_obj_t = {};
const secondReactiveSentence: reactive_sentences_obj_t = {};
const mergedReactiveSentence: reactive_sentences_obj_t = {};
const token: { form: string, index: number } = { form: '', index: 0 };
return {
showDial: true,
segmentOptions,
option: segmentOptions[0],
hasPendingChanges,
sentence: '',
sentId: '',
token,
firstSentences,
secondSentences,
firstReactiveSentence,
Expand All @@ -329,12 +269,6 @@ export default defineComponent({
...mapState(useTreesStore, ['sortedSentIds', 'filteredTrees']),
...mapWritableState(useTreesStore, ['reloadTrees']),
...mapState(useProjectStore, ['name']),
getSentenceForms(): any[] {
return Object.values(this.reactiveSentencesObj[this.userId].state.treeJson.nodesJson).map((token) => ({
index: parseInt(token.ID),
form: token.FORM,
}));
},
disableSaveResultBtn(): boolean {
const firstSentId = this.firstReactiveSentence[this.userId].state.metaJson.sent_id as string;
const sencondSentId = this.secondReactiveSentence[this.userId].state.metaJson.sent_id as string;
Expand All @@ -345,6 +279,16 @@ export default defineComponent({
this.hasPendingChanges[this.userId] = false;
this.sentence = this.reactiveSentencesObj[this.userId].state.metaJson.text as string;
this.sentId = this.reactiveSentencesObj[this.userId].state.metaJson.sent_id as string;
if (this.segmentationOption !== 'SPLIT') {
this.MergeSentences();
this.showReactiveSentences();
}
else {
this.sentenceBus.on('open:splitDialog', ({token}) => {
this.splitSentence(parseInt(token.ID));
this.showReactiveSentences();
})
}
},
methods: {
closeDialog() {
Expand Down Expand Up @@ -395,7 +339,7 @@ export default defineComponent({
showReactiveSentences() {
this.forceRender += 1;
this.showResults = true;
if (this.option.value === 'split') {
if (this.segmentationOption === 'SPLIT') {
this.createReactiveSentence(this.firstSentences, this.firstReactiveSentence as reactive_sentences_obj_t);
this.createReactiveSentence(this.secondSentences, this.secondReactiveSentence as reactive_sentences_obj_t);
} else {
Expand Down Expand Up @@ -449,13 +393,19 @@ export default defineComponent({
MergeSentences() {
const usersDiff = [];
this.mergeWarningMessage = '';
const secondSentenceConlls = this.filteredTrees[this.sortedSentIds.indexOf(this.mergedSentId)].conlls;
const sentIdIndex = this.sortedSentIds.indexOf(this.sentId)
const secondSentId = this.segmentationOption === 'MERGE_BEFORE' ? sentIdIndex - 1 : sentIdIndex + 1;
const secondSentenceConlls = this.filteredTrees[secondSentId].conlls;
for (const [userId, reactiveSentence] of Object.entries(this.reactiveSentencesObj)) {
if (Object.keys(secondSentenceConlls).includes(userId)) {
const firstSentenceConll = reactiveSentence.exportConll();
const secondSentenceConll = secondSentenceConlls[userId];
this.mergedSentences[userId] = this.mergeConlls(firstSentenceConll, secondSentenceConll);
} else {
this.mergedSentences[userId] = this.segmentationOption === 'MERGE_BEFORE' ?
this.mergeConlls(secondSentenceConll, firstSentenceConll) : this.mergeConlls(firstSentenceConll, secondSentenceConll);
}
else {
usersDiff.push(userId);
this.mergedSentences[userId] = reactiveSentence.state;
}
Expand Down Expand Up @@ -486,12 +436,14 @@ export default defineComponent({
HEAD: token.HEAD > 0 ? token.HEAD + length : token.HEAD,
};
});
mergedSentence.metaJson = {
...firstSentenceJson.metaJson,
...secondSentenceJson.metaJson,
timestamp: firstSentenceJson.metaJson.timestamp > secondSentenceJson.metaJson.timestamp ? firstSentenceJson.metaJson.timestamp: secondSentenceJson.metaJson.timestamp,
sent_id: this.proposeMergedSentId(firstSentenceJson.metaJson.sent_id as string, secondSentenceJson.metaJson.sent_id as string),
};
for (const key of Object.keys(firstSentenceJson.metaJson)) {
if (Object.keys(secondSentenceJson.metaJson).includes(key)
&& !this.unchangedMetaData.includes(key)
Expand Down
28 changes: 26 additions & 2 deletions src/components/sentence/SentenceToolBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,12 +121,30 @@
</q-item-section>
</q-item>

<q-item v-if="isValidator && canChangeSegmentation" v-close-popup clickable @click="showSentSegmentationDial = true">
<q-item v-if="isValidator && canChangeSegmentation" v-close-popup clickable @click="chooseSegmentationOption('MERGE_BEFORE')">
<q-item-section avatar>
<q-avatar icon="arrow_back" color="primary" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label> Merge before </q-item-label>
</q-item-section>
</q-item>

<q-item v-if="isValidator && canChangeSegmentation" v-close-popup clickable @click="chooseSegmentationOption('MERGE_AFTER')">
<q-item-section avatar>
<q-avatar icon="arrow_forward" color="primary" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label> Merge After </q-item-label>
</q-item-section>
</q-item>

<q-item v-if="isValidator && canChangeSegmentation" v-close-popup clickable @click="chooseSegmentationOption('SPLIT')">
<q-item-section avatar>
<q-avatar icon="content_cut" color="primary" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label> Sentence segmentation </q-item-label>
<q-item-label> Split sentence </q-item-label>
</q-item-section>
</q-item>

Expand Down Expand Up @@ -180,6 +198,7 @@
:reactive-sentences-obj="reactiveSentencesObj"
:user-id="openTabUser"
:sample-name="(sentenceData.sample_name as string)"
:segmentation-option="sentenceSegmentationOption"
@closed="showSentSegmentationDial = false"
/>
</template>
Expand Down Expand Up @@ -247,6 +266,7 @@ export default defineComponent({
return {
EMMETT: 'emmett.strickland',
showSentSegmentationDial: false,
sentenceSegmentationOption: '',
}
},
computed: {
Expand Down Expand Up @@ -333,6 +353,10 @@ export default defineComponent({
},
saveTree(mode: string) {
this.parentOnSave(mode);
},
chooseSegmentationOption(option: string) {
this.showSentSegmentationDial = true;
this.sentenceSegmentationOption = option;
}
}
});
Expand Down
13 changes: 10 additions & 3 deletions src/components/sentence/VueDepTree.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@ export default defineComponent({
sampleName: {
type: String as PropType<string>,
default: '',
},
isSplitDial: {
type: Boolean as PropType<boolean>,
default: false,
}
},
data() {
Expand Down Expand Up @@ -223,8 +227,7 @@ export default defineComponent({
const clickedId = e.detail.clicked;
const clickedToken = { ...this.sentenceSVG.treeJson.nodesJson[clickedId] };
const targetLabel = e.detail.targetLabel;
if (targetLabel === 'DEPREL') {
if (targetLabel === 'DEPREL' && !this.isSplitDial) {
const dep = clickedToken;
const gov =
{ ...this.sentenceSVG.treeJson.nodesJson[dep.HEAD] } ||
Expand All @@ -237,6 +240,10 @@ export default defineComponent({
dep,
userId: this.treeUserId,
});
} else if (targetLabel === 'FORM' && this.isSplitDial) {
this.sentenceBus.emit('open:splitDialog', {
token: clickedToken,
});
} else if (targetLabel === 'FORM' || ['MISC.', 'FEATS', 'LEMMA'].includes(targetLabel.slice(0, 5))) {
this.sentenceBus.emit('open:featuresDialog', {
token: clickedToken,
Expand Down Expand Up @@ -265,7 +272,7 @@ export default defineComponent({
dep = { ...this.sentenceSVG.treeJson.nodesJson[hoveredId] };
}
// emit only if dep is defined. If the token is being dragged on nothing, nothing will happen
if (dep?.ID) {
if (dep?.ID && !this.isSplitDial) {
this.sentenceBus.emit('open:relationDialog', {
gov,
dep,
Expand Down
5 changes: 1 addition & 4 deletions src/i18n/en-us/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,10 +462,7 @@ export default {
},
sentenceSegmentation: {
title: 'sentence Segmentation',
selectOptionLabel: 'Select segmentation option',
segmentOptions: ['Split', 'Merge'],
selectSplitLabel: 'Select the token from which the second sentence will start',
showResultBtn: 'Show result',
splitSentenceHint: 'To split sentences click on the token from which the second sentence will start',
editGeneratedMeta: 'Edit the generated metadata',
saveResults: 'Save results',
sentIdWarningMsg: [
Expand Down
5 changes: 1 addition & 4 deletions src/i18n/fr-fra/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,10 +465,7 @@ export default {
},
sentenceSegmentation: {
title: 'Segmentation de la phrase',
selectOptionLabel: 'Sélectionnez un choix de segmentation',
segmentOptions: ['Diviser', 'Fusionner'],
selectSplitLabel: 'Sélectionnez le token à partir duquel la deuxième phrase commencera.',
showResultBtn: 'Afficher le résultat',
splitSentenceHint: "Pour diviser les phrases, cliquez sur le token à partir duquel la deuxième phrase commencera.",
editGeneratedMeta: 'Editer les métadonnées générées',
saveResults: 'Sauvegarder le résultat',
sentIdWarningMsg: [
Expand Down
1 change: 1 addition & 0 deletions src/types/main_types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export type sentence_bus_events_t = {
'open:featuresDialog': { userId: string; token: tokenJson_T };
'open:uposDialog': { userId: string; token: tokenJson_T };
'open:xposDialog': { userId: string; token: tokenJson_T };
'open:splitDialog': { token: tokenJson_T };
'action:saved': { userId: string };
'export:SVG': { userId: string };
'export:PNG': { userId: string };
Expand Down

0 comments on commit 5180a74

Please sign in to comment.