have a functioning side by side inputs w/graph run form

The input values are synced with the graph

client/src/components/Form/FormDisplay.vue

@@ -13,7 +13,9 @@
         :on-change="onChange"
         :on-change-form="onChangeForm"
         :workflow-building-mode="workflowBuildingMode"
-        :active-node-id="activeNodeId" />
+        :active-node-id="activeNodeId"
+        :sync-with-graph="syncWithGraph"
+        @update:active-node-id="($event) => $emit('update:active-node-id', $event)" />
 </template>
 
 <script>
@@ -95,6 +97,10 @@ export default {
             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" :class="{ 'bordered-input': activeNodeId === 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>
@@ -135,6 +151,20 @@ export default {
             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) {
@@ -179,7 +209,5 @@ export default {
 .bordered-input {
     border: 1px solid blue;
     border-radius: 0.25rem;
-    padding: 0.5rem;
-    margin: 0.5rem 0;
 }
 </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

@@ -39,6 +39,7 @@
                     :scale="scale"
                     :readonly="readonly"
                     :is-invocation="props.isInvocation"
+                    :populated-inputs="props.populatedInputs"
                     @pan-by="panBy"
                     @stopDragging="onStopDragging"
                     @onDragConnector="onDragConnector"
@@ -105,6 +106,7 @@ const props = defineProps({
     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/Run/WorkflowRunFormSimple.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { BAlert, BDropdown, BDropdownForm, BFormCheckbox } from "bootstrap-vue";
+import { faSitemap } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BDropdown, BDropdownForm, BFormCheckbox } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, set } from "vue";
 
 import { allowCachedJobs } from "@/components/Tool/utilities";
 import { isWorkflowInput } from "@/components/Workflow/constants";
 import { useConfig } from "@/composables/config";
-import { provideScopedWorkflowStores } from "@/composables/workflowStores";
+import { usePanels } from "@/composables/usePanels";
 import { useUserStore } from "@/stores/userStore";
 import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
 import { errorMessageAsString } from "@/utils/simple-error";
@@ -15,10 +17,10 @@ import { invokeWorkflow } from "./services";
 
 import WorkflowAnnotation from "../WorkflowAnnotation.vue";
 import WorkflowNavigationTitle from "../WorkflowNavigationTitle.vue";
-import WorkflowRunInfo from "./WorkflowRunInfo.vue";
+import WorkflowRunGraph from "./WorkflowRunGraph.vue";
 import WorkflowStorageConfiguration from "./WorkflowStorageConfiguration.vue";
+import Heading from "@/components/Common/Heading.vue";
 import FormDisplay from "@/components/Form/FormDisplay.vue";
-import FlexPanel from "@/components/Panels/FlexPanel.vue";
 
 interface Props {
     model: Record<string, any>;
@@ -40,12 +42,11 @@ const emit = defineEmits<{
     (e: "submissionError", error: string): void;
 }>();
 
-provideScopedWorkflowStores(props.model.workflowId);
-
 const { activeNodeId } = storeToRefs(useWorkflowStateStore(props.model.workflowId));
 
 const { config, isConfigLoaded } = useConfig(true);
 const { currentUser } = storeToRefs(useUserStore());
+const { showPanels } = usePanels();
 
 const formData = ref<Record<string, any>>({});
 const inputTypes = ref<Record<string, string>>({});
@@ -56,6 +57,7 @@ const splitObjectStore = ref(false);
 const preferredObjectStoreId = ref<string | null>(null);
 const preferredIntermediateObjectStoreId = ref<string | null>(null);
 const waitingForRequest = ref(false);
+const showGraph = ref(!showPanels.value);
 
 const formInputs = computed(() => {
     const inputs = [] as any[];
@@ -194,6 +196,15 @@ async function onExecute() {
                 :run-waiting="waitingForRequest"
                 @on-execute="onExecute">
                 <template v-slot:workflow-title-actions>
+                    <BButton
+                        v-b-tooltip.hover.noninteractive.html
+                        size="sm"
+                        :title="!showGraph ? 'Show workflow graph' : 'Hide workflow graph'"
+                        variant="link"
+                        :pressed="showGraph"
+                        @click="showGraph = !showGraph">
+                        <FontAwesomeIcon :icon="faSitemap" fixed-width />
+                    </BButton>
                     <BDropdown
                         v-if="showRuntimeSettings(currentUser)"
                         id="dropdown-form"
@@ -237,10 +248,12 @@ async function onExecute() {
         <WorkflowAnnotation :workflow-id="model.runData.workflow_id" :history-id="model.historyId" show-details />
 
         <div ref="runFormContainer" class="d-flex">
-            <div class="w-100 overflow-auto">
+            <div class="overflow-auto" :class="!showGraph ? 'w-100' : 'w-50'">
+                <Heading h2 separator bold size="sm"> Parameters </Heading>
                 <FormDisplay
                     :inputs="formInputs"
                     :allow-empty-value-on-required-input="true"
+                    :sync-with-graph="showGraph"
                     :active-node-id.sync="activeNodeId"
                     @onChange="onChange"
                     @onValidation="onValidation" />
@@ -249,13 +262,15 @@ async function onExecute() {
                     Expand to full workflow form.
                 </a>
             </div>
-            <FlexPanel side="right">
-                <WorkflowRunInfo
+            <div v-show="showGraph" class="w-50">
+                <WorkflowRunGraph
                     v-if="isConfigLoaded"
                     :workflow-id="model.workflowId"
                     :stored-id="model.runData.workflow_id"
-                    :version="model.runData.version" />
-            </FlexPanel>
+                    :version="model.runData.version"
+                    :inputs="formData"
+                    :form-inputs="formInputs" />
+            </div>
         </div>
     </div>
 </template>