@cdc/map 4.25.7 → 4.25.10

package/src/hooks/useStateZoom.tsx

@@ -1,12 +1,13 @@
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useMemo, useCallback } from 'react'
 import ConfigContext, { MapDispatchContext } from '../context'
 import { geoAlbersUsaTerritories } from 'd3-composite-projections'
 import { MapContext } from '../types/MapContext'
 import { geoPath, GeoPath } from 'd3-geo'
-import { getFilterControllingStatePicked } from '../components/UsaMap/helpers/map'
+import { getFilterControllingStatesPicked } from '../components/UsaMap/helpers/map'
 import { supportedStatesFipsCodes } from '../data/supported-geos'
 import { SVG_HEIGHT, SVG_WIDTH, SVG_PADDING } from '../helpers'
-import _ from 'lodash'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 interface StateData {
   geometry: { type: 'MultiPolygon'; coordinates: number[][][][] }
@@ -18,116 +19,164 @@ interface StateData {
 }
 
 const useSetScaleAndTranslate = (topoData: { states: StateData[] }) => {
-  const { config, runtimeData, position } = useContext<MapContext>(ConfigContext)
-  const statePicked = getFilterControllingStatePicked(config, runtimeData)
+  const { config, runtimeData, position, interactionLabel } = useContext<MapContext>(ConfigContext)
   const dispatch = useContext(MapDispatchContext)
 
+  // Get statesPicked with memoization
+  const statesPicked = useMemo(() => {
+    const result = getFilterControllingStatesPicked(config, runtimeData)
+    if (!result) return []
+    if (!Array.isArray(result)) return [result]
+    return result
+  }, [config.general.statesPicked, runtimeData])
+
+  // Memoize expensive computations
+  const statesData = useMemo(() => {
+    return statesPicked.map(state => ({
+      fipsCode: Object.keys(supportedStatesFipsCodes).find(key => supportedStatesFipsCodes[key] === state),
+      stateName: state
+    }))
+  }, [statesPicked])
+
+  // Memoize projection calculations
+  const projectionData = useMemo(() => {
+    const projection = geoAlbersUsaTerritories()
+      .translate([SVG_WIDTH / 2, SVG_HEIGHT / 2])
+      .scale(1)
+
+    const _statesPickedData = topoData?.states?.filter(s => statesPicked.includes(s.properties.name))
+
+    const combinedData = _statesPickedData?.length
+      ? {
+          type: 'FeatureCollection',
+          features: _statesPickedData
+        }
+      : null
+
+    const newProjection = combinedData
+      ? projection.fitExtent(
+          [
+            [SVG_PADDING, SVG_PADDING],
+            [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
+          ],
+          combinedData
+        )
+      : projection
+
+    const path: GeoPath = geoPath().projection(projection)
+    const featureCenter = combinedData ? path.centroid(combinedData as any) : [0, 0]
+    const stateCenter = newProjection.invert(featureCenter)
+
+    return { projection, newProjection, stateCenter }
+  }, [topoData, statesPicked])
+
+  const setScaleAndTranslate = useCallback(
+    (zoomFunction: string = '') => {
+      const _prevPosition = config.mapPosition
+      let newZoom = _prevPosition.zoom
+      let newCoordinates = _prevPosition.coordinates
+      if (zoomFunction === 'zoomIn' && _prevPosition.zoom < 4) {
+        newZoom = _prevPosition.zoom * 1.5
+        newCoordinates =
+          _prevPosition.coordinates[0] !== 0 && _prevPosition.coordinates[1] !== 0
+            ? _prevPosition.coordinates
+            : projectionData.stateCenter
+        publishAnalyticsEvent({
+          vizType: 'map',
+          vizSubType: getVizSubType(config),
+          eventType: 'zoom_in',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config),
+          specifics: `zoom: ${newZoom}, coordinates:${newCoordinates}`
+        })
+      } else if (zoomFunction === 'zoomOut' && _prevPosition.zoom > 1) {
+        newZoom = _prevPosition.zoom / 1.5
+        newCoordinates =
+          _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)
+        })
+      }
+    },
+    [config.mapPosition, projectionData.stateCenter, interactionLabel, dispatch]
+  )
+
+  // Essential fix: Remove config from dependencies to prevent infinite loops
   useEffect(() => {
-    const fipsCode = Object.keys(supportedStatesFipsCodes).find(key => supportedStatesFipsCodes[key] === statePicked)
-    const stateName = statePicked
-    const stateData = { fipsCode, stateName }
-    const newConfig = _.cloneDeep(config)
-    newConfig.general.statePicked = stateData
-    const stateToShow = topoData?.states?.find(s => s.properties.name === statePicked)
+    if (!topoData) return
 
     dispatch({ type: 'SET_SCALE', payload: 1 })
     dispatch({ type: 'SET_TRANSLATE', payload: [0, 0] })
-    dispatch({ type: 'SET_CONFIG', payload: newConfig })
-    dispatch({ type: 'SET_STATE_TO_SHOW', payload: stateToShow })
-  }, [topoData])
+    dispatch({ type: 'SET_STATES_TO_SHOW', payload: statesPicked })
+  }, [topoData, statesPicked, dispatch])
 
   useEffect(() => {
-    const fipsCode = Object.keys(supportedStatesFipsCodes).find(key => supportedStatesFipsCodes[key] === statePicked)
-    const stateName = statePicked
-    const stateData = { fipsCode, stateName }
-    const newConfig = _.cloneDeep(config)
-    newConfig.general.statePicked = stateData
-    dispatch({ type: 'SET_CONFIG', payload: newConfig })
-    setScaleAndTranslate('reset')
-  }, [statePicked])
-
-  // TODO: same as city list projection?
-  const projection = geoAlbersUsaTerritories()
-    .translate([SVG_WIDTH / 2, SVG_HEIGHT / 2])
-    .scale(1)
-
-  const _statePickedData = topoData?.states?.find(s => s.properties.name === statePicked)
-  const newProjection = projection.fitExtent(
-    [
-      [SVG_PADDING, SVG_PADDING],
-      [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
-    ],
-    _statePickedData
-  )
+    const currentStatesPicked = config.general.statesPicked?.map(state => state.stateName) || []
 
-  // Work for centering the state.
-  let [x, y] = newProjection.translate()
-  x = x - SVG_WIDTH / 2
-  y = y - SVG_HEIGHT / 2
+    const alreadySet =
+      currentStatesPicked.length === statesPicked.length &&
+      currentStatesPicked.every((s: string) => statesPicked.includes(s))
 
-  const path: GeoPath = geoPath().projection(projection)
-  const featureCenter = path.centroid(_statePickedData)
-  const stateCenter = newProjection.invert(featureCenter)
+    if (alreadySet) return
 
-  const switchState = () => {
-    dispatch({ type: 'SET_STATE_TO_SHOW', payload: _statePickedData })
-    setScaleAndTranslate('reset')
-  }
+    const newConfig = { ...config }
+    newConfig.general = { ...config.general, statesPicked: statesData }
+    dispatch({ type: 'SET_CONFIG', payload: newConfig })
+  }, [statesPicked, statesData, dispatch])
 
-  const setScaleAndTranslate = (zoomFunction: string = '') => {
-    const _prevPosition = position
-    let newZoom = _prevPosition.zoom
-    let newCoordinates = _prevPosition.coordinates
-    if (zoomFunction === 'zoomIn' && _prevPosition.zoom < 4) {
-      newZoom = _prevPosition.zoom * 1.5
-      newCoordinates =
-        _prevPosition.coordinates[0] !== 0 && _prevPosition.coordinates[1] !== 0
-          ? _prevPosition.coordinates
-          : stateCenter
-    } else if (zoomFunction === 'zoomOut' && _prevPosition.zoom > 1) {
-      newZoom = _prevPosition.zoom / 1.5
-      newCoordinates =
-        _prevPosition.coordinates[0] !== 0 && _prevPosition.coordinates[1] !== 0
-          ? _prevPosition.coordinates
-          : stateCenter
-    } else if (zoomFunction === 'reset') {
-      newZoom = 1
-      newCoordinates = 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
-    }
-  }
+  const switchState = useCallback(() => {
+    dispatch({ type: 'SET_STATES_TO_SHOW', payload: statesPicked })
+  }, [statesPicked, setScaleAndTranslate, dispatch])
 
-  const handleZoomIn = () => {
+  const handleZoomIn = useCallback(() => {
     setScaleAndTranslate('zoomIn')
-  }
+  }, [setScaleAndTranslate])
 
-  const handleZoomOut = () => {
+  const handleZoomOut = useCallback(() => {
     setScaleAndTranslate('zoomOut')
-  }
+  }, [setScaleAndTranslate])
 
-  const handleMoveEnd = position => {
-    dispatch({ type: 'SET_POSITION', payload: position })
-  }
+  const handleMoveEnd = useCallback(
+    position => {
+      dispatch({ type: 'SET_POSITION', payload: position })
+    },
+    [dispatch]
+  )
 
-  const handleReset = () => {
-    setScaleAndTranslate('reset')
-  }
+  const handleZoomReset = useCallback(
+    _setRuntimeData => {
+      setScaleAndTranslate('reset')
+    },
+    [setScaleAndTranslate]
+  )
 
   return {
-    statePicked,
+    statesPicked,
     setScaleAndTranslate,
     switchState,
     handleZoomIn,
     handleZoomOut,
     handleMoveEnd,
-    handleReset,
-    projection
+    handleZoomReset,
+    projection: projectionData.projection
   }
 }
 

package/src/hooks/useTooltip.ts

@@ -1,10 +1,9 @@
-import { displayDataAsText } from '../../../core/helpers/displayDataAsText'
+import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
 import { displayGeoName } from '../helpers/displayGeoName'
 
 const useTooltip = props => {
   const { config, supportedStatesFipsCodes } = props
 
-
   /**
    * On county maps there's a need to append the state name
    * @param {String} toolTipText - previous tooltip text to build upon

package/src/index.jsx

@@ -2,8 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import '@cdc/core/styles/cove-main.scss'
-import 'react-tooltip/dist/react-tooltip.css'
-import './coreStyles_map.scss'
 
 import CdcMap from './CdcMap'
 
@@ -12,6 +10,11 @@ let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcMap isEditor={isEditor} configUrl={domContainer.attributes['data-config'].value} containerEl={domContainer} />
+    <CdcMap
+      isEditor={isEditor}
+      configUrl={domContainer.attributes['data-config'].value}
+      interactionLabel={domContainer.attributes['data-config'].value}
+      containerEl={domContainer}
+    />
   </React.StrictMode>
 )

package/src/scss/main.scss

@@ -15,7 +15,8 @@
 .cdc-map-outer-container {
   position: relative;
   display: flex; // Needed for the main content
-  .loading > div.la-ball-beat {
+
+  .loading>div.la-ball-beat {
     margin-top: 20%;
   }
 
@@ -52,12 +53,14 @@
     &.bottom {
       flex-direction: column;
     }
+
     &.top {
       flex-direction: column-reverse;
     }
 
     &.modal-background {
       position: relative;
+
       &::before {
         content: ' ';
         position: absolute;
@@ -65,6 +68,7 @@
         bottom: 0;
         z-index: 7;
       }
+
       .modal-content {
         background: #fff;
         position: absolute;
@@ -80,8 +84,10 @@
         padding: 16px 40px;
         min-width: 250px;
         width: auto;
-        max-height: 90vh; /* Constrain the modal's height to 90% of the viewport */
-        overflow-y: auto; /* Enable vertical scrolling if content overflows */
+        max-height: 90vh;
+        /* Constrain the modal's height to 90% of the viewport */
+        overflow-y: auto;
+        /* Enable vertical scrolling if content overflows */
         font-size: 1rem;
         line-height: 1.4em;
       }
@@ -122,16 +128,15 @@
         margin-left: 0.5em;
       }
 
-      .modal-content.capitalize p {
-        text-transform: capitalize;
-      }
-
       /* Responsive adjustments for smaller screens */
       @media (max-width: 1048px) {
         .modal-content {
-          width: 90%; /* Adjust width to fit smaller screens */
-          top: 10%; /* Offset from the top for better usability */
-          transform: translate(-50%, 0); /* Remove vertical centering */
+          width: 90%;
+          /* Adjust width to fit smaller screens */
+          top: 10%;
+          /* Offset from the top for better usability */
+          transform: translate(-50%, 0);
+          /* Remove vertical centering */
         }
       }
     }
@@ -141,6 +146,7 @@
     em {
       font-style: italic;
     }
+
     strong {
       font-weight: bold;
     }
@@ -167,25 +173,30 @@
     z-index: 6;
     width: 100%;
     border-top: var(--lightGray) 1px solid;
+
     label {
       flex-grow: 1;
-      > div.select-heading {
+
+      >div.select-heading {
         font-size: 1.1em;
         font-weight: 600;
         margin-bottom: 0.75em;
       }
     }
+
     form {
       max-width: 400px;
       display: flex;
       align-items: flex-end;
     }
+
     select {
       font-size: 1.2em;
       display: inline-block;
       vertical-align: top;
       width: 100%;
     }
+
     input {
       color: #fff;
       font-weight: 700;
@@ -202,4 +213,4 @@
   [tabIndex]:focus {
     outline-color: rgb(0, 95, 204);
   }
-}
+}

package/src/store/map.actions.ts

@@ -20,7 +20,7 @@ type SET_RUNTIME_DATA = Action<'SET_RUNTIME_DATA', RuntimeData>
 type SET_RUNTIME_FILTERS = Action<'SET_RUNTIME_FILTERS', VizFilter[]>
 type SET_RUNTIME_LEGEND = Action<'SET_RUNTIME_LEGEND', GeneratedLegend | []>
 type SET_SCALE = Action<'SET_SCALE', number>
-type SET_STATE_TO_SHOW = Action<'SET_STATE_TO_SHOW', string>
+type SET_STATES_TO_SHOW = Action<'SET_STATES_TO_SHOW', string[]>
 type SET_TOPO_DATA = Action<'SET_TOPO_DATA', any>
 type SET_TRANSLATE = Action<'SET_TRANSLATE', [number, number]>
 
@@ -39,7 +39,7 @@ export type MapActions =
   | SET_RUNTIME_FILTERS
   | SET_RUNTIME_LEGEND
   | SET_SCALE
-  | SET_STATE_TO_SHOW
+  | SET_STATES_TO_SHOW
   | SET_TOPO_DATA
   | SET_TRANSLATE
 

package/src/store/map.reducer.ts

@@ -1,13 +1,24 @@
-import { MapConfig } from '../types/MapConfig'
+import { MapConfig, RuntimeFilters } from '../types/MapConfig'
 import MapActions from './map.actions'
 import defaults from './../data/initial-state'
 import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
 import _ from 'lodash'
+import { Modal } from '../types/Modal'
+import { GeneratedLegend } from '../helpers/generateRuntimeLegend'
+import { RuntimeData } from '../types/RuntimeData'
 
 export const getInitialState = (configObj = {}): MapState => {
+  // Create defaults without palette version to avoid overriding legacy configs
+  const defaultsWithoutPaletteaName = { ...defaults }
+
+  // Only apply palette defaults if the loaded config explicitly has general.palette
+  // if (!configObj?.general?.palette?.name) {
+  //   delete defaultsWithoutPaletteaName.general?.palette.name
+  // }
+
   return {
     dataUrl: configObj.dataUrl || '',
-    config: _.merge({}, defaults, configObj),
+    config: _.merge({}, defaultsWithoutPaletteaName, configObj),
     loading: false,
     accessibleStatus: '',
     coveLoadedHasRan: false,
@@ -24,7 +35,7 @@ export const getInitialState = (configObj = {}): MapState => {
     runtimeData: { init: true },
     runtimeFilters: [],
     runtimeLegend: [],
-    stateToShow: ''
+    statesToShow: []
   }
 }
 
@@ -42,11 +53,11 @@ export type MapState = {
   projection: object | null
   requiredColumns: string[]
   scale: number
-  modal: object | null
-  runtimeData: object
-  runtimeFilters: object[]
-  runtimeLegend: object[]
-  stateToShow: string
+  modal: Modal | null
+  runtimeData: RuntimeData | { init: boolean }
+  runtimeFilters: RuntimeFilters
+  runtimeLegend: GeneratedLegend | []
+  statesToShow: string[]
   dataUrl: string
 }
 
@@ -84,8 +95,8 @@ const reducer = (state: MapState, action: MapActions): MapState => {
       return { ...state, runtimeFilters: action.payload }
     case 'SET_RUNTIME_LEGEND':
       return { ...state, runtimeLegend: action.payload }
-    case 'SET_STATE_TO_SHOW':
-      return { ...state, stateToShow: action.payload }
+    case 'SET_STATES_TO_SHOW':
+      return { ...state, statesToShow: action.payload }
     default:
       return state
   }

package/src/test/CdcMap.test.jsx

@@ -0,0 +1,11 @@
+import path from 'path'
+import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
+import { describe, it, expect } from 'vitest'
+
+describe('Map', () => {
+  it('Can be built in isolation', async () => {
+    const pkgDir = path.join(__dirname, '..')
+    const result = testStandaloneBuild(pkgDir)
+    expect(result).toBe(true)
+  })
+})

package/src/types/MapConfig.ts

@@ -3,6 +3,10 @@ import { type Visualization } from '@cdc/core/types/Visualization'
 import { type EditorColumnProperties } from '@cdc/core/types/EditorColumnProperties'
 import { type Version } from '@cdc/core/types/Version'
 import { type VizFilter } from '@cdc/core/types/VizFilter'
+import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
+
+// Runtime data types
+export type RuntimeFilters = VizFilter[] & { fromHash?: number }
 
 export type MapVisualSettings = {
   /** minBubbleSize - Minimum Circle Size when the map has a type of bubble */
@@ -38,14 +42,19 @@ export type PatternSelection = {
   contrastCheck: boolean
 }
 
-export type GeoColumnProperties = Pick<EditorColumnProperties, 'name' | 'label' | 'tooltip' | 'dataTable'>
-export type LatitudeColumnProperties = Pick<EditorColumnProperties, 'name'>
-export type LongitudeColumnProperties = Pick<EditorColumnProperties, 'name'>
-export type NavigateColumnProperties = Pick<EditorColumnProperties, 'name'>
-export type PrimaryColumnProperties = Pick<
-  EditorColumnProperties,
-  'dataTable' | 'label' | 'name' | 'prefix' | 'suffix' | 'tooltip'
->
+// Base column properties with name required, all others optional
+export type BaseColumnProperties = Pick<EditorColumnProperties, 'name'> &
+  Partial<Pick<EditorColumnProperties, 'label' | 'tooltip' | 'dataTable' | 'prefix' | 'suffix'>>
+
+// Simple column type for name-only columns
+export type SimpleColumnProperties = Pick<EditorColumnProperties, 'name'>
+
+// Specific column types for better semantics
+export type GeoColumnProperties = BaseColumnProperties
+export type LatitudeColumnProperties = SimpleColumnProperties
+export type LongitudeColumnProperties = SimpleColumnProperties
+export type NavigateColumnProperties = SimpleColumnProperties
+export type PrimaryColumnProperties = BaseColumnProperties
 
 export type LegendShapeItem = {
   column: string
@@ -70,15 +79,13 @@ export type Coordinate = [number, number]
 
 export type DataRow = {
   uid?: string // optional 'uid' property
-  [key: string]: any // allowing any additional properties with a dynamic key (e.g., for `configPrimaryName`)
+  [key: string]: string | number | boolean | null | undefined // allowing primitive data types for dynamic columns
 }
 
 export type MapConfig = Visualization & {
   annotations: Annotation[]
   // map color palette
   color: string
-  // custom color palette
-  customColors: string[]
   columns: {
     geo: GeoColumnProperties
     primary: PrimaryColumnProperties
@@ -93,6 +100,7 @@ export type MapConfig = Visualization & {
   filters: VizFilter[]
   general: {
     navigationTarget: '_self' | '_blank'
+    noDataMessage: string // single-state no data message
     subtext: string
     introText: string
     allowMapZoom: boolean
@@ -121,16 +129,19 @@ export type MapConfig = Visualization & {
     language: string
     palette: {
       isReversed: boolean
+      name: string
+      version: string
+      customColors?: string[]
     }
     showDownloadMediaButton: boolean
     showDownloadImgButton: boolean
     showDownloadPdfButton: boolean
     showSidebar: boolean
     showTitle: boolean
-    statePicked: {
+    statesPicked: {
       fipsCode: string
       stateName: string
-    }
+    }[]
     territoriesAlwaysShow: boolean
     territoriesLabel: string
     title: string
@@ -176,13 +187,10 @@ export type MapConfig = Visualization & {
   tooltips: {
     appearanceType: 'hover' | 'click'
     linkLabel: string
-    capitalizeLabels: boolean
     opacity: number
   }
   runtime: {
     editorErrorMessage: string[]
-    // when a single state map doesn't include a fips code show a message...
-    noStateFoundMessage: string
   }
   mapPosition: { coordinates: Coordinate; zoom: number }
   map: {
@@ -197,4 +205,4 @@ export type MapConfig = Visualization & {
   type: 'map'
   // version of the map
   version: Version
-}
+} & MarkupConfig

package/src/types/MapContext.ts

@@ -2,12 +2,10 @@ import { DataRow, type MapConfig } from './MapConfig'
 import { type ViewPort } from '@cdc/core/types/ViewPort'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { VizFilter } from '@cdc/core/types/VizFilter'
-import { type RefObject } from 'react'
 
 export type MapContext = {
   currentViewport: ViewPort
   content: { geoName: string; keyedData: Record<string, any> }
-  data: DataRow[]
   dimensions: DimensionsType
   displayDataAsText: string | number
   displayGeoName: (key: string, convertFipsCodes: boolean) => string
@@ -22,7 +20,6 @@ export type MapContext = {
   handleCircleClick: Function
   handleDragStateChange: Function
   isDraggingAnnotation: boolean
-  innerContainerRef: RefObject<HTMLDivElement>
   isDashboard: boolean
   isEditor: boolean
   isFilterValueSupported: boolean
@@ -32,21 +29,18 @@ export type MapContext = {
   position: 'side' | 'top' | 'bottom'
   resetLegendToggles: Function
   runtimeFilters: Function
-  legendMemo: Function
-  legendSpecialClassLastMemo: Function
   runtimeLegend
   setParentConfig: Function
   setRuntimeData: Function
-  setRuntimeFilters: Function
-  setRuntimeLegend: Function
   setSharedFilterValue: Function
   setConfig: (newState: MapConfig) => MapConfig
   config: MapConfig
   viewport: ViewPort
-  stateToShow: string
+  statesToShow: string[]
   scale: number
   translate: [number, number]
   topoData: object
   runtimeData: Object[]
   tooltipId: string
+  interactionLabel?: string
 }