@cdc/map 4.24.12 → 4.25.2-25

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

@@ -26,6 +26,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Icon from '@cdc/core/components/ui/Icon'
 import InputToggle from '@cdc/core/components/inputs/InputToggle'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
+import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
 
 // Assets
 import UsaGraphic from '@cdc/core/assets/icon-map-usa.svg'
@@ -37,28 +38,23 @@ import usaDefaultConfig from '../../../../examples/default-usa.json'
 import countyDefaultConfig from '../../../../examples/default-county.json'
 import useMapLayers from '../../../hooks/useMapLayers.tsx'
 
-import { useFilters } from '@cdc/core/components/Filters'
-
 import HexSetting from './HexShapeSettings.jsx'
 import ConfigContext from '../../../context.ts'
 import { MapContext } from '../../../types/MapContext.js'
-import { TextField } from './Inputs'
 import Alert from '@cdc/core/components/Alert'
+import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
+import { CheckBox, Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
 
 // Todo: move to useReducer, seperate files out.
 const EditorPanel = ({ columnsRequiredChecker }) => {
   // prettier-ignore
   const {
-    changeFilterActive,
-    columnsInData = [],
     isDashboard,
     isDebug,
-    isEditor,
     loadConfig,
     runtimeFilters,
     runtimeLegend,
     setParentConfig,
-    setRuntimeFilters,
     setState,
     state,
     tooltipId,
@@ -70,6 +66,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   } = useContext<MapContext>(ConfigContext)
 
   const { general, columns, legend, table, tooltips } = state
+  const columnsInData = state?.data?.[0] ? Object.keys(state.data[0]) : []
 
   const [configTextboxValue, setConfigTextbox] = useState({}) // eslint-disable-line
 
@@ -79,13 +76,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
   const [activeFilterValueForDescription, setActiveFilterValueForDescription] = useState([0, 0])
 
-  const { handleFilterOrder, filterOrderOptions, filterStyleOptions } = useFilters({
-    config: state,
-    setConfig: setState,
-    filteredData: runtimeFilters,
-    setFilteredData: setRuntimeFilters
-  })
-
   const headerColors = [
     'theme-blue',
     'theme-purple',
@@ -241,6 +231,15 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
   const handleEditorChanges = async (property, value) => {
     switch (property) {
+      case 'navigationTarget':
+        setState({
+          ...state,
+          general: {
+            ...state.general,
+            navigationTarget: value
+          }
+        })
+        break
       // change these to be more generic.
       // updateVisualPropertyValue
       // updateGeneralPropertyValue, etc.
@@ -725,6 +724,14 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               }
             })
             break
+          case 'google-map':
+            setState({
+              ...state,
+              general: {
+                ...state.general,
+                geoType: 'google-map'
+              }
+            })
           default:
             break
         }
@@ -1073,42 +1080,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     })
   }
 
-  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>
-        <label>
-          <TextField
-            type='textarea'
-            value={state.filterIntro}
-            fieldName='filterIntro'
-            label='Filter Intro text'
-            updateField={updateField}
-          />
-        </label>
-        {filtersJSX}
-      </>
-    )
-  }
-
   const removeAdditionalColumn = columnName => {
     const newColumns = state.columns
 
@@ -1271,38 +1242,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     return true
   })
 
-  const updateField = (section, subsection, fieldName, newValue) => {
-    if (!section) {
-      setState({
-        ...state,
-        [fieldName]: newValue
-      })
-      return
-    }
-
-    const isArray = Array.isArray(state[section])
-
-    let sectionValue = isArray ? [...state[section], newValue] : { ...state[section], [fieldName]: newValue }
-
-    if (null !== subsection) {
-      if (isArray) {
-        sectionValue = [...state[section]]
-        sectionValue[subsection] = { ...sectionValue[subsection], [fieldName]: newValue }
-      } else {
-        sectionValue = {
-          ...state[section],
-          [subsection]: { ...state[section][subsection], [fieldName]: newValue }
-        }
-      }
-    }
-
-    let updatedState = {
-      ...state,
-      [section]: sectionValue
-    }
-
-    setState(updatedState)
-  }
+  const updateField = updateFieldFactory(state, setState)
 
   const onBackClick = () => {
     setDisplayPanel(!displayPanel)
@@ -1314,163 +1254,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
   const usedFilterColumns = {}
 
-  const filtersJSX = state.filters.map((filter, index) => {
-    if (filter.type === 'url') return <></>
-
-    if (filter.columnName) {
-      usedFilterColumns[filter.columnName] = true
-    }
-
-    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)
-              }}
-            >
-              {columnsOptions.filter(({ key }) => undefined === usedFilterColumns[key] || filter.columnName === key)}
-            </select>
-          </label>
-
-          <label>
-            <span className='edit-showDropdown column-heading'>Show Filter Input</span>
-            <input
-              type='checkbox'
-              checked={filter.showDropdown === undefined ? true : filter.showDropdown}
-              onChange={e => {
-                changeFilter(index, 'showDropdown', e.target.checked)
-              }}
-            />
-          </label>
-
-          <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>
-
-          <TextField
-            value={state.filters[index].setByQueryParameter}
-            section='filters'
-            subsection={index}
-            fieldName='setByQueryParameter'
-            label='Default Value Set By Query String Parameter'
-            updateField={updateField}
-          />
-
-          {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>
-      </>
-    )
-  })
-
   const StateOptionList = () => {
     const arrOfArrays = Object.entries(supportedStatesFipsCodes)
 
@@ -1564,27 +1347,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
   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'>
       <Layout.Sidebar
@@ -1602,14 +1364,15 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               <AccordionItemButton>Type</AccordionItemButton>
             </AccordionItemHeading>
             <AccordionItemPanel>
-              {/* Geography */}
               <label>
                 <span className='edit-label column-heading'>
                   <span>Geography</span>
                 </span>
-                <ul className='geo-buttons'>
+                <ul className='geo-buttons d-grid' style={{ gridTemplateColumns: 'repeat(2, 1fr)', gap: '8px' }}>
                   <button
-                    className={state.general.geoType === 'us' || state.general.geoType === 'us-county' ? 'active' : ''}
+                    className={`${
+                      state.general.geoType === 'us' || state.general.geoType === 'us-county' ? 'active' : ''
+                    } full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'us')
@@ -1619,7 +1382,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <span>United States</span>
                   </button>
                   <button
-                    className={state.general.geoType === 'us-region' ? 'active' : ''}
+                    className={`${state.general.geoType === 'us-region' ? 'active' : ''} full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'us-region')
@@ -1629,7 +1392,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <span>U.S. Region</span>
                   </button>
                   <button
-                    className={state.general.geoType === 'world' ? 'active' : ''}
+                    className={`${state.general.geoType === 'world' ? 'active' : ''} full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'world')
@@ -1639,7 +1402,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <span>World</span>
                   </button>
                   <button
-                    className={state.general.geoType === 'single-state' ? 'active' : ''}
+                    className={`${state.general.geoType === 'single-state' ? 'active' : ''} full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'single-state')
@@ -1652,37 +1415,35 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               </label>
               {/* Select > State or County Map */}
               {(state.general.geoType === 'us' || state.general.geoType === 'us-county') && (
-                <label>
-                  <span className='edit-label column-heading'>Geography Subtype</span>
-                  <select
-                    value={state.general.geoType}
-                    onChange={event => {
-                      handleEditorChanges('geoType', event.target.value)
-                    }}
-                  >
-                    <option value='us'>US State-Level</option>
-                    <option value='us-county'>US County-Level</option>
-                  </select>
-                </label>
+                <Select
+                  label='Geography Subtype'
+                  value={state.general.geoType}
+                  options={[
+                    { value: 'us', label: 'US State-Level' },
+                    { value: 'us-county', label: 'US County-Level' }
+                  ]}
+                  onChange={event => {
+                    handleEditorChanges('geoType', event.target.value)
+                  }}
+                />
               )}
               {(state.general.geoType === 'us-county' || state.general.geoType === 'single-state') && (
-                <label>
-                  <span className='edit-label column-heading'>County Census Year</span>
-                  <select
-                    value={state.general.countyCensusYear || '2019'}
-                    onChange={event => {
-                      handleEditorChanges('countyCensusYear', event.target.value)
-                    }}
-                  >
-                    <option value='2022'>2022</option>
-                    <option value='2021'>2021</option>
-                    <option value='2020'>2020</option>
-                    <option value='2019'>2019</option>
-                    <option value='2015'>2015</option>
-                    <option value='2014'>2014</option>
-                    <option value='2013'>2013</option>
-                  </select>
-                </label>
+                <Select
+                  label='County Census Year'
+                  value={state.general.countyCensusYear || '2019'}
+                  options={[
+                    { value: '2022', label: '2022' },
+                    { value: '2021', label: '2021' },
+                    { value: '2020', label: '2020' },
+                    { value: '2019', label: '2019' },
+                    { value: '2015', label: '2015' },
+                    { value: '2014', label: '2014' },
+                    { value: '2013', label: '2013' }
+                  ]}
+                  onChange={event => {
+                    handleEditorChanges('countyCensusYear', event.target.value)
+                  }}
+                />
               )}
               {(state.general.geoType === 'us-county' || state.general.geoType === 'single-state') && (
                 <label>
@@ -1730,36 +1491,52 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 </label>
               )}
               {/* Type */}
-              <label>
-                <span className='edit-label column-heading'>
-                  Map Type
-                  <Tooltip style={{ textTransform: 'none' }}>
-                    <Tooltip.Target>
-                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                    </Tooltip.Target>
-                    <Tooltip.Content>
-                      <p>
-                        Select "Data" to create a color-coded data map. To create a navigation-only map, select
-                        "Navigation."
-                      </p>
-                    </Tooltip.Content>
-                  </Tooltip>
-                </span>
-                <select
-                  value={state.general.type}
+              <Select
+                label={
+                  <>
+                    Map Type
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>
+                          Select "Data" to create a color-coded data map. To create a navigation-only map, select
+                          "Navigation."
+                        </p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  </>
+                }
+                value={state.general.type}
+                options={[
+                  { value: 'data', label: 'Data' },
+                  ...(state.general.geoType === 'us-county' ? [{ value: 'us-geocode', label: 'Geocode' }] : []),
+                  ...(state.general.geoType === 'world' ? [{ value: 'world-geocode', label: 'Geocode' }] : []),
+                  ...(state.general.geoType !== 'us-county' ? [{ value: 'navigation', label: 'Navigation' }] : []),
+                  ...(state.general.geoType === 'world' || state.general.geoType === 'us'
+                    ? [{ value: 'bubble', label: 'Bubble' }]
+                    : [])
+                ]}
+                onChange={event => {
+                  handleEditorChanges('editorMapType', event.target.value)
+                }}
+              />
+
+              {/* Navigation Behavior */}
+              {(state.general.type === 'navigation' || state.general.type === 'data') && (
+                <Select
+                  label='Navigation Behavior'
+                  value={state.general.navigationTarget}
+                  options={[
+                    { value: '_self', label: 'Same Window' },
+                    { value: '_blank', label: 'New Window' }
+                  ]}
                   onChange={event => {
-                    handleEditorChanges('editorMapType', event.target.value)
+                    handleEditorChanges('navigationTarget', event.target.value)
                   }}
-                >
-                  <option value='data'>Data</option>
-                  {state.general.geoType === 'us-county' && <option value='us-geocode'>Geocode</option>}
-                  {state.general.geoType === 'world' && <option value='world-geocode'>Geocode</option>}
-                  {state.general.geoType !== 'us-county' && <option value='navigation'>Navigation</option>}
-                  {(state.general.geoType === 'world' || state.general.geoType === 'us') && (
-                    <option value='bubble'>Bubble</option>
-                  )}
-                </select>
-              </label>
+                />
+              )}
               <label>
                 <span className='edit-label'>Data Classification Type</span>
                 <div>
@@ -1793,17 +1570,37 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               {'us' === state.general.geoType &&
                 'bubble' !== state.general.type &&
                 false === state.general.displayAsHex && (
-                  <label className='checkbox'>
-                    <input
-                      type='checkbox'
-                      checked={state.general.displayStateLabels}
-                      onChange={event => {
-                        handleEditorChanges('displayStateLabels', event.target.checked)
-                      }}
-                    />
-                    <span className='edit-label'>Show state labels</span>
-                  </label>
+                  <CheckBox
+                    label='Show state labels'
+                    checked={state.general.displayStateLabels}
+                    onChange={event => {
+                      handleEditorChanges('displayStateLabels', event.target.checked)
+                    }}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>Recommended set to display for Section 508 compliance.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
                 )}
+
+              {'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>
+              )}
             </AccordionItemPanel>
           </AccordionItem>
           <AccordionItem>
@@ -1919,28 +1716,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   </Tooltip>
                 }
               />
-              {'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>
@@ -1970,14 +1746,13 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </Tooltip.Content>
                     </Tooltip>
                   </span>
-                  <select
+                  <Select
                     value={state.columns.geo ? state.columns.geo.name : columnsOptions[0]}
+                    options={columnsOptions.map(c => c.key)}
                     onChange={event => {
                       editColumn('geo', 'name', event.target.value)
                     }}
-                  >
-                    {columnsOptions}
-                  </select>
+                  />
                 </label>
                 {state.general.type === 'us-geocode' && (
                   <label className='checkbox'>
@@ -2029,9 +1804,17 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               </fieldset>
               {'navigation' !== state.general.type && (
                 <fieldset className='primary-fieldset edit-block'>
-                  <label>
-                    <span className='edit-label column-heading'>
-                      Data Column
+                  <Select
+                    label='Data Column'
+                    value={columns.primary.name}
+                    options={columnsOptions.map(c => c.key)}
+                    onChange={event => {
+                      const _state = _.cloneDeep(state)
+                      _state.columns.primary.name = event.target.value
+                      _state.columns.primary.label = event.target.value
+                      setState(_state)
+                    }}
+                    tooltip={
                       <Tooltip style={{ textTransform: 'none' }}>
                         <Tooltip.Target>
                           <Icon display='question' style={{ marginLeft: '0.5rem' }} />
@@ -2040,16 +1823,8 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                           <p>Select the source column containing the categorical or numeric values to be mapped.</p>
                         </Tooltip.Content>
                       </Tooltip>
-                    </span>
-                    <select
-                      value={state.columns.primary ? state.columns.primary.name : columnsOptions[0]}
-                      onChange={event => {
-                        editColumn('primary', 'name', event.target.value)
-                      }}
-                    >
-                      {columnsOptions}
-                    </select>
-                  </label>
+                    }
+                  />
                   <label className='checkbox'>
                     <input
                       type='checkbox'
@@ -2174,24 +1949,22 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               )}
               {
                 <>
-                  <label>Latitude Column</label>
-                  <select
-                    value={state.columns.latitude.name ? state.columns.latitude.name : ''}
+                  <Select
+                    label='Latitude Column'
+                    value={state.columns.latitude.name}
+                    options={columnsOptions.map(c => c.key)}
                     onChange={e => {
                       editColumn('latitude', 'name', e.target.value)
                     }}
-                  >
-                    {columnsOptions}
-                  </select>
-                  <label>Longitude Column</label>
-                  <select
-                    value={state.columns.longitude.name ? state.columns.longitude.name : ''}
+                  />
+                  <Select
+                    label='Longitude Column'
+                    value={state.columns.longitude.name}
+                    options={columnsOptions.map(c => c.key)}
                     onChange={e => {
                       editColumn('longitude', 'name', e.target.value)
                     }}
-                  >
-                    {columnsOptions}
-                  </select>
+                  />
                 </>
               }
 
@@ -2309,14 +2082,13 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </Tooltip.Content>
                   </Tooltip>
                 </span>
-                <select
-                  value={state.columns.navigate ? state.columns.navigate.name : columnsOptions[0]}
+                <Select
+                  value={state.columns.navigate ? state.columns.navigate.name : ''}
+                  options={columnsOptions.map(c => c.key)}
                   onChange={event => {
                     editColumn('navigate', 'name', event.target.value)
                   }}
-                >
-                  {columnsOptions}
-                </select>
+                />
               </label>
               {'navigation' !== state.general.type && (
                 <fieldset className='primary-fieldset edit-block'>
@@ -2514,18 +2286,17 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               </AccordionItemHeading>
               <AccordionItemPanel>
                 {(state.legend.type === 'equalnumber' || state.legend.type === 'equalinterval') && (
-                  <label>
-                    <span className='edit-label'>Legend Type</span>
-                    <select
-                      value={legend.type}
-                      onChange={event => {
-                        handleEditorChanges('legendType', event.target.value)
-                      }}
-                    >
-                      <option value='equalnumber'>Equal Number (Quantiles)</option>
-                      <option value='equalinterval'>Equal Interval</option>
-                    </select>
-                  </label>
+                  <Select
+                    label='Legend Type'
+                    value={legend.type}
+                    options={[
+                      { value: 'equalnumber', label: 'Equal Number (Quantiles)' },
+                      { value: 'equalinterval', label: 'Equal Interval' }
+                    ]}
+                    onChange={event => {
+                      handleEditorChanges('legendType', event.target.value)
+                    }}
+                  />
                 )}
                 {'navigation' !== state.general.type && (
                   <label className='checkbox'>
@@ -2541,19 +2312,18 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 )}
                 {'navigation' !== state.general.type && (
                   <>
-                    <label>
-                      <span className='edit-label'>Legend Position</span>
-                      <select
-                        value={legend.position || false}
-                        onChange={event => {
-                          handleEditorChanges('sidebarPosition', event.target.value)
-                        }}
-                      >
-                        <option value='side'>Side</option>
-                        <option value='bottom'>Bottom</option>
-                        <option value='top'>Top</option>
-                      </select>
-                    </label>
+                    <Select
+                      label='Legend Position'
+                      value={legend.position || ''}
+                      options={[
+                        { value: 'side', label: 'Side' },
+                        { value: 'bottom', label: 'Bottom' },
+                        { value: 'top', label: 'Top' }
+                      ]}
+                      onChange={event => {
+                        handleEditorChanges('sidebarPosition', event.target.value)
+                      }}
+                    />
                     {(state.legend.position === 'side' || !state.legend.position) &&
                       state.legend.style === 'gradient' && (
                         <span style={{ color: 'red', fontSize: '14px' }}>
@@ -2563,36 +2333,36 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   </>
                 )}
                 {'navigation' !== state.general.type && (
-                  <label>
-                    <span className='edit-label column-heading'>
-                      Legend Style
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon
-                            display='question'
-                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
-                          />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>
-                            If using gradient style, limit the legend to five items for better mobile visibility, and
-                            position the legend at the top or bottom.
-                          </p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    </span>
-
-                    <select
-                      value={legend.style || ''}
-                      onChange={event => {
-                        handleEditorChanges('legendStyle', event.target.value)
-                      }}
-                    >
-                      <option value='circles'>circles</option>
-                      <option value='boxes'>boxes</option>
-                      {legend.position !== 'side' && <option value='gradient'>gradient</option>}
-                    </select>
-                  </label>
+                  <Select
+                    label={
+                      <>
+                        Legend Style
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon
+                              display='question'
+                              style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                            />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>
+                              If using gradient style, limit the legend to five items for better mobile visibility, and
+                              position the legend at the top or bottom.
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      </>
+                    }
+                    value={legend.style || ''}
+                    options={[
+                      { value: 'circles', label: 'circles' },
+                      { value: 'boxes', label: 'boxes' },
+                      ...(legend.position !== 'side' ? [{ value: 'gradient', label: 'gradient' }] : [])
+                    ]}
+                    onChange={event => {
+                      handleEditorChanges('legendStyle', event.target.value)
+                    }}
+                  />
                 )}
                 {'navigation' !== state.general.type && state.legend.style === 'gradient' && (
                   <label>
@@ -2742,36 +2512,32 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   </label>
                 )}
                 {'category' !== legend.type && (
-                  <label>
-                    <span className='edit-label'>
-                      Number of Items
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>
-                            For numeric maps, select the number of data classes. Do not include designated special
-                            classes.
-                          </p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    </span>
-                    <select
-                      value={legend.numberOfItems}
-                      onChange={event => {
-                        handleEditorChanges('legendNumber', event.target.value)
-                      }}
-                    >
-                      {[...Array(numberOfItemsLimit).keys()].map(num => {
-                        return (
-                          <option value={num + 1} key={num + 1}>
-                            {num + 1}
-                          </option>
-                        )
-                      })}
-                    </select>
-                  </label>
+                  <Select
+                    label={
+                      <>
+                        Number of Items
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>
+                              For numeric maps, select the number of data classes. Do not include designated special
+                              classes.
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      </>
+                    }
+                    value={legend.numberOfItems}
+                    options={[...Array(numberOfItemsLimit).keys()].map(num => ({
+                      value: num + 1,
+                      label: num + 1
+                    }))}
+                    onChange={event => {
+                      handleEditorChanges('legendNumber', event.target.value)
+                    }}
+                  />
                 )}
                 {'category' === legend.type && (
                   <React.Fragment>
@@ -2857,7 +2623,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </label>
                   </React.Fragment>
                 )}
-                {filtersJSX.length > 0 && (
+                {state.filters.length > 0 && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
@@ -2885,7 +2651,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </span>
                   </label>
                 )}
-                {(filtersJSX.length > 0 || state.general.type === 'bubble' || state.general.geoType === 'us') && (
+                {(state.filters.length > 0 || state.general.type === 'bubble' || state.general.geoType === 'us') && (
                   <label className='checkbox'>
                     <input
                       type='checkbox'
@@ -2922,20 +2688,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                 <AccordionItemButton>Filters</AccordionItemButton>
               </AccordionItemHeading>
               <AccordionItemPanel>
-                {filtersJSX.length > 0 ? (
-                  <MapFilters />
-                ) : (
-                  <p style={{ textAlign: 'center' }}>There are currently no filters.</p>
-                )}
-                <button
-                  className={'btn btn-primary full-width'}
-                  onClick={event => {
-                    event.preventDefault()
-                    changeFilter(null, 'addNew')
-                  }}
-                >
-                  Add Filter
-                </button>
+                <VizFilterEditor config={state} updateField={updateField} rawData={state.data} />
               </AccordionItemPanel>
             </AccordionItem>
           )}
@@ -3563,6 +3316,18 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   updateField={updateField}
                 />
               </label>
+              {/* Leaflet Map Type */}
+              {state.general.geoType === 'leaflet' && (
+                <>
+                  <Select
+                    label='Leaflet Theme'
+                    options={layerOptions}
+                    section={'leaflet'}
+                    fieldName='theme'
+                    updateField={updateField}
+                  />
+                </>
+              )}
             </AccordionItemPanel>
           </AccordionItem>
           <AccordionItem>