1
0
Fork 0

Merge branch 'devel' of ssh://github.com/ArangoDB/ArangoDB into devel

This commit is contained in:
Max Neunhoeffer 2016-07-20 15:16:59 -07:00
commit ce35cd70e9
14 changed files with 141 additions and 55 deletions

File diff suppressed because one or more lines are too long

View File

@ -2705,4 +2705,4 @@ var cutByResolution = function (str) {
</div> </div>
<div id="workMonitorContent" class="innerContent"> <div id="workMonitorContent" class="innerContent">
</div></script></head><body><nav class="navbar" style="display: none"><div class="primary"><div class="navlogo"><a class="logo big" href="#"><img class="arangodbLogo" src="img/arangodb_logo_big.png"></a><a class="logo small" href="#"><img class="arangodbLogo" src="img/arangodb_logo_small.png"></a><a class="version"><span>VERSION: </span><span id="currentVersion"></span></a></div><div class="statmenu" id="statisticBar"></div><div class="navmenu" id="navigationBar"></div></div></nav><div id="modalPlaceholder"></div><div class="bodyWrapper" style="display: none"><div class="centralRow"><div id="navbar2" class="navbarWrapper secondary"><div class="subnavmenu" id="subNavigationBar"></div></div><div class="resizecontainer contentWrapper"><div id="loadingScreen" class="loadingScreen" style="display: none"><i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i> <span class="sr-only">Loading...</span></div><div id="content" class="centralContent"></div><footer class="footer"><div id="footerBar"></div></footer></div></div></div><div id="progressPlaceholder" style="display:none"></div><div id="spotlightPlaceholder" style="display:none"></div><div id="graphSettingsContent" style="display: none"></div><div id="offlinePlaceholder" style="display:none"><div class="offline-div"><div class="pure-u"><div class="pure-u-1-4"></div><div class="pure-u-1-2 offline-window"><div class="offline-header"><h3>You have been disconnected from the server</h3></div><div class="offline-body"><p>The connection to the server has been lost. The server may be under heavy load.</p><p>Trying to reconnect in <span id="offlineSeconds">10</span> seconds.</p><p class="animation_state"><span><button class="button-success">Reconnect now</button></span></p></div></div><div class="pure-u-1-4"></div></div></div></div><div class="arangoFrame" style=""><div class="outerDiv"><div class="innerDiv"></div></div></div><script src="libs.js?version=1469011994006"></script><script src="app.js?version=1469011994006"></script></body></html> </div></script></head><body><nav class="navbar" style="display: none"><div class="primary"><div class="navlogo"><a class="logo big" href="#"><img class="arangodbLogo" src="img/arangodb_logo_big.png"></a><a class="logo small" href="#"><img class="arangodbLogo" src="img/arangodb_logo_small.png"></a><a class="version"><span>VERSION: </span><span id="currentVersion"></span></a></div><div class="statmenu" id="statisticBar"></div><div class="navmenu" id="navigationBar"></div></div></nav><div id="modalPlaceholder"></div><div class="bodyWrapper" style="display: none"><div class="centralRow"><div id="navbar2" class="navbarWrapper secondary"><div class="subnavmenu" id="subNavigationBar"></div></div><div class="resizecontainer contentWrapper"><div id="loadingScreen" class="loadingScreen" style="display: none"><i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i> <span class="sr-only">Loading...</span></div><div id="content" class="centralContent"></div><footer class="footer"><div id="footerBar"></div></footer></div></div></div><div id="progressPlaceholder" style="display:none"></div><div id="spotlightPlaceholder" style="display:none"></div><div id="graphSettingsContent" style="display: none"></div><div id="offlinePlaceholder" style="display:none"><div class="offline-div"><div class="pure-u"><div class="pure-u-1-4"></div><div class="pure-u-1-2 offline-window"><div class="offline-header"><h3>You have been disconnected from the server</h3></div><div class="offline-body"><p>The connection to the server has been lost. The server may be under heavy load.</p><p>Trying to reconnect in <span id="offlineSeconds">10</span> seconds.</p><p class="animation_state"><span><button class="button-success">Reconnect now</button></span></p></div></div><div class="pure-u-1-4"></div></div></div></div><div class="arangoFrame" style=""><div class="outerDiv"><div class="innerDiv"></div></div></div><script src="libs.js?version=1469030052510"></script><script src="app.js?version=1469030052510"></script></body></html>

File diff suppressed because one or more lines are too long

View File

@ -676,6 +676,9 @@
return; return;
} }
if (this.graphViewer2) { if (this.graphViewer2) {
if (this.graphViewer2.graphSettingsView) {
this.graphViewer2.graphSettingsView.remove();
}
this.graphViewer2.remove(); this.graphViewer2.remove();
} }
this.graphViewer2 = new window.GraphViewer2({ this.graphViewer2 = new window.GraphViewer2({

View File

@ -148,7 +148,7 @@
events: { events: {
'click #saveGraphSettings': 'saveGraphSettings', 'click #saveGraphSettings': 'saveGraphSettings',
'click #restoreGraphSettings': 'restoreGraphSettings', 'click #restoreGraphSettings': 'setDefaults',
'keyup #graphSettingsView input': 'checkEnterKey', 'keyup #graphSettingsView input': 'checkEnterKey',
'keyup #graphSettingsView select': 'checkEnterKey', 'keyup #graphSettingsView select': 'checkEnterKey',
'change input[type="range"]': 'saveGraphSettings', 'change input[type="range"]': 'saveGraphSettings',
@ -183,31 +183,34 @@
}, },
checkColor: function () { checkColor: function () {
this.saveGraphSettings(true); this.saveGraphSettings(null, true);
}, },
saveGraphSettings: function (color, nodeStart) { saveGraphSettings: function (event, color, nodeStart, overwrite) {
var self = this; var self = this;
console.log('CLICK');
var combinedName = window.App.currentDB.toJSON().name + '_' + this.name; var combinedName = window.App.currentDB.toJSON().name + '_' + this.name;
var config = {}; var config = {};
config[combinedName] = { if (overwrite) {
layout: $('#g_layout').val(), config[combinedName] = overwrite;
renderer: $('#g_renderer').val(), } else {
depth: $('#g_depth').val(), config[combinedName] = {
nodeColor: $('#g_nodeColor').val(), layout: $('#g_layout').val(),
nodeLabelThreshold: $('#g_nodeLabelThreshold').val(), renderer: $('#g_renderer').val(),
edgeColor: $('#g_edgeColor').val(), depth: $('#g_depth').val(),
edgeLabelThreshold: $('#g_edgeLabelThreshold').val(), nodeColor: $('#g_nodeColor').val(),
nodeLabel: $('#g_nodeLabel').val(), nodeLabelThreshold: $('#g_nodeLabelThreshold').val(),
edgeLabel: $('#g_edgeLabel').val(), edgeColor: $('#g_edgeColor').val(),
edgeType: $('#g_edgeType').val(), edgeLabelThreshold: $('#g_edgeLabelThreshold').val(),
nodeSize: $('#g_nodeSize').val(), nodeLabel: $('#g_nodeLabel').val(),
edgeSize: $('#g_edgeSize').val(), edgeLabel: $('#g_edgeLabel').val(),
nodeStart: $('#g_nodeStart').val() edgeType: $('#g_edgeType').val(),
}; nodeSize: $('#g_nodeSize').val(),
edgeSize: $('#g_edgeSize').val(),
nodeStart: $('#g_nodeStart').val()
};
}
if (nodeStart) { if (nodeStart) {
config[combinedName].nodeStart = nodeStart; config[combinedName].nodeStart = nodeStart;
@ -215,7 +218,7 @@
var callback = function () { var callback = function () {
if (window.App.graphViewer2) { if (window.App.graphViewer2) {
if (color) { if (color !== '' && color !== undefined) {
window.App.graphViewer2.updateColors(); window.App.graphViewer2.updateColors();
} else { } else {
window.App.graphViewer2.render(self.lastFocussed); window.App.graphViewer2.render(self.lastFocussed);
@ -229,7 +232,22 @@
}, },
setDefaults: function () { setDefaults: function () {
console.log('implement me!'); var obj = {
layout: 'force',
renderer: 'canvas',
depth: '2',
nodeColor: '#2ecc71',
nodeLabelThreshold: 10,
edgeColor: $('#g_edgeColor').val(),
edgeLabelThreshold: 10,
nodeLabel: '_key',
edgeLabel: '',
edgeType: 'line',
nodeSize: '',
edgeSize: '',
nodeStart: ''
};
this.saveGraphSettings(null, null, null, obj);
}, },
toggle: function () { toggle: function () {

View File

@ -46,12 +46,15 @@
'click #downloadPNG': 'downloadSVG', 'click #downloadPNG': 'downloadSVG',
'click #reloadGraph': 'reloadGraph', 'click #reloadGraph': 'reloadGraph',
'click #settingsMenu': 'toggleSettings', 'click #settingsMenu': 'toggleSettings',
'click #noGraphToggle': 'toggleSettings' 'click #noGraphToggle': 'toggleSettings',
'click #toggleForce': 'toggleLayout'
}, },
cursorX: 0, cursorX: 0,
cursorY: 0, cursorY: 0,
layouting: false,
model: null, model: null,
viewStates: { viewStates: {
@ -161,7 +164,7 @@
vertices[node._id] = { vertices[node._id] = {
id: node._id, id: node._id,
label: node._key, label: node._key,
size: 10, size: 0.3,
color: '#2ecc71', color: '#2ecc71',
x: Math.random(), x: Math.random(),
y: Math.random() y: Math.random()
@ -195,7 +198,7 @@
returnObj.nodes.push({ returnObj.nodes.push({
id: key, id: key,
label: key, label: key,
size: 10, size: 0.3,
color: '#2ecc71', color: '#2ecc71',
x: Math.random(), x: Math.random(),
y: Math.random() y: Math.random()
@ -862,7 +865,7 @@
// For instance, reset all node size as their initial size // For instance, reset all node size as their initial size
sigmaInstance.graph.nodes().forEach(function (node) { sigmaInstance.graph.nodes().forEach(function (node) {
node.color = self.graphConfig.nodeColor; node.color = self.graphConfig.nodeColor ? self.graphConfig.nodeColor : 'rgb(46, 204, 113)';
}); });
// Then increase the size of selected nodes... // Then increase the size of selected nodes...
@ -891,7 +894,7 @@
); );
return; return;
} else { } else {
var style = 'right: 25px; bottom: 45px;'; var style = 'position: absolute; left: 25px; bottom: 45px;';
if (this.aqlMode) { if (this.aqlMode) {
style = 'position: absolute; left: 30px; margin-top: -37px;'; style = 'position: absolute; left: 30px; margin-top: -37px;';
} }
@ -1042,7 +1045,7 @@
if (counter < 15) { if (counter < 15) {
if (typeof val === 'string') { if (typeof val === 'string') {
if (val.length > 10) { if (val.length > 10) {
obj[key] = val.substr(0, 10) + ' ...'; obj[key] = val.substr(0, 15) + ' ...';
} else { } else {
obj[key] = val; obj[key] = val;
} }
@ -1090,10 +1093,12 @@
} }
}); });
s.bind('rightClickNode', function (e) { if (!this.aqlMode) {
var nodeId = e.data.node.id; s.bind('rightClickNode', function (e) {
self.createNodeContextMenu(nodeId, e); var nodeId = e.data.node.id;
}); self.createNodeContextMenu(nodeId, e);
});
}
s.bind('doubleClickNode', function (e) { s.bind('doubleClickNode', function (e) {
var nodeId = e.data.node.id; var nodeId = e.data.node.id;
@ -1137,15 +1142,27 @@
}); });
} }
var dragListener;
// Initialize the dragNodes plugin: // Initialize the dragNodes plugin:
if (algorithm === 'noverlap') { if (algorithm === 'noverlap') {
s.startNoverlap(); s.startNoverlap();
// allow draggin nodes // allow draggin nodes
dragListener = sigma.plugins.dragNodes(s, s.renderers[0]); sigma.plugins.dragNodes(s, s.renderers[0]);
} else if (algorithm === 'force') { } else if (algorithm === 'force') {
s.startForceAtlas2({worker: true, barnesHutOptimize: false}); // add buttons for start/stopping calculation
var style2 = 'color: rgb(64, 74, 83); cursor: pointer; position: absolute; right: 30px; bottom: 40px;';
if (self.aqlMode) {
style2 = 'color: rgb(64, 74, 83); cursor: pointer; position: absolute; right: 30px; margin-top: -30px;';
}
$(this.el).append(
'<div id="toggleForce" style="' + style2 + '">' +
'<i class="fa fa-pause"></i>' +
'</div>'
);
self.startLayout();
// suggestion rendering time
var duration = 3000; var duration = 3000;
if (graph.nodes.length > 2500) { if (graph.nodes.length > 2500) {
@ -1154,17 +1171,16 @@
duration = 500; duration = 500;
} }
// dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);
window.setTimeout(function () { window.setTimeout(function () {
s.stopForceAtlas2(); self.stopLayout();
dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);
console.log(dragListener);
}, duration); }, duration);
} else if (algorithm === 'fruchtermann') { } else if (algorithm === 'fruchtermann') {
// Start the Fruchterman-Reingold algorithm: // Start the Fruchterman-Reingold algorithm:
sigma.layouts.fruchtermanReingold.start(s); sigma.layouts.fruchtermanReingold.start(s);
dragListener = sigma.plugins.dragNodes(s, s.renderers[0]); sigma.plugins.dragNodes(s, s.renderers[0]);
} else { } else {
dragListener = sigma.plugins.dragNodes(s, s.renderers[0]); sigma.plugins.dragNodes(s, s.renderers[0]);
} }
// add listener to keep track of cursor position // add listener to keep track of cursor position
@ -1176,10 +1192,20 @@
$('#' + toFocus).focus(); $('#' + toFocus).focus();
} }
var enableLasso = function () {
self.graphLasso = self.initializeGraph(s, graph);
self.graphLasso.activate();
self.graphLasso.deactivate();
};
// init graph lasso // init graph lasso
self.graphLasso = self.initializeGraph(s, graph); if (this.graphConfig) {
self.graphLasso.activate(); if (this.graphConfig.renderer !== 'canvas') {
self.graphLasso.deactivate(); enableLasso();
}
} else {
enableLasso();
}
// add lasso event // add lasso event
// Toggle lasso activation on Alt + l // Toggle lasso activation on Alt + l
@ -1199,6 +1225,31 @@
// clear up info div // clear up info div
$('#calculatingGraph').remove(); $('#calculatingGraph').remove();
},
toggleLayout: function () {
if (this.layouting) {
this.stopLayout();
} else {
this.startLayout();
}
},
startLayout: function () {
$('#toggleForce .fa').removeClass('fa-play').addClass('fa-pause');
this.layouting = true;
this.currentGraph.startForceAtlas2({
worker: true,
barnesHutOptimize: false
});
sigma.plugins.dragNodes(this.currentGraph, this.currentGraph.renderers[0]);
},
stopLayout: function () {
$('#toggleForce .fa').removeClass('fa-pause').addClass('fa-play');
this.layouting = false;
this.currentGraph.stopForceAtlas2();
sigma.plugins.dragNodes(this.currentGraph, this.currentGraph.renderers[0]);
} }
}); });

View File

@ -1477,7 +1477,9 @@
var result = self.analyseQuery(data.result); var result = self.analyseQuery(data.result);
console.log('Using ' + result.defaultType + ' as data format.'); console.log('Using ' + result.defaultType + ' as data format.');
if (result.defaultType === 'table') { if (result.defaultType === 'table') {
$('#outputEditorWrapper' + counter + ' .arangoToolbarTop').after('<div id="outputTable' + counter + '"></div>'); $('#outputEditorWrapper' + counter + ' .arangoToolbarTop').after(
'<div id="outputTable' + counter + '" class="outputTable"></div>'
);
$('#outputTable' + counter).show(); $('#outputTable' + counter).show();
self.renderOutputTable(result, counter); self.renderOutputTable(result, counter);

View File

@ -43,10 +43,11 @@
} }
.nodeInfoDiv { .nodeInfoDiv {
left: 25px; left: 175px;
overflow: hidden; overflow: hidden;
position: absolute; position: fixed;
top: 130px; top: 130px;
z-index: 10;
pre { pre {
background-color: rgba(64, 74, 83, .9); background-color: rgba(64, 74, 83, .9);

View File

@ -266,7 +266,7 @@
} }
.aceAction { .aceAction {
background-color: rgb(133, 133, 133); background-color: $c-bluegrey-dark;
border-radius: 3px; border-radius: 3px;
color: $c-white; color: $c-white;
cursor: pointer; cursor: pointer;
@ -365,6 +365,10 @@
} }
} }
.outputTable {
margin-right: -2px;
}
.graphContent { .graphContent {
border-left: 1px solid $c-content-border; border-left: 1px solid $c-content-border;
border-right: 1px solid $c-content-border; border-right: 1px solid $c-content-border;
@ -373,7 +377,7 @@
} }
.switchAce { .switchAce {
background-color: rgba(0, 0, 0, .6); background-color: $c-bluegrey-dark;
border-radius: 3px; border-radius: 3px;
color: $c-white; color: $c-white;
cursor: pointer; cursor: pointer;
@ -383,6 +387,8 @@
z-index: 10; z-index: 10;
span { span {
margin-left: 0;
padding: 0 8px;
top: 0; top: 0;
&.active { &.active {

View File

@ -22,6 +22,11 @@
@media (max-width: 568px) { @media (max-width: 568px) {
//GRAPHVIEWER
.nodeInfoDiv {
left: 65px;
}
//PAGINATION //PAGINATION
.pagination-line { .pagination-line {