GSoC Blog: Phase 1

#gsoc #vue #opensource #webdev

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.