Skip to content

Commit

Permalink
move help mode into side panel (primarily)
Browse files Browse the repository at this point in the history
Still toggleable into a draggable mode if needed
  • Loading branch information
ahmedhamidawan committed Apr 15, 2024
1 parent 047ce4a commit f968cc8
Show file tree
Hide file tree
Showing 9 changed files with 174 additions and 46 deletions.
14 changes: 14 additions & 0 deletions client/src/components/ActivityBar/ActivityBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand All @@ -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);
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
Expand Down Expand Up @@ -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 = {
Expand All @@ -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>

Expand Down Expand Up @@ -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>
50 changes: 50 additions & 0 deletions client/src/components/Help/HelpModeText.vue
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 4 additions & 5 deletions client/src/components/Masthead/HelpModeSwitch.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/Masthead/Masthead.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
64 changes: 64 additions & 0 deletions client/src/components/Panels/HelpModePanel.vue
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 3 additions & 3 deletions client/src/entry/analysis/modules/Analysis.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -50,6 +50,6 @@ onUnmounted(() => {
<HistoryIndex />
</FlexPanel>
<DragAndDropModal />
<HelpModeText v-if="helpModeStatus" />
<HelpModeDraggable v-if="draggableActive" />
</div>
</template>
20 changes: 17 additions & 3 deletions client/src/stores/helpmode/helpModeStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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%",
Expand All @@ -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) {
Expand Down Expand Up @@ -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 */
Expand Down
3 changes: 3 additions & 0 deletions client/src/stores/helpmode/helpTextConfig.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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

0 comments on commit f968cc8

Please sign in to comment.