clearml-web/src/app/features/experiments/containers/experiment-ouptut/experiment-output.component.html
shyallegro 946d6ec9ae
release v2.0 (#98)
Co-authored-by: shallegro <shay@allego.ai>
2025-01-01 10:29:37 +02:00

69 lines
3.0 KiB
HTML

<sm-overlay [backdropActive]="backdropActive$|async"></sm-overlay>
<sm-info-header-status-icon-label
[status]=" (selectedExperiment)?.status || selectedExperiment?.status"
></sm-info-header-status-icon-label>
<div class="experiment-output-container light-theme" [class.minimized]="minimized">
<sm-experiment-info-header
[experiment]="selectedExperiment"
[infoData]="infoData$ | ngrxPush"
[editable]="!isExample"
[showMenu]="true"
[minimized]="minimized"
[isSharedAndNotOwner]="isSharedAndNotOwner$ | ngrxPush"
(experimentNameChanged)="updateExperimentName($event)"
(closeInfoClicked)="closePanel()"
(minimizeClicked)="minimizeView()"
(maximizedClicked)="maximize()"
></sm-experiment-info-header>
<sm-experiment-info-navbar [minimized]="minimized" [splitSize]="selectSplitSize$ | ngrxPush">
@if ((routerConfig.includes('scalar') && minimized) || !minimized ) {
<div class="scalar-buttons" leftButtons></div>
}
@if ((routerConfig.includes('scalar') && minimized) || !minimized ) {
<span class="refresh-position" refresh>
<div class="scalar-buttons">
@if (routerConfig.includes('scalar')) {
<button mat-icon-button class="table-graph-toggle"
[smTooltip]="(metricValuesView$ | async)===false? 'Metric values': 'Graphs'"
[class.maximized]="!minimized"
(click)="toggleTableView()">
<mat-icon fontSet="al" [fontIcon]="(metricValuesView$ | async)===false? 'al-ico-table-view': 'al-ico-charts-view'"></mat-icon>
</button>
}
@if ((metricValuesView$ | async) === false && routerConfig.includes('scalar') && minimized) {
<button mat-icon-button [matMenuTriggerFor]="graphSettingsMenu" smTooltip="Settings">
<mat-icon fontSet="al" fontIcon="al-ico-settings"></mat-icon>
</button>
<mat-menu #graphSettingsMenu="matMenu">
<sm-graph-settings-bar
class="graph-settings-menu"
(click)="$event.stopPropagation()"
[verticalLayout]="true"
[smoothWeight]="smoothWeight$ | ngrxPush"
[smoothType]="smoothType$ | ngrxPush"
[xAxisType]="xAxisType$ | ngrxPush"
[groupBy]="groupBy$ | ngrxPush"
[groupByOptions]="groupByOptions"
(changeWeight)="changeSmoothness($event)"
(changeXAxisType)="changeXAxisType($event)"
(changeGroupBy)="changeGroupBy($event)"
(changeSmoothType)="changeSmoothType($event)"
></sm-graph-settings-bar>
</mat-menu>
}
</div>
@if (!minimized){
<sm-refresh-button
class="light-theme"
(setAutoRefresh)="setAutoRefresh($event)"
></sm-refresh-button>
}
</span>
}
</sm-experiment-info-navbar>
<div class="output-body" [class.minimized]="minimized" #scrollContainer>
<router-outlet class="output-outlet" (activate)="onActivate($event, scrollContainer)"></router-outlet>
</div>
</div>