From 5180a74411b59c485a89343587e4174f5945f381 Mon Sep 17 00:00:00 2001
From: khansadaoudi <hk_daoudi@esi.dz>
Date: Thu, 7 Nov 2024 15:00:37 +0100
Subject: [PATCH] fix: #399

---
 .../sentence/SentenceSegmentation.vue         | 124 ++++++------------
 src/components/sentence/SentenceToolBar.vue   |  28 +++-
 src/components/sentence/VueDepTree.vue        |  13 +-
 src/i18n/en-us/index.ts                       |   5 +-
 src/i18n/fr-fra/index.ts                      |   5 +-
 src/types/main_types.d.ts                     |   1 +
 6 files changed, 77 insertions(+), 99 deletions(-)

diff --git a/src/components/sentence/SentenceSegmentation.vue b/src/components/sentence/SentenceSegmentation.vue
index 2b8e32c6..ea5729e8 100644
--- a/src/components/sentence/SentenceSegmentation.vue
+++ b/src/components/sentence/SentenceSegmentation.vue
@@ -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 }}
@@ -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">
@@ -90,6 +53,7 @@
                   :sentence-bus="sentenceBus"
                   :tree-user-id="userId"
                   :has-pending-changes="hasPendingChanges"
+                  :interactive="false"
                 >
                 </VueDepTree>
               </div>
@@ -110,6 +74,7 @@
                   :sentence-bus="sentenceBus"
                   :tree-user-id="userId"
                   :has-pending-changes="hasPendingChanges"
+                  :interactive="false"
                 >
                 </VueDepTree>
               </div>
@@ -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>
@@ -212,6 +155,7 @@
               :sentence-bus="sentenceBus"
               :tree-user-id="userId"
               :has-pending-changes="hasPendingChanges"
+              :interactive="false"
             >
             </VueDepTree>
           </div>
@@ -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';
@@ -289,13 +233,13 @@ 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 = {};
@@ -303,15 +247,11 @@ export default defineComponent({
     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,
@@ -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;
@@ -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() {
@@ -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 {
@@ -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;
         }
@@ -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) 
diff --git a/src/components/sentence/SentenceToolBar.vue b/src/components/sentence/SentenceToolBar.vue
index 47a2942c..aa8cc90c 100644
--- a/src/components/sentence/SentenceToolBar.vue
+++ b/src/components/sentence/SentenceToolBar.vue
@@ -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>
 
@@ -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>
@@ -247,6 +266,7 @@ export default defineComponent({
     return {
       EMMETT: 'emmett.strickland',
       showSentSegmentationDial: false,
+      sentenceSegmentationOption: '',
     }
   },
   computed: {
@@ -333,6 +353,10 @@ export default defineComponent({
     },
     saveTree(mode: string) {
       this.parentOnSave(mode);
+    },
+    chooseSegmentationOption(option: string) {
+      this.showSentSegmentationDial = true;
+      this.sentenceSegmentationOption = option;
     }
   }
 });
diff --git a/src/components/sentence/VueDepTree.vue b/src/components/sentence/VueDepTree.vue
index 5c171e69..655e5cc4 100644
--- a/src/components/sentence/VueDepTree.vue
+++ b/src/components/sentence/VueDepTree.vue
@@ -80,6 +80,10 @@ export default defineComponent({
     sampleName: {
       type: String as PropType<string>,
       default: '',
+    },
+    isSplitDial: {
+      type: Boolean as PropType<boolean>,
+      default: false,
     }
   },
   data() {
@@ -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] } ||
@@ -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,
@@ -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,
diff --git a/src/i18n/en-us/index.ts b/src/i18n/en-us/index.ts
index 224eb9f6..2cbc9fd7 100644
--- a/src/i18n/en-us/index.ts
+++ b/src/i18n/en-us/index.ts
@@ -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: [
diff --git a/src/i18n/fr-fra/index.ts b/src/i18n/fr-fra/index.ts
index bf9523a4..bec0e930 100644
--- a/src/i18n/fr-fra/index.ts
+++ b/src/i18n/fr-fra/index.ts
@@ -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: [
diff --git a/src/types/main_types.d.ts b/src/types/main_types.d.ts
index d45a7f92..d4b98ff0 100644
--- a/src/types/main_types.d.ts
+++ b/src/types/main_types.d.ts
@@ -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 };