JaeAeich/Javed Habib GSoC 2023.md Secret

## Javed Habib GSoC 2023.md

      
    Raw
  

              Javed Habib GSoC 2023.md
            
          
    Final report GSoC project ELIXIR Cloud Components


Name: Javed Habib
Project: Dashboard Web Components (React, Vue etc) for Workflow and Task Runs
Organization: Global Alliance for Genomics and Health
Mentor: Alex Kanitz, Anurag Gupta, Salihu, Liam Beckman, Venkat Malladi, patmagee

This is the final report for my project that I've been working on during my summer of 2023 in guidance of Alex Kanitz, Anurag Gupta and my other respective mentors.
I am pleased to share that I have completed the project Dashboard Web Components (React, Vue etc) for Workflow and Task Runs in the given time frame and effectively accomplished my tasks and objectives related to Workflows, Task Runs and their Web Components.
Click here for proposal submitted.
Background

The Global Alliance for Genomics and Health better know as GA4GH is a "policy-framing and technical standards-setting organization, seeking to enable responsible genomic data sharing within a human rights framework."
ELIXIR coordinates and develops life science resources across Europe so that researchers can more easily find, analyse and share data, exchange expertise, and implement best practices.
ELIXIR Cloud & AAI is a cross platform initiative of ELIXIR and a Driver Project of the GA4GH that develops services towards establishing a federated cloud computing network that enables the analysis of population-scale genomic and phenotypic data across participating, international nodes.
ELIXIR Cloud components are the Web Components which are developed & managed by the ELIXIR Cloud & AII Community.
Motivation

My objective was to develop user-friendly and intuitive Web Components that empower researchers to effortlessly monitor, initiate, terminate, and reinitiate extensive genomic analyses. By seamlessly integrating the GA4GH Workflow Execution Service (WES) and Task Execution Service (TES) APIs, researchers can execute intricate bioinformatics pipelines with ease. This encompasses tasks such as handpicking input files, selecting from preconfigured analysis workflows, and customizing job parameters – all achieved without the need for delving into coding complexities or grappling with intricate command-line tools.
Moreover, these components are meticulously designed to leverage the capabilities of design tokens, ensuring a consistent and familiar layout throughout the entire system. This seamless integration of design tokens not only enhances the user experience by maintaining a cohesive visual identity but also guarantees effortless navigation across the interface.
Implementation

With the various approaches discussed with the various use-cases in mind, developing the Web Components is the best approach to be delivered because:-


Environment Independent:- As clients can be developed over any technology based on the individual choice like React, Vue, etc. So it is important to have a frontend solution that must be compatible with any tech.


Ease of use & maintenance:- As Web Components in simple terms is just the custom HTML elements with the functionality & UI encapsulated away from the rest of the application code.


I chose FAST for this project because of its strong support for Design Tokens and its focus on performance and scalability. FAST provides a robust set of APIs and tools for building Web Components that can be easily styled and customized using design tokens, which makes it an ideal choice for projects that require consistent branding and design. Additionally, FAST is optimized for speed and scalability, which is important for projects that need to handle large amounts of data or require high responsiveness. While other Web Component libraries like Lit and Polymer are also great choices, I believe that FAST's support for design tokens and its focus on performance made it the best fit for this project.
What did I achive?

Apart from developing just the components, I was given the opportunity to look into and help with the other aspects of the projects as well, like setting up linters, pre-commit testing and linting and other monorepo related issues.
feats


Set up package for TES and create ecc-client-ga4gh-tes-run and ecc-client-ga4gh-tes-runs:
Inside the monorepo I set up the package for TES Web Components and created components like ecc-client-ga4gh-tes-run and ecc-client-ga4gh-tes-runs. Initially we planned on using Official FAST CLI but due to its irreliability I chose open-wc. Here I created ecc-client-tes-create-run which is one module of ecc-client-ga4gh-tes-runs. API didn't support all pagination features so I wrote  a basic client side logic to handle such issues and opene an issue on github.


Create ecc-client-ga4gh-tes-create-run:
With the task monitoring components done, I started working on component to create tasks. With various inputs from mentors on design and security, the ecc-client-ga4gh-tes-create-run was completed.


Create ecc-client-ga4gh-tes-service:
Created a component which shows the services being offered by TES.


Set up package for WES and create  ecc-client-ga4gh-wes-run and  ecc-client-ga4gh-wes-runs:
After successfully completing and merging the TES Web Component, I transitioned to developing components for WES. Given that the compliant WES API lacked a deployed version for development, I designed a Web Component that remains robust even if there are changes in the API responses.


Create ecc-client-ga4gh-wes-create-run:
Created the final Web Component of the porject, ecc-client-ga4gh-wes-create-run used to create a workflows.


fix, imp and chores


Add admin check to the component:
Incorporate an administrative check within the components to prevent regular users from disrupting task execution or deleting tasks.


better coding style:
Enhanced the code quality through the implementation of improved coding practices and configurations.


Setup templating componenet:
Replaced cookiecutter for generating package templates, reducing extra dependency. This commit added the necessary configuration to integrate Turbo into the project for template generation, streamlining the development process.


Setup precommit linting and testing:
This commit ensured that all the tests have passed and the files have been linted before comitting, ensuring a much smoother development process and less error prone commits.


Fixed templating script not working in windows:
Resolved the issue with component templating on Windows by configuring the necessary libraries, ensuring proper functionality.


ecc-design-utils

In order to establish a consistent and adaptable framework for Web Components within the project, we are actively working on the creation of ecc-design-utils. This solution aims to utilize design tokens to ensure uniformity in styles while allowing for extensive configurability at a granular level. By employing this approach, we are laying the foundation for foundational components that will serve as the building blocks for various packages within the ECC ecosystem. These components will empower anyone to effortlessly customize the default frontend applications according to their preferences with minimal exertion.
Take a look into the presentation.
Visit the repo :- https://github.com/elixir-cloud-aai/cloud-components
Outlook

I wished to contribute more, and cover all my streach goals as well, I am happy with the work I did.
Things for future:-

Integrate the components into Krini.
Integration and snapshot testing.

Acknowledgment

I would like to express my special thanks of gratitude to my mentors Alex Kanitz, Anurag Gupta who gave me the golden opportunity to work on the project "ELIXIR Cloud Components".
Over the last few months, apart from writing quality code, I have learned to take ownership of a project. I would also like to thank the GSoC program & GA4GH organization for providing me this wonderful experience over the last 2-3 months.
Javed Habib

I am immensely grateful for the experience and growth this opporunity has brought me, the experience was like none other.