Week 2 - Continue Improving BT Studio Frontend
This week I continued to improve the new frontend. Most of the changes have been done in the following five sections but I have also refined the styles and minor bugs for a better user experience.
Adding the BT Editor
The first step exclusive to the frontend of BT Studio was to add the BT Editor. This was not as straightfordward as it seemed, because the component used for the editor is a bit finicky.
The diagram editor used in BT Studio is react-diagrams and has the feature that it resets its content really easily because React re-renders the component. So to fix this I had to move the event subscribers for the buttons and also use React references for the file content. After that and a couple more fixes to the save order, the editor was working perfecty.
Now that the editor was working, the focus shifted towards the buttons that previously were part of the BT Editor component that no longer has them. For this, and as mentioned above, I switched them to publish events and subcribed to those in the editor, allowing for the same functionality without being a child of the BT Editor component.
Adding the BT Monitor
After having the BT editor working, the next step was to add the monitor to the newly added viewer column. This meant that it needed to be separated from the Editor. Then it was just moving the monitor part to a new component and simplifying all the logic because now it cannot be switched with the editor.
Changing the layout
Now with all of the viewers and editors finally functional, it was time to finally add the ability to switch the layout, as it is done in Overleaf (the inspiration of this new design). This was achieved using a React state and an adaptative layout that can switch what to display.
More functionality in the status bar
Another goal of the new design was to move more of the application related information to it. This mostly means using the status bar to select the universe and also to display other CommsManager information, such as the internal state and the already displayed Robotics Backend information.