Skip to content

Commit

Permalink
NN-644 complete pane of citation and term view
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlisha-maharjan
anlisha-maharjan committed Jan 6, 2025
1 parent 74aa3a9 commit 4243c0e
Show file tree
Hide file tree
Showing 5 changed files with 258 additions and 222 deletions.
166 changes: 86 additions & 80 deletions frontend/src/components/pane/CitationPaneSystem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,53 @@
<template>
<div
v-show="
(active_subset !== null && active_node == null) || paneHidden == false
"
>
<Dialog :visible="(active_subset !== null && active_node == null) || paneHidden == false" @hide="close_pane()"
position="bottom" :closable="false" :minY="60" :minX="60" :pt="{
root: { class: 'w-[18rem] !mt-[60px] !ml-[60px]' },
header: { class: '!px-2.5 !py-1.5 cursor-move' },
content: { class: '!px-2.5 !py-0' },
}">
<template #header>
<h3 class="text-sm font-bold">
{{ active_tab }}
</h3>
<div class="flex items-center gap-1 ml-auto">
<Button class="w-5 h-5 ml-auto" size="small" text rounded plain @click="add_subset(active_subset)">
<span class="dark:text-white !text-lg material-symbols-rounded"> add </span>
</Button>
<Button class="w-5 h-5" size="small" text rounded plain @click="close_pane()">
<span class="dark:text-white !text-lg material-symbols-rounded"> close </span>
</Button>
</div>
</template>
<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>
</Dialog>

<!-- <div v-show="(active_subset !== null && active_node == 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="abstract_add"
src="@/assets/pathwaybar/plus.png"
v-on:click="add_subset(active_subset)"
/>
<img
class="pane_close"
src="@/assets/toolbar/cross.png"
v-on:click="close_pane()"
/>
<img class="abstract_add" src="@/assets/pathwaybar/plus.png" v-on:click="add_subset(active_subset)" />
<img class="pane_close" src="@/assets/toolbar/cross.png" v-on:click="close_pane()" />
</div>
<div class="pane-window">
<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>
<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>
</div>
</div>
</div>
</div> -->
</template>

<script>
import SubsetPane from "@/components/pane/modules/subset/SubsetPane.vue";
export default {
name: "TermPaneSystem",
props: ["gephi_data", "active_subset", "active_node", "node_color_index"],
props: ["mode","gephi_data", "active_subset", "active_node", "node_color_index"],
emits: [
"active_node_changed",
"active_subset_changed",
Expand All @@ -57,7 +64,6 @@ export default {
active_tab: "Subset",
highlight_subset: null,
paneHidden: true,
mode: "citation",
tool_active: false,
};
},
Expand All @@ -74,61 +80,61 @@ 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 conditions:
var parentWidth = window.innerWidth;
var parentHeight = window.innerHeight;
var elementWidth = elmnt.offsetWidth;
var elementHeight = elmnt.offsetHeight;
// 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:
// 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);
// // 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";
}
// // 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;
}
},
// function closeDragElement() {
// // stop moving when mouse button is released:
// document.onmouseup = null;
// document.onmousemove = null;
// }
// },
close_pane() {
this.active_dict = {};
Expand Down Expand Up @@ -158,7 +164,7 @@ export default {
},
},
mounted() {
this.dragElement(document.getElementById("pane"));
// this.dragElement(document.getElementById("pane"));
this.emitter.on("reset_protein", (state) => {
this.selectTab("node", state);
Expand All @@ -167,4 +173,4 @@ export default {
};
</script>

<style></style>
<!-- <style></style> -->
Loading

0 comments on commit 4243c0e

Please sign in to comment.