@cdc/map 4.25.10 → 4.26.1

package/src/components/Geo.tsx

@@ -8,14 +8,31 @@ type GeoProps = {
   className?: string
   onMouseEnter?: () => void
   onClick?: () => void
+  'data-country-code'?: string
+  'data-tooltip-id'?: string
+  'data-tooltip-html'?: string
+  additionalData?: any
+  geoData?: any
+  additionaldata?: string
+  geodata?: string
+  tabIndex?: number
 }
 
 const Geo: React.FC<GeoProps> = ({ path, styles, stroke, strokeWidth, ...props }) => {
-  const { className, ...restProps } = props
-  const geoClassName = String(props.additionalData?.name)?.toLowerCase()?.replaceAll(' ', '') || 'country'
+  const { className, 'data-country-code': dataCountryCode, ...restProps } = props
+  const geoClassName = String(props.additionalData?.name)?.toLowerCase()?.replace(/\s+/g, '') || 'country'
   return (
     <g className={`geo-group ${geoClassName}`} style={styles} {...restProps}>
-      <path tabIndex={-1} className={`single-geo ${geoClassName}`} stroke={stroke} strokeWidth={strokeWidth} d={path} />
+      <path
+        tabIndex={-1}
+        className={`single-geo ${geoClassName} ${className || ''}`}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinejoin='round'
+        strokeLinecap='round'
+        d={path}
+        data-country-code={dataCountryCode}
+      />
     </g>
   )
 }

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

@@ -99,6 +99,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           color: entry.color,
           label: parse(legendLabel),
           disabled: entry.disabled,
+          hidden: entry.hidden,
           special: entry.hasOwnProperty('special'),
           value: [entry.min, entry.max]
         }
@@ -111,56 +112,40 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
   const legendList = (patternsOnly = false) => {
     const formattedItems = patternsOnly ? [] : getFormattedLegendItems()
-    const patternsOnlyFont = isMobileFontViewport(viewport) ? '12px' : '14px'
-    const hasDisabledItems = formattedItems.some(item => item.disabled)
+    const hasDisabledItems = runtimeLegend.disabledAmt > 0
     let legendItems
 
     legendItems = formattedItems.map((item, idx) => {
       const handleListItemClass = () => {
         let classes = ['legend-container__li', 'd-flex', 'align-items-center']
-        if (item.disabled) classes.push('legend-container__li--disabled')
+        if (item.disabled || item.hidden) classes.push('legend-container__li--disabled')
         else if (hasDisabledItems) classes.push('legend-container__li--not-disabled')
         if (item.special) classes.push('legend-container__li--special-class')
         return classes.join(' ')
       }
 
       return (
-        <li
-          className={handleListItemClass()}
-          key={idx}
-          title={`Legend item ${item.label} - Click to disable`}
-          onClick={() => {
-            toggleLegendActive(idx, item.label, runtimeLegend, dispatch)
-            publishAnalyticsEvent({
-              vizType: config.type,
-              vizSubType: getVizSubType(config),
-              eventType: `map_legend_item_toggled`,
-              eventAction: 'click',
-              eventLabel: `${interactionLabel}`,
-              vizTitle: getVizTitle(config),
-              specifics: `mode: isolate, label: ${item.label}`
-            })
-          }}
-          onKeyDown={e => {
-            if (e.key === 'Enter') {
-              e.preventDefault()
-              toggleLegendActive(idx, item.label, runtimeLegend, dispatch)
+        <li className={handleListItemClass()} key={idx}>
+          <button
+            type='button'
+            className='legend-container__li-btn'
+            title={`Legend item ${item.label} - Click to disable`}
+            onClick={() => {
+              toggleLegendActive(idx, item.label, runtimeLegend, dispatch, config.legend.behavior)
               publishAnalyticsEvent({
                 vizType: config.type,
                 vizSubType: getVizSubType(config),
                 eventType: `map_legend_item_toggled`,
-                eventAction: 'keydown',
+                eventAction: 'click',
                 eventLabel: `${interactionLabel}`,
                 vizTitle: getVizTitle(config),
                 specifics: `mode: isolate, label: ${item.label}`
               })
-            }
-          }}
-          tabIndex={0}
-          role='button'
-        >
-          <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={item.color} />
-          <span>{item.label}</span>
+            }}
+          >
+            <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={item.color} />
+            <span>{item.label}</span>
+          </button>
         </li>
       )
     })
@@ -180,12 +165,12 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
         legendItems.push(
           <>
-            <li
-              className={`legend-container__li legend-container__li--geo-pattern`}
-              aria-label='You are on a pattern button. We dont support toggling patterns on this legend at the moment, but provide the area as being focusable for congruity.'
-              tabIndex={0}
-            >
-              <span className='legend-item' style={{ border: 'unset' }}>
+            <li className={`legend-container__li legend-container__li--geo-pattern`}>
+              <button
+                type='button'
+                className='legend-container__li-btn legend-container__li-btn--pattern'
+                aria-label='Pattern legend item. Toggling patterns is not currently supported.'
+              >
                 <svg width={legendSize} height={legendSize}>
                   {pattern === 'waves' && (
                     <PatternWaves
@@ -225,10 +210,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                     strokeWidth={1}
                   />
                 </svg>
-              </span>
-              <p style={{ lineHeight: '22.4px', fontSize: patternsOnly ? patternsOnlyFont : '16px' }}>
-                {patternData.label || patternData.dataValue || ''}
-              </p>
+                <span>{patternData.label || patternData.dataValue || ''}</span>
+              </button>
             </li>
           </>
         )
@@ -367,41 +350,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/LegendGroup/Legend.Group.tsx

@@ -112,7 +112,7 @@ const LegendGroup = ({ legendItems }) => {
                   onKeyDown={e => {
                     if (e.key === 'Enter' || e.key === ' ') {
                       e.preventDefault()
-                      toggleLegendActive(index, item.label, runtimeLegend, dispatch)
+                      toggleLegendActive(index, item.label, runtimeLegend, dispatch, config.legend.behavior)
                     }
                   }}
                 >

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 {
@@ -103,11 +103,33 @@
       }
 
       .legend-container__ul {
+        list-style: none;
         line-height: 1;
         row-gap: var(--space-between-legend-item-rows);
         column-gap: var(--space-between-legend-item-columns);
       }
 
+      .legend-container__li-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+        width: 100%;
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        font: inherit;
+        color: inherit;
+        cursor: pointer;
+        text-align: left;
+
+        &--pattern {
+          cursor: default;
+        }
+        &:focus {
+          outline: none;
+        }
+      }
 
       .legend-container__ul:not(.single-row, .legend-container__ul--single-column) {
         list-style: none;
@@ -118,11 +140,6 @@
           grid-template-columns: 1fr 1fr;
         }
 
-        button {
-          font-size: unset;
-          background: transparent;
-        }
-
         &.vertical-sorted {
           // Remove the grid overrides - let the existing column rules handle this
           display: block !important; // Switch from grid to block to enable columns

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