Adding Help Mode to Galaxy

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')" />

client/src/components/Form/FormDisplay.vue

@@ -16,8 +16,11 @@
 </template>
 
 <script>
+import { mapActions } from "pinia";
 import Vue from "vue";
 
+import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
+
 import FormInputs from "./FormInputs";
 import { matchInputs, validateInputs, visitInputs } from "./utilities";
 
@@ -138,6 +141,7 @@ export default {
         },
     },
     created() {
+        this.callHelpMode();
         this.onCloneInputs();
         // build flat formData that is ready to be submitted
         this.formData = this.buildFormData();
@@ -148,7 +152,15 @@ export default {
         // highlight initial errors
         this.onErrors();
     },
+    destroyed() {
+        // since the user is leaving the form, the help mode is reset
+        this.clearHelpModeText("tool_form_base");
+    },
     methods: {
+        ...mapActions(useHelpModeStore, ["storeHelpModeText", "clearHelpModeText"]),
+        callHelpMode() {
+            this.storeHelpModeText("tool_form_base", true);
+        },
         buildFormData() {
             const params = {};
             Object.entries(this.formIndex).forEach(([key, input]) => {

client/src/components/Help/HelpModeDraggable.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+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 } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { reactive, ref, watch } from "vue";
+
+import { useAnimationFrameSize } from "@/composables/sensors/animationFrameSize";
+import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
+import { useUserStore } from "@/stores/userStore";
+
+import HelpModeText from "./HelpModeText.vue";
+import Heading from "@/components/Common/Heading.vue";
+
+library.add(faTimes, faUndo);
+
+const userStore = useUserStore();
+
+// local refs
+const { draggableActive, position, helpModeStyle } = storeToRefs(useHelpModeStore());
+const el = ref<HTMLElement | null>(null);
+const helpModeHeader = ref<HTMLElement | null>(null);
+const helpModeSize = reactive(useAnimationFrameSize(el));
+
+// draggable properties
+const { style } = useDraggable(helpModeHeader, { initialValue: position.value });
+
+// update store position on drag
+watch(
+    () => 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,
+            };
+        }
+    }
+);
+
+// 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`,
+            };
+        }
+    }
+);
+
+/** 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 = {
+        width: "25%",
+        height: "30%",
+        left: "0",
+        top: "0",
+    };
+}
+</script>
+
+<template>
+    <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 size="sm" @click="resetPosition">
+                <FontAwesomeIcon :icon="faUndo" />
+            </BButton>
+            <BButton size="sm" @click="closeDraggable">
+                <FontAwesomeIcon :icon="faTimes" />
+            </BButton>
+        </div>
+        <HelpModeText tabbed />
+    </div>
+</template>
+
+<style scoped lang="scss">
+// TODO: Maybe use predefined variables for colors and sizes?
+.help-text {
+    display: flex;
+    flex-direction: column;
+    z-index: 9999;
+    background-color: aliceblue;
+    border-color: black;
+    border-radius: 5px;
+    border-width: 2px;
+    border: solid;
+    opacity: 90%;
+    position: fixed;
+    resize: both;
+    overflow: auto;
+}
+.header {
+    display: flex;
+    color: white;
+    background-color: #454d6b;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 2px solid #868686;
+    cursor: move;
+}
+</style>

client/src/components/Help/HelpModeText.vue

@@ -0,0 +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, 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",
+});
+
+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="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>
+
+            <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;
+    overflow-y: auto;
+    height: 100%;
+}
+.truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>