From 1554aa1aed07e7d35da4266c8f2c04b939ead657 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 9 Dec 2024 14:49:31 -0600
Subject: [PATCH] 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    |   8 +-
 client/src/components/Form/FormInputs.vue     |  34 ++++-
 .../src/components/Workflow/Editor/Node.vue   |  24 +++-
 .../Workflow/Editor/WorkflowGraph.vue         |   2 +
 .../Workflow/Run/WorkflowRunFormSimple.vue    |  37 +++--
 .../Workflow/Run/WorkflowRunGraph.vue         | 130 ++++++++++++++++++
 .../Workflow/Run/WorkflowRunInfo.vue          |  74 ----------
 7 files changed, 213 insertions(+), 96 deletions(-)
 create mode 100644 client/src/components/Workflow/Run/WorkflowRunGraph.vue
 delete mode 100644 client/src/components/Workflow/Run/WorkflowRunInfo.vue

diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index 5975714adfcf..b0d447512844 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/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 {
diff --git a/client/src/components/Form/FormInputs.vue b/client/src/components/Form/FormInputs.vue
index ac33c22034b5..a64fb7ebf5a8 100644
--- a/client/src/components/Form/FormInputs.vue
+++ b/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>
diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index 1f4085242a70..a78b89b825b0 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/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,
     };
 });
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index d5801e74a652..bfa7bb2974c5 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/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();
diff --git a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
index dccce0edffcb..bd124ee1f6b1 100644
--- a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
+++ b/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>
diff --git a/client/src/components/Workflow/Run/WorkflowRunGraph.vue b/client/src/components/Workflow/Run/WorkflowRunGraph.vue
new file mode 100644
index 000000000000..f7c6b732ae3d
--- /dev/null
+++ b/client/src/components/Workflow/Run/WorkflowRunGraph.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { faCheckCircle, faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
+import { BAlert, BCard } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { ref, set, watch } from "vue";
+
+import { getWorkflowFull } from "@/components/Workflow/workflows.services";
+import { getHeaderClass } from "@/composables/useInvocationGraph";
+import { provideScopedWorkflowStores } from "@/composables/workflowStores";
+import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+import { isWorkflowInput } from "../constants";
+import { fromSimple } from "../Editor/modules/model";
+
+import Heading from "@/components/Common/Heading.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
+
+interface Input {
+    batch: boolean;
+    product: boolean;
+    values: { id: string; src: "dce" | "hda" | "hdca" | "ldda"; map_over_type: string }[];
+}
+
+interface Props {
+    workflowId: string;
+    storedId: string;
+    version: number;
+    inputs: Record<string, Input | null>;
+    formInputs: any[];
+}
+
+const props = defineProps<Props>();
+
+const hasLoadedGraph = ref(false);
+const errorMessage = ref<string | null>(null);
+const loadedWorkflow = ref<any | null>(null);
+
+const { stateStore } = provideScopedWorkflowStores(props.workflowId);
+const { activeNodeId } = storeToRefs(stateStore);
+
+const datatypesMapperStore = useDatatypesMapperStore();
+const { datatypesMapper, loading: datatypesMapperLoading } = storeToRefs(datatypesMapperStore);
+
+watch(
+    () => props.workflowId,
+    async () => {
+        try {
+            loadedWorkflow.value = await getWorkflowFull(props.workflowId, props.version);
+
+            syncStepsWithInputVals();
+
+            await fromSimple(props.workflowId, loadedWorkflow.value);
+        } catch (error) {
+            errorMessage.value = errorMessageAsString(error);
+        } finally {
+            hasLoadedGraph.value = true;
+        }
+    },
+    { immediate: true }
+);
+
+/** Sync the workflow graph steps with the current input values */
+function syncStepsWithInputVals() {
+    if (!loadedWorkflow.value?.steps) {
+        return;
+    }
+    for (const s of Object.values(loadedWorkflow.value?.steps)) {
+        const step = s as any;
+        if (isWorkflowInput(step.type)) {
+            const dataInput = props.inputs[step.id.toString()];
+            const inputVals = dataInput?.values;
+
+            const formInput = props.formInputs.find((input) => parseInt(input.name) === step.id);
+            const options = formInput?.options;
+
+            if (inputVals?.length === 1 && inputVals[0]) {
+                const { id, src } = inputVals[0];
+                const item = options[src].find((option: any) => option.id === id);
+                set(step, "nodeText", `${item.hid}: <b>${item.name}</b>`);
+                set(step, "headerClass", getHeaderClass("ok"));
+                set(step, "headerIcon", faCheckCircle);
+            } else if (inputVals?.length) {
+                set(step, "nodeText", `${inputVals.length} inputs provided`);
+                set(step, "headerClass", getHeaderClass("ok"));
+                set(step, "headerIcon", faCheckCircle);
+            } else {
+                set(step, "nodeText", "Populate this input");
+
+                // color variant for `running` state works best
+                set(step, "headerClass", getHeaderClass("running"));
+                set(step, "headerIcon", faExclamationCircle);
+            }
+        }
+    }
+}
+
+watch(
+    () => props.inputs,
+    () => {
+        syncStepsWithInputVals();
+    }
+);
+</script>
+
+<template>
+    <BAlert v-if="errorMessage" variant="danger" show>
+        {{ errorMessage }}
+    </BAlert>
+    <BAlert v-else-if="datatypesMapperLoading || !loadedWorkflow" variant="info" show>
+        <LoadingSpan message="Loading workflow" />
+        {{ datatypesMapperLoading ? "mapperLoading" : "mapper loaded" }}
+    </BAlert>
+    <div v-else-if="datatypesMapper && hasLoadedGraph">
+        <Heading h2 separator bold size="sm"> Graph </Heading>
+        <BCard class="workflow-preview mx-1">
+            <WorkflowGraph
+                v-if="loadedWorkflow.steps"
+                :steps="loadedWorkflow.steps"
+                :datatypes-mapper="datatypesMapper"
+                :scroll-to-id="activeNodeId"
+                fixed-height
+                populated-inputs
+                show-minimap
+                show-zoom-controls
+                readonly />
+        </BCard>
+    </div>
+</template>
diff --git a/client/src/components/Workflow/Run/WorkflowRunInfo.vue b/client/src/components/Workflow/Run/WorkflowRunInfo.vue
deleted file mode 100644
index 01d8f784d9a9..000000000000
--- a/client/src/components/Workflow/Run/WorkflowRunInfo.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup lang="ts">
-import { BAlert, BCard } from "bootstrap-vue";
-import { storeToRefs } from "pinia";
-import { ref } from "vue";
-
-import { getWorkflowFull } from "@/components/Workflow/workflows.services";
-import { useDatatypesMapper } from "@/composables/datatypesMapper";
-import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
-import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
-import { errorMessageAsString } from "@/utils/simple-error";
-
-import Heading from "@/components/Common/Heading.vue";
-import LoadingSpan from "@/components/LoadingSpan.vue";
-import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
-
-interface Props {
-    workflowId: string;
-    storedId: string;
-    version: number;
-}
-
-const props = defineProps<Props>();
-
-const { workflow } = useWorkflowInstance(props.storedId);
-
-const { datatypesMapper } = useDatatypesMapper();
-
-const loadingWorkflow = ref(true);
-const errorLoadingWorkflow = ref<string | null>(null);
-const loadedWorkflow = ref<any | null>(null);
-
-const { activeNodeId } = storeToRefs(useWorkflowStateStore(props.workflowId));
-
-loadWorkflow();
-
-async function loadWorkflow() {
-    try {
-        loadedWorkflow.value = await getWorkflowFull(props.workflowId, props.version);
-    } catch (error) {
-        errorLoadingWorkflow.value = errorMessageAsString(error);
-    } finally {
-        loadingWorkflow.value = false;
-    }
-}
-
-function toggleActiveStep(stepId: number) {
-    if (activeNodeId.value === stepId) {
-        activeNodeId.value = null;
-    } else {
-        activeNodeId.value = stepId;
-    }
-}
-</script>
-
-<template>
-    <BAlert v-if="loadingWorkflow" variant="info" show>
-        <LoadingSpan message="Loading workflow" />
-    </BAlert>
-    <BAlert v-else-if="errorLoadingWorkflow" variant="danger" show>
-        {{ errorLoadingWorkflow }}
-    </BAlert>
-    <div v-else-if="workflow && loadedWorkflow && datatypesMapper">
-        <Heading size="md" separator>Description</Heading>
-        <BCard class="workflow-preview">
-            <WorkflowGraph
-                :steps="loadedWorkflow.steps"
-                :datatypes-mapper="datatypesMapper"
-                fixed-height
-                show-minimap
-                show-zoom-controls
-                readonly />
-        </BCard>
-    </div>
-</template>