Skip to content

Commit

Permalink
NN-655 fix citation communities list not visible issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlisha-maharjan
anlisha-maharjan committed Jan 31, 2025
1 parent 9442eae commit 6e0ad14
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 82 deletions.
5 changes: 2 additions & 3 deletions frontend/src/components/citation/CitationCommunities.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,8 @@
class:
'!px-0 !py-1 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
},
}" :virtualScrollerOptions="{ itemSize: 28 }" scrollHeight="100%" listStyle="max-height:100%"
class="h-full flex flex-col !p-0 !bg-transparent !border-0" @update:modelValue="select_community" :tabindex="0"
emptyMessage="No communities available.">
}" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0"
@update:modelValue="select_community" :tabindex="0" emptyMessage="No communities available.">

<template #footer>
<header class="sticky top-0 bg-[var(--card-bg)] pt-3 items-center gap-2 z-[1] order-1">
Expand Down
160 changes: 81 additions & 79 deletions frontend/src/components/citation/CitationPane.vue
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,109 @@
<template>
<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"
<DraggableView v-if="active_node !== null" :initialPosition="initial_drag_position"
wrapperClass="!w-[25rem] border dark:border-slate-700 rounded-xl bg-[var(--card-bg)] shadow-curve-dark dark:shadow-curve-light"
contentClass="!max-h-[20rem] !px-4 !py-1.5" handlerClass="!py-1.5 !px-4 !flex !items-center">
<template #handler>
<h3 class="flex items-center gap-2 text-sm 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
<Button class="w-6 h-6" size="small" text rounded plain
v-tooltip.bottom="{ value: 'Add to summary', pt: { text: '!text-sm' } }"
@click="add_abstract(active_node.id)">
<span class="material-symbols-rounded"> note_add </span>
<span class="material-symbols-rounded !text-xl"> note_add </span>
</Button>
<Button class="w-8 h-8 group" icon="material-symbols-rounded" size="small" text plain rounded
<Button class="w-6 h-6 group" icon="material-symbols-rounded" size="small" text plain rounded
v-tooltip.bottom="{ value: 'Add to AxoBot', pt: { text: '!text-sm' } }" @click="call_chatbot('citation')">
<span class="material-symbols-rounded">forum</span>
<span class="material-symbols-rounded !text-xl">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 class="w-6 h-6" size="small" text rounded plain @click="close_pane()">
<span class="dark:text-white material-symbols-rounded !text-2xl"> close </span>
</Button>
</div>
</template>
<template #content>
<h5 class="mb-2 text-sm">
{{ active_node.attributes["Title"] }}
</h5>
<div class="flex justify-between gap-2 mb-2 bg-[var(--card-bg)] z-[2]">
<span class="flex flex-col items-center text-sm">
{{ active_node.attributes["Year"] }}
<strong class="text-sm font-normal text-primary-400">Year</strong>
</span>
<span class="flex flex-col items-center text-sm">
{{ active_node.attributes["Citation"] }}
<strong class="text-sm font-normal text-primary-400">Citations</strong>
</span>
<span class="flex flex-col items-center text-sm">
{{ active_node.attributes["Degree"] }}
<strong class="text-sm font-normal text-primary-400">Deg</strong>
</span>
<span class="flex flex-col items-center text-sm">
{{ Math.abs(Math.log10(active_node.attributes["PageRank"])).toFixed(2) }}
<strong class="text-sm font-normal text-primary-400">PR</strong>
</span>
</div>

<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>

<Divider />
<Divider class="!my-2" />

<Tabs :value="active_function" @update:value="onChangeTab">
<div class="h-[10rem] overflow-auto overflow-x-visible">
<TabPanels class="!p-0 !h-full">
<TabPanel value="abstract">
<p class="m-0 whitespace-pre-wrap">
{{ active_node.attributes["Abstract"] }}
</p>
</TabPanel>
<TabPanel value="summary" class="!h-full">
<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>
</div>
<Tabs :value="active_function" @update:value="onChangeTab">
<div class="h-[10rem] overflow-auto overflow-x-visible">
<TabPanels class="!p-0 !h-full">
<TabPanel value="abstract">
<p class="m-0 text-sm whitespace-pre-wrap">
{{ active_node.attributes["Abstract"] }}
</p>
</TabPanel>
<TabPanel value="summary" class="!h-full">
<div v-if="await_load" class="flex flex-col items-center justify-center h-full gap-3">
<h6 class="flex items-center gap-2 text-sm 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 text-sm whitespace-pre-wrap" v-if="!await_load">
{{ summary_dict[active_node.id] }}
</p>
</TabPanel>
</TabPanels>
</div>

<footer class="flex items-end !border-t !border-slate-600 pt-2">
<TabList class="" :pt="{
tabList: { class: '!border-0 !gap-4' },
activeBar: { class: '!hidden' }
}">
<Tab value="abstract" class="!p-0 !border-0 !flex !items-center !gap-2"><span
:class="`material-symbols-rounded !text-xl ${active_function == 'abstract' ? 'font-variation-ico-filled' : ''}`">summarize</span>Abstract
</Tab>
<Tab value="summary" class="!p-0 !border-0 !flex !items-center !gap-2"><span
:class="`material-symbols-rounded !text-xl ${active_function == 'summary' ? 'font-variation-ico-filled' : ''}`">description
</span>Summary
</Tab>
</TabList>
</footer>
</Tabs>
</Dialog>
<footer class="flex items-end !border-t !border-slate-600 pt-1.5">
<TabList class="" :pt="{
tabList: { class: '!border-0 !gap-4' },
activeBar: { class: '!hidden' }
}">
<Tab value="abstract" class="!p-0 !border-0 !flex !items-center !gap-2 !text-sm"><span
:class="`material-symbols-rounded !text-lg ${active_function == 'abstract' ? 'font-variation-ico-filled' : ''}`">summarize</span>Abstract
</Tab>
<Tab value="summary" class="!p-0 !border-0 !flex !items-center !gap-2 !text-sm"><span
:class="`material-symbols-rounded !text-lg ${active_function == 'summary' ? 'font-variation-ico-filled' : ''}`">description
</span>Summary
</Tab>
</TabList>
</footer>
</Tabs>
</template>
</DraggableView>
</template>

<script>
import { useToast } from "primevue/usetoast";
import DraggableView from "@/components/DraggableView.vue";
export default {
name: "CitationPane",
props: ["active_node", "active_subset"],
emits: ["active_node_changed", "active_subset_changed"],
components: {
DraggableView
},
data() {
return {
active_function: "abstract",
Expand All @@ -111,6 +112,7 @@ export default {
summary: "api/subgraph/summary",
},
await_load: false,
initial_drag_position: { top: 60, left: window.innerWidth - 410 },
};
},
watch: {
Expand Down

0 comments on commit 6e0ad14

Please sign in to comment.