A desktop program built with web technologies
Looking at the above picture, can you find out:
- Which node (channel) is used by which node?
- Which node (channel) is orphan?
- How to quickly find a node (channel) with its property such as channel type?
- How can I optimize this model?
It might be easy to answer those questions while there is few nodes in the graph, but when there are thousands of nodes, it becomes really difficult.
That’s the problem our engineers faced.
I always pay attention to our engineering process and I’m always thinking can I help. The moment I saw that really messy picture, I felt it was too complicated, and I was thinking:
There must be a way to simplify it!
I found out the files we have are just XML files, then I started to build the solutions and iterate.
Version 1: parsing files and generate a web page report
After talking to one of the engineers, I built a Ruby script to parse all files and generate a single web page report. Engineers can just use web browser to open it and use the built-in search to find channels. It’s basically a proof of concept and I gathered a lot of valuable feedbacks from engineers.
Version 2: a standalone tool
The version 1 worked really well and I started to iterate. Not every one wanted to install Ruby to execute the script, and the script lacked some other features. So I built a standalone tool. It’s called CMTool.
I know this feature is not required but it’s fun to show such data to engineers:
- This desktop tool is built with web technologies, using NW.js (formally node-webkit)
- Full stack CoffeeScript with React.js
- I Implemented “occlusion culling” for displaying thousands of channels in a table, inspired from his post: http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome
- I open sourced a UI component: node-wekkit-mru
- It uses the software updater to check updates
- I embed a text editor using CodeMirror for in place editing and lint:
I single handed the code, the design is a collaboration result with our engineers. I found sometimes the user can give you the best design choice.
The project is started in 2013 and as you can see below, I’m constantly working on it to improve it.
Generally speaking I like the beauty of simplify. But I found the complexity of the model graph could be a beautiful thing too, so I tweaked the parameters to create two “arts”, they are from the same model:
One More Thing
CMTool is a part of our Configuration Management system. The system also includes a web server. To find out more, please see this portfolio:
This is a part of my portfolio showcase on medium. To see the overview of my portfolio, please click here.