Merge pull request galaxyproject#17634 from ahmedhamidawan/fix_tool_p…

…anel_workflow_bugs [23.2] Fix tool panel workflow and favorites button bugs
nsoranzo · Mar 11, 2024 · 8697be0 · 8697be0
2 parents 71741fc + d57341e
commit 8697be0
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 68 deletions.
diff --git a/client/src/components/Panels/Buttons/FavoritesButton.vue b/client/src/components/Panels/Buttons/FavoritesButton.vue
@@ -1,5 +1,61 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faStar } from "@fortawesome/free-regular-svg-icons";
+import { faStar as faRegStar } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, ref, watch } from "vue";
+
+import { useUserStore } from "@/stores/userStore";
+
+library.add(faStar, faRegStar);
+
+interface Props {
+    query: string;
+}
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "onFavorites", filter: string): void;
+}>();
+
+const { isAnonymous } = storeToRefs(useUserStore());
+
+const FAVORITES = ["#favorites", "#favs", "#favourites"];
+const toggle = ref(false);
+
+const tooltipText = computed(() => {
+    if (isAnonymous.value) {
+        return "Log in to Favorite Tools";
+    } else {
+        if (toggle.value) {
+            return "Clear";
+        } else {
+            return "Show favorites";
+        }
+    }
+});
+
+watch(
+    () => props.query,
+    () => {
+        toggle.value = FAVORITES.includes(props.query);
+    }
+);
+
+function onFavorites() {
+    toggle.value = !toggle.value;
+    if (toggle.value) {
+        emit("onFavorites", "#favorites");
+    } else {
+        emit("onFavorites", "");
+    }
+}
+</script>
+
 <template>
-    <b-button
+    <BButton
         v-b-tooltip.hover.top.noninteractive
         class="panel-header-button-toolbox"
         size="sm"
@@ -8,58 +64,6 @@
         :disabled="isAnonymous"
         :title="tooltipText"
         @click="onFavorites">
-        <icon v-if="toggle" :icon="['fas', 'star']" />
-        <icon v-else :icon="['far', 'star']" />
-    </b-button>
+        <FontAwesomeIcon :icon="toggle ? faRegStar : faStar" />
+    </BButton>
 </template>
-
-<script>
-import { mapState } from "pinia";
-
-import { useUserStore } from "@/stores/userStore";
-
-export default {
-    name: "FavoritesButton",
-    props: {
-        query: {
-            type: String,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            searchKey: "#favorites",
-            toggle: false,
-        };
-    },
-    computed: {
-        ...mapState(useUserStore, ["isAnonymous"]),
-        tooltipText() {
-            if (this.isAnonymous) {
-                return this.l("Log in to Favorite Tools");
-            } else {
-                if (this.toggle) {
-                    return this.l("Clear");
-                } else {
-                    return this.l("Show favorites");
-                }
-            }
-        },
-    },
-    watch: {
-        query() {
-            this.toggle = this.query == this.searchKey;
-        },
-    },
-    methods: {
-        onFavorites() {
-            this.toggle = !this.toggle;
-            if (this.toggle) {
-                this.$emit("onFavorites", this.searchKey);
-            } else {
-                this.$emit("onFavorites", "");
-            }
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, type ComputedRef, onMounted, onUnmounted, type PropType, type Ref, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { computed, type ComputedRef, onMounted, onUnmounted, type PropType, type Ref, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
-import { getGalaxyInstance } from "@/app";
 import { type Tool, type ToolSection, useToolStore } from "@/stores/toolStore";
+import { useUserStore } from "@/stores/userStore";
 import Filtering, { contains, type ValidFilter } from "@/utils/filtering";
 import _l from "@/utils/localization";
 
@@ -109,6 +110,7 @@ const validFilters: ComputedRef<Record<string, ValidFilter<string>>> = computed(
 });
 const ToolFilters: ComputedRef<Filtering<string>> = computed(() => new Filtering(validFilters.value));
 
+const { currentFavorites } = storeToRefs(useUserStore());
 const toolStore = useToolStore();
 
 const sectionNames = toolStore.sectionDatalist("default").map((option: { value: string; text: string }) => option.text);
@@ -118,8 +120,6 @@ const ontologyList = toolStore
 
 onMounted(() => {
     searchWorker.value = new Worker(new URL("../toolSearch.worker.js", import.meta.url));
-    const Galaxy = getGalaxyInstance();
-    const favoritesResults = Galaxy?.user.getFavorites().tools;
 
     searchWorker.value.onmessage = ({ data }) => {
         const { type, payload, sectioned, query, closestTerm } = data;
@@ -128,7 +128,7 @@ onMounted(() => {
         } else if (type === "clearFilterResult") {
             emit("onResults", null, null, null);
         } else if (type === "favoriteToolsResult") {
-            emit("onResults", favoritesResults, null, null);
+            emit("onResults", currentFavorites.value.tools, null, null);
         }
     };
 });
@@ -137,6 +137,15 @@ onUnmounted(() => {
     searchWorker.value?.terminate();
 });
 
+watch(
+    () => currentFavorites.value.tools,
+    () => {
+        if (FAVORITES.includes(props.query)) {
+            post({ type: "favoriteTools" });
+        }
+    }
+);
+
 function checkQuery(q: string) {
     emit("onQuery", q);
     if (q && q.length >= MIN_QUERY_LENGTH) {

diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
@@ -253,7 +253,7 @@ function setButtonText() {
                 @onQuery="(q) => (query = q)"
                 @onResults="onResults" />
             <section v-if="!propShowAdvanced">
-                <UploadButton />
+                <UploadButton v-if="!props.workflow" />
                 <div v-if="hasResults && resultPanel" class="pb-2">
                     <b-button size="sm" class="w-100" @click="onToggle">
                         <FontAwesomeIcon :icon="buttonIcon" />

diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
@@ -34,7 +34,7 @@ const emit = defineEmits<{
 
 const arePanelsFetched = ref(false);
 const toolStore = useToolStore();
-const { currentPanelView, defaultPanelView, isPanelPopulated, loading, panelViews } = storeToRefs(toolStore);
+const { currentPanelView, defaultPanelView, isPanelPopulated, loading, panel, panelViews } = storeToRefs(toolStore);
 
 const loadingView = ref<string | undefined>(undefined);
 const query = ref("");
@@ -62,7 +62,7 @@ watch(
 watch(
     () => currentPanelView.value,
     async (newVal) => {
-        if (!newVal && arePanelsFetched.value) {
+        if ((!newVal || !panel.value[newVal]) && arePanelsFetched.value) {
             await initializeTools();
         }
     }

diff --git a/client/src/components/ToolsList/ToolsList.vue b/client/src/components/ToolsList/ToolsList.vue
@@ -60,15 +60,14 @@ const filterSettings = computed(() => {
     return newFilterSettings;
 });
 
-const itemsLoaded: Ref<Tool[]> = ref([]);
-
 onMounted(async () => {
     await toolStore.fetchTools(filterSettings.value);
-    itemsLoaded.value = Object.values(toolStore.getToolsById(filterSettings.value));
 });
 
 const filterCount = computed(() => Object.keys(filterSettings.value).length);
 
+const itemsLoaded = computed<Tool[]>(() => Object.values(toolStore.getToolsById(filterSettings.value)));
+
 function scrollToTop() {
     scrollContainer.value?.scrollTo({ top: 0, behavior: "smooth" });
 }

diff --git a/client/src/components/ToolsList/ToolsListTable.vue b/client/src/components/ToolsList/ToolsListTable.vue
@@ -97,7 +97,7 @@ export default {
             }
         },
         async fetchHelp(tool) {
-            await fetchData(`api/tools/${tool.id}/build`).then((response) => {
+            await fetchData(`api/tools/${encodeURIComponent(tool.id)}/build`).then((response) => {
                 const help = response.help;
                 Vue.set(tool, "_showDetails", false); // maybe not needed
                 if (help && help != "\n") {

diff --git a/lib/galaxy/webapps/galaxy/api/users.py b/lib/galaxy/webapps/galaxy/api/users.py
@@ -346,7 +346,7 @@ def set_beacon(
         return payload
 
     @router.delete(
-        "/api/users/{user_id}/favorites/{object_type}/{object_id}",
+        "/api/users/{user_id}/favorites/{object_type}/{object_id:path}",
         name="remove_favorite",
         summary="Remove the object from user's favorites",
     )