This blog post is to summarize all the work done in Google Summer of Code @ 2023 for the project Development and integration of Vue.js simulator.
As the Goal of the project is creation of a Vue.js based simulator for CircuitVerse, the first step was to convert the existing components to Vue.js components.
This included conversion of the following components:
The components listed were the primary ones transitioned to Vue.js from scratch. Additionally, numerous other partially-converted components were fully transformed into Vue components, optimizing their functionality by fully harnessing Vue’s capabilities.
The most important Goal of this project was to integrate the new Vue.js based simulator with the main repository hence making it available to the public on circuitverse.org while keeping the new simulator backward compatible for the old circuits.
For the integration we leveraged the power of git submodules. This allowed us to use the Vue simulator with static build files in production environment and with dev server in development environment.
While the new simulator aims to replace the old one, it hasn’t been fully tested yet. To bridge this, we’ve introduced a feature flag, allowing users to toggle between the two versions and aiding in gathering feedback from beta testers.
one can achieve this form
Dashboard > Edit details > Enable new simulator just by checking ✅ the checkbox.
The project’s goal is to evolve the simulator into a standalone application, and eventually, a desktop version. To support this vision and its functionalities, new API endpoints were essential. The following API flow was designed for this purpose:
The API endpoints were designed to support the following functionalities:
GET /api/v1/projects/:id/check_edit_access- To check if the signed-in user has edit access to the project
GET /api/v1/projects/:id/circuit_data- Return the circuit data as a json object if user has view access to the project
PATCH /api/v1/projects/update_circuit- Update the circuit data of the project if user has edit access to the project
POST /api/v1/projects- To create a new project with circuit data
POST /api/v1/simulator/post_issue- To post an issue to Slack channel using Slack hooks
POST /api/v1/simulator/verilogcv- To convert the verilog code to circuitverse simulator compatible json object
more details about the API endpoints can be found here
Initially, the primary site and simulator used Devise for authentication. However, with the introduction of new API endpoints and the Vue simulator’s potential for standalone operation and future desktop application adaptation, there was a need for a more versatile authentication mechanism. Consequently, we integrated JWT (Json Web Token) authentication for the simulator.
This included integrating and generating JWT tokens when the user logged into the site. the jwt is configured as following:
Alongside this other changes in the simulator logic was made few new features was added and few bugs were fixed. keeping the simulator backward compatible with the old circuits. Some of these major changes would be discussed in the upcoming sections.
As the Simulator is target to be operated as a standalone application, it was essential to implement features that would allow users to save and load their circuits locally. This was achieved by implementing the following features:
cv: This feature allows users to export their circuits as
cvfiles, which can be loaded into the simulator at a later time.
cv: This feature allows users to import
cvfiles into the simulator, loading the circuit contained within the file.
Similarly, for creating a new circuit, the user was redirected to project edit page which wont be available with the standalone application. For this reason a new dialog box was created which would allow users to create a new circuit without leaving the simulator.
In addition to this,
confirm() were replaced with custom dialog boxes, enhancing the user experience & future implementation of the simulator as a desktop application.
With the increase in new features and functionalities, it was essential to enhance the UI and UX of the simulator to make it more user-friendly & developer friendly. This included:
confirm()with custom dialog boxes (as discussed ago).
With the conversion of the simulator to Vue.js & TypeScript lots of bugs were introduced and the old methods (such as DOM manipulation for ui changes & simulator logics) were not working, for this new methods based on Vue & es6 js were used. To talk about some of the major are:
These were some of the major issues fixed which hindered the Performance & stability of the Simulator, Lots of other bugs and logical changes were needed to be done for the simulator to be fully functional while being totally backward completable. For more information on these changes feel free to check out the blogs, prs & issues.
Previously the simulator leveraged jQueryUI for the dragging functionality of the panels. However, with the transition to Vue.js, this functionality was lost.
Embed view provides a preview of the circuit, in which one can’t edit the circuit. This also, allows users to embed the circuit in external websites. This was implemented by creating a new route
/simualtorvue/embed/:id which would render the embed view of the circuit.
The simulator was initially available only in English. However, with the introduction of new API endpoints and the Vue simulator’s potential for standalone operation and future desktop application adaptation, there was a need for a more versatile language support mechanism. Consequently, we integrated i18n for the simulator. we used vue-i18n for the internationalization.
Old simulator code was using SCSS at a lot of part of the codebase , so those were to be converted to CSS & the new components corresponding styles were moved to the corresponding Vue components
<style></style> tags. This was done to make the codebase more developer friendly and easier to understand. Also, the clearing & refactoring of codebase was started to remove unused code and make the codebase more readable. the following folder structure was decided to be followed for the refactoring:
Below are listed some of the most important pull requests of the project for any other prs please refer to the respective repository.
week 1 & 2- GSoC@23 - week 1&2 blog
week 3 & 4- GSoC@23 - week 3&4 blog
week 5 & 6- GSoC@23 - week 5&6 blog
week 7 & 8- GSoC@23 - week 7&8 blog
week 9 & 10- GSoC@23 - week 9&10 blog
week 11 & 12- GSoC@23 - week 11&12 blog
Spending the summer working on this project has been an amazing experience. I’ve learned a lot about Vue.js, TypeScript, Ruby on rails, Docker etc. amazing technologies. I’ve also, learned a lot about the open-source community and how to work with a team of developers. I’m grateful to CircuitVerse for giving me this opportunity and to my mentors - Aboobacker MK, Devjit Choudhury and Vedant Jain for their guidance and support throughout the summer. Also, kudos to my fellow mantees for all their support, help & collaboration throughout the project period.