@cdc/map 4.23.3 → 4.23.5

package/src/CdcMap.jsx

@@ -8,6 +8,7 @@ import ResizeObserver from 'resize-observer-polyfill'
 // Third party
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 import chroma from 'chroma-js'
+import Papa from 'papaparse'
 import parse from 'html-react-parser'
 import 'react-tooltip/dist/react-tooltip.css'
 
@@ -34,15 +35,15 @@ import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import getViewport from '@cdc/core/helpers/getViewport'
 import Loading from '@cdc/core/components/Loading'
 import numberFromString from '@cdc/core/helpers/numberFromString'
+import DataTable from '@cdc/core/components/DataTable' // Future: Lazy
 
 // Child Components
 import ConfigContext from './context'
-import Filters from './components/Filters'
+import Filters, { useFilters } from '@cdc/core/components/Filters'
 import Modal from './components/Modal'
 import Sidebar from './components/Sidebar'
 
 import CountyMap from './components/CountyMap' // Future: Lazy
-import DataTable from './components/DataTable' // Future: Lazy
 import EditorPanel from './components/EditorPanel' // Future: Lazy
 import NavigationMenu from './components/NavigationMenu' // Future: Lazy
 import SingleStateMap from './components/SingleStateMap' // Future: Lazy
@@ -82,7 +83,7 @@ const hashObj = row => {
 
     return hash
   } catch (e) {
-    console.error(e)
+    console.error('COVE: ', e) // eslint-disable-line
   }
 }
 
@@ -112,7 +113,7 @@ const getUniqueValues = (data, columnName) => {
   return Object.keys(result)
 }
 
-const CdcMap = ({ className, config, navigationHandler: customNavigationHandler, isDashboard = false, isEditor = false, configUrl, logo = null, setConfig, setSharedFilter, setSharedFilterValue, hostname = 'localhost:8080', link }) => {
+const CdcMap = ({ className, config, navigationHandler: customNavigationHandler, isDashboard = false, isEditor = false, isDebug = false, configUrl, logo = null, setConfig, setSharedFilter, setSharedFilterValue, hostname = 'localhost:8080', link }) => {
   const transform = new DataTransform()
   const [state, setState] = useState({ ...initialState })
   const [loading, setLoading] = useState(true)
@@ -127,10 +128,14 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false)
   const [container, setContainer] = useState()
   const [imageId, setImageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`) // eslint-disable-line
+  const [dimensions, setDimensions] = useState()
 
+  const { changeFilterActive, handleSorting } = useFilters({ config: state, setConfig: setState })
   let legendMemo = useRef(new Map())
   let innerContainerRef = useRef()
 
+  if (isDebug) console.log('CdcMap state=', state) // eslint-disable-line
+
   useEffect(() => {
     try {
       if (filteredCountryCode) {
@@ -145,7 +150,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         })
       }
     } catch (e) {
-      console.error('Failed to set world map zoom.')
+      console.error('COVE: Failed to set world map zoom.') // eslint-disable-line
     }
   }, [filteredCountryCode]) // eslint-disable-line
 
@@ -169,6 +174,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
   const generateRuntimeLegendHash = () => {
     return hashObj({
+      unified: state.legend.unified ?? false,
+      equalNumberOptIn: state.general.equalNumberOptIn ?? false,
+      specialClassesLast: state.legend.showSpecialClassesLast ?? false,
       color: state.color,
       customColors: state.customColors,
       numberOfItems: state.legend.numberOfItems,
@@ -179,15 +187,25 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       specialClasses: state.legend.specialClasses,
       geoType: state.general.geoType,
       data: state.data,
-      ...runtimeFilters
+      ...runtimeFilters,
+      filters: {
+        ...state.filters
+      }
     })
   }
 
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
+      let { width, height } = entry.contentRect
       let newViewport = getViewport(entry.contentRect.width)
+      let editorWidth = 350
 
       setCurrentViewport(newViewport)
+
+      if (isEditor) {
+        width = width - editorWidth
+      }
+      setDimensions([width, height])
     }
   })
 
@@ -285,6 +303,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       result.fromHash = hash
     }
 
+    result.runtimeDataHash = runtimeData.fromHash
+
     // Unified will based the legend off ALL of the data maps received. Otherwise, it will use
     let dataSet = obj.legend.unified ? obj.data : Object.values(runtimeData)
 
@@ -752,9 +772,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
     if (hash) filters.fromHash = hash
 
-    obj?.filters.forEach(({ columnName, label, active, values }, idx) => {
-      if (undefined === columnName) return
-
+    obj?.filters.forEach(({ columnName, label, labels, queryParameter, orderedValues, active, values, type }, idx) => {
       let newFilter = runtimeFilters[idx]
 
       const sortAsc = (a, b) => {
@@ -765,30 +783,41 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
       }
 
-      values = getUniqueValues(state.data, columnName)
+      if (type !== 'url') {
+        values = getUniqueValues(state.data, columnName)
 
-      if (obj.filters[idx].order === 'asc') {
-        values = values.sort(sortAsc)
-      }
+        if (obj.filters[idx].order === 'asc') {
+          values = values.sort(sortAsc)
+        }
 
-      if (obj.filters[idx].order === 'desc') {
-        values = values.sort(sortDesc)
-      }
+        if (obj.filters[idx].order === 'desc') {
+          values = values.sort(sortDesc)
+        }
 
-      if (obj.filters[idx].order === 'cust') {
-        if (obj.filters[idx]?.values.length > 0) {
-          values = obj.filters[idx].values
+        if (obj.filters[idx].order === 'cust') {
+          if (obj.filters[idx]?.values.length > 0) {
+            values = obj.filters[idx].values
+          }
         }
+      } else {
+        values = values
       }
 
       if (undefined === newFilter) {
         newFilter = {}
       }
 
+      newFilter.order = obj.filters[idx].order ? obj.filters[idx].order : 'asc'
+      newFilter.type = type
       newFilter.label = label ?? ''
       newFilter.columnName = columnName
+      newFilter.orderedValues = orderedValues
+      newFilter.queryParameter = queryParameter
+      newFilter.labels = labels
       newFilter.values = values
-      newFilter.active = active || values[0] // Default to first found value
+      handleSorting(newFilter)
+      newFilter.active = active ?? values[0] // Default to first found value
+      newFilter.filterStyle = obj.filters[idx].filterStyle ? obj.filters[idx].filterStyle : 'dropdown'
 
       filters.push(newFilter)
     })
@@ -810,8 +839,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       addUIDs(obj, obj.columns.geo.name)
       obj.data.forEach(row => {
         if (test) {
-          console.log('object', obj)
-          console.log('row', row)
+          console.log('object', obj) // eslint-disable-line
+          console.log('row', row) // eslint-disable-line
         }
 
         if (undefined === row.uid) return false // No UID for this row, we can't use for mapping
@@ -841,8 +870,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         // Filters
         if (filters?.length) {
           for (let i = 0; i < filters.length; i++) {
-            const { columnName, active } = filters[i]
-            if (String(row[columnName]) !== String(active)) return false // Bail out, not part of filter
+            const { columnName, active, type } = filters[i]
+            if (type !== 'url' && String(row[columnName]) !== String(active)) return false // Bail out, not part of filter
           }
         }
 
@@ -854,7 +883,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
       return result
     } catch (e) {
-      console.error(e)
+      console.error('COVE: ', e) // eslint-disable-line
     }
   })
 
@@ -873,38 +902,12 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }
 
-  const changeFilterActive = async (idx, activeValue) => {
-    // Reset active legend toggles
-    resetLegendToggles()
-
-    try {
-      const isEmpty = obj => {
-        return Object.keys(obj).length === 0
-      }
-
-      let filters = [...runtimeFilters]
-
-      filters[idx] = { ...filters[idx] }
-      filters[idx].active = activeValue
-
-      const newData = generateRuntimeData(state, filters)
-
-      // throw an error if newData is empty
-      if (isEmpty(newData)) throw new Error('Cove Filter Error: No runtime data to set for this filter')
-
-      // set the runtime filters and data
-      setRuntimeData(newData)
-      setRuntimeFilters(filters)
-    } catch (e) {
-      console.error(e.message)
-    }
-  }
-
   const displayDataAsText = (value, columnName) => {
     if (value === null || value === '' || value === undefined) {
       return ''
     }
 
+    // if string of letters like 'Home' then dont need to format as a number
     if (typeof value === 'string' && value.length > 0 && state.legend.type === 'equalnumber') {
       return value
     }
@@ -913,6 +916,17 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
     let columnObj = state.columns[columnName]
 
+    if (columnObj === undefined) {
+      // then use left axis config
+      columnObj = state.columns.primary
+      // NOTE: Left Value Axis uses different names
+      // so map them below so the code below works
+      // - copy commas to useCommas to work below
+      columnObj['useCommas'] = columnObj.commas
+      // - copy roundTo to roundToPlace to work below
+      columnObj['roundToPlace'] = columnObj.roundTo ? columnObj.roundTo : ''
+    }
+
     if (columnObj) {
       // If value is a number, apply specific formattings
       if (Number(value)) {
@@ -970,7 +984,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       // Fail state
       return generateColorsArray()
     } catch (e) {
-      console.error(e)
+      console.error('COVE: ', e) // eslint-disable-line
     }
   }
 
@@ -1000,16 +1014,16 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         const column = state.columns[columnKey]
 
         if (true === column.tooltip) {
-          let label = column.label.length > 0 ? column.label : ''
+          let label = column.label?.length > 0 ? column.label : ''
 
           let value
 
           if (state.legend.specialClasses && state.legend.specialClasses.length && typeof state.legend.specialClasses[0] === 'object') {
             // THIS CODE SHOULD NOT ACT ON THE ENTIRE ROW OF KEYS BUT ONLY THE ONE KEY IN THE SPECIAL CLASS
             for (let i = 0; i < state.legend.specialClasses.length; i++) {
-              // DEV-3303 - Special Classes label in HOVERS should only apply to selected special class key
+              // Special Classes label in HOVERS should only apply to selected special class key
               // - you have to ALSO check that the key matches - putting here otherwise the if stmt too long
-              if (columnKey === state.legend.specialClasses[i].key) {
+              if (column.name === state.legend.specialClasses[i].key) {
                 if (String(row[state.legend.specialClasses[i].key]) === state.legend.specialClasses[i].value) {
                   value = displayDataAsText(state.legend.specialClasses[i].label, columnKey)
                   break
@@ -1053,25 +1067,29 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   // - this function is used to prevent that and instead give the formatting that is wanted
   // Example:  Desired city display in tooltip on map: "Inter-Tribal Indian Reservation"
   const titleCase = string => {
-    // if hyphen found, then split, uppercase each word, and put back together
-    if (string.includes('–') || string.includes('-')) {
-      let dashSplit = string.includes('–') ? string.split('–') : string.split('-') // determine hyphen or en dash to split on
-      let splitCharacter = string.includes('–') ? '–' : '-' // print hyphen or en dash later on.
-      let frontSplit = dashSplit[0]
-        .split(' ')
-        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
-        .join(' ')
-      let backSplit = dashSplit[1]
-        .split(' ')
-        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
-        .join(' ')
-      return frontSplit + splitCharacter + backSplit
-    } else {
-      // just return with each word uppercase
-      return string
-        .split(' ')
-        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
-        .join(' ')
+    // guard clause else error in editor
+    if (!string) return
+    if (string !== undefined) {
+      // if hyphen found, then split, uppercase each word, and put back together
+      if (string.includes('–') || string.includes('-')) {
+        let dashSplit = string.includes('–') ? string.split('–') : string.split('-') // determine hyphen or en dash to split on
+        let splitCharacter = string.includes('–') ? '–' : '-' // print hyphen or en dash later on.
+        let frontSplit = dashSplit[0]
+          .split(' ')
+          .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+          .join(' ')
+        let backSplit = dashSplit[1]
+          .split(' ')
+          .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+          .join(' ')
+        return frontSplit + splitCharacter + backSplit
+      } else {
+        // just return with each word uppercase
+        return string
+          .split(' ')
+          .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+          .join(' ')
+      }
     }
   }
 
@@ -1083,6 +1101,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       delete legendItem.disabled
     })
 
+    newLegend.runtimeDataHash = runtimeLegend.runtimeDataHash
+
     setRuntimeLegend(newLegend)
   }
 
@@ -1201,7 +1221,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   }
 
   const handleMapAriaLabels = (state = '', testing = false) => {
-    if (testing) console.log(`handleMapAriaLabels Testing On: ${state}`)
+    if (testing) console.log(`handleMapAriaLabels Testing On: ${state}`) // eslint-disable-line
     try {
       if (!state.general.geoType) throw Error('handleMapAriaLabels: no geoType found in state')
       let ariaLabel = ''
@@ -1232,7 +1252,68 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
       return ariaLabel
     } catch (e) {
-      console.error(e.message)
+      console.error('COVE: ', e.message) // eslint-disable-line
+    }
+  }
+
+  const reloadURLData = async () => {
+    if (state.dataUrl) {
+      const dataUrl = new URL(state.runtimeDataUrl || state.dataUrl)
+      let qsParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
+
+      let isUpdateNeeded = false
+      state.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) {
+          data = await fetch(dataUrlFinal)
+            .then(response => response.text())
+            .then(responseText => {
+              const parsedCsv = Papa.parse(responseText, {
+                header: true,
+                dynamicTyping: true,
+                skipEmptyLines: true
+              })
+              return parsedCsv.data
+            })
+        } else if ('json' === ext) {
+          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 (state.dataDescription) {
+        data = transform.autoStandardize(data)
+        data = transform.developerStandardize(data, state.dataDescription)
+      }
+
+      setState({ ...state, runtimeDataUrl: dataUrlFinal, data })
     }
   }
 
@@ -1246,8 +1327,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       ...configObj
     }
 
-    // If a dataUrl property exists, always pull from that.
-    if (newState.dataUrl) {
+    const urlFilters = newState.filters ? (newState.filters.filter(filter => filter.type === 'url').length > 0 ? true : false) : false
+
+    if (newState.dataUrl && !urlFilters) {
       if (newState.dataUrl[0] === '/') {
         newState.dataUrl = 'http://' + hostname + newState.dataUrl
       }
@@ -1286,8 +1368,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       addUIDs(newState, newState.columns.geo.name || newState.columns.geo.fips)
     }
 
-    if (newState.dataTable.forceDisplay === undefined) {
-      newState.dataTable.forceDisplay = !isDashboard
+    if (newState.table.forceDisplay === undefined) {
+      newState.table.forceDisplay = !isDashboard
     }
 
     validateFipsCodeLength(newState)
@@ -1342,16 +1424,16 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
   // DEV-769 make "Data Table" both a required field and default value
   useEffect(() => {
-    if (state.dataTable?.title === '' || state.dataTable?.title === undefined) {
+    if (state.table?.label === '' || state.table?.label === undefined) {
       setState({
         ...state,
-        dataTable: {
-          ...state.dataTable,
+        table: {
+          ...state.table,
           title: 'Data Table'
         }
       })
     }
-  }, [state.dataTable]) // eslint-disable-line
+  }, [state.table]) // eslint-disable-line
 
   // When geo label override changes
   // - redo the tooltips
@@ -1391,16 +1473,14 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     })
 
     // Data
-    let newRuntimeData
     if (hashData !== runtimeData.fromHash && state.data?.fromColumn) {
       const newRuntimeData = generateRuntimeData(state, filters || runtimeFilters, hashData)
       setRuntimeData(newRuntimeData)
-    }
-
-    // Legend
-    if (hashLegend !== runtimeLegend.fromHash && (undefined === runtimeData.init || newRuntimeData)) {
-      const legend = generateRuntimeLegend(state, newRuntimeData || runtimeData, hashLegend)
-      setRuntimeLegend(legend)
+    } else {
+      if (hashLegend !== runtimeLegend.fromHash && undefined === runtimeData.init) {
+        const legend = generateRuntimeLegend(state, runtimeData, hashLegend)
+        setRuntimeLegend(legend)
+      }
     }
   }, [state]) // eslint-disable-line
 
@@ -1412,7 +1492,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       const legend = generateRuntimeLegend(state, runtimeData, hashLegend)
       setRuntimeLegend(legend)
     }
-  }, [runtimeData]) // eslint-disable-line
+  }, [runtimeData, state.legend.unified, state.legend.showSpecialClassesLast, state.legend.separateZero, state.general.equalNumberOptIn, state.legend.numberOfItems, state.legend.specialClasses]) // eslint-disable-line
+
+  useEffect(() => {
+    reloadURLData()
+  }, [JSON.stringify(state.filters)])
 
   if (config) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -1422,14 +1506,14 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   }
 
   // Destructuring for more readable JSX
-  const { general, tooltips, dataTable } = state
+  const { general, tooltips, table } = state
   let { title, subtext = '' } = general
 
   // if no title AND in editor then set a default
   if (isEditor) {
     if (!title || title === '') title = 'Map Title'
   }
-  if (!dataTable.title || dataTable.title === '') dataTable.title = 'Data Table'
+  if (!table.label || table.label === '') table.label = 'Data Table'
 
   // Outer container classes
   let outerContainerClasses = ['cdc-open-viz-module', 'cdc-map-outer-container', currentViewport]
@@ -1475,12 +1559,13 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     runtimeFilters,
     setRuntimeFilters,
     innerContainerRef,
-    currentViewport
+    currentViewport,
+    isDebug
   }
 
   if (!mapProps.data || !state.data) return <Loading />
 
-  const hasDataTable = state.runtime.editorErrorMessage.length === 0 && true === dataTable.forceDisplay && general.type !== 'navigation' && false === loading
+  const hasDataTable = state.runtime.editorErrorMessage.length === 0 && true === table.forceDisplay && general.type !== 'navigation' && false === loading
 
   const handleMapTabbing = () => {
     let tabbingID
@@ -1506,12 +1591,20 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
   const tabId = handleMapTabbing()
 
+  // this only shows in Dashboard config mode and only if Show Table is also set
+  const tableLink = (
+    <a href={`#data-table-${state.general.dataKey}`} className='margin-left-href'>
+      {state.general.dataKey} (Go to Table)
+    </a>
+  )
+
   return (
     <ConfigContext.Provider value={mapProps}>
       <div className={outerContainerClasses.join(' ')} ref={outerContainerRef} data-download-id={imageId}>
         {isEditor && (
           <EditorPanel
             isDashboard={isDashboard}
+            isDebug={isDebug}
             state={state}
             setState={setState}
             loadConfig={loadConfig}
@@ -1537,7 +1630,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
             )}
             {general.introText && <section className='introText'>{parse(general.introText)}</section>}
 
-            <Filters />
+            {/* prettier-ignore */}
+            {state?.filters?.length > 0 && <Filters config={state} setConfig={setState} filteredData={runtimeFilters} setFilteredData={setRuntimeFilters} dimensions={dimensions} />}
 
             <div
               role='button'
@@ -1591,7 +1685,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
             {'navigation' === general.type && <NavigationMenu mapTabbingID={tabId} displayGeoName={displayGeoName} data={runtimeData} options={general} columns={state.columns} navigationHandler={val => navigationHandler(val)} />}
 
-            {link && link}
+            {/* Link */}
+            {isDashboard && config.table?.forceDisplay && config.table.showDataTableLink ? tableLink : link && link}
 
             {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
 
@@ -1600,12 +1695,12 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
               {state.general.showDownloadPdfButton && <CoveMediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={state} elementToCapture={imageId} />}
             </CoveMediaControls.Section>
 
-            {state.runtime.editorErrorMessage.length === 0 && true === dataTable.forceDisplay && general.type !== 'navigation' && false === loading && (
+            {state.runtime.editorErrorMessage.length === 0 && true === table.forceDisplay && general.type !== 'navigation' && false === loading && (
               <DataTable
-                state={state}
+                config={state}
                 rawData={state.data}
                 navigationHandler={navigationHandler}
-                expandDataTable={general.expandDataTable}
+                expandDataTable={general.expandDataTable ? general.expandDataTable : table.expanded ? table.expanded : false}
                 headerColor={general.headerColor}
                 columns={state.columns}
                 showDownloadButton={general.showDownloadButton}
@@ -1614,9 +1709,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
                 displayDataAsText={displayDataAsText}
                 displayGeoName={displayGeoName}
                 applyLegendToRow={applyLegendToRow}
-                tableTitle={dataTable.title}
-                indexTitle={dataTable.indexLabel}
-                mapTitle={general.title}
+                tableTitle={table.label}
+                indexTitle={table.indexLabel}
+                vizTitle={general.title}
                 viewport={currentViewport}
                 formatLegendLocation={formatLegendLocation}
                 setFilteredCountryCode={setFilteredCountryCode}
@@ -1626,6 +1721,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
                 innerContainerRef={innerContainerRef}
                 outerContainerRef={outerContainerRef}
                 imageRef={imageId}
+                isDebug={isDebug}
               />
             )}