Skip to content

Commit

Permalink
NN-643 modify subset pane
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlisha-maharjan
anlisha-maharjan committed Jan 5, 2025
1 parent 59b86f4 commit 6fae4d1
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 104 deletions.
133 changes: 75 additions & 58 deletions frontend/src/components/pane/PaneSystem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,80 @@
@active_item_changed="active_item = $event"></EnrichmentLayerPane>
</Dialog>
</div>

<!-- <div
v-show="
active_node !== null ||
active_subset !== null ||
active_term !== null ||
active_decoloumn !== null ||
active_termlayers !== null ||
paneHidden == false
"
>
<div class="pane" id="pane" :class="{ active: tool_active }">
<div class="pane_header" id="pane_header">
<span>{{ active_tab }}</span>
<img
class="pane_close"
src="@/assets/toolbar/cross.png"
v-on:click="close_pane()"
/>
</div>
<div class="pane-window">
<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>
</div>
</div>
</div> -->
</template>

<script>
Expand Down Expand Up @@ -96,7 +170,7 @@ 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('00', this.active_tab);
console.log('active pane',this.active_tab);
if (val == null) {
delete this.active_dict.val;
return;
Expand All @@ -105,61 +179,6 @@ export default {
},
},
methods: {
// dragElement(elmnt) {
// var pos1 = 0,
// pos2 = 0,
// pos3 = 0,
// pos4 = 0;
// if (document.getElementById(elmnt.id + "_header")) {
// // if present, the header is where you move the DIV from:
// document.getElementById(elmnt.id + "_header").onmousedown =
// dragMouseDown;
// } else {
// // otherwise, move the DIV from anywhere inside the DIV:
// elmnt.onmousedown = dragMouseDown;
// }
// function dragMouseDown(e) {
// e = e || window.event;
// e.preventDefault();
// // get the mouse cursor position at startup:
// pos3 = e.clientX;
// pos4 = e.clientY;
// document.onmouseup = closeDragElement;
// // call a function whenever the cursor moves:
// document.onmousemove = elementDrag;
// }
// function elementDrag(e) {
// e = e || window.event;
// e.preventDefault();
// // calculate the conditions:
// var parentWidth = window.innerWidth;
// var parentHeight = window.innerHeight;
// var elementWidth = elmnt.offsetWidth;
// var elementHeight = elmnt.offsetHeight;
// // calculate the new coordinates:
// pos1 = pos3 - e.clientX;
// pos2 = pos4 - e.clientY;
// pos3 = e.clientX;
// pos4 = e.clientY;
// // Calculate the new coordinates for bottom and right
// var newBottom = parentHeight - (elmnt.offsetTop - pos2 + elementHeight);
// var newRight = parentWidth - (elmnt.offsetLeft - pos1 + elementWidth);
// // set the element's new position:
// elmnt.style.bottom = newBottom + "px";
// elmnt.style.right = newRight + "px";
// }
// function closeDragElement() {
// // stop moving when mouse button is released:
// document.onmouseup = null;
// document.onmousemove = null;
// }
// },
open_pane() {
// const div = document.getElementById("attributepane");
// const paneButton = document.getElementById("panebutton");
Expand Down Expand Up @@ -235,8 +254,6 @@ export default {
mounted() {
// this.dragElement(document.getElementById("pane"));
this.emitter.on("reset_protein", (state) => {
console.log('00', state);
this.selectTab("node", state);
});
},
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/pane/modules/subset/SubsetConnections.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<p v-if="!filt_links.length" class="flex items-center justify-center py-1 text-sm text-slate-300">No nodes
<p v-if="!filt_links?.length" class="flex items-center justify-center py-1 text-sm text-slate-300">No nodes
</p>

<Listbox v-if="filt_links !== null" optionLabel="" :options="filt_links" :pt="{
<Listbox v-if="filt_links?.length" optionLabel="" :options="filt_links" :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' },
Expand Down Expand Up @@ -146,6 +146,6 @@ export default {
return filtered;
// return new Set(filtered);
},
},
}
};
</script>
5 changes: 0 additions & 5 deletions frontend/src/components/pane/modules/subset/SubsetLinks.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,8 +301,6 @@ export default {
// create_de() {
// var com = this;
// console.log(com.dcoloumns);
// Object.entries(com.dcoloumns).forEach(([index, coloumn]) => {
// var slider = document.getElementById("subset-deval-slider-" + index);
// noUiSlider.create(slider, {
Expand Down Expand Up @@ -581,7 +579,6 @@ export default {
this.parameter_data = this.active_subset.selection
? this.active_subset.genes
: this.active_subset;
console.log(this.parameter_data);
},
},
mounted() {
Expand All @@ -594,8 +591,6 @@ export default {
// },
// };
// console.log(this.parameter_data);
this.initialize_dg();
this.initialize_bc();
this.initialize_pagerank();
Expand Down
71 changes: 35 additions & 36 deletions frontend/src/components/pane/modules/subset/SubsetPane.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,33 @@
<strong class="font-normal dark:text-slate-300">Edges:</strong>
{{ number_asc }}
</span>
<div class="flex items-center gap-2 ml-auto">
<Button v-if="active_function == 'connections'" class="w-5 h-5" size="small" text plain rounded
v-tooltip.bottom="'Copy to clipboard'" @click="copyToClipboard()">
<span class="dark:text-white material-symbols-rounded !text-lg"> content_copy </span>
</Button>
<Button class="w-5 h-5" size="small" text plain rounded @click="show_layer()" v-tooltip.bottom="hide ? '' : ''">
<span class="dark:text-white material-symbols-rounded !text-lg">
{{ hide ? "visibility" : "visibility_off" }}
</span>
</Button>
</div>
<Button class="w-5 h-5 ml-auto" size="small" text plain rounded @click="show_layer()">
<span class="dark:text-white material-symbols-rounded !text-lg">
{{ hide ? "visibility" : "visibility_off" }}
</span>
</Button>
</header>

<Tabs :value="active_function" @update:value="onChangeTab" v-if="active_subset !== null">
<Tabs :value="active_section" @update:value="change_section">
<div
:class="`${active_function ? '!pt-2 !border-t !border-slate-700 !mt-2' : ''} px-2.5 -mx-2.5 max-h-[10rem] overflow-auto overflow-x-visible`">
: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">
<TabPanel value="statistics" v-if="active_subset !== null">
<h3 class="mb-3 text-sm font-medium">
Parameter Selection
</h3>
<SubsetLinks :active_subset="active_subset" :mode="mode"></SubsetLinks>
</TabPanel>
<TabPanel value="connections">
<div class="flex items-center justify-between mb-3">
<h3 class="text-sm font-medium">
Connections
</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>
<SubsetConnections :active_subset="subset"></SubsetConnections>
</TabPanel>
</TabPanels>
Expand All @@ -42,16 +47,15 @@
tabList: { class: '!border-0 !gap-4' },
activeBar: { class: '!hidden' }
}">
<Tab value="statistics" class="!p-0 text-sm !border-0 flex items-center gap-1"><span
:class="`material-symbols-rounded !text-lg ${active_function == 'statistics' ? 'font-variation-ico-filled' : ''}`">insert_chart</span>Statistics
<Tab value="statistics" class="!p-0 !border-0" v-if="active_subset !== null"><span
:class="`material-symbols-rounded !text-lg ${active_section == 'statistics' ? 'font-variation-ico-filled' : ''}`">tune</span>
</Tab>
<Tab value="connections" class="!p-0 text-sm !border-0 flex items-center gap-1"><span
:class="`material-symbols-rounded !text-lg ${active_function == 'connections' ? 'font-variation-ico-filled' : ''}`">list_alt</span>Connections
<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>

<Button class="w-5 h-5 !ml-auto" size="small" text rounded plain v-tooltip.bottom="'Add to AxoBot'"
@click="call_chatbot()">
<Button class="w-5 h-5 !ml-auto" size="small" text rounded plain @click="call_chatbot()">
<span class="dark:text-white material-symbols-rounded !text-lg">forum</span>
</Button>
</footer>
Expand Down Expand Up @@ -160,9 +164,11 @@ export default {
SubsetConnections,
SubsetLinks,
},
mounted() {
this.toast = useToast();
},
data() {
return {
active_function: "",
active_section: "",
subset: null,
hide: true,
Expand Down Expand Up @@ -229,14 +235,7 @@ export default {
com.$emit("active_item_changed", { Subset: com.subset_item });
},
},
mounted() {
this.toast = useToast();
},
methods: {
onChangeTab(tab) {
var com = this;
com.active_function = tab;
},
change_section(val) {
var com = this;
Expand All @@ -255,14 +254,6 @@ export default {
}
}
},
copyToClipboard() {
var com = this;
var textToCopy = [];
for (var link of com.subset) textToCopy.push(link.label);
navigator.clipboard.writeText(textToCopy.join("\n"));
this.toast.add({ severity: 'success', detail: 'Message copied to clipboard.', life: 4000 });
},
show_layer() {
var com = this;
Expand All @@ -286,6 +277,14 @@ export default {
data: addedSubset,
});
},
copyclipboard() {
var com = this;
var textToCopy = [];
for (var link of com.subset) textToCopy.push(link.label);
navigator.clipboard.writeText(textToCopy.join("\n"));
this.toast.add({ severity: 'success', detail: 'Message copied to clipboard.', life: 4000 });
},
/**
* Calling the procedure in component MainVis to highlight a specific node
* @param {dict} value - A dictionary of a single node
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/layout/MainToolBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@

<Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Graph parameter'"
@click="selection_active = !selection_active">
<span class="material-symbols-rounded group-hover:font-variation-ico-filled">filter_b_and_w</span>
<span class="material-symbols-rounded group-hover:font-variation-ico-filled">tune</span>
</Button>

<Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Recenter graph'" @click="center">
Expand Down
1 change: 0 additions & 1 deletion frontend/src/store/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ export const store = createStore({
},
mutations: {
assign_sigma_instance(state, value) {
console.log(value);
state.sigma_instance = value;
},
assign(state, value) {
Expand Down

0 comments on commit 6fae4d1

Please sign in to comment.