feat(still-image): display iiif url under the image caption (DEV-243) (…

…#613)

* feat(still-image): adds iiif url under the image caption

* chore(still-image): makes the iiifUrl string a link that can be clicked on the open the image in a new tab

Co-authored-by: André Kilchenmann <github@milchkannen.ch>

src/app/workspace/resource/representation/still-image/still-image.component.html

@@ -1,8 +1,16 @@
 <!-- openseadragon (osd) viewer -->
 <div class="osd-container" [class.drawing]="regionDrawMode">
     <div class="action horizontal top overlay">
+        <div class="captions-container">
+            <div class="top">
+                <span class="caption mat-caption">{{imageCaption}}</span>
+            </div>
+            <div class="bottom">
+                <a href="{{iiifUrl}}" target="_blank" class="iiif mat-caption">{{iiifUrl}}</a>
+            </div>
+        </div>
         <!-- caption -->
-        <span class="caption mat-caption">{{imageCaption}}</span>
+
         <span class="fill-remaining-space"></span>
         <!-- image action tools e.g. zoom, rotate and flip -->
         <span>

src/app/workspace/resource/representation/still-image/still-image.component.scss

@@ -16,11 +16,6 @@ $bright: #ccc;
     height: 300px;
   }
 
-  // .content {
-  //   // min-height: $full-height;
-  //   height: 100%;
-  //   width: 100%;
-
   .osd-container {
     color: $bright;
     background-color: $dark;
@@ -33,9 +28,20 @@ $bright: #ccc;
     &.fullscreen {
       max-width: 100vw;
     }
-  }
 
-  // }
+    .captions-container {
+      .top, .bottom {
+        text-align: left;
+        .iiif {
+          padding: 0px 0px 0px 16px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 50%;
+        }
+      }
+    }
+  }
 }
 
 /*

src/app/workspace/resource/representation/still-image/still-image.component.spec.ts

@@ -74,6 +74,7 @@ function makeRegion(geomString: string[], iri: string): ReadResource {
     template: `
         <app-still-image [images]="stillImageFileRepresentations"
                          [imageCaption]="caption"
+                         [iiifUrl]="iiifUrl"
                          [activateRegion]="inputActivateRegion"
                          [currentTab]="'annotations'"
                          (regionClicked)="regHovered($event)">
@@ -85,6 +86,7 @@ class TestHostComponent implements OnInit {
 
     stillImageFileRepresentations: FileRepresentation[] = [];
     caption = 'test image';
+    iiifUrl = 'https://iiif.test.dasch.swiss:443/0803/incunabula_0000003840.jp2/full/3210,5144/0/default.jpg';
     inputActivateRegion: string;
 
     activeRegion: string;
@@ -174,13 +176,25 @@ describe('StillImageComponent', () => {
         const hostCompDe = testHostFixture.debugElement;
         const stillImageComponentDe = hostCompDe.query(By.directive(StillImageComponent));
 
-        const captionDebugElement = stillImageComponentDe.query(By.css('.mat-caption'));
+        const captionDebugElement = stillImageComponentDe.query(By.css('.caption'));
         const captionEle = captionDebugElement.nativeElement;
 
         expect(captionEle.innerText).toEqual('test image');
 
     });
 
+    it('should display the iiifUrl of the image', () => {
+
+        const hostCompDe = testHostFixture.debugElement;
+        const stillImageComponentDe = hostCompDe.query(By.directive(StillImageComponent));
+
+        const iiifUrlDebugElement = stillImageComponentDe.query(By.css('.iiif'));
+        const iiifUrlEle = iiifUrlDebugElement.nativeElement;
+
+        expect(iiifUrlEle.innerText).toEqual('https://iiif.test.dasch.swiss:443/0803/incunabula_0000003840.jp2/full/3210,5144/0/default.jpg');
+
+    });
+
     it('should have 1 test region loaded (rectangle)', () => {
 
         const osd = testHostComponent.osdViewerComp['_viewer'];

src/app/workspace/resource/representation/still-image/still-image.component.ts

@@ -99,6 +99,7 @@ export class StillImageComponent implements OnChanges, OnDestroy {
 
     @Input() images: FileRepresentation[];
     @Input() imageCaption?: string;
+    @Input() iiifUrl?: string;
     @Input() resourceIri: string;
     @Input() project: string;
     @Input() activateRegion?: string; // highlight a region
@@ -110,7 +111,6 @@ export class StillImageComponent implements OnChanges, OnDestroy {
     @Output() regionClicked = new EventEmitter<string>();
 
     @Output() regionAdded = new EventEmitter<string>();
-
     regionDrawMode: Boolean = false; // stores whether viewer is currently drawing a region
     private _regionDragInfo; // stores the information of the first click for drawing a region
     private _viewer: OpenSeadragon.Viewer;
@@ -543,7 +543,6 @@ export class StillImageComponent implements OnChanges, OnDestroy {
             const sipiBasePath = image.iiifBaseUrl + '/' + image.filename;
             const width = image.dimX;
             const height = image.dimY;
-
             // construct OpenSeadragon tileSources according to https://openseadragon.github.io/docs/OpenSeadragon.Viewer.html#open
             tileSources.push({
                 // construct IIIF tileSource configuration according to

src/app/workspace/resource/resource.component.html

@@ -8,6 +8,7 @@
             <app-still-image #stillImage class="dsp-representation" *ngSwitchCase="representationConstants.stillImage"
                 [images]="representationsToDisplay"
                 [imageCaption]="(incomingResource ? resource.res.label + ': ' + incomingResource.res.label : resource.res.label)"
+                [iiifUrl]="iiifUrl"
                 [compoundNavigation]="compoundPosition"
                 [resourceIri]="incomingResource ? incomingResource.res.id : resource.res.id"
                 [project]="resource.res.attachedToProject"

src/app/workspace/resource/resource.component.ts

@@ -67,6 +67,8 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
 
     selectedTabLabel: string;
 
+    iiifUrl: string;
+
     // list of representations to be displayed
     // --> TODO: will be expanded with | MovingImageRepresentation[] | AudioRepresentation[] etc.
     representationsToDisplay: FileRepresentation[] = [];
@@ -215,6 +217,12 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
             (response: ReadResource) => {
                 const res = new DspResource(response);
                 this.resource = res;
+
+                // if there is no incomingResource and the resource has a still image property, assign the iiiUrl to be passed as an input to the still-image component
+                if (!this.incomingResource && this.resource.res.properties[Constants.HasStillImageFileValue]){
+                    this.iiifUrl = (this.resource.res.properties[Constants.HasStillImageFileValue][0] as ReadStillImageFileValue).fileUrl;
+                }
+
                 this.selectedTabLabel = this.resource.res.entityInfo?.classes[this.resource.res.type].label;
 
                 // get information about the logged-in user, if one is logged-in
@@ -275,6 +283,12 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
                 const res = new DspResource(response);
 
                 this.incomingResource = res;
+
+                // if the resource is a still image, assign the iiiUrl to be passed as an input to the still-image component
+                if (this.incomingResource.res.properties[Constants.HasStillImageFileValue]){
+                    this.iiifUrl = (this.incomingResource.res.properties[Constants.HasStillImageFileValue][0] as ReadStillImageFileValue).fileUrl;
+                }
+
                 res.resProps = this.initProps(response);
                 res.systemProps = this.incomingResource.res.entityInfo.getPropertyDefinitionsByType(SystemPropertyDefinition);
 
@@ -363,7 +377,7 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
         // --> TODO: should be a general object for all kind of representations
         const representations: FileRepresentation[] = [];
 
-        // --> TODO: use a switch here to go throught the different representation types
+        // --> TODO: use a switch here to go through the different representation types
         if (resource.res.properties[Constants.HasStillImageFileValue]) {
             // --> TODO: check if resources is a StillImageRepresentation using the ontology responder (support for subclass relations required)
             // resource has StillImageFileValues that are directly attached to it (properties)
@@ -476,8 +490,7 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
         // request incoming regions --> TODO: add case to get incoming sequences in case of video and audio
         if (resource.res.properties[Constants.HasStillImageFileValue] ||
             resource.res.properties[Constants.HasDocumentFileValue] ||
-            resource.res.properties[Constants.HasAudioFileValue] ||
-            resource.res.properties[Constants.HasArchiveFileValue]) {
+            resource.res.properties[Constants.HasAudioFileValue]) {
             // --> 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