@cdc/map 4.23.2 → 4.23.4

package/src/components/EditorPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, memo } from 'react'
 
 // Third Party
 import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
@@ -11,9 +11,6 @@ import { Tooltip as ReactTooltip } from 'react-tooltip'
 import colorPalettes from '@cdc/core/data/colorPalettes'
 import { supportedStatesFipsCodes } from '../data/supported-geos'
 
-// Hooks
-import { useColorPalette } from '../hooks/useColorPalette'
-
 // Components - Core
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -30,6 +27,9 @@ import AlabamaGraphic from '@cdc/core/assets/icon-map-alabama.svg'
 import worldDefaultConfig from '../../examples/default-world.json'
 import usaDefaultConfig from '../../examples/default-usa.json'
 import countyDefaultConfig from '../../examples/default-county.json'
+import useMapLayers from '../hooks/useMapLayers'
+
+import { useFilters } from '@cdc/core/components/Filters'
 
 const TextField = ({ label, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', tooltip, ...attributes }) => {
   const [value, setValue] = useState(stateValue)
@@ -40,7 +40,7 @@ const TextField = ({ label, section = null, subsection = null, fieldName, update
     if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
       updateField(section, subsection, fieldName, debouncedValue)
     }
-  }, [debouncedValue])
+  }, [debouncedValue]) // eslint-disable-line
 
   let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
 
@@ -68,26 +68,36 @@ const TextField = ({ label, section = null, subsection = null, fieldName, update
 }
 
 const EditorPanel = props => {
-  const { state, columnsInData = [], loadConfig, setState, isDashboard, setParentConfig, setRuntimeFilters, runtimeFilters, runtimeLegend } = props
+  const { state, columnsInData = [], loadConfig, setState, isDashboard, setParentConfig, runtimeFilters, runtimeLegend, changeFilterActive, isDebug, setRuntimeFilters } = props
 
   const { general, columns, legend, dataTable, tooltips } = state
 
   const [requiredColumns, setRequiredColumns] = useState(null) // Simple state so we know if we need more information before parsing the map
 
-  const [configTextboxValue, setConfigTextbox] = useState({})
+  const [configTextboxValue, setConfigTextbox] = useState({}) // eslint-disable-line
 
   const [loadedDefault, setLoadedDefault] = useState(false)
 
   const [displayPanel, setDisplayPanel] = useState(true)
 
-  const [advancedToggle, setAdvancedToggle] = useState(false)
-
   const [activeFilterValueForDescription, setActiveFilterValueForDescription] = useState([0, 0])
 
-  const { filteredPallets, filteredQualitative, isPaletteReversed, paletteName } = useColorPalette(colorPalettes, state)
+  const { handleFilterOrder, filterOrderOptions, filterStyleOptions } = useFilters({ config: state, setConfig: setState, filteredData: runtimeFilters, setFilteredData: setRuntimeFilters })
 
   const headerColors = ['theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber']
 
+  const {
+    // prettier-ignore
+    MapLayerHandlers: {
+      handleAddLayer,
+      handleMapLayerName,
+      handleMapLayerUrl,
+      handleRemoveLayer,
+      handleMapLayerNamespace,
+      handleMapLayerTooltip
+    }
+  } = useMapLayers(state, setState, false, true)
+
   const categoryMove = (idx1, idx2) => {
     let categoryValuesOrder = [...state.legend.categoryValuesOrder]
 
@@ -104,23 +114,45 @@ const EditorPanel = props => {
     })
   }
 
-  const handleFilterOrder = (idx1, idx2, filterIndex, filter) => {
-    let filterOrder = filter.values
-    let [movedItem] = filterOrder.splice(idx1, 1)
-    filterOrder.splice(idx2, 0, movedItem)
-    let filters = [...runtimeFilters]
-    let filterItem = { ...runtimeFilters[filterIndex] }
-    filterItem.active = filter.values[0]
-    filterItem.values = filterOrder
-    filterItem.order = 'cust'
-    filters[filterIndex] = filterItem
-
+  let specialClasses = []
+  if (legend.specialClasses && legend.specialClasses.length && typeof legend.specialClasses[0] === 'string') {
+    legend.specialClasses.forEach(specialClass => {
+      specialClasses.push({
+        key: state.columns.primary && state.columns.primary.name ? state.columns.primary.name : columnsInData[0],
+        value: specialClass,
+        label: specialClass
+      })
+    })
+    // DEV-3303 - since the above was a repair of bad config - need to backpopulate into the state
     setState({
       ...state,
-      filters
+      legend: {
+        ...state.legend,
+        specialClasses: specialClasses
+      }
     })
+  } else {
+    specialClasses = legend.specialClasses || []
   }
 
+  const CheckBox = memo(({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
+    <label className='checkbox column-heading'>
+      <input
+        type='checkbox'
+        name={fieldName}
+        checked={value}
+        onChange={e => {
+          updateField(section, subsection, fieldName, !value)
+        }}
+        {...attributes}
+      />
+      <span className='edit-label'>
+        {label}
+        {tooltip}
+      </span>
+    </label>
+  ))
+
   const DynamicDesc = ({ label, fieldName, value: stateValue, type = 'input', ...attributes }) => {
     const [value, setValue] = useState(stateValue)
 
@@ -130,7 +162,7 @@ const EditorPanel = props => {
       if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
         handleEditorChanges('changeLegendDescription', [String(activeFilterValueForDescription), debouncedValue])
       }
-    }, [debouncedValue])
+    }, [debouncedValue]) // eslint-disable-line
 
     const onChange = e => setValue(e.target.value)
 
@@ -169,6 +201,17 @@ const EditorPanel = props => {
           }
         })
         break
+
+      case 'toggleDataTableLink':
+        setState({
+          ...state,
+          table: {
+            ...state.table,
+            showDataTableLink: value
+          }
+        })
+        break
+
       case 'toggleDataUrl':
         setState({
           ...state,
@@ -418,6 +461,15 @@ const EditorPanel = props => {
               }
             })
             break
+          case 'world-geocode':
+            setState({
+              ...state,
+              general: {
+                ...state.general,
+                type: value
+              }
+            })
+            break
           case 'data':
             setState({
               ...state,
@@ -457,7 +509,7 @@ const EditorPanel = props => {
             })
             break
           default:
-            console.warn('Map type not set')
+            console.warn('COVE: Map type not set') // eslint-disable-line
             break
         }
         break
@@ -484,7 +536,8 @@ const EditorPanel = props => {
               ...state,
               general: {
                 ...state.general,
-                geoType: 'us'
+                geoType: 'us',
+                type: state.type === 'us-geocode' ? 'data' : state.type
               },
               dataTable: {
                 ...state.dataTable,
@@ -571,6 +624,15 @@ const EditorPanel = props => {
           }
         })
         break
+      case 'legendShowSpecialClassesLast':
+        setState({
+          ...state,
+          legend: {
+            ...state.legend,
+            showSpecialClassesLast: !state.legend.showSpecialClassesLast
+          }
+        })
+        break
       case 'dynamicDescription':
         setState({
           ...state,
@@ -673,14 +735,28 @@ const EditorPanel = props => {
           }
         })
         break
+      case 'territoriesAlwaysShow':
+        setState({
+          ...state,
+          general: {
+            ...state.general,
+            territoriesAlwaysShow: value
+          }
+        })
+        break
+      case 'filterBehavior':
+        setState({
+          ...state,
+          filterBehavior: value
+        })
+        break
       default:
-        console.warn(`Did not recognize editor property.`)
+        console.warn(`COVE: Did not recognize editor property.`) // eslint-disable-line
         break
     }
   }
 
   const columnsRequiredChecker = useCallback(() => {
-    console.info('Running columns required check.')
     let columnList = []
 
     // Geo is always required
@@ -698,11 +774,11 @@ const EditorPanel = props => {
       columnList.push('Navigation')
     }
 
-    if ('us-geocode' === state.general.type && '' === state.columns.latitude.name) {
+    if (('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && '' === state.columns.latitude.name) {
       columnList.push('Latitude')
     }
 
-    if ('us-geocode' === state.general.type && '' === state.columns.longitude.name) {
+    if (('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && '' === state.columns.longitude.name) {
       columnList.push('Longitude')
     }
 
@@ -713,10 +789,9 @@ const EditorPanel = props => {
 
   const editColumn = async (columnName, editTarget, value) => {
     let newSpecialClasses
-
     switch (editTarget) {
       case 'specialClassEdit':
-        newSpecialClasses = Array.from(legend.specialClasses)
+        newSpecialClasses = Array.from(specialClasses)
 
         newSpecialClasses[value.index][value.prop] = value.value
 
@@ -729,7 +804,7 @@ const EditorPanel = props => {
         })
         break
       case 'specialClassDelete':
-        newSpecialClasses = Array.from(legend.specialClasses)
+        newSpecialClasses = Array.from(specialClasses)
 
         newSpecialClasses.splice(value, 1)
 
@@ -742,7 +817,7 @@ const EditorPanel = props => {
         })
         break
       case 'specialClassAdd':
-        newSpecialClasses = legend.specialClasses
+        newSpecialClasses = specialClasses
 
         newSpecialClasses.push(value)
 
@@ -799,6 +874,10 @@ const EditorPanel = props => {
           newFilters.splice(idx, 1)
         }
         break
+      case 'filterStyle':
+        newFilters[idx] = { ...newFilters[idx] }
+        newFilters[idx].filterStyle = value
+        break
       case 'columnName':
         newFilters[idx] = { ...newFilters[idx] }
         newFilters[idx].columnName = value
@@ -849,6 +928,33 @@ const EditorPanel = props => {
     })
   }
 
+  const MapFilters = () => {
+    return (
+      <>
+        <label>
+          Filter Behavior
+          <select
+            value={state.filterBehavior}
+            onChange={e => {
+              setState({
+                ...state,
+                filterBehavior: e.target.value
+              })
+            }}
+          >
+            <option key='Apply Button' value='Apply Button'>
+              Apply Button
+            </option>
+            <option key='Filter Change' value='Filter Change'>
+              Filter Change
+            </option>
+          </select>
+        </label>
+        {filtersJSX}
+      </>
+    )
+  }
+
   const removeAdditionalColumn = columnName => {
     const newColumns = state.columns
 
@@ -915,11 +1021,51 @@ const EditorPanel = props => {
     return strippedState
   }
 
+  const isReversed = state.general.palette.isReversed
+  function filterColorPalettes() {
+    let sequential = []
+    let nonSequential = []
+    for (let paletteName in colorPalettes) {
+      if (!isReversed) {
+        if (paletteName.includes('qualitative') && !paletteName.endsWith('reverse')) {
+          nonSequential.push(paletteName)
+        }
+        if (!paletteName.includes('qualitative') && !paletteName.endsWith('reverse')) {
+          sequential.push(paletteName)
+        }
+      }
+      if (isReversed) {
+        if (paletteName.includes('qualitative') && paletteName.endsWith('reverse')) {
+          nonSequential.push(paletteName)
+        }
+        if (!paletteName.includes('qualitative') && paletteName.endsWith('reverse')) {
+          sequential.push(paletteName)
+        }
+      }
+    }
+
+    return [sequential, nonSequential]
+  }
+  const [sequential, nonSequential] = filterColorPalettes()
+
+  useEffect(() => {
+    let paletteName = ''
+    if (isReversed && !state.color.endsWith('reverse')) {
+      paletteName = state.color + 'reverse'
+    }
+    if (!isReversed && state.color.endsWith('reverse')) {
+      paletteName = state.color.slice(0, -7)
+    }
+    if (paletteName) {
+      handleEditorChanges('color', paletteName)
+    }
+  }, [isReversed])
+
   useEffect(() => {
     setLoadedDefault(state.defaultData)
 
     columnsRequiredChecker()
-  }, [state])
+  }, [state]) // eslint-disable-line
 
   useEffect(() => {
     //If a categorical map is used and the order is either not defined or incorrect, fix it
@@ -931,12 +1077,12 @@ const EditorPanel = props => {
             valid = false
           }
         })
-        let runtimeLegendKeys = runtimeLegend.map(item => item.value);
+        let runtimeLegendKeys = runtimeLegend.map(item => item.value)
         state.legend.categoryValuesOrder.forEach(category => {
           if (runtimeLegendKeys.indexOf(category) === -1) {
-            valid = false;
+            valid = false
           }
-        });
+        })
       } else {
         valid = false
       }
@@ -953,7 +1099,7 @@ const EditorPanel = props => {
         })
       }
     }
-  }, [runtimeLegend])
+  }, [runtimeLegend]) // eslint-disable-line
 
   // if no state choice by default show alabama
   useEffect(() => {
@@ -969,7 +1115,7 @@ const EditorPanel = props => {
         }
       })
     }
-  }, [])
+  }, []) // eslint-disable-line
 
   const columnsOptions = [
     <option value='' key={'Select Option'}>
@@ -978,7 +1124,7 @@ const EditorPanel = props => {
   ]
 
   columnsInData.map(colName => {
-    columnsOptions.push(
+    return columnsOptions.push(
       <option value={colName} key={colName}>
         {colName}
       </option>
@@ -997,19 +1143,6 @@ const EditorPanel = props => {
     })
   })
 
-  let specialClasses = []
-  if (legend.specialClasses && legend.specialClasses.length && typeof legend.specialClasses[0] === 'string') {
-    legend.specialClasses.forEach(specialClass => {
-      specialClasses.push({
-        key: state.columns.primary && state.columns.primary.name ? state.columns.primary.name : columnsInData[0],
-        value: specialClass,
-        label: specialClass
-      })
-    })
-  } else {
-    specialClasses = legend.specialClasses || []
-  }
-
   const additionalColumns = Object.keys(state.columns).filter(value => {
     const defaultCols = ['geo', 'navigate', 'primary', 'latitude', 'longitude']
 
@@ -1021,6 +1154,7 @@ const EditorPanel = props => {
 
   const updateField = (section, subsection, fieldName, newValue) => {
     const isArray = Array.isArray(state[section])
+
     let sectionValue = isArray ? [...state[section], newValue] : { ...state[section], [fieldName]: newValue }
 
     if (null !== subsection) {
@@ -1054,98 +1188,106 @@ const EditorPanel = props => {
       usedFilterColumns[filter.columnName] = true
     }
 
-    const filterOptions = [
-      {
-        label: 'Ascending Alphanumeric',
-        value: 'asc'
-      },
-      {
-        label: 'Descending Alphanumeric',
-        value: 'desc'
-      },
-      {
-        label: 'Custom',
-        value: 'cust'
-      }
-    ]
-
     return (
-      <fieldset className='edit-block' key={`filter-${index}`}>
-        <button
-          className='remove-column'
-          onClick={e => {
-            e.preventDefault()
-            changeFilter(index, 'remove')
-          }}
-        >
-          Remove
-        </button>
-        <TextField value={state.filters[index].label} section='filters' subsection={index} fieldName='label' label='Label' updateField={updateField} />
-        <label>
-          <span className='edit-label column-heading'>
-            Filter Column
-            <Tooltip style={{ textTransform: 'none' }}>
-              <Tooltip.Target>
-                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-              </Tooltip.Target>
-              <Tooltip.Content>
-                <p>Selecting a column will add a dropdown menu below the map legend and allow users to filter based on the values in this column.</p>
-              </Tooltip.Content>
-            </Tooltip>
-          </span>
-          <select
-            value={filter.columnName}
-            onChange={event => {
-              changeFilter(index, 'columnName', event.target.value)
+      <>
+        <fieldset className='edit-block' key={`filter-${index}`}>
+          <button
+            className='remove-column'
+            onClick={e => {
+              e.preventDefault()
+              changeFilter(index, 'remove')
             }}
           >
-            {columnsOptions.filter(({ key }) => undefined === usedFilterColumns[key] || filter.columnName === key)}
-          </select>
-        </label>
-
-        <label>
-          <span className='edit-filterOrder column-heading'>Filter Order</span>
-          <select
-            value={filter.order}
-            onChange={e => {
-              changeFilter(index, 'filterOrder', e.target.value)
-            }}
-          >
-            {filterOptions.map((option, index) => {
-              return (
-                <option value={option.value} key={`filter-${index}`}>
-                  {option.label}
-                </option>
-              )
-            })}
-          </select>
-        </label>
-
-        {filter.order === 'cust' && (
-          <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source.index, destination.index, index, runtimeFilters[index])}>
-            <Droppable droppableId='filter_order'>
-              {provided => (
-                <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
-                  {runtimeFilters[index]?.values.map((value, index) => {
-                    return (
-                      <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
-                        {(provided, snapshot) => (
-                          <li>
-                            <div className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-                              {value}
-                            </div>
-                          </li>
-                        )}
-                      </Draggable>
-                    )
-                  })}
-                  {provided.placeholder}
-                </ul>
-              )}
-            </Droppable>
-          </DragDropContext>
-        )}
-      </fieldset>
+            Remove
+          </button>
+          <TextField value={state.filters[index].label} section='filters' subsection={index} fieldName='label' label='Label' updateField={updateField} />
+          <label>
+            <span className='edit-label column-heading'>
+              Filter Column
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Selecting a column will add a dropdown menu below the map legend and allow users to filter based on the values in this column.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            </span>
+            <select
+              value={filter.columnName}
+              onChange={event => {
+                changeFilter(index, 'columnName', event.target.value)
+              }}
+            >
+              {columnsOptions.filter(({ key }) => undefined === usedFilterColumns[key] || filter.columnName === key)}
+            </select>
+          </label>
+
+          {/* COMING SOON: 4.23.5: FILTER STYLES */}
+
+          {/* <label>
+            <span className='edit-filterOrder column-heading'>Filter Style</span>
+            <select
+              value={filter.filterStyle}
+              onChange={e => {
+                changeFilter(index, 'filterStyle', e.target.value)
+              }}
+            >
+              {filterStyleOptions.map((option, index) => {
+                return (
+                  <option value={option} key={`filter-${option}--${index}`}>
+                    {option}
+                  </option>
+                )
+              })}
+            </select>
+          </label> */}
+
+          <label>
+            <span className='edit-filterOrder column-heading'>Filter Order</span>
+            <select
+              value={filter.order}
+              onChange={e => {
+                changeFilter(index, 'filterOrder', e.target.value)
+                changeFilterActive(index, filter.values[0])
+              }}
+            >
+              {filterOrderOptions.map((option, index) => {
+                return (
+                  <option value={option.value} key={`filter-${index}`}>
+                    {option.label}
+                  </option>
+                )
+              })}
+            </select>
+          </label>
+
+          {filter.order === 'cust' && (
+            <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source.index, destination.index, index, state.filters[index])}>
+              <Droppable droppableId='filter_order'>
+                {provided => (
+                  <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
+                    {state.filters[index]?.values.map((value, index) => {
+                      return (
+                        <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
+                          {(provided, snapshot) => (
+                            <li>
+                              <div className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                                {value}
+                              </div>
+                            </li>
+                          )}
+                        </Draggable>
+                      )
+                    })}
+                    {provided.placeholder}
+                  </ul>
+                )}
+              </Droppable>
+            </DragDropContext>
+          )}
+        </fieldset>
+      </>
     )
   })
 
@@ -1178,16 +1320,12 @@ const EditorPanel = props => {
     })
   }
 
-  useEffect(() => {
-    if (paletteName) handleEditorChanges('color', paletteName)
-  }, [paletteName]) // dont add handleEditorChanges as a dependency even if it requires
-
   useEffect(() => {
     const parsedData = convertStateToConfig()
     const formattedData = JSON.stringify(parsedData, undefined, 2)
 
     setConfigTextbox(formattedData)
-  }, [state])
+  }, [state]) // eslint-disable-line
 
   useEffect(() => {
     // Pass up to Editor if needed
@@ -1195,7 +1333,7 @@ const EditorPanel = props => {
       const newConfig = convertStateToConfig()
       setParentConfig(newConfig)
     }
-  }, [state])
+  }, [state]) // eslint-disable-line
 
   let numberOfItemsLimit = 8
 
@@ -1232,6 +1370,24 @@ const EditorPanel = props => {
     )
   }
 
+  const isLoadedFromUrl = state?.dataKey?.includes('http://') || state?.dataKey?.includes('https://')
+
+  // if isDebug = true, then try to set the Geography Col and Data col to reduce clicking
+  const setGeoColumn = () => {
+    // only for debug mode
+    let geoColFound = columnsInData.includes(state.columns.geo.name)
+    if (undefined !== isDebug && isDebug && !geoColFound) {
+      // then try to set the x axis to appropriate value so we dont have to manually do it
+      let mapcols = columnsInData[0]
+      if (mapcols !== '') editColumn('geo', 'name', mapcols)
+
+      if (!state.columns.hasOwnProperty('primary') || undefined === state.columns.primary.name || '' === state.columns.primary.name || !state.columns.primary.name) {
+        editColumn('primary', 'name', columnsInData[1]) // blindly picks first value col
+      }
+    }
+  }
+  if (isDebug) setGeoColumn()
+
   return (
     <ErrorBoundary component='EditorPanel'>
       {state?.runtime?.editorErrorMessage.length > 0 && <Error />}
@@ -1349,7 +1505,8 @@ const EditorPanel = props => {
                       }}
                     >
                       <option value='data'>Data</option>
-                      <option value='us-geocode'>United States Geocode</option>
+                      {state.general.geoType === 'us-county' && <option value='us-geocode'>Geocode</option>}
+                      {state.general.geoType === 'world' && <option value='world-geocode'>Geocode</option>}
                       <option value='navigation'>Navigation</option>
                       {(state.general.geoType === 'world' || state.general.geoType === 'us') && <option value='bubble'>Bubble</option>}
                     </select>
@@ -1403,9 +1560,11 @@ const EditorPanel = props => {
                 <AccordionItemPanel>
                   <TextField
                     value={general.title}
+                    data-testid='title-input'
                     updateField={updateField}
                     section='general'
                     fieldName='title'
+                    id='title'
                     label='Title'
                     placeholder='Map Title'
                     tooltip={
@@ -1414,11 +1573,21 @@ const EditorPanel = props => {
                           <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                         </Tooltip.Target>
                         <Tooltip.Content>
-                          <p>For accessibility reasons, you should enter a title even if you are not planning on displaying it.</p>
+                          <p>Title is required to set the name of the download file but can be hidden using the option below.</p>
                         </Tooltip.Content>
                       </Tooltip>
                     }
                   />
+                  <label className='checkbox'>
+                    <input
+                      type='checkbox'
+                      checked={state.general.showTitle || false}
+                      onChange={event => {
+                        handleEditorChanges('showTitle', event.target.checked)
+                      }}
+                    />
+                    <span className='edit-label'>Show Title</span>
+                  </label>
                   <TextField
                     value={general.superTitle || ''}
                     updateField={updateField}
@@ -1491,6 +1660,18 @@ const EditorPanel = props => {
                     }
                   />
                   {'us' === state.general.geoType && <TextField value={general.territoriesLabel} updateField={updateField} section='general' fieldName='territoriesLabel' label='Territories Label' placeholder='Territories' />}
+                  {'us' === state.general.geoType && (
+                    <label className='checkbox'>
+                      <input
+                        type='checkbox'
+                        checked={general.territoriesAlwaysShow || false}
+                        onChange={event => {
+                          handleEditorChanges('territoriesAlwaysShow', event.target.checked)
+                        }}
+                      />
+                      <span className='edit-label'>Show All Territories</span>
+                    </label>
+                  )}
                   {/* <label className="checkbox mt-4">
                     <input type="checkbox" checked={ state.general.showDownloadMediaButton } onChange={(event) => { handleEditorChanges("toggleDownloadMediaButton", event.target.checked) }} />
                     <span className="edit-label">Enable Media Download</span>
@@ -1677,8 +1858,7 @@ const EditorPanel = props => {
                       </label>
                     </fieldset>
                   )}
-
-                  {'us-geocode' === state.general.type && (
+                  {('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && (
                     <>
                       <label>Latitude Column</label>
                       <select
@@ -1905,35 +2085,42 @@ const EditorPanel = props => {
                           </Tooltip>
                         </span>
                       </label>
-                      {state.legend.additionalCategories && state.legend.additionalCategories.map((val, i) => (
-                        <fieldset className='edit-block' key={val}>
-                          <button
-                            className='remove-column'
-                            onClick={event => {
-                              event.preventDefault()
-                              const updatedAdditionaCategories = [...state.legend.additionalCategories];
-                              updatedAdditionaCategories.splice(i, 1);
-                              updateField('legend', null, 'additionalCategories', updatedAdditionaCategories);
-                            }}
-                          >
-                            Remove
-                          </button>
-                          <label>
-                            <span className='edit-label column-heading'>Category</span>
-                            <TextField value={val} section="legend" subsection={null} fieldName="additionalCategories" updateField={(section, subsection, fieldName, value) => {
-                              const updatedAdditionaCategories = [...state.legend.additionalCategories];
-                              updatedAdditionaCategories[i] = value;
-                              updateField(section, subsection, fieldName, updatedAdditionaCategories)
-                            }} />
-                          </label>
-                        </fieldset>
-                      ))}
+                      {state.legend.additionalCategories &&
+                        state.legend.additionalCategories.map((val, i) => (
+                          <fieldset className='edit-block' key={val}>
+                            <button
+                              className='remove-column'
+                              onClick={event => {
+                                event.preventDefault()
+                                const updatedAdditionaCategories = [...state.legend.additionalCategories]
+                                updatedAdditionaCategories.splice(i, 1)
+                                updateField('legend', null, 'additionalCategories', updatedAdditionaCategories)
+                              }}
+                            >
+                              Remove
+                            </button>
+                            <label>
+                              <span className='edit-label column-heading'>Category</span>
+                              <TextField
+                                value={val}
+                                section='legend'
+                                subsection={null}
+                                fieldName='additionalCategories'
+                                updateField={(section, subsection, fieldName, value) => {
+                                  const updatedAdditionaCategories = [...state.legend.additionalCategories]
+                                  updatedAdditionaCategories[i] = value
+                                  updateField(section, subsection, fieldName, updatedAdditionaCategories)
+                                }}
+                              />
+                            </label>
+                          </fieldset>
+                        ))}
                       <button
                         className={'btn full-width'}
                         onClick={event => {
                           event.preventDefault()
-                          const updatedAdditionaCategories = [...(state.legend.additionalCategories || [])];
-                          updatedAdditionaCategories.push('');
+                          const updatedAdditionaCategories = [...(state.legend.additionalCategories || [])]
+                          updatedAdditionaCategories.push('')
                           updateField('legend', null, 'additionalCategories', updatedAdditionaCategories)
                         }}
                       >
@@ -2016,6 +2203,18 @@ const EditorPanel = props => {
                         <span className='edit-label'>Single Row Legend</span>
                       </label>
                     )}
+                    {/* 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> */}
                     {'category' !== legend.type && (
                       <label className='checkbox'>
                         <input type='checkbox' checked={legend.separateZero || false} onChange={event => handleEditorChanges('separateZero', event.target.checked)} />
@@ -2033,7 +2232,6 @@ const EditorPanel = props => {
                       </label>
                     )}
                     {/* Temp Checkbox */}
-
                     {state.legend.type === 'equalnumber' && (
                       <label className='checkbox mt-4'>
                         <input
@@ -2197,7 +2395,7 @@ const EditorPanel = props => {
                     <AccordionItemButton>Filters</AccordionItemButton>
                   </AccordionItemHeading>
                   <AccordionItemPanel>
-                    {filtersJSX.length > 0 ? filtersJSX : <p style={{ textAlign: 'center' }}>There are currently no filters.</p>}
+                    {filtersJSX.length > 0 ? <MapFilters /> : <p style={{ textAlign: 'center' }}>There are currently no filters.</p>}
                     <button
                       className={'btn full-width'}
                       onClick={event => {
@@ -2223,6 +2421,7 @@ const EditorPanel = props => {
                       updateField={updateField}
                       section='dataTable'
                       fieldName='title'
+                      id='dataTableTitle'
                       label='Data Table Title'
                       placeholder='Data Table'
                       tooltip={
@@ -2236,6 +2435,26 @@ const EditorPanel = props => {
                         </Tooltip>
                       }
                     />
+                    <label className='checkbox'>
+                      <input
+                        type='checkbox'
+                        checked={state.dataTable.forceDisplay !== undefined ? state.dataTable.forceDisplay : !isDashboard}
+                        onChange={event => {
+                          handleEditorChanges('showDataTable', event.target.checked)
+                        }}
+                      />
+                      <span className='edit-label column-heading'>
+                        Show Data Table
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Data tables are required for 508 compliance. When choosing to hide this data table, replace with your own version.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      </span>
+                    </label>
                     <TextField
                       value={dataTable.indexLabel || ''}
                       updateField={updateField}
@@ -2273,26 +2492,6 @@ const EditorPanel = props => {
                       }
                       type='textarea'
                     />
-                    <label className='checkbox'>
-                      <input
-                        type='checkbox'
-                        checked={state.dataTable.forceDisplay !== undefined ? state.dataTable.forceDisplay : !isDashboard}
-                        onChange={event => {
-                          handleEditorChanges('showDataTable', event.target.checked)
-                        }}
-                      />
-                      <span className='edit-label'>
-                        Show Table
-                        <Tooltip style={{ textTransform: 'none' }}>
-                          <Tooltip.Target>
-                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                          </Tooltip.Target>
-                          <Tooltip.Content>
-                            <p>Data tables are required for 508 compliance. When choosing to hide this data table, replace with your own version.</p>
-                          </Tooltip.Content>
-                        </Tooltip>
-                      </span>
-                    </label>
                     <label className='checkbox'>
                       <input
                         type='checkbox'
@@ -2314,16 +2513,30 @@ const EditorPanel = props => {
                       />
                       <span className='edit-label'>Map loads with data table expanded</span>
                     </label>
-                    <label className='checkbox'>
-                      <input
-                        type='checkbox'
-                        checked={state.table.showDownloadUrl}
-                        onChange={event => {
-                          handleEditorChanges('toggleDataUrl', event.target.checked)
-                        }}
-                      />
-                      <span className='edit-label'>Enable Link to Dataset</span>
-                    </label>
+                    {isDashboard && (
+                      <label className='checkbox'>
+                        <input
+                          type='checkbox'
+                          checked={state.table.showDataTableLink}
+                          onChange={event => {
+                            handleEditorChanges('toggleDataTableLink', event.target.checked)
+                          }}
+                        />
+                        <span className='edit-label'>Show Data Table Name & Link</span>
+                      </label>
+                    )}
+                    {isLoadedFromUrl && (
+                      <label className='checkbox'>
+                        <input
+                          type='checkbox'
+                          checked={state.table.showDownloadUrl}
+                          onChange={event => {
+                            handleEditorChanges('toggleDataUrl', event.target.checked)
+                          }}
+                        />
+                        <span className='edit-label'>Show URL to Automatically Updated Data</span>
+                      </label>
+                    )}
                     <label className='checkbox'>
                       <input
                         type='checkbox'
@@ -2332,7 +2545,7 @@ const EditorPanel = props => {
                           handleEditorChanges('toggleDownloadButton', event.target.checked)
                         }}
                       />
-                      <span className='edit-label'>Enable Download CSV Button</span>
+                      <span className='edit-label'>Show Download CSV Link</span>
                     </label>
                     {/* <label className='checkbox'>
                       <input
@@ -2434,8 +2647,6 @@ const EditorPanel = props => {
                     <span className='edit-label'>Show Title</span>
                   </label>
 
-
-
                   {'navigation' === state.general.type && (
                     <label className='checkbox'>
                       <input
@@ -2464,10 +2675,10 @@ const EditorPanel = props => {
                     <span className='edit-label'>Map Color Palette</span>
                   </label>
                   {/* <InputCheckbox  section="general" subsection="palette"  fieldName='isReversed'  size='small' label='Use selected palette in reverse order'   updateField={updateField}  value={isPaletteReversed} /> */}
-                  <InputToggle type='3d' section='general' subsection='palette' fieldName='isReversed' size='small' label='Use selected palette in reverse order' updateField={updateField} value={isPaletteReversed} />
+                  <InputToggle type='3d' section='general' subsection='palette' fieldName='isReversed' size='small' label='Use selected palette in reverse order' updateField={updateField} value={state.general.palette.isReversed} />
                   <span>Sequential</span>
                   <ul className='color-palette'>
-                    {filteredPallets.map(palette => {
+                    {sequential.map(palette => {
                       const colorOne = {
                         backgroundColor: colorPalettes[palette][2]
                       }
@@ -2498,7 +2709,7 @@ const EditorPanel = props => {
                   </ul>
                   <span>Non-Sequential</span>
                   <ul className='color-palette'>
-                    {filteredQualitative.map(palette => {
+                    {nonSequential.map(palette => {
                       const colorOne = {
                         backgroundColor: colorPalettes[palette][2]
                       }
@@ -2531,7 +2742,7 @@ const EditorPanel = props => {
                       )
                     })}
                   </ul>
-                  {'us-geocode' === state.general.type && (
+                  {('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && (
                     <label>
                       Geocode Settings
                       <TextField type='number' value={state.visual.geoCodeCircleSize} section='visual' max='10' fieldName='geoCodeCircleSize' label='Geocode Circle Size' updateField={updateField} />
@@ -2581,7 +2792,8 @@ const EditorPanel = props => {
                     </label>
                   )}
                   {state.general.geoType === 'us' ||
-                    (state.general.geoType === 'us-county' && (
+                    state.general.geoType === 'us-county' ||
+                    (state.general.geoType === 'world' && (
                       <label>
                         <span className='edit-label'>City Style</span>
                         <select
@@ -2597,6 +2809,45 @@ const EditorPanel = props => {
                     ))}
                 </AccordionItemPanel>
               </AccordionItem>
+              {/* HIDING FOR 4.23.4 */}
+              {/* <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>Custom Map Layers</AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  {state.map.layers.length === 0 && <p>There are currently no layers.</p>}
+
+                  {state.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 => handleMapLayerName(e, index)} />
+                                <label htmlFor='layerFilename'>File:</label>
+                                <input type='text' name='layerFilename' value={layer.url} onChange={e => handleMapLayerUrl(e, index)} />
+                                <label htmlFor='layerNamespace'>TOPOJSON Namespace:</label>
+                                <input type='text' name='layerNamespace' value={layer.namespace} onChange={e => handleMapLayerNamespace(e, index)} />
+                                <label htmlFor='layerTooltip'>Tooltip:</label>
+                                <textarea name='layerTooltip' value={layer.tooltip} onChange={e => handleMapLayerTooltip(e, index)}></textarea>
+                                <button onClick={e => handleRemoveLayer(e, index)}>Remove Layer</button>
+                              </div>
+                            </AccordionItemPanel>
+                          </AccordionItem>
+                        </Accordion>
+                      </>
+                    )
+                  })}
+                  <button className={'btn full-width'} onClick={handleAddLayer}>
+                    Add Map Layer
+                  </button>
+                </AccordionItemPanel>
+              </AccordionItem> */}
             </Accordion>
           </form>
           <AdvancedEditor loadConfig={loadConfig} state={state} convertStateToConfig={convertStateToConfig} />