@cdc/chart 4.24.4 → 4.24.7

package/src/components/EditorPanel/EditorPanel.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, memo, useContext } from 'react'
-import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+import { DragDropContext, Droppable } from '@hello-pangea/dnd'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
 import Layout from '@cdc/core/components/Layout'
@@ -8,18 +8,18 @@ import Layout from '@cdc/core/components/Layout'
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Icon from '@cdc/core/components/ui/Icon'
-import InputToggle from '@cdc/core/components/inputs/InputToggle'
+import ColumnsEditor from '@cdc/core/components/EditorPanel/ColumnsEditor'
+import DataTableEditor from '@cdc/core/components/EditorPanel/DataTableEditor'
+import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import { Select, TextField, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import { viewports } from '@cdc/core/helpers/getViewport'
 
 // chart components
 import Panels from './components/Panels'
-import Series from './components/Panel.Series.jsx'
 
 // cdc additional
-import { useColorPalette } from '../../hooks/useColorPalette'
 import { useEditorPermissions } from './useEditorPermissions'
-import { useFilters } from '@cdc/core/components/Filters'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import ConfigContext from '../../ConfigContext'
 import useReduceData from '../../hooks/useReduceData'
@@ -27,113 +27,56 @@ import useRightAxis from '../../hooks/useRightAxis'
 import WarningImage from '../../images/warning.svg'
 import useMinMax from '../../hooks/useMinMax'
 
-import { type ChartConfig } from '../../types/ChartConfig'
 import { type ChartContext } from '../../types/ChartContext'
+import { type ChartConfig } from '../../types/ChartConfig'
 
 import './editor-panel.scss'
 import { Anchor } from '@cdc/core/types/Axis'
-import DataTableEditor from '@cdc/core/components/EditorPanel/DataTableEditor'
 import EditorPanelContext from './EditorPanelContext'
+import _ from 'lodash'
+import { adjustedSymbols as symbolCodes } from '@cdc/core/helpers/footnoteSymbols'
 
-const DataSuppression = memo(({ config, updateConfig, data }: any) => {
-  const getColumnOptions = () => {
-    const keys = new Set()
-    data.forEach(d => {
-      Object.keys(d).forEach(key => {
-        keys.add(key)
-      })
-    })
-    return [...keys]
-  }
-
-  const getIconOptions = () => {
-    return ['star']
-  }
-
-  let removeColumn = i => {
-    let suppressedData = []
-
-    if (config.suppressedData) {
-      suppressedData = [...config.suppressedData]
-    }
-
-    suppressedData.splice(i, 1)
+interface PreliminaryProps {
+  config: ChartConfig
+  updateConfig: Function
+  data: Record<string, any>[]
+}
 
-    updateConfig({ ...config, suppressedData })
-  }
+const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, data }) => {
+  const isCombo = config.visualizationType === 'Combo'
+  const lineSeriesExists = config.runtime.lineSeriesKeys?.length > 0
+  const barSeriesExists = config.runtime.barSeriesKeys?.length > 0
+  const hasComboLineSeries = isCombo && lineSeriesExists
+  const hasComboBarSeries = isCombo && barSeriesExists
 
-  let addColumn = () => {
-    let suppressedData = config.suppressedData ? [...config.suppressedData] : []
-    suppressedData.push({ label: '', column: '', value: '', icon: '' })
-    updateConfig({ ...config, suppressedData })
+  const getColumnOptions = () => {
+    return _.uniq(_.flatMap(data, _.keys))
   }
 
-  let update = (fieldName, value, i) => {
-    let suppressedData = []
-
-    if (config.suppressedData) {
-      suppressedData = [...config.suppressedData]
-    }
-
-    suppressedData[i][fieldName] = value
-    updateConfig({ ...config, suppressedData })
+  const getTypeOptions = () => {
+    return config.visualizationType === 'Line' || hasComboLineSeries ? ['effect', 'suppression'] : ['suppression']
   }
 
-  return (
-    <>
-      {config.suppressedData &&
-        config.suppressedData.map(({ label, column, value, icon }, i) => {
-          return (
-            <div key={`suppressed-${i}`} className='edit-block'>
-              <button
-                type='button'
-                className='remove-column'
-                onClick={event => {
-                  event.preventDefault()
-                  removeColumn(i)
-                }}
-              >
-                Remove
-              </button>
-              <Select value={column} initial='Select' fieldName='column' label='Column' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={getColumnOptions()} />
-              <TextField value={value} fieldName='value' label='Value' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} />
-              <Select value={icon} initial='Select' fieldName='icon' label='Icon' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={getIconOptions()} />
-              <TextField value={label} fieldName='label' label='Label' placeholder='suppressed' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} />
-            </div>
-          )
-        })}
-
-      <button type='button' onClick={addColumn} className='btn full-width'>
-        Add Suppression Class
-      </button>
-    </>
-  )
-})
-const PreliminaryData = memo(({ config, updateConfig, data }) => {
-  const getColumnOptions = () => {
-    const keys = new Set()
-    data.forEach(d => {
-      Object.keys(d).forEach(key => {
-        keys.add(key)
-      })
-    })
-    return [...keys]
+  const lineCodes = {
+    'Dashed Small': '\u002D \u002D \u002D',
+    'Dashed Medium': '\u2013 \u2013',
+    'Dashed Large': '\u2014 \u2013',
+    'Open Circles': '\u25EF',
+    'Filled Circles': ''
   }
 
-  const getTypeOptions = () => {
-    if (config.visualizationType === 'Line' || config.visualizationType === 'Combo') {
-      return ['effect']
+  const getStyleOptions = type => {
+    const options = Object.keys(lineCodes)
+    if (type === 'suppression') {
+      return options.slice(0, -1)
     } else {
-      return ['suppression']
+      return options
     }
   }
 
-  const getStyleOptions = () => {
-    if (config.visualizationType === 'Line' || config.visualizationType === 'Combo') {
-      return ['Dashed Small', 'Dashed Medium', 'Dashed Large', 'Open Circles']
-    }
-    if (config.visualizationType === 'Bar') {
-      return ['star']
+  const getSymbolOptions = () => {
+    if (config.visualizationType === 'Bar' || hasComboBarSeries) {
+      return Object.keys(symbolCodes)
     }
   }
 
@@ -150,8 +93,26 @@ const PreliminaryData = memo(({ config, updateConfig, data }) => {
   }
 
   let addColumn = () => {
+    const defaultType = config.visualizationType === 'Line' ? 'effect' : 'suppression'
     let preliminaryData = config.preliminaryData ? [...config.preliminaryData] : []
-    preliminaryData.push({ type: '', label: '', column: '', value: '', style: '' })
+    const defaultValues = {
+      type: defaultType,
+      seriesKey: '',
+      label: 'Suppressed',
+      column: '',
+      value: '',
+      style: '',
+      displayTooltip: true,
+      displayLegend: true,
+      displayTable: true,
+      symbol: '',
+      iconCode: '',
+      lineCode: '',
+      hideBarSymbol: false,
+      hideLineStyle: false,
+      circleSize: 6
+    }
+    preliminaryData.push(defaultValues)
     updateConfig({ ...config, preliminaryData })
   }
 
@@ -163,15 +124,22 @@ const PreliminaryData = memo(({ config, updateConfig, data }) => {
     }
 
     preliminaryData[i][fieldName] = value
+    if (fieldName === 'symbol') {
+      preliminaryData[i]['iconCode'] = symbolCodes[value]
+    }
+    if (fieldName === 'style') {
+      preliminaryData[i]['lineCode'] = lineCodes[value]
+    }
     updateConfig({ ...config, preliminaryData })
   }
 
   return (
     <>
       {config.preliminaryData &&
-        config.preliminaryData.map(({ seriesKey, type, label, column, value, style }, i) => {
+        config.preliminaryData?.map(({ circleSize, column, displayLegend, displayTable, displayTooltip, label, seriesKey, style, symbol, type, value, hideBarSymbol, hideLineStyle }, i) => {
           return (
             <div key={`preliminaryData-${i}`} className='edit-block'>
+              <p> {type === 'suppression' ? 'Suppressed' : 'Effect'} Data</p>
               <button
                 type='button'
                 className='remove-column'
@@ -182,23 +150,178 @@ const PreliminaryData = memo(({ config, updateConfig, data }) => {
               >
                 Remove
               </button>
-              <Select value={type} initial='Select' fieldName='type' label='Type' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={getTypeOptions()} />
-              <Select value={seriesKey} initial='Select' fieldName='seriesKey' label='ASSOCIATE TO SERIES' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys} />
-              <Select value={column} initial='Select' fieldName='column' label='COLUMN WITH CONFIGURATION VALUE' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={getColumnOptions()} />
-              <TextField value={value} fieldName='value' label='VALUE TO TRIGGER' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} />
-              <Select value={style} initial='Select' fieldName='style' label='Style' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={getStyleOptions()} />
 
-              <TextField value={label} fieldName='label' label='Label' placeholder='' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} />
+              <Select value={type} initial={config.visualizationType == 'Bar' ? '' : 'Select'} fieldName='type' label='Type' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} options={getTypeOptions()} />
+              {type === 'suppression' ? (
+                <>
+                  <Select
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p> If no “Data Series" is selected, the symbol will be applied to "all" suppressed values indicated in the dataset. If you select a particular data series, there's no need to fill in “suppression line style” and “suppression symbol” below.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                    value={column}
+                    initial='Select'
+                    fieldName='column'
+                    label='Add Data Series'
+                    updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                    options={config.runtime?.seriesKeys}
+                  />
+                  <TextField value={value} fieldName='value' label='Suppressed Data  Value' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} />
+                  {(hasComboLineSeries || config.visualizationType === 'Line') && (
+                    <>
+                      <Select
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>The recommended approach for presenting data is to include a footnote indicating any data suppression.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                        value={style}
+                        initial='Select'
+                        fieldName='style'
+                        label={'suppression line style'}
+                        updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                        options={getStyleOptions(type)}
+                      />
+                      <CheckBox value={hideLineStyle} fieldName='hideLineStyle' label='Hide Suppressed line Style' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} />
+                    </>
+                  )}
+
+                  {(hasComboBarSeries || config.visualizationType === 'Bar') && (
+                    <>
+                      <Select
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>The suggested method for presenting suppressed data is to use "double asterisks". If "double asterisks" are already used elsewhere (e.g., footnotes), please select an alternative symbol from the menu to denote data suppression.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                        value={symbol}
+                        initial='Select'
+                        fieldName='symbol'
+                        label={config.visualizationType === 'Combo' ? 'suppression bar symbol' : 'suppression symbol'}
+                        updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                        options={getSymbolOptions()}
+                      />
+                      <CheckBox value={hideBarSymbol} fieldName='hideBarSymbol' label='Hide Suppressed Bar Symbol  ' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} />
+                    </>
+                  )}
+
+                  <TextField
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>This label will display in the tooltip and legend.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                    value={label ? label : 'Suppressed'}
+                    fieldName='label'
+                    label='Suppressed Data Label'
+                    placeholder=''
+                    updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                  />
+                  <CheckBox
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>Enabling this tooltip will provide a clearer indication of 'suppressed' or 'zero data' values, whichever is applicable. Deselecting 'Display In Tooltip' indicates that you do not want to display 'suppressed' or 'zero data' values in tooltips when hovering over them.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                    value={displayTooltip}
+                    fieldName='displayTooltip'
+                    label='Display in tooltips'
+                    updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                  />
+                  <CheckBox
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>Deselecting "Display in Legend" indicates that you do not want to display suppressed data in the legend.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                    value={displayLegend}
+                    fieldName='displayLegend'
+                    label='Display in legend'
+                    updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                  />
+                  <CheckBox
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>Deselecting "Display In Data Table" indicates that you do not want to display suppressed data in the data table.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                    value={displayTable}
+                    fieldName='displayTable'
+                    label='Display in table'
+                    updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                  />
+                </>
+              ) : (
+                <>
+                  <Select value={seriesKey} initial='Select' fieldName='seriesKey' label='ASSOCIATE TO SERIES' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} options={config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys} />
+                  <Select value={column} initial='Select' fieldName='column' label='COLUMN WITH CONFIGURATION VALUE' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} options={getColumnOptions()} />
+                  <TextField
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>If 'Filled Circles' is selected as the style, this field is optional, and the style 'Filled Circles' will apply to all points within the associated series data.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                    value={value}
+                    fieldName='value'
+                    label='VALUE TO TRIGGER'
+                    updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
+                  />
+                  <Select value={style} initial='Select' fieldName='style' label='Style' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} options={getStyleOptions(type)} />
+                  {style.includes('Circles') && <TextField className='number-narrow' type='number' value={circleSize} fieldName='circleSize' label='circle size' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} />}
+                  {style !== 'Filled Circles' && <TextField value={label} fieldName='label' label='Label' placeholder='' updateField={(_, __, fieldName, value) => update(fieldName, value, i)} />}
+                </>
+              )}
             </div>
           )
         })}
 
       <button type='button' onClick={addColumn} className='btn full-width'>
-        {config.visualizationType === 'Line' || config.visualizationType === 'Combo' ? 'Add Special Line' : config.visualizationType === 'Bar' ? ' Add Special Bar' : 'Add Special Line/Bar'}
+        {config.visualizationType === 'Line' ? 'Add Special Line' : config.visualizationType === 'Bar' ? ' Add Special Bar' : 'Add Special Bar/Line'}
       </button>
     </>
   )
-})
+}
 
 const EditorPanel = () => {
   const {
@@ -220,13 +343,11 @@ const EditorPanel = () => {
     lineOptions,
     rawData,
     highlight,
-    highlightReset
+    highlightReset,
+    dimensions
   } = useContext<ChartContext>(ConfigContext)
 
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, unfilteredData)
-
-  const { twoColorPalettes, sequential, nonSequential } = useColorPalette(config, updateConfig)
-
   const properties = { data, config }
   const { leftMax, rightMax } = useMinMax(properties)
 
@@ -276,9 +397,6 @@ const EditorPanel = () => {
     visHasDataSuppression
   } = useEditorPermissions()
 
-  // argument acts as props
-  const { handleFilterOrder, filterOrderOptions, filterStyleOptions } = useFilters({ config, setConfig: updateConfig, filteredData: data, setFilteredData })
-
   // when the visualization type changes we
   // have to update the individual series type & axis details
   // dataKey is unchanged here.
@@ -356,6 +474,12 @@ const EditorPanel = () => {
     if (isDateScale(updatedConfig.xAxis) && !updatedConfig.xAxis.padding) {
       updatedConfig.xAxis.padding = 6
     }
+    // DEV-8008 - Remove Bar styling when Line is converted to Bar
+    if (updatedConfig.visualizationType === 'Line') {
+      updatedConfig.visualizationSubType = 'regular'
+      updatedConfig.barStyle = 'flat'
+      updatedConfig.isLollipopChart = false
+    }
   }
 
   const updateField = (section, subsection, fieldName, newValue) => {
@@ -389,13 +513,18 @@ const EditorPanel = () => {
       return
     }
 
-    if (section === 'columns' && subsection !== '' && fieldName !== '') {
+    const truthy = val => {
+      if (val === 0) return true // indexes can be used as keys
+      return !!val
+    }
+
+    if (section === 'columns' && truthy(subsection) && truthy(fieldName)) {
       updateConfig({
         ...config,
-        [section]: {
-          ...config[section],
+        columns: {
+          ...config.columns,
           [subsection]: {
-            ...config[section][subsection],
+            ...config.columns[subsection],
             [fieldName]: newValue
           }
         }
@@ -403,6 +532,8 @@ const EditorPanel = () => {
       return
     }
     if (null === section && null === subsection) {
+      // special case that allows for updating the config object directly
+      if (!truthy(fieldName)) console.error('fieldName is required')
       let updatedConfig = { ...config, [fieldName]: newValue }
       enforceRestrictions(updatedConfig)
       updateConfig(updatedConfig)
@@ -413,13 +544,13 @@ const EditorPanel = () => {
 
     let sectionValue = isArray ? [...config[section], newValue] : { ...config[section], [fieldName]: newValue }
 
-    if (null !== subsection) {
+    if (truthy(subsection)) {
       if (isArray) {
         sectionValue = [...config[section]]
         sectionValue[subsection] = { ...sectionValue[subsection], [fieldName]: newValue }
       } else if (typeof newValue === 'string') {
         sectionValue[subsection] = newValue
-      } else {
+      } else if (truthy(fieldName)) {
         sectionValue = { ...config[section], [subsection]: { ...config[section][subsection], [fieldName]: newValue } }
       }
     }
@@ -432,6 +563,7 @@ const EditorPanel = () => {
   }
 
   const [displayPanel, setDisplayPanel] = useState(true)
+  const [displayViewportOverrides, setDisplayViewportOverrides] = useState(false)
 
   if (loading) {
     return null
@@ -457,30 +589,6 @@ const EditorPanel = () => {
     })
   }
 
-  const removeFilter = index => {
-    let filters = [...config.filters]
-
-    filters.splice(index, 1)
-
-    updateConfig({ ...config, filters })
-  }
-
-  const updateFilterProp = (name, index, value) => {
-    let filters = [...config.filters]
-
-    filters[index][name] = value
-
-    updateConfig({ ...config, filters })
-  }
-
-  const addNewFilter = () => {
-    let filters = config.filters ? [...config.filters] : []
-
-    filters.push({ values: [] })
-
-    updateConfig({ ...config, filters })
-  }
-
   const addNewSeries = seriesKey => {
     let newSeries = config.series ? [...config.series] : []
     let forecastingStages = Array.from(new Set(data.map(item => item[seriesKey])))
@@ -505,37 +613,6 @@ const EditorPanel = () => {
     updateConfig({ ...config }, newData)
   }
 
-  const removeSeries = seriesKey => {
-    let series = [...config.series]
-    let seriesIndex = -1
-
-    for (let i = 0; i < series.length; i++) {
-      if (series[i].dataKey === seriesKey) {
-        seriesIndex = i
-        break
-      }
-    }
-
-    if (seriesIndex !== -1) {
-      series.splice(seriesIndex, 1)
-
-      let newConfig = { ...config, series }
-
-      if (series.length === 0) {
-        delete newConfig.series
-      }
-
-      updateConfig(newConfig)
-    }
-
-    if (config.visualizationType === 'Paired Bar') {
-      updateConfig({
-        ...config,
-        series: []
-      })
-    }
-  }
-
   const addNewExclusion = exclusionKey => {
     let newExclusion = [...config.exclusions.keys]
     newExclusion.push(exclusionKey)
@@ -569,16 +646,6 @@ const EditorPanel = () => {
     }
   }
 
-  const getFilters = () => {
-    let columns = {}
-
-    unfilteredData.forEach(row => {
-      Object.keys(row).forEach(columnName => (columns[columnName] = true))
-    })
-
-    return Object.keys(columns)
-  }
-
   const getColumns = (filter = true) => {
     let columns = {}
     unfilteredData.forEach(row => {
@@ -902,40 +969,8 @@ const EditorPanel = () => {
     })
   }
 
-  // prevents adding duplicates
-  const additionalColumns = Object.keys(config.columns).filter(value => {
-    const defaultCols = [config.xAxis.dataKey] // ['geo', 'navigate', 'primary', 'latitude', 'longitude']
-
-    if (true === defaultCols.includes(value)) {
-      return false
-    }
-    return true
-  })
-
-  // just adds a new column but not set to any data yet
-  const addAdditionalColumn = number => {
-    const columnKey = `additionalColumn${number}`
-
-    updateConfig({
-      ...config,
-      columns: {
-        ...config.columns,
-        [columnKey]: {
-          label: 'New Column',
-          dataTable: false,
-          tooltips: false,
-          prefix: '',
-          suffix: '',
-          forestPlot: false,
-          startingPoint: '0',
-          forestPlotAlignRight: false
-        }
-      }
-    })
-  }
-
   const removeAdditionalColumn = columnName => {
-    const newColumns = config.columns
+    const newColumns = _.cloneDeep(config.columns)
 
     delete newColumns[columnName]
 
@@ -1019,6 +1054,14 @@ const EditorPanel = () => {
     updateConfig(updatedConfig)
   }
 
+  const updateViewportOverrides = (property, viewport, numTicks) => {
+    const propertyObject = { ...config.xAxis[property] }
+    propertyObject[viewport] = numTicks
+    const updatedConfig = { ...config, xAxis: { ...config.xAxis, [property]: propertyObject } }
+
+    updateConfig(updatedConfig)
+  }
+
   const editorContextValues = {
     addNewExclusion,
     data,
@@ -1155,7 +1198,26 @@ const EditorPanel = () => {
                       {config.runtime.seriesKeys && config.runtime.seriesKeys.length === 1 && !['Box Plot', 'Deviation Bar', 'Forest Plot'].includes(config.visualizationType) && (
                         <CheckBox value={config.isLegendValue} fieldName='isLegendValue' label='Use Legend Value in Hover' updateField={updateField} />
                       )}
-                      <TextField value={config.yAxis.numTicks} placeholder='Auto' type='number' section='yAxis' fieldName='numTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />
+                      <TextField
+                        value={config.yAxis.numTicks}
+                        placeholder='Auto'
+                        type='number'
+                        section='yAxis'
+                        fieldName='numTicks'
+                        label='Number of ticks'
+                        className='number-narrow'
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>Apporoximate number of ticks. Other factors such as space available and data may change the exact number of ticks used.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                        updateField={updateField}
+                      />
                       <TextField
                         value={config.yAxis.size}
                         type='number'
@@ -1175,6 +1237,7 @@ const EditorPanel = () => {
                           </Tooltip>
                         }
                       />
+                      <TextField value={config.yAxis.labelOffset} section='yAxis' fieldName='labelOffset' label='Label offset' type='number' className='number-narrow' updateField={updateField} />
                       {config.orientation === 'horizontal' && config.visualizationType !== 'Paired Bar' && <CheckBox value={config.isResponsiveTicks} fieldName='isResponsiveTicks' label='Use Responsive Ticks' updateField={updateField} />}
                       {(config.orientation === 'vertical' || !config.isResponsiveTicks) && <TextField value={config.yAxis.tickRotation || 0} type='number' min={0} section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
                       {config.isResponsiveTicks && config.orientation === 'horizontal' && config.visualizationType !== 'Paired Bar' && (
@@ -1202,7 +1265,6 @@ const EditorPanel = () => {
 
                       {/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
                       {/* <TextField value={config.yAxis.axisPadding} type='number' max={10} min={0} section='yAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}
-                      {config.orientation === 'horizontal' && <TextField value={config.xAxis.labelOffset} section='xAxis' fieldName='labelOffset' label='Label offset' type='number' className='number-narrow' updateField={updateField} />}
                       {visSupportsValueAxisGridLines() && <CheckBox value={config.yAxis.gridLines} section='yAxis' fieldName='gridLines' label='Show Gridlines' updateField={updateField} />}
                       <CheckBox value={config.yAxis.enablePadding} section='yAxis' fieldName='enablePadding' label='Add Padding to Value Axis Scale' updateField={updateField} />
                       {config.yAxis.enablePadding && <TextField type='number' section='yAxis' fieldName='scalePadding' label='Padding Percentage' className='number-narrow' updateField={updateField} value={config.yAxis.scalePadding} />}
@@ -1210,7 +1272,23 @@ const EditorPanel = () => {
                     </>
                   )}
                   <span className='divider-heading'>Number Formatting</span>
-                  <CheckBox value={config.dataFormat.commas} section='dataFormat' fieldName='commas' label='Add commas' updateField={updateField} />
+                  <CheckBox
+                    value={config.dataFormat.commas}
+                    section='dataFormat'
+                    fieldName='commas'
+                    label='Add commas'
+                    updateField={updateField}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>{`Selecting this option will add commas to the left value axis, tooltip hover, and data table.`}</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
                   <CheckBox
                     value={config.dataFormat.abbreviated}
                     section='dataFormat'
@@ -1271,7 +1349,7 @@ const EditorPanel = () => {
                   {config.orientation === 'horizontal' ? ( // horizontal - x is vertical y is horizontal
                     <>
                       {visSupportsValueAxisLine() && <CheckBox value={config.xAxis.hideAxis} section='xAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />}
-                      {visSupportsValueAxisLabels() && <CheckBox value={config.xAxis.hideLabel} section='xAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />}
+                      {visSupportsValueAxisLabels() && <CheckBox value={config.xAxis.hideLabel} section='xAxis' fieldName='hideLabel' label='Hide Tick Labels' updateField={updateField} />}
                       {visSupportsValueAxisTicks() && <CheckBox value={config.xAxis.hideTicks} section='xAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />}
                       {visSupportsValueAxisMax() && <TextField value={config.xAxis.max} section='xAxis' fieldName='max' label='max value' type='number' placeholder='Auto' updateField={updateField} />}
                       <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
@@ -1289,7 +1367,7 @@ const EditorPanel = () => {
                     config.visualizationType !== 'Pie' && (
                       <>
                         <CheckBox value={config.yAxis.hideAxis} section='yAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />
-                        <CheckBox value={config.yAxis.hideLabel} section='yAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />
+                        <CheckBox value={config.yAxis.hideLabel} section='yAxis' fieldName='hideLabel' label='Hide Tick Labels' updateField={updateField} />
                         <CheckBox value={config.yAxis.hideTicks} section='yAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />
 
                         <TextField value={config.yAxis.max} section='yAxis' fieldName='max' type='number' label='left axis max value' placeholder='Auto' updateField={updateField} />
@@ -1611,7 +1689,7 @@ const EditorPanel = () => {
                   </div>
 
                   <CheckBox value={config.yAxis.rightHideAxis} section='yAxis' fieldName='rightHideAxis' label='Hide Axis' updateField={updateField} />
-                  <CheckBox value={config.yAxis.rightHideLabel} section='yAxis' fieldName='rightHideLabel' label='Hide Label' updateField={updateField} />
+                  <CheckBox value={config.yAxis.rightHideLabel} section='yAxis' fieldName='rightHideLabel' label='Hide Tick Labels' updateField={updateField} />
                   <CheckBox value={config.yAxis.rightHideTicks} section='yAxis' fieldName='rightHideTicks' label='Hide Ticks' updateField={updateField} />
 
                   <TextField value={config.yAxis.max} section='yAxis' fieldName='rightMax' type='number' label='right axis max value' placeholder='Auto' updateField={updateField} />
@@ -1898,7 +1976,25 @@ const EditorPanel = () => {
                         }
                         updateField={updateField}
                       />
-                      {/* {visHasBrushChart && <CheckBox value={config.brush.active} section='brush' fieldName='active' label='Brush Slider ' updateField={updateField} />} */}
+                      {false && visHasBrushChart && (
+                        <CheckBox
+                          value={config.brush?.active}
+                          section='brush'
+                          fieldName='active'
+                          label='Brush Slider '
+                          updateField={updateField}
+                          tooltip={
+                            <Tooltip style={{ textTransform: 'none' }}>
+                              <Tooltip.Target>
+                                <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                              </Tooltip.Target>
+                              <Tooltip.Content>
+                                <p>Use the brush slider to narrow down your data view to specific values along the axis. This tool is useful for examining detailed data segments within the larger dataset. </p>
+                              </Tooltip.Content>
+                            </Tooltip>
+                          }
+                        />
+                      )}
 
                       {config.exclusions.active && (
                         <>
@@ -1938,12 +2034,101 @@ const EditorPanel = () => {
                       )}
 
                       {visSupportsDateCategoryNumTicks() && config.xAxis.type !== 'date-time' && config.xAxis.manual && (
-                        <TextField value={config.xAxis.manualStep} placeholder='Auto' type='number' min={1} section='xAxis' fieldName='manualStep' label='Step count' className='number-narrow' updateField={updateField} />
+                        <>
+                          <TextField
+                            value={config.xAxis.manualStep}
+                            placeholder='Auto'
+                            type='number'
+                            min={1}
+                            section='xAxis'
+                            fieldName='manualStep'
+                            label='Step count'
+                            className='number-narrow'
+                            updateField={updateField}
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>Number of data points which are assigned a tick, starting from the right most data point. Value of 1 will show a tick at every data point, value of 2 will show a tick for every other, etc.</p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+                          <div className='viewport-overrides'>
+                            <label>
+                              <button onClick={() => setDisplayViewportOverrides(!displayViewportOverrides)} className='edit-label'>
+                                Step Count: viewport overrides <span style={{ transform: `rotate(${displayViewportOverrides ? '90deg' : '0deg'})` }}>&gt;</span>
+                              </button>
+                            </label>
+                            {displayViewportOverrides && (
+                              <div className='edit-block'>
+                                {Object.keys(viewports).map(viewport => (
+                                  <TextField
+                                    key={`viewport-step-count-input-${viewport}`}
+                                    value={config.xAxis.viewportStepCount ? config.xAxis.viewportStepCount[viewport] : undefined}
+                                    placeholder='Auto'
+                                    type='number'
+                                    label={viewport}
+                                    className='number-narrow'
+                                    updateField={(section, fieldName, label, val) => updateViewportOverrides('viewportStepCount', viewport, val)}
+                                  />
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        </>
                       )}
                       {visSupportsDateCategoryNumTicks() && (config.xAxis.type === 'date-time' || !config.xAxis.manual) && (
-                        <TextField value={config.xAxis.numTicks} placeholder='Auto' type='number' min={1} section='xAxis' fieldName='numTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />
+                        <>
+                          <TextField
+                            value={config.xAxis.numTicks}
+                            placeholder='Auto'
+                            type='number'
+                            min={1}
+                            section='xAxis'
+                            fieldName='numTicks'
+                            label='Number of ticks'
+                            className='number-narrow'
+                            updateField={updateField}
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>Apporoximate number of ticks. Other factors such as space available and data may change the exact number of ticks used. To enforce an exact number of ticks, check "Manual Ticks" above.</p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+                          <div className='viewport-overrides'>
+                            <label>
+                              <button onClick={() => setDisplayViewportOverrides(!displayViewportOverrides)} className='edit-label'>
+                                Number of ticks: viewport overrides <span style={{ transform: `rotate(${displayViewportOverrides ? '90deg' : '0deg'})` }}>&gt;</span>
+                              </button>
+                            </label>
+                            {displayViewportOverrides && (
+                              <div className='edit-block'>
+                                {Object.keys(viewports).map(viewport => (
+                                  <TextField
+                                    key={`viewport-num-ticks-input-${viewport}`}
+                                    value={config.xAxis.viewportNumTicks ? config.xAxis.viewportNumTicks[viewport] : undefined}
+                                    placeholder='Auto'
+                                    type='number'
+                                    label={viewport}
+                                    className='number-narrow'
+                                    updateField={(section, fieldName, label, val) => updateViewportOverrides('viewportNumTicks', viewport, val)}
+                                  />
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        </>
                       )}
                       {visSupportsDateCategoryHeight() && <TextField value={config.xAxis.size} type='number' min={0} section='xAxis' fieldName='size' label={config.orientation === 'horizontal' ? 'Size (Width)' : 'Size (Height)'} className='number-narrow' updateField={updateField} />}
+                      <TextField value={config.xAxis.labelOffset} section='xAxis' fieldName='labelOffset' label='Label offset' type='number' className='number-narrow' updateField={updateField} />
 
                       {/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
                       {/* <TextField value={config.xAxis.axisPadding} type='number' max={10} min={0} section='xAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}
@@ -1983,12 +2168,12 @@ const EditorPanel = () => {
                       {config.orientation === 'horizontal' ? (
                         <>
                           {visSupportsDateCategoryAxisLine() && <CheckBox value={config.yAxis.hideAxis} section='yAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />}
-                          {visSupportsDateCategoryAxisLabel() && <CheckBox value={config.yAxis.hideLabel} section='yAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />}
+                          {visSupportsDateCategoryAxisLabel() && <CheckBox value={config.yAxis.hideLabel} section='yAxis' fieldName='hideLabel' label='Hide Tick Labels' updateField={updateField} />}
                         </>
                       ) : (
                         <>
                           {visSupportsDateCategoryAxisLine() && <CheckBox value={config.xAxis.hideAxis} section='xAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />}
-                          {visSupportsDateCategoryAxisLabel() && <CheckBox value={config.xAxis.hideLabel} section='xAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />}
+                          {visSupportsDateCategoryAxisLabel() && <CheckBox value={config.xAxis.hideLabel} section='xAxis' fieldName='hideLabel' label='Hide Tick Labels' updateField={updateField} />}
                           {visSupportsDateCategoryAxisTicks() && <CheckBox value={config.xAxis.hideTicks} section='xAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />}
                         </>
                       )}
@@ -2338,242 +2523,15 @@ const EditorPanel = () => {
               </AccordionItem>
             )}
             <Panels.Regions name='Regions' />
+
             {/* Columns */}
-            {config.visualizationType !== 'Box Plot' && (
+            {config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Sankey' && (
               <AccordionItem>
                 <AccordionItemHeading>
                   <AccordionItemButton>Columns</AccordionItemButton>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  {'navigation' !== config.type && (
-                    <fieldset className='primary-fieldset edit-block'>
-                      <label>
-                        <span className='edit-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>
-                        </span>
-                      </label>
-                      {additionalColumns.map(val => (
-                        <fieldset className='edit-block' key={val}>
-                          <button
-                            className='remove-column'
-                            onClick={event => {
-                              event.preventDefault()
-                              removeAdditionalColumn(val)
-                            }}
-                          >
-                            Remove
-                          </button>
-                          <label>
-                            <span className='edit-label column-heading'>Column</span>
-                            <select
-                              value={config.columns[val] ? config.columns[val].name : getColumns()[0]}
-                              onChange={event => {
-                                editColumn(val, 'name', event.target.value)
-                              }}
-                            >
-                              {getColumns().map(option => (
-                                <option>{option}</option>
-                              ))}
-                            </select>
-                          </label>
-                          <label>
-                            <span className='edit-label column-heading'>Associate to Series</span>
-                            <select
-                              value={config.columns[val] ? config.columns[val].series : ''}
-                              onChange={event => {
-                                editColumn(val, 'series', event.target.value)
-                              }}
-                            >
-                              <option value=''>Select series</option>
-                              {config.series.map(series => (
-                                <option>{series.dataKey}</option>
-                              ))}
-                            </select>
-                          </label>
-                          <TextField value={config.columns[val].label} section='columns' subsection={val} fieldName='label' label='Label' updateField={updateField} />
-                          <ul className='column-edit'>
-                            <li className='three-col'>
-                              <TextField value={config.columns[val].prefix} section='columns' subsection={val} fieldName='prefix' label='Prefix' updateField={updateField} />
-                              <TextField value={config.columns[val].suffix} section='columns' subsection={val} fieldName='suffix' label='Suffix' updateField={updateField} />
-                              <TextField type='number' value={config.columns[val].roundToPlace} section='columns' subsection={val} fieldName='roundToPlace' label='Round' updateField={updateField} />
-                            </li>
-                            <li>
-                              <label className='checkbox'>
-                                <input
-                                  type='checkbox'
-                                  checked={config.columns[val].commas}
-                                  onChange={event => {
-                                    editColumn(val, 'commas', event.target.checked)
-                                  }}
-                                />
-                                <span className='edit-label'>Add Commas to Numbers</span>
-                              </label>
-                            </li>
-                            <li>
-                              {config.table.showVertical && (
-                                <label className='checkbox'>
-                                  <input
-                                    type='checkbox'
-                                    checked={config.columns[val].dataTable}
-                                    onChange={event => {
-                                      editColumn(val, 'dataTable', event.target.checked)
-                                    }}
-                                  />
-                                  <span className='edit-label'>Show in Data Table</span>
-                                </label>
-                              )}
-                            </li>
-                            {config.visualizationType === 'Pie' && (
-                              <li>
-                                <label className='checkbox'>
-                                  <input
-                                    type='checkbox'
-                                    checked={config.columns[val].showInViz}
-                                    onChange={event => {
-                                      editColumn(val, 'showInViz', event.target.checked)
-                                    }}
-                                  />
-                                  <span className='edit-label'>Show in Visualization</span>
-                                </label>
-                              </li>
-                            )}
-
-                            {/* disable for now */}
-
-                            <li>
-                              <label className='checkbox'>
-                                <input
-                                  type='checkbox'
-                                  checked={config.columns[val].tooltips || false}
-                                  onChange={event => {
-                                    updateSeriesTooltip(val, event.target.checked)
-                                  }}
-                                />
-                                <span className='edit-label'>Show in tooltip</span>
-                              </label>
-                            </li>
-
-                            {config.visualizationType === 'Forest Plot' && (
-                              <>
-                                <li>
-                                  <label className='checkbox'>
-                                    <input
-                                      type='checkbox'
-                                      checked={config.columns[val].forestPlot || false}
-                                      onChange={event => {
-                                        editColumn(val, 'forestPlot', event.target.checked)
-                                      }}
-                                    />
-                                    <span className='edit-label'>Show in Forest Plot</span>
-                                  </label>
-                                </li>
-                                <li>
-                                  <label className='checkbox'>
-                                    <input
-                                      type='checkbox'
-                                      checked={config.columns[val].forestPlotAlignRight || false}
-                                      onChange={event => {
-                                        editColumn(val, 'forestPlotAlignRight', event.target.checked)
-                                      }}
-                                    />
-                                    <span className='edit-label'>Align Right</span>
-                                  </label>
-                                </li>
-
-                                {!config.columns[val].forestPlotAlignRight && (
-                                  <li>
-                                    <label className='text'>
-                                      <span className='edit-label'>Forest Plot Starting Point</span>
-                                      <input
-                                        type='number'
-                                        value={config.columns[val].forestPlotStartingPoint || 0}
-                                        onChange={event => {
-                                          editColumn(val, 'forestPlotStartingPoint', event.target.value)
-                                        }}
-                                      />
-                                    </label>
-                                  </li>
-                                )}
-                              </>
-                            )}
-                          </ul>
-                        </fieldset>
-                      ))}
-                      <button
-                        className={'btn full-width'}
-                        onClick={event => {
-                          event.preventDefault()
-                          addAdditionalColumn(additionalColumns.length + 1)
-                        }}
-                      >
-                        Add Column
-                      </button>
-                    </fieldset>
-                  )}
-                  {'category' === config.legend.type && (
-                    <fieldset className='primary-fieldset edit-block'>
-                      <label>
-                        <span className='edit-label'>
-                          Additional Category
-                          <Tooltip style={{ textTransform: 'none' }}>
-                            <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                            </Tooltip.Target>
-                            <Tooltip.Content>
-                              <p>You can provide additional categories to ensure they appear in the legend</p>
-                            </Tooltip.Content>
-                          </Tooltip>
-                        </span>
-                      </label>
-                      {config.legend.additionalCategories &&
-                        config.legend.additionalCategories.map((val, i) => (
-                          <fieldset className='edit-block' key={val}>
-                            <button
-                              className='remove-column'
-                              onClick={event => {
-                                event.preventDefault()
-                                const updatedAdditionaCategories = [...config.legend.additionalCategories]
-                                updatedAdditionaCategories.splice(i, 1)
-                                updateField('legend', null, 'additionalCategories', updatedAdditionaCategories)
-                              }}
-                            >
-                              Remove
-                            </button>
-                            <TextField
-                              value={val}
-                              label='Category'
-                              section='legend'
-                              subsection={null}
-                              fieldName='additionalCategories'
-                              updateField={(section, subsection, fieldName, value) => {
-                                const updatedAdditionaCategories = [...config.legend.additionalCategories]
-                                updatedAdditionaCategories[i] = value
-                                updateField(section, subsection, fieldName, updatedAdditionaCategories)
-                              }}
-                            />
-                          </fieldset>
-                        ))}
-                      <button
-                        className={'btn full-width'}
-                        onClick={event => {
-                          event.preventDefault()
-                          const updatedAdditionaCategories = [...(config.legend.additionalCategories || [])]
-                          updatedAdditionaCategories.push('')
-                          updateField('legend', null, 'additionalCategories', updatedAdditionaCategories)
-                        }}
-                      >
-                        Add Category
-                      </button>
-                    </fieldset>
-                  )}
+                  <ColumnsEditor config={config} updateField={updateField} deleteColumn={removeAdditionalColumn} />{' '}
                 </AccordionItemPanel>
               </AccordionItem>
             )}
@@ -2613,6 +2571,23 @@ const EditorPanel = () => {
                       </Tooltip>
                     }
                   />
+                  <CheckBox
+                    value={config.legend.hideSuppressedLabels}
+                    section='legend'
+                    fieldName='hideSuppressedLabels'
+                    label='Hide Suppressed Labels'
+                    updateField={updateField}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>Hiding suppressed labels will not override the 'Special Class' assigned to line chart indicating "suppressed" data in the Data Series Panel.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
                   {/* {config.visualizationType === 'Box Plot' &&
                     <>
                       <CheckBox value={config.boxplot.legend.displayHowToReadText} fieldName='displayHowToReadText' section='boxplot' subsection='legend' label='Display How To Read Text' updateField={updateField} />
@@ -2697,7 +2672,7 @@ const EditorPanel = () => {
                   {/* end: isolated values */}
 
                   <TextField value={config.legend.label} section='legend' fieldName='label' label='Title' updateField={updateField} />
-                  <Select value={config.legend.position} section='legend' fieldName='position' label='Position' updateField={updateField} options={['right', 'left', 'bottom']} />
+                  <Select value={config.legend?.position} section='legend' fieldName='position' label='Position' updateField={updateField} options={['right', 'left', 'bottom']} />
                   {config.legend.position === 'bottom' && (
                     <>
                       <CheckBox value={config.legend.singleRow} section='legend' fieldName='singleRow' label='Single Row Legend' updateField={updateField} />
@@ -2714,161 +2689,7 @@ const EditorPanel = () => {
                   <AccordionItemButton>Filters</AccordionItemButton>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  {config.filters && (
-                    <>
-                      {/* prettier-ignore */}
-                      <Select
-                        value={config.filterBehavior}
-                        fieldName='filterBehavior'
-                        label='Filter Behavior'
-                        updateField={updateField}
-                        options={['Apply Button', 'Filter Change']}
-                        tooltip={
-                          <Tooltip style={{ textTransform: 'none' }}>
-                            <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                            </Tooltip.Target>
-                            <Tooltip.Content>
-                              <p>The Apply Button option changes the visualization when the user clicks "apply". The Filter Change option immediately changes the visualization when the selection is changed.</p>
-                            </Tooltip.Content>
-                          </Tooltip>
-                        }
-                        />
-                      <br />
-                    </>
-                  )}
-                  {config.filters && (
-                    <ul className='filters-list'>
-                      {/* Whether filters should apply onChange or Apply Button */}
-
-                      {config.filters.map((filter, index) => {
-                        if (filter.type === 'url') return <></>
-
-                        return (
-                          <fieldset className='edit-block' key={index}>
-                            <button
-                              type='button'
-                              className='remove-column'
-                              onClick={() => {
-                                removeFilter(index)
-                              }}
-                            >
-                              Remove
-                            </button>
-                            <label>
-                              <span className='edit-label column-heading'>Filter</span>
-                              <select
-                                value={filter.columnName}
-                                onChange={e => {
-                                  updateFilterProp('columnName', index, e.target.value)
-                                }}
-                              >
-                                <option value=''>- Select Option -</option>
-                                {getFilters().map((dataKey, index) => (
-                                  <option value={dataKey} key={index}>
-                                    {dataKey}
-                                  </option>
-                                ))}
-                              </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 => {
-                                  updateFilterProp('showDropdown', index, e.target.checked)
-                                }}
-                              />
-                            </label>
-
-                            <label>
-                              <span className='edit-label column-heading'>Filter Style</span>
-
-                              <select
-                                value={filter.filterStyle}
-                                onChange={e => {
-                                  updateFilterProp('filterStyle', index, e.target.value)
-                                }}
-                              >
-                                {filterStyleOptions.map((item, index) => {
-                                  return (
-                                    <option key={`filter-style-${index}`} value={item}>
-                                      {item}
-                                    </option>
-                                  )
-                                })}
-                              </select>
-                            </label>
-                            <label>
-                              <span className='edit-label column-heading'>Label</span>
-                              <input
-                                type='text'
-                                value={filter.label}
-                                onChange={e => {
-                                  updateFilterProp('label', index, e.target.value)
-                                }}
-                              />
-                            </label>
-
-                            <label>
-                              <span className='edit-label column-heading'>Default Value Set By Query String Parameter</span>
-                              <input
-                                type='text'
-                                value={filter.setByQueryParameter}
-                                onChange={e => {
-                                  updateFilterProp('setByQueryParameter', index, e.target.value)
-                                }}
-                              />
-                            </label>
-
-                            <label>
-                              <span className='edit-filterOrder column-heading'>Filter Order</span>
-                              <select value={filter.order ? filter.order : 'asc'} onChange={e => updateFilterProp('order', index, e.target.value)}>
-                                {filterOrderOptions.map((option, index) => {
-                                  return (
-                                    <option value={option.value} key={`filter-${index}`}>
-                                      {option.label}
-                                    </option>
-                                  )
-                                })}
-                              </select>
-
-                              {filter.order === 'cust' && (
-                                <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source.index, destination.index, index, config.filters[index])}>
-                                  <Droppable droppableId='filter_order'>
-                                    {provided => (
-                                      <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
-                                        {config.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)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-                                                    {value}
-                                                  </div>
-                                                </li>
-                                              )}
-                                            </Draggable>
-                                          )
-                                        })}
-                                        {provided.placeholder}
-                                      </ul>
-                                    )}
-                                  </Droppable>
-                                </DragDropContext>
-                              )}
-                            </label>
-                          </fieldset>
-                        )
-                      })}
-                    </ul>
-                  )}
-                  {!config.filters && <p style={{ textAlign: 'center' }}>There are currently no filters.</p>}
-                  <button type='button' onClick={addNewFilter} className='btn full-width'>
-                    Add Filter
-                  </button>
+                  <VizFilterEditor config={config} updateField={updateField} rawData={rawData} />
                 </AccordionItemPanel>
               </AccordionItem>
             )}
@@ -2884,9 +2705,10 @@ const EditorPanel = () => {
                 </AccordionItemPanel>
               </AccordionItem>
             )}
+            <Panels.Annotate name='Text Annotations' />
             {/* {(config.visualizationType === 'Bar' || config.visualizationType === 'Line') && <Panels.DateHighlighting name='Date Highlighting' />} */}
           </Accordion>
-          {config.type !== 'Spark Line' && <AdvancedEditor loadConfig={updateConfig} state={config} convertStateToConfig={convertStateToConfig} />}
+          {config.type !== 'Spark Line' && <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />}
         </Layout.Sidebar>
       </ErrorBoundary>
     </EditorPanelContext.Provider>