Skip to content

Commit

Permalink
NN-622 complete diff exp tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlisha-maharjan
anlisha-maharjan committed Dec 6, 2024
1 parent b36ce04 commit 9600b0b
Showing 1 changed file with 88 additions and 91 deletions.
179 changes: 88 additions & 91 deletions frontend/src/components/pane/modules/difexp/DifExpMenu.vue
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,36 @@
<template>
<div id="colorbar-difexp">
<ListActionHeader>
<Select v-model="selected_category" :options="dcoloumns" showClear placeholder="Select dcoloumns" checkmark
class="flex-1" @update:modelValue="active_categories($event)" />
</ListActionHeader>

<EmptyState v-if="active_decoloumn === null" message="There is no active dcoloumn">
</EmptyState>

<div v-if="active_decoloumn !== null" class="pt-2 mt-10 overflow-hidden">
<div class="px-3 w-[80%] mx-auto relative z-[1]">
<Slider :min="dboundary.min" :max="dboundary.max" :step="dboundary.step" v-model="dboundary.value"
@update:modelValue="check_boundary()" />
</div>
<svg id="demo1" class="transform translate-x-[10%] translate-y-[-10%]" width="250" height="80"></svg>
</div>

<!-- <div id="colorbar-difexp">
<div class="tool-set-section-graph">
<div class="coloumn-set-button">
<button class="tool-buttons">
<img class="buttons-img" src="@/assets/plus-1.png" />
<!-- <div v-if="loading_state" class="loading_button"></div> -->
/* <div v-if="loading_state" class="loading_button"></div> */
</button>
</div>
<div
id="pathway-filter"
v-on:click="handling_filter_menu()"
:class="{ full: category_filtering == true }"
>
<div id="pathway-filter" v-on:click="handling_filter_menu()" :class="{ full: category_filtering == true }">
<span>{{ category }}</span>
<img
class="remove-filter"
src="@/assets/pathwaybar/cross.png"
v-on:click.stop="active_categories(null)"
v-if="category !== 'Selection'"
/>
<img class="remove-filter" src="@/assets/pathwaybar/cross.png" v-on:click.stop="active_categories(null)"
v-if="category !== 'Selection'" />
</div>
<div id="pathway-filter-categories" v-show="category_filtering == true">
<div
class="element"
v-for="(entry, index) in dcoloumns"
:key="index"
v-on:click="active_categories(entry)"
:class="{ active_cat: category == entry }"
>
<div class="element" v-for="(entry, index) in dcoloumns" :key="index" v-on:click="active_categories(entry)"
:class="{ active_cat: category == entry }">
<a>{{ entry }}</a>
</div>
</div>
Expand All @@ -36,42 +39,39 @@
<div class="loading-section">
<div v-if="active_decoloumn !== null">
<svg id="demo1" width="250" height="120"></svg>
<input
id="legend"
type="range"
v-bind:min="dboundary.min"
v-bind:max="dboundary.max"
v-bind:step="dboundary.step"
v-model="dboundary.value"
v-on:change="check_boundary()"
/>
<input id="legend" type="range" v-bind:min="dboundary.min" v-bind:max="dboundary.max"
v-bind:step="dboundary.step" v-model="dboundary.value" v-on:change="check_boundary()" />
</div>
</div>
</div>
</div>
</div> -->
</template>

<script>
import * as d3 from "d3";
import ListActionHeader from "@/components/verticalpane/ListActionHeader.vue";
import EmptyState from "@/components/verticalpane/EmptyState.vue";
export default {
name: "DifExpMenu",
props: ["active_decoloumn", "gephi_data"],
components: {},
components: { ListActionHeader, EmptyState },
data() {
return {
selected_category: null,
active_section: "",
links: null,
hide: true,
// links: null,
// hide: true,
dcoloumns: this.$store.state.dcoloumns,
category: "selection",
category_filtering: false,
// category: "selection",
// category_filtering: false,
dboundary: {
value: 1,
min: 1,
max: 10,
step: 1,
},
expand_selected: true,
// expand_selected: true,
};
},
watch: {
Expand All @@ -85,11 +85,9 @@ export default {
this.reset_categories();
return;
}
this.category = category;
this.emitter.emit("decoloumn", category);
},
reset_categories() {
this.category = "Selection";
this.emitter.emit("decoloumn", null);
},
change_section(bool, val) {
Expand Down Expand Up @@ -172,33 +170,33 @@ export default {
com.draw_legend();
com.emitter.emit("adjustDE", this.dboundary.value);
},
handling_filter_menu() {
var com = this;
if (!com.category_filtering) {
com.category_filtering = true;
// handling_filter_menu() {
// var com = this;
// if (!com.category_filtering) {
// com.category_filtering = true;
// Add the event listener
document.addEventListener("mouseup", com.handleMouseUp);
} else {
com.category_filtering = false;
document.removeEventListener("mouseup", com.handleMouseUp);
}
},
handleMouseUp(e) {
var com = this;
// // Add the event listener
// document.addEventListener("mouseup", com.handleMouseUp);
// } else {
// com.category_filtering = false;
// document.removeEventListener("mouseup", com.handleMouseUp);
// }
// },
// handleMouseUp(e) {
// var com = this;
var container = document.getElementById("pathway-filter-categories");
var container_button = document.getElementById("pathway-filter");
if (
!container.contains(e.target) &&
!container_button.contains(e.target)
) {
com.category_filtering = false;
// var container = document.getElementById("pathway-filter-categories");
// var container_button = document.getElementById("pathway-filter");
// if (
// !container.contains(e.target) &&
// !container_button.contains(e.target)
// ) {
// com.category_filtering = false;
// Remove the event listener
document.removeEventListener("mouseup", com.handleMouseUp);
}
},
// // Remove the event listener
// document.removeEventListener("mouseup", com.handleMouseUp);
// }
// },
},
mounted() {
console.log(this.active_decoloumn);
Expand All @@ -211,7 +209,7 @@ export default {
};
</script>

<style>
<!-- <style>
#colorbar-difexp {
z-index: 999;
width: 100%;
Expand All @@ -220,15 +218,35 @@ export default {
display: flex;
flex-direction: column;
}

#colorbar-difexp .colorbar-text {
width: 100%;
background: rgb(74, 45, 255);
background: linear-gradient(
90deg,
rgba(74, 45, 255, 1) 0%,
rgba(255, 0, 0, 1) 100%
);
background: linear-gradient(90deg,
rgba(74, 45, 255, 1) 0%,
rgba(255, 0, 0, 1) 100%);
border-radius: 5px;
}

#colorbar-difexp #pathway-filter {
background: rgba(222, 222, 222, 0.3);
padding: 0 0 0 0.3vw;
height: 1.4vw;
width: 16.8vw;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}

#colorbar-difexp #pathway-filter-categories {
width: 16.8vw;
left: 3vw;
top: 4vw;
}

#colorbar-difexp #pathway-filter-categories .element {
padding: 0;
}

#legend {
Expand All @@ -255,29 +273,8 @@ export default {
#demo1 {
position: absolute;
display: block;
width: 70%;
width: 100%;
height: 20%;
left: 21%;
}
#colorbar-difexp #pathway-filter {
background: rgba(222, 222, 222, 0.3);
padding: 0 0 0 0.3vw;
height: 1.4vw;
width: 16.8vw;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
#colorbar-difexp #pathway-filter-categories {
width: 16.8vw;
left: 3vw;
top: 4vw;
}
#colorbar-difexp #pathway-filter-categories .element {
padding: 0;
}
</style>
</style> -->

0 comments on commit 9600b0b

Please sign in to comment.