various minor bug fixes

package.json

 {
   "name": "mc_frontend",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "author": "Ionic Framework",
   "homepage": "https://ionicframework.com/",
   "scripts": {
@@ -79,4 +79,4 @@
       "browser"
     ]
   }
-}
\ No newline at end of file
+}

src/app/author/author.page.ts

@@ -57,7 +57,6 @@ export class AuthorPage {
 
     restoreLastSetup() {
         this.corpusService.restoreLastCorpus().then(() => {
-            this.corpusService.isTextRangeCorrect = true;
             if (HelperService.isVocabularyCheck) {
                 HelperService.goToVocabularyCheckPage(this.navCtrl);
             } else {

src/app/change-language/change-language.page.ts

 import {Component, OnInit} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
 import {HelperService} from 'src/app/helper.service';
+import {CorpusService} from 'src/app/corpus.service';
 
 @Component({
     selector: 'app-change-language',
@@ -9,13 +10,18 @@ import {HelperService} from 'src/app/helper.service';
 })
 export class ChangeLanguagePage implements OnInit {
 
-    constructor(public translate: TranslateService) {
+    constructor(public translate: TranslateService,
+                public corpusService: CorpusService) {
     }
 
     changeLanguage(newLanguage: string) {
         if (this.translate.currentLang !== newLanguage) {
-            this.translate.use(newLanguage);
-            HelperService.loadTranslations(this.translate);
+            this.translate.use(newLanguage).subscribe(() => {
+                HelperService.loadTranslations(this.translate);
+                this.corpusService.initPhenomenonMap();
+                this.corpusService.processAnnisResponse(this.corpusService.annisResponse);
+                this.corpusService.adjustTranslations();
+            });
         }
     }
 

src/app/corpus.service.ts

@@ -59,16 +59,6 @@ export class CorpusService {
             this.restoreLastCorpus().then();
         }
         this.initPhenomenonMap();
-        Object.keys(Phenomenon).forEach((key) => {
-            if (key !== Phenomenon[Phenomenon.lemma]) {
-                const translationObject: object = this.phenomenonMap[key][1];
-                Object.keys(translationObject).forEach((k: string) => {
-                    if (k !== k.toUpperCase()) {
-                        this.translate.get(translationObject[k]).subscribe(v => this.phenomenonMap[key][0][k] = v);
-                    }
-                });
-            }
-        });
         this.getTranslations();
     }
 
@@ -78,6 +68,26 @@ export class CorpusService {
         query.values = [availableValues[Object.keys(availableValues)[0]]];
     }
 
+    adjustTranslations() {
+        this.translate.get(ExerciseTypeTranslation[this.exercise.type]).subscribe(
+            value => this.exercise.typeTranslation = value);
+        if ([ExerciseType.cloze, ExerciseType.matching, ExerciseType.markWords].indexOf(this.exercise.type) > -1) {
+            this.translate.get(InstructionsTranslation[this.exercise.type]).subscribe(
+                value => this.exercise.instructionsTranslation = value);
+        }
+        if (this.exercise.type === ExerciseType.matching) {
+            this.exercise.queryItems = [new QueryMC({
+                phenomenon: Phenomenon.partOfSpeech,
+                values: [Object.keys(this.phenomenonMap[Phenomenon.partOfSpeech][2])[0]],
+            }), new QueryMC({
+                phenomenon: Phenomenon.partOfSpeech,
+                values: [Object.keys(this.phenomenonMap[Phenomenon.partOfSpeech][2])[0]],
+            })];
+        } else if (this.exercise.queryItems.length > 1) {
+            this.exercise.queryItems.splice(1, 1);
+        }
+    }
+
     async checkForUpdates() {
         while (!HelperService.config) {
             await new Promise(resolve => setTimeout(resolve, 50));
@@ -129,6 +139,13 @@ export class CorpusService {
         return this.http.get(fullUrl, {params: {urn: urn}});
     }
 
+    getSortedQueryValues(query: QueryMC) {
+        const targetObject: object = this.phenomenonMap[query.phenomenon][0];
+        return Object.keys(this.phenomenonMap[query.phenomenon][2]).sort((a, b) => {
+            return a === b ? 0 : (targetObject[a] < targetObject[b] ? -1 : 1);
+        });
+    }
+
     getText() {
         return new Promise((resolve, reject) => {
             this.currentText = '';
@@ -175,6 +192,16 @@ export class CorpusService {
         this.phenomenonMap[Phenomenon.dependency] = [{}, DependencyTranslation, {}];
         this.phenomenonMap[Phenomenon.case] = [{}, CaseTranslations, {}];
         this.phenomenonMap[Phenomenon.lemma] = [{}, null, {}];
+        Object.keys(Phenomenon).forEach((key) => {
+            if (key !== Phenomenon[Phenomenon.lemma]) {
+                const translationObject: object = this.phenomenonMap[key][1];
+                Object.keys(translationObject).forEach((k: string) => {
+                    if (k !== k.toUpperCase()) {
+                        this.translate.get(translationObject[k]).subscribe(v => this.phenomenonMap[key][0][k] = v);
+                    }
+                });
+            }
+        });
     }
 
     isTreebank(corpus: CorpusMC) {
@@ -231,7 +258,10 @@ export class CorpusService {
         this.annisResponse = ar;
         HelperService.mostRecentSetup.annisResponse = ar;
         HelperService.saveMostRecentSetup();
-        this.currentText = ar.graph.nodes.map(x => x.annis_tok).join(' ');
+        // remove whitespace before punctuation
+        this.currentText = ar.graph.nodes.map(x => x.annis_tok).join(' ').replace(/[ ]([.,\/#!$%\^&\*;:{}=\-_`~()])/g, (x: string) => {
+            return x.trim();
+        });
     }
 
     private processCorpora(corpusList: CorpusMC[]) {
@@ -282,6 +312,7 @@ export class CorpusService {
             this.currentCorpus = HelperService.mostRecentSetup.currentCorpus;
             this.currentTextRange = HelperService.mostRecentSetup.currentTextRange;
             this.currentUrn = HelperService.mostRecentSetup.currentUrn;
+            this.isTextRangeCorrect = true;
             this.getText().then(() => {
                 return resolve();
             }, () => {

src/app/exercise-parameters/exercise-parameters.page.html

@@ -24,13 +24,11 @@
     <ion-grid>
         <ion-row>
             <ion-col>
-                <!-- We don't use ion-select because the font-size for ion-option cannot be changed -->
+                <!-- don't use ion-select because the font-size for ion-option cannot be changed -->
                 <label>
-          <span class="label">
-            {{ 'EXERCISE_TYPE' | translate }}
-          </span>
+                    <span class="label">{{ 'EXERCISE_TYPE' | translate }}</span>
                     <select [(ngModel)]="corpusService.exercise.type" name="exerciseType"
-                            (change)="adjustTranslations()">
+                            (change)="corpusService.adjustTranslations()">
                         <option *ngFor="let key of ObjectKeys(ExerciseType)" [value]=ExerciseType[key]>
                             {{ ExerciseTypeTranslation[key] | translate }}
                         </option>
@@ -60,24 +58,25 @@
                     </ion-row>
                     <ion-row>
                         <ion-col>
-                            <label *ngIf="[ExerciseType.cloze, ExerciseType.markWords].indexOf(corpusService.exercise.type) > -1; else matching">
-                                <span class="label">
-                                    {{ 'QUERY_VALUE' | translate }}
-                                </span>
-                                <select [(ngModel)]="query.values" name="queryValue" multiple>
-                                    <option *ngFor="let key of getSortedQueryValues(query)" [value]=key>
-                                        {{ corpusService.phenomenonMap[query.phenomenon][0][key] + " (" +
-                                    corpusService.phenomenonMap[query.phenomenon][2][key] + ")" }}
-                                    </option>
-                                </select>
-                            </label>
+                            <ng-container
+                                    *ngIf="[ExerciseType.cloze, ExerciseType.markWords].indexOf(corpusService.exercise.type) > -1; else matching">
+                                <label>
+                                    <span class="label">{{ 'QUERY_VALUE' | translate }}</span>
+                                    <select [(ngModel)]="query.values" name="queryValue" multiple>
+                                        <option *ngFor="let key of corpusService.getSortedQueryValues(query)" [value]=key>
+                                            {{ corpusService.phenomenonMap[query.phenomenon][0][key] + " (" +
+                                        corpusService.phenomenonMap[query.phenomenon][2][key] + ")" }}
+                                        </option>
+                                    </select>
+                                </label>
+                            </ng-container>
                             <ng-template #matching>
                                 <label>
                                 <span class="label">
                                     {{ 'QUERY_VALUE' | translate }}
                                 </span>
                                     <select [(ngModel)]="query.values[0]" name="queryValue">
-                                        <option *ngFor="let key of getSortedQueryValues(query)" [value]=key>
+                                        <option *ngFor="let key of corpusService.getSortedQueryValues(query)" [value]=key>
                                             {{ corpusService.phenomenonMap[query.phenomenon][0][key] + " (" +
                                         corpusService.phenomenonMap[query.phenomenon][2][key] + ")" }}
                                         </option>

src/app/exercise-parameters/exercise-parameters.page.ts

@@ -2,7 +2,6 @@
 import {
     ExerciseType,
     ExerciseTypeTranslation,
-    InstructionsTranslation,
     MoodleExerciseType,
     Phenomenon,
     PhenomenonTranslation
@@ -16,7 +15,6 @@ import {TranslateService} from '@ngx-translate/core';
 import {ExerciseService} from 'src/app/exercise.service';
 import {HelperService} from 'src/app/helper.service';
 import {CorpusService} from 'src/app/corpus.service';
-import {PhenomenonMap} from 'src/app/models/phenomenonMap';
 
 @Component({
     selector: 'app-exercise-parameters',
@@ -45,26 +43,6 @@ export class ExerciseParametersPage {
         this.translateService.get('QUERY_VALUE_EMPTY').subscribe(value => this.emptyQueryValueString = value);
     }
 
-    adjustTranslations() {
-        this.translateService.get(ExerciseTypeTranslation[this.corpusService.exercise.type]).subscribe(
-            value => this.corpusService.exercise.typeTranslation = value);
-        if ([ExerciseType.cloze, ExerciseType.matching, ExerciseType.markWords].indexOf(this.corpusService.exercise.type) > -1) {
-            this.translateService.get(InstructionsTranslation[this.corpusService.exercise.type]).subscribe(
-                value => this.corpusService.exercise.instructionsTranslation = value);
-        }
-        if (this.corpusService.exercise.type === ExerciseType.matching) {
-            this.corpusService.exercise.queryItems = [new QueryMC({
-                phenomenon: Phenomenon.partOfSpeech,
-                values: [Object.keys(this.corpusService.phenomenonMap[Phenomenon.partOfSpeech][2])[0]],
-            }), new QueryMC({
-                phenomenon: Phenomenon.partOfSpeech,
-                values: [Object.keys(this.corpusService.phenomenonMap[Phenomenon.partOfSpeech][2])[0]],
-            })];
-        } else if (this.corpusService.exercise.queryItems.length > 1) {
-            this.corpusService.exercise.queryItems.splice(1, 1);
-        }
-    }
-
     async generateExercise() {
         const phenomenon: Phenomenon = this.corpusService.exercise.queryItems[0].phenomenon;
         if (0 < HelperService.config['maxTextLength'] && HelperService.config['maxTextLength'] < this.corpusService.currentText.length) {
@@ -159,11 +137,4 @@ export class ExerciseParametersPage {
             toast.present().then();
         });
     }
-
-    getSortedQueryValues(query: QueryMC) {
-        const targetObject: object = this.corpusService.phenomenonMap[query.phenomenon][0];
-        return Object.keys(this.corpusService.phenomenonMap[query.phenomenon][2]).sort((a, b) => {
-            return a === b ? 0 : (targetObject[a] < targetObject[b] ? -1 : 1);
-        });
-    }
 }

src/app/helper.service.ts

@@ -133,8 +133,10 @@ export class HelperService {
         navCtrl.navigateForward('/info').then();
     }
 
-    static goToShowTextPage(navCtrl: NavController) {
-        navCtrl.navigateForward('/show-text').then();
+    static goToShowTextPage(navCtrl: NavController, isVocabularyCheck: boolean = false) {
+        navCtrl.navigateForward('/show-text').then(() => {
+            HelperService.isVocabularyCheck = isVocabularyCheck;
+        });
     }
 
     static goToSourcesPage(navCtrl: NavController) {
@@ -146,10 +148,7 @@ export class HelperService {
     }
 
     static goToVocabularyCheckPage(navCtrl: NavController) {
-        navCtrl.navigateForward('/vocabulary-check').then(() => {
-            HelperService.isVocabularyCheck = true;
-        }, () => {
-        });
+        navCtrl.navigateForward('/vocabulary-check').then();
     }
 
     static loadTranslations(translate: TranslateService) {

src/app/ranking/ranking.page.ts

@@ -33,7 +33,7 @@ export class RankingPage {
         this.vocService.getVocabularyCheck(this.corpusService.currentUrn, true).subscribe((ar: AnnisResponse) => {
             HelperService.isLoading = false;
             this.corpusService.processAnnisResponse(ar);
-            HelperService.goToShowTextPage(this.navCtrl);
+            HelperService.goToShowTextPage(this.navCtrl, true);
         }, async (error: HttpErrorResponse) => {
             HelperService.isLoading = false;
             HelperService.currentError = error;

src/app/show-text/show-text.module.ts

@@ -7,23 +7,23 @@ import {ShowTextPage} from 'src/app/show-text/show-text.page';
 import {TranslateModule} from '@ngx-translate/core';
 
 const routes: Routes = [
-  {
-    path: '',
-    component: ShowTextPage
-  }
+    {
+        path: '',
+        component: ShowTextPage
+    }
 ];
 
 @NgModule({
-  declarations: [
-    ShowTextPage,
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonicModule,
-    RouterModule.forChild(routes),
-    TranslateModule.forChild()
-  ],
+    declarations: [
+        ShowTextPage,
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        IonicModule,
+        RouterModule.forChild(routes),
+        TranslateModule.forChild()
+    ],
 })
 export class ShowTextPageModule {
 }

src/app/show-text/show-text.page.html

@@ -39,9 +39,9 @@
         <ion-row>
             <ion-col class="text">
                 <div *ngIf="highlightOOV; else noOOV">
-                    <span *ngFor="let node of corpusService.annisResponse.graph.nodes" [class.oov]="node.is_oov">
-                        {{node.annis_tok}}&#32;
-                    </span>
+                    <!-- do not add whitespace/newline etc. between the span elements!                   -->
+                    <span *ngFor="let node of corpusService.annisResponse.graph.nodes; index as i"><span
+                            [class.oov]="node.is_oov">{{node.annis_tok}}</span>{{ getWhiteSpace(i) }}</span>
                 </div>
                 <ng-template #noOOV>
                     <span>{{corpusService.currentText}}</span>

src/app/show-text/show-text.page.ts

-import {Component} from '@angular/core';
+import {AfterViewChecked, AfterViewInit, Component, OnInit} from '@angular/core';
 import {NavController, ToastController} from '@ionic/angular';
 import {CorpusService} from 'src/app/corpus.service';
 import {VocabularyService} from 'src/app/vocabulary.service';
@@ -13,8 +13,9 @@ import {TranslateService} from '@ngx-translate/core';
 })
 export class ShowTextPage {
     HelperService = HelperService;
-    public ObjectKeys = Object.keys;
+    ObjectKeys = Object.keys;
     public highlightOOV = false;
+    public text: string;
 
     constructor(public navCtrl: NavController,
                 public corpusService: CorpusService,
@@ -27,4 +28,14 @@ export class ShowTextPage {
     goToExerciseParametersPage() {
         this.navCtrl.navigateForward('exercise-parameters').then();
     }
+
+    getWhiteSpace(index: number) {
+        if (this.corpusService.annisResponse.graph.nodes[index + 1]) {
+            if ('.,\\/#!$%\\^&\\*;:{}=\\-_`~()'.indexOf(this.corpusService.annisResponse.graph.nodes[index + 1].annis_tok) > -1) {
+                return '';
+            }
+            return ' ';
+        }
+        return '';
+    }
 }