feat(catalog) Provide optional option to show legend from catalog la…

…yer (#558)

* feat(catalog) Provide optional option to show legend from catalog layer

* refactor(spatial-filter) lint

* docs(readme) package name

README.md

@@ -18,7 +18,7 @@ IGO2 library is divided into several elements:
 
 - @igo2/context : Library of components uniting @igo2/geo and @igo2/auth
 
-- @igo2/tools : Library integrate basic components
+- @igo2/integration : Library integrate basic components
 
 ## Demo
 

packages/geo/src/lib/catalog/catalog-browser/catalog-browser-group.component.html

@@ -44,6 +44,7 @@ <h4 class="igo-catalog-group-title" id="catalog-group-title" mat-line matTooltip
         igoListItem
         [layer]="item"
         [resolution]="resolution"
+        [catalogAllowLegend]="catalogAllowLegend"
         [added]="state.get(item).added"
         (addedLayerIsPreview)="onLayerPreview($event)"
         (addedChange)="onLayerAddedChange($event)">

packages/geo/src/lib/catalog/catalog-browser/catalog-browser-group.component.ts

@@ -67,6 +67,8 @@ export class CatalogBrowserGroupComponent implements OnInit, OnDestroy {
 
   @Input() resolution: number;
 
+  @Input() catalogAllowLegend = false;
+
   /**
    * Whether the group can be toggled when it's collapsed
    */

packages/geo/src/lib/catalog/catalog-browser/catalog-browser-layer.component.html

@@ -1,7 +1,6 @@
 <mat-list-item>
   <mat-icon mat-list-avatar svgIcon="blank"></mat-icon>
-  <h4 mat-line matTooltipShowDelay="500" [matTooltip]="title">{{title}}</h4>
-
+  <h4 mat-line matTooltipShowDelay="500" [ngClass]="(catalogAllowLegend)?'igo-cataloglayer-title':''" (click)="askForLegend($event)" [matTooltip]="title">{{title}}</h4>
   <igo-metadata-button [layer]="layer"></igo-metadata-button>
 
   <button
@@ -24,3 +23,10 @@ <h4 mat-line matTooltipShowDelay="500" [matTooltip]="title">{{title}}</h4>
   </button>
 
 </mat-list-item>
+
+<div #legend class="igo-cataloglayer-legend-container">
+  <igo-layer-legend
+    *ngIf="(layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend"
+    [layer]="igoLayer$ | async">
+  </igo-layer-legend>
+</div>

packages/geo/src/lib/catalog/catalog-browser/catalog-browser-layer.component.scss

@@ -1,4 +1,16 @@
+@import '../../../../../core/src/style/partial/core.variables';
+
 .mat-badge-small .mat-badge-content {
     color: rgba(0, 0, 0, 0.38);
   }
-
+
+  .igo-cataloglayer-title  {
+    cursor: pointer;
+  }
+
+
+  .igo-cataloglayer-legend-container {
+    padding-left: 18px;
+    width: calc(100% - 18px);
+    margin-left: $igo-icon-size;
+  }

packages/geo/src/lib/catalog/catalog-browser/catalog-browser-layer.component.ts

@@ -11,6 +11,9 @@ import { getEntityTitle, getEntityIcon } from '@igo2/common';
 
 import { CatalogItemLayer } from '../shared';
 import { BehaviorSubject } from 'rxjs';
+import { LayerService } from '../../layer/shared/layer.service';
+import { first } from 'rxjs/operators';
+import { Layer } from '../../layer/shared/layers';
 
 /**
  * Catalog browser layer item
@@ -27,8 +30,13 @@ export class CatalogBrowserLayerComponent implements OnInit {
 
   private lastTimeoutRequest;
 
+  public layerLegendShown$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  public igoLayer$ = new BehaviorSubject<Layer>(undefined);
+
   @Input() resolution: number;
 
+  @Input() catalogAllowLegend = false;
+
   /**
    * Catalog layer
    */
@@ -63,7 +71,7 @@ export class CatalogBrowserLayerComponent implements OnInit {
     return getEntityIcon(this.layer) || 'layers';
   }
 
-  constructor() {}
+  constructor(private layerService: LayerService ) {}
 
   ngOnInit(): void {
     this.isInResolutionsRange();
@@ -78,6 +86,12 @@ export class CatalogBrowserLayerComponent implements OnInit {
     this.onToggleClick(event);
   }
 
+  askForLegend(event) {
+    this.layerLegendShown$.next(!this.layerLegendShown$.value);
+    this.layerService.createAsyncLayer(this.layer.options).pipe(first())
+    .subscribe(layer => this.igoLayer$.next(layer));
+  }
+
   /**
    * On toggle button click, emit the added change event
    * @internal

packages/geo/src/lib/catalog/catalog-browser/catalog-browser.component.html

@@ -6,6 +6,7 @@
         [group]="item"
         [state]="store.state"
         [resolution]="resolution$ | async"
+        [catalogAllowLegend]="catalogAllowLegend"
         [toggleCollapsed]="toggleCollapsedGroup"
         (addedChange)="onGroupAddedChange($event)"
         (layerAddedChange)="onLayerAddedChange($event)">
@@ -17,6 +18,7 @@
         igoListItem
         [layer]="item"
         [resolution]="resolution$ | async"
+        [catalogAllowLegend]="catalogAllowLegend"
         [added]="store.state.get(item).added"
         (addedChange)="onLayerAddedChange($event)">
       </igo-catalog-browser-layer>

packages/geo/src/lib/catalog/catalog-browser/catalog-browser.component.ts

@@ -41,6 +41,8 @@ export class CatalogBrowserComponent implements OnInit, OnDestroy {
 
   get resolution$(): BehaviorSubject<number> { return this.map.viewController.resolution$; }
 
+  @Input() catalogAllowLegend = false;
+
   /**
    * Catalog
    */
@@ -84,6 +86,9 @@ export class CatalogBrowserComponent implements OnInit, OnDestroy {
         valueAccessor: (item: CatalogItem) => item.title
       });
     }
+
+    this.catalogAllowLegend = this.catalog.showLegend ? this.catalog.showLegend : this.catalogAllowLegend;
+
     this.watcher = new EntityStoreWatcher(this.store, this.cdRef);
 
   }

packages/geo/src/lib/catalog/catalog-browser/catalog-browser.module.ts

@@ -20,6 +20,7 @@ import { IgoMetadataModule } from './../../metadata/metadata.module';
 import { CatalogBrowserComponent } from './catalog-browser.component';
 import { CatalogBrowserLayerComponent } from './catalog-browser-layer.component';
 import { CatalogBrowserGroupComponent } from './catalog-browser-group.component';
+import { IgoLayerModule } from '../../layer/layer.module';
 
 /**
  * @ignore
@@ -36,7 +37,8 @@ import { CatalogBrowserGroupComponent } from './catalog-browser-group.component'
     IgoLanguageModule,
     IgoListModule,
     IgoCollapsibleModule,
-    IgoMetadataModule
+    IgoMetadataModule,
+    IgoLayerModule
   ],
   exports: [
     CatalogBrowserComponent

packages/geo/src/lib/catalog/shared/catalog.interface.ts

@@ -26,6 +26,7 @@ export interface Catalog {
   tooltipType?: TooltipType.ABSTRACT | TooltipType.TITLE;
   sortDirection?: 'asc' | 'desc';
   setCrossOriginAnonymous?: boolean;
+  showLegend?: boolean;
 }
 
 export interface CatalogItem {

packages/geo/src/lib/filter/shared/spatial-filter.service.ts

@@ -96,19 +96,15 @@ export class SpatialFilterService {
                 'igo.geo.terrapi.' + name
               );
             } catch (e) {
-              item.name =
-                name.substring(0, 1).toUpperCase() +
-                name.substring(1, name.length - 1);
+              item.name = name.substring(0, 1).toUpperCase() + name.substring(1, name.length - 1);
             }
 
             try {
               item.group = this.languageService.translate.instant(
                 'igo.geo.spatialFilter.group.' + substr
               );
             } catch (e) {
-              item.group =
-                substr.substring(0, 1).toUpperCase() +
-                substr.substring(1, name.length - 1);
+              item.group = substr.substring(0, 1).toUpperCase() + substr.substring(1, name.length - 1);
             }
 
             items.push(item);
@@ -124,9 +120,7 @@ export class SpatialFilterService {
                   'igo.geo.terrapi.' + name
                 );
               } catch (e) {
-                item.name =
-                  name.substring(0, 1).toUpperCase() +
-                  name.substring(1, name.length - 1);
+                item.name = name.substring(0, 1).toUpperCase() + name.substring(1, name.length - 1);
               }
               item.source = type;