Development of a visual studio plugin to visualize a Blocks-Graph

1. Development of a visual studio plugin to visualize a Blocks-Graph Students: Alex Tarasiuk , Alex Gorodetsky Supervisors: Adam Levi

2. Definitions Block - Logical part of an application structure. A block can contain services, configurations, event kits, and end-points. Each Block can interact with another blocks through services by consuming/publishing them.  Blocks Graph - A data structure (extracted by Helper library) that contains a collection of blocks metadata. Helper library – A tool developed by Microsoft that can extract Block metadata from internal libraries. DGML - An XML-based file format for directed graphs.

3. Goals Build a plug-in for Visual Studio 2012 that utilizes the blocks metadata to visualize the graph in a developer friendly manner. • Getting acquainted with Helper Library, Visual Studio SDK, DGML Interface (GraphModel API). • Defining Block Graph structure. • Design and implement a GUI. • UsingGraphModelto visualize the Blocks as a directed graph. • Integrating the functionality to Visual Studio 2012 (using Visual Studio SDK).

4. Work Flow • GUI • DGMLGraph Blocks Graph Visualized • Create Data Structure representing the Blocks Graph DGML DGML

5. Used Technologies • C# • XML(VSCT, XAML,DGML) • Visual Studio 2012 SDK • Visual Studio GraphModel API

6. Methodology • Extending the Visual Studio IDE • In order to extend the IDE (integrated development environment), we use the Visual Studio SDK tools that helps you develop your own applications that extend the IDE and integrate seamlessly with it.

7. Methodology • The concept of software application is absent. Instead, the IDE hosts software components, called VSPackages, that provide application functionality. • This functionality, in turn, is shared across the IDE as services. VSPackages offer services that they and other VSPackages use.

8. Methodology • Therefore we, • Define our Toolbar • Adding Commands, to the toolbar, with suitable handlers to our Service(Package) • Define our Package • Connect our Toolbar to it

9. Methodology • Our package extends the Shell.Package class. • The commands are defined in a VSCT file,  XML-based file format that defines the actual layout and type of the commands. • Then we link them to our service with suitable handlers. • The result:

10. Methodology • The GUI, presented above, analyzes the users choice and acts accordingly. • Each graph that is created/loaded has a List of loaded internal libraries. • Only one graph can be presented at a time. • Keep the toolbar concurrent with the presented graph. • Protect the user from harmful behavior.

11. Methodology • Blocks-MetaData (BMD) BMD contains the following information (some of the data is not obligated) : block type, block consumed services, block published services, blocks source location, configuration (a set of used variables) and more.. • DGMLGraph Responsible for converting assemblies metadata into a graph and modify it. • An assembly loaded into DGMLGraph instance will be analyzed by the helper library in order to extract BMD for each block in the assembly. This information will be used to create a dependency graph from the blocks were each node is a block (including it’s properties) and each directed edge will represent a dependency between two blocks.

12. Methodology • DGMLGraph (cont.) • Block A depends on Block B if Blocks A consumes a service which Block B publishes. • Building the graph: When a new assembly is loaded into DGMLGraphinstance, we create a node for each block. Also we will keep 2 extra lists of blocks. One is for nodes with consumed service (Consumed List), and the other is for nodes with published services (Published List).

13. Methodology • DGMLGraph (cont.) • Building the graph (cont.): In order to add the edges between the nodes, we do the following: • For each node in Consumed List • Find a block in Published List, which publishes the requested service. • If a match was found, add an edge. Otherwise do nothing. By doing so, we make sure that if a block with consumed service was loaded and there is a block (which was loaded into the graph at some point) which publishes the required service, there will be an edge between them.

14. Methodology • DGMLGraph (cont.) • Graph Model API (in VS2012) We chose to use Graph Model since it already integrated into Visual Studio and it creates and manages all the elements we need in dgml. • Deployment Scenario • Easy plug-in installation into VS 2012 using the VSIX, VS Extension Deployment.

15. Demo Time!

16. Completed Goals • Data Structure design • Generation of a graph using DGML • GUI and graph integration into VS 2012 framework • Graph modification by user • Hide/unhide blocks, view blocks content, change graph layout, load/unload assemblies, save/load/export view • Graph Save/Load ability • A Plug-In with easy deployment scenario • Documentation

17. Conclusion From the beginning we tried to use Graph-Sharp to create the graph, we found it unintuitive and we ran into a lot of issues integrating it into Visual Studio. Our conclusion from this experience is that we should do a wider research. We must make sure we understand the goals properly, since only in the midway meeting we learned some crucial information about the project. Visual Studio SDK is very complex, and the documentation lacks in code examples. We have found that dividing the requirements into several parts, makes the work more efficient and gives the possibility to work simultaneously.

18. Questions?