@cdc/map 4.26.2 → 4.26.4

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

@@ -12,22 +12,24 @@ import {
 } from 'react-accessible-accordion'
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'
 import { useDebounce } from 'use-debounce'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import includes from 'lodash/includes'
 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 { mapColorPalettes as colorPalettes } from '@cdc/core/data/colorPalettes'
 import { supportedStatesFipsCodes, supportedCountries } from '../../../data/supported-geos.js'
 import { getSupportedCountryOptions } from '../../../helpers/getCountriesPicked'
+import { displayGeoName } from '../../../helpers/displayGeoName'
 
 // Components - Core
 import { EditorPanel as BaseEditorPanel } from '@cdc/core/components/EditorPanel/EditorPanel'
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Icon from '@cdc/core/components/ui/Icon'
+import GroupedList from '@cdc/core/components/EditorPanel/GroupedList'
 import InputToggle from '@cdc/core/components/inputs/InputToggle'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
@@ -49,19 +51,27 @@ 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 DownloadUrlControls from '@cdc/core/components/EditorPanel/DownloadUrlControls'
+import Button from '@cdc/core/components/elements/Button'
+import StyleTreatmentSection from '@cdc/core/components/EditorPanel/sections/StyleTreatmentSection'
 import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
 import useColumnsRequiredChecker from '../../../hooks/useColumnsRequiredChecker'
 import { addUIDs } from '../../../helpers'
 import generateRuntimeData from '../../../helpers/generateRuntimeData'
 
-import '@cdc/core/styles/v2/components/editor.scss'
+import '@cdc/core/components/EditorPanel/editor.scss'
 import './editorPanel.styles.css'
 import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
+import CustomSortOrder from '@cdc/core/components/EditorPanel/CustomSortOrder'
 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 {
+  ENABLE_CHART_MAP_TP5_TREATMENT_SELECTION,
+  ENABLE_MAP_DATA_BITE_VISUAL_SETTINGS,
+  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'
@@ -71,6 +81,39 @@ type MapEditorPanelProps = {
   datasets?: Datasets
 }
 
+type ColumnSectionProps = {
+  fieldKey: 'geo' | 'primary'
+  fieldName: string
+  show: boolean
+  setShow: (fieldKey: 'geo' | 'primary', value: boolean) => void
+  children: React.ReactNode
+}
+
+const ColumnSection = ({ fieldKey, fieldName, show, setShow, children }: ColumnSectionProps) => {
+  if (!show) {
+    return (
+      <div className='mb-1'>
+        <button type='button' className='btn btn-light' onClick={() => setShow(fieldKey, true)}>
+          <Icon display='caretDown' />
+        </button>
+        <span> {fieldName}</span>
+      </div>
+    )
+  }
+
+  return (
+    <fieldset className='primary-fieldset edit-block column-section' key={fieldKey}>
+      <div className='column-section__header'>
+        <button type='button' className='btn btn-light' onClick={() => setShow(fieldKey, false)}>
+          <Icon display='caretUp' />
+        </button>
+        <span className='column-section__title'>{fieldName}</span>
+      </div>
+      {children}
+    </fieldset>
+  )
+}
+
 const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
   const {
     setParentConfig,
@@ -114,11 +157,16 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
   const [loadedDefault, setLoadedDefault] = useState(false)
   const [activeFilterValueForDescription, setActiveFilterValueForDescription] = useState([0, 0])
   const [showConversionModal, setShowConversionModal] = useState(false)
+  const [columnSectionsOpen, setColumnSectionsOpen] = useState({ geo: true, primary: true })
   const [pendingPaletteSelection, setPendingPaletteSelection] = useState<{
     palette: string
     action: () => void
   } | null>(null)
 
+  const setColumnSectionOpen = (fieldKey: 'geo' | 'primary', value: boolean) => {
+    setColumnSectionsOpen(prev => ({ ...prev, [fieldKey]: value }))
+  }
+
   const {
     MapLayerHandlers: { handleMapLayer, handleAddLayer, handleRemoveLayer }
   } = useMapLayers(config, setConfig, false, tooltipId)
@@ -296,7 +344,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
           legend: {
             ...config.legend,
             position: value,
-            hideBorder: _.includes(['top', 'bottom'], value)
+            hideBorder: includes(['top', 'bottom'], value)
           }
         })
         break
@@ -518,7 +566,13 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
         break
       case 'geoType':
         addUIDs(config, config.columns.geo.name)
-        dispatch({ type: 'SET_POSITION', payload: [0, 30] })
+        dispatch({
+          type: 'SET_POSITION',
+          payload: {
+            coordinates: value === 'world' ? [0, 30] : [0, 0],
+            zoom: 1
+          }
+        })
 
         // If we're still working with default data, switch to the world default to show it as an example
         if (true === loadedDefault && 'world' === value) {
@@ -866,6 +920,11 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
     }
   }
 
+  const updateColumnOrder = (columnName, value) => {
+    const parsedValue = Number.parseInt(value, 10)
+    editColumn(columnName, 'order', Number.isNaN(parsedValue) ? undefined : parsedValue)
+  }
+
   // just adds a new column but not set to any data yet
   const addAdditionalColumn = number => {
     const columnKey = `additionalColumn${number}`
@@ -931,7 +990,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
     }
 
     // Remove the legend
-    let strippedLegend = _.cloneDeep(config.legend)
+    let strippedLegend = cloneDeep(config.legend)
 
     delete strippedLegend.disabledAmt
 
@@ -941,7 +1000,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
     delete strippedState.defaultData
 
     // Remove tooltips if they're active in the editor
-    strippedState.general = _.cloneDeep(config.general)
+    strippedState.general = cloneDeep(config.general)
 
     // Add columns property back to data if it's there
     if (config.columns) {
@@ -963,7 +1022,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
     const isV1PaletteConfig = isV1Palette(config)
 
     const executeSelection = () => {
-      const _newConfig = _.cloneDeep(config)
+      const _newConfig = cloneDeep(config)
 
       // If v2 migration is disabled, use the original palette name and keep v1 version
       if (!USE_V2_MIGRATION) {
@@ -1062,6 +1121,44 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
 
   const updateField = updateFieldFactory(config, setConfig)
 
+  const handleStyleTreatmentChange = (value: string) => {
+    const useTp5Treatment = value === 'tp5'
+
+    setConfig({
+      ...config,
+      general: {
+        ...config.general,
+        titleStyle: useTp5Treatment ? 'small' : 'legacy'
+      },
+      visual: {
+        ...config.visual,
+        tp5Treatment: useTp5Treatment,
+        border: useTp5Treatment ? false : config.visual?.border,
+        borderColorTheme: useTp5Treatment ? false : config.visual?.borderColorTheme,
+        accent: useTp5Treatment ? false : config.visual?.accent
+      }
+    })
+  }
+
+  const handleTitleStyleChange = (newTitleStyle: string) => {
+    setConfig({
+      ...config,
+      general: {
+        ...config.general,
+        titleStyle: newTitleStyle
+      },
+      visual:
+        newTitleStyle === 'legacy'
+          ? config.visual
+          : {
+              ...config.visual,
+              border: undefined,
+              borderColorTheme: undefined,
+              accent: undefined
+            }
+    })
+  }
+
   const StateOptionList = () => {
     const arrOfArrays = Object.entries(supportedStatesFipsCodes)
 
@@ -1149,7 +1246,11 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
       ))
   }
 
-  const isLoadedFromUrl = config?.dataKey?.includes('http://') || config?.dataKey?.includes('https://')
+  const isLoadedFromUrl =
+    config?.dataFileSourceType === 'url' ||
+    Boolean(config?.runtimeDataUrl || config?.dataUrl || config?.dataFileName) ||
+    config?.dataKey?.includes('http://') ||
+    config?.dataKey?.includes('https://')
 
   // Custom convertStateToConfig for map with map-specific logic
   const customConvertStateToConfig = () => {
@@ -1163,7 +1264,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
     }
 
     // Remove the legend
-    let strippedLegend = _.cloneDeep(config.legend)
+    let strippedLegend = cloneDeep(config.legend)
 
     delete strippedLegend.disabledAmt
 
@@ -1173,7 +1274,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
     delete strippedState.defaultData
 
     // Remove tooltips if they're active in the editor
-    strippedState.general = _.cloneDeep(config.general)
+    strippedState.general = cloneDeep(config.general)
 
     strippedState.general.showSidebar = 'hidden'
 
@@ -1268,6 +1369,41 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         }}
                       />
                     )}
+                    {config.general.geoType === 'us-county' && (
+                      <>
+                        <CheckBox
+                          value={config.general.showNeighboringStates || false}
+                          fieldName='showNeighboringStates'
+                          label="Show Neighboring States' Data"
+                          updateField={updateField}
+                          section='general'
+                        />
+                        <CheckBox
+                          value={config.general.showHSABoundaries || false}
+                          fieldName='showHSABoundaries'
+                          label='Show HSA Boundaries'
+                          updateField={updateField}
+                          section='general'
+                          tooltip={
+                            <Tooltip style={{ textTransform: 'none' }}>
+                              <Tooltip.Target>
+                                <Icon
+                                  display='question'
+                                  style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                                />
+                              </Tooltip.Target>
+                              <Tooltip.Content>
+                                <p>
+                                  Health Service Areas (HSAs) are a county or cluster of contiguous counties which are
+                                  relatively self-contained with respect to hospital care. Set HSA description in
+                                  tooltip under the Columns accordion.
+                                </p>
+                              </Tooltip.Content>
+                            </Tooltip>
+                          }
+                        />
+                      </>
+                    )}
                     {(config.general.geoType === 'us-county' || config.general.geoType === 'single-state') && (
                       <Select
                         label='County Census Year'
@@ -1319,20 +1455,31 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                     {/* Type */}
                     {/* Select > Filter a state */}
                     {config.general.geoType === 'single-state' && (
-                      <label>
-                        <span>States Selector</span>
-                        <MultiSelect
-                          selected={config.general.statesPicked.map(state => state.stateName)}
-                          options={StateOptionList().map(option => ({
-                            value: option.props.value,
-                            label: option.props.children
-                          }))}
-                          fieldName={'statesPicked'}
-                          updateField={(_, __, ___, selectedOptions) => {
-                            handleEditorChanges('chooseState', selectedOptions)
-                          }}
-                        />
-                      </label>
+                      <>
+                        <label>
+                          <span>States Selector</span>
+                          <MultiSelect
+                            selected={config.general.statesPicked.map(state => state.stateName)}
+                            options={StateOptionList().map(option => ({
+                              value: option.props.value,
+                              label: option.props.children
+                            }))}
+                            fieldName={'statesPicked'}
+                            updateField={(_, __, ___, selectedOptions) => {
+                              handleEditorChanges('chooseState', selectedOptions)
+                            }}
+                          />
+                        </label>
+                        {config.general.statesPicked && config.general.statesPicked.length > 0 && (
+                          <CheckBox
+                            value={config.general.hideUnselectedStates !== false}
+                            fieldName='hideUnselectedStates'
+                            label='Hide Unselected States'
+                            updateField={updateField}
+                            section='general'
+                          />
+                        )}
+                      </>
                     )}
                     {/* Country Selection for World Maps */}
                     {config.general.geoType === 'world' && (
@@ -1494,14 +1641,26 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         />
                       )}
 
-                    {'us' === config.general.geoType && (
+                    {['us', 'us-county'].includes(config.general.geoType) && (
                       <CheckBox
-                        value={general.territoriesAlwaysShow || false}
+                        value={general.territoriesAlwaysShow ?? true}
                         section='general'
                         subsection={null}
                         fieldName='territoriesAlwaysShow'
-                        label='Show All Territories'
-                        updateField={updateField}
+                        label='Show Available Territories'
+                        updateField={() => {
+                          setConfig({
+                            ...config,
+                            general: {
+                              ...config.general,
+                              territoriesAlwaysShow: !(general.territoriesAlwaysShow ?? true)
+                            },
+                            migrations: {
+                              ...config.migrations,
+                              showPuertoRico: false
+                            }
+                          })
+                        }}
                       />
                     )}
                   </AccordionItemPanel>
@@ -1541,12 +1700,12 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                       section='general'
                       fieldName='titleStyle'
                       label='Title Style'
-                      updateField={updateField}
                       options={[
                         { value: 'small', label: 'Small (h3)' },
                         { value: 'large', label: 'Large (h2)' },
                         { value: 'legacy', label: 'Legacy' }
                       ]}
+                      onChange={event => handleTitleStyleChange(event.target.value)}
                       tooltip={
                         <Tooltip style={{ textTransform: 'none' }}>
                           <Tooltip.Target>
@@ -1649,6 +1808,29 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                     <input type="checkbox" checked={ state.general.showDownloadMediaButton } onChange={(event) => { handleEditorChanges("toggleDownloadMediaButton", event.target.checked) }} />
                     <span className="edit-label">Enable Media Download</span>
                   </label> */}
+                    <Select
+                      value={config.locale}
+                      fieldName='locale'
+                      label='Language for dates and numbers'
+                      updateField={updateField}
+                      options={[
+                        { value: 'en-US', label: 'English (en-US)' },
+                        { value: 'es-MX', label: 'Spanish (es-MX)' }
+                      ]}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>
+                              Change the language (locale) for this visualization to alter the way dates and numbers are
+                              formatted.
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
                   </AccordionItemPanel>
                 </AccordionItem>
                 <AccordionItem>
@@ -1658,7 +1840,12 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                     <AccordionItemButton>Columns</AccordionItemButton>
                   </AccordionItemHeading>
                   <AccordionItemPanel>
-                    <fieldset className='primary-fieldset edit-block'>
+                    <ColumnSection
+                      fieldKey='geo'
+                      fieldName='Geography'
+                      show={columnSectionsOpen.geo}
+                      setShow={setColumnSectionOpen}
+                    >
                       <label>
                         <span className='edit-label column-heading'>
                           Geography
@@ -1701,6 +1888,24 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         label='Hide Geography Column Name in Tooltip'
                         updateField={updateField}
                       />
+                      <TextField
+                        value={columns.geo.label}
+                        section='columns'
+                        subsection='geo'
+                        fieldName='label'
+                        label='Geography Column Label'
+                        updateField={updateField}
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>Enter a label for the geography column in tooltips and the data table.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                      />
                       <TextField
                         value={config.general.geoLabelOverride}
                         section='general'
@@ -1719,9 +1924,86 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                           </Tooltip>
                         }
                       />
-                    </fieldset>
+                      <label className='mt-2'>
+                        <span className='edit-label column-heading'>
+                          Geography Display Column
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>
+                                Optional. Select a column containing alternate display names for geographies (e.g.,
+                                translated names). These will be shown in tooltips, the data table, and navigation menus
+                                instead of the geography column values.
+                              </p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        </span>
+                        <Select
+                          value={config.columns.geo?.displayColumn || ''}
+                          options={columnsOptions.map(c => c.key)}
+                          onChange={event => {
+                            editColumn('geo', 'displayColumn', event.target.value)
+                          }}
+                        />
+                      </label>
+                      <CheckBox
+                        value={config.columns.geo?.dataTable || false}
+                        section='columns'
+                        subsection='geo'
+                        fieldName='dataTable'
+                        label='Show in Data Table'
+                        updateField={updateField}
+                      />
+                      <CheckBox
+                        value={config.columns.geo?.tooltip || false}
+                        section='columns'
+                        subsection='geo'
+                        fieldName='tooltip'
+                        label='Show in Tooltips'
+                        updateField={updateField}
+                      />
+                      <label className='mt-2'>
+                        <span className='edit-label column-heading'>Order</span>
+                        <input
+                          onWheel={e => e.currentTarget.blur()}
+                          type='number'
+                          min='1'
+                          value={config.columns.geo?.order ?? ''}
+                          onChange={event => {
+                            updateColumnOrder('geo', event.target.value)
+                          }}
+                        />
+                      </label>
+                    </ColumnSection>
+                    {config.general.geoType === 'us-county' && config.general.showHSABoundaries && (
+                      <Select
+                        label='HSA Description Column'
+                        value={config.columns.hsa?.name}
+                        options={columnsOptions.map(c => c.key)}
+                        onChange={e => {
+                          editColumn('hsa', 'name', e.target.value)
+                        }}
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>Select the source column containing the HSA description.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                      />
+                    )}
                     {'navigation' !== config.general.type && (
-                      <fieldset className='primary-fieldset edit-block'>
+                      <ColumnSection
+                        fieldKey='primary'
+                        fieldName='Data'
+                        show={columnSectionsOpen.primary}
+                        setShow={setColumnSectionOpen}
+                      >
                         <Select
                           label='Data Column'
                           value={columns.primary.name}
@@ -1829,8 +2111,20 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                             label='Show in Tooltips'
                             updateField={updateField}
                           />
+                          <label>
+                            <span className='edit-label column-heading'>Order</span>
+                            <input
+                              onWheel={e => e.currentTarget.blur()}
+                              type='number'
+                              min='1'
+                              value={config.columns.primary?.order ?? ''}
+                              onChange={event => {
+                                updateColumnOrder('primary', event.target.value)
+                              }}
+                            />
+                          </label>
                         </ul>
-                      </fieldset>
+                      </ColumnSection>
                     )}
 
                     {config.general.type === 'bubble' && config.legend.type === 'category' && (
@@ -1881,105 +2175,6 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                       </>
                     }
 
-                    {'navigation' !== config.general.type && (
-                      <fieldset className='primary-fieldset edit-block'>
-                        <label>
-                          <span className='edit-label'>
-                            Special Classes
-                            <Tooltip style={{ textTransform: 'none' }}>
-                              <Tooltip.Target>
-                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                              </Tooltip.Target>
-                              <Tooltip.Content>
-                                <p>
-                                  For secondary values such as "NA", the system can automatically color-code them in
-                                  shades of gray, one shade for each special class.
-                                </p>
-                              </Tooltip.Content>
-                            </Tooltip>
-                          </span>
-                        </label>
-                        {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.'
-                            showCloseButton={false}
-                          />
-                        )}
-                        {specialClasses.map((specialClass, i) => (
-                          <div className='edit-block' key={`special-class-${i}`}>
-                            <button
-                              className='remove-column'
-                              onClick={e => {
-                                e.preventDefault()
-                                editColumn('primary', 'specialClassDelete', i)
-                              }}
-                            >
-                              Remove
-                            </button>
-                            <p>Special Class {i + 1}</p>
-                            <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
-                                type='text'
-                                value={specialClass.label}
-                                onChange={e => {
-                                  editColumn('primary', 'specialClassEdit', {
-                                    prop: 'label',
-                                    index: i,
-                                    value: e.target.value
-                                  })
-                                }}
-                              />
-                            </label>
-                          </div>
-                        ))}
-                        {config.legend.specialClasses.length < 2 && (
-                          <button
-                            className='btn btn-primary full-width'
-                            onClick={e => {
-                              e.preventDefault()
-                              editColumn('primary', 'specialClassAdd', {})
-                            }}
-                          >
-                            Add Special Class
-                          </button>
-                        )}
-                      </fieldset>
-                    )}
-
                     <label className='edit-block navigate column-heading'>
                       <span className='edit-label column-heading'>
                         Navigation
@@ -2007,123 +2202,261 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                       <fieldset className='primary-fieldset edit-block'>
                         <label>
                           <span className='edit-label'>
-                            Additional Columns
+                            Special Classes
                             <Tooltip style={{ textTransform: 'none' }}>
                               <Tooltip.Target>
                                 <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                               </Tooltip.Target>
                               <Tooltip.Content>
                                 <p>
-                                  You can specify additional columns to display in tooltips and / or the supporting data
-                                  table.
+                                  For secondary values such as "NA", the system can automatically color-code them in
+                                  shades of gray, one shade for each special class.
                                 </p>
                               </Tooltip.Content>
                             </Tooltip>
                           </span>
                         </label>
-                        {additionalColumns.map(val => (
-                          <fieldset className='edit-block' key={val}>
-                            <button
-                              className='remove-column'
-                              onClick={event => {
-                                event.preventDefault()
-                                removeAdditionalColumn(val)
-                              }}
-                            >
-                              Remove
-                            </button>
-                            <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'
-                              subsection={val}
-                              fieldName='label'
-                              label='Label'
-                              updateField={updateField}
-                            />
-                            <ul className='column-edit'>
-                              <li className='three-col'>
-                                <TextField
-                                  value={columns[val].prefix}
-                                  section='columns'
-                                  subsection={val}
-                                  fieldName='prefix'
-                                  label='Prefix'
-                                  updateField={updateField}
-                                />
-                                <TextField
-                                  value={columns[val].suffix}
-                                  section='columns'
-                                  subsection={val}
-                                  fieldName='suffix'
-                                  label='Suffix'
-                                  updateField={updateField}
-                                />
-                                <TextField
-                                  type='number'
-                                  value={columns[val].roundToPlace}
-                                  section='columns'
-                                  subsection={val}
-                                  fieldName='roundToPlace'
-                                  label='Round'
-                                  updateField={updateField}
-                                />
-                              </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>
-                        ))}
-                        <button
-                          className={'btn btn-primary full-width'}
-                          onClick={event => {
-                            event.preventDefault()
-                            addAdditionalColumn(additionalColumns.length + 1)
-                          }}
+                        {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.'
+                            showCloseButton={false}
+                          />
+                        )}
+                        <GroupedList
+                          items={specialClasses}
+                          label='Special Classes'
+                          droppableId='map-special-classes'
+                          draggable={false}
+                          renderItem={(specialClass, i) => (
+                            <Accordion allowZeroExpanded key={`special-class-${i}`}>
+                              <AccordionItem className='series-item series-item--chart'>
+                                <AccordionItemHeading className='series-item__title'>
+                                  <AccordionItemButton className='accordion__button'>
+                                    {specialClass.label || specialClass.value || `Special Class ${i + 1}`}
+                                  </AccordionItemButton>
+                                </AccordionItemHeading>
+                                <AccordionItemPanel>
+                                  <div className='series-item__panel-actions'>
+                                    <Button
+                                      type='button'
+                                      variant='danger'
+                                      size='sm'
+                                      className='grouped-list__remove'
+                                      onClick={() => editColumn('primary', 'specialClassDelete', i)}
+                                    >
+                                      Remove
+                                    </Button>
+                                  </div>
+                                  <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
+                                      type='text'
+                                      value={specialClass.label}
+                                      onChange={e => {
+                                        editColumn('primary', 'specialClassEdit', {
+                                          prop: 'label',
+                                          index: i,
+                                          value: e.target.value
+                                        })
+                                      }}
+                                    />
+                                  </label>
+                                </AccordionItemPanel>
+                              </AccordionItem>
+                            </Accordion>
+                          )}
+                        />
+                        {config.legend.specialClasses.length < 2 && (
+                          <Button
+                            type='button'
+                            variant='editor-primary'
+                            onClick={() => editColumn('primary', 'specialClassAdd', {})}
+                          >
+                            Add Special Class
+                          </Button>
+                        )}
+                      </fieldset>
+                    )}
+                    {'navigation' !== config.general.type && (
+                      <fieldset className='primary-fieldset edit-block'>
+                        <GroupedList
+                          items={additionalColumns}
+                          label={
+                            <>
+                              Additional Columns
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>
+                                    You can specify additional columns to display in tooltips and / or the supporting
+                                    data table.
+                                  </p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            </>
+                          }
+                          droppableId='map-additional-columns'
+                          draggable={false}
+                          renderItem={val => (
+                            <Accordion allowZeroExpanded key={val}>
+                              <AccordionItem className='series-item series-item--chart'>
+                                <AccordionItemHeading className='series-item__title'>
+                                  <AccordionItemButton className='accordion__button'>
+                                    {columns[val]?.label || config.columns[val]?.name || 'New Column'}
+                                  </AccordionItemButton>
+                                </AccordionItemHeading>
+                                <AccordionItemPanel>
+                                  <div className='series-item__panel-actions'>
+                                    <Button
+                                      type='button'
+                                      variant='danger'
+                                      size='sm'
+                                      className='grouped-list__remove'
+                                      onClick={() => removeAdditionalColumn(val)}
+                                    >
+                                      Remove
+                                    </Button>
+                                  </div>
+                                  <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'
+                                    subsection={val}
+                                    fieldName='label'
+                                    label='Label'
+                                    updateField={updateField}
+                                  />
+                                  <ul className='column-edit'>
+                                    <li className='three-col'>
+                                      <TextField
+                                        value={columns[val].prefix}
+                                        section='columns'
+                                        subsection={val}
+                                        fieldName='prefix'
+                                        label='Prefix'
+                                        updateField={updateField}
+                                      />
+                                      <TextField
+                                        value={columns[val].suffix}
+                                        section='columns'
+                                        subsection={val}
+                                        fieldName='suffix'
+                                        label='Suffix'
+                                        updateField={updateField}
+                                      />
+                                      <TextField
+                                        type='number'
+                                        value={columns[val].roundToPlace}
+                                        section='columns'
+                                        subsection={val}
+                                        fieldName='roundToPlace'
+                                        label='Round'
+                                        updateField={updateField}
+                                      />
+                                    </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)
+                                      }}
+                                    />
+                                    <label>
+                                      <span className='edit-label column-heading'>Order</span>
+                                      <input
+                                        onWheel={e => e.currentTarget.blur()}
+                                        type='number'
+                                        min='1'
+                                        value={config.columns[val]?.order ?? ''}
+                                        onChange={event => {
+                                          updateColumnOrder(val, event.target.value)
+                                        }}
+                                      />
+                                    </label>
+                                  </ul>
+                                </AccordionItemPanel>
+                              </AccordionItem>
+                            </Accordion>
+                          )}
+                        />
+                        <Button
+                          type='button'
+                          variant='editor-primary'
+                          onClick={() => addAdditionalColumn(additionalColumns.length + 1)}
                         >
                           Add Column
-                        </button>
+                        </Button>
                       </fieldset>
                     )}
                     {'category' === config.legend.type && (
@@ -2171,8 +2504,8 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                               </label>
                             </fieldset>
                           ))}
-                        <button
-                          className={'btn btn-primary full-width'}
+                        <Button
+                          className={'btn btn-primary full-width editor-panel-action-button'}
                           onClick={event => {
                             event.preventDefault()
                             const updatedAdditionaCategories = [...(config.legend.additionalCategories || [])]
@@ -2181,7 +2514,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                           }}
                         >
                           Add Category
-                        </button>
+                        </Button>
                       </fieldset>
                     )}
                   </AccordionItemPanel>
@@ -2679,6 +3012,15 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         <AccordionItemButton>Filters</AccordionItemButton>
                       </AccordionItemHeading>
                       <AccordionItemPanel>
+                        {config.general.geoType === 'us-county' && (
+                          <CheckBox
+                            value={config.general.showStateDropdown || false}
+                            fieldName='showStateDropdown'
+                            label='Show State Dropdown'
+                            updateField={updateField}
+                            section='general'
+                          />
+                        )}
                         <VizFilterEditor
                           config={config}
                           updateField={updateField}
@@ -2878,6 +3220,78 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         label='Show collapse below table'
                         updateField={updateField}
                       />
+                      <Select
+                        value={config.table.defaultSort?.column || ''}
+                        fieldName='column'
+                        section='table'
+                        subsection='defaultSort'
+                        label='Default Sort Column'
+                        initial='-Select-'
+                        options={Object.keys(config.columns)
+                          .filter(key => config.columns[key].dataTable !== false && config.columns[key].name)
+                          .map(key => ({
+                            label: config.columns[key].label || config.columns[key].name || key,
+                            value: key
+                          }))}
+                        updateField={(_section, _subSection, _fieldName, value) => {
+                          if (value === '' || value === '-Select-') {
+                            updateField('table', null, 'defaultSort', {})
+                          } else {
+                            updateField('table', null, 'defaultSort', { column: value, sortDirection: 'asc' })
+                          }
+                        }}
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>Choose a column to sort the data table by when it first loads.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                      />
+                      {config.table.defaultSort?.column && (
+                        <Select
+                          value={config.table.defaultSort?.sortDirection || 'asc'}
+                          fieldName='sortDirection'
+                          section='table'
+                          subsection='defaultSort'
+                          label='Sort Direction'
+                          options={[
+                            { label: 'Ascending', value: 'asc' },
+                            { label: 'Descending', value: 'desc' },
+                            { label: 'Custom', value: 'custom' }
+                          ]}
+                          updateField={(_section, _subSection, _fieldName, value) => {
+                            const newDefaultSort = { ...config.table.defaultSort, sortDirection: value }
+                            if (value !== 'custom') {
+                              delete newDefaultSort.customOrder
+                            } else if (!newDefaultSort.customOrder?.length) {
+                              // Auto-populate customOrder with unique values so the table updates immediately
+                              const col = newDefaultSort.column
+                              const dataCol = config.columns?.[col]?.name || col
+                              if (dataCol && config.data?.length) {
+                                newDefaultSort.customOrder = Array.from(
+                                  new Set(config.data.map(row => String(row[dataCol] ?? '')).filter(v => v !== ''))
+                                )
+                              }
+                            }
+                            updateField('table', null, 'defaultSort', newDefaultSort)
+                          }}
+                        />
+                      )}
+                      {config.table.defaultSort?.column && config.table.defaultSort?.sortDirection === 'custom' && (
+                        <CustomSortOrder
+                          column={
+                            config.columns[config.table.defaultSort.column]?.name || config.table.defaultSort.column
+                          }
+                          data={config.data}
+                          customOrder={config.table.defaultSort.customOrder}
+                          updateField={updateField}
+                          displayTransform={config.table.defaultSort.column === 'geo' ? displayGeoName : undefined}
+                        />
+                      )}
                       <CheckBox
                         value={config.table.download}
                         fieldName='download'
@@ -2907,6 +3321,16 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                             section='table'
                             updateField={updateField}
                           />
+                          <div className='ms-4 mt-2' style={{ maxWidth: 'calc(100% - 1.5rem)' }}>
+                            <TextField
+                              value={config.table.downloadDataLabel}
+                              section='table'
+                              fieldName='downloadDataLabel'
+                              label='Download Data Link Text'
+                              placeholder='Download Data (CSV)'
+                              updateField={updateField}
+                            />
+                          </div>
                         </>
                       )}
                       {isDashboard && (
@@ -2919,16 +3343,12 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                           updateField={updateField}
                         />
                       )}
-                      {isLoadedFromUrl && (
-                        <CheckBox
-                          value={config.table.showDownloadUrl}
-                          section='table'
-                          subsection={null}
-                          fieldName='showDownloadUrl'
-                          label='Show URL to Automatically Updated Data'
-                          updateField={updateField}
-                        />
-                      )}
+                      <DownloadUrlControls
+                        hasUrlBackedDataSource={Boolean(isLoadedFromUrl)}
+                        showDownloadUrl={config.table.showDownloadUrl}
+                        downloadUrlLabel={config.table.downloadUrlLabel}
+                        updateField={updateField}
+                      />
                       <CheckBox
                         value={config.table.showFullGeoNameInCSV}
                         section='table'
@@ -2952,28 +3372,40 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         }}
                       />
                       {config.general.showDownloadImgButton && (
-                        <CheckBox
-                          value={config.general.includeContextInDownload}
-                          section='general'
-                          subsection={null}
-                          className='ms-4'
-                          fieldName='includeContextInDownload'
-                          label='Include Heading & Context'
-                          updateField={updateField}
-                          tooltip={
-                            <Tooltip style={{ textTransform: 'none' }}>
-                              <Tooltip.Target>
-                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                              </Tooltip.Target>
-                              <Tooltip.Content>
-                                <p>
-                                  When enabled, the image download will include the section heading (H2 or H3) and any
-                                  explanatory paragraphs that appear before the visualization
-                                </p>
-                              </Tooltip.Content>
-                            </Tooltip>
-                          }
-                        />
+                        <>
+                          <CheckBox
+                            value={config.general.includeContextInDownload}
+                            section='general'
+                            subsection={null}
+                            className='ms-4'
+                            fieldName='includeContextInDownload'
+                            label='Include Heading & Context'
+                            updateField={updateField}
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>
+                                    When enabled, the image download will include the section heading (H2 or H3) and any
+                                    explanatory paragraphs that appear before the visualization
+                                  </p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+                          <div className='ms-4 mt-2' style={{ maxWidth: 'calc(100% - 1.5rem)' }}>
+                            <TextField
+                              value={config.table.downloadImageLabel}
+                              section='table'
+                              fieldName='downloadImageLabel'
+                              label='Download Image Link Text'
+                              placeholder='Download Map (PNG)'
+                              updateField={updateField}
+                            />
+                          </div>
+                        </>
                       )}
 
                       {/* <label className='checkbox'>
@@ -3031,6 +3463,14 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         updateField={updateField}
                       />
                     )}
+                    <TextField
+                      value={tooltips.noDataLabel}
+                      section='tooltips'
+                      fieldName='noDataLabel'
+                      label='No Data Tooltip Text'
+                      placeholder='No Data'
+                      updateField={updateField}
+                    />
                   </AccordionItemPanel>
                 </AccordionItem>
                 <AccordionItem>
@@ -3045,6 +3485,19 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                       onThemeSelect={palette => handleEditorChanges('headerColor', palette)}
                       label='Header Theme'
                     />
+                    {ENABLE_MAP_DATA_BITE_VISUAL_SETTINGS && (
+                      <StyleTreatmentSection
+                        styleTreatment={
+                          config.general.titleStyle === 'legacy' && !config.visual?.tp5Treatment ? 'legacy' : 'tp5'
+                        }
+                        onStyleTreatmentChange={handleStyleTreatmentChange}
+                        showStyleTreatment={ENABLE_CHART_MAP_TP5_TREATMENT_SELECTION}
+                        border={config.visual?.border}
+                        borderColorTheme={config.visual?.borderColorTheme}
+                        accent={config.visual?.accent}
+                        updateField={updateField}
+                      />
+                    )}
                     <CheckBox
                       value={config.general.showTitle || false}
                       section='general'
@@ -3276,7 +3729,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                           type='checkbox'
                           checked={config.visual.showBubbleZeros}
                           onChange={event => {
-                            const _newConfig = _.cloneDeep(config)
+                            const _newConfig = cloneDeep(config)
                             _newConfig.visual.showBubbleZeros = event.target.checked
                             setConfig(_newConfig)
                           }}
@@ -3284,7 +3737,9 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         <span className='edit-label'>Show Data with Zero's on Bubble Map</span>
                       </label>
                     )}
-                    {(config.general.geoType === 'world' || config.general.geoType === 'single-state') && (
+                    {(config.general.geoType === 'world' ||
+                      config.general.geoType === 'single-state' ||
+                      config.general.geoType === 'us-county') && (
                       <label className='checkbox'>
                         <input
                           type='checkbox'
@@ -3354,73 +3809,84 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                     )}
                     {/* <AdditionalCityStyles /> */}
                     <>
-                      {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
-                                className='remove-column'
-                                onClick={e => {
-                                  e.preventDefault()
-                                  editCityStyles('remove', i, '', '')
-                                }}
-                              >
-                                Remove
-                              </button>
-                              <p>City Style {i + 1}</p>
-                              <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
-                                  type='text'
-                                  value={value}
+                      <GroupedList
+                        items={config.visual.additionalCityStyles}
+                        label='Additional City Styles'
+                        droppableId='map-city-styles'
+                        draggable={false}
+                        renderItem={({ label, column, value, shape }, i) => (
+                          <Accordion allowZeroExpanded key={`additional-city-style-${i}`}>
+                            <AccordionItem className='series-item series-item--chart'>
+                              <AccordionItemHeading className='series-item__title'>
+                                <AccordionItemButton className='accordion__button'>
+                                  {label || column || `City Style ${i + 1}`}
+                                </AccordionItemButton>
+                              </AccordionItemHeading>
+                              <AccordionItemPanel>
+                                <div className='series-item__panel-actions'>
+                                  <Button
+                                    type='button'
+                                    variant='danger'
+                                    size='sm'
+                                    className='grouped-list__remove'
+                                    onClick={() => editCityStyles('remove', i, '', '')}
+                                  >
+                                    Remove
+                                  </Button>
+                                </div>
+                                <Select
+                                  label='Column with configuration value'
+                                  value={column}
+                                  options={columnsOptions.map(c => c.key)}
                                   onChange={e => {
-                                    editCityStyles('update', i, 'value', e.target.value)
+                                    editCityStyles('update', i, 'column', e.target.value)
                                   }}
-                                ></input>
-                              </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
-                                  key={i}
-                                  type='text'
-                                  value={label}
+                                />
+                                <label>
+                                  <span className='edit-label column-heading'>Value to Trigger</span>
+                                  <input
+                                    type='text'
+                                    value={value}
+                                    onChange={e => {
+                                      editCityStyles('update', i, 'value', e.target.value)
+                                    }}
+                                  />
+                                </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, 'label', e.target.value)
+                                    editCityStyles('update', i, 'shape', e.target.value)
                                   }}
                                 />
-                              </label>
-                            </div>
-                          )
-                        })}
-
-                      <button
-                        type='button'
-                        onClick={() => editCityStyles('add', 0, '', '')}
-                        className='btn btn-primary full-width'
-                      >
+                                <label>
+                                  <span className='edit-label column-heading'>Label</span>
+                                  <input
+                                    key={i}
+                                    type='text'
+                                    value={label}
+                                    onChange={e => {
+                                      editCityStyles('update', i, 'label', e.target.value)
+                                    }}
+                                  />
+                                </label>
+                              </AccordionItemPanel>
+                            </AccordionItem>
+                          </Accordion>
+                        )}
+                      />
+
+                      <Button type='button' variant='editor-primary' onClick={() => editCityStyles('add', 0, '', '')}>
                         Add city style
-                      </button>
+                      </Button>
                     </>
                     <label htmlFor='opacity'>
                       <TextField
@@ -3446,6 +3912,15 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                         />
                       </>
                     )}
+                    {isCoveDeveloperMode() && (
+                      <CheckBox
+                        value={config.visual?.highlightWrappers}
+                        section='visual'
+                        fieldName='highlightWrappers'
+                        label='Highlight Layout Wrappers'
+                        updateField={updateField}
+                      />
+                    )}
                   </AccordionItemPanel>
                 </AccordionItem>
                 <AccordionItem>
@@ -3454,87 +3929,100 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                   </AccordionItemHeading>
                   <AccordionItemPanel>
                     {config.map.layers.length === 0 && <p>There are currently no layers.</p>}
-
-                    {config.map.layers.map((layer, index) => {
-                      return (
-                        <>
-                          <Accordion allowZeroExpanded>
-                            <AccordionItem className='series-item map-layers-list'>
-                              <AccordionItemHeading className='series-item__title map-layers-list--title'>
-                                <AccordionItemButton>{`Layer ${index + 1}: ${layer.name}`}</AccordionItemButton>
-                              </AccordionItemHeading>
-                              <AccordionItemPanel>
-                                <div className='map-layers-panel'>
-                                  <label htmlFor='layerName'>Layer Name:</label>
-                                  <input
-                                    type='text'
-                                    name='layerName'
-                                    value={layer.name}
-                                    onChange={e => handleMapLayer(e, index, 'name')}
-                                  />
-                                  <label htmlFor='layerFilename'>File:</label>
-                                  <input
-                                    type='text'
-                                    name='layerFilename'
-                                    value={layer.url}
-                                    onChange={e => handleMapLayer(e, index, 'url')}
-                                  />
-                                  <label htmlFor='layerNamespace'>TOPOJSON Namespace:</label>
-                                  <input
-                                    type='text'
-                                    name='layerNamespace'
-                                    value={layer.namespace}
-                                    onChange={e => handleMapLayer(e, index, 'namespace')}
-                                  />
-                                  <label htmlFor='layerFill'>Fill Color:</label>
-                                  <input
-                                    type='text'
-                                    name='layerFill'
-                                    value={layer.fill}
-                                    onChange={e => handleMapLayer(e, index, 'fill')}
-                                  />
-                                  <label htmlFor='layerFill'>Fill Opacity (%):</label>
-                                  <input
-                                    type='number'
-                                    min={0}
-                                    max={100}
-                                    name='layerFill'
-                                    value={layer.fillOpacity ? layer.fillOpacity * 100 : ''}
-                                    onChange={e => handleMapLayer(e, index, 'fillOpacity')}
-                                  />
-                                  <label htmlFor='layerStroke'>Stroke Color:</label>
-                                  <input
-                                    type='text'
-                                    name='layerStroke'
-                                    value={layer.stroke}
-                                    onChange={e => handleMapLayer(e, index, 'stroke')}
-                                  />
-                                  <label htmlFor='layerStroke'>Stroke Width:</label>
-                                  <input
-                                    type='number'
-                                    min={0}
-                                    max={5}
-                                    name='layerStrokeWidth'
-                                    value={layer.strokeWidth}
-                                    onChange={e => handleMapLayer(e, index, 'strokeWidth')}
-                                  />
-                                  <label htmlFor='layerTooltip'>Tooltip:</label>
-                                  <textarea
-                                    name='layerTooltip'
-                                    value={layer.tooltip}
-                                    onChange={e => handleMapLayer(e, index, 'tooltip')}
-                                  ></textarea>
-                                  <button onClick={e => handleRemoveLayer(e, index)}>Remove Layer</button>
-                                </div>
-                              </AccordionItemPanel>
-                            </AccordionItem>
-                          </Accordion>
-                        </>
-                      )
-                    })}
-                    <button className={'btn btn-primary full-width'} onClick={handleAddLayer}>
+                    <GroupedList
+                      items={config.map.layers}
+                      label='Custom Map Layers'
+                      droppableId='map-custom-layers'
+                      draggable={false}
+                      renderItem={(layer, index) => (
+                        <Accordion allowZeroExpanded key={`map-layer-${index}`}>
+                          <AccordionItem className='series-item series-item--chart map-layers-list'>
+                            <AccordionItemHeading className='series-item__title map-layers-list--title'>
+                              <AccordionItemButton className='accordion__button'>
+                                {`Layer ${index + 1}: ${layer.name}`}
+                              </AccordionItemButton>
+                            </AccordionItemHeading>
+                            <AccordionItemPanel>
+                              <div className='series-item__panel-actions'>
+                                <Button
+                                  type='button'
+                                  variant='danger'
+                                  size='sm'
+                                  className='grouped-list__remove'
+                                  onClick={e => handleRemoveLayer(e, index)}
+                                >
+                                  Remove Layer
+                                </Button>
+                              </div>
+                              <div className='map-layers-panel'>
+                                <label htmlFor='layerName'>Layer Name:</label>
+                                <input
+                                  type='text'
+                                  name='layerName'
+                                  value={layer.name}
+                                  onChange={e => handleMapLayer(e, index, 'name')}
+                                />
+                                <label htmlFor='layerFilename'>File:</label>
+                                <input
+                                  type='text'
+                                  name='layerFilename'
+                                  value={layer.url}
+                                  onChange={e => handleMapLayer(e, index, 'url')}
+                                />
+                                <label htmlFor='layerNamespace'>TOPOJSON Namespace:</label>
+                                <input
+                                  type='text'
+                                  name='layerNamespace'
+                                  value={layer.namespace}
+                                  onChange={e => handleMapLayer(e, index, 'namespace')}
+                                />
+                                <label htmlFor='layerFill'>Fill Color:</label>
+                                <input
+                                  type='text'
+                                  name='layerFill'
+                                  value={layer.fill}
+                                  onChange={e => handleMapLayer(e, index, 'fill')}
+                                />
+                                <label htmlFor='layerFill'>Fill Opacity (%):</label>
+                                <input
+                                  type='number'
+                                  min={0}
+                                  max={100}
+                                  name='layerFill'
+                                  value={layer.fillOpacity ? layer.fillOpacity * 100 : ''}
+                                  onChange={e => handleMapLayer(e, index, 'fillOpacity')}
+                                />
+                                <label htmlFor='layerStroke'>Stroke Color:</label>
+                                <input
+                                  type='text'
+                                  name='layerStroke'
+                                  value={layer.stroke}
+                                  onChange={e => handleMapLayer(e, index, 'stroke')}
+                                />
+                                <label htmlFor='layerStroke'>Stroke Width:</label>
+                                <input
+                                  type='number'
+                                  min={0}
+                                  max={5}
+                                  name='layerStrokeWidth'
+                                  value={layer.strokeWidth}
+                                  onChange={e => handleMapLayer(e, index, 'strokeWidth')}
+                                />
+                                <label htmlFor='layerTooltip'>Tooltip:</label>
+                                <textarea
+                                  name='layerTooltip'
+                                  value={layer.tooltip}
+                                  onChange={e => handleMapLayer(e, index, 'tooltip')}
+                                ></textarea>
+                              </div>
+                            </AccordionItemPanel>
+                          </AccordionItem>
+                        </Accordion>
+                      )}
+                    />
+                    <Button type='button' variant='editor-primary' onClick={handleAddLayer}>
                       Add Map Layer
-                    </button>
+                    </Button>
                     <p className='layer-purpose-details'>
                       Context should be added to your visualization or associated page to describe the significance of
                       layers that are added to maps.
@@ -3552,6 +4040,7 @@ const EditorPanel: React.FC<MapEditorPanelProps> = ({ datasets }) => {
                   enableMarkupVariables={config.enableMarkupVariables || false}
                   onMarkupVariablesChange={variables => setConfig({ ...config, markupVariables: variables })}
                   onToggleEnable={enabled => setConfig({ ...config, enableMarkupVariables: enabled })}
+                  dataMetadata={config.dataMetadata}
                 />
                 <Panels.SmallMultiples name='Small Multiples' />
               </Accordion>