From 9e5adca47784e9640337104358a8c61d48ef2afc Mon Sep 17 00:00:00 2001 From: Ahmed Awan Date: Mon, 13 Nov 2023 19:13:39 -0600 Subject: [PATCH] Show current panel view name on top of Tool Panel Removed the button group on top of panel, changed dropdown to `no-caret`, `block` menu. Fixes https://github.com/galaxyproject/galaxy/issues/16828 --- ...{PanelViewButton.vue => PanelViewMenu.vue} | 5 +- client/src/components/Panels/ToolPanel.vue | 77 +++++++++++++------ client/src/stores/toolStore.ts | 27 +++++-- 3 files changed, 79 insertions(+), 30 deletions(-) rename client/src/components/Panels/Buttons/{PanelViewButton.vue => PanelViewMenu.vue} (94%) diff --git a/client/src/components/Panels/Buttons/PanelViewButton.vue b/client/src/components/Panels/Buttons/PanelViewMenu.vue similarity index 94% rename from client/src/components/Panels/Buttons/PanelViewButton.vue rename to client/src/components/Panels/Buttons/PanelViewMenu.vue index 627e5ad20aaf..f1a689406b5b 100644 --- a/client/src/components/Panels/Buttons/PanelViewButton.vue +++ b/client/src/components/Panels/Buttons/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 "./Buttons/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; + } } }