Commit f64d3e61 authored by unknown's avatar unknown

Implemented new context menu in 2D graph

parent 0aca9192
......@@ -6,8 +6,6 @@
import IdSet from '../../misc/customTypes/IdSet'
import { Node2d, Link } from './components'
import { Relationship } from 'neo4j-driver/types/v1'
/**
* This class is used to query the neo4j database.
......
......@@ -7,7 +7,6 @@ export class Graph2D {
edges;
selectedNodeId;
selectedNodeColor;
expandedNodes;
hoverTimeout;
constructor(dbConnector, idList, cullList){
......@@ -15,7 +14,6 @@ export class Graph2D {
this.graph2d = new Graph2d(dbConnector, idList, cullList);
this.cy = null;
this.nodes = [];
this.expandedNodes = new IdSet();
}
showGraph2D = () => {
......@@ -64,7 +62,7 @@ export class Graph2D {
}
});
var layout = this.cy.layout({
let layout = this.cy.layout({
name: 'cose',
nodeDimensionsIncludeLabels: true,
animate: false,
......@@ -157,77 +155,51 @@ export class Graph2D {
}
}
expandOrCollapse = (type, summaryNodeTypes, collapseFunction, getNodesFunction) => {
expandNodes = (id, nodeType='all', relationType="all") => {
this.hideContextMenu();
let expandedNode = this.expandedNodes.get(this.selectedNodeId);
let displayNodes = true;
if (expandedNode) {
if (expandedNode.val.has(type)) {
collapseFunction([this.selectedNodeId], type);
expandedNode.val.delete(type);
displayNodes = false;
} else {
if (type === "all") {
if (summaryNodeTypes.length !== expandedNode.val.size) {
summaryNodeTypes.forEach(expandedNode.val.add, expandedNode.val);
} else {
collapseFunction([this.selectedNodeId], type);
summaryNodeTypes.forEach(expandedNode.val.delete, expandedNode.val);
displayNodes = false;
}
} else {
expandedNode.val.add(type);
}
}
} else {
const newExpandedNode = new Set();
if (type === "all") {
summaryNodeTypes.forEach(newExpandedNode.add, newExpandedNode);
} else {
newExpandedNode.add(type);
}
this.expandedNodes.addOne({id: this.selectedNodeId, val: newExpandedNode});
}
if (displayNodes) {
getNodesFunction([this.selectedNodeId], type)(this.displayNewElements);
this.graph2d.mutate().then(() => {
this.applyFilterToGraph();
});
} else {
this.graph2d.getRelated([id], nodeType, relationType)(this.displayNewElements);
this.graph2d.mutate().then(() => {
this.applyFilterToGraph();
}
}
displayNodeParents = (type = "all") => {
const parentsSummaryTypes = Object.keys(this.graph2d.getNodeSummary(this.selectedNodeId).parents);
this.expandOrCollapse(type, parentsSummaryTypes, this.graph2d.collapseParents, this.graph2d.getParents);
});
}
displayNodeChildren = (type = "all") => {
const childrenSummaryTypes = Object.keys(this.graph2d.getNodeSummary(this.selectedNodeId).children);
this.expandOrCollapse(type, childrenSummaryTypes, this.graph2d.collapseChildren, this.graph2d.getChildren);
collapseNodes = (id, nodeType='all', relationType="all") => {
this.hideContextMenu();
this.graph2d.collapseRelated([id], nodeType, relationType);
this.applyFilterToGraph();
}
getContextSubMenu(menuTitle, menuElements, clickFunction, subMenuDom) {
if (Object.keys(menuElements).length !== 0) {
var newDiv = document.createElement("div");
newDiv.className = "menuItem";
newDiv.innerHTML = "<i class='fa fa-fw'></i><b>" + menuTitle + "</b>";
newDiv.addEventListener('click', () => clickFunction());
extraInfo.appendChild(newDiv);
for (let menuElement in menuElements) {
newDiv = document.createElement("div");
newDiv.className = "menuItem";
let elementIcon = this.dbConnector.settings.nodeTypes.find(x => x.name === menuElement).icon;
newDiv.innerHTML = "<i class='fa fa-fw " + elementIcon + "'></i>" + menuElement + "(" + menuElements[menuElement] + ")";
newDiv.addEventListener('click', () => clickFunction(menuElement));
subMenuDom.appendChild(newDiv);
}
getContextSubMenu = (menuTitle, menuElements, clickFunction, subMenuDom) => {
let newDiv = document.createElement("div");
newDiv.innerHTML = "<i class='fa fa-fw'></i><b>" + menuTitle + "</b>";
let nodeNb = 0;
for (let node in menuElements.nodes) {
nodeNb += menuElements.nodes[node];
}
let newSubDiv = document.createElement("div");
newSubDiv.className = "menuItem";
newSubDiv.innerHTML = "<i class='fa fa-fw'></i><i class='fa fa-fw'></i>All(" + nodeNb + ")";
newSubDiv.addEventListener('click', () => clickFunction(this.selectedNodeId));
newDiv.appendChild(newSubDiv);
for (let node in menuElements.nodes) {
let newSubDiv = document.createElement("div");
newSubDiv.className = "menuItem";
newSubDiv.innerHTML = "<i class='fa fa-fw'></i><i class='fa fa-fw'></i>" + node + "(" + menuElements.nodes[node] + ")";
newSubDiv.addEventListener('click', () => clickFunction(this.selectedNodeId, node));
newDiv.appendChild(newSubDiv);
}
for (let link in menuElements.links) {
let newSubDiv = document.createElement("div");
newSubDiv.className = "menuItem";
newSubDiv.innerHTML = "<i class='fa fa-fw'></i><i class='fa fa-fw'></i>" + link + "(" + menuElements.links[link] + ")";
newSubDiv.addEventListener('click', () => clickFunction(this.selectedNodeId, "all", link));
newDiv.appendChild(newSubDiv);
}
subMenuDom.appendChild(newDiv);
}
displayContextMenu = (e) => {
var d = document.getElementById("contextMenu");
let d = document.getElementById("contextMenu");
d.style.position = "absolute";
d.style.left = e.renderedPosition.x + 'px';
d.style.top = e.renderedPosition.y + 'px';
......@@ -239,12 +211,12 @@ export class Graph2D {
extraInfo.innerHTML = '';
const nodeSummary = this.graph2d.getNodeSummary(this.selectedNodeId);
this.getContextSubMenu("Parents", nodeSummary.parents, this.displayNodeParents, extraInfo);
this.getContextSubMenu("Children", nodeSummary.children, this.displayNodeChildren, extraInfo);
this.getContextSubMenu("Expand", nodeSummary, this.expandNodes, extraInfo);
this.getContextSubMenu("Collapse", nodeSummary, this.collapseNodes, extraInfo);
}
hideContextMenu = () => {
var d = document.getElementById("contextMenu");
let d = document.getElementById("contextMenu");
d.style.display = 'none';
}
......@@ -264,7 +236,7 @@ export class Graph2D {
filterByDate = (dateValues) => {
const startDate = new Date(dateValues[0].innerHTML);
const endDate = new Date(dateValues[1].innerHTML);
this.graph2d.filterByDate(startDate, endDate);
this.graph2d.filter([], startDate, endDate);
this.applyFilterToGraph();
}
}
\ No newline at end of file
......@@ -101,8 +101,8 @@
<div id="cy"></div>
<div id="contextMenu" oncontextmenu="return false">
<div><i class="fa fa-fw"></i><b>Node</b></div>
<div class="menuItem" id="deleteNode"><i class="fa fa-trash fa-fw"></i>Remove node</div>
<div id="extraInfo"></div>
<div class="menuItem" id="deleteNode"><i class="fa fa-trash fa-fw"></i>Remove node</div>
</div>
</div>
<div id="filters">
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment