From 86e75b9fc540dde01590257d786fb65ee7af2c9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= Date: Wed, 26 May 2021 10:11:08 +0200 Subject: [PATCH] feat(resource): display region annotations in still images (DSP-1585) (#445) * feat(resource): show region's metadata * feat(resource): get regions in compound objects * style(resource): clean up osd viewer * fix(resource): do not zoom on click in osd --- src/app/material-module.ts | 8 +- .../still-image/still-image.component.html | 10 +-- .../still-image/still-image.component.scss | 16 ++-- .../still-image/still-image.component.ts | 6 +- .../resource/resource.component.html | 41 +++++++-- .../resource/resource.component.scss | 6 ++ .../workspace/resource/resource.component.ts | 85 ++++++++++++++----- 7 files changed, 126 insertions(+), 46 deletions(-) diff --git a/src/app/material-module.ts b/src/app/material-module.ts index cfa42c6bad..5f0e758612 100644 --- a/src/app/material-module.ts +++ b/src/app/material-module.ts @@ -3,6 +3,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop'; import { NgModule } from '@angular/core'; // material modules import { MatAutocompleteModule } from '@angular/material/autocomplete'; +import { MatBadgeModule } from '@angular/material/badge'; import { MatButtonModule } from '@angular/material/button'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; import { MatCardModule } from '@angular/material/card'; @@ -23,8 +24,8 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatRadioModule } from '@angular/material/radio'; import { MatSelectModule } from '@angular/material/select'; import { MatSidenavModule } from '@angular/material/sidenav'; -import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatSliderModule } from '@angular/material/slider'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatSortModule } from '@angular/material/sort'; import { MatTableModule } from '@angular/material/table'; @@ -36,6 +37,7 @@ import { MatTreeModule } from '@angular/material/tree'; const matModules = [ DragDropModule, MatAutocompleteModule, + MatBadgeModule, MatButtonModule, MatButtonToggleModule, MatCardModule, @@ -68,9 +70,9 @@ const matModules = [ ]; @NgModule({ - imports: [ matModules ], + imports: [matModules], - exports: [ matModules ] + exports: [matModules] }) export class MaterialModule { } diff --git a/src/app/workspace/resource/representation/still-image/still-image.component.html b/src/app/workspace/resource/representation/still-image/still-image.component.html index 984dd15947..4d626158b1 100644 --- a/src/app/workspace/resource/representation/still-image/still-image.component.html +++ b/src/app/workspace/resource/representation/still-image/still-image.component.html @@ -5,13 +5,13 @@
-
+
- {{imageCaption}} + {{imageCaption}} - + @@ -44,8 +44,8 @@
-
- +
+
- + @@ -26,15 +26,17 @@ - The resource {{resource?.res.resourceClassLabel}} has no defined + The resource {{resource?.res.resourceClassLabel}} has no defined properties. + + @@ -46,13 +48,40 @@ - + The resource {{resource?.res.resourceClassLabel}} has no defined properties. + + + + + + + Annotations + + +
+ + + + + + + + The resource {{resource?.res.resourceClassLabel}} has no defined properties. +
+ + diff --git a/src/app/workspace/resource/resource.component.scss b/src/app/workspace/resource/resource.component.scss index 57cb15ae9e..21020d8a90 100644 --- a/src/app/workspace/resource/resource.component.scss +++ b/src/app/workspace/resource/resource.component.scss @@ -1,8 +1,14 @@ +@import "../../../assets/style/config"; + .previousBtn { margin: 24px 48px; position: absolute; } +.active { + border: 1px solid $primary_800; +} + @media (max-width: 1024px) { .previousBtn { margin: 12px auto 0 12px; diff --git a/src/app/workspace/resource/resource.component.ts b/src/app/workspace/resource/resource.component.ts index 04357e4896..84f2b807e6 100644 --- a/src/app/workspace/resource/resource.component.ts +++ b/src/app/workspace/resource/resource.component.ts @@ -49,6 +49,13 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { // this will be the currently selected (part-of main) resource incomingResource: DspResource; + // for the annotations e.g. regions in a still image representation + annotationResources: DspResource[]; + + selectedRegion: string; + + selectedTab = 0; + // list of representations to be displayed // --> TODO: will be expanded with | MovingImageRepresentation[] | AudioRepresentation[] etc. representationsToDisplay: StillImageRepresentation[] = []; @@ -57,9 +64,6 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { // this will store the current page position information compoundPosition: DspCompoundPosition; - // --> TODO: incoming representation annotations (DSP-1583) - // annotations: - showAllProps = false; loading = true; @@ -120,6 +124,7 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { this.incomingResource = undefined; this.representationsToDisplay = []; this.compoundPosition = undefined; + // get resource with all necessary information // incl. incoming resources and annotations if (this.resourceIri) { @@ -149,21 +154,24 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { } compoundNavigation(page: number) { + this.selectedRegion = undefined; + this.representationsToDisplay = []; - // set current compound object position + // set current compound object position: // calculate offset and offset item position from current page and total pages info - const offset = Math.ceil(page / 25) - 1; const position = Math.floor(page - (offset * 25) - 1); + // get incoming still image representations, if the offset changed if (offset !== this.compoundPosition.offset) { this.compoundPosition.offset = offset; this.getIncomingStillImageRepresentations(offset); } else { - // get incoming resource + // get incoming resource, if the offset is the same but page changed this.getIncomingResource(this.resource.incomingRepresentations[position].id); } + this.compoundPosition.position = position; this.compoundPosition.page = page; @@ -201,20 +209,18 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { (countQuery: CountQueryResponse) => { if (countQuery.numberOfResults > 0) { - this.compoundPosition = new DspCompoundPosition(countQuery.numberOfResults); this.compoundNavigation(1); - // this.getIncomingStillImageRepresentations(this.compoundPosition.offset); } }, (error: ApiResponseError) => { this._notification.openSnackBar(error); } ); + } else { + this.requestIncomingResources(this.resource); } - // --> TODO: myabe better solution: find resource type and get representation info - // gather resource property information res.resProps = this.initProps(response); @@ -239,6 +245,10 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { res.systemProps = this.incomingResource.res.entityInfo.getPropertyDefinitionsByType(SystemPropertyDefinition); this.collectImagesAndRegionsForResource(this.incomingResource); + + if (this.representationsToDisplay.length && this.compoundPosition) { + this.getIncomingRegions(this.incomingResource, 0); + } }, (error: ApiResponseError) => { this._notification.openSnackBar(error); @@ -319,21 +329,36 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { for (const img of fileValues) { const regions: Region[] = []; + + const annotations: DspResource[] = []; + for (const incomingRegion of resource.incomingAnnotations) { const region = new Region(incomingRegion); regions.push(region); + const annotation = new DspResource(incomingRegion); + + // gather region property information + annotation.resProps = this.initProps(incomingRegion); + + // gather system property information + annotation.systemProps = incomingRegion.entityInfo.getPropertyDefinitionsByType(SystemPropertyDefinition); + + annotations.push(annotation); + } const stillImage = new StillImageRepresentation(img, regions); representations.push(stillImage); + this.annotationResources = annotations; } } this.representationsToDisplay = representations; + } /** @@ -362,9 +387,6 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { // set the incoming representations for the current offset only this.resource.incomingRepresentations = incomingImageRepresentations.resources; - - // --> KEEP for the moment (old implementation): Array.prototype.push.apply(this.resource.incomingRepresentations, incomingImageRepresentations.resources); - this.getIncomingResource(this.resource.incomingRepresentations[this.compoundPosition.position].id); } @@ -380,19 +402,19 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { * requests incoming resources for [[this.resource]]. * Incoming resources are: regions, StillImageRepresentations, and incoming links. */ - protected requestIncomingResources(): void { + protected requestIncomingResources(resource: DspResource): void { - // make sure that this.resource has been initialized correctly - if (this.resource === undefined) { + // make sure that this resource has been initialized correctly + if (resource === undefined) { return; } // request incoming regions --> TODO: add case to get incoming sequences in case of video and audio - if (this.resource.res.properties[Constants.HasStillImageFileValue]) { + if (resource.res.properties[Constants.HasStillImageFileValue]) { // --> TODO: check if resources is a StillImageRepresentation using the ontology responder (support for subclass relations required) // the resource is a StillImageRepresentation, check if there are regions pointing to it - this.getIncomingRegions(0); + this.getIncomingRegions(resource, 0); } else { // this resource is not a StillImageRepresentation @@ -400,7 +422,6 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { // this gets the first page of incoming StillImageRepresentations // more pages may be requested by [[this.viewer]]. - // --> TODO: for now, we begin with offset 0. This may have to be changed later (beginning somewhere in a collection) this.getIncomingStillImageRepresentations(this.compoundPosition.offset); } @@ -414,16 +435,19 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { * * @param offset the offset to be used (needed for paging). First request uses an offset of 0. */ - protected getIncomingRegions(offset: number): void { - this._incomingService.getIncomingRegions(this.resource.res.id, offset).subscribe( + protected getIncomingRegions(resource: DspResource, offset: number): void { + this._incomingService.getIncomingRegions(resource.res.id, offset).subscribe( (regions: ReadResourceSequence) => { // append elements of regions.resources to resource.incoming - Array.prototype.push.apply(this.resource.incomingAnnotations, regions.resources); + Array.prototype.push.apply(resource.incomingAnnotations, regions.resources); + + // this.annotationResources.push(regions.resources) // prepare regions to be displayed // triggers ngOnChanges of StillImageComponent - this.collectImagesAndRegionsForResource(this.resource); + this.collectImagesAndRegionsForResource(resource); + }, (error: any) => { @@ -451,4 +475,19 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { } ); } + + openRegion(iri: string) { + // open annotation tab + this.selectedTab = (this.incomingResource ? 2 : 1); + + // activate the selected region + this.selectedRegion = iri; + + // and scroll to region with this id + const region = document.getElementById(iri); + if (region) { + region.scrollIntoView(); + } + + } }