Decompose dependencies around utils/data.js to avoid circular dependencies.

client/src/app/galaxy.js

@@ -55,8 +55,19 @@ GalaxyApp.prototype._init = function (options, bootstrapped) {
     /* These shouldn't probably be here, but they need to be right now for
      * compatibility with external plugins */
     this.data = {};
-    this.data.create = create;
-    this.data.dialog = dialog;
+
+    const galaxy = this;
+
+    const createWithGalaxyProvided = (...args) => {
+        return create(galaxy, ...args);
+    };
+
+    const dialogWithGalaxyProvided = (...args) => {
+        return dialog(galaxy, ...args);
+    };
+
+    this.data.create = createWithGalaxyProvided;
+    this.data.dialog = dialogWithGalaxyProvided;
 
     return this;
 };

client/src/components/FilesDialog/FilesInput.vue

@@ -3,7 +3,7 @@ import { BFormInput } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { type FileSourceBrowsingMode, type FilterFileSourcesOptions } from "@/api/remoteFiles";
-import { filesDialog } from "@/utils/data";
+import { filesDialog } from "@/utils/dataModals";
 
 import { type SelectionItem } from "../SelectionDialog/selectionTypes";
 

client/src/components/Upload/CompositeRow.vue

@@ -3,7 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faEdit, faExclamation, faFolderOpen, faLaptop } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BDropdown, BDropdownItem } from "bootstrap-vue";
-import { filesDialog } from "utils/data";
+import { filesDialog } from "utils/dataModals";
 import { bytesToString } from "utils/utils";
 import { computed, ref } from "vue";
 

client/src/components/Upload/DefaultBox.vue

@@ -7,7 +7,7 @@ import Vue, { computed, type Ref, ref } from "vue";
 import type { HDASummary } from "@/api";
 import { monitorUploadedHistoryItems } from "@/composables/monitorUploadedHistoryItems";
 import type { DbKey, ExtensionDetails } from "@/composables/uploadConfigurations";
-import { filesDialog } from "@/utils/data";
+import { filesDialog } from "@/utils/dataModals";
 import { UploadQueue } from "@/utils/upload-queue.js";
 
 import type { CollectionType } from "../History/adapters/buildCollectionModal";

client/src/components/Upload/RulesInput.vue

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { getGalaxyInstance } from "app";
 import { BAlert, BButton } from "bootstrap-vue";
 import { getRemoteEntries, getRemoteEntriesAt } from "components/Upload/utils";
-import { filesDialog } from "utils/data";
+import { filesDialog } from "utils/dataModals";
 import { urlData } from "utils/url";
 import { computed, ref } from "vue";
 

client/src/utils/data.js

@@ -1,46 +1,19 @@
-import { getGalaxyInstance } from "app";
-import axios from "axios";
-import { FilesDialog } from "components/FilesDialog";
 import { useGlobalUploadModal } from "composables/globalUploadModal";
-import $ from "jquery";
-import { getAppRoot } from "onload/loadConfig";
-import Vue from "vue";
 
 import { uploadPayload } from "@/utils/upload-payload.js";
 import { uploadSubmit } from "@/utils/upload-submit.js";
 import { startWatchingHistory } from "@/watch/watchHistory";
 
-import DataDialog from "components/DataDialog/DataDialog.vue";
-import DatasetCollectionDialog from "components/SelectionDialog/DatasetCollectionDialog.vue";
+import { getCurrentGalaxyHistory, mountSelectionDialog } from "./dataModalUtils";
 
-// This should be moved more centrally (though still hanging off Galaxy for
-// external use?), and populated from the store; just using this as a temporary
-// interface.
-export async function getCurrentGalaxyHistory() {
-    const galaxy = getGalaxyInstance();
-    if (galaxy.currHistoryPanel && galaxy.currHistoryPanel.model.id) {
-        // TODO: use central store for this.
-        return galaxy.currHistoryPanel.model.id;
-    } else {
-        // Otherwise manually fetch the current history json and use that id.
-        return axios
-            .get(`${getAppRoot()}history/current_history_json`)
-            .then((response) => {
-                return response.data.id;
-            })
-            .catch((err) => {
-                console.error("Error fetching current user history:", err);
-                return null;
-            });
-    }
-}
+import DataDialog from "components/DataDialog/DataDialog.vue";
 
 /**
  * Opens a modal dialog for data selection
  * @param {function} callback - Result function called with selection
  */
-export function dialog(callback, options = {}) {
-    getCurrentGalaxyHistory().then((history_id) => {
+export function dialog(galaxy, callback, options = {}) {
+    getCurrentGalaxyHistory(galaxy).then((history_id) => {
         Object.assign(options, {
             callback: callback,
             history: history_id,
@@ -49,48 +22,16 @@ export function dialog(callback, options = {}) {
             const { openGlobalUploadModal } = useGlobalUploadModal();
             openGlobalUploadModal(options);
         } else {
-            _mountSelectionDialog(DataDialog, options);
+            mountSelectionDialog(DataDialog, options);
         }
     });
 }
 
-/**
- * Opens a modal dialog for dataset collection selection
- * @param {function} callback - Result function called with selection
- */
-export function datasetCollectionDialog(callback, options = {}) {
-    getCurrentGalaxyHistory().then((history_id) => {
-        Object.assign(options, {
-            callback: callback,
-            history: history_id,
-        });
-        _mountSelectionDialog(DatasetCollectionDialog, options);
-    });
-}
-
-export function filesDialog(callback, options = {}) {
-    Object.assign(options, {
-        callback: callback,
-    });
-    _mountSelectionDialog(FilesDialog, options);
-}
-
-function _mountSelectionDialog(clazz, options) {
-    const instance = Vue.extend(clazz);
-    const vm = document.createElement("div");
-    $("body").append(vm);
-    new instance({
-        propsData: options,
-    }).$mount(vm);
-}
-
 /**
  * Creates a history dataset by submitting an upload request
  * TODO: This should live somewhere else.
  */
-export function create(options) {
-    const galaxy = getGalaxyInstance();
-
+export function create(galaxy, options) {
     async function getHistory() {
         if (!options.history_id) {
             return getCurrentGalaxyHistory();

client/src/utils/dataModalUtils.js

@@ -0,0 +1,34 @@
+import axios from "axios";
+import $ from "jquery";
+import { getAppRoot } from "onload/loadConfig";
+import Vue from "vue";
+
+// This should be moved more centrally (though still hanging off Galaxy for
+// external use?), and populated from the store; just using this as a temporary
+// interface.
+export async function getCurrentGalaxyHistory(galaxy) {
+    if (galaxy.currHistoryPanel && galaxy.currHistoryPanel.model.id) {
+        // TODO: use central store for this.
+        return galaxy.currHistoryPanel.model.id;
+    } else {
+        // Otherwise manually fetch the current history json and use that id.
+        return axios
+            .get(`${getAppRoot()}history/current_history_json`)
+            .then((response) => {
+                return response.data.id;
+            })
+            .catch((err) => {
+                console.error("Error fetching current user history:", err);
+                return null;
+            });
+    }
+}
+
+export function mountSelectionDialog(clazz, options) {
+    const instance = Vue.extend(clazz);
+    const vm = document.createElement("div");
+    $("body").append(vm);
+    new instance({
+        propsData: options,
+    }).$mount(vm);
+}

client/src/utils/dataModals.js

@@ -0,0 +1,27 @@
+import { getGalaxyInstance } from "app";
+import { FilesDialog } from "components/FilesDialog";
+
+import { getCurrentGalaxyHistory, mountSelectionDialog } from "./dataModalUtils";
+
+import DatasetCollectionDialog from "components/SelectionDialog/DatasetCollectionDialog.vue";
+
+/**
+ * Opens a modal dialog for dataset collection selection
+ * @param {function} callback - Result function called with selection
+ */
+export function datasetCollectionDialog(callback, options = {}) {
+    getCurrentGalaxyHistory(getGalaxyInstance()).then((history_id) => {
+        Object.assign(options, {
+            callback: callback,
+            history: history_id,
+        });
+        mountSelectionDialog(DatasetCollectionDialog, options);
+    });
+}
+
+export function filesDialog(callback, options = {}) {
+    Object.assign(options, {
+        callback: callback,
+    });
+    mountSelectionDialog(FilesDialog, options);
+}