@cdc/map 4.25.10 → 4.25.11

package/src/hooks/useCountryZoom.tsx

@@ -0,0 +1,241 @@
+import { useContext, useEffect, useMemo, useCallback, useRef } from 'react'
+import ConfigContext, { MapDispatchContext } from '../context'
+import { geoMercator } from 'd3-geo'
+import { MapContext } from '../types/MapContext'
+import { geoPath, GeoPath } from 'd3-geo'
+import { getCountriesPicked } from '../helpers/getCountriesPicked'
+import { SVG_HEIGHT, SVG_WIDTH, SVG_PADDING } from '../helpers'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+
+interface CountryData {
+  geometry: { type: 'Polygon' | 'MultiPolygon'; coordinates: number[][][][] | number[][][] }
+  // ISO code of country
+  id: string
+  // Country properties
+  properties: { name: string; iso: string }
+  type: 'Feature'
+}
+
+const useCountryZoom = (worldData: CountryData[]) => {
+  const { config, interactionLabel } = useContext<MapContext>(ConfigContext)
+  const dispatch = useContext(MapDispatchContext)
+
+  // Ref to track last centered countries to prevent unnecessary re-centering
+  const lastCenteredCountries = useRef<string>('')
+
+  // Get countriesPicked with memoization
+  const countriesPicked = useMemo(() => {
+    const result = getCountriesPicked(config)
+
+    if (!result) return []
+    if (!Array.isArray(result)) return [result]
+    const isoList = result.map(country => country.iso)
+    return isoList
+  }, [config.general.countriesPicked])
+
+  // Memoize expensive computations for country centering
+  const projectionData = useMemo(() => {
+    if (!worldData || !countriesPicked.length) {
+      return {
+        projection: geoMercator(),
+        countryCenter: [0, 30] as [number, number], // Default world center
+        countryZoom: 1
+      }
+    }
+
+    const baseProjection = geoMercator()
+      .translate([SVG_WIDTH / 2, SVG_HEIGHT / 2])
+      .scale(1)
+
+    // List of ISO codes for small/uninhabited territories that should be excluded from zoom calculations
+    // These tiny islands can distort the bounding box and cause excessive zoom out
+    const excludedTerritories = [
+      'ATF', // French Southern and Antarctic Lands (Kerguelen, Crozet, etc.)
+      'HMD', // Heard Island and McDonald Islands
+      'SGS', // South Georgia and South Sandwich Islands
+      'BVT' // Bouvet Island
+    ]
+
+    // List of specific territory names that should be excluded even if they share an ISO with a main country
+    const excludedTerritoryNames = [
+      'Saint Paul and Amsterdam Islands', // French territory in Indian Ocean
+      'Kerguelen Islands',
+      'Crozet Islands'
+    ]
+
+    // Filter world data to selected countries, excluding small territories from zoom calculation
+    const selectedCountriesData = worldData.filter(country => {
+      // Match by ISO code OR by name (to handle cases where config uses name instead of ISO)
+      const matchesSelectedCountry = countriesPicked.some(
+        iso => iso === country.properties.iso || iso === country.properties.name
+      )
+      const isExcludedByISO = excludedTerritories.includes(country.properties.iso)
+      const isExcludedByName = excludedTerritoryNames.some(
+        name => country.properties.name && country.properties.name.includes(name)
+      )
+
+      return matchesSelectedCountry && !isExcludedByISO && !isExcludedByName
+    })
+
+    if (!selectedCountriesData.length) {
+      return {
+        projection: baseProjection,
+        countryCenter: [0, 30] as [number, number], // Default world center
+        countryZoom: 1
+      }
+    }
+
+    // Create a feature collection for selected countries
+    const combinedData = {
+      type: 'FeatureCollection',
+      features: selectedCountriesData
+    }
+
+    // Fit projection to selected countries - this calculates the optimal scale and translate
+    const fittedProjection = baseProjection.fitExtent(
+      [
+        [SVG_PADDING, SVG_PADDING],
+        [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
+      ],
+      combinedData as any
+    )
+
+    // Calculate zoom level from the fitted projection
+    // The fitExtent method automatically calculates the scale needed to fit the features
+    const fittedScale = fittedProjection.scale()
+
+    // Use the default geoMercator scale (around 153) as base reference
+    const defaultMercatorScale = 153 // Standard geoMercator scale for world view
+    let calculatedZoom = fittedScale / defaultMercatorScale
+
+    // Clamp zoom to reasonable bounds
+    // Allow zoom out to 0.5x for large multi-country spans (e.g., Argentina + Canada)
+    // Max zoom of 10x for small countries
+    const clampedZoom = Math.max(0.5, Math.min(10, calculatedZoom))
+
+    // Calculate the center point using BOUNDING BOX CENTER (not area-weighted centroid)
+    // This ensures equal geographic treatment regardless of country size
+    const path: GeoPath = geoPath().projection(fittedProjection)
+    const bounds = path.bounds(combinedData as any)
+
+    // Calculate geographic bounds
+    const geoBounds = {
+      topLeft: fittedProjection.invert([bounds[0][0], bounds[0][1]]),
+      bottomRight: fittedProjection.invert([bounds[1][0], bounds[1][1]])
+    }
+
+    // Use bounding box midpoint as center (NOT area-weighted centroid which favors larger countries)
+    const countryCenter: [number, number] = [
+      (geoBounds.topLeft[0] + geoBounds.bottomRight[0]) / 2,
+      (geoBounds.topLeft[1] + geoBounds.bottomRight[1]) / 2
+    ]
+
+    const result = {
+      projection: fittedProjection,
+      countryCenter,
+      countryZoom: clampedZoom
+    }
+
+    return result
+  }, [worldData, countriesPicked.join(',')]) // Use string key for more stable memoization
+
+  const centerOnCountries = useCallback(
+    (zoomFunction: string = '') => {
+      if (!countriesPicked.length) {
+        return
+      }
+
+      const _prevPosition = config.mapPosition || { coordinates: [0, 30], zoom: 1 }
+      let newZoom = projectionData.countryZoom
+      let newCoordinates = projectionData.countryCenter
+
+      if (zoomFunction === 'zoomIn' && projectionData.countryZoom < 4) {
+        newZoom = Math.min(4, projectionData.countryZoom * 1.5)
+        newCoordinates = projectionData.countryCenter
+        publishAnalyticsEvent({
+          vizType: 'map',
+          vizSubType: getVizSubType(config),
+          eventType: 'zoom_in',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config),
+          specifics: `zoom_level: ${Math.floor(newZoom)}`
+        })
+      } else if (zoomFunction === 'zoomOut' && projectionData.countryZoom > 1) {
+        newZoom = Math.max(1, projectionData.countryZoom / 1.5)
+        newCoordinates = projectionData.countryCenter
+      } else if (zoomFunction === 'reset') {
+        newZoom = projectionData.countryZoom
+        newCoordinates = projectionData.countryCenter
+      } else if (zoomFunction === 'center' || zoomFunction === '') {
+        // Auto-center with calculated zoom - this is the main centering logic
+        newZoom = projectionData.countryZoom
+        newCoordinates = projectionData.countryCenter
+      }
+
+      const payload = { coordinates: newCoordinates, zoom: newZoom }
+      dispatch({ type: 'SET_POSITION', payload })
+
+      if (zoomFunction === 'reset') {
+        publishAnalyticsEvent({
+          vizType: 'map',
+          vizSubType: getVizSubType(config),
+          eventType: 'map_reset_zoom_level',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config)
+        })
+      }
+    },
+    [
+      config.mapPosition,
+      projectionData.countryCenter,
+      projectionData.countryZoom,
+      interactionLabel,
+      dispatch,
+      countriesPicked
+    ]
+  )
+
+  // Auto-center when countries are selected/changed
+  useEffect(() => {
+    const countriesKey = countriesPicked.sort().join(',')
+
+    if (!worldData || !countriesPicked.length) {
+      lastCenteredCountries.current = ''
+      return
+    }
+
+    // Only re-center if countries have actually changed
+    if (lastCenteredCountries.current === countriesKey) {
+      return
+    }
+
+    lastCenteredCountries.current = countriesKey
+
+    // Immediately center on the selected countries with calculated zoom
+    const payload = {
+      coordinates: projectionData.countryCenter,
+      zoom: projectionData.countryZoom
+    }
+
+    // Additional validation before dispatch
+    const [lng, lat] = payload.coordinates
+    const coordsValid = lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90
+    const zoomValid = payload.zoom >= 0.1 && payload.zoom <= 10
+
+    if (coordsValid && zoomValid) {
+      dispatch({ type: 'SET_POSITION', payload })
+    }
+  }, [worldData, countriesPicked, projectionData.countryCenter, projectionData.countryZoom, dispatch])
+
+  return {
+    centerOnCountries,
+    countriesPicked,
+    countryCenter: projectionData.countryCenter,
+    countryZoom: projectionData.countryZoom
+  }
+}
+
+export default useCountryZoom

package/src/hooks/useGeoClickHandler.ts

@@ -31,7 +31,7 @@ const useGeoClickHandler = () => {
     }
 
     // If modals are set, or we are on a mobile viewport, display modal
-    if (window.matchMedia('(any-hover: none)').matches || 'click' === state.tooltips.appearanceType) {
+    if ('click' === state.tooltips.appearanceType) {
       const modalData = {
         geoName: geoDisplayName,
         keyedData: geoData

package/src/hooks/useProgrammaticMapTooltip.ts

@@ -0,0 +1,110 @@
+import { useRef, useImperativeHandle, ForwardedRef } from 'react'
+
+/**
+ * Interface for geography element refs exposed to parent components
+ * Follows chart package pattern for consistency
+ */
+export interface MapRefInterface {
+  /**
+   * Programmatically trigger tooltip at a specific geography (data-centric approach)
+   * @param geoId - Geography identifier (FIPS code, name, ISO code, etc.)
+   * @param yCoordinate - Y coordinate for tooltip positioning (from source event)
+   */
+  triggerTooltipAtGeo: (geoId: string, yCoordinate: number) => void
+
+  /**
+   * Hide all tooltips for this map tile
+   */
+  hideTooltip: () => void
+}
+
+interface UseProgrammaticMapTooltipProps {
+  mapRef: ForwardedRef<MapRefInterface>
+  tooltipId: string
+}
+
+/**
+ * Custom hook to provide programmatic tooltip control for small multiples synchronization
+ *
+ * This hook enables tooltips to be triggered programmatically on geography elements
+ * using synthetic mouse events. It's designed to work with react-tooltip v5.
+ *
+ */
+export const useProgrammaticMapTooltip = ({ mapRef, tooltipId }: UseProgrammaticMapTooltipProps) => {
+  // Store refs to all geography elements in this map
+  const geoElementRefs = useRef<Record<string, SVGElement>>({})
+
+  /**
+   * Register a geography element so it can be programmatically controlled
+   * Call this in the ref callback of each geography element
+   */
+  const registerGeoElement = (geoId: string, element: SVGElement | null) => {
+    geoElementRefs.current[geoId] = element
+  }
+
+  const unregisterGeoElement = (geoId: string) => {
+    delete geoElementRefs.current[geoId]
+  }
+
+  // Expose programmatic tooltip methods via ref
+  useImperativeHandle(
+    mapRef,
+    () => ({
+      /**
+       * Trigger tooltip at specific geography
+       */
+      triggerTooltipAtGeo: (geoId: string, yCoordinate: number) => {
+        const geoElement = geoElementRefs.current[geoId]
+        if (!geoElement) {
+          return
+        }
+
+        // Get the horizontal center of the geography element
+        const rect = geoElement.getBoundingClientRect()
+        const centerX = rect.left + rect.width / 2
+
+        // Create synthetic mouseenter event with coordinates
+        const syntheticEvent = new MouseEvent('mouseenter', {
+          bubbles: true,
+          cancelable: true,
+          clientX: centerX,
+          clientY: yCoordinate,
+          screenX: window.screenX + centerX,
+          screenY: window.screenY + yCoordinate,
+          view: window
+        })
+
+        Object.defineProperty(syntheticEvent, 'currentTarget', {
+          value: geoElement,
+          writable: false
+        })
+
+        Object.defineProperty(syntheticEvent, 'target', {
+          value: geoElement,
+          writable: false
+        })
+
+        geoElement.dispatchEvent(syntheticEvent)
+      },
+
+      hideTooltip: () => {
+        Object.values(geoElementRefs.current).forEach(element => {
+          const syntheticEvent = new MouseEvent('mouseleave', {
+            bubbles: true,
+            cancelable: true,
+            view: window
+          })
+
+          element.dispatchEvent(syntheticEvent)
+        })
+      }
+    }),
+    [tooltipId]
+  )
+
+  return {
+    registerGeoElement,
+    unregisterGeoElement,
+    geoElementRefs
+  }
+}

package/src/hooks/useResizeObserver.ts

@@ -8,17 +8,20 @@ import ResizeObserver from 'resize-observer-polyfill'
 export const useResizeObserver = (isEditor: boolean) => {
   const [dimensions, setDimensions] = useState<DimensionsType>([0, 0])
   const [currentViewport, setCurrentViewport] = useState<ViewPort>(null)
+  const [vizViewport, setVizViewport] = useState<ViewPort>(null)
   const [container, setContainer] = useState<HTMLElement | null>(null)
 
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let { width, height } = entry.contentRect
 
-      width = isEditor ? width - EDITOR_WIDTH : width
+      const editorIsOpen = isEditor && !!document.querySelector('.editor-panel:not(.hidden)')
+      width = editorIsOpen ? width - EDITOR_WIDTH : width
 
       const newViewport = getViewport(width)
 
       setCurrentViewport(newViewport)
+      setVizViewport(newViewport)
 
       setDimensions([width, height])
     }
@@ -35,7 +38,7 @@ export const useResizeObserver = (isEditor: boolean) => {
     }
   }, [])
 
-  return { resizeObserver, dimensions, currentViewport, outerContainerRef, container }
+  return { resizeObserver, dimensions, currentViewport, vizViewport, outerContainerRef, container }
 }
 
 export default useResizeObserver

package/src/hooks/useStateZoom.tsx

@@ -67,7 +67,9 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
     const featureCenter = combinedData ? path.centroid(combinedData as any) : [0, 0]
     const stateCenter = newProjection.invert(featureCenter)
 
-    return { projection, newProjection, stateCenter }
+    const bounds = combinedData ? path.bounds(combinedData as any) : null
+
+    return { projection, newProjection, stateCenter, bounds }
   }, [topoData, statesPicked])
 
   const setScaleAndTranslate = useCallback(
@@ -176,7 +178,8 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
     handleZoomOut,
     handleMoveEnd,
     handleZoomReset,
-    projection: projectionData.projection
+    projection: projectionData.projection,
+    bounds: projectionData.bounds
   }
 }
 

package/src/hooks/useSynchronizedGeographies.ts

@@ -0,0 +1,56 @@
+import { useContext } from 'react'
+import ConfigContext from '../context'
+import { useProgrammaticMapTooltip } from './useProgrammaticMapTooltip'
+
+/**
+ * Hook to enable synchronized tooltips for map geographies in small multiples
+ *
+ * This abstracts all the small multiples synchronization logic so it can be
+ * easily added to any map type (US, Region, SingleState, World, etc.)
+ *
+ */
+export const useSynchronizedGeographies = () => {
+  const { handleSmallMultipleHover, mapRefForSync, tooltipId } = useContext(ConfigContext)
+
+  // Set up programmatic tooltip control for this map
+  const { registerGeoElement, unregisterGeoElement } = useProgrammaticMapTooltip({
+    mapRef: mapRefForSync || { current: null },
+    tooltipId
+  })
+
+  /**
+   * Returns props to spread onto geography elements for synchronized tooltip support
+   * Includes ref for programmatic control and data-geo-id for tooltip tracking
+   *
+   * @param geoKey - Geography identifier (FIPS code, state abbreviation, etc.)
+   */
+  const getSyncProps = (geoKey: string) => ({
+    ref: (el: SVGElement | null) => {
+      if (el) {
+        registerGeoElement(geoKey, el)
+      } else {
+        unregisterGeoElement(geoKey)
+      }
+    },
+    'data-geo-id': geoKey
+  })
+
+  /**
+   * Event handler helpers for synchronized tooltips
+   * Call these inside your existing event handlers
+   */
+  const syncHandlers = {
+    onMouseEnter: (geoKey: string, clientY: number) => {
+      handleSmallMultipleHover?.(geoKey, clientY)
+    },
+
+    onMouseLeave: () => {
+      handleSmallMultipleHover?.(null)
+    }
+  }
+
+  return {
+    getSyncProps,
+    syncHandlers
+  }
+}

package/src/index.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import '@cdc/core/styles/cove-main.scss'
+import '@cdc/core/components/EditorPanel/EditorPanel.styles.css'
 
 import CdcMap from './CdcMap'