mirror of
https://github.com/clearml/clearml-web
synced 2025-03-13 07:08:17 +00:00
Editable parameters
This commit is contained in:
Shubham Takode
parent
a5ccf0e7ea
commit
4a4cb27e16
@ -17,6 +17,7 @@ import { PipelinesParameter } from './pipelinesParameter';
|
||||
|
||||
interface PipelineNode {
|
||||
id?:string;
|
||||
data?: any;
|
||||
}
|
||||
|
||||
interface PipelineEdge {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
[pipelineData]="selectedPipeline">
|
||||
</sm-edit-pipeline-header>
|
||||
<div class="edit-pipeline-body">
|
||||
<sm-pipeline-step-info [step]="selectedStep" *ngIf="selectedStep"/>
|
||||
<sm-pipeline-step-info [step]="selectedStep" *ngIf="selectedStep" (stepParamsChanged)="selectedStepParamsChanged($event)"/>
|
||||
<!-- <div class="details"><i class="icon no-output-icon i-no-code-dark"></i> DETAILS</div> -->
|
||||
<sm-flow-editor *ngIf="selectedPipeline?.flow_display?.nodes?.length" [pipelineData]="selectedPipeline"
|
||||
(nodesChangedInReactFlow)="nodesChangedInReactFlow($event)"
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
/* eslint-disable no-console */
|
||||
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
|
||||
import { PipelineAddStepDialogComponent } from '../pipeline-add-step-dialog/pipeline-add-step-dialog.component';
|
||||
import { PipelineSettingDialogComponent } from '../pipeline-setting/pipeline-setting.dialog.component';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { createPipelineStep, pipelineSettings, getPipelineById, resetPipelines, resetPipelinesSearchQuery, updatePipeline, compilePipeline, runPipeline } from '../pipelines.actions';
|
||||
import { createPipelineStep, pipelineSettings, getPipelineById, resetPipelines, resetPipelinesSearchQuery, updatePipeline, compilePipeline, runPipeline, setSelectedPipeline } from '../pipelines.actions';
|
||||
import { selectRouterParams } from '@common/core/reducers/router-reducer';
|
||||
import { Observable, Subscription, map } from 'rxjs';
|
||||
import { Params } from '@angular/router';
|
||||
@ -70,7 +71,7 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
compilePipeline () {
|
||||
let requestPayload: PipelinesCompileRequest = {
|
||||
const requestPayload: PipelinesCompileRequest = {
|
||||
pipeline_id: this.selectedPipeline.id,
|
||||
steps: this.selectedPipeline.flow_display.nodes.map((nodeItem) => {
|
||||
return {
|
||||
@ -146,8 +147,22 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
public nodeSelected(data) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(this.selectedStep);
|
||||
this.selectedStep = {...data};
|
||||
}
|
||||
|
||||
public selectedStepParamsChanged(changedParams) {
|
||||
const pipelineState = cloneDeep(this.selectedPipeline);
|
||||
pipelineState.flow_display?.nodes.map((node) => {
|
||||
if(node.id === this.selectedStep.id) {
|
||||
node.data.parameters = cloneDeep(changedParams)
|
||||
}
|
||||
return node;
|
||||
});
|
||||
console.log(pipelineState);
|
||||
this.store.dispatch(setSelectedPipeline({data: cloneDeep(pipelineState)}))
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -4,13 +4,12 @@
|
||||
</mat-expansion-panel-header>
|
||||
<div class="panel-body" *ngIf="step">
|
||||
<header *ngIf="step; else controllerHeader">
|
||||
<i
|
||||
class="al-icon lg"
|
||||
[class]="'al-ico-type-' + (step.data.experimentDetails?.type ? (step.data.experimentDetails.type.toString()).replace('_', '-') : 'training')"
|
||||
></i>
|
||||
<i class="al-icon lg"
|
||||
[class]="'al-ico-type-' + (step.data.experimentDetails?.type ? (step.data.experimentDetails.type.toString()).replace('_', '-') : 'training')"></i>
|
||||
<div class="name" [smTooltip]="step.data.name" smShowTooltipIfEllipsis>{{step.data?.name}}</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="status" [class]="step.data.experimentDetails?.status" data-id="infoStepStatus">{{step.data.experimentDetails?.status}}</div>
|
||||
<div class="status" [class]="step.data.experimentDetails?.status" data-id="infoStepStatus">
|
||||
{{step.data.experimentDetails?.status}}</div>
|
||||
<sm-id-badge class="ms-1" [id]="step.id" (copied)="copyToClipboard()"></sm-id-badge>
|
||||
</div>
|
||||
</header>
|
||||
@ -22,10 +21,30 @@
|
||||
<ng-container>
|
||||
<div class="section">
|
||||
<div class="header">PARAMETERS</div>
|
||||
<ng-container *ngFor="let section of step?.data?.parameters">
|
||||
<ng-container *ngFor="let section of step?.data?.parameters; let index= index">
|
||||
<div class="param">
|
||||
<div class="key" [smTooltip]="section.name" smShowTooltipIfEllipsis>{{section.name}}</div>
|
||||
<div class="value" [smTooltip]="section.value" smShowTooltipIfEllipsis>{{section.value}}</div>
|
||||
<div class="value">
|
||||
<input [matAutocomplete]="auto" [(ngModel)]="section['value']" placeholder="Parameter" (ngModelChange)="paramsChanged()" name="parameterKey-{{section.name}}-{{index}}"
|
||||
matInput required #optsInput="ngModel" />
|
||||
<mat-autocomplete #auto="matAutocomplete" class="light-theme" [displayWith]="displayFn"
|
||||
(opened)="setIsAutoCompleteOpen(true)" (closed)="setIsAutoCompleteOpen(false)" autoActiveFirstOption>
|
||||
<mat-option *ngFor="let option of incommingInputOptions; trackBy: trackByValue"
|
||||
[value]="option.value"
|
||||
[smTooltip]="option.label"
|
||||
smShowTooltipIfEllipsis
|
||||
(onSelectionChange)="paramSelected($event)">
|
||||
<div [smSearchText]="optsInput.value">{{option.label}}</div>
|
||||
</mat-option>
|
||||
<mat-option disabled style="height: 0; min-height: 0;"></mat-option>
|
||||
|
||||
</mat-autocomplete>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <div class="value" [smTooltip]="section.value" smShowTooltipIfEllipsis>{{section.value}}</div> -->
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
@ -34,30 +53,30 @@
|
||||
<ng-container *ngIf="(step?.data?.experimentDetails?.last_metrics | keyvalue)?.length > 0; else emptyMsg">
|
||||
<ng-container *ngFor="let metric of step?.data?.experimentDetails.last_metrics | keyvalue">
|
||||
<div *ngFor="let variant of $any($any(metric.value) | keyvalue) | filterMonitorMetric" class="param">
|
||||
<div class="key" [smTooltip]="$any(variant.value).metric" smShowTooltipIfEllipsis>{{$any(variant.value).metric}}/{{$any(variant.value).variant}}</div>
|
||||
<div class="value" [smTooltip]="$any(variant.value).value" smShowTooltipIfEllipsis>{{$any(variant.value).value}}</div>
|
||||
<div class="key" [smTooltip]="$any(variant.value).metric" smShowTooltipIfEllipsis>
|
||||
{{$any(variant.value).metric}}/{{$any(variant.value).variant}}</div>
|
||||
<div class="value" [smTooltip]="$any(variant.value).value" smShowTooltipIfEllipsis>
|
||||
{{$any(variant.value).value}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="section">
|
||||
<div class="header">ARTIFACTS</div>
|
||||
<ng-container *ngIf="step?.data?.experimentDetails?.execution?.artifacts?.length > 0; else emptyMsg">
|
||||
<div
|
||||
*ngFor="let artifact of step?.data?.experimentDetails?.execution.artifacts; trackBy: trackByFn"
|
||||
class="param"
|
||||
>
|
||||
<div *ngFor="let artifact of step?.data?.experimentDetails?.execution.artifacts; trackBy: trackByFn"
|
||||
class="param">
|
||||
<div class="key" [smTooltip]="artifact.key" smShowTooltipIfEllipsis>{{artifact.key}}</div>
|
||||
<div class="value">{{(artifact?.content_size | filesize : fileSizeConfigStorage) || ''}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="section">
|
||||
<div class="header">MODELS</div>
|
||||
<ng-container *ngIf="step?.data?.experimentDetails?.models?.output?.length > 0; else emptyMsg">
|
||||
<div *ngFor="let model of step?.data?.experimentDetails?.models?.output" class="param">
|
||||
<div class="key"><a [routerLink]="['/projects', model.model.project.id, 'models', model.model.id]" target="_blank"
|
||||
>{{model.name || model.model.name}}</a></div>
|
||||
<div class="key"><a [routerLink]="['/projects', model.model.project.id, 'models', model.model.id]"
|
||||
target="_blank">{{model.name || model.model.name}}</a></div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
width: 260px;
|
||||
width: 300px;
|
||||
z-index: 1;
|
||||
border-radius: 4px;
|
||||
background-color: $blue-700;
|
||||
@ -51,7 +51,7 @@
|
||||
border-bottom: solid 1px $dark-border;
|
||||
|
||||
.key {
|
||||
flex: 1 1 0;
|
||||
flex: 0.5 1 0;
|
||||
color: $blue-300;
|
||||
margin-right: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
|
||||
import {Store} from '@ngrx/store';
|
||||
import {Artifact} from '~/business-logic/model/tasks/artifact';
|
||||
import {
|
||||
@ -9,8 +9,12 @@ import {
|
||||
import {TaskTypeEnum} from '~/business-logic/model/tasks/taskTypeEnum';
|
||||
import {addMessage} from '@common/core/actions/layout.actions';
|
||||
import {fileSizeConfigStorage} from '@common/shared/pipes/filesize.pipe';
|
||||
import {ICONS, MESSAGES_SEVERITY} from '@common/constants';
|
||||
import {ICONS, IOption, MESSAGES_SEVERITY} from '@common/constants';
|
||||
import {IExperimentInfo} from '~/features/experiments/shared/experiment-info.model';
|
||||
import { MatOptionSelectionChange } from '@angular/material/core';
|
||||
import { NgModel } from '@angular/forms';
|
||||
import { trackByValue } from '@common/shared/utils/forms-track-by';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
@Component({
|
||||
selector: 'sm-pipeline-step-info',
|
||||
@ -24,6 +28,33 @@ export class PipelineStepInfoComponent {
|
||||
public fileSizeConfigStorage = fileSizeConfigStorage;
|
||||
private _step;
|
||||
|
||||
@Output() deleteStep = new EventEmitter<unknown>();
|
||||
@Output() stepParamsChanged = new EventEmitter<unknown>();
|
||||
|
||||
@Input() set step(step) {
|
||||
this._step = step ? cloneDeep(step) : null;
|
||||
}
|
||||
get step() {
|
||||
return this._step;
|
||||
}
|
||||
|
||||
// for auto complete
|
||||
@ViewChild('optsInput') optsInput: NgModel;
|
||||
public trackByValue = trackByValue;
|
||||
isAutoCompleteOpen: boolean;
|
||||
public incommingInputOptions: { label: string; value: string }[] = [
|
||||
{label: "test", value: "test1"}
|
||||
];
|
||||
setIsAutoCompleteOpen(focus: boolean) {
|
||||
this.isAutoCompleteOpen = focus;
|
||||
}
|
||||
displayFn(opt: IOption | string) {
|
||||
return typeof opt === 'string' ? opt : opt?.label;
|
||||
}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
paramSelected($event: MatOptionSelectionChange) {
|
||||
|
||||
}
|
||||
/* @Input() set entity(task: IExperimentInfo) {
|
||||
this._entity = task;
|
||||
this.controller = task?.type === TaskTypeEnum.Controller;
|
||||
@ -31,14 +62,14 @@ export class PipelineStepInfoComponent {
|
||||
get entity() {
|
||||
return this._entity;
|
||||
} */
|
||||
@Output() deleteStep = new EventEmitter<unknown>();
|
||||
@Input() set step(step) {
|
||||
this._step = step ? {...step} : null;
|
||||
|
||||
paramsChanged() {
|
||||
setTimeout(()=> {
|
||||
this.stepParamsChanged.emit(this._step.data.parameters);
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
get step() {
|
||||
return this._step;
|
||||
}
|
||||
|
||||
@Input() project: string;
|
||||
|
||||
constructor(private store: Store) {
|
||||
@ -46,6 +77,10 @@ export class PipelineStepInfoComponent {
|
||||
|
||||
public deleteClicked() {
|
||||
this.deleteStep.emit(this._step);
|
||||
/* setTimeout(() => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(this._step);
|
||||
}, 3000) */
|
||||
}
|
||||
|
||||
trackByFn = (index: number, artifact: Artifact) => artifact.hash || artifact.uri;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user