Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add WorkflowBox to Activity bar Side Panel
- Loading branch information
1 parent
f4bf706
commit 4d95ba8
Showing
8 changed files
with
253 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
<script setup lang="ts"> | ||
import { getGalaxyInstance } from "@/app"; | ||
import { getAppRoot } from "@/onload"; | ||
import { useRouter } from "vue-router/composables"; | ||
import { ref, computed, onMounted, type ComputedRef } from "vue"; | ||
import { useWorkflowStore, type Workflow } from "@/stores/workflowStore"; | ||
import WorkflowSearch from "@/components/Workflow/WorkflowSearch.vue"; | ||
import FavoritesButton from "@/components/Panels/Buttons/FavoritesButton.vue"; | ||
import LoadingSpan from "@/components/LoadingSpan.vue"; | ||
const workflowStore = useWorkflowStore(); | ||
const router = useRouter(); | ||
const query = ref(""); | ||
const queryPending = ref(false); | ||
const showAdvanced = ref(false); | ||
const panelFilter: ComputedRef<any> = computed(() => { | ||
return { name: query.value }; | ||
}); | ||
// on Mount, load all Workflows | ||
onMounted(async () => { | ||
queryPending.value = true; | ||
await workflowStore.fetchWorkflows(panelFilter.value); | ||
queryPending.value = false; | ||
}); | ||
// computed | ||
const workflows = computed(() => { | ||
let results: Workflow[] = []; | ||
if (query.value === "#favorites") { | ||
const Galaxy = getGalaxyInstance(); | ||
results = Galaxy.config.stored_workflow_menu_entries; | ||
} else if (!queryTooShort.value) { | ||
results = workflowStore.getWorkflows(panelFilter.value); | ||
} | ||
return [ | ||
...results.map((wf) => { | ||
return { | ||
id: wf.id, | ||
name: wf.name, | ||
href: `${getAppRoot()}workflows/run?id=${wf.id}`, | ||
}; | ||
}), | ||
]; | ||
}); | ||
const queryTooShort: ComputedRef<boolean> = computed(() => query.value !== "" && query.value.length < 3); | ||
// functions | ||
async function onQuery(q: string) { | ||
query.value = !q ? "" : q; | ||
queryPending.value = true; | ||
if (!queryTooShort.value && q !== "#favorites") { | ||
await workflowStore.fetchWorkflows(panelFilter.value); | ||
} | ||
queryPending.value = false; | ||
} | ||
function onOpen(route: string) { | ||
router.push(route); | ||
} | ||
</script> | ||
|
||
<template> | ||
<div class="unified-panel" aria-labelledby="workflowbox-heading"> | ||
<div unselectable="on"> | ||
<div class="unified-panel-header-inner"> | ||
<nav class="d-flex justify-content-between mx-3 my-2"> | ||
<h2 v-if="!showAdvanced" id="workflowbox-heading" v-localize class="m-1 h-sm">Workflows</h2> | ||
<h2 v-else id="workflowbox-heading" v-localize class="m-1 h-sm">Advanced Workflow Search</h2> | ||
|
||
<div class="panel-header-buttons"> | ||
<b-button-group> | ||
<favorites-button v-if="!showAdvanced" :query="query" @onFavorites="onQuery" /> | ||
</b-button-group> | ||
</div> | ||
</nav> | ||
</div> | ||
</div> | ||
<div class="unified-panel-controls"> | ||
<WorkflowSearch enable-advanced :show-advanced.sync="showAdvanced" :query="query" @onQuery="onQuery" /> | ||
<section v-if="!showAdvanced"> | ||
<div v-if="queryPending" class="pb-2"> | ||
<b-badge class="alert-info w-100"><LoadingSpan message="Loading workflows" /></b-badge> | ||
</div> | ||
<div v-else-if="queryTooShort" class="pb-2"> | ||
<b-badge class="alert-danger w-100">Search string too short!</b-badge> | ||
</div> | ||
<div v-else-if="workflows.length == 0" class="pb-2"> | ||
<b-badge class="alert-danger w-100">No results found!</b-badge> | ||
</div> | ||
</section> | ||
</div> | ||
<div v-if="!showAdvanced" class="unified-panel-body"> | ||
<div class="toolMenuContainer"> | ||
<div id="internal-workflows" class="toolSectionBody"> | ||
<div class="toolSectionBg" /> | ||
<div v-for="wf in workflows" :key="wf.id" class="toolTitle"> | ||
<a class="title-link" href="javascript:void(0)" @click="onOpen(wf.href)">{{ wf.name }}</a> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
<template> | ||
<div> | ||
<small v-if="showAdvanced">Filter by name:</small> | ||
<DelayedInput | ||
:class="!showAdvanced && 'mb-3'" | ||
:query="query" | ||
:delay="100" | ||
:show-advanced="showAdvanced" | ||
:enable-advanced="enableAdvanced" | ||
:placeholder="showAdvanced ? 'any name' : placeholder" | ||
@change="checkQuery" | ||
@onToggle="onToggle" /> | ||
<div | ||
v-if="showAdvanced" | ||
description="advanced workflow filters" | ||
@keyup.enter="onSearch" | ||
@keyup.esc="onToggle(false)"> | ||
<small class="mt-1">Filter by tag:</small> | ||
<b-form-input v-model="filterSettings['tag']" size="sm" placeholder="any tag" /> | ||
<div class="mt-3"> | ||
<b-button class="mr-1" size="sm" variant="primary" @click="onSearch"> | ||
<icon icon="search" /> | ||
<span>{{ "Search" | localize }}</span> | ||
</b-button> | ||
<b-button size="sm" @click="onToggle(false)"> | ||
<icon icon="redo" /> | ||
<span>{{ "Cancel" | localize }}</span> | ||
</b-button> | ||
</div> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
import DelayedInput from "components/Common/DelayedInput"; | ||
import _l from "utils/localization"; | ||
import { createWorkflowQuery } from "components/Panels/utilities"; | ||
export default { | ||
name: "WorkflowSearch", | ||
components: { | ||
DelayedInput, | ||
}, | ||
props: { | ||
enableAdvanced: { | ||
type: Boolean, | ||
default: false, | ||
}, | ||
placeholder: { | ||
type: String, | ||
default: _l("search workflows"), | ||
}, | ||
query: { | ||
type: String, | ||
default: null, | ||
}, | ||
showAdvanced: { | ||
type: Boolean, | ||
default: false, | ||
}, | ||
}, | ||
data() { | ||
return { | ||
favorites: ["#favs", "#favorites", "#favourites"], | ||
filterSettings: {}, | ||
}; | ||
}, | ||
methods: { | ||
checkQuery(q) { | ||
this.filterSettings["name"] = q; | ||
if (this.favorites.includes(q)) { | ||
this.$emit("onQuery", "#favorites"); | ||
} else { | ||
this.$emit("onQuery", q); | ||
} | ||
}, | ||
onToggle(toggleAdvanced) { | ||
this.$emit("update:show-advanced", toggleAdvanced); | ||
}, | ||
onSearch() { | ||
const query = { query: createWorkflowQuery(this.filterSettings) }; | ||
this.$router.push({ path: "/workflows/list", query: query }); | ||
}, | ||
}, | ||
}; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters