From bb02775cf5cfd261b67051ac461e4366249a4c6d Mon Sep 17 00:00:00 2001
From: Newatia <Archana.Newatia@fda.gov>
Date: Thu, 25 Apr 2024 11:50:33 -0400
Subject: [PATCH 1/2] updated invitro

---
 src/app/core/base/base.component.html         |   7 +
 src/app/fda/config/config.json                |   6 +
 ...invitro-pharmacology-browse.component.scss |   4 +
 ...ro-pharmacology-data-import.component.html |  94 ----
 ...ro-pharmacology-data-import.component.scss | 528 ------------------
 ...pharmacology-data-import.component.spec.ts |  25 -
 ...itro-pharmacology-data-import.component.ts | 152 -----
 ...tro-pharmacology-assay-form.component.html |  50 +-
 ...tro-pharmacology-assay-form.component.scss |  14 +-
 ...vitro-pharmacology-assay-form.component.ts | 116 ++--
 .../invitro-pharmacology.module.ts            |   8 +-
 .../model/invitro-pharmacology.model.ts       |   4 +-
 12 files changed, 153 insertions(+), 855 deletions(-)
 delete mode 100644 src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.html
 delete mode 100644 src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.scss
 delete mode 100644 src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.spec.ts
 delete mode 100644 src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.ts

diff --git a/src/app/core/base/base.component.html b/src/app/core/base/base.component.html
index 2aa31b20..4194f0be 100644
--- a/src/app/core/base/base.component.html
+++ b/src/app/core/base/base.component.html
@@ -98,6 +98,7 @@
       <a mat-menu-item routerLink="/browse-adverse-events">
         Browse Adverse Events
       </a>
+      <mat-divider></mat-divider>
       <div *ngIf="adverseEventShinyHomepageDisplay === true">
         <mat-divider></mat-divider>
 
@@ -107,6 +108,12 @@
         </div>
       </span>
 
+      <span *ngIf = "loadedComponents.invitropharmacology">
+        <a mat-menu-item routerLink="/browse-invitro-pharm">
+          Browse In-vitro Pharmacology
+        </a>
+      </span>
+
       </mat-menu>
       </div>
 
diff --git a/src/app/fda/config/config.json b/src/app/fda/config/config.json
index 5bd28a14..c939cbab 100644
--- a/src/app/fda/config/config.json
+++ b/src/app/fda/config/config.json
@@ -1241,6 +1241,12 @@
           "display": "In-vitro Pharmacology Summary",
           "path": "invitro-pharm/summary/register",
           "order": 260
+        },
+        {
+          "component": "invitropharmacology",
+          "display": "Import In-vitro Pharm Assay",
+          "path": "invitro-pharm/import/assay",
+          "order": 270
         }
       ]
     },
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-browse/invitro-pharmacology-browse.component.scss b/src/app/fda/invitro-pharmacology/invitro-pharmacology-browse/invitro-pharmacology-browse.component.scss
index b259a373..a4c5f79a 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-browse/invitro-pharmacology-browse.component.scss
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-browse/invitro-pharmacology-browse.component.scss
@@ -148,6 +148,10 @@
   margin-top: 10px;
 }
 
+.margintop90px {
+  margin-top: 90px;
+}
+
 .marginbottom10px {
   margin-bottom: 10px;
 }
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.html b/src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.html
deleted file mode 100644
index 7325ae68..00000000
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<br><br><br><br>
-<!-- Import EXCEL DATA and convert to JSON -->
-<input type="file" (change)="onFileChange($event)" />
-
-<div id="output"></div>
-<br>
-<div *ngIf="willDownload">
-  <a id="download"> Download JSON File </a>
-</div>
-<br>
-
-<span>
-  <button mat-flat-button color="primary" (click)="importJSON()">Import JSON into Database</button>
-</span>
-
-<br><br>
-<span *ngIf="submitMessage" class="colorgreen">{{submitMessage}}</span>
-
-<br><br>
-
-<!-- DISPLAY JSON -->
-<!--
-<div *ngIf="message">
-  {{message}}
-</div>
--->
-
-<div *ngIf="importDataList.length > 0">
-  <b>TOTAL RECORDS:&nbsp;<span class="colorgreen">{{importDataList.length}}</span></b>
-  <br><br>
-  <table border="1" *ngIf="message" class="bordergray">
-    <tr class="font11px">
-      <th>#</th>
-      <th>Assay Set</th>
-      <th>External Source</th>
-      <th>External ID</th>
-      <th>Batch ID</th>
-      <th>Test Date</th>
-      <th>Assay Title</th>
-      <th>Assay Target</th>
-      <th>Assay target UNII</th>
-      <th>Presention Type</th>
-      <th>Presentation</th>
-      <th>Study Type</th>
-      <th>Ligand/substate</th>
-      <th>Ligand/substate Unii</th>
-      <th>ligand/substrate Concentration</th>
-      <th>ligand/substrate Concentration Unit</th>
-      <th>Screening Concentration</th>
-      <th>Screening concentration Unit</th>
-      <th>Percent Inhibition</th>
-      <th>Control</th>
-      <th>Control Type</th>
-      <th>Control UNII</th>
-      <th>Control Value Type</th>
-      <th>Control Value</th>
-      <th>Control Value Units</th>
-      <th>Assay Type</th>
-      <th>External Assay Reference</th>
-    </tr>
-    <tr class="font11px" *ngFor="let assay of importDataList; let index = index">
-      <td>{{(index+1)}}</td>
-      <td>{{assay.assayExternalId"}}</td>
-      <td>{{assay.assayExternalSource}}</td>
-      <td>{{assay.assayExternalId}}</td>
-      <td>{{assay.batchNumber}}</td>
-      <td>{{assay.reportDate}}</td>
-      <td>{{assay.assayTitle}}</td>
-      <td>{{assay.assayTarget}}</td>
-      <td>{{assay.assayTargetUnii}}</td>
-      <td>{{assay.presentationType}}</td>
-      <td>{{assay.presentation}}</td>
-      <td>{{assay.studyType}}</td>
-      <td>{{assay.ligandSubstrate}}</td>
-      <td>{{assay.ligandSubstrateUnii}}</td>
-      <td>{{assay.ligandSubstrateConcentration}}</td>
-      <td>{{assay.ligandSubstrateConcentrationUnit}}</td>
-      <td>{{assay.screeningConcentration}}</td>
-      <td>{{assay.screeningConcentrationUnit}}</td>
-      <td>{{assay.percentInhibition}}</td>
-      <td>{{assay.control}}</td>
-      <td>{{assay.controlType}}</td>
-      <td>{{assay.controlUnii}}</td>
-      <td>{{assay.controlValueType}}</td>
-      <td>{{assay.controlValue}}</td>
-      <td>{{assay.controlValueUnits}}</td>
-      <td>{{assay.assayType}}</td>
-      <td>{{assay.assayExternalReference}}</td>
-    </tr>
-  </table>
-</div>
-
-
-<br>
\ No newline at end of file
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.scss b/src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.scss
deleted file mode 100644
index 5e7ad3a8..00000000
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.scss
+++ /dev/null
@@ -1,528 +0,0 @@
-.top-fixed {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  top: 64px;
-  width: 100%;
-  background-color: var(--regular-white-color);
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0px 3px 3px -2px var(--box-shadow-color), 0px 3px 4px 0px var(--box-shadow-color-2), 0px 1px 8px 0px var(--box-shadow-color-3);
-  z-index: 1001;
-}
-
-.form-content-container {
-  overflow: hidden;
-  padding-top: 110px;
-}
-
-.scrollable-container {
-  padding-top: 15px;
-}
-
-.cards-container {
-  width: 100%;
-}
-
-.title_box {
-  width: 1140px;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
-
-.title {
-   font-size: 24px;
-   font-weight: 600px;
-   font-family: Arial, Helvetica, sans-serif;
-   /*padding-left: 70px; */
-}
-
-.titleblue {
-  font-size: 18px;
-  font-weight: 700px;
-  font-family: Arial, Helvetica, sans-serif;
-  color: var(--regular-blue-color);
-
-  /*padding-left: 70px; */
-}
-
-.divflex {
-  display: flex;
-}
-
-.mat-card {
-  max-width: 1140px;
-}
-
-.row {
-  width: 100%;
-}
-
-.form-row {
-  display: flex;
-  width: 100%;
-}
-
-.row-property {
-  display: flex;
-  width: 50%;
-  border: 1px solid green;
-}
-
-.row-property-key {
-  min-width: 40%;
-  max-width: 40%;
-  padding: 7px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.col-6-1 {
-  width: calc((100% - 25px * 5) / 6);
-  margin-right: 25px;
-}
-
-.col-6-1:last-child {
-  margin-right: 0px;
-}
-
-.col-2 {
-  width: calc((100% - 30px * 2) / 3);
-  margin-right: 30px;
-}
-
-.col-2:last-child {
-  margin-right: 0px;
-}
-
-
-.col-6-2 {
-  width: calc((100% - 25px * 2) / 3);
-  margin-right: 25px;
-}
-
-.col-6-2:last-child {
-  margin-right: 0px;
-}
-
-.col-6-3 {
-  width: calc((100% - 25px * 1) / 2);
-  margin-right: 25px;
-}
-
-.col-6-3:last-child {
-  margin-right: 0px;
-}
-
-.col-6-4 {
-  width: calc((100% - 20px) / (6/4));
-  margin-right: 20px;
-}
-
-.col-6-4:last-child {
-  margin-right: 0px;
-}
-
-.col-6-5 {
-  width: calc((100% - 10px) / (6/5));
-  margin-right: 10px;
-}
-
-.col-6-5:last-child {
-  margin-right: 0px;
-}
-
-.col-5-more {
-  width: calc((100% + 100px) / (6/5));
-  margin-right: 10px;
-}
-
-.col-6-6 {
-  width: 100%;
-}
-
-.col-4-1 {
-  width: calc((100% - 30px * 3) / 4);
-  margin-right: 30px;
-}
-
-.col-4-1:last-child {
-  margin-right: 0px;
-}
-
-.hide-show-messages {
-  margin-left: 10px;
-  border: 1px solid;
-}
-
-.actions-container {
-  max-width: 1028px;
-  width: 100%;
-  background-color: var(--regular-white-color);
-  padding: 10px;
-  display: flex;
-}
-
-.dismiss-container {
-  display: flex;
-}
-
-.middle-fill {
-  flex: 1 1 auto;
-}
-
-.submission-messages {
-  overflow: hidden;
-  height: auto;
-  -webkit-transition: all 500ms ease-out;
-  transition: all 500ms ease-out;
-  max-width: 1028px;
-  width: 100%;
-  background-color: var(--regular-white-color);
-  display: flex;
-  flex-direction: column;
-
-  &.collapsed {
-    max-height: 0;
-  }
-
-  &.expanded {
-    max-height: 500px;
-    overflow-y: auto;
-    padding: 10px;
-  }
-
-  .submission-message {
-    font-weight: 500;
-    text-align: center;
-  }
-
-  .validation-message {
-    display: flex;
-    padding: 5px 0;
-    align-items: center;
-
-    .message-type {
-      text-transform: uppercase;
-      font-weight: 500;
-      margin-right: 20px;
-      padding:10px;
-      border-radius:3px;
-    }
-  }
-
-  .dismiss-container {
-    display: flex;
-  }
-
-  .warning-message {
-    color: var(--warning-dialog-color);
-    background-color: var(--warning-dialog-bg-color);
-
-  }
-
-  .error-message {
-    color: var(--error-dialog-color);
-    background-color: var(--error-dialog-bg-color);
-  }
-
-}
-
-.divflexrow {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-
-.details-container {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.details-box {
-  max-width: 1028px;
-  width: 100%;
-  box-sizing: border-box;
-  margin-bottom: 20px;
-}
-
-.margintopneg10px {
-  margin-top: -10px;
-}
-
-.margintop10px {
-  margin-top: 10px;
-}
-
-.margintop12px {
-  margin-top: 12px;
-}
-
-.margintop20px {
-  margin-top: 20px;
-}
-
-.margintop90px {
-  margin-top: 90px;
-}
-
-.marginleft20px {
-  margin-left: 20px;
-}
-
-.marginleft30px {
-  margin-left: 30px;
-}
-
-.padtop5px {
-  padding-top: 5px;
-}
-
-.padtop10px {
-  padding-top: 10px;
-}
-
-.padtop17px {
-  padding-top: 17px;
-}
-
-.bordergray {
-  border: 1px solid var(--regular-grey-color);
-}
-
-.bordergreen {
-  border: 1px solid var(--regular-green-color);
-}
-
-.width40px {
-  width: 40px;
-}
-
-.width50px {
-  width: 50px;
-}
-
-.width200px {
-  width: 200px;
-}
-
-.width32percent {
-  width: 32%;
-}
-
-.colorgray {
-  color: var(--regular-grey-color);
-}
-
-.colorred {
-  color: var(--regular-red-color);
-}
-
-.colorgreen {
-  color: var(--regular-green-color);
-}
-
-.font11px {
-  font-size: 11px;
-}
-
-.font12px {
-  font-size: 12px;
-}
-
-.font13px {
-  font-size: 13px;
-}
-
-.textalignright {
-  text-align: right;
-}
-
-.displayinlineblock {
-  display: inline-block;
-}
-
-.floatleft {
-  float: left;
-}
-
-.disabled {
-  cursor: not-allowed;
-}
-
-.disabledfield {
-  cursor: not-allowed;
-  color: var(--regular-red-color);
-}
-
-/* CV INPUT OVERWRITE WIDTH */
-.cvwidth {
-  .mat-form-field {
-    width: 20%;
-  }
-}
-
-.cvwidth2 {
-  width: 300px;
-}
-
-hr {
-  border: none;
-  border-top: 2px dotted var(--regular-green-color);
-  color: var(--hr-color);
-  overflow: visible;
-  text-align: center;
-  height: 5px;
-}
-
-.tabStyle {
-  width: 250px;
-  height: 30px;
-  border: 1px solid var(--regular-grey-color);
-  background: var(--tabstyle-bg-img-end-color);
-}
-
-.mat-form-field-style > {
-
-  /* OVERWRITE MATERIAL INPUT FIELDS */
-  .mat-form-field-infix {
-    color: var(--regular-blue-color);
-  }
-
-  .mat-select-value {
-    color: var(--regular-blue-color);
-  }
-
-  .mat-form-field-label {
-    color: var(--mat-form-field-label-color) !important;
-  }
-
-  .mat-form-field-underline {
-    background-color: var(--mat-form-field-underline-bg-color) !important;
-  }
-
-  /*Focused: change color of label*/
-  .mat-focused .mat-form-field-label {
-    color: var(--mat-form-field-focused-color) !important;
-  }
-
-  /*Focused: change color of underline*/
-  .mat-form-field-ripple {
-    background-color: var(--mat-form-field-focused-color) !important;;
-  }
-
-  .mat-form-field-disabled .mat-form-field-underline
-  {
-    background-image: linear-gradient( to right, var(--img-linear-gradient-start-color) 0, var(--textarea-dark-border-color) 10%, var(--img-linear-gradient-color) 0 ) !important;
-    background-size: 1px 100% !important;
-    background-repeat: repeat-x !important;
-    cursor: not-allowed;
-  }
-
-  .mat-form-field-disabled:hover {
-    cursor: not-allowed;
-  }
-
-  mat-hint {
-    color: var(--regular-red-color) !important;
-  }
-}
-
-.mat-expansion-indicator
-{
-   pointer-events: visiblefill !important;
-}
-
-.panel-style {
-
-  .mat-panel-title {
-    width: 300px;
-    min-width: 300px;
-    max-width: 300px;
-  }
-}
-
-.errortext {
-  color: var(--regular-red-color);
-  font-size: 11px;
-}
-
-.divclear {
-  clear: both;
-}
-
-.borderbottom {
-  border-bottom: 1px solid var(--regular-gainsboro-color);
-}
-
-
-/* Table Style Begin */
-table.tableStyle {
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  border: 1px solid var(--secondary-blue-color);
-  background-color: var(--table-bg-color);
-  width: 100%;
-  text-align: left;
-  border-collapse: collapse;
-}
-
-table.tableStyle td, table.tableStyle th {
-  border: 1px solid var(--table-th-border-color);
-  padding: 3px 2px;
-}
-
-table.tableStyle tbody td {
-  font-size: 16px;
-  vertical-align: top;
-  padding: 10px 10px;
-}
-
-table.tableStyle tr:nth-child(even) {
-  background: var(--table-tr-even-bg-color);
-}
-
-table.tableStyle thead {
-  background: var(--table-thead-bg-color); /* Header background */
-  border-bottom: 1px solid var(--table-thead-border-color);
-}
-
-table.tableStyle thead th {
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--table-th-color);
-  border-left: 1px solid var(--table-th-border-color-2);
-  padding: 10px 10px;
-}
-
-table.tableStyle thead th:first-child {
-  border-left: none;
-}
-
-table.tableStyle tfoot {
-  font-size: 14px;
-  font-weight: bold;
-  color: var(--white-color);
-  background: var(--table-th-border-color-2);
-  border-top: 2px solid var(--table-thead-border-color);
-}
-
-table.tableStyle tfoot td {
-  font-size: 14px;
-}
-
-table.tableStyle tfoot .links {
-  text-align: right;
-}
-
-table.tableStyle tfoot .links a{
-  display: inline-block;
-  background: var(--secondary-blue-color);
-  color: var(--white-color);
-  padding: 2px 8px;
-  border-radius: 5px;
-}
-/* Table Style End */
\ No newline at end of file
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.spec.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.spec.ts
deleted file mode 100644
index 70f11a39..00000000
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { InvitroPharmacologyDataImportComponent } from './invitro-pharmacology-data-import.component';
-
-describe('InvitroPharmacologyDataImportComponent', () => {
-  let component: InvitroPharmacologyDataImportComponent;
-  let fixture: ComponentFixture<InvitroPharmacologyDataImportComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ InvitroPharmacologyDataImportComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(InvitroPharmacologyDataImportComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.ts
deleted file mode 100644
index 70bed95a..00000000
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-data-import/invitro-pharmacology-data-import.component.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
-import { FormBuilder } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
-import { Title } from '@angular/platform-browser';
-import { DatePipe, formatDate } from '@angular/common';
-import { OverlayContainer } from '@angular/cdk/overlay';
-import { Subscription } from 'rxjs';
-import { take, map } from 'rxjs/operators';
-import * as moment from 'moment';
-import * as XLSX from 'xlsx';
-
-/* GSRS Core Imports */
-import { AuthService } from '@gsrs-core/auth/auth.service';
-import { UtilsService } from '../../../core/utils/utils.service';
-import { LoadingService } from '@gsrs-core/loading';
-import { MainNotificationService } from '@gsrs-core/main-notification';
-import { ControlledVocabularyService } from '../../../core/controlled-vocabulary/controlled-vocabulary.service';
-import { SubstanceService } from '@gsrs-core/substance/substance.service';
-import { GeneralService } from '../../service/general.service';
-import { AppNotification, NotificationType } from '@gsrs-core/main-notification';
-import * as defiant from '@gsrs-core/../../../node_modules/defiant.js/dist/defiant.min.js';
-import { StructureImageModalComponent } from '@gsrs-core/structure';
-import { SubstanceEditImportDialogComponent } from '@gsrs-core/substance-edit-import-dialog/substance-edit-import-dialog.component';
-import { JsonDialogFdaComponent } from '../../json-dialog-fda/json-dialog-fda.component';
-import { ConfirmDialogComponent } from '../../confirm-dialog/confirm-dialog.component';
-
-/* Invitro Pharmacology Imports */
-import { InvitroPharmacologyService } from '../service/invitro-pharmacology.service'
-import { InvitroAssayInformation, ValidationMessage } from '../model/invitro-pharmacology.model';
-
-@Component({
-  selector: 'app-invitro-pharmacology-data-import',
-  templateUrl: './invitro-pharmacology-data-import.component.html',
-  styleUrls: ['./invitro-pharmacology-data-import.component.scss']
-})
-export class InvitroPharmacologyDataImportComponent implements OnInit {
-
-  importDataList: Array<any> = [];
-  importJson: any;
-  message = '';
-  submitMessage = '';
-
-  name = 'This is XLSX TO JSON CONVERTER';
-  willDownload = false;
-
-  constructor(
-    private activatedRoute: ActivatedRoute,
-    private router: Router,
-    private sanitizer: DomSanitizer,
-    private dialog: MatDialog,
-    private titleService: Title,
-    private overlayContainerService: OverlayContainer,
-    private authService: AuthService,
-    private utilsService: UtilsService,
-    private loadingService: LoadingService,
-    private mainNotificationService: MainNotificationService,
-    private generalService: GeneralService,
-    private invitroPharmacologyService: InvitroPharmacologyService
-    ) { }
-
-  ngOnInit(): void {
-  }
-
-  onFileChange(evt) {
-    /*
-    let workBook = null;
-    let jsonData = null;
-    const reader = new FileReader();
-    const file = ev.target.files[0];
-    reader.onload = (event) => {
-      const data = reader.result;
-      workBook = XLSX.read(data, { type: 'binary' });
-      jsonData = workBook.SheetNames.reduce((initial, name) => {
-        const sheet = workBook.Sheets[name];
-        initial[name] = XLSX.utils.sheet_to_json(sheet);
-        return initial;
-      }, {});
-      const dataString = JSON.stringify(jsonData);
-      document.getElementById('output').innerHTML = dataString.slice(0, 300).concat("...");
-      this.setDownload(dataString);
-    }
-    reader.readAsBinaryString(file);
-    */
-
-    const target: DataTransfer = <DataTransfer>(evt.target);
-    if (target.files.length > 1) {
-      alert('Multiple files are not allowed');
-      return;
-    }
-    else {
-      // Empty the list
-      this.importDataList.length = 0;
-
-      const reader: FileReader = new FileReader();
-      reader.onload = (e: any) => {
-        const bstr: string = e.target.result;
-        const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });
-        const wsname = wb.SheetNames[0];
-        const ws: XLSX.WorkSheet = wb.Sheets[wsname];
-
-        // If header is specified, the first row is considered a data row; if header is not specified, the first row is the header row and not considered data.
-        // null values are returned when raw is true but are skipped when false.
-        let data = (XLSX.utils.sheet_to_json(ws, { raw: true }));
-
-       // let datafirstrow = (XLSX.utils.sheet_to_json(ws, {skipHeader: true, origin: "A2"}));
-       // console.log(datafirstrow);
-
-
-        this.importJson = data;
-
-        data.forEach((element, index) => {
-          if (element) {
-           console.log("index: " + index + "     " + JSON.stringify(element));
-
-            this.importDataList.push(element);
-            this.message = this.message + "index: " + index + "     " + JSON.stringify(element) + "\n\n";
-         //   this.invitroPharmacologyService.assayScreening = JSON.parse(JSON.stringify(element));
-           // this.invitroPharmacologyService.saveAssayScreening().subscribe(response => {
-//
-          //  });
-          }
-        })
-      }
-      reader.readAsBinaryString(target.files[0]);
-    }
-  }
-
-  setDownload(data) {
-    this.willDownload = true;
-    setTimeout(() => {
-      const el = document.querySelector("#download");
-      el.setAttribute("href", `data:text/json;charset=utf-8,${encodeURIComponent(data)}`);
-      el.setAttribute("download", 'xlsxtojson.json');
-    }, 1000)
-  }
-
-  importJSON() {
-    this.importJson.forEach((element, index) => {
-      if (element) {
-        console.log("index: " + index + "     " + JSON.stringify(element));
-        this.message = this.message + "index: " + index + "     " + JSON.stringify(element) + "\n\n";
-        this.invitroPharmacologyService.assay = JSON.parse(JSON.stringify(element));
-       this.invitroPharmacologyService.saveAssay().subscribe(response => {
-        this.message = "";
-        this.submitMessage = "Import Successful";
-        });
-      }
-    })
-  }
-}
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.html b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.html
index e99c2259..3cc61214 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.html
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.html
@@ -99,18 +99,17 @@
           </a>&nbsp;&nbsp;
           -->
 
-          <a [href]="downloadJsonHref" (click)="saveJSON()" download="{{jsonFileName}}.json"
-            matTooltip='Export Json'>
+          <a [href]="downloadJsonHref" (click)="saveJSON()" download="{{jsonFileName}}.json" matTooltip='Export Json'>
             <mat-icon svgIcon="get_app" [ngStyle]="{'color':'white'}"></mat-icon>
           </a>&nbsp;&nbsp;&nbsp;
         </div>
 
-        <div class="width40percent margintop10px marginleft30px font11px colorwhite" *ngIf="assay && assay.id">
+        <div class="width40percent marginleft30px font11px colorwhite" *ngIf="assay && assay.id">
           <span>Created By:</span> {{assay.createdBy}}&nbsp;&nbsp;&nbsp;
-          <span>Create Date:</span>{{assay.creationDate|date: 'MM/dd/yyyy hh:mm:ss
+          <span>Create Date:</span>{{assay.createdDate|date: 'MM/dd/yyyy hh:mm:ss
           a'}}<br>
           <span class="colorwhite">Modified By:</span> {{assay.modifiedBy}}&nbsp;&nbsp;&nbsp;
-          <span class="colorwhite">Modify Date:</span> {{assay.lastModifiedDate|date: 'MM/dd/yyyy hh:mm:ss a'}}
+          <span class="colorwhite">Modify Date:</span> {{assay.modifiedDate|date: 'MM/dd/yyyy hh:mm:ss a'}}
         </div>
       </div> <!-- class=divflex -->
 
@@ -144,16 +143,31 @@
               <div class="fieldKey">
                 <mat-label>Assay Set:&nbsp;<span class="colorred">*</span></mat-label>
               </div>
-              <div class="fieldvalue padtop5px">
-                <span *ngFor="let data of checkBoxAssaySetList; let i=index">
-                  <mat-checkbox class="font13px" #checkBox [value]="data.value"
-                    name="data.value" [checked]="data.checked" (change)="setSelectedAssaySet(data, checkBox)">
-                    {{data.value}}
-                  </mat-checkbox>
-                  &nbsp;
-                </span>
-              </div>
-            </div>
+
+              <div class="divflex fieldvalue">
+                <div class="padtop5px">
+                  <span *ngFor="let data of checkBoxAssaySetList; let indexCheckbox = index">
+                    <mat-checkbox class="marginright15px font13px" #checkBox [value]="data.value" name="data.value"
+                      [checked]="data.checked" (change)="setSelectedAssaySet($event, data, indexCheckbox)">
+                      {{data.value}}
+                    </mat-checkbox>
+                  </span>
+                </div>
+
+                <!-- Add New Assay Set -->
+                <mat-form-field class="marginleft15px width150px">
+                  <input matInput placeholder="Enter New Assay Set" [(ngModel)]="newAssaySet" name="newAssaySet" />
+                </mat-form-field>
+
+                <div class="marginleft15px">
+                  <button mat-flat-button color="primary" (click)="addNewAssaySet()">Add New
+                    Assay Set</button>
+                </div>
+
+              </div> <!-- divflex -->
+
+
+            </div> <!-- form-row -->
 
             <div class="form-row" *ngIf="assay && assay.id">
               <div class="fieldKey">
@@ -372,8 +386,10 @@
               <div class="fieldKey">
                 <mat-label>Standard Ligand/Sub Concent Units:</mat-label>
               </div>
-              <app-cv-input class="fieldvalue" domain="AMOUNT_UNIT" title="" name="standardLigandSubstrateConcentrationUnits"
-                [model]="assay.standardLigandSubstrateConcentrationUnits" (valueChange)="assay.standardLigandSubstrateConcentrationUnits = $event">
+              <app-cv-input class="fieldvalue" domain="AMOUNT_UNIT" title=""
+                name="standardLigandSubstrateConcentrationUnits"
+                [model]="assay.standardLigandSubstrateConcentrationUnits"
+                (valueChange)="assay.standardLigandSubstrateConcentrationUnits = $event">
               </app-cv-input>
             </div>
 
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.scss b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.scss
index 87771744..67e2f2a6 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.scss
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.scss
@@ -329,7 +329,11 @@
 }
 
 .marginright10px {
-  margin-right: 20px;
+  margin-right: 10px;
+}
+
+.marginright15px {
+  margin-right: 15px;
 }
 
 .marginbottom30px {
@@ -368,6 +372,10 @@
   width: 100px;
 }
 
+.width150px {
+  width: 150px;
+}
+
 .width200px {
   width: 200px;
 }
@@ -436,6 +444,10 @@
   text-align: right;
 }
 
+.textalignleft {
+  text-align: left;
+}
+
 .displayinlineblock {
   display: inline-block;
 }
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.ts
index b8befb7e..74c8ed30 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.ts
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component.ts
@@ -51,6 +51,9 @@ export class InvitroPharmacologyAssayFormComponent implements OnInit, OnDestroy
   validationResult = false;
   message = '';
 
+  newAssaySetObject: InvitroAssaySet;
+  newAssaySet: string;
+
   checkBoxAssaySetList: Array<any> = [];
   existingAssaySetList: Array<any> = [];
 
@@ -115,10 +118,8 @@ export class InvitroPharmacologyAssayFormComponent implements OnInit, OnDestroy
             if (id !== this.id) {
               this.id = id;
               this.titleService.setTitle(`Edit In-vitro Pharmacology Assay Only ` + this.id);
+              // Get existing Assay
               this.getInvitroPharmacologyDetails();
-
-              // Get All the Assay Sets for checkbox
-              this.getAllAssaySets();
             }
           } else if (this.activatedRoute.snapshot.queryParams['copyId']) {
             this.id = this.activatedRoute.snapshot.queryParams['copyId'];
@@ -180,6 +181,9 @@ export class InvitroPharmacologyAssayFormComponent implements OnInit, OnDestroy
           this.invitroPharmacologyService.loadAssayOnly(response);
           this.assay = this.invitroPharmacologyService.assay;
 
+          // Get All the Assay Sets for checkbox
+          this.getAllAssaySets();
+
         } else {
           this.handleProductRetrivalError();
         }
@@ -219,7 +223,13 @@ export class InvitroPharmacologyAssayFormComponent implements OnInit, OnDestroy
       if (response) {
         this.existingAssaySetList = response;
 
-        this.loadCheckBoxAssaySetList();
+        // Create checboxes
+        this.createAssaySetCheckBoxes();
+
+        if (this.id) {
+          // if Assay record exists, load the Assay set in the checkboxes
+          this.loadCheckBoxAssaySetList();
+        }
 
         this.loadingService.setLoading(false);
         this.isLoading = false;
@@ -232,40 +242,82 @@ export class InvitroPharmacologyAssayFormComponent implements OnInit, OnDestroy
     this.subscriptions.push(getInvitroSubscribe);
   }
 
-  loadCheckBoxAssaySetList() {
+  createAssaySetCheckBoxes() {
+    // Create checkboxes for each existing Assay Set from database
     this.existingAssaySetList.forEach(set => {
-      let test = { value: set.assaySet, checked: false };
-      this.checkBoxAssaySetList.push(test);
+      let setObj = { value: set.assaySet, checked: false };
+      this.checkBoxAssaySetList.push(setObj);
     });
+  }
+
+  loadCheckBoxAssaySetList() {
+    // For existing Assay, when loading data, loop through the associated assay sets, and assign check in the checkbox
+    if (this.assay) {
+      this.assay.invitroAssaySets.forEach(asySet => {
+        if (asySet.assaySet) {
+          // Get the index if the value exists in the key 'value'
+          const indexSet = this.checkBoxAssaySetList.findIndex(record => record.value === asySet.assaySet);
+          // check the box for the found assay set
+          this.checkBoxAssaySetList[indexSet].checked = true;
+        }
+      });
+    }
+  }
+
+  setSelectedAssaySet($event, data: any, indexCheckbox: number) {
+    // const set = this.existingAssaySetList[indexCheckbox];
+    // this.assay.invitroAssaySets.push(set);
+
+    //const checked = this.checkBox.filter(checkbox1 => checkbox1.checked);
+
+    // To get the actual values instead of just the element
+    const checkedItems = this.checkBoxAssaySetList.filter((x, index) => this.checkBox.find((c, i) => i == index).checked).map(x => x.value);
+
+    // Get all the values that are checked.  Loop through the checkboxes and assay.assaySets.
+    // add the values in assay.assaySet if not there, or remove if there.
+
+    // Clear the existing lists in the assay
+    this.assay.invitroAssaySets = [];
+
+    checkedItems.forEach(assaySet => {
+      // Get the index if the value exists in the key 'value'
+      const indexSet = this.existingAssaySetList.findIndex(record => record.assaySet === assaySet);
+
+      // found
+      if (indexSet > -1) {
+        const set = this.existingAssaySetList[indexSet];
+        this.assay.invitroAssaySets.push(set);
+      } else {  // Not found add new one
 
-    this.assay.invitroAssaySets.forEach(asySet => {
-      if (asySet.assaySet) {
-        // Get the index if the value exists in the key 'value'
-        const indexSet = this.checkBoxAssaySetList.findIndex(record => record.value === asySet.assaySet);
-        this.checkBoxAssaySetList[indexSet].checked = true;
       }
+
+      /*
+      let found = false;
+      this.assay.invitroAssaySets.forEach(asySet => {
+        if (asySet.assaySet) {
+          // match in assay and checked in checkbox
+          if (asySet.assaySet === data) {
+          } else {
+
+          }
+        }
+      });  */
+
+      //const set: InvitroAssaySet = {};
+      //set.assaySet = data;
+      // const set = this.existingAssaySetList[indexCheckbox];
+      //this.assay.invitroAssaySets.push(set);
     });
   }
 
-  setSelectedAssaySet(data: any, checkbox) {
-    let selStr = '';
-    const selected = [];
-    /*
-    const checked = this.checkBox.filter(checkbox1 => checkbox1.checked);
-    checked.forEach(data1 => {
-      const set: InvitroAssaySet = {};
-      set.assaySet = data1;
-      alert(JSON.stringify(data1));
-    //  this.assay.invitroAssaySets.push(set);
-
-      // selected.push(data1.value);
-    }); */
-
-    /*
-    if (selected.length > 0) {
-      selStr = selected.join(',');
-      this.assay.assaySet = selStr;
-    }*/
+  addNewAssaySet() {
+    this.newAssaySetObject = { assaySet: this.newAssaySet };
+    this.existingAssaySetList.push(this.newAssaySetObject);
+
+    let setObj = { value: this.newAssaySet, checked: false };
+    this.checkBoxAssaySetList.push(setObj);
+
+    // this.loadCheckBoxAssaySetList();
   }
 
   validate(): void {
@@ -354,7 +406,7 @@ export class InvitroPharmacologyAssayFormComponent implements OnInit, OnDestroy
     };
     this.mainNotificationService.setNotification(notification);
     setTimeout(() => {
-      this.router.navigate(['/invitro-pharm/register']);
+      this.router.navigate(['/invitro-pharm/assay/register']);
       this.invitroPharmacologyService.loadAssay();
     }, 5000);
   }
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology.module.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology.module.ts
index 09992549..e663ccaa 100644
--- a/src/app/fda/invitro-pharmacology/invitro-pharmacology.module.ts
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology.module.ts
@@ -44,7 +44,7 @@ import { InvitroPharmacologyDetailsComponent } from './invitro-pharmacology-deta
 import { InvitroPharmacologyBrowseComponent } from './invitro-pharmacology-browse/invitro-pharmacology-browse.component';
 import { InvitroPharmacologyFormComponent } from './invitro-pharmacology-form/invitro-pharmacology-form.component';
 import { InvitroPharmacologyTextSearchComponent } from './invitro-pharmacology-text-search/invitro-pharmacology-text-search.component';
-import { InvitroPharmacologyDataImportComponent } from './invitro-pharmacology-data-import/invitro-pharmacology-data-import.component';
+import { InvitroPharmacologyAssayDataImportComponent } from './invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component';
 import { InvitroPharmacologyDetailsTestagentComponent } from './invitro-pharmacology-details/invitro-pharmacology-details-testagent/invitro-pharmacology-details-testagent.component';
 import { InvitroPharmacologyAssayFormComponent } from './invitro-pharmacology-form/invitro-pharmacology-assay-form/invitro-pharmacology-assay-form.component';
 import { CanActivateRegisterInvitroPharmacologyFormComponent } from './invitro-pharmacology-form/can-activate-register-invitro-pharmacology-form.component';
@@ -110,8 +110,8 @@ const invitroRoutes: Routes = [
     component: InvitroPharmacologyDetailsTestagentComponent
   },
   {
-    path: 'import-invitro-pharm',
-    component: InvitroPharmacologyDataImportComponent
+    path: 'invitro-pharm/import/assay',
+    component: InvitroPharmacologyAssayDataImportComponent
   }
 ];
 
@@ -161,7 +161,7 @@ const invitroRoutes: Routes = [
     InvitroPharmacologyBrowseComponent,
     InvitroPharmacologyFormComponent,
     InvitroPharmacologyTextSearchComponent,
-    InvitroPharmacologyDataImportComponent,
+    InvitroPharmacologyAssayDataImportComponent,
     InvitroPharmacologyDetailsTestagentComponent,
     InvitroPharmacologyAssayFormComponent,
     InvitroPharmacologySummaryFormComponent
diff --git a/src/app/fda/invitro-pharmacology/model/invitro-pharmacology.model.ts b/src/app/fda/invitro-pharmacology/model/invitro-pharmacology.model.ts
index 7153822a..d8a49037 100644
--- a/src/app/fda/invitro-pharmacology/model/invitro-pharmacology.model.ts
+++ b/src/app/fda/invitro-pharmacology/model/invitro-pharmacology.model.ts
@@ -27,8 +27,8 @@ export interface InvitroAssayInformation {
   humanHomologTargetApprovalId?: string;
   ligandSubstrate?: string;
   ligandSubstrateApprovalId?: string;
-  ligandSubstrateConcentration?: string;
-  ligandSubstrateConcentrationUnits?: string;
+  standardLigandSubstrateConcentration?: string;
+  standardLigandSubstrateConcentrationUnits?: string;
   _assayTargetSubId?: string;
   _ligandSubstrateSubId?: string;
   _controlSubId?: string;

From baf437a5ea1e2c2a22898aeb8558c746491db2fb Mon Sep 17 00:00:00 2001
From: Newatia <Archana.Newatia@fda.gov>
Date: Wed, 1 May 2024 16:37:52 -0400
Subject: [PATCH 2/2] added import assay

---
 ...rmacology-assay-data-import.component.html | 205 +++++++
 ...rmacology-assay-data-import.component.scss | 566 ++++++++++++++++++
 ...cology-assay-data-import.component.spec.ts |  25 +
 ...harmacology-assay-data-import.component.ts | 258 ++++++++
 4 files changed, 1054 insertions(+)
 create mode 100644 src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.html
 create mode 100644 src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.scss
 create mode 100644 src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.spec.ts
 create mode 100644 src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.ts

diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.html b/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.html
new file mode 100644
index 00000000..28a8d446
--- /dev/null
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.html
@@ -0,0 +1,205 @@
+<div class="top-fixed">
+  <div class="actions-container">
+
+    <span>
+      <button mat-flat-button color="primary" (click)="showJSON()">Show JSON</button>
+    </span>
+
+    <!--
+    <a mat-flat-button color="primary" [href]="downloadJsonHref" (click)="saveJSON()" download="{{jsonFileName}}.json">
+      <span>Export JSON</span>
+    </a>&nbsp;&nbsp;&nbsp;
+    -->
+
+    <!-- Do not show 'Import JSON' button when in Update Invitro Pharamcology page -->
+    <!--
+    <span *ngIf="assay && !assay.id">
+      <button mat-flat-button color="primary" (click)="importJSON()">Import JSON</button>
+    </span>
+    -->
+
+    <!--
+    <button mat-flat-button class="hide-show-messages" (click)="toggleValidation()" [disabled]="isLoading"
+      *ngIf="validationMessages && validationMessages.length > 0">
+      {{showSubmissionMessages ? 'Hide' : 'Show'}} messages
+      <mat-icon [svgIcon]="showSubmissionMessages ? 'chevron_up' : 'chevron_down'"></mat-icon>
+    </button>
+    <span class="middle-fill"></span>
+
+    <!- - Assay Details Link - ->
+    <a mat-flat-button color="primary" routerLink="/invitro-pharm/{{assay.id}}" target="_blank"
+      matTooltip='Opens in a new window' *ngIf="assay && assay.id">
+      View Assay Details
+      <mat-icon class="small-icon" svgIcon="open_in_new" matTooltip="opens in new window"></mat-icon>
+    </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
+
+    <!- - Validate and Submit Button - ->
+    &nbsp;
+    <button mat-flat-button color="warn" (click)="validate()">Validate and Submit</button>
+    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    <button mat-flat-button color="primary" [routerLink]="['/home']" matTooltip='Close this window'>Close</button>
+  </div> <!- - div class=actions-container- ->
+
+
+  <!- - Validation Message Display - ->
+  <div [ngClass]="{'submission-messages': true, collapsed: !showSubmissionMessages, expanded: showSubmissionMessages}">
+    <div class="submission-message" *ngIf="submissionMessage">
+      {{submissionMessage}}
+    </div>
+
+
+    <!- - Validation Message Display and Submit Button - ->
+    <div *ngIf="validationMessages">
+      <span *ngIf=" validationMessages.length > 0">
+        <div class="submission-message" *ngIf='!serverError && !approving'>
+          Please correct or dismiss the following errors and submit again:
+        </div>
+        <div class="validation-message" *ngFor="let message of validationMessages; index as i">
+          <div class="message-type" [ngClass]="message.messageType == 'ERROR' ? 'error-message' : 'warning-message'">
+            {{message.messageType}}</div>
+          <div class="message">{{message.message}}<span *ngFor="let link of message.links"><br /><a [href]="link.href"
+                target="_blank">{{link.text}}</a></span></div>
+          <button mat-icon-button matTooltip="Dismiss" *ngIf="message.messageType != 'ERROR' && !approving"
+            (click)="dismissValidationMessage(i)">
+            <mat-icon svgIcon="cancel"></mat-icon>
+          </button>
+        </div>
+      </span>
+
+      <div class="dismiss-container">
+        <span class="middle-fill"></span>
+        <button mat-flat-button color="primary" (click)="submit()"
+          [disabled]="isLoading || (this.validationResult === false)">{{validationMessages &&
+          validationMessages.length > 0?'Dismiss All and ':''}}
+          Submit</button>
+      </div>
+    </div>
+    <!- - Validation Message and Submit Button - ->
+    -->
+
+  </div> <!-- div class=actions-container -->
+</div> <!-- div class=top-fixed -->
+
+<div class="form-content-container">
+  <div class="scrollable-container">
+
+  <div class="divcenter margintop20px marginleft30px">
+
+    <div class="headerstyle margintop20px bordergray">
+
+      <div class="padtop15px font18px fontbold">
+        <b>Import Bulk Assays ONLY </b>
+      </div>
+
+    </div> <!--  -->
+
+    <br><br>
+    <b>Select a file to Import Assays Only:</b>&nbsp;&nbsp;
+
+    <!-- Import EXCEL DATA and convert to JSON -->
+    <input type="file" (change)="onFileChange($event)" />
+
+    <!-- -->
+    <div id="output"></div>
+    <br>
+    <div *ngIf="willDownload">
+      <a id="download"> Download JSON File </a>
+    </div>
+    <br>
+
+    <!-- Import Assay JSON into the Database -->
+    <span>
+      <button mat-flat-button color="primary" (click)="importAssayJSONIntoDatabase()" [disabled]="disabled">Import Data
+        into Database</button>
+    </span>
+
+    <br><br>
+    <span *ngIf="submitMessage" class="colorgreen">{{submitMessage}}</span>
+
+    <!-- DISPLAY JSON -->
+    <!--
+<div *ngIf="message">
+  {{message}}
+</div>
+-->
+
+    <div *ngIf="importDataList.length > 0">
+      <b>Total Records ready for import into the database:&nbsp;
+        <span class="colorgreen font18px">{{importDataList.length}}</span></b>
+
+      <br><br>
+      <table class="tableStyle bordergray">
+        <tr class="font11px">
+          <th>#</th>
+          <th>Assay Set</th>
+          <th>External Assay Source</th>
+          <th>External Assay ID</th>
+          <th>External Assay Reference URL</th>
+          <th>Assay Title</th>
+          <th>Assay Format</th>
+          <th>Assay Mode</th>
+          <th>Bioassay Type</th>
+          <th>Bioassay Class</th>
+          <th>Study Type</th>
+          <th>Detection Method</th>
+          <th>Presention Type</th>
+          <th>Presentation</th>
+          <th>Public Domain</th>
+          <th>Assay Target Name</th>
+          <th>Assay Target Name Approval ID</th>
+          <th>Target Species</th>
+          <th>Human Homolog Target Name</th>
+          <th>Human homolog Target Name Approval ID</th>
+          <th>Ligand/Substate</th>
+          <th>Ligand/Substrate Approval ID</th>
+          <th>Standard Ligand/Substrate Concentration</th>
+          <th>Standard Ligand/Substrate Concentration Units</th>
+        </tr>
+
+        <tr valing="top" class="font11px" *ngFor="let assay of importDataList; let index = index">
+          <td>{{(index+1)}}</td>
+          <td></td>
+          <td>{{assay.externalAssaySource}}</td>
+          <td>{{assay.externalAssayId}}</td>
+          <td>{{assay.externalAssayReferenceUrl}}</td>
+          <td>{{assay.assayTitle}}</td>
+          <td>{{assay.assayFormat}}</td>
+          <td>{{assay.assayMode}}</td>
+          <td>{{assay.bioassayType}}</td>
+          <td>{{assay.bioassayClass}}</td>
+          <td>{{assay.studyType}}</td>
+          <td>{{assay.detectionMethod}}</td>
+          <td>{{assay.presentationType}}</td>
+          <td>{{assay.presentation}}</td>
+          <td>{{assay.publicDomain}}</td>
+          <td>{{assay.targetName}}</td>
+          <td>{{assay.targetNameApprovalId}}</td>
+          <td>{{assay.targetSpecies}}</td>
+          <td>{{assay.humanHomologTarget}}</td>
+          <td>{{assay.humanHomologTargetApprovalId}}</td>
+          <td>{{assay.ligandSubstrate}}</td>
+          <td>{{assay.ligandSubstrateApprovalId}}</td>
+          <td>{{assay.standardLigandSubstrateConcentration}}</td>
+          <td>{{assay.standardLigandSubstrateConcentrationUnits}}</td>
+        </tr>
+      </table>
+    </div>
+    <br>
+
+  </div> <!-- divcenter marginto90px-->
+  <br>
+
+  <div class="marginleft30px" *ngIf="importDataList.length > 0">
+    <!-- Import Assay JSON into the Database -->
+    <span>
+      <button mat-flat-button color="primary" (click)="importAssayJSONIntoDatabase()" [disabled]="disabled">Import Data
+        into Database</button>
+    </span>
+  </div>
+  <br><br>
+
+  </div> <!-- scrollable-container -->
+</div> <!-- form-content-container -->
+
+<br><br>
\ No newline at end of file
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.scss b/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.scss
new file mode 100644
index 00000000..eb30d903
--- /dev/null
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.scss
@@ -0,0 +1,566 @@
+.top-fixed {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  top: 64px;
+  width: 100%;
+  background-color: var(--regular-white-color);
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 3px 3px -2px var(--box-shadow-color), 0px 3px 4px 0px var(--box-shadow-color-2), 0px 1px 8px 0px var(--box-shadow-color-3);
+  z-index: 1001;
+}
+
+.form-content-container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-top: 110px;
+}
+
+.scrollable-container {
+  padding-top: 15px;
+}
+
+.cards-container {
+  width: 100%;
+}
+
+.title_box {
+  width: 1140px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.title {
+   font-size: 24px;
+   font-weight: 600px;
+   font-family: Arial, Helvetica, sans-serif;
+   /*padding-left: 70px; */
+}
+
+.titleblue {
+  font-size: 18px;
+  font-weight: 700px;
+  font-family: Arial, Helvetica, sans-serif;
+  color: var(--regular-blue-color);
+
+  /*padding-left: 70px; */
+}
+
+.divflex {
+  display: flex;
+}
+
+.divflex {
+  display: flex;
+}
+
+.divcenter {
+  max-width: 90%;
+  margin: 0 auto;
+}
+
+.divradius {
+  border-radius: 6px 6px 0px 0px;
+}
+
+.headerstyle {
+  border-radius: 7px 7px 0px 0px;
+  border: 1px solid var(--blue-color);
+  background-color: var(--table-th-border-color);  /*--primary-title-color*/
+  border-bottom: none;
+  padding-left: 10px;
+  height: 50px;
+  color: #FFFFFF;
+}
+
+.row {
+  width: 100%;
+}
+
+.form-row {
+  display: flex;
+  width: 100%;
+}
+
+.row-property {
+  display: flex;
+  width: 50%;
+  border: 1px solid green;
+}
+
+.row-property-key {
+  min-width: 40%;
+  max-width: 40%;
+  padding: 7px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.col-6-1 {
+  width: calc((100% - 25px * 5) / 6);
+  margin-right: 25px;
+}
+
+.col-6-1:last-child {
+  margin-right: 0px;
+}
+
+.col-2 {
+  width: calc((100% - 30px * 2) / 3);
+  margin-right: 30px;
+}
+
+.col-2:last-child {
+  margin-right: 0px;
+}
+
+.col-6-2 {
+  width: calc((100% - 25px * 2) / 3);
+  margin-right: 25px;
+}
+
+.col-6-2:last-child {
+  margin-right: 0px;
+}
+
+.col-6-3 {
+  width: calc((100% - 25px * 1) / 2);
+  margin-right: 25px;
+}
+
+.col-6-3:last-child {
+  margin-right: 0px;
+}
+
+.col-6-4 {
+  width: calc((100% - 20px) / (6/4));
+  margin-right: 20px;
+}
+
+.col-6-4:last-child {
+  margin-right: 0px;
+}
+
+.col-6-5 {
+  width: calc((100% - 10px) / (6/5));
+  margin-right: 10px;
+}
+
+.col-6-5:last-child {
+  margin-right: 0px;
+}
+
+.col-5-more {
+  width: calc((100% + 100px) / (6/5));
+  margin-right: 10px;
+}
+
+.col-6-6 {
+  width: 100%;
+}
+
+.col-4-1 {
+  width: calc((100% - 30px * 3) / 4);
+  margin-right: 30px;
+}
+
+.col-4-1:last-child {
+  margin-right: 0px;
+}
+
+.hide-show-messages {
+  margin-left: 10px;
+  border: 1px solid;
+}
+
+.actions-container {
+  max-width: 1028px;
+  width: 100%;
+  background-color: var(--regular-white-color);
+  padding: 10px;
+  display: flex;
+}
+
+.dismiss-container {
+  display: flex;
+}
+
+.middle-fill {
+  flex: 1 1 auto;
+}
+
+.mat-card {
+  max-width: 1140px;
+}
+
+.submission-messages {
+  overflow: hidden;
+  height: auto;
+  -webkit-transition: all 500ms ease-out;
+  transition: all 500ms ease-out;
+  max-width: 1028px;
+  width: 100%;
+  background-color: var(--regular-white-color);
+  display: flex;
+  flex-direction: column;
+
+  &.collapsed {
+    max-height: 0;
+  }
+
+  &.expanded {
+    max-height: 500px;
+    overflow-y: auto;
+    padding: 10px;
+  }
+
+  .submission-message {
+    font-weight: 500;
+    text-align: center;
+  }
+
+  .validation-message {
+    display: flex;
+    padding: 5px 0;
+    align-items: center;
+
+    .message-type {
+      text-transform: uppercase;
+      font-weight: 500;
+      margin-right: 20px;
+      padding:10px;
+      border-radius:3px;
+    }
+  }
+
+  .dismiss-container {
+    display: flex;
+  }
+
+  .warning-message {
+    color: var(--warning-dialog-color);
+    background-color: var(--warning-dialog-bg-color);
+
+  }
+
+  .error-message {
+    color: var(--error-dialog-color);
+    background-color: var(--error-dialog-bg-color);
+  }
+
+}
+
+.divflexrow {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.details-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.details-box {
+  max-width: 1028px;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 20px;
+}
+
+.margintopneg10px {
+  margin-top: -10px;
+}
+
+.margintop10px {
+  margin-top: 10px;
+}
+
+.margintop12px {
+  margin-top: 12px;
+}
+
+.margintop20px {
+  margin-top: 20px;
+}
+
+.margintop90px {
+  margin-top: 90px;
+}
+
+.margintop150px {
+  margin-top: 150px;
+}
+
+.marginleft20px {
+  margin-left: 20px;
+}
+
+.marginleft30px {
+  margin-left: 30px;
+}
+
+.padtop5px {
+  padding-top: 5px;
+}
+
+.padtop10px {
+  padding-top: 10px;
+}
+
+.padtop15px {
+  padding-top: 15px;
+}
+
+.padtop17px {
+  padding-top: 17px;
+}
+
+.bordergray {
+  border: 1px solid var(--regular-grey-color);
+}
+
+.bordergreen {
+  border: 1px solid var(--regular-green-color);
+}
+
+.width40px {
+  width: 40px;
+}
+
+.width50px {
+  width: 50px;
+}
+
+.width200px {
+  width: 200px;
+}
+
+.width32percent {
+  width: 32%;
+}
+
+.colorgray {
+  color: var(--regular-grey-color);
+}
+
+.colorred {
+  color: var(--regular-red-color);
+}
+
+.colorgreen {
+  color: var(--regular-green-color);
+}
+
+.font11px {
+  font-size: 11px;
+}
+
+.font12px {
+  font-size: 12px;
+}
+
+.font13px {
+  font-size: 13px;
+}
+
+.font16px {
+  font-size: 16px;
+}
+
+.font18px {
+  font-size: 18px;
+}
+
+.textalignright {
+  text-align: right;
+}
+
+.displayinlineblock {
+  display: inline-block;
+}
+
+.floatleft {
+  float: left;
+}
+
+.disabled {
+  cursor: not-allowed;
+}
+
+.disabledfield {
+  cursor: not-allowed;
+  color: var(--regular-red-color);
+}
+
+/* CV INPUT OVERWRITE WIDTH */
+.cvwidth {
+  .mat-form-field {
+    width: 20%;
+  }
+}
+
+.cvwidth2 {
+  width: 300px;
+}
+
+hr {
+  border: none;
+  border-top: 2px dotted var(--regular-green-color);
+  color: var(--hr-color);
+  overflow: visible;
+  text-align: center;
+  height: 5px;
+}
+
+.tabStyle {
+  width: 250px;
+  height: 30px;
+  border: 1px solid var(--regular-grey-color);
+  background: var(--tabstyle-bg-img-end-color);
+}
+
+.mat-form-field-style > {
+
+  /* OVERWRITE MATERIAL INPUT FIELDS */
+  .mat-form-field-infix {
+    color: var(--regular-blue-color);
+  }
+
+  .mat-select-value {
+    color: var(--regular-blue-color);
+  }
+
+  .mat-form-field-label {
+    color: var(--mat-form-field-label-color) !important;
+  }
+
+  .mat-form-field-underline {
+    background-color: var(--mat-form-field-underline-bg-color) !important;
+  }
+
+  /*Focused: change color of label*/
+  .mat-focused .mat-form-field-label {
+    color: var(--mat-form-field-focused-color) !important;
+  }
+
+  /*Focused: change color of underline*/
+  .mat-form-field-ripple {
+    background-color: var(--mat-form-field-focused-color) !important;;
+  }
+
+  .mat-form-field-disabled .mat-form-field-underline
+  {
+    background-image: linear-gradient( to right, var(--img-linear-gradient-start-color) 0, var(--textarea-dark-border-color) 10%, var(--img-linear-gradient-color) 0 ) !important;
+    background-size: 1px 100% !important;
+    background-repeat: repeat-x !important;
+    cursor: not-allowed;
+  }
+
+  .mat-form-field-disabled:hover {
+    cursor: not-allowed;
+  }
+
+  mat-hint {
+    color: var(--regular-red-color) !important;
+  }
+}
+
+.mat-expansion-indicator
+{
+   pointer-events: visiblefill !important;
+}
+
+.panel-style {
+
+  .mat-panel-title {
+    width: 300px;
+    min-width: 300px;
+    max-width: 300px;
+  }
+}
+
+.errortext {
+  color: var(--regular-red-color);
+  font-size: 11px;
+}
+
+.divclear {
+  clear: both;
+}
+
+.borderbottom {
+  border-bottom: 1px solid var(--regular-gainsboro-color);
+}
+
+/* Table Style Begin */
+table.tableStyle {
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  border: 1px solid var(--secondary-blue-color);
+  background-color: var(--table-bg-color);
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+}
+
+table.tableStyle td, table.tableStyle th {
+  border: 1px solid var(--table-th-border-color);
+  padding: 5px 5px;
+}
+
+table.tableStyle tbody td {
+  font-size: 16px;
+  vertical-align: top;
+  padding: 10px 10px;
+}
+
+table.tableStyle tr:nth-child(even) {
+  background: var(--table-tr-even-bg-color);
+}
+
+table.tableStyle thead {
+  background: var(--table-thead-bg-color); /* Header background */
+  border-bottom: 1px solid var(--table-thead-border-color);
+}
+
+table.tableStyle thead th {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--table-th-color);
+  border-left: 1px solid var(--table-th-border-color-2);
+  padding: 10px 10px;
+}
+
+table.tableStyle thead th:first-child {
+  border-left: none;
+}
+
+table.tableStyle tfoot {
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--white-color);
+  background: var(--table-th-border-color-2);
+  border-top: 2px solid var(--table-thead-border-color);
+}
+
+table.tableStyle tfoot td {
+  font-size: 14px;
+}
+
+table.tableStyle tfoot .links {
+  text-align: right;
+}
+
+table.tableStyle tfoot .links a{
+  display: inline-block;
+  background: var(--secondary-blue-color);
+  color: var(--white-color);
+  padding: 2px 8px;
+  border-radius: 5px;
+}
+/* Table Style End */
\ No newline at end of file
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.spec.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.spec.ts
new file mode 100644
index 00000000..70f11a39
--- /dev/null
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InvitroPharmacologyDataImportComponent } from './invitro-pharmacology-data-import.component';
+
+describe('InvitroPharmacologyDataImportComponent', () => {
+  let component: InvitroPharmacologyDataImportComponent;
+  let fixture: ComponentFixture<InvitroPharmacologyDataImportComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InvitroPharmacologyDataImportComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InvitroPharmacologyDataImportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.ts b/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.ts
new file mode 100644
index 00000000..c8af0fdd
--- /dev/null
+++ b/src/app/fda/invitro-pharmacology/invitro-pharmacology-assay-data-import/invitro-pharmacology-assay-data-import.component.ts
@@ -0,0 +1,258 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { FormBuilder } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { Title } from '@angular/platform-browser';
+import { DatePipe, formatDate } from '@angular/common';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { Subscription } from 'rxjs';
+import { take, map } from 'rxjs/operators';
+import * as moment from 'moment';
+import * as XLSX from 'xlsx';
+
+/* GSRS Core Imports */
+import { AuthService } from '@gsrs-core/auth/auth.service';
+import { UtilsService } from '../../../core/utils/utils.service';
+import { LoadingService } from '@gsrs-core/loading';
+import { MainNotificationService } from '@gsrs-core/main-notification';
+import { ControlledVocabularyService } from '../../../core/controlled-vocabulary/controlled-vocabulary.service';
+import { SubstanceService } from '@gsrs-core/substance/substance.service';
+import { GeneralService } from '../../service/general.service';
+import { AppNotification, NotificationType } from '@gsrs-core/main-notification';
+import * as defiant from '@gsrs-core/../../../node_modules/defiant.js/dist/defiant.min.js';
+import { StructureImageModalComponent } from '@gsrs-core/structure';
+import { SubstanceEditImportDialogComponent } from '@gsrs-core/substance-edit-import-dialog/substance-edit-import-dialog.component';
+import { JsonDialogFdaComponent } from '../../json-dialog-fda/json-dialog-fda.component';
+import { ConfirmDialogComponent } from '../../confirm-dialog/confirm-dialog.component';
+
+/* Invitro Pharmacology Imports */
+import { InvitroPharmacologyService } from '../service/invitro-pharmacology.service'
+import { InvitroAssayInformation, ValidationMessage } from '../model/invitro-pharmacology.model';
+
+@Component({
+  selector: 'app-invitro-pharmacology-assay-data-import',
+  templateUrl: './invitro-pharmacology-assay-data-import.component.html',
+  styleUrls: ['./invitro-pharmacology-assay-data-import.component.scss']
+})
+export class InvitroPharmacologyAssayDataImportComponent implements OnInit {
+
+  private subscriptions: Array<Subscription> = [];
+
+  importDataList: Array<any> = [];
+  importedBulkAssayJson: Array<InvitroAssayInformation> = [];
+  importedAssayJson: any;
+
+  message = '';
+  submitMessage = '';
+  disabled = "true";
+  willDownload = false;
+
+  name = 'This is XLSX TO JSON CONVERTER';
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private sanitizer: DomSanitizer,
+    private dialog: MatDialog,
+    private titleService: Title,
+    private overlayContainerService: OverlayContainer,
+    private authService: AuthService,
+    private utilsService: UtilsService,
+    private loadingService: LoadingService,
+    private mainNotificationService: MainNotificationService,
+    private generalService: GeneralService,
+    private invitroPharmacologyService: InvitroPharmacologyService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(subscription => {
+      subscription.unsubscribe();
+    });
+  }
+
+  onFileChange(evt) {
+    // Get Data from Excel File
+    /*
+    let workBook = null;
+    let jsonData = null;
+    const reader = new FileReader();
+    const file = ev.target.files[0];
+    reader.onload = (event) => {
+      const data = reader.result;
+      workBook = XLSX.read(data, { type: 'binary' });
+      jsonData = workBook.SheetNames.reduce((initial, name) => {
+        const sheet = workBook.Sheets[name];
+        initial[name] = XLSX.utils.sheet_to_json(sheet);
+        return initial;
+      }, {});
+      const dataString = JSON.stringify(jsonData);
+      document.getElementById('output').innerHTML = dataString.slice(0, 300).concat("...");
+      this.setDownload(dataString);
+    }
+    reader.readAsBinaryString(file);
+    */
+
+    const target: DataTransfer = <DataTransfer>(evt.target);
+    if (target.files.length > 1) {
+      alert('Multiple files are not allowed');
+      return;
+    }
+    else {
+      // Empty the list
+      this.importDataList.length = 0;
+
+      // Assign FileReader
+      const reader: FileReader = new FileReader();
+
+      // Read the Excel file
+      reader.onload = (e: any) => {
+
+        let heading = [['FirstName', 'Last Name', 'Email']];
+
+        const bstr: string = e.target.result;
+        const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });
+
+        // Read the first Excel Spreadsheet
+        const wsname = wb.SheetNames[0];
+        const ws: XLSX.WorkSheet = wb.Sheets[wsname];
+
+        // If header is specified, the first row is considered a data row; if header is not specified,
+        // the first row is the header row and not considered data.
+        // Null values are returned when raw is true but are skipped when false.
+        this.importedAssayJson = (XLSX.utils.sheet_to_json(ws, { raw: true }));
+
+        // 23 Fields
+        this.importedAssayJson.forEach((element, index) => {
+          if (element) {
+            element["externalAssaySource"] = this.replaceUndefinedValue(element["External Assay Source"]);
+            element["externalAssayId"] = this.replaceUndefinedValue(element["External Assay ID"]);
+            element["externalAssayReferenceUrl"] = this.replaceUndefinedValue(element["External Assay Reference URL"]);
+            element["assayTitle"] = this.replaceUndefinedValue(element["Assay Title"]);
+            element["assayFormat"] = this.replaceUndefinedValue(element["Assay Format"]);
+            element["assayMode"] = this.replaceUndefinedValue(element["Assay Mode"]);
+            element["bioassayType"] = this.replaceUndefinedValue(element["Bioassay Type"]);
+            element["bioassayClass"] = this.replaceUndefinedValue(element["Bioassay Class"]);
+            element["studyType"] = this.replaceUndefinedValue(element["Study Type"]);
+            element["detectionMethod"] = this.replaceUndefinedValue(element["Detection Method"]);
+
+            element["presentationType"] = this.replaceUndefinedValue(element["Presention Type"]);
+            element["presentation"] = this.replaceUndefinedValue(element["Presentation"]);
+            element["publicDomain"] = this.replaceUndefinedValue(element["Public Domain"]);
+            element["targetName"] = this.replaceUndefinedValue(element["Assay Target Name"]);
+            element["targetNameApprovalId"] = this.replaceUndefinedValue(element["Assay Target Name Approval ID"]);
+            element["targetSpecies"] = this.replaceUndefinedValue(element["Target Species"]);
+            element["humanHomologTarget"] = this.replaceUndefinedValue(element["Human Homolog Target Name"]);
+            element["humanHomologTargetApprovalId"] = this.replaceUndefinedValue(element["Human homolog Target Name Approval ID"]);
+            element["ligandSubstrate"] = this.replaceUndefinedValue(element["Ligand/Substate"]);
+            element["ligandSubstrateApprovalId"] = this.replaceUndefinedValue(element["Ligand/Substrate Approval ID"]);
+
+            element["standardLigandSubstrateConcentration"] = this.replaceUndefinedValue(element["Standard Ligand/Substrate Concentration"]);
+            element["standardLigandSubstrateConcentrationUnits"] = this.replaceUndefinedValue(element["Standard Ligand/Substrate Concentration Units"]);
+
+            // Assay Set
+            element["assaySet"] = this.replaceUndefinedValue(element["Assay Set"]);
+
+
+            // Delete the key. 23 Fields
+            delete element["External Assay Source"];
+            delete element["External Assay ID"];
+            delete element["External Assay Reference URL"];
+            delete element["Assay Title"];
+            delete element["Assay Format"];
+            delete element["Assay Mode"];
+            delete element["Bioassay Type"];
+            delete element["Bioassay Class"];
+            delete element["Study Type"];
+            delete element["Detection Method"];
+
+            delete element["Detection Method"];
+            delete element["Presention Type"];
+            delete element["Presentation"];
+            delete element["Public Domain"];
+            delete element["Assay Target Name"];
+            delete element["Assay Target Name Approval ID"];
+            delete element["Target Species"];
+            delete element["Human Homolog Target Name"];
+            delete element["Human homolog Target Name Approval ID"]
+            delete element["Ligand/Substate"]
+
+            delete element["Ligand/Substrate Approval ID"]
+            delete element["Standard Ligand/Substrate Concentration"]
+            delete element["Standard Ligand/Substrate Concentration Units"]
+
+            delete element["Assay Set"]
+
+            // Add to list
+            this.importDataList.push(element);
+          } // element
+
+        }); // LOOP: importedAssayJson
+
+        // Un-disable the import button
+        this.disabled = "false";
+
+      } // reader.onload
+
+      reader.readAsBinaryString(target.files[0]);
+
+
+    } // else
+
+    // let datafirstrow = (XLSX.utils.sheet_to_json(ws, {skipHeader: true, origin: "A2"}));
+    // console.log(datafirstrow);
+  }
+
+  replaceUndefinedValue(value): string {
+    return (value === undefined || value == null || value.length <= 0) ? "": value;
+  }
+
+  /*
+  setDownload(data) {
+    this.willDownload = true;
+    setTimeout(() => {
+      const el = document.querySelector("#download");
+      el.setAttribute("href", `data:text/json;charset=utf-8,${encodeURIComponent(data)}`);
+      el.setAttribute("download", 'xlsxtojson.json');
+    }, 1000)
+  }
+  */
+
+  importAssayJSONIntoDatabase() {
+    // Loop through each Assay JSON Record, and save into the database
+    this.importedAssayJson.forEach((element, index) => {
+      if (element) {
+        //  console.log("index: " + index + "     " + JSON.stringify(element));
+        this.message = this.message + "index: " + index + "     " + JSON.stringify(element) + "\n\n";
+        this.invitroPharmacologyService.assay = JSON.parse(JSON.stringify(element));
+        this.invitroPharmacologyService.saveAssay().subscribe(response => {
+          this.message = "";
+          this.submitMessage = "Import Successful";
+        });
+      }
+    })
+  }
+
+  showJSON(): void {
+    let json: any = {};
+    alert(this.importedAssayJson);
+    if (this.importedAssayJson !== undefined || this.importedAssayJson != null) {
+      alert("AAAAAAAAAAAAA");
+      json = this.importedAssayJson;
+    }
+    const dialogRef = this.dialog.open(JsonDialogFdaComponent, {
+      width: '90%',
+      height: '90%',
+      data: json
+    });
+
+    // this.overlayContainer.style.zIndex = '1002';
+    const dialogSubscription = dialogRef.afterClosed().subscribe(response => {
+    });
+    this.subscriptions.push(dialogSubscription);
+  }
+
+}