ARLAS-wui-Toolkit

ARLAS-wui-toolkit is the glue that brings the components and their contributors together in an Analytics board.

It's an Angular application that provides one configuration file where to declare :

• the ARLAS-server collection
• the analytics (components and contributors)
• the timeline with shortcuts and datepicker
• the share component
• the tag component.

How to use in your Angular web application

1. Install arlas-wui-toolkit in your Angular web application

   $ npm install --save arlas-wui-toolkit

2. Declare a config.json file in the src folder. Here an example of a config.json file.

3. Import the ArlasToolKitModule in your application module

   @NgModule({imports: [ArlasToolKitModule]})
   export class AppModule {}

   Once imported, this module will launch the ArlasStartupService that parses your config.json file and emits an event arlasIsUp if the configuration file is valid. Otherwise, a list of errors on this file will be plotted in a dialog window.

4. In your bootstrap component you can inject the ArlasStartupService and subscribe to the arlasIsUp event.

   constructor(private arlasStartUpService: ArlasStartupService) {
       this.arlasStartUpService.arlasIsUp.subscribe(isUp => {
           if (isUp) {
           /* your code*/
           }
       });
   }

5. You can add your own component in your application and feed it with data using an arlas-web-contributor. Let's say a search bar. To do so, you need to register your contributor to a ArlasCollaborativeSearchService and a ArlasConfigService that are provided by the ArlasToolKitModule.

   Inject ArlasCollaborativeSearchService and ArlasConfigService in your bootstrap component and wait for arlasIsUp event to declare your contributor :

   constructor(private arlasStartUpService: ArlasStartupService, private collaborativeService: ArlasCollaborativeSearchService, private configService: ArlasConfigService) {
       this.arlasStartUpService.arlasIsUp.subscribe(isUp => {
           if (isUp) {
               const chipsSearchContributor = new ChipsSearchContributor('contributorId',
                 sizeOnBackspaceBus,
                 this.collaborativeService,
                 this.configService);
               /* your code*/
           }
       });
   }

6. In your bootstrap component, add the html tags.

   <!-- Analytic board [groups] input is fed from the `config.json` file-->
   <arlas-analytics-board [groups]="this.configService.getValue('arlas.web.analytics')"></arlas-analytics-board>
   
   <!-- [timelineComponent] input is fed from the `config.json` file -->
   <arlas-timeline [timelineComponent]="this.configService.getValue('arlas.web.components.timeline')"></arlas-timeline>
   
   <!-- ... -->

Documentation

Check the documentation of components and services of ARLAS-wui-toolkit out.

Build

To build the project you need to have installed

• Node version >= 16.3.0
• npm version >= 8.3.0
• Angular CLI version 13.1.2

$ npm install -g @angular/cli@13.1.2

Then, clone the project

$ git clone https://github.com/gisaia/ARLAS-wui-toolkit

Move to the folder

$ cd ARLAS-wui-toolkit

Install all the project's dependencies

$ npm install

Build the project with ng :

$ npm run build-release

The build library will be generated in the dist/arlas-wui-toolkit directory.

Versioning

We use our own x.y.z versioning schema, where :

• x : Incremented as soon as the ARLAS-server API changes
• y : Incremented as soon as a component inputs or outputs change or a new service is proposed.
• z : Incremented as soon as the toolkit implementation receives a fix or an enhancement.

Authors

• Gisaia - initial work - Gisaïa

See also the list of contributors who participated in this project.

LICENSE

This project is licensed under the Apache License, Version 2.0 - see the LICENSE.txt file for details.