From a606d6d91012668b2f53aa479be2c59b476c0abe Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 22 Mar 2024 17:30:29 -0500
Subject: [PATCH] refactor stores, track help mode position, only drag from
 header

---
 client/src/components/Form/FormDisplay.vue    | 10 ++-
 .../components/Masthead/HelpModeSwitch.vue    | 18 ++--
 client/src/components/Panels/HelpModeText.vue | 86 ++++++++++++-------
 .../src/entry/analysis/modules/Analysis.vue   |  5 +-
 .../stores/helpmode/helpModeStatusStore.js    | 20 -----
 .../stores/helpmode/helpModeStatusStore.ts    | 32 +++++++
 .../src/stores/helpmode/helpModeTextStore.js  | 25 ------
 .../src/stores/helpmode/helpModeTextStore.ts  | 45 ++++++++++
 8 files changed, 146 insertions(+), 95 deletions(-)
 delete mode 100644 client/src/stores/helpmode/helpModeStatusStore.js
 create mode 100644 client/src/stores/helpmode/helpModeStatusStore.ts
 delete mode 100644 client/src/stores/helpmode/helpModeTextStore.js
 create mode 100644 client/src/stores/helpmode/helpModeTextStore.ts

diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index 5bf7c3544376..293857ea4e33 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { mapStores } from "pinia";
+import { mapActions } from "pinia";
 import Vue from "vue";
 
 import { useHelpModeTextStore } from "@/stores/helpmode/helpModeTextStore";
@@ -102,7 +102,6 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useHelpModeTextStore),
         validation() {
             return validateInputs(this.formIndex, this.formData, this.allowEmptyValueOnRequiredInput);
         },
@@ -153,9 +152,14 @@ export default {
         // highlight initial errors
         this.onErrors();
     },
+    destroyed() {
+        // since the user is leaving the form, the help mode is reset
+        this.clearHelpModeText();
+    },
     methods: {
+        ...mapActions(useHelpModeTextStore, ["storeHelpModeText", "clearHelpModeText"]),
         callHelpMode() {
-            this.helpModeTextStore.addHelpModeText("tool_form_base");
+            this.storeHelpModeText("tool_form_base");
         },
         buildFormData() {
             const params = {};
diff --git a/client/src/components/Masthead/HelpModeSwitch.vue b/client/src/components/Masthead/HelpModeSwitch.vue
index 02534a75d5f4..8fbaafb431a3 100644
--- a/client/src/components/Masthead/HelpModeSwitch.vue
+++ b/client/src/components/Masthead/HelpModeSwitch.vue
@@ -1,20 +1,12 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { storeToRefs } from "pinia";
 
 import { useHelpModeStatusStore } from "@/stores/helpmode/helpModeStatusStore";
 
 const tooltip = "Enable/Disable Help Mode";
-const statusStore = useHelpModeStatusStore();
-const enabledStatus = computed({
-    get() {
-        return statusStore.helpmodestatus;
-    },
-    set(value: boolean) {
-        statusStore.setHelpModeStatus(value);
-    },
-});
+const { status } = storeToRefs(useHelpModeStatusStore());
 function toggleEnabledStatus() {
-    enabledStatus.value = !enabledStatus.value;
+    status.value = !status.value;
 }
 </script>
 
@@ -22,12 +14,12 @@ function toggleEnabledStatus() {
     <div>
         <button
             class="help-mode-button"
-            :class="{ highlight: enabledStatus }"
+            :class="{ highlight: status }"
             :title="tooltip"
             :aria-label="tooltip"
             @click="toggleEnabledStatus"
             @keydown.enter="toggleEnabledStatus">
-            <i class="fas fa-question-circle fa-lg" :class="{ highlight: enabledStatus }"> </i> Help Me
+            <i class="fas fa-question-circle fa-lg" :class="{ highlight: status }"> </i> Help Me
         </button>
     </div>
 </template>
diff --git a/client/src/components/Panels/HelpModeText.vue b/client/src/components/Panels/HelpModeText.vue
index 85cc1f52445d..e5837f4606e8 100644
--- a/client/src/components/Panels/HelpModeText.vue
+++ b/client/src/components/Panels/HelpModeText.vue
@@ -1,38 +1,58 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useDraggable } from "@vueuse/core";
+import { BButton } from "bootstrap-vue";
 import MarkdownIt from "markdown-it";
-import { computed, onMounted, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { computed, onMounted, ref, watch } from "vue";
 
 import { useHelpModeStatusStore } from "@/stores/helpmode/helpModeStatusStore";
 import { useHelpModeTextStore } from "@/stores/helpmode/helpModeTextStore";
 
+import Heading from "@/components/Common/Heading.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+library.add(faTimes);
+
 const md = MarkdownIt();
-const helpInfo = useHelpModeTextStore();
-const status = useHelpModeStatusStore();
+
+// local refs
+const { content, loading } = storeToRefs(useHelpModeTextStore());
+const { status, position } = storeToRefs(useHelpModeStatusStore());
+const el = ref<HTMLElement | null>(null);
+const helpModeHeader = ref<HTMLElement | null>(null);
+const helpTextRef = ref(null);
+
+// local computed refs
 const helpText = computed({
     get() {
-        return md.render(helpInfo.helpmodetext);
+        return md.render(content.value);
     },
     set() {
         //do nothing, this is set in components that add helptext
     },
 });
-const helpStatus = computed({
-    get() {
-        return status.helpmodestatus;
-    },
-    set(value: boolean) {
-        status.setHelpModeStatus(value);
-    },
-});
-function closeHelpMode() {
-    helpStatus.value = !helpStatus.value;
-}
-const el = ref<HTMLElement | null>(null);
-const { x, y, style } = useDraggable(el, {
-    initialValue: { x: 0, y: 0 },
+
+// draggable properties
+const {
+    x: dragX,
+    y: dragY,
+    style,
+} = useDraggable(helpModeHeader, {
+    initialValue: position.value,
 });
-const helpTextRef = ref(null);
+// watch both x and y, and do something if they change:
+watch(
+    () => [dragX.value, dragY.value],
+    ([newX, newY]) => {
+        if (newX && newY) {
+            position.value = { x: newX, y: newY };
+        }
+    }
+);
+
 onMounted(() => {
     const links = (helpTextRef.value as unknown as HTMLElement).querySelectorAll("a");
     links.forEach((link: HTMLAnchorElement) => {
@@ -40,23 +60,23 @@ onMounted(() => {
     });
 });
 </script>
+
 <template>
-    <div
-        ref="el"
-        :style="style"
-        style="position: fixed"
-        class="helptext unified-panel-body d-flex justify-content-between">
-        <div class="header">
-            <h1>Galaxy Help Mode</h1>
-            <button class="close-button" @click="closeHelpMode">
-                <i class="fas fa-times"></i>
-            </button>
+    <div ref="el" :style="style" class="help-text unified-panel-body d-flex justify-content-between">
+        <div ref="helpModeHeader" class="header">
+            <Heading h4 inline size="sm" class="flex-grow-1 mx-2">Galaxy Help Mode</Heading>
+            <BButton class="close-button" size="sm" @click="status = false">
+                <FontAwesomeIcon :icon="faTimes" />
+            </BButton>
         </div>
-        <div ref="helpTextRef" class="help-mode-container" v-html="helpText"></div>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-if="!loading" ref="helpTextRef" class="help-mode-container" v-html="helpText" />
+        <LoadingSpan v-else message="Loading help text" />
     </div>
 </template>
-<style>
-.helptext {
+
+<style scoped lang="scss">
+.help-text {
     display: flex;
     flex-direction: column;
     width: 25% !important;
@@ -68,6 +88,7 @@ onMounted(() => {
     border-width: 2px;
     border: solid;
     opacity: 90%;
+    position: fixed;
 }
 .header {
     display: flex;
@@ -76,6 +97,7 @@ onMounted(() => {
     justify-content: space-between;
     align-items: center;
     border-bottom: 2px solid #868686;
+    cursor: move;
     /* padding-bottom: 10px; */
 }
 .help-mode-container {
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 4e4bde89c9d3..52ab97bdf3c8 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { storeToRefs } from "pinia";
 import { onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -15,7 +16,7 @@ import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 const router = useRouter();
 const showCenter = ref(false);
 const { showPanels } = usePanels();
-const status = useHelpModeStatusStore();
+const { status: helpModeStatus } = storeToRefs(useHelpModeStatusStore());
 
 // methods
 function hideCenter() {
@@ -49,6 +50,6 @@ onUnmounted(() => {
             <HistoryIndex />
         </FlexPanel>
         <DragAndDropModal />
-        <HelpModeText v-if="status.helpmodestatus" />
+        <HelpModeText v-if="helpModeStatus" />
     </div>
 </template>
diff --git a/client/src/stores/helpmode/helpModeStatusStore.js b/client/src/stores/helpmode/helpModeStatusStore.js
deleted file mode 100644
index 282168b17ade..000000000000
--- a/client/src/stores/helpmode/helpModeStatusStore.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { defineStore } from "pinia";
-
-import { useHelpModeTextStore } from "./helpModeTextStore";
-
-export const useHelpModeStatusStore = defineStore("helpModeStatusStore", {
-    state: () => {
-        return {
-            helpmodestatus: false,
-        };
-    },
-
-    actions: {
-        setHelpModeStatus(status) {
-            this.helpmodestatus = status;
-            if (status == false) {
-                useHelpModeTextStore().clearHelpModeText();
-            }
-        },
-    },
-});
diff --git a/client/src/stores/helpmode/helpModeStatusStore.ts b/client/src/stores/helpmode/helpModeStatusStore.ts
new file mode 100644
index 000000000000..4510b90037ee
--- /dev/null
+++ b/client/src/stores/helpmode/helpModeStatusStore.ts
@@ -0,0 +1,32 @@
+/**
+ * Stores Galaxy Help Mode's status
+ */
+
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+// import { useHelpModeTextStore } from "./helpModeTextStore";
+
+export const useHelpModeStatusStore = defineStore("helpModeStatusStore", () => {
+    // TODO: Maybe `status` should be tracked in local storage?
+    // const status: Ref<boolean> = useUserLocalStorage("help-mode-status", false);
+
+    const status = ref(false);
+    const position = ref({ x: 0, y: 0 });
+
+    // TODO: I removed the following since we now clear the text when we go away from
+    // a component (the component is is destroyed) anyways.
+
+    // Clear help mode text when help mode is disabled
+    // watch(() => status.value, (newStatus) => {
+    //     status.value = newStatus;
+    //     if (!newStatus) {
+    //         useHelpModeTextStore().clearHelpModeText();
+    //     }
+    // });
+
+    return {
+        status,
+        position,
+    };
+});
diff --git a/client/src/stores/helpmode/helpModeTextStore.js b/client/src/stores/helpmode/helpModeTextStore.js
deleted file mode 100644
index 330c0e3dc422..000000000000
--- a/client/src/stores/helpmode/helpModeTextStore.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { defineStore } from "pinia";
-
-import config from "./helpTextConfig.yml";
-
-export const useHelpModeTextStore = defineStore("helpModeText", {
-    state: () => {
-        return {
-            helpmodetext: "Welcome to Galaxy Help Mode!",
-        };
-    },
-
-    actions: {
-        addHelpModeText(text) {
-            const file_path = config[text];
-            fetch("https://raw.githubusercontent.com/assuntad23/galaxy-help-markdown/main/" + file_path)
-                .then((response) => response.text())
-                .then((text) => {
-                    this.helpmodetext = text;
-                });
-        },
-        clearHelpModeText() {
-            this.helpmodetext = "Welcome to Galaxy Help Mode!";
-        },
-    },
-});
diff --git a/client/src/stores/helpmode/helpModeTextStore.ts b/client/src/stores/helpmode/helpModeTextStore.ts
new file mode 100644
index 000000000000..2daa83a5094f
--- /dev/null
+++ b/client/src/stores/helpmode/helpModeTextStore.ts
@@ -0,0 +1,45 @@
+/**
+ * Stores Galaxy Help Mode's help content
+ * TODO: Maybe this store is not needed and we have one singular `helpModeStore`?
+ */
+
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+import config from "./helpTextConfig.yml";
+
+const DEFAULT_HELP_TEXT = "Welcome to Galaxy Help Mode!";
+
+export const useHelpModeTextStore = defineStore("helpModeTextStore", () => {
+    // TODO: We can store multiple help mode texts in the following variable, referenced by "content ids".
+    // Then, `storeHelpModeText` can be modified to accept an id, and fetch and store the corresponding
+    // help mode text. Then maybe we could have a tabbed interface within the help mode, we would prevent
+    // multiple fetched for the same component or it would still open up other possibilities...
+    // const contents = ref({});
+
+    const content = ref(DEFAULT_HELP_TEXT);
+    const loading = ref(false);
+
+    /** Adds help mode text for the given Galaxy component `id` */
+    async function storeHelpModeText(id: string) {
+        const file_path = config[id];
+        loading.value = true;
+        await fetch("https://raw.githubusercontent.com/assuntad23/galaxy-help-markdown/main/" + file_path)
+            .then((response) => response.text())
+            .then((text) => {
+                content.value = text;
+                loading.value = false;
+            });
+    }
+
+    function clearHelpModeText() {
+        content.value = DEFAULT_HELP_TEXT;
+    }
+
+    return {
+        content,
+        loading,
+        storeHelpModeText,
+        clearHelpModeText,
+    };
+});