DEV Community: Niladri Adhikary

GSoC’24(CircuitVerse) Week 11 & 12

Niladri Adhikary — Sun, 25 Aug 2024 20:15:21 +0000

My last 2weeks had been really great, We were able to cover a lot of stuff, like testing, stability improvements, css refactoring and completion of the mobile version

Tasks Completed are -

Vue Simulator Mobile Version
Integration of Last year's stability improvements
Tests for the Vue Simulator using Vitest
Global CSS refactoring

With this all my tasks for GSoC 2024 is completed with CircuitVerse, I would love to stick with the organisation in future.

Vue Simulator Mobile Version

Some new Components were implemented like -

Verilog Editor Panel
Sidebar and User menu

and Some improvements for -

Circuit Elements Panel mobile Component
Quick Button mobile component
Timing Diagram mobile component

Also implemented some features like -

Multiple selection Button for circuit elements
Copy Button for copying and pasting circuit elements

Reference PRs -

https://github.com/CircuitVerse/cv-frontend-vue/pull/361

Integration of Last year's stability improvements

Integrated some previous year gsoc prs into the vue simulator

Reference PRs that got merged -

Tests for the Vue Simulator using Vitest

Implemented Test cases for the Vue simulator using

Vitest
JsDOM
@vue/test-utils

Implementations -

Created a Test Environment for the testcases to run in the vite.config.ts

Wrote all the test cases under the spec folder using Vitest

Mocked some unnecessary libraries like codemirror uisng vi.mock

Created a /testdata folder under the spec folder for storing the testing data
Created a /circuits folder to keep all the circuits elements data
After implementing all this we can finally run our test cases using npm run test cmd

Reference PRs -

https://github.com/CircuitVerse/cv-frontend-vue/pull/364

Global CSS refactoring

Global CSS present in the files -

UX.css
main.stylesheet.css

have been transferred to component scoped based css

Reference PRs -

https://github.com/CircuitVerse/cv-frontend-vue/pull/365

Conclusion

This concludes my 12-week GSoC journey. I really enjoyed my time here, loved the community and its people, and would love to stay connected with the organization in the future as well.

GSoC’24(CircuitVerse) Week 9 & 10

Niladri Adhikary — Fri, 09 Aug 2024 13:38:10 +0000

The 2nd phase has begun, and I have started working on a new task: implementing the mobile view. As we know, the Vue simulator was not previously mobile responsive, so I suggested a new modern design, which you can find in the Figma link - https://www.figma.com/design/u3T5Ns2Xe5esvKxJ3FS9Cy/Untitled

I am excited to implement it into the vue simulator, this weeks implementation that has been done are:

Circuit Elements Panel mobile Component
Quick Button mobile component
Timing Diagram mobile component

Some mobile features also have been implemented

Mobile touch implementation
Zoom Implementation

Others

some responsive design for testbench Components

Also a mobile simulator store also has been created to circulate reactive data across mobile components.

Circuit Elements Panel mobile Component

Quick Button mobile component

Timing Diagram mobile component

Reference PRs -

Conclusion:

This week was great; I had a lot of fun designing the mobile view. Hopefully, in the next few weeks, I will complete this implementation and start working on the next desktop application and tests for the simulator.

GSoC’24(CircuitVerse) Week 7 & 8

Niladri Adhikary — Mon, 29 Jul 2024 05:10:58 +0000

This were the last 2 weeks of the first phase, and I had to extend my phase 1 to 8 weeks due to exams, in these 2 weeks I focused on converting all jquery DOM manipulations to vue'reactives and typescipe integration.

Some of the files that were converted are:-

Circuit.ts
eventQueue.ts
quinMcCluskey.ts
customThemeAbstraction.ts
applyTheme.vue
layoutMode.ts
layoutNode.ts
layoutBuffer.ts

and also created a interface for array extension methods.

References

Future Work

Mobile View for the simulator
Integration of test cases for the simulator
Global stylesheets to scoped stylesheets
Implementation of last year's stability improvements
Remaing conversions

Conclusion

I have learned a lot about Vue.js and TypeScript, and I have made significant progress in the project. Thanks to all my mentors for their guidance and support throughout this phase. I am looking forward to the next phase of the project.

GSoC’24(CircuitVerse) Week 5 & 6

Niladri Adhikary — Thu, 11 Jul 2024 07:35:59 +0000

Typescript Integration and Migration of JQuery to Vue's reactives was the focus in week 5, and in week 6 I had exams so not much was done just some extensions to week 5 work

Some Typescript Integration and Migration of JQuery to Vue's reactives are :-

plotArea
Timing Diagram panel
app.ts,
arrayHelper.ts,
backgroundArea.ts,
data.ts,
moduleSetup.ts,
sequential.ts
verilogHelpers.ts

PlotArea and Timing Diagram Panel

plotArea.js file was converted to typescript which allowed me to created interfaces and types for the plotArea and moved all the DOM manipulation into the vue's reactives under Timing diagram panel component along with all the listeners.

Inside the Timing diagram component typescript was integrated and vue's reactives which were migrated from the plotArea file.

A new pinia store timingDiagramStore was implemented to maintain the data flow for the timing diagram.

Typescript Integration in smaller files

some smaller files that were previously in javascript have been converted to typescript as the changes were very minimal, I committed them in a single branch only.

PR Links

PlotArea and Timing Diagram panel - https://github.com/CircuitVerse/cv-frontend-vue/pull/329
ts integration in some files - https://github.com/CircuitVerse/cv-frontend-vue/pull/330

Next weeks i will be focusing on finishing all my integrations for vue + typescript and begin with the mobile version.

GSoC’24(CircuitVerse) Week 3 & 4

Niladri Adhikary — Sat, 22 Jun 2024 18:49:42 +0000

This 2 weeks I have been focusing on Implementing the remaining components and VUE + TS Integration with removal of JQuery.

Some of the Components that I have Implemented are:

TestBench Panel.vue
TestBench Creator.vue
TestBench Validator.vue
Alert MessageBox

Vue + Typescript Integration for:

Project.ts
Utils.ts
Testbench.ts
Open Offline.vue

Pania Store came really in handy to Implement the state management very nicely, and i quite love its Functionalities

Implementation of TestBench Components

As planned in my proposal I started with implementing the creator component using vuetify and converted all jQuery & DOM manipulations to Vue's reactives and typescript integration.

Previously we were using the creator as a separate window, so this time Creating TestBenchCreator.vue eliminated the need to a extra window and the data transmission was done using pinia to transmit data between Creator and Testbench Panel component.

Next, the TestbenchPanel that was under the extra.vue file, was converted to Vue's reactives, all UI DOM manipulations that was previously there in the testbench.js was migrated to the component using Vue and Pinia.

Other Testbench components like the testbench validator and some dialog boxes are migrated as well in the same folder.

Also created a Testbench store in the pinia store folder for reactive state management of the test data.

PR LINK - https://github.com/CircuitVerse/cv-frontend-vue/pull/323

Vue + Typescript Integration

Typescript and Vue integrations were done in some files like project.ts, utils.ts, testbench.ts, Open Offline.vue Component initially more integrations will be done in the next weeks

PR LINK -
utils.ts - https://github.com/CircuitVerse/cv-frontend-vue/pull/325
project.ts - https://github.com/CircuitVerse/cv-frontend-vue/pull/324
Offline.vue - https://github.com/CircuitVerse/cv-frontend-vue/pull/318

GSoC’24(CircuitVerse) Week 1 & 2

Niladri Adhikary — Sat, 15 Jun 2024 12:15:08 +0000

The coding period has begun, and a lot of work has been done on understanding the codebase, creating new Vue components, and eliminating bugs.

Implementation of LayoutElements Panel Vue Component

Previously, the LayoutElements Panel was in the extra.vue file.

First, I created a new Vue file for the LayoutElements Panel and moved the HTML part inside the <template> <template/> tag.

Since the original codebase used vanilla JavaScript for some DOM manipulation, I converted these to Vue's reactive properties.

<div
  v-for="(element, j) in group.elements"
  class="icon subcircuitModule"
  :key="`${i}-${j}`"
  :id="`${group.type}-${j}`"
  :data-element-id="j"
  :data-element-name="group.type"
  @mousedown="dragElement(group.type, element, j)"
>
  <div class="icon-image">
    <img :src="`/img/${group.type}.svg`" />
    <p class="img__description">
       { element.label !== '' ? element.label : 'unlabeled' }}
    </p>
  </div>
</div>

Additionally, I moved all related styles into the <style> <style/> tag.

PR Link - https://github.com/CircuitVerse/cv-frontend-vue/pull/317

Fixed Mini Map not rendering Issue

Previously the mini map in the simulator was not rendering due to styling issues.

Fixed it! using Changing some CSS properties

PR Link - https://github.com/CircuitVerse/cv-frontend-vue/pull/316

Conclusion

I learned a lot by doing this work and am happy to start my contributions. I hope to produce even better work in the upcoming weeks.

GSoC’24(CircuitVerse) Week 0 — Community Bonding

Niladri Adhikary — Sat, 01 Jun 2024 15:19:19 +0000

Hi Everyone, I am Niladri Sekhar Adhikary, a B.Tech Computer Science student from Kolkata. I will be sharing my community bonding period for GSoC this year. To be honest, I was already somewhat familiar with the CircuitVerse community when I first got selected, thanks to my prior contributions which helped me get to know CircuitVerse and its community well. As a result, my community bonding period focused more on planning the timeline and getting ready for coding.

At first, I had a meeting with my project mentors to plan the timeline and discuss some decisions required based on my GSoC proposal. We decided to finish up some small bug fixes and minor updates during the community bonding period itself.

Here are some Pull Requests I created during Community Bonding Period:-

Advance Options for embed view implemented.
Fix for Timing Diagram increase decrease buttons.
A PR for all bug fixes and updates from the main repo. It is a single PR for all the updates that can be directly applied to the Vue simulator without any changes, with different commit for each issue — Link.

Advance Options for embed view implemented

The embedded view of CircuitVerse circuits can be used to display circuits in an iframe on other websites.

By clicking the Embed button on the bottom right, a dialog box can be opened, allowing the user to create a customised embed view for the circuit.

As you can see in the Advance option section user gets to decide which properties should be there in the embed view.

The Embed view Advance option was already implemented in the previous year GSoC i.e in GSoC’22 by this PR — Link, now was the time to implement the same in the Vue Simulator. The implementation was a bit different, as we could now use Vue’s reactive nature to make the task easier.

In the embed Component we will get the preference data from the params using the useRoute method.

import { useRoute } from 'vue-router'

const route = useRoute()

const hasDisplayTitle = ref(route.query.display_title ? route.query.display_title === 'true' : false);
const hasClockTime = ref(route.query.clock_time ? route.query.clock_time === 'true' : true);
const hasFullscreen = ref(route.query.fullscreen ? route.query.fullscreen === 'true' : true);
const hasZoomInOut = ref(route.query.zoom_in_out ? route.query.zoom_in_out === 'true' : true);

Then we can use data to conditionally render components.

<div v-if="hasZoomInOut.value" id="zoom-in-out-embed" class="zoom- wrapper">

You can checkout the Pull Request here — https://github.com/CircuitVerse/cv-frontend-vue/pull/312

Fix for Timing Diagram increase decrease buttons

Previously, the increase and decrease buttons of the timing diagram were not working.

Using Vue's reactives fixed the problem, link to the PR - https://github.com/CircuitVerse/cv-frontend-vue/pull/313

A PR for all bug fixes and updates from the main repo

Since decoupling of the new vue simulator some updates and bug fixes were made in the main simulator which needs to be updated in the vue simulator.

It is a single PR for all the updates that can be directly applied to the Vue simulator without any changes, with different commit for each issue - https://github.com/CircuitVerse/cv-frontend-vue/pull/314

Conclusion

I have learned a lot more about the codebase and good practices. It was a good start, and I am now more excited to move on to the next tasks. Thanks to all my mentors who helped me plan the timeline for tasks; it helped me get a good start.