@cdc/map 4.25.7 → 4.25.10

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

@@ -1,4 +1,4 @@
-import { useEffect, memo, useContext } from 'react'
+import { useEffect, memo, useContext, useMemo } from 'react'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { geoPath } from 'd3-geo'
 import { CustomProjection } from '@visx/geo'
@@ -24,7 +24,7 @@ import { getTopoData, getCurrentTopoYear, isTopoReady } from '../helpers/map'
 import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
 import { SVG_WIDTH, SVG_HEIGHT, SVG_PADDING, SVG_VIEWBOX } from '../../../helpers'
 import _ from 'lodash'
-import { getStatePicked } from '../../../helpers/getStatePicked'
+import { getStatesPicked } from '../../../helpers/getStatesPicked'
 
 const SingleStateMap: React.FC = () => {
   const {
@@ -41,9 +41,18 @@ const SingleStateMap: React.FC = () => {
   } = useContext<MapContext>(ConfigContext)
 
   const dispatch = useContext(MapDispatchContext)
-  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleReset, projection } = useStateZoom(topoData)
-  const statePicked = getStatePicked(config, runtimeData)
-  const stateToShow = topoData?.states?.find(s => s.properties.name === statePicked.stateName)
+  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleZoomReset, projection } = useStateZoom(topoData)
+
+  // Memoize statesPicked to prevent creating new arrays on every render
+  const statesPicked = useMemo(() => {
+    return getStatesPicked(config, runtimeData)
+  }, [
+    config.general.statesPicked?.length,
+    config.general.statesPicked?.[0]?.stateName
+    // Don't include runtimeData as it causes excessive re-renders
+  ])
+
+  const statesToShow = topoData?.states?.find(s => statesPicked.map(sp => sp.stateName).includes(s.properties.name))
 
   const { geoClickHandler } = useGeoClickHandler()
 
@@ -72,8 +81,8 @@ const SingleStateMap: React.FC = () => {
   }
 
   const checkForNoData = () => {
-    // If no statePicked, return true
-    if (!statePicked.fipsCode) return true
+    // If no statesPicked, return true
+    if (statesPicked?.every(sp => !sp.fipsCode)) return true
   }
 
   // Constructs and displays markup for all geos on the map (except territories right now)
@@ -81,17 +90,6 @@ const SingleStateMap: React.FC = () => {
     const counties = geographies[0].feature.counties
 
     let geosJsx = []
-
-    // Push config lines
-    geosJsx.push(
-      // prettier-ignore
-      <SingleState.StateOutput
-        topoData={topoData}
-        path={path}
-        scale={scale}
-      />
-    )
-
     // Push county lines
     geosJsx.push(
       // prettier-ignore
@@ -103,6 +101,16 @@ const SingleStateMap: React.FC = () => {
         path={path}
       />
     )
+    // Push config lines
+    geosJsx.push(
+      // prettier-ignore
+      <SingleState.StateOutput
+        topoData={topoData}
+        path={path}
+        scale={scale}
+        runtimeData={runtimeData}
+      />
+    )
 
     // Push city list
     geosJsx.push(
@@ -121,7 +129,7 @@ const SingleStateMap: React.FC = () => {
   }
   return (
     <ErrorBoundary component='SingleStateMap'>
-      {statePicked && config.general.allowMapZoom && statePicked.fipsCode && (
+      {!!statesPicked.length && config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
         <svg
           viewBox={SVG_VIEWBOX}
           preserveAspectRatio='xMinYMin'
@@ -150,7 +158,9 @@ const SingleStateMap: React.FC = () => {
               data={[
                 {
                   states: topoData?.states,
-                  counties: topoData.counties.filter(c => c.id.substring(0, 2) === statePicked.fipsCode)
+                  counties: topoData.counties.filter(c =>
+                    statesPicked.map(sp => sp.fipsCode).includes(c.id.substring(0, 2))
+                  )
                 }
               ]}
               projection={geoAlbersUsaTerritories}
@@ -159,7 +169,7 @@ const SingleStateMap: React.FC = () => {
                   [SVG_PADDING, SVG_PADDING],
                   [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
                 ],
-                stateToShow
+                statesToShow
               ]}
             >
               {({ features, projection }) => {
@@ -182,7 +192,7 @@ const SingleStateMap: React.FC = () => {
           </ZoomableGroup>
         </svg>
       )}
-      {statePicked && !config.general.allowMapZoom && statePicked.fipsCode && (
+      {!!statesPicked && !config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
         <svg
           viewBox={SVG_VIEWBOX}
           preserveAspectRatio='xMinYMin'
@@ -201,7 +211,9 @@ const SingleStateMap: React.FC = () => {
             data={[
               {
                 states: topoData?.states,
-                counties: topoData.counties.filter(c => c.id.substring(0, 2) === statePicked.fipsCode)
+                counties: topoData.counties.filter(c =>
+                  statesPicked.map(sp => sp.fipsCode).includes(c.id.substring(0, 2))
+                )
               }
             ]}
             projection={geoAlbersUsaTerritories}
@@ -210,7 +222,7 @@ const SingleStateMap: React.FC = () => {
                 [SVG_PADDING, SVG_PADDING],
                 [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
               ],
-              stateToShow
+              statesToShow
             ]}
           >
             {({ features }) => {
@@ -250,7 +262,7 @@ const SingleStateMap: React.FC = () => {
             fontSize={18}
             style={{ fontSize: '28px', height: '18px' }}
           >
-            {config.general.noStateFoundMessage}
+            {config.general.noDataMessage}
           </Text>
         </svg>
       )}
@@ -258,7 +270,7 @@ const SingleStateMap: React.FC = () => {
         // prettier-ignore
         handleZoomIn={handleZoomIn}
         handleZoomOut={handleZoomOut}
-        handleReset={handleReset}
+        handleZoomReset={handleZoomReset}
       />
     </ErrorBoundary>
   )

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

@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useContext, useRef } from 'react'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 // United States Topojson resources
 import hexTopoJSON from '../data/us-hex-topo.json'
@@ -20,6 +22,7 @@ import Annotation from '../../Annotation'
 import Territory from './Territory'
 
 import ConfigContext, { MapDispatchContext } from '../../../context'
+import { useLegendMemoContext } from '../../../context/LegendMemoContext'
 import { MapContext } from '../../../types/MapContext'
 import { checkColorContrast, getContrastColor, outlinedTextColor } from '@cdc/core/helpers/cove/accessibility'
 import TerritoriesSection from './TerritoriesSection'
@@ -69,20 +72,21 @@ const nudges = {
 
 const UsaMap = () => {
   const {
-    data,
+    runtimeData,
     setSharedFilterValue,
     config,
     setConfig,
     tooltipId,
     mapId,
     logo,
-    legendMemo,
-    legendSpecialClassLastMemo,
     currentViewport,
     translate,
-    runtimeLegend
+    runtimeLegend,
+    interactionLabel
   } = useContext<MapContext>(ConfigContext)
 
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
+
   let isFilterValueSupported = false
   const { general, columns, tooltips, hexMap, map, annotations } = config
   const { displayAsHex } = general
@@ -120,14 +124,14 @@ const UsaMap = () => {
 
   const legendMemoUpdated = focusedStates?.every(geo => {
     const geoKey = geo.properties.iso
-    const geoData = data[geoKey]
+    const geoData = runtimeData[geoKey]
     const hash = hashObj(geoData)
     return legendMemo.current.has(hash)
   })
 
   // we use dataRef so that we can use the old data when legendMemo has not been updated yet
   // prevents flickering of the map when filter is changed
-  if (legendMemoUpdated) dataRef.current = data
+  if (legendMemoUpdated) dataRef.current = runtimeData
 
   useEffect(() => {
     const fetchData = async () => {
@@ -153,10 +157,10 @@ const UsaMap = () => {
       setTerritoriesData(territoriesKeys)
     } else {
       // Territories need to show up if they're in the data at all, not just if they're "active". That's why this is different from Cities
-      const territoriesList = territoriesKeys.filter(key => data?.[key])
+      const territoriesList = territoriesKeys.filter(key => runtimeData?.[key])
       setTerritoriesData(territoriesList)
     }
-  }, [data, dataRef.current, general.territoriesAlwaysShow])
+  }, [runtimeData, dataRef.current, general.territoriesAlwaysShow])
 
   const geoStrokeColor = getGeoStrokeColor(config)
   const geoFillColor = getGeoFillColor(config)
@@ -164,7 +168,7 @@ const UsaMap = () => {
   const territories = territoriesData.map((territory, territoryIndex) => {
     const Shape = displayAsHex ? Territory.Hexagon : Territory.Rectangle
 
-    const territoryData = data?.[territory]
+    const territoryData = runtimeData?.[territory]
 
     let toolTip
 
@@ -290,7 +294,7 @@ const UsaMap = () => {
 
       if (!geoKey) return
 
-      const geoData = data?.[geoKey]
+      const geoData = runtimeData?.[geoKey]
 
       let legendColors
 
@@ -440,6 +444,20 @@ const UsaMap = () => {
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={tooltip}
               tabIndex={-1}
+              onMouseEnter={() => {
+                // Track hover analytics event if this is a new location
+                const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `map_hover`,
+                  eventAction: 'hover',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  location: geoDisplayName,
+                  specifics: `location: ${locationName?.toLowerCase()}`
+                })
+              }}
             >
               {/* state path */}
               <path tabIndex={-1} className='single-geo' strokeWidth={1} d={path} />

package/src/components/UsaMap/helpers/map.ts

@@ -96,16 +96,24 @@ export const hasMoreThanFromHash = (data: { [key: string]: any }): boolean => {
   return otherKeys.length > 0
 }
 
-export const getFilterControllingStatePicked = (state, runtimeData) => {
-  if (!state.general.filterControlsStatePicked || !runtimeData) {
-    const statePicked = state?.general?.statePicked?.stateName
-    return statePicked
+export const getFilterControllingStatesPicked = (state, runtimeData): string[] => {
+  if (!state.general.filterControlsStatesPicked || !runtimeData) {
+    return state?.general?.statesPicked?.map(sp => sp.stateName) || []
   } else {
     if (hasMoreThanFromHash(runtimeData)) {
-      let statePickedFromFilter = Object.values(runtimeData)?.map(s => s[state.general.filterControlsStatePicked])?.[0]
-      const statePicked = statePickedFromFilter || state.general.statePicked.stateName || 'Alabama'
-      return statePicked
+      let statesPickedFromFilter = Object.values(runtimeData)?.map(
+        s => s[state.general.filterControlsStatesPicked]
+      )?.[0]
+
+      // Only need to check if filter result is an array since it could be a single value
+      if (Array.isArray(statesPickedFromFilter)) {
+        return statesPickedFromFilter
+      } else if (statesPickedFromFilter) {
+        return [statesPickedFromFilter]
+      } else {
+        return state?.general?.statesPicked?.map(sp => sp.stateName) || []
+      }
     }
-    return null
+    return state?.general?.statesPicked?.map(sp => sp.stateName) || []
   }
 }

package/src/components/WorldMap/WorldMap.tsx

@@ -3,6 +3,7 @@ import { geoMercator } from 'd3-geo'
 import { Mercator } from '@visx/geo'
 import { feature } from 'topojson-client'
 import ConfigContext, { MapDispatchContext } from '../../context'
+import { useLegendMemoContext } from '../../context/LegendMemoContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ZoomableGroup from '../ZoomableGroup'
 import Geo from '../Geo'
@@ -27,22 +28,24 @@ import generateRuntimeData from '../../helpers/generateRuntimeData'
 import { applyLegendToRow } from '../../helpers/applyLegendToRow'
 
 import './worldMap.styles.css'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 let projection = geoMercator()
 
 const WorldMap = () => {
   // prettier-ignore
   const {
-    data,
+    runtimeData,
     position,
-    setRuntimeData,
     config,
     tooltipId,
     runtimeLegend,
-    legendMemo,
-    legendSpecialClassLastMemo,
+    interactionLabel
   } = useContext(ConfigContext)
 
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
+
   const { type, allowMapZoom } = config.general
 
   const [world, setWorld] = useState(null)
@@ -63,23 +66,97 @@ const WorldMap = () => {
     return <></>
   }
 
-  const handleReset = () => {
+  const handleFiltersReset = () => {
     const newRuntimeData = generateRuntimeData(config)
-    dispatch({ type: 'SET_POSITION', payload: { coordinates: [0, 30], zoom: 1 } })
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_filter_reset',
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config)
+    })
     dispatch({ type: 'SET_FILTERED_COUNTRY_CODE', payload: '' })
-    setRuntimeData(newRuntimeData)
+    dispatch({ type: 'SET_RUNTIME_DATA', payload: newRuntimeData })
+  }
+
+  const handleZoomReset = _setRuntimeData => {
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_reset_zoom_level',
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config)
+    })
+    dispatch({ type: 'SET_POSITION', payload: { coordinates: [0, 30], zoom: 1 } })
   }
+
   const handleZoomIn = position => {
     if (position.zoom >= 4) return
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: `zoom_in`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `zoom_level: ${Math.floor(position.zoom * 1.5)}`
+    })
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: `zoom_in`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `location: ${position.coordinates}`
+    })
     dispatch({ type: 'SET_POSITION', payload: { coordinates: position.coordinates, zoom: position.zoom * 1.5 } })
   }
 
   const handleZoomOut = position => {
     if (position.zoom <= 1) return
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: `zoom_out`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `zoom_level: ${Math.floor(position.zoom / 1.5)}`
+    })
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: `zoom_out`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `location: ${position.coordinates}`
+    })
     dispatch({ type: 'SET_POSITION', payload: { coordinates: position.coordinates, zoom: position.zoom / 1.5 } })
   }
 
   const handleMoveEnd = position => {
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_panned',
+      eventAction: 'drag',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `zoom: ${position.zoom}`
+    })
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_panned',
+      eventAction: 'drag',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `coordinates: ${position.coordinates}`
+    })
     dispatch({ type: 'SET_POSITION', payload: position })
   }
 
@@ -88,7 +165,7 @@ const WorldMap = () => {
       // If the geo.properties.config value is found in the data use that, otherwise fall back to geo.properties.iso
       const dataHasStateName = config.data.some(d => d[config.columns.geo.name] === geo.properties.state)
       const geoKey =
-        geo.properties.state && data[geo.properties.state]
+        geo.properties.state && runtimeData[geo.properties.state]
           ? geo.properties.state
           : geo.properties.name
           ? geo.properties.name
@@ -99,7 +176,7 @@ const WorldMap = () => {
       }
       if (!geoKey) return null
 
-      let geoData = data[geoKey]
+      let geoData = runtimeData[geoKey]
 
       const geoDisplayName = displayGeoName(supportedCountries[geoKey]?.[0])
       let legendColors
@@ -152,6 +229,20 @@ const WorldMap = () => {
             stroke={geoStrokeColor}
             strokeWidth={strokeWidth}
             onClick={() => geoClickHandler(geoDisplayName, geoData)}
+            onMouseEnter={() => {
+              // Track hover analytics event if this is a new location
+              const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+              publishAnalyticsEvent({
+                vizType: config.type,
+                vizSubType: getVizSubType(config),
+                eventType: `map_hover`,
+                eventAction: 'hover',
+                eventLabel: interactionLabel,
+                vizTitle: getVizTitle(config),
+                location: geoDisplayName,
+                specifics: `location: ${locationName?.toLowerCase()}`
+              })
+            }}
             data-tooltip-id={`tooltip__${tooltipId}`}
             data-tooltip-html={toolTip}
             tabIndex={-1}
@@ -169,6 +260,20 @@ const WorldMap = () => {
           strokeWidth={strokeWidth}
           styles={styles}
           path={path}
+          onMouseEnter={() => {
+            // Track hover analytics event if this is a new location
+            const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+            publishAnalyticsEvent({
+              vizType: config.type,
+              vizSubType: getVizSubType(config),
+              eventType: `map_hover`,
+              eventAction: 'hover',
+              eventLabel: interactionLabel,
+              vizTitle: getVizTitle(config),
+              location: geoDisplayName,
+              specifics: `location: ${locationName?.toLowerCase()}`
+            })
+          }}
           data-tooltip-id={`tooltip__${tooltipId}`}
           data-tooltip-html={toolTip}
         />
@@ -190,7 +295,7 @@ const WorldMap = () => {
     <ErrorBoundary component='WorldMap'>
       {allowMapZoom ? (
         <svg viewBox={SVG_VIEWBOX} role='img' aria-label={handleMapAriaLabels(config)}>
-          <rect height={SVG_HEIGHT} width={SVG_WIDTH} onClick={handleReset} fill='white' />
+          <rect height={SVG_HEIGHT} width={SVG_WIDTH} onClick={handleFiltersReset} fill='white' />
           <ZoomableGroup
             zoom={position.zoom}
             center={position.coordinates}
@@ -219,7 +324,7 @@ const WorldMap = () => {
         </svg>
       )}
       {(type === 'data' || (type === 'world-geocode' && allowMapZoom) || (type === 'bubble' && allowMapZoom)) && (
-        <ZoomControls handleZoomIn={handleZoomIn} handleZoomOut={handleZoomOut} handleReset={handleReset} />
+        <ZoomControls handleZoomIn={handleZoomIn} handleZoomOut={handleZoomOut} handleZoomReset={handleZoomReset} />
       )}
     </ErrorBoundary>
   )

package/src/components/ZoomControls.tsx

@@ -7,10 +7,10 @@ import './zoomControls.styles.css'
 type ZoomControlsProps = {
   handleZoomIn: (coordinates: [Number, Number]) => void
   handleZoomOut: (coordinates: [Number, Number]) => void
-  handleReset: (setRuntimeData: Function) => void
+  handleZoomReset: (setRuntimeData: Function) => void
 }
 
-const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut, handleReset }) => {
+const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut, handleZoomReset }) => {
   const { config, setRuntimeData, position } = useContext<MapContext>(ConfigContext)
   if (!config.general.allowMapZoom) return
   return (
@@ -26,13 +26,10 @@ const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut
           <line x1='5' y1='12' x2='19' y2='12' />
         </svg>
       </button>
-      {config.general.type === 'bubble' && (
-        <button onClick={() => handleReset(setRuntimeData)} className='reset' aria-label='Reset Zoom and Map Filters'>
-          Reset Filters
-        </button>
-      )}
-      {(config.general.type === 'world-geocode' || config.general.geoType === 'single-state') && (
-        <button onClick={() => handleReset(setRuntimeData)} className='reset' aria-label='Reset Zoom'>
+      {(config.general.type === 'world-geocode' ||
+        config.general.geoType === 'single-state' ||
+        config.general.type === 'bubble') && (
+        <button onClick={() => handleZoomReset(setRuntimeData)} className='reset' aria-label='Reset Zoom'>
           Reset Zoom
         </button>
       )}

package/src/context/LegendMemoContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext } from 'react'
+
+interface LegendMemoContextType {
+  legendMemo: React.RefObject<Map<any, any>>
+  legendSpecialClassLastMemo: React.RefObject<Map<any, any>>
+}
+
+const LegendMemoContext = createContext<LegendMemoContextType | null>(null)
+
+export const LegendMemoProvider: React.FC<{
+  children: React.ReactNode
+  legendMemo: React.RefObject<Map<any, any>>
+  legendSpecialClassLastMemo: React.RefObject<Map<any, any>>
+}> = ({ children, legendMemo, legendSpecialClassLastMemo }) => {
+  return (
+    <LegendMemoContext.Provider value={{ legendMemo, legendSpecialClassLastMemo }}>
+      {children}
+    </LegendMemoContext.Provider>
+  )
+}
+
+export const useLegendMemoContext = () => {
+  const context = useContext(LegendMemoContext)
+  if (!context) {
+    throw new Error('useLegendMemoContext must be used within a LegendMemoProvider')
+  }
+  return context
+}
+
+export default LegendMemoContext

package/src/context.ts

@@ -1,45 +1,7 @@
 import { createContext, Dispatch } from 'react'
-import { MapConfig } from './types/MapConfig'
+import { MapContext } from './types/MapContext'
 import MapActions from './store/map.actions'
 
-type MapContext = {
-  container
-  setSharedFilter
-  customNavigationHandler
-  tooltipRef
-  containerEl
-  applyLegendToRow
-  data
-  displayGeoName
-  filteredCountryCode
-  generateColorsArray
-  generateRuntimeData
-  geoClickHandler
-  handleCircleClick: Function
-  innerContainerRef
-  isDashboard
-  isEditor
-  mapId: string
-  loadConfig
-  position
-  resetLegendToggles
-  runtimeFilters
-  runtimeLegend
-  setParentConfig
-  setRuntimeData
-  setRuntimeFilters
-  setRuntimeLegend
-  setSharedFilterValue
-  setConfig: Function
-  config: MapConfig
-  tooltipId: string
-  legendMemo
-  legendSpecialClassLastMemo
-  translate
-  scale
-  annotations
-}
-
 export const MapDispatchContext = createContext<Dispatch<MapActions>>(() => {})
 
 const ConfigContext = createContext({} as MapContext)