Help Mode Switch, Text Box, and Initial Elements

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,22 @@
+<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);
+    },
+});
+</script>
+
+<template>
+    <div>
+        <b-form-checkbox v-model="enabledStatus" class="no-highlight" switch :title="tooltip"> </b-form-checkbox>
+    </div>
+</template>

client/src/components/Masthead/Masthead.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
+import { BNavbar, BNavbarBrand, BNavbarNav, BNavForm } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { useEntryPointStore } from "stores/entryPointStore";
 import { withPrefix } from "utils/redirect";
@@ -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";
@@ -143,6 +144,9 @@ onMounted(() => {
                 id="notifications-bell">
                 <NotificationsBell tooltip-placement="bottom" />
             </BNavItem>
+            <BNavForm>
+                <HelpModeSwitch />
+            </BNavForm>
         </BNavbarNav>
         <QuotaMeter />
     </BNavbar>

client/src/components/Panels/HelpModeText.vue

@@ -0,0 +1,37 @@
+<script setup="ts">
+import MarkdownIt from "markdown-it";
+import { computed } from "vue";
+
+import { useHelpModeTextStore } from "@/stores/helpmode/helpModeTextStore";
+
+const md = MarkdownIt();
+const helpInfo = useHelpModeTextStore();
+const helpText = computed({
+    get() {
+        return md.render(helpInfo.helpmodetext);
+    },
+});
+</script>
+
+<template>
+    <div class="helptext unified-panel-body d-flex justify-content-between">
+        <div class="helpModeContainer" v-html="helpText"></div>
+    </div>
+</template>
+
+<style>
+.helptext {
+    position: fixed;
+    top: 70%;
+    left: 80%;
+    width: 20% !important;
+    height: 30% !important;
+    z-index: 9999;
+    background-color: aliceblue;
+    border-color: black;
+    border-radius: 5px;
+    border-width: 2px;
+    border: solid;
+    opacity: 90%;
+}
+</style>

client/src/entry/analysis/modules/Analysis.vue

@@ -3,17 +3,20 @@ 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 ToolPanel from "@/components/Panels/ToolPanel.vue";
 import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 
 const router = useRouter();
 const showCenter = ref(false);
 const { showActivityBar, showToolbox, showPanels } = usePanels();
+const status = useHelpModeStatusStore();
 
 // methods
 function hideCenter() {
@@ -50,5 +53,6 @@ onUnmounted(() => {
             <HistoryIndex />
         </FlexPanel>
         <DragAndDropModal />
+        <HelpModeText v-if="status.helpmodestatus" />
     </div>
 </template>

client/src/stores/helpmode/helpModeStatusStore.js

@@ -0,0 +1,15 @@
+import { defineStore } from "pinia";
+
+export const useHelpModeStatusStore = defineStore("helpModeStatusStore", {
+    state: () => {
+        return {
+            helpmodestatus: false,
+        };
+    },
+
+    actions: {
+        setHelpModeStatus(status) {
+            this.helpmodestatus = status;
+        },
+    },
+});

client/src/stores/helpmode/helpModeTextStore.js

@@ -0,0 +1,22 @@
+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;
+                });
+        },
+    },
+});

client/src/stores/helpmode/helpTextConfig.yml

@@ -0,0 +1,20 @@
+quotaMeterHelpString: This is your Quota storage meter. It is an indication of how much storage you are using. To learn more about Quota Storage, check out this GTN tutorial.
+unix_terms:
+    exitCodeHelpString: Some text about exit codes.
+    stdoutHelpString: Some text about stdout.
+    stderrHelpString: Some text about stderr.
+    commandLineHelpString: Some text about command line.
+    tracebackHelpString: Some text about traceback.
+
+galaxy_terms:
+    historyIDHelpString: Some text about history ID.
+    historyContentIDHelpString: Some text about history content ID.
+    historyDatasetCollectionAssociationHelpString: Some text about history dataset collection association.
+    historyDatasetAssociationHelpString: Some text about history dataset association.
+    datasetHelpString: Some text about dataset.
+    invocationHelpString: Some text about invocation.
+    datatypeHelpString: Some text about datatype.
+    dbkeyHelpString: Some text about dbkey.
+    jobStatesHelpString: Some text about job states.
+
+tool_form_base: tools/tool_form_base.md

client/webpack.config.js

@@ -104,6 +104,10 @@ module.exports = (env = {}, argv = {}) => {
                     test: /\.vue$/,
                     loader: "vue-loader",
                 },
+                {
+                    test: /\.ya?ml$/,
+                    loader: "yaml-loader",
+                },
                 {
                     test: /\.tsx?$/,
                     exclude: /node_modules/,