-
Notifications
You must be signed in to change notification settings - Fork 3
Sigma
The primary JavaScript library that controls the graph display is Sigma.js. It is a highly customizable tool that displays the graph from JSON data provided by the Sigma JSON Writer. All of the code for implementing Sigma is found in the file js/sigma_script.js and is thoroughly documented according to JSDoc standards. The functions are organized under unique headers by their purpose and are explained below by their corresponding header in the file:
These are functions that are added directly to Sigma's graph class so they can take advantage of private data structures such as the neighbor indices. These must be done before the Sigma instance is declared so that it may access these methods.
This is simply the declaration area for global variables. Some are instantiated with values while others are declared later. They all serve specific functions in the code and should be carefully examined throughout the code before changing. One example being the cache_fetch_size. Changing this will not actually modify the size of the cache fetch because it is uniquely declared in the C++ file and must be modified there as well. If the two are not equal, the automatic cache reloading will not behave properly.
These functions are mostly related to user interaction and setting variables for the page. They still must communicate with Sigma which is why they are contained in this file.
A significant and useful function in this section is pageLoad() which is called once after all DOM elements have been generated by the C++ back-end. This is used to set references for global variables to DOM elements and set input listeners for most interactive objects. If new features are to be added in the future, it is best to add them in C++ then declare their references in this function.
These functions pertain to storing simulated data in the cache, accessing that data, updating the graph on screen to reflect this data, and managing user navigation through the character stream. The two major functions in this section are stepFromCache(step_size) and updateGraph(updateJson):
-
stepFromCache(step_size)takes a relative cycle step size and updates the highlighted character index and the global 'simIndex' variable that specifies which cycle the simulation is showing. It returns a Promise object so that JavaScript must wait until it completes its process (including updating the graph) before it will try to go again. It also determines whether the simulation should continue playing or not and if the cache should attempt to reload. -
updateGraph(updateJson)takes in a JSON graph object from the cache and updates its graph with the data. To minimize time and space requirements, the cache JSON data only contains information on STEs that show activity in that particular cycle. The nodes and edges that are changed are stored in 'changedGraph' and when another cycle is loaded, only the nodes and edges in 'changedGraph' are reverted to their original color.
These are the functions for changing the graph look via the Graph Settings tab. They respond to slider changes and resetting the camera when triggered.
This section includes the functions that handle events in Editor Mode. The most significant function in this section is toggleEditorMode(). When the user toggles into Editor Mode, the biggest change is that the renderer switches from WebGL to Canvas. The WebGL renderer is faster and is better for handling large scale graphs like when simulating, but does not provide the same interactivity as Canvas that is necessary for Editor Mode.
Additionally, autoscaling is switched off when entering Editor Mode because it makes it more difficult to move nodes around. To counter the effect this would have on graph appearance during the switch, the same mechanics used to autoscale normally are applied to the graph in the new renderer so the transition is seamless, and is reversed when exiting Editor Mode. Also, the camera reset method in Editor Mode applies the same autoscale mechanics so it serves the same function in both modes.
All plugins used in Editor Mode are activated when toggling in and killed when exiting. When exiting, if the automata was not changed (no new STEs/connections or deleted ones), the character stream clickability region is reloaded from the same cache and the current cycle is applied to the graph. Otherwise, the simulation is reset.
These functions handle the activity of the context menus (right-clicking) for the stage.
Linkurious.js is a further developed version of Sigma that includes many new plugins and speed increasing features. However, when the timing was tested using Random Forest as a benchmark, switching fully to Linkurious (core included) actually slowed down render times versus solely using Sigma. So by mixing the two and modifying some code in the core of either to work together, the greatest speed results were able to be achieved. This did, however, make some things more confusing when adding features.
To see which packages are imported from which libraries, one must look at the script imports in the VASimVis.cc file.