1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

type Node =
    int (* node identifier *) *
    'TDaton (* node data *)
 
type Connection<'TDaton> =
    int (* source Id *) *
    int (* sink Id *) *
    int (* weight *) *
    'TDaton (* connection data *)
 
type Adjacency<'TDaton> =
    Connection<'TDaton> list (* a list of connections to other nodes*)
 
type Atom<'TNodeDaton, 'TConnectionDaton> =
    Node<'TNodeDaton> * Adjacency<'TConnectionDaton>
 
type Graph<'TNodeDaton, 'TConnectionDaton> =
    Atom<'TNodeDaton, 'TConnectionDaton> list

The connections are directed links between nodes and the weight tuple factor is taken out of the generic data bucket in order to make weighted graph analysis possible. One could replace the generic data attached to the connection by an interface which would require a weight property, but here again this would complicate things in code. In any case, in the documentation of the library I have added an example of how to attach polymorphic data buckets to nodes and connections.

The adjacency type is just an alias for a connection list and, finally, the graph is as advertised above just a list of nodes with their adjacency list. The Atom type is a type alias for one single graph (list) element and comes handy in the algorithms.

From these few type definitions you can spend the rest of your life doing graph analysis and implementing all the known (or unknown) graph algorithms; shortest path, Hamiltionian cycles, connected components and so on. At this point the current implementation contains the most used ones and the emphasis was also on having a quick (and easy) way to display the graph (and their properties).

Obviously, if you want to implement some graph algorithms you need all the basics like; adding nodes, removing connections, setting node data, fetching upstream and downstream nodes, testing whether a link exists and so on. In addition, you also need a way to easily create graphs or generate random graphs (with a fixed node degree for example). Since most of the graph analysis focuses on paths and structure it’s often not necessary to adorn the graph with data or weights, hence the possibility to define graphs through a more simple structure:

1
2
3
4
5
6
7
8
9
10

 
let pregraph =
        [
        (1, [2]);
        (2, [3;5]);
        (3, [4]);
        (5, [4]);
        ]
let graph = Orbifold.FGraph.ParseList pregraph
graph |> GraphVisualizer.Show

This will launch the visualizer and produce the following simple graph:

The power of F# resides in the handling of lists and avoiding loops as one would in C# tremendously helps in situations like this. One should compare the ParseList method implementation with what it would take in C#:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

///<summary>Parses a simple list made out of tuples of (int, int list). The first integer is the index and the list is the list of nodes indices to which the current node is connected.</summary>
let ParseList (list : (int* int list) list) : Graph<Object,Object>=
        let g = ref Graph.Empty
        let linkedIds: int list ref = ref []
        let containsNumber number list = List.exists (fun elem -> elem = number) list
        g.Value <- (list |> List.map (fun (idx,adjs) ->
                                let newNode : Node<Object> = (idx, null)
                                let ad = List.map (fun t->
                                                        if not (containsNumber t !linkedIds) then linkedIds.Value<- t::!linkedIds
                                                        let con : Connection<Object> = (idx,t,0,null)
                                                        con
                                                   ) adjs
                                let atom : Atom<Object,Object> = (newNode,ad)
                                atom
                          ))
        (*we auto-add the node if it appears in the connections*)
        linkedIds.Value |> List.iter (fun t ->
                                             if not (NodeExists t !g) then
                                                            let n : Node<Object> = (t,null)
                                                            let c : Adjacency<Object> = []
                                                            g.Value<-(n,c)::!g
                                      )
        g.Value

The interesting part of the library sits in the analysis module where one encounters the unavoidable traversals and where I tried to also implement useful variants like the depth-first traversal of edges:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let DFTEdgeVisit (g:Graph<_,_>) (start:int) (processEdge: int*int->unit) =
        let nextToVisit = Stack<int>()
        let discovered = HashSet<int>()
        let v = ref 0 (* current vertex *)
        ignore(nextToVisit.Push(start))
        ignore(discovered.Add(start))
        let parents = Dictionary<int,int>()
        while nextToVisit.Count > 0 do
            v.Value <- nextToVisit.Pop()
            if parents.ContainsKey(!v) then processEdge (parents.[!v],!v)
            let someDescendants = GetDescendants !v g
            match someDescendants with
            |None -> ()
            |Some(desc)-> List.iter (fun d -> if not (discovered.Contains(fst d)) then
                                                                                    ignore(parents.Add(fst d,!v))
                                                                                    ignore(discovered.Add(fst d))
                                                                                    ignore(nextToVisit.Push(fst d))) (List.rev desc)

Here again, one would use in C# Action<> parameters for the visitors but in F# things are made easy since functions and variables are on the same footing.

Some of the algorithms, like the shortest path between two nodes, are quite straightforward in C# but are really an headache when trying to convert to purely functional analogs. At this points the library does its best to honour the functional paradigm (also because often it represents immense performance gains w.r.t. the more linear non-functional versions) but sometimes the traditional algorithms are more readable and hence more accessible for developers who wish to alter the code.

Finally, I’d like to highlight the graph visualization part which resides in a separate library. When experimenting with F# and graphs in the F# interactive mode you can easily display the graph by feeding it to the GraphVisualizer.Show method:

1
2
3
4
5
6
7
8
9

let g =
        [
        (1, [2]);
        (2, [3;5]);
        (3, [4]);
        (5, [4]);
        ]
g |> GraphVisualizer.Show;;
GraphVisualizer.ShowShortestPath(1,4,g) ;;

You can also use the graph visualizer as a WPF component in your application. The control is a classic MVVM control with an ItemsSource accepting a Graph structure. Typically you’d use it as follows:

1

    <Visualizer:GraphControl x:Name="Diagram" Grid.Row="1" Tension="{Binding Value, ElementName=TensionSlider}" ItemsSource="{Binding Graph}"/>

where the tension determines the tension between the node in the spring-embedder layout algorithm. I’ll add some more layout algorithms in the next pass (tree layout variations in particular).

The WPF component also has easy access to the analysis like for example the shortes path:

1
2
3
4
5
6
7
8
9
10
11
12
13

let g2 = Graph.ParseList [
                            (1, [3;6;9]);
                            (2, [4]);
                            (3, [2;5]);
                            (5, [20]);
                            (6, [7;8]);
                            (7, [12]);
                            (9, [10;11]);
                            (12, [13]);
                            (20, [12]);
 
                        ]
this.Graph <- Graph.Analysis.ColorizeShortestPath( 1,13, g2)

where “this.Graph” is here the MVVM property of the model bound to the GraphControl. The result would be the picture below.

Some final remarks and questions regarding this project:

• all’s F#; the custom diagramming control, the library and the MVVM stuff. It would make sense to use this library in a C# context (to benefit from the F# performance) but I haven’t put any energy in this. Not sure it’s a priority since our other libraries (G2, Lynx) contain all this as well.
• this is work in progress and I spend a lot of time documenting things as well as creating sample code, I reckon things will settle by September this year.
• making this open source would be a good thing for the community but I’ll have to sleep over it. You can try to convince me.
• the WPF control is a templated control and can be customized. On the other hand, the arrow and node visual are hard coded. It could be useful to template them as well and in this fashion enable databinding of the databuckets defined above to the visuals. However, this library is not a full-fledged Visio replacement, rather it focuses on graph analysis. Does is make sense to invent a mechanism to enable more line-of-business scenario’s? I think our existing graph libraries are filling the need there. The only reason I would put energy in this is that at this moment there is no graph visualization library for F# on the market.
• What about Silverlight? Well, I don’t see a technical issue there but I am less sure about the audience doing Silverlight development in F#. Is there an audience for this?

Thanks to Tomas Petricek for some useful suggestions and the Flying Frog for insightful directions.

• The usability aspect: how meaningful is a diagram with thousands of nodes, does the user still get insights with potentially a million links between so many nodes? Here are I have to think about how useless the Visual Studio 2010 architecture visualizer is if you try to display a big assembly. See the picture below which displays a small portion of the G2 architecture; 20.000 nodes and 90.000 links…useful? I don’t think so.
• The .Net framework aspect: out of the box the .Net classes related to WPF and Silverlight (the UIElement and FrameworkElement, that is) are ‘heavy’. These base classes contain stuff related to templating, databinding, triggers, animation and whatnot. It means that even if you don’t need any of this you have to carry around in the memory of your application a large amount of material. If you scale a diagramming solution to thousands of item it shows. If one really wants to display very large amount of data in a diagram there is no other way but to find alternatives to the retained graphics pipeline of .Net and go back to the good old low-level mechanisms.
• The granularity aspect: much like the usability aspect, is it meaningful to have a lot of animations and gimmicks when displaying large datasets?  I suppose if you wish to display large diagrams you are not interested in details and interactivity, or do you? Well, some customer do and want to have both a high-level overview and the ability to zoom down to a finer level of details. This is difficult to achieve with the current technology and average hardware. Being able to display a million nodes with databound entities and remain fluid is tough, the only solution being to switch in the zooming process from one algorithm to another. Much to say about this but it’s not the topic of this post.

In the end there are three solutions to these problems:

• Drop Silverlight/WPF as the technology in which you try to visualize something and move to C/C++ but in this way sacrificing a lot of magic  these frameworks offer. While sometimes a viable solution for the customer, usually not a solution I like to push too much for obvious reasons.
• Compromise between scalability and functionality by emphasizing the usability aspect; decision makers want clear diagrams and yet another cluttered interface is the last thing a company wants to pay for.
• Come up with an ingenious or new way of visualizing data. Often the type of data and the business context dictates here what ‘ingenious’ means, each type of data has its own peculiarities. So, finding a generic solution in this line is usually not easy.

While I describe all this in the context of diagramming, the remarks are valid for any data visualization solution. In the end, what matters the most to a customer is having a solution whether it’s a diagram or a different type of visualization often doesn’t matter.

Live Pivot falls into the last category and is a new data visualization approach which handles the issues mentioned above quite well even if the amount of data it handles is still moderate. No links or diagramming here but a way to traverse a multi-dimensional dataset by filtering out data through various widgets and pivot-like datagrams which are well-known from Microsoft Excel. The name ‘Live’ Pivot is hence aptly chosen as it displays pivot charts dynamically in function of the user’s criteria. I highly advice you to take a look and play with it, it’s a free Silverlight framework and I’m sure we’ll see interesting applications of it in the near future.

Now, the reason of this post is that although I was enjoying Live Pivot in the beginning I got more and more frustrated by the limitations imposed as time passed by:

• The datapool on which the visualization is based is a variation of XML called CXML. Though Microsoft created various tools to support the creation of CXML it remains a bit an awkward format if you want to work with data coming from WCF or use the visualization with your legacy data entities. Even if possible theoretically to convert your entities in memory using the supplied assemblies, it remains a bit of show-stopper when developing for Pivot.
• The visuals in Live Pivot are based on the SeaDragon technology which even for small amounts of entities will force you to have huge amounts of server space because for every image you need, say, a hundred copies of it in various resolutions. This is related to the Morton layout algorithm used internally to refine images as the user zooms on different levels of the dataset under consideration.
• Updating or serving collections from a database is possible but in practice no-one is doing this because it involves undocumented wizardry (see for example the cryptic explanation on the Pivot site). I’m sure things will become easier in the future though.
• The whole design and development process of Pivot collections is off the main development route, the framework doesn’t integrate well into a traditional N-tier application. In a way, creating a Pivot collection is more like the design of a Photoshop template for a website: you do it once and then try to not change it in fear of the consequences it has on the rest of the site.
• Live Pivot is freely available and well developed but if you wish to customize things for a customer…well, you can’t since the source is not yours.

Summary: Live Pivot is hardly a solution for the typical customer I meet. This said, I started to develop my own version of a Pivot-ish solution which would enable one to:

• Use WCF as a backend to serve collections and to handle large amounts of data (not limited by the client’s memory). One of our customer talks about terrabytes of records, how would one handle this in Live Pivot?
• Use standard POCO entities as data buckets. This goes hand in hand with the WCF requirement, of course.
• Use any XAML in the UI instead of only pictures. Let’s imagine you want buttons, tooltips, …in the display rather than just Morton-related images?
• Adapt the partitioning and visualization in function of customer needs.
• Have an iterative filtering of data outside the memory boundary. That is, use the whole SQL database backend as a datapool rather than just the entities in memory.
• Make use of all the fluid animation features of Silverlight
• Possibly combine diagramming and Pivot-ish visualization together.
• Run away from the horrible SeaDragon mechanics involving hundreds of little images
• The possibility to transpose the solution to WPF and have shared code WPF/Silverlight solutions

This Silverlight library is called ‘Twirl‘ and contains (as good as) all the features above. The things which still need to be worked on are the WCF integration and the dynamic querying of the backend.

While developing Twirl I discovered that a whole lot of features are really available out of the box in Silverlight (together with the SL toolkit, Expression Blend etc.) which made the development easy, in particular:

• The new fluid animation features of SL4 and Blend
• The ability to databind lists to any path, not just ItemsControl and ListBox
• The filtering and sorting of data through ICollectionView and  related classes
• The MVVM pattern with good support in Blend
• Easing functions, animations etc.

The biggest challenge was really how to partition data in several columns? That is; how do you organize an arbitrary set of data on the basis of a certain datatype into a limited amount of partitions? Here I had to go deep into unknown territories like data mining, clustering algorithms (k-means in particular), text analysis and more. At some point I developed an F# clustering library but had difficulties to map the F# vector type into C# types…and gave the interop effort up (it was a good learning exercise though). After much research and a lot of trials and errors I just developed my own view on the problem and a home-made algorithm came out of this. Currently the partitioning is quite good but more datasets and types of data need to be used in order to refine the algorithm.

Below are some screenshots of Twirl in various situations.

Twirl offers, much like Live Pivot but beyond it as well, the following opportunities:

• visualization of large datasets stored on SQL Server
• exploration of local drives through the out-of-browser or COM capability of Silverlight
• traversals of datasets which share a common set of properties
• interactive shopping carts and filtering of items
• cataloguing of ebooks or e-documents in general. Here we are looking into the integration with Windows indexing service and alike
• customization of the partitioning and the display
• integration with other visualization techniques (diagramming, charting and whatnot)

This Twirl development was inspired by a bigger customer project which also embraces Microsoft StreamInsight and correlation research of very large datasets. While the development of Twirl was mainly in function of our customers I realize it might benefit a lot from the input from others. Whether this means I need to put the code on CodePlex, I don’t know yet. Anyway, if you have interest in Twirl or want to share your thoughts, contact us.

As V2.0 of G2 is solidifying, we are much investing in the creation of diverse samples and (intelligent, ie. non-compiled API)  documentation. See also these articles in this context:

• G2: some terminology
• G2: styling and templating
• G2: how to use the layout algorithms
• G2: getting started

PS: sorry for the self-indulgent tone, but one should now and then feel satisfied about years of work

In the past week I had a look at Expression Blend 3 and was impressed with the amount of new features both for WPF and Silverlight. The application is a delight! I’m not so sure that Sketchflow (see screenshot on the left in case you have no idea what it’s all about) will replace paper and pencil but it does offer a new approach which might suit some workflows in companies. In any case, I was seduced by the diagrammatic representation of the screen-flow which allows you to visualize/change and beautify (screen transitions etc.) the flow of the various WPF/Silverlight forms you hook up together. Obviously it came to my mind to mimic it in G2 and…presto, I had it done in the course of an evening. The most difficult part in the process was actually not the diagramming bit but the definition of the shifting tray which shows up when one hovers over the nodes. The situation is very common and with customers we always have this kind of discussion: the gizmo’s and bells should be shown at all time or is usability increased by popups, sliding panels and expanding trays? Expression Blend is in this context different from other Microsoft application where usually the buttons and gears are fixed (cfr. class designer, SQL designer, DSL designers etc.). Well, this is not a bad things since Expression is aimed at designers and people who are looking for cool effects. In fact, WPF and Silverlight offer much effcts and sparkles which are hardly used in line of business applications nowadays. Personally, I continue to be amazed how much one can achieve with WPF (and G2) without much programming and this little sketchflow proof of concept on the basis of G2 was huge fun.

Below is a short sequence demonstrating the sample. Sorry for not delivering the sample code, G2 is a commercial component (see however the control template below for an idea of what it involves). If you buy G2 the sample comes with the box together with many other (and ever growing set of) samples.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

<style TargetType="{x:Type Sketchflow:SketchFlowShape}">
  <setter Property="MinWidth" Value="130"/>
  <setter Property="MinHeight" Value="25"/>
  <setter Property="Background" Value="Blue"/>
  <setter Property="Foreground" Value="White"/>
  <setter Property="SnapsToDevicePixels" Value="True"/>
 
  <setter Property="Template">
    </setter><setter .Value>
      <controltemplate TargetType="{x:Type Sketchflow:SketchFlowShape}">
        </controltemplate><controltemplate .Resources>
          <storyboard x:Key="SBExpand">
            <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="tray" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
              <splinedoublekeyframe KeyTime="00:00:00" Value="0"/>
              <splinedoublekeyframe KeyTime="00:00:01" Value="20"/>
            </doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="tray" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
              <splinedoublekeyframe KeyTime="00:00:00" Value="0" KeySpline="0,0,0.625,1"/>
              <splinedoublekeyframe KeyTime="00:00:01" Value="20" KeySpline="0.11,0.99,1,1"/>
            </doubleanimationusingkeyframes>
 
          </storyboard>
          <storyboard x:Key="SBCollapse">
            <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="tray" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
              <splinedoublekeyframe KeyTime="00:00:00" Value="1"/>
              <splinedoublekeyframe KeyTime="00:00:01" Value="20"/>
            </doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="tray" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
              <splinedoublekeyframe KeyTime="00:00:00" Value="20"/>
              <splinedoublekeyframe KeyTime="00:00:01" Value="0" KeySpline="0.08,1,1,1"/>
            </doubleanimationusingkeyframes>
 
          </storyboard>
          <objectdataprovider x:Key="Tags" ObjectType="{x:Type Sketchflow:Stuff}" MethodName="get_VisualTags"/>
          <style x:Key="TagButton" TargetType="{x:Type Button}">
            <setter Property="Background" Value="Transparent"/>
            <setter Property="Button.Command" Value="{x:Static Sketchflow:Window1.ChangeBackgroundCommand}"/>
            <setter Property="Button.CommandParameter" Value="{Binding}"/>
            <setter Property="Button.Cursor" Value="Hand"/>
            <setter Property="Template">
              </setter><setter .Value>
                <controltemplate TargetType="{x:Type Button}">
                  <stackpanel x:Name="line" Orientation="Horizontal" Background="{TemplateBinding Background}">
                    <rectangle Width="5" Height="5" Fill="{Binding Color}" VerticalAlignment="Center" Margin="5,3,0,0"/>
                    <textblock Text="{Binding Title}" HorizontalAlignment="Stretch" Margin="7,0,0,0" VerticalAlignment="Stretch" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                  </stackpanel>
                  </controltemplate><controltemplate .Triggers>
                    <trigger Property="IsMouseOver" Value="True">
                      <setter Property="Background" Value="Silver"/>
                    </trigger>
                  </controltemplate>
                </setter></style></controltemplate>
              </setter>
 
            <setter Property="FontSize" Value="10"/>
            <setter Property="Foreground" Value="White"/>
          </style>
          <datatemplate x:Key="TagTemplate">
            <button Margin="-2,0,0,0" Style="{DynamicResource TagButton}" Width="79.5" Content="{Binding }"/>
          </datatemplate>
 
        <grid x:Name="PART_maingrid" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
          <border x:Name="tray" Margin="8,0,0,1.046" VerticalAlignment="Bottom" Height="20" BorderBrush="{TemplateBinding Background}" BorderThickness="1" CornerRadius="0,0,5,5" Background="#FF333333" RenderTransformOrigin="0.5,0" Width="83.737" HorizontalAlignment="Left">
            </border><border .RenderTransform>
              <transformgroup>
                <scaletransform ScaleX="1" ScaleY="1"/>
                <skewtransform />
                <rotatetransform />
                <translatetransform />
              </transformgroup>
            </border>
            </grid><grid>
              </grid><grid .RowDefinitions>
                <rowdefinition Height="Auto"/>
              </grid>
              <grid .ColumnDefinitions>
                <columndefinition />
                <columndefinition Width="Auto" MinWidth="17.053"/>
              </grid>
              <stackpanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,3,0,0">
                <popup x:Name="TagPop" AllowsTransparency="True"   PopupAnimation="Slide"       HorizontalOffset="0"  VerticalOffset="-112">
                  <border Background="#FF333333" CornerRadius="3" HorizontalAlignment="Left" Width="84" Height="111">
                    <listbox x:Name="TagList" ItemsSource="{Binding Source={StaticResource Tags}}"  SelectedIndex="-1" ItemTemplate="{DynamicResource TagTemplate}" Background="{x:Null}" />
                  </border>
                </popup>
                <!--<image Source="Images/ConnectExistingScreen.png" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>-->
                <button Style="{StaticResource ConnectNewScreen}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <image Source="Images/ConnectNewScreen.png" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <image Source="Images/InsertComponentScreen.png" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>
              </stackpanel>
              <!--<image Source="Images/ChangeVisualTag.png" Width="Auto" Height="12" Grid.Column="1" Margin="0.872,3,5,0" HorizontalAlignment="Stretch"/>-->
              <button Style="{StaticResource ChangeVisualTag}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Width="Auto" Height="12" Grid.Column="1" Margin="0.872,3,5,0" HorizontalAlignment="Stretch"/>
 
 
 
          <rectangle x:Name="PART_rec" RadiusX="2" RadiusY="2" Stroke="{x:Null}"  StrokeThickness="2" Width="{TemplateBinding Width}" Fill="{TemplateBinding Background}"/>
 
          <textblock Text="{TemplateBinding ContentControl.Content}"  HorizontalAlignment="Center"
                         VerticalAlignment="Center" Foreground="White" FontWeight="Bold" />
          <!-- PART_DragThumb -->
          <core :TranslationThumb x:Name="PART_DragThumb" Cursor="SizeAll"/>
          <!-- PART_ConnectorDecorator -->
          <core :ConnectorDecorator x:Name="PART_ConnectorDecorator"
                       Visibility="Hidden"
                       Template="{StaticResource ConnectorDecoratorTemplate}"/>
          <rectangle x:Name="Arrow" Visibility="{TemplateBinding ShowArrow, Converter={StaticResource BoolToVisibilityConverter} }"  Stroke="{x:Null}" HorizontalAlignment="Left" Width="21" Height="21" Fill="{DynamicResource LitlArrow}" Margin="-7,0,0,14"/>
 
 
        <controltemplate .Triggers>
          <datatrigger Value="True" Binding="{Binding RelativeSource={RelativeSource Self},Path=IsSelected}">
            <setter TargetName="PART_rec" Property="Stroke" Value="#83EEEEEE"/>
            <setter Property="BitmapEffect" TargetName="PART_rec">
              </setter><setter .Value>
                <outerglowbitmapeffect GlowColor="White" GlowSize="7" Noise="0" Opacity=".41" />
              </setter>
 
          </datatrigger>
          <trigger Property="IsMouseOver" Value="true">
            <!--<setter TargetName="PART_ConnectorDecorator" Property="Visibility" Value="Visible"/>-->
            <setter TargetName="PART_rec" Property="Stroke" Value="#83EEEEEE"/>
            </trigger><trigger .ExitActions>
              <beginstoryboard Storyboard="{StaticResource SBCollapse}"/>
            </trigger>
            <trigger .EnterActions>
              <beginstoryboard Storyboard="{StaticResource SBExpand}"/>
            </trigger>
 
          <datatrigger Value="True" Binding="{Binding RelativeSource={RelativeSource Self},Path=IsDragConnectionOver}">
            <setter TargetName="PART_ConnectorDecorator" Property="Visibility" Value="Visible"/>
          </datatrigger>
        </controltemplate>

We’ve been busy. The screenshots reveal quite a bit the upcoming features but let me be explicit:

• Groups: shapes can be embedded in groups ad infinitum (this is an undoable action and copy/cut/paste works with groups as well, of course)
• Flowcharting: better support for standard flowcharting
• Arrows and connections: better support for databinding your stuff (i.e. data backend) to connections and related adorners
• Rotations: rotating shapes and groups (undoable action)
• Unity 2.0: Unity merges with the ObjectBuilder2. Nothing shacking here but it will simplify the underlying data exchange pipeline of G2.
• Library support: shapes, groups, layers, pages and whole diagrams can be saved to libraries and organized in categories. This features is based on an adapter mechanism, which means you can have libraries in a database backend or accessible via WCF etc.
• Alignments: aligning shapes is now possible. In conjunction with the snap & grid features this is particularly useful to have a nice layout.
• Snap & grid: everything has become snap-able.
• Linking: better support inside shapes to (hyper)link data; either diagram elements or data entities coming from your backend.
• XML: better support for XML import/export, extending the already very solid and beautiful data exchange pipeline of v1.0
• Theming of whole diagrams: apply a style to a complete diagram (cfr. Microsoft PowerPoint)
• Auto-connect shapes: auto-add or auto-connect shapes via the adjacent arrows appearing when hovering over shapes (cfr. Microsoft Visio)
• Bug fixes and squadrillions of little changes to make G2 better, faster, more useful, more business and data oriented, more beautiful.

No date fixed yet to release v2.0 though it’s pretty stable already now. So many things are going on these days… I sincerely hope to deliver a big headline one of these days regarding our future (and G2′s future in particular). In any case, I feel immensely proud about G2′s wonderful architecture and the breadth of applications it can support, the scope of features and the many high-tech subtleties which you will not find in any other diagramming package. It leaves the competition beyond the diagramming horizon.

Six degrees of freedom is everywhere around us; it’s how your brain is wired, it’s the law ruling the internet growth, it describes the strucutre of movies and movie stars relationships, it tells how you are connected to your friends. Twitter much like any other seemingly random database (LinkedIn, IMDB, , Disease database, Facebook…) is proving the six degrees behavior. Recently someone took our Graphite control for Silverlight to visualize Twitter relationships and created Twampoline, a Twitter visualizer. It shows so-called cliques and densities, however if you have a busy network of followers you will have difficulties to see through the clusters. The layout algorithm used should be reparametrized in function of the graph scale.

Aside from this beautiful visualization idea, I have never understood the whole Twitter hype and wonder what the next superlative of all this will be?. From websites, to wiki’s, to blogs, to twitter, there has been a continuous decrease of content and informative value. The next big thing will be single words or acronyms summarizing one’s mood and thoughts? Or maybe Google’s Wave will bring  Web 3.0 to the world but I doubt it.

To all customers of Graphite, head over to the following articles which compile the tips and solutions related to the customization and integration of Graphite:

• General overview, event logic, import/export, etc.
• How to template the VisualNode of Graphite
• How to change the layout algorithm of Graphite
• Graphite: differentiating between parents and children

Remarks about and requests for particular uncovered topics, just let me know.

It’s been a while since I jotted something down on this blog…it’s been hectic for months now and the pace doesn’t seem to slow down but I think I have a few interesting things to mention.

Since the end of last year G2 has grown bigger, stronger, more popular and various big customization projects are on our workbenches. At the same time, Graphite continues to be our bestseller but most customers use it ‘as is’ without much alterations. There are however a few lines of evolution. On the one hand, Silverlight becomes more and more popular and seems to have a better market penetration than WPF. This means that also Silverlight diagramming solutions are increasingly asked for. In this context, Graphite allows an easy path to data visualization but misses the flexibility and breadth of a true diagramming framework. Equally well (and enforced by the Silverlight wave), more and more customers wish to have a dual solution; all the advantages of diagraming in WPF and the possibility to bring as much as possible on the web (Sharepoint integration, read-only viewers and so on). These evolutions and the obvious gap in our products related to this meant a necessary investment in Silverlight and a common diagramming core. Now, hold your horses and don’t expect the sky since Silverlight still remains a subset of the .Net framework and even though Silverlight v3 broadens the horizon I don’t think any day soon you’ll have a full-compatibility tale (except through XBAP, but that’s another story). In any case, here is the good-news show and some notes from the field where diagramming meets Silverlight, the Entity Framework, MySQL and WCF.

Before describing the juicy technical details let me give you an overview of the application (screenshot above) we’ve been working on recently. It’s a Silverlight application which allows one to visualize any kind of relations between different types of entities; persons, documents, sites, etc. Any kind of relation means that it allows multiple links and generic graphs but can also handle tree-like data and multiple diagram layouts. The database uses just a few tables to store the graph structure and the actual data (persons, documents, metadata) can reside in the database but could also be stored in another database, in XML files, you name it. The application also allows one to edit relations and to edit the entities; you can draw links and it will be saved in the database, you can change or add entities and so on. Finally (and this is what this blog items is mostly about) this Silverlight application can also be used as a WinForm application and accesses data through a local self-hosted WCF service. The WCF service is a RESTful ADO.Net data service which can also handle standard HTTP requests and thus acts as a local webserver. Minor features of this application is the integrated security system which can be connected to the ASP.Net membership mechanism, to ActiveDirectory services or any legacy single-sign on system you have in-house. Let me emphasize that this application boasts a full-fledged diagramming framework for Silverlight. which in many ways extends/surpasses our current Graphite product. For example, just for fun I developed in less than a day a reasonable mindmapping application for Silverlight (screenshot below).

Entity Framework

First off, I have been happily surprised by the Entity Framework (EF). I know, it’s got a long list of shortcomings and I’ve walked the whole avenue of POCO adapters, detached entity tricks, constrained Visual Studio designer and more. However, in the context of Silverlight I was pleased to experience the ease with which it worked on top of MySQL and through the ADO.Net data services (aka Astoria). Initially I wrote the whole framework for SQL Server and had later on to move to MySQL…oh miraculus! Only minor changes were necessary on the database level (no Guid’s in MySQL, no triggers e.g.) and one needs at least MySQL v5 to make it work. Note that this happy message has more its origins in the hard work which went into developing the .Net driver for MySQL rather than how open Microsoft is towards other relational database systems. In fact, I can also claim the same for other systems: EF works well with SQLite and with SQL Server Compact v3.5. There are pro’s and con’s with each and you need to tweak your model because of datatype differences, missing features (views, stored procedures etc.) but I expected a complete no-go orginally.

ADO.Net Data Services

Concerning ADO.Net data services. It works flawless with the EF, whatever the underlying database-dependent model is. In fact, if the data type signature is identical in different database systems, you only need to change one word in your code to switch from one to the other:

1
2
3
4
5
6

[System.ServiceModel.ServiceBehavior(IncludeExceptionDetailInFaults = true)]
public class CrystalMsSqlService : DataService<crystalmysqlcontext>
{
...
}
</crystalmysqlcontext>

This code is the generator of a REST WCF service on top of a EF model. The CrystalMySQLContext is the data context generated by the EF. If you wish to switch to, let’s say, SQL Server you only need to replace the data context specification and you’ll be safe for the rest of the journey.
Note, as a side note, the ServiceBehavior attribute which propagates exceptions to the surface and which is not added by default in Visual Studio. You will also want to add a try-catch in the code to convert the exceptions to a DataServiceException like this:

1
2
3
4
5
6
7
8
9
10
11
12

public static void InitializeService(IDataServiceConfiguration config)
{
    try
    {
        ..
        config.SetEntitySetAccessRule("SomeTable", EntitySetRights.All);
    }
    catch (Exception e)
    {
        throw new DataServiceException(e.Message);
    }
}

It will make debugging much easier, trust me.

Why ADO.Net data service (ADS)? You need to know that Silverlight only likes asynchronous data exchange with the outside world. Now, in order to expose data via WCF you can go via a artisanal, hand-crafted WCF service but ADS makes things easy and turns an EF into a RESTful service in a snap. In effect, it means you have all your tables and views available in Silverlight as if they were on the client. The price for this is the asynchronous behavior, which at times can be frustrating; you cannot have a data request and a data related action in the same C# method. A wisdom which I can give to you here is: don’t try to launch inner join requests from Silverlight to the REST, it doesn’t work. If you wish to do this you need to create a view in you database and make this view accessible in ADS as if it was a table. This simple fact makes SQL Server Compact immediately a bad choice because it doesn’t support views (SQL Express will do however).

WCF (ah, so much beauty!)

One of the things which kept me busy for a long time was how to demonstrate/ship a Silverlight demo without having to ship a database and without having to buy an expensive SQL Server license? Imagine you have a beautiful Silverlight application for a customer but you don’t want a whole setup involving a SQL Server database deployment (logins, connection strings etc.) and you also don’t want a complicated IIS setup wherein the Silverlight, WCF, XAP…reside. What to do? At first I tried to develop a local WCF proxy which would go to a file based data system. This meant a self-hosted WCF service, some sort of database on the client and a separate local webserver. This worked well up to the point that Silverlight kept on complaining about security issues. No mystery here: Silverlight doesn’t want to access data sources if they are not coming from the precise (includes the port number!) same origin as the xap (i.e. the Silverlight application).

Easy enough, I thought, but read on. You only need to supply the client with the clientaccesspolicy.xml or the server with the crossdomain.xml. Extend the WCF service like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

[ServiceContract]
public interface IWebServer
{
    [OperationContract, WebGet(UriTemplate = "/clientaccesspolicy.xml")]
    Stream GetSilverlightPolicy();
    [OperationContract, WebGet(UriTemplate = "/crossdomain.xml")]
    Stream GetFlashPolicy();
...}
public class CrystalMsSqlService : DataService<crystalmysqlcontext>, IWebServer
{...
public Stream GetSilverlightPolicy()
{
    const string result = @"< ?xml version=""1.0"" encoding=""utf-8""?>
                                <access -policy>
                                    <cross -domain-access>
                                        <policy>
                                            <allow -from http-request-headers=""*"">
                                                <domain uri=""*""/>
                                            </allow>
                                            <grant -to>
                                                <resource path=""/"" include-subpaths=""true""/>
                                            </grant>
                                        </policy>
                                    </cross>
                                </access>";
    return StringToStream(result);
}
 
public Stream GetFlashPolicy()
{
    const string result = @"< ?xml version=""1.0""?>
                                < !DOCTYPE cross-domain-policy SYSTEM ""http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"">
                                <cross -domain-policy>
                                    <allow -access-from domain=""*"" />
                                </cross>";
    return StringToStream(result);
}
...
}
</crystalmysqlcontext>

It doesn’t work. Or at least, you can check that the WCF service does supply the policies but for some reasons Silverlight in my case still didn’t want to query the WCF service.

Now, because REST allows a client to query a WCF as if it’s a website and because one can serve both ascii and binary data through WCF/REST the obvious next step was to extend the WCF service with methods which would mimic a webserver behavior. Easy to do in fact by extending the service with more methods and templating the URL requests:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

 
[ServiceContract]
public interface IWebServer
{
[OperationContract, WebGet(UriTemplate = "/clientaccesspolicy.xml")]
Stream GetSilverlightPolicy();
[OperationContract, WebGet(UriTemplate = "/crossdomain.xml")]
Stream GetFlashPolicy();
[OperationContract, WebGet(UriTemplate = "/app.htm")]
Stream GetApplicationPage();
 
[OperationContract, WebGet(UriTemplate = "/{pagename}")]
Stream GetSitePage(string pagename);
[OperationContract, WebGet(UriTemplate = "/Images/{imagename}")]
Stream GetImage(string imagename);
[OperationContract, WebGet(UriTemplate = "/Crystalizer.One.xap")]
Stream GetCrytal();
 
}
public class CrystalMsSqlService : DataService<crystalmysqlcontext>, IWebServer
{...
public Stream GetSitePage(string pagename)
{
    try
    {
        WebOperationContext.Current.OutgoingResponse.ContentType = "text/html";
        string fileContents;
        string path;
        path = string.Format(@"WebRoot\{0}", pagename);
 
        using (StreamReader sr = new StreamReader(path))
        {
            fileContents = sr.ReadToEnd();
        }
        return new MemoryStream(Encoding.UTF8.GetBytes(fileContents));
    }
    catch (Exception)
    {
        return null;
    }
}
 
public Stream GetImage(string imagename)
{
    byte[] fileContents;
    fileContents = File.ReadAllBytes(string.Format(@"WebRoot\Images\{0}", imagename));
 
    // byte[] resp = Encoding.ASCII.GetBytes(string.Format(HttpHeader, "image/png", fileContents.Length, fileContents));
    return new MemoryStream(fileContents);
}
...}
</crystalmysqlcontext>

This now turns your RESTful ADS service into a webserver which serves both the data, the site pages and site images.
One last trick is the fact that because now your WCF service actually implements two interfaces the default endpoint configuration of ADS will not work. To solve this in the self-hosted scenario you can add another endpoint as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

private static void HostWithWebServiceHost(Uri baseAddress)
{
 
    WCFHost = new WebServiceHost(typeof(CrystalMsSqlService), baseAddress);
    WebHttpBinding binding = new WebHttpBinding();
    WCFHost.AddServiceEndpoint(typeof(System.Data.Services.IRequestHandler), binding, "dataservice");
 
 
    WCFHost.AddServiceEndpoint(typeof(IWebServer), binding, "").Behaviors.Add(new WebHttpBehavior());
    ServiceMetadataBehavior smb = new ServiceMetadataBehavior {HttpGetEnabled = true};
    WCFHost.Description.Behaviors.Add(smb);
 
    WCFHost.Open();
}

At this point the Silverlight application will run at the client without any server or internet connection.. You can go a step further and even host the Silverlight application in a Windows form which at the same time hosts the WCF service, but that’s really a no-brainer. You simply add a webbrowser control in a WinForm and call the HTML page which contains the Silverlight control and you’re done. Note that by doing this you have a Silverlight 2 application which runs as if it’s a regular WinForm application. Still, because the WCF service serves ANY client you can also access the Silverlight application through a standard browser. Actually, this fact helps to debug the Silverlight code by attaching the debugger to the browser process. I have not found any other way to debug Silverlight if it’s not part of a Visual Studio web application (as in my case).

In my final ‘show it to the customer without deployment’ solution, I removed the database from the client setup and kept the MySQL on a publicly available location. The only things you need to watch in this case is the fact that by default EF will store the database connection credentials in the web.config. You need to create a EF compiled connection with the EntityConnectionStringBuilder and override the CreateDataSource method of the ADS service:

1
2
3
4
5
6
7
8
9
10
11
12

protected override CrystalMySQLContext CreateDataSource()
{
    EntityConnectionStringBuilder entityBuilder = new EntityConnectionStringBuilder();
    entityBuilder.Metadata = @"res://*/MySql.CrystalMySQLModel.csdl|res://*/MySql.CrystalMySQLModel.ssdl|res://*/MySql.CrystalMySQLModel.msl";
    entityBuilder.Provider = "MySql.Data.MySqlClient";
    entityBuilder.ProviderConnectionString = "server=xxx;user id=xxx;password='xxx';persist security info=True;database=illumineo";
 
    EntityConnection con = new EntityConnection(entityBuilder.ToString());
 
    CrystalMySQLContext ctx = new CrystalMySQLContext(con);
    return ctx;
}

MySQL

During the testing and deployment phase of this project I encountered various difficulties which were all related to the fact that all the assemblies you assume are not necessarily on a blank machine. Adding these assemblies to the bin directory doesn’t solve these issues, the great trick here is a configuration you need to add in order to tell the CLR these assemblies are available. During the installation of a database driver the machine.config is altered but this is not the case if you deploy a self-hosted service and the binaries are not in the GAC:

1
2
3
4
5
6
7
8
9

< ?xml version="1.0" encoding="utf-8" ?>
<configuration>
    <dbproviderfactories>
      <clear />
      <add name="SqlClient Data Provider" invariant="System.Data.SqlClient" description=".Net Framework Data Provider for SqlServer" type="System.Data.SqlClient.SqlClientFactory, System.Data, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
      <add name="MySQL Data Provider" invariant="MySql.Data.MySqlClient" description=".Net Framework Data Provider for MySQL" type="MySql.Data.MySqlClient.MySqlClientFactory, MySql.Data, Version=6.0.2.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d" />
    </dbproviderfactories>
 
</configuration>

Silverlight only likes it async

Concerning the asynchronous behavior of Silverlight I can only say: you need a different mindset to live with it. In my Silverlight application I invested quite some time to create an MVC pattern on the basis of asynchronous data access. Because Silverlight handles templating/styling differently and doesn’t have a databinding mechanism which support element names all of this was tricky at times but in the end I think I was able to cook a very clean and felxible Silverlight framework which in fact has not much affinity with diagramming and could be used as a generic framework (just like our O2 framework for WPF).

Commercial rands

I mentioned in the introduction that one of the aims of this project was to have a common core between WPF and Silverlight. Bad news here: you cannot share assemblies between Silverlight and WPF, you cannot share template, you cannot share databinding patterns, you cannot…well, lots of things. You can find on the net different ways to handle these difficulties (pragma’s in your code for instance) but I haven’t found any of these satisfactory. So, the end result in this context is a big deception, until Microsoft brings on stage a clear strategy targetting this scenario you have to live with duplicated code. For our diagramming aims this means we have a completely different Silverlight library which covers a lot of the features available in G2 but is nowhere near identical in code as G2. On the surface (read: our commercial offering) we now have

• an enterprise level diagramming framework (product: G2) for WPF and a MEF-based framework for WPF applications (product: O2).
• a very complete diagramming framework (product: L2) for Silverlight and a MVC-based framework for Silverlight applications

which in look-and-feel will give you pretty much the same experience. A BPM modeller or a workflow application in Silverlight with the same functionality in WPF…it’s all possible but not on the basis of a common core. In commercial terms this means that a customer wishing to have a dual Silverlight/WPF product needs to pay twice for customizations but can share a common data access layer hidden behind a WCF facade. Speaking about commercial moves I should also mention that The Orbifold has acquired recently two new products which were previously in the open source realm: Denis’ property grid for Silverlight and WPF, as well a Petro’s S# scripting framework (aka Script.Net). More about this in the near future.

There is so much more to say about our other projects and our latest WPF magic but I’ll stop here and leave if for another blog post.

How to picture a 5-dimensional sphere or a see the correlation of  112-dimensional weather data? The answer was found in 1885 when parallel coordinates were invented and later refined in 1959 through  Inselberg. The idea is actually very simple, given some N-dimensional space of data you draw N parallel lines and each line has its own scale. Plot a given data point on these lines by creating a line between the N point of this multi-didmensional point. In this way you get a line per data point and the series of given data points are mapped to a series of lines on the graph. The situation being much like projective geometry where we also find a back-and-forth thinking between lines and points in space. The good thing about such a representation is that if points have some accumulation in a particular dimension you will see it because lines will accumulate on the axis representing this dimension (see adjacent image). This kind of correlation can usually only be detected through statistical analysis, but what do you do if you want to record or supervise data which continuously comes in from real-time systems? This would mean a continuous mathematical analysis of the sampled data and this would entail some very custom algorithm bound to the particular context.

A customer of ours recently challenged us to implement the parallel coordinates visualization in WPF. While quite straightforward at first sight it proved to be more difficult than we initially thought for two reasons:

• non-numeric data: what to do if you have some string data in one of the dimensions? Say, you want to visualize in one of the dimensions a timestamp or telephone numbers or names of patients.
• how to emphasize the accumulation points in the graph? While in the screenshots above you can actually see well the discrete tendence in the second dimension, the screenshot on the right bestows you with a challenge to detect it.

The first problem was tackled through an internal mapping of the data which spreads the non-numeric data across an axis. The drawback of this is that at various levels one has to switch between the actual

data and the internal representation for labels, line hit during hovering, the histogram (see below) and any calculation in general. The second was more difficult and entailed some analysis of the data and various visual alternatives to attract the attention of the user (human interpreter of the data). The end-result is an histogram which like a rotated bar chart on the axis graphs the relative amount of crossings on the axis. The histogram actually shows also the opposite of an accumulation, since (see the second axis in the screenshot below) an equal spreading of the histogram’s rectangles means an equal distribution of the lines across the dimension axis.

Other minor features we added to this data visualization are; the possibility to hover over the graph and see the actual data of the multi-dimensional points, datagrid binding and editing, customization of look & feel through dependency properties, swapping data axes, scaling data vertically on a particular axis.

Probably the most satisfactory moment for myself during the development was at the point when it became clear that just any CSV/spreadsheet data can be bound to the parallel graph visualization. Indeed, due to the internal mapping mechanism one can present any type of tabular data and as a proof of concept I mocked some random spreadsheet in Excel which was subsequently visualized without a hitch.

Stocks & shares anyone? Let me know.