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

packages/geo/src/lib/map/shared/controllers/view.ts

@@ -327,7 +327,6 @@ export class MapViewController extends MapController {
     const xSize = distCenter / moySize;
 
     const maxZoom = action === MapViewAction.Move ? zoom : 17;
-    console.log(this.padding);
     olView.fit(extent, {
       maxZoom,
       padding: this.padding,

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

@@ -1 +1,2 @@
 export * from './map-details-tool.component';
+export * from './map-details-tool.state';

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"
   igoLayerListBinding
   [excludeBaseLayers]="excludeBaseLayers"
   [layerFilterAndSortOptions]="layerFilterAndSortOptions"
@@ -17,3 +17,19 @@
   </ng-template>
 
 </igo-layer-list>
+
+<div *ngIf="!layers">
+  <p class="map-empty mat-typography">{{'igo.integration.mapTool.empty' | translate}}</p>
+  <h4 class="search-tool mat-typography" (click)="searchEmit()">
+    <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>
+    {{'igo.integration.mapTool.search-tool' | translate}}
+  </h4>
+  <h4 class="catalog-tool mat-typography" (click)="catalogEmit()">
+    <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>
+    {{'igo.integration.mapTool.catalog-tool' | translate}}
+  </h4>
+  <h4 class="context-tool mat-typography" (click)="contextEmit()">
+    <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>
+    {{'igo.integration.mapTool.context-tool' | translate}}
+  </h4>
+</div>

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

@@ -0,0 +1,13 @@
+.map-empty, .search-tool, .catalog-tool, .context-tool {
+    margin: 10px;
+}
+
+.map-empty {
+    font-size: small;
+    text-align: justify;
+}
+
+.search-tool, .catalog-tool, .context-tool {
+    cursor: pointer;
+    font-weight: bold;
+}

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

@@ -1,9 +1,11 @@
+import { MapState } from './../map.state';
 import { Component, Input } from '@angular/core';
 
 import { ToolComponent } from '@igo2/common';
-import { LayerListControlsEnum } from '@igo2/geo';
+import { LayerListControlsEnum, IgoMap } from '@igo2/geo';
 
 import { LayerListControlsOptions } from '../shared/map-details-tool.interface';
+import { MapDetailsState } from './map-details-tool.state';
 
 @ToolComponent({
   name: 'mapDetails',
@@ -12,7 +14,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 +32,19 @@ export class MapDetailsToolComponent {
 
   @Input() queryBadge: boolean = false;
 
+  get map(): IgoMap {
+    return this.mapState.map;
+  }
+
+  get layers(): boolean {
+    for (const layer of this.map.layers) {
+      if (layer.baseLayer !== true && layer.title !== 'searchPointerSummary') {
+        return true;
+      }
+    }
+    return false;
+  }
+
   get excludeBaseLayers(): boolean {
     return this.layerListControls.excludeBaseLayers || false;
   }
@@ -52,4 +68,18 @@ export class MapDetailsToolComponent {
     }
     return filterSortOptions;
   }
+
+  constructor(private mapState: MapState, private mapDetailsState: MapDetailsState) {}
+
+  searchEmit() {
+    this.mapDetailsState.activateSearchTool();
+  }
+
+  catalogEmit() {
+    this.mapDetailsState.activateCatalogTool();
+  }
+
+  contextEmit() {
+    this.mapDetailsState.activateContextTool();
+  }
 }

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

@@ -0,0 +1,28 @@
+import { Injectable, EventEmitter, Output } from '@angular/core';
+
+/**
+ * Service that holds the state of the map module
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class MapDetailsState {
+
+  @Output() searchToolActivate = new EventEmitter();
+  @Output() catalogToolActivate = new EventEmitter();
+  @Output() contextToolActivate = new EventEmitter();
+
+  constructor() {}
+
+  activateSearchTool() {
+    this.searchToolActivate.emit();
+  }
+
+  activateCatalogTool() {
+    this.catalogToolActivate.emit();
+  }
+
+  activateContextTool() {
+    this.contextToolActivate.emit();
+  }
+}

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

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

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"
+      }
     }
   }
 }