Fix image viewer with multiple images (#63)

* Fix spelling error in DTO converter

* Viewer fixes for multiple images

src/Services/Core/GlobalPollenProject.App/Converters.fs

@@ -101,7 +101,7 @@ module Metadata =
 
     let createAccess accessMethod institutionName institutionUrl =
         match accessMethod with
-        | "digitial" -> DigitialOnly |> Ok
+        | "digital" -> DigitialOnly |> Ok
         | "institution" -> 
             let createInstitution name web = { Name = name; Web = web }
             createInstitution

src/Web/WebUI/GlobalPollenProject.Web/Scripts/Components/Viewer/focusslider.ts

@@ -19,6 +19,7 @@ export class FocusSlider {
         this.id = sliderId;
         this.viewer = viewer;
         $(this.viewer.containerId).on(ViewerEvent.EVENT_LOADED_IMAGES, () => {
+            this.dispose();
             this.append();
         });
     }

src/Web/WebUI/GlobalPollenProject.Web/Scripts/Components/Viewer/scalebar.ts

@@ -22,6 +22,7 @@ export class ScaleBar {
         this.id = barId;
         this.scale = scale;
         $(this.viewer.containerId).on(ViewerEvent.EVENT_LOADED_IMAGES, () => {
+            this.dispose();
             this.initialise();
             this.loaded = true;
         });

src/Web/WebUI/GlobalPollenProject.Web/Scripts/Components/Viewer/viewer.ts

@@ -51,10 +51,14 @@ export class Viewer {
         this.focusLevel = 0;
         this.imgHeight = undefined;
         this.imgWidth = undefined;
+        $(this.containerId).empty();
         $(this.containerId).css("position", "relative");
         $(this.containerId).css("width", this.width);
         $(this.containerId).css("height", this.height);
+        $(this.containerId).css("background-color", "grey");
+        $(this.containerId).append("<div class='viewer-loading-message'><div class='fa-3x'><i class='fas fa-spinner fa-spin'></i></div><span>Loading image...</span></div>");
         this.loadImages(() => {
+            $(this.containerId + ' .viewer-loading-message').remove();
             this.createCanvas(() => {
                 this.render();
             });
@@ -174,7 +178,7 @@ export class Viewer {
             .attr("id", this.id.substr(1))
             .attr("width", this.width)
             .attr("height", this.height)
-            .call(zoomBehaviour);                
+            .call(zoomBehaviour);
 
         this.context = this.canvas.node().getContext("2d");
 

src/Web/WebUI/GlobalPollenProject.Web/Scripts/Components/gallery.ts

@@ -3,11 +3,6 @@ import { FocusSlider } from "./Viewer/focusslider";
 import { ScaleBar } from "./Viewer/scalebar";
 import "knockout";
 
-const containerId = "#viewer-container"
-const canvasId = "#viewer-canvas"
-const sliderId = "#viewer-focus-slider"
-const scaleBarId = "#viewer-scaleBar"
-
 export function activate(_: HTMLElement) {
     const image = $(".slide-gallery-item").first();
     if (image) {
@@ -26,6 +21,11 @@ export class Gallery {
     scaleBar: ScaleBar
     //jCropApi: JQuery.Jcrop.Api
 
+    containerId = "#viewer-container"
+    canvasId = "#viewer-canvas"
+    sliderId = "#viewer-focus-slider"
+    scaleBarId = "#viewer-scaleBar"    
+
     /**
      * Creates/updates the image viewer
      * @param {*} frames        an array of image URLs, in focus order
@@ -38,15 +38,15 @@ export class Gallery {
     }
 
     changeImage(frames: string[], pixelWidth: number) {
-        if(this.viewer != null) this.viewer.dispose();
         if(this.slider != null) this.slider.dispose();
         if(this.scaleBar != null) this.scaleBar.dispose();
+        if(this.viewer != null) this.viewer.dispose();
         $("#viewer-container").empty();
-        this.viewer = new Viewer(containerId, canvasId, $(containerId).width(), 500, frames);
+        this.viewer = new Viewer(this.containerId, this.canvasId, $(this.containerId).width(), 500, frames);
         if(frames.length > 1) {
-            this.slider = new FocusSlider(this.viewer, sliderId);
+            this.slider = new FocusSlider(this.viewer, this.sliderId);
         }
-        this.scaleBar = new ScaleBar(this.viewer, scaleBarId, pixelWidth);
+        this.scaleBar = new ScaleBar(this.viewer, this.scaleBarId, pixelWidth);
     }
 
     activateGalleryLinks() {

src/Web/WebUI/GlobalPollenProject.Web/Scripts/Digitise/digitise-app.ts

@@ -717,7 +717,6 @@ function SlideDetailViewModel(detail) {
 
     self.selectMagnification = function (element) {
         self.selectedMagnification(element);
-
         self.activateFocusScaleBar();
     }
 
@@ -805,7 +804,8 @@ function SlideDetailViewModel(detail) {
         }
 
         self.scaleBar = new ScaleBar(self.viewer, "#focus-image-previewer-scalebar", self.selectedMagnification().pixelWidth);
-        self.scaleBar.initialise();
+        // Manually trigger loaded images event to connect the scalebar.
+        $(self.viewer.containerId).trigger(ViewerEvent.EVENT_LOADED_IMAGES);
     }
 
     self.activateMeasuringLine = function () {

src/Web/WebUI/GlobalPollenProject.Web/Styles/Components/_Viewer.scss

@@ -5,4 +5,14 @@
 }
 
 #cropping-container img { max-width: none;} /* fix responsive issue*/
-.jcrop-container img { max-width: none; }
+.jcrop-container img { max-width: none; }
+
+
+.viewer-loading-message {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: #fff;
+}

src/Web/WebUI/GlobalPollenProject.Web/View.fs

@@ -393,14 +393,14 @@ module Components =
 
     let galleryViewImageList images =
         div [ _class "card" ] [
-            div [ _class "card-header" ] [ str "Select image:" ]
+            div [ _class "card-header" ] [ strf "Select a different view (%i available)" (images |> List.length) ]
             div [ _class "card-block" ] [
                 div [ _class "row"; _id "slide-gallery" ] (images |> List.map(fun i ->
                     div [ _class "slide-gallery-item col-md-3"
                           attr "data-frames" (JsonSerializer.Serialize(i.Frames))
                           attr "data-pixelwidth" (i.PixelWidth.ToString()) ] [
-                        img [ _src i.Frames.Head; _alt "Image preview" ]
-                    ]) )
+                            img [ _src i.FramesSmall.Head; _alt "Image preview" ]
+                    ]))
             ]
         ]
 
@@ -505,24 +505,38 @@ module Home =
 
 module Slide =
 
+    let toInitials (s:string) =
+        s.Split(" ") 
+        |> Array.choose (fun s -> if s.Length > 0 then Some (String([|s.[0]|])) else None)
+        |> String.concat ". "
+
+    let personDtoToLastFirst (s:string) =
+        if s = "Unknown" || String.IsNullOrEmpty(s) then "Unknown"
+        else
+            let lastName = s.Split(". ") |> Seq.last
+            let firstNames = s.Split(". ") |> Seq.rev |> Seq.tail |> String.concat ". "
+            sprintf "%s, %s" lastName firstNames
+
     let citation vm latinName =
         let authors = 
-            [ vm.Slide.CollectorName; vm.Slide.PreppedBy
-              sprintf "%s, %s" vm.Collection.CuratorSurname vm.Collection.CuratorFirstNames ]
+            [ (personDtoToLastFirst vm.Slide.CollectorName); (personDtoToLastFirst vm.Slide.PreppedBy) ]
+            |> List.sort
+            |> List.append [ sprintf "%s, %s" vm.Collection.CuratorSurname (toInitials vm.Collection.CuratorFirstNames) ]
             |> List.filter (fun s -> not (String.IsNullOrEmpty s) && s <> "Unknown")
+            |> List.distinct
         div [ _class "card card-inverse card-primary crop-panel mb-3" ] [
             div [ _class "card-block" ] [
                 h4 [ _class "card-title" ] [ encodedText "Citation" ]
                 p [] [ 
                     if authors.Length = 1 then strf "%s (%i). " authors.Head vm.Collection.Published.Year
-                    else strf "%s (%i). " (authors |> String.concat ";") vm.Collection.Published.Year
+                    else strf "%s (%i). " (authors |> String.concat "; ") vm.Collection.Published.Year
                     strf "%s (%s). " latinName vm.Slide.CollectionSlideId
                     str "Digitised palynological slide. In: "
                     em [] [ str vm.Collection.Name ]
                     strf " (Version %i, published %s). " vm.Collection.Version (vm.Collection.Published.ToString("d"))
                     if String.IsNullOrEmpty(vm.Collection.Institution) |> not then strf "Original material located at %s. " vm.Collection.Institution
                     str "Retrieved from globalpollenproject.org on "
-                    strf "%s."(DateTime.Now.ToString("d"))
+                    strf "%s."(DateTime.Now.ToString("yyyy-MM-dd"))
                 ]
             ]
         ]