clearml-web/src/app/webapp-common/experiments/dumb/experiment-custom-cols-menu/experiment-custom-cols-menu.component.html

<sm-menu
  [iconClass]="'al-icon al-ico-settings al-color pointer create-new-icon ' + (disabled ? 'pointer-events-none blue-570' : 'blue-400')"
  smMenuClass="light-theme custom-columns"
  buttonTooltip="Customize table"
  [showButton]="false"
  (click)="!disabled && getMetricsToDisplay.emit()"
  (onMenuClosed)="selectMetricActiveChanged.emit(null)"
  [style.pointer-events]="disabled ? 'none' : 'initial'"
>
  <div *ngIf="!customColumnMode" (click)="$event.stopPropagation()">
    <sm-custom-columns-list
      [tableCols]="tableCols"
      [isLoading]="isLoading"
      (removeColFromList)="removeColFromList.emit($event)"
      (selectedTableColsChanged)="selectedTableColsChanged.emit($event)"
    >
    </sm-custom-columns-list>

    <div [ngClass]="{loading: isLoading, loaded: !isLoading}">
      <div class="sm-menu-header">ADD CUSTOM COLUMN</div>
      <div class="custom-column-buttons">
        <div class="add-button metrics-button"
             smClickStopPropagation
             [ngClass]="{disabled: !metricVariants.length}"
             (click)="metricVariants.length && selectMetricActiveChanged.emit(CustomColumnMode.Metrics); $event.stopPropagation()"
        ><i class="al-icon al-ico-add sm mr-1"></i><span class="caption">METRIC</span>
        </div>
        <div class="add-button metrics-button"
             smClickStopPropagation
             [ngClass]="{disabled: !hasHyperParams}"
             (click)="hasHyperParams && selectMetricActiveChanged.emit(CustomColumnMode.HyperParams); $event.stopPropagation()"
        ><i class="al-icon al-ico-add sm mr-1"></i><span class="caption">HYPER PARAMETERS</span>
        </div>
      </div>
    </div>
  </div>
  <sm-select-metric-for-custom-col *ngIf="customColumnMode === CustomColumnMode.Metrics"
                                   [tableCols]="tableCols"
                                   [metricVariants]="metricVariants"
                                   (goBack)="selectMetricActiveChanged.emit(null)"
                                   (selectedMetricToShow)="selectedMetricToShow.emit($event)">
  </sm-select-metric-for-custom-col>
  <sm-select-hyper-params-for-custom-col *ngIf="customColumnMode === CustomColumnMode.HyperParams"
                                         [tableCols]="tableCols"
                                         [hyperParams]="hyperParams"
                                         (goBack)="selectMetricActiveChanged.emit(null)"
                                         (selectedHyperParamToShow)="selectedHyperParamToShow.emit($event)"
                                         (clearSelection)="clearSelection.emit()">
  </sm-select-hyper-params-for-custom-col>
</sm-menu>