Commit 44352114 authored by Maximilian Lapie's avatar Maximilian Lapie

Merge branch 'maximilian/newGraph' into 'master'

Maximilian/new graph

See merge request !8
parents 5cb36f88 37594968
......@@ -8,6 +8,7 @@ export class Graph2D {
selectedNodeId;
selectedNodeColor;
expandedNodes;
hoverTimeout;
constructor(dbConnector, idList, cullList){
this.dbConnector = dbConnector;
......@@ -72,6 +73,9 @@ 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));
......@@ -89,7 +93,7 @@ export class Graph2D {
this.selectedNodeId = parseInt(e.target._private.data.id);
this.selectedNodeColor = e.target._private.data.color;
this.cy.getElementById(this.selectedNodeId).style("backgroundColor", "yellow");
this.graph2d.notNeighbors([this.selectedNodeId]).map(id => this.cy.getElementById(id).style("opacity", "0.2"));
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;
......@@ -109,6 +113,7 @@ export class Graph2D {
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) {
......@@ -153,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) {
......@@ -186,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();
}
}
......
......@@ -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);
......@@ -384,4 +388,16 @@ intergraph .tooltip-arrow {
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, () => document.getElementById("load-query").style.visibility = "hidden")
const entrySearch = new EntrySearch(dbConnector, () => {
document.getElementById("load-autocompletion").style.visibility = "hidden";
$('#keyword').focus();
})
dbConnector.test().then(result => {
if (!result) {
......@@ -92,7 +95,7 @@ function start(settings, login, password) {
// 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);
......@@ -208,6 +211,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) {
......@@ -277,22 +296,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;
......
<div id="main-container" class="container-fluid">
<div id="main-row" class="row">
<div id="left-panel" class="col-md-3">
<div id="load-query" class="text-center">
<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>
......
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