use new parentAndChildDetails property on an image response, to add extra sections (with thumbnails) in the bottom left of the sidebar (below crops etc.)

Author: twrichards

kahuna/public/js/image/controller.js

@@ -169,6 +169,8 @@ image.controller('ImageCtrl', [
       ctrl.canUserEdit = editable;
     });
 
+    ctrl.objectHasEntries = obj => obj && Object.keys(obj).length > 0;
+
     const usages = imageUsagesService.getUsages(ctrl.image);
     const usagesCount$ = usages.count$;
 

kahuna/public/js/image/view.html

@@ -151,6 +151,32 @@
             class="image-details__delete-crops"
             gr-image="ctrl.image"
             gr-on-delete="ctrl.onCropsDeleted()"></gr-delete-crops>
+
+    <div class="image-info image-details--scroll" style="margin-top: auto; max-height: 50%">
+        <div ng-repeat="(title, idToDetailMap) in ctrl.image.data.parentAndChildDetails">
+            <div class="image-info__group image-info__group--bottom" aria-label="{{title}}"
+                 ng-if="ctrl.objectHasEntries(idToDetailMap)">
+                <dl class="image-info__group--dl">
+                    <dt class="image-info__heading">{{title}}</dt>
+                    <dd class="image-info__heading--crops"
+                        ng-repeat="(id, detail) in idToDetailMap">
+                        <a class="image-crop"
+                           ui-sref="image({imageId: id})"
+                           aria-label="View {{title}}">
+                            <img class="image-crop__image"
+                                 alt="{{title}} {{id}} thumbnail"
+                                 ng-src="{{detail.thumbnail}}" />
+                            <div class="flex-container image-crop__more-info">
+                                <span ng-if="detail.dimensions">{{detail.dimensions.width}} &times; {{detail.dimensions.height}}</span>
+                                <span class="flex-spacer"></span>
+                                <span class="image-crop__creator" title="Added by {{detail.addedBy}} at {{detail.addedAt | date:'medium'}}">{{detail.addedBy | getInitials}}</span>
+                            </div>
+                        </a>
+                    </dd>
+                </dl>
+            </div>
+        </div>
+    </div>
 </div>
 
 <div class="image-details image-details--full-image" role="complementary" aria-label="Image information">

kahuna/public/stylesheets/main.css

@@ -2116,7 +2116,8 @@ FIXME: what to do with touch devices
 }
 
 .image-details__delete-crops {
-    width: 100%;
+  width: 100%;
+  outline: 1px solid #565656;
 }
 
 .image-details:after {
@@ -2136,6 +2137,11 @@ FIXME: what to do with touch devices
     border-bottom: 1px solid #565656;
 }
 
+.image-info__group--bottom {
+  border-bottom: 0;
+  border-top: 1px solid #565656;
+}
+
 .image-info__group--last {
     border-bottom: 0;
     clear: both;

media-api/app/controllers/MediaApi.scala

@@ -628,6 +628,8 @@ class MediaApi(
         val deleteImagePermission = authorisation.isUploaderOrHasPermission(request.user, source.instance.uploadedBy, DeleteImagePermission)
         val deleteCropsOrUsagePermission = canUserDeleteCropsOrUsages(request.user)
 
+        import JodaWrites._
+        implicit val jsonDetailsWrites: OWrites[RelationDetail] = Json.writes[RelationDetail]
         val getRelationDetails = elasticSearch.getRelationDetails(id, imageResponse.getSecureThumbUrl)_
         val relationDetails = Map(
           "Replacement for" -> source.instance.identifiers.get(ImageStorageProps.replacesMediaIdIdentifierKey).map(getRelationDetails),

media-api/app/lib/elasticsearch/ElasticSearch.scala

@@ -8,7 +8,7 @@ import com.gu.mediaservice.lib.auth.Authentication.Principal
 import com.gu.mediaservice.lib.elasticsearch.{CompletionPreview, ElasticSearchClient, ElasticSearchConfig, MigrationStatusProvider, Running}
 import com.gu.mediaservice.lib.logging.{GridLogging, LogMarker, MarkerMap}
 import com.gu.mediaservice.lib.metrics.FutureSyntax
-import com.gu.mediaservice.model.{Agencies, Agency, AwaitingReviewForSyndication, Image}
+import com.gu.mediaservice.model.{Agencies, Agency, AwaitingReviewForSyndication, Dimensions, Image}
 import com.sksamuel.elastic4s.ElasticDsl
 import com.sksamuel.elastic4s.ElasticDsl._
 import com.sksamuel.elastic4s.requests.get.{GetRequest, GetResponse}
@@ -334,12 +334,16 @@ class ElasticSearch(
 
   def getRelationDetails(mediaIdThisIsFor: String, getSecureThumbUrl: Image => String)(
     id: String
-  )(implicit ex: ExecutionContext, request: AuthenticatedRequest[AnyContent, Principal], logMarker:MarkerMap = MarkerMap()): (String, Option[Map[String, String]]) = {
+  )(implicit ex: ExecutionContext, logMarker:MarkerMap = MarkerMap()): (String, Option[RelationDetail]) = {
     try {
-      id -> Await.result(getImageById(id), 5.seconds).map(image => Map(
-        "thumbnail" -> getSecureThumbUrl(image),
-        "addedBy" -> image.uploadedBy
-      ))
+      id -> Await.result(getImageById(id), 5.seconds).map{image =>
+        RelationDetail(
+          thumbnail =  getSecureThumbUrl(image),
+          addedBy = image.uploadedBy,
+          addedAt = image.uploadTime,
+          dimensions = image.source.orientedDimensions.orElse(image.source.dimensions)
+        )
+      }
     } catch {
       case e: TimeoutException =>
         logger.error(logMarker, s"Timeout getting image $id (when finding relation details for $mediaIdThisIsFor)", e)

media-api/app/lib/elasticsearch/ElasticSearchModel.scala

@@ -4,7 +4,7 @@ import com.gu.mediaservice.lib.argo.model.ExtraCounts
 import com.gu.mediaservice.lib.auth.{Authentication, Tier}
 import com.gu.mediaservice.lib.formatting.{parseDateFromQuery, printDateTime}
 import com.gu.mediaservice.model.usage.UsageStatus
-import com.gu.mediaservice.model.{Image, PrintUsageFilters, SyndicationStatus}
+import com.gu.mediaservice.model.{Dimensions, Image, PrintUsageFilters, SyndicationStatus}
 import lib.querysyntax.{Condition, Parser}
 import org.joda.time.DateTime
 import play.api.libs.json.{Json, OWrites}
@@ -52,6 +52,12 @@ object AggregateSearchParams {
     )
   }
 }
+case class RelationDetail(
+  thumbnail: String,
+  addedBy: String,
+  addedAt: DateTime,
+  dimensions: Option[Dimensions]
+)
 
 case class SearchParams(
   query: Option[String] = None,