Skip to content

Commit

Permalink
NN-643 complete pathway layer pane in protein view
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlisha-maharjan
anlisha-maharjan committed Jan 6, 2025
1 parent 3cfe38e commit 74aa3a9
Show file tree
Hide file tree
Showing 4 changed files with 217 additions and 98 deletions.
73 changes: 32 additions & 41 deletions frontend/src/components/pane/PaneSystem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,39 @@
<template>
<div v-show="active_node !== null ||
<Dialog :visible="active_node !== null ||
active_subset !== null ||
active_term !== null ||
active_decoloumn !== null ||
active_termlayers !== null ||
paneHidden == false
">
<Dialog :visible="active_node !== null ||
active_subset !== null ||
active_term !== null ||
active_decoloumn !== null ||
active_termlayers !== null ||
paneHidden == false" @hide="close_pane()" position="bottomright" :closable="false" :minY="60" :minX="60" :pt="{
root: { class: 'w-[18rem] !mt-[60px] !ml-[60px]' },
header: { class: '!px-2.5 !py-1.5 cursor-move' },
content: { class: '!px-2.5 !py-0' },
}">
<template #header>
<h3 class="text-sm font-bold">
{{ active_tab }}
</h3>
<Button class="w-5 h-5 ml-auto" size="small" text rounded plain @click="close_pane()">
<span class="dark:text-white !text-lg material-symbols-rounded"> close </span>
</Button>
</template>
<NodePane v-show="active_tab === 'Protein'" :mode="mode" :tool_active="tool_active"
@tool_active_changed="tool_active = $event" :active_node="active_node" :node_color_index="node_color_index"
:gephi_data="gephi_data" @active_item_changed="active_item = $event"></NodePane>
<SubsetPane v-show="active_tab === 'Subset'" :mode="mode" :tool_active="tool_active"
@tool_active_changed="tool_active = $event" :active_subset="active_subset" :gephi_data="gephi_data"
@active_item_changed="active_item = $event" @highlight_subset_changed="highlight_subset = $event"
@active_layer_changed="active_layer = $event"></SubsetPane>
<TermPane v-show="active_tab === 'Pathway'" :mode="mode" :tool_active="tool_active"
@tool_active_changed="tool_active = $event" :active_term="active_term" :gephi_data="gephi_data"
@active_item_changed="active_item = $event" @highlight_subset_changed="highlight_subset = $event"></TermPane>
<DEValuePane v-show="active_tab === 'Differential expression'" :mode="mode" :tool_active="tool_active"
@tool_active_changed="tool_active = $event" :active_decoloumn="active_decoloumn" :gephi_data="gephi_data"
@active_item_changed="active_item = $event"></DEValuePane>
<EnrichmentLayerPane v-show="active_tab === 'Pathway layers'" :mode="mode" :tool_active="tool_active"
@tool_active_changed="tool_active = $event" :active_termlayers="active_termlayers" :gephi_data="gephi_data"
@active_item_changed="active_item = $event"></EnrichmentLayerPane>
</Dialog>
</div>
paneHidden == false" @hide="close_pane()" position="bottom" :closable="false" :minY="60" :minX="60" :pt="{
root: { class: 'w-[18rem] !mt-[60px] !ml-[60px]' },
header: { class: '!px-2.5 !py-1.5 cursor-move' },
content: { class: '!px-2.5 !py-0' },
}">
<template #header>
<h3 class="text-sm font-bold">
{{ active_tab }}
</h3>
<Button class="w-5 h-5 ml-auto" size="small" text rounded plain @click="close_pane()">
<span class="dark:text-white !text-lg material-symbols-rounded"> close </span>
</Button>
</template>
<NodePane v-show="active_tab === 'Protein'" :mode="mode" :tool_active="tool_active"
@tool_active_changed="tool_active = $event" :active_node="active_node" :node_color_index="node_color_index"
:gephi_data="gephi_data" @active_item_changed="active_item = $event"></NodePane>
<SubsetPane v-show="active_tab === 'Subset'" :mode="mode" :tool_active="tool_active"
@tool_active_changed="tool_active = $event" :active_subset="active_subset" :gephi_data="gephi_data"
@active_item_changed="active_item = $event" @highlight_subset_changed="highlight_subset = $event"
@active_layer_changed="active_layer = $event"></SubsetPane>
<TermPane v-show="active_tab === 'Pathway'" :mode="mode" :tool_active="tool_active"
@tool_active_changed="tool_active = $event" :active_term="active_term" :gephi_data="gephi_data"
@active_item_changed="active_item = $event" @highlight_subset_changed="highlight_subset = $event"></TermPane>
<DEValuePane v-show="active_tab === 'Differential expression'" :mode="mode" :tool_active="tool_active"
@tool_active_changed="tool_active = $event" :active_decoloumn="active_decoloumn" :gephi_data="gephi_data"
@active_item_changed="active_item = $event"></DEValuePane>
<EnrichmentLayerPane v-show="active_tab === 'Pathway layers'" :mode="mode" :tool_active="tool_active"
@tool_active_changed="tool_active = $event" :active_termlayers="active_termlayers" :gephi_data="gephi_data"
@active_item_changed="active_item = $event"></EnrichmentLayerPane>
</Dialog>

<!-- <div
v-show="
Expand Down Expand Up @@ -170,7 +162,6 @@ export default {
this.$emit("active_background_changed", val);
if (this.active_tab != Object.keys(val)[0]) this.tool_active = false;
this.active_tab = Object.keys(val)[0];
console.log('active pane',this.active_tab);
if (val == null) {
delete this.active_dict.val;
return;
Expand Down Expand Up @@ -213,7 +204,7 @@ export default {
},
close_pane() {
this.active_dict = {};
this.$emit("active_node_changed", null);
this.$emit("active_term_changed", null);
this.$emit("active_subset_changed", null);
Expand Down
45 changes: 41 additions & 4 deletions frontend/src/components/pane/modules/layer/EnrichmentConnections.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,42 @@
<template>
<div id="pathway-layer-connect" class="connect">
<Listbox v-if="intersectingDicts?.length" optionLabel="" :options="intersectingDicts" :pt="{
listContainer: { class: 'order-2' },
list: { class: '!p-0' },
emptyMessage: { class: '!flex !justify-center !items-center !text-sm !text-slate-500 dark:!text-slate-300' },
option: {
class:
'!px-0 !py-1 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
},
}" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0" :tabindex="0"
emptyMessage="No nodes available.">

<template #footer>
<header class="sticky -top-2 bg-[var(--card-bg)] items-center gap-2 z-[1] order-1">
<!-- sorting -->
<div
class="grid grid-cols-2 py-1 bg-[var(--card-bg)] shadow-[0_10px_30px_-18px_#34343D] dark:shadow-[0_10px_30px_-18px_#ffffff] z-[1]">

<a class="text-sm">
Pathway
</a>

<a class="text-sm">
Pathway
</a>
</div>
</header>
</template>
<!-- options -->
<template #option="slotProps">
<div :class="`grid items-center w-full grid-cols-2 gap-2`">
<span class="text-xs">{{ slotProps.option?.[0]?.name }}</span>

<span class="text-xs">{{ slotProps.option?.[1]?.name }}</span>
</div>
</template>
</Listbox>

<!-- <div id="pathway-layer-connect" class="connect">
<div class="sorting">
<a class="enrichment_filter">pathway</a>
<a class="cluster_filter">pathway</a>
Expand All @@ -21,7 +58,7 @@
</tbody>
</table>
</div>
</div>
</div> -->
</template>

<script>
Expand Down Expand Up @@ -80,7 +117,7 @@ export default {
};
</script>

<style>
<!-- <style>
#pathway-layer-connect {
width: 100%;
height: 100%;
Expand Down Expand Up @@ -122,4 +159,4 @@ export default {
overflow: hidden; /* Hide overflow content */
text-overflow: ellipsis;
}
</style>
</style> -->
111 changes: 64 additions & 47 deletions frontend/src/components/pane/modules/layer/EnrichmentLayerPane.vue
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,91 @@
<template>
<div id="layerpane" class="text" v-show="active_termlayers !== null">
<div v-show="active_termlayers !== null">
<header v-if="active_termlayers !== null" class="flex flex-wrap items-center gap-2">
<span class="flex items-center gap-1 text-sm font-medium">
<strong class="font-normal dark:text-slate-300">pathways:</strong>
{{ active_termlayers.main.size }}
</span>
</header>

<Tabs :value="active_section" @update:value="change_section">
<div
:class="`${active_section ? '!pt-2 !border-t !border-slate-700 !mt-2' : ''} px-2.5 -mx-2.5 max-h-[10rem] overflow-auto overflow-x-visible`">
<TabPanels class="!p-0">
<TabPanel value="statistics">
<div class="flex items-center justify-between mb-3">
<h3 class="text-sm font-medium">
Contained proteins
</h3>
<Button class="w-5 h-5" size="small" text plain rounded @click="copyclipboard()">
<span class="dark:text-white material-symbols-rounded !text-lg"> content_copy </span>
</Button>
</div>
<LayerProteins :active_termlayers="active_termlayers" :gephi_data="gephi_data"></LayerProteins>
</TabPanel>
<TabPanel value="connections">
<h3 class="mb-3 text-sm font-medium">
Connections
</h3>
<EnrichmentConnections :active_termlayers="active_termlayers"></EnrichmentConnections>
</TabPanel>
</TabPanels>
</div>

<footer class="flex items-end !mt-2 !border-t !border-slate-600 py-2">
<TabList class="" :pt="{
tabList: { class: '!border-0 !gap-4' },
activeBar: { class: '!hidden' }
}">
<Tab value="statistics" class="!p-0 !border-0"><span
:class="`material-symbols-rounded !text-lg ${active_section == 'statistics' ? 'font-variation-ico-filled' : ''}`">tune</span>
</Tab>
<Tab value="connections" class="!p-0 !border-0"><span
:class="`material-symbols-rounded !text-base ${active_section == 'connections' ? 'font-variation-ico-filled' : ''}`">hub</span>
</Tab>
</TabList>
</footer>
</Tabs>
</div>

<!-- <div id="layerpane" class="text" v-show="active_termlayers !== null">
<div class="gene_attribute" v-if="active_termlayers !== null">
<div class="gene_attr">pathways: {{ active_termlayers.main.size }};</div>
</div>
<div
:class="{
'tool-section': !tool_active,
'tool-section-active': tool_active,
}"
>
<div
id="informations"
class="subsection"
v-show="tool_active && active_section == 'information'"
>
<div :class="{
'tool-section': !tool_active,
'tool-section-active': tool_active,
}">
<div id="informations" class="subsection" v-show="tool_active && active_section == 'information'">
<div class="subsection-header">
<span>informations</span>
</div>
<div class="subsection-main colortype"></div>
</div>
<div
id="network"
class="subsection"
v-show="tool_active && active_section == 'statistics'"
>
<div id="network" class="subsection" v-show="tool_active && active_section == 'statistics'">
<div class="subsection-header">
<span>contained proteins</span>
<img src="@/assets/pane/copy.png" v-on:click="copyclipboard()" />
</div>
<div class="subsection-main colortype">
<LayerProteins
:active_termlayers="active_termlayers"
:gephi_data="gephi_data"
></LayerProteins>
<LayerProteins :active_termlayers="active_termlayers" :gephi_data="gephi_data"></LayerProteins>
</div>
</div>
<div
id="connections"
class="subsection"
v-show="tool_active && active_section == 'connections'"
>
<div id="connections" class="subsection" v-show="tool_active && active_section == 'connections'">
<div class="subsection-header">
<span>connections</span>
</div>
<div class="subsection-main colortype">
<EnrichmentConnections
:active_termlayers="active_termlayers"
></EnrichmentConnections>
<EnrichmentConnections :active_termlayers="active_termlayers"></EnrichmentConnections>
</div>
</div>
</div>
<div class="nodeattributes">
<img
class="icons"
src="@/assets/toolbar/menu-burger.png"
v-on:click="change_section('information')"
/>
<img
class="icons"
src="@/assets/toolbar/settings-sliders.png"
v-on:click="change_section('statistics')"
/>
<img
class="icons"
src="@/assets/toolbar/proteinselect.png"
v-on:click="change_section('connections')"
/>
<img class="icons" src="@/assets/toolbar/menu-burger.png" v-on:click="change_section('information')" />
<img class="icons" src="@/assets/toolbar/settings-sliders.png" v-on:click="change_section('statistics')" />
<img class="icons" src="@/assets/toolbar/proteinselect.png" v-on:click="change_section('connections')" />
</div>
</div>
</div> -->
</template>

<script>
Expand Down Expand Up @@ -138,7 +155,7 @@ export default {
};
</script>

<style>
<!-- <style>
#layer-connections {
height: 30%;
}
Expand All @@ -150,4 +167,4 @@ export default {
#pathway-connections {
height: 28%;
}
</style>
</style> -->
Loading

0 comments on commit 74aa3a9

Please sign in to comment.