From 9f628f3a37cf3d6e264c67df6430e4cfcb0770b0 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Thu, 21 Mar 2024 11:42:02 -0400
Subject: [PATCH 1/6] creating new branch based off dev for help mode

---
 client/src/components/Form/FormDisplay.vue    |  8 ++
 .../components/Masthead/HelpModeSwitch.vue    | 49 +++++++++++
 client/src/components/Masthead/Masthead.vue   |  4 +
 client/src/components/Panels/HelpModeText.vue | 87 +++++++++++++++++++
 .../src/entry/analysis/modules/Analysis.vue   |  4 +
 .../stores/helpmode/helpModeStatusStore.js    | 20 +++++
 .../src/stores/helpmode/helpModeTextStore.js  | 25 ++++++
 client/src/stores/helpmode/helpTextConfig.yml |  2 +
 client/webpack.config.js                      |  6 ++
 database/info.txt                             |  1 -
 10 files changed, 205 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Masthead/HelpModeSwitch.vue
 create mode 100644 client/src/components/Panels/HelpModeText.vue
 create mode 100644 client/src/stores/helpmode/helpModeStatusStore.js
 create mode 100644 client/src/stores/helpmode/helpModeTextStore.js
 create mode 100644 client/src/stores/helpmode/helpTextConfig.yml
 delete mode 100644 database/info.txt

diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index e51dfe7e39b1..5bf7c3544376 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -16,8 +16,11 @@
 </template>
 
 <script>
+import { mapStores } from "pinia";
 import Vue from "vue";
 
+import { useHelpModeTextStore } from "@/stores/helpmode/helpModeTextStore";
+
 import FormInputs from "./FormInputs";
 import { matchInputs, validateInputs, visitInputs } from "./utilities";
 
@@ -99,6 +102,7 @@ export default {
         };
     },
     computed: {
+        ...mapStores(useHelpModeTextStore),
         validation() {
             return validateInputs(this.formIndex, this.formData, this.allowEmptyValueOnRequiredInput);
         },
@@ -138,6 +142,7 @@ export default {
         },
     },
     created() {
+        this.callHelpMode();
         this.onCloneInputs();
         // build flat formData that is ready to be submitted
         this.formData = this.buildFormData();
@@ -149,6 +154,9 @@ export default {
         this.onErrors();
     },
     methods: {
+        callHelpMode() {
+            this.helpModeTextStore.addHelpModeText("tool_form_base");
+        },
         buildFormData() {
             const params = {};
             Object.entries(this.formIndex).forEach(([key, input]) => {
diff --git a/client/src/components/Masthead/HelpModeSwitch.vue b/client/src/components/Masthead/HelpModeSwitch.vue
new file mode 100644
index 000000000000..02534a75d5f4
--- /dev/null
+++ b/client/src/components/Masthead/HelpModeSwitch.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+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);
+    },
+});
+function toggleEnabledStatus() {
+    enabledStatus.value = !enabledStatus.value;
+}
+</script>
+
+<template>
+    <div>
+        <button
+            class="help-mode-button"
+            :class="{ highlight: enabledStatus }"
+            :title="tooltip"
+            :aria-label="tooltip"
+            @click="toggleEnabledStatus"
+            @keydown.enter="toggleEnabledStatus">
+            <i class="fas fa-question-circle fa-lg" :class="{ highlight: enabledStatus }"> </i> Help Me
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.highlight {
+    color: yellow;
+}
+.help-mode-button {
+    background-color: inherit;
+    border: 0px transparent;
+    cursor: pointer;
+    color: inherit;
+    outline: none;
+}
+.help-mode-button.highlight {
+    color: yellow;
+}
+</style>
diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 0390029c3951..a122410528be 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -10,6 +10,7 @@ import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
 
 import { loadWebhookMenuItems } from "./_webhooks";
+import HelpModeSwitch from "./HelpModeSwitch";
 import MastheadItem from "./MastheadItem";
 import QuotaMeter from "./QuotaMeter";
 import { getActiveTab } from "./utilities";
@@ -138,6 +139,9 @@ onMounted(() => {
                 :active-tab="activeTab"
                 @open-url="emit('open-url', $event)" />
             <MastheadItem v-if="windowTab" :tab="windowTab" :toggle="windowToggle" @click="onWindowToggle" />
+            <BNavItem>
+                <HelpModeSwitch />
+            </BNavItem>
             <BNavItem
                 v-if="!isAnonymous && isConfigLoaded && config.enable_notification_system"
                 id="notifications-bell">
diff --git a/client/src/components/Panels/HelpModeText.vue b/client/src/components/Panels/HelpModeText.vue
new file mode 100644
index 000000000000..85cc1f52445d
--- /dev/null
+++ b/client/src/components/Panels/HelpModeText.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { useDraggable } from "@vueuse/core";
+import MarkdownIt from "markdown-it";
+import { computed, onMounted, ref } from "vue";
+
+import { useHelpModeStatusStore } from "@/stores/helpmode/helpModeStatusStore";
+import { useHelpModeTextStore } from "@/stores/helpmode/helpModeTextStore";
+
+const md = MarkdownIt();
+const helpInfo = useHelpModeTextStore();
+const status = useHelpModeStatusStore();
+const helpText = computed({
+    get() {
+        return md.render(helpInfo.helpmodetext);
+    },
+    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 },
+});
+const helpTextRef = ref(null);
+onMounted(() => {
+    const links = (helpTextRef.value as unknown as HTMLElement).querySelectorAll("a");
+    links.forEach((link: HTMLAnchorElement) => {
+        link.setAttribute("target", "_blank");
+    });
+});
+</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>
+        <div ref="helpTextRef" class="help-mode-container" v-html="helpText"></div>
+    </div>
+</template>
+<style>
+.helptext {
+    display: flex;
+    flex-direction: column;
+    width: 25% !important;
+    height: 30% !important;
+    z-index: 9999;
+    background-color: aliceblue;
+    border-color: black;
+    border-radius: 5px;
+    border-width: 2px;
+    border: solid;
+    opacity: 90%;
+}
+.header {
+    display: flex;
+    color: white;
+    background-color: #454d6b;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 2px solid #868686;
+    /* padding-bottom: 10px; */
+}
+.help-mode-container {
+    margin-top: 0;
+    padding: 10px;
+    overflow-y: auto;
+    height: 100%;
+}
+</style>
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index df91d66c4655..4e4bde89c9d3 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -3,16 +3,19 @@ import { onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { usePanels } from "@/composables/usePanels";
+import { useHelpModeStatusStore } from "@/stores/helpmode/helpModeStatusStore";
 
 import CenterFrame from "./CenterFrame.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import HistoryIndex from "@/components/History/Index.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
+import HelpModeText from "@/components/Panels/HelpModeText.vue";
 import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 
 const router = useRouter();
 const showCenter = ref(false);
 const { showPanels } = usePanels();
+const status = useHelpModeStatusStore();
 
 // methods
 function hideCenter() {
@@ -46,5 +49,6 @@ onUnmounted(() => {
             <HistoryIndex />
         </FlexPanel>
         <DragAndDropModal />
+        <HelpModeText v-if="status.helpmodestatus" />
     </div>
 </template>
diff --git a/client/src/stores/helpmode/helpModeStatusStore.js b/client/src/stores/helpmode/helpModeStatusStore.js
new file mode 100644
index 000000000000..282168b17ade
--- /dev/null
+++ b/client/src/stores/helpmode/helpModeStatusStore.js
@@ -0,0 +1,20 @@
+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/helpModeTextStore.js b/client/src/stores/helpmode/helpModeTextStore.js
new file mode 100644
index 000000000000..330c0e3dc422
--- /dev/null
+++ b/client/src/stores/helpmode/helpModeTextStore.js
@@ -0,0 +1,25 @@
+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/helpTextConfig.yml b/client/src/stores/helpmode/helpTextConfig.yml
new file mode 100644
index 000000000000..6ba27d638556
--- /dev/null
+++ b/client/src/stores/helpmode/helpTextConfig.yml
@@ -0,0 +1,2 @@
+tool_form_base: tools/tool_form_base.md
+collection_builder: collections/collection_builder.md
diff --git a/client/webpack.config.js b/client/webpack.config.js
index 6ca6b748151d..c9b1aca21f0b 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -13,6 +13,7 @@ const scriptsBase = path.join(__dirname, "src");
 const testsBase = path.join(__dirname, "tests");
 const libsBase = path.join(scriptsBase, "libs");
 const styleBase = path.join(scriptsBase, "style");
+const helpTextConfigPath = path.join(scriptsBase, "stores", "helpMode");
 
 const modulesExcludedFromLibs = [
     "jspdf",
@@ -104,6 +105,11 @@ module.exports = (env = {}, argv = {}) => {
                     test: /\.vue$/,
                     loader: "vue-loader",
                 },
+                {
+                    test: /\.ya?ml$/,
+                    include: helpTextConfigPath,
+                    loader: "yaml-loader",
+                },
                 {
                     test: /\.tsx?$/,
                     exclude: /node_modules/,
diff --git a/database/info.txt b/database/info.txt
deleted file mode 100644
index 5b316a096c27..000000000000
--- a/database/info.txt
+++ /dev/null
@@ -1 +0,0 @@
-This folder contains the data
\ No newline at end of file

From dcfd079676ecd92af99eac20b55b57bdb1230c50 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 22 Mar 2024 17:30:29 -0500
Subject: [PATCH 2/6] 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,
+    };
+});

From 1792c29d283f5ae445f650f060b437f5467e04f8 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 25 Mar 2024 18:38:32 -0500
Subject: [PATCH 3/6] add a tab view for help mode, singular store, use md
 composable

- Added a tab view for help mode which tracks the current, relevant help texts using a stack.
- Consolidated multiple help stores into one.
- Used an existing composable for MD rendering.
 - Modified the composable to use the html prop, add `<hr>`s in `<details>` sections and render font awesome icons wherever there is a `<code>fa-iconname</code>` section.
- Other help mode related minor refactoring
---
 client/src/components/Form/FormDisplay.vue    |   6 +-
 .../History/Modals/SelectorModal.vue          |  24 +++-
 .../components/Masthead/HelpModeSwitch.vue    |  24 +++-
 client/src/components/Panels/HelpModeText.vue | 131 +++++++++++-------
 client/src/composables/markdown.ts            |  56 +++++++-
 .../src/entry/analysis/modules/Analysis.vue   |   4 +-
 .../stores/helpmode/helpModeStatusStore.ts    |  32 -----
 client/src/stores/helpmode/helpModeStore.ts   | 111 +++++++++++++++
 .../src/stores/helpmode/helpModeTextStore.ts  |  45 ------
 client/src/stores/helpmode/helpTextConfig.yml |  11 +-
 10 files changed, 302 insertions(+), 142 deletions(-)
 delete mode 100644 client/src/stores/helpmode/helpModeStatusStore.ts
 create mode 100644 client/src/stores/helpmode/helpModeStore.ts
 delete 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 293857ea4e33..289972140231 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -19,7 +19,7 @@
 import { mapActions } from "pinia";
 import Vue from "vue";
 
-import { useHelpModeTextStore } from "@/stores/helpmode/helpModeTextStore";
+import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
 
 import FormInputs from "./FormInputs";
 import { matchInputs, validateInputs, visitInputs } from "./utilities";
@@ -154,10 +154,10 @@ export default {
     },
     destroyed() {
         // since the user is leaving the form, the help mode is reset
-        this.clearHelpModeText();
+        this.clearHelpModeText("tool_form_base");
     },
     methods: {
-        ...mapActions(useHelpModeTextStore, ["storeHelpModeText", "clearHelpModeText"]),
+        ...mapActions(useHelpModeStore, ["storeHelpModeText", "clearHelpModeText"]),
         callHelpMode() {
             this.storeHelpModeText("tool_form_base");
         },
diff --git a/client/src/components/History/Modals/SelectorModal.vue b/client/src/components/History/Modals/SelectorModal.vue
index 4c7be641955d..a9472750a9f9 100644
--- a/client/src/components/History/Modals/SelectorModal.vue
+++ b/client/src/components/History/Modals/SelectorModal.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheckSquare, faExchangeAlt } from "@fortawesome/free-solid-svg-icons";
 import { BButton, BFormGroup, BModal } from "bootstrap-vue";
 import { orderBy } from "lodash";
 import isEqual from "lodash.isequal";
@@ -7,6 +9,7 @@ import { computed, ref, watch } from "vue";
 
 import type { HistorySummary } from "@/api";
 import { HistoriesFilters } from "@/components/History/HistoriesFilters";
+import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
 import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
 
@@ -14,6 +17,8 @@ import FilterMenu from "@/components/Common/FilterMenu.vue";
 import Heading from "@/components/Common/Heading.vue";
 import HistoryList from "@/components/History/HistoryScrollList.vue";
 
+library.add(faCheckSquare, faExchangeAlt);
+
 type AdditionalOptions = "set-current" | "multi" | "center";
 type PinnedHistory = { id: string };
 
@@ -54,14 +59,29 @@ const busy = ref(false);
 const showAdvanced = ref(false);
 const modal = ref<BModal | null>(null);
 
+const helpModeStore = useHelpModeStore();
 const { pinnedHistories } = storeToRefs(useHistoryStore());
 
 // retain previously selected histories when you reopen the modal in multi view
 watch(
     () => propShowModal.value,
     (show: boolean) => {
-        if (props.multiple && show) {
-            selectedHistories.value = [...pinnedHistories.value];
+        let helpModeId;
+        let helpModeIcon;
+        if (props.multiple) {
+            if (show) {
+                selectedHistories.value = [...pinnedHistories.value];
+            }
+            helpModeId = "selector_modal_multiview";
+            helpModeIcon = faCheckSquare;
+        } else {
+            helpModeId = "selector_modal_switch";
+            helpModeIcon = faExchangeAlt;
+        }
+        if (show) {
+            helpModeStore.storeHelpModeText(helpModeId, helpModeIcon);
+        } else {
+            helpModeStore.clearHelpModeText(helpModeId);
         }
     },
     {
diff --git a/client/src/components/Masthead/HelpModeSwitch.vue b/client/src/components/Masthead/HelpModeSwitch.vue
index 8fbaafb431a3..2d41181a6b27 100644
--- a/client/src/components/Masthead/HelpModeSwitch.vue
+++ b/client/src/components/Masthead/HelpModeSwitch.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
 
-import { useHelpModeStatusStore } from "@/stores/helpmode/helpModeStatusStore";
+import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
+import localize from "@/utils/localization";
 
-const tooltip = "Enable/Disable Help Mode";
-const { status } = storeToRefs(useHelpModeStatusStore());
+library.add(faQuestionCircle);
+
+const tooltip = localize("Enable/Disable Help Mode");
+const { status } = storeToRefs(useHelpModeStore());
 function toggleEnabledStatus() {
     status.value = !status.value;
 }
@@ -13,20 +19,24 @@ function toggleEnabledStatus() {
 <template>
     <div>
         <button
+            v-b-tooltip.hover.bottom
             class="help-mode-button"
             :class="{ highlight: status }"
             :title="tooltip"
             :aria-label="tooltip"
             @click="toggleEnabledStatus"
             @keydown.enter="toggleEnabledStatus">
-            <i class="fas fa-question-circle fa-lg" :class="{ highlight: status }"> </i> Help Me
+            <!-- <i class="fas fa-question-circle fa-lg" :class="{ highlight: status }"> </i> Help Me -->
+            <FontAwesomeIcon :icon="faQuestionCircle" :class="{ highlight: status }" size="lg" /> Help Me
         </button>
     </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
 .highlight {
-    color: yellow;
+    color: var(--masthead-text-hover);
 }
 .help-mode-button {
     background-color: inherit;
@@ -36,6 +46,6 @@ function toggleEnabledStatus() {
     outline: none;
 }
 .help-mode-button.highlight {
-    color: yellow;
+    color: var(--masthead-text-hover);
 }
 </style>
diff --git a/client/src/components/Panels/HelpModeText.vue b/client/src/components/Panels/HelpModeText.vue
index e5837f4606e8..1a8067a2e002 100644
--- a/client/src/components/Panels/HelpModeText.vue
+++ b/client/src/components/Panels/HelpModeText.vue
@@ -1,86 +1,122 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faTimes, faUndo } 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 { BButton, BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, ref, watch } from "vue";
+import { reactive, ref, watch } from "vue";
 
-import { useHelpModeStatusStore } from "@/stores/helpmode/helpModeStatusStore";
-import { useHelpModeTextStore } from "@/stores/helpmode/helpModeTextStore";
+import { useMarkdown } from "@/composables/markdown";
+import { useAnimationFrameSize } from "@/composables/sensors/animationFrameSize";
+import { DEFAULT_HELP_TEXT, useHelpModeStore } from "@/stores/helpmode/helpModeStore";
+import localize from "@/utils/localization";
 
 import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-library.add(faTimes);
+library.add(faTimes, faUndo);
 
-const md = MarkdownIt();
+const { renderMarkdown } = useMarkdown({
+    openLinksInNewPage: true,
+    html: true,
+    appendHrRuleToDetails: true,
+    replaceCodeWithIcon: true,
+});
 
 // local refs
-const { content, loading } = storeToRefs(useHelpModeTextStore());
-const { status, position } = storeToRefs(useHelpModeStatusStore());
+const { status, position, helpModeStyle, activeTab, contents, loading, currentTabs } = storeToRefs(useHelpModeStore());
 const el = ref<HTMLElement | null>(null);
 const helpModeHeader = ref<HTMLElement | null>(null);
-const helpTextRef = ref(null);
+const helpModeSize = reactive(useAnimationFrameSize(el));
 
-// local computed refs
-const helpText = computed({
-    get() {
-        return md.render(content.value);
-    },
-    set() {
-        //do nothing, this is set in components that add helptext
-    },
-});
+const noHelpTextMsg = localize("No help text available for this component");
 
 // draggable properties
-const {
-    x: dragX,
-    y: dragY,
-    style,
-} = useDraggable(helpModeHeader, {
-    initialValue: position.value,
-});
-// watch both x and y, and do something if they change:
+const { style } = useDraggable(helpModeHeader, { initialValue: position.value });
+
+// update store position on drag
 watch(
-    () => [dragX.value, dragY.value],
-    ([newX, newY]) => {
-        if (newX && newY) {
-            position.value = { x: newX, y: newY };
+    () => style.value,
+    (newStyle) => {
+        if (newStyle) {
+            // TODO: This might be a little hacky?...
+            // convert str of form "left:{...}px;top:{...}px;" to
+            // extract left and top and place in helpModeStyle
+            const [left, top] = newStyle.split(";");
+            let leftVal = left?.split(":")[1];
+            let topVal = top?.split(":")[1];
+            if (parseInt(leftVal || "") < 0) {
+                leftVal = "0";
+            }
+            if (parseInt(topVal || "") < 0) {
+                topVal = "0";
+            }
+            helpModeStyle.value = {
+                ...helpModeStyle.value,
+                left: leftVal,
+                top: topVal,
+            };
         }
     }
 );
 
-onMounted(() => {
-    const links = (helpTextRef.value as unknown as HTMLElement).querySelectorAll("a");
-    links.forEach((link: HTMLAnchorElement) => {
-        link.setAttribute("target", "_blank");
-    });
-});
+// update store dimensions on resize
+watch(
+    () => [helpModeSize.width, helpModeSize.height],
+    ([newWidth, newHeight]) => {
+        if (newWidth && newHeight) {
+            helpModeStyle.value = {
+                ...helpModeStyle.value,
+                width: `${newWidth}px`,
+                height: `${newHeight}px`,
+            };
+        }
+    }
+);
+
+/** Reset the position of the help mode to default */
+function resetPosition() {
+    helpModeStyle.value = {
+        width: "25%",
+        height: "30%",
+        left: "0",
+        top: "0",
+    };
+}
 </script>
 
 <template>
-    <div ref="el" :style="style" class="help-text unified-panel-body d-flex justify-content-between">
-        <div ref="helpModeHeader" class="header">
+    <div ref="el" :style="[style, helpModeStyle]" class="help-text justify-content-between">
+        <div ref="helpModeHeader" class="header unselectable">
             <Heading h4 inline size="sm" class="flex-grow-1 mx-2">Galaxy Help Mode</Heading>
-            <BButton class="close-button" size="sm" @click="status = false">
+            <BButton size="sm" @click="resetPosition">
+                <FontAwesomeIcon :icon="faUndo" />
+            </BButton>
+            <BButton size="sm" @click="status = false">
                 <FontAwesomeIcon :icon="faTimes" />
             </BButton>
         </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" />
+        <span v-if="!activeTab" v-localize class="help-mode-container">{{ DEFAULT_HELP_TEXT }}</span>
+        <BTabs v-else class="help-mode-container">
+            <BTab v-for="helpId of currentTabs" :key="helpId" :active="activeTab === helpId">
+                <template v-slot:title>
+                    <FontAwesomeIcon v-if="contents[helpId]?.icon" :icon="contents[helpId]?.icon" />
+                    {{ contents[helpId]?.title }}
+                </template>
+                <!-- eslint-disable-next-line vue/no-v-html -->
+                <div v-if="!loading" v-html="renderMarkdown(contents[helpId]?.content || noHelpTextMsg)" />
+                <LoadingSpan v-else message="Loading help text" />
+            </BTab>
+        </BTabs>
     </div>
 </template>
 
 <style scoped lang="scss">
+// TODO: Maybe use predefined variables for colors and sizes?
 .help-text {
     display: flex;
     flex-direction: column;
-    width: 25% !important;
-    height: 30% !important;
     z-index: 9999;
     background-color: aliceblue;
     border-color: black;
@@ -89,6 +125,8 @@ onMounted(() => {
     border: solid;
     opacity: 90%;
     position: fixed;
+    resize: both;
+    overflow: auto;
 }
 .header {
     display: flex;
@@ -98,7 +136,6 @@ onMounted(() => {
     align-items: center;
     border-bottom: 2px solid #868686;
     cursor: move;
-    /* padding-bottom: 10px; */
 }
 .help-mode-container {
     margin-top: 0;
diff --git a/client/src/composables/markdown.ts b/client/src/composables/markdown.ts
index a6659f60d404..244f3b4eede8 100644
--- a/client/src/composables/markdown.ts
+++ b/client/src/composables/markdown.ts
@@ -69,9 +69,59 @@ function addRuleHeadingIncreaseLevel(engine: MarkdownIt, increaseBy: number) {
     };
 }
 
+/** Appends a horizontal rule to the end of each `<details>` element. */
+function appendHrRuleToDetails(doc: Document) {
+    const details = doc.querySelectorAll("details");
+    details.forEach((detail) => {
+        // also, put a <hr class="w-100" /> inside, at the end of each open details tag
+        const hr = doc.createElement("hr");
+        hr.classList.add("w-100");
+        detail.appendChild(hr);
+    });
+}
+
+/** Replaces `<code>` elements with <i> elements for font-awesome icons. */
+function replaceCodesWithIcons(doc: Document) {
+    const codes = doc.querySelectorAll("code");
+    codes.forEach((code) => {
+        const codeContent = code.innerHTML;
+        const iconRegex = /^fa-[a-z-]+$/;
+        if (iconRegex.test(codeContent)) {
+            const icon = document.createElement("i");
+            icon.classList.add("fas", codeContent);
+            code.replaceWith(icon);
+        }
+    });
+}
+
+/**
+ * Adjusts the markdown output based on the options that do not have rules in
+ * `engine.renderer.rules`.
+ */
+function adjustMdForOptions(markdown: string, options: UseMarkdownOptions) {
+    if (!options.appendHrRuleToDetails && !options.replaceCodeWithIcon) {
+        return markdown;
+    }
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(markdown, "text/html");
+    if (options.appendHrRuleToDetails) {
+        appendHrRuleToDetails(doc);
+    }
+    if (options.replaceCodeWithIcon) {
+        replaceCodesWithIcons(doc);
+    }
+    const serializer = new XMLSerializer();
+    const modifiedMarkdownOutput = serializer.serializeToString(doc);
+    return modifiedMarkdownOutput;
+}
+
 interface UseMarkdownOptions {
     openLinksInNewPage?: boolean;
     increaseHeadingLevelBy?: number;
+    html?: boolean;
+    appendHrRuleToDetails?: boolean;
+    replaceCodeWithIcon?: boolean;
 }
 
 type RawMarkdown = string;
@@ -79,7 +129,7 @@ type HTMLString = string;
 
 /** Composable for rendering Markdown strings.  */
 export function useMarkdown(options: UseMarkdownOptions = {}) {
-    const mdEngine = MarkdownIt();
+    const mdEngine = MarkdownIt({ html: options.html });
 
     if (options.openLinksInNewPage) {
         addRuleOpenLinksInNewPage(mdEngine);
@@ -90,7 +140,9 @@ export function useMarkdown(options: UseMarkdownOptions = {}) {
     }
 
     function renderMarkdown(markdown: RawMarkdown): HTMLString {
-        return mdEngine.render(markdown);
+        let renderedMarkdown = mdEngine.render(markdown);
+        renderedMarkdown = adjustMdForOptions(renderedMarkdown, options);
+        return renderedMarkdown;
     }
 
     return {
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 52ab97bdf3c8..39b789bdebeb 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -4,7 +4,7 @@ import { onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { usePanels } from "@/composables/usePanels";
-import { useHelpModeStatusStore } from "@/stores/helpmode/helpModeStatusStore";
+import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
 
 import CenterFrame from "./CenterFrame.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
@@ -16,7 +16,7 @@ import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 const router = useRouter();
 const showCenter = ref(false);
 const { showPanels } = usePanels();
-const { status: helpModeStatus } = storeToRefs(useHelpModeStatusStore());
+const { status: helpModeStatus } = storeToRefs(useHelpModeStore());
 
 // methods
 function hideCenter() {
diff --git a/client/src/stores/helpmode/helpModeStatusStore.ts b/client/src/stores/helpmode/helpModeStatusStore.ts
deleted file mode 100644
index 4510b90037ee..000000000000
--- a/client/src/stores/helpmode/helpModeStatusStore.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * 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/helpModeStore.ts b/client/src/stores/helpmode/helpModeStore.ts
new file mode 100644
index 000000000000..95e704586a2f
--- /dev/null
+++ b/client/src/stores/helpmode/helpModeStore.ts
@@ -0,0 +1,111 @@
+/**
+ * A pinia store for the Galaxy Help Mode.
+ */
+
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+import { rethrowSimple } from "@/utils/simple-error";
+
+import config from "./helpTextConfig.yml";
+
+interface HelpContent {
+    title: string;
+    content: string;
+    icon?: IconDefinition;
+}
+interface HelpModeStyle {
+    width: string;
+    height: string;
+    top?: string;
+    left?: string;
+}
+
+export const DEFAULT_HELP_TEXT = "Welcome to Galaxy Help Mode!";
+
+export const useHelpModeStore = defineStore("helpModeStore", () => {
+    // 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 });
+    const helpModeStyle = ref<HelpModeStyle>({
+        width: "25%",
+        height: "30%",
+    });
+    const contents = ref<Record<string, HelpContent>>({});
+    const activeTab = ref<string | null>(null);
+    const loading = ref(false);
+    const currentTabs = ref<string[]>([]);
+    /** Component ids for which fetching the help text was unsuccessful */
+    const invalidIds = ref<string[]>([]);
+
+    async function storeHelpModeText(id: string, icon?: IconDefinition) {
+        loading.value = true;
+        try {
+            // Error handling
+            if (invalidIds.value.includes(id)) {
+                // this id has been marked as invalid, don't try to fetch or throw an error again
+                return;
+            }
+            if (!config[id]) {
+                throw new Error(`No help mode config found for ${id}`);
+            }
+
+            const { title, file_path } = config[id];
+
+            // if the text is already stored, don't fetch it again
+            if (!contents.value[id]) {
+                const response = await fetch(
+                    "https://raw.githubusercontent.com/assuntad23/galaxy-help-markdown/main/" + file_path
+                );
+                const text = await response.text();
+                contents.value[id] = { title, content: text, icon };
+            }
+
+            // set the active tab to the id
+            activeTab.value = id;
+            // move this id to the top of the stack
+            currentTabs.value.push(id);
+        } catch (error) {
+            console.error(`Failed to fetch help mode text for ${id}`, error);
+            invalidIds.value.push(id);
+            rethrowSimple(error);
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    function clearHelpModeText(id: string) {
+        // remove id from currentTabs
+        const idx = currentTabs.value.indexOf(id);
+        if (idx !== -1) {
+            currentTabs.value.splice(idx, 1);
+        }
+
+        // from tabs, get the last element (or null if there is none left)
+        const currId = currentTabs.value[currentTabs.value.length - 1] || null;
+        activeTab.value = currId;
+    }
+
+    return {
+        /** The tab currently active in help mode */
+        activeTab,
+        /** Stores `HelpContent`s by component ids */
+        contents,
+        /** A stack of the tabs currently in context */
+        currentTabs,
+        /** The css styling of the help mode */
+        helpModeStyle,
+        loading,
+        /** The css position of the help mode */
+        position,
+        /** Whether help mode is active or not */
+        status,
+        /** Removes the tab from the stack for the given component `id` */
+        clearHelpModeText,
+        /** Adds help mode text for the given Galaxy component `id` */
+        storeHelpModeText,
+    };
+});
diff --git a/client/src/stores/helpmode/helpModeTextStore.ts b/client/src/stores/helpmode/helpModeTextStore.ts
deleted file mode 100644
index 2daa83a5094f..000000000000
--- a/client/src/stores/helpmode/helpModeTextStore.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * 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,
-    };
-});
diff --git a/client/src/stores/helpmode/helpTextConfig.yml b/client/src/stores/helpmode/helpTextConfig.yml
index 6ba27d638556..32997b44f978 100644
--- a/client/src/stores/helpmode/helpTextConfig.yml
+++ b/client/src/stores/helpmode/helpTextConfig.yml
@@ -1,2 +1,9 @@
-tool_form_base: tools/tool_form_base.md
-collection_builder: collections/collection_builder.md
+tool_form_base:
+  title: Tool Form
+  file_path: tools/tool_form_base.md
+collection_builder:
+  title: Collection Builder
+  file_path: collections/collection_builder.md
+selector_modal_switch:
+  title: History Selector
+  file_path: histories/selector_modal_switch.md

From 4a47f94b27bda06dbb885583fa11539782fdcfe1 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 27 Mar 2024 12:14:36 -0500
Subject: [PATCH 4/6] add `enable_help_mode` config option

---
 .../components/Masthead/HelpModeSwitch.vue    | 16 +++++-----
 client/src/stores/helpmode/helpModeStore.ts   | 30 +++++++++++++++++--
 doc/source/admin/galaxy_options.rst           | 10 +++++++
 lib/galaxy/config/sample/galaxy.yml.sample    |  3 ++
 lib/galaxy/config/schemas/config_schema.yml   |  7 +++++
 lib/galaxy/managers/configuration.py          |  1 +
 6 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Masthead/HelpModeSwitch.vue b/client/src/components/Masthead/HelpModeSwitch.vue
index 2d41181a6b27..a1a7b7bbf0b4 100644
--- a/client/src/components/Masthead/HelpModeSwitch.vue
+++ b/client/src/components/Masthead/HelpModeSwitch.vue
@@ -2,6 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 
 import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
@@ -18,17 +19,18 @@ function toggleEnabledStatus() {
 
 <template>
     <div>
-        <button
+        <BButton
             v-b-tooltip.hover.bottom
-            class="help-mode-button"
+            class="help-mode-button nav-link"
             :class="{ highlight: status }"
             :title="tooltip"
             :aria-label="tooltip"
+            variant="link"
             @click="toggleEnabledStatus"
             @keydown.enter="toggleEnabledStatus">
             <!-- <i class="fas fa-question-circle fa-lg" :class="{ highlight: status }"> </i> Help Me -->
-            <FontAwesomeIcon :icon="faQuestionCircle" :class="{ highlight: status }" size="lg" /> Help Me
-        </button>
+            <FontAwesomeIcon :icon="faQuestionCircle" :class="{ highlight: status }" size="lg" />
+        </BButton>
     </div>
 </template>
 
@@ -44,8 +46,8 @@ function toggleEnabledStatus() {
     cursor: pointer;
     color: inherit;
     outline: none;
-}
-.help-mode-button.highlight {
-    color: var(--masthead-text-hover);
+    &.highlight {
+        color: var(--masthead-text-hover);
+    }
 }
 </style>
diff --git a/client/src/stores/helpmode/helpModeStore.ts b/client/src/stores/helpmode/helpModeStore.ts
index 95e704586a2f..e098d4215b8c 100644
--- a/client/src/stores/helpmode/helpModeStore.ts
+++ b/client/src/stores/helpmode/helpModeStore.ts
@@ -4,7 +4,7 @@
 
 import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 import { rethrowSimple } from "@/utils/simple-error";
 
@@ -40,8 +40,26 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
     const currentTabs = ref<string[]>([]);
     /** Component ids for which fetching the help text was unsuccessful */
     const invalidIds = ref<string[]>([]);
+    /** The ids of the components for which help text was requested while help mode was disabled */
+    const idsToStore = ref<string[]>([]);
+
+    // when help mode is enabled, store help for the ids requested while help mode was disabled
+    watch(status, async (newStatus) => {
+        if (newStatus) {
+            for (const id of idsToStore.value) {
+                await storeHelpModeText(id);
+            }
+            idsToStore.value = [];
+        }
+    });
 
     async function storeHelpModeText(id: string, icon?: IconDefinition) {
+        // if help mode is disabled, store the id in the temp array and return
+        if (!status.value) {
+            idsToStore.value.push(id);
+            return;
+        }
+
         loading.value = true;
         try {
             // Error handling
@@ -78,6 +96,14 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
     }
 
     function clearHelpModeText(id: string) {
+        // if help mode is disabled, remove the id from the temp array
+        if (!status.value) {
+            const idx = idsToStore.value.indexOf(id);
+            if (idx !== -1) {
+                idsToStore.value.splice(idx, 1);
+            }
+        }
+
         // remove id from currentTabs
         const idx = currentTabs.value.indexOf(id);
         if (idx !== -1) {
@@ -105,7 +131,7 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
         status,
         /** Removes the tab from the stack for the given component `id` */
         clearHelpModeText,
-        /** Adds help mode text for the given Galaxy component `id` */
+        /** Adds help mode text for the given Galaxy component `id` if help mode is enabled */
         storeHelpModeText,
     };
 });
diff --git a/doc/source/admin/galaxy_options.rst b/doc/source/admin/galaxy_options.rst
index b5511036af2f..098e5ca6571a 100644
--- a/doc/source/admin/galaxy_options.rst
+++ b/doc/source/admin/galaxy_options.rst
@@ -2360,6 +2360,16 @@
 :Type: str
 
 
+~~~~~~~~~~~~~
+``enable_help_mode``
+~~~~~~~~~~~~~
+
+:Description:
+    Enables the Galaxy Help Mode for this Galaxy Instance.
+:Default: ``false``
+:Type: bool
+
+
 ~~~~~~~~~~~~~~~~~~
 ``static_enabled``
 ~~~~~~~~~~~~~~~~~~
diff --git a/lib/galaxy/config/sample/galaxy.yml.sample b/lib/galaxy/config/sample/galaxy.yml.sample
index 8032d879039b..28346711745a 100644
--- a/lib/galaxy/config/sample/galaxy.yml.sample
+++ b/lib/galaxy/config/sample/galaxy.yml.sample
@@ -1438,6 +1438,9 @@ galaxy:
   # activation emails.
   #terms_url: null
 
+  # Enables the Galaxy Help Mode for this Galaxy Instance.
+  #enable_help_mode: false
+
   # Serve static content, which must be enabled if you're not serving it
   # via a proxy server.  These options should be self explanatory and so
   # are not documented individually.  You can use these paths (or ones
diff --git a/lib/galaxy/config/schemas/config_schema.yml b/lib/galaxy/config/schemas/config_schema.yml
index 99dbe9657746..2dbec46f05cb 100644
--- a/lib/galaxy/config/schemas/config_schema.yml
+++ b/lib/galaxy/config/schemas/config_schema.yml
@@ -1708,6 +1708,13 @@ mapping:
           The URL linked by the "Terms and Conditions" link in the "Help" menu, as well
           as on the user registration and login forms and in the activation emails.
 
+      enable_help_mode:
+        type: bool
+        default: false
+        required: false
+        desc: |
+          Enables the Galaxy Help Mode for this Galaxy Instance.
+
       static_enabled:
         type: bool
         default: true
diff --git a/lib/galaxy/managers/configuration.py b/lib/galaxy/managers/configuration.py
index 14348c06742b..823e09ca54a4 100644
--- a/lib/galaxy/managers/configuration.py
+++ b/lib/galaxy/managers/configuration.py
@@ -206,6 +206,7 @@ def _config_is_truthy(item, key, **context):
             "upload_from_form_button": _use_config,
             "release_doc_base_url": _use_config,
             "expose_user_email": _use_config,
+            "enable_help_mode": _use_config,
             "enable_tool_source_display": _use_config,
             "enable_celery_tasks": _use_config,
             "quota_source_labels": lambda item, key, **context: list(

From 6cc94ef343a4ccb66c1e5dc2a0dbe334182089db Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 15 Apr 2024 12:46:14 -0500
Subject: [PATCH 5/6] move help mode into side panel (primarily)

Still toggleable into a draggable mode if needed
---
 .../components/ActivityBar/ActivityBar.vue    | 14 ++++
 .../HelpModeDraggable.vue}                    | 50 +++++----------
 client/src/components/Help/HelpModeText.vue   | 49 ++++++++++++++
 .../components/Masthead/HelpModeSwitch.vue    |  9 ++-
 client/src/components/Masthead/Masthead.vue   |  4 +-
 .../src/components/Panels/HelpModePanel.vue   | 64 +++++++++++++++++++
 .../src/entry/analysis/modules/Analysis.vue   |  6 +-
 client/src/stores/helpmode/helpModeStore.ts   | 20 +++++-
 client/src/stores/helpmode/helpTextConfig.yml |  3 +
 9 files changed, 173 insertions(+), 46 deletions(-)
 rename client/src/components/{Panels/HelpModeText.vue => Help/HelpModeDraggable.vue} (67%)
 create mode 100644 client/src/components/Help/HelpModeText.vue
 create mode 100644 client/src/components/Panels/HelpModePanel.vue

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 0e2c54e7b181..3b9c1e2e0d14 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -9,6 +9,7 @@ import { useHashedUserId } from "@/composables/hashedUserId";
 import { convertDropData } from "@/stores/activitySetup";
 import { type Activity, useActivityStore } from "@/stores/activityStore";
 import { useEventStore } from "@/stores/eventStore";
+import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
 import { useUserStore } from "@/stores/userStore";
 
 import VisualizationPanel from "../Panels/VisualizationPanel.vue";
@@ -18,6 +19,7 @@ import NotificationItem from "./Items/NotificationItem.vue";
 import UploadItem from "./Items/UploadItem.vue";
 import AdminPanel from "@/components/admin/AdminPanel.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
+import HelpModePanel from "@/components/Panels/HelpModePanel.vue";
 import MultiviewPanel from "@/components/Panels/MultiviewPanel.vue";
 import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
 import SettingsPanel from "@/components/Panels/SettingsPanel.vue";
@@ -39,6 +41,9 @@ const emit = defineEmits(["dragstart"]);
 // activities from store
 const { activities } = storeToRefs(activityStore);
 
+// Galaxy help mode draggable status
+const { draggableActive } = storeToRefs(useHelpModeStore());
+
 // drag references
 const dragTarget: Ref<EventTarget | null> = ref(null);
 const dragItem: Ref<Activity | null> = ref(null);
@@ -198,6 +203,14 @@ watch(
                 </draggable>
             </b-nav>
             <b-nav v-if="!isAnonymous" vertical class="flex-nowrap p-1">
+                <ActivityItem
+                    v-if="isConfigLoaded && config.enable_help_mode"
+                    id="help"
+                    icon="question"
+                    :is-active="isActiveSideBar('help') || draggableActive"
+                    title="Help Mode"
+                    tooltip="Get help on how to use the currently active interface"
+                    @click="onToggleSidebar('help')" />
                 <NotificationItem
                     v-if="isConfigLoaded && config.enable_notification_system"
                     id="activity-notifications"
@@ -227,6 +240,7 @@ watch(
             <ToolPanel v-if="isActiveSideBar('tools')" />
             <VisualizationPanel v-else-if="isActiveSideBar('visualizations')" />
             <MultiviewPanel v-else-if="isActiveSideBar('multiview')" />
+            <HelpModePanel v-else-if="isActiveSideBar('help')" />
             <NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
             <SettingsPanel v-else-if="isActiveSideBar('settings')" />
             <AdminPanel v-else-if="isActiveSideBar('admin')" />
diff --git a/client/src/components/Panels/HelpModeText.vue b/client/src/components/Help/HelpModeDraggable.vue
similarity index 67%
rename from client/src/components/Panels/HelpModeText.vue
rename to client/src/components/Help/HelpModeDraggable.vue
index 1a8067a2e002..c0fd7ece3f37 100644
--- a/client/src/components/Panels/HelpModeText.vue
+++ b/client/src/components/Help/HelpModeDraggable.vue
@@ -3,35 +3,27 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimes, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useDraggable } from "@vueuse/core";
-import { BButton, BTab, BTabs } from "bootstrap-vue";
+import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { reactive, ref, watch } from "vue";
 
-import { useMarkdown } from "@/composables/markdown";
 import { useAnimationFrameSize } from "@/composables/sensors/animationFrameSize";
-import { DEFAULT_HELP_TEXT, useHelpModeStore } from "@/stores/helpmode/helpModeStore";
-import localize from "@/utils/localization";
+import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
+import { useUserStore } from "@/stores/userStore";
 
+import HelpModeText from "./HelpModeText.vue";
 import Heading from "@/components/Common/Heading.vue";
-import LoadingSpan from "@/components/LoadingSpan.vue";
 
 library.add(faTimes, faUndo);
 
-const { renderMarkdown } = useMarkdown({
-    openLinksInNewPage: true,
-    html: true,
-    appendHrRuleToDetails: true,
-    replaceCodeWithIcon: true,
-});
+const userStore = useUserStore();
 
 // local refs
-const { status, position, helpModeStyle, activeTab, contents, loading, currentTabs } = storeToRefs(useHelpModeStore());
+const { draggableActive, position, helpModeStyle } = storeToRefs(useHelpModeStore());
 const el = ref<HTMLElement | null>(null);
 const helpModeHeader = ref<HTMLElement | null>(null);
 const helpModeSize = reactive(useAnimationFrameSize(el));
 
-const noHelpTextMsg = localize("No help text available for this component");
-
 // draggable properties
 const { style } = useDraggable(helpModeHeader, { initialValue: position.value });
 
@@ -75,6 +67,15 @@ watch(
     }
 );
 
+/** Close the draggable help mode and toggle the sidebar */
+function closeDraggable() {
+    const panelActive = userStore.toggledSideBar !== "";
+    draggableActive.value = false;
+    if (!panelActive) {
+        userStore.toggleSideBar("help");
+    }
+}
+
 /** Reset the position of the help mode to default */
 function resetPosition() {
     helpModeStyle.value = {
@@ -93,22 +94,11 @@ function resetPosition() {
             <BButton size="sm" @click="resetPosition">
                 <FontAwesomeIcon :icon="faUndo" />
             </BButton>
-            <BButton size="sm" @click="status = false">
+            <BButton size="sm" @click="closeDraggable">
                 <FontAwesomeIcon :icon="faTimes" />
             </BButton>
         </div>
-        <span v-if="!activeTab" v-localize class="help-mode-container">{{ DEFAULT_HELP_TEXT }}</span>
-        <BTabs v-else class="help-mode-container">
-            <BTab v-for="helpId of currentTabs" :key="helpId" :active="activeTab === helpId">
-                <template v-slot:title>
-                    <FontAwesomeIcon v-if="contents[helpId]?.icon" :icon="contents[helpId]?.icon" />
-                    {{ contents[helpId]?.title }}
-                </template>
-                <!-- eslint-disable-next-line vue/no-v-html -->
-                <div v-if="!loading" v-html="renderMarkdown(contents[helpId]?.content || noHelpTextMsg)" />
-                <LoadingSpan v-else message="Loading help text" />
-            </BTab>
-        </BTabs>
+        <HelpModeText />
     </div>
 </template>
 
@@ -137,10 +127,4 @@ function resetPosition() {
     border-bottom: 2px solid #868686;
     cursor: move;
 }
-.help-mode-container {
-    margin-top: 0;
-    padding: 10px;
-    overflow-y: auto;
-    height: 100%;
-}
 </style>
diff --git a/client/src/components/Help/HelpModeText.vue b/client/src/components/Help/HelpModeText.vue
new file mode 100644
index 000000000000..2cdb8a85fc99
--- /dev/null
+++ b/client/src/components/Help/HelpModeText.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BTab, BTabs } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+
+import { useMarkdown } from "@/composables/markdown";
+import { DEFAULT_HELP_TEXT, useHelpModeStore } from "@/stores/helpmode/helpModeStore";
+import localize from "@/utils/localization";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+const { renderMarkdown } = useMarkdown({
+    openLinksInNewPage: true,
+    html: true,
+    appendHrRuleToDetails: true,
+    replaceCodeWithIcon: true,
+});
+
+// local refs
+const { activeTab, contents, loading, currentTabs } = storeToRefs(useHelpModeStore());
+
+const noHelpTextMsg = localize("No help text available for this component");
+</script>
+
+<template>
+    <span v-if="!activeTab" v-localize class="help-mode-container">{{ DEFAULT_HELP_TEXT }}</span>
+    <BTabs v-else class="help-mode-container">
+        <BTab v-for="helpId of currentTabs" :key="helpId" :active="activeTab === helpId">
+            <template v-slot:title>
+                <FontAwesomeIcon v-if="contents[helpId]?.icon" :icon="contents[helpId]?.icon" />
+                {{ contents[helpId]?.title }}
+            </template>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <div v-if="!loading" v-html="renderMarkdown(contents[helpId]?.content || noHelpTextMsg)" />
+            <BAlert v-else variant="info" show>
+                <LoadingSpan message="Loading help text" />
+            </BAlert>
+        </BTab>
+    </BTabs>
+</template>
+
+<style scoped lang="scss">
+.help-mode-container {
+    margin-top: 0;
+    padding: 10px;
+    overflow-y: auto;
+    height: 100%;
+}
+</style>
diff --git a/client/src/components/Masthead/HelpModeSwitch.vue b/client/src/components/Masthead/HelpModeSwitch.vue
index a1a7b7bbf0b4..aed71d8f3211 100644
--- a/client/src/components/Masthead/HelpModeSwitch.vue
+++ b/client/src/components/Masthead/HelpModeSwitch.vue
@@ -11,9 +11,9 @@ import localize from "@/utils/localization";
 library.add(faQuestionCircle);
 
 const tooltip = localize("Enable/Disable Help Mode");
-const { status } = storeToRefs(useHelpModeStore());
+const { draggableActive } = storeToRefs(useHelpModeStore());
 function toggleEnabledStatus() {
-    status.value = !status.value;
+    draggableActive.value = !draggableActive.value;
 }
 </script>
 
@@ -22,14 +22,13 @@ function toggleEnabledStatus() {
         <BButton
             v-b-tooltip.hover.bottom
             class="help-mode-button nav-link"
-            :class="{ highlight: status }"
+            :class="{ highlight: draggableActive }"
             :title="tooltip"
             :aria-label="tooltip"
             variant="link"
             @click="toggleEnabledStatus"
             @keydown.enter="toggleEnabledStatus">
-            <!-- <i class="fas fa-question-circle fa-lg" :class="{ highlight: status }"> </i> Help Me -->
-            <FontAwesomeIcon :icon="faQuestionCircle" :class="{ highlight: status }" size="lg" />
+            <FontAwesomeIcon :icon="faQuestionCircle" :class="{ highlight: draggableActive }" size="lg" />
         </BButton>
     </div>
 </template>
diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index a122410528be..04882a5ec394 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -139,9 +139,9 @@ onMounted(() => {
                 :active-tab="activeTab"
                 @open-url="emit('open-url', $event)" />
             <MastheadItem v-if="windowTab" :tab="windowTab" :toggle="windowToggle" @click="onWindowToggle" />
-            <BNavItem>
+            <!-- <BNavItem v-if="!isAnonymous && isConfigLoaded && config.enable_help_mode">
                 <HelpModeSwitch />
-            </BNavItem>
+            </BNavItem> -->
             <BNavItem
                 v-if="!isAnonymous && isConfigLoaded && config.enable_notification_system"
                 id="notifications-bell">
diff --git a/client/src/components/Panels/HelpModePanel.vue b/client/src/components/Panels/HelpModePanel.vue
new file mode 100644
index 000000000000..5941e1471657
--- /dev/null
+++ b/client/src/components/Panels/HelpModePanel.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BButtonGroup, BCard } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+
+import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
+import { useUserStore } from "@/stores/userStore";
+
+import HelpModeText from "../Help/HelpModeText.vue";
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+
+library.add(faExternalLinkAlt);
+
+const { draggableActive } = storeToRefs(useHelpModeStore());
+const userStore = useUserStore();
+
+function toggleOut() {
+    const panelActive = userStore.toggledSideBar === "help";
+    const togglePanel = panelActive && !draggableActive.value;
+    draggableActive.value = !draggableActive.value;
+    if (togglePanel) {
+        userStore.toggleSideBar("help");
+    }
+}
+</script>
+
+<template>
+    <ActivityPanel title="Galaxy Help Mode">
+        <template v-slot:header-buttons>
+            <BButtonGroup>
+                <BButton
+                    v-b-tooltip.bottom.hover
+                    data-description="toggle out help mode"
+                    size="sm"
+                    :variant="draggableActive ? 'info' : 'link'"
+                    title="Toggle out help mode into a draggable window"
+                    @click="toggleOut">
+                    <FontAwesomeIcon :icon="faExternalLinkAlt" fixed-width />
+                </BButton>
+            </BButtonGroup>
+        </template>
+
+        <template v-slot:header>
+            <div v-localize class="ml-1">
+                This is Galaxy's help mode. It shows help text for the current component you are interacting with.
+            </div>
+        </template>
+
+        <BCard class="help-text">
+            <HelpModeText />
+        </BCard>
+    </ActivityPanel>
+</template>
+
+<style lang="scss" scoped>
+.help-text {
+    display: flex;
+    flex-direction: column;
+    background-color: aliceblue;
+    overflow: auto;
+}
+</style>
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 39b789bdebeb..28a5ad2284c6 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -8,15 +8,15 @@ import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
 
 import CenterFrame from "./CenterFrame.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
+import HelpModeDraggable from "@/components/Help/HelpModeDraggable.vue";
 import HistoryIndex from "@/components/History/Index.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
-import HelpModeText from "@/components/Panels/HelpModeText.vue";
 import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 
 const router = useRouter();
 const showCenter = ref(false);
 const { showPanels } = usePanels();
-const { status: helpModeStatus } = storeToRefs(useHelpModeStore());
+const { draggableActive } = storeToRefs(useHelpModeStore());
 
 // methods
 function hideCenter() {
@@ -50,6 +50,6 @@ onUnmounted(() => {
             <HistoryIndex />
         </FlexPanel>
         <DragAndDropModal />
-        <HelpModeText v-if="helpModeStatus" />
+        <HelpModeDraggable v-if="draggableActive" />
     </div>
 </template>
diff --git a/client/src/stores/helpmode/helpModeStore.ts b/client/src/stores/helpmode/helpModeStore.ts
index e098d4215b8c..fab82558299f 100644
--- a/client/src/stores/helpmode/helpModeStore.ts
+++ b/client/src/stores/helpmode/helpModeStore.ts
@@ -3,11 +3,12 @@
  */
 
 import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { defineStore } from "pinia";
-import { ref, watch } from "vue";
+import { defineStore, storeToRefs } from "pinia";
+import { computed, ref, watch } from "vue";
 
 import { rethrowSimple } from "@/utils/simple-error";
 
+import { useUserStore } from "../userStore";
 import config from "./helpTextConfig.yml";
 
 interface HelpContent {
@@ -28,7 +29,9 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
     // TODO: Maybe `status` should be tracked in local storage?
     // const status: Ref<boolean> = useUserLocalStorage("help-mode-status", false);
 
-    const status = ref(false);
+    const { toggledSideBar } = storeToRefs(useUserStore());
+
+    const draggableActive = ref(false);
     const position = ref({ x: 0, y: 0 });
     const helpModeStyle = ref<HelpModeStyle>({
         width: "25%",
@@ -43,6 +46,15 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
     /** The ids of the components for which help text was requested while help mode was disabled */
     const idsToStore = ref<string[]>([]);
 
+    const status = computed(() => toggledSideBar.value === "help" || draggableActive.value);
+
+    // if side bar is toggled to help mode, if draggable is active, set it to false
+    watch(toggledSideBar, (newVal) => {
+        if (newVal === "help" && draggableActive.value) {
+            draggableActive.value = false;
+        }
+    });
+
     // when help mode is enabled, store help for the ids requested while help mode was disabled
     watch(status, async (newStatus) => {
         if (newStatus) {
@@ -129,6 +141,8 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
         position,
         /** Whether help mode is active or not */
         status,
+        /** Whether the draggble help mode is active or not */
+        draggableActive,
         /** Removes the tab from the stack for the given component `id` */
         clearHelpModeText,
         /** Adds help mode text for the given Galaxy component `id` if help mode is enabled */
diff --git a/client/src/stores/helpmode/helpTextConfig.yml b/client/src/stores/helpmode/helpTextConfig.yml
index 32997b44f978..8b44bb141b4b 100644
--- a/client/src/stores/helpmode/helpTextConfig.yml
+++ b/client/src/stores/helpmode/helpTextConfig.yml
@@ -7,3 +7,6 @@ collection_builder:
 selector_modal_switch:
   title: History Selector
   file_path: histories/selector_modal_switch.md
+selector_modal_multiview:
+  title: History Selector
+  file_path: histories/selector_modal_multiview.md

From de7d43c602ea86d7ff29350427ad705c965924f9 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 20 Aug 2024 09:58:37 -0500
Subject: [PATCH 6/6] help mode updated

---
 client/src/components/Form/FormDisplay.vue    |   2 +-
 .../src/components/Help/HelpModeDraggable.vue |   2 +-
 client/src/components/Help/HelpModeText.vue   | 112 +++++++++++++++---
 .../History/Modals/SelectorModal.vue          |   5 +-
 .../src/components/Panels/HelpModePanel.vue   |   9 +-
 client/src/composables/markdown.ts            |  53 +++++++++
 client/src/stores/helpmode/helpModeStore.ts   |  53 +++++++--
 client/src/stores/helpmode/helpTextConfig.yml |  20 +++-
 8 files changed, 217 insertions(+), 39 deletions(-)

diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index 289972140231..306ab5a5d5a6 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -159,7 +159,7 @@ export default {
     methods: {
         ...mapActions(useHelpModeStore, ["storeHelpModeText", "clearHelpModeText"]),
         callHelpMode() {
-            this.storeHelpModeText("tool_form_base");
+            this.storeHelpModeText("tool_form_base", true);
         },
         buildFormData() {
             const params = {};
diff --git a/client/src/components/Help/HelpModeDraggable.vue b/client/src/components/Help/HelpModeDraggable.vue
index c0fd7ece3f37..3935cc751d24 100644
--- a/client/src/components/Help/HelpModeDraggable.vue
+++ b/client/src/components/Help/HelpModeDraggable.vue
@@ -98,7 +98,7 @@ function resetPosition() {
                 <FontAwesomeIcon :icon="faTimes" />
             </BButton>
         </div>
-        <HelpModeText />
+        <HelpModeText tabbed />
     </div>
 </template>
 
diff --git a/client/src/components/Help/HelpModeText.vue b/client/src/components/Help/HelpModeText.vue
index 2cdb8a85fc99..6ec40d10735c 100644
--- a/client/src/components/Help/HelpModeText.vue
+++ b/client/src/components/Help/HelpModeText.vue
@@ -1,49 +1,133 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BTab, BTabs } from "bootstrap-vue";
+import { BAlert, BCard, BCardBody, BCardHeader, BCollapse, BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
+import { computed, watch } from "vue";
+import { useRoute } from "vue-router/composables";
 
 import { useMarkdown } from "@/composables/markdown";
 import { DEFAULT_HELP_TEXT, useHelpModeStore } from "@/stores/helpmode/helpModeStore";
 import localize from "@/utils/localization";
 
+import Heading from "../Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
+library.add(faCaretDown, faCaretUp);
+
+const props = defineProps<{
+    tabbed?: boolean;
+}>();
+
+const route = useRoute();
+
+const tabNo = computed<number>({
+    get: () => {
+        if (activeTab.value) {
+            return currentTabs.value.indexOf(activeTab.value);
+        } else {
+            return currentTabs.value.length - 1;
+        }
+    },
+    set: (value: number) => {
+        if (value === null) {
+            activeTab.value = null;
+        } else {
+            activeTab.value = currentTabs.value[value] || null;
+        }
+    },
+});
+
 const { renderMarkdown } = useMarkdown({
     openLinksInNewPage: true,
     html: true,
     appendHrRuleToDetails: true,
     replaceCodeWithIcon: true,
+    removeContentBeforeFirstH1: true,
+    internalRoute: "https://galaxyproject.org",
 });
 
-// local refs
-const { activeTab, contents, loading, currentTabs } = storeToRefs(useHelpModeStore());
+const helpModeStore = useHelpModeStore();
+const { activeTab, contents, loading, currentTabs } = storeToRefs(helpModeStore);
+
+const currentRoute = computed(() => route.path);
+
+watch(
+    () => currentRoute.value,
+    async (newVal) => {
+        await helpModeStore.storeHelpModeTextForRoute(newVal);
+    },
+    { immediate: true }
+);
 
 const noHelpTextMsg = localize("No help text available for this component");
+
+function changeTab(helpId: string) {
+    if (activeTab.value === helpId && !props.tabbed) {
+        activeTab.value = null;
+    } else {
+        activeTab.value = helpId;
+    }
+}
 </script>
 
 <template>
-    <span v-if="!activeTab" v-localize class="help-mode-container">{{ DEFAULT_HELP_TEXT }}</span>
-    <BTabs v-else class="help-mode-container">
-        <BTab v-for="helpId of currentTabs" :key="helpId" :active="activeTab === helpId">
+    <span v-if="currentTabs.length === 0" v-localize class="help-mode-container">{{ DEFAULT_HELP_TEXT }}</span>
+    <component
+        :is="props.tabbed ? BTabs : 'div'"
+        v-else
+        v-model="tabNo"
+        class="d-flex flex-column help-mode-container"
+        pills
+        fill
+        title-link-class="w-100 h-100 bg-danger"
+        content-class="overflow-auto"
+        nav-class="help-mode-tabs">
+        <component :is="props.tabbed ? BTab : BCard" v-for="helpId of currentTabs" :key="helpId" no-body>
+            <BCardHeader
+                v-if="!props.tabbed"
+                role="button"
+                class="unselectable d-flex justify-content-between"
+                @click="changeTab(helpId)">
+                <Heading h3 size="sm" inline :icon="contents[helpId]?.icon" class="truncate">{{ contents[helpId]?.title }}</Heading>
+                <FontAwesomeIcon :icon="activeTab === helpId ? faCaretUp : faCaretDown" />
+            </BCardHeader>
             <template v-slot:title>
                 <FontAwesomeIcon v-if="contents[helpId]?.icon" :icon="contents[helpId]?.icon" />
                 {{ contents[helpId]?.title }}
             </template>
-            <!-- eslint-disable-next-line vue/no-v-html -->
-            <div v-if="!loading" v-html="renderMarkdown(contents[helpId]?.content || noHelpTextMsg)" />
-            <BAlert v-else variant="info" show>
-                <LoadingSpan message="Loading help text" />
-            </BAlert>
-        </BTab>
-    </BTabs>
+
+            <BCollapse :visible="activeTab && activeTab === helpId">
+                <BCardBody class="pt-1">
+                    <!-- eslint-disable-next-line vue/no-v-html -->
+                    <div v-if="!loading" v-html="renderMarkdown(contents[helpId]?.content || noHelpTextMsg)" />
+                    <BAlert v-else variant="info" show>
+                        <LoadingSpan message="Loading help text" />
+                    </BAlert>
+                </BCardBody>
+            </BCollapse>
+        </component>
+    </component>
 </template>
 
+<style>
+.help-mode-tabs {
+    overflow-x: auto;
+    flex-wrap: unset;
+    text-wrap: nowrap;
+}
+</style>
+
 <style scoped lang="scss">
 .help-mode-container {
     margin-top: 0;
-    padding: 10px;
     overflow-y: auto;
     height: 100%;
 }
+.truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 </style>
diff --git a/client/src/components/History/Modals/SelectorModal.vue b/client/src/components/History/Modals/SelectorModal.vue
index a9472750a9f9..46a65243cf63 100644
--- a/client/src/components/History/Modals/SelectorModal.vue
+++ b/client/src/components/History/Modals/SelectorModal.vue
@@ -67,19 +67,16 @@ watch(
     () => propShowModal.value,
     (show: boolean) => {
         let helpModeId;
-        let helpModeIcon;
         if (props.multiple) {
             if (show) {
                 selectedHistories.value = [...pinnedHistories.value];
             }
             helpModeId = "selector_modal_multiview";
-            helpModeIcon = faCheckSquare;
         } else {
             helpModeId = "selector_modal_switch";
-            helpModeIcon = faExchangeAlt;
         }
         if (show) {
-            helpModeStore.storeHelpModeText(helpModeId, helpModeIcon);
+            helpModeStore.storeHelpModeText(helpModeId);
         } else {
             helpModeStore.clearHelpModeText(helpModeId);
         }
diff --git a/client/src/components/Panels/HelpModePanel.vue b/client/src/components/Panels/HelpModePanel.vue
index 5941e1471657..ddd989e1fa88 100644
--- a/client/src/components/Panels/HelpModePanel.vue
+++ b/client/src/components/Panels/HelpModePanel.vue
@@ -2,7 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BButtonGroup, BCard } from "bootstrap-vue";
+import { BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 
 import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
@@ -44,13 +44,11 @@ function toggleOut() {
 
         <template v-slot:header>
             <div v-localize class="ml-1">
-                This is Galaxy's help mode. It shows help text for the current component you are interacting with.
+                This is Galaxy's help mode. It shows help text for the current view you are interacting with.
             </div>
         </template>
 
-        <BCard class="help-text">
-            <HelpModeText />
-        </BCard>
+        <HelpModeText class="help-text" />
     </ActivityPanel>
 </template>
 
@@ -58,7 +56,6 @@ function toggleOut() {
 .help-text {
     display: flex;
     flex-direction: column;
-    background-color: aliceblue;
     overflow: auto;
 }
 </style>
diff --git a/client/src/composables/markdown.ts b/client/src/composables/markdown.ts
index 244f3b4eede8..c9a6ae83a43d 100644
--- a/client/src/composables/markdown.ts
+++ b/client/src/composables/markdown.ts
@@ -30,6 +30,49 @@ function addRuleOpenLinksInNewPage(engine: MarkdownIt) {
     };
 }
 
+function addRulePrependInternalRouteToInternalLinks(engine: MarkdownIt, internalRoute: string) {
+    const defaultRender =
+        engine.renderer.rules.link_open ||
+        function (tokens, idx, options, _env, self) {
+            return self.renderToken(tokens, idx, options);
+        };
+
+    engine.renderer.rules.link_open = function (tokens, idx, options, env, self) {
+        const token = tokens[idx];
+
+        if (token) {
+            const hrefIndex = token.attrIndex("href");
+
+            if (hrefIndex >= 0) {
+                const href = token.attrs![hrefIndex]![1];
+                if (href.startsWith("/")) {
+                    token.attrs![hrefIndex]![1] = `${internalRoute}${href}`;
+                }
+            }
+        }
+
+        return defaultRender(tokens, idx, options, env, self);
+    };
+}
+
+function addRuleRemoveBeforeFirstH1(engine: MarkdownIt) {
+    const defaultRender = engine.renderer.render;
+
+    engine.renderer.render = function (tokens, options, env) {
+        let firstH1Index = tokens.findIndex((token) => token.type === "heading_open" && token.tag === "h1");
+
+        if (firstH1Index !== -1) {
+            // If there's a closing tag for the h1, we need to keep it
+            if (tokens[firstH1Index + 1]?.type === "heading_close") {
+                firstH1Index++;
+            }
+            tokens = tokens.slice(firstH1Index);
+        }
+
+        return defaultRender.call(this, tokens, options, env);
+    };
+}
+
 function addRuleHeadingIncreaseLevel(engine: MarkdownIt, increaseBy: number) {
     const defaultOpen =
         engine.renderer.rules.heading_open ||
@@ -119,9 +162,11 @@ function adjustMdForOptions(markdown: string, options: UseMarkdownOptions) {
 interface UseMarkdownOptions {
     openLinksInNewPage?: boolean;
     increaseHeadingLevelBy?: number;
+    removeContentBeforeFirstH1?: boolean;
     html?: boolean;
     appendHrRuleToDetails?: boolean;
     replaceCodeWithIcon?: boolean;
+    internalRoute?: string;
 }
 
 type RawMarkdown = string;
@@ -135,6 +180,14 @@ export function useMarkdown(options: UseMarkdownOptions = {}) {
         addRuleOpenLinksInNewPage(mdEngine);
     }
 
+    if (options.removeContentBeforeFirstH1) {
+        addRuleRemoveBeforeFirstH1(mdEngine);
+    }
+
+    if (options.internalRoute) {
+        addRulePrependInternalRouteToInternalLinks(mdEngine, options.internalRoute);
+    }
+
     if (options.increaseHeadingLevelBy) {
         addRuleHeadingIncreaseLevel(mdEngine, options.increaseHeadingLevelBy);
     }
diff --git a/client/src/stores/helpmode/helpModeStore.ts b/client/src/stores/helpmode/helpModeStore.ts
index fab82558299f..7e1bf2fbe9a2 100644
--- a/client/src/stores/helpmode/helpModeStore.ts
+++ b/client/src/stores/helpmode/helpModeStore.ts
@@ -2,7 +2,6 @@
  * A pinia store for the Galaxy Help Mode.
  */
 
-import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { defineStore, storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -14,7 +13,7 @@ import config from "./helpTextConfig.yml";
 interface HelpContent {
     title: string;
     content: string;
-    icon?: IconDefinition;
+    icon?: string;
 }
 interface HelpModeStyle {
     width: string;
@@ -23,6 +22,10 @@ interface HelpModeStyle {
     left?: string;
 }
 
+export const routeTextIds: Record<string, string[]> = {
+    "/": ["galaxy_intro", "history_system"],
+};
+
 export const DEFAULT_HELP_TEXT = "Welcome to Galaxy Help Mode!";
 
 export const useHelpModeStore = defineStore("helpModeStore", () => {
@@ -45,6 +48,8 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
     const invalidIds = ref<string[]>([]);
     /** The ids of the components for which help text was requested while help mode was disabled */
     const idsToStore = ref<string[]>([]);
+    /** The route for which help text is loaded */
+    const currentHelpRoute = ref<string | null>(null);
 
     const status = computed(() => toggledSideBar.value === "help" || draggableActive.value);
 
@@ -65,7 +70,7 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
         }
     });
 
-    async function storeHelpModeText(id: string, icon?: IconDefinition) {
+    async function storeHelpModeText(id: string, top = false) {
         // if help mode is disabled, store the id in the temp array and return
         if (!status.value) {
             idsToStore.value.push(id);
@@ -83,21 +88,25 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
                 throw new Error(`No help mode config found for ${id}`);
             }
 
-            const { title, file_path } = config[id];
+            const { title, file_path, icon } = config[id];
 
             // if the text is already stored, don't fetch it again
             if (!contents.value[id]) {
-                const response = await fetch(
-                    "https://raw.githubusercontent.com/assuntad23/galaxy-help-markdown/main/" + file_path
-                );
+                const response = await fetch(file_path);
                 const text = await response.text();
                 contents.value[id] = { title, content: text, icon };
             }
 
             // set the active tab to the id
             activeTab.value = id;
-            // move this id to the top of the stack
-            currentTabs.value.push(id);
+
+            if (top) {
+                // move this id to the top of the stack
+                currentTabs.value = [id, ...currentTabs.value];
+            } else {
+                // move this id to the end of the stack
+                currentTabs.value.push(id);
+            }
         } catch (error) {
             console.error(`Failed to fetch help mode text for ${id}`, error);
             invalidIds.value.push(id);
@@ -107,6 +116,29 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
         }
     }
 
+    async function storeHelpModeTextForRoute(route: string) {
+        if (currentHelpRoute.value === route) {
+            return;
+        } else if (currentHelpRoute.value) {
+            // clear the previous route's help text(s)
+            const lastIds = routeTextIds[currentHelpRoute.value];
+            if (lastIds) {
+                for (const id of lastIds) {
+                    clearHelpModeText(id);
+                }
+            }
+        }
+        // now, set the current route
+        currentHelpRoute.value = route;
+        // load the help text(s) for the new route
+        const ids = routeTextIds[route];
+        if (ids) {
+            for (const id of ids) {
+                await storeHelpModeText(id);
+            }
+        }
+    }
+
     function clearHelpModeText(id: string) {
         // if help mode is disabled, remove the id from the temp array
         if (!status.value) {
@@ -147,5 +179,8 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
         clearHelpModeText,
         /** Adds help mode text for the given Galaxy component `id` if help mode is enabled */
         storeHelpModeText,
+        /** Adds help mode text(s) for the given Galaxy route if help mode is enabled */
+        storeHelpModeTextForRoute,
+        currentHelpRoute,
     };
 });
diff --git a/client/src/stores/helpmode/helpTextConfig.yml b/client/src/stores/helpmode/helpTextConfig.yml
index 8b44bb141b4b..841cc94d5132 100644
--- a/client/src/stores/helpmode/helpTextConfig.yml
+++ b/client/src/stores/helpmode/helpTextConfig.yml
@@ -1,12 +1,24 @@
 tool_form_base:
   title: Tool Form
-  file_path: tools/tool_form_base.md
+  file_path: https://raw.githubusercontent.com/assuntad23/galaxy-help-markdown/main/tools/tool_form_base.md
+  icon: fa-wrench
 collection_builder:
   title: Collection Builder
-  file_path: collections/collection_builder.md
+  file_path: https://raw.githubusercontent.com/assuntad23/galaxy-help-markdown/main/collections/collection_builder.md
 selector_modal_switch:
   title: History Selector
-  file_path: histories/selector_modal_switch.md
+  file_path: https://raw.githubusercontent.com/assuntad23/galaxy-help-markdown/main/histories/selector_modal_switch.md
+  icon: fa-exchange-alt
 selector_modal_multiview:
   title: History Selector
-  file_path: histories/selector_modal_multiview.md
+  file_path: https://raw.githubusercontent.com/assuntad23/galaxy-help-markdown/main/histories/selector_modal_multiview.md
+  icon: fa-columns
+galaxy_intro:
+  title: A short introduction to Galaxy
+  file_path: https://raw.githubusercontent.com/galaxyproject/training-material/main/topics/introduction/tutorials/galaxy-intro-short/tutorial.md
+  origin: training-material
+history_system:
+  title: Understanding Histories
+  file_path: https://raw.githubusercontent.com/galaxyproject/training-material/main/topics/galaxy-interface/tutorials/history/tutorial.md
+  origin: training-material
+  icon: fa-hdd