Merge pull request #62 from adrianco/update-ui

update UI

.travis.yml

@@ -1,9 +1,6 @@
-language: go
+language: node_js
+node_js:
+  - "4.2"
 script: cd ui && npm install && npm run build && cd ..
-deploy:
-  provider: divshot
-  environment:
-    master: production
-  skip_cleanup: true
-  api_key:
-    secure: P0cRcXCoqy/hnAiLfzfIQyo7bylMmb8hLhbxe29nTTCmUBtjfvDPzv9pZrlpeK0oVyTmpdgO675Bb6+jsn+s0u44LqvgbaOcJWhrBS87EQiLKwi1VdCdJwzO3CZoEDz5xUQ/yxbgdk5epZ7HrEQN3ZubNGLkaxy5YezBp7hhhXk=
+after_success:
+  - '[ "${TRAVIS_PULL_REQUEST}" = "false" ] && [ "${TRAVIS_BRANCH}" = "master" ] && cd ui && npm run deploy'

README.md

@@ -17,7 +17,7 @@ $ ./compose2arch -file compose.yaml > arch.json
 ```
 
 Recent UI changes include pinning nodes so graphs can be stretched out and deleting nodes and edges by double-clicking on them. To add new entries to the architecture menu, add a line to ui/js/toolbar/index.js
-[Run the netflixoss simulation in your browser](http://simianviz.divshot.io/netflixoss)
+[Run the netflixoss simulation in your browser](http://simianviz.surge.sh/netflixoss)
 
 For a local installation of spigo, with no network dependencies, you can start the service and browse localhost:8000 using:
 ```
@@ -110,7 +110,7 @@ $ spigo -a netflixoss -d 5 -j
 Migration from LAMP to NetflixOSS
 -----------
 The orchestration to create this now uses a eureka discovery service per zone and has been heavily refactored.
-[Run this simulation in your browser](http://simianviz.divshot.io/migration)
+[Run this simulation in your browser](http://simianviz.surge.sh/migration)
 
 Start with a monolithic LAMP stack
 ![Migration ](png/migration-1-1.png)
@@ -153,7 +153,7 @@ Extend to six regions, an interesting visualization challenge
 
 LAMP Stack Architecture
 -----------
-To create a starting point for architecture transitions, an AWS hosted LAMP stack is simulated. It has DNS feeding an ELB, then a horizontally scaled layer of PHP servers backed with a single memcached and a master slave pair of MySQL servers. The configuration is managed using a Eureka name service and logged by Edda. [Run this simulation in your browser](http://simianviz.divshot.io/lamp)
+To create a starting point for architecture transitions, an AWS hosted LAMP stack is simulated. It has DNS feeding an ELB, then a horizontally scaled layer of PHP servers backed with a single memcached and a master slave pair of MySQL servers. The configuration is managed using a Eureka name service and logged by Edda. [Run this simulation in your browser](http://simianviz.surge.sh/lamp)
 
 ![LAMP stack](png/lamp.png)
 
@@ -165,7 +165,7 @@ Each microservice is based on Karyon as the prototype to copy when creating a ne
 
 There is a more complex architecture defined in json_arch/netflix_arch.json, which has two separate DNS endpoints for www and api, and three cassandra clusters. It provides a more realistic challenge for visualization.
 
-[Run the netflixoss simulation in your browser](http://simianviz.divshot.io/netflixoss)
+[Run the netflixoss simulation in your browser](http://simianviz.surge.sh/netflixoss)
 
 ![Two Region NetflixOSS](png/netflixoss-w2-tooltip.png)
 
@@ -198,7 +198,7 @@ After seeding with two random friends GraphML rendered using yFiles
 After chatting and making new friends rendered using graphJSON and D3
 ![100 pirates after chatting](png/spigo-100-json.png)
 
-[Run this simulation in your browser](http://simianviz.divshot.io/fsm)
+[Run this simulation in your browser](http://simianviz.surge.sh/fsm)
 
 Spigo uses a common message protocol called Gotocol which contains a channel of the same type. This allows message listener endpoints to be passed around to dynamically create an arbitrary interconnection network.
 
@@ -273,4 +273,3 @@ sys	0m1.728s
 ```
 
 Up to about 200,000 pirates time is linear with count. Beyond that it gradually slows down as my laptop runs out of memory.
-

ui/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

ui/.eslintignore

@@ -0,0 +1 @@
+dist

ui/.eslintrc

@@ -15,8 +15,8 @@
 		"max-len": [1, 120, 4],
 		"quotes": [1, "single"],
 		"curly": [2, "multi"],
-		"strict": [2, "global"],
-		"global-strict": [2, "always"],
+		"strict": [0],
+		"global-strict": [0],
 		"no-shadow": [0],
 		"no-underscore-dangle": [0],
 		"no-unused-vars": [0],

ui/.gulp-tasks/copy-html.js

@@ -1,11 +1,15 @@
 'use strict';
 
+var rename = require('gulp-rename');
+
 var config = require('../gulp.config.js');
 
 module.exports = function(gulp) {
 	gulp.task('copy-html', function() {
 		return gulp
 			.src(config.toCopy.html, { base: '.' })
+			.pipe(gulp.dest(config.dist))
+			.pipe(rename('200.html'))
 			.pipe(gulp.dest(config.dist));
 	});
 };

ui/.gulp-tasks/dev.js

@@ -10,7 +10,7 @@ module.exports = function(gulp) {
 			connect.reload();
 		});
 
-		gulp.watch(config.js.src, ['bundle-app'], function() {
+		gulp.watch(config.js.src, ['lint', 'bundle-app'], function() {
 			connect.reload();
 		});
 

ui/.gulp-tasks/minify-styles.js

@@ -4,7 +4,7 @@ var plumber = require('gulp-plumber');
 var rename = require('gulp-rename');
 var connect = require('gulp-connect');
 var notify = require('gulp-notify');
-var minifyCss = require('gulp-minify-css');
+var minifyCss = require('gulp-clean-css');
 var config = require('../gulp.config.js');
 
 module.exports = function(gulp) {

ui/js/chart/index.js

@@ -17,9 +17,9 @@ import removableLinksFactory from 'lib/d3-removable-links';
 import linkExpanderFactory from 'lib/d3-link-expander';
 import pinNodes from 'lib/d3-pin-nodes';
 
-d3 = fisheye(d3);
+const fisheyeD3 = fisheye(d3);
 
-const collide = collideFactory(d3);
+const collide = collideFactory(fisheyeD3);
 
 const HEADER_HEIGHT = 80;
 
@@ -107,7 +107,7 @@ export default React.createClass({
 			.attr('class', 'node')
 			.attr('r', (d) => Math.sqrt(d.size) * 2.6)
 			.style('fill', pickColor)
-			.call(pinNodes(d3, this.force, bind(this._onTick, this)));
+			.call(pinNodes(fisheyeD3, this.force, bind(this._onTick, this)));
 
 		const {mouseover, mouseout} = connectedNodesFactory(this.nodes, this.links);
 		const removableNodes = removableNodesFactory(this.nodes, this.links);
@@ -134,51 +134,53 @@ export default React.createClass({
 	componentDidMount () {
 		const {arch, step} = this.props;
 
-		this.svg = d3.select(this.getDOMNode());
-		this.force = d3.layout.force();
-		this.fisheye = d3.fisheye
+		this.svg = fisheyeD3.select(this.getDOMNode());
+		this.force = fisheyeD3.layout.force();
+		this.fisheye = fisheyeD3.fisheye
 			.circular()
 			.radius(230)
 			.distortion(2);
 
-		this.tip = tooltip(d3)()
+		this.tip = tooltip(fisheyeD3)()
 			.attr('class', 'd3-tip')
 			.offset([-10, 0])
 			.html((d) => d[0].node);
 
 		this.svg.call(this.tip);
 
-		this.svg.on('mousemove', () => {
-			this.force.stop();
-			this.fisheye.focus(d3.mouse(this.svg[0][0]));
-
-			this.nodes
-				.each(d => { d.fisheye = this.fisheye(d); })
-				.attr('cx', d => d.fisheye.x)
-				.attr('cy', d => d.fisheye.y)
-				.attr('r', d => Math.sqrt(d.size) * 3);
-
-			this.links
-				.attr('x1', d => d.source.fisheye.x)
-				.attr('y1', d => d.source.fisheye.y)
-				.attr('x2', d => d.target.fisheye.x)
-				.attr('y2', d => d.target.fisheye.y);
-		});
-
-		this.svg.on('mouseout', () => {
-			this.force.resume();
-
-			this.links
-				.attr('x1', d => d.source.x)
-				.attr('y1', d => d.source.y)
-				.attr('x2', d => d.target.x)
-				.attr('y2', d => d.target.y);
-
-			this.nodes
-				.attr('cx', (d) => d.x)
-				.attr('cy', (d) => d.y)
-				.attr('r', d => Math.sqrt(d.size) * 2.6);
-		});
+		setTimeout(() => {
+			this.svg.on('mousemove', () => {
+				this.force.stop();
+				this.fisheye.focus(fisheyeD3.mouse(this.svg[0][0]));
+
+				this.nodes
+					.each(d => { d.fisheye = this.fisheye(d); })
+					.attr('cx', d => d.fisheye.x)
+					.attr('cy', d => d.fisheye.y)
+					.attr('r', d => Math.sqrt(d.size) * 3);
+
+				this.links
+					.attr('x1', d => d.source.fisheye.x)
+					.attr('y1', d => d.source.fisheye.y)
+					.attr('x2', d => d.target.fisheye.x)
+					.attr('y2', d => d.target.fisheye.y);
+			});
+
+			this.svg.on('mouseout', () => {
+				this.force.resume();
+
+				this.links
+					.attr('x1', d => d.source.x)
+					.attr('y1', d => d.source.y)
+					.attr('x2', d => d.target.x)
+					.attr('y2', d => d.target.y);
+
+				this.nodes
+					.attr('cx', (d) => d.x)
+					.attr('cy', (d) => d.y)
+					.attr('r', d => Math.sqrt(d.size) * 2.6);
+			});
+		}, 2000)
 
 		ChartStore.addChangeListener(bind(this.updateChart), this);
 		ChartStore.fetch(arch, step);

ui/js/router.js

@@ -6,7 +6,18 @@ import SimianViz from 'simianviz';
 import FourOhFour from 'four-oh-four';
 import indexOf from 'lodash.indexof';
 
-const archs = ['fsm', 'migration', 'netflixoss', 'lamp'];
+const archs = [
+	'fsm',
+	'migration',
+	'netflixoss',
+	'lamp',
+	'container',
+	'aws_ac_ra_web',
+	'netflix',
+	'cassandra',
+	'yogi',
+	'riak',
+];
 
 export default Router.extend({
 	routes: {
@@ -20,7 +31,7 @@ export default Router.extend({
 	},
 
 	deepLink (arch, step) {
-		if (indexOf(archs, arch) < 0) return this.fourOhFour();
+		if (!~indexOf(archs, arch)) return this.fourOhFour();
 		React.render(<SimianViz arch={arch} step={step} />, document.body);
 	},
 

ui/karma.config.js

@@ -1,7 +1,7 @@
 'use strict';
 
 // config for Karma test runner for client tests
-const gulpConfig = rere('./gulp.config');
+const gulpConfig = require('./gulp.config');
 
 const files = [
 	'./js/**/*.js',

ui/package.json

@@ -4,10 +4,11 @@
   "description": "Visualize Protocol Interactions in D3, using JSON genarated by Spigo",
   "main": "",
   "scripts": {
-    "test": "node_modules/.bin/gulp test",
-    "lint": "node_modules/.bin/gulp lint",
-    "dev": "node_modules/.bin/gulp dev",
-    "build": "node_modules/.bin/gulp build-prod"
+    "test": "echo \"Error: no test specified.\"",
+    "lint": "gulp lint",
+    "dev": "gulp dev",
+    "build": "gulp build-prod",
+    "deploy": "surge --project dist --domain simianviz.surge.sh"
   },
   "repository": {
     "type": "git",
@@ -26,61 +27,66 @@
   "dependencies": {
     "ampersand-app": "^1.0.4",
     "ampersand-router": "^3.0.2",
-    "async": "^0.9.0",
-    "bluebird": "^2.9.25",
-    "d3": "^3.5.5",
+    "async": "^2.0.0-rc.2",
+    "bluebird": "^3.3.4",
+    "d3": "^3.5.16",
     "d3-tip": "^0.6.7",
-    "eslint": "^0.24.1",
-    "flux": "^2.0.3",
-    "font-awesome": "^4.3.0",
-    "jquery": "^2.1.3",
+    "eslint": "^2.5.3",
+    "flux": "^2.1.1",
+    "font-awesome": "^4.5.0",
+    "jquery": "^2.2.2",
     "keymirror": "^0.1.1",
-    "lodash.assign": "^3.1.0",
-    "lodash.bind": "^3.1.0",
-    "lodash.filter": "^3.1.0",
-    "lodash.foreach": "^3.0.3",
-    "lodash.indexof": "^3.0.2",
-    "lodash.pluck": "^3.1.1",
-    "lodash.reduce": "^3.1.1",
-    "lodash.sortby": "^3.1.5",
-    "react": "^0.13.2",
-    "superagent": "^0.21.0"
+    "lodash.assign": "^4.0.6",
+    "lodash.bind": "^4.1.3",
+    "lodash.filter": "^4.2.2",
+    "lodash.foreach": "^4.1.1",
+    "lodash.indexof": "^4.0.1",
+    "lodash.pluck": "^3.1.2",
+    "lodash.reduce": "^4.2.1",
+    "lodash.sortby": "^4.2.2",
+    "react": "^0.14.8",
+    "superagent": "^1.8.3"
   },
   "devDependencies": {
-    "babel": "^4.7.4",
-    "babel-eslint": "^1.0.14",
-    "babelify": "^5.0.3",
-    "browserify": "^9.0.3",
-    "chai": "^2.1.1",
-    "glob": "^5.0.1",
-    "gulp": "^3.8.11",
-    "gulp-clean": "^0.3.1",
-    "gulp-concat": "^2.5.2",
-    "gulp-connect": "^2.2.0",
-    "gulp-eslint": "^0.6.0",
-    "gulp-jasmine": "^2.0.0",
-    "gulp-karma": "0.0.4",
-    "gulp-less": "^3.0.1",
-    "gulp-minify-css": "^1.0.0",
-    "gulp-mocha": "^2.0.0",
-    "gulp-nodemon": "^1.0.5",
+    "babel": "^6.5.2",
+    "babel-eslint": "^6.0.2",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babelify": "^7.2.0",
+    "browserify": "^13.0.0",
+    "chai": "^3.5.0",
+    "glob": "^7.0.3",
+    "gulp": "^3.9.1",
+    "gulp-clean": "^0.3.2",
+    "gulp-clean-css": "^2.0.4",
+    "gulp-concat": "^2.6.0",
+    "gulp-connect": "^3.2.2",
+    "gulp-eslint": "^2.0.0",
+    "gulp-jasmine": "^2.3.0",
+    "gulp-karma": "0.0.5",
+    "gulp-less": "^3.0.5",
+    "gulp-mocha": "^2.2.0",
+    "gulp-nodemon": "^2.0.6",
     "gulp-notify": "^2.2.0",
-    "gulp-plumber": "^0.6.6",
-    "gulp-rename": "^1.2.0",
-    "gulp-sourcemaps": "^1.5.0",
-    "gulp-uglify": "^1.1.0",
-    "jasmine-core": "^2.2.0",
-    "karma": "^0.12.31",
-    "karma-browserify": "^4.1.2",
-    "karma-jasmine": "^0.3.5",
-    "karma-nyan-reporter": "0.0.60",
-    "karma-phantomjs-launcher": "^0.1.4",
-    "karma-spec-reporter": "0.0.18",
-    "mocha": "^2.2.1",
-    "nock": "^1.4.0",
-    "run-sequence": "^1.0.2",
-    "shelljs": "^0.4.0",
-    "sinon": "^1.13.0",
-    "vinyl-source-stream": "^1.1.0"
+    "gulp-plumber": "^1.1.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-uglify": "^1.5.3",
+    "jasmine-core": "^2.4.1",
+    "karma": "^0.13.22",
+    "karma-browserify": "^5.0.3",
+    "karma-jasmine": "^0.3.8",
+    "karma-nyan-reporter": "0.2.4",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-spec-reporter": "0.0.25",
+    "mocha": "^2.4.5",
+    "nock": "^7.7.2",
+    "phantomjs-prebuilt": "^2.1.7",
+    "run-sequence": "^1.1.5",
+    "shelljs": "^0.6.0",
+    "sinon": "^1.17.3",
+    "surge": "^0.17.7",
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^3.7.0"
   }
 }