mplexviz-ngraph - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

lib/mplexviz.js

@@ -0,1 +1,2 @@
+var $ = require('jquery');
 var Backbone = require("backbone");
@@ -5,163 +6,94 @@ var mplexnet = require("mplexnet");
 var createGraph = require('ngraph.graph');
-var nthree = require('ngraph.three');
-var mplexLayout = require('multilayerlayout3d');
 var _ = require('lodash');
-var niceColors = [
-    0x2ca02c, 0xf7b6d2,
-    0xd62728, 0xff9896,
-    0x1f77b4, 0xaec7e8,
-    0xff7f0e, 0xffbb78,
-    0x9467bd, 0xc5b0d5,
-    0x8c564b, 0xc49c94,
-    0xe377c2, 0x98df8a,
-    0x7f7f7f, 0xc7c7c7,
-    0xbcbd22, 0xdbdb8d,
-    0x17becf, 0x9edae5
-];
-var physicsSettings = {
-    springLength: 40,
-    springCoeff: 0.00008,
-    gravity: -1.1,
-    theta: 0.8,
-    dragCoeff: 0.05,
-    timeStep: 20
-};
+var MenuPanel = require('./views/menuPanel');
+var VisPanel = require('./views/visPanel');
+Backbone.View.prototype.eventAggregator = _.extend({}, Backbone.Events);
 
-//var defaultOptions = {
-//    inputFiles: 'single',
-//    inputFileDelimiter: ',',
-//    sourceFieldLabel: 'source',
-//    targetFieldLabel: 'target',
-//    loglevel: 0
-//};
 
 var Mplexviz = Backbone.View.extend({
-    initialize: function(opts){
-        /*
-            On initialisation: Create network from input. Then create a ngraph representation for that.
-         */
+    initialize: function (opts) {
         this.el = opts.el;
-        var options = opts.options || undefined;
-        var data = opts.data;
-        var input = {};
-        input.data = data; input.options = options;
-        var network = new Network(input);
-        var g = createGraph();
-        var colors = [];
+        this.el.style.height = window.innerHeight ||
+            document.documentElement.clientHeight || document.body.clientHeight;
+        this.options = opts.options;
+        this.data = opts.data;
+        this.network = {};
+        this.graph = {};
 
         /*
-            For each node in network create node in ngraph
+         Create Views
          */
-        var layers_ = [];
-        var layers = [];
-        var layerIds = [];
-        network.get('nodes').each(function (node) {
-            layers_.push(node.get('layer').attributes);
-            g.addNode(node.get('id'), node.toJSON()); //TODO: Why not use real Backbone models?
+        var menuEl = document.createElement("div");
+        this.el.appendChild(menuEl);
+        this.menu = new MenuPanel({
+            el: menuEl
         });
+        this.menu.render();
 
+        var modal = document.createElement("div");
+        modal.id = "modal";
+        modal.className += 'modal fade';
+        modal.innerHTML += '<div class=modal-dialog>' +
+            '<p>Calculating...</p>' +
+            '</div>';
+        this.el.appendChild(modal);
 
-        /*
-         Create color for each layer
-         */
 
-        // Get unique layers
-        for (var l in layers_) {
-            var found = _(layers).find(function (x) { return _.eq(layers_[l], x) });
-            if (!found) {
-                layers.push(layers_[l]);
-                layerIds.push(layers_[l].id);
-            }
-        }
+        this.listenTo(this.eventAggregator, "model:create", this.createModel);
 
-        for (i=0;i<layers.length;i++) {
-            colors.push(niceColors[i]);
+        if (!this.options || !this.options.interactive) {
+            this.eventAggregator.trigger("model:create");
         }
 
-        this.layers = layers;
-        this.colors = colors;
-
-        /*
-            For each Edge in network, get the nodes and create a link in ngraph
-         */
-
-        network.get('edges').each(function(edge) {
-            g.addLink(edge.get('source'), edge.get('target'), edge.toJSON());
+        this.listenTo(this.eventAggregator, "graph:render", this.render);
+        this.listenTo(this.eventAggregator, "graph:reset", this.resetGraph);
+    },
+    createModel: function (upload) {
+        if (upload) this.data = upload;
+        console.log("Creating model...");
+        this.network = this.graph = undefined;
+        $('#vis').remove();
+        this.network = new Network({data: this.data, options: this.options});
+        var g = createGraph();
+        //var all = this.network.get('nodes').size();
+        //var current = 0;
+        this.network.get('nodes').each(function (node) {
+            g.addNode(node.get('id'), node);
+            //console.log(++current + '/' + all);
         });
-
-        g.layers = layerIds;
-        this.network = network;
+        this.network.get('edges').each(function (edge) {
+            g.addLink(edge.get('source'), edge.get('target'), edge);
+        });
+        var l = [];
+        this.network.get('layers').each(function (layer) {
+            l.push(layer.get('id'));
+        });
+        this.layers = l;
+        g.layers = l;
         this.graph = g;
-
+        console.log("Model created!");
+        this.eventAggregator.trigger("graph:render");
     },
     render: function () {
-
-        network = this.network;
-        layers = this.layers;
-        // Helper to find nodes in network
-        var findNode = function (id) {
-            temp = network.get('nodes');
-            res = temp.find(function(node) { return node.get('id') === id; });
-            return res;
-        };
-
-        /*
-            Initialize ngraph.three
-         */
-        var visEl = document.createElement("div");
-        visEl.id = "vis";
-        visEl.style.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-        this.el.appendChild(visEl);
-        var graphics = nthree(this.graph, {
-            container: visEl,
-            layout: mplexLayout(this.graph, physicsSettings),
-            antialias: true,
-            alpha: true
-        });
-        graphics.renderer.setClearColor(0xffffff, 1); // Set background transparent
-
-        /**
-         * Color inter- and intra-layer connections differently
-         */
-        var THREE = graphics.THREE;
-        graphics.createLinkUI(function(link) {
-            var linkGeometry = new THREE.Geometry();
-            // We don't care about position here, renderLink() callback will update it
-            linkGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
-            linkGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
-            var layer1 = findNode(link.data.source).get('layer');
-            var layer2 = findNode(link.data.target).get('layer');
-            var color_ = 0x000000;
-            if (_(layer1.attributes).isEqual(layer2.attributes)) {
-                color_ = 0x2f77d2;
+        var visEl = document.getElementById("vis");
+        if (visEl) {
+            while (visEl.lastChild) {
+                visEl.removeChild(visEl.lastChild);
             }
-            var linkMaterial = new THREE.LineBasicMaterial({ color: color_ });
-            // Again, no magic, regular three.js object is returned:
-            return new THREE.Line(linkGeometry, linkMaterial);
+        } else {
+            visEl = document.createElement("div");
+            this.el.appendChild(visEl);
+        }
+        this.vis = new VisPanel({
+            el: visEl,
+            graph: this.graph
         });
-        /**
-         *  Color nodes of each layer
-         */
-        graphics.createNodeUI(function (node) {
-            var size = 7;
-            var nodeGeometry = new THREE.SphereGeometry(size);
-            var color_;
-            for (var i=0;i<layers.length;i++) {
-                if (_.eq(layers[i],node.data.layer.attributes)) {
-                    color_ = niceColors[i % niceColors.length];
-                }
-            }
-            var nodeMaterial = new THREE.MeshBasicMaterial({ color: color_ });
-            return new THREE.Mesh(nodeGeometry, nodeMaterial);
-        });
 
-        graphics.run();
-        this.graphics = graphics;
+        this.vis.renderGraph();
     },
-    stop: function () {
-        /**
-         * Stop the graphics
-         */
-        this.graphics.dispose();
-        console.log("Info: The rendering has stopped and the graph has been disposed of.")
+    resetGraph: function () {
+        this.vis.stopGraph();
+        this.vis = undefined;
+        $('#vis').remove();
+        this.render();
     }
@@ -168,0 +100,0 @@ });

package.json

 {
   "name": "mplexviz-ngraph",
   "description": "A visualisation module for multilayer networks as modelled by mplexnet using ngraph.",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "homepage": "https://github.com/DennisSchwartz/mplexviz-ngraph",
@@ -40,5 +40,5 @@ "author": {
     "mplexnet": "0.2.5",
-    "multilayerlayout3d": "0.1.1",
+    "multilayerlayout3d": "0.1.3",
     "ngraph.graph": "0.0.12",
-    "ngraph.three": "0.0.11"
+    "ngraph.three": "^0.0.12"
   },
@@ -56,2 +56,6 @@ "devDependencies": {
     ],
+    "css": [
+      "/style/style.css",
+      "/style/bootstrap.css"
+    ],
     "snippets": [
@@ -62,2 +66,3 @@ "examples"
   },
+  "style": "style/*.css",
   "keywords": [
@@ -64,0 +69,0 @@ "networks",

README.md

@@ -9,5 +9,8 @@ # mplexviz-ngraph
 ## Getting Started
-This is a visualisation module for multilayer network data. It is still very much work in progress so beware 
-of updates  as your code might break.
+This is a visualisation module for multilayer network data. 
 
+#### Beware:
+This project is still under active development and should only be used experimentally for now. Expect a more mature
+ version in the next few months. If you have suggestions and feature requests, feel free to contact me.
+
 You can install the module with: `npm install mplexviz-ngraph`
@@ -66,7 +69,7 @@
 
-There will be more detailed description of the input format soon.
+There will be more detailed description of the input format soon. This maybe subject to change
 
 For now, there are two possible ways to pass data:
 
-* A single csv data object of edges between node-layer objects
+* A single csv data object of edges between node-layer objects (recommended)
 ```
@@ -120,3 +123,3 @@ source,l1,l2,target,l1,l2
 
-All contributions are welcome.
+I have a set of features I want to complete for now. When done, all contributions will be welcome.
 
@@ -123,0 +126,0 @@ ## Support

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2811129

increased by25.14%

Number of package files

14

increased by40%

Lines of code

58570

increased by14.56%

Number of lines in readme file

153

increased by2%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmultilayerlayout3d@0.1.3(transitive)

• + Addedngraph.three@0.0.12(transitive)

• - Removedmultilayerlayout3d@0.1.1(transitive)

• - Removedngraph.three@0.0.11(transitive)

• Updatedmultilayerlayout3d@0.1.3

• Updatedngraph.three@^0.0.12