Hey everyone, I'm Aritra, a senior pursuing an M.Sc. degree in Computer Science at CMI. This summer, I am working on migrating the unofficial CDP to the official site of OmegaUp (here) as a part of GSoC 2024.
Before reading the blog, you might want to go through the first blog and the second blog of GSoC '24. I also participated in GSoC '23 with Mathesar, you can find the related blogs here.
In this blog, I will share the final progress till now and the future plans.

A little bit about Myself:

I love Mathematics and Algorithms. This semester, I am exploring Cryptography and Advanced Machine Learning. If you want to know me better, you might want to visit my LinkedIn profile, GitHub profile or go through my portfolio. There you will find numerous ways to get in touch with me. I will write more blogs on GSoC '24, you can find them here.

The Project:

The main aim of the project was to create the problem creator page which is available here, feel free to visit it. (You should log in first and then click on the link.)
Please click on the images/videos to visit the issues/pull requests. You might want to go through my previous blog for better understanding.
Let's dive into the project analysis.

The CDP page

The Problem Statement and the Solution tab:

The problem statement and solution tab allows users to write the problem statement and the solution respectively. The markdown written in those pages will appear in the problem's statement and the solution.
The problem statement uses the Pagedown editor and on saving (clicking on th save button) directly updates the store. Here is the video demo of the feature. Click on it to go to the pull request.


The Problem Code tab:

The problem code tab allows users to upload the intended solution code for the problem. While it doesn't have any direct applications now, we might add some features like auto-calculating outputs from the inputs on the test-cases tab. The tab supports uploading file and then infer the language based on extension. Besides, user may select the language and then write the code in the Codemirror editor.
Here is the demo video from the pull request. (Again, click on the video to visit the pull request.)


The Test cases tab:

The test-cases tab is the main and the most complex part of the problem creator. It has multiple features including grouping cases and using case layouts. Grouping is a way of organizing test cases into different categories. While creating a problem, easy and hard might be two common groups.

  1. Sidebar: The sidebar allows user to centrally control all the test cases and the groups. User can view, edit, delete and download groups and cases from the sidebar.


  2. Case edit tab: This tab allows you to edit a case i.e. adding or modifying lines and add case output. A case consists of lines which might be a single line, multiline, array and matrix. Arrays and matrices gives users a nice abstraction over lines and multiline by allowing users to decide sizes, ranges and uniqueness of array/matrix elements.


  3. Layout bar: Layout is a useful tool to save the formats of the test cases. Once saved, users can enforce this layout to multiple test cases. Layout bar allows users to modify, rename, copy and delete layouts.
There are many other important features that are added to the test cases tab, you might want to refer to the test cases section of the meta issue to find out more.

The zip file creation:

Currently, the only way to add a problem to the omegaUp server is to create a zip file. So, after users are done with the problem creation, they can download the zip file to upload the problem to the omegaUp server. Also, users can further modify the problem by re-uploading the zip file to the problem creator page.

  1. Downloading the zip file: To upload a problem (written from scratch) in omegaUp, one should follow the following manual. The problem creator page provides an abstraction over this to improves user experience. After creating the problem using the problem creator page, the user can download the problem to upload it to omegaUp server.

  2. Uploading the zip file: Similarly, if the user wants to further modify the problem statement, he/she can re-upload the problem to the creator page, There is a file named cdp.data which stores the state of the problem and upon uploading, retrieves the previous state.

Cypress tests:

After adding necessary features, it was important to make sure that the problem creator page is robust and works the same way as user wants. To make sure, we have implemented some e2e tests using cypress along with jest tests written using Vue test utils (VTU).

Remaining tasks:

Though the problem creator page is up, we need to test it extensively to find bugs and shortcomings. The next phase of the project (which will be done after GSoC period) will have some interesting features.

  • Get rid of the Intermediate Zip file: Currently, there's no connection between the problem creator page (frontend) and the backend-database. Our main focus will be to allow users to directly create the problems without downloading and re-uploading zip file. Not only it will remove the zip file, it will also help users modify the draft problem directly which will be stored in the database.

  • Auto-calculate outputs: Currently, while writing the test cases, we need to calculate outputs before we write down the outputs. Alternatively, we can get the test cases output from the omegaUp server by running the code written in the code tab and auto populate the outputs.

What I have learnt:

A lot, literally a lottt! Vue, typescript, cypress, PHP, bootstrap, vue test utils, vuex store and the list goes on. I had a very little idea about most of those before, this period of 5 months turned out to be extremely enriching for me. Not only these languages and frameworks, but I also had to dive deeper for the design of the problem creator page which helped me a lot as a developer.

Thanksgiving:

This project would not have been completed without Carlos and Juan . Thanks to them for their excellent guidance and mentoring throughout. I would also like to thanks Hugo and Vanessa for improvement suggestions on my PRs and merging them.
I would also like to thanks my parents and friends for their support throughout. (If you are interested, the character in the background is Itachi from Naruto universe and the quote was by him.)

Jujutsu Kaisen