ClearML/clearml-web
1
0
Fork 0
mirror of https://github.com/clearml/clearml-web synced 2025-03-13 07:08:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editable parameters

Browse Source
This commit is contained in:
Shubham Takode 2024-02-28 14:28:04 +05:30
parent a5ccf0e7ea
commit 4a4cb27e16
6 changed files with 100 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/business-logic/model/pipelines/pipeline.ts
View File

@ -17,6 +17,7 @@ import { PipelinesParameter } from './pipelinesParameter';
interface PipelineNode {
id?:string;
data?: any;
}
interface PipelineEdge {

2
src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html
View File

@ -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>&nbsp;DETAILS</div> -->
<sm-flow-editor *ngIf="selectedPipeline?.flow_display?.nodes?.length" [pipelineData]="selectedPipeline"
(nodesChangedInReactFlow)="nodesChangedInReactFlow($event)"

19
src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts
View File

@ -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)}))
}
}

53
src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.html
View File

@ -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>

4
src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss
View File

@ -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;

51
src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts
View File

@ -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;