@cdc/chart 4.24.4 → 4.24.5

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,17 @@ 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'
 
 // 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 +26,57 @@ 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'
   }
 
-  const getTypeOptions = () => {
-    if (config.visualizationType === 'Line' || config.visualizationType === 'Combo') {
-      return ['effect']
-    } else {
-      return ['suppression']
+  const getStyleOptions = type => {
+    if (config.visualizationType === 'Line' || isCombo) {
+      const options = Object.keys(lineCodes)
+      if (type === 'suppression') {
+        return options.slice(0, -1)
+      } else {
+        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,23 @@ 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: ''
+    }
+    preliminaryData.push(defaultValues)
     updateConfig({ ...config, preliminaryData })
   }
 
@@ -163,15 +121,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(({ column, displayLegend, displayTable, displayTooltip, label, seriesKey, style, symbol, type, value }, i) => {
           return (
             <div key={`preliminaryData-${i}`} className='edit-block'>
+              <p> {type === 'suppression' ? 'Suppressed' : 'Effect'} Data</p>
               <button
                 type='button'
                 className='remove-column'
@@ -182,23 +147,156 @@ 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.</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)}
+                    />
+                  )}
+
+                  {(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()}
+                    />
+                  )}
+
+                  <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 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)} />
+                  <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 {
@@ -224,9 +322,6 @@ const EditorPanel = () => {
   } = 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 +371,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.
@@ -389,13 +481,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 +500,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 +512,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 } }
       }
     }
@@ -457,30 +556,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 +580,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 +613,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 +936,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]
 
@@ -1210,7 +1212,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'
@@ -1943,7 +1961,7 @@ const EditorPanel = () => {
                       {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} />
                       )}
-                      {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} />}
+                      {visSupportsDateCategoryHeight() && <TextField value={config.xAxis.padding} type='number' min={0} section='xAxis' fieldName='padding' label={config.orientation === 'horizontal' ? 'Size (Width)' : 'Size (Height)'} 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} /> */}
@@ -1992,6 +2010,40 @@ const EditorPanel = () => {
                           {visSupportsDateCategoryAxisTicks() && <CheckBox value={config.xAxis.hideTicks} section='xAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />}
                         </>
                       )}
+                      <CheckBox
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>Selecting this option will display a "thin line" slightly above the Date/Category Axis to indicate "suppressed data" where "suppressed data" values are indicated in the Data Series.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                        value={config.xAxis.showSuppressedLine}
+                        section='xAxis'
+                        fieldName='showSuppressedLine'
+                        label='Display  suppressed data line'
+                        updateField={updateField}
+                      />
+                      <CheckBox
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>Selecting this option will display "suppressed data symbol" on the Date/Category Axis where suppressed data values are indicated in the Data Series, unless a different symbol was chosen from the data series (e.g., suppression symbol) menu.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                        value={config.xAxis.showSuppressedSymbol}
+                        section='xAxis'
+                        fieldName='showSuppressedSymbol'
+                        label='Display  suppressed data symbol'
+                        updateField={updateField}
+                      />
 
                       {config.series?.length === 1 && config.visualizationType === 'Bar' && (
                         <>
@@ -2338,6 +2390,7 @@ const EditorPanel = () => {
               </AccordionItem>
             )}
             <Panels.Regions name='Regions' />
+
             {/* Columns */}
             {config.visualizationType !== 'Box Plot' && (
               <AccordionItem>
@@ -2345,235 +2398,7 @@ const EditorPanel = () => {
                   <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 +2438,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} />
@@ -2714,161 +2556,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>
             )}