Merge pull request #892 from gisaia/feat/maplibre_angular_15

Feat/maplibre angular 18

package.json

@@ -47,8 +47,9 @@
     "arlas-permissions-api": "26.0.0",
     "arlas-persistence-api": "26.0.0",
     "arlas-tagger-api": "26.0.0",
-    "arlas-web-components": "27.0.0-rc.2",
-    "arlas-web-contributors": "27.0.0-rc.2",
+    "arlas-web-components": "27.0.0-rc.3",
+    "arlas-web-contributors": "27.0.0-rc.3",
+    "arlas-map": "27.0.0-rc.3",
     "cli-color": "^1.2.0",
     "core-js": "~3.26.1",
     "fetch-intercept": "^2.3.1",
@@ -93,11 +94,10 @@
     "ng-packagr": "^18.2.1",
     "node": "^18.19.1",
     "patch-package": "^6.4.7",
-    "protractor": "~7.0.0",
     "ts-node": "~10.4.0",
     "typescript": "~5.5.4"
   },
   "browser": {
     "jsonpath": false
   }
-}
+}

projects/arlas-toolkit/package.json

@@ -45,8 +45,9 @@
     "arlas-permissions-api": "26.0.0",
     "arlas-persistence-api": "26.0.0",
     "arlas-tagger-api": "26.0.0",
-    "arlas-web-components": "27.0.0-rc.2",
-    "arlas-web-contributors": "27.0.0-rc.2",
+    "arlas-web-components": "27.0.0-rc.3",
+    "arlas-web-contributors": "27.0.0-rc.3",
+    "arlas-map": "27.0.0-rc.3",
     "cli-color": "^1.2.0",
     "fetch-intercept": "^2.3.1",
     "hopscotch": "0.3.1",
@@ -68,17 +69,5 @@
     "./assets/i18n/es.json": {
       "default": "./assets/i18n/es.json"
     }
-  },
-  "overrides": {
-    "angular-oauth2-oidc-jwks": {
-      "jsrsasign": "^11.0.0"
-    },
-    "@angular-devkit/build-angular": {
-      "webpack-dev-middleware": "~5.3.4"
-    },
-    "dompurify": "2.5.6",
-    "http-proxy-middleware": "2.0.7",
-    "mermaid": "10.9.3",
-    "cross-spawn": "~7.0.5"
   }
 }

projects/arlas-toolkit/src/lib/components/config-manager/config-menu/config-menu.component.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Component, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, Input, Output, ViewEncapsulation } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Configuration, ExploreApi } from 'arlas-api';
 import { DataWithLinks } from 'arlas-persistence-api';
@@ -41,7 +41,7 @@ import { AuthorisationOnActionError } from '../../../tools/errors/authorisation-
   styleUrls: ['./config-menu.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class ConfigMenuComponent implements OnInit {
+export class ConfigMenuComponent {
   @Input() public actions: Array<ConfigAction>;
 
   @Input() public zone: string;
@@ -51,19 +51,16 @@ export class ConfigMenuComponent implements OnInit {
   public ConfigAction = ConfigActionEnum;
 
   public constructor(
-    private dialog: MatDialog,
-    private persistenceService: PersistenceService,
-    private configService: ArlasConfigService,
-    private collectionService: ArlasCollectionService,
-    private errorService: ErrorService,
-    private arlasIamService: ArlasIamService,
-    private arlasSettings: ArlasSettingsService,
-    private authenService: AuthentificationService
+    private readonly dialog: MatDialog,
+    private readonly persistenceService: PersistenceService,
+    private readonly configService: ArlasConfigService,
+    private readonly collectionService: ArlasCollectionService,
+    private readonly errorService: ErrorService,
+    private readonly arlasIamService: ArlasIamService,
+    private readonly arlasSettings: ArlasSettingsService,
+    private readonly authenService: AuthentificationService
   ) {
 
-  }
-  public ngOnInit() {
-
   }
 
   public onActionClick(action: ConfigAction): void {

projects/arlas-toolkit/src/lib/components/share/share.component.ts

@@ -32,7 +32,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { marker } from '@colsen1991/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
 import { Search } from 'arlas-tagger-api';
-import { ARLAS_VSET } from 'arlas-web-components';
+import { ARLAS_VSET } from 'arlas-map';
 import * as FileSaver from 'file-saver';
 import { NgxSpinnerService } from 'ngx-spinner';
 import { orderAlphabeticallyArlasSearchFields } from '../../tools/utils';

projects/arlas-toolkit/src/lib/services/configuration-updater/configurationUpdater.service.ts

@@ -19,7 +19,7 @@
 
 import { Aggregation } from 'arlas-api';
 import { FieldsConfiguration, LayerSourceConfig } from 'arlas-web-contributors';
-import { VisualisationSetConfig } from 'arlas-web-components';
+import { VisualisationSetConfig } from 'arlas-map';
 
 export class ArlasConfigurationUpdaterService {
 

projects/arlas-toolkit/src/lib/services/map-settings/map-settings.service.ts

@@ -18,7 +18,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { MapSettingsService, GeometrySelectModel, OperationSelectModel, GeoQueryOperator } from 'arlas-web-components';
+import { MapSettingsService, GeometrySelectModel, OperationSelectModel, GeoQueryOperator } from 'arlas-map';
 import { ArlasStartupService, ArlasConfigService } from '../startup/startup.service';
 import { MapContributor } from 'arlas-web-contributors';
 import { Expression } from 'arlas-api';

projects/arlas-toolkit/src/lib/services/map/map.service.ts

@@ -18,32 +18,31 @@
  */
 
 import { Injectable } from '@angular/core';
-import bbox from '@turf/bbox';
 import { ComputationRequest, ComputationResponse } from 'arlas-api';
+import { AbstractArlasMapGL, ArlasLngLatBounds } from 'arlas-map';
 import { projType } from 'arlas-web-core';
-import { LngLat, LngLatBounds, Map } from 'mapbox-gl';
 import { MapService } from '../../tools/utils';
 import { ArlasCollaborativesearchService } from '../collaborative-search/arlas.collaborative-search.service';
 
 /**
- * This service provides methods to apply on the mapboxgl Map object
+ * This service provides map methods on ARLAS data
  */
 @Injectable()
 export class ArlasMapService implements MapService {
 
-  public map: Map;
+  public map: AbstractArlasMapGL;
 
-  public constructor(private collaborativeSearchService: ArlasCollaborativesearchService) {
+  public constructor(private readonly collaborativeSearchService: ArlasCollaborativesearchService) {
   }
 
   /**
    * @description zooms to the data extent. If 'map' parameter is not defined, then this function uses the 'map' attribute
    * @param geoPointField geo-point field used to get the bounding box of the data
-   * @param map Map object of mapboxgl
+   * @param map Map instance
    * @param paddingPercentage a percentage of the extent's height and width
    * that is added as a padding to bbox of data (between 0 and 1). It allows to have some context around data
    */
-  public zoomToData(collection: string, geoPointField: string, map: Map, paddingPercentage?: number) {
+  public zoomToData(collection: string, geoPointField: string, map: AbstractArlasMapGL, paddingPercentage?: number) {
     const computationRequest: ComputationRequest = {
       metric: ComputationRequest.MetricEnum.GEOBBOX,
       field: geoPointField
@@ -55,51 +54,17 @@ export class ArlasMapService implements MapService {
     this.collaborativeSearchService.resolveButNotComputation([projType.compute, computationRequest],
       this.collaborativeSearchService.collaborations, collection)
       .subscribe((cr: ComputationResponse) => {
-        if (cr && cr.geometry) {
-          mapInstance.fitBounds(this.toMapboxBounds(cr.geometry, paddingPercentage));
+        if (cr?.geometry) {
+          mapInstance.fitBounds(mapInstance.geometryToBounds(cr.geometry, paddingPercentage) as ArlasLngLatBounds);
         }
       });
   }
 
   /**
    *
-   * @param map mapbox map instance
+   * @param map Map instance
    */
-  public setMap(map: Map) {
+  public setMap(map: AbstractArlasMapGL) {
     this.map = map;
   }
-  /**
-   * @description transforms the geojson object to a mapbox bounds
-   * @param geometry geojson object
-   * @param paddingPercentage a percentage of the extent's height and width
-   * that is added as a padding to bbox of data (between 0 and 1). It allows to have some context around data
-   */
-  private toMapboxBounds(geometry: any, paddingPercentage?: number): LngLatBounds {
-    const boundingBox: any = bbox(geometry);
-    let west = boundingBox[0];
-    let south = boundingBox[1];
-    let east = boundingBox[2];
-    let north = boundingBox[3];
-    if (paddingPercentage !== undefined) {
-      let width = east - west;
-      let height = north - south;
-      /** if there is one hit, then west=east ===> we consider a width of 0.05°*/
-      if (width === 0) {
-        width = 0.05;
-      }
-      /** if there is one hit, then north=south ===> we consider a height of 0.05°*/
-      if (height === 0) {
-        height = 0.05;
-      }
-      west = west - paddingPercentage * width;
-      south = Math.max(-90, south - paddingPercentage * height);
-      east = east + paddingPercentage * width;
-      north = Math.min(90, north + paddingPercentage * height);
-    }
-    const mapboxBounds = new LngLatBounds(
-      new LngLat(west, south),
-      new LngLat(east, north)
-    );
-    return mapboxBounds;
-  }
 }

projects/arlas-toolkit/src/lib/services/startup/arlasconfig.schema.json

@@ -452,16 +452,16 @@
                                         }
                                     }
                                 },
-                                "^(mapgl)$": {
+                                "^(arlas-map)$": {
                                     "description": "Mapgl component configuration",
                                     "type": "object",
                                     "properties": {
                                         "input": {
-                                            "description": "Mapgl component inputs",
+                                            "description": "Map component inputs",
                                             "type": "object",
                                             "allOf": [
                                                 {
-                                                    "$ref": "mapgl.schema.json#"
+                                                    "$ref": "arlas-map.schema.json#"
                                                 }
                                             ]
                                         },
@@ -732,7 +732,6 @@
                         }
                     }
                 }
-
             }
         }
     },

projects/arlas-toolkit/src/lib/services/startup/startup.service.ts

@@ -28,7 +28,7 @@ import { CollectionReferenceDescription, CollectionReferenceParameters, Collecti
 import { DefaultApi, Configuration as IamConfiguration } from 'arlas-iam-api';
 import { DataWithLinks } from 'arlas-persistence-api';
 import {
-  DonutComponent, HistogramComponent, MapglComponent, MetricComponent,
+  DonutComponent, HistogramComponent, MetricComponent,
   MetricsTableComponent, PowerbarsComponent
 } from 'arlas-web-components';
 import {
@@ -70,6 +70,7 @@ import { ArlasSettingsService } from '../settings/arlas.settings.service';
 import * as arlasConfSchema from './arlasconfig.schema.json';
 import { ContributorBuilder } from './contributorBuilder';
 import * as arlasSettingsSchema from './settings.schema.json';
+import { ArlasMapComponent } from 'arlas-map';
 
 @Injectable({
   providedIn: 'root'
@@ -270,7 +271,7 @@ export class ArlasStartupService {
         .addSchema((<any>HistogramComponent.getHistogramJsonSchema()).default)
         .addSchema((<any>HistogramComponent.getSwimlaneJsonSchema()).default)
         .addSchema((<any>PowerbarsComponent.getPowerbarsJsonSchema()).default)
-        .addSchema((<any>MapglComponent.getMapglJsonSchema()).default)
+        .addSchema((<any>ArlasMapComponent.getMapJsonSchema()).default)
         .addSchema((<any>DonutComponent.getDonutJsonSchema()).default)
         .addSchema((<any>MetricComponent.getMetricJsonSchema()).default)
         .addSchema((<any>MetricsTableComponent.getJsonSchema()).default)

projects/arlas-toolkit/src/lib/shared.module.ts

@@ -62,7 +62,6 @@ import {
   GetCollectionUnitModule,
   GetFieldDisplayModule,
   HistogramModule,
-  MapglLegendModule,
   MetricModule,
   MetricsTableModule,
   PowerbarsModule,
@@ -136,6 +135,7 @@ import { ArlasOverlayService } from './services/overlays/overlay.service';
 import { ArlasConfigService, ArlasStartupService } from './services/startup/startup.service';
 import { ArlasWalkthroughModule } from './services/walkthrough/walkthrough.module';
 import { ArlasColorGeneratorLoader } from './tools/color-generator-loader';
+import { ArlasMapModule, } from 'arlas-map';
 
 
 export class CustomTranslateLoader implements TranslateLoader {
@@ -311,7 +311,7 @@ export class CustomTranslateLoader implements TranslateLoader {
     ScrollingModule,
     FormatNumberModule,
     NgxSpinnerModule,
-    MapglLegendModule,
+    ArlasMapModule,
     CollectionModule.forRoot({ loader: {
       deps: [
         ArlasCollaborativesearchService,