GSoC2020 Project: Angular WPS Client

---

Introduction

Develop a full-fledged Typescript based Web Processing Service (WPS) library, which will implement all features defined by OGC WPS Interface standards-- such as GetCapabilities, DescribeProcess, and Execute. Furthermore, this library will also be supported in Typescript based frameworks like Angular, as we propose to develop typescript-typings required to import our library into third-party applications. We also aim for high unit test coverage so that the users have a seamless experience using our library.

Weekly Reports

Community Bonding Period

Being the first report, let me start with tasks achieved during the community bonding period.

Community Bonding Period:

• Studied the overview of wps-js project and little more about WPS in general.
• Studied about capabilities and process description modules.
• I have the IDE environment set up in my local machine.

Week 1

Status

• I have forked and have my Github repository for the new Angular WPS project of wps-js-ng.
• Added the Angular CLI skeleton code with npm and node server running. Angular.json files contain all the dependencies for it.
• I have also added ts-lint which is an expressive linter for Typescript.
• For unit testing purposes I was exploring different frameworks for Angular i.e. Karma. The Karma configuration files are also added in the project with the test files of modules ending with name: filename.spec.ts.
• Successfully deployed the angular application on the server.
• I have started to write the Capabilities Model Classes for the GetCapabilities feature.

Problems

• I am not very clear about how the Execute process works, I will try to read more about it and will follow up with the team 52 north in case I face problems.

Next tasks

• I plan to extract the min.js file from the wps-js project.
• Import the js file in the typescript project in order to reuse loads of existing functionality in wps-js project.
• If time persists, next week I could also look into integrating the full-fledged capabilities model class and spec class with the http service integration, such that a get request of capabilities could be feed into the model.

Week 2

Status

• Downloaded and built the project wps-js.
• Extracted the wps-js-min.js and wps-js-all.js files.
• Integrated the wps-js-all.js file in the wps-js-ng project.
• Added Jquery js library to the project and also added Jquery Typings.
• Created a WpsServiceTS Service Class which will be imported by the client finally.
• Added an example client called WpsExampleComponent.

Problems

• Currently, I am trying to study typings for Javascript Manual Libraries. I have imported the wps-js-all.js library and since it does not have the type information, hence I am planning to write a typings file. Therefore, I need to read in detail about the topic.

Next tasks

• Next, I am planning on 2 tasks:
• First: I will add use the imported wps-js-all.js library to make a call on Demo 52North WPS-Service.
• Second: I plan to write typings files for at-least the Capabilities Part.

Week 3

Status

• Created a Typings file to hold the type information for wps-service.js in the wps-js project.
• Added one example component to render capabilities object to the UI.
• Designed and created the Model classes for the ProcessDescription Module.
• Added typings for 4 functions:
  • setVersion
  • setUrl
  • getCapabilities_GET: uses Get restful service.
  • getCapabilities_POST: uses Post restful service.

Problems

• Overall there is no major blocker. I am trying to understand how to create new libraries in Angular and import js library in Angular module.

Next tasks

• Next, I am planning on 2 tasks:
• I will add a UI/Html Component for Process Description Module.
• Second: I will also add the corresponding typings file for process description.

Week 4

Status

• One of the main things that I started out with this week was to publish wps-js on NPM. I have been successful in achieving that. Currently, the library is available online on NPM: https://www.npmjs.com/package/wps-js-52-north

• I have done this to try to import this js file in our angular library project wps-js-ng.

• Added bootstrap and localize libraries for UI view.

• Updated UI to show the response from Capabilities and ProcessDescription.

• Wrote the DescribeProcess services for both Get and Post request.

• Designed and created the Model classes for the ProcessDescription Module.

• Called the Get & Post ProcessDescription service and casted the response object to the Process Description Module.

• Finally, in the “example component”, I showed the response object in a text-box on the UI.

• These response objects are of Type “ProcessDescription”.

Problems

• I have been working to figure out how to add an external js file (wps-js-all.js) in an Angular library. I have also searched Stack-overflow and posted my own question. Seems like this is not supported in angular libraries. My unanswered questions are still lingering on Stackoverflow: https://stackoverflow.com/questions/62233525/how-to-import-an-external-script-in-my-angular-library, https://stackoverflow.com/questions/51097346/how-to-add-external-js-file-in-angular-6-library/53313401#53313401

• My new approach is to add the wps-js project to npm so that I could try to import it from NPM directly. This is currently a work in progress and I am still trying to work on this part.

Next tasks

• Next, I plan to start writing the Model Objects for Execute Process Module.

• Start with the input request and output request model for the execute process

Week 5

Status

• Added the npm library of WPS-js dependency in the project.
• Imported the wps-js through node_modules folder after installing.
• Added the Execute model request input-output objects. Removed unnecessary objects.
• Also corrected the Execute response objects.
• Added the Typings information for Execute Process request.
• Updated Angular.json to import wps-js automatically.

Problems

• As of now, there is no blocker, however, I sill have to research how to import external Javascript in Angular. See my question: https://stackoverflow.com/questions/62233525/how-to-import-an-external-script-in-my-angular-library, https://stackoverflow.com/questions/51097346/how-to-add-external-js-file-in-angular-6-library/53313401#53313401

Next tasks

• I will split the UI client into 2 screens, one to input user request and the other for the output response.
• I also plan to call the Execute function with a demo process and show the description on the UI.

Week 6

Status

• Added split screen HTML code and css styles required. Now the screen is split in two, one side for request and the other for response.
• Wrote the ExecuteProcess code in the WPSServiceTS file.
• Added empty methods for GetStatus & GetResult for future development.
• Added new bootstrap template for split screen and removed private field from angular.json as a bug fix.
• Added a new Angular Library which is publishable to npm. The library’s new name is wps-ng.

Problems

• I am trying to create an Angular Library for WPS on npm. Currently there is just one blocker that I am unable to reuse the js file in library..
• However this will not be a problem for the clients to use this, since they could also clone the code from Github directly to use library.

Next tasks

• Next week, I plan to write the Client side code for Execute process and will try to add a few basic execute process procedures.
• Update the Typings class with ExecuteProcess.
• Update the examples for both Version 1.0.0 and 2.0.0

Week 7

Status

• Updated Execute Response Service to include the DOM Document.
• Updated the Output Classes:
  • Added B-Box Data Class
  • Updated elements of Complex Data Class
  • Added elements to Literal Data Class
  • Added Abstract Value to field to Response
• Added new Execute Example Component containing the html examples.
• Added the corresponding event emitter for the sub component:Execute Example.
• Added new Examples in the Execute Example Component, below is the list:

  • Execute V2 Sync

  • Execute V1 ASync

  • Simple Buffer Algorithm

  • Execute V2 Async

  • Tiff Raw Data Response

  • Execute Shape inline

  • Many Inputs

Problems

• In the Execute Process part, there are currently no blockers.

Next tasks

• Next week I will add the GetStatus function in the wps-angular library.

• I will also update the client with a text field which takes as an input a job-id and outputs the result.

• I will also try to shift all library components developed so far to the wps-ng library folder and build the library.

• If the library successfully builds, it could be published to npm.

Week 8

Status

• Fixed the issue that I was unable to import Javascript files to Angular Library. (will add details in readme)
• Published the library wps-ng on npm. https://www.npmjs.com/package/wps-ng
• Installed Jasmine and added spec files for Execute Process model objects.
• Moved all Service and Model Files from the Application to Library wps-ng.
• Fixed all imports according to the library ‘wps-ng’
• Added Get Status code in the Client.

Problems

• I am trying to come up with a good view of the UI client for the execute-process.
• Need to re-work on some parts of the Execute Process part

Next tasks

• I will add the model objects for Get Result Async process.
• Will add the parser code for ExecuteProcess V1 ASync Module.
• Add Typings of Get Status & Get Result
• Update the client with the Get Result.
• Added Apache License
• Update the execute process examples.
• Exception handling in Library

Week 9

Status

• Added Apache 2.0 License. (Same as wps-js)
• Major update in readme.md, added library installation information, examples and how to use it.
• Added section of contribute to wps-ng readme file.
• New Function added in wps-js file:
  • Function added to get the request XML sent to the server and added its support in wps-library as well.
  • Published the updated library on NPM as well.
• Added new Tabs and Cards to Wps-ng.
• Added Typings for the new modules added in wps-ns Library.
• Added exception handling for all WPS Service functions.
• Updated the library on NPM
• Added: ParseStoredExecuteResponse.
• Bug Fix: Added Status location property to the Response Document.

Problems

• Currently I am trying to work out the design of Execute Examples the client part.

Next tasks

• I plan to continue with the UI of Execute Examples. Following are the 3 main parts:
  • Create new Component to hold the Input Objects.
  • New Component to hold the Output Objects
  • Link and Call the Execute Process Service based on the selected process.

Week 10

Status

• Execute Examples: Added text area for Execute Examples Request in XML.
• Added Xml Pipe Code to beautify the XML of Execute Examples Request.
• Bug Fix in the Capabilities Data Service impacting Process Description Tab.
• Added more examples in the Execute Examples Tab such as Echo process.
• Major update in readme.md, added library installation information, examples, Contribute Section, and how to use wps-ng.
• Added Toastr for Dependency for success notification.
• Added parseStoredExecuteResponse_WPS_1_0 Client Tab in the Client
• User can add URL for WPS 1.0 Service Instance and get the result using this function.
• Added Necessary Spec Test files and a few Test cases.
• Fixed ng test command. On running ng test command, all test cases will run automatically.

Problems

• Currently I am trying add the Dynamic Values Echo process to the client.

Next tasks

• Till Next week, I hopefully intend to finish the Echo Process Dynamic Execution.
• To achieve this task, I plan to create 6 Cards:
  • Complex input
  • Complex Output
  • B-Box Input
  • B-Box Output
  • Literal Input
  • Literal output
• Cards are used by the users to add data input to execute process task.
• Create Client HTML to show these cards for Execute Process.

Week 11

Status

• A major task involved updating the Execute Process Tab
  • Added Collapsible and Accordion view to the Input and Outputs for Echo process.
  • Added default values in Echo-Process execute section.
  • Added Toastr notifications to signal success.
• Deployed the Client Application (wps-js-ng) to Github Pages:
  • Link: https://singkara.github.io/wps-js-ng/
• Added duration in literal input model object in wps-ng library.
• Removed cards as they were unnecessary.
• Updated all angular and package versions and updated the wps-ng library on NPM.
• Added Github Pages Warning Message.
• Boiler Plate for Test code.

Problems

• Currently, there are no blockers. :)

Next tasks

• I plan to start with the test cases for WPS-Service. This task got pending this week because of the Execute process example for Echo Process.
• I also plan to write the final blog this week.
• If there is any feedback or update from Benjamin, I will also look into it with utmost priority.

Week 12

Status

• Adding Test Cases for all the model objects such as Capabilities, Execute Model etc.,
• Added test cases for the methods in the WPS Service such as GetCapabilities, Execute Model Objects, etc.,
• Did a bug fix in model objects after running test cases.
• Updated the library to the latest version.
• Written the Final Blog for Summer of Code.

Problems

• Currently, there are no blockers. :)

Next tasks

• I plan to extend the test cases if possible.
• I am also waiting for any feedback from Benjamin if I could improve the Final Blog or Anything in the Project.

Week 12

Status

• This week I revised the final blog, corrected a few typos and now its published: https://blog.52north.org/2020/08/27/52norths-angular-wps-client-library-the-wps-ng/.
• Github Action to trigger Build and Automated Test for all the Git Push and Pull Requests.
• Bug Fix: Added the reference variable in the Execute Output. The bug was pointed out by Benjamin.
• Updated the NPM dist to the latest version.
• Fixed small bugs in the readme.md file.
• Currently, the project is stable and all bugs pointed out were resolved.

In case anyone has any questions, feedback or issues, feel free to reach out to me at singkara@yorku.ca

Karan Singh