GSoC Blog: Phase 1
Tags: gsoc, vue, opensource, webdev
Published: 2022-07-24 09:13:03

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](https://summerofcode.withgoogle.com/), 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)](https://moja.global/flint/flint-pilot-projects/#:~:text=The%20Generic%20Carbon%20Budget%20Model%20(GCBM)%2C).

You can find my week 1 blog [here](https://dev.to/yashkandalkar/gsoc-blog-week-1-4c7p)!

### 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](https://github.com/joaomede/vue3-json-editor) which is super cool!
These are some snapshots of the UI:

![GUI Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o992x9rwwfs1hanavfl0.png) ![JSON Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3izp5brp02e361k1g1m.png)
 
 
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:
1. **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. 
2. **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](https://github.com/aornugent) but it encouraged me a lot!
![You've arrived exactly where we need you and at exactly the right time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djcthp2o1lenqpuxqh8s.png)
3. **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](http://sih.gov.in/) (India's largest hackathon, woohoo :tada:), 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
1. **JavaScript Object Cloning:**
    A little technical, but I was under the impression that the spread operator in JS deep clones an object/array:
    ```js
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.
2. **[TailwindCSS](https://tailwindcss.com/) & [Ant Design Vue](https://antdv.com/)**: 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.



![cat gif](https://media3.giphy.com/media/Jd5YlXOVTcQtW/giphy.gif)


<center>BONUS: Cat GIF.</center>
<center>_it was hard to select one_</center>



-----------------------------------------------
That's all for now. Until next time. Peace :v:!