Merge pull request #234 from stuartwoodman/AUS-3886-Map-Legends

AUS-3886 Map Legends

package.json

@@ -30,7 +30,7 @@
     "@angular/platform-server": "^13.3.11",
     "@angular/router": "^13.3.11",
     "@auscope/angular-cesium": "^13.0.1",
-    "@auscope/portal-core-ui": "^1.0.61",
+    "@auscope/portal-core-ui": "^1.0.63",
     "@ng-bootstrap/ng-bootstrap": "^12.1.2",
     "@ng-select/ng-select": "^8.3.0",
     "@popperjs/core": "^2.11.6",

src/app/app.module.ts

@@ -56,6 +56,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatRadioModule } from '@angular/material/radio'
 import { MatTreeModule } from '@angular/material/tree';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CdkTableModule } from '@angular/cdk/table';
 
 import { DisclaimerModalComponent } from './modalwindow/disclaimer/disclaimer.modal.component';
@@ -74,6 +75,8 @@ import { GraceLegendComponent } from './cesium-map/advanced/grace/grace-legend.c
 import { GraceGraphModalComponent } from './modalwindow/querier/customanalytic/grace/grace-graph.modal.component';
 import { GraceAdvancedFilterComponent } from './menupanel/common/filterpanel/advance/grace/grace-advanced-filter.component';
 
+import { LegendModalComponent } from './modalwindow/legend/legend.modal.component';
+
 // Services
 import { AuscopeApiService } from './services/api/auscope-api.service';
 import { FilterService } from './services/filter/filter.service';
@@ -82,6 +85,7 @@ import { AdvancedComponentService } from './services/ui/advanced-component.servi
 import { SearchService } from './services/search/search.service';
 import { BoundsService } from './services/bounds/bounds.service';
 import { GraceService } from './services/wcustom/grace/grace.service';
+import { LegendUiService } from './services/legend/legend-ui.service';
 
 import * as PlotlyJS from 'plotly.js-dist-min/plotly.min.js';
 import { PlotlyModule } from 'angular-plotly.js';
@@ -96,8 +100,8 @@ import { NVCLTSGDownloadComponent } from './modalwindow/layeranalytic/nvcl/nvcl.
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgxColorsModule } from 'ngx-colors';
 
-import {MatProgressBarModule} from '@angular/material/progress-bar'; 
-import {MatCardModule} from '@angular/material/card'; 
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatCardModule } from '@angular/material/card';
 import { getSaver, SAVER } from './modalwindow/layeranalytic/nvcl/saver.provider';
 
 // Routing
@@ -153,11 +157,12 @@ PlotlyModule.plotlyjs = PlotlyJS;
         MSCLAnalyticComponent,
         HelpMenuComponent,
         DataExplorerComponent,
-        RecordModalComponent
+        RecordModalComponent,
+        LegendModalComponent
     ],
     providers: [ AuscopeApiService, FilterService, RectanglesEditorService, AdvancedComponentService, SearchService,
                  NVCLService, MSCLService, BoundsService, GraceService, { provide: SAVER, useFactory: getSaver },
-                 UserStateService, AuthGuard, AuthService
+                 LegendUiService, UserStateService, AuthGuard, AuthService
     ],
     imports: [
         PortalCoreModule.forRoot(environment, config),
@@ -190,7 +195,8 @@ PlotlyModule.plotlyjs = PlotlyJS;
         NgbModule,
         FormsModule,
         ReactiveFormsModule,
-        BrowserModule
+        BrowserModule,
+        DragDropModule
     ],
     bootstrap: [
         AppComponent

src/app/menupanel/activelayers/activelayerspanel.component.html

@@ -15,6 +15,9 @@
         <div *ngIf="getUILayerModel(layer.id).statusMap.getRenderStarted()" class="opacity-slider-panel d-flex" (click)="$event.stopPropagation()">
             <div class="opacity-label">Opacity {{ getUILayerModel(layer.id).opacity }}%&nbsp;</div>
             <mat-slider [min]="0" [max]="100" class="opacity-slider flex-grow-1" [(ngModel)]="getUILayerModel(layer.id).opacity" (input)="layerOpacityChange($event, layer)"></mat-slider>
+            <div *ngIf="hasLegend(layer)">
+                <button class="btn btn-primary btn-sm pull-right" style="margin-left:5px;margin-top:6px;font-size:0.8rem;padding:0 2px;" [disabled]="isLegendShown(layer.id)" (click)="showLegend(layer)">Legend</button>
+            </div>
         </div>
         <div class="split-panel" *ngIf="getShowSplitMapButtons(layer)" (click)="$event.stopPropagation()">
             Split Direction&nbsp;

src/app/menupanel/activelayers/activelayerspanel.component.ts

@@ -1,26 +1,26 @@
 import { Component } from '@angular/core';
-import { CsClipboardService, CsMapService, LayerHandlerService, LayerModel, ResourceType } from '@auscope/portal-core-ui';
+import { CsMapService, LayerHandlerService, LayerModel, ResourceType } from '@auscope/portal-core-ui';
 import { MatSliderChange } from '@angular/material/slider';
 import { SplitDirection } from 'cesium';
 import { UILayerModel } from '../common/model/ui/uilayer.model';
 import { UILayerModelService } from 'app/services/ui/uilayer-model.service';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { NgbdModalStatusReportComponent } from '../../toppanel/renderstatus/renderstatus.component';
 import { AdvancedComponentService } from 'app/services/ui/advanced-component.service';
+import { LegendUiService } from 'app/services/legend/legend-ui.service';
 
 @Component({
   selector: '[appActiveLayers]',
   templateUrl: './activelayerspanel.component.html',
   styleUrls: ['../menupanel.scss']
 })
-
-
 export class ActiveLayersPanelComponent {
   bsModalRef: BsModalRef;
 
   constructor(private csMapService: CsMapService,
     private uiLayerModelService: UILayerModelService, private layerHandlerService: LayerHandlerService,
-    private advancedComponentService: AdvancedComponentService, private modalService: BsModalService) { }
+    private advancedComponentService: AdvancedComponentService, private legendUiService: LegendUiService,
+    private modalService: BsModalService) { }
 
   /**
    * Get active layers
@@ -55,6 +55,7 @@ export class ActiveLayersPanelComponent {
       // Remove any layer specific components
       this.advancedComponentService.removeAdvancedMapComponents(layerId);
     }
+    this.legendUiService.removeLegend(layerId);
     // Remove polygon filter if was opened and no layers present
     /*
     if (Object.keys(layerModelList).length === 0) {
@@ -66,7 +67,7 @@ export class ActiveLayersPanelComponent {
 
   /**
    * Layer opacity slider change event
-  */
+   */
   layerOpacityChange(event: MatSliderChange, layer: LayerModel) {
     this.csMapService.setLayerOpacity(layer, (event.value / 100));
   }
@@ -81,7 +82,7 @@ export class ActiveLayersPanelComponent {
 
   /**
    * Set a layer's split direction so that it will appear in either the left, right or both (none) panes.
-   * 
+   *
    * @param event the event trigger
    * @param layer the layer to set split direction on
    * @param direction the split direction for the layer to occupy
@@ -126,7 +127,7 @@ export class ActiveLayersPanelComponent {
 
   /**
    * Only show the split map buttons if the layer has a WMS resource.
-   * 
+   *
    * @param layer current LayerModel
    */
   public getApplicableSplitLayer(layer: LayerModel): boolean {
@@ -143,4 +144,45 @@ export class ActiveLayersPanelComponent {
     });
   }
 
+  /**
+   * Check whether the layer has at least one associated WMS online resource
+   * that can be queried for a legend
+   *
+   * @param layer the layer
+   * @returns true if the layer has at least one WMS online resource, false otherwise
+   */
+  public hasLegend(layer: LayerModel): boolean {
+    // Hack for GRACE layer which uses a custom app-built legend
+    if (layer.id === 'grace-mascons') {
+      return false;
+    }
+    if (layer.cswRecords) {
+      for (const record of layer.cswRecords) {
+        if (record.onlineResources.find(r => r.type.toLowerCase() === 'wms')) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Tell the LegendUiService to display the legend for a layer
+   *
+   * @param layer the layer
+   */
+  public showLegend(layer: LayerModel) {
+    this.legendUiService.showLegend(layer);
+  }
+
+  /**
+   * Check whether a legend is already being displayed for alyer
+   *
+   * @param layerId the ID of the layer
+   * @returns true if a legend is being displayed for the supplied layer, false otherwise
+   */
+  public isLegendShown(layerId: string): boolean {
+    return this.legendUiService.isLegendDisplayed(layerId);
+  }
+
 }

src/app/menupanel/cataloguesearch/cataloguesearch.component.ts

@@ -10,6 +10,7 @@ import { Component, AfterViewInit } from '@angular/core';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { RectangleEditorObservable } from '@auscope/angular-cesium';
 import { UILayerModelService } from 'app/services/ui/uilayer-model.service';
+import { LegendUiService } from 'app/services/legend/legend-ui.service';
 
 
 @Component({
@@ -42,7 +43,7 @@ export class CatalogueSearchComponent implements AfterViewInit {
 
   constructor(private csMapService: CsMapService, private cataloguesearchService: CataloguesearchService,
               private renderStatusService: RenderStatusService,  private modalService: BsModalService,
-              private uiLayerModelService: UILayerModelService) {
+              private uiLayerModelService: UILayerModelService, private legedUiService: LegendUiService) {
     this.drawStarted = false;
     this.searchMode = true;
     this.loading = false;
@@ -186,6 +187,7 @@ export class CatalogueSearchComponent implements AfterViewInit {
    */
   public removeLayer(layer: LayerModel) {
     this.csMapService.removeLayer(layer);
+    this.legedUiService.removeLegend(layer.id);
   }
 
   /**

src/app/menupanel/common/filterpanel/filterpanel.component.ts

@@ -11,6 +11,7 @@ import { BsModalService } from 'ngx-bootstrap/modal';
 import { GraceService } from 'app/services/wcustom/grace/grace.service';
 import { AdvancedComponentService } from 'app/services/ui/advanced-component.service';
 import { FilterService, LayerTimes } from 'app/services/filter/filter.service';
+import { LegendUiService } from 'app/services/legend/legend-ui.service';
 
 declare var gtag: Function;
 
@@ -46,6 +47,7 @@ export class FilterPanelComponent implements OnInit {
     private csWMSService: CsWMSService,
     public layerStatus: LayerStatusService,
     private advancedComponentService: AdvancedComponentService,
+    private legendUiService: LegendUiService,
     private graceService: GraceService) {
     this.providers = [];
     this.optionalFilters = [];
@@ -214,6 +216,9 @@ export class FilterPanelComponent implements OnInit {
       advancedFilterParams
     );
 
+    // Remove any existing legends in case map re-added with new style
+    this.legendUiService.removeLegend(layer.id);
+
     // Add layer to map in Cesium
     this.csMapService.addLayer(layer, param);
 

src/app/menupanel/common/infopanel/subpanel/subpanel.component.ts

@@ -7,7 +7,6 @@ import { CSWRecordModel, LayerModel, OnlineResourceModel, UtilitiesService } fro
     templateUrl: './subpanel.component.html',
     styleUrls: ['../../../menupanel.scss']
 })
-
 export class InfoPanelSubComponent implements OnChanges {
     @Input() cswRecord: CSWRecordModel;
     @Input() layer: LayerModel;

src/app/menupanel/custompanel/custompanel.component.ts

@@ -7,6 +7,7 @@ import { UILayerModel } from '../common/model/ui/uilayer.model';
 import { UILayerModelService } from 'app/services/ui/uilayer-model.service';
 import { InfoPanelComponent } from '../common/infopanel/infopanel.component';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { LegendUiService } from 'app/services/legend/legend-ui.service';
 
 
 @Component({
@@ -28,7 +29,7 @@ export class CustomPanelComponent {
 
     constructor(private layerHandlerService: LayerHandlerService, private renderStatusService: RenderStatusService,
       private modalService: BsModalService, private csMapService: CsMapService, private uiLayerModelService: UILayerModelService,
-      public activeModalService: NgbModal) {
+      private legendUiService: LegendUiService, public activeModalService: NgbModal) {
       this.loading = false;
       this.statusmsg = 'Enter your WMS service endpoint URL and hit <i class="fa fa-search"></i>';
     }
@@ -83,6 +84,7 @@ export class CustomPanelComponent {
       */
     public removeLayer(layer: LayerModel) {
       this.csMapService.removeLayer(layer);
+      this.legendUiService.removeLegend(layer.id);
     }
 
     /**

src/app/menupanel/data-explorer-record/data-explorer-record.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, ViewContainerRef, OnInit } from "@angular/core";
 import {  CSWRecordModel,  CsMapService,  ManageStateService,  UtilitiesService,  LayerModel} from "@auscope/portal-core-ui";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { LegendUiService } from "app/services/legend/legend-ui.service";
 import { AdvancedComponentService } from "app/services/ui/advanced-component.service";
 import { environment } from "environments/environment";
 import * as _ from "lodash";
@@ -29,6 +30,7 @@ export class DataExplorerRecordComponent implements OnInit {
     public csMapService: CsMapService,
     private manageStateService: ManageStateService,
     private advancedMapComponentService: AdvancedComponentService,
+    private legendUiService: LegendUiService,
     public modalService: NgbModal
   ) {
     this.optionalFilters = [];
@@ -137,6 +139,9 @@ export class DataExplorerRecordComponent implements OnInit {
       null
     );
 
+    // Remove any existing legends in case map re-added with new style
+    this.legendUiService.removeLegend(layer.id);
+
     // Add layer
     this.csMapService.addLayer(layer, param);
 
@@ -161,5 +166,6 @@ export class DataExplorerRecordComponent implements OnInit {
       // Remove any layer specific components
       this.advancedMapComponentService.removeAdvancedMapComponents(layerId);
     }
+    this.legendUiService.removeLegend(layerId);
   }
 }

src/app/menupanel/layerpanel/layerpanel.component.ts

@@ -14,6 +14,7 @@ import { FilterPanelComponent } from '../common/filterpanel/filterpanel.componen
 import { config } from '../../../environments/config';
 import { DOCUMENT } from '@angular/common';
 import { DownloadPanelComponent } from '../common/downloadpanel/downloadpanel.component';
+import { LegendUiService } from 'app/services/legend/legend-ui.service';
 
 
 // Filter modes available in the dropdown layer filter selector
@@ -47,6 +48,7 @@ export class LayerPanelComponent implements OnInit {
       private modalService: BsModalService, private csMapService: CsMapService,
       private manageStateService: ManageStateService, private CsClipboardService: CsClipboardService,
       private uiLayerModelService: UILayerModelService, private advancedMapComponentService: AdvancedComponentService,
+      private legendUiService: LegendUiService,
       @Inject(DOCUMENT) document: Document) {
     this.CsClipboardService.filterLayersBS.subscribe(filterLayers => {
       this.areLayersFiltered = filterLayers;
@@ -216,6 +218,7 @@ export class LayerPanelComponent implements OnInit {
     this.csMapService.removeLayer(layer);
     // Remove any layer specific map components
     this.advancedMapComponentService.removeAdvancedMapComponents(layer.id);
+    this.legendUiService.removeLegend(layer.id);
   }
 
   /**

src/app/menupanel/search/searchpanel.component.ts

@@ -8,6 +8,7 @@ import { Observable, Subscription } from 'rxjs';
 import { InfoPanelComponent } from '../common/infopanel/infopanel.component';
 import { take } from 'rxjs/operators';
 import { UILayerModelService } from 'app/services/ui/uilayer-model.service';
+import { LegendUiService } from 'app/services/legend/legend-ui.service';
 
 const DEFAULT_RESULTS_PER_PAGE = 10;
 const SEARCH_FIELDS = [{
@@ -78,7 +79,7 @@ export class SearchPanelComponent implements OnInit {
   constructor(private searchService: SearchService, private advancedComponentService: AdvancedComponentService,
               private csMapService: CsMapService, private layerHandlerService: LayerHandlerService,
               private uiLayerModelService: UILayerModelService, private manageStateService: ManageStateService,
-              private modalService: NgbModal) { }
+              private legendUiService: LegendUiService, private modalService: NgbModal) { }
 
   ngOnInit() {
     for (const service of OGC_SERVICES) {
@@ -265,6 +266,9 @@ export class SearchPanelComponent implements OnInit {
       []
     );
 
+    // Remove any existing legends in case map re-added with new style
+    this.legendUiService.removeLegend(layer.id);
+
     // Add layer to map in Cesium
     this.csMapService.addLayer(layer, param);
 
@@ -308,6 +312,7 @@ export class SearchPanelComponent implements OnInit {
     this.csMapService.removeLayer(layer);
     // Remove any layer specific map components
     this.advancedComponentService.removeAdvancedMapComponents(layer.id);
+    this.legendUiService.removeLegend(layer.id);
   }
 
   /**

src/app/modalwindow/legend/legend.modal.component.html

@@ -0,0 +1,9 @@
+<div style="padding:5px;" cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
+	<div class="legend-title-panel">
+		<h5 class="legend-title">{{ legendTitle }}</h5><i *ngIf="legendLoading" class="fa fa-spin fa-spinner legend-spinner"></i><button class="btn btn-sm btn-outline close-legend-button" (click)="closeLegend()"><i class="fa fa-times"></i></button>
+	</div>
+	<div mat-dialog-content class="legend-content">
+		<h4 class="legend-error" *ngIf="!legendLoading && requestLegendFailed">No legend available</h4>
+		<img *ngIf="!requestLegendFailed && legendImage" [src]="legendImage" alt="Legend" (load)="legendLoading=false;" />
+	</div>
+</div>