some files

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "data-dic-app": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/data-dic-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/assets/images"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "src/assets/js/d3-bubble-chart.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "data-dic-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "data-dic-app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "data-dic-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/assets/images"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": ["src/assets/js/d3-bubble-chart.js"]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "data-dic-app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "data-dic-app:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "data-dic-app",
  "cli": {
    "analytics": "ee77cc3d-c61c-4616-8f1b-fcac06a51d6f"
  }
}

bubble.css

.d3-bubble-chart-div{
    height: auto;
    margin-top: 20px;
    border: 5px solid #3f84c0;
    background-color: snow;
}

.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 3px;
  }
  
  .node text {
    font: 12px sans-serif;
  }
  
  .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 2px;
  }

bubble.js

var margin = { top: 20, right: 90, bottom: 30, left: 90 };
var width = 960 - margin.left - margin.right;
var height = 600 - margin.top - margin.bottom;
var duration = 750;
var i = 0;
var svg, treemap, root;

var plusSymbol;



function generateSvg(d3) {

  // append the svg object to the body of the page
  // appends a 'group' element to 'svg'
  // moves the 'group' element to the top left margin
  treemap = d3.tree().size([height, width]);
  plusSymbol = d3.symbol().type(d3.symbolCross).size(20);
  let container = d3.select(".svgContainer");
  if (container !== undefined) {
    container.remove();
  }
  svg = d3.select(".chart_container").append("svg")
    .attr("class","svgContainer")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate("
      + margin.left + "," + margin.top + ")");
}

function createD3BubbleChart(treeData, d3) {

  // Assigns parent, children, height, depth
  root = d3.hierarchy(treeData, function (d) { return d.children; });
  root.x0 = height / 2;
  root.y0 = 0;

  // Collapse after the second level
  root.children.forEach(collapse);

  update(root);

  // Collapse the node and all it's children
  function collapse(d) {
    if (d.children) {
      d._children = d.children
      d._children.forEach(collapse)
      d.children = null
    }
  }
}

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

function update(source) {

  // Assigns the x and y position for the nodes
  treeData = treemap(root);

  // Compute the new tree layout.
  var nodes = treeData.descendants(),
    links = treeData.descendants().slice(1);

  // Normalize for fixed-depth.
  nodes.forEach(function (d) { d.y = d.depth * 180 });

  // ****************** Nodes section ***************************

  // Update the nodes...
  var node = svg.selectAll('g.node')
    .data(nodes, function (d) { return d.id || (d.id = ++i); });

  // Enter any new modes at the parent's previous position.
  var nodeEnter = node.enter().append('g')
    .attr('class', 'node')
    .attr("transform", function (d) {
      return "translate(" + source.y0 + "," + source.x0 + ")";
    })
    .on('click', click);

  // Add Circle for the nodes
  nodeEnter.append('circle')
    .attr('class', 'node')
    .attr('r', 1e-6)
    .attr("stroke", "steelblue")
    .attr("stroke-width", "3px")
    .style("fill", function (d) {
      return d._children ? "lightsteelblue" : "#fff";
    });

    nodeEnter.append('path')
    .attr('class', 'plus')
    .attr("stroke", "#fff")
    .attr("stroke-width", "2px")
    .attr('d', function(d){return d._children !== undefined || true? 'M -5 0 L 5 0 M 0 -5 L 0 5': 'M 0 0';});//Made true for UI
   

  // Add labels for the nodes
  nodeEnter.append('text')
    .attr("dy", ".35em")
    .style("font-size","12px")
    .style("font-weight","bolder")
    .attr("x", function (d) {
      return d.children || d._children ? -15 : 15;
    })
    .attr("text-anchor", function (d) {
      return d.children || d._children ? "end" : "start";
    })
    .text(function (d) { return d.data.name; });

  // UPDATE
  var nodeUpdate = nodeEnter.merge(node);

  // Transition to the proper position for the node
  nodeUpdate.transition()
    .duration(duration)
    .attr("transform", function (d) {
      return "translate(" + d.y + "," + d.x + ")";
    });

  // Update the node attributes and style
  nodeUpdate.select('circle.node')
    .attr('r', 12)
    .style("fill", function (d) {
      return d._children ? "lightsteelblue" : "#fff";
    })
    .attr('cursor', 'pointer');


  // Remove any exiting nodes
  var nodeExit = node.exit().transition()
    .duration(duration)
    .attr("transform", function (d) {
      return "translate(" + source.y + "," + source.x + ")";
    })
    .remove();

  // On exit reduce the node circles size to 0
  nodeExit.select('circle')
    .attr('r', 1e-6);

  // On exit reduce the opacity of text labels
  nodeExit.select('text')
    .style('fill-opacity', 1e-6);

  
  // ****************** links section ***************************

  // Update the links...
  var link = svg.selectAll('path.link')
    .data(links, function (d) { return d.id; });

  // Enter any new links at the parent's previous position.
  var linkEnter = link.enter().insert('path', "g")
    .attr("class", "link")
    .attr("fill", "none")
    .attr("stroke", "#ccc")
    .attr("stroke-width", "2px")
    .attr('d', function (d) {
      var o = { x: source.x0, y: source.y0 }
      return diagonal(o, o)
    });

  // UPDATE
  var linkUpdate = linkEnter.merge(link);

  // Transition back to the parent element position
  linkUpdate.transition()
    .duration(duration)
    .attr('d', function (d) { return diagonal(d, d.parent) });

  // Remove any exiting links
  var linkExit = link.exit().transition()
    .duration(duration)
    .attr('d', function (d) {
      var o = { x: source.x, y: source.y }
      return diagonal(o, o)
    })
    .remove();

  // Store the old positions for transition.
  nodes.forEach(function (d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });

  // Creates a curved (diagonal) path from parent to the child nodes
  function diagonal(s, d) {

    let path = `M ${s.y} ${s.x}
        C ${(s.y + d.y) / 2} ${s.x},
          ${(s.y + d.y) / 2} ${d.x},
          ${d.y} ${d.x}`

    return path
  }


}

bubble.ts

import { Component, OnInit } from '@angular/core';
import { AppComponent } from '../app.component';
import * as d3 from 'd3';
declare var createD3BubbleChart: any;
declare var generateSvg: any;

@Component({
  selector: 'app-d3-bubble-chart',
  templateUrl: './d3-bubble-chart.component.html',
  styleUrls: ['./d3-bubble-chart.component.css']
})


export class D3BubbleChartComponent implements OnInit {


  apiJsonArr: any = [];
  headers: any[] = [];
  constructor(private appComp: AppComponent) { }

  ngOnInit(): void {
  }



  buttonToggled(toggle: any) {
    console.log("In buttonToggled..");
    if (toggle) {

      d3.select(".chart_container").style("visibility", "visible");


      this.headers = this.appComp.headers;
      this.apiJsonArr = this.appComp.apiRecords;

      var applicationChildren = [];
      var tableChildren = [];
      var columnChildren = [];
      for (var i = 0; i < this.apiJsonArr.length; i++) {
        let obj = this.apiJsonArr[i];
        this.ifAlreadyExist(applicationChildren, obj);
      }
      var finalObject = {};
      finalObject['name'] = "Application",

      finalObject['children'] = applicationChildren;
      generateSvg(d3);
      createD3BubbleChart(finalObject, d3);
    } else {
      d3.select(".chart_container").style("visibility", "hidden");
    }
  }


  ifAlreadyExist(applicationChildren, obj) {
    var tableChildren = [];
    var columnChildren = [];
    var isExisted = false;
    var isTableExisted = false;
    for (var i = 0; i < applicationChildren.length; i++) {
      var eObj = applicationChildren[i];
      if (eObj["name"] === obj[this.headers[0].toLowerCase()]) {
        isExisted = true;
        tableChildren = eObj["children"];
        for (var j = 0; i < tableChildren.length; j++) {
          var tObje = tableChildren[j];
          if (tObje === undefined) {
            break;
          }
          if (tObje["name"] === obj[this.headers[1].toLowerCase()]) {
            columnChildren = tObje["children"];
            var desideAddColumn = true;
            for (var m = 0; m < columnChildren.length; m++) {
              var columnDetails = columnChildren[m];
              if (columnDetails.name === obj[this.headers[2].toLowerCase()]) {
                desideAddColumn = false;
              }
            }
            if (desideAddColumn) {
              var columnData = {};
              columnData['name'] = obj[this.headers[2].toLowerCase()];
              columnData['children'] = this.addVaribleDefination(obj);
              columnChildren.push(columnData);
            }
          } else {
            var isAlreadyThere = 0;
            for (var k = 0; i < tableChildren.length; k++) {
              var tempObj = tableChildren[k];
              if (tempObj != undefined && tempObj["name"] === obj[this.headers[1].toLowerCase()]) {
                isAlreadyThere = 1;
                break;
              }
              if (tableChildren.length === k)
                break;

            }
            if (isAlreadyThere === 0) {
              var tempObj = tableChildren[j];
              var newcolumnChildrenA = [];
              var newcolumnChildren = {};
              newcolumnChildren['name'] = obj[this.headers[2].toLowerCase()];
              newcolumnChildren['children'] = this.addVaribleDefination(obj);
              newcolumnChildrenA.push(newcolumnChildren);
              var newtableChildrenA = [];
              var newtableChildren = {};
              newtableChildren['name'] = obj[this.headers[1].toLowerCase()];
              newtableChildren['children'] = newcolumnChildrenA;
              tableChildren.push(newtableChildren);
            }
          }
        }
      }
    }
    if (applicationChildren.length === 0 || !isExisted) {
      this.addNewApp(applicationChildren, obj);
    }
  }

  addNewApp(applicationChildren, obj) {
    let columnChildrenA = [];
    let columnChildren = {};
    console.log("this.headers[2].toLowerCase():",this.headers[2].toLowerCase())
    columnChildren['name'] = obj[this.headers[2].toLowerCase()];
    columnChildren['children'] = this.addVaribleDefination(obj);//["d_variable"];
    columnChildrenA.push(columnChildren);
    let tableChildrenA = [];
    let tableChildren = {};
    tableChildren['name'] = obj[this.headers[1].toLowerCase()];
    tableChildren['children'] = columnChildrenA;
    tableChildrenA.push(tableChildren);
    let appChildren = {};
    appChildren['name'] = obj[this.headers[0].toLowerCase()];
    appChildren['children'] = tableChildrenA;
    applicationChildren.push(appChildren);
  }

  addVaribleDefination(obj) {
    let columnChildrenA = [];
    let columnChildren = {};
    //columnChildren['name'] =  obj["d_variable_definition"]+':d_variable_definition';
    //columnChildrenA.push(columnChildren);
    /*columnChildren = {};	
    columnChildren.name =  obj["d_derived"]+':d_derived';
    columnChildrenA.push(columnChildren);
    
    columnChildren = {};	
    columnChildren.name =  obj["d_logic"]+':d_logic';
    columnChildrenA.push(columnChildren);
    
    columnChildren = {};	
    columnChildren.name =  obj["d_Range_Value"]+':d_Range_Value';
    columnChildrenA.push(columnChildren);
    
    columnChildren = {};	
    columnChildren.name =  obj["s_sor"]+':s_sor';
    columnChildrenA.push(columnChildren);
    
    columnChildren = {};	
    columnChildren.name =  obj["d_datatype_check"]+':d_datatype_check';
    columnChildrenA.push(columnChildren);
    
    columnChildren = {};	
    columnChildren.name =  obj["d_business_rule_check"]+':d_business_rule_check';
    columnChildrenA.push(columnChildren);
    */
    return columnChildrenA
  }

}

src-app-app.component.css

.header {
    box-shadow: 0px 5px 7px 0px #252f35;
    background: #1d14af url('/assets/images/background.jpg') no-repeat fixed top;
    width: 100%;
    text-align: center;
    margin-top: -15px;
    
}

.title {
    padding-top: 10px;
    padding-left: 10px;
    font-size: 22px;
    text-align: left;
    color: #48789a;
    font-family: sans-serif;
}

.body_container {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload-file__container {
    width: 400px;
    height: 40px;
    /* border: 1px solid #353535; */
    background: #57707966;
    box-shadow: 0px 0px 9px rgba(0, 0, 0, .3);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 10px;
}
input#fileUpload {
    background: #cccccc47;
}

table.minimalistBlack {
    border: 3px solid #3f84c0;
    text-align: center;
    border-collapse: collapse
}

table.minimalistBlack td, table.minimalistBlack th {
    border: 1px solid #e3edf6;
    /* padding: 5px 4px */
}

table.minimalistBlack tbody td {
    font-size: 13px
}

table.minimalistBlack thead {
    background: #3f84c0;
    background: -moz-linear-gradient(top, #3f84c0 100%);
    background: -webkit-linear-gradient(top, #3f84c0 100%);
    background: linear-gradient(to bottom, #3f84c0 100%);
    border-bottom: 3px solid #3f84c0
}

table.minimalistBlack thead th {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-align: center
}

table.minimalistBlack tfoot {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border-top: 3px solid #3f84c0
}

table.minimalistBlack tfoot td {
    font-size: 14px
}

.grid {
    border: 1px solid rgb(10, 24, 104);
    margin-top: 2%;
    overflow-y: scroll;
    height: 20em;
    overflow-x: auto;
    width: 100%;
}

src-app-app.component.html

<div class="header">
  <h1 class="title">Quality Lineage</h1>


  <div class="body_container">
		<form method="post" class="upload-file__container">
			<!-- <i class="fa fa-toggle-on" aria-hidden="true" id="upload" onclick></i> -->
			<div>
				<input type="file" id="fileUpload" #csvReader name="Upload CSV" (change)="uploadListener($event)" accept=".csv"  />
				<i class="fa fa-cloud-upload" aria-hidden="true" id="upload"></i>
				<!--<input type="button"  value="Upload"  />-->
			</div>
		</form>
  </div>
  
</div>
<div style="display:flex;margin-top:2%;border:1px solid #f2f2f2;">
   
  <div style="margin-left: 5px;margin-top: 13px;"> <input [(ngModel)]="application" placeholder="Application" type="text"/></div>
  <div style="margin-left: 12%;margin-top: 13px;"> <input [(ngModel)]="table" placeholder="Table" type="text"/></div>
  <div style="margin-left: 12%;margin-top: 13px;"> <input [(ngModel)]="variable" placeholder="Variable" type="text"/></div>
  <div style="margin-left: 12%;margin-top: 13px;"> <input [(ngModel)]="variableText" (change)="onSearch($event)" placeholder="Variable text search" type="text"/></div>
  <div style="width:180px;height:30px;margin-bottom:6px;margin-left: 4%;margin-top: 7px;display:flex;border: 1px solid #f9f9f9;" > <span style="padding-top:7px;padding-right:5px;">View Chart</span><toggle-button (changed)="$event"></toggle-button></div>
</div>
<div class="grid" *ngIf="records.length > 0 && variableText.length <= 0">
<table  class="minimalistBlack" >
  <thead>
    <tr>
      <th>Application </th>
      <th>Table </th>
      <th>Variable </th>
      <th>Variable Definition </th>
      <th>Derived </th>
      <th>Logic </th>
      <th>Key </th>
      <th>Range Value </th>
      <th>Business Rule Check </th>
    </tr>
  </thead>
  <tbody>
    
      <tr *ngFor="let record of records;let i = index;">
        <ng-container *ngIf="record.application.toLowerCase().includes(application.toLowerCase()) && record.table.toLowerCase().includes(table.toLowerCase()) && record.variable.toLowerCase().includes(variable.toLowerCase())">
          <td> <span>{{record.application}}</span> </td>
          <td> <span>{{record.table}}</span> </td>
          <td> <span>{{record.variable}}</span> </td>
          <td> <span>{{record.variableDefinition}}</span> </td>
          <td> <span>{{record.derived}}</span> </td>
          <td> <span>{{record.logic}}</span> </td>
          <td> <span>{{record.key}}</span> </td>
          <td> <span>{{record.rangeValue}}</span> </td>
          <td> <span>{{record.businessRuleCheck}}</span> </td>
        </ng-container>
      </tr>
    
  </tbody>
</table>
</div>

<div class="grid" *ngIf="apiRecords.length > 0 && (records.length <= 0 || variableText.length > 0)">
  <table  class="minimalistBlack" >
    <thead>
      <tr>
        <th>Application </th>
        <th>Table </th>
        <th>Variable </th>
        <th>Variable Definition </th>
        <th>Derived </th>
        <th>Logic </th>
        <th>Key </th>
        <th>Range Value </th>
        <th>Business Rule Check </th>
      </tr>
    </thead>
    <tbody>
      
        <tr *ngFor="let record of apiRecords;let i = index;">
          <ng-container *ngIf="record.variable.toLowerCase().indexOf(variableText) !== -1">
            <td> <span>{{record.application}}</span> </td>
            <td> <span>{{record.table}}</span> </td>
            <td> <span>{{record.variable}}</span> </td>
            <td> <span>{{record.variableDefinition}}</span> </td>
            <td> <span>{{record.derived}}</span> </td>
            <td> <span>{{record.logic}}</span> </td>
            <td> <span>{{record.key}}</span> </td>
            <td> <span>{{record.rangeValue}}</span> </td>
            <td> <span>{{record.businessRuleCheck}}</span> </td>
          </ng-container>
        </tr>
      
    </tbody>
  </table>
  </div>
  <app-d3-bubble-chart></app-d3-bubble-chart>

src-app-app.component.ts

import { Component, ViewChild } from '@angular/core';
import { CSVRecord } from './CSVRecord';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Analystics-dashboard1';

  public application:any='';
  public variable:any='';
  public table:any='';
  public variableText:any='';
  public records: any[] = [];
  public apiRecords: any[] = [];
  public headers: any[] = ["Application", "Table", "Variable"];

  @ViewChild('csvReader') csvReader: any;
  uploadListener($event: any): void {
    let text = [];
    this.variableText = '';
    let files = $event.srcElement.files;
    if (this.isValidCSVFile(files[0])) {
      let input = $event.target;
      let reader = new FileReader();
      reader.readAsText(input.files[0]);
      reader.onload = () => {
        let csvData = reader.result;
        let csvRecordsArray = (<string>csvData).split(/\r\n|\n/);

        let headersRow = this.getHeaderArray(csvRecordsArray);
        this.records = this.getDataRecordsArrayFromCSVFile(csvRecordsArray, headersRow.length);
        console.log("this.records",this.records)

      };
      reader.onerror = function () {
        console.log('error is occured while reading file!');
      };
    } else {
      alert("Please import valid .csv file.");
      this.fileReset();
    }
  }
  getApiDataRecordsArray(apiJson: any){
    let apiArr = [];
    for (let i = 0; i < apiJson.length; i++) {
        let csvRecord: CSVRecord = new CSVRecord();
        if(apiJson[i].application !== undefined){
          csvRecord["application"] = apiJson[i].application;
        }
        csvRecord.table = apiJson[i].table;
        csvRecord.variable = apiJson[i].variable;
        csvRecord.variableDefinition = apiJson[i].variableDefinition;
        csvRecord.derived = apiJson[i].derived;
        csvRecord.logic = apiJson[i].logic;
        csvRecord.key = apiJson[i].key;
        csvRecord.rangeValue = apiJson[i].rangeValue;
        csvRecord.businessRuleCheck = apiJson[i].businessRuleCheck;
         apiArr.push(csvRecord);
    }
    return apiArr;
  }
  getDataRecordsArrayFromCSVFile(csvRecordsArray: any, headerLength: any) {
    let csvArr = [];
    console.log("csvRecordsArray",csvRecordsArray)
    for (let i = 3; i < csvRecordsArray.length; i++) {
      let curruntRecord = (<string>csvRecordsArray[i]).split(',');
      if (curruntRecord.length == headerLength) {
        let csvRecord: CSVRecord = new CSVRecord();
        csvRecord.application = curruntRecord[1].trim();
        csvRecord.table = curruntRecord[2].trim();
        csvRecord.variable = curruntRecord[3].trim();
        csvRecord.variableDefinition = curruntRecord[4].trim();
        csvRecord.derived = curruntRecord[5].trim();
        csvRecord.logic = curruntRecord[6].trim();
        csvRecord.key = curruntRecord[7].trim();
        csvRecord.rangeValue = curruntRecord[8].trim();
        csvRecord.businessRuleCheck = curruntRecord[9].trim();
        csvArr.push(csvRecord);
      }
    }
    return csvArr;
  }
  isValidCSVFile(file: any) {
    return file.name.endsWith(".csv");
  }
  getHeaderArray(csvRecordsArr: any) {
    let headers = (<string>csvRecordsArr[0]).split(',');
    let headerArray = [];
    for (let j = 0; j < headers.length; j++) {
      headerArray.push(headers[j]);
    }
    return headerArray;
  }
  fileReset() {
    this.csvReader.nativeElement.value = "";
    this.records = [];
  }
  onSearch(event: any){
    let searchTxt = event.target.value;
    console.log(searchTxt);

    let apiJson = [
      {
        "application": "LaaS-UI",
        "table": "Participants",
        "variable": "ParticipantId",
        "variable definition derived": "Unique ID",
        "logic": "N",
        "key": "Auto increment",
        "range value": "pk",
        "busines rul check": "0 to 4294967295"
      },
      {
        "application": "LaaS-UI",
        "table": "Participants",
        "variable": "FirstName",
        "variable definition derived": "First name of customer",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI",
        "table": "Participants-1",
        "variable": "LastName",
        "variable definition derived": "Last name of customer",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI(Credit card flow)",
        "table": "Participants",
        "variable": "MI",
        "variable definition derived": "Middle name of customer",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI(Credit card flow)",
        "table": "Participants",
        "variable": "Employer",
        "variable definition derived": "Employer of customer",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI(Credit card flow)",
        "table": "Particpants",
        "variable": "BalanceTransfer",
        "variable definition derived": "If customer wants to add balance transfer",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI(Credit card flow)",
        "table": "Particpants",
        "variable": "AddAuthorizedUser",
        "variable definition derived": "If customer wants to add uthorized user to their account",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI",
        "table": "Particpants",
        "variable": "IsInSchool",
        "variable definition derived": "Check if customer is in school",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI",
        "table": "Particpants",
        "variable": "RelationshipId",
        "variable definition derived": "customer relation with cosigner",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI",
        "table": "Applications",
        "variable": "SoftPullConsent",
        "variable definition derived": "Consent of customer for prequalify",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI(Credit card flow)",
        "table": "ApplicationLoans",
        "variable": "Address",
        "variable definition derived": "Complte address of customer",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI(Credit card flow)",
        "table": "ApplicationLoans",
        "variable": "IsAddressManual",
        "variable definition derived": "check if customer entered address manually",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI(Credit card flow)",
        "table": "ApplicationLoans",
        "variable": "StreetAddress",
        "variable definition derived": "street address of customer",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI(Credit card flow)",
        "table": "ApplicationLoans",
        "variable": "Unit",
        "variable definition derived": "Unit number of customer",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI(Credit card flow)",
        "table": "ApplicationLoans",
        "variable": "City",
        "variable definition derived": "City of customer",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI(Credit card flow)",
        "table": "ApplicationLoans",
        "variable": "State",
        "variable definition derived": "State of customer",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI(Credit card flow)",
        "table": "ApplicationLoans",
        "variable": "ZipCode",
        "variable definition derived": "Zip code of customer",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI(Credit card flow)",
        "table": "ApplicationLoans",
        "variable": "Country",
        "variable definition derived": "Country of customer",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI",
        "table": "ApplicationLoans",
        "variable": "LoanTypeDeferalPrivate",
        "variable definition derived": "Loan type provided by customer (private/federal/unsure)",
        "logic": "N",
        "key": "User input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS-UI",
        "table": "Documents",
        "variable": "DocumentId",
        "variable definition derived": "file inputted by user",
        "logic": "N",
        "key": "User Input",
        "range value": "pk",
        "busines rul check": "0 to 4294967295"
      },
      {
        "application": "LaaS-UI",
        "table": "Documents",
        "variable": "URL",
        "variable definition derived": "Document stored location",
        "logic": "N",
        "key": "System input",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS_API",
        "table": "Participants",
        "variable": "CreatedOn",
        "variable definition derived": "current date and Time",
        "logic": "Y",
        "key": "DB defalut Date&Time value",
        "range value": "",
        "busines rul check": ""
      },
      {
        "application": "LaaS_API",
        "table": "Participants",
        "variable": "UserId",
        "variable definition derived": "UserId based from current  session",
        "logic": "Y",
        "key": "(req.session && req.session.passport && req.session.passport.user) ? req.session.passport.user.UserId : req.user.userid",
        "range value": "fk",
        "busines rul check": "0"
      },
      {
        "application": "LaaS_API",
        "table": "Participants",
        "variable": "DecisionId",
        "variable definition derived": "DecisionId",
        "logic": "N",
        "key": "Req.Body",
        "range value": "fk",
        "busines rul check": "1"
      },
      {
        "application": "LaaS_API",
        "table": "Participants",
        "variable": "CitizenshipId",
        "variable definition derived": "CitizenshipId",
        "logic": "N",
        "key": "Req.Body",
        "range value": "fk",
        "busines rul check": "0"
      }
    ];

    this.apiRecords = this.getApiDataRecordsArray(apiJson);
    console.log("apiRecords",this.apiRecords);
  }

}

src-styles.css

/* You can add global styles to this file, and also import other style files */
body{
    background-color: #ccdade;
    margin: 0;
}