@cdc/map 4.26.2 → 4.26.4

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@cdc/map",
-  "version": "4.26.2",
+  "version": "4.26.4",
   "description": "React component for visualizing tabular data on a map of the United States or the world.",
   "license": "Apache-2.0",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.2",
+    "@cdc/core": "^4.26.4",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-google-maps/api": "^2.20.8",
@@ -24,7 +24,7 @@
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
-    "dompurify": "^3.3.1",
+    "dompurify": "^3.4.0",
     "html-react-parser": "^5.2.3",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.23",
@@ -42,7 +42,7 @@
     "vite-plugin-svgr": "^4.2.0",
     "whatwg-fetch": "^3.6.20"
   },
-  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "gitHead": "432a2d1acab22915fafe793cb9da1f10318ff793",
   "main": "dist/cdcmap",
   "moduleName": "CdcMap",
   "peerDependencies": {

package/src/CdcMap.tsx

@@ -58,7 +58,8 @@ const CdcMap: React.FC<CdcMapProps> = ({
       ...configToLoad
     }
     if (newState.dataUrl) {
-      let newData = await fetchRemoteData(newState.dataUrl, 'map')
+      let { data: newData, dataMetadata } = await fetchRemoteData(newState.dataUrl)
+      newState.dataMetadata = dataMetadata
 
       if (newState.vegaConfig) {
         newData = extractCoveData(updateVegaData(newState.vegaConfig, newData))
@@ -79,18 +80,6 @@ const CdcMap: React.FC<CdcMapProps> = ({
       newState.data = transform.developerStandardize(newState.data, newState.dataDescription)
     }
 
-    Object.keys(newState).forEach(key => {
-      if ('object' === typeof newState[key] && false === Array.isArray(newState[key])) {
-        if (initialState[key]) {
-          Object.keys(initialState[key]).forEach(property => {
-            if (undefined === newState[key][property]) {
-              newState[key][property] = initialState[key][property]
-            }
-          })
-        }
-      }
-    })
-
     if (newState.columns.geo.name || newState.columns.geo.fips) {
       addUIDs(newState, newState.columns.geo.name || newState.columns.geo.fips)
     }
@@ -113,7 +102,7 @@ const CdcMap: React.FC<CdcMapProps> = ({
     let _newConfig = cloneConfig(config ?? initialState)
 
     if (configUrl) {
-      _newConfig = await fetchRemoteData(configUrl)
+      _newConfig = await fetch(configUrl).then(r => r.json())
     }
     if ('object' === typeof _newConfig) {
       loadConfig(_newConfig)

package/src/CdcMapComponent.tsx

@@ -8,12 +8,13 @@ import 'react-tooltip/dist/react-tooltip.css'
 // Core Components
 import DataTable from '@cdc/core/components/DataTable'
 import Filters from '@cdc/core/components/Filters'
-import Layout from '@cdc/core/components/Layout'
+import { VisualizationContainer, VisualizationContent } from '@cdc/core/components/Layout'
 import MediaControls from '@cdc/core/components/MediaControls'
 import SkipTo from '@cdc/core/components/elements/SkipTo'
 import Title from '@cdc/core/components/ui/Title'
 import Waiting from '@cdc/core/components/Waiting'
 import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
+import { supportedStatesFipsCodes, supportedCounties } from './data/supported-geos'
 
 // types
 import { type MapConfig } from './types/MapConfig'
@@ -24,7 +25,13 @@ import './scss/main.scss'
 import './cdcMapComponent.styles.css'
 
 // Core Helpers
-import { getQueryStringFilterValue, isFilterHiddenByQuery } from '@cdc/core/helpers/queryStringUtils'
+import {
+  getQueryStringFilterValue,
+  isFilterHiddenByQuery,
+  removeQueryParam,
+  updateQueryParam,
+  updateQueryParams
+} from '@cdc/core/helpers/queryStringUtils'
 import { generateRuntimeFilters } from './helpers/generateRuntimeFilters'
 import { type MapReducerType, MapState } from './store/map.reducer'
 import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
@@ -47,8 +54,7 @@ import { generateRuntimeLegend } from './helpers/generateRuntimeLegend'
 import generateRuntimeData from './helpers/generateRuntimeData'
 import { reloadURLData } from './helpers/urlDataHelpers'
 import { observeMapSvgLoaded } from './helpers/mapObserverHelpers'
-import { buildSectionClassNames } from './helpers/componentHelpers'
-import { shouldShowDataTable } from './helpers/dataTableHelpers'
+import { shouldShowDataTable, filterCountyTableRuntimeDataByStateCode } from './helpers/dataTableHelpers'
 import { prepareSmallMultiplesDataTable } from './helpers/smallMultiplesHelpers'
 
 // Child Components
@@ -66,7 +72,9 @@ import useLegendMemo from './hooks/useLegendMemo'
 import { LegendMemoProvider } from './context/LegendMemoContext'
 import { VizFilter } from '@cdc/core/types/VizFilter'
 import { getInitialState, mapReducer } from './store/map.reducer'
-import { RuntimeData } from './types/RuntimeData'
+import defaults from './data/initial-state'
+import { LEGACY_MAP_DEFAULTS } from './data/legacy-defaults'
+import { backfillDefaults } from '@cdc/core/helpers/backfillDefaults'
 import EditorContext from '@cdc/core/contexts/EditorContext'
 import MapActions from './store/map.actions'
 import _ from 'lodash'
@@ -74,6 +82,9 @@ import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 import useModal from './hooks/useModal'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { ENABLE_CHART_MAP_TP5_TREATMENT } from '@cdc/core/helpers/constants'
+import CalloutFlag from '@cdc/core/assets/callout-flag.svg?url'
+import { useQueryParamsListener } from '@cdc/core/hooks/useQueryParamsListener'
 
 type CdcMapComponent = {
   config: MapConfig
@@ -104,6 +115,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
   datasets,
   interactionLabel = 'no link provided'
 }) => {
+  backfillDefaults(configObj, defaults, LEGACY_MAP_DEFAULTS)
   const initialState = getInitialState(configObj)
 
   const [mapState, dispatch] = useReducer<MapReducerType<MapState, MapActions>>(mapReducer, initialState as MapState)
@@ -118,6 +130,8 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     modal,
     accessibleStatus,
     filteredCountryCode,
+    filteredCountyCode,
+    filteredStateCode,
     position,
     scale,
     translate,
@@ -139,7 +153,9 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
   }
 
   useEffect(() => {
-    const _newConfig = getInitialState(cloneConfig(configObj)).config
+    const configClone = cloneConfig(configObj)
+    backfillDefaults(configClone, defaults, LEGACY_MAP_DEFAULTS)
+    const _newConfig = getInitialState(configClone).config
     if (configObj.data) {
       _newConfig.data = configObj.data
     }
@@ -156,8 +172,24 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     }
   }
 
+  const setFilters = (filters: VizFilter[]) => {
+    const filterCopy = _.cloneDeep(filters)
+    if (config.general.showStateDropdown) {
+      const [stateFilter, countyFilter] = filterCopy.filter(
+        f => f.staticFilter && ['state', 'county'].includes(f.columnName)
+      )
+      const stateCode = (stateFilter?.active as string) || ''
+      const countyCode = (countyFilter?.active as string) || ''
+
+      setFilteredStateCountyCode(stateCode, countyCode)
+      if (countyFilter) filterCopy.pop() // remove county filter
+      filterCopy.pop() // remove state filter
+    }
+    _setRuntimeData(filterCopy)
+  }
+
   // Refs
-  const innerContainerRef = useRef()
+  const innerContainerRef = useRef<HTMLDivElement | null>(null)
   const legendRef = useRef(null)
   const mapSvg = useRef(null)
   const tooltipRef = useRef(null)
@@ -290,7 +322,12 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     // Combine viz filters with dashboard filters for markup processing
     const combinedFilters = [...(config.filters || []), ...(config.dashboardFilters || [])]
 
-    const markupOptions = { isEditor, filters: combinedFilters }
+    const markupOptions = {
+      isEditor,
+      filters: combinedFilters,
+      locale: config.locale,
+      dataMetadata: config.dataMetadata
+    }
 
     if (title) {
       title = processMarkupVariables(title, config.data || [], config.markupVariables, markupOptions).processedContent
@@ -334,6 +371,43 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
   }
 
   if (!table.label || table.label === '') table.label = 'Data Table'
+  const isTp5Treatment = ENABLE_CHART_MAP_TP5_TREATMENT && config.visual?.tp5Treatment
+  const mapTitle = (
+    <Title
+      title={title}
+      superTitle={processedSuperTitle}
+      titleStyle={isTp5Treatment ? 'small' : general.titleStyle}
+      showTitle={general.showTitle}
+      config={config}
+      classes={['map-title', general.showTitle === true ? 'visible' : 'hidden', `${headerColor}`]}
+    />
+  )
+
+  const STATE_CODE = 'state-code'
+  const COUNTY_CODE = 'county-code'
+  const setFilteredStateCountyCode = (stateCode: string, countyCode?: string) => {
+    const stateCodePattern = /^\d\d$/
+    const normalizedStateCode = stateCodePattern.test(stateCode) ? stateCode : ''
+    let _countyCode = ''
+    if (countyCode) {
+      const countyCodePattern = /^\d{5}$/
+      _countyCode = countyCodePattern.test(countyCode) ? countyCode : ''
+    }
+    if (!normalizedStateCode) {
+      updateQueryParams({ [STATE_CODE]: '', [COUNTY_CODE]: '' })
+    } else {
+      updateQueryParams({ [STATE_CODE]: normalizedStateCode, [COUNTY_CODE]: _countyCode })
+    }
+  }
+
+  const setFilteredStateCodeFromQuery = ({
+    [STATE_CODE]: stateCode,
+    [COUNTY_CODE]: countyCode
+  }: Record<string, string>) => {
+    dispatch({ type: 'SET_FILTERED_STATE_COUNTY_CODE', payload: { stateCode, countyCode } })
+  }
+
+  useQueryParamsListener([STATE_CODE, COUNTY_CODE], setFilteredStateCodeFromQuery)
 
   const mapProps = {
     setParentConfig,
@@ -344,6 +418,8 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     customNavigationHandler,
     dimensions,
     filteredCountryCode,
+    filteredCountyCode,
+    filteredStateCode,
     isDashboard,
     isEditor,
     logo,
@@ -355,6 +431,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     runtimeLegend,
     scale,
     setConfig,
+    setFilteredStateCountyCode,
     setSharedFilter,
     setSharedFilterValue,
     config,
@@ -368,6 +445,34 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     interactionLabel
   }
 
+  // Memoize data table preparation and county filtering to avoid recomputing on unrelated renders.
+  const { dataTableConfig, dataTableColumns, dataTableRuntimeData } = useMemo(() => {
+    let preparedConfig = config
+    let preparedColumns = columns
+    let preparedRuntimeData = runtimeData
+
+    if (config.smallMultiples?.mode) {
+      const prepared = prepareSmallMultiplesDataTable(config, columns, runtimeData)
+      preparedConfig = prepared.config
+      preparedColumns = prepared.columns
+      preparedRuntimeData = prepared.runtimeData
+    }
+
+    if (config.general.geoType === 'us-county' && filteredStateCode) {
+      preparedRuntimeData = filterCountyTableRuntimeDataByStateCode(
+        preparedRuntimeData,
+        filteredStateCode,
+        preparedConfig
+      )
+    }
+
+    return {
+      dataTableConfig: preparedConfig,
+      dataTableColumns: preparedColumns,
+      dataTableRuntimeData: preparedRuntimeData
+    }
+  }, [config, columns, runtimeData, filteredStateCode])
+
   if (!config.data) return <></>
 
   const tabId = handleMapTabbing(config, loading, legendId)
@@ -393,76 +498,181 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     </a>
   )
 
-  // Prepare data table props (pivot if small multiples mode is enabled)
-  let dataTableConfig = config
-  let dataTableColumns = columns
-  let dataTableRuntimeData = runtimeData
-  if (config.smallMultiples?.mode) {
-    const prepared = prepareSmallMultiplesDataTable(config, columns, runtimeData)
-    dataTableConfig = prepared.config
-    dataTableColumns = prepared.columns
-    dataTableRuntimeData = prepared.runtimeData
+  const applyStateFilter = (config: MapConfig): MapConfig => {
+    if (config.general.showStateDropdown && config.general.geoType === 'us-county') {
+      const stateFilter: VizFilter = {
+        columnName: 'state',
+        label: 'Select Location',
+        filterStyle: 'dropdown',
+        labels: supportedStatesFipsCodes,
+        values: Object.keys(supportedStatesFipsCodes),
+        resetLabel: 'United States',
+        staticFilter: true,
+        active: filteredStateCode
+      }
+      let countyFilter: VizFilter | undefined
+      if (filteredStateCode) {
+        const counties = Object.keys(supportedCounties).filter(countyCode => countyCode.startsWith(filteredStateCode))
+        countyFilter = {
+          columnName: 'county',
+          label: 'Select County',
+          filterStyle: 'dropdown',
+          labels: supportedCounties,
+          values: counties,
+          resetLabel: 'All Counties',
+          staticFilter: true,
+          active: filteredCountyCode
+        }
+      }
+      return {
+        ...config,
+        filters: [...(config.filters || []), stateFilter, ...(countyFilter ? [countyFilter] : [])]
+      }
+    }
+    return config
   }
 
   return (
     <LegendMemoProvider legendMemo={legendMemo} legendSpecialClassLastMemo={legendSpecialClassLastMemo}>
       <ConfigContext.Provider value={mapProps}>
         <MapDispatchContext.Provider value={dispatch}>
-          <Layout.VisualizationWrapper
+          <VisualizationContainer
             config={config}
             isEditor={isEditor}
             ref={outerContainerRef}
             currentViewport={currentViewport}
             imageId={imageId}
-            showEditorPanel={config.showEditorPanel}
+            editorPanel={<EditorPanel datasets={datasets} />}
           >
-            {isEditor && <EditorPanel datasets={datasets} />}
-            <Layout.Responsive isEditor={isEditor}>
-              {requiredColumns?.length > 0 && (
-                <Waiting requiredColumns={requiredColumns} className={displayPanel ? `waiting` : `waiting collapsed`} />
-              )}
-              {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
-                <section
-                  className={buildSectionClassNames(
-                    currentViewport,
-                    headerColor,
-                    config?.runtime?.editorErrorMessage.length > 0
-                  )}
-                  aria-label={'Map: ' + title}
-                  ref={innerContainerRef}
-                >
-                  {config?.runtime?.editorErrorMessage.length > 0 && <Error />}
-                  <Title
-                    title={title}
-                    superTitle={processedSuperTitle}
-                    titleStyle={general.titleStyle}
-                    showTitle={general.showTitle}
-                    config={config}
-                    classes={['map-title', general.showTitle === true ? 'visible' : 'hidden', `${headerColor}`]}
-                  />
-                  <SkipTo skipId={tabId} skipMessage='Skip Over Map Container' />
-                  {config?.annotations?.length > 0 && (
-                    <SkipTo skipId={tabId} skipMessage={`Skip over annotations`} key={`skip-annotations`} />
-                  )}
-
-                  {processedIntroText && <section className='introText mb-4'>{parse(processedIntroText)}</section>}
-
-                  {config?.filters?.length > 0 && (
+            {requiredColumns?.length > 0 && (
+              <Waiting requiredColumns={requiredColumns} className={displayPanel ? `waiting` : `waiting collapsed`} />
+            )}
+            {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
+              <VisualizationContent
+                innerClassName={[
+                  'cdc-map-inner-container',
+                  currentViewport,
+                  config?.runtime?.editorErrorMessage.length > 0 ? 'type-map--has-error' : ''
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                innerProps={{ 'aria-label': 'Map: ' + title, ref: innerContainerRef }}
+                bodyWrapClassName={isTp5Treatment ? 'cdc-callout d-flex flex-column' : ''}
+                bodyClassName={[
+                  !config.visual?.border || isTp5Treatment ? 'no-borders' : '',
+                  config.visual?.border && !isTp5Treatment ? 'component--has-legacy-border' : '',
+                  config.visual?.borderColorTheme ? 'component--has-border-color-theme' : '',
+                  config.visual?.accent ? 'component--has-accent' : '',
+                  config.visual?.background ? 'component--has-background' : '',
+                  config.visual?.hideBackgroundColor ? 'component--hide-background-color' : '',
+                  isTp5Treatment ? 'component--tp5-treatment' : ''
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                filters={
+                  config?.filters?.length > 0 || config.general.showStateDropdown ? (
                     <Filters
-                      config={config}
-                      setConfig={setConfig}
-                      filteredData={runtimeFilters}
-                      setFilters={_setRuntimeData}
+                      config={applyStateFilter(config)}
+                      setFilters={setFilters}
                       dimensions={dimensions}
-                      standaloneMap={!config}
                       interactionLabel={interactionLabel}
                     />
+                  ) : undefined
+                }
+                bodySubtext={
+                  processedSubtext.length > 0 ? <p className='subtext cove-prose'>{parse(processedSubtext)}</p> : null
+                }
+                bodyFooter={
+                  <>
+                    {isDashboard && config.table?.forceDisplay && config.table.showDataTableLink
+                      ? tableLink
+                      : link && link}
+
+                    {shouldShowDataTable(config, table, general, loading) ? (
+                      <DataTable
+                        columns={dataTableColumns}
+                        config={dataTableConfig}
+                        currentViewport={currentViewport}
+                        displayGeoName={displayGeoName}
+                        expandDataTable={table.expanded}
+                        formatLegendLocation={key =>
+                          formatLegendLocation(key, dataTableRuntimeData?.[key]?.[config.columns.geo.name])
+                        }
+                        imageRef={imageId}
+                        indexTitle={table.indexLabel}
+                        innerContainerRef={innerContainerRef}
+                        legendMemo={legendMemo}
+                        legendSpecialClassLastMemo={legendSpecialClassLastMemo}
+                        navigationHandler={navigationHandler}
+                        outerContainerRef={outerContainerRef}
+                        rawData={dataTableConfig.data}
+                        runtimeData={dataTableRuntimeData}
+                        runtimeLegend={runtimeLegend}
+                        showDownloadImgButton={showDownloadImgButton}
+                        showDownloadPdfButton={showDownloadPdfButton}
+                        includeContextInDownload={config.general?.includeContextInDownload}
+                        tabbingId={tabId}
+                        tableTitle={table.label}
+                        vizTitle={general.title}
+                        applyLegendToRow={applyLegendToRow}
+                        getPatternForRow={getPatternForRow}
+                        wrapColumns={table.wrapColumns}
+                        hasSubtextAbove={processedSubtext.length > 0}
+                        interactionLabel={interactionLabel}
+                      />
+                    ) : (
+                      (showDownloadImgButton || showDownloadPdfButton) && (
+                        <div className='w-100 d-flex justify-content-end'>
+                          <MediaControls.Section classes={['download-links', 'mt-4', 'mb-2']}>
+                            {showDownloadImgButton && (
+                              <MediaControls.DownloadLink
+                                type='image'
+                                title='Download Map as Image'
+                                state={config}
+                                elementToCapture={imageId}
+                                interactionLabel={interactionLabel}
+                                includeContextInDownload={config.general?.includeContextInDownload}
+                              />
+                            )}
+                            {showDownloadPdfButton && (
+                              <MediaControls.DownloadLink
+                                type='pdf'
+                                title='Download Map as PDF'
+                                state={config}
+                                elementToCapture={imageId}
+                                interactionLabel={interactionLabel}
+                                includeContextInDownload={config.general?.includeContextInDownload}
+                              />
+                            )}
+                          </MediaControls.Section>
+                        </div>
+                      )
+                    )}
+
+                    {config.annotations?.length > 0 && <Annotation.Dropdown />}
+
+                    {processedFootnotes && (
+                      <section className='footnotes cove-prose pt-2 mt-4'>{parse(processedFootnotes)}</section>
+                    )}
+                  </>
+                }
+                header={isTp5Treatment ? null : mapTitle}
+                messageIsIntroText={!!processedIntroText}
+                message={processedIntroText ? <div className='cove-prose'>{parse(processedIntroText)}</div> : null}
+              >
+                <>
+                  {isTp5Treatment && <img src={CalloutFlag} alt='' className='cdc-callout__flag' aria-hidden='true' />}
+                  {isTp5Treatment && mapTitle}
+                  {config?.runtime?.editorErrorMessage.length > 0 && <Error />}
+                  <SkipTo skipId={tabId} skipMessage='Skip Over Map Container' />
+                  {config?.annotations?.length > 0 && (
+                    <SkipTo skipId={tabId} skipMessage={`Skip over annotations`} key={`skip-annotations`} />
                   )}
 
                   <div
                     role='region'
                     tabIndex={0}
-                    className={getMapContainerClasses(config, modal).join(' ')}
+                    className={getMapContainerClasses(config, modal, currentViewport).join(' ')}
                     onClick={e => closeModal(e, modal)}
                     onKeyDown={e => {
                       if (e.key === 'Enter') {
@@ -502,114 +712,42 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
                       navigationHandler={val => navigationHandler('_blank', val, customNavigationHandler)}
                     />
                   )}
-
-                  {/* Link (to data table?) */}
-                  {isDashboard && config.table?.forceDisplay && config.table.showDataTableLink
-                    ? tableLink
-                    : link && link}
-
-                  {processedSubtext.length > 0 && <p className='subtext mt-4'>{parse(processedSubtext)}</p>}
-
-                  {/* Data Table or Download Links */}
-                  {shouldShowDataTable(config, table, general, loading) ? (
-                    <DataTable
-                      columns={dataTableColumns}
-                      config={dataTableConfig}
-                      currentViewport={currentViewport}
-                      displayGeoName={displayGeoName}
-                      expandDataTable={table.expanded}
-                      formatLegendLocation={key =>
-                        formatLegendLocation(key, dataTableRuntimeData?.[key]?.[config.columns.geo.name])
-                      }
-                      headerColor={general.headerColor}
-                      imageRef={imageId}
-                      indexTitle={table.indexLabel}
-                      innerContainerRef={innerContainerRef}
-                      legendMemo={legendMemo}
-                      legendSpecialClassLastMemo={legendSpecialClassLastMemo}
-                      navigationHandler={navigationHandler}
-                      outerContainerRef={outerContainerRef}
-                      rawData={dataTableConfig.data}
-                      runtimeData={dataTableRuntimeData}
-                      runtimeLegend={runtimeLegend}
-                      showDownloadImgButton={showDownloadImgButton}
-                      showDownloadPdfButton={showDownloadPdfButton}
-                      includeContextInDownload={config.general?.includeContextInDownload}
-                      tabbingId={tabId}
-                      tableTitle={table.label}
-                      vizTitle={general.title}
-                      applyLegendToRow={applyLegendToRow}
-                      getPatternForRow={getPatternForRow}
-                      wrapColumns={table.wrapColumns}
-                      interactionLabel={interactionLabel}
-                    />
-                  ) : (
-                    (showDownloadImgButton || showDownloadPdfButton) && (
-                      <div className='w-100 d-flex justify-content-end'>
-                        <MediaControls.Section classes={['download-links', 'mt-4', 'mb-2']}>
-                          {showDownloadImgButton && (
-                            <MediaControls.DownloadLink
-                              type='image'
-                              title='Download Map as Image'
-                              state={config}
-                              elementToCapture={imageId}
-                              interactionLabel={interactionLabel}
-                              includeContextInDownload={config.general?.includeContextInDownload}
-                            />
-                          )}
-                          {showDownloadPdfButton && (
-                            <MediaControls.DownloadLink
-                              type='pdf'
-                              title='Download Map as PDF'
-                              state={config}
-                              elementToCapture={imageId}
-                              interactionLabel={interactionLabel}
-                              includeContextInDownload={config.general?.includeContextInDownload}
-                            />
-                          )}
-                        </MediaControls.Section>
-                      </div>
-                    )
-                  )}
-
-                  {config.annotations?.length > 0 && <Annotation.Dropdown />}
-
-                  {processedFootnotes && <section className='footnotes pt-2 mt-4'>{parse(processedFootnotes)}</section>}
-                </section>
-              )}
-
-              <div aria-live='assertive' className='cdcdataviz-sr-only'>
-                {accessibleStatus}
-              </div>
-
-              {!isDraggingAnnotation && 'hover' === tooltips.appearanceType && (
-                <ReactTooltip
-                  id={`tooltip__${tooltipId}`}
-                  float={true}
-                  className={`tooltip tooltip-test`}
-                  style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }}
-                />
-              )}
-              <div
-                ref={tooltipRef}
-                id={`tooltip__${tooltipId}-canvas`}
-                className='tooltip'
-                style={{
-                  background: `rgba(255,255,255,${config.tooltips.opacity / 100})`,
-                  position: 'absolute',
-                  whiteSpace: 'nowrap',
-                  display: 'none' // can't use d-none here
-                }}
-              ></div>
-              <FootnotesStandAlone
-                config={config.footnotes}
-                filters={config.filters?.filter(f => f.filterFootnotes)}
-                markupVariables={config.markupVariables}
-                enableMarkupVariables={config.enableMarkupVariables}
-                data={config.data}
+                </>
+              </VisualizationContent>
+            )}
+
+            <div aria-live='assertive' className='cdcdataviz-sr-only'>
+              {accessibleStatus}
+            </div>
+
+            {!isDraggingAnnotation && 'hover' === tooltips.appearanceType && (
+              <ReactTooltip
+                id={`tooltip__${tooltipId}`}
+                float={true}
+                className={`tooltip tooltip-test`}
+                style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }}
               />
-            </Layout.Responsive>
-          </Layout.VisualizationWrapper>
+            )}
+            <div
+              ref={tooltipRef}
+              id={`tooltip__${tooltipId}-canvas`}
+              className='tooltip'
+              style={{
+                background: `rgba(255,255,255,${config.tooltips.opacity / 100})`,
+                position: 'absolute',
+                whiteSpace: 'nowrap',
+                display: 'none' // can't use d-none here
+              }}
+            ></div>
+            <FootnotesStandAlone
+              config={config.footnotes}
+              filters={config.filters?.filter(f => f.filterFootnotes)}
+              markupVariables={config.markupVariables}
+              enableMarkupVariables={config.enableMarkupVariables}
+              data={config.data}
+              dataMetadata={config.dataMetadata}
+            />
+          </VisualizationContainer>
         </MapDispatchContext.Provider>
       </ConfigContext.Provider>
     </LegendMemoProvider>