Skip to main content

GSoC: GCBM Simulation Editor - Status Report

· 4 min read
Yash Kandalkar

Hello everyone! Hope you're doing well! This is the final blog of my GSoC journey. It'll contain a brief of everything that I have worked on during my term and what's left to do.


A huge thanks to Andrew O'Reilly-Nugent and Harsh Mishra for helping me at every step of the project. I cannot thank them enough for encouraging me throughout the project and guiding me in the right direction.

Community Members

Special thanks to all these community members for helping me throughout the project: Padmaja, Namya, Shloka, Sanjay, Janvi, and Palak. I wouldn't have been able to finish the project without their help.

Community Bonding Period

I started working on the project by researching on the different inputs required for running the GCBM Simulation. I gathered information from Andrew, Padmaja and Namya regarding the configs which can be edited by the users on the web interface. During this period, we also decided to migrate the project from Vue 2 to Vue 3 as it is the latest version of Vue and supports more libraries. I worked on the migration process and updated all the old libraries to their Vue 3 compatible versions and updated some legacy code. I also started working on the new components and removing the old ones in the GCBM Simulation Editor.

Local Domain Configuration UI

Relevant PRs:

Week 1:

From the last week of community bonding period I started creating components of each configuration parameter. In this week, I created the UI for the Modules configuration. The users can enable and disable (add or remove) modules that'll be included in the run. Some modules, like the Decay Module, also contains configurable variables.


Relevant PRs:

Week 2:

In this week I worked on creating the Pools config. Users can edit different pool values and search the name of the pools in a search bar.


Search bar Pools

Relevant PRs: feat: add Pools config in GCBM run #325

Week 3:

In this week, I added a Create Simulation page which will be the entry point of the simulation run and added sub-menus in the Upload Section for different file types (disturbances, classifiers, input DB and miscellaneous).

Create Simulation UI

Relevant PRs:

Week 4:

I started working on the UI for the Upload section. Here, the major work was of the JSON config editor. There was a requirement for a GUI editor to make it easier for non-developers to edit the JSON attributes easier. I used the vue3-json-editor library for this functionality.

Upload section

Relevant PRs:

Week 5:

I added the UI for editing column names in the DB Editor. After the user uploads a database file, the server responds with the table and attribute names. The requirement was to provide users the option to edit table and attribute names on the frontend. I added a Edit button near the database table which when pressed, makes all the attribute names editable.

database editor

Relevant PRs:

Week 6:

Connected some configuration like Local Domain with the Vuex store. I added vue-persist so that the configurations made on the frontend will persist between website reloads.

Relevant PRs:

Week 7:

Added Import Simulation feature in the sidebar. Here, users can upload all the files required by the simulation. If configuration files are uploaded, they will be read using the FileReader API and the UI will be updated accordingly.

import simulation

Week 8:

Added the UI and functionality for changing table names in the db editor.

change table names

Week 9:

Worked on adding an Export Simulation feature so that the users can download the configurations in JSON format if they want to continue configuring the simulation later. These JSON configuration files can be uploaded in the Import Simulation feature, which will update the UI accordingly.

Week 10:

In this week, I worked on creating a Tour for the simulation, which will help new users understand the flow of the simulation editor.

Further Steps:

In the coming week, I will be writing tests for the components I created and documenting the features which will help new contributors understand the code and continue enhancing the project.

Previous Blogs: