fixed errors and added week 13 progress

README.md

@@ -17,8 +17,10 @@ This GSoC Project focuses on adding a global block composition feature, resolvin
  - [Toshan Luktuke](https://github.com/toshan-luktuke)
 
 
-**Official Repository:** [VisualCircuit](https://github.com/JdeRobot/VisualCircuit/)  
-**Github Issues**: [Summary](https://github.com/JdeRobot/VisualCircuit/issues?q=author%3ABkPankaj+)  
-**Pull Requests:** [Summary](https://github.com/JdeRobot/VisualCircuit/pulls?q=author%3ABkPankaj+)  
+**Official Repository:** [VisualCircuit](https://github.com/JdeRobot/VisualCircuit/) <br>
+**Project Summary:** [Explore Summary](https://theroboticsclub.github.io/gsoc2024-Pankaj_Borade/summary/) <br>
+**About:** [Explore About](https://theroboticsclub.github.io/gsoc2024-Pankaj_Borade/About/) <br>
+**Github Issues**: [View Issues](https://github.com/JdeRobot/VisualCircuit/issues?q=author%3ABkPankaj+) <br>
+**Pull Requests:** [See Pull Requests](https://github.com/JdeRobot/VisualCircuit/pulls?q=author%3ABkPankaj+) <br>
 
 Thank you for your interest, and feel free to reach out via email if you have any questions, comments, or suggestions. I hope you find my work engaging!

docs/_config.yml

@@ -99,7 +99,6 @@ defaults:
       author_profile: true
       read_time: true
       comments: true
-      share: true
       related: true
   # _pages
   - scope:

docs/_data/navigation.yml

@@ -39,6 +39,8 @@ docs:
       url: /coding-week10/
     - title: "Coding Period - Week 11 & 12"
       url: /coding-week11-12/
+    - title: "Coding Period - Week 13"
+      url: /coding-week13/
     - title: "Project Summary"
       url: /summary/
 

docs/_posts/2024-06-03-code-w1.md

@@ -17,14 +17,14 @@ From here onwards Coding period begins, During the Monday meeting, mentors discu
 
 ## Accomplishment and Challenges
 
-* #### First yaml file for Github Actions
+* ### First yaml file for Github Actions
 First of all, it was my first time writing a YAML file for GitHub Actions. I used resources such as YouTube videos [1] and GitHub Actions documentation [2]  to help me write the initial script. From the discussions, it was clear that testing should trigger when there is a pull request to the master branch, so I started with that and followed the VisualCircuit documentation for the frontend installation.
 
 First failure of coding period:
 
 ![one](../assets/images/one.png)
 
-* #### Creating workflow for installation process
+* ### Creating workflow for installation process
 The initial idea was to create a separate workflow for the installation process. This installation workflow would be reused for every test and other workflows. I worked on this and resolved the above issue by including '--legacy-peer-deps' at the end of the 'npm install' command.
 
 ```shell
@@ -73,12 +73,12 @@ jobs:
       - name: Generate static files
         run: python backend/manage.py collectstatic
 ```
-* #### Research and modifying the workflow 
+* ### Research and modifying the workflow 
 I reviewed some open source projects such as RocketChat and Volto by the Plone Foundation to understand the CI pipeline workflow. I realized that creating a separate workflow for installation is uncommon and not a best practice. Instead, I created a setup job and stored the results in artifacts for use in different tests (jobs).
 
 Initially, I encountered a "MODULE NOT FOUND" frontend error because I stored node modules in artifacts. Storing node modules in artifacts is not ideal since artifacts are typically used for build files. Stack Overflow and GitHub Actions documentation [3] suggested using Action Cache instead. After switching to Action Cache, the issue was resolved, and I proceeded to the next step of basic frontend testing.
 
-* #### CI Workflow with basic frontend test 
+* ### CI Workflow with basic frontend test 
 For basic frontend testing, I researched Jest and React testing frameworks commonly used for unit tests on the React side. I used prebuilt React tests and initially printed the rendered HTML in the terminal. Based on this, I identified the menubar elements and added a basic test to find and verify that the "File" text is present in the rendered App.
 
 CI Workflow tested in forked repo:

docs/_posts/2024-06-10-code-w2.md

@@ -17,23 +17,23 @@ Welcome to the second week of Coding Week progress. In the Monday meeting, we di
 
 ## Accomplishment and Challenges
 
-* #### Learning tools for Automation - Selenium
+* ### Learning tools for Automation - Selenium
 To create a global test, I needed a tool that could automatically click respective options in the VisualCircuit application. I explored several technologies such as Puppeteer, Playwright, and Selenium. I chose Selenium as it is widely used for automation. I learned how Selenium works and how to use it.
 
-* #### Integreation of Selenium with Github Action
+* ### Integreation of Selenium with Github Action
 From my research, I observed that there are two ways to use Selenium with GitHub Actions: one involves the standard installation of Chrome and ChromeDriver, and the other uses the selenium/standalone-chrome Docker image. I chose the second method as it includes the latest Chrome and ChromeDriver, eliminating the need for a separate ChromeDriver. Additionally, it contains all the functionalities of the Chrome browser. Initially, the browser was not displaying correctly on the Selenium Grid, only showing the logo. To view the live action of the process, I opted for noVNC.
 
-* #### Automating clicking File and Open buttons in the Menubar
+* ### Automating clicking File and Open buttons in the Menubar
 After successfully running selenium/standalone-chrome on my local machine, I automated the process of clicking the menubar buttons. I needed the XPATH to locate and perform the respective actions. I found the XPATH for the File and Open buttons from the Developer Console. Below is a GIF showing the automation process of opening the browser, launching VC, and clicking the respective buttons.
 
 Automating clicking File and Open buttons in the Menubar:
 
 ![](../assets/images/five.gif)
 
-* #### Research about Block Composition
+* ### Research about Block Composition
 The first step was to understand the issue created by David Tapiador. I researched the data flow of opening prebuilt VC projects, adding as a block, and the build options. When the project is built, the dependency section includes package and design key-value pairs. The dependencies were not included, which may be the reason for this nested issue.
 
-* #### Adding interdependencies
+* ### Adding interdependencies
 For nested blocks, I modified the Dependency interface to include the interdependencies element. I also modified the package-model and converter for dependencies. Successfully, interdependencies appeared inside dependencies, but they were blank. This blank state is a great checkpoint as modifying internal structures introduced many errors. I am happy with the progress of this blank interdependencies issue.
 
 

docs/_posts/2024-06-10-code-w3.md → docs/_posts/2024-06-17-code-w3.md

@@ -17,20 +17,20 @@ On the 10th of June, during Monday's meeting, Dr. JoseMaria explained the Global
 
 ## Accomplishment and Challenges
 
-* #### Understanding the VC Block Composition
+* ### Understanding the VC Block Composition
 I went through some frontend files such as `menu/index.tsx`, `project-info-dialog.tsx`, and `editor.ts`. These files are responsible for editing the project information on the frontend side. Initially, I thought of adding Global Input Output functionality within the existing project editing interface. However, as I began implementing it, I realized that it was more difficult than anticipated since it required changing the Project Info interface in every file. Therefore, I decided to build a new dialog box that can be opened from the "Save Block" option in the menu bar.
 
-* #### Implementation of Global Input Output on frontend
+* ### Implementation of Global Input Output on frontend
 For choosing the Global Input Output, all inputs and outputs can be shown, and from there, the Global Input Output can be assigned. I created a new script for the dialog box and modified `editor.ts` and `menu/index.tsx`. Currently, all inputs and outputs are displayed. Next week, I will work on assigning the inputs and outputs as Global for the block.
 
 Checkbox for global input output - dialog box:
 
 ![](../assets/images/five.png)
 
-* #### Solving the nested block with different approach
+* ### Solving the nested block with different approach
 In this approach, I didn't use `node.dependencies` but instead created blocks and wires for internal dependencies. This solution was suggested by ChatGPT, so I tried it. It involved creating internal wires for dependencies and making the linkages. I spent around two days on this, but it didn't yield the desired results. Additionally, it was suggesting editing many internal components, so I dropped this idea and returned to my nested block solution.
 
-* #### Solving the nested block with last week approach
+* ### Solving the nested block with last week approach
 In the previous week, I encountered blank dependencies. I noticed that the interface dependencies contained a single dependency, so I modified it to include an array and used recursive calls to add internal dependencies. Additionally, `factory.tsx` had not been changed, so I modified that as well. However, the issue of blank dependencies still persists. I need to consult the mentors regarding this issue, as I feel it can be resolved with some more effort.
 
 ## Previous PR Updates

docs/_posts/2024-06-10-code-w4.md → docs/_posts/2024-06-24-code-w4.md

@@ -16,26 +16,26 @@ In the fourth week's Monday meeting, I showed a working demo and discussed the p
 
 ## Accomplishment and Challenges
 
-* #### Pasting .vc3 file and opening the file in VC
+* ### Pasting .vc3 file and opening the file in VC
 I first tried putting the circuit file in the Selenium Docker container through a Python script, but it wasn't a great solution, so I decided to put the circuit file through YAML using Docker commands. After solving this, I needed to open the file from a particular directory in the file manager dialog box. For this, OS-level control was needed, so I used the pyautogui library for opening the file in Visual Circuit.
 
-* #### Building and solving inseure download issue
+* ### Building and solving inseure download issue
 There were many errors when building the project as the backend was running on localhost on the local machine and had to be accessed from the Docker container, resulting in fetch errors. These were resolved after modifying setting.py and .env. After that, the browser wasn't allowing downloads as Chrome considered the HTTP frontend insecure. After some Googling and searching on StackOverflow, I found a solution. Finally, the whole process was completed automatically by Selenium. The complete process is shown in the GIF below.
 Selenium based first automated global test:
 
 ![](../assets/images/six.gif)
 
-* #### Improving fetch Global Input and Output function
+* ### Improving fetch Global Input and Output function
 In the previous week, I was able to fetch the port data from all blocks, but it was using more iterations and not proper internal functions for fetching the data. So I improved the global input/output function and also added the submit and checklist handlers to pass data to other scripts.
 
-* #### Creating input output blocks automatically from checkbox data
+* ### Creating input output blocks automatically from checkbox data
 Depending on the port chosen by the user, the particular global input/output block is generated automatically. It checks the port type, and according to that, the input or output block is generated with the same name. Initially, the global input/output block position is the same as the initial position, and the links are null.
 
 
-* #### Modification of Links and creating respective input output block
+* ### Modification of Links and creating respective input output block
 I researched the internal structure of the model and tried to access the links and respective link IDs of each block. After this, I wrote down all possible cases for creating a circuit by the user. One case is where the global input/output has zero links, so one link has to be created, and the source and target assigned. Another case is that there is already a link connected with the block, so according to the port type, the particular source or target has to be removed and a new one assigned. Apart from that, there are other cases that need to be tested in the future, such as if there are two links at the same port, which one to choose. I want to ask the mentors about these cases.
 
-* #### Saving and retriving old blocks function
+* ### Saving and retriving old blocks function
 Before generating the .vc3 composed block file, the old model has to be saved so the user can continue working on the circuit without worrying about the blocks global input/output. The model and project info are saved in the stack, and whenever the build is completed, the old model is loaded. There were constant errors, such as storing the data in the stack but it was changing with changes, as I was storing this.activModel directly in the stack, causing changes in the stack. For that, I tried several methods using deepCopy, custom functions, and cloneDeep. Both deepCopy and custom functions didn't work, so I used the cloneDeep library, which worked without any errors. Similar to the "Save as" functionality, I used that part of the code for generating .vc3 file.
 
 

docs/_posts/2024-06-10-code-w5.md → docs/_posts/2024-07-01-code-w5.md

@@ -17,10 +17,10 @@ On Monday's meeting, we discussed possible cases for a composed block. Last week
 
 ## Accomplishment and Challenges
 
-* #### Solving the global block input links issue and extending block composition for every block
+* ### Solving the global block input links issue and extending block composition for every block
 As discussed above, we should not have more than one link at the input port, and we need to hide input ports with internal wiring from the block composition dialog box. I modified the globalInputOutput function to segregate ports based on links and port types. In last week's code, only code blocks were supported, so I made changes to support every block. I also observed an issue with the text being fetched from the package, which was taking a 40-character name. I modified it to take the name port from the labels of the blocks.
 
-* #### Solving the global block output links issue and refining existing code
+* ### Solving the global block output links issue and refining existing code
 For blocks with multiple wiring at the output side, a new link needs to be added with the respective global input/output attached. Unlike the global input block issue, this requires the parent global output block ID and the respective link ID so that the existing link is not modified. These changes were extensive and altered last week's code, so I refined the overall code. After refinement, the entire global input/output block was tested with all cases and is working as expected.
 
 

docs/_posts/2024-06-10-code-w8.md → docs/_posts/2024-07-22-code-w8.md

@@ -27,13 +27,13 @@ Modules directory with all nested python files:
 
 ## Accomplishment and Challenges
 
-* #### Analyzing the Week 3 Code for the Nested Issue
+* ### Analyzing the Week 3 Code for the Nested Issue
 Dr. Jose Maria suggested in the meeting to revisit the basics and look for solutions in the internal architecture. Therefore, I recreated the issue from week 3. I wrote two codes: one where a new node is created according to dependencies and new wiring was made. However, this approach was not sustainable due to the potential complexity from multiple dependencies. I dropped that idea. The second approach was recursion-based on frontend side, aimed at getting all dependencies, but it resulted in blank dependencies. After analyzing this solution, I changed the recursion solution from the package level.
 
-* #### Blank dependicies issue
+* ### Blank dependicies issue
 Upon deeper analyzing into PackageBlockModel and factory.tsx, I observed that I had created nested dependencies that were not present in the interface of PackageBlockModel. I modified the dependency array for every script and added internal dependencies to the respective interface and methods. The solution was close to being resolve, but I took a different approach in week 3.
 
-* #### Python script in modules directory issue
+* ### Python script in modules directory issue
 Initially, the circuit was not building, but the Save as function was working. Due to nested dependencies, the synthesis file could not be processed. I added a recursive solution to get the nested dependencies from the frontend, which was very challenging. The files were being created but not at all levels. After debugging, I found that the issue was the missing internal dependencies at each level and the improper assignment of keys. The above images attached show the progress made this week.
 
 ## PR Created

docs/_posts/2024-06-10-code-w9.md → docs/_posts/2024-07-29-code-w9.md

@@ -54,17 +54,17 @@ Output including printing at every level and code block:
 
 ## Accomplishment and Challenges
 
-* #### Modifying the Current Version to Support Multi Code Block Dependency
+* ### Modifying the Current Version to Support Multi Code Block Dependency
 
 When I completed writing the entire logic, I found that multiple codes were not supported, and extra wires were created that couldn't connect. Additionally, other code blocks of inter-dependency were not included in data.json, leading to improper linkage. I modified synthesize_modules and changed the logic for adding internal blocks, so they were not treated as whole dependencies. This way, the blocks were added at one level.
 
-* #### Understanding Backend Processing by Creating Sample Tests
+* ### Understanding Backend Processing by Creating Sample Tests
 To understand the process, I created a sample test and added blocks and wires in data.json. This helped me see how the internal file structure of the zip file works after building. I drew the whole connection and tried to replicate it by modifying synthesis.py using recursive and iterative techniques until level 1 was achieved.
 
-* #### Fixing the Issue of Missing Nested Blocks After Backend Processing
+* ### Fixing the Issue of Missing Nested Blocks After Backend Processing
 I created the process_dependency function, which is called inside synthesize_modules. This function iterates over all blocks of a dependency and creates module Python scripts depending on the block type. Only code block type modules and block values are included in data.json. If there is a dependency inside a dependency, process_dependency is called recursively until no nested dependencies are left. This method ensures that only code blocks are included in the modules directory, while other blocks such as global input/output, dependencies, and constants are filtered out.
 
-* #### Writing code for filtering and mapping the wires in backend
+* ### Writing code for filtering and mapping the wires in backend
 After obtaining the proper blocks in data.json, I focused on the wires. In the current version, level 1 blocks were being added to data.json, so I modified process_dependency to include every wire. There were wires for packages and global input/output, which required proper filtering and the creation of new links between the required blocks. I iterated over all wires selected from process_dependency and segregated them based on the wire's source and target block ID. After that, in another iteration, I checked each wire with the filtered blocks in data.json to determine if the block was present, adding the key pair of ob:absent. Then, I created process_wire, where all wire mappings were handled. This function contains nested iterations:
 
 1. The first internal iteration iterates over all valid wires, checks for global input and output, and either saves the wire in a dictionary or removes the entire source-target link based on the presence of the absent value.