@cdc/map 4.25.8 → 4.25.11

package/src/CdcMapComponent.tsx

@@ -2,7 +2,6 @@
 import React, { useEffect, useRef, useId, useReducer, useContext, useMemo } from 'react'
 import 'whatwg-fetch'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
-import Papa from 'papaparse'
 import parse from 'html-react-parser'
 import 'react-tooltip/dist/react-tooltip.css'
 
@@ -10,7 +9,6 @@ import 'react-tooltip/dist/react-tooltip.css'
 import DataTable from '@cdc/core/components/DataTable'
 import Filters from '@cdc/core/components/Filters'
 import Layout 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'
@@ -25,13 +23,11 @@ import './scss/main.scss'
 import './cdcMapComponent.styles.css'
 
 // Core Helpers
-import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
-import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
-import { publish } from '@cdc/core/helpers/events'
 import { generateRuntimeFilters } from './helpers/generateRuntimeFilters'
 import { type MapReducerType, MapState } from './store/map.reducer'
 import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
+import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 
 // Map Helpers
 import {
@@ -44,8 +40,13 @@ import {
   hashObj,
   navigationHandler
 } from './helpers'
-import generateRuntimeLegend from './helpers/generateRuntimeLegend'
+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 { prepareSmallMultiplesDataTable } from './helpers/smallMultiplesHelpers'
 
 // Child Components
 import Annotation from './components/Annotation'
@@ -53,22 +54,24 @@ import ConfigContext, { MapDispatchContext } from './context'
 import EditorPanel from './components/EditorPanel'
 import Error from './components/EditorPanel/components/Error'
 import Legend from './components/Legend'
-import Modal from './components/Modal'
+import MapContainer from './components/MapContainer'
+import MapControls from './components/MapControls'
 import NavigationMenu from './components/NavigationMenu'
-import UsaMap from './components/UsaMap'
-import WorldMap from './components/WorldMap'
-import GoogleMap from './components/GoogleMap'
 
 // hooks
 import useResizeObserver from './hooks/useResizeObserver'
+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 EditorContext from '@cdc/editor/src/ConfigContext'
+import EditorContext from '@cdc/core/contexts/EditorContext'
 import MapActions from './store/map.actions'
 import _ from 'lodash'
+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'
 
 type CdcMapComponent = {
   config: MapConfig
@@ -79,6 +82,8 @@ type CdcMapComponent = {
   navigationHandler: Function
   setSharedFilter: Function
   setSharedFilterValue: Function
+  setConfig?: Function
+  loadConfig?: Function
   datasets?: Datasets
   interactionLabel: string
 }
@@ -95,7 +100,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
   setConfig: setParentConfig,
   loadConfig,
   datasets,
-  interactionLabel = ''
+  interactionLabel = 'no link provided'
 }) => {
   const initialState = getInitialState(configObj)
 
@@ -132,151 +137,44 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
   }
 
   useEffect(() => {
-    const _newConfig = getInitialState(_.cloneDeep(configObj)).config
+    const _newConfig = getInitialState(cloneConfig(configObj)).config
     if (configObj.data) {
       _newConfig.data = configObj.data
     }
     setConfig(_newConfig)
   }, [configObj.data]) // eslint-disable-line
 
-  const setRuntimeData = (data: RuntimeData) => {
-    dispatch({ type: 'SET_RUNTIME_DATA', payload: data })
-  }
-
-  const setRuntimeFilters = (filters: VizFilter[]) => {
-    dispatch({ type: 'SET_RUNTIME_FILTERS', payload: filters })
-  }
-
-  const setRuntimeLegend = legend => {
-    dispatch({ type: 'SET_RUNTIME_LEGEND', payload: legend })
-  }
-
   const _setRuntimeData = (data: any) => {
     const _newFilters = addValuesToFilters(data, [])
     setConfig({ ...config, filters: _newFilters })
     if (config) {
-      setRuntimeData(data)
+      dispatch({ type: 'SET_RUNTIME_DATA', payload: data })
     } else {
-      setRuntimeFilters(data)
+      dispatch({ type: 'SET_RUNTIME_FILTERS', payload: data })
     }
   }
-  const transform = new DataTransform()
 
   // Refs
   const innerContainerRef = useRef()
-  const legendMemo = useRef(new Map())
   const legendRef = useRef(null)
-  const legendSpecialClassLastMemo = useRef(new Map())
   const mapSvg = useRef(null)
   const tooltipRef = useRef(null)
 
+  // Legend memo hook
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemo()
+
   // IDs
-  const imageId = useMemo(() => `download-id-${Math.random().toString(36).substr(2, 9)}`, [])
+  const imageId = useMemo(() => `download-id-${Math.random().toString(36).substring(2, 11)}`, [])
   const legendId = useId()
   const mapId = useId()
-  const tooltipId = 'test'
+  const tooltipId = 'tooltipId'
 
   // hooks
-  const { currentViewport, dimensions, container, outerContainerRef } = useResizeObserver(isEditor)
-
-  const reloadURLData = async () => {
-    if (config.dataUrl) {
-      const dataUrl = new URL(config.runtimeDataUrl || config.dataUrl, window.location.origin)
-      let qsParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
-
-      let isUpdateNeeded = false
-      config.filters.forEach(filter => {
-        if (filter.type === 'url' && qsParams[filter.queryParameter] !== decodeURIComponent(filter.active)) {
-          qsParams[filter.queryParameter] = filter.active
-          isUpdateNeeded = true
-        }
-      })
-
-      if (!isUpdateNeeded) return
-
-      let dataUrlFinal = `${dataUrl.origin}${dataUrl.pathname}${Object.keys(qsParams)
-        .map((param, i) => {
-          let qs = i === 0 ? '?' : '&'
-          qs += param + '='
-          qs += qsParams[param]
-          return qs
-        })
-        .join('')}`
-
-      let data
-
-      try {
-        const regex = /(?:\.([^.]+))?$/
-
-        const ext = regex.exec(dataUrl.pathname)[1]
-        if ('csv' === ext || isSolrCsv(dataUrlFinal)) {
-          data = await fetch(dataUrlFinal)
-            .then(response => response.text())
-            .then(responseText => {
-              const parsedCsv = Papa.parse(responseText, {
-                header: true,
-                dynamicTyping: true,
-                skipEmptyLines: true,
-                encoding: 'utf-8'
-              })
-              return parsedCsv.data
-            })
-        } else if ('json' === ext || isSolrJson(dataUrlFinal)) {
-          data = await fetch(dataUrlFinal).then(response => response.json())
-        } else {
-          data = []
-        }
-      } catch (e) {
-        console.error(`Cannot parse URL: ${dataUrlFinal}`) // eslint-disable-line
-        console.log(e) // eslint-disable-line
-        data = []
-      }
-
-      if (config.dataDescription) {
-        data = transform.autoStandardize(data)
-        data = transform.developerStandardize(data, config.dataDescription)
-      }
-
-      const newConfig = _.cloneDeep(config)
-      newConfig.data = data
-      newConfig.runtimeDataUrl = dataUrlFinal
-
-      setConfig(newConfig)
-    }
-  }
-
-  /**
-   * Publishes 'cove_loaded' only after the map SVG is rendered in the DOM.
-   * Checks immediately, then uses a MutationObserver as a fallback for async rendering.
-   * Update the mapSvg ref if the map container changes.
-   */
-  const observeMapSvgLoaded = (mapSvgRef, config, coveLoadedHasRan, publish, dispatch) => {
-    // Immediate check in case SVG is already present
-    const svgEl = mapSvgRef.current?.querySelector('svg')
-    if (svgEl && svgEl.childNodes.length > 0) {
-      publish('cove_loaded', { config })
-      dispatch({ type: 'SET_COVE_LOADED_HAS_RAN', payload: true })
-      return () => {}
-    }
-
-    // Fallback to observer for async SVG rendering
-    const observer = new MutationObserver(() => {
-      const svgEl = mapSvgRef.current?.querySelector('svg')
-      if (svgEl && svgEl.childNodes.length > 0) {
-        publish('cove_loaded', { config })
-        dispatch({ type: 'SET_COVE_LOADED_HAS_RAN', payload: true })
-        observer.disconnect()
-      }
-    })
-
-    observer.observe(mapSvgRef.current, { childList: true, subtree: true })
-
-    return () => observer.disconnect()
-  }
+  const { currentViewport, vizViewport, dimensions, container, outerContainerRef } = useResizeObserver(isEditor)
 
   useEffect(() => {
     if (!mapSvg.current || coveLoadedHasRan) return
-    return observeMapSvgLoaded(mapSvg, config, coveLoadedHasRan, publish, dispatch)
+    return observeMapSvgLoaded(mapSvg, config, coveLoadedHasRan, dispatch)
   }, [config, loading, runtimeData, coveLoadedHasRan])
 
   useEffect(() => {
@@ -299,7 +197,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
             filters[index].active = queryStringFilterValue
           }
         })
-        setRuntimeFilters(filters)
+        dispatch({ type: 'SET_RUNTIME_FILTERS', payload: filters })
       }
     }
 
@@ -328,11 +226,14 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
         isCategoryLegend,
         config.table.showNonGeoData
       )
-      setRuntimeData(newRuntimeData)
+      dispatch({ type: 'SET_RUNTIME_DATA', payload: newRuntimeData })
     } else {
       if (hashLegend !== runtimeLegend?.fromHash && undefined === runtimeData?.init) {
         const legend = generateRuntimeLegend(
-          config,
+          {
+            ...config,
+            legend: { ...config.legend, unified: config.smallMultiples?.mode ? true : config.legend?.unified }
+          },
           runtimeData,
           hashLegend,
           setConfig,
@@ -340,7 +241,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
           legendMemo,
           legendSpecialClassLastMemo
         )
-        setRuntimeLegend(legend)
+        dispatch({ type: 'SET_RUNTIME_LEGEND', payload: legend })
       }
     }
   }, [config, configObj.data])
@@ -348,7 +249,11 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
   useEffect(() => {
     const hashLegend = generateRuntimeLegendHash(config, runtimeFilters)
     const legend = generateRuntimeLegend(
-      { ...config, data: configObj.data },
+      {
+        ...config,
+        data: configObj.data,
+        legend: { ...config.legend, unified: config.smallMultiples?.mode ? true : config.legend?.unified }
+      },
       runtimeData,
       hashLegend,
       setConfig,
@@ -356,21 +261,68 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
       legendMemo,
       legendSpecialClassLastMemo
     )
-    setRuntimeLegend(legend)
+    dispatch({ type: 'SET_RUNTIME_LEGEND', payload: legend })
   }, [runtimeData, config, runtimeFilters])
 
   useEffect(() => {
     if (!isDashboard) {
-      reloadURLData()
+      reloadURLData(config, setConfig)
     }
   }, [JSON.stringify(config.filters)])
 
   const { general, tooltips, table, columns } = config
-  const { subtext = '', geoType } = general
-  const { showDownloadImgButton, showDownloadPdfButton, headerColor, introText } = general
+  const { subtext = '', geoType, showDownloadImgButton, showDownloadPdfButton, headerColor, introText } = general
   const { closeModal } = useModal()
 
   let title = config.general.title
+  let processedSuperTitle = general.superTitle
+  let processedSubtext = subtext
+  let processedIntroText = introText
+  let processedFootnotes = general.footnotes
+
+  // Process markup variables if enabled
+  if (config.enableMarkupVariables && config.markupVariables?.length > 0) {
+    // Combine viz filters with dashboard filters for markup processing
+    const combinedFilters = [...(config.filters || []), ...(config.dashboardFilters || [])]
+
+    const markupOptions = { isEditor, filters: combinedFilters }
+
+    if (title) {
+      title = processMarkupVariables(title, config.data || [], config.markupVariables, markupOptions).processedContent
+    }
+    if (general.superTitle) {
+      processedSuperTitle = processMarkupVariables(
+        general.superTitle,
+        config.data || [],
+        config.markupVariables,
+        markupOptions
+      ).processedContent
+    }
+    if (subtext) {
+      processedSubtext = processMarkupVariables(
+        subtext,
+        config.data || [],
+        config.markupVariables,
+        markupOptions
+      ).processedContent
+    }
+    if (introText) {
+      processedIntroText = processMarkupVariables(
+        introText,
+        config.data || [],
+        config.markupVariables,
+        markupOptions
+      ).processedContent
+    }
+    if (general.footnotes) {
+      processedFootnotes = processMarkupVariables(
+        general.footnotes,
+        config.data || [],
+        config.markupVariables,
+        markupOptions
+      ).processedContent
+    }
+  }
 
   if (isEditor) {
     if (!title || title === '') title = 'Map Title'
@@ -383,18 +335,14 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     container,
     content: modal,
     currentViewport,
+    vizViewport,
     customNavigationHandler,
-    data: runtimeData,
     dimensions,
     filteredCountryCode,
-    innerContainerRef,
     isDashboard,
     isEditor,
-    legendMemo,
-    legendSpecialClassLastMemo,
     logo,
     mapId,
-    outerContainerRef,
     position,
     projection,
     runtimeData,
@@ -402,9 +350,6 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     runtimeLegend,
     scale,
     setConfig,
-    setRuntimeData,
-    setRuntimeFilters,
-    setRuntimeLegend,
     setSharedFilter,
     setSharedFilterValue,
     config,
@@ -428,167 +373,147 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
       href={`#data-table-${config.dataKey}`}
       className='margin-left-href'
       onClick={() => {
-        publishAnalyticsEvent(
-          'link_to_data_table_click',
-          'click',
-          `${interactionLabel}|#data-table-${config.dataKey}`,
-          'map'
-        )
+        publishAnalyticsEvent({
+          vizType: config.type,
+          vizSubType: getVizSubType(config),
+          eventType: `link_to_data_table_click`,
+          eventAction: 'click',
+          eventLabel: `${interactionLabel}`,
+          vizTitle: getVizTitle(config),
+          specifics: `table: #data-table-${config.dataKey}`
+        })
       }}
     >
       {config.dataKey} (Go to Table)
     </a>
   )
 
-  const sectionClassNames = () => {
-    const classes = ['cove-component__content', 'cdc-map-inner-container', `${currentViewport}`, `${headerColor}`]
-    if (config?.runtime?.editorErrorMessage.length > 0) classes.push('type-map--has-error')
-    return classes.join(' ')
+  // 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
   }
 
   return (
-    <ConfigContext.Provider value={mapProps}>
-      <MapDispatchContext.Provider value={dispatch}>
-        <Layout.VisualizationWrapper
-          config={config}
-          isEditor={isEditor}
-          ref={outerContainerRef}
-          currentViewport={currentViewport}
-          imageId={imageId}
-          showEditorPanel={config.showEditorPanel}
-        >
-          {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={sectionClassNames()} aria-label={'Map: ' + title} ref={innerContainerRef}>
-                {config?.runtime?.editorErrorMessage.length > 0 && <Error />}
-                <Title
-                  title={title}
-                  superTitle={general.superTitle}
-                  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`} />
-                )}
-
-                {introText && <section className='introText mb-4'>{parse(introText)}</section>}
-
-                {config?.filters?.length > 0 && (
-                  <Filters
+    <LegendMemoProvider legendMemo={legendMemo} legendSpecialClassLastMemo={legendSpecialClassLastMemo}>
+      <ConfigContext.Provider value={mapProps}>
+        <MapDispatchContext.Provider value={dispatch}>
+          <Layout.VisualizationWrapper
+            config={config}
+            isEditor={isEditor}
+            ref={outerContainerRef}
+            currentViewport={currentViewport}
+            imageId={imageId}
+            showEditorPanel={config.showEditorPanel}
+          >
+            {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}
                     config={config}
-                    setConfig={setConfig}
-                    filteredData={runtimeFilters}
-                    setFilters={_setRuntimeData}
-                    dimensions={dimensions}
-                    standaloneMap={!config}
-                    interactionLabel={interactionLabel}
+                    classes={['map-title', general.showTitle === true ? 'visible' : 'hidden', `${headerColor}`]}
                   />
-                )}
-
-                <div
-                  role='region'
-                  tabIndex={0}
-                  className={getMapContainerClasses(config, modal).join(' ')}
-                  onClick={e => closeModal(e, modal)}
-                  onKeyDown={e => {
-                    if (e.key === 'Enter') {
-                      closeModal(e, modal)
-                    }
-                  }}
-                >
-                  <section
-                    className='outline-none geography-container w-100 position-relative'
-                    ref={mapSvg}
-                    tabIndex='0'
-                  >
-                    {currentViewport && (
-                      <>
-                        {modal && <Modal />}
-                        {'single-state' === geoType && <UsaMap.SingleState />}
-                        {'us' === geoType && 'us-geocode' !== config.general.type && <UsaMap.State />}
-                        {'us-region' === geoType && <UsaMap.Region />}
-                        {'us-county' === geoType && <UsaMap.County />}
-                        {'world' === geoType && <WorldMap />}
-                        {'google-map' === geoType && <GoogleMap />}
-                        {
-                          /* logo is handled in UsaMap.State when applicable */
-                          // prettier-ignore
-                          'data' === general.type && logo && ('us' !== geoType || 'us-geocode' === general.type) && (
-                            <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
-                          )
-                        }
-                      </>
-                    )}
-                  </section>
+                  <SkipTo skipId={tabId} skipMessage='Skip Over Map Container' />
+                  {config?.annotations?.length > 0 && (
+                    <SkipTo skipId={tabId} skipMessage={`Skip over annotations`} key={`skip-annotations`} />
+                  )}
 
-                  {general.showSidebar && 'navigation' !== general.type && (
-                    <Legend
+                  {processedIntroText && <section className='introText mb-4'>{parse(processedIntroText)}</section>}
+
+                  {config?.filters?.length > 0 && (
+                    <Filters
+                      config={config}
+                      setConfig={setConfig}
+                      filteredData={runtimeFilters}
+                      setFilters={_setRuntimeData}
                       dimensions={dimensions}
-                      ref={legendRef}
-                      skipId={tabId}
-                      containerWidthPadding={0}
-                      currentViewport={currentViewport}
+                      standaloneMap={!config}
                       interactionLabel={interactionLabel}
                     />
                   )}
-                </div>
-
-                {'navigation' === general.type && (
-                  <NavigationMenu
-                    mapTabbingID={tabId}
-                    displayGeoName={displayGeoName}
-                    data={runtimeData}
-                    options={general}
-                    columns={config.columns}
-                    navigationHandler={val => navigationHandler('_blank', val, customNavigationHandler)}
-                  />
-                )}
 
-                {/* Link (to data table?) */}
-                {isDashboard && config.table?.forceDisplay && config.table.showDataTableLink ? tableLink : link && link}
+                  <div
+                    role='region'
+                    tabIndex={0}
+                    className={getMapContainerClasses(config, modal).join(' ')}
+                    onClick={e => closeModal(e, modal)}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') {
+                        closeModal(e, modal)
+                      }
+                    }}
+                  >
+                    <MapContainer
+                      config={config}
+                      modal={modal}
+                      currentViewport={currentViewport}
+                      geoType={geoType}
+                      general={general}
+                      logo={logo}
+                      mapSvgRef={mapSvg}
+                    />
 
-                {subtext.length > 0 && <p className='subtext mt-4'>{parse(subtext)}</p>}
+                    {general.showSidebar && 'navigation' !== general.type && (
+                      <Legend
+                        dimensions={dimensions}
+                        ref={legendRef}
+                        skipId={tabId}
+                        containerWidthPadding={0}
+                        currentViewport={currentViewport}
+                        interactionLabel={interactionLabel}
+                      />
+                    )}
+                  </div>
 
-                <MediaControls.Section classes={['download-buttons']}>
-                  {showDownloadImgButton && (
-                    <MediaControls.Button
-                      text='Download Image'
-                      title='Download Chart as Image'
-                      type='image'
-                      state={config}
-                      elementToCapture={imageId}
-                      interactionLabel={interactionLabel}
-                    />
-                  )}
-                  {showDownloadPdfButton && (
-                    <MediaControls.Button
-                      text='Download PDF'
-                      title='Download Chart as PDF'
-                      type='pdf'
-                      state={config}
-                      interactionLabel={interactionLabel}
-                      elementToCapture={imageId}
+                  {'navigation' === general.type && (
+                    <NavigationMenu
+                      mapTabbingID={tabId}
+                      displayGeoName={displayGeoName}
+                      data={runtimeData}
+                      options={general}
+                      columns={config.columns}
+                      navigationHandler={val => navigationHandler('_blank', val, customNavigationHandler)}
                     />
                   )}
-                </MediaControls.Section>
 
-                {config?.runtime?.editorErrorMessage.length === 0 &&
-                  true === table.forceDisplay &&
-                  general.type !== 'navigation' &&
-                  false === loading && (
+                  {/* 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>}
+
+                  <MapControls config={config} imageId={imageId} interactionLabel={interactionLabel} />
+
+                  {shouldShowDataTable(config, table, general, loading) && (
                     <DataTable
-                      columns={columns}
-                      config={config}
+                      columns={dataTableColumns}
+                      config={dataTableConfig}
                       currentViewport={currentViewport}
                       displayGeoName={displayGeoName}
                       expandDataTable={table.expanded}
                       formatLegendLocation={key =>
-                        formatLegendLocation(key, runtimeData?.[key]?.[config.columns.geo.name])
+                        formatLegendLocation(key, dataTableRuntimeData?.[key]?.[config.columns.geo.name])
                       }
                       headerColor={general.headerColor}
                       imageRef={imageId}
@@ -598,8 +523,8 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
                       legendSpecialClassLastMemo={legendSpecialClassLastMemo}
                       navigationHandler={navigationHandler}
                       outerContainerRef={outerContainerRef}
-                      rawData={config.data}
-                      runtimeData={runtimeData}
+                      rawData={dataTableConfig.data}
+                      runtimeData={dataTableRuntimeData}
                       runtimeLegend={runtimeLegend}
                       showDownloadImgButton={showDownloadImgButton}
                       showDownloadPdfButton={showDownloadPdfButton}
@@ -611,19 +536,17 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
                     />
                   )}
 
-                {config.annotations?.length > 0 && <Annotation.Dropdown />}
+                  {config.annotations?.length > 0 && <Annotation.Dropdown />}
 
-                {general.footnotes && <section className='footnotes pt-2 mt-4'>{parse(general.footnotes)}</section>}
-              </section>
-            )}
+                  {processedFootnotes && <section className='footnotes pt-2 mt-4'>{parse(processedFootnotes)}</section>}
+                </section>
+              )}
 
-            <div aria-live='assertive' className='cdcdataviz-sr-only'>
-              {accessibleStatus}
-            </div>
+              <div aria-live='assertive' className='cdcdataviz-sr-only'>
+                {accessibleStatus}
+              </div>
 
-            {!isDraggingAnnotation &&
-              !window.matchMedia('(any-hover: none)').matches &&
-              'hover' === tooltips.appearanceType && (
+              {!isDraggingAnnotation && 'hover' === tooltips.appearanceType && (
                 <ReactTooltip
                   id={`tooltip__${tooltipId}`}
                   float={true}
@@ -631,22 +554,29 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
                   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)} />
-          </Layout.Responsive>
-        </Layout.VisualizationWrapper>
-      </MapDispatchContext.Provider>
-    </ConfigContext.Provider>
+              <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}
+              />
+            </Layout.Responsive>
+          </Layout.VisualizationWrapper>
+        </MapDispatchContext.Provider>
+      </ConfigContext.Provider>
+    </LegendMemoProvider>
   )
 }