Show Timing Visually!

john's Avatar


08 Dec, 2019 02:33 AM

Frederik, All,

I just had a great idea for a feature that could apply to the whole NodeBox family (NodeBox 3, Nodebox Live, etc.). I want to mention it for the record before I forget...

Sometimes NodeBox bogs down, sometimes so bad that it freezes or crashes. Often this is due to a simple mistake, causing one node to fire a million times instead of a thousand times. But which node?

Here's the idea: instead of coloring nodes based on node type, provide an option to color them by how long each node took to fire. Nodes not connected to the currently rendered node would be gray or otherwise dimmed. Most nodes, which fire almost instantaneously, would be a soft color. But nodes which took a full second to fire would turn orange, and those which took more than ten seconds would burn bright red.

You could then see two things at a glance: which nodes are unconnected, and which are a possible source of trouble.

Both would be a huge help during debugging. If a whole branch of your network goes dark because of a missing connection you would see that instantly. If one ordinary node (or subnetwork) suddenly turned red you could probably catch your mistake almost immediately.

Even when your network is working correctly, this timing feedback could help you make it more efficient. You could see not only where bottlenecks are located, but also the chain reaction of slowness in one node spreading to other nodes downstream.

What I find exciting about this idea is that it takes full advantage of the visual nature of Nodebox code. In an ordinary text-based language this kind of feedback would be almost impossible to provide. But Nodebox already shows where each nugget of code lies and how it connects to the code around it. All we have to do is light it up!

This would require embedding timing calls before and after each node firing, which could, paradoxically, slow things down (though probably not by very much). And the current coloring scheme does provide some value. So I would probably want this as an option I could switch on or off.

We think of the network pane as the place we enter our code. But it's also a dynamic visualization of that code. I think we could make it a much more powerful visualization. (Another related idea is showing a visual difference between value links and list links - using dotted lines for value links would instantly reveal the true nature of the choreography that happens at each node juncture. Even more exciting: you could animate it to actually see data flowing through your network.)

What do you guys think?


  1. Support Staff 1 Posted by Frederik De Ble... on 09 Dec, 2019 01:36 PM

    Frederik De Bleser's Avatar

    This is really cool! I would love to add this to get more insight into what the app is doing.

    Some node-based applications already do this node coloring; e.g. see the screenshot about Nuke performance on this page.

    The performance impact of measuring performance impact (noting the begin/end time stamp of each node) would be negligible.

    There has also been some work on doing this for text-based languages as well. E.g. Chrome's JavaScript profiler can show how much time each line of code takes, visually: (from this page:

    In general we could do simple node-by-node measuring. Things become a bit more complex for subnetworks, where you might want to visualize the total impact of the subnetwork, given that it can be ran multiple times using list matching.

  2. Support Staff 2 Posted by john on 15 Dec, 2019 02:12 AM

    john's Avatar

    Seems like a nice holiday project!

    If you need any help or suggestions for other ways to improve our code visualization, let me know!


Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

19 Apr, 2024 04:41 AM
16 Apr, 2024 06:18 PM
16 Apr, 2024 04:23 AM
08 Apr, 2024 01:28 AM
07 Apr, 2024 11:50 PM


05 Apr, 2024 11:47 PM
05 Apr, 2024 12:30 AM
25 Mar, 2024 08:48 PM
14 Mar, 2024 07:40 PM
14 Mar, 2024 07:38 PM
12 Mar, 2024 06:14 AM