@cdc/map 4.25.8 → 4.25.11

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

@@ -1,4 +1,6 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState, useMemo, useRef } from 'react'
+import { filterColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 
 // Third Party
 import {
@@ -12,12 +14,14 @@ import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'
 import { useDebounce } from 'use-debounce'
 import _ from 'lodash'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
 import Panels from './Panels'
 import Layout from '@cdc/core/components/Layout'
 
 // Data
-import colorPalettes from '@cdc/core/data/colorPalettes'
-import { supportedStatesFipsCodes } from '../../../data/supported-geos.js'
+import { mapColorPalettes as colorPalettes } from '@cdc/core/data/colorPalettes'
+import { supportedStatesFipsCodes, supportedCountries } from '../../../data/supported-geos.js'
+import { getSupportedCountryOptions } from '../../../helpers/getCountriesPicked'
 
 // Components - Core
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
@@ -26,6 +30,7 @@ import Icon from '@cdc/core/components/ui/Icon'
 import InputToggle from '@cdc/core/components/inputs/InputToggle'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
+import PanelMarkup from '@cdc/core/components/EditorPanel/components/PanelMarkup'
 
 // Assets
 import UsaGraphic from '@cdc/core/assets/icon-map-usa.svg'
@@ -43,12 +48,23 @@ 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 { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
 import useColumnsRequiredChecker from '../../../hooks/useColumnsRequiredChecker'
-import { addUIDs, HEADER_COLORS } from '../../../helpers'
+import { addUIDs } from '../../../helpers'
+import generateRuntimeData from '../../../helpers/generateRuntimeData'
+
+import '@cdc/core/styles/v2/components/editor.scss'
 import './editorPanel.styles.css'
 import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
 import { Datasets } from '@cdc/core/types/DataSet'
 import MultiSelect from '@cdc/core/components/MultiSelect'
+import { paletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
+import { isV1Palette, getCurrentPaletteName, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
+import { USE_V2_MIGRATION } from '@cdc/core/helpers/constants'
+import { isCoveDeveloperMode } from '@cdc/core/helpers/queryStringUtils'
+import { PaletteSelector, DeveloperPaletteRollback } from '@cdc/core/components/PaletteSelector'
+import PaletteConversionModal from '@cdc/core/components/PaletteConversionModal'
+import { CustomColorsEditor } from '@cdc/core/components/CustomColorsEditor'
 
 type MapEditorPanelProps = {
   datasets?: Datasets
@@ -65,30 +81,48 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
     setConfig,
     config,
     tooltipId,
-    runtimeData,
-    setRuntimeData
+    runtimeData
   } = useContext<MapContext>(ConfigContext)
 
   const { columnsRequiredChecker } = useColumnsRequiredChecker()
   const dispatch = useContext(MapDispatchContext)
   const { general, columns, legend, table, tooltips } = config
-  const columnsInData = config?.data?.[0] ? Object.keys(config.data[0]) : []
+
+  // Get columns from data with fallback to datasets (for dashboard context)
+  const columnsInData = useMemo(() => {
+    // First try config.data
+    if (config?.data?.[0]) {
+      return Object.keys(config.data[0])
+    }
+
+    // Fallback to datasets using config.dataKey (for dashboard visualizations)
+    if (datasets && config?.dataKey) {
+      const assignedDataset = datasets[config.dataKey]
+      if (assignedDataset?.data?.[0]) {
+        return Object.keys(assignedDataset.data[0])
+      }
+    }
+
+    return []
+  }, [
+    config?.data?.length > 0 ? JSON.stringify(Object.keys(config.data[0])) : null,
+    datasets?.[config?.dataKey as string]?.data?.length,
+    config?.dataKey
+  ])
 
   const [loadedDefault, setLoadedDefault] = useState(false)
   const [displayPanel, setDisplayPanel] = useState(true)
   const [activeFilterValueForDescription, setActiveFilterValueForDescription] = useState([0, 0])
+  const [showConversionModal, setShowConversionModal] = useState(false)
+  const [pendingPaletteSelection, setPendingPaletteSelection] = useState<{
+    palette: string
+    action: () => void
+  } | null>(null)
 
   const {
     MapLayerHandlers: { handleMapLayer, handleAddLayer, handleRemoveLayer }
   } = useMapLayers(config, setConfig, false, tooltipId)
 
-  useEffect(() => {
-    // Pass up to Editor if needed
-    if (setParentConfig) {
-      setParentConfig(convertStateToConfig())
-    }
-  }, [config])
-
   const categoryMove = (idx1, idx2) => {
     let categoryValuesOrder = getCategoryValuesOrder()
     let [movedItem] = categoryValuesOrder.splice(idx1, 1)
@@ -690,8 +724,27 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
         })
 
         if (config) {
-          const newData = generateRuntimeData(config)
-          setRuntimeData(newData)
+          const newData = generateRuntimeData(config, [], 0, legend.type === 'category')
+          dispatch({ type: 'SET_RUNTIME_DATA', payload: newData })
+        }
+        break
+      case 'chooseCountry':
+        let countryData = value.map(countryName => ({
+          iso: Object.keys(supportedCountries).find(key => supportedCountries[key][0] === countryName),
+          name: countryName
+        }))
+
+        setConfig({
+          ...config,
+          general: {
+            ...config.general,
+            countriesPicked: countryData
+          }
+        })
+
+        if (config) {
+          const newData = generateRuntimeData(config, [], 0, legend.type === 'category')
+          dispatch({ type: 'SET_RUNTIME_DATA', payload: newData })
         }
         break
       case 'classificationType':
@@ -868,7 +921,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
   }
 
   const convertStateToConfig = () => {
-    let strippedState = _.cloneDeep(config) // Deep copy
+    let strippedState = cloneConfig(config) // Deep copy
 
     // Strip ref
     delete strippedState['']
@@ -900,58 +953,89 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
 
   const isReversed = config.general.palette.isReversed
 
-  function filterColorPalettes() {
-    let sequential = []
-    let nonSequential = []
-    let accessibleColors = []
-    for (let paletteName in colorPalettes) {
-      if (!isReversed) {
-        if (paletteName.includes('qualitative') && !paletteName.endsWith('reverse')) {
-          nonSequential.push(paletteName)
-        }
-        if (paletteName.includes('colorblindsafe') && !paletteName.endsWith('reverse')) {
-          accessibleColors.push(paletteName)
-        }
-        if (
-          !paletteName.includes('qualitative') &&
-          !paletteName.includes('colorblindsafe') &&
-          !paletteName.endsWith('reverse')
-        ) {
-          sequential.push(paletteName)
-        }
-      }
-      if (isReversed) {
-        if (paletteName.includes('qualitative') && paletteName.endsWith('reverse')) {
-          nonSequential.push(paletteName)
-        }
-        if (paletteName.includes('colorblindsafe') && paletteName.endsWith('reverse')) {
-          accessibleColors.push(paletteName)
-        }
-        if (
-          !paletteName.includes('qualitative') &&
-          !paletteName.includes('colorblindsafe') &&
-          paletteName.endsWith('reverse')
-        ) {
-          sequential.push(paletteName)
+  const { sequential, nonSequential, accessibleColors } = useMemo(
+    () => filterColorPalettes({ config, isReversed, colorPalettes }),
+    [isReversed, colorPalettes, config.general.palette.version]
+  )
+
+  // Helper function to handle palette selection with conversion prompt
+  const handlePaletteSelection = (palette: string) => {
+    const isV1PaletteConfig = isV1Palette(config)
+
+    const executeSelection = () => {
+      const _newConfig = _.cloneDeep(config)
+
+      // If v2 migration is disabled, use the original palette name and keep v1 version
+      if (!USE_V2_MIGRATION) {
+        _newConfig.general.palette.name = palette
+        _newConfig.general.palette.version = '1.0'
+      } else {
+        // V2 migration logic
+        _newConfig.general.palette.name = palette
+          ? migratePaletteWithMap(palette, paletteMigrationMap, false)
+          : undefined
+        if (isV1PaletteConfig) {
+          _newConfig.general.palette.version = '2.0'
         }
       }
+      setConfig(_newConfig)
+    }
+
+    if (isV1PaletteConfig) {
+      setPendingPaletteSelection({ palette, action: executeSelection })
+      setShowConversionModal(true)
+    } else {
+      executeSelection()
+    }
+  }
+
+  // Modal handlers
+  const handleConversionConfirm = () => {
+    if (pendingPaletteSelection) {
+      pendingPaletteSelection.action()
+    }
+    setShowConversionModal(false)
+    setPendingPaletteSelection(null)
+  }
+
+  const handleConversionCancel = () => {
+    setShowConversionModal(false)
+    setPendingPaletteSelection(null)
+  }
+
+  const handleReturnToV1 = () => {
+    if (pendingPaletteSelection) {
+      const _newConfig = cloneConfig(config)
+      _newConfig.general.palette.name = pendingPaletteSelection.palette
+      _newConfig.general.palette.version = '1.0'
+      setConfig(_newConfig)
     }
+    setShowConversionModal(false)
+    setPendingPaletteSelection(null)
+  }
+
+  // Helper function to determine if a palette should be marked as selected
+  const getPaletteClassName = (palette: string) => {
+    const currentPaletteName = config.general.palette.name || ''
 
-    return [sequential, nonSequential, accessibleColors]
+    // Direct comparison since the UI filters palettes by version
+    // When v1 is selected, UI shows v1 palettes; when v2 is selected, UI shows v2 palettes
+    return currentPaletteName === palette ? 'selected' : ''
   }
-  const [sequential, nonSequential, accessibleColors] = filterColorPalettes()
+
+  const configStringRef = useRef<string>()
 
   useEffect(() => {
     setLoadedDefault(config.defaultData)
     columnsRequiredChecker()
   }, [config])
 
-  useEffect(() => {
-    const newConfig = convertStateToConfig()
-    if (isEditor && setParentConfig) {
-      setParentConfig(newConfig)
-    }
-  }, [config])
+  // Only update parent when config content actually changes (not just reference)
+  const configString = JSON.stringify(convertStateToConfig())
+  if (isEditor && setParentConfig && configStringRef.current !== configString) {
+    configStringRef.current = configString
+    setParentConfig(JSON.parse(configString))
+  }
 
   const columnsOptions = [
     <option value='' key={'Select Option'}>
@@ -1014,6 +1098,16 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
     return options
   }
 
+  const CountryOptionList = () => {
+    const countryOptions = getSupportedCountryOptions()
+
+    return countryOptions.map(({ value, label }) => (
+      <option key={value} value={label}>
+        {label}
+      </option>
+    ))
+  }
+
   const filterValueOptionList = []
 
   if (runtimeFilters.length > 0) {
@@ -1220,6 +1314,34 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                   />
                 </label>
               )}
+              {/* Country Selection for World Maps */}
+              {config.general.geoType === 'world' && (
+                <>
+                  <label>
+                    <span>Countries Selector</span>
+                    <MultiSelect
+                      selected={(config.general.countriesPicked || []).map(country => country.name)}
+                      options={CountryOptionList().map(option => ({
+                        value: option.props.value,
+                        label: option.props.children
+                      }))}
+                      fieldName={'countriesPicked'}
+                      updateField={(_, __, ___, selectedOptions) => {
+                        handleEditorChanges('chooseCountry', selectedOptions)
+                      }}
+                    />
+                  </label>
+                  {config.general.countriesPicked && config.general.countriesPicked.length > 0 && (
+                    <CheckBox
+                      value={config.general.hideUnselectedCountries || false}
+                      fieldName='hideUnselectedCountries'
+                      label='Hide Unselected Countries'
+                      updateField={updateField}
+                      section='general'
+                    />
+                  )}
+                </>
+              )}
               {/* Type */}
               <Select
                 label={
@@ -1263,7 +1385,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                     { value: '_blank', label: 'New Window' }
                   ]}
                   onChange={event => {
-                    const _newConfig = _.cloneDeep(config)
+                    const _newConfig = cloneConfig(config)
                     _newConfig.general.navigationTarget = event.target.value
                     setConfig(_newConfig)
                   }}
@@ -1297,37 +1419,35 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
 
               {/* 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>
+                <CheckBox
+                  value={config.general.displayAsHex}
+                  section='general'
+                  subsection={null}
+                  fieldName='displayAsHex'
+                  label='Display As Hex Map'
+                  updateField={updateField}
+                  className=''
+                />
               )}
 
               {/* 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>
+              <CheckBox
+                value={config.hexMap.type === 'shapes'}
+                section='hexMap'
+                subsection={null}
+                fieldName='type'
+                label='Display Shapes on Hex Map'
+                updateField={updateField}
+                onChange={event => {
+                  setConfig({
+                    ...config,
+                    hexMap: {
+                      ...config.hexMap,
+                      type: event.target.checked ? 'shapes' : 'standard'
+                    }
+                  })
+                }}
+              />
               <HexSetting.ShapeColumns columnsOptions={columnsOptions} />
 
               {'us' === config.general.geoType &&
@@ -1353,18 +1473,14 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                 )}
 
               {'us' === config.general.geoType && (
-                <label className='checkbox'>
-                  <input
-                    type='checkbox'
-                    checked={general.territoriesAlwaysShow || false}
-                    onChange={event => {
-                      const _newConfig = _.cloneDeep(config)
-                      _newConfig.general.territoriesAlwaysShow = event.target.checked
-                      setConfig(_newConfig)
-                    }}
-                  />
-                  <span className='edit-label'>Show All Territories</span>
-                </label>
+                <CheckBox
+                  value={general.territoriesAlwaysShow || false}
+                  section='general'
+                  subsection={null}
+                  fieldName='territoriesAlwaysShow'
+                  label='Show All Territories'
+                  updateField={updateField}
+                />
               )}
             </AccordionItemPanel>
           </AccordionItem>
@@ -1397,18 +1513,14 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                   </Tooltip>
                 }
               />
-              <label className='checkbox'>
-                <input
-                  type='checkbox'
-                  checked={config.general.showTitle || false}
-                  onChange={event => {
-                    const _newConfig = _.cloneDeep(config)
-                    _newConfig.general.showTitle = event.target.checked
-                    setConfig(_newConfig)
-                  }}
-                />
-                <span className='edit-label'>Show Title</span>
-              </label>
+              <CheckBox
+                value={config.general.showTitle || false}
+                section='general'
+                subsection={null}
+                fieldName='showTitle'
+                label='Show Title'
+                updateField={updateField}
+              />
               <TextField
                 value={general.superTitle || ''}
                 updateField={updateField}
@@ -1518,41 +1630,28 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                     options={columnsOptions.map(c => c.key)}
                     onChange={event => {
                       editColumn('geo', 'name', event.target.value)
-                      checkConfigurationNeeded(config)
                     }}
                   />
                 </label>
                 {config.general.type === 'us-geocode' && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={config.general.convertFipsCodes}
-                      onChange={event => {
-                        setConfig({
-                          ...config,
-                          general: {
-                            ...config.general,
-                            convertFipsCodes: event.target.checked
-                          }
-                        })
-                      }}
-                    />
-                    <span className='edit-label'>Convert FIPS Codes to Geography Name</span>
-                  </label>
+                  <CheckBox
+                    value={config.general.convertFipsCodes}
+                    section='general'
+                    subsection={null}
+                    fieldName='convertFipsCodes'
+                    label='Convert FIPS Codes to Geography Name'
+                    updateField={updateField}
+                  />
                 )}
 
-                <label className='checkbox'>
-                  <input
-                    type='checkbox'
-                    checked={config.general.hideGeoColumnInTooltip || false}
-                    onChange={event => {
-                      const _newConfig = _.cloneDeep(config)
-                      _newConfig.general.hideGeoColumnInTooltip = event.target.checked
-                      setConfig(_newConfig)
-                    }}
-                  />
-                  <span className='edit-label'>Hide Geography Column Name in Tooltip</span>
-                </label>
+                <CheckBox
+                  value={config.general.hideGeoColumnInTooltip || false}
+                  section='general'
+                  subsection={null}
+                  fieldName='hideGeoColumnInTooltip'
+                  label='Hide Geography Column Name in Tooltip'
+                  updateField={updateField}
+                />
                 <TextField
                   value={config.general.geoLabelOverride}
                   section='general'
@@ -1579,11 +1678,10 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                     value={columns.primary.name}
                     options={columnsOptions.map(c => c.key)}
                     onChange={event => {
-                      const _state = _.cloneDeep(config)
+                      const _state = cloneConfig(config)
                       _state.columns.primary.name = event.target.value
                       _state.columns.primary.label = event.target.value
                       setConfig(_state)
-                      checkConfigurationNeeded(_state)
                     }}
                     tooltip={
                       <Tooltip style={{ textTransform: 'none' }}>
@@ -1596,15 +1694,18 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                       </Tooltip>
                     }
                   />
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={config.general.hidePrimaryColumnInTooltip || false}
+                  <label>
+                    <CheckBox
+                      value={config.general.hidePrimaryColumnInTooltip || false}
+                      section='general'
+                      subsection={null}
+                      fieldName='hidePrimaryColumnInTooltip'
+                      label='Hide Data Column Name in Tooltip'
+                      updateField={updateField}
                       onChange={event => {
                         handleEditorChanges('hidePrimaryColumnInTooltip', event.target.checked)
                       }}
                     />
-                    <span className='edit-label'>Hide Data Column Name in Tooltip</span>
                   </label>
                   <TextField
                     value={columns.primary.label}
@@ -1653,42 +1754,30 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         min={0}
                       />
                     </li>
-                    <li>
-                      <label className='checkbox'>
-                        <input
-                          type='checkbox'
-                          checked={config.columns.primary.useCommas}
-                          onChange={event => {
-                            editColumn('primary', 'useCommas', event.target.checked)
-                          }}
-                        />
-                        <span className='edit-label'>Add Commas to Numbers</span>
-                      </label>
-                    </li>
-                    <li>
-                      <label className='checkbox'>
-                        <input
-                          type='checkbox'
-                          checked={config.columns.primary.dataTable || false}
-                          onChange={event => {
-                            editColumn('primary', 'dataTable', event.target.checked)
-                          }}
-                        />
-                        <span className='edit-label'>Show in Data Table</span>
-                      </label>
-                    </li>
-                    <li>
-                      <label className='checkbox'>
-                        <input
-                          type='checkbox'
-                          checked={config.columns.primary.tooltip || false}
-                          onChange={event => {
-                            editColumn('primary', 'tooltip', event.target.checked)
-                          }}
-                        />
-                        <span className='edit-label'>Show in Tooltips</span>
-                      </label>
-                    </li>
+                    <CheckBox
+                      value={config.columns.primary.useCommas}
+                      section='columns'
+                      subsection='primary'
+                      fieldName='useCommas'
+                      label='Add Commas to Numbers'
+                      updateField={updateField}
+                    />
+                    <CheckBox
+                      value={config.columns.primary.dataTable || false}
+                      section='columns'
+                      subsection='primary'
+                      fieldName='dataTable'
+                      label='Show in Data Table'
+                      updateField={updateField}
+                    />
+                    <CheckBox
+                      value={config.columns.primary.tooltip || false}
+                      section='columns'
+                      subsection='primary'
+                      fieldName='tooltip'
+                      label='Show in Tooltips'
+                      updateField={updateField}
+                    />
                   </ul>
                 </fieldset>
               )}
@@ -1707,14 +1796,14 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         </Tooltip.Content>
                       </Tooltip>
                     </span>
-                    <select
-                      value={config.columns.categorical ? config.columns.categorical.name : columnsOptions[0]}
+                    <Select
+                      label=''
+                      value={config.columns.categorical ? config.columns.categorical.name : columnsOptions[0]?.key}
+                      options={columnsOptions.map(c => c.key)}
                       onChange={event => {
                         editColumn('categorical', 'name', event.target.value)
                       }}
-                    >
-                      {columnsOptions}
-                    </select>
+                    />
                   </label>
                 </fieldset>
               )}
@@ -1937,42 +2026,39 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                             updateField={updateField}
                           />
                         </li>
-                        <li>
-                          <label className='checkbox'>
-                            <input
-                              type='checkbox'
-                              checked={config.columns[val].useCommas}
-                              onChange={event => {
-                                editColumn(val, 'useCommas', event.target.checked)
-                              }}
-                            />
-                            <span className='edit-label'>Add Commas to Numbers</span>
-                          </label>
-                        </li>
-                        <li>
-                          <label className='checkbox'>
-                            <input
-                              type='checkbox'
-                              checked={config.columns[val].dataTable}
-                              onChange={event => {
-                                editColumn(val, 'dataTable', event.target.checked)
-                              }}
-                            />
-                            <span className='edit-label'>Show in Data Table</span>
-                          </label>
-                        </li>
-                        <li>
-                          <label className='checkbox'>
-                            <input
-                              type='checkbox'
-                              checked={config.columns[val].tooltip}
-                              onChange={event => {
-                                editColumn(val, 'tooltip', event.target.checked)
-                              }}
-                            />
-                            <span className='edit-label'>Show in Tooltips</span>
-                          </label>
-                        </li>
+                        <CheckBox
+                          value={config.columns[val].useCommas}
+                          section='columns'
+                          subsection={val}
+                          fieldName='useCommas'
+                          label='Add Commas to Numbers'
+                          updateField={updateField}
+                          onChange={event => {
+                            editColumn(val, 'useCommas', event.target.checked)
+                          }}
+                        />
+                        <CheckBox
+                          value={config.columns[val].dataTable}
+                          section='columns'
+                          subsection={val}
+                          fieldName='dataTable'
+                          label='Show in Data Table'
+                          updateField={updateField}
+                          onChange={event => {
+                            editColumn(val, 'dataTable', event.target.checked)
+                          }}
+                        />
+                        <CheckBox
+                          value={config.columns[val].tooltip}
+                          section='columns'
+                          subsection={val}
+                          fieldName='tooltip'
+                          label='Show in Tooltips'
+                          updateField={updateField}
+                          onChange={event => {
+                            editColumn(val, 'tooltip', event.target.checked)
+                          }}
+                        />
                       </ul>
                     </fieldset>
                   ))}
@@ -2083,7 +2169,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         messages = []
                       }
 
-                      const _newConfig = _.cloneDeep(config)
+                      const _newConfig = cloneConfig(config)
                       _newConfig.legend.type = event.target.value
                       _newConfig.runtime.editorErrorMessage = messages
                       setConfig(_newConfig)
@@ -2091,18 +2177,14 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                   />
                 )}
                 {'navigation' !== config.general.type && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={config.general.showSidebar || false}
-                      onChange={event => {
-                        const _newConfig = _.cloneDeep(config)
-                        _newConfig.general.showSidebar = event.target.checked
-                        setConfig(_newConfig)
-                      }}
-                    />
-                    <span className='edit-label'>Show Legend</span>
-                  </label>
+                  <CheckBox
+                    value={config.general.showSidebar || false}
+                    section='general'
+                    subsection={null}
+                    fieldName='showSidebar'
+                    label='Show Legend'
+                    updateField={updateField}
+                  />
                 )}
                 {'navigation' !== config.general.type && (
                   <>
@@ -2159,18 +2241,14 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                   />
                 )}
                 {'navigation' !== config.general.type && config.legend.style === 'gradient' && (
-                  <label>
-                    <span className='edit-label'>Gradient Style</span>
-                    <select
-                      value={legend.subStyle || ''}
-                      onChange={event => {
-                        handleEditorChanges('legendSubStyle', event.target.value)
-                      }}
-                    >
-                      <option value='linear blocks'>linear blocks</option>
-                      <option value='smooth'>smooth</option>
-                    </select>
-                  </label>
+                  <Select
+                    label='Gradient Style'
+                    value={legend.subStyle || ''}
+                    options={['linear blocks', 'smooth']}
+                    onChange={event => {
+                      handleEditorChanges('legendSubStyle', event.target.value)
+                    }}
+                  />
                 )}
                 {allowLegendSeparators && (
                   <TextField
@@ -2208,61 +2286,66 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                   </label>
                 )}
                 {
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={legend.hideBorder}
-                      onChange={event => {
-                        handleEditorChanges('legendBorder', event.target.checked)
-                      }}
-                    />
-                    <span className='edit-label column-heading'>Hide Legend Box</span>
-                    <Tooltip style={{ textTransform: 'none' }}>
-                      <Tooltip.Target>
-                        <Icon
-                          display='question'
-                          style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
-                        />
-                      </Tooltip.Target>
-                      <Tooltip.Content>
-                        <p> Default option for top and bottom legends is ‘No Box.’</p>
-                      </Tooltip.Content>
-                    </Tooltip>
-                  </label>
+                  <CheckBox
+                    value={legend.hideBorder}
+                    section='legend'
+                    subsection={null}
+                    fieldName='hideBorder'
+                    label='Hide Legend Box'
+                    updateField={updateField}
+                    onChange={event => {
+                      handleEditorChanges('legendBorder', event.target.checked)
+                    }}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display='question'
+                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p> Default option for top and bottom legends is 'No Box.'</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
                 }
                 {'side' === legend.position && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={legend.singleColumn}
-                      onChange={event => {
-                        const _newConfig = _.cloneDeep(config)
-                        _newConfig.legend.singleColumn = event.target.checked
-                        _newConfig.legend.singleRow = false
-                        _newConfig.legend.verticalSorted = false
+                  <CheckBox
+                    value={legend.singleColumn}
+                    section='legend'
+                    subsection={null}
+                    fieldName='singleColumn'
+                    label='Single Column Legend'
+                    updateField={updateField}
+                    onChange={event => {
+                      const _newConfig = cloneConfig(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>
-                  </label>
+                      setConfig(_newConfig)
+                    }}
+                  />
                 )}
                 {'side' !== legend.position && legend.style !== 'gradient' && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={legend.singleRow}
-                      onChange={event => {
-                        const _newConfig = _.cloneDeep(config)
-                        _newConfig.legend.singleRow = event.target.checked
-                        _newConfig.legend.singleColumn = false
-                        _newConfig.legend.verticalSorted = false
+                  <CheckBox
+                    value={legend.singleRow}
+                    section='legend'
+                    subsection={null}
+                    fieldName='singleRow'
+                    label='Single Row Legend'
+                    updateField={updateField}
+                    onChange={event => {
+                      const _newConfig = cloneConfig(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>
+                      setConfig(_newConfig)
+                    }}
+                  />
                 )}
 
                 {'navigation' !== config.general.type && config.legend.type === 'category' && (
@@ -2271,53 +2354,46 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                     value={legend.groupBy || ''}
                     options={columnsOptions.map(c => c.key)}
                     onChange={event => {
-                      const _newConfig = _.cloneDeep(config)
+                      const _newConfig = cloneConfig(config)
                       _newConfig.legend.groupBy = event.target.value
                       setConfig(_newConfig)
                     }}
                   />
                 )}
                 {config.legend.style !== 'gradient' && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={legend.verticalSorted}
-                      onChange={event => {
-                        const _newConfig = _.cloneDeep(config)
-                        _newConfig.legend.verticalSorted = event.target.checked
-                        setConfig(_newConfig)
-                      }}
-                    />
-                    <span className='edit-label'>Vertical sorted legend</span>
-                  </label>
+                  <CheckBox
+                    value={legend.verticalSorted}
+                    section='legend'
+                    subsection={null}
+                    fieldName='verticalSorted'
+                    label='Vertical sorted legend'
+                    updateField={updateField}
+                  />
                 )}
 
                 {/* always show */}
                 {
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={legend.showSpecialClassesLast}
-                      onChange={event => {
-                        handleEditorChanges('legendShowSpecialClassesLast', event.target.checked)
-                      }}
-                    />
-                    <span className='edit-label'>Show Special Classes Last</span>
-                  </label>
+                  <CheckBox
+                    value={legend.showSpecialClassesLast}
+                    section='legend'
+                    subsection={null}
+                    fieldName='showSpecialClassesLast'
+                    label='Show Special Classes Last'
+                    updateField={updateField}
+                    onChange={event => {
+                      handleEditorChanges('legendShowSpecialClassesLast', event.target.checked)
+                    }}
+                  />
                 }
                 {'category' !== legend.type && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={legend.separateZero || false}
-                      onChange={event => {
-                        const _newConfig = _.cloneDeep(config)
-                        _newConfig.legend.separateZero = event.target.checked
-                        return setConfig(_newConfig)
-                      }}
-                    />
-                    <span className='edit-label column-heading'>
-                      Separate Zero
+                  <CheckBox
+                    value={legend.separateZero || false}
+                    section='legend'
+                    subsection={null}
+                    fieldName='separateZero'
+                    label='Separate Zero'
+                    updateField={updateField}
+                    tooltip={
                       <Tooltip style={{ textTransform: 'none' }}>
                         <Tooltip.Target>
                           <Icon
@@ -2329,35 +2405,33 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                           <p>For numeric data, you can separate the zero value as its own data class.</p>
                         </Tooltip.Content>
                       </Tooltip>
-                    </span>
-                  </label>
+                    }
+                  />
                 )}
 
                 {/* Temp Checkbox */}
                 {config.legend.type === 'equalnumber' && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={config.general.equalNumberOptIn}
-                      onChange={event => {
-                        const _newConfig = _.clone(config)
-                        _newConfig.general.equalNumberOptIn = event.target.checked
-                        setConfig(_newConfig)
-                      }}
-                    />
-                    <span className='edit-label column-heading'>Use new quantile legend</span>
-                    <Tooltip style={{ textTransform: 'none' }}>
-                      <Tooltip.Target>
-                        <Icon
-                          display='question'
-                          style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
-                        />
-                      </Tooltip.Target>
-                      <Tooltip.Content>
-                        <p>This prevents numbers from being used in more than one category (ie. 0-1, 1-2, 2-3) </p>
-                      </Tooltip.Content>
-                    </Tooltip>
-                  </label>
+                  <CheckBox
+                    value={config.general.equalNumberOptIn}
+                    section='general'
+                    subsection={null}
+                    fieldName='equalNumberOptIn'
+                    label='Use new quantile legend'
+                    updateField={updateField}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display='question'
+                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>This prevents numbers from being used in more than one category (ie. 0-1, 1-2, 2-3) </p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
                 )}
 
                 {'category' !== legend.type && (
@@ -2470,59 +2544,59 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                   </React.Fragment>
                 )}
                 {config.filters.length > 0 && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={legend.dynamicDescription}
+                  <label className='checkbox column-heading'>
+                    <CheckBox
+                      value={legend.dynamicDescription}
+                      section='legend'
+                      subsection={null}
+                      fieldName='dynamicDescription'
+                      label='Dynamic Legend Description'
+                      updateField={updateField}
                       onChange={() => {
                         handleEditorChanges('dynamicDescription', filterValueOptionList[0])
                       }}
                     />
-                    <span className='edit-label column-heading'>
-                      Dynamic Legend Description
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon
-                            display='question'
-                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
-                          />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>
-                            Check this option if the map has multiple filter controls and you want to specify a
-                            description for each filter selection.
-                          </p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    </span>
-                  </label>
-                )}
-                {(config.filters.length > 0 || config.general.type === 'bubble' || config.general.geoType === 'us') && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={legend.unified}
-                      onChange={event => handleEditorChanges('unifiedLegend', event.target.checked)}
-                    />
-                    <span className='edit-label column-heading'>
-                      Unified Legend
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon
-                            display='question'
-                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
-                          />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>
-                            For a map with filters, check this option if you want the high and low values in the legend
-                            to be based on <em>all</em> mapped values.
-                          </p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    </span>
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon
+                          display='question'
+                          style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                        />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>
+                          Check this option if the map has multiple filter controls and you want to specify a
+                          description for each filter selection.
+                        </p>
+                      </Tooltip.Content>
+                    </Tooltip>
                   </label>
                 )}
+                <span className='d-flex mt-2'>
+                  <CheckBox
+                    value={legend.unified}
+                    section='legend'
+                    subsection={null}
+                    fieldName='unified'
+                    label='Unified Legend'
+                    updateField={updateField}
+                    onChange={event => handleEditorChanges('unifiedLegend', event.target.checked)}
+                  />
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon
+                        display='question'
+                        style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                      />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>
+                        Check this option if you want the high and low values in the legend to be based on <em>all</em>{' '}
+                        mapped values (useful for maps with filters or small multiples).
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                </span>
               </AccordionItemPanel>
             </AccordionItem>
           )}
@@ -2579,32 +2653,26 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                     </Tooltip>
                   }
                 />
-                <label className='checkbox'>
-                  <input
-                    type='checkbox'
-                    checked={config.table.wrapColumns}
-                    onChange={event => {
-                      setConfig({
-                        ...config,
-                        table: {
-                          ...config.table,
-                          wrapColumns: event.target.checked
-                        }
-                      })
-                    }}
-                  />
-                  <span className='edit-label column-heading'>WRAP DATA TABLE COLUMNS</span>
-                </label>
-                <label className='checkbox'>
-                  <input
-                    type='checkbox'
-                    checked={config.table.forceDisplay !== undefined ? config.table.forceDisplay : !isDashboard}
-                    onChange={event => {
-                      handleEditorChanges('showDataTable', event.target.checked)
-                    }}
-                  />
-                  <span className='edit-label column-heading'>
-                    Show Data Table
+                <CheckBox
+                  value={config.table.wrapColumns}
+                  section='table'
+                  subsection={null}
+                  fieldName='wrapColumns'
+                  label='WRAP DATA TABLE COLUMNS'
+                  updateField={updateField}
+                  className='column-heading'
+                />
+                <CheckBox
+                  value={config.table.forceDisplay !== undefined ? config.table.forceDisplay : !isDashboard}
+                  section='table'
+                  subsection={null}
+                  fieldName='forceDisplay'
+                  label='Show Data Table'
+                  updateField={updateField}
+                  onChange={event => {
+                    handleEditorChanges('showDataTable', event.target.checked)
+                  }}
+                  tooltip={
                     <Tooltip style={{ textTransform: 'none' }}>
                       <Tooltip.Target>
                         <Icon
@@ -2619,24 +2687,17 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         </p>
                       </Tooltip.Content>
                     </Tooltip>
-                  </span>
-                </label>
-                <label className='checkbox'>
-                  <input
-                    type='checkbox'
-                    checked={config.table.showNonGeoData}
-                    onChange={event => {
-                      setConfig({
-                        ...config,
-                        table: {
-                          ...config.table,
-                          showNonGeoData: event.target.checked
-                        }
-                      })
-                    }}
-                  />
-                  <span className='edit-label column-heading'>
-                    Show Non Geographic Data
+                  }
+                />
+
+                <CheckBox
+                  value={config.table.showNonGeoData}
+                  section='table'
+                  subsection={null}
+                  fieldName='showNonGeoData'
+                  label='Show Non Geographic Data'
+                  updateField={updateField}
+                  tooltip={
                     <Tooltip style={{ textTransform: 'none' }}>
                       <Tooltip.Target>
                         <Icon
@@ -2648,8 +2709,9 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         <p>Show any data not associated with a geographic location</p>
                       </Tooltip.Content>
                     </Tooltip>
-                  </span>
-                </label>
+                  }
+                />
+
                 <TextField
                   value={table.indexLabel || ''}
                   updateField={updateField}
@@ -2690,16 +2752,17 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                   }
                   type='textarea'
                 />
-                <label className='checkbox'>
-                  <input
-                    type='checkbox'
-                    checked={config.table.limitHeight}
-                    onChange={event => {
-                      handleEditorChanges('limitDataTableHeight', event.target.checked)
-                    }}
-                  />
-                  <span className='edit-label'>Limit Table Height</span>
-                </label>
+                <CheckBox
+                  value={config.table.limitHeight}
+                  section='table'
+                  subsection={null}
+                  fieldName='limitHeight'
+                  label='Limit Table Height'
+                  updateField={updateField}
+                  onChange={event => {
+                    handleEditorChanges('limitDataTableHeight', event.target.checked)
+                  }}
+                />
                 {config.table.limitHeight && (
                   <TextField
                     value={table.height}
@@ -2725,16 +2788,17 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                   max='500'
                 />
 
-                <label className='checkbox'>
-                  <input
-                    type='checkbox'
-                    checked={config.table.expanded || false}
-                    onChange={event => {
-                      handleEditorChanges('expandDataTable', event.target.checked)
-                    }}
-                  />
-                  <span className='edit-label'>Map loads with data table expanded</span>
-                </label>
+                <CheckBox
+                  value={config.table.expanded || false}
+                  section='table'
+                  subsection={null}
+                  fieldName='expanded'
+                  label='Map loads with data table expanded'
+                  updateField={updateField}
+                  onChange={event => {
+                    handleEditorChanges('expandDataTable', event.target.checked)
+                  }}
+                />
                 <CheckBox
                   value={config.table.download}
                   fieldName='download'
@@ -2744,17 +2808,18 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                 />
                 {config.table.download && (
                   <>
-                    <label className='checkbox'>
-                      <input
-                        type='checkbox'
-                        className='ms-4'
-                        checked={config.table.showDownloadLinkBelow}
-                        onChange={event => {
-                          handleEditorChanges('toggleDownloadLinkBelow', event.target.checked)
-                        }}
-                      />
-                      <span className='edit-label'>Show Link Below Table</span>
-                    </label>
+                    <CheckBox
+                      value={config.table.showDownloadLinkBelow}
+                      section='table'
+                      subsection={null}
+                      fieldName='showDownloadLinkBelow'
+                      label='Show Link Below Table'
+                      updateField={updateField}
+                      className='ms-4'
+                      onChange={event => {
+                        handleEditorChanges('toggleDownloadLinkBelow', event.target.checked)
+                      }}
+                    />
                     <CheckBox
                       value={config.table.downloadVisibleDataOnly}
                       fieldName='downloadVisibleDataOnly'
@@ -2766,53 +2831,47 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                   </>
                 )}
                 {isDashboard && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={config.table.showDataTableLink}
-                      onChange={event => {
-                        const _newConfig = _.cloneDeep(config)
-                        _newConfig.table.showDataTableLink = event.target.checked
-                        setConfig(_newConfig)
-                      }}
-                    />
-                    <span className='edit-label'>Show Data Table Name & Link</span>
-                  </label>
+                  <CheckBox
+                    value={config.table.showDataTableLink}
+                    section='table'
+                    subsection={null}
+                    fieldName='showDataTableLink'
+                    label='Show Data Table Name & Link'
+                    updateField={updateField}
+                  />
                 )}
                 {isLoadedFromUrl && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={config.table.showDownloadUrl}
-                      onChange={event => {
-                        const _newConfig = _.cloneDeep(config)
-                        _newConfig.table.showDownloadUrl = event.target.checked
-                        setConfig(_newConfig)
-                      }}
-                    />
-                    <span className='edit-label'>Show URL to Automatically Updated Data</span>
-                  </label>
-                )}
-                <label className='checkbox'>
-                  <input
-                    type='checkbox'
-                    checked={config.table.showFullGeoNameInCSV}
-                    onChange={event => {
-                      handleEditorChanges('toggleShowFullGeoNameInCSV', event.target.checked)
-                    }}
-                  />
-                  <span className='edit-label'>Include Full Geo Name in CSV Download</span>
-                </label>
-                <label className='checkbox'>
-                  <input
-                    type='checkbox'
-                    checked={config.general.showDownloadImgButton}
-                    onChange={event => {
-                      handleEditorChanges('toggleDownloadImgButton', event.target.checked)
-                    }}
+                  <CheckBox
+                    value={config.table.showDownloadUrl}
+                    section='table'
+                    subsection={null}
+                    fieldName='showDownloadUrl'
+                    label='Show URL to Automatically Updated Data'
+                    updateField={updateField}
                   />
-                  <span className='edit-label'>Enable Image Download</span>
-                </label>
+                )}
+                <CheckBox
+                  value={config.table.showFullGeoNameInCSV}
+                  section='table'
+                  subsection={null}
+                  fieldName='showFullGeoNameInCSV'
+                  label='Include Full Geo Name in CSV Download'
+                  updateField={updateField}
+                  onChange={event => {
+                    handleEditorChanges('toggleShowFullGeoNameInCSV', event.target.checked)
+                  }}
+                />
+                <CheckBox
+                  value={config.general.showDownloadImgButton}
+                  section='general'
+                  subsection={null}
+                  fieldName='showDownloadImgButton'
+                  label='Enable Image Download'
+                  updateField={updateField}
+                  onChange={event => {
+                    handleEditorChanges('toggleDownloadImgButton', event.target.checked)
+                  }}
+                />
 
                 {/* <label className='checkbox'>
                       <input
@@ -2877,47 +2936,32 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
               <AccordionItemButton>Visual</AccordionItemButton>
             </AccordionItemHeading>
             <AccordionItemPanel>
-              <label>
-                <span className='edit-label'>Header Theme</span>
-                <ul className='color-palette'>
-                  {HEADER_COLORS.map(palette => {
-                    return (
-                      <li
-                        title={palette}
-                        key={palette}
-                        onClick={() => {
-                          handleEditorChanges('headerColor', palette)
-                        }}
-                        className={config.general.headerColor === palette ? 'selected ' + palette : palette}
-                      ></li>
-                    )
-                  })}
-                </ul>
-              </label>
-              <label className='checkbox'>
-                <input
-                  type='checkbox'
-                  checked={config.general.showTitle || false}
-                  onChange={event => {
-                    handleEditorChanges('showTitle', event.target.checked)
-                  }}
-                />
-                <span className='edit-label'>Show Title</span>
-              </label>
+              <HeaderThemeSelector
+                selectedTheme={config.general.headerColor}
+                onThemeSelect={palette => handleEditorChanges('headerColor', palette)}
+                label='Header Theme'
+              />
+              <CheckBox
+                value={config.general.showTitle || false}
+                section='general'
+                subsection={null}
+                fieldName='showTitle'
+                label='Show Title'
+                updateField={updateField}
+                onChange={event => {
+                  handleEditorChanges('showTitle', event.target.checked)
+                }}
+              />
 
               {'navigation' === config.general.type && (
-                <label className='checkbox'>
-                  <input
-                    type='checkbox'
-                    checked={config.general.fullBorder || false}
-                    onChange={event => {
-                      const _newConfig = _.cloneDeep(config)
-                      _newConfig.general.fullBorder = event.target.checked
-                      setConfig(_newConfig)
-                    }}
-                  />
-                  <span className='edit-label'>Add border around map</span>
-                </label>
+                <CheckBox
+                  value={config.general.fullBorder || false}
+                  section='general'
+                  subsection={null}
+                  fieldName='fullBorder'
+                  label='Add border around map'
+                  updateField={updateField}
+                />
               )}
               <Select
                 label='Geo Border Color'
@@ -2933,6 +2977,15 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
               <label>
                 <span className='edit-label'>Map Color Palette</span>
               </label>
+              <div className='mb-2'>
+                <small className='text-muted'>
+                  Review color contrasts{' '}
+                  <a href='https://webaim.org/resources/contrastchecker/' target='_blank' rel='noopener noreferrer'>
+                    here
+                  </a>
+                </small>
+              </div>
+              <DeveloperPaletteRollback config={config} updateConfig={setConfig} />
               <InputToggle
                 type='3d'
                 section='general'
@@ -2941,127 +2994,136 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                 size='small'
                 label='Use selected palette in reverse order'
                 onClick={() => {
-                  const _state = _.cloneDeep(config)
+                  const _state = cloneConfig(config)
+                  const currentPaletteName = config.general.palette?.name || ''
                   _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 && !currentPaletteName.endsWith('reverse')) {
+                    paletteName = currentPaletteName + 'reverse'
                   }
-                  if (!_state.general.palette.isReversed && config.color.endsWith('reverse')) {
-                    paletteName = config.color.slice(0, -7)
+                  if (!_state.general.palette.isReversed && currentPaletteName.endsWith('reverse')) {
+                    paletteName = currentPaletteName.slice(0, -7)
                   }
                   if (paletteName) {
-                    _state.color = paletteName
+                    _state.general.palette.name = paletteName
                   }
                   setConfig(_state)
                 }}
                 value={config.general.palette.isReversed}
               />
               <span>Sequential</span>
-              <ul className='color-palette'>
-                {sequential.map(palette => {
-                  const colorOne = {
-                    backgroundColor: colorPalettes[palette][2]
-                  }
-
-                  const colorTwo = {
-                    backgroundColor: colorPalettes[palette][4]
-                  }
-
-                  const colorThree = {
-                    backgroundColor: colorPalettes[palette][6]
-                  }
-
-                  return (
-                    <li
-                      title={palette}
-                      key={palette}
-                      onClick={() => {
-                        const _newConfig = _.cloneDeep(config)
-                        _newConfig.color = palette
-                        setConfig(_newConfig)
-                      }}
-                      className={config.color === palette ? 'selected' : ''}
-                    >
-                      <span style={colorOne}></span>
-                      <span style={colorTwo}></span>
-                      <span style={colorThree}></span>
-                    </li>
-                  )
-                })}
-              </ul>
+              <PaletteSelector
+                palettes={sequential}
+                colorPalettes={colorPalettes}
+                config={config}
+                onPaletteSelect={handlePaletteSelection}
+                selectedPalette={getCurrentPaletteName(config)}
+                colorIndices={[2, 3, 5]}
+                className='color-palette'
+                element='button'
+                getItemClassName={getPaletteClassName}
+              />
               <span>Non-Sequential</span>
-              <ul className='color-palette'>
-                {nonSequential.map(palette => {
-                  const colorOne = {
-                    backgroundColor: colorPalettes[palette][2]
-                  }
-
-                  const colorTwo = {
-                    backgroundColor: colorPalettes[palette][4]
+              <PaletteSelector
+                palettes={nonSequential}
+                colorPalettes={colorPalettes}
+                config={config}
+                onPaletteSelect={handlePaletteSelection}
+                selectedPalette={getCurrentPaletteName(config)}
+                colorIndices={[2, 3, 5]}
+                className='color-palette'
+                element='button'
+                getItemClassName={getPaletteClassName}
+                minColorsForFilter={(_, paletteAccessor, config) => {
+                  if (paletteAccessor.length <= 8 && config.general.geoType === 'us-region') {
+                    return false
                   }
-
-                  const colorThree = {
-                    backgroundColor: colorPalettes[palette][6]
-                  }
-
-                  // hide palettes with too few colors for region maps
-                  if (colorPalettes[palette].length <= 8 && config.general.geoType === 'us-region') {
-                    return ''
-                  }
-                  return (
-                    <li
-                      title={palette}
-                      key={palette}
-                      onClick={() => {
-                        const _newConfig = _.cloneDeep(config)
-                        _newConfig.color = palette
-                        setConfig(_newConfig)
-                      }}
-                      className={config.color === palette ? 'selected' : ''}
-                    >
-                      <span style={colorOne}></span>
-                      <span style={colorTwo}></span>
-                      <span style={colorThree}></span>
-                    </li>
-                  )
-                })}
-              </ul>
+                  return true
+                }}
+              />
               <span>Colorblind Safe</span>
-              <ul className='color-palette'>
-                {accessibleColors.map(palette => {
-                  const colorOne = {
-                    backgroundColor: colorPalettes[palette][2]
-                  }
-
-                  const colorTwo = {
-                    backgroundColor: colorPalettes[palette][4]
+              <PaletteSelector
+                palettes={accessibleColors}
+                colorPalettes={colorPalettes}
+                config={config}
+                onPaletteSelect={handlePaletteSelection}
+                selectedPalette={getCurrentPaletteName(config)}
+                colorIndices={[2, 3, 5]}
+                className='color-palette'
+                element='button'
+                getItemClassName={getPaletteClassName}
+                minColorsForFilter={(_, paletteAccessor, config) => {
+                  if (paletteAccessor.length <= 8 && config.general.geoType === 'us-region') {
+                    return false
                   }
+                  return true
+                }}
+              />
 
-                  const colorThree = {
-                    backgroundColor: colorPalettes[palette][6]
-                  }
+              {isCoveDeveloperMode() && (
+                <>
+                  <div className='mt-3'>
+                    <label className='checkbox'>
+                      <input
+                        type='checkbox'
+                        checked={!!config.general.palette.customColorsOrdered}
+                        onChange={e => {
+                          const _state = cloneConfig(config)
+                          if (e.target.checked) {
+                            // Extract actual colors from runtime legend if available
+                            if (runtimeLegend?.items && runtimeLegend.items.length > 0) {
+                              const extractedColors = []
+                              for (const item of runtimeLegend.items) {
+                                // Skip special classes (like "No Data")
+                                if (item.special) continue
+                                // Add the color if it exists and hasn't been added yet
+                                if (item.color && !extractedColors.includes(item.color)) {
+                                  extractedColors.push(item.color)
+                                }
+                              }
+                              _state.general.palette.customColorsOrdered =
+                                extractedColors.length > 0
+                                  ? extractedColors
+                                  : ['#3366cc', '#5588dd', '#77aaee', '#99ccff']
+                            } else {
+                              // Fallback to default colors if runtime legend not available
+                              _state.general.palette.customColorsOrdered = ['#3366cc', '#5588dd', '#77aaee', '#99ccff']
+                            }
+                          } else {
+                            // Remove custom colors and revert to default palette
+                            delete _state.general.palette.customColorsOrdered
+                            delete _state.general.palette.customColors
+                            // Set default palette if none exists
+                            if (!_state.general.palette.name) {
+                              _state.general.palette.name = 'sequential_blue_green'
+                              _state.general.palette.version = '2.0'
+                            }
+                          }
+                          setConfig(_state)
+                        }}
+                      />
+                      Use Custom Colors
+                    </label>
+                  </div>
+
+                  {config.general.palette.customColorsOrdered && (
+                    <div className='mt-2'>
+                      <CustomColorsEditor
+                        colors={config.general.palette.customColorsOrdered}
+                        onChange={newColors => {
+                          const _state = cloneConfig(config)
+                          _state.general.palette.customColorsOrdered = newColors
+                          setConfig(_state)
+                        }}
+                        label='Custom Color Order'
+                        minColors={1}
+                        maxColors={20}
+                      />
+                    </div>
+                  )}
+                </>
+              )}
 
-                  // hide palettes with too few colors for region maps
-                  if (colorPalettes[palette].length <= 8 && config.general.geoType === 'us-region') {
-                    return ''
-                  }
-                  return (
-                    <li
-                      title={palette}
-                      key={palette}
-                      onClick={() => {
-                        handleEditorChanges('color', palette)
-                      }}
-                      className={config.color === palette ? 'selected' : ''}
-                    >
-                      <span style={colorOne}></span>
-                      <span style={colorTwo}></span>
-                      <span style={colorThree}></span>
-                    </li>
-                  )
-                })}
-              </ul>
               <label>
                 Geocode Settings
                 <TextField
@@ -3116,7 +3178,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                     type='checkbox'
                     checked={config.general.allowMapZoom}
                     onChange={event => {
-                      const _newConfig = _.cloneDeep(config)
+                      const _newConfig = cloneConfig(config)
                       _newConfig.general.allowMapZoom = event.target.checked
                       _newConfig.mapPosition.coordinates = config.general.geoType === 'world' ? [0, 30] : [0, 0]
                       _newConfig.mapPosition.zoom = 1
@@ -3132,7 +3194,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                     type='checkbox'
                     checked={config.visual.extraBubbleBorder}
                     onChange={event => {
-                      const _newConfig = _.cloneDeep(config)
+                      const _newConfig = cloneConfig(config)
                       _newConfig.visual.extraBubbleBorder = event.target.checked
                       setConfig(_newConfig)
                     }}
@@ -3144,22 +3206,21 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                 config.general.geoType === 'us-county' ||
                 config.general.geoType === 'world') && (
                 <>
-                  <label>
-                    <span className='edit-label'>Default City Style</span>
-                    <select
-                      value={config.visual.cityStyle || false}
-                      onChange={event => {
-                        handleEditorChanges('handleCityStyle', event.target.value)
-                      }}
-                    >
-                      <option value='circle'>Circle</option>
-                      <option value='pin'>Pin</option>
-                      <option value='square'>Square</option>
-                      <option value='triangle'>Triangle</option>
-                      <option value='diamond'>Diamond</option>
-                      <option value='star'>Star</option>
-                    </select>
-                  </label>
+                  <Select
+                    label='Default City Style'
+                    value={config.visual.cityStyle || 'circle'}
+                    options={[
+                      { value: 'circle', label: 'Circle' },
+                      { value: 'pin', label: 'Pin' },
+                      { value: 'square', label: 'Square' },
+                      { value: 'triangle', label: 'Triangle' },
+                      { value: 'diamond', label: 'Diamond' },
+                      { value: 'star', label: 'Star' }
+                    ]}
+                    onChange={event => {
+                      handleEditorChanges('handleCityStyle', event.target.value)
+                    }}
+                  />
                   <TextField
                     value={config.visual.cityStyleLabel}
                     section='visual'
@@ -3195,17 +3256,14 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                           Remove
                         </button>
                         <p>City Style {i + 1}</p>
-                        <label>
-                          <span className='edit-label column-heading'>Column with configuration value</span>
-                          <select
-                            value={column}
-                            onChange={e => {
-                              editCityStyles('update', i, 'column', e.target.value)
-                            }}
-                          >
-                            {columnsOptions}
-                          </select>
-                        </label>
+                        <Select
+                          label='Column with configuration value'
+                          value={column}
+                          options={columnsOptions.map(c => c.key)}
+                          onChange={e => {
+                            editCityStyles('update', i, 'column', e.target.value)
+                          }}
+                        />
                         <label>
                           <span className='edit-label column-heading'>Value to Trigger</span>
                           <input
@@ -3216,17 +3274,19 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                             }}
                           ></input>
                         </label>
-                        <label>
-                          <span className='edit-label column-heading'>Shape</span>
-                          <select
-                            value={shape}
-                            onChange={e => {
-                              editCityStyles('update', i, 'shape', e.target.value)
-                            }}
-                          >
-                            {getCityStyleOptions('value')}
-                          </select>
-                        </label>
+                        <Select
+                          label='Shape'
+                          value={shape}
+                          options={[
+                            { value: '', label: '- Select Option -' },
+                            ...['Circle', 'Square', 'Triangle', 'Diamond', 'Star', 'Pin']
+                              .filter(val => String(config.visual.cityStyle).toLowerCase() !== val.toLowerCase())
+                              .map(val => ({ value: val, label: val }))
+                          ]}
+                          onChange={e => {
+                            editCityStyles('update', i, 'shape', e.target.value)
+                          }}
+                        />
                         <label>
                           <span className='edit-label column-heading'>Label</span>
                           <input
@@ -3371,9 +3431,27 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
           </AccordionItem>
           {config.general.geoType === 'us' && <Panels.PatternSettings name='Pattern Settings' />}
           {config.general.geoType !== 'us-county' && <Panels.Annotate name='Text Annotations' />}
+          <PanelMarkup
+            name='Markup Variables'
+            markupVariables={config.markupVariables || []}
+            data={config.data || []}
+            enableMarkupVariables={config.enableMarkupVariables || false}
+            onMarkupVariablesChange={variables => setConfig({ ...config, markupVariables: variables })}
+            onToggleEnable={enabled => setConfig({ ...config, enableMarkupVariables: enabled })}
+          />
+          <Panels.SmallMultiples name='Small Multiples' />
         </Accordion>
         <AdvancedEditor loadConfig={setConfig} config={config} convertStateToConfig={convertStateToConfig} />
       </Layout.Sidebar>
+
+      {showConversionModal && (
+        <PaletteConversionModal
+          onConfirm={handleConversionConfirm}
+          onCancel={handleConversionCancel}
+          onReturnToV1={handleReturnToV1}
+          paletteName={pendingPaletteSelection?.palette}
+        />
+      )}
     </ErrorBoundary>
   )
 }