Awesome
Active Directory Control Path Visualization tool
This is a frontend application based on vis.js library to display extracts of Active Directory.
1. INSTALL
The project ships with everything included to visualize graphs. Open the index.html file locally with your browser and then click the "Load file..." button to select a JSON file containing a graph.
2. USAGE
Best results are achieved using up-to-date Chromium browser. It may also work on Firefox, but has not been tested on other browsers. Javascript File API is required.
Initialization
Press Ctrl
+ o
or press the Open file...
button to select the data you want to display.
After loading the file, a progress bar is shown. The library tries to stabilize the graph. This can take some time, depending on the graph size.
If the graph is not stabilized after 2000 iterations, it is shown anyway. you will be able to tweak the configuration by using the right toolbar which exposes all the parameters used for the physics simulation.
Manipulation
You can select nodes and edges, drag nodes, zoom in and out using the mouse. Multiple node and edges
selection can be achieved by pressing Ctrl
while selection is done.
Hovering a node or an edge displays its properties in a tooltip. The status bar at the bottom of the interface displays more detailed information, i.e. source and target nodes for an edge.
Using the right click button on a node, or in an empty area of the graph will display the context menu. This menu offers available actions depending on the current selection:
- Remove selection: this action will remove all selected nodes and edges from the graph.
- Fix/unfix selection: this action will fix the position of the selected nodes. These won't be affected by the physics simulation anymore.
- Cluster/Uncluster selection: This submenu will display configured clustering actions. The clusters will be made using different parameters exposed below. See advanced configuration for more info.
- Tag selection: Use it to apply a tag to your selection, or create and apply a new one.
- Untag selection: Removes the tag (if applied) from the selection.
- Select tag: Selects all nodes and edges that have a particular tag applied.
- Shortest path to root: Selects the nodes on the shortest path that goes to the root node (deph=0).
- Select same type nodes: Selects all the node that have the same type that the currently selected node.
Search
Press Ctrl
+ f
to open the search box. It is located at the top right of the screen. Type a few
letters to see matching results. Results are ordered using the position of the search term in the
title.
Click a search result to select the node and center the graph around that node.
To close the search box, either use the button at the right of the search field, or use ESC while the search field is focused.
3. Configuration
Using the right toolbar, by pressing the menu button, gives you access to the full graph configuration. Here are some of the most useful options:
- Layout:
- hierarchical: to display nodes and relations using a hierarchical tree
- Interaction:
- selectConnectedEdges: Enables or disables the selection of connected edges when selecting a node
- Physics:
- enabled: enable or disable the physical simulation of the nodes
- solver: different algorithms are available, try them to find the one that best suits your needs
- Depending of the solver, different parameters are shown. Use them to fine-tune the rendering.
You can find the reference documentation at vis.js official website.
4. Advanced configuration
Advanced configuration file
The default graph configuration, containing nodes style, physics default parameters and much more is
located in the js/config.js
file. Feel free to customize this file so that it best suits your
needs.
Data model
The graph is built assuming the JSON file contains the following structure:
{
"nodes": [
// ...
],
"links": [
// ...
]
}
In the config.js
file you can customize which fields are to be used in the graph rendering.
For nodes, an id is calculated in order of appearance of the node. The from
and to
properties
of the links must match this id property. If your model already includes an id property that is
referenced by the links, use the id property name in the id
data field.
By default, some groups are defined, which are used according to the group
property name of
your model. Feel free to add more groups to fit your needs. The label of the group will be used,
unless you specify a label
property from your model to be used by the node.
Network rendering configuration
For network customization options, you can find the reference documentation at vis.js official website.
Advanced clustering configuration
The clustering configuration is done in the Vizu.options.clustering
array at the end of the
config.js
file.
TODO detail clustering configuration
5. CUSTOM BUILD / DEVELOPMENT
Warning This is not currently working
Install nodejs which ships with npm (node package manager) to make your custom build.
Run the following commands to install the dependencies:
$ npm install
$ sudo npm install -g browserify
To build the custom version of visjs used, type the following command:
$ browserify build.js -t babelify -o dist/vis-custom.js -s vis