@cdc/map 4.25.10 → 4.25.11

package/src/components/Legend/components/Legend.tsx

@@ -367,41 +367,41 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
             {((config.visual.additionalCityStyles && config.visual.additionalCityStyles.some(c => c.label)) ||
               config.visual.cityStyleLabel) && (
-                <>
-                  <hr />
-                  <div className={legendClasses.div.join(' ') || ''}>
-                    {config.visual.cityStyleLabel && (
-                      <div>
-                        <svg>
-                          <Group
-                            top={
-                              config.visual.cityStyle === 'pin' ? 19 : config.visual.cityStyle === 'triangle' ? 13 : 11
-                            }
-                            left={10}
-                          >
-                            {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
-                          </Group>
-                        </svg>
-                        <p>{config.visual.cityStyleLabel}</p>
-                      </div>
-                    )}
+              <>
+                <hr />
+                <div className={legendClasses.div.join(' ') || ''}>
+                  {config.visual.cityStyleLabel && (
+                    <div>
+                      <svg>
+                        <Group
+                          top={
+                            config.visual.cityStyle === 'pin' ? 19 : config.visual.cityStyle === 'triangle' ? 13 : 11
+                          }
+                          left={10}
+                        >
+                          {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
+                        </Group>
+                      </svg>
+                      <p>{config.visual.cityStyleLabel}</p>
+                    </div>
+                  )}
 
-                    {config.visual.additionalCityStyles.map(
-                      ({ shape, label }, index) =>
-                        label && (
-                          <div key={`additional-city-style-${index}-${shape}`}>
-                            <svg>
-                              <Group top={shape === 'Pin' ? 19 : shape === 'Triangle' ? 13 : 11} left={10}>
-                                {cityStyleShapes[shape.toLowerCase()]}
-                              </Group>
-                            </svg>
-                            <p>{label}</p>
-                          </div>
-                        )
-                    )}
-                  </div>
-                </>
-              )}
+                  {config.visual.additionalCityStyles.map(
+                    ({ shape, label }, index) =>
+                      label && (
+                        <div key={`additional-city-style-${index}-${shape}`}>
+                          <svg>
+                            <Group top={shape === 'Pin' ? 19 : shape === 'Triangle' ? 13 : 11} left={10}>
+                              {cityStyleShapes[shape.toLowerCase()]}
+                            </Group>
+                          </svg>
+                          <p>{label}</p>
+                        </div>
+                      )
+                  )}
+                </div>
+              </>
+            )}
             {runtimeLegend.disabledAmt > 0 && (
               <Button className={legendClasses.showAllButton.join(' ')} onClick={handleReset}>
                 Show All

package/src/components/Legend/components/index.scss

@@ -1,4 +1,4 @@
-@import '../../../scss/mixins';
+@import '@cdc/core/styles/v2/utils/breakpoints';
 
 .cdc-map-inner-container {
   .map-container.world aside.side {

package/src/components/NavigationMenu.tsx

@@ -2,6 +2,7 @@ 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, config } = useContext(ConfigContext)
@@ -65,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'

package/src/components/UsaMap/components/SingleState/SingleState.CountyOutput.tsx

@@ -8,6 +8,7 @@ import { applyLegendToRow } from '../../../../helpers/applyLegendToRow'
 import useGeoClickHandler, { geoClickHandler } from '././../../../../hooks/useGeoClickHandler'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { useSynchronizedGeographies } from '../../../../hooks/useSynchronizedGeographies'
 
 interface CountyOutputProps {
   counties: any[]
@@ -23,6 +24,7 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
   const geoFillColor = getGeoFillColor(config)
   const { geoClickHandler } = useGeoClickHandler()
+  const { getSyncProps, syncHandlers } = useSynchronizedGeographies()
 
   return (
     <>
@@ -71,14 +73,16 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
 
           return (
             <g
+              {...getSyncProps(geoKey)}
               key={`key--${county.id}`}
-              className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[config.columns.geo.name]
-                }`}
+              className={`county county--${geoDisplayName.split(' ').join('')} county--${
+                geoData[config.columns.geo.name]
+              }`}
               style={styles}
               onClick={() => geoClickHandler(geoDisplayName, geoData)}
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
-              onMouseEnter={() => {
+              onMouseEnter={e => {
                 // Track hover analytics event if this is a new location
                 const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
                 publishAnalyticsEvent({
@@ -91,6 +95,10 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
                   location: geoDisplayName,
                   specifics: `location: ${locationName?.toLowerCase()}`
                 })
+                syncHandlers.onMouseEnter(geoKey, e.clientY)
+              }}
+              onMouseLeave={() => {
+                syncHandlers.onMouseLeave()
               }}
             >
               <path
@@ -105,11 +113,18 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
         } else {
           return (
             <g
+              {...getSyncProps(geoKey)}
               key={`key--${county.id}`}
               className={`county county--${geoDisplayName.split(' ').join('')}`}
               style={{ fill: geoFillColor }}
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
+              onMouseEnter={e => {
+                syncHandlers.onMouseEnter(geoKey, e.clientY)
+              }}
+              onMouseLeave={() => {
+                syncHandlers.onMouseLeave()
+              }}
             >
               <path
                 tabIndex={-1}