DEV Community: yash

GSoC: Final Evaluation

yash — Mon, 05 Sep 2022 11:39:45 +0000

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.

Mentors

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.

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.

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).

Relevant PRs:

chore: redid the file and menu structure #331

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.

Relevant PRs:
https://github.com/moja-global/FLINT-UI/pull/332

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.

Relevant PRs:

feat: add UI for Spinup, Run simulation, DB Editor, Integrate upload endpoints #347

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:

feat: add UI for Import Simulation modal, connect LocalDomain to the vuex store #355

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.

Week 8:

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

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:

GSoC Blog: Phase 1

yash — Sun, 24 Jul 2022 09:13:03 +0000

Hello everyone! Hope you're doing well and drinking enough water!

Introduction

So - a small introduction of me - I am Yash Kandalkar, an IT undergraduate from Maharashtra, India. I love doing frontend web development.
Recently, I got selected into Google Summer of Code, an open-source program for students and working professionals.
I am working on making a User Interface for configuring the simulation run for the Generic Carbon Budgeting Model (GCBM).

You can find my week 1 blog here!

Progress

Since the most important part of this project is it's Upload section, I started working on it early.
I had a discussion with the folks working on the backend and proposed a design for uploading different file types.
In the new design, all the file types - classifiers, disturbances, input db and miscellaneous files were given a separate UI. This will help users in modifying the config generated on the backend.
After this design was finalised, I started working on the UI for these sections and the config editor.
For the config editor, I used the vue3-json-editor which is super cool!
These are some snapshots of the UI:

The GUI editor is provided for non-developers who may have trouble editing the JSON file directly.

For the input database, a UI for changing the column names of the tables from the uploaded database is provided.

This completes the upload section. Now, the things left in the project are:

The backend integration
UI for Spinup and Libraries configurations
UI for running the simulation (and downloading the output / logs)
Some features like importing, exporting the complete simulation, "Need help?" modal to give a tour of the whole simulation (or parts like the upload section, demonstrating how to edit config files)
Tests for the components I created, and some E2E tests.

Along with the project, I have been creating new issues and reviewing PRs in the FLINT-UI project for new contributors and reviewing PRs of the new UI Library project.

Challenges:

Libraries for Vue3: Getting help for fixing issues while using some old libraries with Vue3 is a pain. It's hard to find the solution for a specific error easily. I spent days getting to work 2-3 libraries with Vue3, and ended up isolating some tasks to the backend.
Getting overwhelmed: Sometimes, even if you know a lot about the project, you start questioning if you're moving in the right direction. Talking with your mentors definitely helps. This may be a small thing from Andrew but it encouraged me a lot!
Managing Time:
College re-opened recently. So, it's been a bit hard to manage time, but I'm getting used to it. Our team also got selected in the finals of SIH (India's largest hackathon, woohoo 🎉), so we have to work on the implementation of the project's idea too.

Keeping appropriate hours a day for working on the project helps. I have already completed a huge portion of the project in the holidays. So it'll be easier for me to complete the whole project in the required time.

Learnings

JavaScript Object Cloning:
A little technical, but I was under the impression that the spread operator in JS deep clones an object/array:
```
let anObject = { car: 1, bus: 3, fruits: { apple: 3, banana: 4 }}
let objectClone = { ...anObject }
```
But, it only goes one level deep while cloning objects. For deep cloning, you're supposed to use a custom function like cloneDeep from lodash.
TailwindCSS & Ant Design Vue: These two libraries are NOT completely compatible. I'd love to use these two side by side without any issues. There are some default styles from Tailwind that interferes with antdv components. For e.g.: Borders of text input component from antdv are bigger due to some styles from Tailwind, antdv icons appear a little lower than they should due to Tailwind's styles. These can be fixed easily by overwriting the appropriate class, but shouldn't be a problem in the first place.

BONUS: Cat GIF. _it was hard to select one_

That's all for now. Until next time. Peace ✌️!

GSoC Blog - Week 1

yash — Sun, 19 Jun 2022 20:46:37 +0000

Hey everyone! Hope you're doing well and drinking enough water!

Introduction

So - a small introduction of me - I am Yash Kandalkar, an IT undergraduate from Maharashtra, India. I started my programming journey when I was 16, with Python as my first language. It taught me a lot of important programming concepts. Currently, I love doing frontend web development.

Recently, I got selected into Google Summer of Code, an open-source program for students and working professionals.
This was a dream come true. I am working on making a User Interface for configuring the simulation run for the Generic Carbon Budgeting Model (GCBM), a model to generate detailed maps of carbon changes and emission associated with land use change.

The Beginning

I got to know about Moja Global from Shloka Gupta, the UI working group lead at Moja Global. Shloka and Soham Shah, a past contributor and an LFX Mentee at Moja Global, helped me a lot during my initial contributions in the organisation.
The Moja Global community is very welcoming and all the members help new contributors in getting started with the projects. All you have to do is show interest, attend weekly meetings, and play around with the projects of your interest to have an understanding of the existing code.
There is also a Documentation Working Group which works on writing technical documentation of the sciences involved in these models and working of the documentation website.

The Proposal

The proposal writing process for the GCBM Simulation Project was a lengthy task. I joined the organisation just a few weeks before the GSoC projects list was published, so I was still getting to know how the things worked. I read lots of documents, and watched the Introduction GCBM Simulation to have a deeper understanding of the project. Before the deadline I had already made a lot of contributions to the FLINT-UI project, and had a fair understanding of what was to be done.
The final few days was pretty hectic as we had our college journal submissions too. While everyone else were getting their journals checked, I had most of them incomplete. :)

The mentors at Moja Global (Andrew and Harsh) helped a lot with the proposal with their reviews. I was satisfied with the proposal and submitted it on the final day.

You can have a look at my proposal here if you want.

The Acceptance

After the long wait, I was filled with joy seeing this from Harsh.
And of course, Shloka hyping me up XD:

Community Bonding Period

I could not do a lot of work during this time as I had my finals going on (killed it). But I still managed to discuss a few things with Andrew, attend the working group meetings and work with Padmaja and Namya (community members working on the FLINT.Cloud project) on some inputs for the simulation.

Just after my exam, we decided in a meeting that we should migrate the project from Vue 2 to Vue 3 due to better support from libraries and the community. For the first week, I worked on migrating all the libraries used, to their Vue 3 supporting version and making changes as necessary. After the initial steps of migration were done, and everything was functional with Vue 3, Palak worked on migrating all the components that used the Options API to using the new Composition API which is recommended in Vue 3.

After this, I couldn't work for another week and a half due to personal reasons.

The Coding Begins

I started the actual coding of the new UI from 15th. I removed the old code and made the landing page first. Adding a sidebar with the configurations parameters was necessary for the ease of navigation for the user. Andrew also gave a great suggestion during this time - of having collapsible groups inside each configuration, so that the user can have a bird's eye view of all the options inside a parameter.

Currently, I have worked on the landing component, sidebar, and the local domain configuration. The tricky part here was having nested children components in vue-router. It took me more time that it should've (I still don't know many things in Vue projects, googling my way through :)).

I plan on adding the Modules configurations tomorrow (June 20th). There are still some things that needs to be worked on which I realise while I'm working on these configuration components. Things like showing previous simulation runs, providing an option to continue these runs, and load their previously completed configurations. These configs also need to be stored in the local-storage of the browser so that if the user leaves the page without running the simulation, there changes aren't lost.

Continuation

These were my updates till now, I'll be writing more mini-blogs in the coming weeks about the progress.

Stay tuned, and again, drink enough water.