[WIP] Workflow Run Form Enhancements

client/src/components/Form/FormDisplay.vue

@@ -12,7 +12,10 @@
         :collapsed-disable-icon="collapsedDisableIcon"
         :on-change="onChange"
         :on-change-form="onChangeForm"
-        :workflow-building-mode="workflowBuildingMode" />
+        :workflow-building-mode="workflowBuildingMode"
+        :active-node-id="activeNodeId"
+        :sync-with-graph="syncWithGraph"
+        @update:active-node-id="($event) => $emit('update:active-node-id', $event)" />
 </template>
 
 <script>
@@ -90,6 +93,14 @@ export default {
             type: Boolean,
             default: false,
         },
+        activeNodeId: {
+            type: Number,
+            default: null,
+        },
+        syncWithGraph: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {

client/src/components/Form/FormInputs.vue

@@ -1,6 +1,22 @@
 <template>
     <div>
-        <div v-for="(input, index) in inputs" :key="index">
+        <div
+            v-for="(input, index) in inputs"
+            :key="index"
+            class="position-relative"
+            :class="{ 'bordered-input': syncWithGraph && activeNodeId === index }">
+            <b-button
+                v-if="syncWithGraph"
+                class="position-absolute text-decoration-none"
+                :style="{ 'z-index': 100, right: 0 }"
+                size="sm"
+                variant="link"
+                :title="activeNodeId === index ? 'Active' : 'View in Graph'"
+                :disabled="activeNodeId === index"
+                @click="$emit('update:active-node-id', index)">
+                <span class="fas fa-sitemap" />
+                <span class="fas fa-arrow-right" />
+            </b-button>
             <div v-if="input.type == 'conditional'" class="ui-portlet-section mt-3">
                 <div class="portlet-header">
                     <b>{{ input.test_param.label || input.test_param.name }}</b>
@@ -131,6 +147,24 @@ export default {
             type: Boolean,
             default: false,
         },
+        activeNodeId: {
+            type: Number,
+            default: null,
+        },
+        syncWithGraph: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    watch: {
+        activeNodeId() {
+            // if (this.activeNodeId !== null) {
+            //     const formInput = this.$el.querySelector(".bordered-input");
+            //     formInput?.scrollIntoView({ behavior: "smooth" });
+            // }
+            // TODO: Uncomment the above code to make this work
+            //       Doesn't quite scroll well, will need to improve that
+        },
     },
     methods: {
         getPrefix(name, index) {
@@ -170,3 +204,10 @@ export default {
     },
 };
 </script>
+
+<style scoped>
+.bordered-input {
+    border: 1px solid blue;
+    border-radius: 0.25rem;
+}
+</style>

client/src/components/Workflow/Editor/Node.vue

@@ -82,7 +82,7 @@
             <span class="node-title">{{ title }}</span>
             <span class="float-right">
                 <FontAwesomeIcon
-                    v-if="isInvocation && invocationStep.headerIcon"
+                    v-if="(isInvocation || isPopulatedInput) && invocationStep.headerIcon"
                     :icon="invocationStep.headerIcon"
                     :spin="invocationStep.headerIconSpin" />
             </span>
@@ -101,7 +101,7 @@
         <div
             v-else
             class="node-body position-relative card-body p-0 mx-2"
-            :class="{ 'cursor-pointer': isInvocation }"
+            :class="{ 'cursor-pointer': isInvocation || isPopulatedInput }"
             @pointerdown.exact="onPointerDown"
             @pointerup.exact="onPointerUp"
             @click.shift.capture.prevent.stop="toggleSelected"
@@ -122,15 +122,15 @@
                 :readonly="readonly"
                 @onChange="onChange" />
             <div v-if="!isInvocation && showRule" class="rule" />
-            <NodeInvocationText v-if="isInvocation" :invocation-step="invocationStep" />
+            <NodeInvocationText v-if="isInvocation || isPopulatedInput" :invocation-step="invocationStep" />
             <NodeOutput
                 v-for="(output, index) in outputs"
                 :key="`out-${index}-${output.name}`"
-                :class="isInvocation && 'invocation-node-output'"
+                :class="(isInvocation || isPopulatedInput) && 'invocation-node-output'"
                 :output="output"
                 :workflow-outputs="workflowOutputs"
                 :post-job-actions="postJobActions"
-                :blank="isInvocation"
+                :blank="isInvocation || isPopulatedInput"
                 :step-id="id"
                 :step-type="step.type"
                 :step-position="step.position ?? { top: 0, left: 0 }"
@@ -167,6 +167,7 @@ import { useWorkflowNodeInspectorStore } from "@/stores/workflowNodeInspectorSto
 import type { Step } from "@/stores/workflowStepStore";
 import { composedPartialPath, isClickable } from "@/utils/dom";
 
+import { isWorkflowInput } from "../constants";
 import { ToggleStepSelectedAction } from "./Actions/stepActions";
 import type { OutputTerminals } from "./modules/terminals";
 
@@ -198,6 +199,7 @@ const props = defineProps({
     highlight: { type: Boolean, default: false },
     isInvocation: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
+    populatedInputs: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -246,6 +248,14 @@ const isEnabled = getGalaxyInstance().config.enable_tool_recommendations; // get
 
 const isActive = computed(() => props.id === props.activeNodeId);
 
+const isPopulatedInput = computed(
+    () =>
+        props.populatedInputs &&
+        isWorkflowInput(props.step.type) &&
+        "nodeText" in props.step &&
+        props.step.nodeText !== undefined
+);
+
 const classes = computed(() => {
     return {
         "node-on-scroll-to": scrolledTo.value,
@@ -264,8 +274,8 @@ const errors = computed(() => props.step.errors || stateStore.getStepLoadingStat
 const headerClass = computed(() => {
     return {
         ...invocationStep.value.headerClass,
-        "cursor-pointer": props.isInvocation,
-        "node-header": !props.isInvocation || invocationStep.value.headerClass === undefined,
+        "cursor-pointer": props.isInvocation || isPopulatedInput.value,
+        "node-header": invocationStep.value.headerClass === undefined,
         "cursor-move": !props.readonly && !props.isInvocation,
     };
 });

client/src/components/Workflow/Editor/WorkflowGraph.vue

@@ -11,7 +11,7 @@
             id="canvas-container"
             ref="canvas"
             class="canvas-content"
-            :class="props.isInvocation ? 'fixed-window-height' : 'h-100'"
+            :class="props.fixedHeight ? 'fixed-window-height' : 'h-100'"
             @drop.prevent
             @dragover.prevent>
             <AdaptiveGrid
@@ -39,6 +39,7 @@
                     :scale="scale"
                     :readonly="readonly"
                     :is-invocation="props.isInvocation"
+                    :populated-inputs="props.populatedInputs"
                     @pan-by="panBy"
                     @stopDragging="onStopDragging"
                     @onDragConnector="onDragConnector"
@@ -104,6 +105,8 @@ const props = defineProps({
     isInvocation: { type: Boolean, default: false },
     showMinimap: { type: Boolean, default: true },
     showZoomControls: { type: Boolean, default: true },
+    fixedHeight: { type: Boolean, default: false },
+    populatedInputs: { type: Boolean, default: false },
 });
 
 const { stateStore, stepStore } = useWorkflowStores();

client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue

@@ -180,6 +180,7 @@ function stepClicked(nodeId: number | null) {
                             :scroll-to-id="activeNodeId"
                             :show-minimap="props.showMinimap"
                             :show-zoom-controls="props.showZoomControls"
+                            fixed-height
                             is-invocation
                             readonly
                             @stepClicked="stepClicked" />

client/src/components/Workflow/Run/WorkflowRun.vue

@@ -179,7 +179,7 @@ defineExpose({
                 v-else-if="invocations.length > 0"
                 :invocations="invocations"
                 :workflow-name="workflowName" />
-            <div v-else class="ui-form-composite">
+            <div v-else>
                 <BAlert
                     v-if="hasUpgradeMessages || hasStepVersionChanges"
                     class="mb-4"