@cdc/map 2.6.2 → 2.6.3

package/src/CdcMap.js

@@ -16,7 +16,7 @@ import Canvg from 'canvg';
 
 // Data
 import ExternalIcon from './images/external-link.svg';
-import { supportedStates, supportedTerritories, supportedCountries, supportedCities } from './data/supported-geos';
+import { supportedStates, supportedTerritories, supportedCountries, supportedCounties, supportedCities, supportedStatesFipsCodes } from './data/supported-geos';
 import colorPalettes from './data/color-palettes';
 import initialState from './data/initial-state';
 
@@ -34,19 +34,23 @@ import DataTransform from '@cdc/core/components/DataTransform';
 import getViewport from '@cdc/core/helpers/getViewport';
 import numberFromString from '@cdc/core/helpers/numberFromString'
 
+
 // Child Components
 import Sidebar from './components/Sidebar';
 import Modal from './components/Modal';
 import EditorPanel from './components/EditorPanel'; // Future: Lazy
 import UsaMap from './components/UsaMap'; // Future: Lazy
+import CountyMap from './components/CountyMap'; // Future: Lazy
 import DataTable from './components/DataTable'; // Future: Lazy
 import NavigationMenu from './components/NavigationMenu'; // Future: Lazy
 import WorldMap from './components/WorldMap'; // Future: Lazy
+import SingleStateMap from './components/SingleStateMap'; // Future: Lazy
 
 // Data props
 const stateKeys = Object.keys(supportedStates)
 const territoryKeys = Object.keys(supportedTerritories)
 const countryKeys = Object.keys(supportedCountries)
+const countyKeys = Object.keys(supportedCounties)
 const cityKeys = Object.keys(supportedCities)
 
 const generateColorsArray = (color = '#000000', special = false) => {
@@ -65,7 +69,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,30 +97,44 @@ 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('')
-
     let legendMemo = useRef(new Map())
 
+
+
     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) => {
+
         obj.data.forEach(row => {
             let uid = null
 
@@ -124,7 +142,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
             // United States check
             if("us" === obj.general.geoType) {
-                const geoName = row[obj.columns.geo.name]
+                const geoName = row[obj.columns.geo.name] ? row[obj.columns.geo.name].toUpperCase() : '';
 
                 // States
                 uid = stateKeys.find( (key) => supportedStates[key].includes(geoName) )
@@ -147,8 +165,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,6 +184,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
     })
 
     const generateRuntimeLegend = useCallback((obj, runtimeData, hash) => {
+
         const newLegendMemo = new Map(); // Reset memoization
 
         const
@@ -191,7 +215,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
         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']
 
             let colorIdx = legendIdx - specialClasses
 
@@ -217,30 +241,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
@@ -305,7 +372,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) {
@@ -388,7 +460,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
         // Equal Interval
         if(type === 'equalinterval') {
-            dataSet = dataSet.filter(row => row[primaryCol])
+            dataSet = dataSet.filter(row => row[primaryCol] !== undefined)
             let dataMin = dataSet[0][primaryCol]
             let dataMax = dataSet[dataSet.length - 1][primaryCol]
 
@@ -435,11 +507,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 +543,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)
         })
@@ -466,10 +561,20 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
                 value : hash
             });
         }
+        
 
         obj.data.forEach(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) &&
+                obj.general.geoType === 'single-state'
+            ) {
+                return false;
+            }
+
+
             if(row[obj.columns.primary.name]) {
                 row[obj.columns.primary.name] = numberFromString(row[obj.columns.primary.name])
             }
@@ -477,7 +582,8 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             // 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 +593,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
                 }
             }
 
@@ -611,16 +717,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;
+            }
 
-        filters[idx] = {...filters[idx]}
+            let filters = [...runtimeFilters]
 
-        filters[idx].active = activeValue
+            filters[idx] = { ...filters[idx] }
 
-        const newData = generateRuntimeData(state, filters)
+            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')
+
+            // 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,7 +771,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(value)) {
+            if (false === state.legend.specialClasses.includes(String(value))) {
                 formattedValue = columnObj.prefix + formattedValue + columnObj.suffix
             }
         }
@@ -683,9 +802,22 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
     }
 
     const applyTooltipsToGeo = (geoName, row, returnType = 'string') => {
-        let toolTipText = `<strong>${displayGeoName(geoName)}</strong>`
+        let toolTipText = '';
+        let stateOrCounty = 
+            state.general.geoType === 'us' ? 'State: ' : 
+            (state.general.geoType === 'us-county' || state.general.geoType === 'single-state') ? 'County: ':
+            '';
+        if (state.general.geoType === 'us-county') {
+            let stateFipsCode = row[state.columns.geo.name].substring(0,2)
+            const stateName = supportedStatesFipsCodes[stateFipsCode];
+            
+            //supportedStatesFipsCodes[]
+            toolTipText += `<strong>State:  ${stateName}</strong><br/>`;
+        }
+        
+        toolTipText += `<strong>${stateOrCounty}${displayGeoName(geoName)}</strong>`
 
-        if('data' === state.general.type) {
+        if('data' === state.general.type && undefined !== row) {
             toolTipText += `<dl>`
 
             Object.keys(state.columns).forEach((columnKey) => {
@@ -695,7 +827,20 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
                     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>`
@@ -720,6 +865,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 +895,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
                     })
@@ -775,15 +925,19 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
 
         // 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 = {
@@ -794,7 +948,7 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             value = dict[value]
         }
 
-        return value
+        return titleCase(value);
     }
 
     const navigationHandler = (urlString) => {
@@ -832,6 +986,20 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         }
     }
 
+    const validateFipsCodeLength = (newState) => {
+        if(newState.general.geoType === 'us-county' || newState.general.geoType === 'single-state' || newState.general.geoType === 'us' && newState?.data) {
+
+            newState?.data.forEach(dataPiece => {
+                if(dataPiece[newState.columns.geo.name]) {
+                    if(!isNaN(parseInt(dataPiece[newState.columns.geo.name])) && dataPiece[newState.columns.geo.name].length === 4) {
+                        dataPiece[newState.columns.geo.name] = 0 + dataPiece[newState.columns.geo.name]
+                    }
+                }
+            })
+        }
+        return newState;
+    }
+
     const loadConfig = async (configObj) => {
         // Set loading flag
         if(!loading) setLoading(true)
@@ -851,8 +1019,8 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
             let newData = await fetchRemoteData(newState.dataUrl)
 
             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,14 +1044,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
@@ -915,6 +1085,26 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
     }, [])
 
     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.general.geoType]);
+
+    useEffect(() => {
+
         // UID
         if(state.data && state.columns.geo.name && state.columns.geo.name !== state.data.fromColumn) {
             addUIDs(state, state.columns.geo.name)
@@ -922,9 +1112,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,42 +1124,56 @@ 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
         })
 
-        // 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,
+            data: state.data,
             ...runtimeFilters
         })
 
         // Data
+        let newRuntimeData;
         if(hashData !== runtimeData.fromHash && state.data?.fromColumn) {
-            const data = generateRuntimeData(state, runtimeFilters, hashData)
+            newRuntimeData = generateRuntimeData(state, filters || runtimeFilters, hashData)
+            setRuntimeData(newRuntimeData) 
+        }
 
-            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])
@@ -1010,8 +1215,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 +1225,160 @@ const CdcMap = ({className, config, navigationHandler: customNavigationHandler,
         navigationHandler,
         geoClickHandler,
         applyLegendToRow,
-        displayGeoName
+        displayGeoName,
+        runtimeLegend,
+        generateColorsArray,
+        titleCase
     }
 
+    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.length !== 0) && <section className={`cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title}>
+                {['lg', 'md'].includes(currentViewport) && 'hover' === tooltips.appearanceType && (
+					<ReactTooltip
+						id='tooltip'
+						place='right'
+						type='light'
+						html={true}
+						className={tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'}
+					/>
+				)}
+				<header className={general.showTitle === true ? '' : 'hidden'} aria-hidden='true'>
+					<div role='heading' className={'map-title ' + general.headerColor} tabIndex="0">
+						{parse(title)}
+					</div>
+				</header>
+				<section className={mapContainerClasses.join(' ')} onClick={(e) => closeModal(e)}>
+					{general.showDownloadMediaButton === true && (
+						<div className='map-downloads' data-html2canvas-ignore>
+							<div className='map-downloads__ui btn-group'>
+								<button
+									className='btn'
+									title='Download Map as Image'
+									onClick={() => generateMedia(outerContainerRef.current, 'image')}
+								>
+									<DownloadImg className='btn__icon' title='Download Map as Image' />
+								</button>
+								<button
+									className='btn'
+									title='Download Map as PDF'
+									onClick={() => generateMedia(outerContainerRef.current, 'pdf')}
+								>
+									<DownloadPdf className='btn__icon' title='Download Map as PDF' />
+								</button>
+							</div>
+						</div>
+					)}
+
+                    <a id='skip-geo-container' className='cdcdataviz-sr-only-focusable' href={handleMapTabbing}>
+                        Skip Over Map Container
+                    </a>
+					<section className='geography-container' aria-hidden='true' ref={mapSvg}>
+                        {currentViewport && (
+                            <section className='geography-container' aria-hidden='true' ref={mapSvg}>
+                                {modal && (
+                                    <Modal
+                                        type={general.type}
+                                        viewport={currentViewport}
+                                        applyTooltipsToGeo={applyTooltipsToGeo}
+                                        applyLegendToRow={applyLegendToRow}
+                                        capitalize={state.tooltips.capitalizeLabels}
+                                        content={modal}
+                                    />
+                                )}
+                                {'single-state' === general.geoType && (
+                                    <SingleStateMap supportedTerritories={supportedTerritories} {...mapProps} />
+                                )}
+                                {'us' === general.geoType && (
+                                    <UsaMap supportedTerritories={supportedTerritories} {...mapProps} />
+                                )}
+                                {'world' === general.geoType && (
+                                    <WorldMap supportedCountries={supportedCountries} {...mapProps} />
+                                )}
+                                {'us-county' === general.geoType && (
+                                    <CountyMap
+                                        supportedCountries={supportedCountries}
+                                        {...mapProps}
+                                    />
+                                )}
+                                {'data' === general.type && logo && <img src={logo} alt='' className='map-logo' />}
+                            </section>
+                        
+                        )}
+                        </section>
+
+					{general.showSidebar && 'navigation' !== general.type && (
+						<Sidebar
+							viewport={currentViewport}
+							legend={state.legend}
+							runtimeLegend={runtimeLegend}
+							setRuntimeLegend={setRuntimeLegend}
+							runtimeFilters={runtimeFilters}
+							columns={state.columns}
+							sharing={state.sharing}
+							prefix={state.columns.primary.prefix}
+							suffix={state.columns.primary.suffix}
+							setState={setState}
+							resetLegendToggles={resetLegendToggles}
+							changeFilterActive={changeFilterActive}
+							setAccessibleStatus={setAccessibleStatus}
+						/>
+					)}
+				</section>
+				{'navigation' === general.type && (
+					<NavigationMenu
+						displayGeoName={displayGeoName}
+						data={runtimeData}
+						options={general}
+						columns={state.columns}
+						navigationHandler={(val) => navigationHandler(val)}
+					/>
+				)}
+				{true === dataTable.forceDisplay && general.type !== 'navigation' && false === loading && (
+					<DataTable
+						state={state}
+						rawData={state.data}
+						navigationHandler={navigationHandler}
+						expandDataTable={general.expandDataTable}
+						headerColor={general.headerColor}
+						columns={state.columns}
+						showDownloadButton={general.showDownloadButton}
+						runtimeLegend={runtimeLegend}
+						runtimeData={runtimeData}
+						displayDataAsText={displayDataAsText}
+						displayGeoName={displayGeoName}
+						applyLegendToRow={applyLegendToRow}
+						tableTitle={dataTable.title}
+						indexTitle={dataTable.indexTitle}
+						mapTitle={general.title}
+						viewport={currentViewport}
+					/>
+				)}
+				{subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
+			</section>}
+			<div aria-live='assertive' className='cdcdataviz-sr-only'>
+				{accessibleStatus}
+			</div>
+		</div>
+	);
 }
 
 export default memo(CdcMap)