Release updates (#147)

* Version number to 1.11.0

* Opacity-50 on see downloaded models button

* Linebreaks configuration as part of the labeling page

* Removed progress bar on active learners

* Small check on labeling suite manager

* Embedding granularity cleaned correctly when switching between platforms

* Close modal after bad password

* Improvement on placeholders for password protected files

* View button opens the modal

* Formatting on embedding creation improvement

* Added message for bad password and fixed showing deleted projects

* Removed last execution section for active learners

* Message for wrong password is removed after correct pass

* Linebreaks configuration on labeling suite

* Updated text in configuration in data browser

Author: lumburovskalina

src/app/base/components/crypted-field/crypted-field.component.html

@@ -5,7 +5,7 @@
     <div class="relative">
         <input #pw [type]="show || key.length == 0 ? 'text':'password'" autocomplete="new-password" [value]="key"
             (input)="setKey($event.target.value)" name="something"
-            class="input input-sm input-bordered w-full placeholder-italic" placeholder="Enter some key here..."
+            class="input input-sm input-bordered w-full placeholder-italic" [placeholder]="placeholder"
             (click)="show?null:pw.type='password'" />
         <button (click)="toggleKey()" [disabled]="!key">
             <ng-template [ngIf]="!show" [ngIfElse]="eyeOff">

src/app/base/components/crypted-field/crypted-field.component.ts

@@ -8,7 +8,8 @@ import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChil
 })
 export class CryptedFieldComponent implements OnDestroy {
   @Input() label: string = 'Password';
-  @Input() displayOptionalAsText: boolean = false;
+  @Input() placeholder: string = 'Enter some password here...';
+  @Input() displayOptionalAsText: boolean = true;
   @Output() keyChange = new EventEmitter<string>();
 
   @ViewChild('inputElement') inputElement: ElementRef;

src/app/base/components/export/export.component.html

@@ -151,8 +151,7 @@
         </div>
     </ng-template>
 
-    <kern-crypted-field (keyChange)="setKey($event)" label="Encrypt zip file with password"
-        displayOptionalAsText="true"></kern-crypted-field>
+    <kern-crypted-field (keyChange)="setKey($event)" label="Encrypt zip file with password"></kern-crypted-field>
 
     <div class="mt-2 flex flex-row justify-between">
         <div class="h-9">

src/app/base/components/record-display/record-display.component.html

@@ -13,7 +13,7 @@
         </ng-template>
         <ng-template #noHighlight>
             <span
-                [ngClass]="recordDisplayOptions.dataBrowserModals.configuration.lineBreaks != LineBreaksType.NORMAL ? 
+                [ngClass]="recordDisplayOptions.dataBrowserModals && recordDisplayOptions.dataBrowserModals.configuration.lineBreaks != LineBreaksType.NORMAL ? 
                 (recordDisplayOptions.dataBrowserModals.configuration.lineBreaks == LineBreaksType.IS_PRE_WRAP ? 'whitespace-pre-wrap' : 'whitespace-pre-line') : '' "
                 *ngIf="record.data[attributes[attribute.key].name] != null && record.data[attributes[attribute.key].name] !== ''; else notPresent">
                 <span>{{record.data[attributes[attribute.key].name]}}</span>

src/app/base/components/sidebar-pm/sidebar-pm.component.html

@@ -225,7 +225,7 @@
                     <label data-tip="Version overview"
                         (click)="requestVersionOverview(); sideBarPmModals.versionOverview.open = true;"
                         class="z-50 tooltip tooltip-right cursor-pointer select-none text-white flex items-center"
-                        id="refineryVersion">v1.10.0
+                        id="refineryVersion">v1.11.0
                         <svg *ngIf="hasUpdates" xmlns="http://www.w3.org/2000/svg" data-tip="Newer version available"
                             class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700 tooltip tooltip-right align-top ml-1"
                             width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"

src/app/base/services/record/record-apollo.service.ts

@@ -5,7 +5,6 @@ import { map } from 'rxjs/operators';
 import { queries } from './record-queries';
 import { mutations } from './record-mutations';
 import { queries as projectQueries } from '../project/project-queries';
-import { labelSourceToString } from '../../enum/graphql-enums';
 import { ApolloChecker } from '../base/apollo-checker';
 import { countOccurrences } from 'submodules/javascript-functions/general';
 

src/app/data/components/data-browser/data-browser.component.html

@@ -1082,7 +1082,7 @@ <h1 class="text-lg text-gray-900 mb-2 text-center">Info</h1>
                 </div>
                 <div class="ml-3 text-sm cursor-pointer" (click)="toggleLineBreaks()">
                     <label class="font-medium text-gray-700 cursor-pointer">Visible line breaks</label>
-                    <p class="text-gray-500">If checked, the attributes in the data-browser
+                    <p class="text-gray-500">If checked, the attributes in the data-browser and labeling page
                         will be shown with line breaks</p>
                 </div>
             </div>

src/app/import/components/helpers/upload-types.ts

@@ -26,6 +26,7 @@ export type UploadOptions = {
  * @closeModalOnClick {boolean, optional} - If true, the modal will be closed after the upload is finished
  * @tokenizer {string, optional} - Tokenizer used for the upload
  * @navigateToProject {boolean, optional} - If true, the user will be redirected to the project after the upload is finished
+ * @showBadPasswordMsg {boolean, optional} - If true, the user will be shown a message that the password is incorrect
  */
     deleteProjectOnFail?: boolean;
     reloadOnFinish?: boolean;
@@ -37,6 +38,7 @@ export type UploadOptions = {
     closeModalOnClick?: boolean;
     tokenizer?: string;
     navigateToProject: boolean;
+    showBadPasswordMsg?: boolean;
 };
 
 export type UploadTask = {

src/app/import/components/modal-upload/modal-upload.component.html

@@ -13,6 +13,7 @@ <h1 class="flex flex-grow justify-center text-lg text-gray-900 font-bold">{{titl
             reloadOnFinish: uploadOptions.reloadOnFinish,
             knowledgeBaseId: uploadFileType == UploadFileType.KNOWLEDGE_BASE ? uploadOptions.knowledgeBaseId : null,
             isModal: uploadOptions.isModal,
-            tokenizer: uploadOptions.tokenizer
-        }" (fileAttached)="setFile($event)"></kern-upload>
+            tokenizer: uploadOptions.tokenizer,
+            showBadPasswordMsg: uploadOptions.showBadPasswordMsg
+        }" (fileAttached)="setFile($event)" (badPasswordMsg)="setBadPasswordMsg($event)"></kern-upload>
 </kern-modal>

src/app/import/components/modal-upload/modal-upload.component.ts

@@ -19,6 +19,7 @@ export class ModalUploadComponent implements OnInit, OnChanges {
 
   @Output() closeModalEvent = new EventEmitter();
   @Output() fileAttached = new EventEmitter<File>();
+  @Output() badPasswordMsg = new EventEmitter<boolean>();
 
   get UploadFileType(): typeof UploadFileType {
     return UploadFileType;
@@ -80,4 +81,8 @@ export class ModalUploadComponent implements OnInit, OnChanges {
       }
     }
   }
+
+  setBadPasswordMsg(showBadPassMgs: boolean): void {
+    this.badPasswordMsg.emit(showBadPassMgs);
+  }
 }

src/app/import/components/upload/upload.component.html

@@ -51,6 +51,7 @@
     <ng-template [ngIf]="uploadFileType == UploadFileType.PROJECT">
         <ng-container *ngTemplateOutlet="upload"></ng-container>
         <ng-template *ngTemplateOutlet="cryptedField"></ng-template>
+        <div *ngIf="uploadOptions.showBadPasswordMsg" class="text-red-700 text-xs mt-2 text-center">Wrong password</div>
     </ng-template>
 
     <ng-template [ngIf]="uploadFileType == UploadFileType.KNOWLEDGE_BASE">
@@ -272,6 +273,6 @@ <h3 class="text-sm font-medium text-yellow-800">File required</h3>
 </ng-template>
 
 <ng-template #cryptedField>
-    <kern-crypted-field *ngIf="file && (file.type == zipType || fileEndsWithZip)"
-        (keyChange)="setKey($event)"></kern-crypted-field>
+    <kern-crypted-field *ngIf="file && (file.type == zipType || fileEndsWithZip)" (keyChange)="setKey($event)"
+        placeholder="Enter password if zip file is protected..."></kern-crypted-field>
 </ng-template>

src/app/import/components/upload/upload.component.ts

@@ -28,6 +28,7 @@ export class UploadComponent implements OnInit, OnChanges, OnDestroy {
 
   @Output() fileAttached = new EventEmitter<File>();
   @Output() refetchProjects = new EventEmitter<boolean>();
+  @Output() badPasswordMsg = new EventEmitter<boolean>();
 
   get UploadFileType(): typeof UploadFileType {
     return UploadFileType;
@@ -135,6 +136,8 @@ export class UploadComponent implements OnInit, OnChanges, OnDestroy {
     this.file = files.length > 0 ? files[0] : null;
     this.fileEndsWithZip = this.file?.name.endsWith('.zip');
     this.fileAttached.emit(this.file);
+    this.badPasswordMsg.emit(false);
+
   }
 
   onFileInput(event: any): void {

src/app/labeling-suite/helper/manager/settings.ts

@@ -1,4 +1,5 @@
 import { LabelSource } from "src/app/base/enum/graphql-enums";
+import { LineBreaksType } from "src/app/data/components/data-browser/helper-classes/modals-helper";
 import { DoBeforeDestroy } from "src/app/util/interfaces";
 import { enumToArray, transferNestedDict } from "submodules/javascript-functions/general";
 
@@ -19,6 +20,8 @@ export type LabelingSuiteMainSettings = {
     autoNextRecord: boolean;
     hoverGroupBackgroundColor: string;
     hoverGroupBackgroundColorClass: string;
+    // Special case - line breaks get synchronized with the data browser
+    lineBreaks: LineBreaksType;
 }
 export type LabelingSuiteLabelingSettings = {
     showNLabelButton: number;
@@ -110,11 +113,20 @@ export class LabelingSuiteSettingManager implements DoBeforeDestroy {
             }
         }
         if (!this.settings.task[this.projectId]) this.settings.task[this.projectId] = {};
+        this.settings.main.lineBreaks = this.getLineBreakValue();
         this.runSettingListeners(ComponentType.ALL);
     }
 
+    private getLineBreakValue(): LineBreaksType {
+        // Special case - line breaks get synchronized with the data browser
+        let lineBreaks = localStorage.getItem("lineBreaks");
+        if (lineBreaks) return JSON.parse(lineBreaks);
+        else return LineBreaksType.NORMAL;
+    }
+
     public saveSettings() {
         localStorage.setItem(LabelingSuiteSettingManager.localStorageKey, JSON.stringify(this.settings));
+        localStorage.setItem("lineBreaks", JSON.stringify(this.settings.main.lineBreaks));
     }
 
     public setDefaultSettings() {
@@ -173,6 +185,7 @@ export class LabelingSuiteSettingManager implements DoBeforeDestroy {
                 autoNextRecord: false,
                 hoverGroupBackgroundColor: "green",
                 hoverGroupBackgroundColorClass: "bg-green-100",
+                lineBreaks: this.getLineBreakValue()
             },
             overviewTable: {
                 show: true,

src/app/labeling-suite/main-component/labeling-suite.component.html

@@ -327,6 +327,36 @@ <h1 class="text-lg text-gray-900 mb-2 text-center">Warning</h1>
                 <ng-container [ngTemplateOutlet]="settingInfo"
                     [ngTemplateOutletContext]="{dataTip:'Choose a color for the hover effects of the tables'}">
                 </ng-container>
+                <span class="" (click)="toggleLineBreaks()">Visible line breaks</span>
+                <div class="flex items-center h-5">
+                    <input type="checkbox"
+                        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded cursor-pointer"
+                        (change)="toggleLineBreaks()"
+                        [checked]="lsm.settingManager.settings.main.lineBreaks != LineBreaksType.NORMAL">
+                </div>
+                <ng-container [ngTemplateOutlet]="settingInfo"
+                    [ngTemplateOutletContext]="{dataTip:'If checked, the attributes in the data-browser and labeling page will be shown with line breaks'}">
+                </ng-container>
+                <ng-template [ngIf]="lsm.settingManager.settings.main.lineBreaks != LineBreaksType.NORMAL">
+                    <label for="preWrap"
+                        class="ml-3 block text-sm font-medium text-gray-700 cursor-pointer italic">Pre-wrap</label>
+                    <input type="radio"
+                        [checked]="lsm.settingManager.settings.main.lineBreaks == LineBreaksType.IS_PRE_WRAP"
+                        (change)="toggleLineBreaksPreWrap(LineBreaksType.IS_PRE_LINE)" name="lineBreaks" id="preWrap"
+                        class="focus:ring-blue-500 h-6 w-4 text-blue-600 border-gray-200 cursor-pointer">
+                    <ng-container [ngTemplateOutlet]="settingInfo"
+                        [ngTemplateOutletContext]="{dataTip:'Preserves whitespace and line breaks'}">
+                    </ng-container>
+                    <label for="preLine"
+                        class="ml-3 block text-sm font-medium text-gray-700 cursor-pointer italic">Pre-line</label>
+                    <input type="radio"
+                        [checked]="lsm.settingManager.settings.main.lineBreaks == LineBreaksType.IS_PRE_LINE"
+                        (change)="toggleLineBreaksPreWrap(LineBreaksType.IS_PRE_WRAP)" name="lineBreaks" id="preLine"
+                        class="focus:ring-blue-500 h-6 w-4 text-blue-600 border-gray-200 cursor-pointer">
+                    <ng-container [ngTemplateOutlet]="settingInfo"
+                        [ngTemplateOutletContext]="{dataTip:'Collapses multiple whitespaces and line breaks into a single space'}">
+                    </ng-container>
+                </ng-template>
             </div>
         </div>
         <!--Page TASK_HEADER-->

src/app/labeling-suite/main-component/labeling-suite.component.ts

@@ -11,6 +11,7 @@ import { findProjectIdFromRoute } from 'src/app/util/helper-functions';
 import { LabelingSuiteManager } from '../helper/manager/manager';
 import { ComponentType } from '../helper/manager/settings';
 import { UserType } from '../helper/manager/user';
+import { LineBreaksType } from 'src/app/data/components/data-browser/helper-classes/modals-helper';
 
 @Component({
   selector: 'kern-labeling-suite',
@@ -29,6 +30,9 @@ export class LabelingSuiteComponent implements OnInit, OnDestroy {
   //manager
   lsm: LabelingSuiteManager;
 
+  get LineBreaksType(): typeof LineBreaksType {
+    return LineBreaksType;
+  }
 
   constructor(
     private router: Router,
@@ -51,6 +55,14 @@ export class LabelingSuiteComponent implements OnInit, OnDestroy {
     }
     this.lsm = new LabelingSuiteManager(projectId, this, this.activatedRoute, this.router, this.projectApolloService, this.recordApolloService);
     this.setUpCommentRequests(projectId);
+    const checkIfLineBreaks = JSON.parse(localStorage.getItem('lineBreaks'));
+    if (this.lsm.settingManager) {
+      if (checkIfLineBreaks) {
+        this.lsm.settingManager.settings.main.lineBreaks = checkIfLineBreaks;
+      } else {
+        localStorage.setItem('lineBreaks', JSON.stringify(this.lsm.settingManager.settings.main.lineBreaks));
+      }
+    }
   }
 
 
@@ -112,5 +124,23 @@ export class LabelingSuiteComponent implements OnInit, OnDestroy {
 
   }
 
+  toggleLineBreaks() {
+    if (this.lsm.settingManager.settings.main.lineBreaks == LineBreaksType.IS_PRE_WRAP || this.lsm.settingManager.settings.main.lineBreaks == LineBreaksType.IS_PRE_LINE) {
+      this.lsm.settingManager.settings.main.lineBreaks = LineBreaksType.NORMAL;
+    } else {
+      this.lsm.settingManager.settings.main.lineBreaks = LineBreaksType.IS_PRE_WRAP;
+    }
+    localStorage.setItem('lineBreaks', JSON.stringify(this.lsm.settingManager.settings.main.lineBreaks));
+  }
+
+  toggleLineBreaksPreWrap() {
+    if (this.lsm.settingManager.settings.main.lineBreaks == LineBreaksType.IS_PRE_WRAP) {
+      this.lsm.settingManager.settings.main.lineBreaks = LineBreaksType.IS_PRE_LINE;
+    } else if (this.lsm.settingManager.settings.main.lineBreaks == LineBreaksType.IS_PRE_LINE) {
+      this.lsm.settingManager.settings.main.lineBreaks = LineBreaksType.IS_PRE_WRAP;
+    }
+    localStorage.setItem('lineBreaks', JSON.stringify(this.lsm.settingManager.settings.main.lineBreaks));
+  }
+
 
 }

src/app/labeling-suite/sub-components/labeling/labeling.component.html

@@ -115,8 +115,8 @@
                                 <div
                                     *ngVar="lsm.recordManager.recordData.baseRecord.data[lVars.taskLookup[attribute.id].attribute.name] as attributeTextData">
                                     <p class="break-words text-sm leading-5 font-normal text-gray-500"
-                                        [ngClass]="lineBreaks != LineBreaksType.NORMAL ? 
-                                        (lineBreaks == LineBreaksType.IS_PRE_WRAP ? 'whitespace-pre-wrap' : 'whitespace-pre-line') : '' "
+                                        [ngClass]="lsm.settingManager.settings.main.lineBreaks != LineBreaksType.NORMAL ? 
+                                        (lsm.settingManager.settings.main.lineBreaks == LineBreaksType.IS_PRE_WRAP ? 'whitespace-pre-wrap' : 'whitespace-pre-line') : '' "
                                         *ngIf="attributeTextData != null && attributeTextData !== '';else notPresentInRecord">
                                         {{attributeTextData}}
                                     </p>
@@ -289,7 +289,7 @@
         <div *ngFor="let token of tokenLookup[attributeId].token" class="relative z-10" attr.tokenIdx="{{token.idx}}"
             attr.attributeId="{{attributeId}}"
             style.margin-bottom="{{tokenLookup[attributeId][token.idx]?.tokenMarginBottom}}"
-            [ngClass]="[token.countLineBreaks > 0 ?'w-full':'']">
+            [ngClass]="[token.countLineBreaks > 0 && lsm.settingManager.settings.main.lineBreaks != LineBreaksType.NORMAL ?'w-full':'']">
             <ng-template [ngIf]="token.countLineBreaks == 0" [ngIfElse]="newLinesBlock">
                 <ng-template [ngIf]="token.type" [ngIfElse]="tokenValue">
                     <div [attr.data-tip]="'spaCy type: ' + token.type" class="tooltip">
@@ -344,14 +344,22 @@
                 </ng-template>
             </ng-template>
             <ng-template #newLinesBlock>
-                <ng-container *ngFor="let item of token.countLineBreaksArray">
-                    <ng-container *ngTemplateOutlet="dummyElementNewLine"></ng-container>
-                </ng-container>
+                <ng-template [ngIf]="lsm.settingManager.settings.main.lineBreaks != LineBreaksType.NORMAL"
+                    [ngIfElse]="spaceBlock">
+                    <ng-container *ngFor="let item of token.countLineBreaksArray">
+                        <ng-container *ngTemplateOutlet="dummyElementNewLine"></ng-container>
+                    </ng-container>
+                </ng-template>
+
             </ng-template>
         </div>
     </div>
 </ng-template>
 
 <ng-template #dummyElementNewLine>
     <div><br></div>
+</ng-template>
+
+<ng-template #spaceBlock>
+    &nbsp;
 </ng-template>

src/app/labeling-suite/sub-components/labeling/labeling.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, SimpleChanges, ViewChild } from '@angular/core';
 import { getLabelSourceOrder, getTaskTypeOrder, InformationSourceReturnType, LabelingTask, LabelSource, UserRole } from 'src/app/base/enum/graphql-enums';
 import { LabelingSuiteManager, UpdateType } from '../../helper/manager/manager';
 import { LabelingSuiteRlaPreparator } from '../../helper/manager/recordRla';
@@ -14,7 +14,7 @@ const SWIM_LANE_SIZE_PX = 12;
   templateUrl: './labeling.component.html',
   styleUrls: ['./labeling.component.scss', '../../main-component/labeling-suite.component.scss'],
 })
-export class LabelingSuiteLabelingComponent implements OnInit, OnChanges, OnDestroy {
+export class LabelingSuiteLabelingComponent implements OnChanges, OnDestroy {
 
   @Input() lsm: LabelingSuiteManager;
   userRoleEnum: typeof UserRole = UserRole;
@@ -45,7 +45,6 @@ export class LabelingSuiteLabelingComponent implements OnInit, OnChanges, OnDest
   labelAddButtonDisabled: boolean = true;
 
   labelHotkeys: HotkeyLookup;
-  lineBreaks: LineBreaksType;
 
   //list of prepared rla entries
   private fullRlaData: any[];
@@ -82,10 +81,6 @@ export class LabelingSuiteLabelingComponent implements OnInit, OnChanges, OnDest
     }
   }
 
-  ngOnInit(): void {
-    this.lineBreaks = JSON.parse(localStorage.getItem('lineBreaks'));
-  }
-
   private displayUserChanged() {
     this.canEditLabels = this.lsm.userManager.canEditManualRlas;
     this.filterRlaDataForCurrent();