color range slider revert correction

.eslintrc

@@ -40,15 +40,7 @@
     "sourceType": "module" // Allows for the use of imports
   },
   "rules": {
-    "prettier/prettier": [
-      2,
-      {
-        "semi": true,
-        "singleQuote": true,
-        "jsxSingleQuote": true,
-        "parser": "flow"
-      }
-    ],
+    "prettier/prettier": 2,
     "inclusive-language/use-inclusive-words": 2,
     "semi": [2, "always"],
     "jsx-quotes": [2, "prefer-single"],
@@ -99,7 +91,12 @@
       "files": ["**/*.ts", "**/*.tsx"],
       "plugins": ["@typescript-eslint"],
       "rules": {
-        "prettier/prettier": 0,
+        "prettier/prettier": [
+          1,
+          {
+            "parser": "typescript"
+          }
+        ],
         "@typescript-eslint/no-unused-vars": 2,
         "@typescript-eslint/no-non-null-assertion": 0
       },

.github/workflows/checks.yml

@@ -127,7 +127,7 @@ jobs:
     timeout-minutes: 60
     needs: prep
     runs-on: ubuntu-latest
-    if: startsWith(github.ref, 'refs/heads/release')
+    if: startsWith(github.head_ref, 'release')
 
     steps:
       - name: Checkout

app/scripts/components/common/banner/index.tsx

@@ -1,6 +1,9 @@
-import React, { useState } from "react";
-import { Icon } from "@trussworks/react-uswds";
-import { USWDSBanner, USWDSBannerContent } from "$components/common/uswds/banner";
+import React, { useState } from 'react';
+import { Icon } from '@trussworks/react-uswds';
+import {
+  USWDSBanner,
+  USWDSBannerContent
+} from '$components/common/uswds/banner';
 
 const BANNER_KEY = 'dismissedBannerUrl';
 
@@ -12,53 +15,64 @@
 
 enum BannerType {
   info = 'info',
-  warning ='warning'
+  warning = 'warning'
 }
 
 const infoTypeFlag = BannerType.info;
 interface BannerProps {
-  appTitle: string,
-  expires: Date,
-  url: string,
-  text: string,
-  type?: BannerType
+  appTitle: string;
+  expires: Date;
+  url: string;
+  text: string;
+  type?: BannerType;
 }
 
-export default function Banner({appTitle, expires, url, text, type = infoTypeFlag }: BannerProps) {
+export default function Banner({
+  appTitle,
+  expires,
+  url,
+  text,
+  type = infoTypeFlag
+}: BannerProps) {
 
   const showBanner = localStorage.getItem(BANNER_KEY) !== url;
-  const [isOpen, setIsOpen] = useState(showBanner && !(hasExpired(expires)));
+  const [isOpen, setIsOpen] = useState(showBanner && !hasExpired(expires));
 
-  function onClose () {
-    localStorage.setItem(
-      BANNER_KEY,
-      url
-    );
+  function onClose() {
+    localStorage.setItem(BANNER_KEY, url);
     setIsOpen(false);
   }
 
   return (
     <div>
-      {isOpen &&
-        (<div className='position-relative'>
-          <USWDSBanner aria-label={appTitle} className={type !== infoTypeFlag? 'bg-secondary-lighter': ''}>
+      {isOpen && (
+        <div className='position-relative'>
+          <USWDSBanner
+            aria-label={appTitle}
+            className={type !== infoTypeFlag ? 'bg-secondary-lighter' : ''}
+          >
             <a href={url} target='_blank' rel='noreferrer'>
-              <USWDSBannerContent className='padding-top-1 padding-bottom-1' isOpen={true}>
-                <p dangerouslySetInnerHTML={{ __html: text }} />
+              <USWDSBannerContent
+                className='padding-top-1 padding-bottom-1'
+                isOpen={true}
+              >
+                <div dangerouslySetInnerHTML={{ __html: text }} />
+
               </USWDSBannerContent>
             </a>
           </USWDSBanner>
           <div className='position-absolute top-0 right-0 margin-right-3 height-full display-flex'>
-              <button
+            <button
               className='usa-button usa-button--unstyled'
               type='button'
               aria-label='Close Banner'
               onClick={onClose}
-              >
-                <Icon.Close />
-              </button>
+            >
+              <Icon.Close />
+            </button>
           </div>
-         </div>)}
+        </div>
+      )}
     </div>
   );
 }

app/scripts/components/common/blocks/block-map.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useContext } from 'react';
 import styled from 'styled-components';
 import { MapboxOptions } from 'mapbox-gl';
 import * as dateFns from 'date-fns';
@@ -11,10 +11,7 @@
 import { LayerLegend, LayerLegendContainer } from '../map/layer-legend';
 import MapCoordsControl from '../map/controls/coords';
 import MapMessage from '../map/map-message';
-import {
-  formatCompareDate,
-  formatSingleDate,
-} from '../map/utils';
+import { formatCompareDate, formatSingleDate } from '../map/utils';
 import {
   BasemapId,
   DEFAULT_MAP_STYLE_URL
@@ -34,9 +31,13 @@
   DatasetStatus
 } from '$components/exploration/types.d.ts';
 
-import { reconcileDatasets, getDatasetLayers } from '$components/exploration/data-utils-no-faux-module';
+import {
+  reconcileDatasets,
+  getDatasetLayers
+} from '$components/exploration/data-utils-no-faux-module';
 import { useReconcileWithStacMetadata } from '$components/exploration/hooks/use-stac-metadata-datasets';
 import { ProjectionOptions, VedaDatum, DatasetData } from '$types/veda';
+import { EnvConfigContext } from '$context/env-config';
 
 export const mapHeight = '32rem';
 const Carto = styled.div`
@@ -125,7 +126,10 @@
   layerId: string;
 }
 
-const getDataLayer = (layerIndex: number, layers: VizDataset[] | undefined): (VizDatasetSuccess | null) => {
+const getDataLayer = (
+  layerIndex: number,
+  layers: VizDataset[] | undefined
+): VizDatasetSuccess | null => {
   if (!layers || layers.length <= layerIndex) return null;
   const layer = layers[layerIndex];
   // @NOTE: What to do when data returns ERROR
@@ -177,16 +181,18 @@
       totalLayers = [...totalLayers, compareMapStaticData];
     }
     return totalLayers;
-  },[layerId]);
+  }, [layerId]);
 
   const [layers, setLayers] = useState<VizDataset[]>(layersToFetch);
 
-  useReconcileWithStacMetadata(layers, setLayers);
+  const { envApiStacEndpoint } = useContext(EnvConfigContext);
+
+  useReconcileWithStacMetadata(layers, setLayers, envApiStacEndpoint);
 
-  const selectedDatetime: (Date | undefined) = dateTime
+  const selectedDatetime: Date | undefined = dateTime
     ? utcString2userTzDate(dateTime)
     : undefined;
-  const selectedCompareDatetime: (Date | undefined) = compareDateTime
+  const selectedCompareDatetime: Date | undefined = compareDateTime
     ? utcString2userTzDate(compareDateTime)
     : undefined;
 
@@ -210,8 +216,14 @@
 
   const [, setProjection] = useState(projectionStart);
 
-  const baseDataLayer: (VizDatasetSuccess | null) = useMemo(() => getDataLayer(0, layers), [layers]);
-  const compareDataLayer: (VizDatasetSuccess | null) = useMemo(() => getDataLayer(1, layers), [layers]);
+  const baseDataLayer: VizDatasetSuccess | null = useMemo(
+    () => getDataLayer(0, layers),
+    [layers]
+  );
+  const compareDataLayer: VizDatasetSuccess | null = useMemo(
+    () => getDataLayer(1, layers),
+    [layers]
+  );
 
   const baseTimeDensity = baseDataLayer?.data.timeDensity;
   const compareTimeDensity = compareDataLayer?.data.timeDensity;
@@ -262,9 +274,16 @@
     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 });
+      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.
@@ -356,13 +375,13 @@
           <Compare>
             <Basemap basemapStyleId={mapBasemapId} />
             {compareDataLayer && (
-                <Layer
-                  key={compareDataLayer.data.id}
-                  id={`compare-${compareDataLayer.data.id}`}
-                  dataset={compareDataLayer}
-                  selectedDay={selectedCompareDatetime}
-                />
-              )}
+              <Layer
+                key={compareDataLayer.data.id}
+                id={`compare-${compareDataLayer.data.id}`}
+                dataset={compareDataLayer}
+                selectedDay={selectedCompareDatetime}
+              />
+            )}
           </Compare>
         )}
       </Map>