Add UI to request inspection of Tiles' source data layers

erdblick_app/app/app.module.ts

@@ -72,6 +72,9 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {FormlyPrimeNGModule} from "@ngx-formly/primeng";
 import {DataSourcesService} from "./datasources.service";
 import {ProgressSpinnerModule} from "primeng/progressspinner";
+import {TileSourceDataComponent} from "./tilesources.component";
+import {ContextMenuModule} from "primeng/contextmenu";
+import {RightClickMenuService} from "./rightclickmenu.service";
 
 export function initializeServices(styleService: StyleService, mapService: MapService, coordService: CoordinatesService) {
     return async () => {
@@ -147,6 +150,7 @@ export function typeValidationMessage({ schemaType }: any) {
         MultiSchemaTypeComponent,
         HighlightSearch,
         TreeTableFilterPatchDirective,
+        TileSourceDataComponent
     ],
     bootstrap: [
         AppComponent
@@ -213,7 +217,8 @@ export function typeValidationMessage({ schemaType }: any) {
                 {name: 'multischema', component: MultiSchemaTypeComponent}
             ],
         }),
-        ProgressSpinnerModule
+        ProgressSpinnerModule,
+        ContextMenuModule
     ],
     providers: [
         {
@@ -233,6 +238,7 @@ export function typeValidationMessage({ schemaType }: any) {
         ClipboardService,
         EditorService,
         DataSourcesService,
+        RightClickMenuService,
         provideHttpClient()
     ]
 })

erdblick_app/app/datasources.component.ts

@@ -208,7 +208,6 @@ export class DatasourcesComponent {
     }
 
     closeEditorDialog(event: any) {
-        console.log(event);
         if (this.editorDialog !== undefined) {
             if (this.wasModified) {
                 event.stopPropagation();

erdblick_app/app/feature.panel.component.ts

@@ -15,6 +15,7 @@ import {coreLib} from "./wasm";
 import {ClipboardService} from "./clipboard.service";
 import {TreeTable} from "primeng/treetable";
 import {ParametersService} from "./parameters.service";
+import {InfoMessageService} from "./info.service";
 
 interface Column {
     field: string;
@@ -193,6 +194,7 @@ export class FeaturePanelComponent implements OnInit, AfterViewInit, OnDestroy
                 public jumpService: JumpTargetService,
                 public parameterService: ParametersService,
                 private renderer: Renderer2,
+                private messageService: InfoMessageService,
                 public mapService: MapService) {
         this.inspectionService.featureTree.pipe(distinctUntilChanged()).subscribe((tree: string) => {
             this.jsonTree = tree;
@@ -360,19 +362,23 @@ export class FeaturePanelComponent implements OnInit, AfterViewInit, OnDestroy
     showSourceData(event: any, sourceDataRef: any) {
         event.stopPropagation();
 
-        const layerId = sourceDataRef.layerId;
-        const tileId = sourceDataRef.tileId;
-        const address = sourceDataRef.address;
-        const mapId = this.inspectionService.selectedFeatures[0].featureTile.mapName;
-        const featureIds = this.inspectionService.selectedFeatures.map(f=>f.featureId).join(", ");
-
-        this.inspectionService.selectedSourceData.next({
-            tileId: Number(tileId),
-            layerId: String(layerId),
-            mapId: String(mapId),
-            address: BigInt(address),
-            featureIds: featureIds,
-        })
+        try {
+            const layerId = sourceDataRef.layerId;
+            const tileId = sourceDataRef.tileId;
+            const address = sourceDataRef.address;
+            const mapId = this.inspectionService.selectedFeatures[0].featureTile.mapName;
+            const featureIds = this.inspectionService.selectedFeatures.map(f => f.featureId).join(", ");
+
+            this.inspectionService.selectedSourceData.next({
+                tileId: Number(tileId),
+                layerId: String(layerId),
+                mapId: String(mapId),
+                address: BigInt(address),
+                featureIds: featureIds,
+            })
+        } catch (e) {
+            this.messageService.showError(`Encountered error: ${e}`);
+        }
     }
 
     onValueClick(event: any, rowData: any) {

erdblick_app/app/inspection.panel.component.ts

@@ -29,13 +29,14 @@ export interface InspectionContainerSize {
 @Component({
     selector: 'inspection-panel',
     template: `
-        <p-accordion *ngIf="inspectionService.featureTree.value.length && inspectionService.isInspectionPanelVisible"
+        <p-accordion *ngIf="inspectionService.isInspectionPanelVisible"
                      class="w-full inspect-panel" [ngClass]="{'inspect-panel-small-header': activeIndex > 0}"
                      [activeIndex]="0" >
             <p-accordionTab>
                 <ng-template pTemplate="header">
                     <span class="inspector-title" *ngIf="activeIndex < tabs.length">
-                        <p-button icon="pi pi-chevron-left" *ngIf="activeIndex > 0" (click)="onGoBack($event)" />
+                        <p-button icon="pi pi-chevron-left" (click)="onGoBack($event)" 
+                                  *ngIf="activeIndex > 0 && inspectionService.selectedFeatures.length" />
                         
                         <i class="pi {{ tabs[activeIndex].icon || '' }}"></i>{{ tabs[activeIndex].title || '' }}
                         
@@ -87,7 +88,7 @@ export class InspectionPanelComponent
                 private parameterService: ParametersService) {
         this.pushFeatureInspector();
 
-        this.inspectionService.featureTree.pipe(distinctUntilChanged()).subscribe((tree: string) => {
+        this.inspectionService.featureTree.pipe(distinctUntilChanged()).subscribe(_ => {
             this.reset();
 
             // TODO: Create a new FeaturePanelComponent instance for each unique feature selection.
@@ -96,12 +97,11 @@ export class InspectionPanelComponent
             const featureIds = this.inspectionService.selectedFeatures.map(f=>f.featureId).join(", ");
             if (this.inspectionService.selectedFeatures.length == 1) {
                 this.tabs[0].title = featureIds;
-            }
-            else {
+            } else {
                 this.tabs[0].title = `Selected ${this.inspectionService.selectedFeatures.length} Features`;
             }
 
-            const selectedSourceData = parameterService.getSelectedSourceData()
+            const selectedSourceData = this.parameterService.getSelectedSourceData()
             if (selectedSourceData?.featureIds === featureIds)
                 this.inspectionService.selectedSourceData.next(selectedSourceData);
             else
@@ -131,7 +131,7 @@ export class InspectionPanelComponent
                 }
                 this.pushSourceDataInspector(selection);
             }
-        })
+        });
     }
 
     reset() {

erdblick_app/app/inspection.service.ts

@@ -29,8 +29,8 @@ export interface SelectedSourceData {
     mapId: string,
     tileId: number,
     layerId: string,
-    address: bigint,
-    featureIds: string,
+    address?: bigint,
+    featureIds?: string,
 }
 
 export function selectedSourceDataEqualTo(a: SelectedSourceData | null, b: SelectedSourceData | null) {
@@ -73,7 +73,6 @@ export class InspectionService {
     inspectionPanelChanged  = new EventEmitter<void>();
 
     constructor(private mapService: MapService,
-                private jumpService: JumpTargetService,
                 private infoMessageService: InfoMessageService,
                 private keyboardService: KeyboardService,
                 public parametersService: ParametersService) {
@@ -98,14 +97,14 @@ export class InspectionService {
                 selectedFeatures[0].peek((feature: Feature) => {
                     this.selectedFeatureInspectionModel.push(...feature.inspectionModel());
                     this.selectedFeatureGeoJsonTexts.push(feature.geojson() as string);
-                    this.isInspectionPanelVisible = true;
                     const center = feature.center() as Cartesian3;
                     this.selectedFeatureCenter = center;
                     this.selectedFeatureOrigin = Cartesian3.fromDegrees(center.x, center.y, center.z);
                     let radiusPoint = feature.boundingRadiusEndPoint() as Cartesian3;
                     radiusPoint = Cartesian3.fromDegrees(radiusPoint.x, radiusPoint.y, radiusPoint.z);
                     this.selectedFeatureBoundingRadius = Cartesian3.distance(this.selectedFeatureOrigin, radiusPoint);
-                    this.selectedFeatureGeometryType = feature.getGeometryType() as any;this.isInspectionPanelVisible = true;
+                    this.selectedFeatureGeometryType = feature.getGeometryType() as any;
+                    this.isInspectionPanelVisible = true;
                 });
             }
             if (selectedFeatures.length > 1) {
@@ -123,10 +122,11 @@ export class InspectionService {
         });
 
         this.selectedSourceData.pipe(distinctUntilChanged(selectedSourceDataEqualTo)).subscribe(selection => {
-            if (selection)
+            if (selection) {
                 this.parametersService.setSelectedSourceData(selection);
-            else
+            } else {
                 this.parametersService.unsetSelectedSourceData();
+            }
         });
     }
 

erdblick_app/app/map.service.ts

@@ -388,7 +388,7 @@ export class MapService {
                     ...this.currentVisibleTileIds,
                     ...new Set<bigint>(
                         allViewportTileIds.slice(0, this.parameterService.parameters.getValue().tilesVisualizeLimit))
-                ])
+                ]);
             }
         }
 

erdblick_app/app/parameters.service.ts

@@ -210,6 +210,8 @@ export class ParametersService {
 
     lastSearchHistoryEntry: BehaviorSubject<[number, string] | null> = new BehaviorSubject<[number, string] | null>(null);
 
+    tileIdsForSourceData: Array<any> = [];
+
     baseFontSize: number = 16;
     inspectionContainerWidth: number = 40;
     inspectionContainerHeight: number = (window.innerHeight - 10.5 * this.baseFontSize);
@@ -255,8 +257,8 @@ export class ParametersService {
             selection.tileId,
             selection.layerId,
             selection.mapId,
-            selection.address.toString(),
-            selection.featureIds,
+            selection.address ? selection.address.toString() : "",
+            selection.featureIds ? selection.featureIds : "",
         ];
         this.parameters.next(this.p());
     }

erdblick_app/app/rightclickmenu.service.ts

@@ -0,0 +1,21 @@
+import {Injectable} from "@angular/core";
+import {MenuItem} from "primeng/api";
+import {BehaviorSubject} from "rxjs";
+
+@Injectable()
+export class RightClickMenuService {
+
+    menuItems: MenuItem[];
+    tileIdsReady: BehaviorSubject<boolean> = new BehaviorSubject(false);
+    tileSourceDataDialogVisible: boolean = false;
+
+    constructor() {
+        this.menuItems = [{
+            label: 'Tile Source Data',
+            icon: 'pi pi-database',
+            command: () => {
+                this.tileSourceDataDialogVisible = true;
+            }
+        }];
+    }
+}

erdblick_app/app/sourcedata.panel.component.ts

@@ -233,26 +233,28 @@ export class SourceDataPanelComponent implements OnInit, AfterViewInit, OnDestro
         }
     }
 
-    selectItemWithAddress(address: bigint) {
+    selectItemWithAddress(address?: bigint) {
         let addressInRange: any;
-        if (this.addressFormat == coreLib.SourceDataAddressFormat.BIT_RANGE) {
-            const searchAddress = {
-                offset: address >> BigInt(32) & BigInt(0xFFFFFFFF),
-                size: address & BigInt(0xFFFFFFFF),
-            }
+        if (address) {
+            if (this.addressFormat == coreLib.SourceDataAddressFormat.BIT_RANGE) {
+                const searchAddress = {
+                    offset: address >> BigInt(32) & BigInt(0xFFFFFFFF),
+                    size: address & BigInt(0xFFFFFFFF),
+                }
 
-            const addressLow = typeof searchAddress === 'object' ? searchAddress['offset'] : searchAddress;
-            const addressHigh = addressLow + (typeof searchAddress === 'object' ? searchAddress['size'] : searchAddress);
+                const addressLow = typeof searchAddress === 'object' ? searchAddress['offset'] : searchAddress;
+                const addressHigh = addressLow + (typeof searchAddress === 'object' ? searchAddress['size'] : searchAddress);
 
-            addressInRange = (address: any) => {
-                return address.offset >= addressLow &&
-                    address.offset + address.size <= addressHigh &&
-                    (address.size != 0 || addressLow == addressHigh);
-            }
-        } else {
-            const searchAddress = address;
-            addressInRange = (address: any) => {
-                return address == searchAddress;
+                addressInRange = (address: any) => {
+                    return address.offset >= addressLow &&
+                        address.offset + address.size <= addressHigh &&
+                        (address.size != 0 || addressLow == addressHigh);
+                }
+            } else {
+                const searchAddress = address;
+                addressInRange = (address: any) => {
+                    return address == searchAddress;
+                }
             }
         }
 
@@ -268,7 +270,7 @@ export class SourceDataPanelComponent implements OnInit, AfterViewInit, OnDestro
                 node.data.styleClass = "highlight";
             }
 
-            if (node.data.address && addressInRange(node.data.address)) {
+            if (node.data.address && addressInRange && addressInRange(node.data.address)) {
                 highlight = true;
 
                 if (!firstHighlightedItemIndex)
@@ -277,7 +279,7 @@ export class SourceDataPanelComponent implements OnInit, AfterViewInit, OnDestro
                 node.data.styleClass = "highlight";
                 parents.forEach((parent: TreeTableNode) =>{
                     parent.expanded = true;
-                })
+                });
             }
 
             if (node.children) {