Fix compare label on block map

NASA-IMPACT · Sep 19, 2024 · b174470 · b174470
1 parent e93f1ab
commit b174470
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/app/scripts/components/common/blocks/block-map.tsx b/app/scripts/components/common/blocks/block-map.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { MapboxOptions } from 'mapbox-gl';
+import * as dateFns from 'date-fns';
 import {
   convertProjectionToMapbox,
   projectionDefault,
@@ -162,7 +163,6 @@ function MapBlock(props: MapBlockProps) {
   }
 
   const datasetLayers = getDatasetLayers(datasets);
-
   const layersToFetch = useMemo(() => {
     const [baseMapStaticData] = reconcileDatasets([layerId], datasetLayers, []);
     let totalLayers = [baseMapStaticData];
@@ -259,9 +259,12 @@ function MapBlock(props: MapBlockProps) {
 
   const computedCompareLabel = useMemo(() => {
     // Use a provided label if it exist.
-    if (compareLabel && compareDataLayer) {
-      const providedLabel = compareDataLayer.data.mapLabel as string;
-      return providedLabel;
+    if (compareLabel) return compareLabel as string;
+    // Use label function from originalData.Compare
+    else if (baseDataLayer?.data.compare?.mapLabel) {
+      if (typeof baseDataLayer.data.compare.mapLabel === 'string') return baseDataLayer.data.compare.mapLabel;
+      const labelFn = baseDataLayer.data.compare.mapLabel as (unknown) => string;
+      return labelFn({dateFns, datetime: selectedDatetime, compareDatetime: compareToDate });
     }
 
     // Default to date comparison.
@@ -275,7 +278,7 @@ function MapBlock(props: MapBlockProps) {
       : null;
   }, [
     compareLabel,
-    compareDataLayer,
+    baseDataLayer,
     selectedDatetime,
     compareToDate,
     baseTimeDensity,

diff --git a/app/scripts/components/sandbox/mdx-page/page.mdx b/app/scripts/components/sandbox/mdx-page/page.mdx
@@ -33,6 +33,22 @@
   </Figure>
 </Block>
 
+<Block type='wide'>
+  <Figure>
+    <Map
+      datasetId='no2'
+      layerId='no2-monthly'
+      dateTime='2020-03-01'
+      compareDateTime='2018-03-01'
+      compareLabel='overriding compare label'
+      projectionId='equirectangular'
+      allowProjectionChange
+      isComparing={true}
+    />
+    <Caption>Comparing dates set manually</Caption>
+  </Figure>
+</Block>
+
 <Block type='full'>
   <Figure>
     <Map

diff --git a/mock/datasets/no2.data.mdx b/mock/datasets/no2.data.mdx
@@ -84,7 +84,7 @@ layers:
       layerId: nightlights-hd-monthly
       mapLabel: |
         ::js ({ dateFns, datetime, compareDatetime }) => {
-          return `${dateFns.format(datetime, 'LLL yyyy')} VS ${dateFns.format(compareDatetime, 'LLL yyyy')}`;
+          return `${dateFns.format(datetime, 'yyyy')} VS ${dateFns.format(compareDatetime, 'LLL yyyy')}`;
         }
     legend:
       unit: 
@@ -163,7 +163,7 @@ layers:
       layerId: no2-monthly-diff
       mapLabel: |
         ::js ({ dateFns, datetime, compareDatetime }) => {
-          return `${dateFns.format(datetime, 'LLL yyyy')} VS ${dateFns.format(compareDatetime, 'LLL yyyy')}`;
+          return `${dateFns.format(datetime, 'yyyy')} VS ${dateFns.format(compareDatetime, 'LLL yyyy')}`;
         }
     legend:
       unit: