Skip to content

Commit

Permalink
NN-637 complete citation pane dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlisha-maharjan
anlisha-maharjan committed Dec 23, 2024
1 parent ef35938 commit 9d85bc7
Showing 1 changed file with 100 additions and 264 deletions.
364 changes: 100 additions & 264 deletions frontend/src/components/citation/CitationPane.vue
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,88 @@
<template>
<div id="citation_pane" v-if="active_node !== null">
<div id="citation-pane">
<div class="pane_header">
<a
id="abstract-id"
href=""
v-on:click="google_search(active_node.id)"
target="_blank"
>PMID: {{ active_node.id }}</a
>
<img
class="pane_close"
src="@/assets/toolbar/cross.png"
v-on:click="close_pane()"
/>
<img
class="abstract_add"
src="@/assets/pathwaybar/plus.png"
v-on:click="add_abstract(active_node.id)"
/>
</div>
<div class="pane-window">
<div class="text">
<div class="gene_attribute">
<div class="abstracts_attr">
{{ active_node.attributes["Title"] }}
</div>
</div>
<div class="tool-section-active citborder">
<div id="informations" class="subsection">
<div class="subsection-header abstract-header">
<span> year:{{ active_node.attributes["Year"] }}</span>
<span> citations:{{ active_node.attributes["Citation"] }}</span>
<span> deg:{{ active_node.attributes["Degree"] }};</span>
<span>
pr:{{
Math.abs(
Math.log10(active_node.attributes["PageRank"])
).toFixed(2)
}}</span
>
</div>
<div class="subsection-main abstract">
<div id="chatbot">
<div class="text" v-if="active_function == 'abstract'">
{{ active_node.attributes["Abstract"] }}
</div>
<div v-if="await_load == true" class="loading_pane"></div>
<div
class="text"
v-if="active_function == 'summary' && await_load == false"
>
{{ summary_dict[active_node.id] }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="nodeattributes">
<img
class="icons"
src="@/assets/toolbar/menu-burger.png"
v-on:click="active_function = 'abstract'"
/>
<img
class="icons"
src="@/assets/toolbar/settings-sliders.png"
v-on:click="change_section('summary', active_node)"
/>
<img
class="icons"
src="@/assets/toolbar/bote.png"
v-on:click="call_chatbot('citation')"
/>
<Dialog :visible="!!active_node" position="topright" :minY="60" :minX="60" :pt="{
root: { class: 'w-[25rem] !mt-[60px] !ml-[60px]' },
header: { class: '!py-2.5' },
title: { class: '!text-base' },
content: { class: '!max-h-[24rem]' },
}" :closable="false" @hide="close_pane()">
<template #header>
<h3 class="flex items-center gap-2 cursor-pointer hover:text-primary-500"
v-on:click="google_search(active_node.id)">
PMID: {{ active_node.id }}
<span class="text-sm material-symbols-rounded"> open_in_new </span>
</h3>

<div class="flex items-center gap-1 ml-auto">
<Button class="w-8 h-8" size="small" text rounded plain v-tooltip.bottom="'Add to summary'"
@click="add_abstract(active_node.id)">
<span class="material-symbols-rounded"> add </span>
</Button>
<Button class="w-8 h-8 group" icon="material-symbols-rounded" size="small" text plain rounded
v-tooltip.bottom="'Add to AxoBot'" @click="call_chatbot('citation')">
<span class="material-symbols-rounded">forum</span>
</Button>
<Button class="w-8 h-8" size="small" text rounded plain @click="close_pane()">
<span class="dark:text-white material-symbols-rounded"> close </span>
</Button>
</div>
</template>

<h5 class="mb-4">
{{ active_node.attributes["Title"] }}
</h5>

<div class="flex justify-between gap-2 mb-3 bg-[var(--card-bg)] z-[2]">
<span class="flex flex-col items-center">
{{ active_node.attributes["Year"] }}
<strong class="text-sm font-normal text-primary-400">Year</strong>
</span>
<span class="flex flex-col items-center">
{{ active_node.attributes["Citation"] }}
<strong class="text-sm font-normal text-primary-400">Citations</strong>
</span>
<span class="flex flex-col items-center">
{{ active_node.attributes["Degree"] }}
<strong class="text-sm font-normal text-primary-400">Deg</strong>
</span>
<span class="flex flex-col items-center">
{{ Math.abs(Math.log10(active_node.attributes["PageRank"])).toFixed(2) }}
<strong class="text-sm font-normal text-primary-400">PR</strong>
</span>
</div>
</div>

<Divider />

<Tabs :value="active_function" @update:value="onChangeTab">
<TabList class="sticky top-0">
<Tab value="abstract" class="!pt-0 !pb-2">Abstract</Tab>
<Tab value="summary" class="!pt-0 !pb-2">Summary</Tab>
</TabList>

<TabPanels class="!px-0 !pb-0">
<TabPanel value="abstract">
<p class="m-0 whitespace-pre-wrap">
{{ active_node.attributes["Abstract"] }}
</p>
</TabPanel>

<TabPanel value="summary">
<div v-if="await_load" class="flex flex-col items-center justify-center h-full gap-3">
<h6 class="flex items-center gap-2 dark:text-slate-300">Fetching summary
<span class="relative flex">
<span
class="absolute inline-flex w-full h-full rounded-full opacity-75 animate-ping bg-primary-500"></span>
<span
class="material-symbols-rounded text-primary-500 animate animate-[spin_1s_ease-in-out_infinite]">scatter_plot</span>
</span>
</h6>
</div>
<p class="m-0 whitespace-pre-wrap" v-if="!await_load">
{{ summary_dict[active_node.id] }}
</p>
</TabPanel>
</TabPanels>
</Tabs>
</Dialog>
</template>

<script>
Expand Down Expand Up @@ -105,9 +110,7 @@ export default {
},
methods: {
google_search(id) {
document
.getElementById("abstract-id")
.setAttribute("href", "http://www.ncbi.nlm.nih.gov/pubmed/" + id);
window.open(`http://www.ncbi.nlm.nih.gov/pubmed/${id}`, "_blank");
},
add_abstract(id) {
this.emitter.emit("addNodeToSummary", id);
Expand All @@ -116,24 +119,25 @@ export default {
this.$emit("active_node_changed", null);
this.$emit("active_subset_changed", null);
},
change_section(tab, node) {
onChangeTab(tab) {
var com = this;
com.active_function = tab;
var finalList = [];
var nodeDict = {};
if (!com.summary_dict[node.id]) {
com.await_load = true;
var formData = new FormData();
nodeDict[node.id] = node;
finalList.push(nodeDict);
formData.append("abstracts", JSON.stringify(finalList));
//POST request for generating pathways
com.axios.post(com.api.summary, formData).then((response) => {
com.summary_dict[node.id] = response.data;
com.await_load = false;
});
if (tab == 'summary' && this.active_node) {
var finalList = [];
var nodeDict = {};
if (!com.summary_dict[this.active_node.id]) {
com.await_load = true;
var formData = new FormData();
nodeDict[this.active_node.id] = this.active_node;
finalList.push(nodeDict);
formData.append("abstracts", JSON.stringify(finalList));
//POST request for generating pathways
com.axios.post(com.api.summary, formData).then((response) => {
com.summary_dict[this.active_node.id] = response.data;
com.await_load = false;
});
}
}
},
call_chatbot(mode) {
Expand All @@ -147,171 +151,3 @@ export default {
},
};
</script>

<style>
.abstract {
background: #0a0a1a;
}
.abstract_add {
right: 9%;
width: 0.5vw;
height: 0.5vw;
position: absolute;
}
#citation-pane {
position: absolute;
right: 1vw;
top: 1vw;
width: 24vw;
display: block;
background: #d9d9d9;
align-items: center;
z-index: 99;
}
.text {
height: 100%;
}
.gene_attribute {
display: flex;
font-family: "ABeeZee", sans-serif;
align-items: center;
justify-content: center;
background: #d9d9d9;
color: #0a0a1a;
padding: 0 0.5vw 0 0.5vw;
}
.tool-section {
height: 0vw;
}
.tool-section-active {
height: 10vw;
}
#colorbar {
position: relative;
display: flex;
border-radius: 100%;
width: 0.5vw;
height: 0.5vw;
}
.gene {
margin-left: 0.3vw;
font-size: 0.9vw;
}
.abstracts_attr {
font-size: 0.7vw;
margin-left: 0.3vw;
font-weight: bold;
}
.nodeattributes {
position: absolute;
display: flex;
width: 100%;
height: 2vw;
align-items: center;
justify-content: center;
}
.nodeattributes .icons {
width: 0.8vw;
height: 0.8vw;
margin: 0 0.5vw 0 0.5vw;
}
.nodeattributes .subsection {
margin-bottom: 4%;
position: relative;
width: 90%;
}
#citation-pane .subsection .subsection-header {
position: absolute;
width: 98%;
display: flex;
justify-content: left;
align-items: center;
font-family: "ABeeZee", sans-serif;
font-size: 0.7vw;
padding: 0.2vw 0 0 0.5vw;
color: rgba(255, 255, 255, 0.5);
z-index: 999;
background-color: #0a0a1a;
}
.subsection .abstract-header span {
padding: 0.5vw;
}
#citation-pane .pane_header a {
height: 100%;
display: flex;
font-size: 0.9vw;
font-family: "ABeeZee", sans-serif;
align-items: center;
text-decoration: none;
}
.subsection .subsection-header img {
position: absolute;
width: 50%;
right: -15%;
display: -webkit-flex;
padding: 1%;
padding: 5% 23% 5% 23%;
filter: invert(100%);
}
.subsection .subsection-main {
height: 100%;
width: 100%;
padding-top: 1vw;
}
#citation-pane .pane_header {
color: #0a0a1a;
height: 1.5vw;
width: 100%;
padding: 0.6vw;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 0.05vw solid #0a0a1a;
}
#citation-pane .pane_header span {
height: 100%;
display: flex;
font-size: 0.9vw;
font-family: "ABeeZee", sans-serif;
align-items: center;
}
#citation-pane .pane_close {
right: 3%;
width: 0.5vw;
height: 0.5vw;
position: absolute;
}
.citborder {
border: #d9d9d9;
border-width: 0.2px;
border-style: solid;
}
#citation-pane #chatbot {
padding: 1vw 1.3vw 1vw 1.3vw;
}
#citation-pane .nodeattributes {
position: relative;
height: 1.5vw;
}
#citation-pane .pane-window {
height: unset;
position: relative;
}
</style>

0 comments on commit 9d85bc7

Please sign in to comment.