Skip to content

Commit

Permalink
NN-647 modify inner pane components
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlisha-maharjan
anlisha-maharjan committed Jan 17, 2025
1 parent 9360174 commit 3a4fc60
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 547 deletions.
59 changes: 13 additions & 46 deletions frontend/src/components/pane/modules/difexp/DEValuePane.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,17 @@
<span class="text-sm font-normal">{{ active_decoloumn }}</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">
<h3 class="mb-3 text-sm font-medium">
<TabPanel value="informations" 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'">
<h3 class="mb-1 text-sm font-medium">
Contained nodes
</h3>
<RegulatedProteins :active_decoloumn="active_decoloumn" :gephi_data="gephi_data"></RegulatedProteins>
Expand All @@ -22,42 +27,16 @@
tabList: { class: '!border-0 !gap-4' },
activeBar: { class: '!hidden' }
}">
<Tab value="statistics" class="!p-0 !border-0"><span
<Tab v-on:click="change_section('informations')" 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>
</TabList>
</footer>
</Tabs>
</div>

<!-- <div class="text" v-show="active_decoloumn !== null">
<div class="gene_attribute" v-if="active_decoloumn !== null">
<div class="deval">{{ active_decoloumn }}</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 nodes</span>
</div>
<div class="subsection-main colortype">
<RegulatedProteins :active_decoloumn="active_decoloumn" :gephi_data="gephi_data"></RegulatedProteins>
</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')" />
</div>
</div> -->
</template>

<script>
Expand Down Expand Up @@ -123,16 +102,4 @@ export default {
},
},
};
</script>

<!-- <style>
.gene_attribute .deval {
width: 100%;
margin-left: 0.3vw;
font-size: 0.8vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
</style> -->
</script>
117 changes: 2 additions & 115 deletions frontend/src/components/pane/modules/difexp/RegulatedProteins.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,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 @@ -74,65 +74,6 @@
</div>
</template>
</Listbox>

<!-- <div id="de-connect" class="connect">
<div class="selection-results">
<table>
<tbody>
<tr v-for="(key, entry, index) in selectionattr" :key="index" class="option">
<td>
<div class="statistics-attr">
<a href="#">{{ entry }}</a>
</div>
</td>
<td>
<input class="statistics-val" type="number" v-bind:min="key.min" v-bind:max="key.max"
v-bind:step="key.step" v-model="key.value" v-on:change="select_proteins()" />
</td>
</tr>
</tbody>
</table>
</div>
<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 @@ -240,58 +181,4 @@ export default {
},
},
};
</script>

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

.selection-results input[type="number"] {
border: none;
font-family: "ABeeZee", sans-serif;
font-size: 0.7vw;
color: white;
background: none;
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
text-align: left;
}

.selection-results::-webkit-scrollbar,
#de-connect::-webkit-scrollbar {
display: none;
}

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

:focus {
outline: 0 !important;
}

.selection-results table tbody {
width: 100%;
}
.selection-results td:first-child {
width: 70%;
align-self: center;
}
.selection-results td:last-child {
font-size: 0.7vw;
margin-bottom: 1%;
color: white;
width: 30%;
align-self: center;
white-space: nowrap;
overflow: hidden; /* Hide overflow content */
text-overflow: ellipsis;
}
</style> -->
</script>
2 changes: 1 addition & 1 deletion frontend/src/components/pane/modules/subset/SubsetConnections.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 nodes available.">

<template #footer>
Expand Down
Loading

0 comments on commit 3a4fc60

Please sign in to comment.