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."
archivesunleashed · Jun 24, 2018 · 9da56423bac49c326f434224329d42ff11fdba9b · 9da5642
1 parent 638b05a
commit 9da56423bac49c326f434224329d42ff11fdba9b
diff --git a/.eslintrc b/.eslintrc
@@ -1,4 +1,5 @@
 {
+  
+  "parser": "babel-eslint",
  "extends": "airbnb-base/legacy",
  "globals": {
    "jQuery": true,

diff --git a/app/assets/javascripts/graphs.js b/app/assets/javascripts/graphs.js
@@ -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.

diff --git a/app/assets/javascripts/sigma.min.js b/app/assets/javascripts/sigma.min.js
diff --git a/app/assets/javascripts/sorttable.js b/app/assets/javascripts/sorttable.js
@@ -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

diff --git a/app/views/collections/show.html.erb b/app/views/collections/show.html.erb
@@ -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 %>