__GraphExplorer__: online demo
https://bluejoe2008.github.io/InteractiveGraph/dist/examples/example2.html
__RelFinder__: online demo https://bluejoe2008.github.io/InteractiveGraph/dist/examples/example3.html
## 
More dependencies, see https://github.com/bluejoe2008/InteractiveGraph/blob/master/package.json.
## MainFrame, applications
InteractiveGraph provides a MainFrame, which actually is a facade of Web UI, event handling and graph data connection.
### controls
As shown above, MainFrame consists of a main graph rendering canvas, a set of navigation buttons, and serveral controls: search bar, tool bar, info box, highlight control and so on.
Some controls have Web UI, such as InfoBoxCtrl, MessageBoxCtrl, etc. While others work with no UI, such as HighlightNodeCtrl, ExpansionCtrl, etc. A `Control` class and two derived classes `UIControl`(controls with UI) and `BGControl`(backgroud control with no UI) are defined in InteractiveGraph.
All controls are listed in the table below.
| control | function | type |
|-|-|-|
|ConnectCtrl|show a load data dialog|UIControl|
|ExpansionCtrl|expands a graph node on double click|BGControl|
|HighlightNodeCtrl|highlight selected graph nodes|BGControl|
|InfoBoxCtrl|show a infomation box on click on a graph node|UIControl|
|MessageBoxCtrl|show a message box on demand|UIControl|
|RelFinderCtrl|finding relations between graph nodes|BGControl|
|RelFinderDialogCtrl|show a dialog for user to launch a finding task|UIControl|
|SearchBarCtrl|show a search bar for keyword input|UIControl|
|ToolbarCtrl|show a tool bar|UIControl|
### theme
### event handling
MainFrame and controls communicate with applications through events. For example, when the window is resizing, MainFrame and all controls will receive FRAME_RESIZE events.
To subscribe a event, call a `on(event, handler)` method on MainFrame or a Control. To cancel the subscription, use `off(event, handler)` instead.
To fire an event to MainFrame, use `MainFrame.emit(event, args)` or `MainFrame.fire(event, args)` method. Unlike the `emit()` method, `fire()` put default context objects including `mainFrame`, `htmlMainFrame`, `theme` into `args` before emition. To fire an event to a `Control`, use `emit(event, args)` method.
### data connector
MainFrame loads data via a `Connector` which may connect to a `LocalGraph` or a `RemoteGraph`. A `LocalGraph` loads all data once from a GSON object or file, while a `RemoteGraph` interacts with a remote graph server each time if no cache data is available.
## GSON
MainFrame loads data from a `LocalGraph` in `GSON` format. `GSON` is actually an enhanced `JSON` format for graph data. The enhancement is `GSON` recoginzes `function`s, which is not valid in JSON.
`GSON` consists of some data items, it is defined as follow:
```typescript
export interface GSON {
"data": {
nodes: object[];
edges?: object[];
}
"dbinfo"?: object;
"categories"?: object;
"translator"?: {
"nodes"?: (node: object) => void;
"edges"?: (node: object) => void;
};
}
```
Here, `translator` defines translator functions for graph nodes and edges, which will be invoked on loading. An example is shown below, in which `description` of each node is evaluated on loading time.
```javascript
"translator": {
"nodes": function (node) {
//set description
if (node.description === undefined) {
var description = "";
description += "
";
description += "" + node.label + "" + "[" + node.id + "]";
description += "
## Applications
### GraphNavigator
### GraphExplorer
### RelFinder
## Contributing to InteractiveGraph
It would be highly appreciated if you commit any codes or documents to InteractiveGraph. If you have any good idea, please fork this project and create pull requests.
* To contribute new applications, you may define new application class derived from `BaseApp`.
* To contribute any controls, you may define new control class derived from `UIControl` and `BGControl`.
* To contribute new themes.
* To contribute new tool button, you may define new ButtonInfos. Note that `Font Awesome` icons are available in button icon!
* To contribute new data sets or modification, you may submit data in GSON format!
## LICENSE
InteractiveGraph is licensed under the BSD 2-Clause "Simplified" License.
However, it is appreciated if you let we know how you use InteractiveGraph in your projects!!! Please fill the use case table (https://github.com/bluejoe2008/InteractiveGraph/wiki/use-case-collection) with your name (github username), organization, and project.