From 81c9f22548fbfb7313bf4febda98c89a4522f857 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 4 Dec 2024 14:34:15 +0100
Subject: [PATCH 1/9] Updates LicenseSelector props type

Changes licenseId and inputLicense to optional types
Updates event emission to handle optional license (no license)
---
 client/src/components/License/LicenseSelector.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/components/License/LicenseSelector.vue b/client/src/components/License/LicenseSelector.vue
index a9f55d621e1c..a18810c3b4a2 100644
--- a/client/src/components/License/LicenseSelector.vue
+++ b/client/src/components/License/LicenseSelector.vue
@@ -12,24 +12,23 @@ import License from "@/components/License/License.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const defaultLicense: LicenseType = {
-    licenseId: null,
     name: "*Do not specify a license.*",
 };
 
 type LicenseMetadataModel = components["schemas"]["LicenseMetadataModel"];
 type LicenseType = {
-    licenseId: string | null;
+    licenseId?: string;
     name: string;
 };
 
 interface Props {
-    inputLicense: string;
+    inputLicense?: string;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "onLicense", license: string | null): void;
+    (e: "onLicense", license?: string): void;
 }>();
 
 const licensesLoading = ref(false);

From 19600e7709e3cc1e7a8af1816cd78358b527f4d3 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 4 Dec 2024 14:35:01 +0100
Subject: [PATCH 2/9] Updates defaultPosition function parameter type

Changes the type of the 'transform' parameter in the defaultPosition function to use a more specific type, improving type safety and clarity.
---
 .../Workflow/Editor/composables/useDefaultStepPosition.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/Editor/composables/useDefaultStepPosition.ts b/client/src/components/Workflow/Editor/composables/useDefaultStepPosition.ts
index 18d3f2dff8a5..d4e68838a16c 100644
--- a/client/src/components/Workflow/Editor/composables/useDefaultStepPosition.ts
+++ b/client/src/components/Workflow/Editor/composables/useDefaultStepPosition.ts
@@ -15,7 +15,7 @@ const MAX_OFFSET_SHIFT_X = MAX_OFFSET - NODE_WIDTH / 2;
 const MIN_OFFSET_SHIFT_Y = MIN_OFFSET - NODE_HEIGHT / 2;
 const MAX_OFFSET_SHIFT_Y = MAX_OFFSET - NODE_HEIGHT / 2;
 
-export function defaultPosition(rootOffset: ElementBounding, transform: ZoomTransform) {
+export function defaultPosition(rootOffset: ElementBounding, transform: Pick<ZoomTransform, "x" | "y" | "k">) {
     const left =
         (-transform.x + rootOffset.width / 2 + randomInteger(MIN_OFFSET_SHIFT_X, MAX_OFFSET_SHIFT_X)) / transform.k;
     const top =

From 3d3d37a561fc783bdedfd7551d4c873f1092bb00 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 4 Dec 2024 14:36:04 +0100
Subject: [PATCH 3/9] Migrates WorkflowEditor to typescript

Refactors WorkflowEditor component to use Vue 3's script setup syntax
Improves route query handling and editor configuration loading
---
 .../entry/analysis/modules/WorkflowEditor.vue | 134 ++++++++++--------
 1 file changed, 73 insertions(+), 61 deletions(-)

diff --git a/client/src/entry/analysis/modules/WorkflowEditor.vue b/client/src/entry/analysis/modules/WorkflowEditor.vue
index fb8ed6eea9d5..56a8dd718182 100644
--- a/client/src/entry/analysis/modules/WorkflowEditor.vue
+++ b/client/src/entry/analysis/modules/WorkflowEditor.vue
@@ -1,5 +1,76 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { getQueryValue } from "@/utils/route";
+import { urlData } from "@/utils/url";
+
+import NewEditor from "@/components/Workflow/Editor/NewEditor.vue";
+
+const router = useRouter();
+
+const emit = defineEmits<{
+    (e: "update:confirmation", confirmation: boolean): void;
+}>();
+
+const storedWorkflowId = ref<string | undefined>();
+const workflowId = ref<string | undefined>();
+const version = ref<number | undefined>();
+const editorReloadKey = ref(0);
+const editorConfig = ref<{
+    id: string;
+    dataManagers: any[];
+    initialVersion: number;
+    moduleSections: any[];
+    tags: any[];
+    workflows: any[];
+}>();
+
+async function getEditorConfig() {
+    let reloadEditor = true;
+
+    // this will only be the case the first time the route updates from a new workflow
+    if (!storedWorkflowId.value && !workflowId.value) {
+        reloadEditor = false;
+    }
+
+    storedWorkflowId.value = getQueryValue("id");
+    workflowId.value = getQueryValue("workflow_id");
+    version.value = parseInt(getQueryValue("version") || "", 10);
+
+    const params: {
+        id?: string;
+        version?: string;
+        workflow_id?: string;
+    } = {};
+
+    if (workflowId.value) {
+        params.workflow_id = workflowId.value.toString();
+    } else if (storedWorkflowId.value) {
+        params.id = storedWorkflowId.value.toString();
+    }
+    if (version.value) {
+        params.version = version.value.toString();
+    }
+
+    editorConfig.value = await urlData({ url: "/workflow/editor", params });
+
+    if (reloadEditor) {
+        editorReloadKey.value += 1;
+    }
+}
+
+watch(
+    () => router.currentRoute.query,
+    () => {
+        getEditorConfig();
+    },
+    { immediate: true }
+);
+</script>
+
 <template>
-    <Editor
+    <NewEditor
         v-if="editorConfig"
         :key="editorReloadKey"
         :workflow-id="editorConfig.id"
@@ -8,64 +79,5 @@
         :module-sections="editorConfig.moduleSections"
         :workflow-tags="editorConfig.tags"
         :workflows="editorConfig.workflows"
-        @update:confirmation="$emit('update:confirmation', $event)" />
+        @update:confirmation="emit('update:confirmation', $event)" />
 </template>
-<script>
-import Editor from "components/Workflow/Editor/Index";
-import Query from "utils/query-string-parsing";
-import { urlData } from "utils/url";
-
-export default {
-    components: {
-        Editor,
-    },
-    data() {
-        return {
-            storedWorkflowId: null,
-            workflowId: null,
-            version: null,
-            editorConfig: null,
-            editorReloadKey: 0,
-        };
-    },
-    watch: {
-        "$route.params": {
-            handler() {
-                this.getEditorConfig();
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        async getEditorConfig() {
-            let reloadEditor = true;
-
-            // this will only be the case the first time the route updates from a new workflow
-            if (!this.storedWorkflowId && !this.workflowId) {
-                reloadEditor = false;
-            }
-
-            this.storedWorkflowId = Query.get("id");
-            this.workflowId = Query.get("workflow_id");
-            this.version = Query.get("version");
-
-            const params = {};
-
-            if (this.workflowId) {
-                params.workflow_id = this.workflowId;
-            } else if (this.storedWorkflowId) {
-                params.id = this.storedWorkflowId;
-            }
-            if (this.version) {
-                params.version = this.version;
-            }
-
-            this.editorConfig = await urlData({ url: "/workflow/editor", params });
-
-            if (reloadEditor) {
-                this.editorReloadKey += 1;
-            }
-        },
-    },
-};
-</script>

From 92315b0da45cc6c7657111c9211a7975427a3d90 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 4 Dec 2024 14:36:38 +0100
Subject: [PATCH 4/9] Adds utility function to retrieve query parameter value

Introduces a function to fetch query parameter values from the route.
Utilizes Vue Router's useRoute composable for accessing query parameters.
---
 client/src/utils/route.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 client/src/utils/route.ts

diff --git a/client/src/utils/route.ts b/client/src/utils/route.ts
new file mode 100644
index 000000000000..7bfba0975626
--- /dev/null
+++ b/client/src/utils/route.ts
@@ -0,0 +1,7 @@
+import { useRoute } from "vue-router/composables";
+
+export function getQueryValue(key: string): string | undefined {
+    const route = useRoute();
+
+    return (Array.isArray(route.query[key]) ? route.query[key]?.[0] : route.query[key])?.toString();
+}

From 5d005f74a63a28f2919eb13a6e3acb4163afff39 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 4 Dec 2024 14:46:14 +0100
Subject: [PATCH 5/9] Refactors Workflow Editor component to use typescript
 setup

Migrates the Workflow Editor component to use the script setup and typescript syntax for improved maintainability, readability and performance.
Replaces BootstrapVue components with their corresponding B-prefixed versions.
---
 .../src/components/Workflow/Editor/Index.vue  | 1808 +++++++++--------
 1 file changed, 920 insertions(+), 888 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 9506a25386af..3952ffc21969 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -1,32 +1,887 @@
+<script setup lang="ts">
+import { faArrowLeft, faArrowRight, faCog, faSave, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { useMagicKeys, whenever } from "@vueuse/core";
+import { logicAnd, logicNot, logicOr } from "@vueuse/math";
+import { BButton, BButtonGroup, BFormGroup, BFormInput, BFormTextarea, BModal } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, nextTick, onMounted, onUnmounted, ref, unref, watch } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { type components } from "@/api/schema";
+import { type StoredWorkflowDetailed } from "@/api/workflows";
+import { InsertStepAction, useStepActions } from "@/components/Workflow/Editor/Actions/stepActions";
+import { CopyIntoWorkflowAction, SetValueActionHandler } from "@/components/Workflow/Editor/Actions/workflowActions";
+import { defaultPosition } from "@/components/Workflow/Editor/composables/useDefaultStepPosition";
+import {
+    useActivityLogic,
+    useSpecialWorkflowActivities,
+    workflowEditorActivities,
+} from "@/components/Workflow/Editor/modules/activities";
+import { fromSimple } from "@/components/Workflow/Editor/modules/model";
+import { getUntypedWorkflowParameters, type UntypedParameters } from "@/components/Workflow/Editor/modules/parameters";
+import { getModule, getVersions, loadWorkflow, saveWorkflow } from "@/components/Workflow/Editor/modules/services";
+import { getStateUpgradeMessages } from "@/components/Workflow/Editor/modules/utilities";
+import reportDefault from "@/components/Workflow/Editor/reportDefault";
+import { Services } from "@/components/Workflow/services";
+import { useConfirmDialog } from "@/composables/confirmDialog";
+import { useDatatypesMapper } from "@/composables/datatypesMapper";
+import { Toast } from "@/composables/toast";
+import { useUid } from "@/composables/utils/uid";
+import { provideScopedWorkflowStores } from "@/composables/workflowStores";
+import { getAppRoot } from "@/onload/loadConfig";
+import { useScopePointerStore } from "@/stores/scopePointerStore";
+import type { NewStep, PostJobActions, Step } from "@/stores/workflowStepStore";
+import { LastQueue } from "@/utils/lastQueue";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
+import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
+import ToolPanel from "@/components/Panels/ToolPanel.vue";
+import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
+import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
+import WorkflowLint from "@/components/Workflow/Editor/Lint.vue";
+import MessagesModal from "@/components/Workflow/Editor/MessagesModal.vue";
+import NodeInspector from "@/components/Workflow/Editor/NodeInspector.vue";
+import RefactorConfirmationModal from "@/components/Workflow/Editor/RefactorConfirmationModal.vue";
+import SaveChangesModal from "@/components/Workflow/Editor/SaveChangesModal.vue";
+import StateUpgradeModal from "@/components/Workflow/Editor/StateUpgradeModal.vue";
+import WorkflowAttributes from "@/components/Workflow/Editor/WorkflowAttributes.vue";
+import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
+
+type Creator =
+    | (components["schemas"]["Person"] | components["schemas"]["galaxy__schema__schema__Organization"])[]
+    | null;
+
+interface Props {
+    workflows: any[];
+    dataManagers: any[];
+    moduleSections: any[];
+    workflowId?: string;
+    initialVersion?: number;
+    workflowTags?: string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    workflowId: undefined,
+    initialVersion: undefined,
+    workflowTags: () => [],
+});
+
+const emit = defineEmits<{
+    (e: "update:confirmation", value: boolean): void;
+}>();
+
+const { ctrl_z, ctrl_shift_z, meta_z, meta_shift_z } = useMagicKeys();
+
+const services = new Services();
+const lastQueue = new LastQueue();
+
+const undoKeys = logicOr(ctrl_z, meta_z);
+const redoKeys = logicOr(ctrl_shift_z, meta_shift_z);
+
+const router = useRouter();
+const { confirm } = useConfirmDialog();
+const { datatypes, datatypesMapper, datatypesMapperLoading } = useDatatypesMapper();
+
+const uid = unref(useUid("workflow-editor-"));
+
+const id = ref(props.workflowId || uid);
+const name = ref("Unnamed Workflow");
+const license = ref("");
+const versions = ref([]);
+const tags = ref<string[]>([]);
+const creator = ref<Creator>();
+const saveAsName = ref<string>();
+const annotation = ref<string>("");
+const version = ref<number>(props.initialVersion);
+const navUrl = ref("");
+
+const parameters = ref<UntypedParameters>();
+
+const markdownEditor = ref<any>(null);
+const refactorActions = ref<any[]>([]);
+
+const initialLoading = ref(true);
+const highlightId = ref<string>();
+const activityBar = ref<any>(null);
+const stateMessages = ref<any[]>([]);
+const scrollToId = ref<string | null>();
+const insertedStateMessages = ref<string[]>([]);
+const rightPanelElement = ref<HTMLElement | null>(null);
+
+const showSaveAsModal = ref(false);
+const saveAsAnnotation = ref(null);
+const messageIsError = ref(false);
+const showSaveChangesModal = ref(false);
+const messageBody = ref<string | undefined>();
+const messageTitle = ref<string | undefined>();
+const transform = ref({ x: 0, y: 0, k: 1 });
+const graphOffset = ref({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    bottom: 0,
+    right: 0,
+    x: 0,
+    y: 0,
+    update: () => {},
+});
+
+const { connectionStore, stepStore, stateStore, commentStore, undoRedoStore } = provideScopedWorkflowStores(id.value);
+
+const { undo, redo } = undoRedoStore;
+const { steps } = storeToRefs(stepStore);
+const { report } = storeToRefs(stateStore);
+const { activeNodeId } = storeToRefs(stateStore);
+
+const { comments } = storeToRefs(commentStore);
+
+const setNameActionHandler = new SetValueActionHandler(
+    undoRedoStore,
+    (value) => (name.value = value as string),
+    showAttributes,
+    "set workflow name"
+);
+
+const setAnnotationHandler = new SetValueActionHandler(
+    undoRedoStore,
+    (value) => (annotation.value = value as string),
+    showAttributes,
+    "modify annotation"
+);
+
+const setTagsHandler = new SetValueActionHandler(
+    undoRedoStore,
+    (value) => (tags.value = structuredClone(value) as string[]),
+    showAttributes,
+    "change tags"
+);
+
+const setLicenseHandler = new SetValueActionHandler(
+    undoRedoStore,
+    (value) => (license.value = value as string),
+    showAttributes,
+    "set license"
+);
+
+whenever(logicAnd(undoKeys, logicNot(redoKeys)), undo);
+whenever(redoKeys, redo);
+
+const setCreatorHandler = new SetValueActionHandler(
+    undoRedoStore,
+    (value) => (creator.value = value as Creator),
+    showAttributes,
+    "set creator"
+);
+
+const { hasChanges } = storeToRefs(stateStore);
+
+const isNewTempWorkflow = computed(() => !props.workflowId);
+const reportActive = computed(() => isActiveSideBar("workflow-editor-report"));
+const hasInvalidConnections = computed(() => Object.keys(connectionStore.invalidConnections).length > 0);
+const activeStep = computed(() => {
+    if (activeNodeId.value !== null) {
+        return stepStore.getStep(activeNodeId.value);
+    }
+    return null;
+});
+const saveWorkflowTitle = computed(() =>
+    hasInvalidConnections.value
+        ? "Workflow has invalid connections, review and remove invalid connections"
+        : "Save Workflow"
+);
+const workflowData = computed<Partial<StoredWorkflowDetailed>>(() => ({
+    name: name.value,
+    annotation: annotation.value,
+    comments: comments.value,
+    license: license.value,
+    creator: creator.value,
+    tags: tags.value,
+    report: report.value,
+    steps: steps.value as any,
+}));
+
+const { specialWorkflowActivities } = useSpecialWorkflowActivities(
+    computed(() => ({
+        hasInvalidConnections: hasInvalidConnections.value,
+    }))
+);
+
+useActivityLogic(
+    computed(() => ({
+        activityBarId: "workflow-editor",
+        isNewTempWorkflow: isNewTempWorkflow.value,
+    }))
+);
+
+const stepActions = useStepActions(stepStore, undoRedoStore, stateStore, connectionStore);
+
+stepStore.$subscribe((_mutation, _state) => {
+    if (!initialLoading.value) {
+        hasChanges.value = true;
+    }
+});
+
+commentStore.$subscribe((_mutation, _state) => {
+    if (!initialLoading.value) {
+        hasChanges.value = true;
+    }
+});
+
+function isActiveSideBar(activityBarId: string) {
+    return activityBar.value?.isActiveSideBar(activityBarId);
+}
+
+function ensureParametersSet() {
+    parameters.value = getUntypedWorkflowParameters(steps.value);
+}
+
+function showAttributes() {
+    ensureParametersSet();
+    stateStore.activeNodeId = null;
+    activityBar.value?.setActiveSideBar("workflow-editor-attributes");
+}
+
+/** user set name. queues an undo/redo action */
+function setName(newName: string) {
+    if (name.value !== newName) {
+        setNameActionHandler.set(name.value, newName);
+    }
+}
+
+/** user set license. queues an undo/redo action */
+function setLicense(newLicense: string) {
+    if (license.value !== newLicense) {
+        setLicenseHandler.set(license.value, newLicense);
+    }
+}
+
+/** user set creator. queues an undo/redo action */
+function setCreator(newCreator?: unknown[]) {
+    setCreatorHandler.set(creator.value, newCreator);
+}
+
+/** user set annotation. queues an undo/redo action */
+function setAnnotation(newAnnotation: string) {
+    if (annotation.value !== newAnnotation) {
+        setAnnotationHandler.set(annotation.value, newAnnotation);
+    }
+}
+
+function setTags(newTags: string[]) {
+    setTagsHandler.set(tags.value, newTags);
+}
+
+function scrollToTop() {
+    rightPanelElement.value?.scrollTo({
+        top: 0,
+        behavior: "instant",
+    });
+}
+
+function insertMarkdown(markdown: any) {
+    markdownEditor.value?.insertMarkdown(markdown);
+}
+
+function updateStep(stepId: number, partialStep: Partial<Step>) {
+    stepActions.updateStep(stepId, partialStep);
+}
+
+function onUpdateStepPosition(stepId: string, position: NonNullable<Step["position"]>) {
+    const tmpStep = steps.value[stepId];
+
+    if (tmpStep) {
+        stepActions.setPosition(tmpStep, position);
+    }
+}
+
+function setModalMessage(title?: string, body?: string, isError?: boolean) {
+    messageTitle.value = title;
+    messageBody.value = body;
+    messageIsError.value = !!isError;
+}
+
+function onChange() {
+    hasChanges.value = true;
+}
+
+function onChangePostJobActions(nodeId: number, postJobActions: PostJobActions) {
+    const partialStep = { post_job_actions: postJobActions };
+    stepActions.updateStep(nodeId, partialStep);
+}
+
+function onRemove(nodeId: string) {
+    const tmpStep = steps.value[nodeId];
+
+    if (tmpStep) {
+        stepActions.removeStep(tmpStep);
+    }
+}
+
+function onEditSubWorkflow(contentId: string) {
+    const editUrl = `/workflows/edit?workflow_id=${contentId}`;
+
+    onNavigate(editUrl);
+}
+
+function onInsertTool(toolId: string, toolName: string) {
+    insertStep(toolId, toolName, "tool");
+}
+
+function onInsertModule(moduleId: Step["type"], moduleName: string) {
+    insertStep(moduleName, moduleName, moduleId);
+}
+
+function onInsertWorkflow(workflowId: string, workflowName: string) {
+    insertStep(workflowId, workflowName, "subworkflow");
+}
+
+function copyIntoWorkflow(workflowId: string) {
+    // Load workflow definition
+    setModalMessage("Importing workflow", "progress");
+
+    loadWorkflow({ id: workflowId }).then((data) => {
+        const action = new CopyIntoWorkflowAction(
+            workflowId,
+            data,
+            defaultPosition(graphOffset.value, transform.value)
+        );
+
+        undoRedoStore.applyAction(action);
+
+        // Determine if any parameters were 'upgraded' and provide message
+
+        const insertedStateMessages = getStateUpgradeMessages(data);
+
+        onInsertedStateMessages(insertedStateMessages);
+    });
+}
+
+function onDownload() {
+    window.location.href = `${getAppRoot()}api/workflows/${id.value}/download?format=json-download`;
+}
+
+function onSaveAs() {
+    showSaveAsModal.value = true;
+}
+
+function onAnnotation(nodeId: string, newAnnotation: string) {
+    const step = steps.value[nodeId];
+    if (step) {
+        stepActions.setAnnotation(step, newAnnotation);
+    }
+}
+
+function nameValidate() {
+    if (!name.value) {
+        Toast.error("Please provide a name for your workflow.");
+
+        showAttributes();
+
+        return false;
+    }
+    return true;
+}
+
+function onSetData(stepId: number, newData: object) {
+    lastQueue
+        .enqueue(() => getModule(newData, stepId, stateStore.setLoadingState), {})
+        .then((data) => {
+            const partialStep = {
+                content_id: data.content_id,
+                inputs: data.inputs,
+                outputs: data.outputs,
+                config_form: data.config_form,
+                tool_state: data.tool_state,
+                tool_version: data.tool_version,
+                errors: data.errors,
+            };
+            stepActions.updateStep(stepId, partialStep);
+        });
+}
+
+function onLabel(nodeId: string, newLabel: string) {
+    const step = steps.value[nodeId];
+    if (step) {
+        stepActions.setLabel(step, newLabel);
+    }
+}
+
+function onScrollTo(stepId: string) {
+    scrollToId.value = stepId;
+    onHighlight(stepId);
+}
+
+function onHighlight(stepId: string) {
+    highlightId.value = stepId;
+}
+
+function onUnhighlight() {
+    highlightId.value = "";
+}
+
+function onUpgrade() {
+    onAttemptRefactor([{ action_type: "upgrade_all_steps" }]);
+}
+
+function onReportUpdate(markdown: string) {
+    hasChanges.value = true;
+    report.value.markdown = markdown;
+}
+
+function onRun() {
+    onNavigate(`/workflows/run?id=${id.value}`, false, false, true);
+}
+
+function onVersion(vr: number) {
+    if (vr != version.value) {
+        if (hasChanges.value) {
+            const confirmed = confirm("There are unsaved changes to your workflow which will be lost. Continue ?");
+
+            if (!confirmed) {
+                return;
+            }
+        }
+
+        version.value = vr;
+
+        loadCurrent(id.value, vr);
+    }
+}
+
+function insertStep(contentId: string, name: string, type: NewStep["type"]) {
+    const action = new InsertStepAction(stepStore, stateStore, {
+        contentId,
+        name,
+        type,
+        position: defaultPosition(graphOffset.value, transform.value),
+    });
+
+    undoRedoStore.applyAction(action);
+    const stepData = action.getNewStepData();
+
+    getModule({ name, type, content_id: contentId }, stepData.id, stateStore.setLoadingState).then((response) => {
+        const updatedStep = {
+            ...stepData,
+            tool_state: response.tool_state,
+            inputs: response.inputs,
+            outputs: response.outputs,
+            config_form: response.config_form,
+        };
+
+        stepStore.updateStep(updatedStep);
+        action.updateStepData = updatedStep;
+
+        stateStore.activeNodeId = stepData.id;
+    });
+}
+
+function onLicense(lc: string) {
+    if (license.value != lc) {
+        hasChanges.value = true;
+        setLicense(lc);
+    }
+}
+
+function onCreator(cr: unknown[]) {
+    if (creator.value != cr) {
+        hasChanges.value = true;
+
+        setCreator(cr);
+    }
+}
+
+function onInsertedStateMessages(messages: string[]) {
+    insertedStateMessages.value = messages;
+    setModalMessage();
+}
+
+async function onRefactor(response: { workflow: any }) {
+    await resetStores();
+    await fromSimple(id.value, response.workflow);
+
+    loadEditorData(response.workflow);
+}
+
+async function saveOrCreate() {
+    if (hasInvalidConnections.value) {
+        const confirmed = await confirm(
+            `Workflow has invalid connections. You can save the workflow, but it may not run correctly.`,
+            {
+                id: "save-workflow-confirmation",
+                okTitle: "Save Workflow",
+            }
+        );
+
+        if (confirmed) {
+            emitSaveOrCreate();
+        }
+    } else {
+        emitSaveOrCreate();
+    }
+}
+
+async function emitSaveOrCreate() {
+    if (isNewTempWorkflow.value) {
+        await onCreate();
+    } else {
+        await onSave();
+    }
+}
+
+async function resetStores() {
+    hasChanges.value = false;
+    connectionStore.$reset();
+    stepStore.$reset();
+    stateStore.$reset();
+    commentStore.$reset();
+    undoRedoStore.$reset();
+    await nextTick();
+}
+
+async function loadEditorData(data: any) {
+    if (data.name !== undefined) {
+        name.value = data.name;
+    }
+
+    if (data.annotation !== undefined) {
+        annotation.value = data.annotation;
+    }
+
+    if (data.version !== undefined) {
+        version.value = data.version;
+    }
+
+    const rp = data.report || {};
+    const markdown = rp.markdown || reportDefault;
+
+    rp.markdown = markdown;
+
+    setModalMessage();
+
+    stateMessages.value = getStateUpgradeMessages(data);
+
+    license.value = data.license;
+    creator.value = data.creator;
+
+    const vs = await getVersions(id.value);
+    versions.value = vs;
+
+    hasChanges.value = stateMessages.value.length > 0;
+}
+
+async function onAttemptRefactor(actions: any[]) {
+    if (hasChanges.value) {
+        const confirmed = await confirm(
+            "You've made changes to your workflow that need to be saved before attempting the requested action. Save those changes and continue?"
+        );
+
+        if (!confirmed) {
+            return;
+        }
+
+        setModalMessage("Saving workflow...", "progress");
+
+        try {
+            const data = await saveWorkflow(id.value, workflowData.value);
+
+            name.value = data.name;
+            version.value = data.version;
+            annotation.value = data.annotation;
+
+            refactorActions.value = actions;
+            hasChanges.value = false;
+        } catch (e) {
+            setModalMessage("Saving workflow failed, cannot apply requested changes...", errorMessageAsString(e));
+        }
+    } else {
+        refactorActions.value = actions;
+    }
+}
+
+async function onClone(stepId: string) {
+    const sourceStep = steps.value[parseInt(stepId)];
+    if (sourceStep) {
+        const newStep = {
+            ...sourceStep,
+            position: defaultPosition(graphOffset.value, transform.value),
+        };
+
+        stepActions.copyStep(newStep);
+    }
+}
+
+async function onInsertWorkflowSteps(workflowId: string, stepCount?: number) {
+    if (stepCount && stepCount < 10) {
+        copyIntoWorkflow(workflowId);
+    } else {
+        const confirmed = await confirm(
+            `Warning this will add ${stepCount} new steps into your current workflow.  You may want to consider using a subworkflow instead.`
+        );
+
+        if (confirmed) {
+            copyIntoWorkflow(workflowId);
+        }
+    }
+}
+
+async function doSaveAs() {
+    if (!saveAsName.value && !nameValidate()) {
+        return;
+    }
+
+    const rename_name = saveAsName.value ?? `SavedAs_${name.value}`;
+    const rename_annotation = saveAsAnnotation.value ?? "";
+
+    try {
+        const newSaveAsWf = { id: id.value, name: rename_name, annotation: rename_annotation };
+        const { id: newId, name, number_of_steps } = await services.createWorkflow(newSaveAsWf);
+
+        hasChanges.value = false;
+
+        await routeToWorkflow(newId);
+
+        Toast.success(`Created new workflow '${name}' with ${number_of_steps} steps.`);
+    } catch (e) {
+        const errorHeading = `Saving workflow as '${rename_name}' failed`;
+
+        setModalMessage(errorHeading, errorMessageAsString(e) || "Please contact an administrator.");
+    }
+}
+
+async function onActivityClicked(activityId: string) {
+    if (activityId === "save-and-exit") {
+        await saveOrCreate();
+        router.push("/workflows/list");
+    } else if (activityId === "exit") {
+        router.push("/workflows/list");
+    } else if (activityId === "workflow-download") {
+        onDownload();
+    } else if (activityId === "workflow-upgrade") {
+        onUpgrade();
+    } else if (activityId === "workflow-run") {
+        onRun();
+    } else if (activityId === "save-workflow") {
+        await saveOrCreate();
+    } else if (activityId === "save-workflow-as") {
+        onSaveAs();
+    }
+}
+
+async function routeToWorkflow(workflowId: string) {
+    // map scoped stores to existing stores, before updating the id
+    const { addScopePointer } = useScopePointerStore();
+    addScopePointer(workflowId, id.value);
+
+    id.value = workflowId;
+
+    await onSave();
+
+    hasChanges.value = false;
+    router.push({ query: { id: id.value } });
+}
+
+async function onCreate() {
+    if (!nameValidate()) {
+        return;
+    }
+
+    try {
+        const { id: wId, name, number_of_steps } = await services.createWorkflow(workflowData.value);
+        const message = `Created new workflow '${name}' with ${number_of_steps} steps.`;
+        hasChanges.value = false;
+
+        await routeToWorkflow(wId);
+
+        Toast.success(message);
+    } catch (e) {
+        setModalMessage("Creating workflow failed", errorMessageAsString(e) || "Please contact an administrator.");
+    }
+}
+
+async function onNavigate(url: string, forceSave = false, ignoreChanges = false, appendVersion = false) {
+    if (isNewTempWorkflow.value) {
+        await onCreate();
+    } else if (hasChanges.value && !forceSave && !ignoreChanges) {
+        // if there are changes, prompt user to save or discard or cancel
+        navUrl.value = url;
+        showSaveChangesModal.value = true;
+
+        return;
+    } else if (forceSave) {
+        // when forceSave is true, save the workflow before navigating
+        await onSave();
+    }
+
+    if (appendVersion && version.value !== undefined) {
+        url += `&version=${version.value}`;
+    }
+
+    hasChanges.value = false;
+
+    await nextTick();
+
+    router.push(url);
+}
+
+async function onSave(hideProgress = false) {
+    if (!nameValidate()) {
+        return;
+    }
+
+    !hideProgress && setModalMessage("Saving workflow...", "progress");
+
+    try {
+        const data = await saveWorkflow(id.value, workflowData.value);
+        name.value = data.name;
+        version.value = data.version;
+        annotation.value = data.annotation;
+
+        const vs = await getVersions(id.value);
+        versions.value = vs;
+
+        setModalMessage();
+
+        Toast.success("Workflow saved successfully.");
+
+        hasChanges.value = false;
+    } catch (e) {
+        setModalMessage("Saving workflow failed...", errorMessageAsString(e));
+    }
+}
+
+async function loadCurrent(cId: string, v?: number) {
+    if (!isNewTempWorkflow.value) {
+        await resetStores();
+
+        setModalMessage("Loading workflow...", "progress");
+
+        try {
+            const data = await lastQueue.enqueue(loadWorkflow, { id: cId, version: v });
+
+            await fromSimple(cId, data);
+
+            await loadEditorData(data);
+        } catch (e) {
+            setModalMessage("Loading workflow failed...", errorMessageAsString(e));
+        }
+    }
+}
+
+watch(
+    () => props.initialVersion,
+    (newVal, oldVal) => {
+        if (newVal != oldVal && oldVal === undefined) {
+            version.value = props.initialVersion;
+        }
+    }
+);
+
+watch(
+    () => props.workflowTags,
+    (newTags) => {
+        tags.value = [...newTags];
+    },
+    { immediate: true }
+);
+
+watch(
+    () => id.value,
+    (newId, oldId) => {
+        if (oldId) {
+            loadCurrent(newId);
+        }
+    }
+);
+
+watch(
+    () => name.value,
+    (newName, oldName) => {
+        if (newName != oldName) {
+            hasChanges.value = true;
+        }
+    }
+);
+
+watch(
+    () => annotation.value,
+    (newAnnotation, oldAnnotation) => {
+        if (newAnnotation != oldAnnotation) {
+            hasChanges.value = true;
+        }
+    }
+);
+
+watch(
+    () => hasChanges.value,
+    (newHasChanges) => {
+        emit("update:confirmation", newHasChanges);
+    }
+);
+watch(
+    () => stateStore.activeNodeId,
+    () => {
+        scrollToTop();
+    }
+);
+
+onMounted(async () => {
+    await loadCurrent(id.value, version.value);
+
+    setModalMessage();
+
+    initialLoading.value = false;
+});
+
+onUnmounted(async () => {
+    await resetStores();
+
+    emit("update:confirmation", false);
+});
+</script>
+
 <template>
-    <div id="columns" class="d-flex">
+    <div class="workflow-editor">
         <StateUpgradeModal :state-messages="stateMessages" />
+
         <StateUpgradeModal
             :state-messages="insertedStateMessages"
             title="Subworkflow embedded with changes"
             message="Problems were encountered loading this workflow (possibly a result of tool upgrades). Please review the following parameters and then save." />
+
         <RefactorConfirmationModal
             :workflow-id="id"
             :refactor-actions="refactorActions"
-            @onWorkflowError="onWorkflowError"
-            @onWorkflowMessage="onWorkflowMessage"
+            @onWorkflowError="setModalMessage"
+            @onWorkflowMessage="setModalMessage"
             @onRefactor="onRefactor"
-            @onShow="hideModal" />
-        <MessagesModal :title="messageTitle" :message="messageBody" :error="messageIsError" @onHidden="resetMessage" />
+            @onShow="setModalMessage" />
+
+        <MessagesModal
+            :title="messageTitle"
+            :message="messageBody"
+            :error="messageIsError"
+            @onHidden="setModalMessage" />
+
         <SaveChangesModal :nav-url.sync="navUrl" :show-modal.sync="showSaveChangesModal" @on-proceed="onNavigate" />
-        <b-modal
+
+        <BModal
             v-model="showSaveAsModal"
             title="Save As a New Workflow"
             ok-title="Save"
             cancel-title="Cancel"
-            @ok="doSaveAs(false)">
-            <b-form-group label="Name">
-                <b-form-input v-model="saveAsName" />
-            </b-form-group>
-            <b-form-group label="Annotation">
-                <b-form-textarea v-model="saveAsAnnotation" />
-            </b-form-group>
-        </b-modal>
+            @ok="doSaveAs">
+            <BFormGroup label="Name">
+                <BFormInput v-model="saveAsName" />
+            </BFormGroup>
+
+            <BFormGroup label="Annotation">
+                <BFormTextarea v-model="saveAsAnnotation" />
+            </BFormGroup>
+        </BModal>
+
         <ActivityBar
             ref="activityBar"
             :default-activities="workflowEditorActivities"
@@ -41,7 +896,7 @@
             :options-icon="faCog"
             :hide-panel="reportActive"
             @activityClicked="onActivityClicked">
-            <template v-slot:side-panel="{ isActiveSideBar }">
+            <template v-slot:side-panel>
                 <ToolPanel
                     v-if="isActiveSideBar('workflow-editor-tools')"
                     workflow
@@ -90,6 +945,7 @@
                     @update:annotationCurrent="setAnnotation" />
             </template>
         </ActivityBar>
+
         <template v-if="reportActive">
             <MarkdownEditor
                 ref="markdownEditor"
@@ -100,7 +956,7 @@
                 @insert="insertMarkdown"
                 @update="onReportUpdate">
                 <template v-slot:buttons>
-                    <b-button
+                    <BButton
                         id="workflow-canvas-button"
                         v-b-tooltip.hover.bottom
                         title="Return to Workflow"
@@ -108,7 +964,7 @@
                         role="button"
                         @click="showAttributes">
                         <FontAwesomeIcon :icon="faTimes" />
-                    </b-button>
+                    </BButton>
                 </template>
             </MarkdownEditor>
         </template>
@@ -117,36 +973,38 @@
                 <div class="editor-top-bar" unselectable="on">
                     <span>
                         <span class="sr-only">Workflow Editor</span>
-                        <span class="editor-title" :title="name"
-                            >{{ name }}
+                        <span class="editor-title" :title="name">
+                            {{ name }}
                             <i v-if="hasChanges" class="text-muted"> (unsaved changes) </i>
-                            <b-button
+                            <BButton
                                 v-if="hasChanges"
                                 id="workflow-save-button"
+                                v-b-tooltip.hover.bottom
                                 class="py-1 px-2"
                                 variant="link"
                                 :title="saveWorkflowTitle"
                                 @click="saveOrCreate">
                                 <FontAwesomeIcon :icon="faSave" />
-                            </b-button>
+                            </BButton>
                         </span>
                     </span>
 
-                    <b-button-group>
-                        <b-button
+                    <BButtonGroup>
+                        <BButton
                             :title="undoRedoStore.undoText + ' (Ctrl + Z)'"
                             :variant="undoRedoStore.hasUndo ? 'secondary' : 'muted'"
                             @click="undoRedoStore.undo()">
-                            <FontAwesomeIcon icon="fa-arrow-left" />
-                        </b-button>
-                        <b-button
+                            <FontAwesomeIcon :icon="faArrowLeft" />
+                        </BButton>
+                        <BButton
                             :title="undoRedoStore.redoText + ' (Ctrl + Shift + Z)'"
                             :variant="undoRedoStore.hasRedo ? 'secondary' : 'muted'"
                             @click="undoRedoStore.redo()">
-                            <FontAwesomeIcon icon="fa-arrow-right" />
-                        </b-button>
-                    </b-button-group>
+                            <FontAwesomeIcon :icon="faArrowRight" />
+                        </BButton>
+                    </BButtonGroup>
                 </div>
+
                 <WorkflowGraph
                     v-if="!datatypesMapperLoading"
                     :steps="steps"
@@ -171,7 +1029,7 @@
                         @labelChanged="onLabel"
                         @dataChanged="onSetData"
                         @stepUpdated="updateStep"
-                        @editSubworkflow="onEditSubworkflow"
+                        @editSubworkflow="onEditSubWorkflow"
                         @attemptRefactor="onAttemptRefactor"
                         @close="activeNodeId = null"></NodeInspector>
                 </WorkflowGraph>
@@ -180,871 +1038,45 @@
     </div>
 </template>
 
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faArrowLeft, faArrowRight, faCog, faHistory, faSave, faTimes } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { whenever } from "@vueuse/core";
-import { logicAnd, logicNot, logicOr } from "@vueuse/math";
-import { Toast } from "composables/toast";
-import { storeToRefs } from "pinia";
-import Vue, { computed, nextTick, onUnmounted, ref, unref, watch } from "vue";
-
-import { getUntypedWorkflowParameters } from "@/components/Workflow/Editor/modules/parameters";
-import { ConfirmDialog, useConfirmDialog } from "@/composables/confirmDialog";
-import { useDatatypesMapper } from "@/composables/datatypesMapper";
-import { useMagicKeys } from "@/composables/useMagicKeys";
-import { useUid } from "@/composables/utils/uid";
-import { provideScopedWorkflowStores } from "@/composables/workflowStores";
-import { hide_modal } from "@/layout/modal";
-import { getAppRoot } from "@/onload/loadConfig";
-import { useScopePointerStore } from "@/stores/scopePointerStore";
-import { LastQueue } from "@/utils/lastQueue";
-import { errorMessageAsString } from "@/utils/simple-error";
-
-import { Services } from "../services";
-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 { fromSimple } from "./modules/model";
-import { getModule, getVersions, loadWorkflow, saveWorkflow } from "./modules/services";
-import { getStateUpgradeMessages } from "./modules/utilities";
-import reportDefault from "./reportDefault";
-
-import WorkflowLint from "./Lint.vue";
-import MessagesModal from "./MessagesModal.vue";
-import NodeInspector from "./NodeInspector.vue";
-import RefactorConfirmationModal from "./RefactorConfirmationModal.vue";
-import SaveChangesModal from "./SaveChangesModal.vue";
-import StateUpgradeModal from "./StateUpgradeModal.vue";
-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 ToolPanel from "@/components/Panels/ToolPanel.vue";
-import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
-import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
-
-library.add(faArrowLeft, faArrowRight, faHistory);
-
-export default {
-    components: {
-        ActivityBar,
-        MarkdownEditor,
-        SaveChangesModal,
-        StateUpgradeModal,
-        ToolPanel,
-        WorkflowAttributes,
-        WorkflowLint,
-        RefactorConfirmationModal,
-        MessagesModal,
-        WorkflowGraph,
-        FontAwesomeIcon,
-        UndoRedoStack,
-        WorkflowPanel,
-        NodeInspector,
-    },
-    props: {
-        workflowId: {
-            type: String,
-            default: undefined,
-        },
-        initialVersion: {
-            type: Number,
-            default: undefined,
-        },
-        workflowTags: {
-            type: Array,
-            default: () => [],
-        },
-        moduleSections: {
-            type: Array,
-            required: true,
-        },
-        dataManagers: {
-            type: Array,
-            required: true,
-        },
-        workflows: {
-            type: Array,
-            required: true,
-        },
-    },
-    setup(props, { emit }) {
-        const { datatypes, datatypesMapper, datatypesMapperLoading } = useDatatypesMapper();
-
-        const uid = unref(useUid("workflow-editor-"));
-        const id = ref(props.workflowId || uid);
-
-        const { connectionStore, stepStore, stateStore, commentStore, undoRedoStore } = provideScopedWorkflowStores(id);
-
-        const { undo, redo } = undoRedoStore;
-        const { ctrl_z, ctrl_shift_z, meta_z, meta_shift_z } = useMagicKeys();
-
-        const undoKeys = logicOr(ctrl_z, meta_z);
-        const redoKeys = logicOr(ctrl_shift_z, meta_shift_z);
-
-        whenever(logicAnd(undoKeys, logicNot(redoKeys)), undo);
-        whenever(redoKeys, redo);
-
-        const activityBar = ref(null);
-        const reportActive = computed(() => activityBar.value?.isActiveSideBar("workflow-editor-report"));
-
-        const parameters = ref(null);
-
-        function ensureParametersSet() {
-            parameters.value = getUntypedWorkflowParameters(steps.value);
-        }
-
-        function showAttributes() {
-            ensureParametersSet();
-            stateStore.activeNodeId = null;
-            activityBar.value?.setActiveSideBar("workflow-editor-attributes");
-        }
-
-        const name = ref("Unnamed Workflow");
-        const setNameActionHandler = new SetValueActionHandler(
-            undoRedoStore,
-            (value) => (name.value = value),
-            showAttributes,
-            "set workflow name"
-        );
-        /** user set name. queues an undo/redo action */
-        function setName(newName) {
-            if (name.value !== newName) {
-                setNameActionHandler.set(name.value, newName);
-            }
-        }
-
-        const { report } = storeToRefs(stateStore);
-
-        const license = ref(null);
-        const setLicenseHandler = new SetValueActionHandler(
-            undoRedoStore,
-            (value) => (license.value = value),
-            showAttributes,
-            "set license"
-        );
-        /** user set license. queues an undo/redo action */
-        function setLicense(newLicense) {
-            if (license.value !== newLicense) {
-                setLicenseHandler.set(license.value, newLicense);
-            }
-        }
-
-        const creator = ref(null);
-        const setCreatorHandler = new SetValueActionHandler(
-            undoRedoStore,
-            (value) => (creator.value = value),
-            showAttributes,
-            "set creator"
-        );
-        /** user set creator. queues an undo/redo action */
-        function setCreator(newCreator) {
-            setCreatorHandler.set(creator.value, newCreator);
-        }
-
-        const annotation = ref(null);
-        const setAnnotationHandler = new SetValueActionHandler(
-            undoRedoStore,
-            (value) => (annotation.value = value),
-            showAttributes,
-            "modify annotation"
-        );
-        /** user set annotation. queues an undo/redo action */
-        function setAnnotation(newAnnotation) {
-            if (annotation.value !== newAnnotation) {
-                setAnnotationHandler.set(annotation.value, newAnnotation);
-            }
-        }
-
-        const tags = ref([]);
-
-        watch(
-            () => props.workflowTags,
-            (newTags) => {
-                tags.value = [...newTags];
-            },
-            { immediate: true }
-        );
-
-        const setTagsHandler = new SetValueActionHandler(
-            undoRedoStore,
-            (value) => (tags.value = structuredClone(value)),
-            showAttributes,
-            "change tags"
-        );
-        /** user set tags. queues an undo/redo action */
-        function setTags(newTags) {
-            setTagsHandler.set(tags.value, newTags);
-        }
-
-        watch(
-            () => stateStore.activeNodeId,
-            () => {
-                scrollToTop();
-            }
-        );
-
-        const rightPanelElement = ref(null);
-
-        function scrollToTop() {
-            rightPanelElement.value?.scrollTo({
-                top: 0,
-                behavior: "instant",
-            });
-        }
-
-        const { comments } = storeToRefs(commentStore);
-        const { getStepIndex, steps } = storeToRefs(stepStore);
-        const { activeNodeId } = storeToRefs(stateStore);
-        const activeStep = computed(() => {
-            if (activeNodeId.value !== null) {
-                return stepStore.getStep(activeNodeId.value);
-            }
-            return null;
-        });
-
-        const { hasChanges } = storeToRefs(stateStore);
-        const initialLoading = ref(true);
-        const hasInvalidConnections = computed(() => Object.keys(connectionStore.invalidConnections).length > 0);
-
-        stepStore.$subscribe((_mutation, _state) => {
-            if (!initialLoading.value) {
-                hasChanges.value = true;
-            }
-        });
-
-        commentStore.$subscribe((_mutation, _state) => {
-            if (!initialLoading.value) {
-                hasChanges.value = true;
-            }
-        });
-
-        async function resetStores() {
-            hasChanges.value = false;
-            connectionStore.$reset();
-            stepStore.$reset();
-            stateStore.$reset();
-            commentStore.$reset();
-            undoRedoStore.$reset();
-            await nextTick();
-        }
-
-        onUnmounted(async () => {
-            await resetStores();
-            emit("update:confirmation", false);
-        });
-
-        const stepActions = useStepActions(stepStore, undoRedoStore, stateStore, connectionStore);
-
-        const markdownEditor = ref(null);
-        function insertMarkdown(markdown) {
-            markdownEditor.value?.insertMarkdown(markdown);
-        }
-
-        const isNewTempWorkflow = computed(() => !props.workflowId);
-
-        const { specialWorkflowActivities } = useSpecialWorkflowActivities(
-            computed(() => ({
-                hasInvalidConnections: hasInvalidConnections.value,
-            }))
-        );
-
-        const saveWorkflowTitle = computed(() =>
-            hasInvalidConnections.value
-                ? "Workflow has invalid connections, review and remove invalid connections"
-                : "Save Workflow"
-        );
-
-        useActivityLogic(
-            computed(() => ({
-                activityBarId: "workflow-editor",
-                isNewTempWorkflow: isNewTempWorkflow.value,
-            }))
-        );
-
-        const { confirm } = useConfirmDialog();
-
-        return {
-            id,
-            name,
-            parameters,
-            ensureParametersSet,
-            showAttributes,
-            setName,
-            report,
-            license,
-            setLicense,
-            creator,
-            setCreator,
-            annotation,
-            setAnnotation,
-            tags,
-            setTags,
-            rightPanelElement,
-            scrollToTop,
-            connectionStore,
-            hasChanges,
-            hasInvalidConnections,
-            stepStore,
-            steps,
-            comments,
-            nodeIndex: getStepIndex,
-            datatypes,
-            activeStep,
-            activeNodeId,
-            datatypesMapper,
-            datatypesMapperLoading,
-            stateStore,
-            resetStores,
-            initialLoading,
-            stepActions,
-            undoRedoStore,
-            activityBar,
-            reportActive,
-            markdownEditor,
-            insertMarkdown,
-            specialWorkflowActivities,
-            isNewTempWorkflow,
-            saveWorkflowTitle,
-            confirm,
-        };
-    },
-    data() {
-        return {
-            versions: [],
-            labels: {},
-            services: null,
-            stateMessages: [],
-            insertedStateMessages: [],
-            refactorActions: [],
-            scrollToId: null,
-            highlightId: null,
-            messageTitle: null,
-            messageBody: null,
-            messageIsError: false,
-            version: this.initialVersion,
-            saveAsName: null,
-            saveAsAnnotation: null,
-            showSaveAsModal: false,
-            transform: { x: 0, y: 0, k: 1 },
-            graphOffset: { left: 0, top: 0, width: 0, height: 0 },
-            debounceTimer: null,
-            showSaveChangesModal: false,
-            navUrl: "",
-            workflowEditorActivities,
-            faTimes,
-            faCog,
-            faSave,
-        };
-    },
-    computed: {
-        activeNodeType() {
-            return this.activeStep?.type;
-        },
-        hasActiveNodeDefault() {
-            return this.activeStep && this.activeStep?.type != "tool";
-        },
-    },
-    watch: {
-        id(newId, oldId) {
-            if (oldId) {
-                this._loadCurrent(newId);
-            }
-        },
-        annotation(newAnnotation, oldAnnotation) {
-            if (newAnnotation != oldAnnotation) {
-                this.hasChanges = true;
-            }
-        },
-        name(newName, oldName) {
-            if (newName != oldName) {
-                this.hasChanges = true;
-            }
-        },
-        hasChanges() {
-            this.$emit("update:confirmation", this.hasChanges);
-        },
-        initialVersion(newVal, oldVal) {
-            if (newVal != oldVal && oldVal === undefined) {
-                this.version = this.initialVersion;
-            }
-        },
-    },
-    async created() {
-        this.services = new Services();
-        this.lastQueue = new LastQueue();
-        await this._loadCurrent(this.id, this.version);
-        hide_modal();
-        this.initialLoading = false;
-    },
-    methods: {
-        onUpdateStep(step) {
-            this.stepStore.updateStep(step);
-        },
-        updateStep(id, partialStep) {
-            this.stepActions.updateStep(id, partialStep);
-        },
-        onUpdateStepPosition(stepId, position) {
-            this.stepActions.setPosition(this.steps[stepId], position);
-        },
-        onAttemptRefactor(actions) {
-            if (this.hasChanges) {
-                const r = window.confirm(
-                    "You've made changes to your workflow that need to be saved before attempting the requested action. Save those changes and continue?"
-                );
-                if (r == false) {
-                    return;
-                }
-                this.onWorkflowMessage("Saving workflow...", "progress");
-                return saveWorkflow(this)
-                    .then((data) => {
-                        this.refactorActions = actions;
-                    })
-                    .catch((response) => {
-                        this.onWorkflowError("Saving workflow failed, cannot apply requested changes...", response, {
-                            Ok: () => {
-                                this.hideModal();
-                            },
-                        });
-                    });
-            } else {
-                this.refactorActions = actions;
-            }
-        },
-        // synchronize modal handling through this object so we can convert it to be
-        // be reactive at some point.
-        onWorkflowError(message, response) {
-            this.messageTitle = message;
-            this.messageBody = response.toString();
-            this.messageIsError = true;
-        },
-        onWorkflowMessage(title, body) {
-            this.messageTitle = title;
-            this.messageBody = body;
-            this.messageIsError = false;
-        },
-        hideModal() {
-            this.messageTitle = null;
-            this.messageBody = null;
-            this.messageIsError = false;
-            hide_modal(); // hide other modals created in utilities also...
-        },
-        async onRefactor(response) {
-            await this.resetStores();
-            await fromSimple(this.id, response.workflow);
-            this._loadEditorData(response.workflow);
-        },
-        onChange() {
-            this.hasChanges = true;
-        },
-        onChangePostJobActions(nodeId, postJobActions) {
-            const partialStep = { post_job_actions: postJobActions };
-            this.stepActions.updateStep(nodeId, partialStep);
-        },
-        onRemove(nodeId) {
-            this.stepActions.removeStep(this.steps[nodeId]);
-        },
-        onEditSubworkflow(contentId) {
-            const editUrl = `/workflows/edit?workflow_id=${contentId}`;
-            this.onNavigate(editUrl);
-        },
-        async onClone(stepId) {
-            const sourceStep = this.steps[parseInt(stepId)];
-            this.stepActions.copyStep({
-                ...sourceStep,
-                id: null,
-                uuid: null,
-                position: defaultPosition(this.graphOffset, this.transform),
-            });
-        },
-        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);
-        },
-        onInsertWorkflow(workflow_id, workflow_name) {
-            this._insertStep(workflow_id, workflow_name, "subworkflow");
-        },
-        copyIntoWorkflow(id) {
-            // Load workflow definition
-            this.onWorkflowMessage("Importing workflow", "progress");
-            loadWorkflow({ id }).then((data) => {
-                const action = new CopyIntoWorkflowAction(
-                    this.id,
-                    data,
-                    defaultPosition(this.graphOffset, this.transform),
-                    true
-                );
-                this.undoRedoStore.applyAction(action);
-                // Determine if any parameters were 'upgraded' and provide message
-                const insertedStateMessages = getStateUpgradeMessages(data);
-                this.onInsertedStateMessages(insertedStateMessages);
-            });
-        },
-        async onInsertWorkflowSteps(workflowId, stepCount) {
-            if (stepCount < 10) {
-                this.copyIntoWorkflow(workflowId);
-            } else {
-                const confirmed = await ConfirmDialog.confirm(
-                    `Warning this will add ${stepCount} new steps into your current workflow.  You may want to consider using a subworkflow instead.`
-                );
-                if (confirmed) {
-                    this.copyIntoWorkflow(workflowId);
-                }
-            }
-        },
-        onDownload() {
-            window.location = `${getAppRoot()}api/workflows/${this.id}/download?format=json-download`;
-        },
-        async doSaveAs() {
-            if (!this.saveAsName && !this.nameValidate()) {
-                return;
-            }
-            const rename_name = this.saveAsName ?? `SavedAs_${this.name}`;
-            const rename_annotation = this.saveAsAnnotation ?? "";
-
-            try {
-                const newSaveAsWf = { ...this, name: rename_name, annotation: rename_annotation };
-                const { id, name, number_of_steps } = await this.services.createWorkflow(newSaveAsWf);
-                const message = `Created new workflow '${name}' with ${number_of_steps} steps.`;
-                this.hasChanges = false;
-                await this.routeToWorkflow(id);
-                Toast.success(message);
-            } catch (e) {
-                const errorHeading = `Saving workflow as '${rename_name}' failed`;
-                this.onWorkflowError(errorHeading, errorMessageAsString(e) || "Please contact an administrator.", {
-                    Ok: () => {
-                        this.hideModal();
-                    },
-                });
-            }
-        },
-        onSaveAs() {
-            this.showSaveAsModal = true;
-        },
-        async saveOrCreate() {
-            if (this.hasInvalidConnections) {
-                const confirmed = await this.confirm(
-                    `Workflow has invalid connections. You can save the workflow, but it may not run correctly.`,
-                    {
-                        id: "save-workflow-confirmation",
-                        okTitle: "Save Workflow",
-                    }
-                );
-
-                if (!confirmed) {
-                    return;
-                }
-            }
-
-            if (this.isNewTempWorkflow) {
-                await this.onCreate();
-            } else {
-                await this.onSave();
-            }
-        },
-        async onActivityClicked(activityId) {
-            if (activityId === "save-and-exit") {
-                await this.saveOrCreate();
-                this.$router.push("/workflows/list");
-            }
-
-            if (activityId === "exit") {
-                this.$router.push("/workflows/list");
-            }
-
-            if (activityId === "workflow-download") {
-                this.onDownload();
-            }
-
-            if (activityId === "workflow-upgrade") {
-                this.onUpgrade();
-            }
-
-            if (activityId === "workflow-run") {
-                this.onRun();
-            }
-
-            if (activityId === "save-workflow") {
-                await this.saveOrCreate();
-            }
-
-            if (activityId === "save-workflow-as") {
-                this.onSaveAs();
-            }
-        },
-        onAnnotation(nodeId, newAnnotation) {
-            this.stepActions.setAnnotation(this.steps[nodeId], newAnnotation);
-        },
-        async routeToWorkflow(id) {
-            // map scoped stores to existing stores, before updating the id
-            const { addScopePointer } = useScopePointerStore();
-            addScopePointer(id, this.id);
-
-            this.id = id;
-            await this.onSave();
-            this.hasChanges = false;
-            this.$router.replace({ query: { id } });
-        },
-        async onCreate() {
-            if (!this.nameValidate()) {
-                return;
-            }
-            try {
-                const { id, name, number_of_steps } = await this.services.createWorkflow(this);
-                const message = `Created new workflow '${name}' with ${number_of_steps} steps.`;
-                this.hasChanges = false;
-                await this.routeToWorkflow(id);
-                Toast.success(message);
-            } catch (e) {
-                this.onWorkflowError(
-                    "Creating workflow failed",
-                    errorMessageAsString(e) || "Please contact an administrator.",
-                    {
-                        Ok: () => {
-                            this.hideModal();
-                        },
-                    }
-                );
-            }
-        },
-        nameValidate() {
-            if (!this.name) {
-                Toast.error("Please provide a name for your workflow.");
-                this.showAttributes();
-                return false;
-            }
-            return true;
-        },
-        onSetData(stepId, newData) {
-            this.lastQueue
-                .enqueue(() => getModule(newData, stepId, this.stateStore.setLoadingState))
-                .then((data) => {
-                    const partialStep = {
-                        content_id: data.content_id,
-                        inputs: data.inputs,
-                        outputs: data.outputs,
-                        config_form: data.config_form,
-                        tool_state: data.tool_state,
-                        tool_version: data.tool_version,
-                        errors: data.errors,
-                    };
-                    this.stepActions.updateStep(stepId, partialStep);
-                });
-        },
-        onLabel(nodeId, newLabel) {
-            this.stepActions.setLabel(this.steps[nodeId], newLabel);
-        },
-        onScrollTo(stepId) {
-            this.scrollToId = stepId;
-            this.onHighlight(stepId);
-        },
-        onHighlight(stepId) {
-            this.highlightId = stepId;
-        },
-        onUnhighlight(stepId) {
-            this.highlightId = null;
-        },
-        onUpgrade() {
-            this.onAttemptRefactor([{ action_type: "upgrade_all_steps" }]);
-        },
-        onReportUpdate(markdown) {
-            this.hasChanges = true;
-            this.report.markdown = markdown;
-        },
-        onRun() {
-            this.onNavigate(`/workflows/run?id=${this.id}`, false, false, true);
-        },
-        async onNavigate(url, forceSave = false, ignoreChanges = false, appendVersion = false) {
-            if (this.isNewTempWorkflow) {
-                await this.onCreate();
-            } else if (this.hasChanges && !forceSave && !ignoreChanges) {
-                // if there are changes, prompt user to save or discard or cancel
-                this.navUrl = url;
-                this.showSaveChangesModal = true;
-                return;
-            } else if (forceSave) {
-                // when forceSave is true, save the workflow before navigating
-                await this.onSave();
-            }
-
-            if (appendVersion && this.version !== undefined) {
-                url += `&version=${this.version}`;
-            }
-            this.hasChanges = false;
-            await nextTick();
-            this.$router.push(url);
-        },
-        onSave(hideProgress = false) {
-            if (!this.nameValidate()) {
-                return;
-            }
-            !hideProgress && this.onWorkflowMessage("Saving workflow...", "progress");
-            return saveWorkflow(this)
-                .then((data) => {
-                    getVersions(this.id).then((versions) => {
-                        this.versions = versions;
-                        this.hideModal();
-                    });
-                })
-                .catch((response) => {
-                    this.onWorkflowError("Saving workflow failed...", response, {
-                        Ok: () => {
-                            this.hideModal();
-                        },
-                    });
-                });
-        },
-        onVersion(version) {
-            if (version != this.version) {
-                if (this.hasChanges) {
-                    const r = window.confirm(
-                        "There are unsaved changes to your workflow which will be lost. Continue ?"
-                    );
-                    if (r == false) {
-                        return;
-                    }
-                }
-                this.version = version;
-                this._loadCurrent(this.id, version);
-            }
-        },
-        _insertStep(contentId, name, type) {
-            const action = new InsertStepAction(this.stepStore, this.stateStore, {
-                contentId,
-                name,
-                type,
-                position: defaultPosition(this.graphOffset, this.transform),
-            });
-
-            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,
-                    };
-
-                    this.stepStore.updateStep(updatedStep);
-                    action.updateStepData = updatedStep;
-
-                    this.stateStore.activeNodeId = stepData.id;
-                }
-            );
-        },
-        async _loadEditorData(data) {
-            if (data.name !== undefined) {
-                this.name = data.name;
-            }
-            if (data.annotation !== undefined) {
-                this.annotation = data.annotation;
-            }
-            if (data.version !== undefined) {
-                this.version = data.version;
-            }
-
-            const report = data.report || {};
-            const markdown = report.markdown || reportDefault;
-            this.report.markdown = markdown;
-            this.hideModal();
-            this.stateMessages = getStateUpgradeMessages(data);
-            const has_changes = this.stateMessages.length > 0;
-            this.license = data.license;
-            this.creator = data.creator;
-            getVersions(this.id).then((versions) => {
-                this.versions = versions;
-            });
-            await Vue.nextTick();
-            this.hasChanges = has_changes;
-        },
-        async _loadCurrent(id, version) {
-            if (!this.isNewTempWorkflow) {
-                await this.resetStores();
-                this.onWorkflowMessage("Loading workflow...", "progress");
-
-                try {
-                    const data = await this.lastQueue.enqueue(loadWorkflow, { id, version });
-                    await fromSimple(id, data);
-                    await this._loadEditorData(data);
-                } catch (e) {
-                    this.onWorkflowError("Loading workflow failed...", e);
-                }
-            }
-        },
-        onLicense(license) {
-            if (this.license != license) {
-                this.hasChanges = true;
-                this.setLicense(license);
-            }
-        },
-        onCreator(creator) {
-            if (this.creator != creator) {
-                this.hasChanges = true;
-                this.setCreator(creator);
-            }
-        },
-        onInsertedStateMessages(insertedStateMessages) {
-            this.insertedStateMessages = insertedStateMessages;
-            this.hideModal();
-        },
-        resetMessage() {
-            this.messageTitle = null;
-            this.messageBody = null;
-            this.messageError = false;
-        },
-    },
-};
-</script>
-
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
-.editor-top-bar {
-    background: $brand-light;
-    color: $brand-dark;
-    font-size: 1rem;
-    font-weight: 700;
+.workflow-editor {
     display: flex;
-    justify-content: space-between;
-    height: 2.5rem;
-    padding: 0 1rem;
+    flex: 1;
+    overflow: hidden;
+    position: relative;
 
-    & > span {
-        overflow: hidden;
+    .workflow-center {
+        z-index: 0;
         display: flex;
-        align-items: center;
-    }
+        flex-direction: column;
+        flex-grow: 1;
+        overflow: auto;
+        width: 100%;
+
+        .editor-top-bar {
+            background: $brand-light;
+            color: $brand-dark;
+            font-size: 1rem;
+            font-weight: 700;
+            display: flex;
+            justify-content: space-between;
+            height: 2.5rem;
+            padding: 0 1rem;
+
+            & > span {
+                overflow: hidden;
+                display: flex;
+                align-items: center;
+            }
 
-    .editor-title {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+            .editor-title {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
     }
 }
-
-.reset-wheel {
-    position: absolute;
-    left: 1rem;
-    bottom: 1rem;
-    cursor: pointer;
-    z-index: 2000;
-}
-
-.workflow-center {
-    z-index: 0;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow: auto;
-    width: 100%;
-}
 </style>

From accb04e22931775aa08b50d953b24b994d4e2348 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 4 Dec 2024 14:49:23 +0100
Subject: [PATCH 6/9] Refactors saveWorkflow function signature

Changes saveWorkflow to accept id and workflow separately
Simplifies request data construction and error handling
---
 .../Workflow/Editor/modules/services.js       | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Workflow/Editor/modules/services.js b/client/src/components/Workflow/Editor/modules/services.js
index 8534cc3b18a7..c055bb869a78 100644
--- a/client/src/components/Workflow/Editor/modules/services.js
+++ b/client/src/components/Workflow/Editor/modules/services.js
@@ -8,6 +8,7 @@ import { toSimple } from "./model";
 export async function getVersions(id) {
     try {
         const { data } = await axios.get(`${getAppRoot()}api/workflows/${id}/versions`);
+
         return data;
     } catch (e) {
         rethrowSimple(e);
@@ -51,24 +52,24 @@ export async function loadWorkflow({ id, version = null }) {
     }
 }
 
-export async function saveWorkflow(workflow) {
-    if (workflow.hasChanges) {
-        try {
-            const requestData = { workflow: toSimple(workflow.id, workflow), from_tool_form: true };
-            const { data } = await axios.put(`${getAppRoot()}api/workflows/${workflow.id}`, requestData);
-            workflow.name = data.name;
-            workflow.hasChanges = false;
-            workflow.stored = true;
-            workflow.version = data.version;
-            if (workflow.annotation || data.annotation) {
-                workflow.annotation = data.annotation;
-            }
-            return data;
-        } catch (e) {
-            rethrowSimple(e);
+export async function saveWorkflow(id, workflow) {
+    try {
+        const requestData = { workflow, from_tool_form: true };
+        const { data } = await axios.put(`${getAppRoot()}api/workflows/${id}`, requestData);
+
+        workflow.name = data.name;
+        workflow.hasChanges = false;
+        workflow.stored = true;
+        workflow.version = data.version;
+
+        if (workflow.annotation || data.annotation) {
+            workflow.annotation = data.annotation;
         }
+
+        return data;
+    } catch (e) {
+        rethrowSimple(e);
     }
-    return {};
 }
 
 export async function getToolPredictions(requestData) {

From fe5bb721b089d83765d61be80d92ade3995fff9d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 4 Dec 2024 14:50:25 +0100
Subject: [PATCH 7/9] Updates save button selector in navigation.yml

Changes the save button selector to use a more specific ID-based selector.
---
 client/src/utils/navigation/navigation.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 6285837e44a8..e80ba995ae80 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -240,7 +240,7 @@ history_panel:
       name_input: '${_} [data-description="name input"]'
       annotation_input: '${_} [data-description="annotation input"]'
       tags_input: '${_} .stateless-tags button'
-      save_button: '${_} [data-description="editor save button"]'
+      save_button: '#workflow-save-button'
 
   # history tags
   tag_editor:

From 440df42778675a87e2ba6b155cce9e2bea1eb947 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 4 Dec 2024 15:00:21 +0100
Subject: [PATCH 8/9] Removes unused import from services module

---
 client/src/components/Workflow/Editor/modules/services.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/components/Workflow/Editor/modules/services.js b/client/src/components/Workflow/Editor/modules/services.js
index c055bb869a78..e190eed63f34 100644
--- a/client/src/components/Workflow/Editor/modules/services.js
+++ b/client/src/components/Workflow/Editor/modules/services.js
@@ -2,8 +2,6 @@ import axios from "axios";
 import { getAppRoot } from "onload/loadConfig";
 import { errorMessageAsString, rethrowSimple } from "utils/simple-error";
 
-import { toSimple } from "./model";
-
 /** Workflow data request helper **/
 export async function getVersions(id) {
     try {

From d875a209dd9617a8c2d268c5fe4fa7675c272d50 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 4 Dec 2024 15:13:31 +0100
Subject: [PATCH 9/9] Replaces NewEditor with Editor component (typo)

---
 client/src/entry/analysis/modules/WorkflowEditor.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/entry/analysis/modules/WorkflowEditor.vue b/client/src/entry/analysis/modules/WorkflowEditor.vue
index 56a8dd718182..169df96bdb4f 100644
--- a/client/src/entry/analysis/modules/WorkflowEditor.vue
+++ b/client/src/entry/analysis/modules/WorkflowEditor.vue
@@ -5,7 +5,7 @@ import { useRouter } from "vue-router/composables";
 import { getQueryValue } from "@/utils/route";
 import { urlData } from "@/utils/url";
 
-import NewEditor from "@/components/Workflow/Editor/NewEditor.vue";
+import Editor from "@/components/Workflow/Editor/Index.vue";
 
 const router = useRouter();
 
@@ -70,7 +70,7 @@ watch(
 </script>
 
 <template>
-    <NewEditor
+    <Editor
         v-if="editorConfig"
         :key="editorReloadKey"
         :workflow-id="editorConfig.id"