@cdc/map 2.6.3 → 2.6.4

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'
@@ -15,10 +16,20 @@ 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';
@@ -33,6 +44,7 @@ import Loading from '@cdc/core/components/Loading';
 import DataTransform from '@cdc/core/components/DataTransform';
 import getViewport from '@cdc/core/helpers/getViewport';
 import numberFromString from '@cdc/core/helpers/numberFromString'
+import validateFipsCodeLength from '@cdc/core/helpers/validateFipsCodeLength'
 
 
 // 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)
 
@@ -108,8 +125,64 @@ 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 => {
@@ -120,17 +193,6 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         }
     });
 
-    // *******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 +203,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 +228,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 +276,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 +300,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 ) {
+                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)
@@ -317,8 +417,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 +427,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()]
@@ -419,47 +518,145 @@ 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 chunkAmt
+
+                // Loop through the array until it has been split into equal subarrays
+                while (numberOfRows > 0) {
+                    remainder = numberOfRows % changingNumber
 
-            let remainder
-            let changingNumber = legendNumber
+                    chunkAmt = Math.floor(numberOfRows / changingNumber)
 
-            let chunkAmt
+                    if (remainder > 0) {
+                        chunkAmt += 1
+                    }
+
+                    let removedRows = dataSet.splice(0, chunkAmt);
 
-            // Loop through the array until it has been split into equal subarrays
-            while ( numberOfRows > 0 ) {
-                remainder = numberOfRows % changingNumber
+                    let min = removedRows[0][primaryCol],
+                        max = removedRows[removedRows.length - 1][primaryCol]
 
-                chunkAmt = Math.floor(numberOfRows / changingNumber)
+                    removedRows.forEach(row => {
+                        newLegendMemo.set(hashObj(row), result.length)
+                    })
 
-                if (remainder > 0) {
-                    chunkAmt += 1
+                    result.push({
+                        min,
+                        max
+                    })
+
+                    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]))
+                console.log('hasZeroInData', hasZeroInData)
+                if(hasZeroInData && state.legend.separateZero) { domainNums.add(0) }
+
+                domainNums = d3.extent(domainNums)
+                let colors = colorPalettes[state.color]
+                let colorRange = colors.slice(0, state.legend.separateZero ? state.legend.numberOfItems - 1 : state.legend.numberOfItems)
+                let scale = d3.scaleQuantile()
+                    .domain(dataSet.map(item => Math.round(item[state.columns.primary.name]))) // min/max values
+                    //.domain(domainNums)
+                    .range(colorRange) // set range to our colors array
+
+                let breaks = scale.quantiles();
+                breaks = breaks.map( item => Math.round(item))
+
+                console.log('breaks', breaks)
+                console.log('d', domainNums)
 
-                let removedRows = dataSet.splice(0, chunkAmt);
+                
+                // always start with domain beginning breakpoint
+                breaks.unshift(d3.extent(domainNums)?.[0])
+                
+                if (state.legend.separateZero && !hasZeroInData) {
+                    breaks.splice(1, 0, 1);
+                } 
+                
+                breaks.map( (item, index) => {
 
-                let min = removedRows[0][primaryCol],
-                    max = removedRows[removedRows.length - 1][primaryCol]
+                    let min = breaks[index];
+                    let max = breaks[index + 1] - 1;
 
-                removedRows.forEach(row => {
-                    newLegendMemo.set( hashObj(row), result.length )
-                })
+                    const setMin = () => {
+                        // in starting position and zero in the data
+                        if(index === 0 && state.legend.separateZero) {
+                            min = 0;
+                        }
 
-                result.push({
-                    min,
-                    max
-                })
+                        if(index === 0 && !state.legend.separateZero) {
+                            min = domainNums[0]
+                        }
 
-                result[result.length - 1].color = applyColorToLegend(result.length - 1)
+                    } 
+
+                    const setMax = () => {
+                        if(index === 0 && state.legend.separateZero) {
+                            max = 0;
+                        }
+
+                        if(index + 1 === breaks.length) {
+                            max = domainNums[1]
+                        }
+                    }
+
+                    setMin()
+                    setMax()
+                    console.log('res', result)
+
+                    if(index === 0 && result[index]?.max === 0 && state.legend.separateZero) return true;
+                    result.push({
+                        min,
+                        max,
+                        color: scale(item)
+                    })
+                    
+                    
+                    dataSet.forEach( (row, dataIndex) => {
+                        let number = row[state.columns.primary.name]
+                        
+                        let updated = state.legend.separateZero ? index : 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 +749,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) {
@@ -564,11 +761,16 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         
 
         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,7 +778,7 @@ 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
@@ -614,6 +816,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         if (node !== null) {
             resizeObserver.observe(node);
         }
+        setContainer(node)
     },[]);
 
     const mapSvg = useRef(null);
@@ -772,7 +975,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
             // 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 +1006,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 +1047,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>`
                     }
 
                 }
@@ -919,6 +1123,22 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         }
     }
 
+    const formatLegendLocation = (key) => {
+        let value = key;
+        var formattedName = '';
+        let stateName = stateFipsToTwoDigit[key.substring(0, 2)]
+
+        if(stateName) {
+            formattedName += stateName
+        }
+
+        if (countyKeys.includes(value)) {
+            formattedName += ', ' + titleCase(supportedCounties[key])
+        }
+
+        return formattedName;
+    }
+
     // Attempts to find the corresponding value
     const displayGeoName = (key) => {
         let value = key
@@ -941,13 +1161,13 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         }
 
         const dict = {
-            "District of Columbia" : "Washington D.C."
+            "District of Columbia" : "Washington D.C.",
+            "Congo": "Republic of the Congo"
         }
 
         if(true === Object.keys(dict).includes(value)) {
             value = dict[value]
         }
-
         return titleCase(value);
     }
 
@@ -991,16 +1211,18 @@ 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 loadConfig = async (configObj) => { 
         // Set loading flag
         if(!loading) setLoading(true)
 
@@ -1010,13 +1232,17 @@ 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 = 'https://' + hostname + newState.dataUrl + '?v=' + cacheBustingString
             }
 
-            let newData = await fetchRemoteData(newState.dataUrl)
+            let newData = await fetchRemoteData(newState.dataUrl + '?v=' + cacheBustingString )
 
             if(newData && newState.dataDescription) {
                 newData = transform.autoStandardize(newData);
@@ -1052,11 +1278,8 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             newState.dataTable.forceDisplay = !isDashboard;
         }
 
-
         validateFipsCodeLength(newState);
         setState(newState)
-
-        // Done loading
         setLoading(false)
     }
 
@@ -1084,6 +1307,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 +1334,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 +1370,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 +1381,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 data = generateRuntimeData(state, filters || runtimeFilters, hashData)
+            setRuntimeData(data)
         }
 
         // Legend
@@ -1156,6 +1397,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             const legend = generateRuntimeLegend(state, newRuntimeData || runtimeData, hashLegend)
             setRuntimeLegend(legend)
         }
+        
     }, [state])
 
     useEffect(() => {
@@ -1176,6 +1418,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             const legend = generateRuntimeLegend(state, runtimeData)
             setRuntimeLegend(legend)
         }
+
     }, [runtimeData])
 
     if(config) {
@@ -1228,14 +1471,21 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         displayGeoName,
         runtimeLegend,
         generateColorsArray,
-        titleCase
+        titleCase,
+        setState,
+        setRuntimeData,
+        generateRuntimeData,
+        setFilteredCountryCode,
+        filteredCountryCode,
+        position,
+        setPosition,
+        hasZoom : state.general.allowMapZoom
     }
 
     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 && (
@@ -1251,7 +1501,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'
@@ -1261,12 +1511,18 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 						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">
+                <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">
 						{parse(title)}
 					</div>
 				</header>
-				<section className={mapContainerClasses.join(' ')} onClick={(e) => closeModal(e)}>
+				<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'>
@@ -1308,7 +1564,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} />
@@ -1352,7 +1611,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 						navigationHandler={(val) => navigationHandler(val)}
 					/>
 				)}
-				{true === dataTable.forceDisplay && general.type !== 'navigation' && false === loading && (
+				{state.runtime.editorErrorMessage.length === 0 && true === dataTable.forceDisplay && general.type !== 'navigation' && false === loading && (
 					<DataTable
 						state={state}
 						rawData={state.data}
@@ -1370,6 +1629,8 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 						indexTitle={dataTable.indexTitle}
 						mapTitle={general.title}
 						viewport={currentViewport}
+                        formatLegendLocation={formatLegendLocation}
+                        setFilteredCountryCode={setFilteredCountryCode}
 					/>
 				)}
 				{subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}