At the Dynamo and Generative Design Hackathon in Toronto, a multi-disciplinary team representing Arcadis were awarded second place for their Dynamo View Extension to visually compare the differences between two Dynamo Graphs.
The team of Arcadians including Michael van Telgen, Robert Wood, and Laurence Elsdon set off for Toronto from the Netherlands and the UK with the challenge to improve collaborative workflows in visual programming.
The first step in the process was to define exactly what we wanted to accomplish. With the aid of post-its, markers, and a whiteboard the team broke down the challenge into bite-size chunks that would be achievable within the two days of the Hackathon. Then, in what would turn out to be an overly optimistic manner we set a series of stretch goals to tackle after the core functionality was built.
The team decided to build a view extension for Dynamo that would implement a method to highlight changes in a graph; building on the technique of data comparison tools used in textual programming such as the GitHub Diff shown below:
Spot the Difference
The necessity for visual comparison can be best understood with a quick game of Spot the Difference. Can you see what has changed between the following two graphs?
Easy! Somebody has changed the input number on one of the sliders, they’ve deleted the Addition node, and they’ve added a Math.Round node.
But how about if the graph is significantly more complex? Can you see what has changed between the following two graphs?
This is the kind of scenario you’re likely to face if you have to revisit a graph you last worked on 2 months ago, or if you’re working in a team and another developer has made a few modifications to a graph. Rather than having to manually comb through each node wouldn’t it be great if you had a tool that did it for you?
We, therefore, set out to build a View Extension for Dynamo to compare two graphs and highlight nodes that were added in green, nodes that had been deleted in red, and nodes that were modified would be shown in blue.
The Hackathon concluded with a series of four minute presentations from each of the teams demonstrating the progress they had made and tools they’d built. With the time limit in mind we put together the following GIF to clearly demonstrate the use and capabilities of the extension we developed.
The extension had adopted the name Trainwreck following a series of unanticipated hurdles. That earlier pessimism proved unwarranted as we were able to overcome the challenges and put together a prototype achieving the majority of our core objectives so the extension would go on to be titled Visual Diff.
The Improved UI
In the days following the Hackathon a few tweaks were made to improve the UI and internal mechanism as shown in the following GIF:
And a demonstration showing the comparison of a DYF custom node:
Integration with Version Control
Finally, we were keen to demonstrate a direct integration with a version control repository.
Here Visual Diff has been tweaked to compare a Dynamo graph that is stored in a Git version control repository against its previous versions (known as commits). The repository StudioLE/DynamoExamples contains a Dynamo graph “hyperbolic-paraboloid.dyn” that has been revised five times.
In the example below the latest version of the graph (v5) is visually compared against version 3 all within the Visual Diff view extension.
Visually comparing the differences between Dynamo Graphs improves collaborative workflows in visual programming in a number of ways including:
- Enabling multiple developers collaborating on a single Dynamo graph to clearly communicate changes they are proposing
- Assist in replicating changes across a repository of graphs that all follow a similar pattern/foundation
- Provide an overview of the history of changes to a graph (to better understand why a graph is written as it is)
- Provide code reviewers with a clear indication of changes to be assessed in QA review
- Indicate additions / deletions / modifications that may be the result of human error thus quashing bugs before they proliferate.
LinkedIn Twitter Website / Portfolio
Laurence Elsdon is an experienced architectural and computational designer specialising in design automation. In addition to being awarded second at this event he was part of the first place Binoculars team at the London Hackathon in April 2019 so looks forward to accepting third at the next hackathon he attends. He’s currently looking for new computational design challenges in the AEC industry.
Michael van Telgen – Structural Engineer and Design Automation Specialist at Arcadis
Michael van Telgen is a Design Automation Specialist and Structural engineer working with Arcadis in the Netherlands. Proficient in both fields, he bridges the gap between engineering and IT.
Robert Wood – Consultant at Arcadis
Rob is an Architectural Technologist and BIM Manager at Arcadis. He has a huge interest in automation and digitisation which is what brought him to wanting to join the Hackathon in the first place. Rob was the lead researcher in our team with the least coding experience but has now learned a lot in this short but great experience.