Merge pull request #758 from geo-engine/layer-management

Layer Management
geo-engine · Nov 8, 2024 · 7867ebe · 7867ebe
2 parents c4ba6dc + 277f085
commit 7867ebe
Show file tree

Hide file tree

Showing 88 changed files with 2,519 additions and 608 deletions.
diff --git a/angular.json b/angular.json
@@ -784,7 +784,8 @@
                             "projects/manager/src/styles.scss",
                             "dist/common/assets/fonts/poppins/poppins.css",
                             "dist/common/assets/fonts/pacifico/pacifico.css",
-                            "dist/common/assets/fonts/material-design-icons/material-icons.css"
+                            "dist/common/assets/fonts/material-design-icons/material-icons.css",
+                            "node_modules/codemirror/lib/codemirror.css"
                         ],
                         "scripts": [],
                         "browser": "projects/manager/src/main.ts"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
         "@angular/platform-browser-dynamic": "^18.2.4",
         "@angular/router": "^18.2.4",
         "@egjs/hammerjs": "^2.0.17",
-        "@geoengine/openapi-client": "0.0.13",
+        "@geoengine/openapi-client": "0.0.14",
         "codemirror": "~5.65.16",
         "d3": "~7.9.0",
         "dagre": "~0.8.5",

diff --git a/projects/common/src/lib/common.module.ts b/projects/common/src/lib/common.module.ts
@@ -60,8 +60,15 @@ import {MeasurementComponent} from './measurement/measurement.component';
 import {TimeInputComponent} from './time/time-input/time-input.component';
 import {TimeIntervalInputComponent} from './time/time-interval-input/time-interval-input.component';
 import {PercentileBreakpointSelectorComponent} from './colors/percentile-breakpoint-selector/percentile-breakpoint-selector.component';
+import {LayerCollectionNavigationComponent} from './layer-collections/layer-collection-navigation/layer-collection-navigation.component';
+import {LayerCollectionDropdownComponent} from './layer-collections/layer-collection-dropdown/layer-collection-dropdown.component';
+import {LayerCollectionLayerComponent} from './layer-collections/layer-collection-layer/layer-collection-layer.component';
+import {LayerCollectionLayerDetailsComponent} from './layer-collections/layer-collection-layer-details/layer-collection-layer-details.component';
+import {LayerCollectionListComponent} from './layer-collections/layer-collection-list/layer-collection-list.component';
+import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
+import {AutocompleteSelectDirective} from './util/directives/autocomplete-select.directive';
+import {CodeEditorComponent} from './util/components/code-editor.component';
 import {OgrDatasetComponent} from './datasets/ogr-dataset/ogr-dataset.component';
-import {CommonConfig} from './config.service';
 
 export const MATERIAL_MODULES = [
     MatAutocompleteModule,
@@ -96,6 +103,7 @@ export const MATERIAL_MODULES = [
 ];
 
 const COMMON_COMPONENTS = [
+    CodeEditorComponent,
     ColorAttributeInputComponent,
     ColorBreakpointInputComponent,
     ColorMapSelectorComponent,
@@ -116,6 +124,12 @@ const COMMON_COMPONENTS = [
     TimeInputComponent,
     TimeIntervalInputComponent,
     PercentileBreakpointSelectorComponent,
+    LayerCollectionNavigationComponent,
+    LayerCollectionDropdownComponent,
+    LayerCollectionLayerComponent,
+    LayerCollectionLayerDetailsComponent,
+    LayerCollectionListComponent,
+    AutocompleteSelectDirective,
 ];
 
 const COMMON_PIPES = [
@@ -155,6 +169,7 @@ const FXFLEX_LEGACY_DIRECTIVES = [FxFlexDirective, FxLayoutDirective, FxLayoutGa
         ReactiveFormsModule,
         AngularCommonModule,
         ScrollingModule,
+        NgxMatSelectSearchModule,
         OgrDatasetComponent,
     ],
 })

diff --git a/.../layer-collection-dropdown.component.html → .../layer-collection-dropdown.component.html b/.../layer-collection-dropdown.component.html → .../layer-collection-dropdown.component.html
diff --git a/.../layer-collection-dropdown.component.scss → .../layer-collection-dropdown.component.scss b/.../layer-collection-dropdown.component.scss → .../layer-collection-dropdown.component.scss
diff --git a/...wn/layer-collection-dropdown.component.ts → ...wn/layer-collection-dropdown.component.ts b/...wn/layer-collection-dropdown.component.ts → ...wn/layer-collection-dropdown.component.ts
@@ -11,14 +11,14 @@ import {
     SimpleChanges,
 } from '@angular/core';
 import {
-    LayerCollectionDict,
-    LayerCollectionListingDict,
-    LayerCollectionItemDict,
-    ProviderLayerCollectionIdDict,
-    LayerCollectionLayerDict,
-} from '../../backend/backend.model';
-import {LayerCollectionService} from '../layer-collection.service';
+    LayerCollection as LayerCollectionDict,
+    CollectionItem as LayerCollectionItemDict,
+    ProviderLayerCollectionId as ProviderLayerCollectionIdDict,
+    LayerListing as LayerCollectionLayerDict,
+    LayerCollectionListing as LayerCollectionListingDict,
+} from '@geoengine/openapi-client';
 import {BehaviorSubject, Observable, Subject, firstValueFrom, map} from 'rxjs';
+import {LayersService} from '../layers.service';
 
 interface CollectionAndSelected {
     collection: LayerCollectionDict;
@@ -61,7 +61,7 @@ export class LayerCollectionDropdownComponent implements OnInit, OnChanges, OnDe
     private onDestroy$: Subject<boolean> = new Subject();
 
     constructor(
-        protected readonly layerCollectionService: LayerCollectionService,
+        protected readonly layersService: LayersService,
         private readonly changeDetectorRef: ChangeDetectorRef,
     ) {
         this.collectionsAndSelected = this.collections.pipe(
@@ -145,10 +145,12 @@ export class LayerCollectionDropdownComponent implements OnInit, OnChanges, OnDe
 
             const collection = found as LayerCollectionListingDict;
 
-            const collectionItems = await firstValueFrom(
-                this.layerCollectionService.getLayerCollectionItems(collection.id.providerId, collection.id.collectionId, 0, FETCH_SIZE),
+            const collectionItems = await this.layersService.getLayerCollectionItems(
+                collection.id.providerId,
+                collection.id.collectionId,
+                0,
+                FETCH_SIZE,
             );
-
             newCollections.push(collectionItems);
         }
 
@@ -162,7 +164,7 @@ export class LayerCollectionDropdownComponent implements OnInit, OnChanges, OnDe
         this.changeDetectorRef.markForCheck();
     }
 
-    selectItem(item: LayerCollectionItemDict, index: number): void {
+    async selectItem(item: LayerCollectionItemDict, index: number): Promise<void> {
         if (item.type === 'layer') {
             this.layerSelected.emit(item as LayerCollectionLayerDict);
             return;
@@ -172,34 +174,31 @@ export class LayerCollectionDropdownComponent implements OnInit, OnChanges, OnDe
 
         this.layerSelected.emit(undefined);
 
-        this.layerCollectionService
-            .getLayerCollectionItems(collection.id.providerId, collection.id.collectionId, 0, FETCH_SIZE)
-            .subscribe((c) => {
-                const selections = this.selections;
-                selections.splice(index);
-                selections.push(item);
-                this.selections = selections;
+        const c = await this.layersService.getLayerCollectionItems(collection.id.providerId, collection.id.collectionId, 0, FETCH_SIZE);
+
+        const selections = this.selections;
+        selections.splice(index);
+        selections.push(item);
+        this.selections = selections;
 
-                const collections = this.collections.value;
-                collections.splice(index + 1);
-                collections.push(c);
-                this.collections.next(collections);
+        const collections = this.collections.value;
+        collections.splice(index + 1);
+        collections.push(c);
+        this.collections.next(collections);
 
-                this.pathChange.emit({path: collections, source: PathChangeSource.Manual});
+        this.pathChange.emit({path: collections, source: PathChangeSource.Manual});
 
-                this.changeDetectorRef.markForCheck();
-            });
+        this.changeDetectorRef.markForCheck();
     }
 
     searchPredicate(filter: string, element: LayerCollectionItemDict): boolean {
         return element.name.toLowerCase().includes(filter);
     }
 
     protected async setupRoot(): Promise<void> {
-        const collection$ = this.root
-            ? this.layerCollectionService.getLayerCollectionItems(this.root.providerId, this.root.collectionId, 0, FETCH_SIZE)
-            : this.layerCollectionService.getRootLayerCollectionItems(0, FETCH_SIZE);
-        const collection = await firstValueFrom(collection$);
+        const collection = this.root
+            ? await this.layersService.getLayerCollectionItems(this.root.providerId, this.root.collectionId, 0, FETCH_SIZE)
+            : await this.layersService.getRootLayerCollectionItems(0, FETCH_SIZE);
 
         this.collections.next([collection]);
     }

diff --git a/...r-collection-layer-details.component.html → ...r-collection-layer-details.component.html b/...r-collection-layer-details.component.html → ...r-collection-layer-details.component.html
diff --git a/...r-collection-layer-details.component.scss → ...r-collection-layer-details.component.scss b/...r-collection-layer-details.component.scss → ...r-collection-layer-details.component.scss
diff --git a/...yer-collection-layer-details.component.ts → ...yer-collection-layer-details.component.ts b/...yer-collection-layer-details.component.ts → ...yer-collection-layer-details.component.ts
@@ -1,6 +1,7 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@angular/core';
-import {LayerCollectionService} from '../layer-collection.service';
-import {Colorizer, LayerMetadata, RasterLayerMetadata, VectorDataTypes, VectorLayerMetadata} from '@geoengine/common';
+import {LayerMetadata, RasterLayerMetadata, VectorLayerMetadata} from '../../layers/layer-metadata.model';
+import {VectorDataTypes} from '../../operators/datatype.model';
+import {Colorizer} from '../../colors/colorizer.model';
 
 @Component({
     selector: 'geoengine-layer-collection-layer-details',
@@ -25,10 +26,7 @@ export class LayerCollectionLayerDetailsComponent {
         noDataColor: [0, 0, 0, 0],
     });
 
-    constructor(
-        private layerService: LayerCollectionService,
-        private changeDetectorRef: ChangeDetectorRef,
-    ) {}
+    constructor() {}
 
     get rasterLayerMetadata(): RasterLayerMetadata | undefined {
         if (this.layerMetadata && this.layerMetadata.layerType === 'raster') {

diff --git a/...yer/layer-collection-layer.component.html → ...yer/layer-collection-layer.component.html b/...yer/layer-collection-layer.component.html → ...yer/layer-collection-layer.component.html
@@ -8,7 +8,7 @@ <h4 class="header-text-line">{{ layer?.name }}</h4>
             </div>
         </div>
 
-        <button class="header-button" mat-icon-button (click)="toggleExpand()">
+        <button class="header-button" *ngIf="showLayerToggle" mat-icon-button (click)="toggleExpand()">
             <mat-icon *ngIf="!expanded">expand_more</mat-icon>
             <mat-icon *ngIf="expanded">expand_less</mat-icon>
         </button>

diff --git a/...yer/layer-collection-layer.component.scss → ...yer/layer-collection-layer.component.scss b/...yer/layer-collection-layer.component.scss → ...yer/layer-collection-layer.component.scss
diff --git a/...layer/layer-collection-layer.component.ts → ...layer/layer-collection-layer.component.ts b/...layer/layer-collection-layer.component.ts → ...layer/layer-collection-layer.component.ts
@@ -1,8 +1,18 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
-import {mergeMap} from 'rxjs';
-import {LayerCollectionLayerDict, ProviderLayerIdDict} from '../../backend/backend.model';
-import {LayerCollectionService} from '../layer-collection.service';
-import {RasterLayerMetadata, VectorDataTypes, VectorLayerMetadata} from '@geoengine/common';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    EventEmitter,
+    input,
+    Input,
+    OnChanges,
+    Output,
+    SimpleChanges,
+} from '@angular/core';
+import {LayerListing as LayerCollectionLayerDict, ProviderLayerId as ProviderLayerIdDict} from '@geoengine/openapi-client';
+import {LayersService} from '../layers.service';
+import {VectorDataTypes} from '../../operators/datatype.model';
+import {RasterLayerMetadata, VectorLayerMetadata} from '../../layers/layer-metadata.model';
 
 @Component({
     selector: 'geoengine-layer-collection-layer',
@@ -11,7 +21,11 @@ import {RasterLayerMetadata, VectorDataTypes, VectorLayerMetadata} from '@geoeng
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LayerCollectionLayerComponent implements OnChanges {
+    @Input({required: false}) showLayerToggle = true;
     @Input() layer: LayerCollectionLayerDict | undefined = undefined;
+
+    trackBy = input<any>(undefined);
+
     @Output() addClick: EventEmitter<ProviderLayerIdDict> = new EventEmitter();
     @Output() isExpanded: EventEmitter<boolean> = new EventEmitter();
 
@@ -25,7 +39,7 @@ export class LayerCollectionLayerComponent implements OnChanges {
     protected loading = false;
 
     constructor(
-        private layerService: LayerCollectionService,
+        private layerService: LayersService,
         private changeDetectorRef: ChangeDetectorRef,
     ) {}
 
@@ -35,20 +49,18 @@ export class LayerCollectionLayerComponent implements OnChanges {
         }
     }
 
-    toggleExpand(): void {
+    async toggleExpand(): Promise<void> {
         if (this.layer) {
             this.expanded = !this.expanded;
             this.description = this.layer.description;
             if (!this.layerMetadata) {
                 this.loading = true;
-                this.layerService
-                    .registerAndGetLayerWorkflowId(this.layer.id.providerId, this.layer.id.layerId)
-                    .pipe(mergeMap((workflowId) => this.layerService.getWorkflowIdMetadata(workflowId)))
-                    .subscribe((resultDescriptor) => {
-                        this.layerMetadata = resultDescriptor;
-                        this.loading = false;
-                        this.changeDetectorRef.markForCheck();
-                    });
+                const workflowId = await this.layerService.registerAndGetLayerWorkflowId(this.layer.id.providerId, this.layer.id.layerId);
+                const resultDescriptor = await this.layerService.getWorkflowIdMetadata(workflowId);
+
+                this.layerMetadata = resultDescriptor;
+                this.loading = false;
+                this.changeDetectorRef.markForCheck();
             } else {
                 this.changeDetectorRef.markForCheck();
             }

diff --git a/...mmon/src/lib/layer-collections/layer-collection-list/layer-collection-list.component.html b/...mmon/src/lib/layer-collections/layer-collection-list/layer-collection-list.component.html
@@ -0,0 +1,55 @@
+<cdk-virtual-scroll-viewport [itemSize]="itemSizePx" (scrolledIndexChange)="onScrolledIndexChange($event)">
+    <mat-nav-list>
+        <ng-container *cdkVirtualFor="let item of source; trackBy: trackById">
+            <ng-template [ngIf]="item.type === 'collection'">
+                @if (collectionNavigation == CollectionNavigation.Disabled) {
+                    <mat-list-item (click)="select(item)" [class.selected]="highlightSelection && selectedCollection === item">
+                        <mat-icon matListItemIcon>layers</mat-icon>
+                        <h4 matListItemTitle>{{ item.name }}</h4>
+                        <p matListItemLine>{{ item.description }}</p>
+                    </mat-list-item>
+                }
+
+                @if (collectionNavigation == CollectionNavigation.Element) {
+                    <mat-list-item
+                        (click)="navigateToCollection(item)"
+                        [class.selected]="highlightSelection && selectedCollection === item"
+                    >
+                        <mat-icon matListItemIcon>layers</mat-icon>
+                        <h4 matListItemTitle>{{ item.name }}</h4>
+                        <p matListItemLine>{{ item.description }}</p>
+                    </mat-list-item>
+                }
+
+                @if (collectionNavigation == CollectionNavigation.Button) {
+                    <ng-container>
+                        <div class="collection-with-button-navigation" [class.selected]="highlightSelection && selectedCollection === item">
+                            <div matRipple class="click" (click)="select(item)">
+                                <mat-icon class="icon">layers</mat-icon>
+                                <div class="text">
+                                    <h4 class="text-line">{{ item.name }}</h4>
+                                    <p class="text-line secondary-text">{{ item.description }}</p>
+                                </div>
+                            </div>
+
+                            <button class="button" mat-icon-button (click)="navigateToCollection(item)">
+                                <mat-icon>chevron_right</mat-icon>
+                            </button>
+                        </div>
+                    </ng-container>
+                }
+            </ng-template>
+            <ng-template [ngIf]="item.type === 'layer'">
+                <geoengine-layer-collection-layer
+                    [showLayerToggle]="showLayerToggle"
+                    [trackBy]="item.name + item.description"
+                    [layer]="item"
+                    (addClick)="select(item)"
+                    [class.selected]="highlightSelection && selectedLayer === item"
+                ></geoengine-layer-collection-layer>
+            </ng-template>
+        </ng-container>
+    </mat-nav-list>
+
+    <mat-spinner [diameter]="loadingSpinnerDiameterPx" *ngIf="source?.loading$ | async"></mat-spinner>
+</cdk-virtual-scroll-viewport>