Interactive Road Network
The Road Network shows in the visualization shows, whether call-relationships between involved source code objects exist (e.g. through method calls of the classes). This makes aspects of the coupling of the system visible at a glance. Note: As roads can converge and, furthermore, are inherently bidirectional, individual call relationships (and their directions) cannot be clearly identified with the static road network alone.
To trace specific call relationships in detail, respective districts can be selected by click. This triggers the creation of lanes on the streets, which display all the connected districts which are connected to the selected district unambiguous.
How lanes are to be interpreted:
- The right-hand lane (green) shows all isCalled relationships, i.e. the source code objects that the selected object actively calls.
- The left lane (magenta) shows the path to all source code objects that call the selected source code object, i.e. the isCalled relationship.
- If there are both left and right lanes to a source code object, this indicates a bidirectional relationship.
The Road Network is created in the "Generator" system part and is therefore a static part of the metaphor. The road network is represented in the following places in the source code:
-
Switching the generation of the network on and off: generator/properties/master/Features.properties (roads = true/false)
-
Logic for creating the network graph: generator/src/main/java/org/visap/generator/metaphors/metropolis/layouts/road/network
-
Export of the network for transfer to the presentation layer (UI) in DTO: roads.json generator/src/main/java/org/visap/generator/export/features/roads
The highlight feature for displaying road lanes for specific call relationships is located in the UI system section, as it is interactive. The UI receives the DTO roads.json from the Generator system part. This DTO is processed as follows:
- A dedicated model structures the DTO into an optimized format for further operations (ui/scripts/RoadModel.js)
- A controller for the road network triggers logic by interaction (ui/scripts/RoadHighlight/RoadHighlightController.js)
- A helper is called by the controller, which encapsulates the entire business and display logic for the road lanes (ui/scripts/RoadHighlight/ParallelColorStripesHelper.js)
The road highlight controller is enabled in the roads setup under ui/setups/road.js and works with the example model under ui/model/example. It also works in the master setup (ui/setups/master).