Skip to content

Commit

Permalink
NN-608 update gene search in highlight nodes UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlisha-maharjan
anlisha-maharjan committed Nov 12, 2024
1 parent 9b3025b commit 944fbb5
Show file tree
Hide file tree
Showing 7 changed files with 124 additions and 105 deletions.
6 changes: 3 additions & 3 deletions frontend/src/components/toolbar/modules/ExportEdges.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<Button severity="secondary" type="button" label="Export edges as .csv" icon="pi pi-download" iconPos="right"
class="!w-full !justify-between !rounded-lg" @click="export_edges" />
<Button text plain severity="secondary" type="button" label="Export edges as .csv" class="!justify-start !py-1"
@click="export_edges" />
</template>

<script>
Expand Down Expand Up @@ -38,7 +38,7 @@ export default {
hiddenElement.target = "_blank";
hiddenElement.href =
"data:text/csv;charset=utf-8," + encodeURI(terms_csv);
hiddenElement.download = "Proteins.csv";
hiddenElement.download = "Edges.csv";
hiddenElement.click();
},
},
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/toolbar/modules/ExportGraph.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<Button severity="secondary" type="button" label="Export graph as .js" icon="pi pi-download" iconPos="right"
class="!w-full !justify-between !rounded-lg" @click="export_graph" />
<Button text plain severity="secondary" type="button" label="Export graph as .js" class="!justify-start !py-1"
@click="export_graph" />
</template>

<script>
Expand Down
37 changes: 37 additions & 0 deletions frontend/src/components/toolbar/modules/ExportGraphData.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<template>
<Button severity="secondary" type="button" label="Export protein graph data" icon="pi pi-download" iconPos="right"
class="!w-full !justify-between !rounded-lg" @click="toggle" />
<Popover class="w-[13rem]" ref="op" :pt="{ content: { class: 'px-1 flex flex-col gap-1' } }">
<ExportGraph></ExportGraph>
<ExportProteins :gephi_data="gephi_data"></ExportProteins>
<ExportEdges :gephi_data="gephi_data" :ensembl_name_index="ensembl_name_index"></ExportEdges>
</Popover>
</template>

<script setup>
import { ref } from "vue";
const op = ref();
const toggle = (event) => {
op.value.toggle(event);
};
</script>

<script>
import ExportProteins from "@/components/toolbar/modules/ExportProteins.vue";
import ExportEdges from "@/components/toolbar/modules/ExportEdges.vue";
import ExportGraph from "@/components/toolbar/modules/ExportGraph.vue";
export default {
name: "ExportGraphData",
props: ["mode", "gephi_data", "ensembl_name_index"],
components: {
ExportProteins,
ExportEdges,
ExportGraph
},
data() {
return {};
},
};
</script>
6 changes: 3 additions & 3 deletions ...nents/toolbar/modules/ExportingButton.vue → ...ents/toolbar/modules/ExportGraphImage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<Button severity="secondary" type="button" label="Export proteins as .csv" icon="pi pi-download" iconPos="right"
<Button severity="secondary" type="button" label="Export protein graph image" icon="pi pi-download" iconPos="right"
class="!w-full !justify-between !rounded-lg" @click="toggle" />
<Popover class="w-[12rem]" ref="op" :pt="{ content: { class: 'px-1 flex flex-col gap-1' } }">
<Popover class="w-[13rem]" ref="op" :pt="{ content: { class: 'px-1 flex flex-col gap-1' } }">
<Button text plain severity="secondary" type="button" label="White / .png" class="!justify-start !py-1"
@click="take_screen('white', 'png')" />
<Button text plain severity="secondary" type="button" label="Black / .png" class="!justify-start !py-1"
Expand All @@ -26,7 +26,7 @@ const toggle = (event) => {

<script>
export default {
name: "ExportingButton",
name: "ExportGraphImage",
props: ["mode"],
data() {
return {};
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/toolbar/modules/ExportProteins.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<Button severity="secondary" type="button" label="Export proteins as .csv" icon="pi pi-download" iconPos="right"
class="!w-full !justify-between !rounded-lg" @click="export_proteins" />
<Button text plain severity="secondary" type="button" label="Export proteins as .csv" class="!justify-start !py-1"
@click="export_proteins" />
</template>

<script>
Expand Down
149 changes: 71 additions & 78 deletions frontend/src/components/toolbar/modules/ProteinList.vue
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,49 @@
<template>
<div class="tool-item">
<h6 class="mb-5 text-sm text-slate-300">
<span
class="inline-block mr-1 text-xl leading-none align-bottom material-symbols-rounded font-variation-ico-filled">help</span>
To find multiple nodes separate each node name with comma (<span
class="leading-[0] text-primary-400 text-4xl">,</span>)
</h6>
<Textarea v-model="raw_text" rows="4" cols="45" autofocus placeholder="Search by gene..." />
<Button label="Apply" severity="secondary" type="button" class="mt-2.5 !rounded-lg" @click="highlight(raw_text)">
</Button>

<!-- <div class="hidden tool-item">
<div id="protein_highlight" class="window-menu">
<div id="protein_highlight_header" class="window-header">
<div class="headertext">
<span>highlight nodes</span>
<img
class="protein_close"
src="@/assets/toolbar/cross.png"
v-on:click="unactive_proteinlist()"
/>
<img class="protein_close" src="@/assets/toolbar/cross.png" v-on:click="unactive_proteinlist()" />
</div>
</div>
<div class="keyword-search">
<div class="window-label">keyword search</div>
<div class="keyword-searchbar">
<span v-on:click="search_subset(filt_keyword)">></span>
<input
type="text"
v-model="search_raw"
class="empty"
placeholder="input keyword"
/>
<input type="text" v-model="search_raw" class="empty" placeholder="input keyword" />
</div>
<div class="keyword-result">
<div v-for="(entry, index) in filt_keyword" :key="index">
<a
href="#"
v-on:click="select_node(entry)"
:class="{ in_subset: active_genes.has(entry.label) }"
>{{ entry.attributes["Name"] }}</a
>
<a href="#" v-on:click="select_node(entry)" :class="{ in_subset: active_genes.has(entry.label) }">{{
entry.attributes["Name"] }}</a>
</div>
</div>
</div>
<div class="highlight-list">
<div class="window-label">gene search</div>
<textarea v-model="raw_text" rows="10" cols="30" autofocus></textarea>
<button
v-on:click="highlight(raw_text)"
id="highlight_protein"
class="colortype"
>
<button v-on:click="highlight(raw_text)" id="highlight_protein" class="colortype">
apply
</button>
</div>
</div>
</div>
</div> -->
</template>


<script>
// import {QuickScore} from "quick-score";
export default {
name: "ProteinList",
props: ["gephi_data", "mode"],
Expand All @@ -63,57 +56,58 @@ 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;
}
// 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 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 new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = elmnt.offsetTop - pos2 + "px";
elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
}
// function elementDrag(e) {
// e = e || window.event;
// e.preventDefault();
// // calculate the new cursor position:
// pos1 = pos3 - e.clientX;
// pos2 = pos4 - e.clientY;
// pos3 = e.clientX;
// pos4 = e.clientY;
// // set the element's new position:
// elmnt.style.top = elmnt.offsetTop - pos2 + "px";
// elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
// }
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
},
unactive_proteinlist() {
this.$emit("protein_active_changed", false);
},
// function closeDragElement() {
// // stop moving when mouse button is released:
// document.onmouseup = null;
// document.onmousemove = null;
// }
// },
// unactive_proteinlist() {
// this.$emit("protein_active_changed", false);
// },
highlight(proteins) {
var com = this;
const protein_names = new Set(proteins.toUpperCase().split("\n"));
// This regex is not user friendly instead use ','
// const protein_names = new Set(proteins.toUpperCase().split("\n"));
const protein_names = new Set(proteins.toUpperCase().split(",").map(item => item.trim()));
const subset = [];
com.gephi_data.nodes.forEach((node) => {
if (protein_names.has(node.attributes["Name"].toUpperCase())) {
Expand All @@ -133,11 +127,10 @@ export default {
},
},
mounted() {
var com = this;
this.$nextTick(() => {
com.dragElement(document.getElementById("protein_highlight"));
});
// var com = this;
// this.$nextTick(() => {
// com.dragElement(document.getElementById("protein_highlight"));
// });
},
computed: {
regex() {
Expand Down Expand Up @@ -167,7 +160,7 @@ export default {
};
</script>

<style>
<!-- <style>
.window-menu {
position: fixed;
display: flex;
Expand Down Expand Up @@ -305,4 +298,4 @@ export default {
.keyword-result .in_subset {
color: lightgreen;
}
</style>
</style> -->
23 changes: 6 additions & 17 deletions frontend/src/components/toolbar/windows/ExportWindow.vue
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,24 @@
<template>
<ul class="flex flex-col gap-1.5 p-0 m-0 list-none">
<li class="flex items-center justify-between gap-2 dark:text-[#c3c3c3]">
<ExportingButton :mode="mode"></ExportingButton>
<ExportGraphImage :mode="mode"></ExportGraphImage>
</li>
<li v-if="mode == 'protein'" class="flex items-center justify-between gap-2 dark:text-[#c3c3c3]">
<ExportGraph></ExportGraph>
</li>
<li v-if="mode == 'protein'" class="flex items-center justify-between gap-2 dark:text-[#c3c3c3]">
<ExportProteins :gephi_data="gephi_data"></ExportProteins>
</li>
<li v-if="mode == 'protein'" class="flex items-center justify-between gap-2 dark:text-[#c3c3c3]">
<ExportEdges :gephi_data="gephi_data" :ensembl_name_index="ensembl_name_index">
</ExportEdges>
<ExportGraphData :mode="mode" :gephi_data="gephi_data" :ensembl_name_index="ensembl_name_index"></ExportGraphData>
</li>
</ul>
</template>

<script>
import ExportProteins from "@/components/toolbar/modules/ExportProteins.vue";
import ExportEdges from "@/components/toolbar/modules/ExportEdges.vue";
import ExportingButton from "@/components/toolbar/modules/ExportingButton.vue";
import ExportGraph from "@/components/toolbar/modules/ExportGraph.vue";
import ExportGraphImage from "@/components/toolbar/modules/ExportGraphImage.vue";
import ExportGraphData from "@/components/toolbar/modules/ExportGraphData.vue";
export default {
name: "ExportWindow",
props: ["mode", "gephi_data", "ensembl_name_index"],
components: {
ExportingButton,
ExportGraph,
ExportProteins,
ExportEdges,
ExportGraphImage,
ExportGraphData,
},
data() {
return {};
Expand Down

0 comments on commit 944fbb5

Please sign in to comment.