@cdc/map 4.25.11 → 4.26.1

package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx

@@ -13,25 +13,6 @@ import { setConfig } from 'dompurify'
 
 const PanelAnnotate: React.FC = props => {
   const { config, setConfig, dimensions, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
-  const getColumns = (filter = true) => {
-    const columns = {}
-    config.data.forEach(row => {
-      Object.keys(row).forEach(columnName => (columns[columnName] = true))
-    })
-
-    if (filter) {
-      Object.keys(columns).forEach(key => {
-        if (
-          (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
-          (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))
-        ) {
-          delete columns[key]
-        }
-      })
-    }
-
-    return Object.keys(columns)
-  }
 
   const handleAnnotationUpdate = (value, property, index) => {
     const annotations = [...config?.annotations]

package/src/components/EditorPanel/components/Panels/Panel.SmallMultiples.tsx

@@ -11,6 +11,7 @@ import {
 import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
+import { useDataColumns } from '@cdc/core/hooks/useDataColumns'
 
 // contexts
 import ConfigContext from '../../../../context'
@@ -25,22 +26,11 @@ const PanelSmallMultiples: FC<PanelSmallMultiplesProps> = props => {
   const { config, setConfig } = useContext<MapContext>(ConfigContext)
   const { general } = config
 
-  const getColumns = () => {
-    let columns = {}
-    config.data?.forEach(row => {
-      Object.keys(row).forEach(columnName => (columns[columnName] = true))
-    })
-
-    // Filter out geo and primary columns
-    if (config.columns?.geo?.name) {
-      delete columns[config.columns.geo.name]
-    }
-    if (config.columns?.primary?.name) {
-      delete columns[config.columns.primary.name]
-    }
-
-    return Object.keys(columns)
-  }
+  // Extract column names from data with memoization (replaces getColumns)
+  // Filter out geo and primary columns
+  const columns = useDataColumns(config.data, {
+    excludeColumns: [config.columns?.geo?.name, config.columns?.primary?.name].filter(Boolean)
+  })
 
   const updateField = (section, subsection, fieldName, value) => {
     const newConfig = { ...config }
@@ -82,6 +72,11 @@ const PanelSmallMultiples: FC<PanelSmallMultiplesProps> = props => {
     setConfig(newConfig)
   }
 
+  // Small multiples only supported for us, single-state, and us-region map types
+  if (!['us', 'single-state', 'us-region'].includes(general.geoType)) {
+    return null
+  }
+
   return (
     <AccordionItem>
       <AccordionItemHeading>
@@ -95,7 +90,7 @@ const PanelSmallMultiples: FC<PanelSmallMultiplesProps> = props => {
           label='Tile By Column'
           initial='Select Column'
           updateField={handleColumnChange}
-          options={getColumns()}
+          options={columns}
           tooltip={
             <Tooltip style={{ textTransform: 'none' }}>
               <Tooltip.Target>
@@ -199,6 +194,8 @@ const PanelSmallMultiples: FC<PanelSmallMultiplesProps> = props => {
                     value={currentOrderType}
                     options={tileOrderOptions}
                     label='Tile Order'
+                    fieldName='tileOrderType'
+                    section='smallMultiples'
                     updateField={(_section, _subsection, _fieldName, value) => {
                       handleOrderTypeChange(value)
                     }}

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>
           </>
         )

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

@@ -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/UsaMap/components/Territory/Territory.Rectangle.tsx

@@ -18,6 +18,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
   territory,
   textColor,
   backgroundColor,
+  mapId,
   svgStyle,
   getSyncProps,
   syncHandlers,
@@ -70,7 +71,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
           {label}
         </text>
 
-        {config.map.patterns.map((patternData, patternIndex) => {
+        {config.map?.patterns?.map((patternData, patternIndex) => {
           const patternColor = patternData.color || getContrastColor('#FFF', backgroundColor)
           const hasMatchingValues = patternData.dataValue === territoryData?.[patternData.dataKey]
 
@@ -81,7 +82,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
             <>
               {patternData?.pattern === 'waves' && (
                 <PatternWaves
-                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
+                  id={`${mapId}--territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
                   height={patternSizes[patternData?.size] ?? 10}
                   width={patternSizes[patternData?.size] ?? 10}
                   fill={patternColor}
@@ -91,7 +92,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
               )}
               {patternData?.pattern === 'circles' && (
                 <PatternCircles
-                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
+                  id={`${mapId}--territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
                   height={patternSizes[patternData?.size] ?? 10}
                   width={patternSizes[patternData?.size] ?? 10}
                   fill={patternColor}
@@ -102,7 +103,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
               )}
               {patternData?.pattern === 'lines' && (
                 <PatternLines
-                  id={`territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
+                  id={`${mapId}--territory-${territory}-${patternData?.dataKey}--${patternIndex}`}
                   height={patternSizes[patternData?.size] ?? 6}
                   width={patternSizes[patternData?.size] ?? 6}
                   stroke={patternColor}
@@ -114,7 +115,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 stroke={stroke}
                 strokeWidth={strokeWidth}
                 d={rectanglePath}
-                fill={`url(#territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
+                fill={`url(#${mapId}--territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
                 style={{ pointerEvents: 'none' }}
                 className={[
                   `territory-pattern-${patternData?.dataKey}`,

package/src/components/UsaMap/components/Territory/TerritoryShape.ts

@@ -11,6 +11,7 @@ export type TerritoryShape = {
   territory: string
   territoryData: object
   textColor: string
+  mapId?: string
   svgStyle?: React.CSSProperties
   getSyncProps?: (geoKey: string) => any
   syncHandlers?: {

package/src/components/UsaMap/components/UsaMap.County.tsx

@@ -15,7 +15,7 @@ import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
 import { applyLegendToRow } from '../../../helpers/applyLegendToRow'
 import useApplyTooltipsToGeo from '../../../hooks/useApplyTooltipsToGeo'
 import { MapConfig } from '../../../types/MapConfig'
-import { DEFAULT_MAP_BACKGROUND } from '../../../helpers/constants'
+import { DEFAULT_MAP_BACKGROUND, DISABLED_MAP_COLOR } from '../../../helpers/constants'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
@@ -708,7 +708,7 @@ const CountyMap = () => {
                 ? applyLegendToRow(runtimeData[key], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
                 : false
             if (legendValues) {
-              if (legendValues?.[0] === '#000000' || legendValues?.[0] === DEFAULT_MAP_BACKGROUND) return
+              if (legendValues?.[0] === '#000000' || legendValues?.[0] === DISABLED_MAP_COLOR) return
               const shapeType = config.visual.cityStyle.toLowerCase()
               const shapeProperties = createShapeProperties(shapeType, pixelCoords, legendValues, config, geoRadius)
               if (shapeProperties) {

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

@@ -58,9 +58,6 @@ const SingleStateMap: React.FC = () => {
 
   const { geoClickHandler } = useGeoClickHandler()
 
-  const cityListProjection = geoAlbersUsaTerritories()
-    .translate([SVG_WIDTH / 2, SVG_HEIGHT / 2])
-    .scale(1)
   const geoStrokeColor = getGeoStrokeColor(config)
   const path = geoPath().projection(projection)
 
@@ -132,10 +129,10 @@ const SingleStateMap: React.FC = () => {
       />
     )
 
-    // Push city list
+    // Push city list - use projection from useStateZoom which is fitted to ALL selected states
     geosJsx.push(
       <CityList
-        projection={cityListProjection}
+        projection={projection}
         key='cities'
         geoClickHandler={geoClickHandler}
         titleCase={titleCase}
@@ -192,7 +189,7 @@ const SingleStateMap: React.FC = () => {
                 statesToShow
               ]}
             >
-              {({ features, projection }) => {
+              {({ features }) => {
                 return (
                   <g
                     id='mapGroup'
@@ -203,7 +200,7 @@ const SingleStateMap: React.FC = () => {
                     data-scale=''
                     key='countyMapGroup'
                   >
-                    {constructGeoJsx(features, projection)}
+                    {constructGeoJsx(features)}
                   </g>
                 )
               }}

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -44,9 +44,9 @@ import {
   displayGeoName,
   SVG_HEIGHT,
   SVG_VIEWBOX,
-  SVG_WIDTH,
-  hashObj
+  SVG_WIDTH
 } from '../../../helpers'
+import { hashObj } from '@cdc/core/helpers/hashObj'
 const { features: unitedStatesHex } = topoFeature(hexTopoJSON, hexTopoJSON.objects.states)
 
 const offsets = {
@@ -200,6 +200,7 @@ const UsaMap = () => {
           strokeColor='#fff'
           territoryData={territoryData}
           backgroundColor={styles.fill}
+          mapId={mapId}
           getSyncProps={getSyncProps}
           syncHandlers={syncHandlers}
         />
@@ -254,6 +255,7 @@ const UsaMap = () => {
           territoryData={territoryData}
           tabIndex={-1}
           backgroundColor={styles.fill}
+          mapId={mapId}
           getSyncProps={getSyncProps}
           syncHandlers={syncHandlers}
         />

package/src/data/initial-state.js

@@ -24,6 +24,7 @@ const createInitialState = () => {
       headerColor: 'theme-blue',
       title: '',
       showTitle: true,
+      titleStyle: 'small',
       showSidebar: true,
       showDownloadMediaButton: false,
       displayAsHex: false,

package/src/helpers/applyLegendToRow.ts

@@ -1,5 +1,6 @@
 import { generateColorsArray } from '@cdc/core/helpers/generateColorsArray'
-import { hashObj, DEFAULT_MAP_BACKGROUND } from '../helpers'
+import { hashObj } from '@cdc/core/helpers/hashObj'
+import { DEFAULT_MAP_BACKGROUND, DISABLED_MAP_COLOR } from '../helpers'
 import { mapColorPalettes as colorPalettes } from '@cdc/core/data/colorPalettes'
 import { MapConfig } from '../types/MapConfig'
 import { type RuntimeLegend } from '../types/runtimeLegend'
@@ -42,8 +43,9 @@ export const applyLegendToRow = (
     const idx = legendMemo.current.get(hash)!
     const disabledIdx = showSpecialClassesLast ? legendSpecialClassLastMemo.current.get(hash) ?? idx : idx
 
-    if (runtimeLegend.items?.[disabledIdx]?.disabled) {
-      return generateColorsArray(DEFAULT_MAP_BACKGROUND)
+    // Note: DISABLED_MAP_COLOR is used in UsaMap.County.tsx to check for hidden bubbles. Should be refactored to use the hidden value when that is implemented.
+    if (runtimeLegend.items?.[disabledIdx]?.disabled || runtimeLegend.items?.[disabledIdx]?.hidden) {
+      return generateColorsArray(DISABLED_MAP_COLOR)
     }
 
     const legendBinColor = runtimeLegend.items.find(o => o.bin === idx)?.color

package/src/helpers/constants.ts

@@ -30,6 +30,8 @@ export const GEOCODE_TYPES = {
 
 export const DEFAULT_MAP_BACKGROUND = '#DFE1E2'
 
+export const DISABLED_MAP_COLOR = '#FFFFFF'
+
 // Component constants
 export const LOGO_MAX_WIDTH = '50px'
 

package/src/helpers/displayGeoName.ts

@@ -48,16 +48,14 @@ export const displayGeoName = (key: string, convertFipsCodes = true): string =>
     wasLookedUp = true
   }
 
-  if (cityKeys.includes(value)) {
-    value = titleCase(String(value) || '')
-    wasLookedUp = true
-  }
-
+  // Check dictionary replacements before city lookup to handle special cases like DC
   const dict = {
     'Washington D.C.': 'District of Columbia',
     'WASHINGTON DC': 'District of Columbia',
     DC: 'District of Columbia',
     'WASHINGTON DC.': 'District of Columbia',
+    'DISTRICT OF COLUMBIA': 'District of Columbia',
+    Dc: 'District of Columbia',
     Congo: 'Republic of the Congo'
   }
 
@@ -66,6 +64,11 @@ export const displayGeoName = (key: string, convertFipsCodes = true): string =>
     wasLookedUp = true
   }
 
+  if (cityKeys.includes(value)) {
+    value = titleCase(String(value) || '')
+    wasLookedUp = true
+  }
+
   // If value was looked up from our dictionaries and needs formatting, or if it's a 2-letter abbreviation, return as-is
   if (value?.length === 2 || value === 'U.S. Virgin Islands' || wasLookedUp) {
     return value

package/src/helpers/generateRuntimeFilters.ts

@@ -1,4 +1,4 @@
-import { getUniqueValues } from './index'
+import { getUniqueValues } from '@cdc/core/helpers/getUniqueValues'
 import { handleSorting } from '@cdc/core/components/Filters'
 
 export const generateRuntimeFilters = (state, hash, runtimeFilters) => {

package/src/helpers/generateRuntimeLegend.ts

@@ -4,11 +4,11 @@ import {
   addUIDs,
   applyColorToLegend,
   getGeoFillColor,
-  hashObj,
   indexOfIgnoreType,
   setBinNumbers,
   sortSpecialClassesLast
 } from '.'
+import { hashObj } from '@cdc/core/helpers/hashObj'
 
 import _ from 'lodash'
 import * as d3 from 'd3'

package/src/helpers/generateRuntimeLegendHash.ts

@@ -1,4 +1,4 @@
-import { hashObj } from './hashObj'
+import { hashObj } from '@cdc/core/helpers/hashObj'
 import { MapConfig } from '../types/MapConfig'
 
 export const generateRuntimeLegendHash = (config: MapConfig, runtimeFilters) => {

package/src/helpers/index.ts

@@ -5,10 +5,8 @@ export { formatLegendLocation } from './formatLegendLocation'
 export { generateColorsArray } from '@cdc/core/helpers/generateColorsArray'
 export { generateRuntimeLegendHash } from './generateRuntimeLegendHash'
 export { getGeoStrokeColor, getGeoFillColor } from './colors'
-export { getUniqueValues } from './getUniqueValues'
 export { handleMapAriaLabels } from './handleMapAriaLabels'
 export { handleMapTabbing } from './handleMapTabbing'
-export { hashObj } from './hashObj'
 export { indexOfIgnoreType } from './indexOfIgnoreType'
 export { isLegendItemDisabled } from './isLegendItemDisabled'
 export { navigationHandler } from './navigationHandler'
@@ -19,4 +17,12 @@ export { titleCase as toTitleCase } from './toTitleCase'
 export { titleCase } from './titleCase'
 export { validateFipsCodeLength } from './validateFipsCodeLength'
 export { getMapContainerClasses } from './getMapContainerClasses'
-export { SVG_HEIGHT, SVG_WIDTH, SVG_PADDING, SVG_VIEWBOX, MAX_ZOOM_LEVEL, DEFAULT_MAP_BACKGROUND } from './constants'
+export {
+  SVG_HEIGHT,
+  SVG_WIDTH,
+  SVG_PADDING,
+  SVG_VIEWBOX,
+  MAX_ZOOM_LEVEL,
+  DEFAULT_MAP_BACKGROUND,
+  DISABLED_MAP_COLOR
+} from './constants'

package/src/helpers/isLegendItemDisabled.ts

@@ -1,4 +1,4 @@
-import { hashObj } from './hashObj'
+import { hashObj } from '@cdc/core/helpers/hashObj'
 
 export const isLegendItemDisabled = (
   dataForCheck: any,
@@ -12,5 +12,5 @@ export const isLegendItemDisabled = (
   if (!legendMemo.current.has(hash)) return false
   const idx = legendMemo.current.get(hash)
   const disabledIdx = config.legend.showSpecialClassesLast ? legendSpecialClassLastMemo.current.get(hash) ?? idx : idx
-  return runtimeLegend.items[disabledIdx]?.disabled || false
+  return runtimeLegend.items[disabledIdx]?.disabled || runtimeLegend.items[disabledIdx]?.hidden || false
 }

package/src/helpers/resetLegendToggles.ts

@@ -5,6 +5,7 @@ export const resetLegendToggles = (runtimeLegend, dispatch) => {
 
   legendCopy.items.forEach(legendItem => {
     delete legendItem.disabled
+    delete legendItem.hidden
   })
   legendCopy.disabledAmt = 0
 

package/src/helpers/tests/hashObj.test.ts

@@ -1,4 +1,4 @@
-import { hashObj } from '../hashObj'
+import { hashObj } from '@cdc/core/helpers/hashObj'
 
 describe('hashObj', () => {
   it('should return a hash value for a given object', () => {