Improve the position and size of the annotation popover

This tries to fit it onto the window rather than letting it be
vertically partially hidden.  If it is too large, some components can be
scaled to fit.

Author: manthey

histomicsui/web_client/stylesheets/popover/annotationPopover.styl

@@ -3,6 +3,7 @@
   pointer-events none
   margin-left 15px
   z-index 1000
+  --arrow-offset .001px
 
   .h-annotation-popover
     position absolute
@@ -14,28 +15,29 @@
     border-radius 3px
     border 1px solid #000
     box-shadow 0 5px 10px rgba(0, 0, 0, 0.5)
+    --arrow-size 13px
 
     &:before
       content ""
       border-color transparent #000 transparent transparent
       border-style solid
-      border-width 13px
+      border-width var(--arrow-size)
       height 0
       width 0
       position absolute
-      left -26px
-      top calc(50% - 13px)
+      left calc(-2 * var(--arrow-size))
+      top calc(50% - var(--arrow-size) + var(--arrow-offset))
 
     &:after
       content ""
       border-color transparent #fff transparent transparent
       border-style solid
-      border-width 13px
+      border-width var(--arrow-size)
       height 0
       width 0
       position absolute
-      left -25px
-      top calc(50% - 13px)
+      left calc(-2 * var(--arrow-size) + 1px)
+      top calc(50% - var(--arrow-size) + var(--arrow-offset))
 
     > :not(.h-annotation-name)
       padding 0 20px

histomicsui/web_client/templates/popover/annotationPopover.pug

@@ -46,4 +46,5 @@
                       td #{value}
               - var add = elementAdditionalValues(element, annotation)
               if add
-                | !{add}
+                .additionalData
+                  | !{add}

histomicsui/web_client/views/popover/AnnotationPopover.js

@@ -121,7 +121,19 @@ var AnnotationPopover = View.extend({
         if (!this._visible()) {
             this._hide();
         }
-        this._height = this.$('.h-annotation-popover').height();
+        this.$('.h-annotation-popover .additionalData').css('font-size', '');
+        this._height = this.$('.h-annotation-popover').outerHeight(true);
+        if (this._height > window.innerHeight) {
+            this.$('.h-annotation-popover .additionalData').css('font-size', '90%');
+            let delta = (this._height - this.$('.h-annotation-popover').outerHeight(true)) / 10;
+            if (delta > 0) {
+                let scale = 100 - (this._height - window.innerHeight) / delta;
+                if (scale > 10 && scale < 100) {
+                    this.$('.h-annotation-popover .additionalData').css('font-size', `${scale}%`);
+                }
+            }
+            this._height = this.$('.h-annotation-popover').outerHeight(true);
+        }
         this._position();
         return this;
     },
@@ -275,10 +287,13 @@ var AnnotationPopover = View.extend({
         } else {
             evt = this._lastPositionEvt;
         }
-        if (evt && this._visible()) {
+        if (evt && this._visible() && this._height) {
+            let idealPos = evt.pageY - this._height / 2;
+            let pos = Math.max(0, Math.min(window.innerHeight - this._height, idealPos));
             this.$el.css({
                 left: evt.pageX + 5,
-                top: evt.pageY - this._height / 2
+                top: pos,
+                '--arrow-offset': (idealPos - pos) + 'px'
             });
         }
     },