From 4a4cb27e163e2a1e7a6bcf675c750df6086ddc73 Mon Sep 17 00:00:00 2001 From: Shubham Takode Date: Wed, 28 Feb 2024 14:28:04 +0530 Subject: [PATCH] Editable parameters --- .../model/pipelines/pipeline.ts | 1 + .../edit-pipeline-page.component.html | 2 +- .../edit-pipeline-page.component.ts | 19 ++++++- .../pipeline-step-info.component.html | 53 +++++++++++++------ .../pipeline-step-info.component.scss | 4 +- .../pipeline-step-info.component.ts | 51 +++++++++++++++--- 6 files changed, 100 insertions(+), 30 deletions(-) diff --git a/src/app/business-logic/model/pipelines/pipeline.ts b/src/app/business-logic/model/pipelines/pipeline.ts index 63023fc7..de8606ef 100644 --- a/src/app/business-logic/model/pipelines/pipeline.ts +++ b/src/app/business-logic/model/pipelines/pipeline.ts @@ -17,6 +17,7 @@ import { PipelinesParameter } from './pipelinesParameter'; interface PipelineNode { id?:string; + data?: any; } interface PipelineEdge { diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html index 80ac33ab..aeb0da35 100644 --- a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html +++ b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html @@ -3,7 +3,7 @@ [pipelineData]="selectedPipeline">
- + { 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)})) + } + } diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.html b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.html index fdb27d98..caa610aa 100644 --- a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.html +++ b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.html @@ -4,13 +4,12 @@
- +
{{step.data?.name}}
-
{{step.data.experimentDetails?.status}}
+
+ {{step.data.experimentDetails?.status}}
@@ -22,10 +21,30 @@
PARAMETERS
- +
{{section.name}}
-
{{section.value}}
+
+ + + +
{{option.label}}
+ + + + +
+ + + + +
@@ -34,30 +53,30 @@
-
{{$any(variant.value).metric}}/{{$any(variant.value).variant}}
-
{{$any(variant.value).value}}
+
+ {{$any(variant.value).metric}}/{{$any(variant.value).variant}}
+
+ {{$any(variant.value).value}}
-
+
ARTIFACTS
-
+
{{artifact.key}}
{{(artifact?.content_size | filesize : fileSizeConfigStorage) || ''}}
-
+
MODELS
-
{{model.name || model.model.name}}
+
{{model.name || model.model.name}}
diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss index 4dc30fc0..96a117ba 100644 --- a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss +++ b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.scss @@ -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; diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts index 8cce8bc6..bfcef025 100644 --- a/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts +++ b/src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.ts @@ -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(); + @Output() stepParamsChanged = new EventEmitter(); + + @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(); - @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;