AutoMan Intellij Debugger - visual revolution
AID is a tool designed for AutoMan developers. It is a debugger, it’s main task is to show current AutoMan program state. Data must be shown more accurate than just a human-readable hundreds of debug lines. So this is why AID is called a visual debugger.
AID is empowered with two backend systems actually. One of them is behind the AutoMan program and the second one is integrated with IntelliJ Idea API - IntelliJ Idea Plugin. There is a visual layer located nn the top of this plugin. It is totally written in Scala.js. It uses many libraries and interesting technologies, e.g., WebSockets, paths-scala-js, uPickle, etc.
Today I’d like to show you how my Plugin evolved. I’ll discuss it’s layout and show you how it looked in the middle of GSoS and how it looks right now. Let’s go!
My first task was to cover the whole Plugin deployment and installation flow, integration with AutoMan program and communication. Firstly I created AID as a simple Dialog which was a HTTP client. It was talking with AID REST Server and receiving data via JSONs. That AID wasn’t useful and even clear, but it was an important moment in my development process - it meant, that the whole development stack was ready and I was able to code.
Dialog is useful when you need something for a second or only one time. It is a good place to warn user or show something. It is not a good place when you need to focus user for a while. Dialog is always on top, over the main IntelliJ Idea window. I needed something which can be integrated with other IntelliJ Idea components. The choic was simple - Tool Window. Tool Window is easy to use and very good for AID. That moment I added auto refresh logic - AID was asking AID REST API periodically and receiving AutoMan program current state.
###Web browser and scala.js
###Me as a designer
Dan suggested me to design AID on a sheet of paper, so I did it. More or less it was my first idea of how AID should look like.
What we demanded:
- AID should visualize AutoMan program state
- One should be able to choose a question and a task (select boxes)
- Task states and answers should be shown on pie charts
- One should be able to see a single task details
- There should be a general question overview
- AID should be able to predict some answers
- AID should show tasks timeline
Sounds good? Look below to see how it evolved.
I added Bootstrap library to AID and designed tabs for the further functionality. Meantime I changed communication library and chose WebSockets.
At this state AID was very useful, thanks to WebSockets it was being updated continuously, so the AutoMan program state was always fresh and up-to-date.
###Charts and browser
I mentioned that AID can be run almost everywhere! Have a look: It’s really useful when you run your program remotely and you cannot overview this program within your IntelliJ Idea.
The most recent feature is tasks timeline. You can watch tasks historical states and conclude which of them are broken or whatever. I know it’s not pretty, but it’s my own implementation, existing chart libraries don’t meet my requirements!
####AID layout configuration
Using this config you can either hide or show AID tabs and what is the best - you don’t need to recompile the whole project. All you need to do is to reinstall theAID plugin :)
It is essential if you thing about A/B testing!
Only predictions tab is not implemented. It requires changes in AutoMan library.
All the sections described above are beta versions now. Each of them can be extended! Feel free to contact me and suggest changes. I’m waiting :)!