Skip to content

Commit

Permalink
NN-624 complete citation tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlisha-maharjan
anlisha-maharjan committed Dec 6, 2024
1 parent 5d44f1a commit 9e83f2a
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 26 deletions.
79 changes: 74 additions & 5 deletions frontend/src/components/citation/CitationGraph.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,56 @@
<template>
<div class="loading-section">
<EmptyState v-if="citation_graphs.size == 0" message="There is no generated citation graph.">
</EmptyState>

<section v-if="citation_graphs.size != 0" class="grid grid-cols-2 gap-2.5 pt-3">
<Card v-for="(entry, index) in filt_graphs" :class="`group relative overflow-hidden border ${active_citation_id === entry.id
? 'border-primary-600 !bg-primary-600/25'
: 'dark:!bg-slate-300/25 border-transparent'
}`" :key="index" :pt="{
header: { class: 'h-26 relative rounded-md mt-[6px] mx-[6px] overflow-hidden' },
body: { class: '!p-0 !gap-0' },
footer: { class: 'flex gap-2 px-2 pb-2' },
title: { class: 'relative' },
}">
<template #header>
<SnapshotCitation :propValue="entry" :index="entry.id" />

<div
class="w-full h-full flex justify-between absolute top-0 left-0 p-1.5 bg-slate-800/50 opacity-0 duration-300 group-hover:opacity-100 z-[1]">
<Button class="w-7 h-7" severity="secondary" rounded size="small" plain @click.stop="add_graph(entry)">
<span :class="`material-symbols-rounded ${favourite_graphs.has(entry.id)
? 'text-base font-variation-ico-filled text-yellow-500 hover:text-yellow-400'
: 'text-xl hover:text-yellow-600'
}`">
star
</span>
</Button>

<Button class="w-7 h-7" severity="danger" rounded size="small" plain @click.stop="remove_graph(entry)">
<span class="text-xl text-white material-symbols-rounded"> close </span>
</Button>
</div>
</template>

<template #title>
<h6 :class="`w-full h-full flex items-center gap-2 absolute top-0 left-0 py-2 px-2 text-sm font-medium cursor-text z-[1]
${focus_citation_id === entry.id ? '!hidden' : ''}`" v-on:click="setFocus(entry.id, index)">
{{ entry.label }} <span class="text-lg material-symbols-rounded dark:text-slate-200"> edit </span>
</h6>
<input ref="citationInputs" type="text" v-model="entry.label"
:class="`bg-transparent py-2 px-2 text-sm font-medium ${focus_citation_id === entry.id ? '' : 'opacity-0'}`"
@click.stop @blur="clearFocus" />
</template>

<template #footer>
<Button class="flex-1 h-8" severity="secondary" size="small" plain @click="switch_graph(entry)">
View <span class="text-xl material-symbols-rounded"> arrow_circle_right </span>
</Button>
</template>
</Card>
</section>

<!-- <div class="loading-section">
<div class="loading-text" v-if="citation_graphs.size == 0">
<span>There is no generated citation graph.</span>
</div>
Expand Down Expand Up @@ -38,25 +89,43 @@
</div>
</div>
</div>
</div>
</div> -->
</template>

<script>
import SnapshotCitation from "@/components/citation/SnapshotCitation.vue";
import EmptyState from "@/components/verticalpane/EmptyState.vue";
import { nextTick } from "vue";
export default {
name: "CitationGraphs",
props: ["citation_graphs", "favourite_graphs", "bookmark_off", "mode"],
emits: ["favourite_graph_changed"],
components: {
SnapshotCitation,
EmptyState
},
data() {
return {
activeGraphIndex: -1,
// activeGraphIndex: -1,
focus_citation_id: null,
active_citation_id: null
};
},
methods: {
setFocus(id, index) {
this.focus_citation_id = id;
nextTick(() => {
// Focus the input if focus_citation_id matches the current id
const input = this.$refs.citationInputs[index];
if (input) {
input.focus();
}
});
},
clearFocus() {
this.focus_citation_id = null;
},
switch_graph(entry) {
this.$store.commit("assign_citation_graph", {
id: entry.id,
Expand Down Expand Up @@ -105,7 +174,7 @@ export default {
};
</script>

<style>
<!-- <style>
.graph-citation-name {
position: fixed;
display: flex;
Expand All @@ -125,4 +194,4 @@ export default {
font-family: "ABeeZee", sans-serif;
border: none;
}
</style>
</style> -->
27 changes: 23 additions & 4 deletions frontend/src/components/citation/CitationMenu.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
<template>
<div id="citation-tools" class="pathways">
<ListActionHeader :title="`List of citation graph`">
<Button severity="secondary" rounded size="small" plain v-on:click="bookmark_off = !bookmark_off" class="w-8 h-8"
v-tooltip.bottom="bookmark_off ? 'Show only favorites' : 'Show all'">
<span :class="`material-symbols-rounded text-2xl
${bookmark_off ? '' : 'font-variation-ico-filled text-yellow-500 hover:text-yellow-400'}`">
star
</span>
</Button>

<Button severity="secondary" label="Generate citation" icon="pi pi-plus" size="small" :loading="loading_state"
v-on:click="get_citation_graph(context_raw)" />
</ListActionHeader>

<CitationGraph :citation_graphs="citation_graphs" :favourite_graphs="favourite_graphs" :bookmark_off="bookmark_off"
@loading_state_changed="loading_state = $event" @favourite_graphs_changed="favourite_graphs = $event">
</CitationGraph>

<!-- <div id="citation-tools" class="pathways">
<div class="pathwaybar">
<div id="citation-graphs">
<div class="tool-section-graph">
Expand All @@ -23,17 +40,19 @@
</div>
</div>
</div>
</div>
</div> -->
</template>

<script>
import CitationGraph from "@/components/citation/CitationGraph.vue";
import ListActionHeader from "@/components/verticalpane/ListActionHeader.vue";
export default {
name: "CitationMenu",
props: ["active_node", "active_background"],
components: {
CitationGraph,
ListActionHeader
},
data() {
return {
Expand Down Expand Up @@ -144,7 +163,7 @@ export default {
};
</script>

<style>
<!-- <style>
#citation-graphs {
width: 100%;
height: 100%;
Expand Down Expand Up @@ -251,4 +270,4 @@ export default {
right: 1vw;
animation: button-loading-spinner 1s ease infinite;
}
</style>
</style> -->
6 changes: 3 additions & 3 deletions frontend/src/components/citation/SnapshotCitation.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<img :id="'citation-visual-' + index" />
<img class="object-cover w-full h-full" :id="'citation-visual-' + index" />
</template>

<script>
Expand Down Expand Up @@ -77,12 +77,12 @@ export default {
};
</script>

<style>
<!-- <style>
[id^="citation-visual-"] {
height: 100%;
width: 100%;
overflow: scroll;
object-fit: scale-down;
border: solid 0.05vw rgba(255, 255, 255, 0.3);
}
</style>
</style> -->
24 changes: 13 additions & 11 deletions frontend/src/components/enrichment/PathwaySet.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,12 @@
</template>

<div class="grid grid-cols-5 gap-3">
<span class="text-sm text-center capitalize" v-for="element in entry.stats" :key="element">{{ element }}</span>
<span class="text-sm text-center capitalize" v-for="element in entry.stats" :key="element">
{{ element?.split(":")?.[0] }} <br />
{{ element?.split(":")?.[1] }}
</span>
</div>


<Button v-if="!entry.stats" severity="contrast" label="Apply enrichment" icon="pi pi-plus" size="small" raised fluid
:loading="loading_state" @click="apply_enrichment(entry)" />
</Panel>
Expand All @@ -85,14 +87,14 @@
</EmptyState>

<Popover ref="op" class="w-[14rem]" :pt="{ content: { class: '!flex !flex-col' } }">
<Button text plain severity="secondary" type="button" label="From active subset"
class="!justify-start !py-1" @click="save_subset();toggle();"/>
<Button text plain severity="secondary" type="button" label="By searching in genes"
class="!justify-start !py-1" @click="active_protein();toggle();"/>
<Button text plain severity="secondary" type="button" label="By searching in keywords"
class="!justify-start !py-1" @click="active_keyword_protein();toggle();"/>
<Button text plain severity="secondary" type="button" label="By parameter filtering"
class="!justify-start !py-1" @click="active_selection();toggle();"/>
<Button text plain severity="secondary" type="button" label="From active subset" class="!justify-start !py-1"
@click="save_subset(); toggle();" />
<Button text plain severity="secondary" type="button" label="By searching in genes" class="!justify-start !py-1"
@click="active_protein(); toggle();" />
<Button text plain severity="secondary" type="button" label="By searching in keywords" class="!justify-start !py-1"
@click="active_keyword_protein(); toggle();" />
<Button text plain severity="secondary" type="button" label="By parameter filtering" class="!justify-start !py-1"
@click="active_selection(); toggle();" />
</Popover>

<!-- <div id="pathways-set">
Expand Down Expand Up @@ -207,7 +209,7 @@ export default {
ListActionHeader,
EmptyState
},
emits: ["term_set_changed","selection_active_changed","protein_active_changed","keyword_active_changed"],
emits: ["term_set_changed", "selection_active_changed", "protein_active_changed", "keyword_active_changed"],
data() {
return {
sort_alph: "",
Expand Down
2 changes: 0 additions & 2 deletions frontend/src/components/enrichment/graph/PathwayGraph.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,6 @@
</template>
</Card>
</section>


</template>

<script>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/toolbar/modules/KeywordList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<InputGroup>
<InputText v-model="search_raw" placeholder="Search by keywords..." />
<InputGroupAddon class="!p-0">
<Button icon="material-symbols-rounded" text plain v-tooltip.bottom="'Search subset'"
<Button icon="material-symbols-rounded" text plain v-tooltip.bottom="'Select all keywords'"
@click="search_subset(filt_keyword)">
<span class="material-symbols-rounded">arrow_forward_ios</span>
</Button>
Expand Down

0 comments on commit 9e83f2a

Please sign in to comment.