From 0d7561d050b3938fbfbe40905f0a594724f37644 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 4 Dec 2024 22:07:13 +0100
Subject: [PATCH] add panel for input nodes

---
 client/package.json                           |  1 +
 .../src/components/Panels/ActivityPanel.vue   | 11 ---
 client/src/components/Panels/InputPanel.vue   | 82 ++++++++++++++++++
 .../src/components/Workflow/Editor/Index.vue  | 45 ++++++----
 .../Workflow/Editor/modules/activities.ts     | 10 +++
 .../Workflow/Editor/modules/inputs.ts         | 84 +++++++++++++++++++
 client/yarn.lock                              | 12 +++
 lib/galaxy/webapps/galaxy/api/workflows.py    | 12 +--
 8 files changed, 223 insertions(+), 34 deletions(-)
 create mode 100644 client/src/components/Panels/InputPanel.vue
 create mode 100644 client/src/components/Workflow/Editor/modules/inputs.ts

diff --git a/client/package.json b/client/package.json
index b2a751ff3d94..de12b9f71852 100644
--- a/client/package.json
+++ b/client/package.json
@@ -66,6 +66,7 @@
     "elkjs": "^0.8.2",
     "file-saver": "^2.0.5",
     "flush-promises": "^1.0.2",
+    "font-awesome-6": "npm:@fortawesome/free-solid-svg-icons@6",
     "glob": "^10.3.10",
     "handsontable": "^4.0.0",
     "hsluv": "^1.0.1",
diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
index 20fb01d0d4ca..d97512c24cc5 100644
--- a/client/src/components/Panels/ActivityPanel.vue
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -79,17 +79,6 @@ const hasGoToAll = computed(() => props.goToAllTitle && props.href);
         flex-grow: 1;
         overflow-y: auto;
         position: relative;
-        button:first-child {
-            background: none;
-            border: none;
-            text-align: left;
-            transition: none;
-            width: 100%;
-            border-color: transparent;
-        }
-        button:first-child:hover {
-            background: $gray-200;
-        }
     }
 
     .activity-panel-footer {
diff --git a/client/src/components/Panels/InputPanel.vue b/client/src/components/Panels/InputPanel.vue
new file mode 100644
index 000000000000..f62dd45e5bf3
--- /dev/null
+++ b/client/src/components/Panels/InputPanel.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+import type { WorkflowInput } from "../Workflow/Editor/modules/inputs";
+
+import ActivityPanel from "./ActivityPanel.vue";
+
+const props = defineProps<{
+    inputs: WorkflowInput[];
+}>();
+
+const emit = defineEmits<{
+    (e: "insertModule", id: string, name: string, state: WorkflowInput["stateOverwrites"]): void;
+}>();
+</script>
+
+<template>
+    <ActivityPanel title="Inputs">
+        <div class="input-list">
+            <button
+                v-for="(input, index) in props.inputs"
+                :key="index"
+                class="workflow-input-button"
+                @click="emit('insertModule', input.id, input.title, input.stateOverwrites)">
+                <FontAwesomeIcon class="input-icon" fixed-width :icon="input.icon" />
+                <span class="input-title">{{ input.title }}</span>
+                <span class="input-description">{{ input.description }}</span>
+            </button>
+        </div>
+    </ActivityPanel>
+</template>
+
+<style lang="scss" scoped>
+@import "theme/blue.scss";
+
+.input-list {
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.workflow-input-button {
+    border-radius: 0.5rem;
+    border: 1px solid $gray-300;
+    background: transparent;
+
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+        "i t"
+        "d d";
+
+    text-align: left;
+    gap: 0.25rem;
+    align-items: center;
+
+    &:hover,
+    &:focus {
+        background-color: $gray-100;
+        border-color: $brand-primary;
+    }
+
+    &:active {
+        background-color: $gray-200;
+        border-color: $brand-primary;
+    }
+
+    .input-icon {
+        grid-area: i;
+    }
+
+    .input-title {
+        grid-area: t;
+        font-weight: bold;
+    }
+
+    .input-description {
+        grid-area: d;
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 5994cdaea67d..7f03c1e3773e 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -51,6 +51,10 @@
                     @onInsertModule="onInsertModule"
                     @onInsertWorkflow="onInsertWorkflow"
                     @onInsertWorkflowSteps="onInsertWorkflowSteps" />
+                <InputPanel
+                    v-if="isActiveSideBar('workflow-editor-inputs')"
+                    :inputs="inputs"
+                    @insertModule="onInsertModule" />
                 <WorkflowLint
                     v-else-if="isActiveSideBar('workflow-best-practices')"
                     :untyped-parameters="parameters"
@@ -205,6 +209,7 @@ import { InsertStepAction, useStepActions } from "./Actions/stepActions";
 import { CopyIntoWorkflowAction, SetValueActionHandler } from "./Actions/workflowActions";
 import { defaultPosition } from "./composables/useDefaultStepPosition";
 import { useActivityLogic, useSpecialWorkflowActivities, workflowEditorActivities } from "./modules/activities";
+import { getWorkflowInputs } from "./modules/inputs";
 import { fromSimple } from "./modules/model";
 import { getModule, getVersions, loadWorkflow, saveWorkflow } from "./modules/services";
 import { getStateUpgradeMessages } from "./modules/utilities";
@@ -220,6 +225,7 @@ import WorkflowAttributes from "./WorkflowAttributes.vue";
 import WorkflowGraph from "./WorkflowGraph.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
+import InputPanel from "@/components/Panels/InputPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
 import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
@@ -242,6 +248,7 @@ export default {
         UndoRedoStack,
         WorkflowPanel,
         NodeInspector,
+        InputPanel,
     },
     props: {
         workflowId: {
@@ -460,6 +467,7 @@ export default {
         );
 
         const { confirm } = useConfirmDialog();
+        const inputs = getWorkflowInputs();
 
         return {
             id,
@@ -504,6 +512,7 @@ export default {
             isNewTempWorkflow,
             saveWorkflowTitle,
             confirm,
+            inputs,
         };
     },
     data() {
@@ -657,8 +666,8 @@ export default {
         onInsertTool(tool_id, tool_name) {
             this._insertStep(tool_id, tool_name, "tool");
         },
-        onInsertModule(module_id, module_name) {
-            this._insertStep(module_name, module_name, module_id);
+        async onInsertModule(module_id, module_name, state) {
+            this._insertStep(module_name, module_name, module_id, state);
         },
         onInsertWorkflow(workflow_id, workflow_name) {
             this._insertStep(workflow_id, workflow_name, "subworkflow");
@@ -907,7 +916,7 @@ export default {
                 this._loadCurrent(this.id, version);
             }
         },
-        _insertStep(contentId, name, type) {
+        async _insertStep(contentId, name, type, state) {
             const action = new InsertStepAction(this.stepStore, this.stateStore, {
                 contentId,
                 name,
@@ -918,22 +927,24 @@ export default {
             this.undoRedoStore.applyAction(action);
             const stepData = action.getNewStepData();
 
-            getModule({ name, type, content_id: contentId }, stepData.id, this.stateStore.setLoadingState).then(
-                (response) => {
-                    const updatedStep = {
-                        ...stepData,
-                        tool_state: response.tool_state,
-                        inputs: response.inputs,
-                        outputs: response.outputs,
-                        config_form: response.config_form,
-                    };
+            const response = await getModule(
+                { name, type, content_id: contentId, tool_state: state },
+                stepData.id,
+                this.stateStore.setLoadingState
+            );
 
-                    this.stepStore.updateStep(updatedStep);
-                    action.updateStepData = updatedStep;
+            const updatedStep = {
+                ...stepData,
+                tool_state: response.tool_state,
+                inputs: response.inputs,
+                outputs: response.outputs,
+                config_form: response.config_form,
+            };
 
-                    this.stateStore.activeNodeId = stepData.id;
-                }
-            );
+            this.stepStore.updateStep(updatedStep);
+            action.updateStepData = updatedStep;
+
+            this.stateStore.activeNodeId = stepData.id;
         },
         async _loadEditorData(data) {
             if (data.name !== undefined) {
diff --git a/client/src/components/Workflow/Editor/modules/activities.ts b/client/src/components/Workflow/Editor/modules/activities.ts
index aed37909dea2..5a5534a4af0e 100644
--- a/client/src/components/Workflow/Editor/modules/activities.ts
+++ b/client/src/components/Workflow/Editor/modules/activities.ts
@@ -13,6 +13,7 @@ import {
     faWrench,
 } from "@fortawesome/free-solid-svg-icons";
 import { watchImmediate } from "@vueuse/core";
+import { faDiagramNext } from "font-awesome-6";
 import { computed, type Ref } from "vue";
 
 import { type Activity, useActivityStore } from "@/stores/activityStore";
@@ -27,6 +28,15 @@ export const workflowEditorActivities = [
         icon: faPencilAlt,
         visible: true,
     },
+    {
+        title: "Inputs",
+        id: "workflow-editor-inputs",
+        tooltip: "Add input steps to your workflow",
+        description: "Add input steps to your workflow.",
+        icon: faDiagramNext,
+        panel: true,
+        visible: true,
+    },
     {
         title: "Tools",
         id: "workflow-editor-tools",
diff --git a/client/src/components/Workflow/Editor/modules/inputs.ts b/client/src/components/Workflow/Editor/modules/inputs.ts
new file mode 100644
index 000000000000..1e299c4a5bd4
--- /dev/null
+++ b/client/src/components/Workflow/Editor/modules/inputs.ts
@@ -0,0 +1,84 @@
+import { faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
+import { faPencilAlt } from "@fortawesome/free-solid-svg-icons";
+import { type IconDefinition } from "font-awesome-6";
+
+export interface WorkflowInput {
+    id: string;
+    title: string;
+    description: string;
+    stateOverwrites?: {
+        parameter_type?: "text" | "integer" | "boolean" | "color" | "float" | "directory_uri";
+    };
+    icon: IconDefinition;
+}
+
+export function getWorkflowInputs(): WorkflowInput[] {
+    return [
+        {
+            id: "data_input",
+            title: "Input Dataset",
+            description: "Single dataset input",
+            icon: faFile,
+        },
+        {
+            id: "data_collection_input",
+            title: "Input Dataset Collection",
+            description: "Input for a collection of datasets",
+            icon: faFolder,
+        },
+        {
+            id: "parameter_input",
+            title: "Text Input",
+            description: "Text parameter used for workflow logic",
+            icon: faPencilAlt,
+            stateOverwrites: {
+                parameter_type: "text",
+            },
+        },
+        {
+            id: "parameter_input",
+            title: "Integer Input",
+            description: "Whole number parameter used for workflow logic",
+            icon: faPencilAlt,
+            stateOverwrites: {
+                parameter_type: "integer",
+            },
+        },
+        {
+            id: "parameter_input",
+            title: "Float Input",
+            description: "Imprecise decimal number parameter used for workflow logic",
+            icon: faPencilAlt,
+            stateOverwrites: {
+                parameter_type: "float",
+            },
+        },
+        {
+            id: "parameter_input",
+            title: "Boolean Input",
+            description: "True / False parameter used for workflow logic",
+            icon: faPencilAlt,
+            stateOverwrites: {
+                parameter_type: "boolean",
+            },
+        },
+        {
+            id: "parameter_input",
+            title: "Color Input",
+            description: "Color parameter used for workflow logic",
+            icon: faPencilAlt,
+            stateOverwrites: {
+                parameter_type: "color",
+            },
+        },
+        {
+            id: "parameter_input",
+            title: "Directory Input",
+            description: "Directory parameter used for workflow logic",
+            icon: faPencilAlt,
+            stateOverwrites: {
+                parameter_type: "directory_uri",
+            },
+        },
+    ];
+}
diff --git a/client/yarn.lock b/client/yarn.lock
index 63fb0ca4c55e..cd6c4bf5f55a 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1456,6 +1456,11 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz#411e02a820744d3f7e0d8d9df9d82b471beaa073"
   integrity sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==
 
+"@fortawesome/fontawesome-common-types@6.7.1":
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.1.tgz#6201640f39fdcf8e41cd9d1a92b2da3a96817fa4"
+  integrity sha512-gbDz3TwRrIPT3i0cDfujhshnXO9z03IT1UKRIVi/VEjpNHtSBIP2o5XSm+e816FzzCFEzAxPw09Z13n20PaQJQ==
+
 "@fortawesome/fontawesome-common-types@^0.2.36":
   version "0.2.36"
   resolved "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz"
@@ -6335,6 +6340,13 @@ follow-redirects@^1.0.0, follow-redirects@^1.15.6:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
   integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
 
+"font-awesome-6@npm:@fortawesome/free-solid-svg-icons@6":
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.1.tgz#c1f9a6c25562a12c283e87e284f9d82a5b0dbcc0"
+  integrity sha512-BTKc0b0mgjWZ2UDKVgmwaE0qt0cZs6ITcDgjrti5f/ki7aF5zs+N91V6hitGo3TItCFtnKg6cUVGdTmBFICFRg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.7.1"
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
diff --git a/lib/galaxy/webapps/galaxy/api/workflows.py b/lib/galaxy/webapps/galaxy/api/workflows.py
index 9348e25a977b..b52d495d40e6 100644
--- a/lib/galaxy/webapps/galaxy/api/workflows.py
+++ b/lib/galaxy/webapps/galaxy/api/workflows.py
@@ -531,12 +531,12 @@ def build_module(self, trans: GalaxyWebTransaction, payload=None):
         inputs = payload.get("inputs", {})
         trans.workflow_building_mode = workflow_building_modes.ENABLED
         module = module_factory.from_dict(trans, payload, from_tool_form=True)
-        if "tool_state" not in payload:
-            module_state: Dict[str, Any] = {}
-            errors: ParameterValidationErrorsT = {}
-            populate_state(trans, module.get_inputs(), inputs, module_state, errors=errors, check=True)
-            module.recover_state(module_state, from_tool_form=True)
-            module.check_and_update_state()
+
+        module_state: Dict[str, Any] = {}
+        errors: ParameterValidationErrorsT = {}
+        populate_state(trans, module.get_inputs(), inputs, module_state, errors=errors, check=True)
+        module.recover_state(module_state, from_tool_form=True)
+        module.check_and_update_state()
         step_dict = {
             "name": module.get_name(),
             "tool_state": module_state,