@cdc/map 4.25.7 → 4.25.10

package/src/components/CityList.tsx

@@ -1,10 +1,11 @@
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useMemo } from 'react'
 import { scaleLinear } from 'd3-scale'
 import { GlyphCircle, GlyphDiamond, GlyphSquare, GlyphStar, GlyphTriangle } from '@visx/glyph'
 import ConfigContext from '../context'
+import { useLegendMemoContext } from '../context/LegendMemoContext'
 import { supportedCities } from '../data/supported-geos'
-import { getFilterControllingStatePicked } from './UsaMap/helpers/map'
-import { displayGeoName, getGeoStrokeColor, SVG_HEIGHT, SVG_PADDING, SVG_WIDTH, titleCase } from '../helpers'
+import { getFilterControllingStatesPicked } from './UsaMap/helpers/map'
+import { displayGeoName, getGeoStrokeColor, SVG_HEIGHT, SVG_PADDING, SVG_WIDTH, isLegendItemDisabled } from '../helpers'
 import useGeoClickHandler from '../hooks/useGeoClickHandler'
 import useApplyTooltipsToGeo from '../hooks/useApplyTooltipsToGeo'
 import { applyLegendToRow } from '../helpers/applyLegendToRow'
@@ -18,72 +19,86 @@ type CityListProps = {
 }
 
 const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValueSupported, tooltipId, projection }) => {
-  const {
-    config,
-    topoData,
-    data: runtimeData,
-    position,
-    legendMemo,
-    legendSpecialClassLastMemo,
-    runtimeLegend
-  } = useContext(ConfigContext)
+  const { config, topoData, runtimeData, position, runtimeLegend } = useContext(ConfigContext)
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const { geoClickHandler } = useGeoClickHandler()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
 
-  const { geoColumnName, latitudeColumnName, longitudeColumnName, primaryColumnName } = getColumnNames(config.columns)
-  const { additionalCityStyles } = config.visual || []
+  const { geoColumnName, latitudeColumnName, longitudeColumnName, primaryColumnName } =
+    getColumnNames(config.columns) || {}
 
-  if (!projection) return
+  // Memoize expensive city data creation
+  const citiesData = useMemo(() => {
+    if (!runtimeData) return {}
 
-  const citiesData = runtimeData
-    ? Object.keys(runtimeData).reduce((acc, key) => {
-        const city = runtimeData[key]
+    return Object.keys(runtimeData).reduce((acc, key) => {
+      const city = runtimeData[key]
+      if (city && city[geoColumnName]) {
         acc[city[geoColumnName]] = city
-        return acc
-      }, {})
-    : {}
+      }
+      return acc
+    }, {})
+  }, [runtimeData, geoColumnName])
+
+  // Memoize bubble size calculation
+  const size = useMemo(() => {
+    if (config.general.type !== 'bubble' || !runtimeData) {
+      return null
+    }
 
-  if (config.general.type === 'bubble') {
-    const maxDataValue = Math.max(
-      ...(runtimeData ? Object.keys(runtimeData).map(key => runtimeData[key][config.columns.primary.name]) : [0])
-    )
-    const sortedRuntimeData = Object.values(runtimeData).sort((a, b) =>
-      a[primaryColumnName] < b[primaryColumnName] ? 1 : -1
-    )
-    if (!sortedRuntimeData) return
+    const maxVal = Math.max(...Object.keys(runtimeData).map(key => runtimeData[key][config.columns.primary.name]))
+
+    if (maxVal <= 0) {
+      return null
+    }
+
+    return scaleLinear().domain([1, maxVal]).range([config.visual.minBubbleSize, config.visual.maxBubbleSize])
+  }, [
+    config.general.type,
+    config.columns.primary.name,
+    config.visual.minBubbleSize,
+    config.visual.maxBubbleSize,
+    runtimeData
+  ])
+
+  // Get the list of cities to render
+  const cityList = useMemo(() => {
+    return Object.keys(citiesData).filter(cityName => cityName && citiesData[cityName])
+  }, [citiesData])
+
+  // Early exit for map types that don't use city rendering
+  if (!projection) {
+    return null
+  }
 
-    // Set bubble sizes
-    var size = scaleLinear().domain([1, maxDataValue]).range([config.visual.minBubbleSize, config.visual.maxBubbleSize])
+  // Early exit if no cities to render
+  if (!cityList.length) {
+    return null
   }
-  const cityList = Object.keys(citiesData).filter(c => undefined !== c || undefined !== runtimeData[c])
-  if (!cityList) return true
 
   // Cities output
   return cityList.map((city, i) => {
-    let geoData: Object
-    if (runtimeData) {
-      Object.keys(runtimeData).forEach(key => {
-        if (city === runtimeData[key][config.columns.geo.name]) {
-          geoData = runtimeData[key]
-        }
-      })
-    }
+    // Get the city data directly from our memoized citiesData
+    const geoData = citiesData[city]
+
     if (!geoData) {
-      geoData = runtimeData ? runtimeData[city] : undefined
+      return null
     }
-    const cityDisplayName = titleCase(displayGeoName(city))
 
-    const legendColors = geoData
-      ? applyLegendToRow(geoData, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
-      : runtimeData[city]
-      ? applyLegendToRow(runtimeData[city], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
-      : false
+    const cityDisplayName = displayGeoName(city)
 
-    if (legendColors === false) {
-      return true
+    const legendColors = applyLegendToRow(geoData, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+
+    if (!legendColors || legendColors.length === 0) {
+      return null
+    }
+
+    // Don't render if legend item is disabled
+    if (isLegendItemDisabled(geoData, runtimeLegend, legendMemo, legendSpecialClassLastMemo, config)) {
+      return null
     }
 
-    const toolTip = applyTooltipsToGeo(cityDisplayName, geoData || runtimeData[city])
+    const toolTip = applyTooltipsToGeo(cityDisplayName, geoData)
 
     const radius = config.visual.geoCodeCircleSize || 8
 
@@ -94,19 +109,21 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
     const geoStrokeColor = getGeoStrokeColor(config)
 
     const pin = (
-      <path
-        className='marker'
-        d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z'
-        title='Select for more information'
-        onClick={() => geoClickHandler(cityDisplayName, geoData)}
-        data-tooltip-id={`tooltip__${tooltipId}`}
-        data-tooltip-html={toolTip}
-        transform={`scale(${radius / 7.5})`}
-        stroke={geoStrokeColor}
-        strokeWidth={'2px'}
-        tabIndex='-1'
-        {...additionalProps}
-      />
+      <g>
+        <title>Select for more information</title>
+        <path
+          className='marker'
+          d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z'
+          onClick={() => geoClickHandler(cityDisplayName, geoData)}
+          data-tooltip-id={`tooltip__${tooltipId}`}
+          data-tooltip-html={toolTip}
+          transform={`scale(${radius / 7.5})`}
+          stroke={geoStrokeColor}
+          strokeWidth={'2px'}
+          tabIndex={-1}
+          {...additionalProps}
+        />
+      </g>
     )
 
     let transform = ''
@@ -129,19 +146,19 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
     }
 
     if (geoData?.[longitudeColumnName] && geoData?.[latitudeColumnName] && config.general.geoType === 'single-state') {
-      const statePicked = getFilterControllingStatePicked(config, runtimeData)
-      const _statePickedData = topoData?.states?.find(s => s.properties.name === statePicked)
+      const statesPicked = getFilterControllingStatesPicked(config, runtimeData)
+      const _statesPickedData = (topoData as any)?.states?.find(s => statesPicked.includes(s.properties.name))
 
       const newProjection = projection.fitExtent(
         [
           [SVG_PADDING, SVG_PADDING],
           [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
         ],
-        _statePickedData
+        _statesPickedData
       )
       let coords = [Number(geoData?.[longitudeColumnName]), Number(geoData?.[latitudeColumnName])]
       transform = `translate(${newProjection(coords)}) scale(${
-        config.visual.geoCodeCircleSize / (position.zoom > 1 ? position.zoom : 1)
+        config.visual.geoCodeCircleSize / ((position as any).zoom > 1 ? (position as any).zoom : 1)
       })`
       needsPointer = true
     }
@@ -181,8 +198,7 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
 
     const shapeProps = {
       onClick: () => geoClickHandler(cityDisplayName, geoData),
-      size: config.general.type === 'bubble' ? size(geoData[primaryColumnName]) : radius * 30,
-      title: 'Select for more information',
+      size: config.general.type === 'bubble' && size ? size(geoData[primaryColumnName]) : radius * 30,
       'data-tooltip-id': `tooltip__${tooltipId}`,
       'data-tooltip-html': toolTip,
       stroke: geoStrokeColor,
@@ -200,48 +216,10 @@ const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValue
       triangle: <GlyphTriangle {...shapeProps} />
     }
 
-    const cityStyle = Object.values(runtimeData)
-      .filter(d => additionalCityStyles?.some(style => String(d[style.column]) === String(style.value)))
-      .map(d => {
-        const conditionsMatched = additionalCityStyles.find(style => String(d[style.column]) === String(style.value))
-        return { ...conditionsMatched, ...d }
-      })
-      .find(item => {
-        return Object.keys(item).find(key => item[key] === city)
-      })
-
-    if (cityStyle !== undefined && cityStyle.shape) {
-      if (
-        !geoData?.[longitudeColumnName] &&
-        !geoData?.[latitudeColumnName] &&
-        city &&
-        supportedCities[city.toUpperCase()]
-      ) {
-        let translate = `translate(${projection(supportedCities[city.toUpperCase()])})`
-
-        return (
-          <g key={i} transform={translate} style={styles} className='geo-point' tabIndex={-1}>
-            {cityStyleShapes[cityStyle.shape.toLowerCase()]}
-          </g>
-        )
-      }
-
-      if (geoData?.[longitudeColumnName] && geoData?.[latitudeColumnName]) {
-        const coords = [Number(geoData?.[longitudeColumnName]), Number(geoData?.[latitudeColumnName])]
-        let translate = `translate(${projection(coords)})`
-
-        return (
-          <g key={i} transform={translate} style={styles} className='geo-point' tabIndex={-1}>
-            {cityStyleShapes[cityStyle.shape.toLowerCase()]}
-          </g>
-        )
-      }
-    }
-    if (legendColors?.[0] === '#000000') return
-
+    // Render the city marker
     return (
       <g key={i} transform={transform} style={styles} className='geo-point' tabIndex={-1}>
-        {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
+        {cityStyleShapes[config.visual.cityStyle?.toLowerCase() || 'circle']}
       </g>
     )
   })

package/src/components/DataTable.tsx

@@ -12,8 +12,10 @@ import SkipTo from '@cdc/core/components/elements/SkipTo'
 import Loading from '@cdc/core/components/Loading'
 import { navigationHandler } from '../helpers'
 import ConfigContext, { MapDispatchContext } from '../context'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getPatternForRow } from '../helpers/getPatternForRow'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = props => {
   const {
     state,
@@ -29,11 +31,12 @@ const DataTable = props => {
     applyLegendToRow,
     displayGeoName,
     formatLegendLocation,
-    tabbingId
+    tabbingId,
+    interactionLabel
   } = props
 
   const dispatch = useContext(MapDispatchContext)
-  const { currentViewport: viewport } = useContext(ConfigContext)
+  const { currentViewport: viewport, mapId } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(expandDataTable)
   const [sortBy, setSortBy] = useState({ column: 'geo', asc: false })
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
@@ -123,7 +126,7 @@ const DataTable = props => {
           role='link'
           tabIndex='0'
           onKeyDown={e => {
-            if (e.keyCode === 13) {
+            if (e.key === 'Enter') {
               navigationHandler(state.general.navigationTarget, row[columns.navigate.name])
             }
           }}
@@ -176,7 +179,17 @@ const DataTable = props => {
       <a
         download={fileName}
         type='button'
-        onClick={saveBlob}
+        onClick={() => {
+          saveBlob
+          publishAnalyticsEvent({
+            vizType: state.type,
+            vizSubType: getVizSubType(state),
+            eventType: 'data_downloaded',
+            eventAction: 'click',
+            eventLabel: interactionLabel,
+            vizTitle: getVizTitle(state)
+          })
+        }}
         href={URL.createObjectURL(blob)}
         aria-label='Download this data in a CSV file format.'
         className={`${headerColor} no-border`}
@@ -192,8 +205,8 @@ const DataTable = props => {
   const TableMediaControls = ({ belowTable }) => {
     return (
       <MediaControls.Section classes={['download-links']}>
-        <MediaControls.Link config={state} />
-        {state.table.download && <DownloadButton />}
+        <MediaControls.Link config={state} interactionLabel={interactionLabel} />
+        {state.table.download && <DownloadButton config={state} />}
       </MediaControls.Section>
     )
   }
@@ -245,7 +258,7 @@ const DataTable = props => {
           }}
           tabIndex='0'
           onKeyDown={e => {
-            if (e.keyCode === 13) {
+            if (e.key === 'Enter') {
               setExpanded(!expanded)
             }
           }}
@@ -293,7 +306,7 @@ const DataTable = props => {
                           setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
                         }}
                         onKeyDown={e => {
-                          if (e.keyCode === 13) {
+                          if (e.key === 'Enter') {
                             setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
                           }
                         }}
@@ -337,9 +350,28 @@ const DataTable = props => {
 
                           labelValue = getCellAnchor(labelValue, rowObj)
 
+                          // Check for pattern information
+                          const patternInfo = getPatternForRow(rowObj, state)
+
+                          const legendShape = patternInfo ? (
+                            <LegendShape
+                              fill={legendColor[0]}
+                              patternInfo={{
+                                pattern: patternInfo.pattern,
+                                patternId: `${mapId}--${String(patternInfo.dataKey).replace(' ', '-')}--${
+                                  patternInfo.patternIndex
+                                }--table`,
+                                size: patternInfo.size,
+                                color: patternInfo.color
+                              }}
+                            />
+                          ) : (
+                            <LegendShape fill={legendColor[0]} />
+                          )
+
                           cellValue = (
                             <>
-                              <LegendShape fill={legendColor[0]} />
+                              {legendShape}
                               {labelValue}
                             </>
                           )
@@ -349,9 +381,9 @@ const DataTable = props => {
 
                         return (
                           <td
-                            tabIndex='0'
+                            tabIndex={0}
                             role='gridcell'
-                            onClick={e =>
+                            onClick={() =>
                               state.general.type === 'bubble' &&
                               state.general.allowMapZoom &&
                               state.general.geoType === 'world'