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);
diff --git a/client/src/components/Workflow/Editor/Index.test.ts b/client/src/components/Workflow/Editor/Index.test.ts
index 7262d2d72956..c97b30a405cf 100644
--- a/client/src/components/Workflow/Editor/Index.test.ts
+++ b/client/src/components/Workflow/Editor/Index.test.ts
@@ -1,8 +1,10 @@
 import { expect, jest } from "@jest/globals";
 import { createTestingPinia } from "@pinia/testing";
-import { shallowMount } from "@vue/test-utils";
+import { shallowMount, type Wrapper } from "@vue/test-utils";
 import { PiniaVuePlugin, setActivePinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
+import type Vue from "vue";
+import { nextTick } from "vue";
 
 import { testDatatypesMapper } from "@/components/Datatypes/test_fixtures";
 import { getAppRoot } from "@/onload/loadConfig";
@@ -30,7 +32,7 @@ const mockLoadWorkflow = loadWorkflow as jest.Mocked<typeof loadWorkflow>;
 const MockGetVersions = getVersions as jest.Mocked<typeof getVersions>;
 
 describe("Index", () => {
-    let wrapper: any; // don't know how to add type hints here, see https://github.com/vuejs/vue-test-utils/issues/255
+    let wrapper: Wrapper<Vue>;
 
     beforeEach(() => {
         const testingPinia = createTestingPinia();
@@ -41,10 +43,7 @@ describe("Index", () => {
         MockGetVersions.mockResolvedValue([]);
         mockGetStateUpgradeMessages.mockImplementation(() => []);
         mockGetAppRoot.mockImplementation(() => "prefix/");
-        Object.defineProperty(window, "onbeforeunload", {
-            value: null,
-            writable: true,
-        });
+
         wrapper = shallowMount(Index, {
             propsData: {
                 workflowId: "workflow_id",
@@ -53,70 +52,19 @@ describe("Index", () => {
                 moduleSections: [],
                 dataManagers: [],
                 workflows: [],
-                toolbox: [],
             },
             localVue,
             pinia: testingPinia,
         });
     });
 
-    async function resetChanges() {
-        wrapper.vm.hasChanges = false;
-        await wrapper.vm.$nextTick();
-    }
-
-    it("resolves datatypes", async () => {
-        expect(wrapper.datatypesMapper).not.toBeNull();
-        expect(wrapper.datatypes).not.toBeNull();
-    });
-
-    it("routes to download URL and respects Galaxy prefix", async () => {
-        Object.defineProperty(window, "location", {
-            value: "original",
-            writable: true,
-        });
-        wrapper.vm.onDownload();
-        expect(window.location).toBe("prefix/api/workflows/workflow_id/download?format=json-download");
+    it("renders correctly", () => {
+        expect(wrapper.exists()).toBe(true);
     });
 
-    it("tracks changes to annotations", async () => {
-        expect(wrapper.vm.hasChanges).toBeFalsy();
-        wrapper.vm.annotation = "original annotation";
-        await wrapper.vm.$nextTick();
-        expect(wrapper.vm.hasChanges).toBeTruthy();
-
-        resetChanges();
-
-        wrapper.vm.annotation = "original annotation";
-        await wrapper.vm.$nextTick();
-        expect(wrapper.vm.hasChanges).toBeFalsy();
-
-        wrapper.vm.annotation = "new annotation";
-        await wrapper.vm.$nextTick();
-        expect(wrapper.vm.hasChanges).toBeTruthy();
-    });
-
-    it("tracks changes to name", async () => {
-        expect(wrapper.hasChanges).toBeFalsy();
-        wrapper.vm.name = "original name";
-        await wrapper.vm.$nextTick();
-        expect(wrapper.vm.hasChanges).toBeTruthy();
-
-        resetChanges();
-
-        wrapper.vm.name = "original name";
-        await wrapper.vm.$nextTick();
-        expect(wrapper.vm.hasChanges).toBeFalsy();
-
-        wrapper.vm.name = "new name";
-        await wrapper.vm.$nextTick();
-        expect(wrapper.vm.hasChanges).toBeTruthy();
-    });
+    it("loads the workflow", async () => {
+        await nextTick();
 
-    it("prevents navigation only if hasChanges", async () => {
-        expect(wrapper.vm.hasChanges).toBeFalsy();
-        await wrapper.vm.onChange();
-        const confirmationRequired = wrapper.emitted()["update:confirmation"][0][0];
-        expect(confirmationRequired).toBeTruthy();
+        expect(mockLoadWorkflow).toHaveBeenCalledWith({ id: "workflow_id", version: 1 });
     });
 });
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 182dc05823e3..7762ae4f253f 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -1,32 +1,911 @@
+<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 type { WorkflowInput } from "@/components/Workflow/Editor/modules/inputs";
+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 { getWorkflowInputs } from "./modules/inputs";
+
+import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
+import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
+import InputPanel from "@/components/Panels/InputPanel.vue";
+import ToolPanel from "@/components/Panels/ToolPanel.vue";
+import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
+import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
+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 {
+    dataManagers: any[];
+    moduleSections: any[];
+    workflowId?: string;
+    initialVersion?: number;
+    workflowTags?: string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    workflowId: undefined,
+    initialVersion: undefined,
+    workflowTags: () => [],
+});
+const emit = defineEmits<{
+    (e: "skipNextReload"): void;
+    (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 inputs = getWorkflowInputs();
+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 highlightAttribute = ref<string | undefined>();
+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(args?: any) {
+    ensureParametersSet();
+    stateStore.activeNodeId = null;
+    activityBar.value?.setActiveSideBar("workflow-editor-attributes");
+
+    if (args?.highlight) {
+        highlightAttribute.value = args.highlight;
+    }
+}
+
+/** 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, state: WorkflowInput["stateOverwrites"]) {
+    insertStep(moduleName, moduleName, moduleId, state);
+}
+
+async function onInsertWorkflow(workflowId: string, workflowName: string, state: any) {
+    insertStep(workflowId, workflowName, "subworkflow", state);
+}
+
+async function copyIntoWorkflow(workflowId: string) {
+    try {
+        const data = await loadWorkflow({ id: workflowId });
+
+        const action = new CopyIntoWorkflowAction(
+            id.value,
+            data,
+            defaultPosition(graphOffset.value, transform.value)
+        );
+
+        undoRedoStore.applyAction(action);
+
+        // Determine if any parameters were 'upgraded' and provide message
+
+        const insertedStateMessages = getStateUpgradeMessages(data);
+
+        onInsertedStateMessages(insertedStateMessages);
+    } catch (e) {
+        setModalMessage("Importing workflow failed", errorMessageAsString(e));
+    }
+}
+
+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);
+    }
+}
+
+async function insertStep(contentId: string, name: string, type: NewStep["type"], state?: any) {
+    const action = new InsertStepAction(stepStore, stateStore, {
+        contentId,
+        name,
+        type,
+        position: defaultPosition(graphOffset.value, transform.value),
+    });
+
+    undoRedoStore.applyAction(action);
+    const stepData = action.getNewStepData();
+
+    const response = await getModule(
+        { name, type, content_id: contentId, tool_state: state },
+        stepData.id,
+        stateStore.setLoadingState
+    );
+
+    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 createNewWorkflow() {
+    await saveOrCreate();
+
+    router.push("/workflows/edit");
+}
+
+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,
+            uuid: undefined,
+            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();
+    } else if (activityId === "workflow-create") {
+        createNewWorkflow();
+    }
+}
+
+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;
+
+        emit("skipNextReload");
+
+        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 +920,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
@@ -63,11 +942,7 @@
                     :license="license"
                     :steps="steps"
                     :datatypes-mapper="datatypesMapper"
-                    @onAttributes="
-                        (e) => {
-                            showAttributes(e);
-                        }
-                    "
+                    @onAttributes="(e) => showAttributes(e)"
                     @onHighlight="onHighlight"
                     @onUnhighlight="onUnhighlight"
                     @onRefactor="onAttemptRefactor"
@@ -99,6 +974,7 @@
                     @update:annotationCurrent="setAnnotation" />
             </template>
         </ActivityBar>
+
         <template v-if="reportActive">
             <MarkdownEditor
                 ref="markdownEditor"
@@ -109,7 +985,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"
@@ -117,7 +993,7 @@
                         role="button"
                         @click="showAttributes">
                         <FontAwesomeIcon :icon="faTimes" />
-                    </b-button>
+                    </BButton>
                 </template>
             </MarkdownEditor>
         </template>
@@ -126,36 +1002,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"
@@ -180,7 +1058,7 @@
                         @labelChanged="onLabel"
                         @dataChanged="onSetData"
                         @stepUpdated="updateStep"
-                        @editSubworkflow="onEditSubworkflow"
+                        @editSubworkflow="onEditSubWorkflow"
                         @attemptRefactor="onAttemptRefactor"
                         @close="activeNodeId = null"></NodeInspector>
                 </WorkflowGraph>
@@ -189,887 +1067,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 { getWorkflowInputs } from "./modules/inputs";
-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 InputPanel from "@/components/Panels/InputPanel.vue";
-import ToolPanel from "@/components/Panels/ToolPanel.vue";
-import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
-import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
-
-library.add(faArrowLeft, faArrowRight, faHistory);
-
-export default {
-    components: {
-        ActivityBar,
-        MarkdownEditor,
-        SaveChangesModal,
-        StateUpgradeModal,
-        ToolPanel,
-        WorkflowAttributes,
-        WorkflowLint,
-        RefactorConfirmationModal,
-        MessagesModal,
-        WorkflowGraph,
-        FontAwesomeIcon,
-        UndoRedoStack,
-        WorkflowPanel,
-        NodeInspector,
-        InputPanel,
-    },
-    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,
-        },
-    },
-    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(args) {
-            ensureParametersSet();
-            stateStore.activeNodeId = null;
-            activityBar.value?.setActiveSideBar("workflow-editor-attributes");
-            if (args?.highlight) {
-                this.highlightAttribute = args.highlight;
-            }
-        }
-
-        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();
-        const inputs = getWorkflowInputs();
-
-        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,
-            inputs,
-        };
-    },
-    data() {
-        return {
-            versions: [],
-            labels: {},
-            services: null,
-            stateMessages: [],
-            insertedStateMessages: [],
-            refactorActions: [],
-            scrollToId: null,
-            highlightId: null,
-            highlightAttribute: 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");
-        },
-        async onInsertModule(module_id, module_name, state) {
-            this._insertStep(module_name, module_name, module_id, state);
-        },
-        onInsertWorkflow(workflow_id, workflow_name) {
-            this._insertStep(workflow_id, workflow_name, "subworkflow");
-        },
-        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 createNewWorkflow() {
-            await this.saveOrCreate();
-            this.$router.push("/workflows/edit");
-        },
-        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();
-            }
-
-            if (activityId === "workflow-create") {
-                this.createNewWorkflow();
-            }
-        },
-        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;
-                this.$emit("skipNextReload");
-                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);
-            }
-        },
-        async _insertStep(contentId, name, type, state) {
-            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();
-
-            const response = await getModule(
-                { name, type, content_id: contentId, tool_state: state },
-                stepData.id,
-                this.stateStore.setLoadingState
-            );
-
-            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>
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 =
diff --git a/client/src/components/Workflow/Editor/modules/services.js b/client/src/components/Workflow/Editor/modules/services.js
index 8534cc3b18a7..e190eed63f34 100644
--- a/client/src/components/Workflow/Editor/modules/services.js
+++ b/client/src/components/Workflow/Editor/modules/services.js
@@ -2,12 +2,11 @@ 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 {
         const { data } = await axios.get(`${getAppRoot()}api/workflows/${id}/versions`);
+
         return data;
     } catch (e) {
         rethrowSimple(e);
@@ -51,24 +50,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) {
diff --git a/client/src/entry/analysis/modules/WorkflowEditor.vue b/client/src/entry/analysis/modules/WorkflowEditor.vue
index b05627cfbdb1..0b2b1994a488 100644
--- a/client/src/entry/analysis/modules/WorkflowEditor.vue
+++ b/client/src/entry/analysis/modules/WorkflowEditor.vue
@@ -1,3 +1,75 @@
+<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 Editor from "@/components/Workflow/Editor/Index.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 skipNextReload = ref(false);
+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;
+
+    if (skipNextReload.value) {
+        reloadEditor = false;
+        skipNextReload.value = 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
         v-if="editorConfig"
@@ -7,67 +79,6 @@
         :initial-version="editorConfig.initialVersion"
         :module-sections="editorConfig.moduleSections"
         :workflow-tags="editorConfig.tags"
-        @update:confirmation="$emit('update:confirmation', $event)"
+        @update:confirmation="emit('update:confirmation', $event)"
         @skipNextReload="() => (skipNextReload = true)" />
 </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,
-            skipNextReload: false,
-        };
-    },
-    watch: {
-        "$route.params": {
-            handler() {
-                this.getEditorConfig();
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        async getEditorConfig() {
-            let reloadEditor = true;
-
-            if (this.skipNextReload) {
-                reloadEditor = false;
-                this.skipNextReload = false;
-            }
-
-            this.storedWorkflowId = Query.get("id");
-            this.workflowId = Query.get("workflow_id");
-            this.version = Query.get("version");
-            this.previousHistoryLength = window.history.length;
-
-            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>
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index b119e9c0cf15..a376e1900834 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:
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();
+}