Added io mapping for models and parameters

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<PipelinesStepInputOutputMappingOptions> = [];
+    
+    // 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);
+        });
       })
     );
 

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;

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 {
+      if(op.type === "pipeline_parameter") {
-        value: "${"+op.stepName+".id}."+op.key,
+        return {
-        label: `${op.stepName}.${op.key}`,
+          value: "${pipeline." + op.key +"}",
-        type: op.type
+          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);

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