Show current tool panel view name on top of tool panel

Remove button group, change whole header into a dropdown menu. Fixes galaxyproject#16828
ahmedhamidawan · Nov 14, 2023 · 3e5233d · 3e5233d
1 parent c85298b
commit 3e5233d
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 30 deletions.
diff --git a/...onents/Panels/Buttons/PanelViewButton.vue → ...components/Panels/Menus/PanelViewMenu.vue b/...onents/Panels/Buttons/PanelViewButton.vue → ...components/Panels/Menus/PanelViewMenu.vue
@@ -2,14 +2,17 @@
     <b-dropdown
         v-b-tooltip.hover.top.noninteractive
         right
+        block
+        no-caret
         title="Show panel options"
         variant="link"
+        toggle-class="text-decoration-none"
         role="menu"
         aria-label="View all tool panel configurations"
         class="tool-panel-dropdown"
         size="sm">
         <template v-slot:button-content>
-            <span class="sr-only">View all tool panel configurations</span>
+            <slot name="panel-view-selector"></slot><span class="sr-only">View all tool panel configurations</span>
         </template>
         <PanelViewMenuItem
             :current-panel-view="currentPanelView"

diff --git a/...ents/Panels/Buttons/PanelViewMenuItem.vue → ...onents/Panels/Menus/PanelViewMenuItem.vue b/...ents/Panels/Buttons/PanelViewMenuItem.vue → ...onents/Panels/Menus/PanelViewMenuItem.vue
diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
@@ -1,18 +1,22 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
 import { storeToRefs } from "pinia";
-import { onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 
 import { getAppRoot } from "@/onload";
-import { useToolStore } from "@/stores/toolStore";
+import { type PanelView, useToolStore } from "@/stores/toolStore";
 import localize from "@/utils/localization";
 
 import LoadingSpan from "../LoadingSpan.vue";
-import FavoritesButton from "./Buttons/FavoritesButton.vue";
-import PanelViewButton from "./Buttons/PanelViewButton.vue";
+import PanelViewMenu from "./Menus/PanelViewMenu.vue";
 import ToolBox from "./ToolBox.vue";
 import Heading from "@/components/Common/Heading.vue";
 
+library.add(faCaretDown);
+
 const props = defineProps({
     workflow: { type: Boolean, default: false },
     editorWorkflows: { type: Array, default: null },
@@ -33,7 +37,7 @@ const toolStore = useToolStore();
 const { currentPanelView, isPanelPopulated } = storeToRefs(toolStore);
 
 const query = ref("");
-const panelViews = ref(null);
+const panelViews = ref<Record<string, PanelView> | null>(null);
 const showAdvanced = ref(false);
 
 onMounted(async () => {
@@ -70,6 +74,20 @@ watch(
     }
 );
 
+const toolPanelHeader = computed(() => {
+    if (showAdvanced.value) {
+        return localize("Advanced Tool Search");
+    } else if (
+        currentPanelView.value !== "default" &&
+        panelViews.value &&
+        panelViews.value[currentPanelView.value]?.name
+    ) {
+        return localize(panelViews.value[currentPanelView.value]?.name);
+    } else {
+        return localize("Tools");
+    }
+});
+
 async function initializeTools() {
     try {
         await toolStore.fetchTools();
@@ -103,25 +121,28 @@ function onInsertWorkflowSteps(workflowId: string, workflowStepCount: number | u
 <template>
     <div v-if="arePanelsFetched" class="unified-panel" aria-labelledby="toolbox-heading">
         <div unselectable="on">
-            <div class="unified-panel-header-inner">
-                <nav class="d-flex justify-content-between mx-3 my-2">
-                    <Heading v-if="!showAdvanced" id="toolbox-heading" h2 inline size="sm">{{
-                        localize("Tools")
-                    }}</Heading>
-                    <Heading v-else id="toolbox-heading" h2 inline size="sm">{{
-                        localize("Advanced Tool Search")
-                    }}</Heading>
-                    <div class="panel-header-buttons">
-                        <b-button-group>
-                            <FavoritesButton v-if="!showAdvanced" :query="query" @onFavorites="(q) => (query = q)" />
-                            <PanelViewButton
-                                v-if="panelViews && Object.keys(panelViews).length > 1"
-                                :panel-views="panelViews"
-                                :current-panel-view="currentPanelView"
-                                @updatePanelView="updatePanelView" />
-                        </b-button-group>
-                    </div>
-                </nav>
+            <div class="unified-panel-header-inner mx-3 my-2">
+                <PanelViewMenu
+                    v-if="panelViews && Object.keys(panelViews).length > 1"
+                    :panel-views="panelViews"
+                    :current-panel-view="currentPanelView"
+                    @updatePanelView="updatePanelView">
+                    <template v-slot:panel-view-selector>
+                        <div class="d-flex justify-content-between panel-view-selector">
+                            <Heading
+                                id="toolbox-heading"
+                                :class="!showAdvanced && toolPanelHeader !== 'Tools' && 'font-italic'"
+                                h2
+                                inline
+                                size="sm"
+                                >{{ toolPanelHeader }}
+                            </Heading>
+                            <div v-if="!showAdvanced" class="panel-header-buttons">
+                                <FontAwesomeIcon icon="caret-down" />
+                            </div>
+                        </div>
+                    </template>
+                </PanelViewMenu>
             </div>
         </div>
         <ToolBox
@@ -145,3 +166,11 @@ function onInsertWorkflowSteps(workflowId: string, workflowStepCount: number | u
         </div>
     </div>
 </template>
+
+<style lang="scss" scoped>
+@import "theme/blue.scss";
+
+.panel-view-selector {
+    color: $panel-header-text-color;
+}
+</style>
diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
@@ -62,6 +62,15 @@ export interface FilterSettings {
     help?: string;
 }
 
+export interface PanelView {
+    id: string;
+    model_class: string;
+    name: string;
+    description: string;
+    view_type: string;
+    searchable: boolean;
+}
+
 export const useToolStore = defineStore("toolStore", () => {
     const currentPanelView: Ref<string> = useUserLocalStorage("tool-store-view", "");
     const toolsById = ref<Record<string, Tool>>({});
@@ -168,7 +177,7 @@ export const useToolStore = defineStore("toolStore", () => {
         }
     }
 
-    // Directly related to the ToolPanel
+    // Used to initialize the ToolPanel with the default panel view for this site.
     async function initCurrentPanelView(siteDefaultPanelView: string) {
         if (!loading.value && !isPanelPopulated.value) {
             loading.value = true;
@@ -194,14 +203,22 @@ export const useToolStore = defineStore("toolStore", () => {
 
     async function setCurrentPanelView(panelView: string) {
         if (!loading.value) {
-            currentPanelView.value = panelView;
             if (panel.value[panelView]) {
+                currentPanelView.value = panelView;
                 return;
             }
             loading.value = true;
-            const { data } = await axios.get(`${getAppRoot()}api/tool_panels/${panelView}`);
-            savePanelView(panelView, data);
-            loading.value = false;
+            try {
+                await axios.get(`${getAppRoot()}api/tool_panels/${panelView}`);
+                const { data } = await axios.get(`${getAppRoot()}api/tool_panels/${panelView}`);
+                currentPanelView.value = panelView;
+                savePanelView(panelView, data);
+                loading.value = false;
+            } catch (e) {
+                const error = e as { response: { data: { err_msg: string } } };
+                console.error("Could not change panel view", error.response.data.err_msg ?? error.response);
+                loading.value = false;
+            }
         }
     }