object-detail.component.html

<div class="no-table-selected" *ngIf="!currentObject">
  <div class="title_container">
    <h3 class="title">OBJECT VIEWER</h3>
    <button id="middle-column-toggle-button" (click)="middleColumnToggle()">
      <mat-icon [ngClass]="[isMiddleColumnCollapse ? 'display' : 'hidden']">first_page</mat-icon>
      <mat-icon [ngClass]="[isMiddleColumnCollapse ? 'hidden' : 'display']">last_page</mat-icon>
    </button>
  </div>
  <mat-divider></mat-divider>

  <div class="select-table-message">
    <div class="image">
      <svg width="40" height="40" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M2.90723 0C1.80266 0 0.907227 0.89543 0.907227 2V16C0.907227 17.1046 1.80266 18 2.90723 18H16.9072C18.0118 18 18.9072 17.1046 18.9072 16V2C18.9072 0.895431 18.0118 0 16.9072 0H2.90723ZM5.90723 3H3.90723V5H5.90723V3ZM6.90723 3H8.90723V5H6.90723V3ZM5.90723 8H3.90723V10H5.90723V8ZM6.90723 8H8.90723V10H6.90723V8ZM5.90723 13H3.90723V15H5.90723V13ZM6.90723 13H8.90723V15H6.90723V13ZM15.9072 3H9.90723V5H15.9072V3ZM9.90723 8H15.9072V10H9.90723V8ZM15.9072 13H9.90723V15H15.9072V13Z"
          fill="#3367D6" />
      </svg>
    </div>
    <div class="inner-text">
      <span *ngIf="currentDatabase == 'spanner'">
        To view and modify an object details, click on the object name on the Spanner draft panel.
      </span>
      <span *ngIf="currentDatabase == 'source'">
        To view an object details, click on the object name on the {{ srcDbName }} panel.
      </span>
    </div>
  </div>
</div>

<div class="table" *ngIf="currentObject">
  <div class="title_container">
    <span>
      <h3 class="title">
        <mat-icon class="icon material-icons-outlined" *ngIf="currentObject!.type === ObjectExplorerNodeType.Table">
          table_chart</mat-icon>
        <svg *ngIf="currentObject!.type === ObjectExplorerNodeType.Index || currentObject!.type === ObjectExplorerNodeType.Sequence" class="icon" width="18" height="20"
          viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M11.005 14C11.555 14 12 13.554 12 13.002V5L10 3V12H2V14H11.005ZM0 0.996C0 0.446 0.438 0 1.003 0H7L9 2.004V10.004C9 10.554 8.554 11 8.002 11H0.998C0.867035 11.0003 0.737304 10.9747 0.616233 10.9248C0.495162 10.8748 0.385128 10.8015 0.292428 10.709C0.199729 10.6165 0.126186 10.5066 0.0760069 10.3856C0.0258282 10.2646 -2.64036e-07 10.135 0 10.004V0.996ZM6 1L5 5.5H2L6 1ZM3 10L4 5.5H7L3 10Z"
            fill="black" fill-opacity="0.54" />
        </svg>
        <span class="mr10">{{ ' ' + currentObject!.name + ' ' }}</span>
        <span *ngIf="currentObject!.parent != ''">( TABLE: {{ currentObject!.parent | uppercase }} )
        </span>

        <!-- If come from source tree then hide edit button then this centeral panel should be view only  -->
        <button mat-button color="primary" class="icon drop" (click)="dropIndex()" *ngIf="
            currentObject!.isSpannerNode &&
            !currentObject!.isDeleted &&
            currentObject!.type === 'indexName'
          ">
          <mat-icon>delete</mat-icon>
          <span>SKIP INDEX</span>
        </button>
        <button mat-button color="primary" class="icon drop" (click)="dropSequence()" *ngIf="
            currentObject!.isSpannerNode &&
            !currentObject!.isDeleted &&
            currentObject!.type === 'sequenceName'
          ">
          <mat-icon>delete</mat-icon>
          <span>DELETE SEQUENCE</span>
        </button>
        <button mat-button color="primary" class="icon drop" (click)="restoreIndex()" *ngIf="
            currentObject!.isSpannerNode &&
            currentObject!.isDeleted &&
            currentObject!.type == ObjectExplorerNodeType.Index
          ">
          <mat-icon>undo</mat-icon>
          <span> RESTORE INDEX</span>
        </button>
        <button mat-button color="primary" class="icon drop" (click)="dropTable()" *ngIf="
            currentObject!.isSpannerNode &&
            (currentObject!.type !== 'indexName' && currentObject!.type !== 'sequenceName')&&
            !currentObject!.isDeleted
          ">
          <mat-icon>delete</mat-icon>
          <span>SKIP TABLE</span>
        </button>
        <button mat-button color="primary" class="icon drop" (click)="restoreSpannerTable()" *ngIf="
            currentObject!.isSpannerNode &&
            currentObject!.isDeleted &&
            currentObject!.type == ObjectExplorerNodeType.Table
          ">
          <mat-icon>undo</mat-icon>
          <span> RESTORE TABLE</span>
        </button>
      </h3>
      <div class="interleaved-title" *ngIf="interleaveParentName && currentObject.isSpannerNode">
        Interleaved:
        <div class="interleave-parent-name">
          {{ interleaveParentName }}
        </div>
      </div>
    </span>
    <button id="middle-column-toggle-button" (click)="middleColumnToggle()">
      <mat-icon [ngClass]="[isMiddleColumnCollapse ? 'display' : 'hidden']">first_page</mat-icon>
      <mat-icon [ngClass]="[isMiddleColumnCollapse ? 'hidden' : 'display']">last_page</mat-icon>
    </button>
  </div>

  <mat-tab-group [ngClass]="{ 'height-on-edit': isEditMode || isPkEditMode || isFkEditMode }"
    *ngIf="currentObject!.type === 'tableName'" (selectedTabChange)="tabChanged($event)">
    <mat-tab>
      <ng-template mat-tab-label>
        <span>COLUMNS </span>
      </ng-template>
      <div class="column-tab-container">
        <div class="column-table-container">
          <table mat-table [dataSource]="srcDataSource">
            <ng-container matColumnDef="srcDatabase">
              <th mat-header-cell class="db_name" *matHeaderCellDef colspan=srcColspan>{{ srcDbName }}</th>
            </ng-container>

            <ng-container matColumnDef="srcOrder">
              <th class="table_header" mat-header-cell *matHeaderCellDef>S No.</th>
              <td mat-cell *matCellDef="let element">
                {{ element.get('srcOrder').value }}
              </td>
            </ng-container>

            <ng-container matColumnDef="srcColName">
              <th class="table_header" mat-header-cell *matHeaderCellDef>Name</th>
              <td mat-cell *matCellDef="let element">
                {{ element.get('srcColName').value }}
              </td>
            </ng-container>

            <ng-container matColumnDef="srcDataType">
              <th mat-header-cell class="table_header" *matHeaderCellDef>Type</th>
              <td mat-cell *matCellDef="let element">
                {{ element.get('srcDataType').value }}
              </td>
            </ng-container>

            <ng-container matColumnDef="srcColMaxLength">
              <th mat-header-cell class="table_header" *matHeaderCellDef>Max Length</th>
              <td mat-cell *matCellDef="let element">
                {{ element.get('srcColMaxLength').value }}
              </td>
            </ng-container>

            <ng-container matColumnDef="srcAutoGen" *ngIf="mySqlSource">
              <th mat-header-cell class="table_header" *matHeaderCellDef>Auto-Generated</th>
              <td mat-cell *matCellDef="let element">
                {{ element.get('srcAutoGen').value.GenerationType !== '' ? element.get('srcAutoGen').value.GenerationType : 'None' }}
              </td>
            </ng-container>

            <ng-container matColumnDef="srcIsPk">
              <th class="table_header" mat-header-cell *matHeaderCellDef>Pk</th>
              <td mat-cell *matCellDef="let element">
                <div *ngIf="element.get('srcIsPk').value">
                  <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M4 8C5.86384 8 7.42994 6.72523 7.87398 5H10V7H13V5H14V3H7.87398C7.42994 1.27477 5.86384 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM6 4C6 5.10457 5.10457 6 4 6C2.89543 6 2 5.10457 2 4C2 2.89543 2.89543 2 4 2C5.10457 2 6 2.89543 6 4Z"
                      fill="black" />
                  </svg>
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="srcIsNotNull">
              <th mat-header-cell class="table_header" *matHeaderCellDef>Nullable</th>
              <td mat-cell *matCellDef="let element">
                {{ element.get('srcIsNotNull').value ? 'Not Null' : '' }}
              </td>
            </ng-container>

            <ng-container matColumnDef="srcDefaultValue" *ngIf="mySqlSource">
              <th mat-header-cell class="table_header" *matHeaderCellDef>Default Value</th>
              <td mat-cell *matCellDef="let element">
                <div
                  class="trimmed-text"
                  matTooltip="{{ element.get('srcDefaultValue').value }}"
                  matTooltipPosition="above">
                  {{ element.get('srcDefaultValue').value }}
                </div>
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="['srcDatabase']"></tr>
            <tr mat-header-row *matHeaderRowDef="srcDisplayedColumns"></tr>
            <tr mat-row [ngClass]="{ 'scr-column-data-edit-mode': isEditMode }"
              *matRowDef="let row; columns: srcDisplayedColumns"></tr>
          </table>

          <table mat-table [dataSource]="spDataSource">
            <ng-container matColumnDef="spDatabase">
              <th mat-header-cell *matHeaderCellDef class="db_name" colspan="7">
                <div class="spanner_edit-button">
                  <span>Spanner</span>
                  <div *ngIf="!isEditMode && !currentObject.isDeleted">
                    <button mat-stroked-button color="primary" (click)="toggleEdit()"
                      *ngIf="currentObject!.isSpannerNode">
                      <mat-icon class="edit-icon">edit</mat-icon>
                      EDIT
                    </button>
                  </div>
                  <div *ngIf="!isEditMode && !currentObject.isDeleted">
                    <button mat-stroked-button color="primary" (click)="addNewColumn()"
                      *ngIf="currentObject!.isSpannerNode">
                      <mat-icon class="edit-icon">edit</mat-icon>
                      ADD COLUMN
                    </button>
                  </div>
                  <div *ngIf="!isEditMode && !currentObject.isDeleted && mySqlSource">
                    <button mat-stroked-button color="primary" (click)="addNewSequence()"
                      *ngIf="currentObject!.isSpannerNode">
                      <mat-icon class="edit-icon">edit</mat-icon>
                      ADD SEQUENCE
                    </button>
                  </div>
                </div>
              </th>
            </ng-container>

            <ng-container matColumnDef="spColName">
              <th mat-header-cell class="table_header" *matHeaderCellDef>Name</th>
              <td mat-cell *matCellDef="let element">
                <div *ngIf="isEditMode && element.get('spDataType').value !== '' && element.get('srcId').value !== ''">
                  <input
                    matInput
                    class="name_input"
                    type="text"
                    [formControl]="element.get('spColName')"
                    matTooltip="No special characters allowed except underscore."
                    [matTooltipDisabled]="!element.get('spColName')?.hasError('pattern')" />
                </div>
                <p *ngIf="!isEditMode || element.get('srcId').value === ''">{{ element.get('spColName').value }}</p>
              </td>
            </ng-container>

            <ng-container matColumnDef="spDataType">
              <th mat-header-cell class="table_header" *matHeaderCellDef>Type</th>
              <td mat-cell *matCellDef="let element; let i = index">
                <div class="sp-datatype-data-cells">
                  <span *ngIf="isSpTableSuggesstionDisplay[i] && element.get('spDataType').value !== ''"
                    class="material-icons summary-type warning sp-datatype-suggestion-icon"
                    [matTooltip]="spTableSuggestion[i]" matTooltipPosition="above">warning</span>

                  <mat-form-field appearance="outline" class="w-100"
                    *ngIf="isEditMode && element.get('spDataType').value !== '' && element.get('srcId').value !== ''">
                    <mat-select #matSelectspDataType [formControl]="element.get('spDataType')"
                      (selectionChange)="spTableEditSuggestionHandler(i, matSelectspDataType.value)">
                      <mat-option *ngFor="let t of typeMap[element.get('srcDataType').value]" [value]="t.DisplayT">
                        {{ t.DisplayT }}
                      </mat-option>
                      <mat-option *ngIf="element.get('srcDataType').value == '' && !isPostgreSQLDialect" value="STRING">
                        STRING
                      </mat-option>
                      <mat-option *ngIf="element.get('srcDataType').value == '' && isPostgreSQLDialect" value="VARCHAR">
                        VARCHAR
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                  <p *ngIf="!isEditMode || element.get('srcId').value === ''">{{ element.get('spDataType').value }}</p>
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="spAutoGen" *ngIf="mySqlSource">
              <th mat-header-cell class="table_header" *matHeaderCellDef>Auto-Generated</th>
              <td mat-cell *matCellDef="let element; let i = index">
                <div class="sp-autogen-data-cells">
                  <ng-container *ngIf="isEditMode && element.get('srcId').value !== ''">
                    <mat-form-field appearance="outline" class="w-100">
                      <mat-select #matSelectsAutoGen [formControl]="element.get('spAutoGen')" [compareWith]="compareAutoGen">
                        <ng-container *ngFor="let autoGen of autoGenMap[element.get('spDataType').value]">
                          <mat-option *ngIf="autoGen.GenerationType === ''" [value]="autoGen">
                            {{ autoGen.Name !== '' ? autoGen.Name : 'None' }}
                          </mat-option>
                        </ng-container>
                        <ng-container *ngIf="element.get('spDataType').value as spDataType">
                          <ng-container *ngFor="let typeGroup of (processedAutoGenMap[spDataType] | keyvalue)">
                            <mat-optgroup *ngIf="typeGroup.key !== ''" [label]="typeGroup.key">
                              <mat-option *ngFor="let autoGen of typeGroup.value" [value]="autoGen">
                                {{ autoGen.Name }}
                              </mat-option>
                            </mat-optgroup>
                          </ng-container>
                        </ng-container>
                      </mat-select>
                    </mat-form-field>
                  </ng-container>
                  <ng-container *ngIf="!isEditMode">
                    <p>{{ element.get('spAutoGen').value.Name !== '' ? element.get('spAutoGen').value.Name : 'None' }}</p>
                  </ng-container>
                </div>
              </td>
            </ng-container>
            <ng-container matColumnDef="spColMaxLength">
              <th mat-header-cell class="table_header" *matHeaderCellDef>Max Length</th>
              <td mat-cell *matCellDef="let element">
                <div *ngIf ="dataTypesWithColLen.indexOf(element.get('spDataType').value)>-1">
                <div *ngIf="isEditMode && element.get('srcDataType').value != '' && element.get('spId').value !== shardIdCol">
                  <input
                    matInput
                    class="name_input"
                    type="text"
                    [formControl]="element.get('spColMaxLength')"
                    matTooltip="Specify the length in numeric or use MAX"
                  />
                </div>
                <p *ngIf="!isEditMode || element.get('spId').value === shardIdCol">
                  {{ element.get('spColMaxLength').value }}
                </p>
              </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="spIsPk">
              <th class="table_header" mat-header-cell *matHeaderCellDef>Pk</th>
              <td mat-cell *matCellDef="let element">
                <div *ngIf="element.get('spIsPk').value">
                  <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M4 8C5.86384 8 7.42994 6.72523 7.87398 5H10V7H13V5H14V3H7.87398C7.42994 1.27477 5.86384 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM6 4C6 5.10457 5.10457 6 4 6C2.89543 6 2 5.10457 2 4C2 2.89543 2.89543 2 4 2C5.10457 2 6 2.89543 6 4Z"
                      fill="black" />
                  </svg>
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="spIsNotNull">
              <th mat-header-cell class="table_header" *matHeaderCellDef>
                <span *ngIf="isEditMode">Not Null</span><span *ngIf="!isEditMode">Nullable</span>
              </th>
              <td mat-cell *matCellDef="let element">
                <div class="notNullContent">
                  <div *ngIf="isEditMode && element.get('spDataType').value !== '' && element.get('spId').value !== shardIdCol">
                    <mat-checkbox
                      color="primary"
                      [formControl]="element.get('spIsNotNull')"
                    ></mat-checkbox>
                  </div>
                  <p *ngIf="!isEditMode || element.get('spId').value === shardIdCol">
                    {{ element.get('spIsNotNull').value ? 'Not Null' : '' }}
                  </p>
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="dropButton">
              <th mat-header-cell class="table_header" *matHeaderCellDef></th>
              <td mat-cell *matCellDef="let element" [ngClass]="{ 'drop-button-left-border': isEditMode }">
                <div class="actions" *ngIf="
                    isEditMode &&
                    currentObject!.isSpannerNode &&
                    !(element.get('spDataType').value === '') &&
                    element.get('spId').value !== shardIdCol
                  "
                >
                  <mat-icon [matMenuTriggerFor]="menu">more_vert</mat-icon>
                  <mat-menu #menu="matMenu" xPosition="before">
                    <button mat-menu-item (click)="dropColumn(element)">
                      <span>Drop Column</span>
                    </button>
                  </mat-menu>
                </div>
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="['spDatabase']"></tr>
            <tr mat-header-row *matHeaderRowDef="spDisplayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: spDisplayedColumns"></tr>
          </table>
        </div>

        <div [formGroup]="addColumnForm" *ngIf="isEditMode && droppedSourceColumns.length != 0"
          class="add-column">
          <mat-form-field appearance="outline" class="column-list">
            <mat-label>Column Name</mat-label>
            <mat-select matSelect class="input-field" (selectionChange)="setColumn($event.value)"
              formControlName="columnName" required="true">
              <mat-option *ngFor="let column of droppedSourceColumns" [value]="column">{{
                column
                }}</mat-option>
            </mat-select>
          </mat-form-field>

          <button mat-button color="primary" class="add-column-btn" type="button" (click)="restoreColumn()">
            <mat-icon>add</mat-icon>
            RESTORE COLUMN
          </button>
        </div>
      </div>
    </mat-tab>

    <mat-tab>
      <ng-template mat-tab-label>
        <span>PRIMARY KEY </span>
      </ng-template>
      <div class="pk-tab-container">
        <table mat-table [dataSource]="pkDataSource">
          <ng-container matColumnDef="srcDatabase">
            <th mat-header-cell class="db_name" *matHeaderCellDef colspan="6">{{ srcDbName }}</th>
          </ng-container>

          <ng-container matColumnDef="spDatabase">
            <th mat-header-cell *matHeaderCellDef class="db_name" colspan=spColspan>
              <div class="spanner_edit-button">
                <span>Spanner</span>
                <div *ngIf="
                    !isPkEditMode &&
                    pkDataSource.length > 0 &&
                    currentObject!.isSpannerNode &&
                    !currentObject.isDeleted
                  ">
                  <button mat-stroked-button color="primary" (click)="togglePkEdit()">
                    <mat-icon class="edit-icon">edit</mat-icon>
                    EDIT
                  </button>
                </div>
              </div>
            </th>
          </ng-container>

          <ng-container matColumnDef="srcOrder">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Order</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('srcOrder').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="srcColName">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Name</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('srcColName').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="srcDataType">
            <th mat-header-cell class="table_header" *matHeaderCellDef>Type</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('srcDataType').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="srcIsPk">
            <th class="table_header" mat-header-cell *matHeaderCellDef>PK</th>
            <td mat-cell *matCellDef="let element">
              <div *ngIf="element.get('srcIsPk').value">
                <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M4 8C5.86384 8 7.42994 6.72523 7.87398 5H10V7H13V5H14V3H7.87398C7.42994 1.27477 5.86384 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM6 4C6 5.10457 5.10457 6 4 6C2.89543 6 2 5.10457 2 4C2 2.89543 2.89543 2 4 2C5.10457 2 6 2.89543 6 4Z"
                    fill="black" />
                </svg>
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="srcIsNotNull">
            <th mat-header-cell class="table_header" *matHeaderCellDef>Nullable</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('srcIsNotNull').value ? 'Not Null' : '' }}
            </td>
          </ng-container>

          <ng-container matColumnDef="srcAutoGen" *ngIf="mySqlSource">
            <th mat-header-cell class="table_header" *matHeaderCellDef>Auto-Generated</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('srcAutoGen').value.GenerationType !== '' ? element.get('srcAutoGen').value.GenerationType : 'None' }}
            </td>
          </ng-container>

          <ng-container matColumnDef="spOrder">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Order</th>
            <td mat-cell *matCellDef="let element">
              <div *ngIf="isPkEditMode && element.get('spColName').value !== ''">
                <input matInput class="order_input" type="number" [formControl]="element.get('spOrder')"
                  matTooltip="Must have a value greater than 0."
                  [matTooltipDisabled]="!element.get('spOrder')?.hasError('pattern')" />
              </div>
              <p *ngIf="!isPkEditMode">{{ element.get('spOrder').value }}</p>
            </td>
          </ng-container>

          <ng-container matColumnDef="spColName">
            <th mat-header-cell class="table_header" *matHeaderCellDef>Name</th>
            <td mat-cell *matCellDef="let element">
              <p>{{ element.get('spColName').value }}</p>
            </td>
          </ng-container>

          <ng-container matColumnDef="spDataType">
            <th mat-header-cell class="table_header" *matHeaderCellDef>Type</th>
            <td mat-cell *matCellDef="let element; let i = index">
              <div class="sp-datatype-data-cells">
                <span *ngIf="isSpTableSuggesstionDisplay[i] && element.get('spColName').value !== ''"
                  class="material-icons summary-type warning sp-datatype-suggestion-icon"
                  [matTooltip]="spTableSuggestion[i]" matTooltipPosition="above">warning</span>
                <p>{{ element.get('spDataType').value }}</p>
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="spAutoGen" *ngIf="mySqlSource">
            <th mat-header-cell class="table_header" *matHeaderCellDef>Auto-Generated</th>
            <td mat-cell *matCellDef="let element">
              <p>{{ element.get('spAutoGen').value.Name !== '' ? element.get('spAutoGen').value.Name : 'None' }}</p>
            </td>
          </ng-container>

          <ng-container matColumnDef="spIsPk">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Pk</th>
            <td mat-cell *matCellDef="let element">
              <div *ngIf="element.get('spIsPk').value">
                <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M4 8C5.86384 8 7.42994 6.72523 7.87398 5H10V7H13V5H14V3H7.87398C7.42994 1.27477 5.86384 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM6 4C6 5.10457 5.10457 6 4 6C2.89543 6 2 5.10457 2 4C2 2.89543 2.89543 2 4 2C5.10457 2 6 2.89543 6 4Z"
                    fill="black" />
                </svg>
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="spIsNotNull">
            <th mat-header-cell class="table_header" *matHeaderCellDef>Nullable</th>
            <td mat-cell *matCellDef="let element">
              <div class="notNullContent">
                <p>
                  {{ element.get('spIsNotNull').value ? 'Not Null' : '' }}
                </p>
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="dropButton">
            <th mat-header-cell class="table_header" *matHeaderCellDef></th>
            <td mat-cell *matCellDef="let element" [ngClass]="{ 'drop-button-left-border': isPkEditMode }">
              <div class="actions" *ngIf="
                  isPkEditMode &&
                  currentObject!.isSpannerNode &&
                  !(element.get('spColName').value === '')
                ">
                <mat-icon [matMenuTriggerFor]="menu">more_vert</mat-icon>
                <mat-menu #menu="matMenu" xPosition="before">
                  <button [disabled]="!isPkEditMode" mat-menu-item (click)="dropPk(element)">
                    <span>Remove primary key</span>
                  </button>
                </mat-menu>
              </div>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="['srcDatabase', 'spDatabase']"></tr>
          <tr mat-header-row *matHeaderRowDef="displayedPkColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedPkColumns"></tr>
        </table>

        <div [formGroup]="addPkColumnForm" *ngIf="isPkEditMode" class="add-pk-column">
          <mat-form-field appearance="outline" class="column-list">
            <mat-label>Column Name</mat-label>
            <mat-select matSelect class="input-field" (selectionChange)="setPkColumn($event.value)"
              formControlName="columnName" required="true">
              <mat-option *ngFor="let column of pkColumnNames" [value]="column">{{
                column
                }}</mat-option>
            </mat-select>
          </mat-form-field>

          <button mat-button color="primary" class="add-column-btn" type="button" (click)="addPkColumn()">
            <mat-icon>add</mat-icon>
            ADD COLUMN
          </button>
        </div>
      </div>
    </mat-tab>

    <mat-tab>
      <ng-template mat-tab-label>
        <span>FOREIGN KEY</span>
      </ng-template>
      <div class="fk-tab-container">
        <table mat-table [dataSource]="fkDataSource">
          <ng-container matColumnDef="srcDatabase">
            <th mat-header-cell class="db_name" *matHeaderCellDef [attr.colspan]="foreignKeyActionsSupported ? 6 : 4">{{ srcDbName }}</th>
          </ng-container>

          <ng-container matColumnDef="spDatabase">
            <th mat-header-cell *matHeaderCellDef class="db_name" [attr.colspan]="foreignKeyActionsSupported ? 7 : 5" >
              <div class="spanner_edit-button">
                <span>Spanner</span>
                <div *ngIf="
                    !isFkEditMode &&
                    fkDataSource.length > 0 &&
                    currentObject!.isSpannerNode &&
                    !currentObject.isDeleted
                  ">
                  <button mat-stroked-button color="primary" (click)="toggleFkEdit()">
                    <mat-icon class="edit-icon">edit</mat-icon>
                    EDIT
                  </button>
                </div>
              </div>
            </th>
          </ng-container>

          <ng-container matColumnDef="srcName">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Name</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('srcName').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="srcColumns">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Columns</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('srcColumns').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="srcReferTable">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Refer Table</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('srcReferTable').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="srcReferColumns">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Refer Columns</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('srcReferColumns').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="srcOnDelete" *ngIf="foreignKeyActionsSupported">
            <th class="table_header" mat-header-cell *matHeaderCellDef>On Delete</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('srcOnDelete').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="srcOnUpdate" *ngIf="foreignKeyActionsSupported">
            <th class="table_header" mat-header-cell *matHeaderCellDef>On Update</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('srcOnUpdate').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="spName">
            <th mat-header-cell class="table_header" *matHeaderCellDef>Name</th>
            <td mat-cell *matCellDef="let element">
              <div *ngIf="isFkEditMode && !(element.get('spReferTable').value === '')">
                <input matInput class="name_input" type="text" [formControl]="element.get('spName')"
                  matTooltip="No special characters allowed except underscore."
                  [matTooltipDisabled]="!element.get('spName')?.hasError('pattern')" />
              </div>

              <p *ngIf="!isFkEditMode">{{ element.get('spName').value }}</p>
            </td>
          </ng-container>

          <ng-container matColumnDef="spColumns">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Columns</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('spColumns').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="spReferTable">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Refer Table</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('spReferTable').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="spReferColumns">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Refer Columns</th>
            <td mat-cell *matCellDef="let element">
              <div class="sprefcol-content">
                {{ element.get('spReferColumns').value }}
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="spOnDelete" *ngIf="foreignKeyActionsSupported">
            <th class="table_header" mat-header-cell *matHeaderCellDef>On Delete</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('spOnDelete').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="spOnUpdate" *ngIf="foreignKeyActionsSupported">
            <th class="table_header" mat-header-cell *matHeaderCellDef>On Update</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('spOnUpdate').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="dropButton" stickyEnd>
            <th mat-header-cell class="table_header" *matHeaderCellDef></th>
            <td mat-cell *matCellDef="let element" [ngClass]="{ 'drop-button-left-border': isFkEditMode }">
              <div class="actions" *ngIf="
                  isFkEditMode &&
                  currentObject!.isSpannerNode &&
                  !(element.get('spReferTable').value === '')
                ">
                <mat-icon [matMenuTriggerFor]="menu">more_vert</mat-icon>
                <mat-menu #menu="matMenu" xPosition="before">
                  <button [disabled]="element.get('spName').value === ''" mat-menu-item (click)="dropFk(element)">
                    <span>Drop Foreign Key</span>
                  </button>
                  <button *ngIf="
                      interleaveStatus.tableInterleaveStatus &&
                      interleaveStatus.tableInterleaveStatus.Possible
                    " [disabled]="element.get('spName').value === ''" mat-menu-item (click)="setInterleave()">
                    <span>Convert to interleave</span>
                  </button>
                </mat-menu>
              </div>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="['srcDatabase', 'spDatabase']"></tr>
          <tr mat-header-row *matHeaderRowDef="displayedFkColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedFkColumns"></tr>
        </table>
      </div>
    </mat-tab>

    <mat-tab label="INTERLEAVE" *ngIf="
        ((interleaveStatus.tableInterleaveStatus &&
          interleaveStatus.tableInterleaveStatus.Possible) ||
          this.interleaveParentName !== null) &&
        currentObject.isSpannerNode
      ">
      <div class="interleave-tab-container">
        <button *ngIf="
            interleaveStatus.tableInterleaveStatus &&
            interleaveStatus.tableInterleaveStatus.Possible &&
            this.interleaveParentName === null
          " mat-raised-button color="primary" (click)="setInterleave()">
          Convert to Interleave
        </button>
        <button *ngIf="
            (interleaveStatus.tableInterleaveStatus &&
              !interleaveStatus.tableInterleaveStatus.Possible) ||
            this.interleaveParentName !== null
          " mat-raised-button color="primary" (click)="removeInterleave()">
          Convert Back to Foreign Key
        </button>
        <br />
        <div *ngIf="
            (interleaveStatus.tableInterleaveStatus &&
              !interleaveStatus.tableInterleaveStatus.Possible) ||
            this.interleaveParentName !== null
          ">
          This table is interleaved with
          <span class="interleave-parent-table">{{ interleaveParentName }}</span>. Click on the above button to convert
          back to foreign key.
        </div>
      </div>
    </mat-tab>

    <mat-tab>
      <ng-template mat-tab-label>
        <span>CHECK CONSTRAINTS</span>
      </ng-template>
      <div class="cc-tab-container">
        <table mat-table [dataSource]="ccDataSource">
          <ng-container matColumnDef="srcDatabase">
            <th mat-header-cell class="db_name" *matHeaderCellDef [attr.colspan]="3">{{ srcDbName }}</th>
          </ng-container>

          <ng-container matColumnDef="spDatabase">
            <th mat-header-cell *matHeaderCellDef class="db_name" [attr.colspan]="4" >
              <div class="spanner_edit-button">
                <span>Spanner</span>
                <div *ngIf="
                    !isCcEditMode &&
                    currentObject!.isSpannerNode &&
                    !currentObject.isDeleted
                  ">
                  <button mat-stroked-button color="primary" (click)="toggleCcEdit()">
                    <mat-icon class="edit-icon">edit</mat-icon>
                    EDIT
                  </button>
                </div>
              </div>
            </th>
          </ng-container>

          <ng-container matColumnDef="srcSno">
            <th class="table_header" mat-header-cell *matHeaderCellDef>S. No.</th>
            <td mat-cell *matCellDef="let element"  >
              <span *ngIf="element.get('srcSno').value != 0">
              {{ element.get('srcSno').value }}
             </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="srcConstraintName">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Constraint Name</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('srcConstraintName').value }}
            </td>

          </ng-container>

          <ng-container matColumnDef="srcCondition">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Condition</th>
            <td mat-cell *matCellDef="let element" matTooltip="{{ element.get('srcCondition').value }}"
            matTooltipPosition="above" class="overflow-cell">

              {{ element.get('srcCondition').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="spSno">
            <th mat-header-cell class="table_header" *matHeaderCellDef>S. No.</th>
            <td mat-cell *matCellDef="let element">
              {{ element.get('spSno').value }}
            </td>
          </ng-container>

          <ng-container matColumnDef="spConstraintName">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Constraint Name</th>
            <td mat-cell *matCellDef="let element">
              <div *ngIf="isCcEditMode">
                <input
                  matInput
                  class="name_input"
                  type="text"
                  [formControl]="element.get('spConstraintName')"
                  matTooltip="No special characters allowed except underscore."
                   />
              </div>
              <p *ngIf="!isCcEditMode">{{ element.get('spConstraintName').value }}</p>
            </td>
          </ng-container>

          <ng-container matColumnDef="spConstraintCondition">
            <th class="table_header" mat-header-cell *matHeaderCellDef>Condition</th>
            <td mat-cell *matCellDef="let element" >
              <div *ngIf="isCcEditMode">
                   <textarea name="spConstraintCondition"  matInput
                   class="condition_input" [formControl]="element.get('spConstraintCondition')"
                   matTooltip="Enter valid clause for CHECK constraints" id="spConstraintCondition"></textarea>
              </div>
              <p *ngIf="!isCcEditMode" matTooltip="{{ element.get('spConstraintCondition').value }}"
              matTooltipPosition="above" class="overflow-cell">{{ element.get('spConstraintCondition').value }}</p>
            </td>
          </ng-container>

          <ng-container matColumnDef="dropButton">
            <th mat-header-cell class="table_header" *matHeaderCellDef></th>
            <td mat-cell *matCellDef="let element" [ngClass]="{ 'drop-button-left-border': isCcEditMode }">
              <div class="actions" *ngIf="
                isCcEditMode && currentObject!.isSpannerNode
                ">
                <mat-icon [matMenuTriggerFor]="menu">more_vert</mat-icon>
                <mat-menu #menu="matMenu" xPosition="before">
                  <button [disabled]="!isCcEditMode" mat-menu-item (click)="dropCc(element)">
                    <span>Remove constraint</span>
                  </button>
                </mat-menu>
              </div>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="['srcDatabase', 'spDatabase']"></tr>
          <tr mat-header-row *matHeaderRowDef="displayedCCColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedCCColumns"></tr>
        </table>

        <div *ngIf="isCcEditMode" class="add-cc-column">
          <button mat-button color="primary" class="add-column-btn" type="button" (click)="addCcColumn()">
            <mat-icon>add</mat-icon>
            Add Constraint
          </button>
        </div>

      </div>
    </mat-tab>

    <mat-tab *ngIf="currentObject!.isSpannerNode && !currentObject!.isDeleted">
      <ng-template mat-tab-label>
        <span>SQL</span>
      </ng-template>
      <div class="ddl_container">
        <pre><code>{{ddlStmts[currentObject!.id]}}</code></pre>
      </div>
    </mat-tab>
  </mat-tab-group>

  <div *ngIf="currentObject!.type === 'indexName'" class="index-tab-container">
    <table mat-table [dataSource]="spDataSource">
      <ng-container matColumnDef="srcDatabase">
        <th mat-header-cell class="db_name" *matHeaderCellDef colspan="3">{{ srcDbName }}</th>
      </ng-container>

      <ng-container matColumnDef="spDatabase">
        <th mat-header-cell *matHeaderCellDef class="db_name" colspan="4">
          <div class="spanner_edit-button">
            <span>Spanner</span>

            <div *ngIf="!isIndexEditMode && !currentObject!.isDeleted && currentObject!.isSpannerNode">
              <button mat-stroked-button color="primary" (click)="toggleIndexEdit()">
                <mat-icon class="edit-icon">edit</mat-icon>
                EDIT
              </button>
            </div>
          </div>
        </th>
      </ng-container>

      <ng-container matColumnDef="srcIndexColName">
        <th class="table_header" mat-header-cell *matHeaderCellDef>Column</th>
        <td mat-cell *matCellDef="let element">
          {{ element.get('srcColName').value }}
        </td>
      </ng-container>
      <ng-container matColumnDef="srcSortBy">
        <th mat-header-cell class="table_header" *matHeaderCellDef>Sort By</th>
        <td mat-cell *matCellDef="let element">
          <p *ngIf="element.get('srcDesc').value">Desc</p>
          <p *ngIf="element.get('srcDesc').value === false">Asc</p>
        </td>
      </ng-container>
      <ng-container matColumnDef="srcIndexOrder">
        <th class="table_header" mat-header-cell *matHeaderCellDef>Column Order</th>
        <td mat-cell *matCellDef="let element">
          {{ element.get('srcOrder').value }}
        </td>
      </ng-container>

      <ng-container matColumnDef="spIndexColName">
        <th mat-header-cell class="table_header" *matHeaderCellDef>Column</th>
        <td mat-cell *matCellDef="let element">
          <p *ngIf="element.get('spColName').value">{{ element.get('spColName').value }}</p>
        </td>
      </ng-container>
      <ng-container matColumnDef="spSortBy">
        <th mat-header-cell class="table_header" *matHeaderCellDef>Sort By</th>
        <td mat-cell *matCellDef="let element">
          <p *ngIf="element.get('spDesc').value">Desc</p>
          <p *ngIf="element.get('spDesc').value === false">Asc</p>
        </td>
      </ng-container>
      <ng-container matColumnDef="spIndexOrder">
        <th class="table_header" mat-header-cell *matHeaderCellDef>Column Order</th>
        <td mat-cell *matCellDef="let element">
          <div *ngIf="isIndexEditMode && element.get('spColName').value">
            <input matInput class="order_input" type="number" [formControl]="element.get('spOrder')" />
          </div>
          <p *ngIf="!isIndexEditMode">{{ element.get('spOrder').value }}</p>
        </td>
      </ng-container>
      <ng-container matColumnDef="dropButton">
        <th mat-header-cell class="table_header" *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element; let i = index"
          [ngClass]="{ 'drop-button-left-border': isIndexEditMode }">
          <div *ngIf="isIndexEditMode && element.get('spColName').value">
            <mat-icon [matMenuTriggerFor]="menu">more_vert</mat-icon>
            <mat-menu #menu="matMenu" xPosition="before">
              <button mat-menu-item (click)="dropIndexKey(i)">
                <span>Drop Index Key</span>
              </button>
            </mat-menu>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['srcDatabase', 'spDatabase']"></tr>
      <tr mat-header-row *matHeaderRowDef="indexDisplayedColumns"></tr>
      <tr mat-row class="index-data-row" *matRowDef="let row; columns: indexDisplayedColumns"></tr>
    </table>
    <div [formGroup]="addIndexKeyForm" *ngIf="isIndexEditMode && indexColumnNames.length > 0"
      class="add-index-column-container">
      <mat-form-field appearance="outline" class="index-column-list">
        <mat-label>Column Name</mat-label>
        <mat-select matSelect class="input-field" formControlName="columnName">
          <mat-option *ngFor="let column of indexColumnNames" [value]="column">{{
            column
            }}</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field appearance="outline" class="index-column-order">
        <mat-label>Sort By</mat-label>
        <mat-select matSelect class="input-field" formControlName="ascOrDesc">
          <mat-option value="asc">Ascending</mat-option>
          <mat-option value="desc">Descending</mat-option>
        </mat-select>
      </mat-form-field>
      <button mat-raised-button color="primary" type="submit" [disabled]="!addIndexKeyForm.valid"
        (click)="addIndexKey()">
        <mat-icon>add</mat-icon>
        <span> ADD COLUMN</span>
      </button>
    </div>
  </div>

  <div *ngIf="currentObject!.type === 'sequenceName' && mySqlSource" class="sequence-tab-container">
    <table mat-table [dataSource]="spDataSource">
      <ng-container matColumnDef="spDatabase">
        <th mat-header-cell *matHeaderCellDef class="db_name" colspan="5">
          <div class="spanner_edit-button">
            <span>Spanner</span>

            <div *ngIf="!isSequenceEditMode && !currentObject!.isDeleted && currentObject!.isSpannerNode">
              <button mat-stroked-button color="primary" (click)="toggleSequenceEdit()">
                <mat-icon class="edit-icon">edit</mat-icon>
                EDIT
              </button>
            </div>
          </div>
        </th>
      </ng-container>

      <ng-container matColumnDef="spSeqName">
        <th mat-header-cell class="table_header" *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let element">
          <p *ngIf="element.get('spSeqName').value">{{ element.get('spSeqName').value }}</p>
        </td>
      </ng-container>
      <ng-container matColumnDef="spSequenceKind">
        <th mat-header-cell class="table_header" *matHeaderCellDef>Sequence Type</th>
        <td mat-cell *matCellDef="let element; let i = index">
          <div class="sp-sequence-data-cells">
            <ng-container *ngIf="isSequenceEditMode && element.get('spSequenceKind').value !== ''">
              <mat-form-field appearance="outline" class="w-100 custom-mat-form-field">
                <mat-select #matSelectsSequenceKind [formControl]="element.get('spSequenceKind')">
                  <ng-container *ngFor="let sk of sequenceKinds">
                    <mat-option [value]="sk">
                      {{ sk }}
                    </mat-option>
                  </ng-container>
                </mat-select>
              </mat-form-field>
            </ng-container>
            <ng-container *ngIf="!isSequenceEditMode">
              <p>{{ element.get('spSequenceKind').value }}</p>
            </ng-container>
          </div>
        </td>
      </ng-container>
      <ng-container matColumnDef="spSkipRangeMin">
        <th mat-header-cell class="table_header" *matHeaderCellDef>Skip Range Min</th>
        <td mat-cell *matCellDef="let element">
          <div *ngIf="isSequenceEditMode">
            <input
              matInput
              class="name_input"
              type="text"
              [formControl]="element.get('spSkipRangeMin')"
              matTooltip="Should be a number and both min and max must be set or neither"
              [matTooltipDisabled]="!element.get('spSkipRangeMin')?.hasError('pattern')" />
          </div>
          <p *ngIf="!isSequenceEditMode && element.get('spSkipRangeMin').value">{{ element.get('spSkipRangeMin').value }}</p>
        </td>
      </ng-container>
      <ng-container matColumnDef="spSkipRangeMax">
        <th mat-header-cell class="table_header" *matHeaderCellDef>Skip Range Max</th>
        <td mat-cell *matCellDef="let element">
          <div *ngIf="isSequenceEditMode">
            <input
              matInput
              class="name_input"
              type="text"
              [formControl]="element.get('spSkipRangeMax')"
              matTooltip="Should be a number and both min and max must be set or neither"
              [matTooltipDisabled]="!element.get('spSkipRangeMax')?.hasError('pattern')" />
          </div>
          <p *ngIf="!isSequenceEditMode && element.get('spSkipRangeMax').value">{{ element.get('spSkipRangeMax').value }}</p>
        </td>
      </ng-container>
      <ng-container matColumnDef="spStartWithCounter">
        <th mat-header-cell class="table_header" *matHeaderCellDef>Start With Counter</th>
        <td mat-cell *matCellDef="let element">
          <div *ngIf="isSequenceEditMode">
            <input
              matInput
              class="name_input"
              type="text"
              [formControl]="element.get('spStartWithCounter')"
              matTooltip="Should be a number"
              [matTooltipDisabled]="!element.get('spStartWithCounter')?.hasError('pattern')" />
          </div>
          <p *ngIf="!isSequenceEditMode && element.get('spStartWithCounter').value">{{ element.get('spStartWithCounter').value }}</p>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['spDatabase']"></tr>
      <tr mat-header-row *matHeaderRowDef="sequenceDisplayedColumns"></tr>
      <tr mat-row class="sequence-data-row" *matRowDef="let row; columns: sequenceDisplayedColumns"></tr>
    </table>

  </div>

  <div class="save-edits">
    <mat-divider *ngIf="isEditMode || isPkEditMode || isFkEditMode"></mat-divider>

    <div class="save-button" *ngIf="isEditMode && currentTabIndex === 0">
      <button mat-raised-button color="primary" (click)="saveColumnTable()" [disabled]="!spRowArray.valid">
        SAVE & CONVERT
      </button>
      <button class="cancel-button" mat-raised-button color="primary" (click)="toggleEdit()"
        *ngIf="currentObject!.isSpannerNode">
        CANCEL
      </button>
    </div>
    <div class="save-button" *ngIf="isPkEditMode && currentTabIndex === 1">
      <button mat-raised-button color="primary" (click)="savePk()" [disabled]="!pkArray.valid">
        SAVE & CONVERT
      </button>
      <button class="cancel-button" mat-raised-button color="primary" (click)="togglePkEdit()"
        *ngIf="currentObject!.isSpannerNode">
        CANCEL
      </button>
    </div>
    <div class="save-button" *ngIf="isCcEditMode && (interleaveParentName !== null ? currentTabIndex === 4:currentTabIndex === 3)">
      <button mat-raised-button color="primary" (click)="saveCc()" [disabled]="!ccArray.valid" >
        SAVE & CONVERT
      </button>
      <button class="cancel-button" mat-raised-button color="primary" (click)="toggleCcEdit()"
        *ngIf="currentObject!.isSpannerNode">
        CANCEL
      </button>
    </div>
    <div class="save-button" *ngIf="isFkEditMode && currentTabIndex === 2">
      <button mat-raised-button color="primary" (click)="saveFk()">SAVE & CONVERT</button>
      <button class="cancel-button" mat-raised-button color="primary" (click)="toggleFkEdit()"
        *ngIf="currentObject!.isSpannerNode">
        CANCEL
      </button>
    </div>
    <div class="save-button" *ngIf="isIndexEditMode && currentTabIndex === -1">
      <button mat-raised-button color="primary" (click)="saveIndex()">SAVE & CONVERT</button>
      <button class="cancel-button" mat-raised-button color="primary" (click)="toggleIndexEdit()"
        *ngIf="currentObject!.isSpannerNode">
        CANCEL
      </button>
    </div>
    <div class="save-button" *ngIf="isSequenceEditMode && currentTabIndex === -1">
      <button mat-raised-button color="primary" (click)="saveSequence()" [disabled]="!spRowArray.valid">
        SAVE & CONVERT
      </button>
      <button class="cancel-button" mat-raised-button color="primary" (click)="toggleSequenceEdit()"
        *ngIf="currentObject!.isSpannerNode">
        CANCEL
      </button>
    </div>
  </div>
</div>