Visual LINQ: Watch query expressions as they happen!

Critical link (in case you can't find it): Source Code Download

Update: Dmitry Lyalin has put together a screencast of Visual LINQ in action - it gives a much better idea of what it's like than static pictures do. There's music, but no speech - so you won't be missing any important information if you mute it. 

I was going to save this until it was rather more polished, but I've just started reading the first proofs of C# in Depth, so it's unlikely I'll have much time for coding in the near future. I'm too excited about the results of Monday night to keep them until the book's done :)

After my Human LINQ experiment, I was considering how it my be possible to watch queries occurring on a computer. I had the idea of turning LINQ to Objects into WPF animations... and it just about works. The initial version took about 3 hours on Monday night, and it's had a few refinements since. It's very definitely not finished, but I'll go into that in a minute.

The basic idea is that you write a nearly-normal query expression like this:

 

VisualSource<string> words = new VisualSource<string>
    (new[] { "the", "quick", "brown", "fox", "jumped",
             "over", "the", "lazy", "dog" },
     canvas, "words");

var query = from word in words
            where word.Length > 3
            select new { Word = word, Length = word.Length};

pipeline = query.End();

... and then watch it run. At the moment, the code is embedded in the constructor for MainWindow, but obviously it needs to be part of the UI at some point in the future. To explain the above code a little bit further, the VisualSource class displays a data source on screen, and calling End() on a query creates a data sink which will start fetching data as soon as you hit the relevant "Go!" button in the UI. Speaking of which, here's what you see when you start it:

When you tell it to go, words descend from the source, and hit the "where" clause:

As you can see, "the" doesn't meet the criterion of "word.Length > 3", so the answer "False" is fading up. Fast forward a few seconds, and we'll see the first passing result has reached the bottom, with the next word on its way down:

Results accumulate at the bottom so you can see what's going on:

To be honest, it's better seen "live" as an animation... but the important thing is that none of the text above is hand-specified (other than the data and the source name). If you change the query and rebuild/run, the diagram will change - so long as I've actually implemented the bits you use. So far, you can use:

  • select
  • where
  • group (with trivial or non-trivial elementSelector)
  • multiple "from" clauses (invoking SelectMany)

Select and Where have the most polish applied to them - they've got relatively fancy animations. Grouping works, but it appears to be just swallowing data until it spews it all out later - I want to build up what it's going to return visually as it's doing it. SelectMany could be a lot prettier than it is.

So, what's wrong with it? Well:

  • Ordering isn't implemented
  • Join isn't implemented
  • GroupJoin isn't implemented
  • The animation could do with tweaking (a lot!)
  • The code itself is fairly awful
  • The UI is unpolished (but functional) - my WPF skills are sadly lacking
  • It would be nice to lay the query out more sensibly (it gets messy with multiple sources for multiple "from" clauses)
  • Allow the user to enter a query (and their own data sources)

Despite all of that though, I'm really pleased with it. It uses expression trees to create a textual representation of the logic, then compiles them to delegates for the actual projection etc. A bit of jiggery pokery was needed to make anonymous types look nice, and I dare say there'll be more of that to come.

Interested yet? The source code is available so you can play with it yourself. Let me know if you plan to make any significant improvements, and we could consider starting a SourceForge project for it.

Published Wednesday, February 20, 2008 1:22 AM by skeet
Filed under: ,

Comments

# computer animation &raquo; Blog Archive &raquo; Visual LINQ: Watch query expressions as they happen!

Pingback from  computer animation  &raquo; Blog Archive   &raquo; Visual LINQ: Watch query expressions as they happen!

# re: Visual LINQ: Watch query expressions as they happen!

The moment i saw your code working on my machine is the moment i knew it needed a cool video :).

Honestly it took me a few minutes looking at the code to get what you were doing there, but its a very neat idea.

Once again Jon you have impressed me, but what else is new?

Dmitry

http://blog.lyalin.com

Wednesday, February 20, 2008 9:06 AM by Dmitry Lyalin

# &raquo; Daily Bits - February 20, 2008 Alvin Ashcraft&#8217;s Daily Geek Bits: Daily links, development, gadgets and raising rugrats.

Pingback from  &raquo; Daily Bits - February 20, 2008 Alvin Ashcraft&#8217;s Daily Geek Bits: Daily links, development, gadgets and raising rugrats.

# re: Visual LINQ: Watch query expressions as they happen!

Jon,

This could turn out to be a great teaching / learning tool. Sure beats writing UML Use Case diagrams (sigh)...

Tuesday, February 26, 2008 1:15 PM by Peter Bromberg

# Ever wanted to see LINQ in action, visually?

It&#39;s not always easy to grasp and follow what&#39;s happening when a LINQ query is executed. Well

Tuesday, February 26, 2008 1:30 PM by Community Blogs

# Visual LINQ

Nice tool if you wanna watch LINQ expressions being evaluated as WPF animations... http://msmvps.com

Wednesday, February 27, 2008 7:42 PM by BloggiZ - Blogging by Z

# Visualizing LINQ

I ran across an awesome code sample written by Jon Skeet . He realized that many people may have difficulty

Friday, February 29, 2008 12:52 AM by This Blog Can Also Be A Hat

# Visualizing LINQ

I ran across an awesome code sample written by Jon Skeet . He realized that many people may have difficulty

Friday, February 29, 2008 12:56 AM by Noticias externas

# MSDN Blog Postings &raquo; Visualizing LINQ

Pingback from  MSDN Blog Postings  &raquo; Visualizing LINQ

Friday, February 29, 2008 1:35 AM by MSDN Blog Postings » Visualizing LINQ

# Book Review: LINQ in Action

&quot;LINQ in Action &quot; (by Fabrice Marguerie, Steve Eichert, Jim Wooley, and Matt Warren (Foreword

Saturday, March 01, 2008 12:21 PM by Patrick Smacchia [MVP C#]

# Visual LINQ: Watch query expressions as they happen!

You've been kicked (a good thing) - Trackback from DotNetKicks.com

Saturday, March 01, 2008 4:01 PM by DotNetKicks.com

# Weekly Link Post 31 &laquo; Rhonda Tipton&#8217;s WebLog

Pingback from  Weekly Link Post 31 &laquo; Rhonda Tipton&#8217;s WebLog

Sunday, March 02, 2008 7:04 PM by Weekly Link Post 31 « Rhonda Tipton’s WebLog

# re: Visual LINQ: Watch query expressions as they happen!

Now it would REALLLY kick ass if you could turn this little tool into a debug visualiser, how awesome would that be? :)

Monday, March 03, 2008 2:48 AM by 666shooter

# re: Visual LINQ: Watch query expressions as they happen!

awesome, interesting stuff

Monday, March 03, 2008 6:31 AM by greg1

# Silverlight, Blend and Tangram &laquo; Tales from a Trading Desk

Pingback from  Silverlight, Blend and Tangram &laquo; Tales from a Trading Desk

# Daily Find #40 | TechToolBlog

Pingback from  Daily Find #40 | TechToolBlog

Friday, March 07, 2008 8:59 AM by Daily Find #40 | TechToolBlog

# re: Visual LINQ: Watch query expressions as they happen!

How about a video of it in action?

Wednesday, March 12, 2008 8:10 AM by ewffeef

# re: Visual LINQ: Watch query expressions as they happen!

Um, there is a video - it's linked in the second line of text. Find the word "screencast".

Wednesday, March 12, 2008 8:26 AM by skeet

Leave a Comment

(required) 
(required) 
(optional)
(required)