From 01b38cdd964daee4e8b17ab8ba8234c4d14cb096 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 25 Mar 2024 18:38:32 -0500
Subject: [PATCH] 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