Add a button to remove all raster layers added to the map

package.json

@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@ngx-translate/core": "14.0.0",
-    "arlas-wui-toolkit": "~26.0.8",
+    "arlas-wui-toolkit": "~26.0.9",
     "hammerjs": "^2.0.8",
     "ng-packagr": "^14.2.2",
     "ngx-markdown": "14.0.1",
@@ -82,6 +82,7 @@
     "@mapbox/geojson-extent": {
       "traverse": "0.6.8"
     },
-    "dompurify": "2.5.6"
+    "dompurify": "2.5.6",
+    "mermaid": "10.9.3"
   }
 }

src/app/app.module.ts

@@ -77,6 +77,7 @@ 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';
 
 
 @NgModule({
@@ -88,7 +89,8 @@ import { LAZYLOAD_IMAGE_HOOKS, LazyLoadImageModule } from 'ng-lazyload-image';
     ConfigsListComponent,
     RoundKilometer,
     SquareKilometer,
-    GeocodingComponent
+    GeocodingComponent,
+    RastersManagerComponent
   ],
   exports: [
     AoiDimensionComponent,

src/app/components/arlas-wui-root/arlas-wui-root.component.html

@@ -80,6 +80,9 @@
                 </div>
               </div>
             </div>
+            <div class="arlas-rasters-manager" [class.arlas-rasters-manager--geocoding]="enableGeocodingFeature" *ngIf="visualizeService.isRasterOnMap">
+              <arlas-rasters-manager></arlas-rasters-manager>
+            </div>
 
             <div class="shortcut-list" *ngIf="showShortcuts || analyticsService.activeTab === undefined">
               <ng-container *ngFor="let shortcut of shortcuts; let idx=index">
@@ -163,6 +166,7 @@
                   [fetchState]="previewListContrib.fetchState" [globalActionsList]="[]"
                   [isGeoSortEnabled]="resultListConfigPerContId.get(previewListContrib.identifier)?.isGeoSortActived"
                   [options]="resultListConfigPerContId.get(previewListContrib.identifier)?.options"
+                  [activatedActionsPerItem]="resultlistService.activeActionsPerContId?.get(previewListContrib.identifier)"
                   [displayFilters]="false"
                   (thumbnailFitEvent)="resultListConfigPerContId.get(previewListContrib.identifier).fitThumbnail = $event"
                   (visibleItems)="updateMapStyleFromScroll($event, previewListContrib.collection)"
@@ -205,6 +209,7 @@
                         [defautMode]="resultListConfigPerContId.get(list.identifier)?.defautMode"
                         [selectedGridItem]="resultListConfigPerContId.get(list.identifier)?.selectedGridItem"
                         [fetchState]="list.fetchState"
+                        [activatedActionsPerItem]="resultlistService.activeActionsPerContId?.get(list.identifier)"
                         (visibleItems)="updateMapStyleFromScroll($event, list.collection)"
                         (onChangeItems)="updateMapStyleFromChange($event, list.collection)"
                         [globalActionsList]="resultListConfigPerContId.get(list.identifier)?.globalActionsList"

src/app/components/arlas-wui-root/arlas-wui-root.component.scss

@@ -228,7 +228,9 @@
 .app-container-reduce-analytics,
 .app-container-reduce {
   .arlas-map-action,
-  .arlas-map-settings {
+  .arlas-map-settings,
+  .arlas-rasters-manager
+  {
     right: calc($result-list-width + $sm-spacing);
   }
   .aoi-dimensions {
@@ -254,7 +256,8 @@
 .app-container-with-list-analytics,
 .app-container-with-list {
   .arlas-map-action,
-  .arlas-map-settings {
+  .arlas-map-settings,
+  .arlas-rasters-manager {
     right: calc($preview-result-list-width + $sm-spacing);
   }
   .aoi-dimensions {
@@ -396,6 +399,21 @@
 .if-geocoding-button {
   bottom: 30px;
 }
+.arlas-rasters-manager {
+  position: absolute;
+  top: calc(
+    $sm-spacing + $map-attributions-height + $sm-spacing + $map-actions-width + $sm-spacing + $map-actions-length +
+    $sm-spacing + $map-settings-height + $sm-spacing
+  );
+  right: $sm-spacing;
+  z-index: 2;
+}
+.arlas-rasters-manager--geocoding {
+  top: calc(
+    $sm-spacing + $map-attributions-height + $sm-spacing + $map-actions-width + $sm-spacing + $map-actions-length +
+    $sm-spacing + $map-settings-height + $map-actions-width + $sm-spacing 
+  );
+}
 
 .arlas-map-settings {
   position: absolute;

src/app/components/arlas-wui-root/arlas-wui-root.component.ts

@@ -277,7 +277,7 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
     private dialog: MatDialog,
     private generateAoiDialog: MatDialog,
     private processService: ProcessService,
-    private resultlistService: ResultlistService,
+    public resultlistService: ResultlistService,
     private exportService: ArlasExportCsvService,
     private collectionService: ArlasCollectionService
   ) {
@@ -460,18 +460,24 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
         this.resultlistContributors.forEach(c => {
           const listActionsId = c.actionToTriggerOnClick.map(a => a.id);
           const mapcontributor = this.mapglContributors.find(mc => mc.collection === c.collection);
-          if (!!mapcontributor && !listActionsId.includes('zoomToFeature')) {
-            c.addAction({ id: 'zoomToFeature', label: 'Zoom to', cssClass: '', tooltip: 'Zoom to product' });
-          }
           if (!!this.resultListConfigPerContId.get(c.identifier)) {
             if (!!this.resultListConfigPerContId.get(c.identifier).visualisationLink && !listActionsId.includes('visualize')) {
-              c.addAction({ id: 'visualize', label: 'Visualize', cssClass: '', tooltip: 'Visualize on the map' });
+              c.addAction({
+                id: 'visualize', label: marker('Visualize'), icon: 'visibility', cssClass: '', tooltip: marker('Visualize on the map'),
+                reverseAction: {
+                  id: 'remove', label: marker('Remove from map'), cssClass: '', tooltip: marker('Remove from map'), icon: 'visibility_off'
+                },
+                fields: this.visualizeService.getVisuFields(this.resultListConfigPerContId.get(c.identifier).visualisationLink),
+                hide: true
+              } as any);
             }
             if (!!this.resultListConfigPerContId.get(c.identifier).downloadLink && !listActionsId.includes('download')) {
               c.addAction({ id: 'download', label: 'Download', cssClass: '', tooltip: 'Download' });
             }
           }
-
+          if (!!mapcontributor && !listActionsId.includes('zoomToFeature')) {
+            c.addAction({ id: 'zoomToFeature', label: marker('Zoom to'), cssClass: '', tooltip: marker('Zoom to product') });
+          }
         });
         this.declareResultlistExportCsv();
 
@@ -1441,11 +1447,17 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
       case 'visualize':
         if (!!this.resultListConfigPerContId.get(listContributor.identifier)) {
           const urlVisualisationTemplate = this.resultListConfigPerContId.get(listContributor.identifier).visualisationLink;
-          this.visualizeService.getVisuInfo(data.elementidentifier, collection, urlVisualisationTemplate).subscribe(url => {
-            this.visualizeService.displayDataOnMap(url,
-              data.elementidentifier, this.collectionToDescription.get(collection).geometry_path,
-              this.collectionToDescription.get(collection).centroid_path, collection);
-          });
+          if (!data.action.activated) {
+            this.visualizeService.getVisuInfo(data.elementidentifier, collection, urlVisualisationTemplate).subscribe(url => {
+              this.visualizeService.displayDataOnMap(url,
+                data.elementidentifier, this.collectionToDescription.get(collection).geometry_path,
+                this.collectionToDescription.get(collection).centroid_path, collection);
+            });
+            this.resultlistService.addAction(listContributor.identifier, data.elementidentifier.idValue, data.action);
+          } else {
+            this.visualizeService.removeRasters(data.elementidentifier.idValue);
+            this.resultlistService.removeAction(listContributor.identifier, data.elementidentifier.idValue, data.action.id);
+          }
         }
         break;
       case 'download':

src/app/components/map/raster-layers-manager/rasters-manager.component.html

@@ -0,0 +1,3 @@
+<div class="wrapper" (click)="removeLayers()">
+    <mat-icon [matTooltip]="'Remove all rasters' | translate" class="icon">visibility_off</mat-icon>
+</div>

src/app/components/map/raster-layers-manager/rasters-manager.component.scss

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+@import "../../../../styles/variables.scss";
+@import "../../../../styles/app/sizes.scss";
+@import "../../../../styles/app/mixin.scss";
+
+.wrapper {
+    cursor: pointer;
+    width: $map-actions-width;
+    height: $map-actions-width;
+    margin-bottom: $sm-spacing;
+    @include box-border();
+    box-shadow: none;
+    padding: 0;
+    background-color: white;
+
+    .icon {
+      height: $map-actions-width;
+      width: $map-actions-width;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+}

src/app/components/map/raster-layers-manager/rasters-manager.component.ts

@@ -0,0 +1,70 @@
+/*
+ * 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.
+ */
+
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { VisualizeService } from '../../../services/visualize.service';
+import { ResultlistService } from '../../../services/resultlist.service';
+import { Subject, takeUntil } from 'rxjs';
+import { ArlasCollaborativesearchService } from 'arlas-wui-toolkit';
+import { CollaborationEvent, OperationEnum } from 'arlas-web-core';
+
+@Component({
+  selector: 'arlas-rasters-manager',
+  templateUrl: './rasters-manager.component.html',
+  styleUrls: ['./rasters-manager.component.scss']
+})
+export class RastersManagerComponent implements OnInit, OnDestroy {
+
+  /** Destroy subscriptions */
+  private _onDestroy$ = new Subject<boolean>();
+
+  public constructor(
+    private visualisationService: VisualizeService,
+    private resultlistService: ResultlistService,
+    private collaborativeSearchService: ArlasCollaborativesearchService
+  ) { }
+
+  public ngOnInit(): void {
+    this.visualisationService.rasterRemoved$.pipe(takeUntil(this._onDestroy$)).subscribe({
+      next: (id) => {
+        this.resultlistService.removeItemActions(id, 'visualize');
+      }
+    });
+    /** Remove the raster once an arlas filter is applied */
+    this.collaborativeSearchService.collaborationBus.pipe(takeUntil(this._onDestroy$)).subscribe({
+      next: (ce: CollaborationEvent) => {
+        if (ce.operation === OperationEnum.add) {
+          this.removeLayers();
+        }
+      }
+    });
+  }
+
+  /** Removes all raster layers from the map. */
+  public removeLayers() {
+    this.visualisationService.removeRasters();
+    this.resultlistService.removeActions('visualize');
+  }
+
+  public ngOnDestroy(): void {
+    this._onDestroy$.next(true);
+    this._onDestroy$.complete();
+  }
+
+}

src/app/services/resultlist.service.ts

@@ -19,8 +19,8 @@
 
 import { Injectable } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { CellBackgroundStyleEnum } from 'arlas-web-components';
-import { ResultListContributor } from 'arlas-web-contributors';
+import { CellBackgroundStyleEnum, ActionHandler } from 'arlas-web-components';
+import { Action, ResultListContributor } from 'arlas-web-contributors';
 import { getParamValue } from 'arlas-wui-toolkit';
 
 
@@ -33,7 +33,7 @@ export class ResultlistService {
   public resultlistConfigs = [];
   public resultlistConfigPerContId = new Map<string, any>();
   public previewlistContrib: ResultListContributor = null;
-
+  public activeActionsPerContId = new Map<string, Map<string, Set<string>>>();
   public selectedListTabIndex = 0;
   public listOpen = false;
 
@@ -64,10 +64,68 @@ export class ResultlistService {
     this.listOpen = !this.listOpen;
     const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams);
     queryParams['ro'] = this.listOpen + '';
-    this.router.navigate([], {replaceUrl: true, queryParams: queryParams});
+    this.router.navigate([], { replaceUrl: true, queryParams: queryParams });
   }
 
   public isThumbnailProtected(): boolean {
     return this.resultlistContributors[this.selectedListTabIndex].fieldsConfiguration?.useHttpThumbnails ?? false;
   }
+
+  public addAction(contId: string, itemId: string, action: Action) {
+    if (ActionHandler.isReversible(action)) {
+      if (!this.activeActionsPerContId.get(contId)) {
+        this.activeActionsPerContId.set(contId, new Map());
+      }
+      const activeActions = this.activeActionsPerContId.get(contId);
+      if (!activeActions.get(itemId)) {
+        activeActions.set(itemId, new Set());
+      }
+      const actions = activeActions.get(itemId);
+      actions.add(action.id);
+      this.activeActionsPerContId.set(contId, new Map(activeActions));
+
+    }
+  }
+
+  /** Remove an activated action for a given item and given contributor */
+  public removeAction(contId: string, itemId: string, actionId: string) {
+    if (!this.activeActionsPerContId.get(contId)) {
+      return;
+    }
+    const activeActions = this.activeActionsPerContId.get(contId);
+    if (!activeActions.get(itemId)) {
+      return;
+    }
+    const actions = activeActions.get(itemId);
+    if (!actions) {
+      return;
+    }
+    actions.delete(actionId);
+    this.activeActionsPerContId.set(contId, new Map(activeActions));
+  }
+
+  /** Removes an activated action for all items and all contributors */
+  public removeActions(actionId: string) {
+    if (this.activeActionsPerContId) {
+      this.activeActionsPerContId.forEach((actionsPerItem, contId) => {
+        actionsPerItem.forEach((actions, itemId) => {
+          actions.delete(actionId);
+        });
+        this.activeActionsPerContId.set(contId, new Map(actionsPerItem));
+      });
+    }
+  }
+
+  /** Removes an activated action for a given item in all contributors */
+  public removeItemActions(itemId: string, actionId: string) {
+    if (this.activeActionsPerContId) {
+      this.activeActionsPerContId.forEach((actionsPerItem, contId) => {
+        const actions = actionsPerItem.get(itemId);
+        if (!!actions) {
+          actions.delete(actionId);
+        }
+        this.activeActionsPerContId.set(contId, new Map(actionsPerItem));
+      });
+    }
+  }
 }