@cdc/map 2.6.2 → 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, supportedCities } 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,22 +44,32 @@ 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
 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)
 
@@ -65,7 +86,7 @@ const hashObj = (row) => {
     let str = JSON.stringify(row)
 
 	let hash = 0;
-	if (str.length == 0) return hash;
+	if (str.length === 0) return hash;
 	for (let i = 0; i < str.length; i++) {
 		let char = str.charCodeAt(i);
 		hash = ((hash<<5)-hash) + char;
@@ -93,23 +114,81 @@ const getUniqueValues = (data, columnName) => {
 }
 
 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('lg')
+    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
+                }
+    
+                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)
         }
     });
@@ -117,14 +196,23 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
     // 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]
+            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) )
@@ -140,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]
@@ -147,8 +252,13 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
                 uid = countryKeys.find( (key) => supportedCountries[key].includes(geoName) )
             }
 
-            // TODO: Points
+            // 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 )
+            }
 
+            // TODO: Points
             if(uid) {
                 Object.defineProperty(row, 'uid', {
                     value: uid,
@@ -161,10 +271,14 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
     })
 
     const generateRuntimeLegend = useCallback((obj, runtimeData, hash) => {
+
         const newLegendMemo = new Map(); // Reset memoization
 
         const
             primaryCol = obj.columns.primary.name,
+            isData = obj.general.type === 'data',
+            isBubble = obj.general.type === 'bubble',
+            categoricalCol = obj.columns.categorical ? obj.columns.categorical.name : undefined,
             type = obj.legend.type,
             number = obj.legend.numberOfItems,
             result = [];
@@ -186,12 +300,22 @@ 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 = colorPalettes[obj.color] || colorPalettes['bluegreen']
+            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
 
@@ -217,30 +341,73 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
         // Special classes
         if (obj.legend.specialClasses.length) {
-            dataSet = dataSet.filter(row => {
-                const val = row[primaryCol]
+            if(typeof obj.legend.specialClasses[0] === 'object'){
+                obj.legend.specialClasses.forEach(specialClass => {
+                    dataSet = dataSet.filter(row => {
+                        const val = String(row[specialClass.key]);
 
-                if( obj.legend.specialClasses.includes(val) ) {
-                    if(undefined === specialClassesHash[val]) {
-                        specialClassesHash[val] = true
+                        if(specialClass.value === val){
+                            if(undefined === specialClassesHash[val]) {
+                                specialClassesHash[val] = true;
 
-                        result.push({
-                            special: true,
-                            value: val
-                        })
+                                result.push({
+                                    special: true,
+                                    value: val,
+                                    label: specialClass.label
+                                });
 
-                        result[result.length - 1].color = applyColorToLegend(result.length - 1)
+                                result[result.length - 1].color = applyColorToLegend(result.length - 1);
 
-                        specialClasses += 1
-                    }
+                                specialClasses += 1;
+                            }
 
-                    newLegendMemo.set( hashObj(row), result.length - 1)
+                            let 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;
+                        }
+
+                        return true;
+                    });
+                });
+            } else {
+                dataSet = dataSet.filter(row => {
+                    const val = row[primaryCol]
+
+                    if( obj.legend.specialClasses.includes(val) ) {
+
+                        // apply the special color to the legend
+                        if(undefined === specialClassesHash[val]) {
+                            specialClassesHash[val] = true;
+
+                            result.push({
+                                special: true,
+                                value: val
+                            });
+
+                            result[result.length - 1].color = applyColorToLegend(result.length - 1);
+
+                            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)
+
+                        return false
+                    }
+
+                    return true
+                })
+            }
         }
 
         // Category
@@ -250,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)) {
@@ -261,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()]
@@ -305,7 +471,12 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             return result
         }
 
-        let legendNumber = number
+        let uniqueValues = {};
+        dataSet.forEach(datum => {
+            uniqueValues[datum[primaryCol]] = true;
+        });
+
+        let legendNumber = Math.min(number, Object.keys(uniqueValues).length);
 
         // Separate zero
         if(true === obj.legend.separateZero) {
@@ -347,48 +518,146 @@ 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
+
+                    chunkAmt = Math.floor(numberOfRows / changingNumber)
+
+                    if (remainder > 0) {
+                        chunkAmt += 1
+                    }
 
-            // Loop through the array until it has been split into equal subarrays
-            while ( numberOfRows > 0 ) {
-                remainder = numberOfRows % changingNumber
+                    let removedRows = dataSet.splice(0, chunkAmt);
 
-                chunkAmt = Math.floor(numberOfRows / changingNumber)
+                    let min = removedRows[0][primaryCol],
+                        max = removedRows[removedRows.length - 1][primaryCol]
 
-                if (remainder > 0) {
-                    chunkAmt += 1
+                    removedRows.forEach(row => {
+                        newLegendMemo.set(hashObj(row), result.length)
+                    })
+
+                    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)
+
+                
+                // 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 = breaks[index];
+                    let max = breaks[index + 1] - 1;
+
+                    const setMin = () => {
+                        // in starting position and zero in the data
+                        if(index === 0 && state.legend.separateZero) {
+                            min = 0;
+                        }
 
-                let removedRows = dataSet.splice(0, chunkAmt);
+                        if(index === 0 && !state.legend.separateZero) {
+                            min = domainNums[0]
+                        }
 
-                let min = removedRows[0][primaryCol],
-                    max = removedRows[removedRows.length - 1][primaryCol]
+                    } 
 
-                removedRows.forEach(row => {
-                    newLegendMemo.set( hashObj(row), result.length )
-                })
+                    const setMax = () => {
+                        if(index === 0 && state.legend.separateZero) {
+                            max = 0;
+                        }
 
-                result.push({
-                    min,
-                    max
-                })
+                        if(index + 1 === breaks.length) {
+                            max = domainNums[1]
+                        }
+                    }
 
-                result[result.length - 1].color = applyColorToLegend(result.length - 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') {
-            dataSet = dataSet.filter(row => row[primaryCol])
+        
+        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]
 
@@ -435,11 +704,34 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
         if(hash) filters.fromHash = hash
 
-        obj.filters.forEach(({columnName, label}, idx) => {
+        obj?.filters.forEach(({columnName, label, active, values}, idx) => {
             if(undefined === columnName) return
 
             let newFilter = runtimeFilters[idx]
-            let values = getUniqueValues(state.data, columnName)
+
+            const sortAsc = (a, b) => {
+                return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+            };
+
+            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)
+            }
+
+            if(obj.filters[idx].order === 'desc') {
+                values = values.sort(sortDesc)
+            }
+
+            if(obj.filters[idx].order === 'cust') {
+                if(obj.filters[idx]?.values.length > 0) {
+                    values = obj.filters[idx].values
+                }
+            }
 
             if(undefined === newFilter) {
                 newFilter = {}
@@ -448,7 +740,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             newFilter.label = label ?? ''
             newFilter.columnName = columnName
             newFilter.values = values
-            newFilter.active = values[0] // Default to first found value
+            newFilter.active = active || values[0] // Default to first found value
 
             filters.push(newFilter)
         })
@@ -457,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) {
@@ -466,18 +758,34 @@ 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 (
+                !(String(row[obj.columns.geo.name]).substring(0, 2) === obj.general?.statePicked?.fipsCode) &&
+                obj.general.geoType === 'single-state'
+            ) {
+                return false;
+            }
+
+
             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 ) {
+                
+                if ( undefined !== navigateUrl && typeof navigateUrl === "string" ) {
                     // Strip hidden characters before we check length
                     navigateUrl = navigateUrl.replace( /(\r\n|\n|\r)/gm, '' );
                 }
@@ -487,11 +795,11 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             }
 
             // Filters
-            if(filters.length) {
+            if(filters?.length) {
                 for(let i = 0; i < filters.length; i++) {
                     const {columnName, active} = filters[i]
 
-                    if (row[columnName] != active) return false // Bail out, not part of filter
+                    if (String(row[columnName]) !== String(active)) return false // Bail out, not part of filter
                 }
             }
 
@@ -508,6 +816,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         if (node !== null) {
             resizeObserver.observe(node);
         }
+        setContainer(node)
     },[]);
 
     const mapSvg = useRef(null);
@@ -611,16 +920,29 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         // Reset active legend toggles
         resetLegendToggles()
 
-        let filters = [...runtimeFilters]
+        try {
+
+            const isEmpty = (obj) => {
+                return Object.keys(obj).length === 0;
+            }
+
+            let filters = [...runtimeFilters]
 
-        filters[idx] = {...filters[idx]}
+            filters[idx] = { ...filters[idx] }
 
-        filters[idx].active = activeValue
+            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 newData = generateRuntimeData(state, filters)
+            // set the runtime filters and data
+            setRuntimeData(newData)
+            setRuntimeFilters(filters)
+        } catch(e) {
+            console.error(e.message)
+        }
 
-        setRuntimeData(newData)
-        setRuntimeFilters(filters)
     }
 
     const displayDataAsText = (value, columnName) => {
@@ -652,8 +974,8 @@ 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(value)) {
-                formattedValue = columnObj.prefix + formattedValue + columnObj.suffix
+            if (false === state.legend.specialClasses.includes(String(value))) {
+                formattedValue = (columnObj.prefix || '') + formattedValue + (columnObj.suffix || '')
             }
         }
 
@@ -683,22 +1005,49 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
     }
 
     const applyTooltipsToGeo = (geoName, row, returnType = 'string') => {
-        let toolTipText = `<strong>${displayGeoName(geoName)}</strong>`
+        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];
+            
+            toolTipText +=  !state.general.hideGeoColumnInTooltip ? `<strong>State:  ${stateName}</strong><br/>` : `<strong>${stateName}</strong><br/>` ;
+        }
+        
+        toolTipText += !state.general.hideGeoColumnInTooltip ? `<strong>${stateOrCounty}${displayGeoName(geoName)}</strong>` : `<strong>${displayGeoName(geoName)}</strong>`
 
-        if('data' === state.general.type) {
+        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 = displayDataAsText(row[column.name], columnKey);
+                    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 += `<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>`
                     }
 
                 }
@@ -720,6 +1069,10 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
     }
 
+    const titleCase = (string) => {
+        return string.split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()).join(' ');
+    }
+
     // This resets all active legend toggles.
     const resetLegendToggles = async () => {
         let newLegend = [...runtimeLegend]
@@ -746,7 +1099,8 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
                     .then(responseText => {
                         const parsedCsv = Papa.parse(responseText, {
                             header: true,
-                            dynamicTyping: true
+                            dynamicTyping: true,
+                            skipEmptyLines: true
                         })
                         return parsedCsv.data
                     })
@@ -769,32 +1123,52 @@ 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
 
         // Map to first item in values array which is the preferred label
         if(stateKeys.includes(value)) {
-            value = supportedStates[key][0]
+            value = titleCase(supportedStates[key][0])
         }
 
         if(territoryKeys.includes(value)) {
-            value = supportedTerritories[key][0]
+            value = titleCase(supportedTerritories[key][0])
         }
 
         if(countryKeys.includes(value)) {
-            value = supportedCountries[key][0]
+            value = titleCase(supportedCountries[key][0])
+        }
+
+        if(countyKeys.includes(value)) {
+            value = titleCase(supportedCounties[key])
         }
 
         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 value
+        return titleCase(value);
     }
 
     const navigationHandler = (urlString) => {
@@ -832,7 +1206,23 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         }
     }
 
-    const loadConfig = async (configObj) => {
+    const validateFipsCodeLength = (newState) => {
+        if(newState.general.geoType === 'us-county' || newState.general.geoType === 'single-state' || newState.general.geoType === 'us' && newState?.data) {
+
+            newState?.data.forEach(dataPiece => {
+                if(dataPiece[newState.columns.geo.name]) {
+
+                    if(!isNaN(parseInt(dataPiece[newState.columns.geo.name])) && dataPiece[newState.columns.geo.name].length === 4) {
+                        dataPiece[newState.columns.geo.name] = 0 + dataPiece[newState.columns.geo.name]
+                    }
+                    dataPiece[newState.columns.geo.name] = dataPiece[newState.columns.geo.name].toString()
+                }
+            })
+        }
+        return newState;
+    }
+
+    const loadConfig = async (configObj) => { 
         // Set loading flag
         if(!loading) setLoading(true)
 
@@ -842,17 +1232,21 @@ 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(data);
-                newData = transform.developerStandardize(data, newState.dataDescription);
+                newData = transform.autoStandardize(newData);
+                newData = transform.developerStandardize(newData, newState.dataDescription);
             }
 
             if(newData) {
@@ -876,17 +1270,16 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         })
 
         // If there's a name for the geo, add UIDs
-        if(newState.columns.geo.name) {
-            addUIDs(newState, newState.columns.geo.name)
+        if(newState.columns.geo.name || newState.columns.geo.fips) {
+            addUIDs(newState, newState.columns.geo.name || newState.columns.geo.fips)
         }
 
         if(newState.dataTable.forceDisplay === undefined){
             newState.dataTable.forceDisplay = !isDashboard;
         }
 
+        validateFipsCodeLength(newState);
         setState(newState)
-
-        // Done loading
         setLoading(false)
     }
 
@@ -914,6 +1307,42 @@ 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);
+            setRuntimeData(newData);
+        }
+    }, [state.general.statePicked]);
+
+
+    // When geotype changes
+    useEffect(() => {
+        // UID
+        if(state.data && state.columns.geo.name) {
+            addUIDs(state, state.columns.geo.name)
+        }
+
+    }, [state]);
+
     useEffect(() => {
         // UID
         if(state.data && state.columns.geo.name && state.columns.geo.name !== state.data.fromColumn) {
@@ -922,9 +1351,10 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
         // Filters
         const hashFilters = hashObj(state.filters)
+        let filters;
 
         if(state.filters && hashFilters !== runtimeFilters.fromHash) {
-            const filters = generateRuntimeFilters(state, hashFilters, runtimeFilters)
+            filters = generateRuntimeFilters(state, hashFilters, runtimeFilters)
 
             if(filters) {
                 setRuntimeFilters(filters)
@@ -933,44 +1363,62 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
         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
+            geoType: state.general.geoType,
+            data: state.data,
+             ...runtimeLegend
         })
 
-        // Legend
-        if(hashLegend !== runtimeLegend.fromHash && undefined === runtimeData.init) {
-            const legend = generateRuntimeLegend(state, runtimeData, hashLegend)
-
-            setRuntimeLegend(legend)
-        }
-
         const hashData = hashObj({
+            columns: state.columns,
             geoType: state.general.geoType,
             type: state.general.type,
             geo: state.columns.geo.name,
             primary: state.columns.primary.name,
-            ...runtimeFilters
+            data: state.data,
+            ...runtimeFilters,
+            mapPosition: state.mapPosition
         })
 
         // Data
+        let newRuntimeData;
         if(hashData !== runtimeData.fromHash && state.data?.fromColumn) {
-            const data = generateRuntimeData(state, runtimeFilters, hashData)
-
+            const data = generateRuntimeData(state, filters || runtimeFilters, hashData)
             setRuntimeData(data)
         }
+
+        // Legend
+        if (hashLegend !== runtimeLegend.fromHash && (undefined === runtimeData.init || newRuntimeData)) {
+            const legend = generateRuntimeLegend(state, newRuntimeData || runtimeData, hashLegend)
+            setRuntimeLegend(legend)
+        }
+        
     }, [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
+        })
+        
         // Legend - Update when runtimeData does
-        if(undefined === runtimeData.init) {
+        if(hashLegend !== runtimeLegend.fromHash && undefined === runtimeData.init) {
             const legend = generateRuntimeLegend(state, runtimeData)
-
             setRuntimeLegend(legend)
         }
+
     }, [runtimeData])
 
     if(config) {
@@ -1010,8 +1458,6 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         mapContainerClasses.push('full-border')
     }
 
-    if(loading) return <Loading />
-
     // Props passed to all map types
     const mapProps = {
         state,
@@ -1022,100 +1468,178 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         navigationHandler,
         geoClickHandler,
         applyLegendToRow,
-        displayGeoName
+        displayGeoName,
+        runtimeLegend,
+        generateColorsArray,
+        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 && <EditorPanel isDashboard={isDashboard} state={state} setState={setState} loadConfig={loadConfig} setParentConfig={setConfig} runtimeFilters={runtimeFilters} runtimeLegend={runtimeLegend} columnsInData={Object.keys(state.data[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}>
-                        { 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>
-                    }
-                    <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} />}
-                            {'us' === general.geoType && <UsaMap supportedTerritories={supportedTerritories} {...mapProps} />}
-                            {'world' === general.geoType && <WorldMap supportedCountries={supportedCountries} {...mapProps} />}
-                            {"data" === general.type && logo && <img src={logo} alt="" className="map-logo"/>}
-                    </section>
-                    {general.showSidebar && 'navigation' !== general.type && false === loading  &&
-                        <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>
-    )
+		<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}>
+                {['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 ? '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 
+                    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={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} />
+                                )}
+                                {'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}
+						/>
+					)}
+				</section>
+				{'navigation' === general.type && (
+					<NavigationMenu
+						displayGeoName={displayGeoName}
+						data={runtimeData}
+						options={general}
+						columns={state.columns}
+						navigationHandler={(val) => navigationHandler(val)}
+					/>
+				)}
+				{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.indexTitle}
+						mapTitle={general.title}
+						viewport={currentViewport}
+                        formatLegendLocation={formatLegendLocation}
+                        setFilteredCountryCode={setFilteredCountryCode}
+					/>
+				)}
+				{subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
+			</section>}
+			<div aria-live='assertive' className='cdcdataviz-sr-only'>
+				{accessibleStatus}
+			</div>
+		</div>
+	);
 }
 
 export default memo(CdcMap)