Improved (hover-)highlight/(re-)selection behavior. Still got some bugs.

erdblick_app/app/feature.panel.component.ts

@@ -369,24 +369,26 @@ export class FeaturePanelComponent implements OnInit  {
 
         if (rowData["type"] == this.InspectionValueType.FEATUREID.value) {
             this.jumpService.highlightByJumpTargetFilter(
-                rowData["value"].mapTileKey,
-                rowData["value"].featureId).then();
+                rowData["mapId"],
+                rowData["value"]).then();
         }
     }
 
     onValueHover(event: any, rowData: any) {
         event.stopPropagation();
         if (rowData["type"] == this.InspectionValueType.FEATUREID.value) {
             this.jumpService.highlightByJumpTargetFilter(
-                rowData["value"].mapTileKey,
-                rowData["value"].featureId,
+                rowData["mapId"],
+                rowData["value"],
                 coreLib.HighlightMode.HOVER_HIGHLIGHT).then();
         }
     }
 
     onValueHoverExit(event: any, rowData: any) {
         event.stopPropagation();
-        return;
+        if (rowData["type"] == this.InspectionValueType.FEATUREID.value) {
+            this.mapService.highlightFeatures([], false, coreLib.HighlightMode.HOVER_HIGHLIGHT).then();
+        }
     }
 
     getStyleClassByType(valueType: number): string {

erdblick_app/app/inspection.service.ts

@@ -8,6 +8,7 @@ import {ParametersService, TileFeatureId} from "./parameters.service";
 import {coreLib, uint8ArrayToWasm} from "./wasm";
 import {JumpTargetService} from "./jump.service";
 import {Fetch} from "./fetch.model";
+import {core} from "@angular/compiler";
 
 
 interface InspectionModelData {
@@ -17,6 +18,7 @@ interface InspectionModelData {
     info?: string;
     hoverId?: string
     geoJsonPath?: string;
+    mapId?: string;
     sourceDataReferences?: Array<object>;
     children: Array<InspectionModelData>;
 }
@@ -105,9 +107,9 @@ export class InspectionService {
             for (const data of dataNodes) {
                 const node: TreeTableNode = {};
                 let value = data.value;
-                if (data.type == this.InspectionValueType.NULL.value && data.children === undefined) {
+                if (data.type == coreLib.ValueType.NULL.value && data.children === undefined) {
                     value = "NULL";
-                } else if ((data.type & 128) == 128 && (data.type - 128) == 1) {
+                } else if ((data.type & coreLib.ValueType.ARRAY.value) && (data.type & coreLib.ValueType.NUMBER.value)) {
                     for (let i = 0; i < value.length; i++) {
                         if (!Number.isInteger(value[i])) {
                             const strValue = String(value[i])
@@ -119,7 +121,7 @@ export class InspectionService {
                     }
                 }
 
-                if ((data.type & 128) == 128) {
+                if (data.type & coreLib.ValueType.ARRAY.value) {
                     value = value.join(", ");
                 }
 
@@ -134,6 +136,9 @@ export class InspectionService {
                 if (data.hasOwnProperty("hoverId")) {
                     node.data["hoverId"] = data.hoverId;
                 }
+                if (data.hasOwnProperty("mapId")) {
+                    node.data["mapId"] = data.value["mapId"];
+                }
                 if (data.hasOwnProperty("geoJsonPath")) {
                     node.data["geoJsonPath"] = data.geoJsonPath;
                 }
@@ -220,8 +225,6 @@ export class InspectionService {
             });
     }
 
-    protected readonly InspectionValueType = coreLib.ValueType;
-
     selectedFeatureGeoJsonCollection() {
         return `{"type": "FeatureCollection", "features": [${this.selectedFeatureGeoJsonTexts.join(", ")}]}`;
     }

erdblick_app/app/jump.service.ts

@@ -130,7 +130,6 @@ export class JumpTargetService {
         ]);
     }
 
-    /** Select */
     async highlightByJumpTargetFilter(mapId: string, featureId: string, mode: HighlightMode=coreLib.HighlightMode.SELECTION_HIGHLIGHT) {
         let featureJumpTargets = this.mapService.tileParser?.filterFeatureJumpTargets(featureId) as Array<FeatureJumpAction>;
         const validIndex = featureJumpTargets.findIndex(action => !action.error);

erdblick_app/app/map.service.ts

@@ -395,7 +395,7 @@ export class MapService {
         // Evict present non-required tile layers.
         let newTileLayers = new Map();
         let evictTileLayer = (tileLayer: FeatureTile) => {
-            return !tileLayer.preventCulling && (!this.currentVisibleTileIds.has(tileLayer.tileId) ||
+            return !tileLayer.preventCulling && !this.selectionTopic.getValue().some(v => v.featureTile == tileLayer) && (!this.currentVisibleTileIds.has(tileLayer.tileId) ||
                 !this.getMapLayerVisibility(tileLayer.mapName, tileLayer.layerName) ||
                 tileLayer.level() != this.getMapLayerLevel(tileLayer.mapName, tileLayer.layerName))
         }
@@ -661,16 +661,14 @@ export class MapService {
             })
 
             this.update();
-            await selectionTilePromise;
+            tile = await selectionTilePromise;
+            result.set(tileKey, tile);
         }
 
         return result;
     }
 
     async highlightFeatures(tileFeatureIds: (TileFeatureId|null|string)[], focus: boolean=false, mode: HighlightMode=coreLib.HighlightMode.SELECTION_HIGHLIGHT) {
-        if (mode == coreLib.HighlightMode.SELECTION_HIGHLIGHT)
-            console.trace(tileFeatureIds)
-
         // Load the tiles for the selection.
         const tiles = await this.loadTiles(
             new Set(tileFeatureIds.filter(s => typeof s !== "string").map(s => s?.mapTileKey || null)));
@@ -679,7 +677,7 @@ export class MapService {
         let features = new Array<FeatureWrapper>();
         for (let id of tileFeatureIds) {
             if (typeof id == "string") {
-                // When clicking on geometry that respresents a highlight,
+                // When clicking on geometry that represents a highlight,
                 // this is reflected in the feature id. By processing this
                 // info here, a hover highlight can be turned into a selection.
                 if (id == "hover-highlight") {
@@ -691,8 +689,13 @@ export class MapService {
                 continue;
             }
 
+            if (!id?.featureId) {
+                continue;
+            }
+
             const tile = tiles.get(id?.mapTileKey || "");
-            if (!tile || !id?.featureId) {
+            if (!tile) {
+                console.error(`Could not load tile ${id?.mapTileKey} for highlighting!`);
                 continue;
             }
             if (!tile.has(id?.featureId || "")) {
@@ -705,6 +708,7 @@ export class MapService {
             features.push(new FeatureWrapper(id!.featureId, tile));
         }
 
+        console.trace(`features: ${features}`)
         if (mode == coreLib.HighlightMode.HOVER_HIGHLIGHT) {
             if (features.length) {
                 if (featureSetsEqual(this.selectionTopic.getValue(), features)) {

erdblick_app/app/parameters.service.ts

@@ -283,6 +283,7 @@ export class ParametersService {
         }
 
         this.p().selected = newSelection;
+        this._replaceUrl = false;
         this.parameters.next(this.p());
         return true;
     }
@@ -305,6 +306,7 @@ export class ParametersService {
             this.p().markedPosition = [];
         }
         if (!delayUpdate) {
+            this._replaceUrl = false;
             this.parameters.next(this.p());
         }
     }

erdblick_app/app/view.component.ts

@@ -126,6 +126,8 @@ export class ErdblickViewComponent implements AfterViewInit {
         this.mouseHandler.setInputAction((movement: any) => {
             const position = movement.position;
             const coordinates = this.viewer.camera.pickEllipsoid(position, this.viewer.scene.globe.ellipsoid);
+            // TODO: FIXME before release: Reactivate. Currently, this leads to
+            //  a parameter update race condition, which undoes the subsequent selection.
             // if (coordinates !== undefined) {
             //     this.coordinatesService.mouseClickCoordinates.next(Cartographic.fromCartesian(coordinates));
             // }
@@ -144,10 +146,12 @@ export class ErdblickViewComponent implements AfterViewInit {
                 this.coordinatesService.mouseMoveCoordinates.next(Cartographic.fromCartesian(coordinates))
             }
             let feature = this.viewer.scene.pick(position);
-            this.mapService.highlightFeatures(
-                Array.isArray(feature?.id) ? feature.id : [feature?.id],
-                false,
-                coreLib.HighlightMode.HOVER_HIGHLIGHT).then();
+            // TODO: FIXME before release: Reactivate.
+            // console.log("Mouse Move (Canvas)");
+            // this.mapService.highlightFeatures(
+            //     Array.isArray(feature?.id) ? feature.id : [feature?.id],
+            //     false,
+            //     coreLib.HighlightMode.HOVER_HIGHLIGHT).then();
         }, ScreenSpaceEventType.MOUSE_MOVE);
 
         // Add a handler for camera movement.

libs/core/include/erdblick/inspection.h

@@ -28,6 +28,7 @@ class InspectionConverter
     {
         JsValue key_;
         JsValue value_;
+        JsValue mapId_;
         ValueType type_ = ValueType::Null;
         std::string hoverId_;  // For highlight attribs/relations on hovering.
         std::string info_;

libs/core/src/inspection.cpp

@@ -241,10 +241,8 @@ void InspectionConverter::convertRelation(const model_ptr<Relation>& r)
     }
     auto relGroupScope = push(relGroup);
     auto relScope = push(JsValue(relGroup->children_.size()), nextRelationIndex_, ValueType::FeatureId);
-    relScope->value_ = JsValue::Dict({
-        {"mapTileKey", JsValue(r->model().id().toString())},
-        {"featureId", JsValue(r->target()->toString())},
-    });
+    relScope->value_ = JsValue(r->target()->toString());
+    relScope->mapId_ = JsValue(r->model().mapId());
     relScope->hoverId_ = featureId_+":relation#"+std::to_string(nextRelationIndex_);
     convertSourceDataReferences(r->sourceDataReferences(), *relScope);
     if (r->hasSourceValidity()) {