Skip to content

Commit

Permalink
Show current panel view name on top of Tool Panel
Browse files Browse the repository at this point in the history
Removed the button group on top of panel, changed dropdown to
`no-caret`, `block` menu.
Fixes galaxyproject#16828
  • Loading branch information
ahmedhamidawan committed Nov 14, 2023
1 parent 1956639 commit 9e5adca
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 30 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
77 changes: 53 additions & 24 deletions client/src/components/Panels/ToolPanel.vue
Original file line number Diff line number Diff line change
@@ -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 "./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 },
Expand All @@ -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 () => {
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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
Expand All @@ -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>
27 changes: 22 additions & 5 deletions client/src/stores/toolStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>>({});
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
}
}

Expand Down

0 comments on commit 9e5adca

Please sign in to comment.