Use pipeline default values and user inputs for execution

Author: Bernard Valentin

frontend/src/components/PipelineCreationPanel.vue

@@ -73,7 +73,7 @@
                   <v-list-item
                     v-bind="props"
                     :title="item.raw.name"
-                    class="d-flex flex-row align-stretch"
+                    class="d-flex flex-row align-stretch font-weight-bold"
                   >
                     <template v-slot:prepend>
                       <v-icon
@@ -83,7 +83,7 @@
                     </template>
                     <!-- eslint-disable vue/no-v-text-v-html-on-component -->
                     <v-list-item-subtitle
-                      class="text-wrap"
+                      class="text-wrap font-weight-light"
                       v-html="item.raw.description"
                     />
                   </v-list-item>
@@ -370,13 +370,6 @@ export default {
             typeof tool === 'object' ? tool.slug : tool,
           ),
           default_inputs: defaultInputs,
-          // "clone_subwokflow": {
-          //     "clone": {
-          //         "repo_branch": {
-          //             "default": "main"
-          //         }
-          //     }
-          // }
         };
         const response = await pipelineService.createPipeline(data);
         // The panel is closed when the parent component receives this signal

frontend/src/components/PipelineExecutionPanel.vue

@@ -37,7 +37,7 @@
               <tool-inputs-card
                 v-if="toolStore.hasToolUserParams(init_tool_id)"
                 :toolId="init_tool_id"
-                :toolParams.sync="pipeline.init_params[init_tool_id]"
+                :toolParams="pipeline.default_inputs[init_tool_id]"
                 @update:toolParams="
                   (toolId, toolParams) => updateToolParams(toolId, toolParams)
                 "
@@ -68,7 +68,7 @@
               <tool-inputs-card
                 v-if="toolStore.hasToolUserParams(tool_id)"
                 :toolId="tool_id"
-                :toolParams.sync="pipeline.user_params[tool_id]"
+                :toolParams="pipeline.default_inputs[tool_id]"
                 @update:toolParams="
                   (toolId, toolParams) => updateToolParams(toolId, toolParams)
                 "
@@ -125,7 +125,6 @@ export default {
       localModelValue: null,
       localPipeline: null,
       localVisible: false,
-      toolInputsCardProperties: {},
     };
   },
 
@@ -162,7 +161,7 @@ export default {
 
   methods: {
     resetForm() {
-      // console.log('Re-initialising the execution form');
+      // console.log('Re-initialising the pipeline execution form');
       this.error = null;
       this.localModelValue = this.modelValue
         ? JSON.parse(JSON.stringify(this.modelValue))
@@ -179,18 +178,49 @@ export default {
     },
 
     updateToolParams(toolId, toolParams) {
-      console.log('Received update:toolParams event:', toolId, toolParams);
+      console.log(
+        'Received "update:toolParams" event:',
+        toolId,
+        toolParams,
+        this.localModelValue,
+      );
+      // Update the localModelValue
+      this.localModelValue.parameters[toolId] = toolParams;
     },
 
     async submitExecution() {
       if (!this.isValid) return;
       this.loading = true;
       this.error = null;
       try {
-        console.log('Pipeline to execute:', this.pipeline);
+        console.log(
+          'Pipeline to execute:',
+          this.pipeline,
+          this.localModelValue,
+        );
+        var execParams = {};
+        for (var toolId in this.localModelValue.parameters) {
+          console.log('Tool:', toolId);
+          execParams[toolId] = {};
+          for (var stepId in this.localModelValue.parameters[toolId]) {
+            console.log('  Step:', stepId);
+            execParams[toolId][stepId] = {};
+            for (var paramId in this.localModelValue.parameters[toolId][
+              stepId
+            ]) {
+              console.log('    Param:', paramId);
+              execParams[toolId][stepId][paramId] =
+                this.localModelValue.parameters[toolId][stepId][
+                  paramId
+                ].default;
+              console.log('    Value:', execParams[toolId][stepId][paramId]);
+            }
+          }
+        }
         const response = await pipelineService.executePipeline(
           this.pipeline.id,
-          this.localModelValue,
+          //this.localModelValue,
+          { parameters: execParams },
         );
         // The panel is closed when the parent component receives this signal
         this.$emit('execution-submitted', response);

frontend/src/components/ToolInputsCard.vue

@@ -4,8 +4,8 @@
       v-if="localToolId && toolStore.hasToolUserParams(localToolId)"
       elevation="3"
       class="mb-4"
-      color="indigo"
-      variant="tonal"
+      color="info"
+      variant="outlined"
     >
       <!-- indigo / tonal -->
       <v-card-title v-if="toolStore.isInitTool(localToolId)">
@@ -21,7 +21,12 @@
         v-for="(step_params, step_id) in localToolParams"
         :key="step_id"
       >
-        <v-card elevation="3" class="mb-2" color="white">
+        <v-card
+          elevation="3"
+          class="mb-2"
+          color="black lighten-4"
+          variant="tonal"
+        >
           <v-card-title v-if="step_params">Step: {{ step_id }}</v-card-title>
           <v-card-text v-for="(param, param_id) in step_params" :key="param_id">
             <!-- CWL input types: string, boolean, int, long, float, double, and null -->

frontend/src/stores/pipelines.js

@@ -112,7 +112,7 @@ export const usePipelineStore = defineStore('pipeline', {
     },
 
     pipelineById(id) {
-      console.log('Pipelines in store:', this.pipelines);
+      // console.log('Pipelines in store:', this.pipelines);
       if (id == null || id == undefined) id = this.selectedPipelineId;
       if (id == null || id == undefined) {
         console.log('Bad request: not pipeline Id provided');
@@ -121,7 +121,7 @@ export const usePipelineStore = defineStore('pipeline', {
       const pipelines = this.pipelines.filter((pipeline) => {
         return pipeline.id == id;
       });
-      console.log('Pipelines with id:', id, pipelines);
+      // console.log('Pipelines with id:', id, pipelines);
       if (pipelines.length != 0) {
         return pipelines[0];
       }