@cdc/map 4.25.3 → 4.25.5-1

package/src/components/EditorPanel/components/EditorPanel.tsx

@@ -1,14 +1,14 @@
-import React, { useState, useEffect, useContext } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 
 // Third Party
 import {
   Accordion,
   AccordionItem,
+  AccordionItemButton,
   AccordionItemHeading,
-  AccordionItemPanel,
-  AccordionItemButton
+  AccordionItemPanel
 } from 'react-accessible-accordion'
-import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'
 import { useDebounce } from 'use-debounce'
 import _ from 'lodash'
 // import ReactTags from 'react-tag-autocomplete'
@@ -39,83 +39,64 @@ import countyDefaultConfig from '../../../../examples/default-county.json'
 import useMapLayers from '../../../hooks/useMapLayers.tsx'
 
 import HexSetting from './HexShapeSettings.jsx'
-import ConfigContext from '../../../context.ts'
+import ConfigContext, { MapDispatchContext } from '../../../context.ts'
 import { MapContext } from '../../../types/MapContext.js'
 import Alert from '@cdc/core/components/Alert'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 import { CheckBox, Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import useColumnsRequiredChecker from '../../../hooks/useColumnsRequiredChecker'
+import { addUIDs, HEADER_COLORS } from '../../../helpers'
+import './editorPanel.styles.css'
 
-// Todo: move to useReducer, seperate files out.
-const EditorPanel = ({ columnsRequiredChecker }) => {
-  // prettier-ignore
+const EditorPanel = () => {
   const {
+    setParentConfig,
     isDashboard,
-    isDebug,
+    isEditor,
     loadConfig,
     runtimeFilters,
     runtimeLegend,
-    setParentConfig,
-    setState,
-    state,
+    setConfig,
+    config,
     tooltipId,
     runtimeData,
-    setRuntimeData,
-    generateRuntimeData,
-
-
+    setRuntimeData
   } = useContext<MapContext>(ConfigContext)
 
-  const { general, columns, legend, table, tooltips } = state
-  const columnsInData = state?.data?.[0] ? Object.keys(state.data[0]) : []
-
-  const [configTextboxValue, setConfigTextbox] = useState({}) // eslint-disable-line
+  const { columnsRequiredChecker } = useColumnsRequiredChecker()
+  const dispatch = useContext(MapDispatchContext)
+  const { general, columns, legend, table, tooltips } = config
+  const columnsInData = config?.data?.[0] ? Object.keys(config.data[0]) : []
 
   const [loadedDefault, setLoadedDefault] = useState(false)
-
   const [displayPanel, setDisplayPanel] = useState(true)
-
   const [activeFilterValueForDescription, setActiveFilterValueForDescription] = useState([0, 0])
 
-  const headerColors = [
-    'theme-blue',
-    'theme-purple',
-    'theme-brown',
-    'theme-teal',
-    'theme-pink',
-    'theme-orange',
-    'theme-slate',
-    'theme-indigo',
-    'theme-cyan',
-    'theme-green',
-    'theme-amber'
-  ]
-
   const {
-    // prettier-ignore
-    MapLayerHandlers: {
-      handleMapLayer,
-      handleAddLayer,
-      handleRemoveLayer
+    MapLayerHandlers: { handleMapLayer, handleAddLayer, handleRemoveLayer }
+  } = useMapLayers(config, setConfig, false, tooltipId)
+
+  useEffect(() => {
+    // Pass up to Editor if needed
+    if (setParentConfig) {
+      setParentConfig(convertStateToConfig())
     }
-  } = useMapLayers(state, setState, false, tooltipId)
+  }, [config])
 
   const categoryMove = (idx1, idx2) => {
     let categoryValuesOrder = getCategoryValuesOrder()
-
     let [movedItem] = categoryValuesOrder.splice(idx1, 1)
-
     categoryValuesOrder.splice(idx2, 0, movedItem)
-
-    state.legend.categoryValuesOrder?.forEach(value => {
+    config.legend.categoryValuesOrder?.forEach(value => {
       if (categoryValuesOrder.indexOf(value) === -1) {
         categoryValuesOrder.push(value)
       }
     })
 
-    setState({
-      ...state,
+    setConfig({
+      ...config,
       legend: {
-        ...state.legend,
+        ...config.legend,
         categoryValuesOrder
       }
     })
@@ -125,16 +106,16 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   if (legend.specialClasses && legend.specialClasses.length && typeof legend.specialClasses[0] === 'string') {
     legend.specialClasses.forEach(specialClass => {
       specialClasses.push({
-        key: state.columns.primary && state.columns.primary.name ? state.columns.primary.name : columnsInData[0],
+        key: config.columns.primary && config.columns.primary.name ? config.columns.primary.name : columnsInData[0],
         value: specialClass,
         label: specialClass
       })
     })
     // DEV-3303 - since the above was a repair of bad config - need to backpopulate into the state
-    setState({
-      ...state,
+    setConfig({
+      ...config,
       legend: {
-        ...state.legend,
+        ...config.legend,
         specialClasses: specialClasses
       }
     })
@@ -142,12 +123,14 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     specialClasses = legend.specialClasses || []
   }
 
+  const allowLegendSeparators = legend.style === 'gradient' && legend.subStyle === 'linear blocks'
+
   const getCityStyleOptions = target => {
     switch (target) {
       case 'value': {
         const values = ['Circle', 'Square', 'Triangle', 'Diamond', 'Star', 'Pin']
         const filteredValues = values.filter(
-          val => String(state.visual.cityStyle).toLocaleLowerCase() !== val.toLocaleLowerCase()
+          val => String(config.visual.cityStyle).toLocaleLowerCase() !== val.toLocaleLowerCase()
         )
 
         return (
@@ -171,12 +154,12 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   const editCityStyles = (target, index, fieldName, value) => {
     switch (target) {
       case 'add': {
-        const additionalCityStyles = state.visual.additionalCityStyles ? [...state.visual.additionalCityStyles] : []
+        const additionalCityStyles = config.visual.additionalCityStyles ? [...config.visual.additionalCityStyles] : []
         additionalCityStyles.push({ label: '', column: '', value: '', shape: '' })
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           visual: {
-            ...state.visual,
+            ...config.visual,
             additionalCityStyles: additionalCityStyles
           }
         })
@@ -184,15 +167,15 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
       }
       case 'remove': {
         let additionalCityStyles = []
-        if (state.visual.additionalCityStyles) {
-          additionalCityStyles = [...state.visual.additionalCityStyles]
+        if (config.visual.additionalCityStyles) {
+          additionalCityStyles = [...config.visual.additionalCityStyles]
         }
 
         additionalCityStyles.splice(index, 1)
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           visual: {
-            ...state.visual,
+            ...config.visual,
             additionalCityStyles: additionalCityStyles
           }
         })
@@ -200,12 +183,12 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
       }
       case 'update': {
         let additionalCityStyles = []
-        additionalCityStyles = [...state.visual.additionalCityStyles]
+        additionalCityStyles = [...config.visual.additionalCityStyles]
         additionalCityStyles[index][fieldName] = value
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           visual: {
-            ...state.visual,
+            ...config.visual,
             additionalCityStyles: additionalCityStyles
           }
         })
@@ -222,7 +205,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
       if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
         handleEditorChanges('changeLegendDescription', [String(activeFilterValueForDescription), debouncedValue])
       }
-    }, [debouncedValue]) // eslint-disable-line
+    }, [debouncedValue])
 
     const onChange = e => setValue(e.target.value)
 
@@ -231,277 +214,150 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
   const handleEditorChanges = async (property, value) => {
     switch (property) {
-      case 'navigationTarget':
-        setState({
-          ...state,
-          general: {
-            ...state.general,
-            navigationTarget: value
-          }
-        })
-        break
-      // change these to be more generic.
-      // updateVisualPropertyValue
-      // updateGeneralPropertyValue, etc.
-      case 'showBubbleZeros':
-        setState({
-          ...state,
-          visual: {
-            ...state.visual,
-            showBubbleZeros: value
-          }
-        })
-        break
-      case 'showEqualNumber':
-        setState({
-          ...state,
-          general: {
-            ...state.general,
-            equalNumberOptIn: value
-          }
-        })
-        break
-      case 'hideGeoColumnInTooltip':
-        setState({
-          ...state,
-          general: {
-            ...state.general,
-            [property]: value
-          }
-        })
-        break
-
-      case 'toggleDataTableLink':
-        setState({
-          ...state,
-          table: {
-            ...state.table,
-            showDataTableLink: value
-          }
-        })
-        break
-
-      case 'toggleDataUrl':
-        setState({
-          ...state,
-          table: {
-            ...state.table,
-            showDownloadUrl: value
-          }
-        })
-        break
-      case 'toggleExtraBubbleBorder':
-        setState({
-          ...state,
-          visual: {
-            ...state.visual,
-            extraBubbleBorder: value
-          }
-        })
-        break
-      case 'allowMapZoom':
-        setState({
-          ...state,
-          general: {
-            ...state.general,
-            allowMapZoom: value
-          },
-          mapPosition: {
-            coordinates: state.general.geoType === 'world' ? [0, 30] : [0, 0],
-            zoom: 1
-          }
-        })
-        break
       case 'hidePrimaryColumnInTooltip':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           general: {
-            ...state.general,
+            ...config.general,
             [property]: value
           }
         })
         break
       case 'geoLabelOverride':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           general: {
-            ...state.general,
+            ...config.general,
             geoLabelOverride: value
           }
         })
         break
       case 'showTitle':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           general: {
-            ...state.general,
+            ...config.general,
             showTitle: value
           }
         })
         break
-      case 'showSidebar':
-        setState({
-          ...state,
-          general: {
-            ...state.general,
-            showSidebar: value
-          }
-        })
-        break
-      case 'fullBorder':
-        setState({
-          ...state,
-          general: {
-            ...state.general,
-            fullBorder: value
-          }
-        })
-        break
       case 'expandDataTable':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           table: {
-            ...state.table,
+            ...config.table,
             expanded: value
           }
         })
         break
-      case 'color':
-        setState({
-          ...state,
-          color: value
-        })
-        break
       case 'sidebarPosition':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             position: value,
             hideBorder: _.includes(['top', 'bottom'], value)
           }
         })
         break
       case 'legendStyle':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             style: value
           }
         })
         break
       case 'legendSubStyle':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             subStyle: value
           }
         })
         break
+      case 'legendGroupBy':
+        setConfig({
+          ...config,
+          legend: {
+            ...config.legend,
+            groupBy: value
+          }
+        })
+        break
       case 'legendTickRotation':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             tickRotation: value
           }
         })
         break
       case 'legendBorder':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             hideBorder: value
           }
         })
         break
       case 'handleCityStyle':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           visual: {
-            ...state.visual,
+            ...config.visual,
             cityStyle: value
           }
         })
         break
       case 'geoBorderColor':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           general: {
-            ...state.general,
+            ...config.general,
             geoBorderColor: value
           }
         })
         break
       case 'headerColor':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           general: {
-            ...state.general,
+            ...config.general,
             headerColor: value
           }
         })
         break
       case 'navigateColumn':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           columns: {
-            ...state.columns,
+            ...config.columns,
             navigate: {
-              ...state.columns.navigate,
+              ...config.columns.navigate,
               name: value
             }
           }
         })
         break
       case 'legendDescription':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             description: value
           }
         })
         break
-      case 'legendType':
-        let testForType = Number(typeof state.data[0][state.columns.primary.name])
-        let hasValue = state.data[0][state.columns.primary.name]
-        let messages = []
-
-        if (!hasValue) {
-          messages.push(
-            `There appears to be values missing for data in the primary column ${state.columns.primary.name}`
-          )
-        }
-
-        if (testForType === 'string' && isNaN(testForType) && value !== 'category') {
-          messages.push(
-            'Error with legend. Primary columns that are text must use a categorical legend type. Try changing the legend type to DEV-12345categorical.'
-          )
-        } else {
-          messages = []
-        }
-
-        setState({
-          ...state,
-          legend: {
-            ...state.legend,
-            type: value
-          },
-          runtime: {
-            ...state.runtime,
-            editorErrorMessage: messages
-          }
-        })
-        break
       case 'legendNumber':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             numberOfItems: parseInt(value)
           }
         })
@@ -512,123 +368,105 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
         setActiveFilterValueForDescription(arrVal)
         break
       case 'unifiedLegend':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             unified: value
           }
         })
         break
-      case 'separateZero':
-        setState({
-          ...state,
-          legend: {
-            ...state.legend,
-            separateZero: value
-          }
-        })
-        break
       case 'toggleShowFullGeoNameInCSV':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           table: {
             // setting both bc DataTable new core needs it here
-            ...state.table,
-            showFullGeoNameInCSV: !state.table.showFullGeoNameInCSV
+            ...config.table,
+            showFullGeoNameInCSV: !config.table.showFullGeoNameInCSV
           }
         })
         break
       case 'toggleDownloadImgButton':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           general: {
-            ...state.general,
-            showDownloadImgButton: !state.general.showDownloadImgButton
+            ...config.general,
+            showDownloadImgButton: !config.general.showDownloadImgButton
           }
         })
         break
       case 'toggleDownloadLinkBelow':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           table: {
-            ...state.table,
-            showDownloadLinkBelow: !state.table.showDownloadLinkBelow
+            ...config.table,
+            showDownloadLinkBelow: !config.table.showDownloadLinkBelow
           }
         })
         break
       case 'toggleDownloadPdfButton':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           general: {
-            ...state.general,
-            showDownloadPdfButton: !state.general.showDownloadPdfButton
-          }
-        })
-        break
-      case 'displayAsHex':
-        setState({
-          ...state,
-          general: {
-            ...state.general,
-            displayAsHex: value
+            ...config.general,
+            showDownloadPdfButton: !config.general.showDownloadPdfButton
           }
         })
         break
       case 'editorMapType':
         switch (value) {
           case 'us-geocode':
-            setState({
-              ...state,
+            setConfig({
+              ...config,
               general: {
-                ...state.general,
+                ...config.general,
                 type: value
               }
             })
             break
           case 'world-geocode':
-            setState({
-              ...state,
+            setConfig({
+              ...config,
               general: {
-                ...state.general,
+                ...config.general,
                 type: value
               }
             })
             break
           case 'data':
-            setState({
-              ...state,
+            setConfig({
+              ...config,
               general: {
-                ...state.general,
+                ...config.general,
                 showSidebar: true,
                 type: 'data'
               }
             })
             break
           case 'navigation':
-            setState({
-              ...state,
+            setConfig({
+              ...config,
               general: {
-                ...state.general,
+                ...config.general,
                 showSidebar: false,
                 type: 'navigation'
               },
               tooltips: {
-                ...state.tooltips,
+                ...config.tooltips,
                 appearanceType: 'hover'
               }
             })
             break
           case 'bubble':
-            setState({
-              ...state,
+            setConfig({
+              ...config,
               general: {
-                ...state.general,
+                ...config.general,
                 showSidebar: false,
                 type: 'bubble'
               },
               tooltips: {
-                ...state.tooltips,
+                ...config.tooltips,
                 appearanceType: 'hover'
               }
             })
@@ -639,6 +477,9 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
         }
         break
       case 'geoType':
+        addUIDs(config, config.columns.geo.name)
+        dispatch({ type: 'SET_POSITION', payload: [0, 30] })
+
         // If we're still working with default data, switch to the world default to show it as an example
         if (true === loadedDefault && 'world' === value) {
           loadConfig(worldDefaultConfig)
@@ -657,78 +498,78 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
         switch (value) {
           case 'us':
-            setState({
-              ...state,
+            setConfig({
+              ...config,
               general: {
-                ...state.general,
+                ...config.general,
                 geoType: 'us',
-                type: state.type === 'us-geocode' ? 'data' : state.type
+                type: config.type === 'us-geocode' ? 'data' : config.type
               },
               table: {
-                ...state.table,
+                ...config.table,
                 forceDisplay: true
               }
             })
             break
           case 'us-region':
-            setState({
-              ...state,
+            setConfig({
+              ...config,
               general: {
-                ...state.general,
+                ...config.general,
                 geoType: 'us-region'
               },
               table: {
-                ...state.table,
+                ...config.table,
                 forceDisplay: true
               }
             })
             break
           case 'world':
-            setState({
-              ...state,
+            setConfig({
+              ...config,
               general: {
-                ...state.general,
+                ...config.general,
                 geoType: 'world'
               },
               table: {
-                ...state.table,
+                ...config.table,
                 forceDisplay: true
               }
             })
             break
           case 'us-county':
-            setState({
-              ...state,
+            setConfig({
+              ...config,
               general: {
-                ...state.general,
+                ...config.general,
                 geoType: 'us-county'
               },
               table: {
-                ...state.table,
+                ...config.table,
                 expanded: false,
                 forceDisplay: true
               }
             })
             break
           case 'single-state':
-            setState({
-              ...state,
+            setConfig({
+              ...config,
               general: {
-                ...state.general,
+                ...config.general,
                 geoType: 'single-state'
               },
               table: {
-                ...state.table,
+                ...config.table,
                 expanded: false,
                 forceDisplay: true
               }
             })
             break
           case 'google-map':
-            setState({
-              ...state,
+            setConfig({
+              ...config,
               general: {
-                ...state.general,
+                ...config.general,
                 geoType: 'google-map'
               }
             })
@@ -736,125 +577,103 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
             break
         }
 
-        break
-      case 'singleColumnLegend':
-        setState({
-          ...state,
-          legend: {
-            ...state.legend,
-            singleColumn: !state.legend.singleColumn,
-            singleRow: false,
-            verticalSorted: false
-          }
-        })
-        break
-      case 'singleRowLegend':
-        setState({
-          ...state,
-          legend: {
-            ...state.legend,
-            singleRow: !state.legend.singleRow,
-            singleColumn: false,
-            verticalSorted: false
-          }
-        })
         break
       case 'verticalSortedLegend':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
-            verticalSorted: !state.legend.verticalSorted,
+            ...config.legend,
+            verticalSorted: !config.legend.verticalSorted,
             singleRow: false,
             singleColumn: false
           }
         })
         break
       case 'legendShowSpecialClassesLast':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
-            showSpecialClassesLast: !state.legend.showSpecialClassesLast
+            ...config.legend,
+            showSpecialClassesLast: !config.legend.showSpecialClassesLast
           }
         })
         break
       case 'dynamicDescription':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           editor: {
-            ...state.editor,
+            ...config.editor,
             activeFilterValueForDescription: value
           },
           legend: {
-            ...state.legend,
-            dynamicDescription: !state.legend.dynamicDescription
+            ...config.legend,
+            dynamicDescription: !config.legend.dynamicDescription
           }
         })
         break
       case 'changeLegendDescription':
         const [filterValKey, filterValDesc] = value
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             descriptions: {
-              ...state.legend.descriptions,
+              ...config.legend.descriptions,
               [filterValKey]: [filterValDesc]
             }
           }
         })
         break
       case 'appearanceType':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           tooltips: {
-            ...state.tooltips,
+            ...config.tooltips,
             appearanceType: value
           }
         })
         break
       case 'linkLabel':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           tooltips: {
-            ...state.tooltips,
+            ...config.tooltips,
             linkLabel: value
           }
         })
         break
       case 'displayStateLabels':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           general: {
-            ...state.general,
-            displayStateLabels: !state.general.displayStateLabels
+            ...config.general,
+            displayStateLabels: !config.general.displayStateLabels
           }
         })
         break
       case 'capitalizeLabels':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           tooltips: {
-            ...state.tooltips,
+            ...config.tooltips,
             capitalizeLabels: value
           }
         })
         break
       case 'showDataTable':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           table: {
-            ...state.table,
+            ...config.table,
             forceDisplay: value
           }
         })
         break
       case 'limitDataTableHeight':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           table: {
-            ...state.table,
+            ...config.table,
             limitHeight: value
           }
         })
@@ -864,67 +683,58 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
         let stateName = value
         let stateData = { fipsCode, stateName }
 
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           general: {
-            ...state.general,
+            ...config.general,
             statePicked: stateData
           }
         })
 
-        if (state) {
-          const newData = generateRuntimeData(state)
+        if (config) {
+          const newData = generateRuntimeData(config)
           setRuntimeData(newData)
         }
         break
       case 'classificationType':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             type: value
           }
         })
         break
-      case 'territoriesAlwaysShow':
-        setState({
-          ...state,
-          general: {
-            ...state.general,
-            territoriesAlwaysShow: value
-          }
-        })
-        break
       case 'countyCensusYear':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           general: {
-            ...state.general,
+            ...config.general,
             countyCensusYear: value
           }
         })
         break
       case 'filterControlsCountyYear':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           general: {
-            ...state.general,
+            ...config.general,
             filterControlsCountyYear: value
           }
         })
         break
       case 'filterControlsStatePicked':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           general: {
-            ...state.general,
+            ...config.general,
             filterControlsStatePicked: value
           }
         })
         break
       case 'filterBehavior':
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           filterBehavior: value
         })
         break
@@ -942,10 +752,10 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
         newSpecialClasses[value.index][value.prop] = value.value
 
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             specialClasses: newSpecialClasses
           }
         })
@@ -955,10 +765,10 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
         newSpecialClasses.splice(value, 1)
 
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             specialClasses: newSpecialClasses
           }
         })
@@ -968,21 +778,22 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
         newSpecialClasses.push(value)
 
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           legend: {
-            ...state.legend,
+            ...config.legend,
             specialClasses: newSpecialClasses
           }
         })
         break
       case 'name':
-        setState({
-          ...state,
+        addUIDs(config, config.columns.geo.name)
+        setConfig({
+          ...config,
           columns: {
-            ...state.columns,
+            ...config.columns,
             [columnName]: {
-              ...state.columns[columnName],
+              ...config.columns[columnName],
               [editTarget]: value
             }
           }
@@ -990,12 +801,12 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
         break
       default:
-        setState({
-          ...state,
+        setConfig({
+          ...config,
           columns: {
-            ...state.columns,
+            ...config.columns,
             [columnName]: {
-              ...state.columns[columnName],
+              ...config.columns[columnName],
               [editTarget]: value
             }
           }
@@ -1004,71 +815,14 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     }
   }
 
-  const changeFilter = async (idx, target, value) => {
-    let newFilters = [...state.filters]
-
-    switch (target) {
-      case 'addNew':
-        newFilters.push({
-          label: '',
-          values: []
-        })
-        break
-      case 'remove':
-        if (newFilters.length === 1) {
-          newFilters = []
-        } else {
-          newFilters.splice(idx, 1)
-        }
-        break
-      case 'filterStyle':
-        newFilters[idx] = { ...newFilters[idx] }
-        newFilters[idx].filterStyle = value
-        break
-      case 'showDropdown':
-        newFilters[idx] = { ...newFilters[idx] }
-        newFilters[idx].showDropdown = value
-        break
-      case 'columnName':
-        newFilters[idx] = { ...newFilters[idx] }
-        newFilters[idx].columnName = value
-        newFilters[idx].values = [] // when a column name changes knock the previous values out
-        break
-      case 'filterOrder':
-        if (value === 'desc') {
-          newFilters[idx] = { ...runtimeFilters[idx] }
-          delete newFilters[idx].active
-          newFilters[idx].order = 'desc'
-        }
-        if (value === 'asc') {
-          newFilters[idx] = { ...runtimeFilters[idx] }
-          delete newFilters[idx].active
-          newFilters[idx].order = 'asc'
-        }
-        if (value === 'cust') {
-          newFilters[idx] = { ...runtimeFilters[idx] }
-          newFilters[idx].order = 'cust'
-        }
-        break
-      default:
-        newFilters[idx][target] = value
-        break
-    }
-
-    setState({
-      ...state,
-      filters: newFilters
-    })
-  }
-
   // just adds a new column but not set to any data yet
   const addAdditionalColumn = number => {
     const columnKey = `additionalColumn${number}`
 
-    setState({
-      ...state,
+    setConfig({
+      ...config,
       columns: {
-        ...state.columns,
+        ...config.columns,
         [columnKey]: {
           label: 'New Column',
           dataTable: false,
@@ -1081,18 +835,18 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   }
 
   const removeAdditionalColumn = columnName => {
-    const newColumns = state.columns
+    const newColumns = config.columns
 
     delete newColumns[columnName]
 
-    setState({
-      ...state,
+    setConfig({
+      ...config,
       columns: newColumns
     })
   }
 
   const displayFilterLegendValue = arr => {
-    const filterName = state.filters[arr[0]].label || `Unlabeled Legend`
+    const filterName = config.filters?.[arr?.[0]]?.label || `Unlabeled Legend`
 
     const filterValue = runtimeFilters[arr[0]]
 
@@ -1116,15 +870,17 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   }
 
   const convertStateToConfig = () => {
-    let strippedState = _.cloneDeep(state) // Deep copy
+    let strippedState = _.cloneDeep(config) // Deep copy
 
     // Strip ref
     delete strippedState['']
 
-    delete strippedState.newViz
+    if (strippedState.columns.geo.name && strippedState.columns.primary.name) {
+      delete strippedState.newViz
+    }
 
     // Remove the legend
-    let strippedLegend = _.cloneDeep(state.legend)
+    let strippedLegend = _.cloneDeep(config.legend)
 
     delete strippedLegend.disabledAmt
 
@@ -1134,19 +890,18 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     delete strippedState.defaultData
 
     // Remove tooltips if they're active in the editor
-    let strippedGeneral = _.cloneDeep(state.general)
-
-    strippedState.general = strippedGeneral
+    strippedState.general = _.cloneDeep(config.general)
 
     // Add columns property back to data if it's there
-    if (state.columns) {
-      strippedState.columns = state.columns
+    if (config.columns) {
+      strippedState.columns = config.columns
     }
 
     return strippedState
   }
 
-  const isReversed = state.general.palette.isReversed
+  const isReversed = config.general.palette.isReversed
+
   function filterColorPalettes() {
     let sequential = []
     let nonSequential = []
@@ -1189,23 +944,16 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   const [sequential, nonSequential, accessibleColors] = filterColorPalettes()
 
   useEffect(() => {
-    let paletteName = ''
-    if (isReversed && !state.color.endsWith('reverse')) {
-      paletteName = state.color + 'reverse'
-    }
-    if (!isReversed && state.color.endsWith('reverse')) {
-      paletteName = state.color.slice(0, -7)
-    }
-    if (paletteName) {
-      handleEditorChanges('color', paletteName)
-    }
-  }, [isReversed])
+    setLoadedDefault(config.defaultData)
+    columnsRequiredChecker()
+  }, [config])
 
   useEffect(() => {
-    setLoadedDefault(state.defaultData)
-
-    columnsRequiredChecker()
-  }, [state]) // eslint-disable-line
+    const newConfig = convertStateToConfig()
+    if (isEditor && setParentConfig) {
+      setParentConfig(newConfig)
+    }
+  }, [config])
 
   const columnsOptions = [
     <option value='' key={'Select Option'}>
@@ -1222,7 +970,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   })
 
   let columnsByKey = {}
-  state.data.forEach(datum => {
+  config.data.forEach(datum => {
     Object.keys(datum).forEach(key => {
       columnsByKey[key] = columnsByKey[key] || []
       const value = typeof datum[key] === 'number' ? datum[key].toString() : datum[key]
@@ -1233,27 +981,22 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     })
   })
 
-  const additionalColumns = Object.keys(state.columns).filter(value => {
+  const additionalColumns = Object.keys(config.columns).filter(value => {
     const defaultCols = ['geo', 'navigate', 'primary', 'latitude', 'longitude']
 
-    if (true === defaultCols.includes(value)) {
-      return false
-    }
-    return true
+    return true !== defaultCols.includes(value)
   })
 
-  const updateField = updateFieldFactory(state, setState)
+  const updateField = updateFieldFactory(config, setConfig)
 
   const onBackClick = () => {
     setDisplayPanel(!displayPanel)
-    setState({
-      ...state,
+    setConfig({
+      ...config,
       showEditorPanel: !displayPanel
     })
   }
 
-  const usedFilterColumns = {}
-
   const StateOptionList = () => {
     const arrOfArrays = Object.entries(supportedStatesFipsCodes)
 
@@ -1283,36 +1026,22 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     })
   }
 
-  useEffect(() => {
-    const parsedData = convertStateToConfig()
-    const formattedData = JSON.stringify(parsedData, undefined, 2)
-
-    setConfigTextbox(formattedData)
-  }, [state]) // eslint-disable-line
-
-  useEffect(() => {
-    // Pass up to Editor if needed
-    if (setParentConfig) {
-      const newConfig = convertStateToConfig()
-      setParentConfig(newConfig)
-    }
-  }, [state]) // eslint-disable-line
-
   let numberOfItemsLimit = 8
 
   const getItemStyle = (isDragging, draggableStyle) => ({
     ...draggableStyle
   })
 
-  const getCategoryValuesOrder = () => {
-    let values = runtimeLegend
-      ? runtimeLegend.filter(item => !item.special).map(runtimeLegendItem => runtimeLegendItem.value)
-      : []
+  const getCategoryValuesOrder = (): string[] | [] => {
+    let values =
+      runtimeLegend?.items?.length > 0
+        ? runtimeLegend.items.filter(item => !item.special).map(runtimeLegendItem => runtimeLegendItem.value)
+        : []
 
-    if (state.legend.cateogryValuesOrder) {
+    if (config.legend.cateogryValuesOrder) {
       return values.sort((a, b) => {
-        let aVal = state.legend.cateogryValuesOrder.indexOf(a)
-        let bVal = state.legend.cateogryValuesOrder.indexOf(b)
+        let aVal = config.legend.cateogryValuesOrder.indexOf(a)
+        let bVal = config.legend.cateogryValuesOrder.indexOf(b)
         if (aVal === bVal) return 0
         if (aVal === -1) return 1
         if (bVal === -1) return -1
@@ -1345,7 +1074,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
       ))
   }
 
-  const isLoadedFromUrl = state?.dataKey?.includes('http://') || state?.dataKey?.includes('https://')
+  const isLoadedFromUrl = config?.dataKey?.includes('http://') || config?.dataKey?.includes('https://')
 
   return (
     <ErrorBoundary component='EditorPanel'>
@@ -1371,7 +1100,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <ul className='geo-buttons d-grid' style={{ gridTemplateColumns: 'repeat(2, 1fr)', gap: '8px' }}>
                   <button
                     className={`${
-                      state.general.geoType === 'us' || state.general.geoType === 'us-county' ? 'active' : ''
+                      config.general.geoType === 'us' || config.general.geoType === 'us-county' ? 'active' : ''
                     } full-width`}
                     onClick={e => {
                       e.preventDefault()
@@ -1382,7 +1111,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <span>United States</span>
                   </button>
                   <button
-                    className={`${state.general.geoType === 'us-region' ? 'active' : ''} full-width`}
+                    className={`${config.general.geoType === 'us-region' ? 'active' : ''} full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'us-region')
@@ -1392,7 +1121,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <span>U.S. Region</span>
                   </button>
                   <button
-                    className={`${state.general.geoType === 'world' ? 'active' : ''} full-width`}
+                    className={`${config.general.geoType === 'world' ? 'active' : ''} full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'world')
@@ -1402,7 +1131,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <span>World</span>
                   </button>
                   <button
-                    className={`${state.general.geoType === 'single-state' ? 'active' : ''} full-width`}
+                    className={`${config.general.geoType === 'single-state' ? 'active' : ''} full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'single-state')
@@ -1414,10 +1143,10 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 </ul>
               </label>
               {/* Select > State or County Map */}
-              {(state.general.geoType === 'us' || state.general.geoType === 'us-county') && (
+              {(config.general.geoType === 'us' || config.general.geoType === 'us-county') && (
                 <Select
                   label='Geography Subtype'
-                  value={state.general.geoType}
+                  value={config.general.geoType}
                   options={[
                     { value: 'us', label: 'US State-Level' },
                     { value: 'us-county', label: 'US County-Level' }
@@ -1427,10 +1156,10 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   }}
                 />
               )}
-              {(state.general.geoType === 'us-county' || state.general.geoType === 'single-state') && (
+              {(config.general.geoType === 'us-county' || config.general.geoType === 'single-state') && (
                 <Select
                   label='County Census Year'
-                  value={state.general.countyCensusYear || '2019'}
+                  value={config.general.countyCensusYear || '2019'}
                   options={[
                     { value: '2022', label: '2022' },
                     { value: '2021', label: '2021' },
@@ -1445,50 +1174,50 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   }}
                 />
               )}
-              {(state.general.geoType === 'us-county' || state.general.geoType === 'single-state') && (
-                <label>
-                  <span className='edit-label column-heading'>Filter Controlling County Census Year</span>
-                  <select
-                    value={state.general.filterControlsCountyYear || ''}
-                    onChange={event => {
-                      handleEditorChanges('filterControlsCountyYear', event.target.value)
-                    }}
-                  >
-                    <option value=''>None</option>
-                    {state.filters && state.filters.map(filter => <option>{filter.columnName}</option>)}
-                  </select>
-                </label>
+              {(config.general.geoType === 'us-county' || config.general.geoType === 'single-state') && (
+                <Select
+                  label='Filter Controlling County Census Year'
+                  value={config.general.filterControlsCountyYear || ''}
+                  options={[
+                    { value: '', label: 'None' },
+                    ...(config.filters
+                      ? config.filters.map(filter => ({ value: filter.columnName, label: filter.columnName }))
+                      : [])
+                  ]}
+                  onChange={event => {
+                    handleEditorChanges('filterControlsCountyYear', event.target.value)
+                  }}
+                />
               )}
 
-              {state.general.geoType === 'single-state' && runtimeData && (
-                <label>
-                  <span className='edit-label column-heading'>Filter Controlling State Picked</span>
-                  <select
-                    value={state.general.filterControlsStatePicked || ''}
-                    onChange={event => {
-                      handleEditorChanges('filterControlsStatePicked', event.target.value)
-                    }}
-                  >
-                    <option value=''>None</option>
-                    {runtimeData && columnsInData?.map(col => <option>{col}</option>)}
-                  </select>
-                </label>
+              {config.general.geoType === 'single-state' && runtimeData && (
+                <Select
+                  label='Filter Controlling State Picked'
+                  value={config.general.filterControlsStatePicked || ''}
+                  options={[
+                    { value: '', label: 'None' },
+                    ...(runtimeData && columnsInData?.map(col => ({ value: col, label: col })))
+                  ]}
+                  onChange={event => {
+                    handleEditorChanges('filterControlsStatePicked', event.target.value)
+                  }}
+                />
               )}
 
               {/* Type */}
               {/* Select > Filter a state */}
-              {state.general.geoType === 'single-state' && (
-                <label>
-                  <span className='edit-label column-heading'>State Selector</span>
-                  <select
-                    value={state.general.statePicked.stateName}
-                    onChange={event => {
-                      handleEditorChanges('chooseState', event.target.value)
-                    }}
-                  >
-                    <StateOptionList />
-                  </select>
-                </label>
+              {config.general.geoType === 'single-state' && (
+                <Select
+                  label='State Selector'
+                  value={config.general.statePicked?.stateName || ''}
+                  options={StateOptionList().map(option => ({
+                    value: option.props.value,
+                    label: option.props.children
+                  }))}
+                  onChange={event => {
+                    handleEditorChanges('chooseState', event.target.value)
+                  }}
+                />
               )}
               {/* Type */}
               <Select
@@ -1508,13 +1237,13 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </Tooltip>
                   </>
                 }
-                value={state.general.type}
+                value={config.general.type}
                 options={[
                   { value: 'data', label: 'Data' },
-                  ...(state.general.geoType === 'us-county' ? [{ value: 'us-geocode', label: 'Geocode' }] : []),
-                  ...(state.general.geoType === 'world' ? [{ value: 'world-geocode', label: 'Geocode' }] : []),
-                  ...(state.general.geoType !== 'us-county' ? [{ value: 'navigation', label: 'Navigation' }] : []),
-                  ...(state.general.geoType === 'world' || state.general.geoType === 'us'
+                  ...(config.general.geoType === 'us-county' ? [{ value: 'us-geocode', label: 'Geocode' }] : []),
+                  ...(config.general.geoType === 'world' ? [{ value: 'world-geocode', label: 'Geocode' }] : []),
+                  ...(config.general.geoType !== 'us-county' ? [{ value: 'navigation', label: 'Navigation' }] : []),
+                  ...(config.general.geoType === 'world' || config.general.geoType === 'us'
                     ? [{ value: 'bubble', label: 'Bubble' }]
                     : [])
                 ]}
@@ -1524,16 +1253,18 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               />
 
               {/* Navigation Behavior */}
-              {(state.general.type === 'navigation' || state.general.type === 'data') && (
+              {(config.general.type === 'navigation' || config.general.type === 'data') && (
                 <Select
                   label='Navigation Behavior'
-                  value={state.general.navigationTarget}
+                  value={config.general.navigationTarget}
                   options={[
                     { value: '_self', label: 'Same Window' },
                     { value: '_blank', label: 'New Window' }
                   ]}
                   onChange={event => {
-                    handleEditorChanges('navigationTarget', event.target.value)
+                    const _newConfig = _.cloneDeep(config)
+                    _newConfig.general.navigationTarget = event.target.value
+                    setConfig(_newConfig)
                   }}
                 />
               )}
@@ -1545,7 +1276,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       type='radio'
                       name='equalnumber'
                       value='equalnumber'
-                      checked={state.legend.type === 'equalnumber' || state.legend.type === 'equalinterval'}
+                      checked={config.legend.type === 'equalnumber' || config.legend.type === 'equalinterval'}
                       onChange={e => handleEditorChanges('classificationType', e.target.value)}
                     />
                     Numeric/Quantitative
@@ -1555,7 +1286,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       type='radio'
                       name='category'
                       value='category'
-                      checked={state.legend.type === 'category'}
+                      checked={config.legend.type === 'category'}
                       onChange={e => handleEditorChanges('classificationType', e.target.value)}
                     />
                     Categorical
@@ -1563,16 +1294,47 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 </div>
               </label>
 
-              <HexSetting.DisplayAsHexMap state={state} setState={setState} handleEditorChanges={handleEditorChanges} />
-              <HexSetting.DisplayShapesOnHex state={state} setState={setState} />
-              <HexSetting.ShapeColumns state={state} setState={setState} columnsOptions={columnsOptions} />
+              {/* Display as Hex */}
+              {general.geoType === 'us' && general.type !== 'navigation' && general.type !== 'bubble' && (
+                <label className='checkbox mt-4'>
+                  <input
+                    type='checkbox'
+                    checked={config.general.displayAsHex}
+                    onChange={event => {
+                      const _newConfig = _.cloneDeep(config)
+                      _newConfig.general.displayAsHex = event.target.checked
+                      setConfig(_newConfig)
+                    }}
+                  />
+                  <span className='edit-label'>Display As Hex Map</span>
+                </label>
+              )}
 
-              {'us' === state.general.geoType &&
-                'bubble' !== state.general.type &&
-                false === state.general.displayAsHex && (
+              {/* Shapes on Hex */}
+              <label className='checkbox mt-4'>
+                <input
+                  type='checkbox'
+                  checked={config.hexMap.type === 'shapes'}
+                  onChange={event => {
+                    setConfig({
+                      ...config,
+                      hexMap: {
+                        ...config.hexMap,
+                        type: event.target.checked ? 'shapes' : 'standard'
+                      }
+                    })
+                  }}
+                />
+                <span className='edit-label'>Display Shapes on Hex Map</span>
+              </label>
+              <HexSetting.ShapeColumns columnsOptions={columnsOptions} />
+
+              {'us' === config.general.geoType &&
+                'bubble' !== config.general.type &&
+                false === config.general.displayAsHex && (
                   <CheckBox
                     label='Show state labels'
-                    checked={state.general.displayStateLabels}
+                    checked={config.general.displayStateLabels}
                     onChange={event => {
                       handleEditorChanges('displayStateLabels', event.target.checked)
                     }}
@@ -1589,13 +1351,15 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   />
                 )}
 
-              {'us' === state.general.geoType && (
+              {'us' === config.general.geoType && (
                 <label className='checkbox'>
                   <input
                     type='checkbox'
                     checked={general.territoriesAlwaysShow || false}
                     onChange={event => {
-                      handleEditorChanges('territoriesAlwaysShow', event.target.checked)
+                      const _newConfig = _.cloneDeep(config)
+                      _newConfig.general.territoriesAlwaysShow = event.target.checked
+                      setConfig(_newConfig)
                     }}
                   />
                   <span className='edit-label'>Show All Territories</span>
@@ -1635,9 +1399,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               <label className='checkbox'>
                 <input
                   type='checkbox'
-                  checked={state.general.showTitle || false}
+                  checked={config.general.showTitle || false}
                   onChange={event => {
-                    handleEditorChanges('showTitle', event.target.checked)
+                    const _newConfig = _.cloneDeep(config)
+                    _newConfig.general.showTitle = event.target.checked
+                    setConfig(_newConfig)
                   }}
                 />
                 <span className='edit-label'>Show Title</span>
@@ -1747,23 +1513,24 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </Tooltip>
                   </span>
                   <Select
-                    value={state.columns.geo ? state.columns.geo.name : columnsOptions[0]}
+                    value={config.columns.geo ? config.columns.geo.name : columnsOptions[0]}
                     options={columnsOptions.map(c => c.key)}
                     onChange={event => {
                       editColumn('geo', 'name', event.target.value)
+                      checkConfigurationNeeded(config)
                     }}
                   />
                 </label>
-                {state.general.type === 'us-geocode' && (
+                {config.general.type === 'us-geocode' && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
-                      checked={state.general.convertFipsCodes}
+                      checked={config.general.convertFipsCodes}
                       onChange={event => {
-                        setState({
-                          ...state,
+                        setConfig({
+                          ...config,
                           general: {
-                            ...state.general,
+                            ...config.general,
                             convertFipsCodes: event.target.checked
                           }
                         })
@@ -1776,15 +1543,17 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <label className='checkbox'>
                   <input
                     type='checkbox'
-                    checked={state.general.hideGeoColumnInTooltip || false}
+                    checked={config.general.hideGeoColumnInTooltip || false}
                     onChange={event => {
-                      handleEditorChanges('hideGeoColumnInTooltip', event.target.checked)
+                      const _newConfig = _.cloneDeep(config)
+                      _newConfig.general.hideGeoColumnInTooltip = event.target.checked
+                      setConfig(_newConfig)
                     }}
                   />
                   <span className='edit-label'>Hide Geography Column Name in Tooltip</span>
                 </label>
                 <TextField
-                  value={state.general.geoLabelOverride}
+                  value={config.general.geoLabelOverride}
                   section='general'
                   fieldName='geoLabelOverride'
                   label='Geography Label'
@@ -1802,17 +1571,18 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   }
                 />
               </fieldset>
-              {'navigation' !== state.general.type && (
+              {'navigation' !== config.general.type && (
                 <fieldset className='primary-fieldset edit-block'>
                   <Select
                     label='Data Column'
                     value={columns.primary.name}
                     options={columnsOptions.map(c => c.key)}
                     onChange={event => {
-                      const _state = _.cloneDeep(state)
+                      const _state = _.cloneDeep(config)
                       _state.columns.primary.name = event.target.value
                       _state.columns.primary.label = event.target.value
-                      setState(_state)
+                      setConfig(_state)
+                      checkConfigurationNeeded(_state)
                     }}
                     tooltip={
                       <Tooltip style={{ textTransform: 'none' }}>
@@ -1828,7 +1598,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   <label className='checkbox'>
                     <input
                       type='checkbox'
-                      checked={state.general.hidePrimaryColumnInTooltip || false}
+                      checked={config.general.hidePrimaryColumnInTooltip || false}
                       onChange={event => {
                         handleEditorChanges('hidePrimaryColumnInTooltip', event.target.checked)
                       }}
@@ -1886,7 +1656,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       <label className='checkbox'>
                         <input
                           type='checkbox'
-                          checked={state.columns.primary.useCommas}
+                          checked={config.columns.primary.useCommas}
                           onChange={event => {
                             editColumn('primary', 'useCommas', event.target.checked)
                           }}
@@ -1898,7 +1668,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       <label className='checkbox'>
                         <input
                           type='checkbox'
-                          checked={state.columns.primary.dataTable || false}
+                          checked={config.columns.primary.dataTable || false}
                           onChange={event => {
                             editColumn('primary', 'dataTable', event.target.checked)
                           }}
@@ -1910,7 +1680,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       <label className='checkbox'>
                         <input
                           type='checkbox'
-                          checked={state.columns.primary.tooltip || false}
+                          checked={config.columns.primary.tooltip || false}
                           onChange={event => {
                             editColumn('primary', 'tooltip', event.target.checked)
                           }}
@@ -1922,7 +1692,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 </fieldset>
               )}
 
-              {state.general.type === 'bubble' && state.legend.type === 'category' && (
+              {config.general.type === 'bubble' && config.legend.type === 'category' && (
                 <fieldset className='primary-fieldset edit-block'>
                   <label>
                     <span className='edit-label column-heading'>
@@ -1937,7 +1707,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </Tooltip>
                     </span>
                     <select
-                      value={state.columns.categorical ? state.columns.categorical.name : columnsOptions[0]}
+                      value={config.columns.categorical ? config.columns.categorical.name : columnsOptions[0]}
                       onChange={event => {
                         editColumn('categorical', 'name', event.target.value)
                       }}
@@ -1951,7 +1721,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <>
                   <Select
                     label='Latitude Column'
-                    value={state.columns.latitude.name}
+                    value={config.columns.latitude.name}
                     options={columnsOptions.map(c => c.key)}
                     onChange={e => {
                       editColumn('latitude', 'name', e.target.value)
@@ -1959,7 +1729,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   />
                   <Select
                     label='Longitude Column'
-                    value={state.columns.longitude.name}
+                    value={config.columns.longitude.name}
                     options={columnsOptions.map(c => c.key)}
                     onChange={e => {
                       editColumn('longitude', 'name', e.target.value)
@@ -1968,7 +1738,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 </>
               }
 
-              {'navigation' !== state.general.type && (
+              {'navigation' !== config.general.type && (
                 <fieldset className='primary-fieldset edit-block'>
                   <label>
                     <span className='edit-label'>
@@ -1986,7 +1756,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </Tooltip>
                     </span>
                   </label>
-                  {state.legend.specialClasses.length === 2 && (
+                  {config.legend.specialClasses.length === 2 && (
                     <Alert
                       type='info'
                       message='If a third special class is needed you can apply a pattern to set it apart.'
@@ -2005,38 +1775,38 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                         Remove
                       </button>
                       <p>Special Class {i + 1}</p>
-                      <label>
-                        <span className='edit-label column-heading'>Data Key</span>
-                        <select
-                          value={specialClass.key}
-                          onChange={e => {
-                            editColumn('primary', 'specialClassEdit', { prop: 'key', index: i, value: e.target.value })
-                          }}
-                        >
-                          {columnsOptions}
-                        </select>
-                      </label>
-                      <label>
-                        <span className='edit-label column-heading'>Value</span>
-                        <select
-                          value={specialClass.value}
-                          onChange={e => {
-                            editColumn('primary', 'specialClassEdit', {
-                              prop: 'value',
-                              index: i,
-                              value: e.target.value
-                            })
-                          }}
-                        >
-                          <option value=''>- Select Value -</option>
-                          {columnsByKey[specialClass.key] &&
-                            columnsByKey[specialClass.key]
-                              .sort()
-                              .map(option => (
-                                <option key={`special-class-value-option-${i}-${option}`}>{option}</option>
-                              ))}
-                        </select>
-                      </label>
+                      <Select
+                        label='Data Key'
+                        value={specialClass.key}
+                        options={columnsOptions.map(option => ({
+                          value: option.key,
+                          label: option.key
+                        }))}
+                        onChange={event => {
+                          editColumn('primary', 'specialClassEdit', {
+                            prop: 'key',
+                            index: i,
+                            value: event.target.value
+                          })
+                        }}
+                      />
+                      <Select
+                        label='Value'
+                        value={specialClass.value}
+                        options={[
+                          { value: '', label: '- Select Value -' },
+                          ...(columnsByKey[specialClass.key] || [])
+                            .sort()
+                            .map(option => ({ value: option, label: option }))
+                        ]}
+                        onChange={event => {
+                          editColumn('primary', 'specialClassEdit', {
+                            prop: 'value',
+                            index: i,
+                            value: event.target.value
+                          })
+                        }}
+                      />
                       <label>
                         <span className='edit-label column-heading'>Label</span>
                         <input
@@ -2053,7 +1823,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </label>
                     </div>
                   ))}
-                  {state.legend.specialClasses.length < 2 && (
+                  {config.legend.specialClasses.length < 2 && (
                     <button
                       className='btn btn-primary full-width'
                       onClick={e => {
@@ -2083,14 +1853,14 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   </Tooltip>
                 </span>
                 <Select
-                  value={state.columns.navigate ? state.columns.navigate.name : ''}
+                  value={config.columns.navigate ? config.columns.navigate.name : ''}
                   options={columnsOptions.map(c => c.key)}
                   onChange={event => {
                     editColumn('navigate', 'name', event.target.value)
                   }}
                 />
               </label>
-              {'navigation' !== state.general.type && (
+              {'navigation' !== config.general.type && (
                 <fieldset className='primary-fieldset edit-block'>
                   <label>
                     <span className='edit-label'>
@@ -2119,17 +1889,17 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       >
                         Remove
                       </button>
-                      <label>
-                        <span className='edit-label column-heading'>Column</span>
-                        <select
-                          value={state.columns[val] ? state.columns[val].name : columnsOptions[0]}
-                          onChange={event => {
-                            editColumn(val, 'name', event.target.value)
-                          }}
-                        >
-                          {columnsOptions}
-                        </select>
-                      </label>
+                      <Select
+                        label='Column'
+                        value={config.columns[val] ? config.columns[val].name : ''}
+                        options={columnsOptions.map(option => ({
+                          value: option.props.value,
+                          label: option.props.children
+                        }))}
+                        onChange={event => {
+                          editColumn(val, 'name', event.target.value)
+                        }}
+                      />
                       <TextField
                         value={columns[val].label}
                         section='columns'
@@ -2170,7 +1940,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                           <label className='checkbox'>
                             <input
                               type='checkbox'
-                              checked={state.columns[val].useCommas}
+                              checked={config.columns[val].useCommas}
                               onChange={event => {
                                 editColumn(val, 'useCommas', event.target.checked)
                               }}
@@ -2182,7 +1952,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                           <label className='checkbox'>
                             <input
                               type='checkbox'
-                              checked={state.columns[val].dataTable}
+                              checked={config.columns[val].dataTable}
                               onChange={event => {
                                 editColumn(val, 'dataTable', event.target.checked)
                               }}
@@ -2194,7 +1964,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                           <label className='checkbox'>
                             <input
                               type='checkbox'
-                              checked={state.columns[val].tooltip}
+                              checked={config.columns[val].tooltip}
                               onChange={event => {
                                 editColumn(val, 'tooltip', event.target.checked)
                               }}
@@ -2216,7 +1986,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   </button>
                 </fieldset>
               )}
-              {'category' === state.legend.type && (
+              {'category' === config.legend.type && (
                 <fieldset className='primary-fieldset edit-block'>
                   <label>
                     <span className='edit-label'>
@@ -2231,14 +2001,14 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </Tooltip>
                     </span>
                   </label>
-                  {state.legend.additionalCategories &&
-                    state.legend.additionalCategories.map((val, i) => (
+                  {config.legend.additionalCategories &&
+                    config.legend.additionalCategories.map((val, i) => (
                       <fieldset className='edit-block' key={val}>
                         <button
                           className='remove-column'
                           onClick={event => {
                             event.preventDefault()
-                            const updatedAdditionaCategories = [...state.legend.additionalCategories]
+                            const updatedAdditionaCategories = [...config.legend.additionalCategories]
                             updatedAdditionaCategories.splice(i, 1)
                             updateField('legend', null, 'additionalCategories', updatedAdditionaCategories)
                           }}
@@ -2253,7 +2023,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                             subsection={null}
                             fieldName='additionalCategories'
                             updateField={(section, subsection, fieldName, value) => {
-                              const updatedAdditionaCategories = [...state.legend.additionalCategories]
+                              const updatedAdditionaCategories = [...config.legend.additionalCategories]
                               updatedAdditionaCategories[i] = value
                               updateField(section, subsection, fieldName, updatedAdditionaCategories)
                             }}
@@ -2265,7 +2035,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     className={'btn btn-primary full-width'}
                     onClick={event => {
                       event.preventDefault()
-                      const updatedAdditionaCategories = [...(state.legend.additionalCategories || [])]
+                      const updatedAdditionaCategories = [...(config.legend.additionalCategories || [])]
                       updatedAdditionaCategories.push('')
                       updateField('legend', null, 'additionalCategories', updatedAdditionaCategories)
                     }}
@@ -2277,7 +2047,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
             </AccordionItemPanel>
           </AccordionItem>{' '}
           {/* Columns */}
-          {'navigation' !== state.general.type && (
+          {'navigation' !== config.general.type && (
             <AccordionItem>
               {' '}
               {/* Legend */}
@@ -2285,7 +2055,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <AccordionItemButton>Legend</AccordionItemButton>
               </AccordionItemHeading>
               <AccordionItemPanel>
-                {(state.legend.type === 'equalnumber' || state.legend.type === 'equalinterval') && (
+                {(config.legend.type === 'equalnumber' || config.legend.type === 'equalinterval') && (
                   <Select
                     label='Legend Type'
                     value={legend.type}
@@ -2294,23 +2064,46 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       { value: 'equalinterval', label: 'Equal Interval' }
                     ]}
                     onChange={event => {
-                      handleEditorChanges('legendType', event.target.value)
+                      let testForType = Number(typeof config.data[0][config.columns.primary.name])
+                      let hasValue = config.data[0][config.columns.primary.name]
+                      let messages = []
+
+                      if (!hasValue) {
+                        messages.push(
+                          `There appears to be values missing for data in the primary column ${config.columns.primary.name}`
+                        )
+                      }
+
+                      if (testForType === 'string' && isNaN(testForType) && value !== 'category') {
+                        messages.push(
+                          'Error with legend. Primary columns that are text must use a categorical legend type. Try changing the legend type to DEV-12345categorical.'
+                        )
+                      } else {
+                        messages = []
+                      }
+
+                      const _newConfig = _.cloneDeep(config)
+                      _newConfig.legend.type = event.target.value
+                      _newConfig.runtime.editorErrorMessage = messages
+                      setConfig(_newConfig)
                     }}
                   />
                 )}
-                {'navigation' !== state.general.type && (
+                {'navigation' !== config.general.type && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
-                      checked={state.general.showSidebar || false}
+                      checked={config.general.showSidebar || false}
                       onChange={event => {
-                        handleEditorChanges('showSidebar', event.target.checked)
+                        const _newConfig = _.cloneDeep(config)
+                        _newConfig.general.showSidebar = event.target.checked
+                        setConfig(_newConfig)
                       }}
                     />
                     <span className='edit-label'>Show Legend</span>
                   </label>
                 )}
-                {'navigation' !== state.general.type && (
+                {'navigation' !== config.general.type && (
                   <>
                     <Select
                       label='Legend Position'
@@ -2324,15 +2117,15 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                         handleEditorChanges('sidebarPosition', event.target.value)
                       }}
                     />
-                    {(state.legend.position === 'side' || !state.legend.position) &&
-                      state.legend.style === 'gradient' && (
+                    {(config.legend.position === 'side' || !config.legend.position) &&
+                      config.legend.style === 'gradient' && (
                         <span style={{ color: 'red', fontSize: '14px' }}>
                           Position must be set to top or bottom to use gradient style.
                         </span>
                       )}
                   </>
                 )}
-                {'navigation' !== state.general.type && (
+                {'navigation' !== config.general.type && (
                   <Select
                     label={
                       <>
@@ -2364,7 +2157,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     }}
                   />
                 )}
-                {'navigation' !== state.general.type && state.legend.style === 'gradient' && (
+                {'navigation' !== config.general.type && config.legend.style === 'gradient' && (
                   <label>
                     <span className='edit-label'>Gradient Style</span>
                     <select
@@ -2378,7 +2171,29 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </select>
                   </label>
                 )}
-                {'navigation' !== state.general.type && state.legend.style === 'gradient' && (
+                {allowLegendSeparators && (
+                  <TextField
+                    value={legend.separators}
+                    updateField={updateField}
+                    section='legend'
+                    fieldName='separators'
+                    label='Legend Separators'
+                    placeholder='ex: 1,4'
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>
+                            Separators between legend items represented by the legend item numbers separated by commas.
+                          </p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+                )}
+                {'navigation' !== config.general.type && config.legend.style === 'gradient' && (
                   <label>
                     <span className='edit-label'>Tick Rotation (Degrees)</span>
                     <input
@@ -2420,7 +2235,12 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       type='checkbox'
                       checked={legend.singleColumn}
                       onChange={event => {
-                        handleEditorChanges('singleColumnLegend', event.target.checked)
+                        const _newConfig = _.cloneDeep(config)
+                        _newConfig.legend.singleColumn = !event.target.checked
+                        _newConfig.legend.singleRow = false
+                        _newConfig.legend.verticalSorted = false
+
+                        setConfig(_newConfig)
                       }}
                     />
                     <span className='edit-label'>Single Column Legend</span>
@@ -2432,19 +2252,39 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       type='checkbox'
                       checked={legend.singleRow}
                       onChange={event => {
-                        handleEditorChanges('singleRowLegend', event.target.checked)
+                        const _newConfig = _.cloneDeep(config)
+                        _newConfig.legend.singleRow = !event.target.checked
+                        _newConfig.legend.singleColumn = false
+                        _newConfig.legend.verticalSorted = false
+
+                        setConfig(_newConfig)
                       }}
                     />
                     <span className='edit-label'>Single Row Legend</span>
                   </label>
                 )}
-                {state.legend.style !== 'gradient' && (
+
+                {'navigation' !== config.general.type && config.legend.type === 'category' && (
+                  <Select
+                    label='Legend Group By :'
+                    value={legend.groupBy || ''}
+                    options={columnsOptions.map(c => c.key)}
+                    onChange={event => {
+                      const _newConfig = _.cloneDeep(config)
+                      _newConfig.legend.groupBy = event.target.value
+                      setConfig(_newConfig)
+                    }}
+                  />
+                )}
+                {config.legend.style !== 'gradient' && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
                       checked={legend.verticalSorted}
                       onChange={event => {
-                        handleEditorChanges('verticalSortedLegend', event.target.checked)
+                        const _newConfig = _.cloneDeep(config)
+                        _newConfig.legend.verticalSorted = event.target.checked
+                        setConfig(_newConfig)
                       }}
                     />
                     <span className='edit-label'>Vertical sorted legend</span>
@@ -2469,7 +2309,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <input
                       type='checkbox'
                       checked={legend.separateZero || false}
-                      onChange={event => handleEditorChanges('separateZero', event.target.checked)}
+                      onChange={event => {
+                        const _newConfig = _.cloneDeep(config)
+                        _newConfig.legend.separateZero = event.target.checked
+                        return setConfig(_newConfig)
+                      }}
                     />
                     <span className='edit-label column-heading'>
                       Separate Zero
@@ -2487,14 +2331,17 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </span>
                   </label>
                 )}
+
                 {/* Temp Checkbox */}
-                {state.legend.type === 'equalnumber' && (
+                {config.legend.type === 'equalnumber' && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
-                      checked={state.general.equalNumberOptIn}
+                      checked={config.general.equalNumberOptIn}
                       onChange={event => {
-                        handleEditorChanges('showEqualNumber', event.target.checked)
+                        const _newConfig = _.clone(config)
+                        _newConfig.general.equalNumberOptIn = event.target.checked
+                        setConfig(_newConfig)
                       }}
                     />
                     <span className='edit-label column-heading'>Use new quantile legend</span>
@@ -2511,6 +2358,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </Tooltip>
                   </label>
                 )}
+
                 {'category' !== legend.type && (
                   <Select
                     label={
@@ -2623,7 +2471,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </label>
                   </React.Fragment>
                 )}
-                {state.filters.length > 0 && (
+                {config.filters.length > 0 && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
@@ -2651,7 +2499,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </span>
                   </label>
                 )}
-                {(state.filters.length > 0 || state.general.type === 'bubble' || state.general.geoType === 'us') && (
+                {(config.filters.length > 0 || config.general.type === 'bubble' || config.general.geoType === 'us') && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
@@ -2680,7 +2528,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               </AccordionItemPanel>
             </AccordionItem>
           )}
-          {'navigation' !== state.general.type && (
+          {'navigation' !== config.general.type && (
             <AccordionItem>
               {' '}
               {/* Filters */}
@@ -2688,11 +2536,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <AccordionItemButton>Filters</AccordionItemButton>
               </AccordionItemHeading>
               <AccordionItemPanel>
-                <VizFilterEditor config={state} updateField={updateField} rawData={state.data} />
+                <VizFilterEditor config={config} updateField={updateField} rawData={config.data} />
               </AccordionItemPanel>
             </AccordionItem>
           )}
-          {'navigation' !== state.general.type && (
+          {'navigation' !== config.general.type && (
             <AccordionItem>
               {' '}
               {/* Data Table */}
@@ -2722,12 +2570,12 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <label className='checkbox'>
                   <input
                     type='checkbox'
-                    checked={state.table.wrapColumns}
+                    checked={config.table.wrapColumns}
                     onChange={event => {
-                      setState({
-                        ...state,
+                      setConfig({
+                        ...config,
                         table: {
-                          ...state.table,
+                          ...config.table,
                           wrapColumns: event.target.checked
                         }
                       })
@@ -2738,7 +2586,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <label className='checkbox'>
                   <input
                     type='checkbox'
-                    checked={state.table.forceDisplay !== undefined ? state.table.forceDisplay : !isDashboard}
+                    checked={config.table.forceDisplay !== undefined ? config.table.forceDisplay : !isDashboard}
                     onChange={event => {
                       handleEditorChanges('showDataTable', event.target.checked)
                     }}
@@ -2783,7 +2631,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   }
                 />
                 <TextField
-                  value={state.table.caption}
+                  value={config.table.caption}
                   updateField={updateField}
                   section='table'
                   fieldName='caption'
@@ -2804,14 +2652,14 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <label className='checkbox'>
                   <input
                     type='checkbox'
-                    checked={state.table.limitHeight}
+                    checked={config.table.limitHeight}
                     onChange={event => {
                       handleEditorChanges('limitDataTableHeight', event.target.checked)
                     }}
                   />
                   <span className='edit-label'>Limit Table Height</span>
                 </label>
-                {state.table.limitHeight && (
+                {config.table.limitHeight && (
                   <TextField
                     value={table.height}
                     updateField={updateField}
@@ -2824,10 +2672,22 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     max='500'
                   />
                 )}
+
+                <TextField
+                  value={table.cellMinWidth}
+                  updateField={updateField}
+                  section='table'
+                  fieldName='cellMinWidth'
+                  label='Table Cell Min Width'
+                  type='number'
+                  min='0'
+                  max='500'
+                />
+
                 <label className='checkbox'>
                   <input
                     type='checkbox'
-                    checked={state.table.expanded || false}
+                    checked={config.table.expanded || false}
                     onChange={event => {
                       handleEditorChanges('expandDataTable', event.target.checked)
                     }}
@@ -2835,19 +2695,19 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   <span className='edit-label'>Map loads with data table expanded</span>
                 </label>
                 <CheckBox
-                  value={state.table.download}
+                  value={config.table.download}
                   fieldName='download'
                   label='Show Download CSV Link'
                   section='table'
                   updateField={updateField}
                 />
-                {state.table.download && (
+                {config.table.download && (
                   <>
                     <label className='checkbox'>
                       <input
                         type='checkbox'
                         className='ms-4'
-                        checked={state.table.showDownloadLinkBelow}
+                        checked={config.table.showDownloadLinkBelow}
                         onChange={event => {
                           handleEditorChanges('toggleDownloadLinkBelow', event.target.checked)
                         }}
@@ -2855,7 +2715,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       <span className='edit-label'>Show Link Below Table</span>
                     </label>
                     <CheckBox
-                      value={state.table.downloadVisibleDataOnly}
+                      value={config.table.downloadVisibleDataOnly}
                       fieldName='downloadVisibleDataOnly'
                       className='ms-4'
                       label='Download only visible data'
@@ -2868,9 +2728,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   <label className='checkbox'>
                     <input
                       type='checkbox'
-                      checked={state.table.showDataTableLink}
+                      checked={config.table.showDataTableLink}
                       onChange={event => {
-                        handleEditorChanges('toggleDataTableLink', event.target.checked)
+                        const _newConfig = _.cloneDeep(config)
+                        _newConfig.table.showDataTableLink = event.target.checked
+                        setConfig(_newConfig)
                       }}
                     />
                     <span className='edit-label'>Show Data Table Name & Link</span>
@@ -2880,9 +2742,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   <label className='checkbox'>
                     <input
                       type='checkbox'
-                      checked={state.table.showDownloadUrl}
+                      checked={config.table.showDownloadUrl}
                       onChange={event => {
-                        handleEditorChanges('toggleDataUrl', event.target.checked)
+                        const _newConfig = _.cloneDeep(config)
+                        _newConfig.table.showDownloadUrl = event.target.checked
+                        setConfig(_newConfig)
                       }}
                     />
                     <span className='edit-label'>Show URL to Automatically Updated Data</span>
@@ -2891,7 +2755,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <label className='checkbox'>
                   <input
                     type='checkbox'
-                    checked={state.general.showFullGeoNameInCSV}
+                    checked={config.table.showFullGeoNameInCSV}
                     onChange={event => {
                       handleEditorChanges('toggleShowFullGeoNameInCSV', event.target.checked)
                     }}
@@ -2901,7 +2765,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <label className='checkbox'>
                   <input
                     type='checkbox'
-                    checked={state.general.showDownloadImgButton}
+                    checked={config.general.showDownloadImgButton}
                     onChange={event => {
                       handleEditorChanges('toggleDownloadImgButton', event.target.checked)
                     }}
@@ -2929,29 +2793,32 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               <AccordionItemButton>Interactivity</AccordionItemButton>
             </AccordionItemHeading>
             <AccordionItemPanel>
-              <label>
-                <span className='edit-label'>
-                  Detail displays on{' '}
-                  <Tooltip style={{ textTransform: 'none' }}>
-                    <Tooltip.Target>
-                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                    </Tooltip.Target>
-                    <Tooltip.Content>
-                      <p>At mobile sizes, information always appears in a popover modal when a user taps on an item.</p>
-                    </Tooltip.Content>
-                  </Tooltip>
-                </span>
-                <select
-                  value={state.tooltips.appearanceType}
-                  onChange={event => {
-                    handleEditorChanges('appearanceType', event.target.value)
-                  }}
-                >
-                  <option value='hover'>Hover - Tooltip</option>
-                  <option value='click'>Click - Popover Modal</option>
-                </select>
-              </label>
-              {'click' === state.tooltips.appearanceType && (
+              <Select
+                label={
+                  <>
+                    Detail displays on{' '}
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>
+                          At mobile sizes, information always appears in a popover modal when a user taps on an item.
+                        </p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  </>
+                }
+                value={config.tooltips.appearanceType}
+                options={[
+                  { value: 'hover', label: 'Hover - Tooltip' },
+                  { value: 'click', label: 'Click - Popover Modal' }
+                ]}
+                onChange={event => {
+                  handleEditorChanges('appearanceType', event.target.value)
+                }}
+              />
+              {'click' === config.tooltips.appearanceType && (
                 <TextField
                   value={tooltips.linkLabel}
                   section='tooltips'
@@ -2963,7 +2830,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               <label className='checkbox'>
                 <input
                   type='checkbox'
-                  checked={state.tooltips.capitalizeLabels}
+                  checked={config.tooltips.capitalizeLabels}
                   onChange={event => {
                     handleEditorChanges('capitalizeLabels', event.target.checked)
                   }}
@@ -2982,7 +2849,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               <label>
                 <span className='edit-label'>Header Theme</span>
                 <ul className='color-palette'>
-                  {headerColors.map(palette => {
+                  {HEADER_COLORS.map(palette => {
                     return (
                       <li
                         title={palette}
@@ -2990,7 +2857,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                         onClick={() => {
                           handleEditorChanges('headerColor', palette)
                         }}
-                        className={state.general.headerColor === palette ? 'selected ' + palette : palette}
+                        className={config.general.headerColor === palette ? 'selected ' + palette : palette}
                       ></li>
                     )
                   })}
@@ -2999,7 +2866,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               <label className='checkbox'>
                 <input
                   type='checkbox'
-                  checked={state.general.showTitle || false}
+                  checked={config.general.showTitle || false}
                   onChange={event => {
                     handleEditorChanges('showTitle', event.target.checked)
                   }}
@@ -3007,30 +2874,31 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <span className='edit-label'>Show Title</span>
               </label>
 
-              {'navigation' === state.general.type && (
+              {'navigation' === config.general.type && (
                 <label className='checkbox'>
                   <input
                     type='checkbox'
-                    checked={state.general.fullBorder || false}
+                    checked={config.general.fullBorder || false}
                     onChange={event => {
-                      handleEditorChanges('fullBorder', event.target.checked)
+                      const _newConfig = _.cloneDeep(config)
+                      _newConfig.general.fullBorder = event.target.checked
+                      setConfig(_newConfig)
                     }}
                   />
                   <span className='edit-label'>Add border around map</span>
                 </label>
               )}
-              <label>
-                <span className='edit-label'>Geo Border Color</span>
-                <select
-                  value={state.general.geoBorderColor || false}
-                  onChange={event => {
-                    handleEditorChanges('geoBorderColor', event.target.value)
-                  }}
-                >
-                  <option value='darkGray'>Dark Gray (Default)</option>
-                  <option value='sameAsBackground'>White</option>
-                </select>
-              </label>
+              <Select
+                label='Geo Border Color'
+                value={config.general.geoBorderColor || ''}
+                options={[
+                  { value: 'darkGray', label: 'Dark Gray (Default)' },
+                  { value: 'sameAsBackground', label: 'White' }
+                ]}
+                onChange={event => {
+                  handleEditorChanges('geoBorderColor', event.target.value)
+                }}
+              />
               <label>
                 <span className='edit-label'>Map Color Palette</span>
               </label>
@@ -3041,8 +2909,22 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 fieldName='isReversed'
                 size='small'
                 label='Use selected palette in reverse order'
-                updateField={updateField}
-                value={state.general.palette.isReversed}
+                onClick={() => {
+                  const _state = _.cloneDeep(config)
+                  _state.general.palette.isReversed = !_state.general.palette.isReversed
+                  let paletteName = ''
+                  if (_state.general.palette.isReversed && !config.color.endsWith('reverse')) {
+                    paletteName = config.color + 'reverse'
+                  }
+                  if (!_state.general.palette.isReversed && config.color.endsWith('reverse')) {
+                    paletteName = config.color.slice(0, -7)
+                  }
+                  if (paletteName) {
+                    _state.color = paletteName
+                  }
+                  setConfig(_state)
+                }}
+                value={config.general.palette.isReversed}
               />
               <span>Sequential</span>
               <ul className='color-palette'>
@@ -3064,9 +2946,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       title={palette}
                       key={palette}
                       onClick={() => {
-                        handleEditorChanges('color', palette)
+                        const _newConfig = _.cloneDeep(config)
+                        _newConfig.color = palette
+                        setConfig(_newConfig)
                       }}
-                      className={state.color === palette ? 'selected' : ''}
+                      className={config.color === palette ? 'selected' : ''}
                     >
                       <span style={colorOne}></span>
                       <span style={colorTwo}></span>
@@ -3091,7 +2975,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   }
 
                   // hide palettes with too few colors for region maps
-                  if (colorPalettes[palette].length <= 8 && state.general.geoType === 'us-region') {
+                  if (colorPalettes[palette].length <= 8 && config.general.geoType === 'us-region') {
                     return ''
                   }
                   return (
@@ -3099,9 +2983,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       title={palette}
                       key={palette}
                       onClick={() => {
-                        handleEditorChanges('color', palette)
+                        const _newConfig = _.cloneDeep(config)
+                        _newConfig.color = palette
+                        setConfig(_newConfig)
                       }}
-                      className={state.color === palette ? 'selected' : ''}
+                      className={config.color === palette ? 'selected' : ''}
                     >
                       <span style={colorOne}></span>
                       <span style={colorTwo}></span>
@@ -3126,7 +3012,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   }
 
                   // hide palettes with too few colors for region maps
-                  if (colorPalettes[palette].length <= 8 && state.general.geoType === 'us-region') {
+                  if (colorPalettes[palette].length <= 8 && config.general.geoType === 'us-region') {
                     return ''
                   }
                   return (
@@ -3136,7 +3022,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       onClick={() => {
                         handleEditorChanges('color', palette)
                       }}
-                      className={state.color === palette ? 'selected' : ''}
+                      className={config.color === palette ? 'selected' : ''}
                     >
                       <span style={colorOne}></span>
                       <span style={colorTwo}></span>
@@ -3149,7 +3035,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 Geocode Settings
                 <TextField
                   type='number'
-                  value={state.visual.geoCodeCircleSize}
+                  value={config.visual.geoCodeCircleSize}
                   section='visual'
                   max='10'
                   fieldName='geoCodeCircleSize'
@@ -3158,11 +3044,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 />
               </label>
 
-              {state.general.type === 'bubble' && (
+              {config.general.type === 'bubble' && (
                 <>
                   <TextField
                     type='number'
-                    value={state.visual.minBubbleSize}
+                    value={config.visual.minBubbleSize}
                     section='visual'
                     fieldName='minBubbleSize'
                     label='Minimum Bubble Size'
@@ -3170,7 +3056,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   />
                   <TextField
                     type='number'
-                    value={state.visual.maxBubbleSize}
+                    value={config.visual.maxBubbleSize}
                     section='visual'
                     fieldName='maxBubbleSize'
                     label='Maximum Bubble Size'
@@ -3178,51 +3064,59 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   />
                 </>
               )}
-              {(state.general.geoType === 'world' ||
-                (state.general.geoType === 'us' && state.general.type === 'bubble')) && (
+              {(config.general.geoType === 'world' ||
+                (config.general.geoType === 'us' && config.general.type === 'bubble')) && (
                 <label className='checkbox'>
                   <input
                     type='checkbox'
-                    checked={state.visual.showBubbleZeros}
+                    checked={config.visual.showBubbleZeros}
                     onChange={event => {
-                      handleEditorChanges('showBubbleZeros', event.target.checked)
+                      const _newConfig = _.cloneDeep(config)
+                      _newConfig.visual.showBubbleZeros = event.target.checked
+                      setConfig(_newConfig)
                     }}
                   />
                   <span className='edit-label'>Show Data with Zero's on Bubble Map</span>
                 </label>
               )}
-              {(state.general.geoType === 'world' || state.general.geoType === 'single-state') && (
+              {(config.general.geoType === 'world' || config.general.geoType === 'single-state') && (
                 <label className='checkbox'>
                   <input
                     type='checkbox'
-                    checked={state.general.allowMapZoom}
+                    checked={config.general.allowMapZoom}
                     onChange={event => {
-                      handleEditorChanges('allowMapZoom', event.target.checked)
+                      const _newConfig = _.cloneDeep(config)
+                      _newConfig.general.allowMapZoom = event.target.checked
+                      _newConfig.mapPosition.coordinates = config.general.geoType === 'world' ? [0, 30] : [0, 0]
+                      _newConfig.mapPosition.zoom = 1
+                      setConfig(_newConfig)
                     }}
                   />
                   <span className='edit-label'>Allow Map Zooming</span>
                 </label>
               )}
-              {state.general.type === 'bubble' && (
+              {config.general.type === 'bubble' && (
                 <label className='checkbox'>
                   <input
                     type='checkbox'
-                    checked={state.visual.extraBubbleBorder}
+                    checked={config.visual.extraBubbleBorder}
                     onChange={event => {
-                      handleEditorChanges('toggleExtraBubbleBorder', event.target.checked)
+                      const _newConfig = _.cloneDeep(config)
+                      _newConfig.visual.extraBubbleBorder = event.target.checked
+                      setConfig(_newConfig)
                     }}
                   />
                   <span className='edit-label'>Bubble Map has extra border</span>
                 </label>
               )}
-              {(state.general.geoType === 'us' ||
-                state.general.geoType === 'us-county' ||
-                state.general.geoType === 'world') && (
+              {(config.general.geoType === 'us' ||
+                config.general.geoType === 'us-county' ||
+                config.general.geoType === 'world') && (
                 <>
                   <label>
                     <span className='edit-label'>Default City Style</span>
                     <select
-                      value={state.visual.cityStyle || false}
+                      value={config.visual.cityStyle || false}
                       onChange={event => {
                         handleEditorChanges('handleCityStyle', event.target.value)
                       }}
@@ -3236,7 +3130,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </select>
                   </label>
                   <TextField
-                    value={state.visual.cityStyleLabel}
+                    value={config.visual.cityStyleLabel}
                     section='visual'
                     fieldName='cityStyleLabel'
                     label='Label (Optional) '
@@ -3256,8 +3150,8 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               )}
               {/* <AdditionalCityStyles /> */}
               <>
-                {state.visual.additionalCityStyles.length > 0 &&
-                  state.visual.additionalCityStyles.map(({ label, column, value, shape }, i) => {
+                {config.visual.additionalCityStyles.length > 0 &&
+                  config.visual.additionalCityStyles.map(({ label, column, value, shape }, i) => {
                     return (
                       <div className='edit-block' key={`additional-city-style-${i}`}>
                         <button
@@ -3330,7 +3224,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   type='number'
                   min={0}
                   max={100}
-                  value={state.tooltips.opacity ? state.tooltips.opacity : 100}
+                  value={config.tooltips.opacity ? config.tooltips.opacity : 100}
                   section='tooltips'
                   fieldName='opacity'
                   label='Tooltip Opacity (%)'
@@ -3338,7 +3232,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 />
               </label>
               {/* Leaflet Map Type */}
-              {state.general.geoType === 'leaflet' && (
+              {config.general.geoType === 'leaflet' && (
                 <>
                   <Select
                     label='Leaflet Theme'
@@ -3356,9 +3250,9 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               <AccordionItemButton>Custom Map Layers</AccordionItemButton>
             </AccordionItemHeading>
             <AccordionItemPanel>
-              {state.map.layers.length === 0 && <p>There are currently no layers.</p>}
+              {config.map.layers.length === 0 && <p>There are currently no layers.</p>}
 
-              {state.map.layers.map((layer, index) => {
+              {config.map.layers.map((layer, index) => {
                 return (
                   <>
                     <Accordion allowZeroExpanded>
@@ -3444,10 +3338,10 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               </p>
             </AccordionItemPanel>
           </AccordionItem>
-          {state.general.geoType === 'us' && <Panels.PatternSettings name='Pattern Settings' />}
-          {state.general.geoType !== 'us-county' && <Panels.Annotate name='Text Annotations' />}
+          {config.general.geoType === 'us' && <Panels.PatternSettings name='Pattern Settings' />}
+          {config.general.geoType !== 'us-county' && <Panels.Annotate name='Text Annotations' />}
         </Accordion>
-        <AdvancedEditor loadConfig={loadConfig} config={state} convertStateToConfig={convertStateToConfig} />
+        <AdvancedEditor loadConfig={setConfig} config={config} convertStateToConfig={convertStateToConfig} />
       </Layout.Sidebar>
     </ErrorBoundary>
   )