Skip to content
Permalink
Browse files

Add Scaling Design for SigmaJS -- partially address Issue 130 (#133)

* Add "scale up" feature.
* Make modal and page sigma outputs match.
* Move settings to instance rather than edit sigma library.
* Add babel to fix eslint parsing errors for array copying.
* More consistent matching between page and fullscreen.
* Add disabled to scale-down button.
* Set state management for up and down.
* Change tooltips.
* "Log transform" to "scale up."
  • Loading branch information...
greebie authored and ruebot committed Jun 24, 2018
1 parent 638b05a commit 9da56423bac49c326f434224329d42ff11fdba9b
@@ -1,4 +1,5 @@
{
"parser": "babel-eslint",
"extends": "airbnb-base/legacy",
"globals": {
"jQuery": true,
@@ -5,7 +5,8 @@ function createGraph(data, instance) {
instance.settings({
nodeColor: 'default',
edgeColor: 'default',
labelThreshold: 6
labelThreshold: 7,
minNodeSize: 3
});
if (instance.graph.nodes().length === 0) {
instance.graph.addNode({
@@ -32,6 +33,17 @@ function graphRender(instance) {
}
}

function increment(state) {
return state + 1;
}

function decrement(state) {
if (state <= 1) {
return 0;
}
return state - 1;
}

function zoomIn(instance) {
var camera = instance.camera;
sigma.misc.animation.camera(camera, {
@@ -51,6 +63,32 @@ function zoomOut(instance) {
});
}

function scaleUp(instance) {
var nodes = instance.graph.nodes();
nodes.forEach(x => {
if (isFinite(Math.log(x.size + 2))) {
x.size = Math.log(x.size + 2);
} else {
x.size = x.size;
}
});
instance.refresh();
}

function scaleDown(instance) {
var nodes = instance.graph.nodes();
nodes.forEach(x => {
if (isFinite(Math.exp(x.size) - 2)) {
x.size = Math.exp(x.size) - 2;
} else if (Math.exp(x.size) - 2 < 1) {
x.size = 1;
} else {
x.size = x.size;
}
});
instance.refresh();
}

function refresh(instance) {
var camera = instance.camera;
sigma.misc.animation.camera(camera, {
@@ -60,6 +98,7 @@ function refresh(instance) {
}, {
duration: 200
});
graphRender(instance);
}

function goFullScreen() {
@@ -88,6 +127,7 @@ function leaveFullScreen() {
}

$(document).on('turbolinks:load', function () {
var state = 0;
var so = new sigma({ renderers: [ // eslint-disable-line new-cap
{
container: document.getElementById('graph'),
@@ -101,37 +141,52 @@ $(document).on('turbolinks:load', function () {
}]
});
graphRender(so);
graphRender(gm);

// resize graph-modal if the window changes
$(window).on('resize', function () {
$('div#graph-modal').height($(window).height() * 0.83);
});

$('.zoom-in').on('click', function (clicked) {
if (clicked.target.id === 'modal-zoom-in' || clicked.target.parentNode.id === 'modal-zoom-in') {
zoomIn(gm);
} else {
zoomIn(so);
}
$('.zoom-in').on('click', function () {
zoomIn(gm);
zoomIn(so);
});

$('.zoom-out').on('click', function (clicked) {
if (clicked.target.id === 'modal-zoom-out' || clicked.target.parentNode.id === 'modal-zoom-out') {
zoomOut(gm);
} else {
zoomOut(so);
}
$('.zoom-out').on('click', function () {
zoomOut(gm);
zoomOut(so);
});

$('.default').on('click', function () {
refresh(gm);
refresh(so);
$('.scale-down').prop('disabled', true);
state = 0;
});

$('.default').on('click', function (clicked) {
if (clicked.target.id === 'modal-default' || clicked.target.parentNode.id === 'modal-default') {
refresh(gm);
$('.scale-up').on('click', function () {
state = increment(state);
increment(state);
$('.scale-down').prop('disabled', false);
scaleUp(gm);
scaleUp(so);
});

$('.scale-down').on('click', function () {
if (state >= 1) {
state = decrement(state);
scaleDown(gm);
scaleDown(so);
if (state == 0) {
$('.scale-down').prop('disabled', true);
}
} else {
refresh(so);
$('.scale-down').prop('disabled', true);
}
});

$('button#modal-click').on('click', function () {
$('span#modal-click').on('click', function () {
goFullScreen();
});

@@ -141,8 +196,8 @@ $(document).on('turbolinks:load', function () {

// display sigma when modal is launched.
$('body').on('shown.bs.modal', function () {
var id = $('div#graph-modal').data('gexf');
createGraph(id, gm);
gm.renderers[0].resize();
gm.refresh();
});

// remove sigma on hidden modal.

Large diffs are not rendered by default.

@@ -73,7 +73,7 @@ sorttable = {
for (var i=0; i<sortbottomrows.length; i++) {
tfo.appendChild(sortbottomrows[i]);
}
delete sortbottomrows;
delete sortbottomrows; // eslint-disable-line no-param-reassign
}

// work through each column and calculate its type
@@ -10,18 +10,24 @@
</div>
<div id="graph-modal-body" class="modal-body">
<div id="graph-modal-wrapper">
<button type="button" id="modal-exit-fullscreen" data-dismiss="modal">
<button type="button" id="modal-exit-fullscreen" data-dismiss="modal" data-toggle="tooltip" title="Exit full screen">
<span class="fa fa-compress"></span>
</button>
<button type="button" id="modal-zoom-in" class="zoom-in">
<button type="button" id="modal-zoom-in" class="zoom-in" data-toggle="tooltip" title="Zoom in graph.">
<span class="fa fa-search-plus"></span>
</button>
<button type="button" id="modal-zoom-out" class="zoom-out">
<button type="button" id="modal-zoom-out" class="zoom-out" data-toggle="tooltip" title="Zoom out graph.">
<span class="fa fa-search-minus"></span>
</button>
<button type="button" id="modal-default" class="default">
<button type="button" id="modal-default" class="default" data-toggle="tooltip" title="Restore graph to original settings">
<span class="fa fa-refresh"></span>
</button>
<button type="button" id="modal-scale-up" class="scale-up" data-toggle="tooltip" data-html="true" title="Scale up node sizes.">
<span class="fa fa-level-up"></span>
</button>
<button type="button" id="modal-scale-down" class="scale-down" data-toggle="tooltip" title="Scale down node sizes." disabled>
<span class="fa fa-level-down"></span>
</button>
<div id="graph-modal"></div>
</div>
</div>
@@ -37,18 +43,25 @@
<% unless display_gexf(@user.id, @collection.id, @collection.account).blank? %>
<h2>Hyperlink Diagram</h2>
<div id="graph-wrapper">
<button type="button" id="modal-click" data-toggle="modal" data-target="#sigma-fullscreen">
<span id="modal-click" data-toggle="modal" data-target="#sigma-fullscreen">
<button type="button" data-toggle="tooltip" data-placement="top" title="Make graph full screen.">
<span class="fa fa-expand"></span>
</button>
<button type="button" id="zoom-in" class="zoom-in">
</button></span>
<button type="button" id="zoom-in" class="zoom-in" data-toggle="tooltip" data-placement="top" title="Zoom in graph.">
<span class="fa fa-search-plus"></span>
</button>
<button type="button" id="zoom-out" class="zoom-out">
<button type="button" id="zoom-out" class="zoom-out" data-toggle="tooltip" data-placement="top" title="Zoom out graph.">
<span class="fa fa-search-minus"></span>
</button>
<button type="button" id="default" class="default">
<button type="button" id="default" class="default" data-toggle="tooltip" data-placement="top" title="Restore graph to original settings">
<span class="fa fa-refresh"></span>
</button>
<button type="button" id="scale-up" class="scale-up" data-toggle="tooltip" data-html="true" title="Scale up node sizes.">
<span class="fa fa-level-up"></span>
</button>
<button type="button" id="scale-down" class="scale-down" data-toggle="tooltip" data-placement="top" title="Scale down node sizes." disabled>
<span class="fa fa-level-down"></span>
</button>
<div id="graph"></div>
</div>
<%= javascript_tag do %>

0 comments on commit 9da5642

Please sign in to comment.
You can’t perform that action at this time.