Skip to content

Commit

Permalink
NN-647 modify pane components for term and citation view
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlisha-maharjan
anlisha-maharjan committed Jan 17, 2025
1 parent 3a4fc60 commit 045a9fe
Show file tree
Hide file tree
Showing 12 changed files with 68 additions and 1,155 deletions.
72 changes: 2 additions & 70 deletions frontend/src/components/pane/modules/layer/EnrichmentConnections.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
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"
}" :virtualScrollerOptions="{ itemSize: 28 }" scrollHeight="4.5rem" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0" :tabindex="0"
emptyMessage="No nodes available.">

<template #footer>
Expand Down Expand Up @@ -35,30 +35,6 @@
</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>
</div>
<div class="network-results" tabindex="0" @keydown="handleKeyDown">
<table>
<tbody>
<tr v-for="entry in intersectingDicts" :key="entry" class="option">
<td>
<div class="statistics-attr">
<a href="#">{{ entry[0].name }}</a>
</div>
</td>
<td>
<a class="statistics-val">{{ entry[1].name }}</a>
</td>
</tr>
</tbody>
</table>
</div>
</div> -->
</template>

<script>
Expand Down Expand Up @@ -115,48 +91,4 @@ export default {
},
},
};
</script>

<!-- <style>
#pathway-layer-connect {
width: 100%;
height: 100%;
font-family: "ABeeZee", sans-serif;
padding: 1.3vw 1.3vw 1vw 1.3vw;
}

#pathway-layer-connect .pane_values {
position: absolute;
left: 50.5%;
}
#pathway-layer-connect .statistics-val {
left: 50.6%;
}
#pathway-layer-connect .statistics-attr a {
align-self: center;
white-space: nowrap;
overflow: hidden; /* Hide overflow content */
text-overflow: ellipsis;
}
#pathway-layer-connect .network-results td:first-child {
margin-left: 0.5%;
font-size: 0.7vw;
margin-bottom: 1%;
color: white;
width: 50%;
align-self: center;
white-space: nowrap;
overflow: hidden; /* Hide overflow content */
text-overflow: ellipsis;
}
#pathway-layer-connect .network-results td:last-child {
font-size: 0.7vw;
margin-bottom: 1%;
color: white;
width: 50%;
align-self: center;
white-space: nowrap;
overflow: hidden; /* Hide overflow content */
text-overflow: ellipsis;
}
</style> -->
</script>
76 changes: 15 additions & 61 deletions frontend/src/components/pane/modules/layer/EnrichmentLayerPane.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,17 @@
</span>
</header>

<Tabs :value="active_section" @update:value="change_section">
<Tabs :value="active_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">
<TabPanel value="statistics" v-show="tool_active && active_section == 'informations'">
<h3 class="mb-1 text-sm font-medium">
Informations
</h3>
</TabPanel>
<TabPanel value="statistics" v-show="tool_active && active_section == 'statistics'">
<div class="flex items-center justify-between mb-1">
<h3 class="text-sm font-medium">
Contained proteins
</h3>
Expand All @@ -22,8 +27,8 @@
</div>
<LayerProteins :active_termlayers="active_termlayers" :gephi_data="gephi_data"></LayerProteins>
</TabPanel>
<TabPanel value="connections">
<h3 class="mb-3 text-sm font-medium">
<TabPanel value="connections" v-show="tool_active && active_section == 'connections'">
<h3 class="mb-1 text-sm font-medium">
Connections
</h3>
<EnrichmentConnections :active_termlayers="active_termlayers"></EnrichmentConnections>
Expand All @@ -36,56 +41,19 @@
tabList: { class: '!border-0 !gap-4' },
activeBar: { class: '!hidden' }
}">
<Tab value="statistics" class="!p-0 !border-0"><span
<Tab v-on:click="change_section('information')" value="informations" class="!p-0 !border-0"><span
:class="`material-symbols-rounded !text-lg ${active_section == 'informations' ? 'font-variation-ico-filled' : ''}`">info</span>
</Tab>
<Tab v-on:click="change_section('statistics')" 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
<Tab v-on:click="change_section('connections')" 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="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 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>
</div>
</div>
<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>
</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')" />
</div>
</div> -->
</template>

<script>
Expand Down Expand Up @@ -154,17 +122,3 @@ export default {
},
};
</script>

<!-- <style>
#layer-connections {
height: 30%;
}

#pathway-layers {
height: 30%;
}

#pathway-connections {
height: 28%;
}
</style> -->
64 changes: 1 addition & 63 deletions frontend/src/components/pane/modules/layer/LayerProteins.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
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"
}" :virtualScrollerOptions="{ itemSize: 28 }" scrollHeight="4.5rem" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0" :tabindex="0"
emptyMessage="No proteins available.">

<template #footer>
Expand Down Expand Up @@ -68,59 +68,6 @@
</div>
</template>
</Listbox>

<!-- <div id="layer-connect" class="connect">
<div class="sorting">
<a
class="node_filter"
v-on:click="
sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
sort_cluster = '';
sort_degree = '';
"
>nodes</a
>
<a
class="cluster_filter"
v-on:click="
sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
sort_node = '';
sort_degree = '';
"
>cluster</a
>
<a
class="degree_filter"
v-on:click="
sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
sort_cluster = '';
sort_node = '';
"
>degree</a
>
</div>
<div class="network-results" tabindex="0" @keydown="handleKeyDown">
<table>
<tbody>
<tr v-for="(entry, index) in filt_links" :key="index" class="option">
<td>
<div class="statistics-attr">
<a href="#">{{ entry.attributes["Name"] }}</a>
</div>
</td>
<td>
<a class="statistics-val">{{
entry.attributes["Modularity Class"]
}}</a>
</td>
<td>
<a class="statistics-val">{{ entry.attributes["Degree"] }}</a>
</td>
</tr>
</tbody>
</table>
</div>
</div> -->
</template>

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

<!-- <style>
#layer-connect {
width: 100%;
height: 100%;
font-family: "ABeeZee", sans-serif;
padding: 1.3vw 1.3vw 1vw 1.3vw;
}
</style> -->
101 changes: 1 addition & 100 deletions frontend/src/components/pane/modules/node/NetworkStatistics.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,6 @@
<span class="text-sm break-all">{{ key }}</span>
</li>
</ul>
<!-- <div id="statistics">
<div class="network-results" tabindex="0" @keydown="handleKeyDown">
<table>
<tbody>
<tr
v-for="(key, entry, index) in statistics"
:key="index"
class="option"
>
<td>
<div class="statistics-attr">
<a href="#">{{ entry }}</a>
</div>
</td>
<td>
<a class="statistics-val">{{ key }}</a>
</td>
</tr>
</tbody>
</table>
</div>
</div> -->
</template>

<script>
Expand Down Expand Up @@ -86,81 +64,4 @@ export default {
},
},
};
</script>

<!-- <style>
#statistics {
width: 100%;
height: 100%;
font-family: "ABeeZee", sans-serif;
padding: 1.3vw;
}

.pane_values {
position: absolute;
left: 68.5%;
}

.statistics-attr {
display: flex;
height: 1vw;
width: 80%;
white-space: nowrap;
overflow: hidden; /* Hide overflow content */
text-overflow: ellipsis;
margin-left: 2%;
}

.statistics-attr a {
cursor: default;
color: white;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#statistics .network-results {
overflow: scroll;
height: 100%;
}

.network-results::-webkit-scrollbar {
display: none;
}

.statistics-val {
left: 90.6%;
}

.network-results table {
display: flex;
width: 100%;
}

:focus {
outline: 0 !important;
}

.network-results table tbody {
width: 100%;
}
.network-results td:first-child {
width: 50%;
font-size: 0.6vw;
align-self: center;
white-space: nowrap;
overflow: hidden; /* Hide overflow content */
text-overflow: ellipsis;
}
.network-results td:last-child {
font-size: 0.5vw;
margin-bottom: 1%;
color: white;
width: 50%;
align-self: center;
white-space: nowrap;
overflow: hidden; /* Hide overflow content */
text-overflow: ellipsis;
}
</style> -->
</script>
Loading

0 comments on commit 045a9fe

Please sign in to comment.