ui(map-details-tool): empty map message

packages/integration/src/lib/map/map-details-tool/map-details-tool.component.html

@@ -1,4 +1,4 @@
-<igo-layer-list
+<igo-layer-list *ngIf="(layers$ | async).length; else empty"
   igoLayerListBinding
   [excludeBaseLayers]="excludeBaseLayers"
   [layerFilterAndSortOptions]="layerFilterAndSortOptions"
@@ -17,3 +17,27 @@
   </ng-template>
 
 </igo-layer-list>
+
+<ng-template #empty>
+  <mat-list>
+    <p class="map-empty mat-typography">{{'igo.integration.mapTool.empty' | translate}}</p>
+    <mat-list-item *ngIf="searchToolInToolbar">
+      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'> </path> </svg></mat-icon>
+      <h4 matLine class="search-tool mat-typography" (click)="searchEmit()">
+        {{'igo.integration.mapTool.search-tool' | translate}}
+      </h4>
+    </mat-list-item>
+    <mat-list-item *ngIf="catalogToolInToolbar">
+      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z'></path> </svg></mat-icon>
+      <h4 matLine class="catalog-tool mat-typography" (click)="catalogEmit()">
+        {{'igo.integration.mapTool.catalog-tool' | translate}}
+      </h4>
+    </mat-list-item>
+    <mat-list-item *ngIf="contextToolInToolbar">
+      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'></path> </svg></mat-icon>
+      <h4 matLine class="context-tool mat-typography" (click)="contextEmit()">
+        {{'igo.integration.mapTool.context-tool' | translate}}
+      </h4>
+    </mat-list-item>
+  </mat-list>
+</ng-template>

packages/integration/src/lib/map/map-details-tool/map-details-tool.component.scss

@@ -0,0 +1,23 @@
+.map-empty, .search-tool, .catalog-tool, .context-tool {
+    margin: 10px;
+}
+
+.map-empty {
+    text-align: justify;
+}
+
+.search-tool, .catalog-tool, .context-tool {
+    cursor: pointer;
+}
+
+mat-list mat-list-item h4 {
+    font-weight: bold;
+}
+
+mat-list-item ::ng-deep .mat-list-text {
+    font-size: smaller;
+}
+
+mat-list.mat-list-base mat-list-item.mat-list-item ::ng-deep div.mat-list-item-content div.mat-list-text {
+    padding-left: 5px;
+}

packages/integration/src/lib/map/map-details-tool/map-details-tool.component.ts

@@ -1,8 +1,12 @@
 import { Component, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 import { ToolComponent } from '@igo2/common';
-import { LayerListControlsEnum } from '@igo2/geo';
+import { LayerListControlsEnum, Layer, IgoMap } from '@igo2/geo';
 
+import { ToolState } from './../../tool/tool.state';
+import { MapState } from './../map.state';
 import { LayerListControlsOptions } from '../shared/map-details-tool.interface';
 
 @ToolComponent({
@@ -12,7 +16,8 @@ import { LayerListControlsOptions } from '../shared/map-details-tool.interface';
 })
 @Component({
   selector: 'igo-map-details-tool',
-  templateUrl: './map-details-tool.component.html'
+  templateUrl: './map-details-tool.component.html',
+  styleUrls: ['./map-details-tool.component.scss']
 })
 export class MapDetailsToolComponent {
   @Input() toggleLegendOnVisibilityChange: boolean = false;
@@ -29,6 +34,20 @@ export class MapDetailsToolComponent {
 
   @Input() queryBadge: boolean = false;
 
+  get map(): IgoMap {
+    return this.mapState.map;
+  }
+
+  get layers$(): Observable<Layer[]> {
+    return this.map.layers$.pipe(
+      map(
+        layers => layers.filter(
+          layer => layer.showInLayerList !== false && (!this.excludeBaseLayers || !layer.baseLayer)
+        )
+      )
+    )
+  }
+
   get excludeBaseLayers(): boolean {
     return this.layerListControls.excludeBaseLayers || false;
   }
@@ -52,4 +71,30 @@ export class MapDetailsToolComponent {
     }
     return filterSortOptions;
   }
+
+  get searchToolInToolbar(): boolean {
+    return this.toolState.toolbox.getToolbar().indexOf('searchResults') !== -1;
+  }
+
+  get catalogToolInToolbar(): boolean {
+    return this.toolState.toolbox.getToolbar().indexOf('catalog') !== -1;
+  }
+
+  get contextToolInToolbar(): boolean {
+    return this.toolState.toolbox.getToolbar().indexOf('contextManager') !== -1;
+  }
+
+  constructor(private mapState: MapState, private toolState: ToolState) {}
+
+  searchEmit() {
+    this.toolState.toolbox.activateTool('searchResults');
+  }
+
+  catalogEmit() {
+    this.toolState.toolbox.activateTool('catalog');
+  }
+
+  contextEmit() {
+    this.toolState.toolbox.activateTool('contextManager');
+  }
 }

packages/integration/src/lib/map/map.module.ts

@@ -4,7 +4,9 @@ import {
   CUSTOM_ELEMENTS_SCHEMA
 } from '@angular/core';
 
-import { MatTabsModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+
+import { MatTabsModule, MatListModule, MatIconModule } from '@angular/material';
 
 import { IgoLanguageModule } from '@igo2/core';
 import {
@@ -21,7 +23,10 @@ import { MapToolComponent } from './map-tool/map-tool.component';
 
 @NgModule({
   imports: [
+    CommonModule,
     MatTabsModule,
+    MatListModule,
+    MatIconModule,
     IgoLanguageModule,
     IgoLayerModule,
     IgoMetadataModule,

packages/integration/src/locale/en.integration.json

@@ -20,7 +20,13 @@
         "noResults": "No results",
         "doSearch": "Do a search in the search bar"
       },
-      "about.html": "<style>#about .bold_class{font-weight: bold;}#about .red{color: red;}#about .tool_name{border-top: 1px solid; padding-top: 10px;}#about .titre_outil{font-weight: bold; font-size: 18px; padding-bottom: 8px;}#about .subtitle{font-size: 20px; padding-bottom: 10px;}#about .align_right{text-align: right;}#about .describe{text-align: justify;}#about a img{color: black; text-decoration: none;}</style><body> <div id='about'> <div class='bold_class subtitle'>Features overview</div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'> </path> </svg></mat-icon> Search Results </div><div class='describe'>Located in the upper left portion of the interface, the search bar allows you to locate yourself using an address, location or GPS coordinates. The tool can also be used to search for a layer. </div></div><br><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'></path> </svg></mat-icon> Contexts </div><div class='describe'> Visualize groupings of layers made by theme or by work context. When you select a <span class='bold_class'>Context</span>, you will find in <span class='bold_class'>Map</span> each of the layers it contains. You can add other layers to it from the <span class='bold_class'>Catalog</span> or the <span class='bold_class'>Search</span> tool. <br><div class='red'> <span class='bold_class'>WARNING :</span> If you select another <span class='bold_class'>Context</span>, all the layers displayed in the <span class='bold_class'>Map</span> will be replaced. </div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M15,19L9,16.89V5L15,7.11M20.5,3C20.44,3 20.39,3 20.34,3L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21C3.55,21 3.61,21 3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z'> </path> </svg></mat-icon> Map </div><div class='describe'>Personalize your map using the <span class='bold_class'>Catalog</span> or the <span class='bold_class'>Search</span> tool. This space allows you to add, delete and interrogate layers.</div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M1.39,18.36L3.16,16.6L4.58,18L5.64,16.95L4.22,15.54L5.64,14.12L8.11,16.6L9.17,15.54L6.7,13.06L8.11,11.65L9.53,13.06L10.59,12L9.17,10.59L10.59,9.17L13.06,11.65L14.12,10.59L11.65,8.11L13.06,6.7L14.47,8.11L15.54,7.05L14.12,5.64L15.54,4.22L18,6.7L19.07,5.64L16.6,3.16L18.36,1.39L22.61,5.64L5.64,22.61L1.39,18.36Z'> </path> </svg></mat-icon> Measure </div><div class='describe'>Measure distances or areas on the map.</div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M14,14.5V12H10V15H8V11A1,1 0 0,1 9,10H14V7.5L17.5,11M21.71,11.29L12.71,2.29H12.7C12.31,1.9 11.68,1.9 11.29,2.29L2.29,11.29C1.9,11.68 1.9,12.32 2.29,12.71L11.29,21.71C11.68,22.09 12.31,22.1 12.71,21.71L21.71,12.71C22.1,12.32 22.1,11.68 21.71,11.29Z'> </path> </svg></mat-icon> Directions </div><div class='describe'> Build a route between two points (by placing the two points on the map or by looking for addresses). You can then add intermediate points, copy the description of the route to the clipboard or share the link.</div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z'></path> </svg></mat-icon> Catalog </div><div class='describe'> Find all the layers that can be added to the <span class='bold_class'>Map</span>. Click on the desired layer to add it. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M14,17H18V14L23,18.5L18,23V20H14V17M13,9H18.5L13,3.5V9M6,2H14L20,8V12.34C19.37,12.12 18.7,12 18,12A6,6 0 0,0 12,18C12,19.54 12.58,20.94 13.53,22H6C4.89,22 4,21.1 4,20V4A2,2 0 0,1 6,2Z'></path> </svg></mat-icon> Import & export </div><div class='describe'> Import or export a layer. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M18,3H6V7H18M19,12A1,1 0 0,1 18,11A1,1 0 0,1 19,10A1,1 0 0,1 20,11A1,1 0 0,1 19,12M16,19H8V14H16M19,8H5A3,3 0 0,0 2,11V17H6V21H18V17H22V11A3,3 0 0,0 19,8Z'></path> </svg></mat-icon> Print </div><div class='describe'>Print the map displayed on the screen. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z'> </path> </svg></mat-icon> Share </div><div class='describe'> Create a URL that redirects to an exact representation of your map on the screen. This link can be shared or distributed in a document and allows you to \"save\" your map for later use. </div><br></div><div class='tool_name'> <p> <a href='http://igouverte.org/' target='_blank'><img src='./assets/igo2/core/logo.png' alt='IGO' height=32>IGO2</a> is a free web solution in geomatics, developed in collaborative mode by specialists from several departments and agencies of the government of Quebec. <p> Version :{{version.lib}}</p></div>"
+      "about.html": "<style>#about .bold_class{font-weight: bold;}#about .red{color: red;}#about .tool_name{border-top: 1px solid; padding-top: 10px;}#about .titre_outil{font-weight: bold; font-size: 18px; padding-bottom: 8px;}#about .subtitle{font-size: 20px; padding-bottom: 10px;}#about .align_right{text-align: right;}#about .describe{text-align: justify;}#about a img{color: black; text-decoration: none;}</style><body> <div id='about'> <div class='bold_class subtitle'>Features overview</div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'> </path> </svg></mat-icon> Search Results </div><div class='describe'>Located in the upper left portion of the interface, the search bar allows you to locate yourself using an address, location or GPS coordinates. The tool can also be used to search for a layer. </div></div><br><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'></path> </svg></mat-icon> Contexts </div><div class='describe'> Visualize groupings of layers made by theme or by work context. When you select a <span class='bold_class'>Context</span>, you will find in <span class='bold_class'>Map</span> each of the layers it contains. You can add other layers to it from the <span class='bold_class'>Catalog</span> or the <span class='bold_class'>Search</span> tool. <br><div class='red'> <span class='bold_class'>WARNING :</span> If you select another <span class='bold_class'>Context</span>, all the layers displayed in the <span class='bold_class'>Map</span> will be replaced. </div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M15,19L9,16.89V5L15,7.11M20.5,3C20.44,3 20.39,3 20.34,3L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21C3.55,21 3.61,21 3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z'> </path> </svg></mat-icon> Map </div><div class='describe'>Personalize your map using the <span class='bold_class'>Catalog</span> or the <span class='bold_class'>Search</span> tool. This space allows you to add, delete and interrogate layers.</div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M1.39,18.36L3.16,16.6L4.58,18L5.64,16.95L4.22,15.54L5.64,14.12L8.11,16.6L9.17,15.54L6.7,13.06L8.11,11.65L9.53,13.06L10.59,12L9.17,10.59L10.59,9.17L13.06,11.65L14.12,10.59L11.65,8.11L13.06,6.7L14.47,8.11L15.54,7.05L14.12,5.64L15.54,4.22L18,6.7L19.07,5.64L16.6,3.16L18.36,1.39L22.61,5.64L5.64,22.61L1.39,18.36Z'> </path> </svg></mat-icon> Measure </div><div class='describe'>Measure distances or areas on the map.</div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M14,14.5V12H10V15H8V11A1,1 0 0,1 9,10H14V7.5L17.5,11M21.71,11.29L12.71,2.29H12.7C12.31,1.9 11.68,1.9 11.29,2.29L2.29,11.29C1.9,11.68 1.9,12.32 2.29,12.71L11.29,21.71C11.68,22.09 12.31,22.1 12.71,21.71L21.71,12.71C22.1,12.32 22.1,11.68 21.71,11.29Z'> </path> </svg></mat-icon> Directions </div><div class='describe'> Build a route between two points (by placing the two points on the map or by looking for addresses). You can then add intermediate points, copy the description of the route to the clipboard or share the link.</div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z'></path> </svg></mat-icon> Catalog </div><div class='describe'> Find all the layers that can be added to the <span class='bold_class'>Map</span>. Click on the desired layer to add it. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M14,17H18V14L23,18.5L18,23V20H14V17M13,9H18.5L13,3.5V9M6,2H14L20,8V12.34C19.37,12.12 18.7,12 18,12A6,6 0 0,0 12,18C12,19.54 12.58,20.94 13.53,22H6C4.89,22 4,21.1 4,20V4A2,2 0 0,1 6,2Z'></path> </svg></mat-icon> Import & export </div><div class='describe'> Import or export a layer. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M18,3H6V7H18M19,12A1,1 0 0,1 18,11A1,1 0 0,1 19,10A1,1 0 0,1 20,11A1,1 0 0,1 19,12M16,19H8V14H16M19,8H5A3,3 0 0,0 2,11V17H6V21H18V17H22V11A3,3 0 0,0 19,8Z'></path> </svg></mat-icon> Print </div><div class='describe'>Print the map displayed on the screen. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z'> </path> </svg></mat-icon> Share </div><div class='describe'> Create a URL that redirects to an exact representation of your map on the screen. This link can be shared or distributed in a document and allows you to \"save\" your map for later use. </div><br></div><div class='tool_name'> <p> <a href='http://igouverte.org/' target='_blank'><img src='./assets/igo2/core/logo.png' alt='IGO' height=32>IGO2</a> is a free web solution in geomatics, developed in collaborative mode by specialists from several departments and agencies of the government of Quebec. <p> Version :{{version.lib}}</p></div>",
+      "mapTool": {
+        "empty": "No layer is currently active on this map. Customize it by adding layer from the : ",
+        "search-tool": "Search tool",
+        "catalog-tool": "Data catalog",
+        "context-tool": "Context manager"
+      }
     }
   }
 }