@cdc/map 4.26.4 → 4.26.5

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

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+import { shouldAutoResetSingleStateZoom } from '../shouldAutoResetSingleStateZoom'
+
+describe('shouldAutoResetSingleStateZoom', () => {
+  it('returns false on the first runtime data load', () => {
+    expect(
+      shouldAutoResetSingleStateZoom({
+        isDashboard: true,
+        previousRuntimeDataHash: null,
+        nextRuntimeDataHash: 123,
+        hasDashboardFilters: true
+      })
+    ).toBe(false)
+  })
+
+  it('returns true when filtered dashboard runtime data changes after initial load', () => {
+    expect(
+      shouldAutoResetSingleStateZoom({
+        isDashboard: true,
+        previousRuntimeDataHash: 123,
+        nextRuntimeDataHash: 456,
+        hasDashboardFilters: true
+      })
+    ).toBe(true)
+  })
+
+  it('returns false when the runtime data hash is unchanged', () => {
+    expect(
+      shouldAutoResetSingleStateZoom({
+        isDashboard: true,
+        previousRuntimeDataHash: 123,
+        nextRuntimeDataHash: 123,
+        hasDashboardFilters: true
+      })
+    ).toBe(false)
+  })
+
+  it('returns false outside dashboards', () => {
+    expect(
+      shouldAutoResetSingleStateZoom({
+        isDashboard: false,
+        previousRuntimeDataHash: 123,
+        nextRuntimeDataHash: 456,
+        hasDashboardFilters: true
+      })
+    ).toBe(false)
+  })
+
+  it('returns false when map zoom is disabled', () => {
+    expect(
+      shouldAutoResetSingleStateZoom({
+        isDashboard: true,
+        previousRuntimeDataHash: 123,
+        nextRuntimeDataHash: 456,
+        hasDashboardFilters: true,
+        allowMapZoom: false
+      })
+    ).toBe(false)
+  })
+
+  it('returns false when dashboard filters are not present on the visualization', () => {
+    expect(
+      shouldAutoResetSingleStateZoom({
+        isDashboard: true,
+        previousRuntimeDataHash: 123,
+        nextRuntimeDataHash: 456,
+        hasDashboardFilters: false
+      })
+    ).toBe(false)
+  })
+})

package/src/hooks/useGeoClickHandler.ts

@@ -9,6 +9,9 @@ const useGeoClickHandler = () => {
     config: state,
     setConfig,
     setSharedFilter,
+    clearSharedFilter,
+    hasActiveSharedFilter,
+    setSharedFilterValue,
     customNavigationHandler,
     interactionLabel
   } = useContext(ConfigContext)
@@ -16,7 +19,16 @@ const useGeoClickHandler = () => {
 
   const geoClickHandler = (geoDisplayName: string, geoData: object): void => {
     if (setSharedFilter) {
-      setSharedFilter(state.uid, geoData)
+      // Get the column name for the filter (from dashboardFilters config)
+      const filterColumnName = state.dashboardFilters?.[0]?.columnName || state.columns?.geo?.name
+      const clickedValue = filterColumnName ? geoData[filterColumnName] : geoDisplayName
+
+      // Toggle behavior: if the clicked value matches the current filter value, clear it
+      if (hasActiveSharedFilter && setSharedFilterValue === clickedValue && clearSharedFilter) {
+        clearSharedFilter(state.uid)
+      } else {
+        setSharedFilter(state.uid, geoData)
+      }
     }
 
     // If world-geocode map zoom to geo point

package/src/hooks/useStateZoom.tsx

@@ -19,7 +19,7 @@ interface StateData {
 }
 
 const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
-  const { config, runtimeData, position, interactionLabel } = useContext<MapContext>(ConfigContext)
+  const { config, runtimeData, position, scale, translate, interactionLabel } = useContext<MapContext>(ConfigContext)
   const dispatch = useContext(MapDispatchContext)
 
   // Get statesPicked with memoization
@@ -72,8 +72,42 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
     return { projection, newProjection, stateCenter, bounds }
   }, [topoData, statesPicked])
 
+  const resetZoomState = useCallback(
+    ({ publishEvent = true }: { publishEvent?: boolean } = {}) => {
+      const nextCoordinates = projectionData.stateCenter
+      const alreadyAtDefaultPosition =
+        position.zoom === 1 &&
+        position.coordinates[0] === nextCoordinates[0] &&
+        position.coordinates[1] === nextCoordinates[1]
+      const alreadyAtDefaultTransform = scale === 1 && translate[0] === 0 && translate[1] === 0
+
+      if (alreadyAtDefaultPosition && alreadyAtDefaultTransform) return
+
+      dispatch({ type: 'SET_POSITION', payload: { coordinates: nextCoordinates, zoom: 1 } })
+      dispatch({ type: 'SET_TRANSLATE', payload: [0, 0] })
+      dispatch({ type: 'SET_SCALE', payload: 1 })
+
+      if (publishEvent) {
+        publishAnalyticsEvent({
+          vizType: 'map',
+          vizSubType: getVizSubType(config),
+          eventType: 'map_reset_zoom_level',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config)
+        })
+      }
+    },
+    [config, dispatch, interactionLabel, position, projectionData.stateCenter, scale, translate]
+  )
+
   const setScaleAndTranslate = useCallback(
     (zoomFunction: string = '') => {
+      if (zoomFunction === 'reset') {
+        resetZoomState()
+        return
+      }
+
       const _prevPosition = position
       let newZoom = _prevPosition.zoom
       let newCoordinates = _prevPosition.coordinates
@@ -98,27 +132,11 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
           _prevPosition.coordinates[0] !== 0 && _prevPosition.coordinates[1] !== 0
             ? _prevPosition.coordinates
             : projectionData.stateCenter
-      } else if (zoomFunction === 'reset') {
-        newZoom = 1
-        newCoordinates = projectionData.stateCenter
       }
 
       dispatch({ type: 'SET_POSITION', payload: { coordinates: newCoordinates, zoom: newZoom } })
-
-      if (zoomFunction === 'reset') {
-        dispatch({ type: 'SET_TRANSLATE', payload: [0, 0] }) // needed for state switcher
-        dispatch({ type: 'SET_SCALE', payload: 1 }) // needed for state switcher
-        publishAnalyticsEvent({
-          vizType: 'map',
-          vizSubType: getVizSubType(config),
-          eventType: 'map_reset_zoom_level',
-          eventAction: 'click',
-          eventLabel: interactionLabel,
-          vizTitle: getVizTitle(config)
-        })
-      }
     },
-    [position, projectionData.stateCenter, interactionLabel, dispatch]
+    [config, dispatch, interactionLabel, position, projectionData.stateCenter, resetZoomState]
   )
 
   // Essential fix: Remove config from dependencies to prevent infinite loops
@@ -165,9 +183,9 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
 
   const handleZoomReset = useCallback(
     _setRuntimeData => {
-      setScaleAndTranslate('reset')
+      resetZoomState()
     },
-    [setScaleAndTranslate]
+    [resetZoomState]
   )
 
   return {
@@ -178,6 +196,7 @@ const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
     handleZoomOut,
     handleMoveEnd,
     handleZoomReset,
+    resetZoomState,
     projection: projectionData.projection,
     bounds: projectionData.bounds
   }

package/src/hooks/useTooltip.test.tsx

@@ -1,10 +1,6 @@
 import { renderHook } from '@testing-library/react'
 import useTooltip from './useTooltip'
 
-const supportedStatesFipsCodes = {
-  '01': 'Alabama'
-}
-
 const createConfig = (hideGeoColumnInTooltip: boolean) => ({
   general: {
     geoType: 'world',
@@ -41,18 +37,8 @@ describe('useTooltip', () => {
   it('hides the geography column label in the tooltip body when configured', () => {
     const row = { Country: 'ssd', Value: 10 }
 
-    const { result: visibleResult } = renderHook(() =>
-      useTooltip({
-        config: createConfig(false),
-        supportedStatesFipsCodes
-      })
-    )
-    const { result: hiddenResult } = renderHook(() =>
-      useTooltip({
-        config: createConfig(true),
-        supportedStatesFipsCodes
-      })
-    )
+    const { result: visibleResult } = renderHook(() => useTooltip(createConfig(false) as any))
+    const { result: hiddenResult } = renderHook(() => useTooltip(createConfig(true) as any))
 
     const visibleTooltip = visibleResult.current.buildTooltip(row, 'South Sudan')
     const hiddenTooltip = hiddenResult.current.buildTooltip(row, 'South Sudan')

package/src/index.jsx

@@ -8,13 +8,16 @@ import CdcMap from './CdcMap'
 
 let isEditor = window.location.href.includes('editor=true')
 let domContainer = document.getElementsByClassName('react-container')[0]
+let configUrl = domContainer.dataset.configUrl
+let injectedConfig = domContainer.coveConfig
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
     <CdcMap
       isEditor={isEditor}
-      configUrl={domContainer.attributes['data-config'].value}
-      interactionLabel={domContainer.attributes['data-config'].value}
+      config={injectedConfig}
+      configUrl={injectedConfig ? undefined : configUrl}
+      interactionLabel={configUrl}
       containerEl={domContainer}
     />
   </React.StrictMode>

package/src/scss/main.scss

@@ -2,6 +2,7 @@
 @import 'editor-panel';
 @import '@cdc/core/styles/utils/accessibility';
 @import '@cdc/core/styles/layout/wrapper-padding';
+@import '@cdc/core/styles/layout/callout';
 
 .type-map--has-error {
   .waiting {
@@ -17,7 +18,7 @@
   position: relative;
   display: flex; // Needed for the main content
 
-  .loading>div.la-ball-beat {
+  .loading > div.la-ball-beat {
     margin-top: 20%;
   }
 
@@ -125,33 +126,17 @@
       background: transparent;
 
       .cdc-callout {
-        box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
-        border: 1px solid #dff2f6;
-        margin: 0;
-        padding: 1.25rem;
-        border-radius: 0.25rem;
-        position: relative;
-        background: transparent;
-
-        .cdc-callout__flag {
-          position: absolute;
-          top: -0.36rem;
-          right: 1.08rem;
-          width: 1.84rem;
-          height: auto;
-        }
+        --cdc-callout-background: transparent;
 
         .cove-visualization__title,
         .cove-visualization__header {
           background: transparent;
           border: 0;
-          color: var(--cool-gray-90, #1f2937);
           margin: 0 0 1rem;
           padding: 0;
           border-radius: 0;
 
           h2 {
-            color: var(--cool-gray-90, #1f2937);
             font-family: var(--fonts-nunito, var(--app-font-secondary));
             font-size: 1.1rem;
             font-weight: 700;
@@ -178,7 +163,7 @@
       flex-direction: column;
       row-gap: var(--cove-visualization-section-gap, 1.5rem);
 
-      >.legends {
+      > .legends {
         margin-top: var(--cove-visualization-section-gap, 1.5rem) !important;
       }
     }
@@ -271,7 +256,7 @@
     }
   }
 
-  .visualization-container.legend-wrapped-bottom>.legends,
+  .visualization-container.legend-wrapped-bottom > .legends,
   .legends.legend-wrapped-bottom {
     margin-top: var(--cove-visualization-section-gap, 1.5rem) !important;
   }
@@ -311,7 +296,7 @@
     label {
       flex-grow: 1;
 
-      >div.select-heading {
+      > div.select-heading {
         font-size: 1.1em;
         font-weight: 600;
         margin-bottom: 0.75em;

package/src/scss/map.scss

@@ -5,11 +5,13 @@
       flex-direction: row;
     }
   }
+
   .visualization-container.map {
     &.side {
       flex-direction: row;
     }
   }
+
   // Bubble Specific
   .visualization-container.bubble {
     &.side {
@@ -30,6 +32,7 @@ $medium: 768px;
 .single-geo {
   transition: 0.2s fill;
   cursor: pointer;
+
   &:focus {
     outline: 0;
   }
@@ -45,6 +48,20 @@ $medium: 768px;
   }
 }
 
+.svg-container,
+.county,
+.state-path,
+.bubble,
+.geo-point,
+.marker,
+.bubble *,
+.geo-point * {
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+}
+
 .territories-label {
   font-weight: 700;
 }
@@ -52,6 +69,7 @@ $medium: 768px;
 // Cities and Territories
 .territories {
   gap: 0.5em;
+
   svg {
     max-width: var(--territory-svg-max-width, 30px);
     min-width: var(--territory-svg-min-width, 30px);
@@ -60,6 +78,7 @@ $medium: 768px;
     text {
       font-size: var(--territory-label-font-size);
       font-weight: 900;
+
       @include breakpointClass(sm) {
         font-size: var(--territory-label-font-size-mobile);
       }
@@ -71,6 +90,7 @@ $medium: 768px;
   .zoom-controls > button:not(.reset) {
     height: 2.5em;
     width: 2.5em;
+
     svg {
       height: 2.5em;
       width: 2.5em;

package/src/types/MapConfig.ts

@@ -5,6 +5,7 @@ import { type Version } from '@cdc/core/types/Version'
 import { type VizFilter } from '@cdc/core/types/VizFilter'
 import { type Annotation } from '@cdc/core/types/Annotation'
 import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
+import { AltTextConfig } from '@cdc/core/types/AltText'
 
 // Runtime data types
 export type RuntimeFilters = VizFilter[] & { fromHash?: number }
@@ -110,6 +111,7 @@ export type SmallMultiples = {
 }
 
 export type MapConfig = Visualization & {
+  altText?: AltTextConfig
   annotations: Annotation[]
   // map color palette
   color: string
@@ -132,6 +134,7 @@ export type MapConfig = Visualization & {
     subtext: string
     introText: string
     allowMapZoom: boolean
+    showClearSelectionButton?: boolean
     convertFipsCodes: boolean
     displayAsHex: boolean
     displayStateLabels: boolean
@@ -226,6 +229,8 @@ export type MapConfig = Visualization & {
     forceDisplay: boolean
     indexLabel: string
     cellMinWidth: string
+    search?: boolean
+    searchPlaceholder?: string
   }
   tooltips: {
     appearanceType: 'hover' | 'click'

package/src/types/MapContext.ts

@@ -40,6 +40,9 @@ export type MapContext = {
   setParentConfig: Function
   setRuntimeData: Function
   setFilteredStateCountyCode: (stateCode: string, countyCode?: string) => void
+  setSharedFilter?: Function
+  clearSharedFilter?: (key: string) => void
+  hasActiveSharedFilter?: boolean
   setSharedFilterValue: Function
   setConfig: (newState: MapConfig) => MapConfig
   config: MapConfig