support question answer project labelling (#356)

* add not empty conditions * support qa create and annotate * add question answer project

Author: Kai-Qiao

annotation-app/src/app/components/edit-project/edit-project.component.ts

@@ -105,7 +105,7 @@ export class EditProjectComponent implements OnInit {
  this.msg = JSON.parse(JSON.stringify(this.msgInEdit));
  const al = this.msg.al;
  this.previousProjectName = this.msg.projectName;
- this.showLabel = !(this.msg.integration.source && this.msg.integration.externalId[0]);
+ this.showLabel = !(this.msg.integration.source && this.msg.integration.externalId[0] || this.msg.projectType == 'qa');
  this.inputProjectName = this.msg.projectName;
  this.inputTaskInstruction = this.msg.taskInstructions;
  this.inputfrequency = al.frequency ? al.frequency : null;

annotation-app/src/app/components/projects/annotate/annotate.component.html

@@ -55,7 +55,7 @@ <h2>{{ startFrom === 'review' ? 'Review Details' : 'Annotate Details' }}</h2>
  </div>
  </div>
  <div
- *ngIf="projectType !== 'ner' && projectType !== 'image' && projectType !== 'log'"
+ *ngIf="projectType !== 'ner' && projectType !== 'qa' && projectType !== 'image' && projectType !== 'log'"
  class="clr-form-group form-group clr-row"
  style="margin-top: -0.5rem"
  >
@@ -100,6 +100,7 @@ <h3>Project Info</h3>
  {{
  projectInfo?.labelType == 'numericLabel' ||
  projectInfo.projectType == 'ner' ||
+ projectInfo.projectType == 'qa' ||
  projectInfo.isMultipleLabel ||
  projectInfo.projectType == 'image' ||
  projectInfo.projectType == 'log'
@@ -273,7 +274,7 @@ <h3>History</h3>
  >
  <div *ngFor="let flag of item.historyDescription" class="historyText">
  <div
- *ngIf="projectType == 'ner' || projectType == 'log'"
+ *ngIf="projectType == 'ner' || projectType == 'qa' || projectType == 'log'"
  title="{{ flag.text }}"
  >
  {{ flag.text }}
@@ -283,7 +284,7 @@ <h3>History</h3>
  </div>
  <div
  *ngIf="
- projectType !== 'ner' && projectType !== 'image' && projectType !== 'log'
+ projectType !== 'ner' && projectType !== 'qa' && projectType !== 'image' && projectType !== 'log'
  "
  title="{{ flag.key + ':' + flag.value }}"
  >
@@ -450,7 +451,7 @@ <h2 class="originalH2" style="word-break: break-all">
  </div>
 
  <div class="questionContainer">
- <div *ngIf="projectType !== 'ner' && projectType !== 'image' && projectType !== 'log'">
+ <div *ngIf="projectType !== 'ner' && projectType !== 'qa' && projectType !== 'image' && projectType !== 'log'">
  <div
  class="textBox"
  [ngStyle]="{
@@ -508,7 +509,7 @@ <h2 class="originalH2" style="word-break: break-all">
  </div>
  </div>
  <!-- here is ner annotation content -->
- <div *ngIf="projectType === 'ner'" class="nerBox">
+ <div *ngIf="projectType === 'ner' || projectType === 'qa'" class="nerBox">
  <div class="nerDisplayText">
  <div *ngFor="let ticket of sr.ticketQuestions">
  <p class="question-paragraph" style="word-break: break-word">
@@ -541,15 +542,18 @@ <h2 class="originalH2" style="word-break: break-all">
  (mouseenter)="mouseenterMark($event, spanText)"
  (mouseleave)="mouseleaveMark($event, spanText)"
  >
- <span (click)="clickShowMark($event, spanText)" class="selectText">{{
- spanText.text
- }}</span>
+ <span 
+ (click)="clickShowMark($event, spanText)" 
+ class="selectText"
+ title="{{ spanText.label }}"
+ >{{spanText.text}}
+ </span>
  <span
  class="entity"
  [style.color]="getLabelColor(spanText.label)"
  title="{{ spanText.label | uppercase }}"
- >{{ spanText.label }}</span
- >
+ >{{ projectType == 'qa'? "" :spanText.label }}
+ </span>
  <span
  *ngIf="isShowPopLabel && spanText.popUpLabel"
  class="entity"
@@ -878,6 +882,65 @@ <h4 style="margin-top: 2rem; margin-left: 0.5rem">
  &nbsp; &nbsp;
  </div>
  </div>
+ 
+ <div class="questionContainer" *ngIf="projectType == 'qa'">
+ <div
+ class="clr-control-container clr-error"
+ style="margin-top: 1rem"
+ [ngClass]="{ 'clr-error': clrErrorTip }"
+ >
+ <div class="clr-input-wrapper">
+ <input 
+ type="text" 
+ id="inputQuestion" 
+ class="clr-input"
+ placeholder="Add New The Question Here" 
+ (keyup.enter)="onAddQuestion($event)"
+ (blur)="onAddQuestion($event)"
+ (keyup)="onAddQuestion($event, true)"
+ name="inputQuestion"
+ [(ngModel)]="inputQuestion"
+ [ngModelOptions]="{ standalone: true }"
+ style="width:30em"
+ />
+ <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
+ </div>
+ <span class="clr-subtext">{{inputQuestionError}}</span>
+ </div>
+ 
+
+ <div *ngFor="let item of categories; let index=index" style="display: flex;" class="clr-row clr-control-container clr-error"
+ (mouseenter)="onMouseEnter($event, index, item)"
+ (mouseleave)="onMouseLeave($event)"
+ [ngClass]="{ 'clr-error': editQuestionError }"
+ >
+ <label class="circle" [style.background-color]="getLabelColor(item)">&nbsp;&nbsp;<b>{{index+1}}</b></label>
+ <clr-radio-wrapper class="clr-col-10">
+ <input type="radio" clrRadio name="questionRadio" class="questionRadio"
+ value="{{item}}" 
+ (change)="onSelectingEntity($event, index, index)"
+ [attr.checked]="index == 0?'checked': null "
+ />
+ <label (change)="editQuestion($event, index)">
+ <textarea
+ type="text" 
+ value="{{categories[index]}}" 
+ style="width:max-content;" 
+ style="border:none; width: 100%;"
+ [disabled]="editQuestionError && editQuestionItem != index"
+ >
+ </textarea>
+ </label>
+ </clr-radio-wrapper>
+ <clr-icon class="clr-col-1"
+ shape="trash"
+ *ngIf="deleteQuestionItem === index"
+ (click)="deleteQuestion(index)"
+ ></clr-icon>
+ <clr-icon *ngIf="editQuestionItem === index" class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
+ <span *ngIf="editQuestionItem === index" class="clr-subtext">{{editQuestionError}}</span>
+ </div>
+ </div>
  <!-- multiple checkbox labels -->
  <div
  class="questionContainer"
@@ -1064,7 +1127,8 @@ <h4 style="margin-top: 2rem; margin-left: 0.5rem">
  multipleLabelList.length == 0 &&
  spansList.length == 0 &&
  currentBoundingData.length == 0 &&
- !isNumeric
+ !isNumeric ||
+ editQuestionError
  "
  title="{{
  multipleLabelList.length > 0 ||

annotation-app/src/app/components/projects/annotate/annotate.component.scss

@@ -955,3 +955,12 @@ label .label-leftBoard {
  pointer-events: none;
  }
 }
+
+.circle {
+ width: 2em;
+ height: 100%;
+ border-radius: 50%;
+ display:"inline-block";
+ margin-left: 1em;
+ margin-right: 0.5em;
+}