<mat-expansion-panel [expanded]="true">
  <mat-expansion-panel-header collapsedHeight="40px" expandedHeight="40px" class="active" data-id="User Properties">
    USER PROPERTIES
  </mat-expansion-panel-header>
  <div
    queryParamsHandling="preserve"
    [routerLink]="'hyper-param/properties'"
    [class.selected]="selectedHyperParam === 'properties'"
    class="hyper-container pointer ellipsis"
    routerLink="hyper-param"
    data-id="properties"
  >
    <i class='sm al-icon al-ico-data-audit al-color'
       [class.white]= "selectedHyperParam === 'properties'"
       [class.blue-400]="selectedHyperParam !== 'properties'"
       data-id="properties">
    </i>Properties
  </div>
</mat-expansion-panel>
<mat-expansion-panel expanded="true" *ngIf="((hyperParams | keyvalue)|filterOut:'key':'properties')?.length>0">
  <mat-expansion-panel-header collapsedHeight="40px" expandedHeight="40px" class="active" data-id="HyperParameters">
    HYPERPARAMETERS
  </mat-expansion-panel-header>
  <div
    *ngFor="let hyperParameter of (hyperParams | keyvalue)|filterOut:'key':'properties' | sort:'key'; trackBy: trackByFn"
    queryParamsHandling="preserve"
    [routerLink]="'hyper-param/' + (hyperParameter.key | safeUrlParameter)"
    [class.selected]="selectedHyperParam === (hyperParameter.key | safeUrlParameter)"
    class="hyper-container pointer"
    routerLink="hyper-param"
    data-id="paramters"
  >
    <i
      class="sm al-icon al-ico-data-audit al-color"
      [class]="(selectedHyperParam === hyperParameter.key ? 'white' : 'blue-400')"
    ></i><span class="ellipsis">{{hyperParameter.key | replaceViaMapPipe:sectionReplaceMap}}</span>
  </div>
</mat-expansion-panel>

<mat-expansion-panel [expanded]="true" *ngIf="(configuration | keyvalue)?.length>0">
  <mat-expansion-panel-header collapsedHeight="40px" expandedHeight="40px" class="active">
    CONFIGURATION OBJECTS
  </mat-expansion-panel-header>
  <div
    *ngFor="let confObj of configuration | keyvalue; trackBy: trackByFn"
    queryParamsHandling="preserve"
    [routerLink]="'configuration/' + (confObj.key | safeUrlParameter)"
    [class.selected]="selectedObject === confObj.key"
    class="hyper-container pointer"
    routerLink="configuration"
  >
    <i class="sm al-icon al-ico-data-audit al-color" [class]="(selectedObject === confObj.key ? 'white' : 'blue-400')"></i>
    <span class="ellipsis">{{confObj.key | replaceViaMapPipe:sectionReplaceMap}}</span>
  </div>
</mat-expansion-panel>
