datatype description changes

src/app/common-components/annotate-text/annotate-text.component.html

+<div class="datatype-description" *ngIf="inputData.datatype_description">
+    <label class="grey-label"> Datatype Description:</label>
+    <div class="datatype-text">
+        <span>{{inputData.datatype_description}}</span>
+    </div>
+</div>
 <div class="annotate-container">
+    <label class="grey-label">Table Description:</label>
+    <div class="annotate-text pt-3">
         <ngx-annotate-text [(annotations)]="annotations" [removable]="true" [text]="inputData.text" annotationClass="my-annotation" #annotateText>
         </ngx-annotate-text>
+    </div>
+    <div class="embedding-flag" *ngIf="inputData.embedding_flag"><span>*Embedding based match</span></div>
 </div>
 <div class="row mt-3">
     <div class="col-12 ">
-        <h6>Tags:</h6>
         <div class="tags-container pb-1">
+            <label class="grey-label ps-3">Tags:</label>
             <button *ngFor="let data of inputData.class_details" type="button" class="btn btn-primary m-1 " (click)="addAnnotation(data)">
                 {{data}}
             </button>
         </div>
     </div>
     <div class="col-md-12 mt-3">
-        <button class="btn btn-secondary" *ngIf="showAddTag" (click)="showNewTags()"><i class="fa fa-plus-circle"> Add Tag</i></button>
+        <button class="btn btn-secondary" *ngIf="showAddTag" (click)="showNewTags()"><i class="fa fa-plus-circle"> Add
+                Tag</i></button>
         <div class="d-flex" *ngIf="!showAddTag">
             <!-- <label for="" class="grey-label mt-2 me-2"> Select Tag:  </label> -->
             <ng-select name="typeofElement" [items]="tagsList" class="pl-4 col-md-3 me-5" placeholder="Select Tag" [clearable]="false" dropdownPosition="top" [(ngModel)]="selectedTag" bindValue="value" bindLabel="label">

src/app/common-components/annotate-text/annotate-text.component.scss

@@ -5,8 +5,30 @@
 }
 
 .annotate-container {
+    border-bottom: 1px solid #dee2e6 !important;
+    padding: 1rem;
+}
+
+.annotate-text {
     overflow-y: auto;
-    max-height: 16rem;
+    max-height: 13rem;
+}
+
+.datatype-description {
     border-bottom: 1px solid #dee2e6 !important;
     padding: 1rem;
+    background: aliceblue;
+}
+
+.datatype-text {
+    max-height: 4rem;
+    overflow-y: auto;
+}
+
+.embedding-flag {
+    font-family: var(--fontFamilyMedium);
+    color: #0099c9;
+    font-size: 0.8rem;
+    float: right;
+    margin-right: 1rem;
 }
\ No newline at end of file

src/app/pages/landing/landing.component.ts

@@ -286,11 +286,19 @@ export class LandingComponent implements OnInit {
           this.loadFileTableData({});
           break;
         case 'submit':
+          if (event.data.status === 'Completed') {
+            this._toast.toast('warning', '', 'The file has already been submitted.', true);
+          } else {
             this.submitAllRecords();
+          }
           break;
         case 'cellClick':
+          if (event.data.status === 'Completed') {
+            this._toast.toast('warning', '', 'The file has already been validated.', true);
+          } else {
             this.loadRecordsTableData(event.data);
             this.showFileTable = false; this, this.showRecordsTable = true;
+          }
           break;
       }
     } catch (error) {

src/assets/jsons/text.json

@@ -8,6 +8,8 @@
             "PROBLEM",
             "TREATMENT"
         ],
+        "embedding_flag": true,
+        "datatype_description": "Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow.",
         "text": "Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.",
         "annotation_details": [{
                 "startIndex": 32,

src/styles.scss

@@ -1503,14 +1503,6 @@ button.toast-close-button {
     max-width: 700px !important;
 }
 
-.modal-xl {
-    max-width: 80rem !important;
-    .modal-body {
-        max-height: 35rem !important;
-        overflow: auto !important;
-    }
-}
-
 .icon-clock {
     position: absolute;
     right: 1px;
@@ -1565,7 +1557,8 @@ button.toast-close-button {
 /* auto reSize popup modal */
 
 .modal-xl {
-    max-width: 80rem !important;
+    max-width: 90rem !important;
+    // max-width: 80rem !important;
     .modal-body {
         max-height: 35rem !important;
         overflow: auto !important;
@@ -1584,7 +1577,7 @@ button.toast-close-button {
 
 .toast {
     &:not(.show) {
-        display: block !important;
+        display: flex !important;
     }
 }