(GSoC' 18 Project Updates) Work Done During Phase 1 of Coding Period.

June 15, 2018    GSoC SPDX Linux Foundation Project Update FOSS

[GSoC’ 18 Project Updates] Work Done During Phase 1 of Coding Period.

The community bonding period ran from April,23 till May,14. In this period we talked to the mentors and other people in the organization to know them better and learn more about the organization. We utilized this period in planning on how we’ll be proceeding with the project, what are the requirements and expectations from the project and who will be the target audience that will be using the project. We setup the milestones for the project. Our primary communication medium was chat on Gitter, we also had weekly calls. We also learned about best coding practices and better ways to use the VCS (git).

After the Community Bonding period ended, the coding period started from May,14. The coding period of the GSoC is divided into 3 parts. After each phase the students and mentors have to submit their evaluations. The duration of the first phase was around 4 weeks i.e. from May,14 to June,15.

My project was to build an XML editor and I divided it into 5 parts. I completed the first 3 parts in this phase which I’ll be discussing in this post.

[Part 1] Upload Features

The first part in getting started was to implement the upload features which will provide users with an interface to give XML input, they want to edit. The user will have 4 options:

  • Write the XML text inside the textarea provided
  • Upload the XML document
  • Give the SPDX license name you want to edit
  • Start with a new XML document

The upload feature also has the drag and drop feature. These features are implemented using Django on the backend. If the user provides with the correct input then he is redirected to the editor page and a session is created. The session variables are used so that the user can edit different documents in multiple tabs at the same time. Session also helps in preserving the xml text even if the page is refreshed.

[Part 2] Text Editor

On the editor page the user is provided with a XML text editor which is implemented using CodeMirror. The editor has all the features such as autoclose tags, tag highlighting, trailing space indicator, fullscreen editing, increase/decrease font size, code folding, xml error highlighting, autosuggestions based on the SDPX license schema. These features make it more user-friendly and easy to use. The text editor also has a beautify feature to correct the indentation and spacing in the XML text.

[Part 3] Tree Editor

This is the part which makes XML editing easy for those who has little to no knowledge about the XML. Along with the text editor, a tree editor is also provided which displays the XML document as a expand/collapse tree format. The XML text is first converted to a jquery object and then using a recursive traverse function a tree structure is generated. Using this the user can:

  • Add/Delete Attributes.
  • Edit the attribute values.
  • Edit the text inside tags.
  • Add child tags.
  • Delete tags. The input values are validated, so that they do not contain any special symbol and if it is true then using the jquery DOM manipulation the tags/attributes are added to the tree structure.

When the user goes back from the tree to the text editor the tree structure is again traversed generating the updated XML text.

This is the total work done till now.

Work left

Currently I am working on improving the tree view editor by taking feedback from the SPDX community. After that i’ll start working on the Part 4 i.e. creating the split view, in which the user can use both the tree and text editor side by side. The Part 5 is making a feature in which the users can create a Pull Request in the spdx-license-xml github repository to get their changes reviewed and merged.

Thank You for reading :slightly_smiling_face:. Here is a demo video of all the features: