Skip to content

Commit

Permalink
Debug multi-selection refactoring.
Browse files Browse the repository at this point in the history
  • Loading branch information
@josephbirkner
josephbirkner committed Sep 4, 2024
1 parent 99e5535 commit 932a0cd
Show file tree
Hide file tree
Showing 11 changed files with 247 additions and 205 deletions.
84 changes: 45 additions & 39 deletions erdblick_app/app/feature.panel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ interface Column {
selector: 'feature-panel',
template: `
<div class="flex justify-content-end align-items-center"
style="display: flex; align-content: center; justify-content: center; width: 100%; padding: 0.5em;">
style="display: flex; align-content: center; justify-content: center; width: 100%; padding: 0.5em;">
<div class="p-input-icon-left filter-container">
<i (click)="filterPanel.toggle($event)" class="pi pi-filter" style="cursor: pointer"></i>
<input class="filter-input" type="text" pInputText placeholder="Filter data for selected feature"
[(ngModel)]="inspectionService.featureTreeFilterValue" (ngModelChange)="filterTree()"
(keydown)="onKeydown($event)"
[(ngModel)]="inspectionService.featureTreeFilterValue" (ngModelChange)="filterTree()"
(keydown)="onKeydown($event)"
/>
<i *ngIf="inspectionService.featureTreeFilterValue" (click)="clearFilter()"
class="pi pi-times clear-icon" style="cursor: pointer"></i>
class="pi pi-times clear-icon" style="cursor: pointer"></i>
</div>
<div>
<p-button (click)="mapService.focusOnFeature(inspectionService.selectedFeatures[0])"
Expand All @@ -49,59 +49,60 @@ interface Column {
<i *ngIf="isExpanded" class="pi pi-chevron-down"></i>
</div>
<p-treeTable #tt
filterMode="strict"
scrollHeight="flex"
[value]="filteredTree"
[columns]="cols"
[scrollable]="true"
[virtualScroll]="true"
[virtualScrollItemSize]="26"
[tableStyle]="{'min-width': '1px', 'min-height': '1px'}"
filterMode="strict"
scrollHeight="flex"
[value]="filteredTree"
[columns]="cols"
[scrollable]="true"
[virtualScroll]="true"
[virtualScrollItemSize]="26"
[tableStyle]="{'min-width': '1px', 'min-height': '1px'}"
>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData">
<tr [ttRow]="rowNode"
[ngClass]="{'section-style': rowData['type']==InspectionValueType.SECTION.value}"
(click)="onRowClick(rowNode)">
<td>
<div style="white-space: nowrap; overflow-x: auto; scrollbar-width: thin;"
[pTooltip]="rowData['key'].toString()" tooltipPosition="left"
[tooltipOptions]="tooltipOptions">
[pTooltip]="rowData['key'].toString()" tooltipPosition="left"
[tooltipOptions]="tooltipOptions">
<p-treeTableToggler [rowNode]="rowNode" (click)="$event.stopPropagation()">
</p-treeTableToggler>
<span (click)="onKeyClick($event, rowData)"
style="cursor: pointer">{{ rowData['key'] }}
style="cursor: pointer">{{ rowData['key'] }}
</span>
<p-buttonGroup *ngIf="rowData['sourceDataReferences']" class="source-data-ref-container">
<p-buttonGroup *ngIf="rowData['sourceDataReferences']"
class="source-data-ref-container">
<p-button icon="pi pi-database"
[rounded]="true"
severity="secondary"
disabled="true"
[rounded]="true"
severity="secondary"
disabled="true"
/>
<ng-template ngFor let-item [ngForOf]="rowData.sourceDataReferences">
<p-button
(click)="showSourceData($event, item)"
[rounded]="true"
severity="secondary"
label="{{ item.qualifier.substring(0, 1).toUpperCase() }}"
pTooltip="Go to {{ item.qualifier }} Source Data"
tooltipPosition="bottom"
(click)="showSourceData($event, item)"
[rounded]="true"
severity="secondary"
label="{{ item.qualifier.substring(0, 1).toUpperCase() }}"
pTooltip="Go to {{ item.qualifier }} Source Data"
tooltipPosition="bottom"
/>
</ng-template>
</p-buttonGroup>
</div>
</td>
<td [class]="getStyleClassByType(rowData['type'])">
<div style="white-space: nowrap; overflow-x: auto; scrollbar-width: thin;"
[pTooltip]="rowData['value'].toString()" tooltipPosition="left"
[tooltipOptions]="tooltipOptions">
[pTooltip]="rowData['value'].toString()" tooltipPosition="left"
[tooltipOptions]="tooltipOptions">
<div (click)="onValueClick($event, rowData)"
(mouseover)="highlightFeature(rowData)"
(mouseout)="stopHighlight(rowData)">
(mouseover)="onValueHover($event, rowData)"
(mouseout)="onValueHoverExit($event, rowData)">
{{ rowData['value'] }}
<span *ngIf="rowData.hasOwnProperty('info')">
<i class="pi pi-info-circle"
[pTooltip]="rowData['info'].toString()"
tooltipPosition="left">
[pTooltip]="rowData['info'].toString()"
tooltipPosition="left">
</i>
</span>
</div>
Expand Down Expand Up @@ -367,19 +368,24 @@ export class FeaturePanelComponent implements OnInit {
}

if (rowData["type"] == this.InspectionValueType.FEATUREID.value) {
// TODO: Support features from varying maps here.
this.jumpService.selectFeature(
this.inspectionService.selectedFeatures[0].featureTile.mapName,
rowData["value"]).then();
this.jumpService.highlightByJumpTargetFilter(
rowData["value"].mapTileKey,
rowData["value"].featureId).then();
}
// this.copyToClipboard(rowData["value"]);
}

highlightFeature(rowData: any) {
return;
onValueHover(event: any, rowData: any) {
event.stopPropagation();
if (rowData["type"] == this.InspectionValueType.FEATUREID.value) {
this.jumpService.highlightByJumpTargetFilter(
rowData["value"].mapTileKey,
rowData["value"].featureId,
coreLib.HighlightMode.HOVER_HIGHLIGHT).then();
}
}

stopHighlight(rowData: any) {
onValueHoverExit(event: any, rowData: any) {
event.stopPropagation();
return;
}

Expand Down
2 changes: 1 addition & 1 deletion erdblick_app/app/feature.search.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export class FeatureSearchComponent {

selectResult(event: any) {
if (event.value.mapId && event.value.featureId) {
this.jumpService.selectFeature(event.value.mapId, event.value.featureId).then(() => {
this.jumpService.highlightByJumpTargetFilter(event.value.mapId, event.value.featureId).then(() => {
if (this.inspectionService.selectedFeatures.length) {
this.mapService.focusOnFeature(this.inspectionService.selectedFeatures[0]);
}
Expand Down
9 changes: 9 additions & 0 deletions erdblick_app/app/features.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import {uint8ArrayToWasm, uint8ArrayToWasmAsync} from "./wasm";
import {TileLayerParser, TileFeatureLayer} from '../../build/libs/core/erdblick-core';
import {TileFeatureId} from "./parameters.service";

/**
* JS interface of a WASM TileFeatureLayer.
Expand Down Expand Up @@ -184,10 +185,18 @@ export class FeatureWrapper {
});
}

/** Check if this wrapper wraps the same feature as another wrapper. */
equals(other: FeatureWrapper | null): boolean {
if (!other) {
return false;
}
return this.featureTile.mapTileKey == other.featureTile.mapTileKey && this.featureId == other.featureId;
}

key(): TileFeatureId {
return {
mapTileKey: this.featureTile.mapTileKey,
featureId: this.featureId
};
}
}
14 changes: 3 additions & 11 deletions erdblick_app/app/inspection.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {BehaviorSubject, distinctUntilChanged, distinctUntilKeyChanged, filter,
import {MapService} from "./map.service";
import {Feature, TileSourceDataLayer} from "../../build/libs/core/erdblick-core";
import {FeatureWrapper} from "./features.model";
import {ParametersService} from "./parameters.service";
import {ParametersService, TileFeatureId} from "./parameters.service";
import {coreLib, uint8ArrayToWasm} from "./wasm";
import {JumpTargetService} from "./jump.service";
import {Fetch} from "./fetch.model";
Expand Down Expand Up @@ -71,7 +71,7 @@ export class InspectionService {
if (!selectedFeatures?.length) {
this.isInspectionPanelVisible = false;
this.featureTreeFilterValue = "";
this.parametersService.unsetSelectedFeature();
this.parametersService.setSelectedFeatures([]);
this.selectedFeatures = [];
return;
}
Expand All @@ -87,16 +87,8 @@ export class InspectionService {
this.loadFeatureData();
});
});
this.parametersService.setSelectedFeature(this.selectedFeatures[0].featureTile.mapName, this.selectedFeatures[0].featureId);
});

this.parametersService.parameters.pipe(distinctUntilChanged()).subscribe(parameters => {
if (parameters.selected.length == 2) {
const [mapId, featureId] = parameters.selected;
if (!this.selectedFeatures.some(f => f.featureId == featureId)) {
this.jumpService.selectFeature(mapId, featureId);
}
}
this.parametersService.setSelectedFeatures(this.selectedFeatures.map(f => f.key()));
});

this.selectedSourceData.pipe(distinctUntilChanged(selectedSourceDataEqualTo)).subscribe(selection => {
Expand Down
20 changes: 11 additions & 9 deletions erdblick_app/app/jump.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {InfoMessageService} from "./info.service";
import {coreLib} from "./wasm";
import {FeatureSearchService} from "./feature.search.service";
import {SidePanelService, SidePanelState} from "./sidepanel.service";
import {HighlightMode} from "build/libs/core/erdblick-core";

export interface SearchTarget {
name: string;
Expand Down Expand Up @@ -116,7 +117,7 @@ export class JumpTargetService {
name: `Jump to ${fjt.name}`,
label: label,
enabled: !fjt.error,
execute: (_: string) => { this.jumpToFeature(fjt).then(); },
execute: (_: string) => { this.highlightByJumpTarget(fjt).then(); },
validate: (_: string) => { return !fjt.error; },
}
});
Expand All @@ -129,17 +130,18 @@ export class JumpTargetService {
]);
}

async selectFeature(mapId: string, featureId: string) {
/** 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);
if (validIndex == -1) {
console.error(`Error highlighting ${featureId}!`);
return;
}
await this.jumpToFeature(featureJumpTargets[validIndex], false, mapId);
await this.highlightByJumpTarget(featureJumpTargets[validIndex], false, mapId, mode);
}

async jumpToFeature(action: FeatureJumpAction, moveCamera: boolean=true, mapId?:string|null) {
async highlightByJumpTarget(action: FeatureJumpAction, moveCamera: boolean=true, mapId?:string|null, mode: HighlightMode=coreLib.HighlightMode.SELECTION_HIGHLIGHT) {
// Select the map.
if (!mapId) {
if (action.maps.length > 1) {
Expand Down Expand Up @@ -178,10 +180,10 @@ export class JumpTargetService {
let selectThisFeature = extRefsResolved.responses[0][0];

// Set feature-to-select on MapService.
await this.mapService.selectFeature(
selectThisFeature.tileId,
selectThisFeature.typeId,
selectThisFeature.featureId,
moveCamera);
const featureId = `${selectThisFeature.typeId}.${selectThisFeature.featureId.filter((_, index) => index % 2 === 1).join('.')}`;
await this.mapService.highlightFeatures([{
mapTileKey: selectThisFeature.tileId,
featureId: featureId
}], moveCamera, mode).then();
}
}
Loading

0 comments on commit 932a0cd

Please sign in to comment.