Merge pull request #908 from gisaia/feat/externaliseComponents

feat: externalise map, list and analytics components
gisaia · Nov 26, 2024 · 85a6ad4 · 85a6ad4
2 parents f493581 + 3e2ee0c
commit 85a6ad4
Show file tree

Hide file tree

Showing 54 changed files with 3,573 additions and 2,178 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "@angular/cli": "^14.2.13",
     "@angular/compiler-cli": "^14.2.12",
     "@angular/language-service": "^14.2.12",
-    "@biesbjerg/ngx-translate-extract-marker": "1.0.0",
+    "@colsen1991/ngx-translate-extract-marker": "^2.0.8",
     "@gisaia/ngx-translate-extract": "8.2.0",
     "@types/jasmine": "~3.10.0",
     "@types/jasminewd2": "~2.0.2",
@@ -58,6 +58,7 @@
     "@typescript-eslint/eslint-plugin-tslint": "^5.6.0",
     "@typescript-eslint/parser": "5.3.0",
     "eslint": "^8.2.0",
+    "jasmine": "^5.1.0",
     "jasmine-core": "~3.10.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "^6.3.14",

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -17,31 +17,104 @@
  * under the License.
  */
 
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { Dialog, DIALOG_SCROLL_STRATEGY } from '@angular/cdk/dialog';
+import { HttpClientModule } from '@angular/common/http';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_SCROLL_STRATEGY, MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { ArlasColorService, ColorGeneratorLoader } from 'arlas-web-components';
+import { ArlasCollaborativesearchService, ArlasCollectionService,
+  ArlasConfigService, ArlasSettingsService, ArlasStartupService } from 'arlas-wui-toolkit';
+import { of } from 'rxjs';
 import { ArlasWuiComponent } from './app.component';
+import { ContributorService } from './services/contributors.service';
+import { MapService } from './services/map.service';
+import { ResultlistService } from './services/resultlist.service';
+import { VisualizeService } from './services/visualize.service';
 
 describe('ArlasWuiComponent', () => {
   let component: ArlasWuiComponent;
   let fixture: ComponentFixture<ArlasWuiComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
+  beforeEach(async () => {
+    const mockArlasStartupService = jasmine.createSpyObj('ArlasStartupService', [], {
+      shouldRunApp: true,
+      emptyMode: false,
+      contributorRegistry: new Map(),
+      collectionsMap: new Map()
+    });
 
-      ],
-      declarations: [
+    const mockSettingsService = jasmine.createSpyObj('ArlasSettingsService', ['getHistogramMaxBucket']);
+    mockSettingsService.getHistogramMaxBucket.and.returnValue();
+
+    const mockContributorService = jasmine.createSpyObj('ContributorService', ['getMapContributors']);
+    mockContributorService.getMapContributors.and.returnValue([]);
+
+    const mockColorGeneratorLoader = jasmine.createSpyObj('ColorGeneratorLoader', [], {
+      changekeysToColors$: of()
+    });
+
+    await TestBed.configureTestingModule({
+      declarations: [ArlasWuiComponent],
+      imports: [
+        TranslateModule.forRoot({
+          loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
+        }),
+        MatTooltipModule,
+        /** Needed for ResultlistService */
+        RouterTestingModule,
+        HttpClientModule
+        /** End */
       ],
       providers: [
+        ResultlistService,
+        MapService,
+        ArlasColorService,
+        ArlasCollaborativesearchService,
+        ArlasConfigService,
+        {
+          provide: ArlasStartupService,
+          useValue: mockArlasStartupService
+        },
+        {
+          provide: ArlasSettingsService,
+          useValue: mockSettingsService
+        },
+        {
+          provide: ContributorService,
+          useValue: mockContributorService
+        },
+        /** Needed for ResultlistService */
+        MatSnackBar,
+        VisualizeService,
+        MatDialog,
+        {
+          provide: MAT_DIALOG_SCROLL_STRATEGY,
+          useValue: {}
+        },
+        Dialog,
+        {
+          provide: DIALOG_SCROLL_STRATEGY,
+          useValue: {}
+        },
+        /** End */
+        {
+          provide: ColorGeneratorLoader,
+          useValue: mockColorGeneratorLoader
+        },
+        ArlasCollectionService
       ]
     }).compileComponents();
+  });
 
-  }));
-
-  beforeEach(async(() => {
+  beforeEach(() => {
     fixture = TestBed.createComponent(ArlasWuiComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-  }));
+  });
 
   it('should create', () => {
     expect(component).toBeTruthy();

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -16,8 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { CollectionReferenceParameters } from 'arlas-api';
+import { ArlasColorService } from 'arlas-web-components';
+import { ResultListContributor } from 'arlas-web-contributors';
+import { AnalyticsService, ArlasCollaborativesearchService, ArlasConfigService, ArlasStartupService } from 'arlas-wui-toolkit';
+import { Subject, takeUntil, zip } from 'rxjs';
+import { ContributorService } from './services/contributors.service';
+import { MapService } from './services/map.service';
+import { ResultlistService } from './services/resultlist.service';
 
 @Component({
   selector: 'arlas-root',
@@ -26,13 +33,105 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ArlasWuiComponent implements OnInit {
 
+  public collections = new Array<string>();
+  public collectionToDescription = new Map<string, CollectionReferenceParameters>();
+  public resultlistContributors: Array<ResultListContributor> = new Array();
+  /**
+   * @Input : Angular
+   * List of ResultList tabs to hide
+   */
+  @Input() public hiddenResultlistTabs: string[] = [];
+  /**
+   * @Input : Angular
+   * List of Analytics tabs to hide
+   */
+  @Input() public hiddenAnalyticsTabs: string[] = [];
+
+  /** Destroy subscriptions */
+  private _onDestroy$ = new Subject<boolean>();
+
+  public constructor(
+    private arlasStartupService: ArlasStartupService,
+    private configService: ArlasConfigService,
+    private resultlistService: ResultlistService,
+    private contributorService: ContributorService,
+    private mapService: MapService,
+    private colorService: ArlasColorService,
+    private collaborativeService: ArlasCollaborativesearchService,
+    private analyticsService: AnalyticsService
+  ) { }
+
   public ngOnInit(): void {
     const loadingGif = document.querySelector('.gif');
     if (!!loadingGif) {
       loadingGif.remove();
     }
-  }
 
-}
+    // Initialize the contributors and app wide services
+    if (this.arlasStartupService.shouldRunApp && !this.arlasStartupService.emptyMode) {
+      this.collections = [...new Set(Array.from(this.collaborativeService.registry.values()).map(c => c.collection))];
 
+      /** Map */
+      // Set MapContributors
+      const mapContributors = [];
+      this.contributorService.getMapContributors().forEach(mapContrib => {
+        mapContrib.colorGenerator = this.colorService.colorGenerator;
+        if (!!this.resultlistContributors) {
+          const resultlistContrbutor: ResultListContributor = this.resultlistContributors
+            .find(resultlistContrib => resultlistContrib.collection === mapContrib.collection);
+          if (!!resultlistContrbutor) {
+            mapContrib.searchSize = resultlistContrbutor.pageSize;
+            mapContrib.searchSort = resultlistContrbutor.sort;
+          } else {
+            mapContrib.searchSize = 50;
+          }
+        }
+        mapContributors.push(mapContrib);
+      });
+      this.mapService.setContributors(mapContributors);
 
+      /** Resultlist */
+      /** Retrieve displayable resultlists */
+      const hiddenListsTabsSet = new Set(this.hiddenResultlistTabs);
+      const allResultlists = this.configService.getValue('arlas.web.components.resultlists');
+      const allContributors = this.configService.getValue('arlas.web.contributors');
+      const resultListsConfig = !!allResultlists ? allResultlists.filter(a => {
+        const contId = a.contributorId;
+        const tab = allContributors.find(c => c.identifier === contId).name;
+        return !hiddenListsTabsSet.has(tab);
+      }) : [];
+
+      const ids = new Set(resultListsConfig.map(c => c.contributorId));
+      this.arlasStartupService.contributorRegistry.forEach((v, k) => {
+        if (v instanceof ResultListContributor) {
+          v.updateData = ids.has(v.identifier);
+          this.resultlistContributors.push(v);
+        }
+      });
+      this.resultlistService.setContributors(this.resultlistContributors, resultListsConfig);
+
+      zip(...this.collections.map(c => this.collaborativeService.describe(c)))
+        .pipe(takeUntil(this._onDestroy$))
+        .subscribe(cdrs => {
+          cdrs.forEach(cdr => {
+            this.collectionToDescription.set(cdr.collection_name, cdr.params);
+          });
+          this.resultlistService.setCollectionsDescription(this.collectionToDescription);
+          if (!!this.mapService.mapComponent) {
+            const bounds = (<mapboxgl.Map>this.mapService.mapComponent.map).getBounds();
+            if (!!bounds) {
+              (<mapboxgl.Map>this.mapService.mapComponent.map).fitBounds(bounds, { duration: 0 });
+            }
+          }
+          if (this.resultlistContributors.length > 0) {
+            this.resultlistContributors.forEach(c => c.sort = this.collectionToDescription.get(c.collection).id_path);
+          }
+        });
+
+      /** Analytics */
+      const hiddenAnalyticsTabsSet = new Set(this.hiddenAnalyticsTabs);
+      const allAnalytics = this.arlasStartupService.analytics;
+      this.analyticsService.initializeGroups(!!allAnalytics ? allAnalytics.filter(a => !hiddenAnalyticsTabsSet.has(a.tab)) : []);
+    }
+  }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -45,7 +45,7 @@ import { RouterModule } from '@angular/router';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import {
   HistogramModule, MapglImportModule, MapglModule, MapglSettingsModule,
-  ResultsModule, FormatNumberModule, BboxGeneratorModule
+  ResultsModule, FormatNumberModule, BboxGeneratorModule, GetValueModule
 } from 'arlas-web-components';
 import {
   ArlasCollectionService,
@@ -69,15 +69,20 @@ import { ArlasWuiRootComponent } from './components/arlas-wui-root/arlas-wui-roo
 import { ConfigsListComponent } from './components/configs-list/configs-list.component';
 import { GeocodingComponent } from './components/geocoding/geocoding.component';
 import { LeftMenuComponent } from './components/left-menu/left-menu.component';
-import { AoiDimensionComponent } from './components/map/aoi-dimensions/aoi-dimensions.component';
-import { RoundKilometer, SquareKilometer } from './components/map/aoi-dimensions/aoi-dimensions.pipes';
+import { AoiDimensionComponent } from './components/arlas-map/aoi-dimensions/aoi-dimensions.component';
+import { RoundKilometer, SquareKilometer } from './components/arlas-map/aoi-dimensions/aoi-dimensions.pipes';
 import { ContributorService } from './services/contributors.service';
-import { DynamicComponentService } from './services/dynamicComponent.service';
 import { VisualizeService } from './services/visualize.service';
 import { ArlasTranslateLoader, ArlasWalkthroughLoader } from './tools/customLoader';
 import { LazyLoadImageHooks } from './tools/lazy-loader';
 import { LAZYLOAD_IMAGE_HOOKS, LazyLoadImageModule } from 'ng-lazyload-image';
 import { RastersManagerComponent } from './components/map/raster-layers-manager/rasters-manager.component';
+import { ArlasMapComponent } from './components/arlas-map/arlas-map.component';
+import { ArlasListComponent } from './components/arlas-list/arlas-list.component';
+import { GetResultlistConfigPipe } from './pipes/get-resultlist-config.pipe';
+import { MapService } from './services/map.service';
+import { ResultlistService } from './services/resultlist.service';
+import { ArlasAnalyticsComponent } from './components/arlas-analytics/arlas-analytics.component';
 
 
 @NgModule({
@@ -90,7 +95,11 @@ import { RastersManagerComponent } from './components/map/raster-layers-manager/
     RoundKilometer,
     SquareKilometer,
     GeocodingComponent,
-    RastersManagerComponent
+    RastersManagerComponent,
+    ArlasMapComponent,
+    ArlasListComponent,
+    GetResultlistConfigPipe,
+    ArlasAnalyticsComponent
   ],
   exports: [
     AoiDimensionComponent,
@@ -99,7 +108,11 @@ import { RastersManagerComponent } from './components/map/raster-layers-manager/
     LeftMenuComponent,
     ConfigsListComponent,
     RoundKilometer,
-    SquareKilometer
+    SquareKilometer,
+    GeocodingComponent,
+    ArlasMapComponent,
+    ArlasListComponent,
+    GetResultlistConfigPipe
   ],
   imports: [
     BrowserModule,
@@ -154,12 +167,13 @@ import { RastersManagerComponent } from './components/map/raster-layers-manager/
     }),
     ArlasTaggerModule,
     LoginModule,
-    LazyLoadImageModule
+    LazyLoadImageModule,
+    GetValueModule
   ],
   providers: [
-    ContributorService,
-    DynamicComponentService,
     VisualizeService,
+    MapService,
+    ResultlistService,
     {
       provide: LAZYLOAD_IMAGE_HOOKS,
       useClass: LazyLoadImageHooks
@@ -170,7 +184,8 @@ import { RastersManagerComponent } from './components/map/raster-layers-manager/
       deps: [AuthentificationService, ArlasIamService, ArlasSettingsService],
       multi: true
     },
-    ArlasCollectionService
+    ArlasCollectionService,
+    ContributorService
   ],
   bootstrap: [ArlasWuiComponent],
   entryComponents: []

diff --git a/src/app/components/arlas-analytics/arlas-analytics.component.html b/src/app/components/arlas-analytics/arlas-analytics.component.html
@@ -0,0 +1,7 @@
+<div class="arlas-analytics--container">
+  <arlas-analytics-menu *ngIf="showMenu" [showIndicators]="showIndicators"></arlas-analytics-menu>
+
+  <arlas-analytics-board (boardOutputs)="resultlistService.getBoardEvents($event)"
+    [showSpinner]="spinner.show" [showIndicators]="showIndicators" [diameterSpinner]="+spinner.diameter"
+    [colorSpinner]="spinner.color" [strokeWidthSpinner]="spinner.strokeWidth"></arlas-analytics-board>
+</div>
diff --git a/src/app/components/arlas-analytics/arlas-analytics.component.scss b/src/app/components/arlas-analytics/arlas-analytics.component.scss
@@ -0,0 +1,24 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.arlas-analytics--container {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+}