feat: add h3 option to aggregations + option to disable it

docs/arlas-wui-builder-configuration.md

@@ -22,7 +22,7 @@ All supported environment variables are listed below.
 
 Instead of overriding some properties of the settings file, it is possible to start the `arlas-wui-builder` container with a given settings file.
 
-#### File 
+#### File
 
 The `arlas-wui-builder` container can start with a mounted settings file thanks to docker volume mapping. For instance, if the current directory of the host contains a `settings.yaml` file, the container can be started as follow:
 
@@ -62,6 +62,8 @@ If you don't mount a `settings.yaml` file to the container, nor serve it with `A
 | ARLAS_EXPORT_HISTOGRAMS_NB_BUCKETS | histogram.export_nb_buckets | 1000 | The export to csv feature will download `histogram.export_nb_buckets` buckets for histograms. |
 | ARLAS_USE_TIME_FILTER | use_time_filter | false | If true, the analytics and map previews will fetch only the last 7 days of the chosen-collection data. |
 | ARLAS_BASEMAPS | basemaps | [] | List of basemaps that the users can embark within their dashbaords. View the [`basemap` structure](#)|
+| ARLAS_ENABLE_H3 | enable_h3 | false | If true, allows the user to configure cluster layers agregated by h3 cell |
+
 ## ARLAS-wui-builder assets
 
 ARLAS-wui-builder comes with several assets:
@@ -153,7 +155,7 @@ In order to make it available in the builder, please follow these instructions :
                 "tiles": ["pmtiles://https://PATH-TO-PMTILES.pmtiles/{z}/{x}/{y}"]
             }
         }
-        
+
     }
 
     ```

scripts/start.sh

@@ -497,6 +497,17 @@ fi
 envsubst '$ARLAS_USE_TIME_FILTER' < /usr/share/nginx/html/settings.yaml > /usr/share/nginx/html/settings.yaml.tmp
 mv /usr/share/nginx/html/settings.yaml.tmp /usr/share/nginx/html/settings.yaml
 
+# Enable h3 agregations
+if [ -z "${ARLAS_ENABLE_H3}" ]; then
+  ARLAS_ENABLE_H3=false
+  export ARLAS_ENABLE_H3
+  echo "H3 agregations are not allowed"
+else
+  echo ${ARLAS_ENABLE_H3} "is used for 'enable_h3' in settings.yaml file"
+fi
+envsubst '$ARLAS_ENABLE_H3' < /usr/share/nginx/html/settings.yaml > /usr/share/nginx/html/settings.yaml.tmp
+mv /usr/share/nginx/html/settings.yaml.tmp /usr/share/nginx/html/settings.yaml
+
 # Set App base path
 if [ -z "${ARLAS_BUILDER_APP_PATH}" ]; then
   ARLAS_BUILDER_APP_PATH=""

src/app/modules/analytics-config/components/edit-histogram-label/edit-histogram-label.component.ts

@@ -194,8 +194,8 @@ export class EditHistogramLabelComponent implements OnInit, OnDestroy {
     private disableXUnitField() {
       this.xAxisConfig.displayUnitControl.next(false);
       this.xAxisConfig.unitControl.disable();
-      this.xAxisConfig.hint.next('Managed by arlas');
-      this.xAxisConfig.infoMessage.next(marker('Filled by Arlas'));
+      this.xAxisConfig.hint.next(marker('Managed by ARLAS'));
+      this.xAxisConfig.infoMessage.next(marker('Filled by ARLAS'));
     }
 
     private enableXUnitField() {

src/app/modules/analytics-config/services/donut-form-builder/donut-form-builder.service.ts

@@ -137,7 +137,7 @@ export class DonutConfigForm extends WidgetConfigFormGroup {
                     if (result !== undefined) {
                       globalKeysToColortrl.clear();
                       result.forEach((kc: KeywordColor) => {
-                        /** after closing the dialog, save the [keyword, color] list in the Arlas color service */
+                        /** after closing the dialog, save the [keyword, color] list in the ARLAS color service */
                         (this.colorService.colorGenerator as ArlasColorGeneratorLoader).updateKeywordColor(kc.keyword, kc.color);
                         this.addToColorManualValuesCtrl(kc);
                       });

src/app/modules/analytics-config/services/powerbar-form-builder/powerbar-form-builder.service.ts

@@ -246,7 +246,7 @@ export class PowerbarConfigForm extends WidgetConfigFormGroup {
                   .afterClosed().subscribe((result: Array<KeywordColor>) => {
                     if (result !== undefined) {
                       result.forEach((kc: KeywordColor) => {
-                        /** after closing the dialog, save the [keyword, color] list in the Arlas color service */
+                        /** after closing the dialog, save the [keyword, color] list in the ARLAS color service */
                         (colorService.colorGenerator as ArlasColorGeneratorLoader).updateKeywordColor(kc.keyword, kc.color);
                         addToColorManualValuesCtrl(kc, this.globalKeysToColortrl.controls);
                       });

src/app/modules/analytics-config/services/resultlist-form-builder/resultlist-form-builder.service.ts

@@ -501,7 +501,7 @@ export class ResultlistColumnFormGroup extends CollectionConfigFormGroup {
                 .afterClosed().subscribe((result: Array<KeywordColor>) => {
                   if (result !== undefined) {
                     result.forEach((kc: KeywordColor) => {
-                      /** after closing the dialog, save the [keyword, color] list in the Arlas color service */
+                      /** after closing the dialog, save the [keyword, color] list in the ARLAS color service */
                       (colorService.colorGenerator as ArlasColorGeneratorLoader).updateKeywordColor(kc.keyword, kc.color);
                       this.addToColorManualValuesCtrl(kc);
                     });

src/app/modules/map-config/components/preview/preview.component.ts

@@ -56,7 +56,7 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
   public mapRedrawSources;
   public mapLegendUpdater;
   public mapVisibilityUpdater;
-  public mainMapContributor;
+  public mainMapContributor: MapContributor;
 
   public constructor(
     protected mainFormService: MainFormService,

src/app/modules/map-config/services/map-import/map-import.service.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { Injectable } from '@angular/core';
-import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { FormArray } from '@angular/forms';
 import { KeywordColor, OTHER_KEYWORD } from '@map-config/components/dialog-color-table/models';
 import { LAYER_MODE } from '@map-config/components/edit-layer/models';
 import { NORMALIZED, VISIBILITY } from '@services/main-form-manager/config-map-export-helper';

src/app/modules/map-config/services/map-layer-form-builder/map-layer-form-builder.service.ts

@@ -50,6 +50,7 @@ import {
 } from './models';
 import { ButtonToggleFormControl } from '@shared-models/config-form';
 import { toNumericOptionsObs } from '../../../../services/collection-service/tools';
+import { ArlasSettingsService } from 'arlas-wui-toolkit';
 
 
 export const PRECISION_TOLERATED_DIFFERENCE = 3;
@@ -1428,8 +1429,10 @@ export class MapLayerTypeClusterFormGroup extends MapLayerAllTypesFormGroup {
   public constructor(
     collection: string,
     collectionFields: Observable<Array<CollectionField>>,
-    propertySelectorFormBuilder: PropertySelectorFormBuilderService
+    propertySelectorFormBuilder: PropertySelectorFormBuilderService,
+    settingsService: ArlasSettingsService
   ) {
+
     super(
       collection,
       collectionFields,
@@ -1475,7 +1478,9 @@ export class MapLayerTypeClusterFormGroup extends MapLayerAllTypesFormGroup {
           false,
           [
             { label: marker('Tile Grid'), value: ClusterAggType.tile },
-            { label: marker('GeohashGrid'), value: ClusterAggType.geohash }
+            { label: marker('Geohash Grid'), value: ClusterAggType.geohash },
+            { label: marker('Geohex Grid'), value: ClusterAggType.h3,
+              enabled: !!settingsService.settings && settingsService.settings['enable_h3'] }
           ]),
         granularity: new SelectFormControl(
           '',
@@ -1600,7 +1605,8 @@ export class MapLayerFormBuilderService {
     private defaultValuesService: DefaultValuesService,
     private propertySelectorFormBuilder: PropertySelectorFormBuilderService,
     private mainFormService: MainFormService,
-    private collectionService: CollectionService
+    private collectionService: CollectionService,
+    private settigsService: ArlasSettingsService
   ) { }
 
   public buildLayer(collection: string, edit?: boolean) {
@@ -1677,7 +1683,8 @@ export class MapLayerFormBuilderService {
     const clusterFormGroup = new MapLayerTypeClusterFormGroup(
       collection,
       collectionFields,
-      this.propertySelectorFormBuilder);
+      this.propertySelectorFormBuilder,
+      this.settigsService);
 
     this.defaultValuesService.setDefaultValueRecursively('map.layer', clusterFormGroup);
     return clusterFormGroup;

src/app/services/startup/builderconfig.schema.json

@@ -1,6 +1,6 @@
 {
     "$schema": "http://json-schema.org/draft-06/schema#",
-    "title": "Arlas WUI application  Configuration",
+    "title": "ARLAS WUI application Configuration",
     "description": "The Configuration of an arlas web application",
     "type": "object",
     "$id": "arlasconfig.schema.json",

src/app/shared/components/config-form-control/config-form-control.component.html

@@ -45,7 +45,7 @@
     <mat-form-field>
         <mat-label>{{ typedControl.label | translate}}</mat-label>
         <mat-select [formControl]="typedControl" [required]="!typedControl.optional"
-            [arlasAlertOnChange]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? 'Warning, changing this field\'s value will reset some other fields' : null"
+            [arlasAlertOnChange]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? WARNING_MESSAGE : null"
             [arlasResetOnChange]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? defaultKey : null"
             [dependants]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? typedControl.dependantControls : null">
             <mat-option *ngIf="typedControl.optional"></mat-option>
@@ -86,7 +86,7 @@
         </ng-container>
         <mat-select style="display: none;" [formControl]="typedControl" [required]="!typedControl.optional"
             [(ngModel)]="typedControl.selectedMultipleItems"
-            [arlasAlertOnChange]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? 'Warning, changing this field\'s value will reset some other fields' : null"
+            [arlasAlertOnChange]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? WARNING_MESSAGE : null"
             [arlasResetOnChange]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? defaultKey : null"
             [dependants]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? typedControl.dependantControls : null">
         </mat-select>
@@ -132,7 +132,7 @@
         <mat-label *ngIf="showLabel">{{ typedControl.label | translate}}</mat-label>
         <input type="text" matInput [formControl]="typedControl" [matAutocomplete]="auto" #autocompleteInput
             [required]="!typedControl.optional"
-            [arlasAlertOnChange]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? 'Warning, changing this field\'s value will reset some other fields' : null"
+            [arlasAlertOnChange]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? WARNING_MESSAGE : null"
             [arlasResetOnChange]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? defaultKey : null"
             [dependants]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? typedControl.dependantControls : null">
         <button mat-button *ngIf="typedControl.value" matSuffix mat-icon-button
@@ -154,7 +154,7 @@
         <mat-label *ngIf="showLabel">{{ typedControl.label | translate}}</mat-label>
         <input type="text" matInput [formControl]="typedControl" [matAutocomplete]="autotyped" #typedAutocompleteInput
             [required]="!typedControl.optional"
-            [arlasAlertOnChange]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? 'Warning, changing this field\'s value will reset some other fields' : null"
+            [arlasAlertOnChange]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? WARNING_MESSAGE : null"
             [arlasResetOnChange]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? defaultKey : null"
             [dependants]="typedControl.resetDependantsOnChange && typedControl.dependantControls ? typedControl.dependantControls : null">
         <button mat-button *ngIf="typedControl.value" matSuffix mat-icon-button

src/app/shared/components/config-form-control/config-form-control.component.ts

@@ -22,6 +22,7 @@ import {
   Input, OnDestroy, OnInit, Output, ViewChild, ViewContainerRef
 } from '@angular/core';
 import { FormGroup } from '@angular/forms';
+import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { CollectionService } from '@services/collection-service/collection.service';
 import {
   ButtonFormControl, ButtonToggleFormControl, CollectionsUnitsControl, ColorFormControl, ColorPreviewFormControl,
@@ -54,6 +55,8 @@ export class ConfigFormControlComponent implements OnInit, AfterViewInit, AfterV
   public colorPreviewControl: ColorPreviewFormControl;
   public debouncer: Subject<string> = new Subject();
 
+  protected readonly WARNING_MESSAGE = marker('Warning, changing this field\'s value will reset some other fields');
+
   public constructor(
     private resolver: ComponentFactoryResolver,
     private changeDetector: ChangeDetectorRef,

src/app/shared/components/histogram-bucket-form-group/histogram-bucket-form-group.component.html

@@ -87,7 +87,7 @@ <h3 *ngIf="bucketTypeControl.title" class="form-control-title">{{bucketTypeContr
                                 <mat-form-field class="unit" *ngIf="aggregationFieldTypeControl.value === 'time'">
                                     <mat-select [formControl]="preferredIntervalUnit"
                                         [required]="!preferredIntervalUnit.optional"
-                                        [arlasAlertOnChange]="preferredIntervalUnit.resetDependantsOnChange && preferredIntervalUnit.dependantControls ? 'Warning, changing this field\'s value will reset some other fields' : null"
+                                        [arlasAlertOnChange]="preferredIntervalUnit.resetDependantsOnChange && preferredIntervalUnit.dependantControls ? WARNING_MESSAGE : null"
                                         [arlasResetOnChange]="preferredIntervalUnit.resetDependantsOnChange && preferredIntervalUnit.dependantControls ? defaultKey : null"
                                         [dependants]="preferredIntervalUnit.resetDependantsOnChange && preferredIntervalUnit.dependantControls ? preferredIntervalUnit.dependantControls : null">
                                         <mat-option *ngIf="preferredIntervalUnit.optional"></mat-option>

src/app/shared/components/histogram-bucket-form-group/histogram-bucket-form-group.component.ts

@@ -18,6 +18,7 @@
  */
 
 import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
+import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { ConfigFormGroupComponent } from '../config-form-group/config-form-group.component';
 @Component({
   // tslint:disable-next-line: component-selector
@@ -37,6 +38,8 @@ export class HistogramBucketFormGroupComponent extends ConfigFormGroupComponent
   public preferredIntervalSize;
   public preferredIntervalUnit;
 
+  protected readonly WARNING_MESSAGE = marker('Warning, changing this field\'s value will reset some other fields');
+
   public ngOnInit(): void {
     super.ngOnInit();
     this.isSubGroup = true;

src/app/shared/models/circle-heat-map-radius-granularity.ts

@@ -78,9 +78,68 @@ export const CIRCLE_HEATMAP_RADIUS_GRANULARITY = {
     ],
   },
   tile: {
-    finest: [0,9, 23,15],
-    fine: [0, 35, 23,45],
+    finest: [0, 9,  23, 15],
+    fine:   [0, 35, 23, 45],
     medium: [0, 50, 23, 100],
-    coarse: [0, 80, 23,150]
+    coarse: [0, 80, 23, 150]
+  },
+  h3: {
+    finest: [
+      0, 15,
+      1.999999, 40,
+      2, 15,
+      5.999999, 30,
+      6, 10,
+      7.999999, 20,
+      8, 10,
+      9.999999, 20,
+      10, 10,
+      17, 5
+    ],
+    fine: [
+      0, 50,
+      1.999999, 100,
+      2, 40,
+      5.999999, 70,
+      6, 30,
+      7.999999, 50,
+      8, 30,
+      9.999999, 50,
+      10, 30,
+      17, 10
+    ],
+    medium: [
+      0, 50,
+      2.999999, 100,
+      3, 50,
+      5.999999, 120,
+      6, 30,
+      8.999999, 120,
+      9, 30,
+      10.999999, 120,
+      11, 30,
+      13.999999, 120,
+      14, 30,
+      17, 120
+    ],
+    coarse: [
+      0, 20,
+      2, 140,
+      2.999999, 300,
+      3, 100,
+      3.999999, 200,
+      4, 50,
+      5.999999, 400,
+      6, 175,
+      6.999999, 200,
+      7, 150,
+      8.999999, 150,
+      9, 50,
+      10.999999, 100,
+      11, 20,
+      14.999999, 80,
+      15, 20,
+      17, 80,
+    ],
   }
 };

src/app/shared/services/property-selector-form-builder/property-selector-form-builder.service.ts

@@ -404,7 +404,7 @@ export class PropertySelectorFormGroup extends CollectionConfigFormGroup {
                 if (result !== undefined) {
                   this.customControls.propertyManualFg.propertyManualValuesCtrl.clear();
                   result.forEach((kc: KeywordColor) => {
-                    /** after closing the dialog, save the [keyword, color] list in the Arlas color service */
+                    /** after closing the dialog, save the [keyword, color] list in the ARLAS color service */
                     (colorService.colorGenerator as ArlasColorGeneratorLoader).updateKeywordColor(kc.keyword, kc.color);
                     this.addToColorManualValuesCtrl(kc);
                   });