WV-2870 Allow users to create image snapshots of modified classificat…

…ion type imagery in Worldview (#5580)

* Refactor image download panel and toolbar container

This commit refactors the image download panel and toolbar container components.

In the image download panel, the code has been modified to import the `useSelector` hook from `react-redux` and the `getActivePalettes` selector from `../../modules/palettes/selectors`. The `activePalettes` variable is now retrieved using the `useSelector` hook.

In the toolbar container, the code has been modified to remove an unnecessary `await` statement and the corresponding `getPromise` function call. The `await this.getPromise(hasCustomPalette, 'palette', clearCustoms, 'Notice');` line has been removed.

Additionally, the `imageUtilGetLayers` function in `image-download/util.js` has been modified to accept an additional parameter `activePalettes`. The `activePalettes` variable is now passed as an argument to the `imageUtilGetLayers` function in the `getDownloadUrl` function.

Lastly, a new selector function `getActivePalettes` has been added to `palettes/selectors.js` to retrieve the active palettes from the state.

* Refactor image download panel and toolbar container

* Remove old tests

e2e/features/image-download/unsupported-test.spec.js

@@ -1,7 +1,7 @@
 // @ts-check
 const { test, expect } = require('@playwright/test')
 const createSelectors = require('../../test-utils/global-variables/selectors')
-const { closeImageDownloadPanel, closeModal } = require('../../test-utils/hooks/wvHooks')
+const { closeModal } = require('../../test-utils/hooks/wvHooks')
 const { joinUrl } = require('../../test-utils/hooks/basicHooks')
 
 let page
@@ -28,31 +28,6 @@ test.afterAll(async () => {
   await page.close()
 })
 
-test('Custom palettes are not supported dialog', async () => {
-  const { snapshotToolbarButton } = selectors
-  const url = await joinUrl(startParams, '&l=MODIS_Terra_Aerosol(palette=red_1)')
-  await page.goto(url)
-  await closeModal(page)
-  await snapshotToolbarButton.click()
-  await expect(notify).toBeVisible()
-})
-
-test('Custom palettes: Cancel button', async () => {
-  await cancelNotify.click()
-  await expect(notify).not.toBeVisible()
-  await expect(toolbarSnapshot).not.toBeVisible()
-})
-
-test('Custom palettes: OK button brings up download panel', async () => {
-  const { snapshotToolbarButton } = selectors
-  await snapshotToolbarButton.click()
-  await expect(notify).toBeVisible()
-  await acceptNotify.click()
-  await expect(notify).not.toBeVisible()
-  await expect(toolbarSnapshot).toBeVisible()
-  await closeImageDownloadPanel(page)
-})
-
 test('Rotation is not supported dialog', async () => {
   const { snapshotToolbarButton } = selectors
   const url = await joinUrl(startParams, '&p=arctic&r=18')

web/js/components/image-download/image-download-panel.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import googleTagManager from 'googleTagManager';
+import { getActivePalettes } from '../../modules/palettes/selectors';
 import {
   imageSizeValid,
   getDimensions,
@@ -57,6 +59,7 @@ function ImageDownloadPanel(props) {
   const [currResolution, setResolution] = useState(resolution);
   const [debugUrl, setDebugUrl] = useState('');
   const [showGranuleWarning, setShowGranuleWarning] = useState(false);
+  const activePalettes = useSelector((state) => getActivePalettes(state, state.compare.activeString));
 
   useEffect(() => {
     const layerList = getLayers();
@@ -83,6 +86,7 @@ function ImageDownloadPanel(props) {
       currFileType,
       currFileType === 'application/vnd.google-earth.kmz' ? false : currIsWorldfile,
       markerCoordinates,
+      activePalettes,
     );
 
     window.open(dlURL, '_blank');

web/js/containers/toolbar.js

@@ -21,7 +21,7 @@ import {
   requestNotifications,
   setNotifications,
 } from '../modules/notifications/actions';
-import { clearCustoms, refreshPalettes } from '../modules/palettes/actions';
+import { refreshPalettes } from '../modules/palettes/actions';
 import { clearRotate, refreshRotation } from '../modules/map/actions';
 import {
   showLayers, hideLayers,
@@ -136,7 +136,6 @@ class toolbarContainer extends Component {
     const nonDownloadableLayers = hasNonDownloadableLayer ? getNonDownloadableLayers(visibleLayersForProj) : null;
     const paletteStore = lodashCloneDeep(activePalettes);
     toggleDialogVisible(false);
-    await this.getPromise(hasCustomPalette, 'palette', clearCustoms, 'Notice');
     await this.getPromise(isRotated, 'rotate', clearRotate, 'Reset rotation');
     await this.getPromise(hasNonDownloadableLayer, 'layers', hideLayers, 'Remove Layers?');
     await openModal(

web/js/modules/image-download/util.js

@@ -1,5 +1,4 @@
 import {
-  each as lodashEach,
   get as lodashGet,
 } from 'lodash';
 import { transform } from 'ol/proj';
@@ -179,18 +178,21 @@ export function imageUtilCalculateResolution(
  * @returns {array} array of layer ids
  *
  */
-export function imageUtilGetLayers(products, proj) {
-  const layers = [];
-  lodashEach(products, (layer) => {
+export function imageUtilGetLayers(products, proj, activePalettes) {
+  const layers = products.map((layer) => {
+    let layerId = layer.id;
     if (layer.downloadId) {
-      layers.push(layer.downloadId);
+      layerId = layer.downloadId;
     } else if (layer.projections[proj].id) {
-      layers.push(layer.projections[proj].id);
+      layerId = layer.projections[proj].id;
     } else if (layer.projections[proj].layer) {
-      layers.push(layer.projections[proj].layer);
-    } else {
-      layers.push(layer.id);
+      layerId = layer.projections[proj].layer;
+    }
+    const disabled = activePalettes?.[layer.id]?.maps?.[0]?.disabled;
+    if (Array.isArray(disabled)) {
+      return `${layerId}(disabled=${disabled.join('-')})`;
     }
+    return layerId;
   });
   return layers;
 }
@@ -306,15 +308,15 @@ export function getTruncatedGranuleDates(layerDefs) {
  * @param {Boolean} isWorldfile
  * @param {Array} markerCoordinates
  */
-export function getDownloadUrl(url, proj, layerDefs, bbox, dimensions, dateTime, fileType, isWorldfile, markerCoordinates) {
+export function getDownloadUrl(url, proj, layerDefs, bbox, dimensions, dateTime, fileType, isWorldfile, markerCoordinates, activePalettes) {
   const { crs } = proj.selected;
   const {
     layersArray,
     layerWraps,
     opacities,
   } = imageUtilProcessWrap(
     fileType,
-    imageUtilGetLayers(layerDefs, proj.id),
+    imageUtilGetLayers(layerDefs, proj.id, activePalettes),
     imageUtilGetLayerWrap(layerDefs),
     imageUtilGetLayerOpacities(layerDefs),
   );
@@ -323,6 +325,7 @@ export function getDownloadUrl(url, proj, layerDefs, bbox, dimensions, dateTime,
   const { height, width } = dimensions;
   const snappedDateTime = getLatestIntervalTime(layerDefs, dateTime);
   const granuleDates = getTruncatedGranuleDates(layerDefs).value;
+  const colormaps = layerDefs.map((layer) => layer.palette?.id);
   const params = [
     'REQUEST=GetSnapshot',
     `TIME=${util.toISOStringSeconds(snappedDateTime)}`,
@@ -334,6 +337,9 @@ export function getDownloadUrl(url, proj, layerDefs, bbox, dimensions, dateTime,
     `WIDTH=${width}`,
     `HEIGHT=${height}`,
   ];
+  if (Array.isArray(colormaps) && colormaps.length > 0) {
+    params.push(`colormaps=${colormaps.join(',')}`);
+  }
   if (granuleDates.length > 0) {
     params.push(`granule_dates=${granuleDates}`);
   }

web/js/modules/image-download/util.test.js

@@ -218,7 +218,7 @@ test('Download URL [imagedownload-url]', () => {
     { id: 1, longitude: 2.7117, latitude: -19.1609 },
     { id: 2, longitude: 71.173, latitude: -39.0961 },
   ];
-  const dlURL = getDownloadUrl(url, proj, mockLayerDefs, lonlats, dimensions, dateTime, false, false, locationMarkers);
+  const dlURL = getDownloadUrl(url, proj, mockLayerDefs, lonlats, dimensions, dateTime, false, false, locationMarkers, undefined);
   const expectedURL = 'http://localhost:3002/api/v1/snapshot'
     + '?REQUEST=GetSnapshot'
     + '&TIME=2019-06-24T00:00:00Z'
@@ -228,6 +228,7 @@ test('Download URL [imagedownload-url]', () => {
     + '&WRAP=day'
     + '&FORMAT=image/jpeg'
     + '&WIDTH=300&HEIGHT=300'
+    + '&colormaps='
     + '&MARKER=2.7117,-19.1609,71.173,-39.0961';
   expect(dlURL.includes(expectedURL)).toBe(true);
 });

web/js/modules/palettes/selectors.js

@@ -504,3 +504,7 @@ export function isPaletteAllowed(layerId, config) {
   }
   return Boolean(config.layers[layerId].palette);
 }
+
+export function getActivePalettes (state, activeString) {
+  return state.palettes[activeString];
+}