Still looking for a sponsor Max Paulousky is looking for a Silverlight/.Net job in the Commonwealth

Share to Facebook Tweet this! Share to MySpace Share to Google Share to Live   Share via AddThis

Visual Studio Solution Pivot Viewer. Add-on for VS2010 to Visualize Code Structure

My previous add-on for Visual Studio (Xaps Minifier) is extremely popular. Many developers and several MVPs use it in their projects already. I am going to extend its functionality to simplify developers’ life. I should say, in general, I like the way of developing extensions for Visual Studio 2010 and I am going to continue working at this area.

Several weeks ago, Sergey Zwezdin announced a brainstorming to generate a bunch of ideas for Add-ons for Visual Studio 2010. I described Xaps Minifier and proposed one more idea. The idea was to use Pivot Viewer Silverlight control to visualize source code and some aspects of it.

Abstracts

Pivot Viewer control is used for visualizing big chunk of data and allows filtering and sorting by many criteria. Source code can be used as data that should be analyzed by a developer/team lead etc  to find out bottlenecks. When I say ‘bottlenecks’, I mean classes, files, methods that should be refactored. For example, It is very difficult to maintain large classes or methods. They  should be divided into several pieces or minimized by excluding duplicated code etc.

My add-on should analyze source code, prepare data for PivotViewer and display PivotViewer control and data in it.

High-Level Architecture

High-level architecture of VS Solution PivotViewer

There are several limitations in using Silverlight PivotViewer control.

  • I have to use Silverlight version of control for the add-on because there is no WPF version. As I know, WPF does not include MultiScaleImage (Deep Zoom) feature, so WPF PivotViewer control cannot be built right now.
  • The next issue is I have to use a web server to host silverlight application because Silverlight PivotViewer control does not support local collections.

I am going to describe all the steps of the algorithm.

  1. Process source code. I should traverse all projects, classes and, probably, methods to get all the information about the application’s source code. That information will be used to build PivotViewer image.
  2. I should deploy web server infrastructure. That means, create folders for a web server, for data of source code processing and extract the web server to appropriate folder.
  3. I should serialize and store data of source code processing. That data will be loaded by a silverlight application to be transformed into collections for the PivotViewer control.
  4. I should start a web server to be able to load the Silverlight application. I am going to use Cassini (web server that is used for development and debugging web applications in Visual Studio). it is light-weight and served with Visual Studio.
  5. I open the Silverlight application in the Web Browser tab in Visual Studio.
  6. The PivotViewer control starts loading data and transforming them into internal collections.

Implementation Notes

Process source code. I use the same techniques to process code as I use in the Xaps Minifier add-on. I traverse all projects within a solution, all files within a project, all elements (classes/interfaces/structures) within a file. Now I build only one set of data that describes such code elements. I extract following information:

  • Is a class abstract;
  • Number of parts of partial classes/interfaces/structures;
  • Number of code lines of a class;
  • Members count (methods, properties etc.) that an element contains;
  • Name of element;
  • Full name of element: namespace + name;
  • Path to the file where the element is placed;
  • Name of project where the element is placed;
  • Programming language that is used to develop an element (C#, VB, Managed C++ etc);

Deploy web server infrastructure. I plan deploying web server for each solution that I process. So, I should create folders for silverlight application and for a file with serialized data for the PivotViewer control. I create the _PivotViewer folder at the same folder where the solution file is placed. I will use it to store serialized data and to create the Server folder. I will use last one for extracting web server binaries.

I use post-build event of the WebServer project to archive all required files for web server publishing (*.dll, *.aspx etc). The archive is stored into the PackageTools project as embedded resource.

$(SolutionDir)Externals\7z.exe a -r -tzip -mx9 
  $(SolutionDir)PackageTools\Resources\WebServer.zip $(ProjectDir)* -x!obj 
  -x!properties -x!.svn -x!_svn -x!*.csproj -x!*.csproj.user 
  -x!*.publish.xml -x!*.bat -x!*.cs -x!*.designer.cs -x!*.pdb

I can extract all files from the resource to the Server folder using ICSharpCode.SharpZipLib library.

Serialize data. I use binary formatter to minimize size of data files and accelerate processing time.

Start web server. I use following command to start Cassini web server:

"C:\Program Files\Common Files\Microsoft Shared\DevServer\10.0\WebDev.WebServer40.EXE" 
  /port:8899 /path:"<path_to_solution_folder>\_PivotViewer\Server" /vpath:"/"

This command will run web server on folder <path_to_solution_folder>\_PivotViewer\Server and it will be accessible using a Url http://localhost:8899.

Open the Silverlight application. I use standard Visual Studio Environment interfaces to open Web Browser tab and navigate to the Silverlight application.

IVsWindowFrame frame;
IVsWebBrowsingService webVrowserService = this.GetService(typeof(SVsWebBrowsingService)) as IVsWebBrowsingService;
webVrowserService.Navigate("http://localhost:8899/SilverlightPivotViewerTestPage.aspx", (uint)__VSCREATEWEBBROWSER.VSCWB_FrameMdiChild, out frame);

 PivotViewer control starts loading data. I do not use Simple or Linked collections because they require multiple pre-compilation steps. So, I use just-in time collection and Pivot_JIT_Sample application to build JIT collection server. I have just implemented CollectionFactoryBase class that reads serialized data from a file and build JIT collection.

private void MakeCollectionItem(PivotClassElementsData item, Collection collection)
{
  Guard.ArgumentNotNull(item, "item");
  Guard.ArgumentNotNull(collection, "collection");
 
  collection.AddItem(item.Name, null, null,
      null
      , new Facet("Lines count", item.CodeLinesCount)
      , new Facet("Is Static Class", item.IsStatic.ToString())
      , new Facet("File path", item.Path)
      , new Facet("Parts count", item.PartsCount)
      , new Facet("Full name", item.FullName)
      , new Facet("Language", item.Language)
      , new Facet("Members count", item.MembersCount)
      , new Facet("Class Name", item.Name)
      , new Facet("Project name", item.ProjectName)
      );
 
  collection.SetFacetDisplay("File path", false, true, true);
  collection.SetFacetDisplay("Full name", false, true, true);
  collection.SetFacetFormat("Lines count", "0");
  collection.SetFacetFormat("Parts count", "0");
  collection.SetFacetFormat("Members count", "0");
}
 

I do not display several parameters in filter area (“File path”, “Full name”) but they available at the Info Panel.

Add-0n’s installation and usage

The add-on can be installed via Visual Studio Extension Manager (Main menu-Tools-Extension Manager-Online Gallery). Current version 0.9 beta.

If you want to start add-on, just open any solution in VS, do right mouse click on a solution item in the Solution explorer and choose Solution Pivot Viewer.

Run Solution Pivot Viewer

Right after that action, the add-on will start parsing source code, building data for the pivot view control, deploying the server and opening web page with the pivot control.

Solution analyzing with the Silverlight Pivot View control

You can play with this pivot control and find out information about the application and its source code.

Known Issues/Limitations

Since it is beta version, it has some limitations and open issues:

  • Has only one collection – classes;
  • Can’t detect whether Cassini is started, so raise an exception but it does not impact on the pivot viewer;
  • Use just one port for Cassini – 8899. So, please assure it is available;
  • It requires web development server (Cassini);
  • It does not have UI to display progress or select options;

Future plans

  • Add user interface (Wizard to select options);
  • Add new collection types (files, members);
  • Use PLinq/Parallel Task library to accelerate the add-on;

Acknowledgements

I would like to say thank you to Sergey Zwezdin that advised me to think about new add-ons for VS2010.

Sources and Binaries

Sources will be available once I release a stable version. Binaries can be downloaded and installed from the Visual Studio Gallery.

Share impressions!

Please, feel free to share your opinion about the add-on. It would be really helpful for me and for the community to provide your feedback and suggestions. Also, do not hesitate to ask me any question about that add-on.

Hope, it helps!

This work is licensed under a Creative Commons Attribution By license.

Leave a Comment [ RSS ]

  • re: Visual Studio Solution Pivot Viewer. Add-on for VS2010 to Visualize Code Structure

    Hi, this looks like really great work!

    Just wanted to point out if you weren't aware, you can host the silverlight plugin yourself and sidestep the whole web server issue. May be worth investigating..

    Cheers

  • re: Visual Studio Solution Pivot Viewer. Add-on for VS2010 to Visualize Code Structure

    Thanks,
    Unfortunately, I must use web server because PivotViewer control does not support local collections and these collections could be loaded via web link only

  • Visual Studio Solution Pivot Viewer. Add-on for VS2010 to Visualize Code Structure

    Requesting Gravatar... progg.ru says:

    Thank you for submitting this cool story - Trackback from progg.ru

  • re: Visual Studio Solution Pivot Viewer. Add-on for VS2010 to Visualize Code Structure

    Requesting Gravatar... geedubb says:

    An interesting idea, thanks!

  • re: Visual Studio Solution Pivot Viewer. Add-on for VS2010 to Visualize Code Structure

    Hey, Max!
    Glad to see your beautiful solution.
    I hope that you will increase functionality of your add-on.

  • re: Visual Studio Solution Pivot Viewer. Add-on for VS2010 to Visualize Code Structure

    Requesting Gravatar... Jaans says:

    Fails when there is a Database project in the solution.

  • re: Visual Studio Solution Pivot Viewer. Add-on for VS2010 to Visualize Code Structure

    Requesting Gravatar... aximus says:

    Thank you, Sergey!
    Jaans, I will check it

  • re: Visual Studio Solution Pivot Viewer. Add-on for VS2010 to Visualize Code Structure

    Thank you, Sergey!
    Jaans, I will check it

Comments have been closed on this topic.