@cdc/map 4.25.3 → 4.25.6

package/src/helpers/index.ts

@@ -0,0 +1,22 @@
+export { addUIDs } from './addUIDs'
+export { applyColorToLegend } from './applyColorToLegend'
+export { colorDistributions } from './colorDistributions'
+export { displayGeoName } from './displayGeoName'
+export { formatLegendLocation } from './formatLegendLocation'
+export { generateColorsArray } from './generateColorsArray'
+export { generateRuntimeLegendHash } from './generateRuntimeLegendHash'
+export { getGeoStrokeColor, getGeoFillColor } from './colors'
+export { getUniqueValues } from './getUniqueValues'
+export { handleMapAriaLabels } from './handleMapAriaLabels'
+export { handleMapTabbing } from './handleMapTabbing'
+export { hashObj } from './hashObj'
+export { indexOfIgnoreType } from './indexOfIgnoreType'
+export { navigationHandler } from './navigationHandler'
+export { resetLegendToggles } from './resetLegendToggles'
+export { setBinNumbers } from './setBinNumbers'
+export { sortSpecialClassesLast } from './sortSpecialClassesLast'
+export { titleCase as toTitleCase } from './toTitleCase'
+export { titleCase } from './titleCase'
+export { validateFipsCodeLength } from './validateFipsCodeLength'
+export { getMapContainerClasses } from './getMapContainerClasses'
+export { SVG_HEIGHT, SVG_WIDTH, SVG_PADDING, SVG_VIEWBOX, HEADER_COLORS, MAX_ZOOM_LEVEL } from './constants'

package/src/helpers/navigationHandler.ts

@@ -9,9 +9,9 @@ export const navigationHandler = (
     return
   }
 
-  // Abort if value is blank
-  if (0 === urlString.length) {
-    throw Error('Blank string passed as URL. Navigation aborted.')
+  // Abort if urlString is not a valid string
+  if (typeof urlString !== 'string' || urlString.trim().length === 0) {
+    throw Error('Invalid or blank URL. Navigation aborted.')
   }
 
   const urlObj = new URL(urlString, window.location.origin)

package/src/helpers/resetLegendToggles.ts

@@ -0,0 +1,13 @@
+import _ from 'lodash'
+export const resetLegendToggles = (runtimeLegend, setRuntimeLegend) => {
+  const legendCopy = _.cloneDeep(runtimeLegend)
+
+  legendCopy.items.forEach(legendItem => {
+    delete legendItem.disabled
+  })
+  legendCopy.disabledAmt = 0
+
+  legendCopy.runtimeDataHash = runtimeLegend.runtimeDataHash
+
+  setRuntimeLegend(legendCopy)
+}

package/src/helpers/setBinNumbers.ts

@@ -0,0 +1,5 @@
+export const setBinNumbers = result => {
+  result.items.forEach((row, i) => {
+    row.bin = i // set bin number to index
+  })
+}

package/src/helpers/sortSpecialClassesLast.ts

@@ -0,0 +1,7 @@
+export const sortSpecialClassesLast = (result, legend) => {
+  if (legend.showSpecialClassesLast) {
+    const specialRows = result.items.filter(d => d.special === true)
+    const otherRows = result.items.filter(d => !d.special)
+    result.items = [...otherRows, ...specialRows]
+  }
+}

package/src/helpers/tests/getColumnNames.test.ts

@@ -0,0 +1,52 @@
+import { getColumnNames } from './../getColumnNames'
+import { MapConfig } from '../../types/MapConfig'
+
+// write a test that returns null if columns are not provided
+describe('missing config.columns parameter', () => {
+  it('should return null', () => {
+    const columns = null
+    expect(getColumnNames(columns)).toBeNull()
+  })
+})
+
+it('returns null for undefined column names', () => {
+  const columns: Pick<MapConfig, 'columns'> = {
+    columns: {
+      geo: { name: undefined },
+      primary: { name: undefined },
+      latitude: { name: undefined },
+      longitude: { name: undefined },
+      categorical: { name: undefined }
+    }
+  }
+
+  const result = getColumnNames(columns)
+  expect(result).toEqual({
+    geoColumnName: null,
+    primaryColumnName: null,
+    latitudeColumnName: null,
+    longitudeColumnName: null,
+    categoricalColumnName: null
+  })
+})
+
+it('returns null for empty column names', () => {
+  const columns: Pick<MapConfig, 'columns'> = {
+    columns: {
+      geo: { name: '' },
+      primary: { name: '' },
+      latitude: { name: '' },
+      longitude: { name: '' },
+      categorical: { name: '' }
+    }
+  }
+
+  const result = getColumnNames(columns)
+  expect(result).toEqual({
+    geoColumnName: null,
+    primaryColumnName: null,
+    latitudeColumnName: null,
+    longitudeColumnName: null,
+    categoricalColumnName: null
+  })
+})

package/src/helpers/titleCase.ts

@@ -22,7 +22,7 @@ export const titleCase = string => {
       // just return with each word uppercase
       return string
         .split(' ')
-        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+        .map(word => (word === 'of' ? word : word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()))
         .join(' ')
     }
   }

package/src/helpers/toggleLegendActive.ts

@@ -0,0 +1,25 @@
+import _ from 'lodash'
+
+export const toggleLegendActive = (
+  i: number,
+  legendLabel: string,
+  runtimeLegend,
+  setRuntimeLegend,
+  setAccessibleStatus: (message: string) => void
+) => {
+  const runtimeLegendCopy = _.cloneDeep(runtimeLegend)
+
+  // Create and toggle the new value
+  const newValue = !runtimeLegendCopy.items?.[i].disabled
+  runtimeLegendCopy.items[i].disabled = newValue
+
+  const disabledAmt = runtimeLegend.disabledAmt ?? 0
+
+  runtimeLegendCopy['disabledAmt'] = newValue ? disabledAmt + 1 : disabledAmt - 1
+
+  setRuntimeLegend(runtimeLegendCopy)
+
+  setAccessibleStatus(
+    `Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`
+  )
+}

package/src/hooks/useApplyTooltipsToGeo.tsx

@@ -0,0 +1,51 @@
+import { type ReactNode, useContext } from 'react'
+import { displayGeoName, navigationHandler } from '../helpers'
+import ConfigContext from '../context'
+import useTooltip from './useTooltip'
+import { supportedStatesFipsCodes } from './../data/supported-geos'
+import parse from 'html-react-parser'
+import isDomainExternal from '@cdc/core/helpers/isDomainExternal'
+import ExternalIcon from './../images/external-link.svg'
+
+const useApplyTooltipsToGeo = () => {
+  const { config, customNavigationHandler } = useContext(ConfigContext)
+  const navigationColumnName = config.columns.navigate.name
+  const { buildTooltip } = useTooltip({ config, displayGeoName, supportedStatesFipsCodes })
+
+  const applyTooltipsToGeo = (geoName: string, row: Object, returnType = 'string') => {
+    let toolTipText: string | ReactNode = buildTooltip(row, geoName, '')
+
+    // We convert the markup into JSX and add a navigation link if it's going into a modal.
+    if ('jsx' === returnType) {
+      if (typeof toolTipText === 'string') {
+        toolTipText = [<div key='modal-content'>{parse(toolTipText)}</div>]
+      }
+
+      if (config.columns.hasOwnProperty('navigate') && row[navigationColumnName]) {
+        // Check that toolTipText is an array before pushing to it
+        if (Array.isArray(toolTipText)) {
+          toolTipText.push(
+            <a
+              href='#'
+              className='navigation-link'
+              key='modal-navigation-link'
+              onClick={e => {
+                e.preventDefault()
+                navigationHandler(config.general.navigationTarget, row[navigationColumnName], customNavigationHandler)
+              }}
+            >
+              {config.tooltips.linkLabel}
+              {isDomainExternal(row[navigationColumnName]) && <ExternalIcon className='inline-icon ms-1' />}
+            </a>
+          )
+        }
+      }
+    }
+
+    return toolTipText
+  }
+
+  return { applyTooltipsToGeo }
+}
+
+export default useApplyTooltipsToGeo

package/src/hooks/useColumnsRequiredChecker.ts

@@ -0,0 +1,51 @@
+import { useContext } from 'react'
+import ConfigContext, { MapDispatchContext } from '../context'
+import { getColumnNames } from '../helpers/getColumnNames'
+
+const useColumnsRequiredChecker = () => {
+  const { config } = useContext(ConfigContext)
+  const dispatch = useContext(MapDispatchContext)
+
+  const columnsRequiredChecker = () => {
+    const { primaryColumnName, geoColumnName } = getColumnNames(config.columns)
+
+    let columnList = []
+
+    // Geo is always required
+    if (!geoColumnName) {
+      columnList.push('Geography')
+    }
+
+    // Primary is required if we're on a data map or a point map
+    if ('navigation' !== config.general.type && '' === primaryColumnName) {
+      columnList.push('Primary')
+    }
+
+    // Navigate is required for navigation maps
+    if ('navigation' === config.general.type && '' === config.columns.navigate.name) {
+      columnList.push('Navigation')
+    }
+
+    if (
+      ('us-geocode' === config.general.type || 'world-geocode' === config.general.type) &&
+      '' === config.columns.latitude.name
+    ) {
+      columnList.push('Latitude')
+    }
+
+    if (
+      ('us-geocode' === config.general.type || 'world-geocode' === config.general.type) &&
+      '' === config.columns.longitude.name
+    ) {
+      columnList.push('Longitude')
+    }
+
+    if (columnList.length === 0) columnList = null
+
+    dispatch({ type: 'SET_REQUIRED_COLUMNS', payload: columnList })
+  }
+
+  return { columnsRequiredChecker }
+}
+
+export default useColumnsRequiredChecker

package/src/hooks/useGeoClickHandler.ts

@@ -0,0 +1,45 @@
+import ConfigContext, { MapDispatchContext } from '../context'
+import { navigationHandler } from '../helpers'
+import { useContext } from 'react'
+
+const useGeoClickHandler = () => {
+  const { config: state, setConfig, setSharedFilter, customNavigationHandler } = useContext(ConfigContext)
+  const dispatch = useContext(MapDispatchContext)
+
+  const geoClickHandler = (geoDisplayName: string, geoData: object): void => {
+    if (setSharedFilter) {
+      setSharedFilter(state.uid, geoData)
+    }
+
+    // If world-geocode map zoom to geo point
+    if (['world-geocode'].includes(state.general.type)) {
+      const lat = geoData[state.columns.latitude.name]
+      const long = geoData[state.columns.longitude.name]
+
+      setConfig({
+        ...state,
+        mapPosition: { coordinates: [long, lat], zoom: 3 }
+      })
+    }
+
+    // If modals are set, or we are on a mobile viewport, display modal
+    if (window.matchMedia('(any-hover: none)').matches || 'click' === state.tooltips.appearanceType) {
+      const modalData = {
+        geoName: geoDisplayName,
+        keyedData: geoData
+      }
+      dispatch({ type: 'SET_MODAL', payload: modalData })
+
+      return
+    }
+
+    // Otherwise if this item has a link specified for it, do regular navigation.
+    if (state.columns.navigate && geoData[state.columns.navigate.name]) {
+      navigationHandler(state.general.navigationTarget, geoData[state.columns.navigate.name], customNavigationHandler)
+    }
+  }
+
+  return { geoClickHandler }
+}
+
+export default useGeoClickHandler

package/src/hooks/useLegendSeparators.ts

@@ -0,0 +1,26 @@
+import { clamp } from 'lodash'
+
+// TODO: generalize this to be used in legends other than linear block gradient
+
+const LEGEND_SEPARATOR_SIZE = 0.02
+const LEGEND_SEPARATOR_SIZE_MAX = 20
+const LEGEND_SEPARATOR_SIZE_MIN = 8
+
+const useLegendSeparators = (separators, legendWidth, allowsLegendSeparators) => {
+  const legendSeparators = allowsLegendSeparators
+    ? separators?.replace(' ', '').split(',').map(Number).filter(Boolean) || []
+    : []
+  const separatorSize = clamp(legendWidth * LEGEND_SEPARATOR_SIZE, LEGEND_SEPARATOR_SIZE_MIN, LEGEND_SEPARATOR_SIZE_MAX)
+  const legendSeparatorsToSubtract = legendSeparators.length * separatorSize
+  const getTickSeparatorsAdjustment = (index: number) =>
+    legendSeparators.reduce((acc, separators) => (index >= separators ? acc + separatorSize : acc), 0)
+
+  return {
+    legendSeparators,
+    separatorSize,
+    legendSeparatorsToSubtract,
+    getTickSeparatorsAdjustment
+  }
+}
+
+export default useLegendSeparators

package/src/hooks/useMapLayers.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useId, useState } from 'react'
+import { useEffect, useId, useState, type MouseEvent, type ChangeEvent } from 'react'
 import { feature } from 'topojson-client'
 import { Group } from '@visx/group'
 import { MapConfig } from '../types/MapConfig'
+import _ from 'lodash'
 
 /**
  * This is the starting structure for adding custom geoJSON shape layers to a projection.
@@ -16,7 +17,7 @@ import { MapConfig } from '../types/MapConfig'
  * 3) Clean (ie. mapshaper -clean) and edit the shape as needed and export the new layer as geoJSON
  * 4) Save the geoJSON somewhere external.
  */
-export default function useMapLayers(config: MapConfig, setConfig, pathGenerator, tooltipId) {
+export default function useMapLayers(config: MapConfig, setConfig, pathGenerator: Function, tooltipId: string) {
   const [fetchedTopoJSON, setFetchedTopoJSON] = useState([])
   const geoId = useId()
 
@@ -26,65 +27,43 @@ export default function useMapLayers(config: MapConfig, setConfig, pathGenerator
 
   useEffect(() => {
     fetchGeoJSONLayers()
-  }, []) //eslint-disable-line
-
-  useEffect(() => {
-    fetchGeoJSONLayers()
-  }, [config.map.layers]) //eslint-disable-line
+  }, [config.map.layers])
 
   useEffect(() => {
     if (pathGenerator) {
       generateCustomLayers()
     }
-  }, [fetchedTopoJSON]) //eslint-disable-line
+  }, [fetchedTopoJSON])
 
   const fetchGeoJSONLayers = async () => {
-    let geos = await getMapTopoJSONLayers()
-    setFetchedTopoJSON(geos)
+    try {
+      const geos = await getMapTopoJSONLayers()
+      setFetchedTopoJSON(geos)
+    } catch (e) {
+      console.error('Error fetching GeoJSON layers:', e) // eslint-disable-line
+    }
   }
 
-  /**
-   * Removes a custom map layer from the config.
-   * @param { Event } e Remove onclick event
-   * @param { Integer } index index of layer to remove
-   */
-  const handleRemoveLayer = (e, index) => {
+  const handleRemoveLayer = (e: MouseEvent<HTMLButtonElement>, index: number) => {
     e.preventDefault()
-
-    const updatedState = {
-      ...config,
-      map: {
-        ...config.map,
-        layers: config.map.layers.filter((layer, i) => i !== index)
-      }
-    }
-
-    setConfig(updatedState)
+    const newConfig = _.cloneDeep(config)
+    const layers = newConfig.map.layers.filter((_layer, i) => i !== index)
+    newConfig.map.layers = layers
+    setConfig(newConfig )
   }
 
-  /**
-   * Adds a new custom map layer to the config
-   * @param { Event } e Add onclick event
-   */
-  const handleAddLayer = e => {
+  const handleAddLayer = (e: Event) => {
     e.preventDefault()
-    const updatedState = {
-      ...config,
-      map: {
-        ...config.map,
-        layers: [
-          ...config.map.layers,
-          {
-            name: 'New Custom Layer',
-            url: ''
-          }
-        ]
-      }
+    const placeHolderLayer = {
+      name: 'New Custom Layer',
+      url: ''
     }
-    setConfig(updatedState)
+    const newConfig = _.cloneDeep(config)
+    newConfig.map.layers.unshift(placeHolderLayer)
+    setConfig( newConfig )
   }
 
-  const handleMapLayer = (e, index, layerKey) => {
+  const handleMapLayer = (e: ChangeEvent<HTMLInputElement>, index: number, layerKey: string) => {
     e.preventDefault()
 
     let layerValue = e.target.value
@@ -93,17 +72,10 @@ export default function useMapLayers(config: MapConfig, setConfig, pathGenerator
       layerValue = layerValue / 100
     }
 
-    let newLayers = [...config.map.layers] as Object[]
-
-    newLayers[index][layerKey] = layerValue
+    let newLayers = _.cloneDeep(config.map.layers)
+    _.set(newLayers, `[${index}][${layerKey}]`, layerValue)
 
-    setConfig({
-      ...config,
-      map: {
-        ...config.map,
-        layers: newLayers
-      }
-    })
+    setConfig({ ...config, map: { ...config.map, layers: newLayers } })
   }
 
   /**
@@ -117,7 +89,7 @@ export default function useMapLayers(config: MapConfig, setConfig, pathGenerator
     for (const mapLayer of config.map.layers) {
       let newLayerItem = await fetch(mapLayer.url)
         .then(res => res.json())
-        .catch(e => console.warn('error with newLayer item'))
+        .catch(e => console.warn('error with newLayer item', e)) // eslint-disable-line
       if (!newLayerItem) newLayerItem = []
       TopoJSONObjects.push(newLayerItem)
     }
@@ -127,10 +99,9 @@ export default function useMapLayers(config: MapConfig, setConfig, pathGenerator
 
   /**
    * Updates the custom map layers based on the topojson data
-   * @returns {void} new map layers to the config
    */
-  const generateCustomLayers = () => {
-    if (fetchedTopoJSON.length === 0 || !fetchedTopoJSON) return false
+  const generateCustomLayers = (): void => {
+    if (fetchedTopoJSON.length === 0 || !fetchedTopoJSON) return
     let tempArr = []
     let tempFeatureArray = []
 
@@ -149,7 +120,10 @@ export default function useMapLayers(config: MapConfig, setConfig, pathGenerator
         // feature array for county maps
         tempFeatureArray.push(item)
         tempArr.push(
-          <Group className={layerClasses.join(' ')} key={`customMapLayer-${item.properties.name.replace(' ', '-')}-${index}`}>
+          <Group
+            className={layerClasses.join(' ')}
+            key={`customMapLayer-${item.properties.name.replace(' ', '-')}-${index}`}
+          >
             {/* prettier-ignore */}
             <path
               d={pathGenerator(item)}

package/src/hooks/useModal.ts

@@ -0,0 +1,22 @@
+import { useContext } from 'react'
+import { MapDispatchContext } from '../context'
+
+const useModal = () => {
+  const dispatch = useContext(MapDispatchContext)
+
+  const closeModal = ({ target }, modal: Object) => {
+    if (
+      'string' === typeof target.className &&
+      (target.className.includes('modal-close') || target.className.includes('modal-background')) &&
+      null !== modal
+    ) {
+      dispatch({ type: 'SET_MODAL', payload: null })
+    }
+  }
+
+  return {
+    closeModal
+  }
+}
+
+export default useModal

package/src/hooks/useResizeObserver.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback, useEffect } from 'react'
 import { type ViewPort } from '@cdc/core/types/ViewPort'
 import { type DimensionsType } from '@cdc/core/types/Dimensions'
+import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'
 import getViewport from '@cdc/core/helpers/getViewport'
 import ResizeObserver from 'resize-observer-polyfill'
 
@@ -12,15 +13,13 @@ export const useResizeObserver = (isEditor: boolean) => {
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let { width, height } = entry.contentRect
-      let newViewport = getViewport(entry.contentRect.width)
 
-      let editorWidth = 350
+      width = isEditor ? width - EDITOR_WIDTH : width
+
+      const newViewport = getViewport(width)
 
       setCurrentViewport(newViewport)
 
-      if (isEditor) {
-        width = width - editorWidth
-      }
       setDimensions([width, height])
     }
   })