From 4372e7f90025972a396521610832d49cf91f5f7c Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 15 Nov 2023 15:00:27 -0500
Subject: [PATCH 1/6] Swap UploadButton to composition+ts

---
 client/src/components/Upload/UploadButton.vue | 112 +++++++++---------
 1 file changed, 57 insertions(+), 55 deletions(-)

diff --git a/client/src/components/Upload/UploadButton.vue b/client/src/components/Upload/UploadButton.vue
index ade8abee45b5..9a11228adc89 100644
--- a/client/src/components/Upload/UploadButton.vue
+++ b/client/src/components/Upload/UploadButton.vue
@@ -1,9 +1,64 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+
+import { eventHub } from "@/components/plugins/eventHub.js";
+import { useGlobalUploadModal } from "@/composables/globalUploadModal";
+import localize from "@/utils/localization";
+import Query from "@/utils/query-string-parsing";
+
+library.add(faUpload);
+
+const props = withDefaults(
+    defineProps<{
+        title?: string;
+    }>(),
+    {
+        title: "Download from URL or upload files from disk",
+    }
+);
+
+const { openGlobalUploadModal } = useGlobalUploadModal();
+
+const status = ref("");
+const percentage = ref(0);
+
+onMounted(() => {
+    eventHub.$on("upload:status", setStatus);
+    eventHub.$on("upload:percentage", setPercentage);
+    if (Query.get("tool_id") == "upload1") {
+        openGlobalUploadModal();
+    }
+});
+
+onUnmounted(() => {
+    eventHub.$off("upload:status", setStatus);
+    eventHub.$off("upload:percentage", setPercentage);
+});
+
+const localizedTitle = computed(() => {
+    return localize(props.title);
+});
+function setStatus(val: string) {
+    status.value = val;
+}
+
+function setPercentage(val: number) {
+    percentage.value = val;
+}
+
+function showUploadDialog() {
+    openGlobalUploadModal();
+}
+</script>
 <template>
     <b-button
         id="activity-upload"
         v-b-tooltip.hover.noninteractive.bottom
-        :aria-label="title | localize"
-        :title="title | localize"
+        :aria-label="localizedTitle"
+        :title="localizedTitle"
         class="upload-button"
         size="sm"
         @click="showUploadDialog">
@@ -21,56 +76,3 @@
         </span>
     </b-button>
 </template>
-
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faUpload } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { VBTooltip } from "bootstrap-vue";
-import { useGlobalUploadModal } from "composables/globalUploadModal";
-import Query from "utils/query-string-parsing";
-
-library.add(faUpload);
-
-export default {
-    components: { FontAwesomeIcon },
-    directives: {
-        "v-b-tooltip": VBTooltip,
-    },
-    props: {
-        title: { type: String, default: "Download from URL or upload files from disk" },
-    },
-    setup() {
-        const { openGlobalUploadModal } = useGlobalUploadModal();
-        return { openGlobalUploadModal };
-    },
-    data() {
-        return {
-            status: "",
-            percentage: 0,
-        };
-    },
-    mounted() {
-        this.eventHub.$on("upload:status", this.setStatus);
-        this.eventHub.$on("upload:percentage", this.setPercentage);
-        if (Query.get("tool_id") == "upload1") {
-            this.showUploadDialog();
-        }
-    },
-    beforeDestroy() {
-        this.eventHub.$off("upload:status", this.setStatus);
-        this.eventHub.$off("upload:percentage", this.setPercentage);
-    },
-    methods: {
-        showUploadDialog() {
-            this.openGlobalUploadModal();
-        },
-        setStatus(val) {
-            this.status = val;
-        },
-        setPercentage(val) {
-            this.percentage = Math.round(val);
-        },
-    },
-};
-</script>

From 090eefe0429fdfca8791faa81ee8ac4fef12b34a Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 15 Nov 2023 16:42:33 -0500
Subject: [PATCH 2/6] Swap upload eventhub usage for simple store

---
 .../ActivityBar/Items/UploadItem.vue          | 26 ++++---------------
 client/src/components/Upload/UploadButton.vue | 24 +++--------------
 .../src/components/Upload/UploadContainer.vue | 15 ++++++-----
 client/src/stores/uploadStore.ts              |  9 +++++++
 4 files changed, 27 insertions(+), 47 deletions(-)
 create mode 100644 client/src/stores/uploadStore.ts

diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index 32f9b0a106e1..e5c2b357d0e7 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, type Ref, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { onMounted } from "vue";
 
-import { eventHub } from "@/components/plugins/eventHub.js";
 import { useGlobalUploadModal } from "@/composables/globalUploadModal.js";
+import { useUploadStore } from "@/stores/uploadStore";
 import Query from "@/utils/query-string-parsing.js";
 
 import ActivityItem from "components/ActivityBar/ActivityItem.vue";
 
-const { openGlobalUploadModal } = useGlobalUploadModal();
-
 export interface Props {
     id: string;
     title: string;
@@ -22,34 +21,19 @@ const emit = defineEmits<{
     (e: "click"): void;
 }>();
 
-const status: Ref<string> = ref("success");
-const percentage: Ref<number> = ref(0);
+const { openGlobalUploadModal } = useGlobalUploadModal();
+const { percentage, status } = storeToRefs(useUploadStore());
 
 onMounted(() => {
-    eventHub.$on("upload:status", setStatus);
-    eventHub.$on("upload:percentage", setPercentage);
     if (Query.get("tool_id") == "upload1") {
         openGlobalUploadModal();
     }
 });
 
-onUnmounted(() => {
-    eventHub.$off("upload:status", setStatus);
-    eventHub.$off("upload:percentage", setPercentage);
-});
-
 function onUploadModal() {
     emit("click");
     openGlobalUploadModal();
 }
-
-function setStatus(val: string): void {
-    status.value = val;
-}
-
-function setPercentage(val: number): void {
-    percentage.value = val;
-}
 </script>
 
 <template>
diff --git a/client/src/components/Upload/UploadButton.vue b/client/src/components/Upload/UploadButton.vue
index 9a11228adc89..110335858d57 100644
--- a/client/src/components/Upload/UploadButton.vue
+++ b/client/src/components/Upload/UploadButton.vue
@@ -2,10 +2,11 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { computed, onMounted } from "vue";
 
-import { eventHub } from "@/components/plugins/eventHub.js";
 import { useGlobalUploadModal } from "@/composables/globalUploadModal";
+import { useUploadStore } from "@/stores/uploadStore";
 import localize from "@/utils/localization";
 import Query from "@/utils/query-string-parsing";
 
@@ -21,34 +22,17 @@ const props = withDefaults(
 );
 
 const { openGlobalUploadModal } = useGlobalUploadModal();
-
-const status = ref("");
-const percentage = ref(0);
+const { percentage, status } = storeToRefs(useUploadStore());
 
 onMounted(() => {
-    eventHub.$on("upload:status", setStatus);
-    eventHub.$on("upload:percentage", setPercentage);
     if (Query.get("tool_id") == "upload1") {
         openGlobalUploadModal();
     }
 });
 
-onUnmounted(() => {
-    eventHub.$off("upload:status", setStatus);
-    eventHub.$off("upload:percentage", setPercentage);
-});
-
 const localizedTitle = computed(() => {
     return localize(props.title);
 });
-function setStatus(val: string) {
-    status.value = val;
-}
-
-function setPercentage(val: number) {
-    percentage.value = val;
-}
-
 function showUploadDialog() {
     openGlobalUploadModal();
 }
diff --git a/client/src/components/Upload/UploadContainer.vue b/client/src/components/Upload/UploadContainer.vue
index 194705b4e57c..ba4fa08dbcc6 100644
--- a/client/src/components/Upload/UploadContainer.vue
+++ b/client/src/components/Upload/UploadContainer.vue
@@ -9,9 +9,10 @@ import {
     getUploadDatatypes,
     getUploadDbKeys,
 } from "components/Upload/utils";
+import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
-import { eventHub } from "@/components/plugins/eventHub.js";
+import { useUploadStore } from "@/stores/uploadStore";
 import { uploadPayload } from "@/utils/upload-payload.js";
 
 import CompositeBox from "./CompositeBox";
@@ -79,6 +80,8 @@ const listExtensions = ref([]);
 const listDbKeys = ref([]);
 const regular = ref(null);
 
+const { percentage, status } = storeToRefs(useUploadStore());
+
 const effectiveExtensions = computed(() => {
     if (props.formats === null || !datatypesMapperReady.value) {
         return listExtensions.value;
@@ -133,12 +136,12 @@ async function loadMappers() {
     datatypesMapperReady.value = true;
 }
 
-function progress(percentage, status = null) {
-    if (percentage !== null) {
-        eventHub.$emit(`upload:percentage`, percentage);
+function progress(newPercentage, newStatus = null) {
+    if (newPercentage !== null) {
+        percentage.value = newPercentage;
     }
-    if (status !== null) {
-        eventHub.$emit(`upload:status`, status);
+    if (newStatus !== null) {
+        status.value = newStatus;
     }
 }
 
diff --git a/client/src/stores/uploadStore.ts b/client/src/stores/uploadStore.ts
new file mode 100644
index 000000000000..e6229b438ca8
--- /dev/null
+++ b/client/src/stores/uploadStore.ts
@@ -0,0 +1,9 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useUploadStore = defineStore("upload", () => {
+    const percentage = ref<number>(0);
+    const status = ref<string>("");
+
+    return { percentage, status };
+});

From 7bdf621a339506affdda9826905bb3cba53837f1 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 15 Nov 2023 17:24:57 -0500
Subject: [PATCH 3/6] Swpa historyempty to comp+ts

---
 .../History/CurrentHistory/HistoryEmpty.vue   | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryEmpty.vue b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
index addac9563877..69a7f9304b43 100644
--- a/client/src/components/History/CurrentHistory/HistoryEmpty.vue
+++ b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
@@ -1,33 +1,36 @@
+<script setup lang="ts">
+import { useGlobalUploadModal } from "composables/globalUploadModal";
+
+import { eventHub } from "@/components/plugins/eventHub";
+import { localize } from "@/utils/localization";
+
+const props = withDefaults(
+    defineProps<{
+        message: string;
+        writable: boolean;
+    }>(),
+    {
+        message: "This history is empty.",
+        writable: true,
+    }
+);
+
+const { openGlobalUploadModal } = useGlobalUploadModal();
+function clickDataLink() {
+    eventHub.$emit("openToolSection", "getext");
+}
+</script>
+
 <template>
     <b-alert show>
         <h4 class="mb-1">
             <i class="fa fa-info-circle empty-message"></i>
-            <span>{{ message | l }}</span>
+            <span>{{ localize(message) }}</span>
         </h4>
-        <p v-if="writable">
+        <p v-if="props.writable">
             <a v-localize href="#" @click.prevent="openGlobalUploadModal">You can load your own data</a>
             <span v-localize>or</span>
             <a v-localize href="#" @click.prevent="clickDataLink">get data from an external source</a>.
         </p>
     </b-alert>
 </template>
-
-<script>
-import { useGlobalUploadModal } from "composables/globalUploadModal";
-
-export default {
-    props: {
-        message: { type: String, default: "This history is empty." },
-        writable: { type: Boolean, default: true },
-    },
-    setup() {
-        const { openGlobalUploadModal } = useGlobalUploadModal();
-        return { openGlobalUploadModal };
-    },
-    methods: {
-        clickDataLink() {
-            this.eventHub.$emit("openToolSection", "getext");
-        },
-    },
-};
-</script>

From 3bc2ac036fc51b7e58ceb9e5c958271f5980379d Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 15 Nov 2023 17:29:21 -0500
Subject: [PATCH 4/6] Swap HistoryEmpty to use veuuse's event bus

Fix optional props in historyempty
---
 .../History/CurrentHistory/HistoryEmpty.vue          | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryEmpty.vue b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
index 69a7f9304b43..b5de2c0c69d2 100644
--- a/client/src/components/History/CurrentHistory/HistoryEmpty.vue
+++ b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { useGlobalUploadModal } from "composables/globalUploadModal";
+import { useEventBus } from "@vueuse/core";
 
-import { eventHub } from "@/components/plugins/eventHub";
+import { useGlobalUploadModal } from "@/composables/globalUploadModal";
 import { localize } from "@/utils/localization";
 
+const { emit } = useEventBus("open-tool-section");
+
 const props = withDefaults(
     defineProps<{
-        message: string;
-        writable: boolean;
+        message?: string;
+        writable?: boolean;
     }>(),
     {
         message: "This history is empty.",
@@ -17,7 +19,7 @@ const props = withDefaults(
 
 const { openGlobalUploadModal } = useGlobalUploadModal();
 function clickDataLink() {
-    eventHub.$emit("openToolSection", "getext");
+    emit("openToolSection", "getext");
 }
 </script>
 

From fc24d780f86a79644f3ba5e66de3c5b73757713e Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 15 Nov 2023 17:40:29 -0500
Subject: [PATCH 5/6] Swap ToolSection to watch vueuse eventbus

---
 .../components/History/CurrentHistory/HistoryEmpty.vue    | 4 ++--
 client/src/components/Panels/Common/ToolSection.vue       | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryEmpty.vue b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
index b5de2c0c69d2..f8db2b52cfc3 100644
--- a/client/src/components/History/CurrentHistory/HistoryEmpty.vue
+++ b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
@@ -4,7 +4,7 @@ import { useEventBus } from "@vueuse/core";
 import { useGlobalUploadModal } from "@/composables/globalUploadModal";
 import { localize } from "@/utils/localization";
 
-const { emit } = useEventBus("open-tool-section");
+const { emit } = useEventBus<string>("open-tool-section");
 
 const props = withDefaults(
     defineProps<{
@@ -19,7 +19,7 @@ const props = withDefaults(
 
 const { openGlobalUploadModal } = useGlobalUploadModal();
 function clickDataLink() {
-    emit("openToolSection", "getext");
+    emit("getext");
 }
 </script>
 
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index ac087d2bb9ab..5c3a00e3e9d6 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useEventBus } from "@vueuse/core";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
-import { eventHub } from "@/components/plugins/eventHub.js";
 import { useConfig } from "@/composables/config";
 import { type ToolSectionLabel, useToolStore } from "@/stores/toolStore";
 import ariaAlert from "@/utils/ariaAlert";
@@ -15,6 +15,8 @@ const emit = defineEmits<{
     (e: "onOperation", tool: any, evt: Event): void;
 }>();
 
+const eventHub = useEventBus<string>("open-tool-section");
+
 const props = defineProps({
     category: {
         type: Object,
@@ -132,11 +134,11 @@ watch(
 );
 
 onMounted(() => {
-    eventHub.$on("openToolSection", openToolSection);
+    eventHub.on(openToolSection);
 });
 
 onUnmounted(() => {
-    eventHub.$off("openToolSection", openToolSection);
+    eventHub.off(openToolSection);
 });
 
 function openToolSection(sectionId: string) {

From d59c55420e14f53eb141aaffcb6a788f48f0b496 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 15 Nov 2023 17:41:10 -0500
Subject: [PATCH 6/6] Drop all eventHub usage.

---
 .../components/Panels/Common/ToolSection.vue  |  6 +++---
 client/src/components/plugins/eventHub.js     | 21 -------------------
 client/src/components/plugins/index.js        |  1 -
 client/src/utils/mountVueComponent.js         |  7 +------
 client/tests/jest/helpers.js                  |  2 --
 5 files changed, 4 insertions(+), 33 deletions(-)
 delete mode 100644 client/src/components/plugins/eventHub.js

diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 5c3a00e3e9d6..0747cc71da3f 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -15,7 +15,7 @@ const emit = defineEmits<{
     (e: "onOperation", tool: any, evt: Event): void;
 }>();
 
-const eventHub = useEventBus<string>("open-tool-section");
+const eventBus = useEventBus<string>("open-tool-section");
 
 const props = defineProps({
     category: {
@@ -134,11 +134,11 @@ watch(
 );
 
 onMounted(() => {
-    eventHub.on(openToolSection);
+    eventBus.on(openToolSection);
 });
 
 onUnmounted(() => {
-    eventHub.off(openToolSection);
+    eventBus.off(openToolSection);
 });
 
 function openToolSection(sectionId: string) {
diff --git a/client/src/components/plugins/eventHub.js b/client/src/components/plugins/eventHub.js
deleted file mode 100644
index 16f137964a46..000000000000
--- a/client/src/components/plugins/eventHub.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Mixin provides global event bus other than $root.$emit. Avoids event naming conflicts and makes
- * opt-in possible, also works when components aren't part of the same Vue app tree as is often the
- * case with our app until backbone is gone.
- */
-
-import Vue from "vue";
-
-export const eventHub = new Vue();
-
-export const eventHubMixin = {
-    created() {
-        this.eventHub = eventHub;
-    },
-};
-
-export const eventHubPlugin = {
-    install(Vue) {
-        Vue.mixin(eventHubMixin);
-    },
-};
diff --git a/client/src/components/plugins/index.js b/client/src/components/plugins/index.js
index fb69bc327c50..47ae8061c664 100644
--- a/client/src/components/plugins/index.js
+++ b/client/src/components/plugins/index.js
@@ -1,4 +1,3 @@
-export { eventHubMixin, eventHubPlugin } from "./eventHub";
 export { iconMixin, iconPlugin } from "./icons";
 export { localizationPlugin } from "./localization";
 export { vueRxShortcutPlugin, vueRxShortcuts } from "./vueRxShortcuts";
diff --git a/client/src/utils/mountVueComponent.js b/client/src/utils/mountVueComponent.js
index 222af94a9b5a..62b969b299ab 100644
--- a/client/src/utils/mountVueComponent.js
+++ b/client/src/utils/mountVueComponent.js
@@ -3,7 +3,7 @@
 // the same plugins and events.
 
 import BootstrapVue from "bootstrap-vue";
-import { eventHubPlugin, iconPlugin, localizationPlugin, vueRxShortcutPlugin } from "components/plugins";
+import { iconPlugin, localizationPlugin, vueRxShortcutPlugin } from "components/plugins";
 import Vue from "vue";
 import Vuex from "vuex";
 
@@ -14,11 +14,6 @@ Vue.use(Vuex);
 // Bootstrap components
 Vue.use(BootstrapVue);
 
-// Add a global event bus. We could just use root but I don't think that will
-// work right when we have more than one root, which we often will until the
-// application has been completely converted to Vue.
-Vue.use(eventHubPlugin);
-
 // localization filters and directives
 Vue.use(localizationPlugin);
 
diff --git a/client/tests/jest/helpers.js b/client/tests/jest/helpers.js
index 4c9a75f604e7..0cfdb6648ce0 100644
--- a/client/tests/jest/helpers.js
+++ b/client/tests/jest/helpers.js
@@ -3,7 +3,6 @@
  */
 import { createLocalVue, shallowMount } from "@vue/test-utils";
 import BootstrapVue from "bootstrap-vue";
-import { eventHubPlugin } from "components/plugins/eventHub";
 import { iconPlugin } from "components/plugins/icons";
 import { localizationPlugin } from "components/plugins/localization";
 import { vueRxShortcutPlugin } from "components/plugins/vueRxShortcuts";
@@ -190,7 +189,6 @@ export function getLocalVue(instrumentLocalization = false) {
     const l = instrumentLocalization ? testLocalize : _l;
     localVue.use(localizationPlugin, l);
     localVue.use(vueRxShortcutPlugin);
-    localVue.use(eventHubPlugin);
     localVue.use(iconPlugin);
     localVue.directive("b-tooltip", mockedDirective);
     localVue.directive("b-popover", mockedDirective);