help Mode box renders markdown

client/src/components/Form/FormDisplay.vue

@@ -15,8 +15,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";
 
@@ -90,6 +93,7 @@ export default {
         };
     },
     computed: {
+        ...mapStores(useHelpModeTextStore),
         validation() {
             return validateInputs(this.formIndex, this.formData);
         },
@@ -129,6 +133,7 @@ export default {
         },
     },
     created() {
+        this.callHelpMode();
         this.onCloneInputs();
         // build flat formData that is ready to be submitted
         this.formData = this.buildFormData();
@@ -140,6 +145,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/Panels/HelpModeText.vue

@@ -1,21 +1,21 @@
 <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 helpInfo.helpmodetext;
+        return md.render(helpInfo.helpmodetext);
     },
 });
 </script>
 
 <template>
     <div class="unified-panel-body d-flex justify-content-between">
-        <div class="helpModeContainer">
-            {{ helpText }}
-        </div>
+        <div class="helpModeContainer" v-html="helpText"></div>
     </div>
 </template>

client/src/stores/helpmode/helpModeTextStore.js

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 
-import config from './helpTextConfig.yml';
+import config from "./helpTextConfig.yml";
 
 export const useHelpModeTextStore = defineStore("helpModeText", {
     state: () => {

client/src/stores/helpmode/helpTextConfig.yml

@@ -1,2 +1,26 @@
 ---
-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.s
+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: |
+    ## [HelpMode] How to use a tool form
+
+    1. Select data **inputs**
+    2. Set tool **parameters**
+    3. Click **Run Tool**

client/src/stores/helpmode/helpTextMarkdown/tool_form_markdown.md

@@ -0,0 +1,60 @@
+# [Help] How to use a tool form
+
+1. Select data **inputs**
+2. Set tool **parameters**
+3. Click **Run Tool**
+
+:::info
+More about this tool...
+
+-   Tool name `**name** description`
+-   Tool version `**version**`
+-   This tool has **N** required inputs
+    -   input1 with datatype format of `**list of datatypes**`
+    -   input2 with datatype format of `**list of datatypes**`
+-   See the **tool help** `scrolls tool form down to help section`
+    :::
+
+-- > _Reference tool wrapper_
+
+```
+<tool id="Cut1" name="Cut" version="1.0.2">
+    <description>
+        columns from a table
+    </description>
+```
+
+## :question: Help
+
+:::success
+Galaxy concepts
+:::
+
+### Input Data
+
+-   Inputs are data _files_
+-   Inputs are commonly named **[datasets](https://training.galaxyproject.org/training-material/search2?query=dataset)** in Galaxy
+-   Inputs on tool forms are chosen from the _currently active_ **[history](https://training.galaxyproject.org/training-material/search2?query=history)**
+-   **[Upload](https://training.galaxyproject.org/training-material/search2?query=upload)** or **[copy](https://training.galaxyproject.org/training-material/faqs/galaxy/histories_copy_dataset.html)** datasets into your history to use them
+
+:flashlight: Switch which history is active with `fa-exchange` or view all of your histories with `history-selector-icon`
+
+### Inputs: one or many?
+
+-   Input data can be ...
+    -   a single dataset `fa-file`
+    -   a set of multiple datasets `fa-files`
+    -   a set of multiple datasets in a [dataset collection](https://training.galaxyproject.org/training-material/search2?query=collection) `fa-folder`
+
+### Input format: Datatype
+
+-   Inputs have a file format commonly named a **datatype** in Galaxy
+-   Datatypes are metadata that describe what a file contains.
+-   Datatypes are similiar to a file extention but are not a part of the file name.
+-   When the _expected_ datatype on the form matches an _assigned_ datatype, a dataset becomes available to select on the tool form.
+
+### Learn
+
+-   [Introduction to Galaxy Analyses](https://training.galaxyproject.org/training-material/topics/introduction/)
+-   [Collections are folders of similiar files!](https://training.galaxyproject.org/training-material/search2?query=collection)
+-   [Upload: Getting Data into Galaxy](https://help.galaxyproject.org/t/getting-data-into-galaxy/10868)