Commit 682d5feb authored by Themousaillon's avatar Themousaillon

Merge branch 'maximilian/newGraph' into nicolas/feature

Adding graph2d fixes
parents 8689854f 37594968
......@@ -2,7 +2,6 @@
"database": {
"name": "Regesta Imperii Friedrich III.",
"url": "bolt://blizaar-lab.recherche.cergy.eisti.fr:7687",
"url": "bolt://localhost:7687",
"login": "neo4j",
"password": "1234"
},
......
......@@ -6,7 +6,9 @@ export class Graph2D {
nodes;
edges;
selectedNodeId;
selectedNodeColor;
expandedNodes;
hoverTimeout;
constructor(dbConnector, idList, cullList){
this.dbConnector = dbConnector;
......@@ -31,8 +33,16 @@ export class Graph2D {
style: {
'label': 'data(label)',
'text-wrap': 'ellipsis',
'text-max-width': '100px',
'background-color': 'data(color)'
'text-max-width': '150px',
'background-color': 'data(color)',
'text-background-color': 'white',
'text-background-opacity': 1,
'text-background-padding': '1px',
'text-border-opacity': 1,
'text-border-color': 'white',
'text-border-width': '1px',
'text-border-style': 'solid',
'text-margin-y': '-2px'
}
},
{
......@@ -63,11 +73,58 @@ export class Graph2D {
layout.run();
this.filterByDate([document.getElementById('filter-date-start'), document.getElementById('filter-date-end')]);
this.applyFilterToGraph();
this.cy.elements().nodes().on('cxttap', (e) => this.displayContextMenu(e));
this.cy.elements().nodes().on('mouseover', (e) => this.highlightNode(e));
this.cy.elements().nodes().on('mouseout', (e) => this.deEmphasizeNode(e));
this.cy.on('tapstart', this.hideContextMenu);
}
showTooltip = () => {
this.cy.getElementById(this.selectedNodeId).style('text-wrap', 'none');
this.cy.getElementById(this.selectedNodeId).style('text-background-color', 'yellow');
this.cy.getElementById(this.selectedNodeId).style('text-border-color', 'black');
}
highlightNode = (e) => {
this.selectedNodeId = parseInt(e.target._private.data.id);
this.selectedNodeColor = e.target._private.data.color;
this.cy.getElementById(this.selectedNodeId).style("backgroundColor", "yellow");
this.hoverTimeout = setTimeout(() => this.graph2d.notNeighbors([this.selectedNodeId]).map(id => this.cy.getElementById(id).style("opacity", "0.2")), 2000);
const associatedSearchRows = [...document.getElementsByTagName("tr")].filter(row => {
if ("data-id" in row.attributes) {
return parseInt(row.attributes["data-id"].value) === this.selectedNodeId;
}
return false;
});
associatedSearchRows.map(row => row.getElementsByTagName("td")[0].style.backgroundColor = "rgb(255, 255, 70)");
this.showTooltip();
}
hideTooltip = () => {
this.cy.getElementById(this.selectedNodeId).style('text-wrap', 'ellipsis');
this.cy.getElementById(this.selectedNodeId).style('text-background-color', 'white');
this.cy.getElementById(this.selectedNodeId).style('text-border-color', 'white');
}
deEmphasizeNode = (e) => {
let highlightedNode = this.cy.getElementById(this.selectedNodeId);
highlightedNode.style("backgroundColor", this.selectedNodeColor);
clearTimeout(this.hoverTimeout);
this.cy.nodes().map(node => node.style("opacity", "1"));
const associatedSearchRows = [...document.getElementsByTagName("tr")].filter(row => {
if ("data-id" in row.attributes) {
return parseInt(row.attributes["data-id"].value) === this.selectedNodeId;
}
return false;
});
associatedSearchRows.map(row => row.getElementsByTagName("td")[0].style.backgroundColor = this.selectedNodeColor + "aa");
this.hideTooltip();
}
deleteNode = () => {
this.graph2d.removeComponents([this.selectedNodeId])((type, id) => {
if (type === "node") {
......@@ -87,7 +144,10 @@ export class Graph2D {
group: 'nodes',
data: element,
position: { x: cX + 200 * Math.cos(a), y: cY + 200 * Math.sin(a) }
}).on('cxttap', (e) => this.displayContextMenu(e));
})
.on('cxttap', (e) => this.displayContextMenu(e))
.on('mouseover', (e) => this.highlightNode(e))
.on('mouseout', (e) => this.deEmphasizeNode(e));
} else {
this.cy.add({
group: 'edges',
......@@ -98,6 +158,7 @@ export class Graph2D {
}
expandOrCollapse = (type, summaryNodeTypes, collapseFunction, getNodesFunction) => {
this.hideContextMenu();
let expandedNode = this.expandedNodes.get(this.selectedNodeId);
let displayNodes = true;
if (expandedNode) {
......@@ -131,11 +192,9 @@ export class Graph2D {
getNodesFunction([this.selectedNodeId], type)(this.displayNewElements);
this.graph2d.mutate().then(() => {
this.applyFilterToGraph();
this.hideContextMenu();
});
} else {
this.applyFilterToGraph();
this.hideContextMenu();
}
}
......@@ -152,9 +211,9 @@ export class Graph2D {
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());
newDiv.style.cursor = 'pointer';
extraInfo.appendChild(newDiv);
for (let menuElement in menuElements) {
newDiv = document.createElement("div");
......@@ -168,7 +227,6 @@ export class Graph2D {
}
displayContextMenu = (e) => {
this.selectedNodeId = parseInt(e.target._private.data.id);
var d = document.getElementById("contextMenu");
d.style.position = "absolute";
d.style.left = e.renderedPosition.x + 'px';
......@@ -191,8 +249,12 @@ export class Graph2D {
}
addNodeIds = (nodeIds) => {
document.getElementById('load-graph2D').style.display = "flex";
this.graph2d.fetchFromIds(nodeIds)(x => x);
this.graph2d.mutate().then(() => this.showGraph2D());
this.graph2d.mutate().then(() => {
document.getElementById('load-graph2D').style.display = "none";
this.showGraph2D();
});
}
applyFilterToGraph = () => {
......
......@@ -284,6 +284,10 @@ intergraph .panel-heading.selected {
background-color: rgba(255,255,0,0.5) !important;
}
intergraph #generate-btn-container {
margin-top: 5px;
}
intergraph #multiselect-feedback {
width: 100%;
height: 90%;
......@@ -296,7 +300,7 @@ intergraph #multiselect-feedback {
intergraph #select-count {
z-index: 1;
position: absolute;
margin-top: 42px;
margin-top: 84px;
margin-left: 10px;
padding: 2px;
background-color: rgba(255,255,0,0.1);
......@@ -375,4 +379,25 @@ intergraph .tooltip-arrow {
.menuItem:hover {
background-color: blue;
cursor: pointer;
}
#load-graph2D {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
display: none;
position: absolute;
}
#load-autocompletion {
position: absolute;
left: 0;
display: flex;
height: 100vh;
width: 100%;
align-items: center;
justify-content: center;
z-index: 3;
background-color: rgba(127, 127, 127, 0.5);
}
\ No newline at end of file
......@@ -77,7 +77,10 @@ function setupDateFilter(app, newGraph, id, start, end) {
function start(settings, login, password) {
let url = settings.database.url;
let dbConnector = new dbConnectorConstructor(settings, url, login, password);
const entrySearch = new EntrySearch(dbConnector)
const entrySearch = new EntrySearch(dbConnector, () => {
document.getElementById("load-autocompletion").style.visibility = "hidden";
$('#keyword').focus();
})
dbConnector.test().then(result => {
if (!result) {
......@@ -91,7 +94,7 @@ function start(settings, login, password) {
testGraph2d(dbConnector)
// Setup interface
$('#db_name').html(settings.database.name);
$('#keyword').focus();
//$('#keyword').focus();
$('#keyword').prop('placeholder', settings.keywordSearch.placeholder);
settings.keywordSearch.selection.forEach((s) => {
let o = new Option(s.option, s.layer);
......@@ -207,6 +210,22 @@ function start(settings, login, password) {
app.frame.emptyCurrentNodes();
}
$('#graphselector button').click(function() {
$(this).addClass('active').siblings().removeClass('active');
if (this.id == "cytocanvas") {
$('#graph').hide();
$('#graph2D').show();
$('#generate-btn').hide();
$('#addToGraphButton').show();
} else {
$('#graph').show();
$('#graph2D').hide();
$('#generate-btn').show();
$('#addToGraphButton').hide();
$('#contextMenu').hide();
}
});
$( "#queryButton" ).click(query);
$( "#keyword" ).keypress(function(e) {
if(e.which == 13) {
......@@ -223,7 +242,6 @@ function start(settings, login, password) {
$("#keyword").attr("list", "suggestions")
const options = results.slice(0, 20).map(r => new Option("", r))
$("#suggestions").append(options)
})
$('#union-btn').click(table);
......@@ -277,22 +295,6 @@ function start(settings, login, password) {
return false;
});
$('#changeGraphButton').click(() => {
let graph3D = $('#graph').is(':visible');
if (graph3D) {
$('#graph').hide();
$('#graph2D').show();
$('#generate-btn').hide();
$('#addToGraphButton').show();
} else {
$('#graph').show();
$('#graph2D').hide();
$('#generate-btn').show();
$('#addToGraphButton').hide();
$('#contextMenu').hide();
}
});
$('#generate-btn').click(() => {
let idsList = [];
let count = 0;
......
......@@ -4,6 +4,9 @@
<div id="load-query" class="text-center" style="visibility: hidden">
<img src="/img/loader.gif" class="loader"/>
</div>
<div id="load-autocompletion">
<img src="/img/loading_autocompletion.gif" />
</div>
<h1>Intergraph</h1>
<h4 id="db_name">&nbsp;</h4>
<div id="tabs">
......@@ -61,7 +64,7 @@
</div>
<div role="tabpanel" class="tab-pane fade" id="setting" aria-labelledby="setting-tab">
<h4>About</h4>
Version 1.<span id="version"></span>
Version 2.<span id="version"></span>
<br><br>
<div id="gui"></div>
</div>
......@@ -71,14 +74,17 @@
<div id="center-panel" class="col-md-9">
<button type="button" class="btn" id="toggle-right-panel-canvas"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
<div id="topButtons">
<button id="changeGraphButton" class="btn">Change graph</button>
<span id="generate-btn-container" hidden>
<div id="graphselector" class="btn-group btn-group-toggle">
<button type="button" id="threecanvas" class="btn active">Threecanvas</button>
<button type="button" id="cytocanvas" class="btn">Cytocanvas</button>
</div>
<div id="generate-btn-container" hidden>
<button id="generate-btn" class="btn btn-primary" disabled>Generate graph</button>
<button id="addToGraphButton" class="btn btn-primary" disabled>Add to graph</button>
<button id="union-btn" class="btn btn-info" disabled>Generate table</button>
<button id="clear-btn" class="btn btn-warning" disabled>Clear selection</button>
<b><span id="select-count-v">0</span> <span id="select-count-t">element</span> selected</b>
</span>
</div>
</div>
<span id='select-count' style="visibility: hidden">
<div id="select-count-l"></div>
......@@ -89,6 +95,9 @@
</div>
</div>
<div id="graph2D" hidden>
<div id="load-graph2D">
<img src="/img/loader.gif" class="loader"/>
</div>
<div id="cy"></div>
<div id="contextMenu" oncontextmenu="return false">
<div><i class="fa fa-fw"></i><b>Node</b></div>
......
......@@ -132,7 +132,17 @@ module.exports = class NodeList {
this.container.find('#' + this.tabId + ' tbody').on( 'mouseenter', 'tr', (e) => {
let tr = $(e.currentTarget);
let id = tr.data('id');
/* Code for 2D graph */
const graph2D = document.getElementById('cy');
if (graph2D._cyreg) {
const cyNode = graph2D._cyreg.cy._private.elements.getElementById(id);
if (cyNode.length != 0) {
cyNode.style("backgroundColor", "yellow");
}
}
/* */
this.currentNode = this.nodes.find(node => node.id == id);
let node = new Node();
......@@ -150,6 +160,19 @@ module.exports = class NodeList {
});
this.container.find('#' + this.tabId + ' tbody').on( 'mouseleave', 'tr', (e) => {
/* Code for 2D graph */
let tr = $(e.currentTarget);
let id = tr.data('id');
const graph2D = document.getElementById('cy');
if (graph2D._cyreg) {
const cyNode = graph2D._cyreg.cy._private.elements.getElementById(id);
if (cyNode.length != 0) {
const nodeColor = cyNode._private.data.color;
cyNode.style("backgroundColor", nodeColor);
}
}
/* */
if (!$('#main-container').hasClass('context-menu-active')) {
this.type = '';
this.app.frame.setCurrentNode(null);
......
module.exports = { version: '306' }
module.exports = { version: '126' }
echo "module.exports = { version: '$(git rev-list HEAD --count)' }" > src/misc/version.js
\ No newline at end of file
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