From 3e5233dc218065a69d8a35be13ce250dc364f58a Mon Sep 17 00:00:00 2001 From: Ahmed Awan Date: Mon, 13 Nov 2023 19:26:10 -0600 Subject: [PATCH 1/3] Show current tool panel view name on top of tool panel Remove button group, change whole header into a dropdown menu. Fixes https://github.com/galaxyproject/galaxy/issues/16828 --- .../PanelViewMenu.vue} | 5 +- .../{Buttons => Menus}/PanelViewMenuItem.vue | 0 client/src/components/Panels/ToolPanel.vue | 77 +++++++++++++------ client/src/stores/toolStore.ts | 27 +++++-- 4 files changed, 79 insertions(+), 30 deletions(-) rename client/src/components/Panels/{Buttons/PanelViewButton.vue => Menus/PanelViewMenu.vue} (94%) rename client/src/components/Panels/{Buttons => Menus}/PanelViewMenuItem.vue (100%) diff --git a/client/src/components/Panels/Buttons/PanelViewButton.vue b/client/src/components/Panels/Menus/PanelViewMenu.vue similarity index 94% rename from client/src/components/Panels/Buttons/PanelViewButton.vue rename to client/src/components/Panels/Menus/PanelViewMenu.vue index 627e5ad20aaf..f1a689406b5b 100644 --- a/client/src/components/Panels/Buttons/PanelViewButton.vue +++ b/client/src/components/Panels/Menus/PanelViewMenu.vue @@ -2,14 +2,17 @@ +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 | 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 + + diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts index 122b07db1a25..8c564510fb66 100644 --- 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 = useUserLocalStorage("tool-store-view", ""); const toolsById = ref>({}); @@ -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; + } } } From c7670e82357345ff8831e56e0ce1a370d7b3fbc7 Mon Sep 17 00:00:00 2001 From: Ahmed Awan Date: Tue, 14 Nov 2023 13:20:40 -0600 Subject: [PATCH 2/3] add view icon to `ToolPanel` header, add Favorites button back --- .../components/Panels/Menus/PanelViewMenu.vue | 2 +- .../Panels/Menus/PanelViewMenuItem.vue | 9 +--- client/src/components/Panels/ToolPanel.vue | 42 +++++++++++++++---- client/src/components/Panels/utilities.ts | 10 +++++ client/src/stores/toolStore.ts | 4 +- 5 files changed, 47 insertions(+), 20 deletions(-) diff --git a/client/src/components/Panels/Menus/PanelViewMenu.vue b/client/src/components/Panels/Menus/PanelViewMenu.vue index f1a689406b5b..50af093e2735 100644 --- a/client/src/components/Panels/Menus/PanelViewMenu.vue +++ b/client/src/components/Panels/Menus/PanelViewMenu.vue @@ -9,7 +9,7 @@ toggle-class="text-decoration-none" role="menu" aria-label="View all tool panel configurations" - class="tool-panel-dropdown" + class="tool-panel-dropdown w-100" size="sm">