├── .babelrc
├── src
    ├── node_modules
    │   ├── index.js
    │   └── Neo4jGraphRenderer
    │   │   ├── package.json
    │   │   ├── Neo4jGraphRenderer.js
    │   │   ├── assets
    │   │       ├── graph.js
    │   │       ├── connection.js
    │   │       ├── renderer.js
    │   │       └── util.js
    │   │   └── Neo4jGraphRenderer.css
    ├── index.js
    └── registerServiceWorker.js
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── lib
    ├── Neo4jGraphRenderer
    │   ├── package.json
    │   ├── assets
    │   │   ├── graph.js
    │   │   ├── connection.js
    │   │   ├── renderer.js
    │   │   └── util.js
    │   ├── Neo4jGraphRenderer.css
    │   └── Neo4jGraphRenderer.js
    └── index.js
├── config
    ├── jest
    │   ├── fileTransform.js
    │   └── cssTransform.js
    ├── polyfills.js
    ├── paths.js
    ├── env.js
    ├── webpackDevServer.config.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── .gitignore
├── scripts
    ├── test.js
    ├── start.js
    └── build.js
├── LICENSE.txt
├── README.md
└── package.json


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "react", "stage-2"]
3 | }


--------------------------------------------------------------------------------
/src/node_modules/index.js:
--------------------------------------------------------------------------------
1 | export { default as Neo4jGraphRenderer } from './Neo4jGraphRenderer';


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jbitton/neo4j-graph-renderer/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/lib/Neo4jGraphRenderer/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Neo4jGraphRenderer",
 3 |   "main": "./Neo4jGraphRenderer.js",
 4 |   "dependencies": {
 5 |     "d3": "3.5.17",
 6 |     "jquery": "^3.2.1",
 7 |     "react": "^15.6.1",
 8 |     "style-loader": "^0.18.2",
 9 |     "css-loader": "^0.28.4"
10 |   }
11 | }


--------------------------------------------------------------------------------
/src/node_modules/Neo4jGraphRenderer/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Neo4jGraphRenderer",
 3 |   "main": "./Neo4jGraphRenderer.js",
 4 |   "dependencies": {
 5 |     "d3": "3.5.17",
 6 |     "jquery": "^3.2.1",
 7 |     "react": "^15.6.1",
 8 |     "style-loader": "^0.18.2",
 9 |     "css-loader": "^0.28.4"
10 |   }
11 | }


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 
23 | ../*
24 | /.idea/*


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _Neo4jGraphRenderer = require('./Neo4jGraphRenderer');
 8 | 
 9 | Object.defineProperty(exports, 'Neo4jGraphRenderer', {
10 |   enumerable: true,
11 |   get: function get() {
12 |     return _interopRequireDefault(_Neo4jGraphRenderer).default;
13 |   }
14 | });
15 | 
16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import registerServiceWorker from './registerServiceWorker';
 4 | import Neo4jGraphRenderer from 'Neo4jGraphRenderer';
 5 | 
 6 | const App = () => (
 7 |   <div>
 8 |     <Neo4jGraphRenderer url="http://localhost:7474" user="neo4j" password="password" query="MATCH (n)-[r]->(m) RETURN n,r,m"/>
 9 |   </div>
10 | );
11 | 
12 | ReactDOM.render(<App />, document.getElementById('root'));
13 | registerServiceWorker();


--------------------------------------------------------------------------------
/src/node_modules/Neo4jGraphRenderer/Neo4jGraphRenderer.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { createGraph } from './assets/graph';
 3 | import './Neo4jGraphRenderer.css';
 4 | 
 5 | class Neo4JGraphRenderer extends Component {
 6 |   componentDidMount() {
 7 |     this.loadData(this.props);
 8 |   }
 9 | 
10 |   componentWillReceiveProps(newProps) {
11 |     this.loadData(newProps);
12 |   }
13 | 
14 |   loadData(props) {
15 |     const connection = { url: props.url, user: props.user, pass: props.password };
16 |     createGraph(connection, props.query);
17 |   }
18 | 
19 |   render () {
20 |     return <div id="graph"/>;
21 |   }
22 | }
23 | 
24 | export default Neo4JGraphRenderer;
25 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/src/node_modules/Neo4jGraphRenderer/assets/graph.js:
--------------------------------------------------------------------------------
 1 | import $ from 'jquery';
 2 | import { graphRenderer } from './renderer';
 3 | import { neo4jConnection } from './connection';
 4 | 
 5 | const createGraph = (urlSource, query) => {
 6 |   const d3Graph = graphRenderer();
 7 |   const connection = neo4jConnection(urlSource);
 8 |   try {
 9 |     connection.executeQuery(query, {}, (err,res) => {
10 |       res = res || {};
11 |       const { graph } = res;
12 |       if (graph) {
13 |         let div = $("#graph");
14 |         div.empty();
15 |         d3Graph.render("graph", div, graph);
16 |       } else {
17 |         if (err) {
18 |           window.alert(err.length > 0
19 |             ? `Cypher error:\n${err}`
20 |             : `JS Error:\n${err}`);
21 |         }
22 |       }
23 |     });
24 |   } catch(e) {
25 |     window.alert(`Caught error: ${e}`);
26 |   }
27 | };
28 | 
29 | export { createGraph };
30 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Joanna Bitton
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/lib/Neo4jGraphRenderer/assets/graph.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | exports.createGraph = undefined;
 7 | 
 8 | var _jquery = require('jquery');
 9 | 
10 | var _jquery2 = _interopRequireDefault(_jquery);
11 | 
12 | var _renderer = require('./renderer');
13 | 
14 | var _connection = require('./connection');
15 | 
16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17 | 
18 | var createGraph = function createGraph(urlSource, query) {
19 |   var d3Graph = (0, _renderer.graphRenderer)();
20 |   var connection = (0, _connection.neo4jConnection)(urlSource);
21 |   try {
22 |     connection.executeQuery(query, {}, function (err, res) {
23 |       res = res || {};
24 |       var _res = res,
25 |           graph = _res.graph;
26 | 
27 |       if (graph) {
28 |         var div = (0, _jquery2.default)("#graph");
29 |         div.empty();
30 |         d3Graph.render("graph", div, graph);
31 |       } else {
32 |         if (err) {
33 |           window.alert(err.length > 0 ? 'Cypher error:\n' + err : 'JS Error:\n' + err);
34 |         }
35 |       }
36 |     });
37 |   } catch (e) {
38 |     window.alert('Caught error: ' + e);
39 |   }
40 | };
41 | 
42 | exports.createGraph = createGraph;


--------------------------------------------------------------------------------
/lib/Neo4jGraphRenderer/Neo4jGraphRenderer.css:
--------------------------------------------------------------------------------
 1 | path.link {
 2 |     fill:none;
 3 |     stroke:#7f8c8d;
 4 |     stroke-width:2px;
 5 | }
 6 | 
 7 | text {
 8 |     pointer-events:none;
 9 | }
10 | 
11 | marker {
12 |     fill:#d8dadc;
13 | }
14 | 
15 | .node .outline {
16 |     -webkit-transform:scale(1);
17 |     -moz-transform:scale(1);
18 |     -o-transform:scale(1);
19 |     -ms-transform:scale(1);
20 |     transform:scale(1);
21 |     -webkit-transition:all .15s;
22 |     -moz-transition:all .15s;
23 |     -o-transition:all .15s;
24 |     -ms-transition:all .15s;
25 |     transition:all .15s;
26 |     -webkit-transition-timing-function:cubic-bezier(.694,.0482,.335,1);
27 |     -moz-transition-timing-function:cubic-bezier(.694,.0482,.335,1);
28 |     -o-transition-timing-function:cubic-bezier(.694,.0482,.335,1);
29 |     -ms-transition-timing-function:cubic-bezier(.694,.0482,.335,1);
30 |     transition-timing-function:cubic-bezier(.694,.0482,.335,1)
31 | }
32 | 
33 | .node:hover .outline {
34 |     -webkit-transform:scale(1.4);
35 |     -moz-transform:scale(1.4);
36 |     -o-transform:scale(1.4);
37 |     -ms-transform:scale(1.4);
38 |     transform:scale(1.4)
39 | }
40 | 
41 | .relationship:hover {
42 |     stroke:#3498db
43 | }
44 | 
45 | .outline,.overlay {
46 |     cursor:pointer
47 | }
48 | 
49 | svg {
50 |     width:100%;
51 |     height: 100vh;
52 | }


--------------------------------------------------------------------------------
/src/node_modules/Neo4jGraphRenderer/Neo4jGraphRenderer.css:
--------------------------------------------------------------------------------
 1 | path.link {
 2 |     fill:none;
 3 |     stroke:#7f8c8d;
 4 |     stroke-width:2px;
 5 | }
 6 | 
 7 | text {
 8 |     pointer-events:none;
 9 | }
10 | 
11 | marker {
12 |     fill:#d8dadc;
13 | }
14 | 
15 | .node .outline {
16 |     -webkit-transform:scale(1);
17 |     -moz-transform:scale(1);
18 |     -o-transform:scale(1);
19 |     -ms-transform:scale(1);
20 |     transform:scale(1);
21 |     -webkit-transition:all .15s;
22 |     -moz-transition:all .15s;
23 |     -o-transition:all .15s;
24 |     -ms-transition:all .15s;
25 |     transition:all .15s;
26 |     -webkit-transition-timing-function:cubic-bezier(.694,.0482,.335,1);
27 |     -moz-transition-timing-function:cubic-bezier(.694,.0482,.335,1);
28 |     -o-transition-timing-function:cubic-bezier(.694,.0482,.335,1);
29 |     -ms-transition-timing-function:cubic-bezier(.694,.0482,.335,1);
30 |     transition-timing-function:cubic-bezier(.694,.0482,.335,1)
31 | }
32 | 
33 | .node:hover .outline {
34 |     -webkit-transform:scale(1.4);
35 |     -moz-transform:scale(1.4);
36 |     -o-transform:scale(1.4);
37 |     -ms-transform:scale(1.4);
38 |     transform:scale(1.4)
39 | }
40 | 
41 | .relationship:hover {
42 |     stroke:#3498db
43 | }
44 | 
45 | .outline,.overlay {
46 |     cursor:pointer
47 | }
48 | 
49 | svg {
50 |     width:100%;
51 |     height: 100vh;
52 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # neo4j-graph-renderer
 2 | 
 3 | Since neo4j does not provide a way to render its graphs, I've created a react component that can be used in order to render a neo4j graph (with all the animations, etc).
 4 | 
 5 | ## Installation
 6 | 
 7 | If you are using `create-react-app`:
 8 | ```bash
 9 | # using NPM
10 | $ npm install neo4j-graph-renderer --save
11 | # using yarn
12 | $ yarn add neo4j-graph-renderer
13 | ```
14 | 
15 | If you are not using `create-react-app`, please install the following:
16 | ```bash
17 | $ npm install style-loader --save-dev  # style-loader for webpack
18 | $ npm install css-loader --save-dev    # css-loader for webpack
19 | ```
20 | 
21 | ## Usage
22 | 
23 | ```javascript
24 | // Using ES6 Syntax
25 | import React from 'react';
26 | import ReactDOM from 'react-dom';
27 | import { Neo4jGraphRenderer } from 'neo4j-graph-renderer';
28 | 
29 | const App = () => (
30 |   <div>
31 |      <Neo4jGraphRenderer url={process.env.NEO4J_URL} user={process.env.NEO4J_USER}
32 |         password={process.env.NEO4J_PASSWORD} query="MATCH (n)-[r]->(m) RETURN n,r,m"/>
33 |   </div>
34 | );
35 | 
36 | ReactDOM.render(<App />, document.getElementById('root'));
37 | ```
38 | 
39 | Props you must provide:
40 | * ```url```: the url required to access your neo4j db (e.g. "http://localhost:7474")
41 | * ```user```: the username required to access your neo4j db
42 | * ```password```: the password required to access your neo4j db
43 | * ```query```: the query you'd like to execute
44 | 
45 | & There you go! Your neo4j graph has been rendered!
46 | 
47 | **NOTE**: If you would like to add any extra CSS or your own font, the graph is generated in a ```div``` with id "graph"
48 | 
49 | ## Issues
50 | 
51 | If you find a bug, please file an issue on the [issue tracker](https://github.com/jbitton/neo4j-graph-renderer/issues) on GitHub.
52 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl = envPublicUrl ||
37 |     (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
 1 | // In production, we register a service worker to serve assets from local cache.
 2 | 
 3 | // This lets the app load faster on subsequent visits in production, and gives
 4 | // it offline capabilities. However, it also means that developers (and users)
 5 | // will only see deployed updates on the "N+1" visit to a page, since previously
 6 | // cached resources are updated in the background.
 7 | 
 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 9 | // This link also includes instructions on opting out of this behavior.
10 | 
11 | export default function register() {
12 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
13 |     window.addEventListener('load', () => {
14 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
15 |       navigator.serviceWorker
16 |         .register(swUrl)
17 |         .then(registration => {
18 |           registration.onupdatefound = () => {
19 |             const installingWorker = registration.installing;
20 |             installingWorker.onstatechange = () => {
21 |               if (installingWorker.state === 'installed') {
22 |                 if (navigator.serviceWorker.controller) {
23 |                   // At this point, the old content will have been purged and
24 |                   // the fresh content will have been added to the cache.
25 |                   // It's the perfect time to display a "New content is
26 |                   // available; please refresh." message in your web app.
27 |                   console.log('New content is available; please refresh.');
28 |                 } else {
29 |                   // At this point, everything has been precached.
30 |                   // It's the perfect time to display a
31 |                   // "Content is cached for offline use." message.
32 |                   console.log('Content is cached for offline use.');
33 |                 }
34 |               }
35 |             };
36 |           };
37 |         })
38 |         .catch(error => {
39 |           console.error('Error during service worker registration:', error);
40 |         });
41 |     });
42 |   }
43 | }
44 | 
45 | export function unregister() {
46 |   if ('serviceWorker' in navigator) {
47 |     navigator.serviceWorker.ready.then(registration => {
48 |       registration.unregister();
49 |     });
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/node_modules/Neo4jGraphRenderer/assets/connection.js:
--------------------------------------------------------------------------------
 1 | const getURL = url =>
 2 | `${(url || "http://localhost:7474").replace(/\/db\/data.*/,"")}/db/data/transaction/commit`;
 3 | 
 4 | const neo4jConnection = connection => {
 5 |   return {
 6 |     executeQuery: (query, params, callback) => {
 7 |       const auth = ((connection.user || "") === "") ? "" : `Basic ${btoa(`${connection.user}:${connection.pass}`)}`;
 8 |       if (auth && auth.length) {
 9 |         fetch(getURL(connection.url), {
10 |           method: 'POST',
11 |           headers: {
12 |             'Content-Type': 'application/json',
13 |             'Authorization': auth
14 |           },
15 |           body: JSON.stringify({
16 |             statements: [{
17 |               statement: query,
18 |               parameters: params || {},
19 |               resultDataContents: ["row", "graph"]
20 |             }]
21 |           })
22 |         }).then(res => res.json()).then(res => {
23 |           if (res.errors && res.errors.length > 0) {
24 |             callback(res.errors);
25 |           } else {
26 |             const cols = res.results[0].columns;
27 |             const rows = res.results[0].data.map(row => {
28 |               const r = {};
29 |               cols.forEach((col, index) => {
30 |                 r[col] = row.row[index];
31 |               });
32 |               return r;
33 |             });
34 |             const nodes = [];
35 |             let relations = [];
36 |             let labels = [];
37 | 
38 |             res.results[0].data.forEach(row => {
39 |               row.graph.nodes.forEach(n => {
40 |                 const found = nodes.filter(m => m.id === n.id).length > 0;
41 |                 if (!found) {
42 |                   for (let p in n.properties||{}) {
43 |                     n[p] = n.properties[p];
44 |                     delete n.properties[p];
45 |                   }
46 |                   delete n.properties;
47 |                   nodes.push(n);
48 |                   labels = labels.concat(n.labels.filter(l => labels.indexOf(l) === -1));
49 |                 }
50 |               });
51 |               relations = relations.concat(row.graph.relationships.map(r => {
52 |                   return { id: r.id, start:r.startNode, end:r.endNode, type:r.type }
53 |               }));
54 |             });
55 |             callback(null, { table: rows, graph: { nodes: nodes, links: relations }, labels: labels});
56 |           }
57 |         }).catch(err => callback(err));
58 |       }
59 |     }
60 |   };
61 | };
62 | 
63 | export { neo4jConnection };
64 | 


--------------------------------------------------------------------------------
/lib/Neo4jGraphRenderer/assets/connection.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | var getURL = function getURL(url) {
 7 |   return (url || "http://localhost:7474").replace(/\/db\/data.*/, "") + "/db/data/transaction/commit";
 8 | };
 9 | 
10 | var neo4jConnection = function neo4jConnection(connection) {
11 |   return {
12 |     executeQuery: function executeQuery(query, params, callback) {
13 |       var auth = (connection.user || "") === "" ? "" : "Basic " + btoa(connection.user + ":" + connection.pass);
14 |       if (auth && auth.length) {
15 |         fetch(getURL(connection.url), {
16 |           method: 'POST',
17 |           headers: {
18 |             'Content-Type': 'application/json',
19 |             'Authorization': auth
20 |           },
21 |           body: JSON.stringify({
22 |             statements: [{
23 |               statement: query,
24 |               parameters: params || {},
25 |               resultDataContents: ["row", "graph"]
26 |             }]
27 |           })
28 |         }).then(function (res) {
29 |           return res.json();
30 |         }).then(function (res) {
31 |           if (res.errors && res.errors.length > 0) {
32 |             callback(res.errors);
33 |           } else {
34 |             var cols = res.results[0].columns;
35 |             var rows = res.results[0].data.map(function (row) {
36 |               var r = {};
37 |               cols.forEach(function (col, index) {
38 |                 r[col] = row.row[index];
39 |               });
40 |               return r;
41 |             });
42 |             var nodes = [];
43 |             var relations = [];
44 |             var labels = [];
45 | 
46 |             res.results[0].data.forEach(function (row) {
47 |               row.graph.nodes.forEach(function (n) {
48 |                 var found = nodes.filter(function (m) {
49 |                   return m.id === n.id;
50 |                 }).length > 0;
51 |                 if (!found) {
52 |                   for (var p in n.properties || {}) {
53 |                     n[p] = n.properties[p];
54 |                     delete n.properties[p];
55 |                   }
56 |                   delete n.properties;
57 |                   nodes.push(n);
58 |                   labels = labels.concat(n.labels.filter(function (l) {
59 |                     return labels.indexOf(l) === -1;
60 |                   }));
61 |                 }
62 |               });
63 |               relations = relations.concat(row.graph.relationships.map(function (r) {
64 |                 return { id: r.id, start: r.startNode, end: r.endNode, type: r.type };
65 |               }));
66 |             });
67 |             callback(null, { table: rows, graph: { nodes: nodes, links: relations }, labels: labels });
68 |           }
69 |         }).catch(function (err) {
70 |           return callback(err);
71 |         });
72 |       }
73 |     }
74 |   };
75 | };
76 | 
77 | exports.neo4jConnection = neo4jConnection;


--------------------------------------------------------------------------------
/lib/Neo4jGraphRenderer/Neo4jGraphRenderer.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 8 | 
 9 | var _react = require('react');
10 | 
11 | var _react2 = _interopRequireDefault(_react);
12 | 
13 | var _graph = require('./assets/graph');
14 | 
15 | require('./Neo4jGraphRenderer.css');
16 | 
17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18 | 
19 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
20 | 
21 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
22 | 
23 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
24 | 
25 | var Neo4JGraphRenderer = function (_Component) {
26 |   _inherits(Neo4JGraphRenderer, _Component);
27 | 
28 |   function Neo4JGraphRenderer() {
29 |     _classCallCheck(this, Neo4JGraphRenderer);
30 | 
31 |     return _possibleConstructorReturn(this, (Neo4JGraphRenderer.__proto__ || Object.getPrototypeOf(Neo4JGraphRenderer)).apply(this, arguments));
32 |   }
33 | 
34 |   _createClass(Neo4JGraphRenderer, [{
35 |     key: 'componentDidMount',
36 |     value: function componentDidMount() {
37 |       this.loadData(this.props);
38 |     }
39 |   }, {
40 |     key: 'componentWillReceiveProps',
41 |     value: function componentWillReceiveProps(newProps) {
42 |       this.loadData(newProps);
43 |     }
44 |   }, {
45 |     key: 'loadData',
46 |     value: function loadData(props) {
47 |       var connection = { url: props.url, user: props.user, pass: props.password };
48 |       (0, _graph.createGraph)(connection, props.query);
49 |     }
50 |   }, {
51 |     key: 'render',
52 |     value: function render() {
53 |       return _react2.default.createElement('div', { id: 'graph' });
54 |     }
55 |   }]);
56 | 
57 |   return Neo4JGraphRenderer;
58 | }(_react.Component);
59 | 
60 | exports.default = Neo4JGraphRenderer;


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "neo4j-graph-renderer",
  3 |   "version": "0.1.6",
  4 |   "main": "lib/index.js",
  5 |   "author": "Joanna Bitton",
  6 |   "homepage": "https://github.com/jbitton/neo4j-graph-renderer",
  7 |   "repository": {
  8 |     "type": "git",
  9 |     "url": "https://github.com/jbitton/neo4j-graph-renderer.git"
 10 |   },
 11 |   "bugs": {
 12 |     "url": "https://github.com/jbitton/neo4j-graph-renderer/issues"
 13 |   },
 14 |   "license": "MIT",
 15 |   "dependencies": {
 16 |     "d3": "3.5.17",
 17 |     "jquery": "^3.2.1",
 18 |     "react": "^15.6.1",
 19 |     "react-dom": "^15.6.1"
 20 |   },
 21 |   "devDependencies": {
 22 |     "autoprefixer": "7.1.0",
 23 |     "babel-cli": "^6.24.1",
 24 |     "babel-core": "6.24.1",
 25 |     "babel-eslint": "7.2.3",
 26 |     "babel-jest": "20.0.3",
 27 |     "babel-loader": "7.0.0",
 28 |     "babel-preset-es2015": "^6.24.1",
 29 |     "babel-preset-react": "^6.24.1",
 30 |     "babel-preset-react-app": "^3.0.0",
 31 |     "babel-preset-stage-2": "^6.24.1",
 32 |     "babel-runtime": "6.23.0",
 33 |     "case-sensitive-paths-webpack-plugin": "1.1.4",
 34 |     "chalk": "1.1.3",
 35 |     "css-loader": "^0.28.4",
 36 |     "dotenv": "4.0.0",
 37 |     "eslint": "3.19.0",
 38 |     "eslint-config-react-app": "^1.0.4",
 39 |     "eslint-loader": "1.7.1",
 40 |     "eslint-plugin-flowtype": "2.33.0",
 41 |     "eslint-plugin-import": "2.2.0",
 42 |     "eslint-plugin-jsx-a11y": "5.0.3",
 43 |     "eslint-plugin-react": "7.0.1",
 44 |     "extract-text-webpack-plugin": "2.1.0",
 45 |     "file-loader": "0.11.1",
 46 |     "fs-extra": "3.0.1",
 47 |     "html-webpack-plugin": "2.28.0",
 48 |     "jest": "20.0.3",
 49 |     "object-assign": "4.1.1",
 50 |     "postcss-flexbugs-fixes": "3.0.0",
 51 |     "postcss-loader": "2.0.5",
 52 |     "promise": "7.1.1",
 53 |     "react-dev-utils": "^3.0.0",
 54 |     "react-error-overlay": "^1.0.7",
 55 |     "style-loader": "^0.18.2",
 56 |     "sw-precache-webpack-plugin": "0.9.1",
 57 |     "url-loader": "0.5.8",
 58 |     "webpack": "2.6.1",
 59 |     "webpack-dev-server": "2.4.5",
 60 |     "webpack-manifest-plugin": "1.1.0",
 61 |     "whatwg-fetch": "2.0.3"
 62 |   },
 63 |   "scripts": {
 64 |     "start": "node scripts/start.js",
 65 |     "build": "node scripts/build.js",
 66 |     "lib": "babel src/node_modules --out-dir lib --copy-files",
 67 |     "test": "node scripts/test.js --env=jsdom"
 68 |   },
 69 |   "jest": {
 70 |     "collectCoverageFrom": [
 71 |       "src/**/*.{js,jsx}"
 72 |     ],
 73 |     "setupFiles": [
 74 |       "<rootDir>/config/polyfills.js"
 75 |     ],
 76 |     "testMatch": [
 77 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
 78 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
 79 |     ],
 80 |     "testEnvironment": "node",
 81 |     "testURL": "http://localhost",
 82 |     "transform": {
 83 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
 84 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 85 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 86 |     },
 87 |     "transformIgnorePatterns": [
 88 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
 89 |     ],
 90 |     "moduleNameMapper": {
 91 |       "^react-native$": "react-native-web"
 92 |     }
 93 |   },
 94 |   "babel": {
 95 |     "presets": [
 96 |       "react-app"
 97 |     ]
 98 |   },
 99 |   "eslintConfig": {
100 |     "extends": "react-app"
101 |   },
102 |   "keywords": [
103 |     "react",
104 |     "react-component",
105 |     "neo4j",
106 |     "graph"
107 |   ]
108 | }
109 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce(
82 |       (env, key) => {
83 |         env[key] = JSON.stringify(raw[key]);
84 |         return env;
85 |       },
86 |       {}
87 |     ),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const path = require('path');
 18 | const chalk = require('chalk');
 19 | const fs = require('fs-extra');
 20 | const webpack = require('webpack');
 21 | const config = require('../config/webpack.config.prod');
 22 | const paths = require('../config/paths');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 27 | 
 28 | const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
 29 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 30 | const useYarn = fs.existsSync(paths.yarnLockFile);
 31 | 
 32 | // Warn and crash if required files are missing
 33 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 34 |   process.exit(1);
 35 | }
 36 | 
 37 | // First, read the current file sizes in build directory.
 38 | // This lets us display how much they changed later.
 39 | measureFileSizesBeforeBuild(paths.appBuild)
 40 |   .then(previousFileSizes => {
 41 |     // Remove all content but keep the directory so that
 42 |     // if you're in it, you don't end up in Trash
 43 |     fs.emptyDirSync(paths.appBuild);
 44 |     // Merge with the public folder
 45 |     copyPublicFolder();
 46 |     // Start the webpack build
 47 |     return build(previousFileSizes);
 48 |   })
 49 |   .then(
 50 |     ({ stats, previousFileSizes, warnings }) => {
 51 |       if (warnings.length) {
 52 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 53 |         console.log(warnings.join('\n\n'));
 54 |         console.log(
 55 |           '\nSearch for the ' +
 56 |             chalk.underline(chalk.yellow('keywords')) +
 57 |             ' to learn more about each warning.'
 58 |         );
 59 |         console.log(
 60 |           'To ignore, add ' +
 61 |             chalk.cyan('// eslint-disable-next-line') +
 62 |             ' to the line before.\n'
 63 |         );
 64 |       } else {
 65 |         console.log(chalk.green('Compiled successfully.\n'));
 66 |       }
 67 | 
 68 |       console.log('File sizes after gzip:\n');
 69 |       printFileSizesAfterBuild(stats, previousFileSizes, paths.appBuild);
 70 |       console.log();
 71 | 
 72 |       const appPackage = require(paths.appPackageJson);
 73 |       const publicUrl = paths.publicUrl;
 74 |       const publicPath = config.output.publicPath;
 75 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 76 |       printHostingInstructions(
 77 |         appPackage,
 78 |         publicUrl,
 79 |         publicPath,
 80 |         buildFolder,
 81 |         useYarn
 82 |       );
 83 |     },
 84 |     err => {
 85 |       console.log(chalk.red('Failed to compile.\n'));
 86 |       console.log((err.message || err) + '\n');
 87 |       process.exit(1);
 88 |     }
 89 |   );
 90 | 
 91 | // Create the production build and print the deployment instructions.
 92 | function build(previousFileSizes) {
 93 |   console.log('Creating an optimized production build...');
 94 | 
 95 |   let compiler = webpack(config);
 96 |   return new Promise((resolve, reject) => {
 97 |     compiler.run((err, stats) => {
 98 |       if (err) {
 99 |         return reject(err);
100 |       }
101 |       const messages = formatWebpackMessages(stats.toJson({}, true));
102 |       if (messages.errors.length) {
103 |         return reject(new Error(messages.errors.join('\n\n')));
104 |       }
105 |       if (process.env.CI && messages.warnings.length) {
106 |         console.log(
107 |           chalk.yellow(
108 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
109 |               'Most CI servers set it automatically.\n'
110 |           )
111 |         );
112 |         return reject(new Error(messages.warnings.join('\n\n')));
113 |       }
114 |       return resolve({
115 |         stats,
116 |         previousFileSizes,
117 |         warnings: messages.warnings,
118 |       });
119 |     });
120 |   });
121 | }
122 | 
123 | function copyPublicFolder() {
124 |   fs.copySync(paths.appPublic, paths.appBuild, {
125 |     dereference: true,
126 |     filter: file => file !== paths.appHtml,
127 |   });
128 | }
129 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const errorOverlayMiddleware = require('react-error-overlay/middleware');
 4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 5 | const config = require('./webpack.config.dev');
 6 | const paths = require('./paths');
 7 | 
 8 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 9 | const host = process.env.HOST || '0.0.0.0';
10 | 
11 | module.exports = function(proxy, allowedHost) {
12 |   return {
13 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
14 |     // websites from potentially accessing local content through DNS rebinding:
15 |     // https://github.com/webpack/webpack-dev-server/issues/887
16 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
17 |     // However, it made several existing use cases such as development in cloud
18 |     // environment or subdomains in development significantly more complicated:
19 |     // https://github.com/facebookincubator/create-react-app/issues/2271
20 |     // https://github.com/facebookincubator/create-react-app/issues/2233
21 |     // While we're investigating better solutions, for now we will take a
22 |     // compromise. Since our WDS configuration only serves files in the `public`
23 |     // folder we won't consider accessing them a vulnerability. However, if you
24 |     // use the `proxy` feature, it gets more dangerous because it can expose
25 |     // remote code execution vulnerabilities in backends like Django and Rails.
26 |     // So we will disable the host check normally, but enable it if you have
27 |     // specified the `proxy` setting. Finally, we let you override it if you
28 |     // really know what you're doing with a special environment variable.
29 |     disableHostCheck: !proxy ||
30 |       process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
31 |     // Enable gzip compression of generated files.
32 |     compress: true,
33 |     // Silence WebpackDevServer's own logs since they're generally not useful.
34 |     // It will still show compile warnings and errors with this setting.
35 |     clientLogLevel: 'none',
36 |     // By default WebpackDevServer serves physical files from current directory
37 |     // in addition to all the virtual build products that it serves from memory.
38 |     // This is confusing because those files won’t automatically be available in
39 |     // production build folder unless we copy them. However, copying the whole
40 |     // project directory is dangerous because we may expose sensitive files.
41 |     // Instead, we establish a convention that only files in `public` directory
42 |     // get served. Our build script will copy `public` into the `build` folder.
43 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
44 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
45 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
46 |     // Note that we only recommend to use `public` folder as an escape hatch
47 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
48 |     // for some reason broken when imported through Webpack. If you just want to
49 |     // use an image, put it in `src` and `import` it from JavaScript instead.
50 |     contentBase: paths.appPublic,
51 |     // By default files from `contentBase` will not trigger a page reload.
52 |     watchContentBase: true,
53 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
54 |     // for the WebpackDevServer client so it can learn when the files were
55 |     // updated. The WebpackDevServer client is included as an entry point
56 |     // in the Webpack development configuration. Note that only changes
57 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
58 |     hot: true,
59 |     // It is important to tell WebpackDevServer to use the same "root" path
60 |     // as we specified in the config. In development, we always serve from /.
61 |     publicPath: config.output.publicPath,
62 |     // WebpackDevServer is noisy by default so we emit custom message instead
63 |     // by listening to the compiler events with `compiler.plugin` calls above.
64 |     quiet: true,
65 |     // Reportedly, this avoids CPU overload on some systems.
66 |     // https://github.com/facebookincubator/create-react-app/issues/293
67 |     watchOptions: {
68 |       ignored: /node_modules/,
69 |     },
70 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
71 |     https: protocol === 'https',
72 |     host: host,
73 |     overlay: false,
74 |     historyApiFallback: {
75 |       // Paths with dots should still use the history fallback.
76 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
77 |       disableDotRule: true,
78 |     },
79 |     public: allowedHost,
80 |     proxy,
81 |     setup(app) {
82 |       // This lets us open files from the runtime error overlay.
83 |       app.use(errorOverlayMiddleware());
84 |       // This service worker file is effectively a 'no-op' that will reset any
85 |       // previous service worker registered for the same host:port combination.
86 |       // We do this in development to avoid hitting the production cache if
87 |       // it used the same host and port.
88 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
89 |       app.use(noopServiceWorkerMiddleware());
90 |     },
91 |   };
92 | };
93 | 


--------------------------------------------------------------------------------
/src/node_modules/Neo4jGraphRenderer/assets/renderer.js:
--------------------------------------------------------------------------------
  1 | import * as d3 from 'd3';
  2 | import neo from './util';
  3 | 
  4 | const graphRenderer = () => {
  5 | 
  6 |   const styleContents =
  7 |     `node {
  8 |       diameter: 40px;
  9 |       color: #DFE1E3;
 10 |       border-color: #D4D6D7;
 11 |       border-width: 2px;
 12 |       text-color-internal: #000000;
 13 |       text-color-external: #000000;
 14 |       caption: '{name}';
 15 |       font-size: 12px;
 16 |     }
 17 |     relationship {
 18 |       color: #4356C0;
 19 |       shaft-width: 3px;
 20 |       font-size: 9px;
 21 |       padding: 3px;
 22 |       text-color-external: #000000;
 23 |       text-color-internal: #FFFFFF;
 24 |     }\n`;
 25 | 
 26 |   const skip = ["id", "start", "end", "source", "target", "labels", "type", "selected", "properties"];
 27 |   const entities = ["name", "title", "tag", "username", "lastname", "caption"];
 28 | 
 29 |   const existingStyles = {};
 30 |   let currentColor = 1;
 31 | 
 32 |   const render = (id, $container, visualization) => {
 33 |     const extractProps = pc => {
 34 |       const p = {};
 35 |       for (let key in pc) {
 36 |         if (!pc.hasOwnProperty(key) || skip.indexOf(key) !== -1) continue;
 37 |         p[key] = pc[key];
 38 |       }
 39 |       return p;
 40 |     };
 41 | 
 42 |     const nodeStyles = nodes => {
 43 |       const label = n => {
 44 |         const labels = n["labels"];
 45 |         if (labels && labels.length) {
 46 |           return labels[labels.length - 1];
 47 |         }
 48 |         return "";
 49 |       };
 50 | 
 51 |       const style = {};
 52 |       for (let i = 0; i < nodes.length; i++) {
 53 |         const props = nodes[i].properties = extractProps(nodes[i]);
 54 |         const keys = Object.keys(props);
 55 |         if (label(nodes[i]) !== "" && keys.length > 0) {
 56 |           let selectedKeys = entities.filter(k => keys.indexOf(k) !== -1);
 57 |           selectedKeys = selectedKeys.concat(keys).concat(['id']);
 58 |           const selector = `node.${label(nodes[i])}`;
 59 |           const selectedKey = selectedKeys[0];
 60 |           if (typeof(props[selectedKey]) === "string" && props[selectedKey].length > 30) {
 61 |             props[selectedKey] = `${props[selectedKey].substring(0,30)} ...`;
 62 |           }
 63 |           style[selector] = style[selector] || selectedKey;
 64 |         }
 65 |       }
 66 |       return style;
 67 |     };
 68 | 
 69 |     const styleSheet = (styles, styleContents) => {
 70 |       const format = key => {
 71 |         const item = styles[key];
 72 |         return item.selector +
 73 |           " {caption: '{" + item.caption +
 74 |           "}'; color: " + item.color +
 75 |           "; border-color: " + item['border-color'] +
 76 |           "; text-color-internal: " +  item['text-color-internal'] +
 77 |           "; text-color-external: " +  item['text-color-external'] +
 78 |           "; }"
 79 |       };
 80 |       return styleContents + Object.keys(styles).map(format).join("\n");
 81 |     };
 82 | 
 83 |     const createStyles = (styleCaptions, styles) => {
 84 |       const { colors } = neo.style.defaults;
 85 |       for (let selector in styleCaptions) {
 86 |         if (!(selector in styles)) {
 87 |           const color = colors[currentColor];
 88 |           currentColor = (currentColor + 1) % colors.length;
 89 |           const textColor = window.isInternetExplorer ? '#000000' : color['text-color-internal'];
 90 |           const style = {selector:selector, caption:styleCaptions[selector], color:color.color,
 91 |             "border-color":color['border-color'], "text-color-internal":textColor,"text-color-external": textColor };
 92 |           styles[selector] = style;
 93 |         }
 94 |       }
 95 |       return styles;
 96 |     };
 97 | 
 98 |     const applyZoom = () => {
 99 |       renderer.select(".nodes").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
100 |       renderer.select(".relationships").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
101 |     };
102 | 
103 |     const disableZoomHandlers = () => {
104 |       renderer.on("wheel.zoom",null);
105 |       renderer.on("mousewheel.zoom",null);
106 |       renderer.on("mousedown.zoom", null);
107 |       renderer.on("DOMMouseScroll.zoom", null);
108 |       renderer.on("touchstart.zoom",null);
109 |       renderer.on("touchmove.zoom",null);
110 |       renderer.on("touchend.zoom",null);
111 |     };
112 | 
113 |     const legend = (svg, styles) => {
114 |       const keys = Object.keys(styles).sort();
115 |       const circles = svg.selectAll('circle.legend').data(keys);
116 |       const r = 20;
117 | 
118 |       circles.enter().append('circle').classed('legend', true).attr({ cx: 2 * r, r : r });
119 | 
120 |       circles.attr({
121 |         cy: node => (keys.indexOf(node)+1) * 2.2 * r,
122 |         fill: node => styles[node]['color'],
123 |         stroke: node => styles[node]['border-color'],
124 |         'stroke-width': node => "2px"
125 |       });
126 | 
127 |       const text = svg.selectAll('text.legend').data(keys);
128 |       text.enter().append('text').classed('legend',true).attr({
129 |         'text-anchor': 'left',
130 |         'font-weight': 'bold',
131 |         'stroke-width': '0',
132 |         'stroke-color': 'black',
133 |         'fill': 'black',
134 |         'x': 3.2 * r,
135 |         'font-size' : "12px"
136 |       });
137 | 
138 |       text.text(node => {
139 |         const label = styles[node].selector;
140 |         return label ? label.substring(5) : "";
141 |       }).attr('y', node => (keys.indexOf(node)+1) * 2.2 * r + 6);
142 | 
143 |       return circles.exit().remove();
144 |     };
145 | 
146 |     const { links, nodes } = visualization;
147 |     for (let i = 0; i < links.length; i++) {
148 |       links[i].source = links[i].start;
149 |       links[i].target = links[i].end;
150 |     }
151 | 
152 |     createStyles(nodeStyles(nodes), existingStyles);
153 | 
154 |     const graphModel = neo.graphModel()
155 |       .nodes(nodes)
156 |       .relationships(links);
157 | 
158 |     const graphView = neo.graphView()
159 |       .style(styleSheet(existingStyles, styleContents))
160 |       .width($container.width()).height($container.height());
161 | 
162 |     const svg = d3.select(`#${id}`).append("svg");
163 |     const renderer = svg.data([graphModel]);
164 |     legend(svg, existingStyles);
165 |     const zoomHandlers = {};
166 |     const zoomBehavior = d3.behavior.zoom().on("zoom", applyZoom).scaleExtent([0.2, 8]);
167 | 
168 |     renderer.call(graphView);
169 |     renderer.call(zoomBehavior);
170 | 
171 |     zoomHandlers.wheel = renderer.on("wheel.zoom");
172 |     zoomHandlers.mousewheel = renderer.on("mousewheel.zoom");
173 |     zoomHandlers.mousedown = renderer.on("mousedown.zoom");
174 |     zoomHandlers.DOMMouseScroll = renderer.on("DOMMouseScroll.zoom");
175 |     zoomHandlers.touchstart = renderer.on("touchstart.zoom");
176 |     zoomHandlers.touchmove = renderer.on("touchmove.zoom");
177 |     zoomHandlers.touchend = renderer.on("touchend.zoom");
178 |     disableZoomHandlers();
179 | 
180 |     const refresh = () => {
181 |       graphView.height($container.height());
182 |       graphView.width($container.width());
183 |       renderer.call(graphView);
184 |     };
185 | 
186 |     return  {
187 |       'subscriptions': {
188 |         'expand': refresh,
189 |         'contract': refresh,
190 |         'sizeChange': refresh
191 |       }
192 |     };
193 |   };
194 | 
195 |   return {'render': render };
196 | };
197 | 
198 | export { graphRenderer };


--------------------------------------------------------------------------------
/lib/Neo4jGraphRenderer/assets/renderer.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | Object.defineProperty(exports, "__esModule", {
  4 |   value: true
  5 | });
  6 | exports.graphRenderer = undefined;
  7 | 
  8 | var _jquery = require('jquery');
  9 | 
 10 | var _jquery2 = _interopRequireDefault(_jquery);
 11 | 
 12 | var _d = require('d3');
 13 | 
 14 | var d3 = _interopRequireWildcard(_d);
 15 | 
 16 | var _util = require('./util');
 17 | 
 18 | var _util2 = _interopRequireDefault(_util);
 19 | 
 20 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 21 | 
 22 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 23 | 
 24 | var graphRenderer = function graphRenderer() {
 25 | 
 26 |   var styleContents = 'node {\n      diameter: 40px;\n      color: #DFE1E3;\n      border-color: #D4D6D7;\n      border-width: 2px;\n      text-color-internal: #000000;\n      text-color-external: #000000;\n      caption: \'{name}\';\n      font-size: 12px;\n    }\n    relationship {\n      color: #4356C0;\n      shaft-width: 3px;\n      font-size: 9px;\n      padding: 3px;\n      text-color-external: #000000;\n      text-color-internal: #FFFFFF;\n    }\n';
 27 | 
 28 |   var skip = ["id", "start", "end", "source", "target", "labels", "type", "selected", "properties"];
 29 |   var entities = ["name", "title", "tag", "username", "lastname", "caption"];
 30 | 
 31 |   var svgStyling = '<style>\ntext{font-family:sans-serif}\n</style>';
 32 |   var stylingUrl = window.location.hostname === 'www.neo4j.org' ? 'http://gist.neo4j.org/css/neod3' : 'styles/neod3';
 33 |   if (window.isInternetExplorer) {
 34 |     stylingUrl += '-ie.css';
 35 |   } else {
 36 |     stylingUrl += '.css';
 37 |   }
 38 | 
 39 |   var existingStyles = {};
 40 |   var currentColor = 1;
 41 | 
 42 |   var render = function render(id, $container, visualization) {
 43 |     var extractProps = function extractProps(pc) {
 44 |       var p = {};
 45 |       for (var key in pc) {
 46 |         if (!pc.hasOwnProperty(key) || skip.indexOf(key) !== -1) continue;
 47 |         p[key] = pc[key];
 48 |       }
 49 |       return p;
 50 |     };
 51 | 
 52 |     var nodeStyles = function nodeStyles(nodes) {
 53 |       var label = function label(n) {
 54 |         var labels = n["labels"];
 55 |         if (labels && labels.length) {
 56 |           return labels[labels.length - 1];
 57 |         }
 58 |         return "";
 59 |       };
 60 | 
 61 |       var style = {};
 62 | 
 63 |       var _loop = function _loop(i) {
 64 |         var props = nodes[i].properties = extractProps(nodes[i]);
 65 |         var keys = Object.keys(props);
 66 |         if (label(nodes[i]) !== "" && keys.length > 0) {
 67 |           var selectedKeys = entities.filter(function (k) {
 68 |             return keys.indexOf(k) !== -1;
 69 |           });
 70 |           selectedKeys = selectedKeys.concat(keys).concat(['id']);
 71 |           var selector = 'node.' + label(nodes[i]);
 72 |           var selectedKey = selectedKeys[0];
 73 |           if (typeof props[selectedKey] === "string" && props[selectedKey].length > 30) {
 74 |             props[selectedKey] = props[selectedKey].substring(0, 30) + ' ...';
 75 |           }
 76 |           style[selector] = style[selector] || selectedKey;
 77 |         }
 78 |       };
 79 | 
 80 |       for (var i = 0; i < nodes.length; i++) {
 81 |         _loop(i);
 82 |       }
 83 |       return style;
 84 |     };
 85 | 
 86 |     var styleSheet = function styleSheet(styles, styleContents) {
 87 |       var format = function format(key) {
 88 |         var item = styles[key];
 89 |         return item.selector + " {caption: '{" + item.caption + "}'; color: " + item.color + "; border-color: " + item['border-color'] + "; text-color-internal: " + item['text-color-internal'] + "; text-color-external: " + item['text-color-external'] + "; }";
 90 |       };
 91 |       return styleContents + Object.keys(styles).map(format).join("\n");
 92 |     };
 93 | 
 94 |     var createStyles = function createStyles(styleCaptions, styles) {
 95 |       var colors = _util2.default.style.defaults.colors;
 96 | 
 97 |       for (var selector in styleCaptions) {
 98 |         if (!(selector in styles)) {
 99 |           var color = colors[currentColor];
100 |           currentColor = (currentColor + 1) % colors.length;
101 |           var textColor = window.isInternetExplorer ? '#000000' : color['text-color-internal'];
102 |           var style = { selector: selector, caption: styleCaptions[selector], color: color.color,
103 |             "border-color": color['border-color'], "text-color-internal": textColor, "text-color-external": textColor };
104 |           styles[selector] = style;
105 |         }
106 |       }
107 |       return styles;
108 |     };
109 | 
110 |     var applyZoom = function applyZoom() {
111 |       renderer.select(".nodes").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
112 |       renderer.select(".relationships").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
113 |     };
114 | 
115 |     var disableZoomHandlers = function disableZoomHandlers() {
116 |       renderer.on("wheel.zoom", null);
117 |       renderer.on("mousewheel.zoom", null);
118 |       renderer.on("mousedown.zoom", null);
119 |       renderer.on("DOMMouseScroll.zoom", null);
120 |       renderer.on("touchstart.zoom", null);
121 |       renderer.on("touchmove.zoom", null);
122 |       renderer.on("touchend.zoom", null);
123 |     };
124 | 
125 |     var legend = function legend(svg, styles) {
126 |       var keys = Object.keys(styles).sort();
127 |       var circles = svg.selectAll('circle.legend').data(keys);
128 |       var r = 20;
129 | 
130 |       circles.enter().append('circle').classed('legend', true).attr({ cx: 2 * r, r: r });
131 | 
132 |       circles.attr({
133 |         cy: function cy(node) {
134 |           return (keys.indexOf(node) + 1) * 2.2 * r;
135 |         },
136 |         fill: function fill(node) {
137 |           return styles[node]['color'];
138 |         },
139 |         stroke: function stroke(node) {
140 |           return styles[node]['border-color'];
141 |         },
142 |         'stroke-width': function strokeWidth(node) {
143 |           return "2px";
144 |         }
145 |       });
146 | 
147 |       var text = svg.selectAll('text.legend').data(keys);
148 |       text.enter().append('text').classed('legend', true).attr({
149 |         'text-anchor': 'left',
150 |         'font-weight': 'bold',
151 |         'stroke-width': '0',
152 |         'stroke-color': 'black',
153 |         'fill': 'black',
154 |         'x': 3.2 * r,
155 |         'font-size': "12px"
156 |       });
157 | 
158 |       text.text(function (node) {
159 |         var label = styles[node].selector;
160 |         return label ? label.substring(5) : "";
161 |       }).attr('y', function (node) {
162 |         return (keys.indexOf(node) + 1) * 2.2 * r + 6;
163 |       });
164 | 
165 |       return circles.exit().remove();
166 |     };
167 | 
168 |     var links = visualization.links,
169 |         nodes = visualization.nodes;
170 | 
171 |     for (var i = 0; i < links.length; i++) {
172 |       links[i].source = links[i].start;
173 |       links[i].target = links[i].end;
174 |     }
175 | 
176 |     createStyles(nodeStyles(nodes), existingStyles);
177 | 
178 |     var graphModel = _util2.default.graphModel().nodes(nodes).relationships(links);
179 | 
180 |     var graphView = _util2.default.graphView().style(styleSheet(existingStyles, styleContents)).width($container.width()).height($container.height());
181 | 
182 |     var svg = d3.select('#' + id).append("svg");
183 |     var renderer = svg.data([graphModel]);
184 |     legend(svg, existingStyles);
185 |     var zoomHandlers = {};
186 |     var zoomBehavior = d3.behavior.zoom().on("zoom", applyZoom).scaleExtent([0.2, 8]);
187 | 
188 |     renderer.call(graphView);
189 |     renderer.call(zoomBehavior);
190 | 
191 |     zoomHandlers.wheel = renderer.on("wheel.zoom");
192 |     zoomHandlers.mousewheel = renderer.on("mousewheel.zoom");
193 |     zoomHandlers.mousedown = renderer.on("mousedown.zoom");
194 |     zoomHandlers.DOMMouseScroll = renderer.on("DOMMouseScroll.zoom");
195 |     zoomHandlers.touchstart = renderer.on("touchstart.zoom");
196 |     zoomHandlers.touchmove = renderer.on("touchmove.zoom");
197 |     zoomHandlers.touchend = renderer.on("touchend.zoom");
198 |     disableZoomHandlers();
199 | 
200 |     var refresh = function refresh() {
201 |       graphView.height($container.height());
202 |       graphView.width($container.width());
203 |       renderer.call(graphView);
204 |     };
205 | 
206 |     return {
207 |       'subscriptions': {
208 |         'expand': refresh,
209 |         'contract': refresh,
210 |         'sizeChange': refresh
211 |       }
212 |     };
213 |   };
214 | 
215 |   _jquery2.default.get(stylingUrl, function (data) {
216 |     svgStyling = '<style>\n' + data + '\n</style>';
217 |     (0, _jquery2.default)(svgStyling).appendTo('head');
218 |   });
219 | 
220 |   return { 'render': render };
221 | };
222 | 
223 | exports.graphRenderer = graphRenderer;


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 11 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const getClientEnvironment = require('./env');
 14 | const paths = require('./paths');
 15 | 
 16 | // Webpack uses `publicPath` to determine where the app is being served from.
 17 | // In development, we always serve from the root. This makes config easier.
 18 | const publicPath = '/';
 19 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 20 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 21 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 22 | const publicUrl = '';
 23 | // Get environment variables to inject into our app.
 24 | const env = getClientEnvironment(publicUrl);
 25 | 
 26 | // This is the development configuration.
 27 | // It is focused on developer experience and fast rebuilds.
 28 | // The production configuration is different and lives in a separate file.
 29 | module.exports = {
 30 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 31 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 32 |   devtool: 'cheap-module-source-map',
 33 |   // These are the "entry points" to our application.
 34 |   // This means they will be the "root" imports that are included in JS bundle.
 35 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 36 |   entry: [
 37 |     // Include an alternative client for WebpackDevServer. A client's job is to
 38 |     // connect to WebpackDevServer by a socket and get notified about changes.
 39 |     // When you save a file, the client will either apply hot updates (in case
 40 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 41 |     // make a syntax error, this client will display a syntax error overlay.
 42 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 43 |     // to bring better experience for Create React App users. You can replace
 44 |     // the line below with these two lines if you prefer the stock client:
 45 |     // require.resolve('webpack-dev-server/client') + '?/',
 46 |     // require.resolve('webpack/hot/dev-server'),
 47 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 48 |     // We ship a few polyfills by default:
 49 |     require.resolve('./polyfills'),
 50 |     // Errors should be considered fatal in development
 51 |     require.resolve('react-error-overlay'),
 52 |     // Finally, this is your app's code:
 53 |     paths.appIndexJs,
 54 |     // We include the app code last so that if there is a runtime error during
 55 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 56 |     // changing JS code would still trigger a refresh.
 57 |   ],
 58 |   output: {
 59 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 60 |     path: paths.appBuild,
 61 |     // Add /* filename */ comments to generated require()s in the output.
 62 |     pathinfo: true,
 63 |     // This does not produce a real file. It's just the virtual path that is
 64 |     // served by WebpackDevServer in development. This is the JS bundle
 65 |     // containing code from all our entry points, and the Webpack runtime.
 66 |     filename: 'static/js/bundle.js',
 67 |     // There are also additional JS chunk files if you use code splitting.
 68 |     chunkFilename: 'static/js/[name].chunk.js',
 69 |     // This is the URL that app is served from. We use "/" in development.
 70 |     publicPath: publicPath,
 71 |     // Point sourcemap entries to original disk location
 72 |     devtoolModuleFilenameTemplate: info =>
 73 |       path.resolve(info.absoluteResourcePath),
 74 |   },
 75 |   resolve: {
 76 |     // This allows you to set a fallback for where Webpack should look for modules.
 77 |     // We placed these paths second because we want `node_modules` to "win"
 78 |     // if there are any conflicts. This matches Node resolution mechanism.
 79 |     // https://github.com/facebookincubator/create-react-app/issues/253
 80 |     modules: ['node_modules', paths.appNodeModules].concat(
 81 |       // It is guaranteed to exist because we tweak it in `env.js`
 82 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 83 |     ),
 84 |     // These are the reasonable defaults supported by the Node ecosystem.
 85 |     // We also include JSX as a common component filename extension to support
 86 |     // some tools, although we do not recommend using it, see:
 87 |     // https://github.com/facebookincubator/create-react-app/issues/290
 88 |     extensions: ['.js', '.json', '.jsx', '.css'],
 89 |     alias: {
 90 |       
 91 |       // Support React Native Web
 92 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 93 |       'react-native': 'react-native-web',
 94 |     },
 95 |     plugins: [
 96 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 97 |       // This often causes confusion because we only process files within src/ with babel.
 98 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 99 |       // please link the files into your node_modules/ and let module-resolution kick in.
100 |       // Make sure your source files are compiled, as they will not be processed in any way.
101 |       new ModuleScopePlugin(paths.appSrc),
102 |     ],
103 |   },
104 |   module: {
105 |     strictExportPresence: true,
106 |     rules: [
107 |       // TODO: Disable require.ensure as it's not a standard language feature.
108 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
109 |       // { parser: { requireEnsure: false } },
110 | 
111 |       // First, run the linter.
112 |       // It's important to do this before Babel processes the JS.
113 |       {
114 |         test: /\.(js|jsx)$/,
115 |         enforce: 'pre',
116 |         use: [
117 |           {
118 |             options: {
119 |               formatter: eslintFormatter,
120 |               
121 |             },
122 |             loader: require.resolve('eslint-loader'),
123 |           },
124 |         ],
125 |         include: paths.appSrc,
126 |       },
127 |       // ** ADDING/UPDATING LOADERS **
128 |       // The "file" loader handles all assets unless explicitly excluded.
129 |       // The `exclude` list *must* be updated with every change to loader extensions.
130 |       // When adding a new loader, you must add its `test`
131 |       // as a new entry in the `exclude` list for "file" loader.
132 | 
133 |       // "file" loader makes sure those assets get served by WebpackDevServer.
134 |       // When you `import` an asset, you get its (virtual) filename.
135 |       // In production, they would get copied to the `build` folder.
136 |       {
137 |         exclude: [
138 |           /\.html$/,
139 |           /\.(js|jsx)$/,
140 |           /\.css$/,
141 |           /\.json$/,
142 |           /\.bmp$/,
143 |           /\.gif$/,
144 |           /\.jpe?g$/,
145 |           /\.png$/,
146 |         ],
147 |         loader: require.resolve('file-loader'),
148 |         options: {
149 |           name: 'static/media/[name].[hash:8].[ext]',
150 |         },
151 |       },
152 |       // "url" loader works like "file" loader except that it embeds assets
153 |       // smaller than specified limit in bytes as data URLs to avoid requests.
154 |       // A missing `test` is equivalent to a match.
155 |       {
156 |         test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
157 |         loader: require.resolve('url-loader'),
158 |         options: {
159 |           limit: 10000,
160 |           name: 'static/media/[name].[hash:8].[ext]',
161 |         },
162 |       },
163 |       // Process JS with Babel.
164 |       {
165 |         test: /\.(js|jsx)$/,
166 |         include: paths.appSrc,
167 |         loader: require.resolve('babel-loader'),
168 |         options: {
169 |           
170 |           // This is a feature of `babel-loader` for webpack (not Babel itself).
171 |           // It enables caching results in ./node_modules/.cache/babel-loader/
172 |           // directory for faster rebuilds.
173 |           cacheDirectory: true,
174 |         },
175 |       },
176 |       // "postcss" loader applies autoprefixer to our CSS.
177 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
178 |       // "style" loader turns CSS into JS modules that inject <style> tags.
179 |       // In production, we use a plugin to extract that CSS to a file, but
180 |       // in development "style" loader enables hot editing of CSS.
181 |       {
182 |         test: /\.css$/,
183 |         use: [
184 |           require.resolve('style-loader'),
185 |           {
186 |             loader: require.resolve('css-loader'),
187 |             options: {
188 |               importLoaders: 1,
189 |             },
190 |           },
191 |           {
192 |             loader: require.resolve('postcss-loader'),
193 |             options: {
194 |               ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
195 |               plugins: () => [
196 |                 require('postcss-flexbugs-fixes'),
197 |                 autoprefixer({
198 |                   browsers: [
199 |                     '>1%',
200 |                     'last 4 versions',
201 |                     'Firefox ESR',
202 |                     'not ie < 9', // React doesn't support IE8 anyway
203 |                   ],
204 |                   flexbox: 'no-2009',
205 |                 }),
206 |               ],
207 |             },
208 |           },
209 |         ],
210 |       },
211 |       // ** STOP ** Are you adding a new loader?
212 |       // Remember to add the new extension(s) to the "file" loader exclusion list.
213 |     ],
214 |   },
215 |   plugins: [
216 |     // Makes some environment variables available in index.html.
217 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
218 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
219 |     // In development, this will be an empty string.
220 |     new InterpolateHtmlPlugin(env.raw),
221 |     // Generates an `index.html` file with the <script> injected.
222 |     new HtmlWebpackPlugin({
223 |       inject: true,
224 |       template: paths.appHtml,
225 |     }),
226 |     // Makes some environment variables available to the JS code, for example:
227 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
228 |     new webpack.DefinePlugin(env.stringified),
229 |     // This is necessary to emit hot updates (currently CSS only):
230 |     new webpack.HotModuleReplacementPlugin(),
231 |     // Watcher doesn't work well if you mistype casing in a path so we use
232 |     // a plugin that prints an error when you attempt to do this.
233 |     // See https://github.com/facebookincubator/create-react-app/issues/240
234 |     new CaseSensitivePathsPlugin(),
235 |     // If you require a missing module and then `npm install` it, you still have
236 |     // to restart the development server for Webpack to discover it. This plugin
237 |     // makes the discovery automatic so you don't have to restart.
238 |     // See https://github.com/facebookincubator/create-react-app/issues/186
239 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
240 |     // Moment.js is an extremely popular library that bundles large locale files
241 |     // by default due to how Webpack interprets its code. This is a practical
242 |     // solution that requires the user to opt into importing specific locales.
243 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
244 |     // You can remove this if you don't use Moment.js:
245 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
246 |   ],
247 |   // Some libraries import Node modules but don't use them in the browser.
248 |   // Tell Webpack to provide empty mocks for them so importing them works.
249 |   node: {
250 |     fs: 'empty',
251 |     net: 'empty',
252 |     tls: 'empty',
253 |   },
254 |   // Turn off performance hints during development because we don't do any
255 |   // splitting or minification in interest of speed. These warnings become
256 |   // cumbersome.
257 |   performance: {
258 |     hints: false,
259 |   },
260 | };
261 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | const ManifestPlugin = require('webpack-manifest-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 11 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const paths = require('./paths');
 14 | const getClientEnvironment = require('./env');
 15 | 
 16 | // Webpack uses `publicPath` to determine where the app is being served from.
 17 | // It requires a trailing slash, or the file assets will get an incorrect path.
 18 | const publicPath = paths.servedPath;
 19 | // Some apps do not use client-side routing with pushState.
 20 | // For these, "homepage" can be set to "." to enable relative asset paths.
 21 | const shouldUseRelativeAssetPaths = publicPath === './';
 22 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 23 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 24 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 25 | const publicUrl = publicPath.slice(0, -1);
 26 | // Get environment variables to inject into our app.
 27 | const env = getClientEnvironment(publicUrl);
 28 | 
 29 | // Assert this just to be safe.
 30 | // Development builds of React are slow and not intended for production.
 31 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 32 |   throw new Error('Production builds must have NODE_ENV=production.');
 33 | }
 34 | 
 35 | // Note: defined here because it will be used more than once.
 36 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 37 | 
 38 | // ExtractTextPlugin expects the build output to be flat.
 39 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 40 | // However, our output is structured with css, js and media folders.
 41 | // To have this structure working with relative paths, we have to use custom options.
 42 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 43 |   ? // Making sure that the publicPath goes back to to build folder.
 44 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 45 |   : {};
 46 | 
 47 | // This is the production configuration.
 48 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 49 | // The development configuration is different and lives in a separate file.
 50 | module.exports = {
 51 |   // Don't attempt to continue if there are any errors.
 52 |   bail: true,
 53 |   // We generate sourcemaps in production. This is slow but gives good results.
 54 |   // You can exclude the *.map files from the build during deployment.
 55 |   devtool: 'source-map',
 56 |   // In production, we only want to load the polyfills and the app code.
 57 |   entry: [require.resolve('./polyfills'), paths.appIndexJs],
 58 |   output: {
 59 |     // The build folder.
 60 |     path: paths.appBuild,
 61 |     // Generated JS file names (with nested folders).
 62 |     // There will be one main bundle, and one file per asynchronous chunk.
 63 |     // We don't currently advertise code splitting but Webpack supports it.
 64 |     filename: 'static/js/[name].[chunkhash:8].js',
 65 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 66 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 67 |     publicPath: publicPath,
 68 |     // Point sourcemap entries to original disk location
 69 |     devtoolModuleFilenameTemplate: info =>
 70 |       path.relative(paths.appSrc, info.absoluteResourcePath),
 71 |   },
 72 |   resolve: {
 73 |     // This allows you to set a fallback for where Webpack should look for modules.
 74 |     // We placed these paths second because we want `node_modules` to "win"
 75 |     // if there are any conflicts. This matches Node resolution mechanism.
 76 |     // https://github.com/facebookincubator/create-react-app/issues/253
 77 |     modules: ['node_modules', paths.appNodeModules].concat(
 78 |       // It is guaranteed to exist because we tweak it in `env.js`
 79 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 80 |     ),
 81 |     // These are the reasonable defaults supported by the Node ecosystem.
 82 |     // We also include JSX as a common component filename extension to support
 83 |     // some tools, although we do not recommend using it, see:
 84 |     // https://github.com/facebookincubator/create-react-app/issues/290
 85 |     extensions: ['.js', '.json', '.jsx', '.css'],
 86 |     alias: {
 87 |       
 88 |       // Support React Native Web
 89 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 90 |       'react-native': 'react-native-web',
 91 |     },
 92 |     plugins: [
 93 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 94 |       // This often causes confusion because we only process files within src/ with babel.
 95 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 96 |       // please link the files into your node_modules/ and let module-resolution kick in.
 97 |       // Make sure your source files are compiled, as they will not be processed in any way.
 98 |       new ModuleScopePlugin(paths.appSrc),
 99 |     ],
100 |   },
101 |   module: {
102 |     strictExportPresence: true,
103 |     rules: [
104 |       // TODO: Disable require.ensure as it's not a standard language feature.
105 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
106 |       // { parser: { requireEnsure: false } },
107 | 
108 |       // First, run the linter.
109 |       // It's important to do this before Babel processes the JS.
110 |       {
111 |         test: /\.(js|jsx)$/,
112 |         enforce: 'pre',
113 |         use: [
114 |           {
115 |             options: {
116 |               formatter: eslintFormatter,
117 |               
118 |             },
119 |             loader: require.resolve('eslint-loader'),
120 |           },
121 |         ],
122 |         include: paths.appSrc,
123 |       },
124 |       // ** ADDING/UPDATING LOADERS **
125 |       // The "file" loader handles all assets unless explicitly excluded.
126 |       // The `exclude` list *must* be updated with every change to loader extensions.
127 |       // When adding a new loader, you must add its `test`
128 |       // as a new entry in the `exclude` list in the "file" loader.
129 | 
130 |       // "file" loader makes sure those assets end up in the `build` folder.
131 |       // When you `import` an asset, you get its filename.
132 |       {
133 |         exclude: [
134 |           /\.html$/,
135 |           /\.(js|jsx)$/,
136 |           /\.css$/,
137 |           /\.json$/,
138 |           /\.bmp$/,
139 |           /\.gif$/,
140 |           /\.jpe?g$/,
141 |           /\.png$/,
142 |         ],
143 |         loader: require.resolve('file-loader'),
144 |         options: {
145 |           name: 'static/media/[name].[hash:8].[ext]',
146 |         },
147 |       },
148 |       // "url" loader works just like "file" loader but it also embeds
149 |       // assets smaller than specified size as data URLs to avoid requests.
150 |       {
151 |         test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
152 |         loader: require.resolve('url-loader'),
153 |         options: {
154 |           limit: 10000,
155 |           name: 'static/media/[name].[hash:8].[ext]',
156 |         },
157 |       },
158 |       // Process JS with Babel.
159 |       {
160 |         test: /\.(js|jsx)$/,
161 |         include: paths.appSrc,
162 |         loader: require.resolve('babel-loader'),
163 |         
164 |       },
165 |       // The notation here is somewhat confusing.
166 |       // "postcss" loader applies autoprefixer to our CSS.
167 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
168 |       // "style" loader normally turns CSS into JS modules injecting <style>,
169 |       // but unlike in development configuration, we do something different.
170 |       // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
171 |       // (second argument), then grabs the result CSS and puts it into a
172 |       // separate file in our build process. This way we actually ship
173 |       // a single CSS file in production instead of JS code injecting <style>
174 |       // tags. If you use code splitting, however, any async bundles will still
175 |       // use the "style" loader inside the async code so CSS from them won't be
176 |       // in the main CSS file.
177 |       {
178 |         test: /\.css$/,
179 |         loader: ExtractTextPlugin.extract(
180 |           Object.assign(
181 |             {
182 |               fallback: require.resolve('style-loader'),
183 |               use: [
184 |                 {
185 |                   loader: require.resolve('css-loader'),
186 |                   options: {
187 |                     importLoaders: 1,
188 |                     minimize: true,
189 |                     sourceMap: true,
190 |                   },
191 |                 },
192 |                 {
193 |                   loader: require.resolve('postcss-loader'),
194 |                   options: {
195 |                     ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
196 |                     plugins: () => [
197 |                       require('postcss-flexbugs-fixes'),
198 |                       autoprefixer({
199 |                         browsers: [
200 |                           '>1%',
201 |                           'last 4 versions',
202 |                           'Firefox ESR',
203 |                           'not ie < 9', // React doesn't support IE8 anyway
204 |                         ],
205 |                         flexbox: 'no-2009',
206 |                       }),
207 |                     ],
208 |                   },
209 |                 },
210 |               ],
211 |             },
212 |             extractTextPluginOptions
213 |           )
214 |         ),
215 |         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
216 |       },
217 |       // ** STOP ** Are you adding a new loader?
218 |       // Remember to add the new extension(s) to the "file" loader exclusion list.
219 |     ],
220 |   },
221 |   plugins: [
222 |     // Makes some environment variables available in index.html.
223 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
224 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
225 |     // In production, it will be an empty string unless you specify "homepage"
226 |     // in `package.json`, in which case it will be the pathname of that URL.
227 |     new InterpolateHtmlPlugin(env.raw),
228 |     // Generates an `index.html` file with the <script> injected.
229 |     new HtmlWebpackPlugin({
230 |       inject: true,
231 |       template: paths.appHtml,
232 |       minify: {
233 |         removeComments: true,
234 |         collapseWhitespace: true,
235 |         removeRedundantAttributes: true,
236 |         useShortDoctype: true,
237 |         removeEmptyAttributes: true,
238 |         removeStyleLinkTypeAttributes: true,
239 |         keepClosingSlash: true,
240 |         minifyJS: true,
241 |         minifyCSS: true,
242 |         minifyURLs: true,
243 |       },
244 |     }),
245 |     // Makes some environment variables available to the JS code, for example:
246 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
247 |     // It is absolutely essential that NODE_ENV was set to production here.
248 |     // Otherwise React will be compiled in the very slow development mode.
249 |     new webpack.DefinePlugin(env.stringified),
250 |     // Minify the code.
251 |     new webpack.optimize.UglifyJsPlugin({
252 |       compress: {
253 |         warnings: false,
254 |         // Disabled because of an issue with Uglify breaking seemingly valid code:
255 |         // https://github.com/facebookincubator/create-react-app/issues/2376
256 |         // Pending further investigation:
257 |         // https://github.com/mishoo/UglifyJS2/issues/2011
258 |         comparisons: false,
259 |       },
260 |       output: {
261 |         comments: false,
262 |       },
263 |       sourceMap: true,
264 |     }),
265 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
266 |     new ExtractTextPlugin({
267 |       filename: cssFilename,
268 |     }),
269 |     // Generate a manifest file which contains a mapping of all asset filenames
270 |     // to their corresponding output file so that tools can pick it up without
271 |     // having to parse `index.html`.
272 |     new ManifestPlugin({
273 |       fileName: 'asset-manifest.json',
274 |     }),
275 |     // Generate a service worker script that will precache, and keep up to date,
276 |     // the HTML & assets that are part of the Webpack build.
277 |     new SWPrecacheWebpackPlugin({
278 |       // By default, a cache-busting query parameter is appended to requests
279 |       // used to populate the caches, to ensure the responses are fresh.
280 |       // If a URL is already hashed by Webpack, then there is no concern
281 |       // about it being stale, and the cache-busting can be skipped.
282 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
283 |       filename: 'service-worker.js',
284 |       logger(message) {
285 |         if (message.indexOf('Total precache size is') === 0) {
286 |           // This message occurs for every build and is a bit too noisy.
287 |           return;
288 |         }
289 |         console.log(message);
290 |       },
291 |       minify: true,
292 |       // For unknown URLs, fallback to the index page
293 |       navigateFallback: publicUrl + '/index.html',
294 |       // Ignores URLs starting from /__ (useful for Firebase):
295 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
296 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
297 |       // Don't precache sourcemaps (they're large) and build asset manifest:
298 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
299 |       // Work around Windows path issue in SWPrecacheWebpackPlugin:
300 |       // https://github.com/facebookincubator/create-react-app/issues/2235
301 |       stripPrefix: paths.appBuild.replace(/\\/g, '/') + '/',
302 |     }),
303 |     // Moment.js is an extremely popular library that bundles large locale files
304 |     // by default due to how Webpack interprets its code. This is a practical
305 |     // solution that requires the user to opt into importing specific locales.
306 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
307 |     // You can remove this if you don't use Moment.js:
308 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
309 |   ],
310 |   // Some libraries import Node modules but don't use them in the browser.
311 |   // Tell Webpack to provide empty mocks for them so importing them works.
312 |   node: {
313 |     fs: 'empty',
314 |     net: 'empty',
315 |     tls: 'empty',
316 |   },
317 | };
318 | 


--------------------------------------------------------------------------------
/src/node_modules/Neo4jGraphRenderer/assets/util.js:
--------------------------------------------------------------------------------
   1 | import * as d3 from 'd3';
   2 | 
   3 | window.neo = {};
   4 | 
   5 | const __hasProp = {}.hasOwnProperty, __slice = [].slice;
   6 | 
   7 | const neo = {
   8 |   models: {},
   9 |   renderers: {
  10 |     node: [],
  11 |     relationship: []
  12 |   },
  13 |   utils: {
  14 |     copy: src => JSON.parse(JSON.stringify(src)),
  15 |     extend: (dest, src) => {
  16 |       if (!neo.utils.isObject(dest) && neo.utils.isObject(src)) return;
  17 |       for (let k in src) {
  18 |         if (!__hasProp.call(src, k)) continue;
  19 |         dest[k] = src[k];
  20 |       }
  21 |       return dest;
  22 |     },
  23 |     isArray: Array.isArray || function(obj) {
  24 |       return Object.prototype.toString.call(obj) === '[object Array]';
  25 |     },
  26 |     isObject: obj => Object(obj) === obj
  27 |   }
  28 | };
  29 | 
  30 | const __bind = (fn, me) => { return function(){ return fn.apply(me, arguments); }; };
  31 | 
  32 | neo.models.Graph = (() => {
  33 |   function Graph(cypher) {
  34 |     this.removeRelationships = __bind(this.removeRelationships, this);
  35 |     this.removeNodes = __bind(this.removeNodes, this);
  36 |     this.findRelationship = __bind(this.findRelationship, this);
  37 |     this.findNode = __bind(this.findNode, this);
  38 |     this.addRelationships = __bind(this.addRelationships, this);
  39 |     this.addNodes = __bind(this.addNodes, this);
  40 |     this.nodeMap = {};
  41 |     this.relationshipMap = {};
  42 |     if (cypher) {
  43 |       this.addNodes(cypher.nodes);
  44 |       this.addRelationships(cypher.relationships);
  45 |     }
  46 |   }
  47 | 
  48 |   Graph.prototype.nodes = function() {
  49 |     const _ref = this.nodeMap;
  50 |     const _results = [];
  51 |     for (let key in _ref) {
  52 |       if (!__hasProp.call(_ref, key)) continue;
  53 |       _results.push(_ref[key]);
  54 |     }
  55 |     return _results;
  56 |   };
  57 | 
  58 |   Graph.prototype.relationships = function() {
  59 |     const _ref = this.relationshipMap;
  60 |     const _results = [];
  61 |     for (let key in _ref) {
  62 |       if (!__hasProp.call(_ref, key)) continue;
  63 |       _results.push(_ref[key]);
  64 |     }
  65 |     return _results;
  66 |   };
  67 | 
  68 |   Graph.prototype.addNodes = function(item) {
  69 |     let _base, _name;
  70 |     const items = !neo.utils.isArray(item) ? [item] : item;
  71 |     for (let _i = 0, _len = items.length; _i < _len; _i++) {
  72 |       item = items[_i];
  73 |       const node = !(item instanceof neo.models.Node) ? new neo.models.Node(item.id, item.labels, item.properties) : item;
  74 |       (_base = this.nodeMap)[_name = item.id] || (_base[_name] = node);
  75 |     }
  76 |     return this;
  77 |   };
  78 | 
  79 |   Graph.prototype.addRelationships = function(item) {
  80 |     const items = !neo.utils.isArray(item) ? [item] : item;
  81 |     for (let _i = 0, _len = items.length; _i < _len; _i++) {
  82 |       item = items[_i];
  83 |       const source = this.nodeMap[item.source] || (() => { throw new Error("Invalid source"); })();
  84 |       const target = this.nodeMap[item.target] || (() => { throw new Error("Invalid target"); })();
  85 |       this.relationshipMap[item.id] = new neo.models.Relationship(item.id, source, target, item.type, item.properties);
  86 |     }
  87 |     return this;
  88 |   };
  89 | 
  90 |   Graph.prototype.findNode = id => this.nodeMap[id];
  91 | 
  92 |   Graph.prototype.findRelationship = id => this.relationshipMap[id];
  93 | 
  94 |   Graph.prototype.merge = result => {
  95 |     this.addNodes(result.nodes);
  96 |     this.addRelationships(result.relationships);
  97 |     return this;
  98 |   };
  99 | 
 100 |   Graph.prototype.removeNodes = function() {
 101 |     let remove = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
 102 |     if (arguments.length === 0) {
 103 |       this.nodeMap = {};
 104 |       this.relationshipMap = {};
 105 |       return this;
 106 |     }
 107 |     remove = neo.utils.isArray(remove[0]) ? remove[0] : remove;
 108 |     for (let _i = 0, _len = remove.length; _i < _len; _i++) {
 109 |       let id = remove[_i];
 110 |       let rels = (() => {
 111 |         const _ref = this.relationshipMap;
 112 |         const _results = [];
 113 |         for (const rId in _ref) {
 114 |           if (!__hasProp.call(_ref, rId)) continue;
 115 |           const rel = _ref[rId];
 116 |           if (rel.source.id === id || rel.target.id === id) {
 117 |             _results.push(rel.id);
 118 |           }
 119 |         }
 120 |         return _results;
 121 |       }).call(this);
 122 |       this.removeRelationships(rels);
 123 |       delete this.nodeMap[id];
 124 |     }
 125 |     return this;
 126 |   };
 127 | 
 128 |   Graph.prototype.removeRelationships = function() {
 129 |     let remove = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
 130 |     if (arguments.length === 0) {
 131 |       this.relationshipMap = {};
 132 |       return this;
 133 |     }
 134 |     remove = neo.utils.isArray(remove[0]) ? remove[0] : remove;
 135 |     for (let _i = 0, _len = remove.length; _i < _len; _i++) {
 136 |       const id = remove[_i];
 137 |       delete this.relationshipMap[id];
 138 |     }
 139 |     return this;
 140 |   };
 141 | 
 142 |   return Graph;
 143 | })();
 144 | 
 145 | const NeoD3Geometry = (() => {
 146 |   const square = distance => distance * distance;
 147 | 
 148 |   function NeoD3Geometry(style) {
 149 |     this.style = style;
 150 |   }
 151 | 
 152 |   NeoD3Geometry.prototype.formatNodeCaptions = function(nodes) {
 153 |     const style = this.style;
 154 |     const _results = [];
 155 |     for (let _i = 0, _len = nodes.length; _i < _len; _i++) {
 156 |       const node = nodes[_i];
 157 |       const template = style.forNode(node).get("caption");
 158 |       const captionText = style.interpolate(template, node.id, node.propertyMap);
 159 |       const words = captionText.split(" ");
 160 |       const lines = [];
 161 |       let _j;
 162 |       for (let i = _j = 0, _ref = words.length - 1; 0 <= _ref ? _j <= _ref : _j >= _ref; i = 0 <= _ref ? ++_j : --_j) {
 163 |         lines.push({ node: node, text: words[i], baseline: (1 + i - words.length / 2) * 10 });
 164 |       }
 165 |       _results.push(node.caption = lines);
 166 |     }
 167 |     return _results;
 168 |   };
 169 | 
 170 |   NeoD3Geometry.prototype.measureRelationshipCaption = function(relationship, caption) {
 171 |     const fontFamily = 'sans-serif';
 172 |     const fontSize = parseFloat(this.style.forRelationship(relationship).get('font-size'));
 173 |     const padding = parseFloat(this.style.forRelationship(relationship).get('padding'));
 174 |     return neo.utils.measureText(caption, fontFamily, fontSize) + padding * 2;
 175 |   };
 176 | 
 177 |   NeoD3Geometry.prototype.captionFitsInsideArrowShaftWidth = function(relationship) {
 178 |     return parseFloat(this.style.forRelationship(relationship).get('shaft-width')) > parseFloat(this.style.forRelationship(relationship).get('font-size'));
 179 |   };
 180 | 
 181 |   NeoD3Geometry.prototype.measureRelationshipCaptions = function(relationships) {
 182 |     const _results = [];
 183 |     for (let _i = 0, _len = relationships.length; _i < _len; _i++) {
 184 |       const relationship = relationships[_i];
 185 |       relationship.captionLength = this.measureRelationshipCaption(relationship, relationship.type);
 186 |       _results.push(relationship.captionLayout = this.captionFitsInsideArrowShaftWidth(relationship) ? "internal" : "external");
 187 |     }
 188 |     return _results;
 189 |   };
 190 | 
 191 |   NeoD3Geometry.prototype.shortenCaption = function(relationship, caption, targetWidth) {
 192 |     let shortCaption = caption;
 193 |     while (true) {
 194 |       if (shortCaption.length <= 2) return ['', 0];
 195 |       shortCaption = shortCaption.substr(0, shortCaption.length - 2) + '\u2026';
 196 |       const width = this.measureRelationshipCaption(relationship, shortCaption);
 197 |       if (width < targetWidth) return [shortCaption, width];
 198 |     }
 199 |   };
 200 | 
 201 |   NeoD3Geometry.prototype.layoutRelationships = function(relationships) {
 202 |     let relationship, dx, dy, length;
 203 |     const _results = [];
 204 |     const alongPath = (from, distance) => {
 205 |       return { x: from.x + dx * distance / length, y: from.y + dy * distance / length };
 206 |     };
 207 | 
 208 |     for (let _i = 0, _len = relationships.length; _i < _len; _i++) {
 209 |       relationship = relationships[_i];
 210 |       dx = relationship.target.x - relationship.source.x;
 211 |       dy = relationship.target.y - relationship.source.y;
 212 |       length = Math.sqrt(square(dx) + square(dy));
 213 |       relationship.arrowLength = length - relationship.source.radius - relationship.target.radius;
 214 |       const shaftRadius = (parseFloat(this.style.forRelationship(relationship).get('shaft-width')) / 2) || 2;
 215 |       const headRadius = shaftRadius + 3;
 216 |       const headHeight = headRadius * 2;
 217 |       const shaftLength = relationship.arrowLength - headHeight;
 218 |       relationship.startPoint = alongPath(relationship.source, relationship.source.radius);
 219 |       relationship.endPoint = alongPath(relationship.target, -relationship.target.radius);
 220 |       relationship.midShaftPoint = alongPath(relationship.startPoint, shaftLength / 2);
 221 |       relationship.angle = Math.atan2(dy, dx) / Math.PI * 180;
 222 |       relationship.textAngle = relationship.angle;
 223 |       if (relationship.angle < -90 || relationship.angle > 90) {
 224 |         relationship.textAngle += 180;
 225 |       }
 226 |       const _ref = shaftLength > relationship.captionLength ? [relationship.type, relationship.captionLength] : this.shortenCaption(relationship, relationship.type, shaftLength);
 227 |       relationship.shortCaption = _ref[0];
 228 |       relationship.shortCaptionLength = _ref[1];
 229 |       if (relationship.captionLayout === "external") {
 230 |         const startBreak = (shaftLength - relationship.shortCaptionLength) / 2;
 231 |         const endBreak = shaftLength - startBreak;
 232 |         _results.push(relationship.arrowOutline = ['M', 0, shaftRadius, 'L', startBreak, shaftRadius, 'L', startBreak, -shaftRadius, 'L', 0, -shaftRadius, 'Z', 'M', endBreak, shaftRadius, 'L', shaftLength, shaftRadius, 'L', shaftLength, headRadius, 'L', relationship.arrowLength, 0, 'L', shaftLength, -headRadius, 'L', shaftLength, -shaftRadius, 'L', endBreak, -shaftRadius, 'Z'].join(' '));
 233 |       } else {
 234 |         _results.push(relationship.arrowOutline = ['M', 0, shaftRadius, 'L', shaftLength, shaftRadius, 'L', shaftLength, headRadius, 'L', relationship.arrowLength, 0, 'L', shaftLength, -headRadius, 'L', shaftLength, -shaftRadius, 'L', 0, -shaftRadius, 'Z'].join(' '));
 235 |       }
 236 |     }
 237 |     return _results;
 238 |   };
 239 | 
 240 |   NeoD3Geometry.prototype.setNodeRadii = function(nodes) {
 241 |     const _results = [];
 242 |     for (let _i = 0, _len = nodes.length; _i < _len; _i++) {
 243 |       const node = nodes[_i];
 244 |       _results.push(node.radius = parseFloat(this.style.forNode(node).get("diameter")) / 2);
 245 |     }
 246 |     return _results;
 247 |   };
 248 | 
 249 |   NeoD3Geometry.prototype.onGraphChange = function(graph) {
 250 |     this.setNodeRadii(graph.nodes());
 251 |     this.formatNodeCaptions(graph.nodes());
 252 |     return this.measureRelationshipCaptions(graph.relationships());
 253 |   };
 254 | 
 255 |   NeoD3Geometry.prototype.onTick = function(graph) {
 256 |     return this.layoutRelationships(graph.relationships());
 257 |   };
 258 | 
 259 |   return NeoD3Geometry;
 260 | })();
 261 | 
 262 | neo.graphModel = () => {
 263 |   const graph = new neo.models.Graph();
 264 | 
 265 |   const model = function() {};
 266 | 
 267 |   model.callbacks = {};
 268 | 
 269 |   model.trigger = () => {
 270 |     const args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
 271 |     let event = 'updated';
 272 |     if (model.callbacks[event]) {
 273 |       const _ref = model.callbacks[event];
 274 |       const _results = [];
 275 |       for (let _i = 0, _len = _ref.length; _i < _len; _i++) {
 276 |         const callback = _ref[_i];
 277 |         _results.push(callback.apply(null, args));
 278 |       }
 279 |       return _results;
 280 |     }
 281 |   };
 282 | 
 283 |   model.nodes = items => {
 284 |     if (items == null) return graph.nodes();
 285 |     graph.removeNodes().addNodes(items);
 286 |     model.trigger('nodesAdded');
 287 |     return model;
 288 |   };
 289 | 
 290 |   model.nodes.add = items => {
 291 |     if (items != null) {
 292 |       graph.addNodes(items);
 293 |       model.trigger('nodesAdded');
 294 |     }
 295 |     return model;
 296 |   };
 297 | 
 298 |   model.nodes.find = graph.findNode;
 299 | 
 300 |   model.nodes.remove = () => {
 301 |     graph.removeNodes.apply(null, arguments);
 302 |     model.trigger('nodesRemoved');
 303 |     return model;
 304 |   };
 305 | 
 306 |   model.relationships = items => {
 307 |     if (items == null) return graph.relationships();
 308 |     graph.removeRelationships().addRelationships(items);
 309 |     model.trigger('relationshipsAdded');
 310 |     return model;
 311 |   };
 312 | 
 313 |   model.relationships.add = items => {
 314 |     if (items != null) {
 315 |       graph.addRelationships(items);
 316 |       model.trigger('relationshipsAdded');
 317 |     }
 318 |     return model;
 319 |   };
 320 | 
 321 |   model.relationships.find = graph.findRelationship;
 322 | 
 323 |   model.relationships.remove = () => {
 324 |     graph.removeRelationships.apply(null, arguments);
 325 |     model.trigger('relationshipsRemoved');
 326 |     return model;
 327 |   };
 328 | 
 329 |   model.on = (event, callback) => {
 330 |     let _base = model.callbacks;
 331 |     _base[event] = _base[event] != null ? _base[event] : [];
 332 |     _base[event].push(callback);
 333 |     return model;
 334 |   };
 335 | 
 336 |   return model;
 337 | };
 338 | 
 339 | neo.graphView = () => {
 340 |   let layout = neo.layout.force();
 341 |   const style = neo.style();
 342 |   let viz = null;
 343 |   const callbacks = {};
 344 |   const trigger = () => [];
 345 | 
 346 |   const chart = selection => {
 347 |     selection.each(function(graphModel) {
 348 |       if (!viz) {
 349 |         viz = neo.viz(this, graphModel, layout, style);
 350 |         graphModel.on('updated', () => viz.update());
 351 |         viz.trigger = trigger;
 352 |       }
 353 |       return viz.update();
 354 |     });
 355 |   };
 356 | 
 357 |   chart.on = (event, callback) => {
 358 |     (callbacks[event] != null ? callbacks[event] : callbacks[event] = []).push(callback);
 359 |     return chart;
 360 |   };
 361 | 
 362 |   chart.layout = value => {
 363 |     if (!arguments.length) return layout;
 364 |     layout = value;
 365 |     return chart;
 366 |   };
 367 | 
 368 |   chart.style = value => {
 369 |     if (!arguments.length) return style.toSheet();
 370 |     style.importGrass(value);
 371 |     return chart;
 372 |   };
 373 | 
 374 |   chart.width = value => {
 375 |     if (!arguments.length) return viz.width;
 376 |     return chart;
 377 |   };
 378 | 
 379 |   chart.height = value => {
 380 |     if (!arguments.length) return viz.height;
 381 |     return chart;
 382 |   };
 383 | 
 384 |   chart.update = () => {
 385 |     viz.update();
 386 |     return chart;
 387 |   };
 388 | 
 389 |   return chart;
 390 | };
 391 | 
 392 | neo.layout = (() => {
 393 |   const _layout = {};
 394 |   _layout.force = () => {
 395 |     const _force = {};
 396 |     _force.init = render => {
 397 |       const forceLayout = {};
 398 |       const linkDistance = 60;
 399 |       const d3force = d3.layout.force().linkDistance(linkDistance).charge(-1000).gravity(0.3);
 400 |       const accelerateLayout = () => {
 401 |         let maxStepsPerTick = 100;
 402 |         const maxAnimationFramesPerSecond = 60;
 403 |         const maxComputeTime = 1000 / maxAnimationFramesPerSecond;
 404 |         const now = window.performance
 405 |           ? () => window.performance.now()
 406 |           : () => Date.now();
 407 |         const d3Tick = d3force.tick;
 408 |         return d3force.tick = (_this =>
 409 |           () => {
 410 |             const startTick = now();
 411 |             let step = maxStepsPerTick;
 412 |             while (step-- && now() - startTick < maxComputeTime) {
 413 |               if (d3Tick()) {
 414 |                 maxStepsPerTick = 2;
 415 |                 return true;
 416 |               }
 417 |             }
 418 |             render();
 419 |             return false;
 420 |         })(this);
 421 |       };
 422 |       accelerateLayout();
 423 |       forceLayout.update = (graph, size) => {
 424 |         const nodes = graph.nodes();
 425 |         const relationships = graph.relationships();
 426 |         const radius = nodes.length * linkDistance / (Math.PI * 2);
 427 |         const center = { x: size[0] / 2, y: size[1] / 2 };
 428 |         neo.utils.circularLayout(nodes, center, radius);
 429 |         return d3force.nodes(nodes).links(relationships).size(size).start();
 430 |       };
 431 |       forceLayout.drag = d3force.drag;
 432 |       return forceLayout;
 433 |     };
 434 |     return _force;
 435 |   };
 436 | 
 437 |   return _layout;
 438 | })();
 439 | 
 440 | neo.models.Node = (() => {
 441 |   function Node(id, labels, properties) {
 442 |     this.id = id;
 443 |     this.labels = labels;
 444 |     this.propertyMap = properties;
 445 |     this.propertyList = (() => {
 446 |       const _results = [];
 447 |       for (const key in properties) {
 448 |         if (!__hasProp.call(properties, key)) continue;
 449 |         const value = properties[key];
 450 |         _results.push({ key, value });
 451 |       }
 452 |       return _results;
 453 |     })();
 454 |   }
 455 | 
 456 |   Node.prototype.toJSON = () => this.propertyMap;
 457 | 
 458 |   Node.prototype.isNode = true;
 459 | 
 460 |   Node.prototype.isRelationship = false;
 461 | 
 462 |   return Node;
 463 | })();
 464 | 
 465 | neo.models.Relationship = (() => {
 466 |   function Relationship(id, source, target, type, properties) {
 467 |     this.id = id;
 468 |     this.source = source;
 469 |     this.target = target;
 470 |     this.type = type;
 471 |     this.propertyMap = properties;
 472 |     this.propertyList = (() => {
 473 |       const _ref = this.propertyMap;
 474 |       const _results = [];
 475 |       for (const key in _ref) {
 476 |         if (!__hasProp.call(_ref, key)) continue;
 477 |         const value = _ref[key];
 478 |         _results.push({ key, value });
 479 |       }
 480 |       return _results;
 481 |     }).call(this);
 482 |   }
 483 | 
 484 |   Relationship.prototype.toJSON = () => this.propertyMap;
 485 | 
 486 |   Relationship.prototype.isNode = false;
 487 | 
 488 |   Relationship.prototype.isRelationship = true;
 489 | 
 490 |   return Relationship;
 491 | })();
 492 | 
 493 | neo.Renderer = (() => {
 494 |   function Renderer(opts) {
 495 |     if (opts == null) opts = {};
 496 |     neo.utils.extend(this, opts);
 497 |     if (this.onGraphChange == null) {
 498 |       this.onGraphChange = function() {};
 499 |     }
 500 |     if (this.onTick == null) {
 501 |       this.onTick = function() {};
 502 |     }
 503 |   }
 504 | 
 505 |   return Renderer;
 506 | })();
 507 | 
 508 | neo.style = (() => {
 509 |   const _style = storage => new GraphStyle(storage);
 510 | 
 511 |   _style.defaults = {
 512 |     autoColor: true,
 513 |     colors: [
 514 |       {
 515 |         color: '#DFE1E3',
 516 |         'border-color': '#D4D6D7',
 517 |         'text-color-internal': '#000'
 518 |       }, {
 519 |         color: '#BBDAFF',
 520 |         'border-color': '#BBBBFF',
 521 |         'text-color-internal': '#000'
 522 |       }, {
 523 |         color: '#CEF0FF',
 524 |         'border-color': '#ACF3FD',
 525 |         'text-color-internal': '#000'
 526 |       }, {
 527 |         color: '#B5FFFC',
 528 |         'border-color': '#A5FEEB',
 529 |         'text-color-internal': '#000'
 530 |       }, {
 531 |         color: '#B5FFC8',
 532 |         'border-color': '#A4F0B7',
 533 |         'text-color-internal': '#000'
 534 |       }, {
 535 |         color: '#CAFEB8',
 536 |         'border-color': '#A5FF8A',
 537 |         'text-color-internal': '#000'
 538 |       }, {
 539 |         color: '#B8E2EF',
 540 |         'border-color': '#8CD1E6',
 541 |         'text-color-internal': '#000'
 542 |       }, {
 543 |         color: '#CEDEF4',
 544 |         'border-color': '#D7D1F8',
 545 |         'text-color-internal': '#000'
 546 |       }, {
 547 |         color: '#E1CAF9',
 548 |         'border-color': '#E8C6FF',
 549 |         'text-color-internal': '#000'
 550 |       }, {
 551 |         color: '#F0C4F0',
 552 |         'border-color': '#FFCEFF',
 553 |         'text-color-internal': '#000'
 554 |       }, {
 555 |         color: '#FFCAF9',
 556 |         'border-color': '#FEA9F3',
 557 |         'text-color-internal': '#000'
 558 |       }, {
 559 |         color: '#DDCEFF',
 560 |         'border-color': '#C4ABFE',
 561 |         'text-color-internal': '#000'
 562 |       }
 563 |     ],
 564 |     style: {
 565 |       'node': {
 566 |         'diameter': '40px',
 567 |         'color': '#DFE1E3',
 568 |         'border-color': '#D4D6D7',
 569 |         'border-width': '2px',
 570 |         'text-color-internal': '#000',
 571 |         'caption': '{id}',
 572 |         'font-size': '8px'
 573 |       },
 574 |       'relationship': {
 575 |         'color': '#D4D6D7',
 576 |         'shaft-width': '1px',
 577 |         'font-size': '8px',
 578 |         'padding': '3px',
 579 |         'text-color-external': '#000',
 580 |         'text-color-internal': '#FFF'
 581 |       }
 582 |     },
 583 |     sizes: [
 584 |       {
 585 |         diameter: '10px'
 586 |       }, {
 587 |         diameter: '20px'
 588 |       }, {
 589 |         diameter: '30px'
 590 |       }, {
 591 |         diameter: '50px'
 592 |       }, {
 593 |         diameter: '80px'
 594 |       }
 595 |     ],
 596 |     arrayWidths: [
 597 |       {
 598 |         'shaft-width': '1px'
 599 |       }, {
 600 |         'shaft-width': '2px'
 601 |       }, {
 602 |         'shaft-width': '3px'
 603 |       }, {
 604 |         'shaft-width': '5px'
 605 |       }, {
 606 |         'shaft-width': '8px'
 607 |       }, {
 608 |         'shaft-width': '13px'
 609 |       }, {
 610 |         'shaft-width': '25px'
 611 |       }, {
 612 |         'shaft-width': '38px'
 613 |       }
 614 |     ]
 615 |   };
 616 | 
 617 |   const Selector = (() => {
 618 |     function Selector(selector) {
 619 |       const _ref = selector.indexOf('.') > 0 ? selector.split('.') : [selector, void 0];
 620 |       this.tag = _ref[0];
 621 |       this.klass = _ref[1];
 622 |     }
 623 | 
 624 |     Selector.prototype.toString = () => {
 625 |       let str = this.tag;
 626 |       if (this.klass != null) {
 627 |         str += "." + this.klass;
 628 |       }
 629 |       return str;
 630 |     };
 631 | 
 632 |     return Selector;
 633 |   })();
 634 | 
 635 |   const StyleRule = (() => {
 636 |     function StyleRule(selector, props) {
 637 |       this.selector = selector;
 638 |       this.props = props;
 639 |     }
 640 | 
 641 |     StyleRule.prototype.matches = function(selector) {
 642 |       if (this.selector.tag === selector.tag) {
 643 |         if (this.selector.klass === selector.klass || !this.selector.klass) {
 644 |           return true;
 645 |         }
 646 |       }
 647 |       return false;
 648 |     };
 649 | 
 650 |     StyleRule.prototype.matchesExact = function(selector) {
 651 |       return this.selector.tag === selector.tag && this.selector.klass === selector.klass;
 652 |     };
 653 | 
 654 |     return StyleRule;
 655 |   })();
 656 | 
 657 |   const StyleElement = (() => {
 658 |     function StyleElement(selector, data) {
 659 |       this.data = data;
 660 |       this.selector = selector;
 661 |       this.props = {};
 662 |     }
 663 | 
 664 |     StyleElement.prototype.applyRules = function(rules) {
 665 |       for (let _i = 0, _len = rules.length; _i < _len; _i++) {
 666 |         let rule = rules[_i];
 667 |         if (!(rule.matches(this.selector))) {
 668 |           continue;
 669 |         }
 670 |         neo.utils.extend(this.props, rule.props);
 671 |         break;
 672 |       }
 673 |       for (let _j = 0, _len1 = rules.length; _j < _len1; _j++) {
 674 |         let rule = rules[_j];
 675 |         if (!(rule.matchesExact(this.selector))) {
 676 |           continue;
 677 |         }
 678 |         neo.utils.extend(this.props, rule.props);
 679 |         break;
 680 |       }
 681 | 
 682 |       return this;
 683 |     };
 684 | 
 685 |     StyleElement.prototype.get = function(attr) {
 686 |       return this.props[attr] || '';
 687 |     };
 688 | 
 689 |     return StyleElement;
 690 |   })();
 691 | 
 692 |   const GraphStyle = (() => {
 693 |     function GraphStyle(storage) {
 694 |       this.storage = storage;
 695 |       this.rules = [];
 696 |       this.loadRules();
 697 |     }
 698 | 
 699 |     GraphStyle.prototype.selector = function(item) {
 700 |       return item.isNode
 701 |         ? this.nodeSelector(item)
 702 |         : item.isRelationship
 703 |           ? this.relationshipSelector(item)
 704 |           : null;
 705 |     };
 706 | 
 707 |     GraphStyle.prototype.calculateStyle = function(selector, data) {
 708 |       return new StyleElement(selector, data).applyRules(this.rules);
 709 |     };
 710 | 
 711 |     GraphStyle.prototype.forEntity = function(item) {
 712 |       return this.calculateStyle(this.selector(item), item);
 713 |     };
 714 | 
 715 |     GraphStyle.prototype.forNode = function(node) {
 716 |       if (node == null) node = {};
 717 | 
 718 |       const selector = this.nodeSelector(node);
 719 |       let _ref =  node.labels;
 720 |       if ((_ref != null ? _ref.length : void 0) > 0) {
 721 |         this.setDefaultStyling(selector);
 722 |       }
 723 |       return this.calculateStyle(selector, node);
 724 |     };
 725 | 
 726 |     GraphStyle.prototype.forRelationship = function(rel) {
 727 |       return this.calculateStyle(this.relationshipSelector(rel), rel);
 728 |     };
 729 | 
 730 |     GraphStyle.prototype.findAvailableDefaultColor = function() {
 731 |       const usedColors = {};
 732 |       const _ref = this.rules;
 733 |       for (let _i = 0, _len = _ref.length; _i < _len; _i++) {
 734 |         const rule = _ref[_i];
 735 |         if (rule.props.color != null) {
 736 |           usedColors[rule.props.color] = true;
 737 |         }
 738 |       }
 739 |       const _ref1 = _style.defaults.colors;
 740 |       for (let _j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
 741 |         const defaultColor = _ref1[_j];
 742 |         if (usedColors[defaultColor.color] == null) {
 743 |           return neo.utils.copy(defaultColor);
 744 |         }
 745 |       }
 746 |       return neo.utils.copy(_style.defaults.colors[0]);
 747 |     };
 748 | 
 749 |     GraphStyle.prototype.setDefaultStyling = function(selector) {
 750 |       let rule = this.findRule(selector);
 751 |       if (_style.defaults.autoColor && (rule == null)) {
 752 |         rule = new StyleRule(selector, this.findAvailableDefaultColor());
 753 |         this.rules.push(rule);
 754 |         return this.persist();
 755 |       }
 756 |     };
 757 | 
 758 |     GraphStyle.prototype.change = function(item, props) {
 759 |       const selector = this.selector(item);
 760 |       let rule = this.findRule(selector);
 761 |       if (rule == null) {
 762 |         rule = new StyleRule(selector, {});
 763 |         this.rules.push(rule);
 764 |       }
 765 |       neo.utils.extend(rule.props, props);
 766 |       this.persist();
 767 |       return rule;
 768 |     };
 769 | 
 770 |     GraphStyle.prototype.destroyRule = function(rule) {
 771 |       const idx = this.rules.indexOf(rule);
 772 |       if (idx != null) {
 773 |         this.rules.splice(idx, 1);
 774 |       }
 775 |       return this.persist();
 776 |     };
 777 | 
 778 |     GraphStyle.prototype.findRule = function(selector) {
 779 |       let rule;
 780 |       const _ref = this.rules;
 781 |       for (let _i = 0, _len = _ref.length; _i < _len; _i++) {
 782 |         const r = _ref[_i];
 783 |         if (r.matchesExact(selector)) {
 784 |           rule = r;
 785 |         }
 786 |       }
 787 |       return rule;
 788 |     };
 789 | 
 790 |     GraphStyle.prototype.nodeSelector = function(node) {
 791 |       if (node == null) node = {};
 792 |       let selector = 'node';
 793 |       let _ref = node.labels;
 794 |       if ((_ref != null ? _ref.length : void 0) > 0) {
 795 |         selector += "." + node.labels[0];
 796 |       }
 797 |       return new Selector(selector);
 798 |     };
 799 | 
 800 |     GraphStyle.prototype.relationshipSelector = function(rel) {
 801 |       if (rel == null) rel = {};
 802 |       let selector = 'relationship';
 803 |       if (rel.type != null) {
 804 |         selector += "." + rel.type;
 805 |       }
 806 |       return new Selector(selector);
 807 |     };
 808 | 
 809 |     GraphStyle.prototype.importGrass = function(string) {
 810 |       try {
 811 |         const rules = this.parse(string);
 812 |         this.loadRules(rules);
 813 |         return this.persist();
 814 |       } catch (_error) {
 815 |         console.error(_error);
 816 |       }
 817 |     };
 818 | 
 819 |     GraphStyle.prototype.loadRules = function(data) {
 820 |       if (!neo.utils.isObject(data)) {
 821 |         data = _style.defaults.style;
 822 |       }
 823 |       this.rules.length = 0;
 824 |       for (const rule in data) {
 825 |         const props = data[rule];
 826 |         this.rules.push(new StyleRule(new Selector(rule), neo.utils.copy(props)));
 827 |       }
 828 |       return this;
 829 |     };
 830 | 
 831 |     GraphStyle.prototype.parse = function(string) {
 832 |       const chars = string.split(''), rules = {};
 833 |       let insideString = false, insideProps = false, keyword = "", props = "";
 834 |       for (let _i = 0, _len = chars.length; _i < _len; _i++) {
 835 |         const c = chars[_i];
 836 |         let skipThis = true;
 837 |         switch (c) {
 838 |           case "{":
 839 |             if (!insideString) {
 840 |               insideProps = true;
 841 |             } else {
 842 |               skipThis = false;
 843 |             }
 844 |             break;
 845 |           case "}":
 846 |             if (!insideString) {
 847 |               insideProps = false;
 848 |               rules[keyword] = props;
 849 |               keyword = "";
 850 |               props = "";
 851 |             } else {
 852 |               skipThis = false;
 853 |             }
 854 |             break;
 855 |           case "'":
 856 |           case "\"":
 857 |             insideString ^= true;
 858 |             break;
 859 |           default:
 860 |             skipThis = false;
 861 |         }
 862 |         if (skipThis) {
 863 |           continue;
 864 |         }
 865 |         if (insideProps) {
 866 |           props += c;
 867 |         } else {
 868 |           if (!c.match(/[\s\n]/)) {
 869 |             keyword += c;
 870 |           }
 871 |         }
 872 |       }
 873 |       for (const k in rules) {
 874 |         const v = rules[k];
 875 |         rules[k] = {};
 876 |         const _ref = v.split(';');
 877 |         for (let _j = 0, _len1 = _ref.length; _j < _len1; _j++) {
 878 |           const prop = _ref[_j];
 879 |           const _ref1 = prop.split(':');
 880 |           const key = _ref1[0];
 881 |           const val = _ref1[1];
 882 |           if (!(key && val)) {
 883 |             continue;
 884 |           }
 885 |           rules[k][key != null ? key.trim() : void 0] = val != null ? val.trim() : void 0;
 886 |         }
 887 |       }
 888 |       return rules;
 889 |     };
 890 | 
 891 |     GraphStyle.prototype.persist = function() {
 892 |       const _ref = this.storage;
 893 |       return _ref != null ? _ref.add('grass', JSON.stringify(this.toSheet())) : void 0;
 894 |     };
 895 | 
 896 |     GraphStyle.prototype.resetToDefault = function() {
 897 |       this.loadRules();
 898 |       return this.persist();
 899 |     };
 900 | 
 901 |     GraphStyle.prototype.toSheet = function() {
 902 |       const sheet = {};
 903 |       const _ref = this.rules;
 904 |       for (let _i = 0, _len = _ref.length; _i < _len; _i++) {
 905 |         const rule = _ref[_i];
 906 |         sheet[rule.selector.toString()] = rule.props;
 907 |       }
 908 |       return sheet;
 909 |     };
 910 | 
 911 |     GraphStyle.prototype.toString = function() {
 912 |       let str = "";
 913 |       const _ref = this.rules;
 914 |       for (let _i = 0, _len = _ref.length; _i < _len; _i++) {
 915 |         const r = _ref[_i];
 916 |         str += r.selector.toString() + " {\n";
 917 |         const _ref1 = r.props;
 918 |         for (const k in _ref1) {
 919 |           let v = _ref1[k];
 920 |           if (k === "caption") {
 921 |             v = "'" + v + "'";
 922 |           }
 923 |           str += "  " + k + ": " + v + ";\n";
 924 |         }
 925 |         str += "}\n\n";
 926 |       }
 927 |       return str;
 928 |     };
 929 | 
 930 |     GraphStyle.prototype.nextDefaultColor = 0;
 931 | 
 932 |     GraphStyle.prototype.defaultColors = function() {
 933 |       return neo.utils.copy(_style.defaults.colors);
 934 |     };
 935 | 
 936 |     GraphStyle.prototype.interpolate = function(str, id, properties) {
 937 |       return str.replace(/\{([^{}]*)\}/g, (a, b) => {
 938 |         const r = properties[b] || id;
 939 |         return typeof r === 'string' || typeof r === 'number'
 940 |           ? r
 941 |           : a;
 942 |       });
 943 |     };
 944 | 
 945 |     return GraphStyle;
 946 |   })();
 947 | 
 948 |   return _style;
 949 | })();
 950 | 
 951 | neo.viz = function(el, graph, layout, style) {
 952 |   const viz = { style }, geometry = new NeoD3Geometry(style);
 953 |   el = d3.select(el);
 954 | 
 955 |   viz.trigger = () => {};
 956 | 
 957 |   const onNodeClick = (_this => {
 958 |     return node => viz.trigger('nodeClicked', node);
 959 |   })(this);
 960 | 
 961 |   const onNodeDblClick = (_this => {
 962 |     return node => viz.trigger('nodeDblClicked', node);
 963 |   })(this);
 964 | 
 965 |   const onRelationshipClick = (_this => {
 966 |     return relationship => viz.trigger('relationshipClicked', relationship);
 967 |   })(this);
 968 | 
 969 |   const render = () => {
 970 |     let renderer;
 971 |     geometry.onTick(graph);
 972 | 
 973 |     const nodeGroups = el.selectAll("g.node").attr("transform", function(node) {
 974 |       return "translate(" + node.x + "," + node.y + ")";
 975 |     });
 976 | 
 977 |     const _ref = neo.renderers.node;
 978 |     for (let _i = 0, _len = _ref.length; _i < _len; _i++) {
 979 |       renderer = _ref[_i];
 980 |       nodeGroups.call(renderer.onTick, viz);
 981 |     }
 982 | 
 983 |     const relationshipGroups = el.selectAll("g.relationship");
 984 |     const _ref1 = neo.renderers.relationship;
 985 |     const _results = [];
 986 |     for (let _j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
 987 |       renderer = _ref1[_j];
 988 |       _results.push(relationshipGroups.call(renderer.onTick, viz));
 989 |     }
 990 |     return _results;
 991 |   };
 992 | 
 993 |   const force = layout.init(render);
 994 | 
 995 |   viz.update = () => {
 996 |     if (!graph) return;
 997 | 
 998 |     const height = (() => {
 999 |       try {
1000 |         return parseInt(el.style('height').replace('px', ''), 10);
1001 |       } catch (_error) {}
1002 |     })();
1003 | 
1004 |     const width = (() => {
1005 |       try {
1006 |         return parseInt(el.style('width').replace('px', ''), 10);
1007 |       } catch (_error) {}
1008 |     })();
1009 | 
1010 |     const layers = el.selectAll("g.layer").data(["relationships", "nodes"]);
1011 |     layers.enter().append("g").attr("class", d => "layer " + d);
1012 | 
1013 |     const nodes = graph.nodes();
1014 |     const relationships = graph.relationships();
1015 |     const relationshipGroups = el.select("g.layer.relationships").selectAll("g.relationship").data(relationships, d => d.id);
1016 |     relationshipGroups.enter().append("g").attr("class", "relationship").on("click", onRelationshipClick);
1017 | 
1018 |     geometry.onGraphChange(graph);
1019 | 
1020 |     let renderer;
1021 |     const _ref = neo.renderers.relationship;
1022 |     for (let _i = 0, _len = _ref.length; _i < _len; _i++) {
1023 |       renderer = _ref[_i];
1024 |       relationshipGroups.call(renderer.onGraphChange, viz);
1025 |     }
1026 |     relationshipGroups.exit().remove();
1027 | 
1028 |     const nodeGroups = el.select("g.layer.nodes").selectAll("g.node").data(nodes, d => d.id);
1029 |     nodeGroups.enter().append("g").attr("class", "node").call(force.drag).call(clickHandler);
1030 |     const _ref1 = neo.renderers.node;
1031 |     for (let _j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
1032 |       renderer = _ref1[_j];
1033 |       nodeGroups.call(renderer.onGraphChange, viz);
1034 |     }
1035 |     nodeGroups.exit().remove();
1036 |     return force.update(graph, [width, height]);
1037 |   };
1038 |   const clickHandler = neo.utils.clickHandler();
1039 |   clickHandler.on('click', onNodeClick);
1040 |   clickHandler.on('dblclick', onNodeDblClick);
1041 |   return viz;
1042 | };
1043 | 
1044 | neo.utils.circularLayout = (nodes, center, radius) => {
1045 |   const unlocatedNodes = nodes.filter(node => !((node.x != null) && (node.y != null))), _results = [];
1046 |   let _i;
1047 |   for (let i = _i = 0, _len = unlocatedNodes.length; _i < _len; i = ++_i) {
1048 |     const n = unlocatedNodes[i];
1049 |     n.x = center.x + radius * Math.sin(2 * Math.PI * i / unlocatedNodes.length);
1050 |     _results.push(n.y = center.y + radius * Math.cos(2 * Math.PI * i / unlocatedNodes.length));
1051 |   }
1052 |   return _results;
1053 | };
1054 | 
1055 | neo.utils.distributeCircular = (arrowAngles, minSeparation) => {
1056 |   const list = [], _ref = arrowAngles.floating, result = {};
1057 |   let angle, key, _i, _k;
1058 |   for (key in _ref) {
1059 |     angle = _ref[key];
1060 |     list.push({ key, angle});
1061 |   }
1062 | 
1063 |   list.sort((a, b) => a.angle - b.angle);
1064 | 
1065 |   const runsOfTooDenseArrows = [];
1066 |   const length = (startIndex, endIndex) =>
1067 |     startIndex < endIndex
1068 |       ? endIndex - startIndex + 1
1069 |       : endIndex + list.length - startIndex + 1;
1070 | 
1071 |   angle = (startIndex, endIndex) =>
1072 |     startIndex < endIndex
1073 |       ? list[endIndex].angle - list[startIndex].angle
1074 |       : 360 - (list[startIndex].angle - list[endIndex].angle);
1075 | 
1076 |   const tooDense = (startIndex, endIndex) => angle(startIndex, endIndex) < length(startIndex, endIndex) * minSeparation;
1077 | 
1078 |   const wrapIndex = index =>
1079 |     index === -1
1080 |       ? list.length - 1
1081 |       : index >= list.length
1082 |         ? index - list.length
1083 |         : index;
1084 | 
1085 |   const wrapAngle = angle =>
1086 |     angle >= 360 ? angle - 360 : angle;
1087 | 
1088 |   const expand = (startIndex, endIndex) => {
1089 |     if (length(startIndex, endIndex) < list.length) {
1090 |       if (tooDense(startIndex, wrapIndex(endIndex + 1))) return expand(startIndex, wrapIndex(endIndex + 1));
1091 |       if (tooDense(wrapIndex(startIndex - 1), endIndex)) return expand(wrapIndex(startIndex - 1), endIndex);
1092 |     }
1093 |     return runsOfTooDenseArrows.push({ start: startIndex, end: endIndex });
1094 |   };
1095 | 
1096 |   for (let i = _i = 0, _ref1 = list.length - 2; 0 <= _ref1 ? _i <= _ref1 : _i >= _ref1; i = 0 <= _ref1 ? ++_i : --_i) {
1097 |     if (tooDense(i, i + 1)) expand(i, i + 1);
1098 |   }
1099 | 
1100 |   for (let _j = 0, _len = runsOfTooDenseArrows.length; _j < _len; _j++) {
1101 |     const run = runsOfTooDenseArrows[_j];
1102 |     const center = list[run.start].angle + angle(run.start, run.end) / 2;
1103 |     const runLength = length(run.start, run.end);
1104 |     for (let i = _k = 0, _ref2 = runLength - 1; 0 <= _ref2 ? _k <= _ref2 : _k >= _ref2; i = 0 <= _ref2 ? ++_k : --_k) {
1105 |       const rawAngle = center + (i - (runLength - 1) / 2) * minSeparation;
1106 |       result[list[wrapIndex(run.start + i)].key] = wrapAngle(rawAngle);
1107 |     }
1108 |   }
1109 |   const _ref3 = arrowAngles.floating;
1110 | 
1111 |   for (key in _ref3) {
1112 |     angle = _ref3[key];
1113 |     if (!result[key]) result[key] = arrowAngles.floating[key];
1114 |   }
1115 |   return result;
1116 | };
1117 | 
1118 | neo.utils.clickHandler = () => {
1119 |   const cc = selection => {
1120 |     const dist = (a, b) => Math.sqrt(Math.pow(a - b[0], 2));
1121 |     const tolerance = 5;
1122 |     let wait = null;
1123 | 
1124 |     selection.on("mousedown", e => {
1125 |       d3.event = e;
1126 |       d3.event.fixed = true;
1127 |       return +new Date();
1128 |     });
1129 | 
1130 |     return selection.on("mouseup", e => {
1131 |       d3.event = e;
1132 |       if (dist(void 0, d3.mouse(document.body)) > tolerance) {
1133 |       } else {
1134 |         if (wait) {
1135 |           window.clearTimeout(wait);
1136 |           wait = null;
1137 |           return event.dblclick(d3.event);
1138 |         } else {
1139 |           return wait = window.setTimeout((ev => {
1140 |             return () => {
1141 |               event.click(ev);
1142 |               return wait = null;
1143 |             };
1144 |           })(d3.event), 250);
1145 |         }
1146 |       }
1147 |     });
1148 |   };
1149 |   const event = d3.dispatch("click", "dblclick");
1150 |   return d3.rebind(cc, event, "on");
1151 | };
1152 | 
1153 | neo.utils.measureText = (() => {
1154 |   const measureUsingCanvas = (text, font) => {
1155 |     const canvasSelection = d3.select('canvas#textMeasurementCanvas').data([this]);
1156 |     canvasSelection.enter().append('canvas').attr('id', 'textMeasurementCanvas').style('display', 'none');
1157 |     const canvas = canvasSelection.node();
1158 |     const context = canvas.getContext('2d');
1159 |     context.font = font;
1160 |     return context.measureText(text).width;
1161 |   };
1162 | 
1163 |   const cache = (() => {
1164 |     const cacheSize = 10000, map = {}, list = [];
1165 |     return (key, calc) => {
1166 |       if (map[key]) {
1167 |         return map[key];
1168 |       } else {
1169 |         const result = calc();
1170 |         if (list.length > cacheSize) {
1171 |           delete map[list.splice(0, 1)];
1172 |           list.push(key);
1173 |         }
1174 |         return map[key] = result;
1175 |       }
1176 |     };
1177 |   })();
1178 | 
1179 |   return (text, fontFamily, fontSize) => {
1180 |     const font = `normal normal normal ${fontSize}px/normal ${fontFamily}`;
1181 |     return cache(text + font, () => measureUsingCanvas(text, font));
1182 |   };
1183 | })();
1184 | 
1185 | (() => {
1186 |   const noop = () => {};
1187 | 
1188 |   const nodeOutline = new neo.Renderer({
1189 |     onGraphChange: (selection, viz) => {
1190 |       const circles = selection.selectAll('circle.outline').data(node => [node]);
1191 |       circles.enter().append('circle').classed('outline', true).attr({ cx: 0, cy: 0 });
1192 |       circles.attr({
1193 |         r: node => node.radius,
1194 |         fill: node => viz.style.forNode(node).get('color'),
1195 |         stroke: node => viz.style.forNode(node).get('border-color'),
1196 |         'stroke-width': node => viz.style.forNode(node).get('border-width')
1197 |       });
1198 |       return circles.exit().remove();
1199 |     },
1200 |     onTick: noop
1201 |   });
1202 | 
1203 |   const nodeCaption = new neo.Renderer({
1204 |     onGraphChange: (selection, viz) => {
1205 |       const text = selection.selectAll('text').data(node => node.caption);
1206 |       text.enter().append('text').attr({
1207 |         'text-anchor': 'middle',
1208 |         'font-weight': 'normal',
1209 |         'stroke': '#FFFFFF',
1210 |         'stroke-width' : '0'
1211 |       });
1212 |       text.text(line => line.text)
1213 |         .attr('y', line => line.baseline)
1214 |         .attr('font-size', line => viz.style.forNode(line.node).get('font-size'))
1215 |         .attr('stroke', line => viz.style.forNode(line.node).get('color'))
1216 |         .attr('fill', line => viz.style.forNode(line.node).get('text-color-internal'));
1217 |       return text.exit().remove();
1218 |     },
1219 |     onTick: noop
1220 |   });
1221 | 
1222 |   const nodeOverlay = new neo.Renderer({
1223 |     onGraphChange: selection => {
1224 |       const circles = selection.selectAll('circle.overlay').data(node => node.selected ? [node] : []);
1225 |       circles.enter().insert('circle', '.outline').classed('ring', true).classed('overlay', true).attr({
1226 |         cx: 0, cy: 0, fill: '#f5F6F6', stroke: 'rgba(151, 151, 151, 0.2)', 'stroke-width': '3px' });
1227 |       circles.attr({ r: node => node.radius + 6 });
1228 |       return circles.exit().remove();
1229 |     },
1230 |     onTick: noop
1231 |   });
1232 | 
1233 |   const arrowPath = new neo.Renderer({
1234 |     onGraphChange: (selection, viz) => {
1235 |       const paths = selection.selectAll('path').data(rel => [rel]);
1236 |       paths.enter().append('path');
1237 |       paths.attr('fill', rel => viz.style.forRelationship(rel).get('color')).attr('stroke', 'none');
1238 |       return paths.exit().remove();
1239 |     },
1240 |     onTick: selection =>
1241 |       selection.selectAll('path').attr('d', d => d.arrowOutline)
1242 |         .attr('transform', d => isNaN(d.startPoint.x) || isNaN(d.startPoint.y)
1243 |           ? null : "translate(" + d.startPoint.x + " " + d.startPoint.y + ") rotate(" + d.angle + ")")
1244 |   });
1245 | 
1246 |   const relationshipType = new neo.Renderer({
1247 |     onGraphChange: (selection, viz) => {
1248 |       const texts = selection.selectAll("text").data(rel => [rel]);
1249 |       texts.enter().append("text").attr({ "text-anchor": "middle" });
1250 |       texts.attr('font-size', rel => viz.style.forRelationship(rel).get('font-size'))
1251 |         .attr('fill', rel => viz.style.forRelationship(rel).get('text-color-' + rel.captionLayout));
1252 |       return texts.exit().remove();
1253 |     },
1254 |     onTick: (selection, viz) =>
1255 |       selection.selectAll('text')
1256 |         .attr('x', rel => isNaN(rel.midShaftPoint.x) ? null : rel.midShaftPoint.x)
1257 |         .attr('y', rel => isNaN(rel.midShaftPoint.y) ? null : rel.midShaftPoint.y + parseFloat(viz.style.forRelationship(rel).get('font-size')) / 2 - 1)
1258 |         .attr('transform', rel => isNaN(rel.midShaftPoint.x) || isNaN(rel.midShaftPoint.y) ? null :  "rotate(" + rel.textAngle + " " + rel.midShaftPoint.x + " " + rel.midShaftPoint.y + ")")
1259 |         .text(rel => rel.shortCaption)
1260 |   });
1261 | 
1262 |   const relationshipOverlay = new neo.Renderer({
1263 |     onGraphChange: selection => {
1264 |       const rects = selection.selectAll("rect").data(rel => [rel]);
1265 |       const band = 20;
1266 |       rects.enter().append('rect').classed('overlay', true).attr('fill', 'yellow').attr('x', 0).attr('y', -band / 2).attr('height', band);
1267 |       rects.attr('opacity', rel => rel.selected ? 0.3 : 0);
1268 |       return rects.exit().remove();
1269 |     },
1270 |     onTick: selection =>
1271 |       selection.selectAll('rect').attr('width', d => d.arrowLength > 0 ? d.arrowLength : 0)
1272 |         .attr('transform', d => isNaN(d.startPoint.x) || isNaN(d.startPoint.y)
1273 |           ? null : "translate(" + d.startPoint.x + " " + d.startPoint.y + ") rotate(" + d.angle + ")")
1274 |   });
1275 | 
1276 |   neo.renderers.node.push(nodeOutline);
1277 |   neo.renderers.node.push(nodeCaption);
1278 |   neo.renderers.node.push(nodeOverlay);
1279 |   neo.renderers.relationship.push(arrowPath);
1280 |   neo.renderers.relationship.push(relationshipType);
1281 |   return neo.renderers.relationship.push(relationshipOverlay);
1282 | })();
1283 | 
1284 | export default neo;


--------------------------------------------------------------------------------
/lib/Neo4jGraphRenderer/assets/util.js:
--------------------------------------------------------------------------------
   1 | 'use strict';
   2 | 
   3 | Object.defineProperty(exports, "__esModule", {
   4 |   value: true
   5 | });
   6 | var _arguments = arguments;
   7 | 
   8 | var _d = require('d3');
   9 | 
  10 | var d3 = _interopRequireWildcard(_d);
  11 | 
  12 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
  13 | 
  14 | window.neo = {};
  15 | 
  16 | var __hasProp = {}.hasOwnProperty,
  17 |     __slice = [].slice;
  18 | 
  19 | var neo = {
  20 |   models: {},
  21 |   renderers: {
  22 |     node: [],
  23 |     relationship: []
  24 |   },
  25 |   utils: {
  26 |     copy: function copy(src) {
  27 |       return JSON.parse(JSON.stringify(src));
  28 |     },
  29 |     extend: function extend(dest, src) {
  30 |       if (!neo.utils.isObject(dest) && neo.utils.isObject(src)) return;
  31 |       for (var k in src) {
  32 |         if (!__hasProp.call(src, k)) continue;
  33 |         dest[k] = src[k];
  34 |       }
  35 |       return dest;
  36 |     },
  37 |     isArray: Array.isArray || function (obj) {
  38 |       return Object.prototype.toString.call(obj) === '[object Array]';
  39 |     },
  40 |     isObject: function isObject(obj) {
  41 |       return Object(obj) === obj;
  42 |     }
  43 |   }
  44 | };
  45 | 
  46 | var __bind = function __bind(fn, me) {
  47 |   return function () {
  48 |     return fn.apply(me, arguments);
  49 |   };
  50 | };
  51 | 
  52 | neo.models.Graph = function () {
  53 |   function Graph(cypher) {
  54 |     this.removeRelationships = __bind(this.removeRelationships, this);
  55 |     this.removeNodes = __bind(this.removeNodes, this);
  56 |     this.findRelationship = __bind(this.findRelationship, this);
  57 |     this.findNode = __bind(this.findNode, this);
  58 |     this.addRelationships = __bind(this.addRelationships, this);
  59 |     this.addNodes = __bind(this.addNodes, this);
  60 |     this.nodeMap = {};
  61 |     this.relationshipMap = {};
  62 |     if (cypher) {
  63 |       this.addNodes(cypher.nodes);
  64 |       this.addRelationships(cypher.relationships);
  65 |     }
  66 |   }
  67 | 
  68 |   Graph.prototype.nodes = function () {
  69 |     var _ref = this.nodeMap;
  70 |     var _results = [];
  71 |     for (var key in _ref) {
  72 |       if (!__hasProp.call(_ref, key)) continue;
  73 |       _results.push(_ref[key]);
  74 |     }
  75 |     return _results;
  76 |   };
  77 | 
  78 |   Graph.prototype.relationships = function () {
  79 |     var _ref = this.relationshipMap;
  80 |     var _results = [];
  81 |     for (var key in _ref) {
  82 |       if (!__hasProp.call(_ref, key)) continue;
  83 |       _results.push(_ref[key]);
  84 |     }
  85 |     return _results;
  86 |   };
  87 | 
  88 |   Graph.prototype.addNodes = function (item) {
  89 |     var _base = void 0,
  90 |         _name = void 0;
  91 |     var items = !neo.utils.isArray(item) ? [item] : item;
  92 |     for (var _i = 0, _len = items.length; _i < _len; _i++) {
  93 |       item = items[_i];
  94 |       var node = !(item instanceof neo.models.Node) ? new neo.models.Node(item.id, item.labels, item.properties) : item;
  95 |       (_base = this.nodeMap)[_name = item.id] || (_base[_name] = node);
  96 |     }
  97 |     return this;
  98 |   };
  99 | 
 100 |   Graph.prototype.addRelationships = function (item) {
 101 |     var items = !neo.utils.isArray(item) ? [item] : item;
 102 |     for (var _i = 0, _len = items.length; _i < _len; _i++) {
 103 |       item = items[_i];
 104 |       var source = this.nodeMap[item.source] || function () {
 105 |         throw new Error("Invalid source");
 106 |       }();
 107 |       var target = this.nodeMap[item.target] || function () {
 108 |         throw new Error("Invalid target");
 109 |       }();
 110 |       this.relationshipMap[item.id] = new neo.models.Relationship(item.id, source, target, item.type, item.properties);
 111 |     }
 112 |     return this;
 113 |   };
 114 | 
 115 |   Graph.prototype.findNode = function (id) {
 116 |     return undefined.nodeMap[id];
 117 |   };
 118 | 
 119 |   Graph.prototype.findRelationship = function (id) {
 120 |     return undefined.relationshipMap[id];
 121 |   };
 122 | 
 123 |   Graph.prototype.merge = function (result) {
 124 |     undefined.addNodes(result.nodes);
 125 |     undefined.addRelationships(result.relationships);
 126 |     return undefined;
 127 |   };
 128 | 
 129 |   Graph.prototype.removeNodes = function () {
 130 |     var _this2 = this;
 131 | 
 132 |     var remove = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
 133 |     if (arguments.length === 0) {
 134 |       this.nodeMap = {};
 135 |       this.relationshipMap = {};
 136 |       return this;
 137 |     }
 138 |     remove = neo.utils.isArray(remove[0]) ? remove[0] : remove;
 139 | 
 140 |     var _loop = function _loop(_i, _len) {
 141 |       var id = remove[_i];
 142 |       var rels = function () {
 143 |         var _ref = _this2.relationshipMap;
 144 |         var _results = [];
 145 |         for (var rId in _ref) {
 146 |           if (!__hasProp.call(_ref, rId)) continue;
 147 |           var rel = _ref[rId];
 148 |           if (rel.source.id === id || rel.target.id === id) {
 149 |             _results.push(rel.id);
 150 |           }
 151 |         }
 152 |         return _results;
 153 |       }.call(_this2);
 154 |       _this2.removeRelationships(rels);
 155 |       delete _this2.nodeMap[id];
 156 |     };
 157 | 
 158 |     for (var _i = 0, _len = remove.length; _i < _len; _i++) {
 159 |       _loop(_i, _len);
 160 |     }
 161 |     return this;
 162 |   };
 163 | 
 164 |   Graph.prototype.removeRelationships = function () {
 165 |     var remove = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
 166 |     if (arguments.length === 0) {
 167 |       this.relationshipMap = {};
 168 |       return this;
 169 |     }
 170 |     remove = neo.utils.isArray(remove[0]) ? remove[0] : remove;
 171 |     for (var _i = 0, _len = remove.length; _i < _len; _i++) {
 172 |       var _id = remove[_i];
 173 |       delete this.relationshipMap[_id];
 174 |     }
 175 |     return this;
 176 |   };
 177 | 
 178 |   return Graph;
 179 | }();
 180 | 
 181 | var NeoD3Geometry = function () {
 182 |   var square = function square(distance) {
 183 |     return distance * distance;
 184 |   };
 185 | 
 186 |   function NeoD3Geometry(style) {
 187 |     this.style = style;
 188 |   }
 189 | 
 190 |   NeoD3Geometry.prototype.formatNodeCaptions = function (nodes) {
 191 |     var style = this.style;
 192 |     var _results = [];
 193 |     for (var _i = 0, _len = nodes.length; _i < _len; _i++) {
 194 |       var node = nodes[_i];
 195 |       var template = style.forNode(node).get("caption");
 196 |       var captionText = style.interpolate(template, node.id, node.propertyMap);
 197 |       var words = captionText.split(" ");
 198 |       var lines = [];
 199 |       var _j = void 0;
 200 |       for (var i = _j = 0, _ref = words.length - 1; 0 <= _ref ? _j <= _ref : _j >= _ref; i = 0 <= _ref ? ++_j : --_j) {
 201 |         lines.push({ node: node, text: words[i], baseline: (1 + i - words.length / 2) * 10 });
 202 |       }
 203 |       _results.push(node.caption = lines);
 204 |     }
 205 |     return _results;
 206 |   };
 207 | 
 208 |   NeoD3Geometry.prototype.measureRelationshipCaption = function (relationship, caption) {
 209 |     var fontFamily = 'sans-serif';
 210 |     var fontSize = parseFloat(this.style.forRelationship(relationship).get('font-size'));
 211 |     var padding = parseFloat(this.style.forRelationship(relationship).get('padding'));
 212 |     return neo.utils.measureText(caption, fontFamily, fontSize) + padding * 2;
 213 |   };
 214 | 
 215 |   NeoD3Geometry.prototype.captionFitsInsideArrowShaftWidth = function (relationship) {
 216 |     return parseFloat(this.style.forRelationship(relationship).get('shaft-width')) > parseFloat(this.style.forRelationship(relationship).get('font-size'));
 217 |   };
 218 | 
 219 |   NeoD3Geometry.prototype.measureRelationshipCaptions = function (relationships) {
 220 |     var _results = [];
 221 |     for (var _i = 0, _len = relationships.length; _i < _len; _i++) {
 222 |       var relationship = relationships[_i];
 223 |       relationship.captionLength = this.measureRelationshipCaption(relationship, relationship.type);
 224 |       _results.push(relationship.captionLayout = this.captionFitsInsideArrowShaftWidth(relationship) ? "internal" : "external");
 225 |     }
 226 |     return _results;
 227 |   };
 228 | 
 229 |   NeoD3Geometry.prototype.shortenCaption = function (relationship, caption, targetWidth) {
 230 |     var shortCaption = caption;
 231 |     while (true) {
 232 |       if (shortCaption.length <= 2) return ['', 0];
 233 |       shortCaption = shortCaption.substr(0, shortCaption.length - 2) + '\u2026';
 234 |       var width = this.measureRelationshipCaption(relationship, shortCaption);
 235 |       if (width < targetWidth) return [shortCaption, width];
 236 |     }
 237 |   };
 238 | 
 239 |   NeoD3Geometry.prototype.layoutRelationships = function (relationships) {
 240 |     var relationship = void 0,
 241 |         dx = void 0,
 242 |         dy = void 0,
 243 |         length = void 0;
 244 |     var _results = [];
 245 |     var alongPath = function alongPath(from, distance) {
 246 |       return { x: from.x + dx * distance / length, y: from.y + dy * distance / length };
 247 |     };
 248 | 
 249 |     for (var _i = 0, _len = relationships.length; _i < _len; _i++) {
 250 |       relationship = relationships[_i];
 251 |       dx = relationship.target.x - relationship.source.x;
 252 |       dy = relationship.target.y - relationship.source.y;
 253 |       length = Math.sqrt(square(dx) + square(dy));
 254 |       relationship.arrowLength = length - relationship.source.radius - relationship.target.radius;
 255 |       var shaftRadius = parseFloat(this.style.forRelationship(relationship).get('shaft-width')) / 2 || 2;
 256 |       var headRadius = shaftRadius + 3;
 257 |       var headHeight = headRadius * 2;
 258 |       var shaftLength = relationship.arrowLength - headHeight;
 259 |       relationship.startPoint = alongPath(relationship.source, relationship.source.radius);
 260 |       relationship.endPoint = alongPath(relationship.target, -relationship.target.radius);
 261 |       relationship.midShaftPoint = alongPath(relationship.startPoint, shaftLength / 2);
 262 |       relationship.angle = Math.atan2(dy, dx) / Math.PI * 180;
 263 |       relationship.textAngle = relationship.angle;
 264 |       if (relationship.angle < -90 || relationship.angle > 90) {
 265 |         relationship.textAngle += 180;
 266 |       }
 267 |       var _ref = shaftLength > relationship.captionLength ? [relationship.type, relationship.captionLength] : this.shortenCaption(relationship, relationship.type, shaftLength);
 268 |       relationship.shortCaption = _ref[0];
 269 |       relationship.shortCaptionLength = _ref[1];
 270 |       if (relationship.captionLayout === "external") {
 271 |         var startBreak = (shaftLength - relationship.shortCaptionLength) / 2;
 272 |         var endBreak = shaftLength - startBreak;
 273 |         _results.push(relationship.arrowOutline = ['M', 0, shaftRadius, 'L', startBreak, shaftRadius, 'L', startBreak, -shaftRadius, 'L', 0, -shaftRadius, 'Z', 'M', endBreak, shaftRadius, 'L', shaftLength, shaftRadius, 'L', shaftLength, headRadius, 'L', relationship.arrowLength, 0, 'L', shaftLength, -headRadius, 'L', shaftLength, -shaftRadius, 'L', endBreak, -shaftRadius, 'Z'].join(' '));
 274 |       } else {
 275 |         _results.push(relationship.arrowOutline = ['M', 0, shaftRadius, 'L', shaftLength, shaftRadius, 'L', shaftLength, headRadius, 'L', relationship.arrowLength, 0, 'L', shaftLength, -headRadius, 'L', shaftLength, -shaftRadius, 'L', 0, -shaftRadius, 'Z'].join(' '));
 276 |       }
 277 |     }
 278 |     return _results;
 279 |   };
 280 | 
 281 |   NeoD3Geometry.prototype.setNodeRadii = function (nodes) {
 282 |     var _results = [];
 283 |     for (var _i = 0, _len = nodes.length; _i < _len; _i++) {
 284 |       var node = nodes[_i];
 285 |       _results.push(node.radius = parseFloat(this.style.forNode(node).get("diameter")) / 2);
 286 |     }
 287 |     return _results;
 288 |   };
 289 | 
 290 |   NeoD3Geometry.prototype.onGraphChange = function (graph) {
 291 |     this.setNodeRadii(graph.nodes());
 292 |     this.formatNodeCaptions(graph.nodes());
 293 |     return this.measureRelationshipCaptions(graph.relationships());
 294 |   };
 295 | 
 296 |   NeoD3Geometry.prototype.onTick = function (graph) {
 297 |     return this.layoutRelationships(graph.relationships());
 298 |   };
 299 | 
 300 |   return NeoD3Geometry;
 301 | }();
 302 | 
 303 | neo.graphModel = function () {
 304 |   var graph = new neo.models.Graph();
 305 | 
 306 |   var model = function model() {};
 307 | 
 308 |   model.callbacks = {};
 309 | 
 310 |   model.trigger = function () {
 311 |     var args = 2 <= _arguments.length ? __slice.call(_arguments, 1) : [];
 312 |     var event = 'updated';
 313 |     if (model.callbacks[event]) {
 314 |       var _ref = model.callbacks[event];
 315 |       var _results = [];
 316 |       for (var _i = 0, _len = _ref.length; _i < _len; _i++) {
 317 |         var callback = _ref[_i];
 318 |         _results.push(callback.apply(null, args));
 319 |       }
 320 |       return _results;
 321 |     }
 322 |   };
 323 | 
 324 |   model.nodes = function (items) {
 325 |     if (items == null) return graph.nodes();
 326 |     graph.removeNodes().addNodes(items);
 327 |     model.trigger('nodesAdded');
 328 |     return model;
 329 |   };
 330 | 
 331 |   model.nodes.add = function (items) {
 332 |     if (items != null) {
 333 |       graph.addNodes(items);
 334 |       model.trigger('nodesAdded');
 335 |     }
 336 |     return model;
 337 |   };
 338 | 
 339 |   model.nodes.find = graph.findNode;
 340 | 
 341 |   model.nodes.remove = function () {
 342 |     graph.removeNodes.apply(null, _arguments);
 343 |     model.trigger('nodesRemoved');
 344 |     return model;
 345 |   };
 346 | 
 347 |   model.relationships = function (items) {
 348 |     if (items == null) return graph.relationships();
 349 |     graph.removeRelationships().addRelationships(items);
 350 |     model.trigger('relationshipsAdded');
 351 |     return model;
 352 |   };
 353 | 
 354 |   model.relationships.add = function (items) {
 355 |     if (items != null) {
 356 |       graph.addRelationships(items);
 357 |       model.trigger('relationshipsAdded');
 358 |     }
 359 |     return model;
 360 |   };
 361 | 
 362 |   model.relationships.find = graph.findRelationship;
 363 | 
 364 |   model.relationships.remove = function () {
 365 |     graph.removeRelationships.apply(null, _arguments);
 366 |     model.trigger('relationshipsRemoved');
 367 |     return model;
 368 |   };
 369 | 
 370 |   model.on = function (event, callback) {
 371 |     var _base = model.callbacks;
 372 |     _base[event] = _base[event] != null ? _base[event] : [];
 373 |     _base[event].push(callback);
 374 |     return model;
 375 |   };
 376 | 
 377 |   return model;
 378 | };
 379 | 
 380 | neo.graphView = function () {
 381 |   var layout = neo.layout.force();
 382 |   var style = neo.style();
 383 |   var viz = null;
 384 |   var callbacks = {};
 385 |   var trigger = function trigger() {
 386 |     return [];
 387 |   };
 388 | 
 389 |   var chart = function chart(selection) {
 390 |     selection.each(function (graphModel) {
 391 |       if (!viz) {
 392 |         viz = neo.viz(this, graphModel, layout, style);
 393 |         graphModel.on('updated', function () {
 394 |           return viz.update();
 395 |         });
 396 |         viz.trigger = trigger;
 397 |       }
 398 |       return viz.update();
 399 |     });
 400 |   };
 401 | 
 402 |   chart.on = function (event, callback) {
 403 |     (callbacks[event] != null ? callbacks[event] : callbacks[event] = []).push(callback);
 404 |     return chart;
 405 |   };
 406 | 
 407 |   chart.layout = function (value) {
 408 |     if (!_arguments.length) return layout;
 409 |     layout = value;
 410 |     return chart;
 411 |   };
 412 | 
 413 |   chart.style = function (value) {
 414 |     if (!_arguments.length) return style.toSheet();
 415 |     style.importGrass(value);
 416 |     return chart;
 417 |   };
 418 | 
 419 |   chart.width = function (value) {
 420 |     if (!_arguments.length) return viz.width;
 421 |     return chart;
 422 |   };
 423 | 
 424 |   chart.height = function (value) {
 425 |     if (!_arguments.length) return viz.height;
 426 |     return chart;
 427 |   };
 428 | 
 429 |   chart.update = function () {
 430 |     viz.update();
 431 |     return chart;
 432 |   };
 433 | 
 434 |   return chart;
 435 | };
 436 | 
 437 | neo.layout = function () {
 438 |   var _layout = {};
 439 |   _layout.force = function () {
 440 |     var _force = {};
 441 |     _force.init = function (render) {
 442 |       var forceLayout = {};
 443 |       var linkDistance = 60;
 444 |       var d3force = d3.layout.force().linkDistance(linkDistance).charge(-1000).gravity(0.3);
 445 |       var accelerateLayout = function accelerateLayout() {
 446 |         var maxStepsPerTick = 100;
 447 |         var maxAnimationFramesPerSecond = 60;
 448 |         var maxComputeTime = 1000 / maxAnimationFramesPerSecond;
 449 |         var now = window.performance ? function () {
 450 |           return window.performance.now();
 451 |         } : function () {
 452 |           return Date.now();
 453 |         };
 454 |         var d3Tick = d3force.tick;
 455 |         return d3force.tick = function (_this) {
 456 |           return function () {
 457 |             var startTick = now();
 458 |             var step = maxStepsPerTick;
 459 |             while (step-- && now() - startTick < maxComputeTime) {
 460 |               if (d3Tick()) {
 461 |                 maxStepsPerTick = 2;
 462 |                 return true;
 463 |               }
 464 |             }
 465 |             render();
 466 |             return false;
 467 |           };
 468 |         }(undefined);
 469 |       };
 470 |       accelerateLayout();
 471 |       forceLayout.update = function (graph, size) {
 472 |         var nodes = graph.nodes();
 473 |         var relationships = graph.relationships();
 474 |         var radius = nodes.length * linkDistance / (Math.PI * 2);
 475 |         var center = { x: size[0] / 2, y: size[1] / 2 };
 476 |         neo.utils.circularLayout(nodes, center, radius);
 477 |         return d3force.nodes(nodes).links(relationships).size(size).start();
 478 |       };
 479 |       forceLayout.drag = d3force.drag;
 480 |       return forceLayout;
 481 |     };
 482 |     return _force;
 483 |   };
 484 | 
 485 |   return _layout;
 486 | }();
 487 | 
 488 | neo.models.Node = function () {
 489 |   function Node(id, labels, properties) {
 490 |     this.id = id;
 491 |     this.labels = labels;
 492 |     this.propertyMap = properties;
 493 |     this.propertyList = function () {
 494 |       var _results = [];
 495 |       for (var key in properties) {
 496 |         if (!__hasProp.call(properties, key)) continue;
 497 |         var value = properties[key];
 498 |         _results.push({ key: key, value: value });
 499 |       }
 500 |       return _results;
 501 |     }();
 502 |   }
 503 | 
 504 |   Node.prototype.toJSON = function () {
 505 |     return undefined.propertyMap;
 506 |   };
 507 | 
 508 |   Node.prototype.isNode = true;
 509 | 
 510 |   Node.prototype.isRelationship = false;
 511 | 
 512 |   return Node;
 513 | }();
 514 | 
 515 | neo.models.Relationship = function () {
 516 |   function Relationship(id, source, target, type, properties) {
 517 |     var _this3 = this;
 518 | 
 519 |     this.id = id;
 520 |     this.source = source;
 521 |     this.target = target;
 522 |     this.type = type;
 523 |     this.propertyMap = properties;
 524 |     this.propertyList = function () {
 525 |       var _ref = _this3.propertyMap;
 526 |       var _results = [];
 527 |       for (var key in _ref) {
 528 |         if (!__hasProp.call(_ref, key)) continue;
 529 |         var value = _ref[key];
 530 |         _results.push({ key: key, value: value });
 531 |       }
 532 |       return _results;
 533 |     }.call(this);
 534 |   }
 535 | 
 536 |   Relationship.prototype.toJSON = function () {
 537 |     return undefined.propertyMap;
 538 |   };
 539 | 
 540 |   Relationship.prototype.isNode = false;
 541 | 
 542 |   Relationship.prototype.isRelationship = true;
 543 | 
 544 |   return Relationship;
 545 | }();
 546 | 
 547 | neo.Renderer = function () {
 548 |   function Renderer(opts) {
 549 |     if (opts == null) opts = {};
 550 |     neo.utils.extend(this, opts);
 551 |     if (this.onGraphChange == null) {
 552 |       this.onGraphChange = function () {};
 553 |     }
 554 |     if (this.onTick == null) {
 555 |       this.onTick = function () {};
 556 |     }
 557 |   }
 558 | 
 559 |   return Renderer;
 560 | }();
 561 | 
 562 | neo.style = function () {
 563 |   var _style = function _style(storage) {
 564 |     return new GraphStyle(storage);
 565 |   };
 566 | 
 567 |   _style.defaults = {
 568 |     autoColor: true,
 569 |     colors: [{
 570 |       color: '#DFE1E3',
 571 |       'border-color': '#D4D6D7',
 572 |       'text-color-internal': '#000'
 573 |     }, {
 574 |       color: '#BBDAFF',
 575 |       'border-color': '#BBBBFF',
 576 |       'text-color-internal': '#000'
 577 |     }, {
 578 |       color: '#CEF0FF',
 579 |       'border-color': '#ACF3FD',
 580 |       'text-color-internal': '#000'
 581 |     }, {
 582 |       color: '#B5FFFC',
 583 |       'border-color': '#A5FEEB',
 584 |       'text-color-internal': '#000'
 585 |     }, {
 586 |       color: '#B5FFC8',
 587 |       'border-color': '#A4F0B7',
 588 |       'text-color-internal': '#000'
 589 |     }, {
 590 |       color: '#CAFEB8',
 591 |       'border-color': '#A5FF8A',
 592 |       'text-color-internal': '#000'
 593 |     }, {
 594 |       color: '#B8E2EF',
 595 |       'border-color': '#8CD1E6',
 596 |       'text-color-internal': '#000'
 597 |     }, {
 598 |       color: '#CEDEF4',
 599 |       'border-color': '#D7D1F8',
 600 |       'text-color-internal': '#000'
 601 |     }, {
 602 |       color: '#E1CAF9',
 603 |       'border-color': '#E8C6FF',
 604 |       'text-color-internal': '#000'
 605 |     }, {
 606 |       color: '#F0C4F0',
 607 |       'border-color': '#FFCEFF',
 608 |       'text-color-internal': '#000'
 609 |     }, {
 610 |       color: '#FFCAF9',
 611 |       'border-color': '#FEA9F3',
 612 |       'text-color-internal': '#000'
 613 |     }, {
 614 |       color: '#DDCEFF',
 615 |       'border-color': '#C4ABFE',
 616 |       'text-color-internal': '#000'
 617 |     }],
 618 |     style: {
 619 |       'node': {
 620 |         'diameter': '40px',
 621 |         'color': '#DFE1E3',
 622 |         'border-color': '#D4D6D7',
 623 |         'border-width': '2px',
 624 |         'text-color-internal': '#000',
 625 |         'caption': '{id}',
 626 |         'font-size': '8px'
 627 |       },
 628 |       'relationship': {
 629 |         'color': '#D4D6D7',
 630 |         'shaft-width': '1px',
 631 |         'font-size': '8px',
 632 |         'padding': '3px',
 633 |         'text-color-external': '#000',
 634 |         'text-color-internal': '#FFF'
 635 |       }
 636 |     },
 637 |     sizes: [{
 638 |       diameter: '10px'
 639 |     }, {
 640 |       diameter: '20px'
 641 |     }, {
 642 |       diameter: '30px'
 643 |     }, {
 644 |       diameter: '50px'
 645 |     }, {
 646 |       diameter: '80px'
 647 |     }],
 648 |     arrayWidths: [{
 649 |       'shaft-width': '1px'
 650 |     }, {
 651 |       'shaft-width': '2px'
 652 |     }, {
 653 |       'shaft-width': '3px'
 654 |     }, {
 655 |       'shaft-width': '5px'
 656 |     }, {
 657 |       'shaft-width': '8px'
 658 |     }, {
 659 |       'shaft-width': '13px'
 660 |     }, {
 661 |       'shaft-width': '25px'
 662 |     }, {
 663 |       'shaft-width': '38px'
 664 |     }]
 665 |   };
 666 | 
 667 |   var Selector = function () {
 668 |     function Selector(selector) {
 669 |       var _ref = selector.indexOf('.') > 0 ? selector.split('.') : [selector, void 0];
 670 |       this.tag = _ref[0];
 671 |       this.klass = _ref[1];
 672 |     }
 673 | 
 674 |     Selector.prototype.toString = function () {
 675 |       var str = undefined.tag;
 676 |       if (undefined.klass != null) {
 677 |         str += "." + undefined.klass;
 678 |       }
 679 |       return str;
 680 |     };
 681 | 
 682 |     return Selector;
 683 |   }();
 684 | 
 685 |   var StyleRule = function () {
 686 |     function StyleRule(selector, props) {
 687 |       this.selector = selector;
 688 |       this.props = props;
 689 |     }
 690 | 
 691 |     StyleRule.prototype.matches = function (selector) {
 692 |       if (this.selector.tag === selector.tag) {
 693 |         if (this.selector.klass === selector.klass || !this.selector.klass) {
 694 |           return true;
 695 |         }
 696 |       }
 697 |       return false;
 698 |     };
 699 | 
 700 |     StyleRule.prototype.matchesExact = function (selector) {
 701 |       return this.selector.tag === selector.tag && this.selector.klass === selector.klass;
 702 |     };
 703 | 
 704 |     return StyleRule;
 705 |   }();
 706 | 
 707 |   var StyleElement = function () {
 708 |     function StyleElement(selector, data) {
 709 |       this.data = data;
 710 |       this.selector = selector;
 711 |       this.props = {};
 712 |     }
 713 | 
 714 |     StyleElement.prototype.applyRules = function (rules) {
 715 |       for (var _i = 0, _len = rules.length; _i < _len; _i++) {
 716 |         var rule = rules[_i];
 717 |         if (!rule.matches(this.selector)) {
 718 |           continue;
 719 |         }
 720 |         neo.utils.extend(this.props, rule.props);
 721 |         break;
 722 |       }
 723 |       for (var _j = 0, _len1 = rules.length; _j < _len1; _j++) {
 724 |         var _rule = rules[_j];
 725 |         if (!_rule.matchesExact(this.selector)) {
 726 |           continue;
 727 |         }
 728 |         neo.utils.extend(this.props, _rule.props);
 729 |         break;
 730 |       }
 731 | 
 732 |       return this;
 733 |     };
 734 | 
 735 |     StyleElement.prototype.get = function (attr) {
 736 |       return this.props[attr] || '';
 737 |     };
 738 | 
 739 |     return StyleElement;
 740 |   }();
 741 | 
 742 |   var GraphStyle = function () {
 743 |     function GraphStyle(storage) {
 744 |       this.storage = storage;
 745 |       this.rules = [];
 746 |       this.loadRules();
 747 |     }
 748 | 
 749 |     GraphStyle.prototype.selector = function (item) {
 750 |       return item.isNode ? this.nodeSelector(item) : item.isRelationship ? this.relationshipSelector(item) : null;
 751 |     };
 752 | 
 753 |     GraphStyle.prototype.calculateStyle = function (selector, data) {
 754 |       return new StyleElement(selector, data).applyRules(this.rules);
 755 |     };
 756 | 
 757 |     GraphStyle.prototype.forEntity = function (item) {
 758 |       return this.calculateStyle(this.selector(item), item);
 759 |     };
 760 | 
 761 |     GraphStyle.prototype.forNode = function (node) {
 762 |       if (node == null) node = {};
 763 | 
 764 |       var selector = this.nodeSelector(node);
 765 |       var _ref = node.labels;
 766 |       if ((_ref != null ? _ref.length : void 0) > 0) {
 767 |         this.setDefaultStyling(selector);
 768 |       }
 769 |       return this.calculateStyle(selector, node);
 770 |     };
 771 | 
 772 |     GraphStyle.prototype.forRelationship = function (rel) {
 773 |       return this.calculateStyle(this.relationshipSelector(rel), rel);
 774 |     };
 775 | 
 776 |     GraphStyle.prototype.findAvailableDefaultColor = function () {
 777 |       var usedColors = {};
 778 |       var _ref = this.rules;
 779 |       for (var _i = 0, _len = _ref.length; _i < _len; _i++) {
 780 |         var rule = _ref[_i];
 781 |         if (rule.props.color != null) {
 782 |           usedColors[rule.props.color] = true;
 783 |         }
 784 |       }
 785 |       var _ref1 = _style.defaults.colors;
 786 |       for (var _j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
 787 |         var defaultColor = _ref1[_j];
 788 |         if (usedColors[defaultColor.color] == null) {
 789 |           return neo.utils.copy(defaultColor);
 790 |         }
 791 |       }
 792 |       return neo.utils.copy(_style.defaults.colors[0]);
 793 |     };
 794 | 
 795 |     GraphStyle.prototype.setDefaultStyling = function (selector) {
 796 |       var rule = this.findRule(selector);
 797 |       if (_style.defaults.autoColor && rule == null) {
 798 |         rule = new StyleRule(selector, this.findAvailableDefaultColor());
 799 |         this.rules.push(rule);
 800 |         return this.persist();
 801 |       }
 802 |     };
 803 | 
 804 |     GraphStyle.prototype.change = function (item, props) {
 805 |       var selector = this.selector(item);
 806 |       var rule = this.findRule(selector);
 807 |       if (rule == null) {
 808 |         rule = new StyleRule(selector, {});
 809 |         this.rules.push(rule);
 810 |       }
 811 |       neo.utils.extend(rule.props, props);
 812 |       this.persist();
 813 |       return rule;
 814 |     };
 815 | 
 816 |     GraphStyle.prototype.destroyRule = function (rule) {
 817 |       var idx = this.rules.indexOf(rule);
 818 |       if (idx != null) {
 819 |         this.rules.splice(idx, 1);
 820 |       }
 821 |       return this.persist();
 822 |     };
 823 | 
 824 |     GraphStyle.prototype.findRule = function (selector) {
 825 |       var rule = void 0;
 826 |       var _ref = this.rules;
 827 |       for (var _i = 0, _len = _ref.length; _i < _len; _i++) {
 828 |         var r = _ref[_i];
 829 |         if (r.matchesExact(selector)) {
 830 |           rule = r;
 831 |         }
 832 |       }
 833 |       return rule;
 834 |     };
 835 | 
 836 |     GraphStyle.prototype.nodeSelector = function (node) {
 837 |       if (node == null) node = {};
 838 |       var selector = 'node';
 839 |       var _ref = node.labels;
 840 |       if ((_ref != null ? _ref.length : void 0) > 0) {
 841 |         selector += "." + node.labels[0];
 842 |       }
 843 |       return new Selector(selector);
 844 |     };
 845 | 
 846 |     GraphStyle.prototype.relationshipSelector = function (rel) {
 847 |       if (rel == null) rel = {};
 848 |       var selector = 'relationship';
 849 |       if (rel.type != null) {
 850 |         selector += "." + rel.type;
 851 |       }
 852 |       return new Selector(selector);
 853 |     };
 854 | 
 855 |     GraphStyle.prototype.importGrass = function (string) {
 856 |       try {
 857 |         var rules = this.parse(string);
 858 |         this.loadRules(rules);
 859 |         return this.persist();
 860 |       } catch (_error) {
 861 |         console.error(_error);
 862 |       }
 863 |     };
 864 | 
 865 |     GraphStyle.prototype.loadRules = function (data) {
 866 |       if (!neo.utils.isObject(data)) {
 867 |         data = _style.defaults.style;
 868 |       }
 869 |       this.rules.length = 0;
 870 |       for (var rule in data) {
 871 |         var props = data[rule];
 872 |         this.rules.push(new StyleRule(new Selector(rule), neo.utils.copy(props)));
 873 |       }
 874 |       return this;
 875 |     };
 876 | 
 877 |     GraphStyle.prototype.parse = function (string) {
 878 |       var chars = string.split(''),
 879 |           rules = {};
 880 |       var insideString = false,
 881 |           insideProps = false,
 882 |           keyword = "",
 883 |           props = "";
 884 |       for (var _i = 0, _len = chars.length; _i < _len; _i++) {
 885 |         var c = chars[_i];
 886 |         var skipThis = true;
 887 |         switch (c) {
 888 |           case "{":
 889 |             if (!insideString) {
 890 |               insideProps = true;
 891 |             } else {
 892 |               skipThis = false;
 893 |             }
 894 |             break;
 895 |           case "}":
 896 |             if (!insideString) {
 897 |               insideProps = false;
 898 |               rules[keyword] = props;
 899 |               keyword = "";
 900 |               props = "";
 901 |             } else {
 902 |               skipThis = false;
 903 |             }
 904 |             break;
 905 |           case "'":
 906 |           case "\"":
 907 |             insideString ^= true;
 908 |             break;
 909 |           default:
 910 |             skipThis = false;
 911 |         }
 912 |         if (skipThis) {
 913 |           continue;
 914 |         }
 915 |         if (insideProps) {
 916 |           props += c;
 917 |         } else {
 918 |           if (!c.match(/[\s\n]/)) {
 919 |             keyword += c;
 920 |           }
 921 |         }
 922 |       }
 923 |       for (var k in rules) {
 924 |         var v = rules[k];
 925 |         rules[k] = {};
 926 |         var _ref = v.split(';');
 927 |         for (var _j = 0, _len1 = _ref.length; _j < _len1; _j++) {
 928 |           var prop = _ref[_j];
 929 |           var _ref1 = prop.split(':');
 930 |           var key = _ref1[0];
 931 |           var val = _ref1[1];
 932 |           if (!(key && val)) {
 933 |             continue;
 934 |           }
 935 |           rules[k][key != null ? key.trim() : void 0] = val != null ? val.trim() : void 0;
 936 |         }
 937 |       }
 938 |       return rules;
 939 |     };
 940 | 
 941 |     GraphStyle.prototype.persist = function () {
 942 |       var _ref = this.storage;
 943 |       return _ref != null ? _ref.add('grass', JSON.stringify(this.toSheet())) : void 0;
 944 |     };
 945 | 
 946 |     GraphStyle.prototype.resetToDefault = function () {
 947 |       this.loadRules();
 948 |       return this.persist();
 949 |     };
 950 | 
 951 |     GraphStyle.prototype.toSheet = function () {
 952 |       var sheet = {};
 953 |       var _ref = this.rules;
 954 |       for (var _i = 0, _len = _ref.length; _i < _len; _i++) {
 955 |         var rule = _ref[_i];
 956 |         sheet[rule.selector.toString()] = rule.props;
 957 |       }
 958 |       return sheet;
 959 |     };
 960 | 
 961 |     GraphStyle.prototype.toString = function () {
 962 |       var str = "";
 963 |       var _ref = this.rules;
 964 |       for (var _i = 0, _len = _ref.length; _i < _len; _i++) {
 965 |         var r = _ref[_i];
 966 |         str += r.selector.toString() + " {\n";
 967 |         var _ref1 = r.props;
 968 |         for (var k in _ref1) {
 969 |           var v = _ref1[k];
 970 |           if (k === "caption") {
 971 |             v = "'" + v + "'";
 972 |           }
 973 |           str += "  " + k + ": " + v + ";\n";
 974 |         }
 975 |         str += "}\n\n";
 976 |       }
 977 |       return str;
 978 |     };
 979 | 
 980 |     GraphStyle.prototype.nextDefaultColor = 0;
 981 | 
 982 |     GraphStyle.prototype.defaultColors = function () {
 983 |       return neo.utils.copy(_style.defaults.colors);
 984 |     };
 985 | 
 986 |     GraphStyle.prototype.interpolate = function (str, id, properties) {
 987 |       return str.replace(/\{([^{}]*)\}/g, function (a, b) {
 988 |         var r = properties[b] || id;
 989 |         return typeof r === 'string' || typeof r === 'number' ? r : a;
 990 |       });
 991 |     };
 992 | 
 993 |     return GraphStyle;
 994 |   }();
 995 | 
 996 |   return _style;
 997 | }();
 998 | 
 999 | neo.viz = function (el, graph, layout, style) {
1000 |   var viz = { style: style },
1001 |       geometry = new NeoD3Geometry(style);
1002 |   el = d3.select(el);
1003 | 
1004 |   viz.trigger = function () {};
1005 | 
1006 |   var onNodeClick = function (_this) {
1007 |     return function (node) {
1008 |       return viz.trigger('nodeClicked', node);
1009 |     };
1010 |   }(this);
1011 | 
1012 |   var onNodeDblClick = function (_this) {
1013 |     return function (node) {
1014 |       return viz.trigger('nodeDblClicked', node);
1015 |     };
1016 |   }(this);
1017 | 
1018 |   var onRelationshipClick = function (_this) {
1019 |     return function (relationship) {
1020 |       return viz.trigger('relationshipClicked', relationship);
1021 |     };
1022 |   }(this);
1023 | 
1024 |   var render = function render() {
1025 |     var renderer = void 0;
1026 |     geometry.onTick(graph);
1027 | 
1028 |     var nodeGroups = el.selectAll("g.node").attr("transform", function (node) {
1029 |       return "translate(" + node.x + "," + node.y + ")";
1030 |     });
1031 | 
1032 |     var _ref = neo.renderers.node;
1033 |     for (var _i = 0, _len = _ref.length; _i < _len; _i++) {
1034 |       renderer = _ref[_i];
1035 |       nodeGroups.call(renderer.onTick, viz);
1036 |     }
1037 | 
1038 |     var relationshipGroups = el.selectAll("g.relationship");
1039 |     var _ref1 = neo.renderers.relationship;
1040 |     var _results = [];
1041 |     for (var _j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
1042 |       renderer = _ref1[_j];
1043 |       _results.push(relationshipGroups.call(renderer.onTick, viz));
1044 |     }
1045 |     return _results;
1046 |   };
1047 | 
1048 |   var force = layout.init(render);
1049 | 
1050 |   viz.update = function () {
1051 |     if (!graph) return;
1052 | 
1053 |     var height = function () {
1054 |       try {
1055 |         return parseInt(el.style('height').replace('px', ''), 10);
1056 |       } catch (_error) {}
1057 |     }();
1058 | 
1059 |     var width = function () {
1060 |       try {
1061 |         return parseInt(el.style('width').replace('px', ''), 10);
1062 |       } catch (_error) {}
1063 |     }();
1064 | 
1065 |     var layers = el.selectAll("g.layer").data(["relationships", "nodes"]);
1066 |     layers.enter().append("g").attr("class", function (d) {
1067 |       return "layer " + d;
1068 |     });
1069 | 
1070 |     var nodes = graph.nodes();
1071 |     var relationships = graph.relationships();
1072 |     var relationshipGroups = el.select("g.layer.relationships").selectAll("g.relationship").data(relationships, function (d) {
1073 |       return d.id;
1074 |     });
1075 |     relationshipGroups.enter().append("g").attr("class", "relationship").on("click", onRelationshipClick);
1076 | 
1077 |     geometry.onGraphChange(graph);
1078 | 
1079 |     var renderer = void 0;
1080 |     var _ref = neo.renderers.relationship;
1081 |     for (var _i = 0, _len = _ref.length; _i < _len; _i++) {
1082 |       renderer = _ref[_i];
1083 |       relationshipGroups.call(renderer.onGraphChange, viz);
1084 |     }
1085 |     relationshipGroups.exit().remove();
1086 | 
1087 |     var nodeGroups = el.select("g.layer.nodes").selectAll("g.node").data(nodes, function (d) {
1088 |       return d.id;
1089 |     });
1090 |     nodeGroups.enter().append("g").attr("class", "node").call(force.drag).call(clickHandler);
1091 |     var _ref1 = neo.renderers.node;
1092 |     for (var _j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
1093 |       renderer = _ref1[_j];
1094 |       nodeGroups.call(renderer.onGraphChange, viz);
1095 |     }
1096 |     nodeGroups.exit().remove();
1097 |     return force.update(graph, [width, height]);
1098 |   };
1099 |   var clickHandler = neo.utils.clickHandler();
1100 |   clickHandler.on('click', onNodeClick);
1101 |   clickHandler.on('dblclick', onNodeDblClick);
1102 |   return viz;
1103 | };
1104 | 
1105 | neo.utils.circularLayout = function (nodes, center, radius) {
1106 |   var unlocatedNodes = nodes.filter(function (node) {
1107 |     return !(node.x != null && node.y != null);
1108 |   }),
1109 |       _results = [];
1110 |   var _i = void 0;
1111 |   for (var i = _i = 0, _len = unlocatedNodes.length; _i < _len; i = ++_i) {
1112 |     var n = unlocatedNodes[i];
1113 |     n.x = center.x + radius * Math.sin(2 * Math.PI * i / unlocatedNodes.length);
1114 |     _results.push(n.y = center.y + radius * Math.cos(2 * Math.PI * i / unlocatedNodes.length));
1115 |   }
1116 |   return _results;
1117 | };
1118 | 
1119 | neo.utils.distributeCircular = function (arrowAngles, minSeparation) {
1120 |   var list = [],
1121 |       _ref = arrowAngles.floating,
1122 |       result = {};
1123 |   var angle = void 0,
1124 |       key = void 0,
1125 |       _i = void 0,
1126 |       _k = void 0;
1127 |   for (key in _ref) {
1128 |     angle = _ref[key];
1129 |     list.push({ key: key, angle: angle });
1130 |   }
1131 | 
1132 |   list.sort(function (a, b) {
1133 |     return a.angle - b.angle;
1134 |   });
1135 | 
1136 |   var runsOfTooDenseArrows = [];
1137 |   var length = function length(startIndex, endIndex) {
1138 |     return startIndex < endIndex ? endIndex - startIndex + 1 : endIndex + list.length - startIndex + 1;
1139 |   };
1140 | 
1141 |   angle = function angle(startIndex, endIndex) {
1142 |     return startIndex < endIndex ? list[endIndex].angle - list[startIndex].angle : 360 - (list[startIndex].angle - list[endIndex].angle);
1143 |   };
1144 | 
1145 |   var tooDense = function tooDense(startIndex, endIndex) {
1146 |     return angle(startIndex, endIndex) < length(startIndex, endIndex) * minSeparation;
1147 |   };
1148 | 
1149 |   var wrapIndex = function wrapIndex(index) {
1150 |     return index === -1 ? list.length - 1 : index >= list.length ? index - list.length : index;
1151 |   };
1152 | 
1153 |   var wrapAngle = function wrapAngle(angle) {
1154 |     return angle >= 360 ? angle - 360 : angle;
1155 |   };
1156 | 
1157 |   var expand = function expand(startIndex, endIndex) {
1158 |     if (length(startIndex, endIndex) < list.length) {
1159 |       if (tooDense(startIndex, wrapIndex(endIndex + 1))) return expand(startIndex, wrapIndex(endIndex + 1));
1160 |       if (tooDense(wrapIndex(startIndex - 1), endIndex)) return expand(wrapIndex(startIndex - 1), endIndex);
1161 |     }
1162 |     return runsOfTooDenseArrows.push({ start: startIndex, end: endIndex });
1163 |   };
1164 | 
1165 |   for (var i = _i = 0, _ref1 = list.length - 2; 0 <= _ref1 ? _i <= _ref1 : _i >= _ref1; i = 0 <= _ref1 ? ++_i : --_i) {
1166 |     if (tooDense(i, i + 1)) expand(i, i + 1);
1167 |   }
1168 | 
1169 |   for (var _j = 0, _len = runsOfTooDenseArrows.length; _j < _len; _j++) {
1170 |     var run = runsOfTooDenseArrows[_j];
1171 |     var center = list[run.start].angle + angle(run.start, run.end) / 2;
1172 |     var runLength = length(run.start, run.end);
1173 |     for (var _i2 = _k = 0, _ref2 = runLength - 1; 0 <= _ref2 ? _k <= _ref2 : _k >= _ref2; _i2 = 0 <= _ref2 ? ++_k : --_k) {
1174 |       var rawAngle = center + (_i2 - (runLength - 1) / 2) * minSeparation;
1175 |       result[list[wrapIndex(run.start + _i2)].key] = wrapAngle(rawAngle);
1176 |     }
1177 |   }
1178 |   var _ref3 = arrowAngles.floating;
1179 | 
1180 |   for (key in _ref3) {
1181 |     angle = _ref3[key];
1182 |     if (!result[key]) result[key] = arrowAngles.floating[key];
1183 |   }
1184 |   return result;
1185 | };
1186 | 
1187 | neo.utils.clickHandler = function () {
1188 |   var cc = function cc(selection) {
1189 |     var dist = function dist(a, b) {
1190 |       return Math.sqrt(Math.pow(a - b[0], 2));
1191 |     };
1192 |     var tolerance = 5;
1193 |     var wait = null;
1194 | 
1195 |     selection.on("mousedown", function (e) {
1196 |       d3.event = e;
1197 |       d3.event.fixed = true;
1198 |       return +new Date();
1199 |     });
1200 | 
1201 |     return selection.on("mouseup", function (e) {
1202 |       d3.event = e;
1203 |       if (dist(void 0, d3.mouse(document.body)) > tolerance) {} else {
1204 |         if (wait) {
1205 |           window.clearTimeout(wait);
1206 |           wait = null;
1207 |           return event.dblclick(d3.event);
1208 |         } else {
1209 |           return wait = window.setTimeout(function (ev) {
1210 |             return function () {
1211 |               event.click(ev);
1212 |               return wait = null;
1213 |             };
1214 |           }(d3.event), 250);
1215 |         }
1216 |       }
1217 |     });
1218 |   };
1219 |   var event = d3.dispatch("click", "dblclick");
1220 |   return d3.rebind(cc, event, "on");
1221 | };
1222 | 
1223 | neo.utils.measureText = function () {
1224 |   var measureUsingCanvas = function measureUsingCanvas(text, font) {
1225 |     var canvasSelection = d3.select('canvas#textMeasurementCanvas').data([undefined]);
1226 |     canvasSelection.enter().append('canvas').attr('id', 'textMeasurementCanvas').style('display', 'none');
1227 |     var canvas = canvasSelection.node();
1228 |     var context = canvas.getContext('2d');
1229 |     context.font = font;
1230 |     return context.measureText(text).width;
1231 |   };
1232 | 
1233 |   var cache = function () {
1234 |     var cacheSize = 10000,
1235 |         map = {},
1236 |         list = [];
1237 |     return function (key, calc) {
1238 |       if (map[key]) {
1239 |         return map[key];
1240 |       } else {
1241 |         var result = calc();
1242 |         if (list.length > cacheSize) {
1243 |           delete map[list.splice(0, 1)];
1244 |           list.push(key);
1245 |         }
1246 |         return map[key] = result;
1247 |       }
1248 |     };
1249 |   }();
1250 | 
1251 |   return function (text, fontFamily, fontSize) {
1252 |     var font = 'normal normal normal ' + fontSize + 'px/normal ' + fontFamily;
1253 |     return cache(text + font, function () {
1254 |       return measureUsingCanvas(text, font);
1255 |     });
1256 |   };
1257 | }();
1258 | 
1259 | (function () {
1260 |   var noop = function noop() {};
1261 | 
1262 |   var nodeOutline = new neo.Renderer({
1263 |     onGraphChange: function onGraphChange(selection, viz) {
1264 |       var circles = selection.selectAll('circle.outline').data(function (node) {
1265 |         return [node];
1266 |       });
1267 |       circles.enter().append('circle').classed('outline', true).attr({ cx: 0, cy: 0 });
1268 |       circles.attr({
1269 |         r: function r(node) {
1270 |           return node.radius;
1271 |         },
1272 |         fill: function fill(node) {
1273 |           return viz.style.forNode(node).get('color');
1274 |         },
1275 |         stroke: function stroke(node) {
1276 |           return viz.style.forNode(node).get('border-color');
1277 |         },
1278 |         'stroke-width': function strokeWidth(node) {
1279 |           return viz.style.forNode(node).get('border-width');
1280 |         }
1281 |       });
1282 |       return circles.exit().remove();
1283 |     },
1284 |     onTick: noop
1285 |   });
1286 | 
1287 |   var nodeCaption = new neo.Renderer({
1288 |     onGraphChange: function onGraphChange(selection, viz) {
1289 |       var text = selection.selectAll('text').data(function (node) {
1290 |         return node.caption;
1291 |       });
1292 |       text.enter().append('text').attr({
1293 |         'text-anchor': 'middle',
1294 |         'font-weight': 'normal',
1295 |         'stroke': '#FFFFFF',
1296 |         'stroke-width': '0'
1297 |       });
1298 |       text.text(function (line) {
1299 |         return line.text;
1300 |       }).attr('y', function (line) {
1301 |         return line.baseline;
1302 |       }).attr('font-size', function (line) {
1303 |         return viz.style.forNode(line.node).get('font-size');
1304 |       }).attr('stroke', function (line) {
1305 |         return viz.style.forNode(line.node).get('color');
1306 |       }).attr('fill', function (line) {
1307 |         return viz.style.forNode(line.node).get('text-color-internal');
1308 |       });
1309 |       return text.exit().remove();
1310 |     },
1311 |     onTick: noop
1312 |   });
1313 | 
1314 |   var nodeOverlay = new neo.Renderer({
1315 |     onGraphChange: function onGraphChange(selection) {
1316 |       var circles = selection.selectAll('circle.overlay').data(function (node) {
1317 |         return node.selected ? [node] : [];
1318 |       });
1319 |       circles.enter().insert('circle', '.outline').classed('ring', true).classed('overlay', true).attr({
1320 |         cx: 0, cy: 0, fill: '#f5F6F6', stroke: 'rgba(151, 151, 151, 0.2)', 'stroke-width': '3px' });
1321 |       circles.attr({ r: function r(node) {
1322 |           return node.radius + 6;
1323 |         } });
1324 |       return circles.exit().remove();
1325 |     },
1326 |     onTick: noop
1327 |   });
1328 | 
1329 |   var arrowPath = new neo.Renderer({
1330 |     onGraphChange: function onGraphChange(selection, viz) {
1331 |       var paths = selection.selectAll('path').data(function (rel) {
1332 |         return [rel];
1333 |       });
1334 |       paths.enter().append('path');
1335 |       paths.attr('fill', function (rel) {
1336 |         return viz.style.forRelationship(rel).get('color');
1337 |       }).attr('stroke', 'none');
1338 |       return paths.exit().remove();
1339 |     },
1340 |     onTick: function onTick(selection) {
1341 |       return selection.selectAll('path').attr('d', function (d) {
1342 |         return d.arrowOutline;
1343 |       }).attr('transform', function (d) {
1344 |         return isNaN(d.startPoint.x) || isNaN(d.startPoint.y) ? null : "translate(" + d.startPoint.x + " " + d.startPoint.y + ") rotate(" + d.angle + ")";
1345 |       });
1346 |     }
1347 |   });
1348 | 
1349 |   var relationshipType = new neo.Renderer({
1350 |     onGraphChange: function onGraphChange(selection, viz) {
1351 |       var texts = selection.selectAll("text").data(function (rel) {
1352 |         return [rel];
1353 |       });
1354 |       texts.enter().append("text").attr({ "text-anchor": "middle" });
1355 |       texts.attr('font-size', function (rel) {
1356 |         return viz.style.forRelationship(rel).get('font-size');
1357 |       }).attr('fill', function (rel) {
1358 |         return viz.style.forRelationship(rel).get('text-color-' + rel.captionLayout);
1359 |       });
1360 |       return texts.exit().remove();
1361 |     },
1362 |     onTick: function onTick(selection, viz) {
1363 |       return selection.selectAll('text').attr('x', function (rel) {
1364 |         return isNaN(rel.midShaftPoint.x) ? null : rel.midShaftPoint.x;
1365 |       }).attr('y', function (rel) {
1366 |         return isNaN(rel.midShaftPoint.y) ? null : rel.midShaftPoint.y + parseFloat(viz.style.forRelationship(rel).get('font-size')) / 2 - 1;
1367 |       }).attr('transform', function (rel) {
1368 |         return isNaN(rel.midShaftPoint.x) || isNaN(rel.midShaftPoint.y) ? null : "rotate(" + rel.textAngle + " " + rel.midShaftPoint.x + " " + rel.midShaftPoint.y + ")";
1369 |       }).text(function (rel) {
1370 |         return rel.shortCaption;
1371 |       });
1372 |     }
1373 |   });
1374 | 
1375 |   var relationshipOverlay = new neo.Renderer({
1376 |     onGraphChange: function onGraphChange(selection) {
1377 |       var rects = selection.selectAll("rect").data(function (rel) {
1378 |         return [rel];
1379 |       });
1380 |       var band = 20;
1381 |       rects.enter().append('rect').classed('overlay', true).attr('fill', 'yellow').attr('x', 0).attr('y', -band / 2).attr('height', band);
1382 |       rects.attr('opacity', function (rel) {
1383 |         return rel.selected ? 0.3 : 0;
1384 |       });
1385 |       return rects.exit().remove();
1386 |     },
1387 |     onTick: function onTick(selection) {
1388 |       return selection.selectAll('rect').attr('width', function (d) {
1389 |         return d.arrowLength > 0 ? d.arrowLength : 0;
1390 |       }).attr('transform', function (d) {
1391 |         return isNaN(d.startPoint.x) || isNaN(d.startPoint.y) ? null : "translate(" + d.startPoint.x + " " + d.startPoint.y + ") rotate(" + d.angle + ")";
1392 |       });
1393 |     }
1394 |   });
1395 | 
1396 |   neo.renderers.node.push(nodeOutline);
1397 |   neo.renderers.node.push(nodeCaption);
1398 |   neo.renderers.node.push(nodeOverlay);
1399 |   neo.renderers.relationship.push(arrowPath);
1400 |   neo.renderers.relationship.push(relationshipType);
1401 |   return neo.renderers.relationship.push(relationshipOverlay);
1402 | })();
1403 | 
1404 | exports.default = neo;


--------------------------------------------------------------------------------