# Visual analyser

## Introduction

Fluxtion provides a graph visualiser as part of its tool suite. The goal of the visualiser is to allow non-developers to understand the processing logic in the generated SEP. The visualiser provides the following functionality:

* load a graphml generated by Fluxtion esc for rendering
* Clearly identify, events, nodes and event handlers
* Inidicate stereotype, class type and instance name
* Indicate event event propagation direction and dependencies
* Search for nodes by name
* Zoom in/out
* Drag and drop loading
* Click node showing execution path memberships
* Double click node shows direct parents and children
* Export current view to png
* Load history for quick graphml loading
* Designed for plugin extension

## Executing visualiser

The visualiser is distributed as an [executable jar](https://github.com/v12technology/fluxtion-visualiser/blob/master/dist/fluxtion-visualiser.jar) located in its dist directory and can be run by double clicking on the jar or with java -jar from the command line.

### Loading graphml

To load a graphml navigate to the generated graphml file and drop onto the main window of the application, see [video clip on youtube](https://www.youtube.com/watch?v=rZrooItHlUM).

![freshly loaded graphml](https://28048783-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LTCQdxBe4qllLPVvIbZ%2F-LURIyqphq7Iz4FJVvVO%2F-LURICBsS4KsaNI8nAIV%2Fviauliser_2.png?alt=media\&token=0e05c787-bfb0-48c4-a7c5-6b7f18a46c87)

### Filtering

Graphs can become complex and difficult to read, visualiser allows filtering based on connected nodes or via string match.

* For connected node filtering click a node this will blur any non-connected nodes
* Type in text box, selects any node that matches text and removes any disconnected nodes for the selection.

#### Highlight execution paths

![execution graph for selected nodes](https://28048783-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LTCQdxBe4qllLPVvIbZ%2F-LURIyqphq7Iz4FJVvVO%2F-LURIvNnbCalwVZEValK%2Fblurred_nodes.png?alt=media\&token=ede37dec-6e98-40af-90d6-49b788713805)

#### Filter disconnected nodes

To remove disconnected nodes, keyboard shortcut 'f' (filter) or menu: graph/show only filtered.

![](https://28048783-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LTCQdxBe4qllLPVvIbZ%2F-LURJKK7nOXxHck8xWER%2F-LURJjlOefUyBtpM1KwW%2Ffiltered_only.png?alt=media\&token=f5dc57d3-7565-4a50-9d5e-9c22a8b76e80)

### Reload/remove filter

To reload the graphml file use keyboard shortcut 'r' (reload) or menu: Graph/reload from file

### Zooming

The active image can be zoomed in out with the toolbar items or keyboard shortcut 'i' (zoom in) 'o' (zoom out)

#### zoom in - shortcut key 'i'

![Zoomed in view](https://28048783-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LTCQdxBe4qllLPVvIbZ%2F-LURJtGfrsZwn9mgmioB%2F-LURKvzOwLvN44CPDVbk%2Fzoom_in.png?alt=media\&token=3fa25c12-412d-4548-a67a-c2f9af36b107)

#### zoom in - shortcut key 'o'

![Zoom out view for complex graph](https://28048783-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LTCQdxBe4qllLPVvIbZ%2F-LURLJbwWwcrE7ij34Gq%2F-LURLO2tMRUNyo9yxIAO%2Fzoom_out.png?alt=media\&token=caa7128d-5d52-4312-a16c-ed16fccd3ada)

### Keyboard shortcuts

Visualiser supports the following keyboard shortcuts:

| shortcut | description                                   |
| -------- | --------------------------------------------- |
| i        | zoom in                                       |
| o        | zoom out                                      |
| r        | reload from graphml file                      |
| f        | filter view based on currently selected nodes |

### Mouse actions

Visualiser supports the following mouse actions on nodes

| shortcut     | description                                        |
| ------------ | -------------------------------------------------- |
| mouse click  | select connected nodes                             |
| shift click  | add to connected nodes                             |
| double click | show only directly connected parent or child nodes |