diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts index 309974e6..20bfe374 100644 --- a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts +++ b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.ts @@ -65,6 +65,8 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy { this.reactFlowState.edges ); const options: Array = []; + + // add outputs from incomming nodes. incommingNodes.forEach((node) => { if (node.data?.experimentDetails?.execution?.artifacts?.length) { // for now we are using only artifacts of i/o mapping. @@ -77,7 +79,33 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy { } }); } + + if(node.data?.experimentDetails?.models?.output?.length) { + // models i/o mapping. + node.data.experimentDetails.models.output.forEach((model) => { + options.push({ + ...model, + stepName: node.data.name, + id: model.model.id, + type: "model", + key: model.name + }); + }); + } }); + + // add pipeline parameters + if(this.selectedPipeline?.parameters?.length) { + this.selectedPipeline.parameters.forEach((param) => { + options.push({ + ...param, + stepName: this.selectedPipeline.name, + type: "pipeline_parameter", + key: param.name + }); + }) + } + this.selectedStepInputOutputOptions = options; console.log(options); } @@ -96,7 +124,7 @@ export class EditPipelinePageComponent implements OnInit, OnDestroy { this.pipelineId = pipelineId; setTimeout(() => { this.store.dispatch(getPipelineById({ id: pipelineId, name: "" })); - }, 1000); + }); }) ); 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 e9ee1647..0ec89f97 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 @@ -2,7 +2,7 @@ ::ng-deep { .option { - background-color: red; + // background-color: red; span { 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 74d9ab0c..c663752b 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 @@ -30,11 +30,20 @@ export class PipelineStepInfoComponent { @Input() set ioOptions(options: any) { const opts = options.map((op) => { - return { - value: "${"+op.stepName+".id}."+op.key, - label: `${op.stepName}.${op.key}`, - type: op.type + if(op.type === "pipeline_parameter") { + return { + value: "${pipeline." + op.key +"}", + label: `${op.stepName}.${op.key}`, + type: op.type + } + } else { + return { + value: "${"+op.stepName+".id}."+op.key, + label: `${op.stepName}.${op.key}`, + type: op.type + } } + }); this._ioOptions = cloneDeep(opts); diff --git a/src/app/webapp-common/pipelines/pipeline-add-step-dialog/pipeline-add-step-form/pipeline-add-step-form.component.ts b/src/app/webapp-common/pipelines/pipeline-add-step-dialog/pipeline-add-step-form/pipeline-add-step-form.component.ts index e475caa6..c2ded782 100644 --- a/src/app/webapp-common/pipelines/pipeline-add-step-dialog/pipeline-add-step-form/pipeline-add-step-form.component.ts +++ b/src/app/webapp-common/pipelines/pipeline-add-step-dialog/pipeline-add-step-form/pipeline-add-step-form.component.ts @@ -19,7 +19,7 @@ import { import { Task } from '~/business-logic/model/tasks/task'; import { PipelineParametersComponent } from '@common/pipelines/pipeline-parameters/pipeline-parameters.component'; -import { cloneDeep } from 'lodash-es'; +import { cloneDeep, upperCase } from 'lodash-es'; import { ParamsItem } from '~/business-logic/model/tasks/paramsItem'; @@ -91,7 +91,7 @@ export class PipelineAddStepFormComponent implements OnChanges, OnDestroy { this._experiments = experiments; this.experimentsOptions = [ ...((this.rootFiltered || experiments === null) ? [] : [this.experimentsRoot]), - ...(experiments ? experiments.map(experiment => ({label: experiment.name, value: experiment.id, parameters: experiment.hyperparams, otherDetails: {...experiment}})) : []) + ...(experiments ? experiments.map(experiment => ({label: experiment.name + " ("+ upperCase(experiment?.status) + ")", value: experiment.id, parameters: experiment.hyperparams, otherDetails: {...experiment}})) : []) ]; this.experimentsNames = this.experimentsOptions.map(experiment => experiment.label); }