@cdc/map 2.6.3 → 9.22.9

package/src/CdcMap.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, memo, useCallback } from 'react';
+import * as d3 from 'd3';
 
 // IE11
 import 'core-js/stable'
@@ -8,31 +9,42 @@ 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 html2pdf from 'html2pdf.js'
 import html2canvas from 'html2canvas';
 import Canvg from 'canvg';
 
 // Data
+import colorPalettes from '../../core/data/colorPalettes';
 import ExternalIcon from './images/external-link.svg';
-import { supportedStates, supportedTerritories, supportedCountries, supportedCounties, supportedCities, supportedStatesFipsCodes } from './data/supported-geos';
-import colorPalettes from './data/color-palettes';
+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/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';
 
 
 // Child Components
@@ -40,19 +52,24 @@ 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)
 
@@ -96,8 +113,8 @@ const getUniqueValues = (data, columnName) => {
     return Object.keys(result)
 }
 
-const CdcMap = ({className, config, navigationHandler: customNavigationHandler, isDashboard = false, isEditor = false, configUrl, logo = null, setConfig, hostname}) => {
-     
+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} )
@@ -108,29 +125,72 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
     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
+                }
+    
+                setRuntimeData(tmpData)
+            }
+        }, 100)
+
+    }, [filteredCountryCode]);
+
+    useEffect(() => {
+        if (state.mapPosition) {
+            setPosition(state.mapPosition)
+        }
+    }, [state.mapPosition, setPosition]);
 
+    const setZoom = (reversedCoordinates) => {
+        setState({
+            ...state,
+            mapPosition: { coordinates: reversedCoordinates, zoom: 3 }
+        })
+    };
 
     const resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
             let newViewport = getViewport(entry.contentRect.width)
-            
+
             setCurrentViewport(newViewport)
         }
     });
 
-    // *******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) => {
@@ -141,8 +201,16 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             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() : '';
+            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 = '';
+                if (row[obj.columns.geo.name] !== undefined && row[obj.columns.geo.name] !== null) {
+
+                    geoName = String(row[obj.columns.geo.name])
+                    geoName = geoName.toUpperCase()
+                }
 
                 // States
                 uid = stateKeys.find( (key) => supportedStates[key].includes(geoName) )
@@ -158,6 +226,23 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
                 }
             }
 
+            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 = '';
+                if (row[obj.columns.geo.name] !== undefined && row[obj.columns.geo.name] !== null) {
+
+                    geoName = String(row[obj.columns.geo.name])
+                    geoName = geoName.toUpperCase()
+                }
+
+                // Regions
+                uid = regionKeys.find( (key) => supportedRegions[key].includes(geoName) )
+
+
+            }
+
             // World Check
             if("world" === obj.general.geoType) {
                 const geoName = row[obj.columns.geo.name]
@@ -189,6 +274,9 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
         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 = [];
@@ -210,13 +298,23 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             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 ]
+            9: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ],
+            10: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
         }
 
         const applyColorToLegend = (legendIdx) => {
             // Default to "bluegreen" color scheme if the passed color isn't valid
             let mapColorPalette = obj.customColors || colorPalettes[obj.color] || colorPalettes['bluegreen']
 
+            // 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 colorIdx = legendIdx - specialClasses
 
             // Special Classes (No Data)
@@ -262,8 +360,8 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
                             }
 
                             let specialColor = '';
-                            
-                            // color the state if val is in row 
+
+                            // color the state if val is in row
                             specialColor = result.findIndex(p => p.value === val)
 
                             newLegendMemo.set( hashObj(row), specialColor)
@@ -293,10 +391,10 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
                             specialClasses += 1;
                         }
-                    
+
                         let specialColor = '';
-                        
-                        // color the state if val is in row 
+
+                        // color the state if val is in row
                         if ( Object.values(row).includes(val) ) {
                             specialColor = result.findIndex(p => p.value === val)
                         }
@@ -317,8 +415,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
             for(let i = 0; i < dataSet.length; i++) {
                 let row = dataSet[i]
-                let value = row[primaryCol]
-
+                let value = isBubble && categoricalCol && row[categoricalCol] ? row[categoricalCol] : row[primaryCol]
                 if(undefined === value) continue
 
                 if(false === uniqueValues.has(value)) {
@@ -328,7 +425,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
                     uniqueValues.get(value).push(hashObj(row))
                 }
 
-                if(count === 9) break // Can only have 9 categorical items for now
+                if(count === 10) break // Can only have 10 categorical items for now
             }
 
             let sorted = [...uniqueValues.keys()]
@@ -380,7 +477,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         let legendNumber = Math.min(number, Object.keys(uniqueValues).length);
 
         // Separate zero
-        if(true === obj.legend.separateZero) {
+        if(true === obj.legend.separateZero && !state.general.equalNumberOptIn) {
             let addLegendItem = false;
 
             for(let i = 0; i < dataSet.length; i++) {
@@ -419,47 +516,172 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         })
 
         // Equal Number
-        if(type === 'equalnumber') {
-            let numberOfRows = dataSet.length
+        if (type === 'equalnumber') {
+            // start work on changing legend functionality
+            // FALSE === ignore old version for now.
+            if (!state.general.equalNumberOptIn) {
+                let numberOfRows = dataSet.length
+
+                let remainder
+                let changingNumber = legendNumber
 
-            let remainder
-            let changingNumber = legendNumber
+                let chunkAmt
 
-            let chunkAmt
+                // Loop through the array until it has been split into equal subarrays
+                while (numberOfRows > 0) {
+                    remainder = numberOfRows % changingNumber
 
-            // Loop through the array until it has been split into equal subarrays
-            while ( numberOfRows > 0 ) {
-                remainder = numberOfRows % changingNumber
+                    chunkAmt = Math.floor(numberOfRows / changingNumber)
 
-                chunkAmt = Math.floor(numberOfRows / changingNumber)
+                    if (remainder > 0) {
+                        chunkAmt += 1
+                    }
+
+                    let removedRows = dataSet.splice(0, chunkAmt);
+
+                    let min = removedRows[0][primaryCol],
+                        max = removedRows[removedRows.length - 1][primaryCol]
+
+                    removedRows.forEach(row => {
+                        newLegendMemo.set(hashObj(row), result.length)
+                    })
+
+                    result.push({
+                        min,
+                        max
+                    })
 
-                if (remainder > 0) {
-                    chunkAmt += 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]))
 
-                let removedRows = dataSet.splice(0, chunkAmt);
+                domainNums = d3.extent(domainNums)
+                let colors = colorPalettes[state.color]
 
-                let min = removedRows[0][primaryCol],
-                    max = removedRows[removedRows.length - 1][primaryCol]
+                let colorRange = colors.slice(0, state.legend.numberOfItems )
 
-                removedRows.forEach(row => {
-                    newLegendMemo.set( hashObj(row), result.length )
-                })
+                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
 
-                result.push({
-                    min,
-                    max
-                })
+                let breaks = scale.quantiles();
 
-                result[result.length - 1].color = applyColorToLegend(result.length - 1)
+                breaks = breaks.map( item => Math.round(item))
+                
+                // always start with zero for new quantile
+                // we can't start at the first break, because there will be items missing.
+                // if(d3.extent(domainNums)?.[0] !== 0 && Math.min.apply(null, domainNums) !== 0) {
+                //     console.log(`Adding: ${d3.extent(domainNums)?.[0]}`)
+                //     breaks.unshift(d3.extent(domainNums)?.[0])
+                // }
+
+
+                // if seperating zero force it into breaks
+                if(breaks[0] !== 0) {
+                    breaks.unshift(0)
+                }
+
+                breaks.map( (item, index) => {
+
+                    const setMin = (index) => {
+
+                        //debugger;
+                        let min = breaks[index];
+
+                        // if first break is a seperated zero, min is zero
+                        if( index === 0 && state.legend.separateZero) {
+                            min = 0;
+                        }
+
+                        // if we're on the second break, and seperating out zero, increment min to 1.
+                        if( index === 1 && state.legend.separateZero) {
+                            min = 1
+                        }
+
+                        // // in starting position and zero in the data
+                        // if((index === state.legend.specialClasses?.length ) && (state.legend.specialClasses.length !== 0)) {
+                        //     min = breaks[index]
+                        // }
+                        return min;
+
+                    } 
+
+                    const setMax = (index, min) => {
+
+                        let max = breaks[index + 1] - 1;
+
+                        // check if min and max range are the same
+                        // if (min === max + 1) {
+                        //     max = breaks[index + 1]
+                        // }
+
+                        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(index + 1 === breaks.length) {
+                            max = domainNums[1]
+                        }
+
+                        return max;
+                    }
+
+                    let min = setMin(index)
+                    let max = setMax(index, min)
+
+                    result.push({
+                        min,
+                        max,
+                        color: scale(item)
+                    })
+
+                    
+                    dataSet.forEach( (row, dataIndex) => {
+                        let number = row[state.columns.primary.name]
+
+                        let updated = 0
+                        
+                        // 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;
+
+                        if (result[updated]?.min === (null || undefined) || result[updated]?.max === (null || undefined)) return;
+
+                        if(number >= result[updated].min && number <= result[updated].max) {
+                            newLegendMemo.set(hashObj(row), updated)
+                        }
+                    })
+
+
+                })
 
-                changingNumber -= 1
-                numberOfRows -= chunkAmt
             }
         }
 
         // Equal Interval
-        if(type === 'equalinterval') {
+        
+        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]
@@ -552,7 +774,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
     })
 
     // Calculates what's going to be displayed on the map and data table at render.
-    const generateRuntimeData = useCallback((obj, filters, hash) => {
+    const generateRuntimeData = useCallback((obj, filters, hash, test) => {
         const result = {}
 
         if(hash) {
@@ -561,14 +783,19 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
                 value : hash
             });
         }
-        
+
 
         obj.data.forEach(row => {
+
+            if(test) {
+                console.log('object', obj)
+                console.log('row', row) 
+            }
             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 (
-                !(row[obj.columns.geo.name].substring(0, 2) === obj.general?.statePicked?.fipsCode) &&
+                !(String(row[obj.columns.geo.name]).substring(0, 2) === obj.general?.statePicked?.fipsCode) &&
                 obj.general.geoType === 'single-state'
             ) {
                 return false;
@@ -576,13 +803,13 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
 
             if(row[obj.columns.primary.name]) {
-                row[obj.columns.primary.name] = numberFromString(row[obj.columns.primary.name])
+                row[obj.columns.primary.name] = numberFromString(row[obj.columns.primary.name], state)
             }
 
             // 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, '' );
@@ -614,6 +841,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         if (node !== null) {
             resizeObserver.observe(node);
         }
+        setContainer(node)
     },[]);
 
     const mapSvg = useRef(null);
@@ -729,7 +957,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
             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')
 
@@ -741,12 +969,14 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         }
 
     }
-
     const displayDataAsText = (value, columnName) => {
-        if(value === null) {
+        if(value === null || value === "" || value === undefined ) {
             return ""
         }
-
+        if(typeof value === 'string' && value.length > 0 && state.legend.type==='equalnumber'){
+            return value
+        }
+ 
         let formattedValue = value
 
         let columnObj = state.columns[columnName]
@@ -754,25 +984,23 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         if (columnObj) {
             // If value is a number, apply specific formattings
             if (Number(value)) {
+                const decimalPoint = columnObj.roundToPlace ? Number(columnObj.roundToPlace) : 0
+
                 // Rounding
                 if(columnObj.hasOwnProperty('roundToPlace') && columnObj.roundToPlace !== "None") {
-
-                    const decimalPoint = columnObj.roundToPlace
-
                     formattedValue = Number(value).toFixed(decimalPoint)
-
+                    
                 }
 
                 if(columnObj.hasOwnProperty('useCommas') && columnObj.useCommas === true) {
-
-                    formattedValue = Number(value).toLocaleString('en-US', { style: 'decimal'})
-
+                    formattedValue = Number(value).toLocaleString('en-US', { style: 'decimal', minimumFractionDigits: decimalPoint, maximumFractionDigits: decimalPoint })
                 }
+
             }
 
             // 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
+                formattedValue = (columnObj.prefix || '') + formattedValue + (columnObj.suffix || '')
             }
         }
 
@@ -803,28 +1031,29 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
     const applyTooltipsToGeo = (geoName, row, returnType = 'string') => {
         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') {
             let stateFipsCode = row[state.columns.geo.name].substring(0,2)
             const stateName = supportedStatesFipsCodes[stateFipsCode];
             
-            //supportedStatesFipsCodes[]
-            toolTipText += `<strong>State:  ${stateName}</strong><br/>`;
+            toolTipText +=  !state.general.hideGeoColumnInTooltip ? `<strong>State:  ${stateName}</strong><br/>` : `<strong>${stateName}</strong><br/>` ;
         }
         
-        toolTipText += `<strong>${stateOrCounty}${displayGeoName(geoName)}</strong>`
+        toolTipText += !state.general.hideGeoColumnInTooltip ? `<strong>${stateOrCounty}${displayGeoName(geoName)}</strong>` : `<strong>${displayGeoName(geoName)}</strong>`
 
-        if('data' === state.general.type && undefined !== row) {
+        if( ('data' === state.general.type || state.general.type === 'bubble') && 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 : '';
 
                     let value;
@@ -843,7 +1072,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
                     }
 
                     if(0 < value.length) { // Only spit out the tooltip if there's a value there
-                        toolTipText += `<div><dt>${label}</dt><dd>${value}</dd></div>`
+                        toolTipText += state.general.hidePrimaryColumnInTooltip ? `<div><dd>${value}</dd></div>` : `<div><dt>${label}</dt><dd>${value}</dd></div>`
                     }
 
                 }
@@ -880,43 +1109,20 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         setRuntimeLegend(newLegend)
     }
 
-    // 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
-                    })
-            }
+    const formatLegendLocation = (key) => {
+        let value = key;
+        var formattedName = '';
+        let stateName = stateFipsToTwoDigit[key.substring(0, 2)]
 
-            if ('json' === ext) {
-                data = await fetch(url)
-                    .then(response => response.json())
-            }
+        if(stateName) {
+            formattedName += stateName
+        }
 
-            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}`);
-            }
+        if (countyKeys.includes(value)) {
+            formattedName += ', ' + titleCase(supportedCounties[key])
         }
+
+        return formattedName;
     }
 
     // Attempts to find the corresponding value
@@ -941,13 +1147,16 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         }
 
         const dict = {
-            "District of Columbia" : "Washington D.C."
+            "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"
         }
 
         if(true === Object.keys(dict).includes(value)) {
             value = dict[value]
         }
-
         return titleCase(value);
     }
 
@@ -970,6 +1179,10 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
     }
 
     const geoClickHandler = (key, value) => {
+        if(setSharedFilter){
+            setSharedFilter(state.uid, value);
+        }
+
         // If modals are set or we are on a mobile viewport, display modal
         if ('xs' === currentViewport || 'xxs' === currentViewport || 'click' === state.tooltips.appearanceType) {
             setModal({
@@ -991,16 +1204,53 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
             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 loadConfig = async (configObj) => {
+    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)
+        }
+    }
+
+    const loadConfig = async (configObj) => { 
         // Set loading flag
         if(!loading) setLoading(true)
 
@@ -1010,13 +1260,20 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             ...configObj
         }
 
+        const round = 1000 * 60 * 15;
+        const date = new Date();
+        let cacheBustingString = new Date(date.getTime() - (date.getTime() % round)).toISOString();
+
         // If a dataUrl property exists, always pull from that.
         if (newState.dataUrl) {
             if(newState.dataUrl[0] === '/') {
-                newState.dataUrl = 'https://' + hostname + newState.dataUrl
+                newState.dataUrl = 'http://' + hostname + newState.dataUrl
             }
 
-            let newData = await fetchRemoteData(newState.dataUrl)
+            // handle urls with spaces in the name.
+            if (newState.dataUrl) newState.dataUrl = encodeURI(newState.dataUrl + '?v=' + cacheBustingString )
+
+            let newData = await fetchRemoteData(newState.dataUrl )
 
             if(newData && newState.dataDescription) {
                 newData = transform.autoStandardize(newData);
@@ -1052,11 +1309,8 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             newState.dataTable.forceDisplay = !isDashboard;
         }
 
-
         validateFipsCodeLength(newState);
         setState(newState)
-
-        // Done loading
         setLoading(false)
     }
 
@@ -1084,6 +1338,25 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         init()
     }, [])
 
+    useEffect(() => {
+        if (state && !coveLoadedHasRan && container) {
+            publish('cove_loaded', { config: state })
+            setCoveLoadedHasRan(true)
+        }
+    }, [state, container]);
+
+    // useEffect(() => {
+    //     if(state.focusedCountry && state.data) {
+    //         let newRuntimeData = state.data.filter(item => item[state.columns.geo.name] === state.focusedCountry[state.columns.geo.name])
+    //         let temp = {
+    //             ...state,
+    //             data: newRuntimeData
+    //         }
+    //         setRuntimeData(temp)
+    //     }
+
+    // }, [state.focusedCountry]);
+
     useEffect(() => {
         if (state.data) {
             let newData = generateRuntimeData(state);
@@ -1092,19 +1365,16 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
     }, [state.general.statePicked]);
 
 
-
     // When geotype changes
     useEffect(() => {
-        
         // UID
         if(state.data && state.columns.geo.name) {
             addUIDs(state, state.columns.geo.name)
         }
-        
-    }, [state.general.geoType]);
 
-    useEffect(() => {
+    }, [state]);
 
+    useEffect(() => {
         // UID
         if(state.data && state.columns.geo.name && state.columns.geo.name !== state.data.fromColumn) {
             addUIDs(state, state.columns.geo.name)
@@ -1131,7 +1401,8 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             categoryValuesOrder: state.legend.categoryValuesOrder,
             specialClasses: state.legend.specialClasses,
             geoType: state.general.geoType,
-            data: state.data
+            data: state.data,
+             ...runtimeLegend
         })
 
         const hashData = hashObj({
@@ -1141,14 +1412,15 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             geo: state.columns.geo.name,
             primary: state.columns.primary.name,
             data: state.data,
-            ...runtimeFilters
+            ...runtimeFilters,
+            mapPosition: state.mapPosition
         })
 
         // Data
         let newRuntimeData;
         if(hashData !== runtimeData.fromHash && state.data?.fromColumn) {
-            newRuntimeData = generateRuntimeData(state, filters || runtimeFilters, hashData)
-            setRuntimeData(newRuntimeData) 
+            const newRuntimeData = generateRuntimeData(state, filters || runtimeFilters, hashData)
+            setRuntimeData(newRuntimeData)
         }
 
         // Legend
@@ -1156,6 +1428,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             const legend = generateRuntimeLegend(state, newRuntimeData || runtimeData, hashLegend)
             setRuntimeLegend(legend)
         }
+
     }, [state])
 
     useEffect(() => {
@@ -1170,12 +1443,13 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             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(config) {
@@ -1186,8 +1460,8 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
     // Destructuring for more readable JSX
     const { general, tooltips, dataTable } = state
-    const { title = '', subtext = ''} = general
-
+    const { title = '', subtext = '' } = general
+    
     // Outer container classes
     let outerContainerClasses = [
         'cdc-open-viz-module',
@@ -1204,7 +1478,8 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         'map-container',
         state.legend.position,
         state.general.type,
-        state.general.geoType
+        state.general.geoType,
+        'outline-none'
     ]
 
     if(modal) {
@@ -1228,13 +1503,47 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         displayGeoName,
         runtimeLegend,
         generateColorsArray,
-        titleCase
+        titleCase,
+        setState,
+        setRuntimeData,
+        generateRuntimeData,
+        setFilteredCountryCode,
+        filteredCountryCode,
+        position,
+        setPosition,
+        setSharedFilterValue,
+        hasZoom : state.general.allowMapZoom,
+        handleMapAriaLabels
     }
 
     if (!mapProps.data || !state.data) return <Loading />;
 
-    const handleMapTabbing = general.showSidebar ? `#legend` : state.general.title ? `#dataTableSection__${state.general.title.replace(/\s/g, '')}` : `#dataTableSection`
-    
+    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'
+        }
+        
+        // 2) skip to data table if it exists and not a navigation map
+        if (hasDataTable && !general.showSidebar) {
+            tabbingID = `#dataTableSection__${Date.now()}`;
+        }
+        
+        // 3) if its a navigation map skip to the dropdown.
+        if (state.general.type === 'navigation') {
+            tabbingID = `#dropdown-${Date.now()}`;
+        }
+
+        // 4) handle other options
+        return tabbingID || '#!';
+
+    }
+
+    const tabId = handleMapTabbing()
 
     return (
 		<div className={outerContainerClasses.join(' ')} ref={outerContainerRef}>
@@ -1251,7 +1560,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 					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}>
+			{!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && <section className={`cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title}>
                 {['lg', 'md'].includes(currentViewport) && 'hover' === tooltips.appearanceType && (
 					<ReactTooltip
 						id='tooltip'
@@ -1260,13 +1569,27 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 						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)}>
+                )}
+                {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'>
@@ -1288,12 +1611,13 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 						</div>
 					)}
 
-                    <a id='skip-geo-container' className='cdcdataviz-sr-only-focusable' href={handleMapTabbing}>
+                    <a id='skip-geo-container' className='cdcdataviz-sr-only-focusable' href={tabId}>
                         Skip Over Map Container
                     </a>
-					<section className='geography-container' aria-hidden='true' ref={mapSvg}>
+                    
+					<section className='geography-container outline-none' ref={mapSvg} tabIndex="0">
                         {currentViewport && (
-                            <section className='geography-container' aria-hidden='true' ref={mapSvg}>
+                            <section className='geography-container' ref={mapSvg}>
                                 {modal && (
                                     <Modal
                                         type={general.type}
@@ -1308,7 +1632,10 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
                                     <SingleStateMap supportedTerritories={supportedTerritories} {...mapProps} />
                                 )}
                                 {'us' === general.geoType && (
-                                    <UsaMap supportedTerritories={supportedTerritories} {...mapProps} />
+                                  <UsaMap supportedTerritories={supportedTerritories} {...mapProps} />
+                                )}
+                                {'us-region' === general.geoType && (
+                                  <UsaRegionMap supportedTerritories={supportedTerritories} {...mapProps} />
                                 )}
                                 {'world' === general.geoType && (
                                     <WorldMap supportedCountries={supportedCountries} {...mapProps} />
@@ -1321,10 +1648,10 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
                                 )}
                                 {'data' === general.type && logo && <img src={logo} alt='' className='map-logo' />}
                             </section>
-                        
+
                         )}
                         </section>
-
+                   
 					{general.showSidebar && 'navigation' !== general.type && (
 						<Sidebar
 							viewport={currentViewport}
@@ -1340,19 +1667,25 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 							resetLegendToggles={resetLegendToggles}
 							changeFilterActive={changeFilterActive}
 							setAccessibleStatus={setAccessibleStatus}
+                            displayDataAsText={displayDataAsText}
 						/>
 					)}
 				</section>
 				{'navigation' === general.type && (
-					<NavigationMenu
+                    <NavigationMenu
+                        mapTabbingID={tabId}
 						displayGeoName={displayGeoName}
 						data={runtimeData}
 						options={general}
 						columns={state.columns}
 						navigationHandler={(val) => navigationHandler(val)}
 					/>
-				)}
-				{true === dataTable.forceDisplay && general.type !== 'navigation' && false === loading && (
+                )}
+                {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}
@@ -1367,13 +1700,18 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 						displayGeoName={displayGeoName}
 						applyLegendToRow={applyLegendToRow}
 						tableTitle={dataTable.title}
-						indexTitle={dataTable.indexTitle}
+						indexTitle={dataTable.indexLabel}
 						mapTitle={general.title}
 						viewport={currentViewport}
+                        formatLegendLocation={formatLegendLocation}
+                        setFilteredCountryCode={setFilteredCountryCode}
+                        tabbingId={tabId}
 					/>
-				)}
-				{subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
-			</section>}
+                )}
+                
+                {general.footnotes && <section className="footnotes">{parse(general.footnotes)}</section>}
+            </section>}
+            
 			<div aria-live='assertive' className='cdcdataviz-sr-only'>
 				{accessibleStatus}
 			</div>