@cdc/map 2.6.3 → 4.22.10-alpha.1

package/src/CdcMap.js

@@ -1,1384 +1,1693 @@
-import React, { useState, useEffect, useRef, memo, useCallback } from 'react';
+import React, { useState, useEffect, useRef, memo, useCallback } from 'react'
+import * as d3 from 'd3'
 
 // IE11
 import 'core-js/stable'
 import 'whatwg-fetch'
-import ResizeObserver from 'resize-observer-polyfill';
+import ResizeObserver from 'resize-observer-polyfill'
 
 // Third party
-import ReactTooltip from 'react-tooltip';
-import chroma from 'chroma-js';
-import Papa from 'papaparse';
-import parse from 'html-react-parser';
+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';
+import html2canvas from 'html2canvas'
+import Canvg from 'canvg'
 
 // Data
-import ExternalIcon from './images/external-link.svg';
-import { supportedStates, supportedTerritories, supportedCountries, supportedCounties, supportedCities, supportedStatesFipsCodes } from './data/supported-geos';
-import colorPalettes from './data/color-palettes';
-import initialState from './data/initial-state';
+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 initialState from './data/initial-state'
+import { countryCoordinates } from './data/country-coordinates'
 
 // Sass
-import './scss/main.scss';
+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/components/DataTransform';
+import { DataTransform } from '@cdc/core/helpers/DataTransform';
 import getViewport from '@cdc/core/helpers/getViewport';
-import numberFromString from '@cdc/core/helpers/numberFromString'
-
+import numberFromString from '@cdc/core/helpers/numberFromString';
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData';
+import cacheBustingString from '@cdc/core/helpers/cacheBustingString';
 
 // Child Components
-import Sidebar from './components/Sidebar';
-import Modal from './components/Modal';
-import EditorPanel from './components/EditorPanel'; // Future: Lazy
-import UsaMap from './components/UsaMap'; // Future: Lazy
-import CountyMap from './components/CountyMap'; // Future: Lazy
-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 Sidebar from './components/Sidebar'
+import Modal from './components/Modal'
+import EditorPanel from './components/EditorPanel' // Future: Lazy
+import UsaMap from './components/UsaMap' // Future: Lazy
+import UsaRegionMap from './components/UsaRegionMap' // Future: Lazy
+import CountyMap from './components/CountyMap' // Future: Lazy
+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 { publish } from '@cdc/core/helpers/events'
 
 // Data props
 const stateKeys = Object.keys(supportedStates)
 const territoryKeys = Object.keys(supportedTerritories)
+const regionKeys = Object.keys(supportedRegions)
 const countryKeys = Object.keys(supportedCountries)
 const countyKeys = Object.keys(supportedCounties)
 const cityKeys = Object.keys(supportedCities)
 
 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()
-    ]
+  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()
+  ]
 }
 
 const hashObj = (row) => {
+  try {
+    if (!row) throw new Error('No row supplied to hashObj')
+
     let str = JSON.stringify(row)
+    let hash = 0
 
-	let hash = 0;
-	if (str.length === 0) return hash;
-	for (let i = 0; i < str.length; i++) {
-		let char = str.charCodeAt(i);
-		hash = ((hash<<5)-hash) + char;
-		hash = hash & hash;
-	}
+    if (str.length === 0) return hash
 
-    return hash;
+    for (let i = 0; i < str.length; i++) {
+      let char = str.charCodeAt(i)
+      hash = ((hash << 5) - hash) + char
+      hash = hash & hash
+    }
+
+    return hash
+  } catch (e) {
+    console.error(e)
+  }
 }
 
 // returns string[]
 const getUniqueValues = (data, columnName) => {
-    let result = {};
+  let result = {}
 
-    for(let i = 0; i < data.length; i++) {
-        let val = data[i][columnName]
+  for (let i = 0; i < data.length; i++) {
+    let val = data[i][columnName]
 
-        if(undefined === val) continue
+    if (undefined === val) continue
 
-        if(undefined === result[val]) {
-            result[val] = true
-        }
+    if (undefined === result[val]) {
+      result[val] = true
     }
+  }
 
-    return Object.keys(result)
+  return Object.keys(result)
 }
 
-const CdcMap = ({className, config, navigationHandler: customNavigationHandler, isDashboard = false, isEditor = false, configUrl, logo = null, setConfig, hostname}) => {
-     
-    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('')
-    let legendMemo = useRef(new Map())
-
-
-
-    const resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-            let newViewport = getViewport(entry.contentRect.width)
-            
-            setCurrentViewport(newViewport)
+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()
+
+  let legendMemo = useRef(new Map())
+
+  useEffect(() => {
+    try {
+      if (filteredCountryCode) {
+        const filteredCountryObj = runtimeData[filteredCountryCode]
+        const coordinates = countryCoordinates[filteredCountryCode]
+        const long = coordinates[1]
+        const lat = coordinates[0]
+        const reversedCoordinates = [ long, lat ]
+
+        setState({
+          ...state,
+          mapPosition: { coordinates: reversedCoordinates, zoom: 3 }
+        })
+      }
+    } catch (e) {
+      console.error('Failed to set world map zoom.')
+    }
+  }, [ filteredCountryCode ])
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (filteredCountryCode) {
+        const filteredCountryObj = runtimeData[filteredCountryCode]
+        const tmpData = {
+          [filteredCountryCode]: filteredCountryObj
         }
-    });
-
-    // *******START SCREEN READER DEBUG*******
-    // const focusedElement = useActiveElement();
-
-    // useEffect(() => {
-    //     if (focusedElement) {
-    //         focusedElement.value && console.log(focusedElement.value);
-    //     }
-    //     console.log(focusedElement);
-    // }, [focusedElement])
-    // *******END SCREEN READER DEBUG*******
-
-    // Tag each row with a UID. Helps with filtering/placing geos. Not enumerable so doesn't show up in loops/console logs except when directly addressed ex row.uid
-    // We are mutating state in place here (depending on where called) - but it's okay, this isn't used for rerender
-    const addUIDs = useCallback((obj, fromColumn) => {
-
-        obj.data.forEach(row => {
-            let uid = null
-
-            if(row.uid) row.uid = null // Wipe existing UIDs
-
-            // United States check
-            if("us" === obj.general.geoType) {
-                const geoName = row[obj.columns.geo.name] ? row[obj.columns.geo.name].toUpperCase() : '';
+        setRuntimeData(tmpData)
+      }
+    }, 100)
+  }, [ filteredCountryCode ])
+
+  useEffect(() => {
+    if (state.mapPosition) {
+      setPosition(state.mapPosition)
+    }
+  }, [ state.mapPosition, setPosition ])
 
-                // States
-                uid = stateKeys.find( (key) => supportedStates[key].includes(geoName) )
+  const setZoom = (reversedCoordinates) => {
+    setState({
+      ...state,
+      mapPosition: { coordinates: reversedCoordinates, zoom: 3 }
+    })
+  }
 
-                // Territories
-                if(!uid) {
-                    uid = territoryKeys.find( (key) => supportedTerritories[key].includes(geoName) )
-                }
+  const resizeObserver = new ResizeObserver(entries => {
+    for (let entry of entries) {
+      let newViewport = getViewport(entry.contentRect.width)
 
-                // Cities
-                if(!uid) {
-                    uid = cityKeys.find( (key) => key === geoName)
-                }
-            }
+      setCurrentViewport(newViewport)
+    }
+  })
 
-            // World Check
-            if("world" === obj.general.geoType) {
-                const geoName = row[obj.columns.geo.name]
+  // Tag each row with a UID. Helps with filtering/placing geos. Not enumerable so doesn't show up in loops/console logs except when directly addressed ex row.uid
+  // We are mutating state in place here (depending on where called) - but it's okay, this isn't used for rerender
+  const addUIDs = useCallback((obj, fromColumn) => {
+    obj.data.forEach(row => {
+      let uid = null
 
-                uid = countryKeys.find( (key) => supportedCountries[key].includes(geoName) )
-            }
+      if (row.uid) row.uid = null // Wipe existing UIDs
 
-            // County Check
-            if("us-county" === obj.general.geoType || "single-state" === obj.general.geoType) {
-                const fips = row[obj.columns.geo.name]
-                uid = countyKeys.find( (key) => key === fips )
-            }
+      // United States check
+      if ('us' === obj.general.geoType && obj.columns.geo.name) {
+        // const geoName = row[obj.columns.geo.name] && typeof row[obj.columns.geo.name] === "string" ? row[obj.columns.geo.name].toUpperCase() : '';
+        let geoName = ''
 
-            // TODO: Points
-            if(uid) {
-                Object.defineProperty(row, 'uid', {
-                    value: uid,
-                    writable: true
-                });
-            }
-        })
+        if (row[obj.columns.geo.name] !== undefined && row[obj.columns.geo.name] !== null) {
+          geoName = String(row[obj.columns.geo.name])
+          geoName = geoName.toUpperCase()
+        }
 
-        obj.data.fromColumn = fromColumn
-    })
+        // States
+        uid = stateKeys.find((key) => supportedStates[key].includes(geoName))
 
-    const generateRuntimeLegend = useCallback((obj, runtimeData, hash) => {
+        // Territories
+        if (!uid) {
+          uid = territoryKeys.find((key) => supportedTerritories[key].includes(geoName))
+        }
 
-        const newLegendMemo = new Map(); // Reset memoization
+        // Cities
+        if (!uid) {
+          uid = cityKeys.find((key) => key === geoName)
+        }
+      }
 
-        const
-            primaryCol = obj.columns.primary.name,
-            type = obj.legend.type,
-            number = obj.legend.numberOfItems,
-            result = [];
+      if ('us-region' === obj.general.geoType && obj.columns.geo.name) {
+        // const geoName = row[obj.columns.geo.name] && typeof row[obj.columns.geo.name] === "string" ? row[obj.columns.geo.name].toUpperCase() : '';
+        let geoName = ''
 
-        // Add a hash for what we're working from if passed
-        if(hash) {
-            result.fromHash = hash
+        if (row[obj.columns.geo.name] !== undefined && row[obj.columns.geo.name] !== null) {
+          geoName = String(row[obj.columns.geo.name])
+          geoName = geoName.toUpperCase()
         }
 
-        // 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);
-
-        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 ]
-        }
+        // Regions
+        uid = regionKeys.find((key) => supportedRegions[key].includes(geoName))
+      }
 
-        const applyColorToLegend = (legendIdx) => {
-            // Default to "bluegreen" color scheme if the passed color isn't valid
-            let mapColorPalette = obj.customColors || colorPalettes[obj.color] || colorPalettes['bluegreen']
+      // World Check
+      if ('world' === obj.general.geoType) {
+        const geoName = row[obj.columns.geo.name]
 
-            let colorIdx = legendIdx - specialClasses
+        uid = countryKeys.find((key) => supportedCountries[key].includes(geoName))
+      }
 
-            // Special Classes (No Data)
-            if (result[legendIdx].special) {
-                const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses)
+      // 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)
+      }
 
-                return specialClassColors[ legendIdx ]
-            }
+      if ('us-geocode' === state.general.type) {
+        uid = row[state.columns.geo.name]
+      }
 
-            if ( obj.color.includes( 'qualitative' ) ) return mapColorPalette[colorIdx]
+      if (uid) {
+        Object.defineProperty(row, 'uid', {
+          value: uid,
+          writable: true
+        })
+      }
+    })
+
+    obj.data.fromColumn = fromColumn
+  })
+
+  const generateRuntimeLegend = useCallback((obj, runtimeData, hash) => {
+    const newLegendMemo = new Map() // Reset memoization
+    const
+      primaryCol = obj.columns.primary.name,
+      isData = obj.general.type === 'data',
+      isBubble = obj.general.type === 'bubble',
+      categoricalCol = obj.columns.categorical ? obj.columns.categorical.name : undefined,
+      type = obj.legend.type,
+      number = obj.legend.numberOfItems,
+      result = []
+
+    // Add a hash for what we're working from if passed
+    if (hash) {
+      result.fromHash = hash
+    }
 
-            let amt = Math.max( result.length - specialClasses, 1 )
-            let distributionArray = colorDistributions[ amt ]
+    // 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)
+
+    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 ]
+    }
 
-            const specificColor = distributionArray[ colorIdx ]
+    const applyColorToLegend = (legendIdx) => {
+      // Default to "bluegreen" color scheme if the passed color isn't valid
+      let mapColorPalette = obj.customColors || colorPalettes[obj.color] || colorPalettes['bluegreen']
 
-            return mapColorPalette[specificColor]
+      // Handle Region Maps need for a 10th color
+      if (general.geoType === 'us-region' && mapColorPalette.length < 10 && mapColorPalette.length > 8) {
+        if (!general.palette.isReversed) {
+          mapColorPalette.push(chroma(mapColorPalette[8]).darken(0.75).hex())
+        } else {
+          mapColorPalette.unshift(chroma(mapColorPalette[0]).darken(0.75).hex())
         }
+      }
 
-        let specialClasses = 0
-        let specialClassesHash = {}
+      let colorIdx = legendIdx - specialClasses
 
-        // Special classes
-        if (obj.legend.specialClasses.length) {
-            if(typeof obj.legend.specialClasses[0] === 'object'){
-                obj.legend.specialClasses.forEach(specialClass => {
-                    dataSet = dataSet.filter(row => {
-                        const val = String(row[specialClass.key]);
+      // Special Classes (No Data)
+      if (result[legendIdx].special) {
+        const specialClassColors = chroma.scale([ '#D4D4D4', '#939393' ]).colors(specialClasses)
 
-                        if(specialClass.value === val){
-                            if(undefined === specialClassesHash[val]) {
-                                specialClassesHash[val] = true;
+        return specialClassColors[legendIdx]
+      }
 
-                                result.push({
-                                    special: true,
-                                    value: val,
-                                    label: specialClass.label
-                                });
+      if (obj.color.includes('qualitative')) return mapColorPalette[colorIdx]
 
-                                result[result.length - 1].color = applyColorToLegend(result.length - 1);
+      let amt = Math.max(result.length - specialClasses, 1)
+      let distributionArray = colorDistributions[amt]
 
-                                specialClasses += 1;
-                            }
+      const specificColor = distributionArray[colorIdx]
 
-                            let specialColor = '';
-                            
-                            // color the state if val is in row 
-                            specialColor = result.findIndex(p => p.value === val)
+      return mapColorPalette[specificColor]
+    }
 
-                            newLegendMemo.set( hashObj(row), specialColor)
+    let specialClasses = 0
+    let specialClassesHash = {}
 
-                            return false;
-                        }
+    // Special classes
+    if (obj.legend.specialClasses.length) {
+      if (typeof obj.legend.specialClasses[0] === 'object') {
+        obj.legend.specialClasses.forEach(specialClass => {
+          dataSet = dataSet.filter(row => {
+            const val = String(row[specialClass.key])
 
-                        return true;
-                    });
-                });
-            } else {
-                dataSet = dataSet.filter(row => {
-                    const val = row[primaryCol]
+            if (specialClass.value === val) {
+              if (undefined === specialClassesHash[val]) {
+                specialClassesHash[val] = true
 
-                    if( obj.legend.specialClasses.includes(val) ) {
+                result.push({
+                  special: true,
+                  value: val,
+                  label: specialClass.label
+                })
 
-                        // apply the special color to the legend
-                        if(undefined === specialClassesHash[val]) {
-                            specialClassesHash[val] = true;
+                result[result.length - 1].color = applyColorToLegend(result.length - 1)
 
-                            result.push({
-                                special: true,
-                                value: val
-                            });
+                specialClasses += 1
+              }
 
-                            result[result.length - 1].color = applyColorToLegend(result.length - 1);
+              let specialColor = ''
 
-                            specialClasses += 1;
-                        }
-                    
-                        let specialColor = '';
-                        
-                        // color the state if val is in row 
-                        if ( Object.values(row).includes(val) ) {
-                            specialColor = result.findIndex(p => p.value === val)
-                        }
-                        newLegendMemo.set( hashObj(row), specialColor)
+              // color the state if val is in row
+              specialColor = result.findIndex(p => p.value === val)
 
-                        return false
-                    }
+              newLegendMemo.set(hashObj(row), specialColor)
 
-                    return true
-                })
+              return false
             }
-        }
 
-        // Category
-        if('category' === type) {
-            let uniqueValues = new Map()
-            let count = 0
+            return true
+          })
+        })
+      } else {
+        dataSet = dataSet.filter(row => {
+          const val = row[primaryCol]
 
-            for(let i = 0; i < dataSet.length; i++) {
-                let row = dataSet[i]
-                let value = row[primaryCol]
+          if (obj.legend.specialClasses.includes(val)) {
+            // apply the special color to the legend
+            if (undefined === specialClassesHash[val]) {
+              specialClassesHash[val] = true
 
-                if(undefined === value) continue
+              result.push({
+                special: true,
+                value: val
+              })
 
-                if(false === uniqueValues.has(value)) {
-                    uniqueValues.set(value, [hashObj(row)]);
-                    count++
-                } else {
-                    uniqueValues.get(value).push(hashObj(row))
-                }
+              result[result.length - 1].color = applyColorToLegend(result.length - 1)
 
-                if(count === 9) break // Can only have 9 categorical items for now
+              specialClasses += 1
             }
 
-            let sorted = [...uniqueValues.keys()]
-
-            // Apply custom sorting or regular sorting
-            let configuredOrder = obj.legend.categoryValuesOrder ?? []
+            let specialColor = ''
 
-            // Coerce strings to numbers inside configuredOrder property
-            for(let i = 0; i < configuredOrder.length; i++) {
-                configuredOrder[i] = numberFromString(configuredOrder[i])
+            // color the state if val is in row
+            if (Object.values(row).includes(val)) {
+              specialColor = result.findIndex(p => p.value === val)
             }
 
-            if(configuredOrder.length) {
-                sorted.sort( (a, b) => {
-                    return configuredOrder.indexOf(a) - configuredOrder.indexOf(b);
-                })
-            } else {
-                sorted.sort((a, b) => a - b)
-            }
+            newLegendMemo.set(hashObj(row), specialColor)
 
-            // Add legend item for each
-            sorted.forEach((val) => {
-                result.push({
-                    value: val,
-                })
+            return false
+          }
 
-                let lastIdx = result.length - 1
-                let arr = uniqueValues.get(val)
+          return true
+        })
+      }
+    }
 
-                if(arr) {
-                    arr.forEach(hashedRow => newLegendMemo.set(hashedRow, lastIdx))
-                }
-            })
+    // Category
+    if ('category' === type) {
+      let uniqueValues = new Map()
+      let count = 0
 
+      for (let i = 0; i < dataSet.length; i++) {
+        let row = dataSet[i]
+        let value = isBubble && categoricalCol && row[categoricalCol] ? row[categoricalCol] : row[primaryCol]
+        if (undefined === value) continue
 
-            // Add color to new legend item
-            for(let i = 0; i < result.length; i++) {
-                result[i].color = applyColorToLegend(i)
-            }
-            legendMemo.current = newLegendMemo
-            return result
+        if (false === uniqueValues.has(value)) {
+          uniqueValues.set(value, [ hashObj(row) ])
+          count++
+        } else {
+          uniqueValues.get(value).push(hashObj(row))
         }
 
-        let uniqueValues = {};
-        dataSet.forEach(datum => {
-            uniqueValues[datum[primaryCol]] = true;
-        });
+        if (count === 10) break // Can only have 10 categorical items for now
+      }
 
-        let legendNumber = Math.min(number, Object.keys(uniqueValues).length);
+      let sorted = [ ...uniqueValues.keys() ]
 
-        // Separate zero
-        if(true === obj.legend.separateZero) {
-            let addLegendItem = false;
+      // Apply custom sorting or regular sorting
+      let configuredOrder = obj.legend.categoryValuesOrder ?? []
 
-            for(let i = 0; i < dataSet.length; i++) {
-                if (dataSet[i][primaryCol] === 0) {
-                    addLegendItem = true
+      // Coerce strings to numbers inside configuredOrder property
+      for(let i = 0; i < configuredOrder.length; i++) {
+          configuredOrder[i] = numberFromString(configuredOrder[i])
+      }
 
-                    let row = dataSet.splice(i, 1)[0]
-
-                    newLegendMemo.set( hashObj(row), result.length)
-                    i--
-                }
-            }
+      if (configuredOrder.length) {
+        sorted.sort((a, b) => {
+          return configuredOrder.indexOf(a) - configuredOrder.indexOf(b)
+        })
+      } else {
+        sorted.sort((a, b) => a - b)
+      }
+
+      // Add legend item for each
+      sorted.forEach((val) => {
+        result.push({
+          value: val,
+        })
 
-            if(addLegendItem) {
-                legendNumber -= 1 // This zero takes up one legend item
+        let lastIdx = result.length - 1
+        let arr = uniqueValues.get(val)
 
-                // Add new legend item
-                result.push({
-                    min: 0,
-                    max: 0
-                })
+        if (arr) {
+          arr.forEach(hashedRow => newLegendMemo.set(hashedRow, lastIdx))
+        }
+      })
 
-                let lastIdx = result.length - 1
+      // Add color to new legend item
+      for (let i = 0; i < result.length; i++) {
+        result[i].color = applyColorToLegend(i)
+      }
 
-                // Add color to new legend item
-                result[lastIdx].color = applyColorToLegend(lastIdx)
-            }
-        }
+      legendMemo.current = newLegendMemo
+      return result
+    }
 
-        // Sort data for use in equalnumber or equalinterval
-        dataSet = dataSet.filter(row => typeof row[primaryCol] === 'number').sort((a, b) => {
-            let aNum = a[primaryCol]
-            let bNum = b[primaryCol]
+    let uniqueValues = {}
+    dataSet.forEach(datum => {
+      uniqueValues[datum[primaryCol]] = true
+    })
 
-            return aNum - bNum
-        })
+    let legendNumber = Math.min(number, Object.keys(uniqueValues).length)
 
-        // Equal Number
-        if(type === 'equalnumber') {
-            let numberOfRows = dataSet.length
+    // Separate zero
+    if (true === obj.legend.separateZero && !state.general.equalNumberOptIn) {
+      let addLegendItem = false
 
-            let remainder
-            let changingNumber = legendNumber
+      for (let i = 0; i < dataSet.length; i++) {
+        if (dataSet[i][primaryCol] === 0) {
+          addLegendItem = true
 
-            let chunkAmt
+          let row = dataSet.splice(i, 1)[0]
 
-            // Loop through the array until it has been split into equal subarrays
-            while ( numberOfRows > 0 ) {
-                remainder = numberOfRows % changingNumber
+          newLegendMemo.set(hashObj(row), result.length)
+          i--
+        }
+      }
 
-                chunkAmt = Math.floor(numberOfRows / changingNumber)
+      if (addLegendItem) {
+        legendNumber -= 1 // This zero takes up one legend item
 
-                if (remainder > 0) {
-                    chunkAmt += 1
-                }
+        // Add new legend item
+        result.push({
+          min: 0,
+          max: 0
+        })
 
-                let removedRows = dataSet.splice(0, chunkAmt);
+        let lastIdx = result.length - 1
 
-                let min = removedRows[0][primaryCol],
-                    max = removedRows[removedRows.length - 1][primaryCol]
+        // Add color to new legend item
+        result[lastIdx].color = applyColorToLegend(lastIdx)
+      }
+    }
 
-                removedRows.forEach(row => {
-                    newLegendMemo.set( hashObj(row), result.length )
-                })
+    // 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]
 
-                result.push({
-                    min,
-                    max
-                })
+        return aNum - bNum
+      })
+    }
 
-                result[result.length - 1].color = applyColorToLegend(result.length - 1)
+    // Equal Number
+    if (type === 'equalnumber') {
+      // start work on changing legend functionality
+      // FALSE === ignore old version for now.
+      if (!state.general.equalNumberOptIn) {
+        let numberOfRows = dataSet.length
 
-                changingNumber -= 1
-                numberOfRows -= chunkAmt
-            }
-        }
+        let remainder
+        let changingNumber = legendNumber
 
-        // Equal Interval
-        if(type === 'equalinterval') {
-            dataSet = dataSet.filter(row => row[primaryCol] !== undefined)
-            let dataMin = dataSet[0][primaryCol]
-            let dataMax = dataSet[dataSet.length - 1][primaryCol]
+        let chunkAmt
 
-            let pointer = 0 // Start at beginning of dataSet
+        // Loop through the array until it has been split into equal subarrays
+        while (numberOfRows > 0) {
+          remainder = numberOfRows % changingNumber
+          chunkAmt = Math.floor(numberOfRows / changingNumber)
 
-            for (let i = 0; i < legendNumber; i++) {
-                let interval = Math.abs(dataMax - dataMin) / legendNumber
+          if (remainder > 0) {
+            chunkAmt += 1
+          }
 
-                let min = dataMin + (interval * i)
-                let max = min + interval
+          let removedRows = dataSet.splice(0, chunkAmt)
 
-                // If this is the last loop, assign actual max of data as the end point
-                if (i === legendNumber - 1) max = dataMax
+          let min = removedRows[0][primaryCol],
+            max = removedRows[removedRows.length - 1][primaryCol]
 
-                // Add rows in dataSet that belong to this new legend item since we've got the data sorted
-                while(pointer < dataSet.length && dataSet[pointer][primaryCol] <= max) {
-                    newLegendMemo.set(hashObj(dataSet[pointer]), result.length )
-                    pointer += 1
-                }
+          removedRows.forEach(row => {
+            newLegendMemo.set(hashObj(row), result.length)
+          })
 
-                let range = {
-                    min: Math.round(min * 100) / 100,
-                    max: Math.round(max * 100) / 100,
-                }
+          result.push({
+            min,
+            max
+          })
 
-                result.push(range)
+          result[result.length - 1].color = applyColorToLegend(result.length - 1)
 
-                result[result.length - 1].color = applyColorToLegend(result.length - 1)
-            }
+          changingNumber -= 1
+          numberOfRows -= chunkAmt
         }
+      } else {
+        // get nums
+        let hasZeroInData = dataSet.filter(obj => obj[state.columns.primary.name] === 0).length > 0
+        let domainNums = new Set(dataSet.map(item => item[state.columns.primary.name]))
 
-        result.forEach((legendItem, idx) => {
-            legendItem.color = applyColorToLegend(idx, specialClasses, result)
-        })
+        domainNums = d3.extent(domainNums)
 
-        legendMemo.current = newLegendMemo
-        return result
-    })
+        let colors = colorPalettes[state.color]
+        let colorRange = colors.slice(0, state.legend.numberOfItems)
 
-    const generateRuntimeFilters = useCallback((obj, hash, runtimeFilters) => {
-        if(undefined === obj.filters || obj.filters.length === 0) return []
+        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 filters = []
+        let breaks = scale.quantiles()
 
-        if(hash) filters.fromHash = hash
+        breaks = breaks.map(item => Math.round(item))
 
-        obj?.filters.forEach(({columnName, label, active, values}, idx) => {
-            if(undefined === columnName) return
+        // if seperating zero force it into breaks
+        if (breaks[0] !== 0) {
+          breaks.unshift(0)
+        }
 
-            let newFilter = runtimeFilters[idx]
+        breaks.map((item, index) => {
+          const setMin = (index) => {
+            //debugger;
+            let min = breaks[index]
 
-            const sortAsc = (a, b) => {
-                return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
-            };
+            // if first break is a seperated zero, min is zero
+            if (index === 0 && state.legend.separateZero) {
+              min = 0
+            }
 
-            const sortDesc = (a, b) => {
-                return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
-            };
+            // if we're on the second break, and seperating out zero, increment min to 1.
+            if (index === 1 && state.legend.separateZero) {
+              min = 1
+            }
 
-            values = getUniqueValues(state.data, columnName)
+            // // in starting position and zero in the data
+            // if((index === state.legend.specialClasses?.length ) && (state.legend.specialClasses.length !== 0)) {
+            //     min = breaks[index]
+            // }
+            return min
+          }
 
-            if(obj.filters[idx].order === 'asc') {
-                values = values.sort(sortAsc)
-            }
+          const setMax = (index, min) => {
+            let max = breaks[index + 1] - 1
 
-            if(obj.filters[idx].order === 'desc') {
-                values = values.sort(sortDesc)
-            }
+            // check if min and max range are the same
+            // if (min === max + 1) {
+            //     max = breaks[index + 1]
+            // }
 
-            if(obj.filters[idx].order === 'cust') {
-                if(obj.filters[idx]?.values.length > 0) {
-                    values = obj.filters[idx].values
-                }
+            if (index === 0 && state.legend.separateZero) {
+              max = 0
             }
+            // if ((index === state.legend.specialClasses.length && state.legend.specialClasses.length !== 0) && !state.legend.separateZero && hasZeroInData) {
+            //     max = 0;
+            // }
 
-            if(undefined === newFilter) {
-                newFilter = {}
+            if (index + 1 === breaks.length) {
+              max = domainNums[1]
             }
 
-            newFilter.label = label ?? ''
-            newFilter.columnName = columnName
-            newFilter.values = values
-            newFilter.active = active || values[0] // Default to first found value
+            return max
+          }
 
-            filters.push(newFilter)
-        })
+          let min = setMin(index)
+          let max = setMax(index, min)
 
-        return filters
-    })
+          result.push({
+            min,
+            max,
+            color: scale(item)
+          })
 
-    // Calculates what's going to be displayed on the map and data table at render.
-    const generateRuntimeData = useCallback((obj, filters, hash) => {
-        const result = {}
+          dataSet.forEach((row, dataIndex) => {
+            let number = row[state.columns.primary.name]
+            let updated = 0
 
-        if(hash) {
-            // Adding property this way prevents it from being enumerated
-            Object.defineProperty(result, 'fromHash', {
-                value : hash
-            });
-        }
-        
+            // check if we're seperating zero out
+            updated = state.legend.separateZero && hasZeroInData ? index : index
+            // check for special classes
+            updated = state.legend.specialClasses ? updated + state.legend.specialClasses.length : index
 
-        obj.data.forEach(row => {
-            if(undefined === row.uid) return false // No UID for this row, we can't use for mapping
+            if (result[updated]?.min === (null || undefined) || result[updated]?.max === (null || undefined)) return
 
-            // When on a single state map filter runtime data by state
-            if (
-                !(row[obj.columns.geo.name].substring(0, 2) === obj.general?.statePicked?.fipsCode) &&
-                obj.general.geoType === 'single-state'
-            ) {
-                return false;
+            if (number >= result[updated].min && number <= result[updated].max) {
+              newLegendMemo.set(hashObj(row), updated)
             }
+          })
+        })
+      }
+    }
 
+    // Equal Interval
 
-            if(row[obj.columns.primary.name]) {
-                row[obj.columns.primary.name] = numberFromString(row[obj.columns.primary.name])
-            }
+    if (type === 'equalinterval' && dataSet?.length !== 0) {
+      if (!dataSet || dataSet.length === 0) {
+        setState({
+          ...state,
+          runtime: {
+            ...state.runtime,
+            editorErrorMessage: 'Error setting equal interval legend type'
+          }
+        })
+        return
+      }
+      dataSet = dataSet.filter(row => row[primaryCol] !== undefined)
+      let dataMin = dataSet[0][primaryCol]
+      let dataMax = dataSet[dataSet.length - 1][primaryCol]
 
-            // If this is a navigation only map, skip if it doesn't have a URL
-            if("navigation" === obj.general.type ) {
-                let navigateUrl = row[obj.columns.navigate.name] || "";
-                
-                if ( undefined !== navigateUrl && typeof navigateUrl === "string" ) {
-                    // Strip hidden characters before we check length
-                    navigateUrl = navigateUrl.replace( /(\r\n|\n|\r)/gm, '' );
-                }
-                if ( 0 === navigateUrl.length ) {
-                    return false
-                }
-            }
+      let pointer = 0 // Start at beginning of dataSet
 
-            // Filters
-            if(filters?.length) {
-                for(let i = 0; i < filters.length; i++) {
-                    const {columnName, active} = filters[i]
+      for (let i = 0; i < legendNumber; i++) {
+        let interval = Math.abs(dataMax - dataMin) / legendNumber
 
-                    if (String(row[columnName]) !== String(active)) return false // Bail out, not part of filter
-                }
-            }
+        let min = dataMin + (interval * i)
+        let max = min + interval
 
-            // Don't add additional rows with same UID
-            if(undefined === result[row.uid]) {
-                result[row.uid] = row
-            }
-        })
+        // If this is the last loop, assign actual max of data as the end point
+        if (i === legendNumber - 1) max = dataMax
 
-        return result
-    })
+        // Add rows in dataSet that belong to this new legend item since we've got the data sorted
+        while (pointer < dataSet.length && dataSet[pointer][primaryCol] <= max) {
+          newLegendMemo.set(hashObj(dataSet[pointer]), result.length)
+          pointer += 1
+        }
 
-    const outerContainerRef = useCallback(node => {
-        if (node !== null) {
-            resizeObserver.observe(node);
+        let range = {
+          min: Math.round(min * 100) / 100,
+          max: Math.round(max * 100) / 100,
         }
-    },[]);
 
-    const mapSvg = useRef(null);
+        result.push(range)
 
-    const closeModal = ({target}) => {
-        if('string' === typeof target.className && (target.className.includes('modal-close') || target.className.includes('modal-background') ) && null !== modal) {
-            setModal(null)
-        }
+        result[result.length - 1].color = applyColorToLegend(result.length - 1)
+      }
     }
 
-    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)
-            }
-        }
-    }
+    result.forEach((legendItem, idx) => {
+      legendItem.color = applyColorToLegend(idx, specialClasses, result)
+    })
 
-    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
-        }
-    }
+    legendMemo.current = newLegendMemo
+    return result
+  })
 
-    const changeFilterActive = async (idx, activeValue) => {
-        // Reset active legend toggles
-        resetLegendToggles()
+  const generateRuntimeFilters = useCallback((obj, hash, runtimeFilters) => {
+    if (undefined === obj.filters || obj.filters.length === 0) return []
 
-        try {
+    let filters = []
 
-            const isEmpty = (obj) => {
-                return Object.keys(obj).length === 0;
-            }
+    if (hash) filters.fromHash = hash
 
-            let filters = [...runtimeFilters]
+    obj?.filters.forEach(({ columnName, label, active, values }, idx) => {
+      if (undefined === columnName) return
 
-            filters[idx] = { ...filters[idx] }
+      let newFilter = runtimeFilters[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')
+      const sortAsc = (a, b) => {
+        return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+      }
 
-            // set the runtime filters and data
-            setRuntimeData(newData)
-            setRuntimeFilters(filters)
-        } catch(e) {
-            console.error(e.message)
-        }
+      const sortDesc = (a, b) => {
+        return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
+      }
 
-    }
+      values = getUniqueValues(state.data, columnName)
+
+      if (obj.filters[idx].order === 'asc') {
+        values = values.sort(sortAsc)
+      }
 
-    const displayDataAsText = (value, columnName) => {
-        if(value === null) {
-            return ""
+      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
         }
+      }
 
-        let formattedValue = value
+      if (undefined === newFilter) {
+        newFilter = {}
+      }
 
-        let columnObj = state.columns[columnName]
+      newFilter.label = label ?? ''
+      newFilter.columnName = columnName
+      newFilter.values = values
+      newFilter.active = active || values[0] // Default to first found value
 
-        if (columnObj) {
-            // If value is a number, apply specific formattings
-            if (Number(value)) {
-                // Rounding
-                if(columnObj.hasOwnProperty('roundToPlace') && columnObj.roundToPlace !== "None") {
+      filters.push(newFilter)
+    })
 
-                    const decimalPoint = columnObj.roundToPlace
+    return filters
+  })
 
-                    formattedValue = Number(value).toFixed(decimalPoint)
+  // Calculates what's going to be displayed on the map and data table at render.
+  const generateRuntimeData = useCallback((obj, filters, hash, test) => {
+    try {
+      const result = {}
 
-                }
+      if (hash) {
+        // Adding property this way prevents it from being enumerated
+        Object.defineProperty(result, 'fromHash', {
+          value: hash
+        })
+      }
 
-                if(columnObj.hasOwnProperty('useCommas') && columnObj.useCommas === true) {
+      obj.data.forEach(row => {
+        if (test) {
+          console.log('object', obj)
+          console.log('row', row)
+        }
 
-                    formattedValue = Number(value).toLocaleString('en-US', { style: 'decimal'})
+        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'
+        ) {
+          return false
+        }
 
-            // Check if it's a special value. If it is not, apply the designated prefix and suffix
-            if (false === state.legend.specialClasses.includes(String(value))) {
-                formattedValue = columnObj.prefix + formattedValue + columnObj.suffix
-            }
+        if (row[obj.columns.primary.name]) {
+          row[obj.columns.primary.name] = numberFromString(row[obj.columns.primary.name], state)
         }
 
-        return formattedValue
-    }
+        // If this is a navigation only map, skip if it doesn't have a URL
+        if ('navigation' === obj.general.type) {
+          let navigateUrl = row[obj.columns.navigate.name] || ''
+
+          if (undefined !== navigateUrl && typeof navigateUrl === 'string') {
+            // Strip hidden characters before we check length
+            navigateUrl = navigateUrl.replace(/(\r\n|\n|\r)/gm, '')
+          }
+          if (0 === navigateUrl.length) {
+            return false
+          }
+        }
 
-    const applyLegendToRow = (rowObj) => {
-        // Navigation map
-        if("navigation" === state.general.type) {
-          let mapColorPalette = colorPalettes[ state.color ] || colorPalettes[ 'bluegreenreverse' ]
+        // 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
+          }
+        }
 
-          return generateColorsArray( mapColorPalette[ 3 ] )
+        // Don't add additional rows with same UID
+        if (undefined === result[row.uid]) {
+          result[row.uid] = row
         }
+      })
 
-        let hash = hashObj(rowObj)
+      return result
+    } catch (e) {
+      console.error(e)
+    }
+  })
 
-        if( legendMemo.current.has(hash) ) {
-            let idx = legendMemo.current.get(hash)
+  const outerContainerRef = useCallback(node => {
+    if (node !== null) {
+      resizeObserver.observe(node)
+    }
+    setContainer(node)
+  }, [])
 
-            if(runtimeLegend[idx]?.disabled) return false
+  const mapSvg = useRef(null)
 
-            return generateColorsArray(runtimeLegend[idx]?.color, runtimeLegend[idx]?.special)
+  const closeModal = ({ target }) => {
+    if ('string' === typeof target.className && (target.className.includes('modal-close') || target.className.includes('modal-background')) && null !== modal) {
+      setModal(null)
+    }
+  }
+
+  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' }
         }
 
-        // Fail state
-        return generateColorsArray()
+        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 applyTooltipsToGeo = (geoName, row, returnType = 'string') => {
-        let toolTipText = '';
-        let stateOrCounty = 
-            state.general.geoType === 'us' ? 'State: ' : 
-            (state.general.geoType === 'us-county' || state.general.geoType === 'single-state') ? 'County: ':
-            '';
-        if (state.general.geoType === 'us-county') {
-            let stateFipsCode = row[state.columns.geo.name].substring(0,2)
-            const stateName = supportedStatesFipsCodes[stateFipsCode];
-            
-            //supportedStatesFipsCodes[]
-            toolTipText += `<strong>State:  ${stateName}</strong><br/>`;
-        }
-        
-        toolTipText += `<strong>${stateOrCounty}${displayGeoName(geoName)}</strong>`
+  const changeFilterActive = async (idx, activeValue) => {
+    // Reset active legend toggles
+    resetLegendToggles()
 
-        if('data' === state.general.type && undefined !== row) {
-            toolTipText += `<dl>`
+    try {
+      const isEmpty = (obj) => {
+        return Object.keys(obj).length === 0
+      }
 
-            Object.keys(state.columns).forEach((columnKey) => {
-                const column = state.columns[columnKey]
+      let filters = [ ...runtimeFilters ]
 
-                if (true === column.tooltip) {
+      filters[idx] = { ...filters[idx] }
+      filters[idx].active = activeValue
 
-                    let label = column.label.length > 0 ? column.label : '';
+      const newData = generateRuntimeData(state, filters)
 
-                    let value;
+      // throw an error if newData is empty
+      if (isEmpty(newData)) throw new Error('Cove Filter Error: No runtime data to set for this filter')
 
-                    if(state.legend.specialClasses && state.legend.specialClasses.length && typeof state.legend.specialClasses[0] === 'object'){
-                        for(let i = 0; i < state.legend.specialClasses.length; i++){
-                            if(String(row[state.legend.specialClasses[i].key]) === state.legend.specialClasses[i].value){
-                                value = displayDataAsText(state.legend.specialClasses[i].label, columnKey);
-                                break;
-                            }
-                        }
-                    }
+      // set the runtime filters and data
+      setRuntimeData(newData)
+      setRuntimeFilters(filters)
+    } catch (e) {
+      console.error(e.message)
+    }
+  }
 
-                    if(!value){
-                        value = displayDataAsText(row[column.name], columnKey);
-                    }
+  const displayDataAsText = (value, columnName) => {
+    if (value === null || value === '' || value === undefined) {
+      return ''
+    }
 
-                    if(0 < value.length) { // Only spit out the tooltip if there's a value there
-                        toolTipText += `<div><dt>${label}</dt><dd>${value}</dd></div>`
-                    }
+    if (typeof value === 'string' && value.length > 0 && state.legend.type === 'equalnumber') {
+      return value
+    }
 
-                }
-            })
+    let formattedValue = value
 
-            toolTipText += `</dl>`
-        }
+    let columnObj = state.columns[columnName]
 
-        // 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>)]
+    if (columnObj) {
+      // If value is a number, apply specific formattings
+      if (Number(value)) {
+        const hasDecimal = columnObj.roundToPlace && (columnObj.roundToPlace !== '' || columnObj.roundToPlace !== null)
+        const decimalPoint = columnObj.roundToPlace ? Number(columnObj.roundToPlace) : 0
 
-            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>) )
-            }
+        // Rounding
+        if (columnObj.hasOwnProperty('roundToPlace') && hasDecimal) {
+          formattedValue = Number(value).toFixed(decimalPoint)
         }
 
-        return toolTipText
+        if (columnObj.hasOwnProperty('useCommas') && columnObj.useCommas === true) {
+          // Formats number to string with commas - allows up to 5 decimal places, if rounding is not defined.
+          // Otherwise, uses the rounding value set at 'columnObj.roundToPlace'.
+          formattedValue = Number(value).toLocaleString('en-US', {
+            style: 'decimal',
+            minimumFractionDigits: hasDecimal ? decimalPoint : 0,
+            maximumFractionDigits: hasDecimal ? decimalPoint : 5
+          })
+        }
+      }
 
+      // Check if it's a special value. If it is not, apply the designated prefix and suffix
+      if (false === state.legend.specialClasses.includes(String(value))) {
+        formattedValue = (columnObj.prefix || '') + formattedValue + (columnObj.suffix || '')
+      }
     }
 
-    const titleCase = (string) => {
-        return string.split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()).join(' ');
+    return formattedValue
+  }
+
+  const applyLegendToRow = (rowObj) => {
+    try {
+      if (!rowObj) throw new Error('COVE: No rowObj in applyLegendToRow')
+      // Navigation map
+      if ('navigation' === state.general.type) {
+        let mapColorPalette = colorPalettes[state.color] || colorPalettes['bluegreenreverse']
+        return generateColorsArray(mapColorPalette[3])
+      }
+
+      let hash = hashObj(rowObj)
+
+      if (legendMemo.current.has(hash)) {
+        let idx = legendMemo.current.get(hash)
+        if (runtimeLegend[idx]?.disabled) return false
+        return generateColorsArray(runtimeLegend[idx]?.color, runtimeLegend[idx]?.special)
+      }
+
+      // Fail state
+      return generateColorsArray()
+    } catch (e) {
+      console.error(e)
     }
+  }
 
-    // This resets all active legend toggles.
-    const resetLegendToggles = async () => {
-        let newLegend = [...runtimeLegend]
+  const applyTooltipsToGeo = (geoName, row, returnType = 'string') => {
 
-        newLegend.forEach(legendItem => {
-            delete legendItem.disabled
-        })
+    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: '
+        : ''
+
+    if (state.general.geoType === 'us-county' && state.general.type !== 'us-geocode') {
+      let stateFipsCode = row[state.columns.geo.name].substring(0, 2)
+      const stateName = supportedStatesFipsCodes[stateFipsCode]
 
-        setRuntimeLegend(newLegend)
+      toolTipText += !state.general.hideGeoColumnInTooltip ? `<strong>State:  ${stateName}</strong><br/>` : `<strong>${stateName}</strong><br/>`
     }
 
-    // Supports JSON or CSV
-    const fetchRemoteData = async (url) => {
-        try {
-            const urlObj = new URL(url);
-            const regex = /(?:\.([^.]+))?$/
-
-            let data = []
-
-            const ext = (regex.exec(urlObj.pathname)[1])
-            if ('csv' === ext) {
-                data = await fetch(url)
-                    .then(response => response.text())
-                    .then(responseText => {
-                        const parsedCsv = Papa.parse(responseText, {
-                            header: true,
-                            dynamicTyping: true,
-                            skipEmptyLines: true
-                        })
-                        return parsedCsv.data
-                    })
-            }
+    toolTipText += !state.general.hideGeoColumnInTooltip ? `<strong>${stateOrCounty}${displayGeoName(geoName)}</strong>` : `<strong>${displayGeoName(geoName)}</strong>`
 
-            if ('json' === ext) {
-                data = await fetch(url)
-                    .then(response => response.json())
-            }
+    if (('data' === state.general.type || state.general.type === 'bubble' || state.general.type === 'us-geocode') && undefined !== row) {
+      toolTipText += `<dl>`
+
+      Object.keys(state.columns).forEach((columnKey) => {
+        const column = state.columns[columnKey]
+
+        if (true === column.tooltip) {
+          let label = column.label.length > 0 ? column.label : ''
 
-            return data;
-        } catch {
-            // If we can't parse it, still attempt to fetch it
-            try {
-                let response = await (await fetch(configUrl)).json()
-                return response
-            } catch {
-                console.error(`Cannot parse URL: ${url}`);
+          let value
+
+          if (state.legend.specialClasses && state.legend.specialClasses.length && typeof state.legend.specialClasses[0] === 'object') {
+            for (let i = 0; i < state.legend.specialClasses.length; i++) {
+              if (String(row[state.legend.specialClasses[i].key]) === state.legend.specialClasses[i].value) {
+                value = displayDataAsText(state.legend.specialClasses[i].label, columnKey)
+                break
+              }
             }
+          }
+
+          if (!value) {
+            value = displayDataAsText(row[column.name], columnKey)
+          }
+
+          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>`
+          }
         }
+      })
+      toolTipText += `</dl>`
     }
 
-    // Attempts to find the corresponding value
-    const displayGeoName = (key) => {
-        let value = key
+    // 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>) ]
 
-        // Map to first item in values array which is the preferred label
-        if(stateKeys.includes(value)) {
-            value = titleCase(supportedStates[key][0])
-        }
+      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>))
+      }
+    }
 
-        if(territoryKeys.includes(value)) {
-            value = titleCase(supportedTerritories[key][0])
-        }
+    return toolTipText
+  }
 
-        if(countryKeys.includes(value)) {
-            value = titleCase(supportedCountries[key][0])
-        }
+  const titleCase = (string) => {
+    return string.split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()).join(' ')
+  }
 
-        if(countyKeys.includes(value)) {
-            value = titleCase(supportedCounties[key])
-        }
+  // This resets all active legend toggles.
+  const resetLegendToggles = async () => {
+    let newLegend = [ ...runtimeLegend ]
 
-        const dict = {
-            "District of Columbia" : "Washington D.C."
-        }
+    newLegend.forEach(legendItem => {
+      delete legendItem.disabled
+    })
 
-        if(true === Object.keys(dict).includes(value)) {
-            value = dict[value]
-        }
+    setRuntimeLegend(newLegend)
+  }
+
+  const formatLegendLocation = (key) => {
+    let value = key
+    let formattedName = ''
+    let stateName = stateFipsToTwoDigit[key.substring(0, 2)]
 
-        return titleCase(value);
+    if (stateName) {
+      formattedName += stateName
     }
 
-    const navigationHandler = (urlString) => {
-        // Call custom navigation method if passed
-        if(customNavigationHandler) {
-            customNavigationHandler(urlString);
-            return;
-        }
+    if (countyKeys.includes(value)) {
+      formattedName += ', ' + titleCase(supportedCounties[key])
+    }
 
-        // Abort if value is blank
-        if(0 === urlString.length) {
-            throw Error("Blank string passed as URL. Navigation aborted.");
-        }
+    return formattedName
+  }
 
-        const urlObj = new URL(urlString);
+  // Attempts to find the corresponding value
+  const displayGeoName = (key) => {
+    let value = key
 
-        // Open constructed link in new tab/window
-        window.open(urlObj.toString(), '_blank');
+    // Map to first item in values array which is the preferred label
+    if (stateKeys.includes(value)) {
+      value = titleCase(supportedStates[key][0])
     }
 
-    const geoClickHandler = (key, value) => {
-        // If modals are set or we are on a mobile viewport, display modal
-        if ('xs' === currentViewport || 'xxs' === currentViewport || 'click' === state.tooltips.appearanceType) {
-            setModal({
-                geoName: key,
-                keyedData: value
-            })
+    if (territoryKeys.includes(value)) {
+      value = titleCase(supportedTerritories[key][0])
+    }
 
-            return;
-        }
+    if (countryKeys.includes(value)) {
+      value = titleCase(supportedCountries[key][0])
+    }
 
-        // Otherwise if this item has a link specified for it, do regular navigation.
-        if (state.columns.navigate && value[state.columns.navigate.name]) {
-            navigationHandler(value[state.columns.navigate.name])
-        }
+    if (countyKeys.includes(value)) {
+      value = titleCase(supportedCounties[key])
     }
 
-    const validateFipsCodeLength = (newState) => {
-        if(newState.general.geoType === 'us-county' || newState.general.geoType === 'single-state' || newState.general.geoType === 'us' && newState?.data) {
+    const dict = {
+      'Washington D.C.': 'District of Columbia',
+      'WASHINGTON DC': 'District of Columbia',
+      'DC': 'District of Columbia',
+      'WASHINGTON DC.': 'District of Columbia',
+      'Congo': 'Republic of the Congo'
+    }
 
-            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]
-                    }
-                }
-            })
-        }
-        return newState;
+    if (true === Object.keys(dict).includes(value)) {
+      value = dict[value]
+    }
+    return titleCase(value)
+  }
+
+  const navigationHandler = (urlString) => {
+    // Call custom navigation method if passed
+    if (customNavigationHandler) {
+      customNavigationHandler(urlString)
+      return
     }
 
-    const loadConfig = async (configObj) => {
-        // Set loading flag
-        if(!loading) setLoading(true)
+    // Abort if value is blank
+    if (0 === urlString.length) {
+      throw Error('Blank string passed as URL. Navigation aborted.')
+    }
 
-        // Create new config object the same way each time no matter when this method is called.
-        let newState = {
-            ...initialState,
-            ...configObj
-        }
+    const urlObj = new URL(urlString)
 
-        // If a dataUrl property exists, always pull from that.
-        if (newState.dataUrl) {
-            if(newState.dataUrl[0] === '/') {
-                newState.dataUrl = 'https://' + hostname + newState.dataUrl
-            }
+    // Open constructed link in new tab/window
+    window.open(urlObj.toString(), '_blank')
+  }
 
-            let newData = await fetchRemoteData(newState.dataUrl)
+  const geoClickHandler = (key, value) => {
+    if (setSharedFilter) {
+      setSharedFilter(state.uid, value)
+    }
 
-            if(newData && newState.dataDescription) {
-                newData = transform.autoStandardize(newData);
-                newData = transform.developerStandardize(newData, newState.dataDescription);
-            }
+    // If modals are set or we are on a mobile viewport, display modal
+    if (window.matchMedia('(any-hover: none)').matches || 'click' === state.tooltips.appearanceType) {
+      setModal({
+        geoName: key,
+        keyedData: value
+      })
 
-            if(newData) {
-                newState.data = newData
-            }
-        }
+      return
+    }
 
-        // 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) => {
-            if("object" === typeof newState[key] && false === Array.isArray(newState[key])) {
-                if(initialState[key] ) {
-                    Object.keys(initialState[key]).forEach( (property) => {
-                        if(undefined === newState[key][property]) {
-                            newState[key][property] = initialState[key][property]
-                        }
-                    })
-                }
-            }
-        })
+    // Otherwise if this item has a link specified for it, do regular navigation.
+    if (state.columns.navigate && value[state.columns.navigate.name]) {
+      navigationHandler(value[state.columns.navigate.name])
+    }
+  }
 
-        // If there's a name for the geo, add UIDs
-        if(newState.columns.geo.name || newState.columns.geo.fips) {
-            addUIDs(newState, newState.columns.geo.name || newState.columns.geo.fips)
-        }
+  const validateFipsCodeLength = (newState) => {
+    if (newState.general.geoType === 'us-county' || newState.general.geoType === 'single-state' || newState.general.geoType === 'us' && newState?.data) {
 
-        if(newState.dataTable.forceDisplay === undefined){
-            newState.dataTable.forceDisplay = !isDashboard;
-        }
+      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]
+          }
+          dataPiece[newState.columns.geo.name] = dataPiece[newState.columns.geo.name].toString()
+        }
+      })
+    }
+    return newState
+  }
+
+  const handleMapAriaLabels = (state = '', testing = false) => {
+    if (testing) console.log(`handleMapAriaLabels Testing On: ${state}`)
+    try {
+      if (!state.general.geoType) throw Error('handleMapAriaLabels: no geoType found in state')
+      let ariaLabel = ''
+      switch (state.general.geoType) {
+        case 'world':
+          ariaLabel += 'World map'
+          break
+        case 'us':
+          ariaLabel += 'United States map'
+          break
+        case 'us-county':
+          ariaLabel += `United States county map`
+          break
+        case 'single-state':
+          ariaLabel += `${state.general.statePicked.stateName} county map`
+          break
+        case 'us-region':
+          ariaLabel += `United States HHS Region map`
+          break
+        default:
+          ariaLabel = 'Data visualization container'
+          break
+      }
+
+      if (state.general.title) {
+        ariaLabel += ` with the title: ${state.general.title}`
+      }
+
+      return ariaLabel
+    } catch (e) {
+      console.error(e.message)
+    }
+  }
 
-        validateFipsCodeLength(newState);
-        setState(newState)
+  const loadConfig = async (configObj) => {
+    // Set loading flag
+    if (!loading) setLoading(true)
 
-        // Done loading
-        setLoading(false)
+    // Create new config object the same way each time no matter when this method is called.
+    let newState = {
+      ...initialState,
+      ...configObj
     }
 
-    const init = async () => {
-        let configData = null
 
-        // Load the configuration data passed to this component if it exists
-        if(config) {
-            configData = config
-        }
+        // If a dataUrl property exists, always pull from that.
+        if (newState.dataUrl) {
+            if(newState.dataUrl[0] === '/') {
+                newState.dataUrl = 'http://' + hostname + newState.dataUrl
+            }
 
-        // If the config passed is a string, try to load it as an ajax
-        if(configUrl) {
-            configData = await fetchRemoteData(configUrl)
-        }
+            // handle urls with spaces in the name.
+            if (newState.dataUrl) newState.dataUrl = encodeURI(`${newState.dataUrl}?v=${cacheBustingString()}`)
+            let newData = await fetchRemoteData(newState.dataUrl )
+
+      if (newData && newState.dataDescription) {
+        newData = transform.autoStandardize(newData)
+        newData = transform.developerStandardize(newData, newState.dataDescription)
+      }
+
+      if (newData) {
+        newState.data = newData
+      }
+    }
 
-        // Once we have a config verify that it is an object and load it
-        if('object' === typeof configData) {
-            loadConfig(configData)
+    // 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) => {
+      if ('object' === typeof newState[key] && false === Array.isArray(newState[key])) {
+        if (initialState[key]) {
+          Object.keys(initialState[key]).forEach((property) => {
+            if (undefined === newState[key][property]) {
+              newState[key][property] = initialState[key][property]
+            }
+          })
         }
+      }
+    })
+
+    // If there's a name for the geo, add UIDs
+    if (newState.columns.geo.name || newState.columns.geo.fips) {
+      addUIDs(newState, newState.columns.geo.name || newState.columns.geo.fips)
     }
 
-    // Initial load
-    useEffect(() => {
-        init()
-    }, [])
+    if (newState.dataTable.forceDisplay === undefined) {
+      newState.dataTable.forceDisplay = !isDashboard
+    }
 
-    useEffect(() => {
-        if (state.data) {
-            let newData = generateRuntimeData(state);
-            setRuntimeData(newData);
-        }
-    }, [state.general.statePicked]);
+    validateFipsCodeLength(newState)
+    setState(newState)
+    setLoading(false)
+  }
 
+  const init = async () => {
+    let configData = null
 
+    // Load the configuration data passed to this component if it exists
+    if (config) {
+      configData = config
+    }
 
-    // When geotype changes
-    useEffect(() => {
-        
-        // UID
-        if(state.data && state.columns.geo.name) {
-            addUIDs(state, state.columns.geo.name)
-        }
-        
-    }, [state.general.geoType]);
+    // If the config passed is a string, try to load it as an ajax
+    if (configUrl) {
+      configData = await fetchRemoteData(configUrl)
+    }
 
-    useEffect(() => {
+    // Once we have a config verify that it is an object and load it
+    if ('object' === typeof configData) {
+      loadConfig(configData)
+    }
+  }
 
-        // UID
-        if(state.data && state.columns.geo.name && state.columns.geo.name !== state.data.fromColumn) {
-            addUIDs(state, state.columns.geo.name)
-        }
+  // Initial load
+  useEffect(() => {
+    init()
+  }, [])
 
-        // Filters
-        const hashFilters = hashObj(state.filters)
-        let filters;
+  useEffect(() => {
+    if (state && !coveLoadedHasRan && container) {
+      publish('cove_loaded', { config: state })
+      setCoveLoadedHasRan(true)
+    }
+  }, [ state, container ])
 
-        if(state.filters && hashFilters !== runtimeFilters.fromHash) {
-            filters = generateRuntimeFilters(state, hashFilters, runtimeFilters)
+  useEffect(() => {
+    if (state.data) {
+      let newData = generateRuntimeData(state)
+      setRuntimeData(newData)
+    }
+  }, [ state.general.statePicked ])
 
-            if(filters) {
-                setRuntimeFilters(filters)
-            }
-         }
-
-        const hashLegend = hashObj({
-            color: state.color,
-            customColors: state.customColors,
-            numberOfItems: state.legend.numberOfItems,
-            type: state.legend.type,
-            separateZero: state.legend.separateZero ?? false,
-            categoryValuesOrder: state.legend.categoryValuesOrder,
-            specialClasses: state.legend.specialClasses,
-            geoType: state.general.geoType,
-            data: state.data
-        })
+  // When geotype changes
+  useEffect(() => {
+    // UID
+    if (state.data && state.columns.geo.name) {
+      addUIDs(state, state.columns.geo.name)
+    }
+  }, [ state ])
 
-        const hashData = hashObj({
-            columns: state.columns,
-            geoType: state.general.geoType,
-            type: state.general.type,
-            geo: state.columns.geo.name,
-            primary: state.columns.primary.name,
-            data: state.data,
-            ...runtimeFilters
-        })
+  useEffect(() => {
+    // UID
+    if (state.data && state.columns.geo.name && state.columns.geo.name !== state.data.fromColumn) {
+      addUIDs(state, state.columns.geo.name)
+    }
 
-        // Data
-        let newRuntimeData;
-        if(hashData !== runtimeData.fromHash && state.data?.fromColumn) {
-            newRuntimeData = generateRuntimeData(state, filters || runtimeFilters, hashData)
-            setRuntimeData(newRuntimeData) 
-        }
+    // Filters
+    const hashFilters = hashObj(state.filters)
+    let filters
 
-        // Legend
-        if (hashLegend !== runtimeLegend.fromHash && (undefined === runtimeData.init || newRuntimeData)) {
-            const legend = generateRuntimeLegend(state, newRuntimeData || runtimeData, hashLegend)
-            setRuntimeLegend(legend)
-        }
-    }, [state])
+    if (state.filters && hashFilters !== runtimeFilters.fromHash) {
+      filters = generateRuntimeFilters(state, hashFilters, runtimeFilters)
 
-    useEffect(() => {
-        const hashLegend = hashObj({
-            color: state.color,
-            customColors: state.customColors,
-            numberOfItems: state.legend.numberOfItems,
-            type: state.legend.type,
-            separateZero: state.legend.separateZero ?? false,
-            categoryValuesOrder: state.legend.categoryValuesOrder,
-            specialClasses: state.legend.specialClasses,
-            geoType: state.general.geoType,
-            data: state.data
-        })
-        
-        // Legend - Update when runtimeData does
-        if(hashLegend !== runtimeLegend.fromHash && undefined === runtimeData.init) {
-            const legend = generateRuntimeLegend(state, runtimeData)
-            setRuntimeLegend(legend)
-        }
-    }, [runtimeData])
+      if (filters) {
+        setRuntimeFilters(filters)
+      }
+    }
+
+    const hashLegend = hashObj({
+      color: state.color,
+      customColors: state.customColors,
+      numberOfItems: state.legend.numberOfItems,
+      type: state.legend.type,
+      separateZero: state.legend.separateZero ?? false,
+      categoryValuesOrder: state.legend.categoryValuesOrder,
+      specialClasses: state.legend.specialClasses,
+      geoType: state.general.geoType,
+      data: state.data,
+      ...runtimeLegend
+    })
+
+    const hashData = hashObj({
+      columns: state.columns,
+      geoType: state.general.geoType,
+      type: state.general.type,
+      geo: state.columns.geo.name,
+      primary: state.columns.primary.name,
+      data: state.data,
+      ...runtimeFilters,
+      mapPosition: state.mapPosition
+    })
 
-    if(config) {
-        useEffect(() => {
-            loadConfig(config)
-        }, [config.data])
+    // Data
+    let newRuntimeData
+    if (hashData !== runtimeData.fromHash && state.data?.fromColumn) {
+      const newRuntimeData = generateRuntimeData(state, filters || runtimeFilters, hashData)
+      setRuntimeData(newRuntimeData)
     }
 
-    // Destructuring for more readable JSX
-    const { general, tooltips, dataTable } = state
-    const { title = '', subtext = ''} = general
+    // Legend
+    if (hashLegend !== runtimeLegend.fromHash && (undefined === runtimeData.init || newRuntimeData)) {
+      const legend = generateRuntimeLegend(state, newRuntimeData || runtimeData, hashLegend)
+      setRuntimeLegend(legend)
+    }
 
-    // Outer container classes
-    let outerContainerClasses = [
-        'cdc-open-viz-module',
-        'cdc-map-outer-container',
-        currentViewport
-    ]
+  }, [ state ])
+
+  useEffect(() => {
+    const hashLegend = hashObj({
+      color: state.color,
+      customColors: state.customColors,
+      numberOfItems: state.legend.numberOfItems,
+      type: state.legend.type,
+      separateZero: state.legend.separateZero ?? false,
+      categoryValuesOrder: state.legend.categoryValuesOrder,
+      specialClasses: state.legend.specialClasses,
+      geoType: state.general.geoType,
+      data: state.data
+    })
 
-    if(className) {
-        outerContainerClasses.push(className)
+    // Legend - Update when runtimeData does
+    if (hashLegend !== runtimeLegend.fromHash && undefined === runtimeData.init) {
+      const legend = generateRuntimeLegend(state, runtimeData)
+      setRuntimeLegend(legend)
     }
 
-    // Map container classes
-    let mapContainerClasses = [
-        'map-container',
-        state.legend.position,
-        state.general.type,
-        state.general.geoType
-    ]
+  }, [ runtimeData ])
 
-    if(modal) {
-        mapContainerClasses.push('modal-background')
+  if (config) {
+    useEffect(() => {
+      loadConfig(config)
+    }, [ config.data ])
+  }
+
+  // Destructuring for more readable JSX
+  const { general, tooltips, dataTable } = state
+  const { title = '', subtext = '' } = general
+
+  // Outer container classes
+  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'
+  ]
+
+  if (modal) {
+    mapContainerClasses.push('modal-background')
+  }
+
+  if (general.type === 'navigation' && true === general.fullBorder) {
+    mapContainerClasses.push('full-border')
+  }
+
+  // Props passed to all map types
+  const mapProps = {
+    state,
+    data: runtimeData,
+    rebuildTooltips: ReactTooltip.rebuild,
+    applyTooltipsToGeo,
+    closeModal,
+    navigationHandler,
+    geoClickHandler,
+    applyLegendToRow,
+    displayGeoName,
+    runtimeLegend,
+    generateColorsArray,
+    titleCase,
+    setState,
+    setRuntimeData,
+    generateRuntimeData,
+    setFilteredCountryCode,
+    filteredCountryCode,
+    position,
+    setPosition,
+    setSharedFilterValue,
+    hasZoom: state.general.allowMapZoom,
+    handleMapAriaLabels
+  }
+
+  if (!mapProps.data || !state.data) return <Loading/>
+
+  const hasDataTable = state.runtime.editorErrorMessage.length === 0 && true === dataTable.forceDisplay && general.type !== 'navigation' && false === loading
+
+  const handleMapTabbing = () => {
+    let tabbingID
+
+    // 1) skip to legend
+    if (general.showSidebar) {
+      tabbingID = '#legend'
     }
 
-    if(general.type === 'navigation' && true === general.fullBorder) {
-        mapContainerClasses.push('full-border')
+    // 2) skip to data table if it exists and not a navigation map
+    if (hasDataTable && !general.showSidebar) {
+      tabbingID = `#dataTableSection__${Date.now()}`
     }
 
-    // Props passed to all map types
-    const mapProps = {
-        state,
-        data: runtimeData,
-        rebuildTooltips : ReactTooltip.rebuild,
-        applyTooltipsToGeo,
-        closeModal,
-        navigationHandler,
-        geoClickHandler,
-        applyLegendToRow,
-        displayGeoName,
-        runtimeLegend,
-        generateColorsArray,
-        titleCase
+    // 3) if its a navigation map skip to the dropdown.
+    if (state.general.type === 'navigation') {
+      tabbingID = `#dropdown-${Date.now()}`
     }
 
-    if (!mapProps.data || !state.data) return <Loading />;
-
-    const handleMapTabbing = general.showSidebar ? `#legend` : state.general.title ? `#dataTableSection__${state.general.title.replace(/\s/g, '')}` : `#dataTableSection`
-    
-
-    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.length !== 0) && <section className={`cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title}>
-                {['lg', 'md'].includes(currentViewport) && 'hover' === tooltips.appearanceType && (
-					<ReactTooltip
-						id='tooltip'
-						place='right'
-						type='light'
-						html={true}
-						className={tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'}
-					/>
-				)}
-				<header className={general.showTitle === true ? '' : 'hidden'} aria-hidden='true'>
-					<div role='heading' className={'map-title ' + general.headerColor} tabIndex="0">
-						{parse(title)}
-					</div>
-				</header>
-				<section className={mapContainerClasses.join(' ')} onClick={(e) => 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={handleMapTabbing}>
-                        Skip Over Map Container
-                    </a>
-					<section className='geography-container' aria-hidden='true' ref={mapSvg}>
-                        {currentViewport && (
-                            <section className='geography-container' aria-hidden='true' 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 && (
-                                    <UsaMap 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>
-                        
-                        )}
-                        </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}
-						/>
-					)}
-				</section>
-				{'navigation' === general.type && (
-					<NavigationMenu
-						displayGeoName={displayGeoName}
-						data={runtimeData}
-						options={general}
-						columns={state.columns}
-						navigationHandler={(val) => navigationHandler(val)}
-					/>
-				)}
-				{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.indexTitle}
-						mapTitle={general.title}
-						viewport={currentViewport}
-					/>
-				)}
-				{subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
-			</section>}
-			<div aria-live='assertive' className='cdcdataviz-sr-only'>
-				{accessibleStatus}
-			</div>
-		</div>
-	);
+    // 4) handle other options
+    return tabbingID || '#!'
+  }
+
+  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>
+
+        <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} />
+                )}
+                {'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}
+            />
+          )}
+        </section>
+
+        {'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>}
+
+        {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>}
+
+      <div aria-live="assertive" className="cdcdataviz-sr-only">
+        {accessibleStatus}
+      </div>
+    </div>
+  )
 }
 
 export default memo(CdcMap)