creating new branch based off dev for help mode

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]) => {

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>

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">

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>

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>

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();
+            }
+        },
+    },
+});

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!";
+        },
+    },
+});

client/src/stores/helpmode/helpTextConfig.yml

@@ -0,0 +1,2 @@
+tool_form_base: tools/tool_form_base.md
+collection_builder: collections/collection_builder.md

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/,