@cdc/map 4.22.10 → 4.23.1

package/src/CdcMap.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, memo, useCallback } from 'react'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
 import * as d3 from 'd3'
 
 // IE11
@@ -10,42 +10,25 @@ import ResizeObserver from 'resize-observer-polyfill'
 import ReactTooltip from 'react-tooltip'
 import chroma from 'chroma-js'
 import parse from 'html-react-parser'
-import html2pdf from 'html2pdf.js'
-import html2canvas from 'html2canvas'
-import Canvg from 'canvg'
 
 // Data
 import colorPalettes from '../../core/data/colorPalettes'
 import ExternalIcon from './images/external-link.svg'
-import {
-  supportedStates,
-  supportedTerritories,
-  supportedCountries,
-  supportedCounties,
-  supportedCities,
-  supportedStatesFipsCodes,
-  stateFipsToTwoDigit,
-  supportedRegions
-} from './data/supported-geos'
+import { supportedStates, supportedTerritories, supportedCountries, supportedCounties, supportedCities, supportedStatesFipsCodes, stateFipsToTwoDigit, supportedRegions } from './data/supported-geos'
 import initialState from './data/initial-state'
 import { countryCoordinates } from './data/country-coordinates'
+import CoveMediaControls from '@cdc/core/helpers/CoveMediaControls'
 
 // Sass
 import './scss/main.scss'
 import './scss/btn.scss'
 
-// Images
-// TODO: Move to Icon component
-import DownloadImg from './images/icon-download-img.svg'
-import DownloadPdf from './images/icon-download-pdf.svg'
-
 // Core
-import Loading from '@cdc/core/components/Loading';
-import { DataTransform } from '@cdc/core/helpers/DataTransform';
-import getViewport from '@cdc/core/helpers/getViewport';
-import numberFromString from '@cdc/core/helpers/numberFromString';
-import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData';
-import cacheBustingString from '@cdc/core/helpers/cacheBustingString';
+import Loading from '@cdc/core/components/Loading'
+import { DataTransform } from '@cdc/core/helpers/DataTransform'
+import getViewport from '@cdc/core/helpers/getViewport'
+import numberFromString from '@cdc/core/helpers/numberFromString'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 
 // Child Components
 import Sidebar from './components/Sidebar'
@@ -58,6 +41,8 @@ import DataTable from './components/DataTable' // Future: Lazy
 import NavigationMenu from './components/NavigationMenu' // Future: Lazy
 import WorldMap from './components/WorldMap' // Future: Lazy
 import SingleStateMap from './components/SingleStateMap' // Future: Lazy
+import Filters from './components/Filters'
+import Context from './context'
 
 import { publish } from '@cdc/core/helpers/events'
 
@@ -73,14 +58,10 @@ const generateColorsArray = (color = '#000000', special = false) => {
   let colorObj = chroma(color)
   let hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
 
-  return [
-    color,
-    hoverColor,
-    colorObj.darken(0.3).hex()
-  ]
+  return [color, hoverColor, colorObj.darken(0.3).hex()]
 }
 
-const hashObj = (row) => {
+const hashObj = row => {
   try {
     if (!row) throw new Error('No row supplied to hashObj')
 
@@ -91,7 +72,7 @@ const hashObj = (row) => {
 
     for (let i = 0; i < str.length; i++) {
       let char = str.charCodeAt(i)
-      hash = ((hash << 5) - hash) + char
+      hash = (hash << 5) - hash + char
       hash = hash & hash
     }
 
@@ -119,31 +100,31 @@ const getUniqueValues = (data, columnName) => {
 }
 
 const CdcMap = ({ className, config, navigationHandler: customNavigationHandler, isDashboard = false, isEditor = false, configUrl, logo = null, setConfig, setSharedFilter, setSharedFilterValue, hostname = 'localhost:8080', link }) => {
-  const [ showLoadingMessage, setShowLoadingMessage ] = useState(false)
   const transform = new DataTransform()
-  const [ state, setState ] = useState({ ...initialState })
-  const [ loading, setLoading ] = useState(true)
-  const [ currentViewport, setCurrentViewport ] = useState()
-  const [ runtimeFilters, setRuntimeFilters ] = useState([])
-  const [ runtimeLegend, setRuntimeLegend ] = useState([])
-  const [ runtimeData, setRuntimeData ] = useState({ init: true })
-  const [ modal, setModal ] = useState(null)
-  const [ accessibleStatus, setAccessibleStatus ] = useState('')
-  const [ filteredCountryCode, setFilteredCountryCode ] = useState()
-  const [ position, setPosition ] = useState(state.mapPosition)
-  const [ coveLoadedHasRan, setCoveLoadedHasRan ] = useState(false)
-  const [ container, setContainer ] = useState()
+  const [state, setState] = useState({ ...initialState })
+  const [loading, setLoading] = useState(true)
+  const [currentViewport, setCurrentViewport] = useState()
+  const [runtimeFilters, setRuntimeFilters] = useState([])
+  const [runtimeLegend, setRuntimeLegend] = useState([])
+  const [runtimeData, setRuntimeData] = useState({ init: true })
+  const [modal, setModal] = useState(null)
+  const [accessibleStatus, setAccessibleStatus] = useState('')
+  const [filteredCountryCode, setFilteredCountryCode] = useState()
+  const [position, setPosition] = useState(state.mapPosition)
+  const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false)
+  const [container, setContainer] = useState()
+  const [imageId, setImageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`) // eslint-disable-line
 
   let legendMemo = useRef(new Map())
+  let innerContainerRef = useRef()
 
   useEffect(() => {
     try {
       if (filteredCountryCode) {
-        const filteredCountryObj = runtimeData[filteredCountryCode]
         const coordinates = countryCoordinates[filteredCountryCode]
         const long = coordinates[1]
         const lat = coordinates[0]
-        const reversedCoordinates = [ long, lat ]
+        const reversedCoordinates = [long, lat]
 
         setState({
           ...state,
@@ -153,7 +134,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     } catch (e) {
       console.error('Failed to set world map zoom.')
     }
-  }, [ filteredCountryCode ])
+  }, [filteredCountryCode])
 
   useEffect(() => {
     setTimeout(() => {
@@ -165,20 +146,13 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         setRuntimeData(tmpData)
       }
     }, 100)
-  }, [ filteredCountryCode ])
+  }, [filteredCountryCode])
 
   useEffect(() => {
     if (state.mapPosition) {
       setPosition(state.mapPosition)
     }
-  }, [ state.mapPosition, setPosition ])
-
-  const setZoom = (reversedCoordinates) => {
-    setState({
-      ...state,
-      mapPosition: { coordinates: reversedCoordinates, zoom: 3 }
-    })
-  }
+  }, [state.mapPosition, setPosition])
 
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
@@ -207,16 +181,16 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         }
 
         // States
-        uid = stateKeys.find((key) => supportedStates[key].includes(geoName))
+        uid = stateKeys.find(key => supportedStates[key].includes(geoName))
 
         // Territories
         if (!uid) {
-          uid = territoryKeys.find((key) => supportedTerritories[key].includes(geoName))
+          uid = territoryKeys.find(key => supportedTerritories[key].includes(geoName))
         }
 
         // Cities
         if (!uid) {
-          uid = cityKeys.find((key) => key === geoName)
+          uid = cityKeys.find(key => key === geoName)
         }
       }
 
@@ -230,20 +204,20 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         }
 
         // Regions
-        uid = regionKeys.find((key) => supportedRegions[key].includes(geoName))
+        uid = regionKeys.find(key => supportedRegions[key].includes(geoName))
       }
 
       // World Check
       if ('world' === obj.general.geoType) {
         const geoName = row[obj.columns.geo.name]
 
-        uid = countryKeys.find((key) => supportedCountries[key].includes(geoName))
+        uid = countryKeys.find(key => supportedCountries[key].includes(geoName))
       }
 
       // County Check
       if (('us-county' === obj.general.geoType || 'single-state' === obj.general.geoType) && 'us-geocode' !== obj.general.type) {
         const fips = row[obj.columns.geo.name]
-        uid = countyKeys.find((key) => key === fips)
+        uid = countyKeys.find(key => key === fips)
       }
 
       if ('us-geocode' === state.general.type) {
@@ -263,9 +237,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
   const generateRuntimeLegend = useCallback((obj, runtimeData, hash) => {
     const newLegendMemo = new Map() // Reset memoization
-    const
-      primaryCol = obj.columns.primary.name,
-      isData = obj.general.type === 'data',
+    const primaryCol = obj.columns.primary.name,
       isBubble = obj.general.type === 'bubble',
       categoricalCol = obj.columns.categorical ? obj.columns.categorical.name : undefined,
       type = obj.legend.type,
@@ -281,19 +253,19 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     let dataSet = obj.legend.unified ? obj.data : Object.values(runtimeData)
 
     const colorDistributions = {
-      1: [ 1 ],
-      2: [ 1, 3 ],
-      3: [ 1, 3, 5 ],
-      4: [ 0, 2, 4, 6 ],
-      5: [ 0, 2, 4, 6, 7 ],
-      6: [ 0, 2, 3, 4, 5, 7 ],
-      7: [ 0, 2, 3, 4, 5, 6, 7 ],
-      8: [ 0, 2, 3, 4, 5, 6, 7, 8 ],
-      9: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ],
-      10: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
+      1: [1],
+      2: [1, 3],
+      3: [1, 3, 5],
+      4: [0, 2, 4, 6],
+      5: [0, 2, 4, 6, 7],
+      6: [0, 2, 3, 4, 5, 7],
+      7: [0, 2, 3, 4, 5, 6, 7],
+      8: [0, 2, 3, 4, 5, 6, 7, 8],
+      9: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+      10: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
     }
 
-    const applyColorToLegend = (legendIdx) => {
+    const applyColorToLegend = legendIdx => {
       // Default to "bluegreen" color scheme if the passed color isn't valid
       let mapColorPalette = obj.customColors || colorPalettes[obj.color] || colorPalettes['bluegreen']
 
@@ -310,7 +282,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
       // Special Classes (No Data)
       if (result[legendIdx].special) {
-        const specialClassColors = chroma.scale([ '#D4D4D4', '#939393' ]).colors(specialClasses)
+        const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses)
 
         return specialClassColors[legendIdx]
       }
@@ -410,7 +382,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         if (undefined === value) continue
 
         if (false === uniqueValues.has(value)) {
-          uniqueValues.set(value, [ hashObj(row) ])
+          uniqueValues.set(value, [hashObj(row)])
           count++
         } else {
           uniqueValues.get(value).push(hashObj(row))
@@ -419,16 +391,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         if (count === 10) break // Can only have 10 categorical items for now
       }
 
-      let sorted = [ ...uniqueValues.keys() ]
+      let sorted = [...uniqueValues.keys()]
 
       // Apply custom sorting or regular sorting
       let configuredOrder = obj.legend.categoryValuesOrder ?? []
 
-      // Coerce strings to numbers inside configuredOrder property
-      for(let i = 0; i < configuredOrder.length; i++) {
-          configuredOrder[i] = numberFromString(configuredOrder[i])
-      }
-
       if (configuredOrder.length) {
         sorted.sort((a, b) => {
           return configuredOrder.indexOf(a) - configuredOrder.indexOf(b)
@@ -438,9 +405,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       }
 
       // Add legend item for each
-      sorted.forEach((val) => {
+      sorted.forEach(val => {
         result.push({
-          value: val,
+          value: val
         })
 
         let lastIdx = result.length - 1
@@ -500,12 +467,14 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
     // Sort data for use in equalnumber or equalinterval
     if (state.general.type !== 'us-geocode') {
-      dataSet = dataSet.filter(row => typeof row[primaryCol] === 'number').sort((a, b) => {
-        let aNum = a[primaryCol]
-        let bNum = b[primaryCol]
+      dataSet = dataSet
+        .filter(row => typeof row[primaryCol] === 'number')
+        .sort((a, b) => {
+          let aNum = a[primaryCol]
+          let bNum = b[primaryCol]
 
-        return aNum - bNum
-      })
+          return aNum - bNum
+        })
     }
 
     // Equal Number
@@ -558,8 +527,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         let colors = colorPalettes[state.color]
         let colorRange = colors.slice(0, state.legend.numberOfItems)
 
-        let scale = d3.scaleQuantile()
-          .domain([ ...new Set(dataSet.map(item => Math.round(item[state.columns.primary.name]))) ]) // min/max values
+        let scale = d3
+          .scaleQuantile()
+          .domain([...new Set(dataSet.map(item => Math.round(item[state.columns.primary.name])))]) // min/max values
           .range(colorRange) // set range to our colors array
 
         let breaks = scale.quantiles()
@@ -572,8 +542,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         }
 
         breaks.map((item, index) => {
-          const setMin = (index) => {
-            //debugger;
+          const setMin = index => {
             let min = breaks[index]
 
             // if first break is a seperated zero, min is zero
@@ -665,7 +634,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       for (let i = 0; i < legendNumber; i++) {
         let interval = Math.abs(dataMax - dataMin) / legendNumber
 
-        let min = dataMin + (interval * i)
+        let min = dataMin + interval * i
         let max = min + interval
 
         // If this is the last loop, assign actual max of data as the end point
@@ -679,7 +648,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
         let range = {
           min: Math.round(min * 100) / 100,
-          max: Math.round(max * 100) / 100,
+          max: Math.round(max * 100) / 100
         }
 
         result.push(range)
@@ -768,11 +737,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         if (undefined === row.uid) return false // No UID for this row, we can't use for mapping
 
         // When on a single state map filter runtime data by state
-        if (
-          !(String(row[obj.columns.geo.name]).substring(0, 2) === obj.general?.statePicked?.fipsCode) &&
-          obj.general.geoType === 'single-state' &&
-          obj.general.type !== 'us-geocode'
-        ) {
+        if (!(String(row[obj.columns.geo.name]).substring(0, 2) === obj.general?.statePicked?.fipsCode) && obj.general.geoType === 'single-state' && obj.general.type !== 'us-geocode') {
           return false
         }
 
@@ -828,105 +793,16 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }
 
-  const saveImageAs = (uri, filename) => {
-    const ie = navigator.userAgent.match(/MSIE\s([\d.]+)/)
-    const ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/)
-    const ieEdge = navigator.userAgent.match(/Edge/g)
-    const ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEdge ? 12 : -1)))
-
-    if (ieVer > -1) {
-      const fileAsBlob = new Blob([ uri ], {
-        type: 'image/png'
-      })
-      window.navigator.msSaveBlob(fileAsBlob, filename)
-    } else {
-      const link = document.createElement('a')
-      if (typeof link.download === 'string') {
-        link.href = uri
-        link.download = filename
-        link.onclick = (e) => document.body.removeChild(e.target)
-        document.body.appendChild(link)
-        link.click()
-      } else {
-        window.open(uri)
-      }
-    }
-  }
-
-  const generateMedia = (target, type) => {
-    // Convert SVG to canvas
-    const baseSvg = mapSvg.current.querySelector('.rsm-svg')
-
-    const ratio = baseSvg.getBoundingClientRect().height / baseSvg.getBoundingClientRect().width
-    const calcHeight = ratio * 1440
-    const xmlSerializer = new XMLSerializer()
-    const svgStr = xmlSerializer.serializeToString(baseSvg)
-    const options = { log: false, ignoreMouse: true }
-    const canvas = document.createElement('canvas')
-    const ctx = canvas.getContext('2d')
-    ctx.canvas.width = 1440
-    ctx.canvas.height = calcHeight
-    const canvg = Canvg.fromString(ctx, svgStr, options)
-    canvg.start()
-
-    // Generate DOM <img> from svg data
-    const generatedImage = document.createElement('img')
-    generatedImage.src = canvas.toDataURL('image/png')
-    generatedImage.style.width = '100%'
-    generatedImage.style.height = 'auto'
-
-    baseSvg.style.display = 'none' // Hide default SVG during media generation
-    baseSvg.parentNode.insertBefore(generatedImage, baseSvg.nextSibling) // Insert png generated from canvas of svg
-
-    // Construct filename with timestamp
-    const date = new Date()
-    const filename = state.general.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
-
-    switch (type) {
-      case 'image':
-        return html2canvas(target, {
-          allowTaint: true,
-          backgroundColor: '#ffffff',
-          width: 1440,
-          windowWidth: 1440,
-          scale: 1,
-          logging: false
-        }).then(canvas => {
-          saveImageAs(canvas.toDataURL(), filename + '.png')
-        }).then(() => {
-          generatedImage.remove() // Remove generated png
-          baseSvg.style.display = null // Re-display initial svg map
-        })
-      case 'pdf':
-        let opt = {
-          margin: 0.2,
-          filename: filename + '.pdf',
-          image: { type: 'png' },
-          html2canvas: { scale: 2, logging: false },
-          jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
-        }
-
-        html2pdf().set(opt).from(target).save().then(() => {
-          generatedImage.remove() // Remove generated png
-          baseSvg.style.display = null // Re-display initial svg map
-        })
-        break
-      default:
-        console.warn('generateMedia param 2 type must be \'image\' or \'pdf\'')
-        break
-    }
-  }
-
   const changeFilterActive = async (idx, activeValue) => {
     // Reset active legend toggles
     resetLegendToggles()
 
     try {
-      const isEmpty = (obj) => {
+      const isEmpty = obj => {
         return Object.keys(obj).length === 0
       }
 
-      let filters = [ ...runtimeFilters ]
+      let filters = [...runtimeFilters]
 
       filters[idx] = { ...filters[idx] }
       filters[idx].active = activeValue
@@ -988,7 +864,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     return formattedValue
   }
 
-  const applyLegendToRow = (rowObj) => {
+  const applyLegendToRow = rowObj => {
     try {
       if (!rowObj) throw new Error('COVE: No rowObj in applyLegendToRow')
       // Navigation map
@@ -1013,16 +889,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   }
 
   const applyTooltipsToGeo = (geoName, row, returnType = 'string') => {
-
-    if(!row) return;
+    if (!row) return
     let toolTipText = ''
 
     // Adds geo label, ie State: Georgia
-    let stateOrCounty = state.general.geoType === 'us'
-      ? 'State: '
-      : (state.general.geoType === 'us-county' || state.general.geoType === 'single-state')
-        ? 'County: '
-        : ''
+    let stateOrCounty = state.general.geoType === 'us' ? 'State: ' : state.general.geoType === 'us-county' || state.general.geoType === 'single-state' ? 'County: ' : ''
 
     if (state.general.geoType === 'us-county' && state.general.type !== 'us-geocode') {
       let stateFipsCode = row[state.columns.geo.name].substring(0, 2)
@@ -1036,7 +907,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     if (('data' === state.general.type || state.general.type === 'bubble' || state.general.type === 'us-geocode') && undefined !== row) {
       toolTipText += `<dl>`
 
-      Object.keys(state.columns).forEach((columnKey) => {
+      Object.keys(state.columns).forEach(columnKey => {
         const column = state.columns[columnKey]
 
         if (true === column.tooltip) {
@@ -1057,7 +928,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
             value = displayDataAsText(row[column.name], columnKey)
           }
 
-          if (0 < value.length) { // Only spit out the tooltip if there's a value there
+          if (0 < value.length) {
+            // Only spit out the tooltip if there's a value there
             toolTipText += state.general.hidePrimaryColumnInTooltip ? `<div><dd>${value}</dd></div>` : `<div><dt>${label}</dt><dd>${value}</dd></div>`
           }
         }
@@ -1067,23 +939,47 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
     // We convert the markup into JSX and add a navigation link if it's going into a modal.
     if ('jsx' === returnType) {
-      toolTipText = [ (<div key="modal-content">{parse(toolTipText)}</div>) ]
+      toolTipText = [<div key='modal-content'>{parse(toolTipText)}</div>]
 
       if (state.columns.hasOwnProperty('navigate') && row[state.columns.navigate.name]) {
-        toolTipText.push((<span className="navigation-link" key="modal-navigation-link" onClick={() => navigationHandler(row[state.columns.navigate.name])}>{state.tooltips.linkLabel}<ExternalIcon className="inline-icon ml-1"/></span>))
+        toolTipText.push(
+          <span className='navigation-link' key='modal-navigation-link' onClick={() => navigationHandler(row[state.columns.navigate.name])}>
+            {state.tooltips.linkLabel}
+            <ExternalIcon className='inline-icon ml-1' />
+          </span>
+        )
       }
     }
 
     return toolTipText
   }
 
-  const titleCase = (string) => {
-    return string.split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()).join(' ')
+  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 upper cased
+      return string
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+        .join(' ')
+    }
   }
 
   // This resets all active legend toggles.
   const resetLegendToggles = async () => {
-    let newLegend = [ ...runtimeLegend ]
+    let newLegend = [...runtimeLegend]
 
     newLegend.forEach(legendItem => {
       delete legendItem.disabled
@@ -1092,7 +988,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     setRuntimeLegend(newLegend)
   }
 
-  const formatLegendLocation = (key) => {
+  const formatLegendLocation = key => {
     let value = key
     let formattedName = ''
     let stateName = stateFipsToTwoDigit[key.substring(0, 2)]
@@ -1109,9 +1005,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   }
 
   // Attempts to find the corresponding value
-  const displayGeoName = (key) => {
+  const displayGeoName = key => {
     let value = key
-
     // Map to first item in values array which is the preferred label
     if (stateKeys.includes(value)) {
       value = titleCase(supportedStates[key][0])
@@ -1132,9 +1027,9 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     const dict = {
       'Washington D.C.': 'District of Columbia',
       'WASHINGTON DC': 'District of Columbia',
-      'DC': 'District of Columbia',
+      DC: 'District of Columbia',
       'WASHINGTON DC.': 'District of Columbia',
-      'Congo': 'Republic of the Congo'
+      Congo: 'Republic of the Congo'
     }
 
     if (true === Object.keys(dict).includes(value)) {
@@ -1143,7 +1038,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     return titleCase(value)
   }
 
-  const navigationHandler = (urlString) => {
+  const navigationHandler = urlString => {
     // Call custom navigation method if passed
     if (customNavigationHandler) {
       customNavigationHandler(urlString)
@@ -1182,12 +1077,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }
 
-  const validateFipsCodeLength = (newState) => {
-    if (newState.general.geoType === 'us-county' || newState.general.geoType === 'single-state' || newState.general.geoType === 'us' && newState?.data) {
-
+  const validateFipsCodeLength = newState => {
+    if (newState.general.geoType === 'us-county' || newState.general.geoType === 'single-state' || (newState.general.geoType === 'us' && newState?.data)) {
       newState?.data.forEach(dataPiece => {
         if (dataPiece[newState.columns.geo.name]) {
-
           if (!isNaN(parseInt(dataPiece[newState.columns.geo.name])) && dataPiece[newState.columns.geo.name].length === 4) {
             dataPiece[newState.columns.geo.name] = 0 + dataPiece[newState.columns.geo.name]
           }
@@ -1234,7 +1127,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
   }
 
-  const loadConfig = async (configObj) => {
+  const loadConfig = async configObj => {
     // Set loading flag
     if (!loading) setLoading(true)
 
@@ -1244,16 +1137,15 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       ...configObj
     }
 
+    // If a dataUrl property exists, always pull from that.
+    if (newState.dataUrl) {
+      if (newState.dataUrl[0] === '/') {
+        newState.dataUrl = 'http://' + hostname + newState.dataUrl
+      }
 
-        // If a dataUrl property exists, always pull from that.
-        if (newState.dataUrl) {
-            if(newState.dataUrl[0] === '/') {
-                newState.dataUrl = 'http://' + hostname + newState.dataUrl
-            }
-
-            // handle urls with spaces in the name.
-            if (newState.dataUrl) newState.dataUrl = encodeURI(`${newState.dataUrl}?v=${cacheBustingString()}`)
-            let newData = await fetchRemoteData(newState.dataUrl )
+      // handle urls with spaces in the name.
+      if (newState.dataUrl) newState.dataUrl = encodeURI(`${newState.dataUrl}`)
+      let newData = await fetchRemoteData(newState.dataUrl, 'map')
 
       if (newData && newState.dataDescription) {
         newData = transform.autoStandardize(newData)
@@ -1268,10 +1160,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     // This code goes through and adds the defaults for every property declaring in the initial state at the top.
     // This allows you to easily add new properties to the config without having to worry about accounting for backwards compatibility.
     // Right now this does not work recursively -- only on first and second level properties. So state -> prop1 -> childprop1
-    Object.keys(newState).forEach((key) => {
+    Object.keys(newState).forEach(key => {
       if ('object' === typeof newState[key] && false === Array.isArray(newState[key])) {
         if (initialState[key]) {
-          Object.keys(initialState[key]).forEach((property) => {
+          Object.keys(initialState[key]).forEach(property => {
             if (undefined === newState[key][property]) {
               newState[key][property] = initialState[key][property]
             }
@@ -1323,14 +1215,14 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       publish('cove_loaded', { config: state })
       setCoveLoadedHasRan(true)
     }
-  }, [ state, container ])
+  }, [state, container])
 
   useEffect(() => {
     if (state.data) {
       let newData = generateRuntimeData(state)
       setRuntimeData(newData)
     }
-  }, [ state.general.statePicked ])
+  }, [state.general.statePicked])
 
   // When geotype changes
   useEffect(() => {
@@ -1338,7 +1230,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     if (state.data && state.columns.geo.name) {
       addUIDs(state, state.columns.geo.name)
     }
-  }, [ state ])
+  }, [state])
 
   useEffect(() => {
     // UID
@@ -1368,7 +1260,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       specialClasses: state.legend.specialClasses,
       geoType: state.general.geoType,
       data: state.data,
-      ...runtimeLegend
+      ...runtimeLegend,
+      ...runtimeFilters
     })
 
     const hashData = hashObj({
@@ -1379,7 +1272,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       primary: state.columns.primary.name,
       data: state.data,
       ...runtimeFilters,
-      mapPosition: state.mapPosition
+      mapPosition: state.mapPosition,
+      ...runtimeFilters
     })
 
     // Data
@@ -1394,8 +1288,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       const legend = generateRuntimeLegend(state, newRuntimeData || runtimeData, hashLegend)
       setRuntimeLegend(legend)
     }
-
-  }, [ state ])
+  }, [state])
 
   useEffect(() => {
     const hashLegend = hashObj({
@@ -1415,13 +1308,12 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       const legend = generateRuntimeLegend(state, runtimeData)
       setRuntimeLegend(legend)
     }
-
-  }, [ runtimeData ])
+  }, [runtimeData])
 
   if (config) {
     useEffect(() => {
       loadConfig(config)
-    }, [ config.data ])
+    }, [config.data])
   }
 
   // Destructuring for more readable JSX
@@ -1429,24 +1321,14 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const { title = '', subtext = '' } = general
 
   // Outer container classes
-  let outerContainerClasses = [
-    'cdc-open-viz-module',
-    'cdc-map-outer-container',
-    currentViewport
-  ]
+  let outerContainerClasses = ['cdc-open-viz-module', 'cdc-map-outer-container', currentViewport]
 
   if (className) {
     outerContainerClasses.push(className)
   }
 
   // Map container classes
-  let mapContainerClasses = [
-    'map-container',
-    state.legend.position,
-    state.general.type,
-    state.general.geoType,
-    'outline-none'
-  ]
+  let mapContainerClasses = ['map-container', state.legend.position, state.general.type, state.general.geoType, 'outline-none']
 
   if (modal) {
     mapContainerClasses.push('modal-background')
@@ -1479,10 +1361,13 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     setPosition,
     setSharedFilterValue,
     hasZoom: state.general.allowMapZoom,
-    handleMapAriaLabels
+    handleMapAriaLabels,
+    runtimeFilters,
+    setRuntimeFilters,
+    innerContainerRef
   }
 
-  if (!mapProps.data || !state.data) return <Loading/>
+  if (!mapProps.data || !state.data) return <Loading />
 
   const hasDataTable = state.runtime.editorErrorMessage.length === 0 && true === dataTable.forceDisplay && general.type !== 'navigation' && false === loading
 
@@ -1511,183 +1396,124 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const tabId = handleMapTabbing()
 
   return (
-    <div className={outerContainerClasses.join(' ')} ref={outerContainerRef}>
-      {isEditor && (
-        <EditorPanel
-          isDashboard={isDashboard}
-          state={state}
-          setState={setState}
-          loadConfig={loadConfig}
-          setParentConfig={setConfig}
-          setRuntimeFilters={setRuntimeFilters}
-          runtimeFilters={runtimeFilters}
-          runtimeLegend={runtimeLegend}
-          columnsInData={Object.keys(state.data[0])}
-        />
-      )}
-      {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && <section className={`cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title}>
-        {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && (
-          <ReactTooltip
-            id="tooltip"
-            place="right"
-            type="light"
-            html={true}
-            className={tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'}
-          />
-        )}
-        {state.general.title &&
-          <header className={general.showTitle === true ? 'visible' : 'hidden'} {...(!general.showTitle || !state.general.title ? { 'aria-hidden': true } : { 'aria-hidden': false })}>
-            <div role="heading" className={'map-title ' + general.headerColor} tabIndex="0" aria-level="2">
-              <sup>{general.superTitle}</sup>
-              <div>{parse(title)}</div>
-            </div>
-          </header>
-        }
-
-        <div>
-          {general.introText && <section className="introText">{parse(general.introText)}</section>}
-        </div>
+    <Context.Provider value={mapProps}>
+      <div className={outerContainerClasses.join(' ')} ref={outerContainerRef} data-download-id={imageId}>
+        {isEditor && <EditorPanel isDashboard={isDashboard} state={state} setState={setState} loadConfig={loadConfig} setParentConfig={setConfig} setRuntimeFilters={setRuntimeFilters} runtimeFilters={runtimeFilters} runtimeLegend={runtimeLegend} columnsInData={Object.keys(state.data[0])} />}
+        {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
+          <section className={`cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title} ref={innerContainerRef}>
+            {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && <ReactTooltip id='tooltip' place='right' type='light' html={true} className={tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'} />}
+            {state.general.title && (
+              <header className={general.showTitle === true ? 'visible' : 'hidden'} {...(!general.showTitle || !state.general.title ? { 'aria-hidden': true } : { 'aria-hidden': false })}>
+                <div role='heading' className={'map-title ' + general.headerColor} tabIndex='0' aria-level='2'>
+                  <sup>{general.superTitle}</sup>
+                  <div>{parse(title)}</div>
+                </div>
+              </header>
+            )}
 
-        <section
-          role="button"
-          tabIndex="0"
-          className={mapContainerClasses.join(' ')}
-          onClick={(e) => closeModal(e)}
-          onKeyDown={(e) => {
-            if (e.keyCode === 13) {
-              closeModal(e)
-            }
-          }}
-        >
-          {general.showDownloadMediaButton === true && (
-            <div className="map-downloads" data-html2canvas-ignore>
-              <div className="map-downloads__ui btn-group">
-                <button
-                  className="btn"
-                  title="Download Map as Image"
-                  onClick={() => generateMedia(outerContainerRef.current, 'image')}
-                >
-                  <DownloadImg className="btn__icon" title="Download Map as Image"/>
-                </button>
-                <button
-                  className="btn"
-                  title="Download Map as PDF"
-                  onClick={() => generateMedia(outerContainerRef.current, 'pdf')}
-                >
-                  <DownloadPdf className="btn__icon" title="Download Map as PDF"/>
-                </button>
-              </div>
-            </div>
-          )}
-
-          <a id="skip-geo-container" className="cdcdataviz-sr-only-focusable" href={tabId}>
-            Skip Over Map Container
-          </a>
-
-          <section className="geography-container outline-none" ref={mapSvg} tabIndex="0">
-            {currentViewport && (
-              <section className="geography-container" ref={mapSvg}>
-                {modal && (
-                  <Modal
-                    type={general.type}
-                    viewport={currentViewport}
-                    applyTooltipsToGeo={applyTooltipsToGeo}
-                    applyLegendToRow={applyLegendToRow}
-                    capitalize={state.tooltips.capitalizeLabels}
-                    content={modal}
-                  />
-                )}
-                {'single-state' === general.geoType && (
-                  <SingleStateMap supportedTerritories={supportedTerritories} {...mapProps} />
-                )}
-                {('us' === general.geoType && 'us-geocode' !== state.general.type) && (
-                  <UsaMap supportedTerritories={supportedTerritories} {...mapProps} />
-                )}
-                {'us-region' === general.geoType && (
-                  <UsaRegionMap supportedTerritories={supportedTerritories} {...mapProps} />
+            <div>{general.introText && <section className='introText'>{parse(general.introText)}</section>}</div>
+
+            <Filters />
+
+            <div
+              role='button'
+              tabIndex='0'
+              className={mapContainerClasses.join(' ')}
+              onClick={e => closeModal(e)}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  closeModal(e)
+                }
+              }}
+            >
+              <a id='skip-geo-container' className='cdcdataviz-sr-only-focusable' href={tabId}>
+                Skip Over Map Container
+              </a>
+
+              <section className='geography-container outline-none' ref={mapSvg} tabIndex='0'>
+                {currentViewport && (
+                  <section className='geography-container' ref={mapSvg}>
+                    {modal && <Modal type={general.type} viewport={currentViewport} applyTooltipsToGeo={applyTooltipsToGeo} applyLegendToRow={applyLegendToRow} capitalize={state.tooltips.capitalizeLabels} content={modal} />}
+                    {'single-state' === general.geoType && <SingleStateMap supportedTerritories={supportedTerritories} {...mapProps} />}
+                    {'us' === general.geoType && 'us-geocode' !== state.general.type && <UsaMap supportedTerritories={supportedTerritories} {...mapProps} />}
+                    {'us-region' === general.geoType && <UsaRegionMap supportedTerritories={supportedTerritories} {...mapProps} />}
+                    {'world' === general.geoType && <WorldMap supportedCountries={supportedCountries} {...mapProps} />}
+                    {'us-county' === general.geoType && <CountyMap supportedCountries={supportedCountries} {...mapProps} />}
+                    {'data' === general.type && logo && <img src={logo} alt='' className='map-logo' />}
+                  </section>
                 )}
-                {'world' === general.geoType && (
-                  <WorldMap supportedCountries={supportedCountries} {...mapProps} />
-                )}
-                {('us-county' === general.geoType) && (
-                  <CountyMap
-                    supportedCountries={supportedCountries}
-                    {...mapProps}
-                  />
-                )}
-                {'data' === general.type && logo && <img src={logo} alt="" className="map-logo"/>}
               </section>
 
-            )}
-          </section>
+              {general.showSidebar && 'navigation' !== general.type && (
+                <Sidebar
+                  viewport={currentViewport}
+                  legend={state.legend}
+                  runtimeLegend={runtimeLegend}
+                  setRuntimeLegend={setRuntimeLegend}
+                  runtimeFilters={runtimeFilters}
+                  columns={state.columns}
+                  sharing={state.sharing}
+                  prefix={state.columns.primary.prefix}
+                  suffix={state.columns.primary.suffix}
+                  setState={setState}
+                  resetLegendToggles={resetLegendToggles}
+                  changeFilterActive={changeFilterActive}
+                  setAccessibleStatus={setAccessibleStatus}
+                  displayDataAsText={displayDataAsText}
+                />
+              )}
+            </div>
 
-          {general.showSidebar && 'navigation' !== general.type && (
-            <Sidebar
-              viewport={currentViewport}
-              legend={state.legend}
-              runtimeLegend={runtimeLegend}
-              setRuntimeLegend={setRuntimeLegend}
-              runtimeFilters={runtimeFilters}
-              columns={state.columns}
-              sharing={state.sharing}
-              prefix={state.columns.primary.prefix}
-              suffix={state.columns.primary.suffix}
-              setState={setState}
-              resetLegendToggles={resetLegendToggles}
-              changeFilterActive={changeFilterActive}
-              setAccessibleStatus={setAccessibleStatus}
-              displayDataAsText={displayDataAsText}
-            />
-          )}
-        </section>
-
-        {'navigation' === general.type && (
-          <NavigationMenu
-            mapTabbingID={tabId}
-            displayGeoName={displayGeoName}
-            data={runtimeData}
-            options={general}
-            columns={state.columns}
-            navigationHandler={(val) => navigationHandler(val)}
-          />
-        )}
+            {'navigation' === general.type && <NavigationMenu mapTabbingID={tabId} displayGeoName={displayGeoName} data={runtimeData} options={general} columns={state.columns} navigationHandler={val => navigationHandler(val)} />}
+
+            {link && link}
+
+            {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
+
+            <CoveMediaControls.Section classes={['download-buttons']}>
+              {state.general.showDownloadImgButton && <CoveMediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={state} elementToCapture={imageId} />}
+              {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 && (
+              <DataTable
+                state={state}
+                rawData={state.data}
+                navigationHandler={navigationHandler}
+                expandDataTable={general.expandDataTable}
+                headerColor={general.headerColor}
+                columns={state.columns}
+                showDownloadButton={general.showDownloadButton}
+                runtimeLegend={runtimeLegend}
+                runtimeData={runtimeData}
+                displayDataAsText={displayDataAsText}
+                displayGeoName={displayGeoName}
+                applyLegendToRow={applyLegendToRow}
+                tableTitle={dataTable.title}
+                indexTitle={dataTable.indexLabel}
+                mapTitle={general.title}
+                viewport={currentViewport}
+                formatLegendLocation={formatLegendLocation}
+                setFilteredCountryCode={setFilteredCountryCode}
+                tabbingId={tabId}
+                showDownloadImgButton={state.general.showDownloadImgButton}
+                showDownloadPdfButton={state.general.showDownloadPdfButton}
+                innerContainerRef={innerContainerRef}
+                outerContainerRef={outerContainerRef}
+                imageRef={imageId}
+              />
+            )}
 
-        {link && link}
-
-        {subtext.length > 0 && <p className="subtext">{parse(subtext)}</p>}
-
-        {state.runtime.editorErrorMessage.length === 0 && true === dataTable.forceDisplay && general.type !== 'navigation' && false === loading && (
-          <DataTable
-            state={state}
-            rawData={state.data}
-            navigationHandler={navigationHandler}
-            expandDataTable={general.expandDataTable}
-            headerColor={general.headerColor}
-            columns={state.columns}
-            showDownloadButton={general.showDownloadButton}
-            runtimeLegend={runtimeLegend}
-            runtimeData={runtimeData}
-            displayDataAsText={displayDataAsText}
-            displayGeoName={displayGeoName}
-            applyLegendToRow={applyLegendToRow}
-            tableTitle={dataTable.title}
-            indexTitle={dataTable.indexLabel}
-            mapTitle={general.title}
-            viewport={currentViewport}
-            formatLegendLocation={formatLegendLocation}
-            setFilteredCountryCode={setFilteredCountryCode}
-            tabbingId={tabId}
-          />
+            {general.footnotes && <section className='footnotes'>{parse(general.footnotes)}</section>}
+          </section>
         )}
 
-        {general.footnotes && <section className="footnotes">{parse(general.footnotes)}</section>}
-      </section>}
-
-      <div aria-live="assertive" className="cdcdataviz-sr-only">
-        {accessibleStatus}
+        <div aria-live='assertive' className='cdcdataviz-sr-only'>
+          {accessibleStatus}
+        </div>
       </div>
-    </div>
+    </Context.Provider>
   )
 }
 
-export default memo(CdcMap)
+export default CdcMap