From f968cc8780410c8c3982d851445aa4fd802c0d9b Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 15 Apr 2024 12:46:14 -0500
Subject: [PATCH] move help mode into side panel (primarily)

Still toggleable into a draggable mode if needed
---
 .../components/ActivityBar/ActivityBar.vue    | 14 ++++
 .../HelpModeDraggable.vue}                    | 50 +++++----------
 client/src/components/Help/HelpModeText.vue   | 50 +++++++++++++++
 .../components/Masthead/HelpModeSwitch.vue    |  9 ++-
 client/src/components/Masthead/Masthead.vue   |  4 +-
 .../src/components/Panels/HelpModePanel.vue   | 64 +++++++++++++++++++
 .../src/entry/analysis/modules/Analysis.vue   |  6 +-
 client/src/stores/helpmode/helpModeStore.ts   | 20 +++++-
 client/src/stores/helpmode/helpTextConfig.yml |  3 +
 9 files changed, 174 insertions(+), 46 deletions(-)
 rename client/src/components/{Panels/HelpModeText.vue => Help/HelpModeDraggable.vue} (67%)
 create mode 100644 client/src/components/Help/HelpModeText.vue
 create mode 100644 client/src/components/Panels/HelpModePanel.vue

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 9a440d5ddd27..bf65a3420e1f 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/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";
@@ -17,6 +18,7 @@ import InteractiveItem from "./Items/InteractiveItem.vue";
 import NotificationItem from "./Items/NotificationItem.vue";
 import UploadItem from "./Items/UploadItem.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";
@@ -38,6 +40,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);
@@ -197,6 +202,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"
@@ -217,6 +230,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')" />
         </FlexPanel>
diff --git a/client/src/components/Panels/HelpModeText.vue b/client/src/components/Help/HelpModeDraggable.vue
similarity index 67%
rename from client/src/components/Panels/HelpModeText.vue
rename to client/src/components/Help/HelpModeDraggable.vue
index 1a8067a2e002..c0fd7ece3f37 100644
--- a/client/src/components/Panels/HelpModeText.vue
+++ b/client/src/components/Help/HelpModeDraggable.vue
@@ -3,35 +3,27 @@ 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, BTab, BTabs } from "bootstrap-vue";
+import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { reactive, ref, watch } from "vue";
 
-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 { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
+import { useUserStore } from "@/stores/userStore";
 
+import HelpModeText from "./HelpModeText.vue";
 import Heading from "@/components/Common/Heading.vue";
-import LoadingSpan from "@/components/LoadingSpan.vue";
 
 library.add(faTimes, faUndo);
 
-const { renderMarkdown } = useMarkdown({
-    openLinksInNewPage: true,
-    html: true,
-    appendHrRuleToDetails: true,
-    replaceCodeWithIcon: true,
-});
+const userStore = useUserStore();
 
 // local refs
-const { status, position, helpModeStyle, activeTab, contents, loading, currentTabs } = storeToRefs(useHelpModeStore());
+const { draggableActive, position, helpModeStyle } = storeToRefs(useHelpModeStore());
 const el = ref<HTMLElement | null>(null);
 const helpModeHeader = ref<HTMLElement | null>(null);
 const helpModeSize = reactive(useAnimationFrameSize(el));
 
-const noHelpTextMsg = localize("No help text available for this component");
-
 // draggable properties
 const { style } = useDraggable(helpModeHeader, { initialValue: position.value });
 
@@ -75,6 +67,15 @@ watch(
     }
 );
 
+/** 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 = {
@@ -93,22 +94,11 @@ function resetPosition() {
             <BButton size="sm" @click="resetPosition">
                 <FontAwesomeIcon :icon="faUndo" />
             </BButton>
-            <BButton size="sm" @click="status = false">
+            <BButton size="sm" @click="closeDraggable">
                 <FontAwesomeIcon :icon="faTimes" />
             </BButton>
         </div>
-        <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>
+        <HelpModeText />
     </div>
 </template>
 
@@ -137,10 +127,4 @@ function resetPosition() {
     border-bottom: 2px solid #868686;
     cursor: move;
 }
-.help-mode-container {
-    margin-top: 0;
-    padding: 10px;
-    overflow-y: auto;
-    height: 100%;
-}
 </style>
diff --git a/client/src/components/Help/HelpModeText.vue b/client/src/components/Help/HelpModeText.vue
new file mode 100644
index 000000000000..bc2e46abe54a
--- /dev/null
+++ b/client/src/components/Help/HelpModeText.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BTab, BTabs } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+
+import { useMarkdown } from "@/composables/markdown";
+import { DEFAULT_HELP_TEXT, useHelpModeStore } from "@/stores/helpmode/helpModeStore";
+import localize from "@/utils/localization";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+const { renderMarkdown } = useMarkdown({
+    openLinksInNewPage: true,
+    html: true,
+    appendHrRuleToDetails: true,
+    replaceCodeWithIcon: true,
+    detectEmojis: true,
+});
+
+// local refs
+const { activeTab, contents, loading, currentTabs } = storeToRefs(useHelpModeStore());
+
+const noHelpTextMsg = localize("No help text available for this component");
+</script>
+
+<template>
+    <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)" />
+            <BAlert v-else variant="info" show>
+                <LoadingSpan message="Loading help text" />
+            </BAlert>
+        </BTab>
+    </BTabs>
+</template>
+
+<style scoped lang="scss">
+.help-mode-container {
+    margin-top: 0;
+    padding: 10px;
+    overflow-y: auto;
+    height: 100%;
+}
+</style>
diff --git a/client/src/components/Masthead/HelpModeSwitch.vue b/client/src/components/Masthead/HelpModeSwitch.vue
index a1a7b7bbf0b4..aed71d8f3211 100644
--- a/client/src/components/Masthead/HelpModeSwitch.vue
+++ b/client/src/components/Masthead/HelpModeSwitch.vue
@@ -11,9 +11,9 @@ import localize from "@/utils/localization";
 library.add(faQuestionCircle);
 
 const tooltip = localize("Enable/Disable Help Mode");
-const { status } = storeToRefs(useHelpModeStore());
+const { draggableActive } = storeToRefs(useHelpModeStore());
 function toggleEnabledStatus() {
-    status.value = !status.value;
+    draggableActive.value = !draggableActive.value;
 }
 </script>
 
@@ -22,14 +22,13 @@ function toggleEnabledStatus() {
         <BButton
             v-b-tooltip.hover.bottom
             class="help-mode-button nav-link"
-            :class="{ highlight: status }"
+            :class="{ highlight: draggableActive }"
             :title="tooltip"
             :aria-label="tooltip"
             variant="link"
             @click="toggleEnabledStatus"
             @keydown.enter="toggleEnabledStatus">
-            <!-- <i class="fas fa-question-circle fa-lg" :class="{ highlight: status }"> </i> Help Me -->
-            <FontAwesomeIcon :icon="faQuestionCircle" :class="{ highlight: status }" size="lg" />
+            <FontAwesomeIcon :icon="faQuestionCircle" :class="{ highlight: draggableActive }" size="lg" />
         </BButton>
     </div>
 </template>
diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index a122410528be..04882a5ec394 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -139,9 +139,9 @@ onMounted(() => {
                 :active-tab="activeTab"
                 @open-url="emit('open-url', $event)" />
             <MastheadItem v-if="windowTab" :tab="windowTab" :toggle="windowToggle" @click="onWindowToggle" />
-            <BNavItem>
+            <!-- <BNavItem v-if="!isAnonymous && isConfigLoaded && config.enable_help_mode">
                 <HelpModeSwitch />
-            </BNavItem>
+            </BNavItem> -->
             <BNavItem
                 v-if="!isAnonymous && isConfigLoaded && config.enable_notification_system"
                 id="notifications-bell">
diff --git a/client/src/components/Panels/HelpModePanel.vue b/client/src/components/Panels/HelpModePanel.vue
new file mode 100644
index 000000000000..5941e1471657
--- /dev/null
+++ b/client/src/components/Panels/HelpModePanel.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BButtonGroup, BCard } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+
+import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
+import { useUserStore } from "@/stores/userStore";
+
+import HelpModeText from "../Help/HelpModeText.vue";
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+
+library.add(faExternalLinkAlt);
+
+const { draggableActive } = storeToRefs(useHelpModeStore());
+const userStore = useUserStore();
+
+function toggleOut() {
+    const panelActive = userStore.toggledSideBar === "help";
+    const togglePanel = panelActive && !draggableActive.value;
+    draggableActive.value = !draggableActive.value;
+    if (togglePanel) {
+        userStore.toggleSideBar("help");
+    }
+}
+</script>
+
+<template>
+    <ActivityPanel title="Galaxy Help Mode">
+        <template v-slot:header-buttons>
+            <BButtonGroup>
+                <BButton
+                    v-b-tooltip.bottom.hover
+                    data-description="toggle out help mode"
+                    size="sm"
+                    :variant="draggableActive ? 'info' : 'link'"
+                    title="Toggle out help mode into a draggable window"
+                    @click="toggleOut">
+                    <FontAwesomeIcon :icon="faExternalLinkAlt" fixed-width />
+                </BButton>
+            </BButtonGroup>
+        </template>
+
+        <template v-slot:header>
+            <div v-localize class="ml-1">
+                This is Galaxy's help mode. It shows help text for the current component you are interacting with.
+            </div>
+        </template>
+
+        <BCard class="help-text">
+            <HelpModeText />
+        </BCard>
+    </ActivityPanel>
+</template>
+
+<style lang="scss" scoped>
+.help-text {
+    display: flex;
+    flex-direction: column;
+    background-color: aliceblue;
+    overflow: auto;
+}
+</style>
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 39b789bdebeb..28a5ad2284c6 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -8,15 +8,15 @@ import { useHelpModeStore } from "@/stores/helpmode/helpModeStore";
 
 import CenterFrame from "./CenterFrame.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
+import HelpModeDraggable from "@/components/Help/HelpModeDraggable.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: helpModeStatus } = storeToRefs(useHelpModeStore());
+const { draggableActive } = storeToRefs(useHelpModeStore());
 
 // methods
 function hideCenter() {
@@ -50,6 +50,6 @@ onUnmounted(() => {
             <HistoryIndex />
         </FlexPanel>
         <DragAndDropModal />
-        <HelpModeText v-if="helpModeStatus" />
+        <HelpModeDraggable v-if="draggableActive" />
     </div>
 </template>
diff --git a/client/src/stores/helpmode/helpModeStore.ts b/client/src/stores/helpmode/helpModeStore.ts
index e098d4215b8c..fab82558299f 100644
--- a/client/src/stores/helpmode/helpModeStore.ts
+++ b/client/src/stores/helpmode/helpModeStore.ts
@@ -3,11 +3,12 @@
  */
 
 import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { defineStore } from "pinia";
-import { ref, watch } from "vue";
+import { defineStore, storeToRefs } from "pinia";
+import { computed, ref, watch } from "vue";
 
 import { rethrowSimple } from "@/utils/simple-error";
 
+import { useUserStore } from "../userStore";
 import config from "./helpTextConfig.yml";
 
 interface HelpContent {
@@ -28,7 +29,9 @@ 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 { toggledSideBar } = storeToRefs(useUserStore());
+
+    const draggableActive = ref(false);
     const position = ref({ x: 0, y: 0 });
     const helpModeStyle = ref<HelpModeStyle>({
         width: "25%",
@@ -43,6 +46,15 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
     /** The ids of the components for which help text was requested while help mode was disabled */
     const idsToStore = ref<string[]>([]);
 
+    const status = computed(() => toggledSideBar.value === "help" || draggableActive.value);
+
+    // if side bar is toggled to help mode, if draggable is active, set it to false
+    watch(toggledSideBar, (newVal) => {
+        if (newVal === "help" && draggableActive.value) {
+            draggableActive.value = false;
+        }
+    });
+
     // when help mode is enabled, store help for the ids requested while help mode was disabled
     watch(status, async (newStatus) => {
         if (newStatus) {
@@ -129,6 +141,8 @@ export const useHelpModeStore = defineStore("helpModeStore", () => {
         position,
         /** Whether help mode is active or not */
         status,
+        /** Whether the draggble help mode is active or not */
+        draggableActive,
         /** Removes the tab from the stack for the given component `id` */
         clearHelpModeText,
         /** Adds help mode text for the given Galaxy component `id` if help mode is enabled */
diff --git a/client/src/stores/helpmode/helpTextConfig.yml b/client/src/stores/helpmode/helpTextConfig.yml
index 32997b44f978..8b44bb141b4b 100644
--- a/client/src/stores/helpmode/helpTextConfig.yml
+++ b/client/src/stores/helpmode/helpTextConfig.yml
@@ -7,3 +7,6 @@ collection_builder:
 selector_modal_switch:
   title: History Selector
   file_path: histories/selector_modal_switch.md
+selector_modal_multiview:
+  title: History Selector
+  file_path: histories/selector_modal_multiview.md