@cdc/map 4.25.8 → 4.25.11

package/src/components/MapContainer.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import Modal from './Modal'
+import UsaMap from './UsaMap'
+import WorldMap from './WorldMap'
+import GoogleMap from './GoogleMap'
+import { MapConfig } from '../types/MapConfig'
+import { LOGO_MAX_WIDTH } from '../helpers/constants'
+
+interface MapContainerProps {
+  config: MapConfig
+  modal: any
+  currentViewport: string
+  geoType: string
+  general: any
+  logo: string
+  mapSvgRef: React.RefObject<HTMLElement>
+}
+
+const MapContainer: React.FC<MapContainerProps> = ({
+  config,
+  modal,
+  currentViewport,
+  geoType,
+  general,
+  logo,
+  mapSvgRef
+}) => {
+  return (
+    <section className='outline-none geography-container w-100 position-relative' ref={mapSvgRef} tabIndex={0}>
+      {currentViewport && (
+        <>
+          {modal && <Modal />}
+          {'single-state' === geoType && <UsaMap.SingleState />}
+          {'us' === geoType && 'us-geocode' !== config.general.type && <UsaMap.State />}
+          {'us-region' === geoType && <UsaMap.Region />}
+          {'us-county' === geoType && <UsaMap.County />}
+          {'world' === geoType && <WorldMap />}
+          {'google-map' === geoType && <GoogleMap />}
+          {
+            /* logo is handled in UsaMap.State when applicable */
+            // prettier-ignore
+            'data' === general.type && logo && ('us' !== geoType || 'us-geocode' === general.type) && (
+              <img src={logo} alt='' className='map-logo' style={{ maxWidth: LOGO_MAX_WIDTH }} />
+            )
+          }
+        </>
+      )}
+    </section>
+  )
+}
+
+export default MapContainer

package/src/components/MapControls.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import MediaControls from '@cdc/core/components/MediaControls'
+import { MapConfig } from '../types/MapConfig'
+
+interface MapControlsProps {
+  config: MapConfig
+  imageId: string
+  interactionLabel: string
+}
+
+const MapControls: React.FC<MapControlsProps> = ({ config, imageId, interactionLabel }) => {
+  const { showDownloadImgButton, showDownloadPdfButton } = config.general
+
+  if (!showDownloadImgButton && !showDownloadPdfButton) {
+    return null
+  }
+
+  return (
+    <MediaControls.Section classes={['download-buttons']}>
+      {showDownloadImgButton && (
+        <MediaControls.Button
+          text='Download Image'
+          title='Download Chart as Image'
+          type='image'
+          state={config}
+          elementToCapture={imageId}
+          interactionLabel={interactionLabel}
+        />
+      )}
+      {showDownloadPdfButton && (
+        <MediaControls.Button
+          text='Download PDF'
+          title='Download Chart as PDF'
+          type='pdf'
+          state={config}
+          interactionLabel={interactionLabel}
+          elementToCapture={imageId}
+        />
+      )}
+    </MediaControls.Section>
+  )
+}
+
+export default MapControls

package/src/components/NavigationMenu.tsx

@@ -1,9 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react'
 import ConfigContext from '../context'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { Select } from '@cdc/core/components/EditorPanel/Inputs'
 
 const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoName, mapTabbingID }) => {
-  const { interactionLabel } = useContext(ConfigContext)
+  const { interactionLabel, config } = useContext(ConfigContext)
   const [activeGeo, setActiveGeo] = useState('')
   const [dropdownItems, setDropdownItems] = useState({})
 
@@ -12,7 +14,15 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
     if (activeGeo !== '') {
       const urlString = data[dropdownItems[activeGeo]][columns.navigate.name]
 
-      publishAnalyticsEvent('map_navigation_menu', 'submit', `${interactionLabel}|${urlString}`)
+      publishAnalyticsEvent({
+        vizType: config.type,
+        vizSubType: getVizSubType(config),
+        eventType: `map_navigation_menu`,
+        eventAction: 'submit',
+        eventLabel: `${interactionLabel}`,
+        vizTitle: getVizTitle(config),
+        specifics: `url: ${urlString}, activeGeo: ${activeGeo}`
+      })
 
       navigationHandler(urlString)
     }
@@ -56,19 +66,21 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
   return (
     <section className='navigation-menu'>
       <form onSubmit={handleSubmit} type='get'>
-        <label htmlFor={mapTabbingID.replace('#', '')}>
-          <div className='select-heading'>{navSelect}</div>
-          <div className='d-flex'>
-            <select value={activeGeo} id={mapTabbingID.replace('#', '')} onChange={e => setActiveGeo(e.target.value)}>
-              {Object.keys(dropdownItems).map(key => (
-                <option key={key} value={key}>
-                  {key}
-                </option>
-              ))}
-            </select>
-            <input type='submit' value={navGo} className={`${options.headerColor} btn`} id='cdcnavmap-dropdown-go' />
-          </div>
-        </label>
+        <div className='d-flex' style={{ alignItems: 'flex-end' }}>
+          <Select
+            label={navSelect}
+            value={activeGeo}
+            options={Object.keys(dropdownItems)}
+            onChange={e => setActiveGeo(e.target.value)}
+          />
+          <input
+            type='submit'
+            value={navGo}
+            className={`${options.headerColor} btn`}
+            id='cdcnavmap-dropdown-go'
+            style={{ height: '50px', width: '35%' }}
+          />
+        </div>
       </form>
     </section>
   )

package/src/components/SmallMultiples/SmallMultipleTile.tsx

@@ -0,0 +1,163 @@
+import React, { useContext, useMemo, useRef, useState, useEffect } from 'react'
+import { MapConfig, DataRow } from '../../types/MapConfig'
+import { getTileData, getTileDisplayTitle } from '../../helpers/smallMultiplesHelpers'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
+import ConfigContext from '../../context'
+import { MapContext } from '../../types/MapContext'
+import { DimensionsType } from '@cdc/core/types/Dimensions'
+import generateRuntimeData from '../../helpers/generateRuntimeData'
+import UsaMap from '../UsaMap'
+import ResizeObserver from 'resize-observer-polyfill'
+import getViewport from '@cdc/core/helpers/getViewport'
+import { MapRefInterface } from '../../hooks/useProgrammaticMapTooltip'
+import SynchronizedTooltip from './SynchronizedTooltip'
+
+interface SmallMultipleTileProps {
+  tileValue: string | number
+  tileColumn: string
+  config: MapConfig
+  data: DataRow[]
+  isFirstInRow?: boolean
+  tilesPerRow: number
+  onHeaderRef?: (ref: HTMLDivElement | null) => void
+  onMapRef?: (ref: MapRefInterface | null) => void
+  onMapHover?: (geoId: string | null, yCoordinate?: number) => void
+}
+
+const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
+  tileValue,
+  tileColumn,
+  config,
+  data,
+  isFirstInRow,
+  tilesPerRow,
+  onHeaderRef,
+  onMapRef,
+  onMapHover
+}) => {
+  const parentContext = useContext<MapContext>(ConfigContext)
+  const tileMapRef = useRef<HTMLDivElement>(null)
+  const [tileDimensions, setTileDimensions] = useState<DimensionsType>([0, 0])
+  const mapRefForSync = useRef<MapRefInterface | null>(null)
+
+  // Generate unique tooltip ID for this tile to ensure each tile has its own ReactTooltip instance
+  const tileTooltipId = useMemo(() => {
+    return `${parentContext.tooltipId}-tile-${String(tileValue).replace(/[^a-zA-Z0-9]/g, '_')}`
+  }, [parentContext.tooltipId, tileValue])
+
+  // Measure this tile's actual dimensions for pattern stroke calculation
+  useEffect(() => {
+    if (!tileMapRef.current) return
+
+    const resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        const { width, height } = entry.contentRect
+        setTileDimensions([width, height])
+      }
+    })
+
+    resizeObserver.observe(tileMapRef.current)
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  const tileData = useMemo(() => getTileData(data, tileColumn, tileValue), [data, tileColumn, tileValue])
+
+  const tileTitle = useMemo(
+    () => getTileDisplayTitle(tileValue, config.smallMultiples?.tileTitles),
+    [tileValue, config.smallMultiples?.tileTitles]
+  )
+
+  // Clone config and modify for this tile
+  const tileConfig = useMemo(() => {
+    let clonedConfig = cloneConfig(config) as MapConfig
+
+    // Remove smallMultiples config to prevent infinite loop
+    clonedConfig.smallMultiples = undefined
+
+    // Hide the main title on individual tiles
+    if (clonedConfig.general) {
+      clonedConfig.general.showTitle = false
+    }
+
+    // CRITICAL: Force unified legend for small multiples
+    // This ensures the legend is generated from ALL data (all pathogens), not just this tile's data
+    if (clonedConfig.legend) {
+      clonedConfig.legend.unified = true
+    }
+
+    // Replace data with filtered tile data
+    clonedConfig.data = tileData
+
+    return clonedConfig
+  }, [config, tileData])
+
+  // Generate tile-specific runtimeData from filtered data
+  const tileRuntimeData = useMemo(() => {
+    if (!tileData || tileData.length === 0) return {}
+
+    const isCategoryLegend = tileConfig?.legend?.type === 'category'
+    const hash = Math.random()
+
+    return generateRuntimeData(tileConfig, tileConfig.filters || [], hash, isCategoryLegend, false)
+  }, [tileConfig, tileData])
+
+  const useDynamicViewbox = config.general.geoType === 'single-state' && tilesPerRow > 1
+
+  // Notify parent when map ref is ready
+  useEffect(() => {
+    if (onMapRef && mapRefForSync.current) {
+      onMapRef(mapRefForSync.current)
+    }
+    return () => {
+      if (onMapRef) {
+        onMapRef(null)
+      }
+    }
+  }, [onMapRef, tileValue])
+
+  // Create tile-specific context with filtered config, filtered runtimeData, and tile dimensions
+  // Parent's runtimeLegend is already unified (forced in CdcMapComponent for small multiples)
+  const tileContext: MapContext = useMemo(
+    () => ({
+      ...parentContext,
+      config: tileConfig,
+      runtimeData: tileRuntimeData as any,
+      dimensions: tileDimensions,
+      vizViewport: getViewport(tileDimensions[0]),
+      useDynamicViewbox,
+      // Override tooltipId with unique tile-specific ID
+      tooltipId: tileTooltipId,
+      // Small multiples synchronization: pass wrapped callback
+      handleSmallMultipleHover: onMapHover,
+      // Internal: ref for programmatic tooltip control
+      mapRefForSync
+    }),
+    [parentContext, tileConfig, tileRuntimeData, tileDimensions, useDynamicViewbox, tileTooltipId, onMapHover]
+  )
+
+  return (
+    <div className='small-multiple-tile'>
+      <div ref={onHeaderRef} className='tile-header'>
+        <div className='tile-title'>{tileTitle}</div>
+      </div>
+      <div className='tile-map' ref={tileMapRef}>
+        <ConfigContext.Provider value={tileContext}>
+          {config.general.geoType === 'us' && <UsaMap.State />}
+          {config.general.geoType === 'single-state' && <UsaMap.SingleState />}
+          {config.general.geoType === 'us-region' && <UsaMap.Region />}
+        </ConfigContext.Provider>
+
+        {/* Custom tooltip component that responds to both natural and synthetic events */}
+        {!window.matchMedia('(any-hover: none)').matches && config.tooltips.appearanceType === 'hover' && (
+          <SynchronizedTooltip
+            tileTooltipId={tileTooltipId}
+            opacity={config.tooltips.opacity}
+            containerRef={tileMapRef}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default SmallMultipleTile

package/src/components/SmallMultiples/SmallMultiples.css

@@ -0,0 +1,32 @@
+.small-multiples-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.small-multiples-grid {
+  display: grid;
+  width: 100%;
+  flex: 1;
+}
+
+.small-multiple-tile {
+  display: flex;
+  flex-direction: column;
+}
+
+.tile-header {
+  margin-bottom: 0.5rem;
+}
+
+.tile-title {
+  margin: 0;
+  font-weight: 700;
+  text-align: left;
+  line-height: 1.3;
+}
+
+.tile-map {
+  width: 100%;
+  flex-shrink: 0;
+}

package/src/components/SmallMultiples/SmallMultiples.tsx

@@ -0,0 +1,150 @@
+import React, { useContext, useMemo, useRef, useEffect, useCallback } from 'react'
+import SmallMultipleTile from './SmallMultipleTile'
+import ConfigContext from '../../context'
+import { MapContext } from '../../types/MapContext'
+import { getTileValues, applyTileOrder } from '../../helpers/smallMultiplesHelpers'
+import { isMobileSmallMultiplesViewport } from '@cdc/core/helpers/viewports'
+import { MapRefInterface } from '../../hooks/useProgrammaticMapTooltip'
+import './SmallMultiples.css'
+
+type TileHeaderRows = Array<Array<HTMLDivElement>>
+
+type TileHeaderEntries = Array<[string, HTMLDivElement]>
+
+interface SmallMultiplesProps {}
+
+const SmallMultiples: React.FC<SmallMultiplesProps> = () => {
+  const { config, currentViewport } = useContext<MapContext>(ConfigContext)
+
+  const { mode, tileColumn, tilesPerRowDesktop, tilesPerRowMobile, tileOrderType, tileOrder, tileTitles } =
+    config.smallMultiples || {}
+
+  const data = config.data || []
+
+  const isMobile = isMobileSmallMultiplesViewport(currentViewport)
+  const tilesPerRow = isMobile ? tilesPerRowMobile || 1 : tilesPerRowDesktop || 3
+
+  const rawTileValues = useMemo(() => {
+    return getTileValues(data, tileColumn)
+  }, [data, tileColumn])
+
+  const orderedTileValues = useMemo(() => {
+    return applyTileOrder(rawTileValues, tileOrderType, tileOrder, tileTitles)
+  }, [rawTileValues, tileOrderType, tileOrder, tileTitles])
+
+  // Refs to all tile header elements for height alignment
+  const headerRefs = useRef<Record<string, HTMLDivElement | null>>({})
+
+  // Refs to all tile map components for tooltip synchronization
+  const tileMapRefs = useRef<Record<string, MapRefInterface | null>>({})
+
+  // Handle tooltip synchronization across small multiple tiles
+  // This follows the chart package pattern where we manage the source tile key here
+  const handleMapHover = useCallback(
+    (sourceTileKey: string, geoId: string | null, yCoordinate?: number) => {
+      if (!config.smallMultiples?.synchronizedTooltips) {
+        return
+      }
+
+      // If geoId is null, mouse left the geography - hide all tooltips
+      if (geoId === null) {
+        Object.entries(tileMapRefs.current).forEach(([tileKey, mapRef]) => {
+          if (tileKey !== sourceTileKey && mapRef?.hideTooltip) {
+            mapRef.hideTooltip()
+          }
+        })
+        return
+      }
+
+      // Show tooltip for same geography on all other tiles
+      Object.entries(tileMapRefs.current).forEach(([tileKey, mapRef]) => {
+        if (tileKey === sourceTileKey || !mapRef) {
+          return
+        }
+
+        if (mapRef.triggerTooltipAtGeo && yCoordinate !== undefined) {
+          mapRef.triggerTooltipAtGeo(geoId, yCoordinate)
+        }
+      })
+    },
+    [config.smallMultiples?.synchronizedTooltips]
+  )
+
+  // Align tile header heights per row
+  useEffect(() => {
+    const headerEntries = Object.entries(headerRefs.current).filter(([_, ref]) => ref) as TileHeaderEntries
+    if (headerEntries.length === 0) return
+
+    // Group headers by row based on their index in orderedTileValues
+    const headersByRow: TileHeaderRows = []
+
+    orderedTileValues.forEach((tileValue, index) => {
+      const rowIndex = Math.floor(index / tilesPerRow)
+      const header = headerRefs.current[String(tileValue)]
+
+      headersByRow[rowIndex] ||= []
+      headersByRow[rowIndex].push(header)
+    })
+
+    // For each row, find the header with longest text and align others to it
+    headersByRow.forEach(rowHeaders => {
+      let longestHeader: HTMLDivElement | null = null
+      let maxTextLength = 0
+
+      rowHeaders.forEach(header => {
+        const textLength = header.textContent?.length || 0
+        if (textLength > maxTextLength) {
+          maxTextLength = textLength
+          longestHeader = header
+        }
+      })
+
+      if (!longestHeader) return
+
+      // Get the height of the longest header in this row
+      const targetHeight = longestHeader.offsetHeight
+
+      // Apply that height to all other headers in this row
+      rowHeaders.forEach(header => {
+        header.style.minHeight = header !== longestHeader ? `${targetHeight}px` : 'auto'
+      })
+    })
+  }, [orderedTileValues, tilesPerRow])
+
+  // Calculate grid styling
+  const gridGap = isMobile ? '1rem' : '2rem'
+  const gridStyle = {
+    gridTemplateColumns: `repeat(${tilesPerRow}, 1fr)`,
+    gap: gridGap
+  }
+
+  return (
+    <div className='small-multiples-container mt-4'>
+      <div className='small-multiples-grid' style={gridStyle}>
+        {orderedTileValues.map((tileValue, index) => {
+          const tileKey = String(tileValue)
+          return (
+            <SmallMultipleTile
+              key={tileKey}
+              tileValue={tileValue}
+              tileColumn={tileColumn}
+              config={config}
+              data={data}
+              isFirstInRow={index % tilesPerRow === 0}
+              tilesPerRow={tilesPerRow}
+              onHeaderRef={ref => {
+                headerRefs.current[tileKey] = ref
+              }}
+              onMapRef={ref => {
+                tileMapRefs.current[tileKey] = ref
+              }}
+              onMapHover={(geoId, yCoordinate) => handleMapHover(tileKey, geoId, yCoordinate)}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default SmallMultiples

package/src/components/SmallMultiples/SynchronizedTooltip.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect, useRef, RefObject } from 'react'
+
+interface SynchronizedTooltipProps {
+  tileTooltipId: string
+  opacity: number
+  containerRef: RefObject<HTMLElement>
+}
+
+/**
+ * Custom tooltip component for small multiples that responds to synthetic events
+ * This bypasses react-tooltip's lazy initialization issues
+ */
+const SynchronizedTooltip: React.FC<SynchronizedTooltipProps> = ({ tileTooltipId, opacity, containerRef }) => {
+  const [tooltipState, setTooltipState] = useState<{
+    visible: boolean
+    html: string
+    x: number
+    y: number
+  }>({
+    visible: false,
+    html: '',
+    x: 0,
+    y: 0
+  })
+
+  const tooltipRef = useRef<HTMLDivElement>(null)
+  const currentGeoRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    const handleMouseEnter = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      const tooltipId = target.getAttribute('data-tooltip-id')
+
+      if (tooltipId === `tooltip__${tileTooltipId}`) {
+        const tooltipHtml = target.getAttribute('data-tooltip-html')
+        const geoId = target.getAttribute('data-geo-id') || ''
+
+        // Don't show tooltip if there's no content
+        if (!tooltipHtml || tooltipHtml === 'undefined' || tooltipHtml.trim() === '') {
+          setTooltipState(prev => ({ ...prev, visible: false }))
+          currentGeoRef.current = null
+          return
+        }
+
+        // Only update if we're entering a different geography or showing for first time
+        if (geoId !== currentGeoRef.current) {
+          currentGeoRef.current = geoId
+
+          // Position tooltip relative to the geography element's bounding box
+          const rect = target.getBoundingClientRect()
+          const x = rect.left + rect.width / 2
+          const y = rect.top + rect.height / 2
+
+          setTooltipState({
+            visible: true,
+            html: tooltipHtml,
+            x,
+            y
+          })
+        }
+      }
+    }
+
+    const handleMouseLeave = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      const tooltipId = target.getAttribute('data-tooltip-id')
+
+      if (tooltipId === `tooltip__${tileTooltipId}`) {
+        setTooltipState(prev => ({ ...prev, visible: false }))
+        currentGeoRef.current = null
+      }
+    }
+
+    const container = containerRef.current
+    if (!container) return
+
+    container.addEventListener('mouseenter', handleMouseEnter, true)
+    container.addEventListener('mouseleave', handleMouseLeave, true)
+
+    return () => {
+      container.removeEventListener('mouseenter', handleMouseEnter, true)
+      container.removeEventListener('mouseleave', handleMouseLeave, true)
+    }
+  }, [tileTooltipId, containerRef])
+
+  if (!tooltipState.visible) return null
+
+  return (
+    <div
+      ref={tooltipRef}
+      className='tooltip tooltip-test'
+      style={{
+        position: 'fixed',
+        left: `${tooltipState.x + 10}px`,
+        top: `${tooltipState.y + 10}px`,
+        background: `rgba(255,255,255, ${opacity / 100})`,
+        pointerEvents: 'none',
+        zIndex: 9999
+      }}
+      dangerouslySetInnerHTML={{ __html: tooltipState.html }}
+    />
+  )
+}
+
+export default SynchronizedTooltip

package/src/components/SmallMultiples/index.tsx

@@ -0,0 +1,3 @@
+export { default } from './SmallMultiples'
+export { default as SmallMultiples } from './SmallMultiples'
+export { default as SmallMultipleTile } from './SmallMultipleTile'