CANVE / canve-viz

CANVE visualizer UI

CANVE Visualizer

The CANVE Visualizer is a (work in progress) client side application to visualize and interact with graph data generated by the CANVE Extractor.

This application was scaffolded with generator-aurelia.

Running The App

To run the app, follow these steps.

1. Ensure that NodeJS is installed. This provides the platform on which the build tooling runs.

2. From the project folder, execute the following command:

npm install

1. Ensure that Gulp is installed. If you need to install it, use the following command:

npm install -g gulp

1. Ensure that jspm is installed. If you need to install it, use the following command:

npm install -g jspm

Note: jspm queries GitHub to install semver packages, but GitHub has a rate limit on anonymous API requests. It is advised that you configure jspm with your GitHub credentials in order to avoid problems. You can do this by executing jspm registry config github and following the prompts. If you choose to authorize jspm by an access token instead of giving your password (see GitHub Settings > Personal Access Tokens), public_repo access for the token is required.

1. Install the client-side dependencies with jspm:

jspm install -y

Note: Windows users, if you experience an error of "unknown command unzip" you can solve this problem by doing npm install -g unzip and then re-running jspm install.

1. Run a local server to host the data (temporary step until data source is decided on). Clone this repo and then:

cd visualizer
python serveLocalCORS.py

1. To run the app, execute the following command:

gulp watch

1. Browse to http://localhost:9000 to see the app. You can make changes in the code found under src and the browser should auto-refresh itself as you save files.

Bundling

Bundling is performed by Aurelia CLI. If you don't have the cli installed, use the following command:

 npm install -g aurelia-cli

You can create bundles for both javascript modules and Aurelia views/templates with this command:

aurelia bundle

Note that, we have an aureliafile.js placed in the root of the project. CLI uses this file for various configuration that includes bundling. To learn more about other configuration options please visit CLI Documentation

Running The Unit Tests

To run the unit tests, first ensure that you have followed the steps above in order to install all dependencies and successfully build the library.

To run the tests in tdd mode (keeps the test browser open and re-runs the tests on any code change):

gulp tdd

To run the tests once and exit:

gulp test

The tests are run with Karma and written in Jasmine. Additional Jasmine Matchers are also used.

Running The E2E Tests

Integration tests are performed with Protractor.

1. Place your E2E-Tests into the folder test/e2e/src
2. Install the necessary webdriver

gulp webdriver_update

3. Configure the path to the webdriver by opening the file protractor.conf.js and adjusting the seleniumServerJar property. Typically its only needed to adjust the version number.

4. Make sure your app runs and is accessible

gulp watch

5. In another console run the E2E-Tests

gulp e2e

Upgrade Aurelia

jspm install aurelia-animator-css aurelia-bootstrapper aurelia-fetch-client aurelia-framework aurelia-history-browser aurelia-loader-default aurelia-logging-console aurelia-router aurelia-templating-binding aurelia-templating-resources aurelia-templating-router aurelia-binding fetch

TODO's

• sometimes nodes are rendered outside the graph container bounds, therefore partially hidden
• bounding box calculation for node radius to contain text
• support radius expand and contract (contracted state should not show text)
• animate in border on selection
• animate node from neighbor that brought it in to its final position (one time initial render only)
• node arc
• animate nodes and edges that are removed from view (eg: fade out, shrink, etc) - note I tried to use detached() lifecycle callback but it does not work because element has already been removed from DOM at that point. Also tried to use pubsub from graph to node, but maybe timing issue, wasn't working either
• ability to drag node and "stick" it in new location (should it stay there always?)
• when search or menu interaction identifies nodes that are already in display, subtly flash or bounce them lightly, so user gets some visual indication that they were already there
• when a batch of nodes come in, stagger the animation so its not so jarring that they all pop in at once
• on mouseover a node, highlight all edges attached to it and their nodes (i.e. its neighborhood with a degree of 1)
• interaction menu design