[FE-15602] Popup image support (#650)

* Image support in map popup wip
* Async everything so we can check image size before loading, use template strings for readability
* Dont close popup if its the loader, cleanup and organize
* Fix copy/paste functionality to copy image url, add a flag for showing image previews or not, styles
* Export image file types constants, add a bunch, fix some
* Bug fix for image extensions constant, parse URL fully and only compare the path to the known image extensions so we can handle other parts of the URL if they exist

---------

Co-authored-by: Todd Mostak <tmostak@gmail.com>

dist/charting.css

@@ -928,7 +928,6 @@ body {
       animation: hideMapPopup .25s; }
   .dc-chart .map-popup-wrap-new {
     position: absolute;
-    z-index: 11;
     width: 0;
     display: flex; }
     .dc-chart .map-popup-wrap-new.showPopup {
@@ -987,16 +986,23 @@ body {
       font-size: 12px;
       line-height: 1.2;
       margin-bottom: 4px; }
+      .dc-chart .map-popup-box-new .map-popup-item .popup-item-val {
+        display: inline-block;
+        word-break: break-all; }
       .dc-chart .map-popup-box-new .map-popup-item .popup-item-val a {
         text-decoration: none; }
       .dc-chart .map-popup-box-new .map-popup-item .popup-item-val a:hover {
         border-bottom: 1px solid;
         color: #22A7F0; }
+      .dc-chart .map-popup-box-new .map-popup-item .map-popup-image {
+        width: 95%;
+        height: 200px;
+        object-fit: contain; }
     .dc-chart .map-popup-box-new .popup-item-copy {
       display: inline-block;
       position: absolute;
-      top: 0;
-      right: 0;
+      top: 4px;
+      right: 4px;
       cursor: pointer;
       justify-content: flex-end;
       visibility: hidden; }

scss/chart.scss

@@ -920,7 +920,6 @@ body {
 
     .map-popup-wrap-new {
         position: absolute;
-        z-index: 11;
         width: 0;
         display: flex;
 
@@ -1001,22 +1000,29 @@ body {
         .map-popup-item{
             font-size: 12px;
             line-height: 1.2;
-
             margin-bottom: 4px;
-
+          .popup-item-val {
+            display: inline-block;
+            word-break: break-all;
+          }
           .popup-item-val a {
             text-decoration: none;
           }
           .popup-item-val a:hover {
             border-bottom: 1px solid;
             color: $blue-main;
           }
+          .map-popup-image {
+            width: 95%;
+            height: 200px;
+            object-fit: contain;
+          }
         }
         .popup-item-copy {
           display: inline-block;
           position: absolute;
-          top: 0;
-          right: 0;
+          top: 4px;
+          right: 4px;
           cursor: pointer;
           justify-content: flex-end;
           visibility: hidden;

src/charts/raster-chart.js

@@ -94,9 +94,10 @@ export default function rasterChart(parent, useMap, chartGroup, _mapboxgl) {
   let _minPopupShapeBoundsArea = 16 * 16
   let _popupSearchRadius = 2
   const _popupDivClassName = "map-popup"
+  const _popupLoadingClassName = "popup-loading"
   let _popupDisplayable = true
   let _legendOpen = true
-
+  let _popupImageEnabled = false
   let _shiftToZoom = false
 
   _chart.on = function(event, listener) {
@@ -583,7 +584,7 @@ export default function rasterChart(parent, useMap, chartGroup, _mapboxgl) {
       const y2Ranges = []
 
       for (const layer of layers) {
-        let xDim = layer.xDim(),
+        const xDim = layer.xDim(),
           yDim = layer.yDim()
         if (xDim) {
           const range = xDim.getFilter()
@@ -682,7 +683,7 @@ export default function rasterChart(parent, useMap, chartGroup, _mapboxgl) {
       const yRanges = []
 
       for (layer in layers) {
-        let xDim = layer.xDim(),
+        const xDim = layer.xDim(),
           yDim = layer.yDim(),
           viewBoxDim = layer.viewBoxDim()
         if (xDim) {
@@ -952,7 +953,11 @@ export default function rasterChart(parent, useMap, chartGroup, _mapboxgl) {
 
   _chart.hidePopup = function hidePopup(animate) {
     const popupElem = _chart.select("." + _popupDivClassName)
-    if (!popupElem.empty()) {
+    // Don't close it if its loading, wait for the actual popup
+    if (
+      !popupElem.empty() &&
+      popupElem.select(`.${_popupLoadingClassName}`).empty()
+    ) {
       for (let i = 0; i < _layers.length; ++i) {
         const layerName = _layers[i]
         const layer = _layerNames[layerName]
@@ -971,6 +976,13 @@ export default function rasterChart(parent, useMap, chartGroup, _mapboxgl) {
       }
     }
   }
+  _chart.popupImageEnabled = function(enabled) {
+    if (enabled !== undefined) {
+      _popupImageEnabled = enabled
+    }
+
+    return _popupImageEnabled
+  }
 
   const anchored = _chart.anchor(parent, chartGroup)
   const legend = anchored

src/constants/dc-constants.js

@@ -1 +1,2 @@
 export const SPINNER_DELAY = 1000
+export const IMAGE_SIZE_LIMIT = 5242880 // 5MB

src/constants/file-types.js

@@ -0,0 +1,17 @@
+export const IMAGE_EXTENSIONS = {
+  JP2: ".jp2",
+  TIF: ".tif",
+  TIFF: ".tiff",
+  APNG: ".apng",
+  PNG: ".png",
+  GIF: ".gif",
+  JPEG: ".jpeg",
+  JPG: ".jpg",
+  WEBP: ".webp",
+  AVIF: ".avif",
+  JFIF: ".jfif",
+  PJPEG: ".pjpeg",
+  PJP: ".pjp",
+  SVG: ".svg",
+  BMP: ".bmp"
+}