@cdc/waffle-chart 1.0.0 → 1.0.2

package/src/components/EditorPanel.js

@@ -1,120 +1,31 @@
 import React, { useState, useEffect, memo, useContext } from 'react'
 
-import {
-  Accordion,
-  AccordionItem,
-  AccordionItemHeading,
-  AccordionItemPanel,
-  AccordionItemButton,
-} from 'react-accessible-accordion'
-
-import { useDebounce } from 'use-debounce'
-import Context from '../context'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import { DATA_OPERATORS, DATA_FUNCTIONS } from '../CdcWaffleChart'
-
-const TextField = memo((
-  {
-    label,
-    section = null,
-    subsection = null,
-    fieldName,
-    updateField,
-    value: stateValue,
-    type = 'input',
-    i = null, min = null, max = null,
-    ...attributes
-  }
-) => {
-
-  const [ value, setValue ] = useState(stateValue)
-  const [ debouncedValue ] = useDebounce(value, 500)
-
-  useEffect(() => {
-    if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
-      updateField(section, subsection, fieldName, debouncedValue, i)
-    }
-  }, [ debouncedValue, section, subsection, fieldName, i, stateValue, updateField ])
-
-  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
-
-  const onChange = (e) => {
-    if ('number' !== type || min === null) {
-      setValue(e.target.value)
-    } else {
-      if (!e.target.value || (parseFloat(min) <= parseFloat(e.target.value) & parseFloat(max) >= parseFloat(e.target.value))) {
-        setValue(e.target.value)
-      } else {
-        setValue(min.toString())
-      }
-    }
-  }
 
-  let formElement = <input type="text" name={name} onChange={onChange} {...attributes} value={value}/>
+import ConfigContext from '../ConfigContext'
 
-  if ('textarea' === type) {
-    formElement = (
-      <textarea name={name} onChange={onChange} {...attributes} value={value}/>
-    )
-  }
+import Accordion from '@cdc/core/components/ui/Accordion'
+import Button from '@cdc/core/components/elements/Button'
+import Icon from '@cdc/core/components/ui/Icon'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import InputText from '@cdc/core/components/inputs/InputText'
+import InputSelect from '@cdc/core/components/inputs/InputSelect'
+import InputCheckbox from '@cdc/core/components/inputs/InputCheckbox'
 
-  if ('number' === type) {
-    formElement = <input type="number" name={name} onChange={onChange} {...attributes} value={value}/>
-  }
+import '@cdc/core/styles/v2/components/editor.scss'
 
-  return (
-    <label>
-      {label && <span className="edit-label column-heading">{label}</span>}
-      {formElement}
-    </label>
-  )
-})
-
-const Select = memo((
-  {
-    label,
-    value,
-    options,
-    fieldName,
-    section = null,
-    subsection = null,
-    required = false,
-    updateField,
-    initial: initialValue,
-    ...attributes
-  }
-) => {
-
-  let optionsJsx = ''
-
-  if (Array.isArray(options)) { //Handle basic array
-    optionsJsx = options.map(optionName => <option value={optionName} key={optionName}>{optionName}</option>)
-  } else { //Handle object with value/name pairs
-    optionsJsx = []
-    for (const [ optionValue, optionName ] of Object.entries(options)) {
-      optionsJsx.push(<option value={optionValue} key={optionValue}>{optionName}</option>)
-    }
-  }
-
-  if (initialValue) {
-    optionsJsx.unshift(<option value="" key="initial">{initialValue}</option>)
-  }
-
-  return (
-    <label>
-      {label && <span className="edit-label">{label}</span>}
-      <select className={required && !value ? 'warning' : ''} name={fieldName} value={value} onChange={(event) => {
-        updateField(section, subsection, fieldName, event.target.value)
-      }} {...attributes}>
-        {optionsJsx}
-      </select>
-    </label>
-  )
-})
+import { DATA_OPERATORS, DATA_FUNCTIONS } from '../CdcWaffleChart'
 
 const headerColors = [ 'theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber' ]
 
-const EditorPanel = memo(() => {
+const CheckBox = memo(({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
+  <label className="checkbox">
+    <input type="checkbox" name={fieldName} checked={value} onChange={() => { updateField(section, subsection, fieldName, !value) }} {...attributes} />
+    <span className="edit-label column-heading">{label}</span><span className="cove-icon">{tooltip}</span>
+  </label>
+))
+
+const EditorPanel = memo((props) => {
   const {
     config,
     updateConfig,
@@ -122,13 +33,10 @@ const EditorPanel = memo(() => {
     data,
     setParentConfig,
     isDashboard
-  } = useContext(Context)
+  } = useContext(ConfigContext)
 
   const [ displayPanel, setDisplayPanel ] = useState(true)
-
-  const enforceRestrictions = (updatedConfig) => {
-    //If there are any dependencies between fields, etc../
-  }
+  const [ showConfigConfirm, setShowConfigConfirm ] = useState(false)
 
   const updateField = (section, subsection, fieldName, newValue) => {
     // Top level
@@ -139,8 +47,6 @@ const EditorPanel = memo(() => {
         updatedConfig.filterValue = ''
       }
 
-      enforceRestrictions(updatedConfig)
-
       updateConfig(updatedConfig)
       return
     }
@@ -159,29 +65,34 @@ const EditorPanel = memo(() => {
         sectionValue = { ...config[section], [subsection]: { ...config[section][subsection], [fieldName]: newValue } }
       }
     }
-
     let updatedConfig = { ...config, [section]: sectionValue }
 
-    enforceRestrictions(updatedConfig)
-
     updateConfig(updatedConfig)
   }
 
-  const missingRequiredSections = () => {
-    //Whether to show error message if something is required to show a data-bite and isn't filled in
-    return false
-  }
-
   useEffect(() => {
+
+    console.log('updating parent')
+    console.log(setParentConfig)
     // Pass up to Editor if needed
     if (setParentConfig) {
       const newConfig = convertStateToConfig()
 
+      console.log('newConfig', newConfig)
+
       setParentConfig(newConfig)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ config ])
 
+  useEffect(()=> {
+    if (!showConfigConfirm) {
+      let newConfig = { ...config }
+      delete newConfig.newViz
+      updateConfig(newConfig)
+    }
+  }, [])
+
   useEffect(() => {
     //Verify comparate data type
     let operators = [ '<', '>', '<=', '>=' ]
@@ -199,11 +110,13 @@ const EditorPanel = memo(() => {
   }, [ config.dataConditionalOperator, config.dataConditionalComparate ])
 
   const onBackClick = () => {
-    if (isDashboard) {
-      updateConfig({ ...config, editing: false })
-    } else {
-      setDisplayPanel(!displayPanel)
-    }
+    setDisplayPanel(!displayPanel)
+
+    // if (isDashboard) {
+    //   updateConfig({ ...config, editing: false })
+    // } else {
+    //   setDisplayPanel(!displayPanel)
+    // }
   }
 
   const Error = () => {
@@ -218,13 +131,10 @@ const EditorPanel = memo(() => {
   }
 
   const Confirm = () => {
-
     const confirmDone = (e) => {
       e.preventDefault()
-
-      let newConfig = {...config}
+      let newConfig = { ...config }
       delete newConfig.newViz
-
       updateConfig(newConfig)
     }
 
@@ -233,7 +143,7 @@ const EditorPanel = memo(() => {
         <section className="waiting-container">
           <h3>Finish Configuring</h3>
           <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
-          <button className="btn" style={{ margin: '1em auto' }} disabled={missingRequiredSections()} onClick={confirmDone}>I'm Done</button>
+          <button className="btn" style={{ margin: '1em auto' }} onClick={confirmDone}>I'm Done</button>
         </section>
       </section>
     )
@@ -241,35 +151,27 @@ const EditorPanel = memo(() => {
 
   const convertStateToConfig = () => {
     let strippedState = JSON.parse(JSON.stringify(config))
-    if (false === missingRequiredSections()) {
-      delete strippedState.newViz
-    }
+    delete strippedState.newViz
     delete strippedState.runtime
 
     return strippedState
   }
 
+  const addNewFilter = () => {
+    let filters = config.filters ? [ ...config.filters ] : []
+    filters.push({ values: [] })
+    updateConfig({ ...config, filters })
+  }
+
   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 })
   }
 
@@ -295,214 +197,243 @@ const EditorPanel = memo(() => {
     return filterDataOptions
   }
 
-  const toggleCustomDenom = () => {
-    let denom = { ...config }
-    updateConfig({ ...config, customDenom: !denom.customDenom })
-  }
+  const editorContent = (
+
+    <Accordion>
+      <Accordion.Section title="General">
+        <InputText value={config.title} fieldName="title" label="Title" placeholder="Waffle Chart Title"
+                   updateField={updateField}/>
+        <InputText type="textarea" value={config.content} fieldName="content" label="Message" updateField={updateField} tooltip={
+          <Tooltip style={{textTransform: 'none'}}>
+            <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+            <Tooltip.Content>
+              <p>Enter the message text for the visualization. The following HTML tags are supported: strong, em, sup, and sub.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }/>
+        <InputText value={config.subtext} fieldName="subtext" label="Subtext/Citation"
+                   placeholder="Waffle Chart Subtext or Citation" updateField={updateField} tooltip={
+          <Tooltip style={{textTransform: 'none'}}>
+            <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
+            <Tooltip.Content>
+              <p>Enter supporting text to display below the data visualization, if applicable. The following HTML tags are supported: strong, em, sup, and sub.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }/>
+      </Accordion.Section>
+      <Accordion.Section title="Data">
+        <h4 style={{ fontWeight: '600' }}>Numerator</h4>
+        <div className="cove-accordion__panel-section">
+          <div className="cove-input-group">
+            <InputSelect value={config.dataColumn || ''} fieldName="dataColumn" label="Data Column"
+                         updateField={updateField} initial="Select" options={getColumns()}/>
+          </div>
+
+          <div className="cove-input-group">
+            <InputSelect value={config.dataFunction || ''} fieldName="dataFunction" label="Data Function"
+                         updateField={updateField} initial="Select" options={DATA_FUNCTIONS}/>
+          </div>
+
+          <div className="cove-input-group">
+            <label><span className="edit-label">Data Conditional</span></label>
+            <div className="cove-accordion__panel-row cove-accordion__small-inputs">
+              <div className="cove-accordion__panel-col">
+                <InputSelect value={config.dataConditionalColumn || ''} fieldName="dataConditionalColumn"
+                             updateField={updateField} initial="Select" options={getColumns()}/>
+              </div>
+              <div className="cove-accordion__panel-col">
+                <InputSelect value={config.dataConditionalOperator || ''} fieldName="dataConditionalOperator"
+                             updateField={updateField} initial="Select" options={DATA_OPERATORS}/>
+              </div>
+              <div className="cove-accordion__panel-col">
+                <InputText value={config.dataConditionalComparate} fieldName={'dataConditionalComparate'}
+                           updateField={updateField}
+                           className={config.invalidComparate ? 'cove-accordion__input-error' : ''}
+                           style={{minHeight: '2rem'}}
+                />
+              </div>
+            </div>
+          </div>
+
+          {config.invalidComparate &&
+            <div className="cove-accordion__panel-error">
+              Non-numerical comparate values can only be used with = or ≠.
+            </div>
+          }
+        </div>
+        <div className="cove-accordion__panel-row align-center">
+          <div className="cove-accordion__panel-col">
+            <h4 style={{ fontWeight: '600' }}>Denominator</h4>
+          </div>
+          <div className="cove-accordion__panel-col">
+            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+              <label className="cove-accordion__panel-label--inline">Select from data</label>
+              <InputCheckbox size='small' value={config.customDenom} fieldName='customDenom' updateField={updateField}/>
+            </div>
+          </div>
+        </div>
+        <div className="cove-accordion__panel-section">
+          {!config.customDenom &&
+            <div className="cove-accordion__panel-row align-center">
+              <div className="cove-accordion__panel-col">
+                <InputText value={config.dataDenom} fieldName="dataDenom" updateField={updateField}/>
+              </div>
+              <div className="cove-accordion__panel-col" style={{display: 'flex', alignItems: 'center'}}>
+                <label className="cove-accordion__panel-label--muted">default (100)</label>
+              </div>
+            </div>
+          }
+          {config.customDenom &&
+            <>
+              <InputSelect value={config.dataDenomColumn || ''} fieldName="dataDenomColumn" label="Data Column"
+                           updateField={updateField} initial="Select" options={getColumns()}/>
+              <InputSelect value={config.dataDenomFunction || ''} fieldName="dataDenomFunction" label="Data Function"
+                           updateField={updateField} initial="Select" options={DATA_FUNCTIONS}/>
+            </>
+          }
+        </div>
+        <ul className="column-edit">
+          <li className="three-col">
+            <div style={{marginRight: '1rem'}}>
+              <InputText value={config.prefix} fieldName="prefix" label="Prefix" updateField={updateField}/>
+            </div>
+            <div style={{marginRight: '1rem'}}>
+              <InputText value={config.suffix} fieldName="suffix" label="Suffix" updateField={updateField}/>
+            </div>
+            <div>
+              <InputText type="number" value={config.roundToPlace} fieldName="roundToPlace" label="Round" updateField={updateField}/>
+            </div>
+          </li>
+        </ul>
+
+        <hr className="cove-accordion__divider" />
+
+        <label style={{marginBottom: '1rem'}}>
+          <span className="edit-label">Data Point Filters</span>
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target><Icon display="question" style={{ marginLeft: '0.5rem' }}/></Tooltip.Target>
+            <Tooltip.Content>
+              <p>To refine the highlighted data point, specify one or more filters (e.g., "Male" and
+                "Female" for a column called "Sex").</p>
+            </Tooltip.Content>
+          </Tooltip>
+        </label>
+        {config.filters &&
+          <ul className="filters-list" style={{paddingLeft: 0, marginBottom: '1rem'}}>
+            {config.filters.map((filter, index) => (
+              <fieldset className="edit-block" key={index}>
+                <button type="button" className="remove-column" onClick={() => {
+                  removeFilter(index)
+                }}>Remove
+                </button>
+                <label>
+                  <span className="edit-label column-heading">Column</span>
+                  <select value={filter.columnName} onChange={(e) => {
+                    updateFilterProp('columnName', index, e.target.value)
+                  }}>
+                    <option value="">- Select Option -</option>
+                    {getColumns().map((dataKey, index) => (
+                      <option value={dataKey} key={index}>{dataKey}</option>
+                    ))}
+                  </select>
+                </label>
+                <label>
+                  <span className="edit-label column-heading">Column Value</span>
+                  <select value={filter.columnValue} onChange={(e) => {
+                    updateFilterProp('columnValue', index, e.target.value)
+                  }}>
+                    <option value="">- Select Option -</option>
+                    {getFilterColumnValues(index).map((dataKey, index) => (
+                      <option value={dataKey} key={index}>{dataKey}</option>
+                    ))}
+                  </select>
+                </label>
+              </fieldset>
+            ))}
+          </ul>
+        }
+        <Button onClick={addNewFilter} fluid>Add Filter</Button>
+      </Accordion.Section>
+      <Accordion.Section title="Visual">
+        <InputSelect value={config.shape} fieldName="shape" label="Shape"
+                     updateField={updateField} options={[ 'circle', 'square', 'person' ]}/>
+
+        <div className="cove-accordion__panel-row cove-accordion__small-inputs" style={{marginTop: '1rem', marginBottom: '1rem'}}>
+          <div className="cove-accordion__panel-col">
+            <InputText type="number" value={config.nodeWidth} fieldName="nodeWidth" label="Width" updateField={updateField}/>
+          </div>
+          <div className="cove-accordion__panel-col">
+            <InputText type="number" value={config.nodeSpacer} fieldName="nodeSpacer" label="Spacer" updateField={updateField}/>
+          </div>
+        </div>
+
+        <div className="cove-input-group">
+          <InputSelect value={config.orientation} fieldName="orientation" label="Layout"
+                       updateField={updateField} options={[ 'horizontal', 'vertical' ]}/>
+        </div>
+
+        <div className="cove-input-group">
+          <label><span className="edit-label column-heading">Data Point Font Size</span></label>
+          <div className="cove-accordion__panel-row cove-accordion__small-inputs align-center">
+            <div className="cove-accordion__panel-col">
+              <InputText type="number" value={config.fontSize} fieldName="fontSize" updateField={updateField}/>
+            </div>
+            <div className="cove-accordion__panel-col" style={{display: 'flex', alignItems: 'center'}}>
+              <label className="accordion__panel-label--muted">default (50px)</label>
+            </div>
+          </div>
+        </div>
+
+        <InputSelect value={config.overallFontSize} fieldName="overallFontSize" label="Overall Font Size"
+                     updateField={updateField} options={[ 'small', 'medium', 'large' ]}/>
+
+        <label>
+          <span className="edit-label">Theme</span>
+          <ul className="color-palette">
+            {headerColors.map((palette) => (
+              <li title={palette} key={palette} onClick={() => {
+                updateConfig({ ...config, theme: palette })
+              }} className={config.theme === palette ? 'selected ' + palette : palette}>
+              </li>
+            ))}
+          </ul>
+
+          {/* <div className="cove-accordion__panel-section">
+            <CheckBox value={config.visual.border} section="visual" fieldName="border" label="Display Borders" updateField={updateField} />
+            <CheckBox value={config.visual.borderColorTheme} section="visual" fieldName="borderColorTheme" label="Use theme border color" updateField={updateField} />
+            <CheckBox value={config.visual.accent} section="visual" fieldName="accent" label="Use Accent Style" updateField={updateField} />
+            <CheckBox value={config.visual.background} section="visual" fieldName="background" label="Use theme background color" updateField={updateField} />
+            <CheckBox value={config.visual.hideBackgroundColor} section="visual" fieldName="hideBackgroundColor" label="Hide Background Color" updateField={updateField} />
+          </div> */}
+
+        </label>
+      </Accordion.Section>
+    </Accordion>
+  )
 
-  if (loading) {
-    return null
-  }
+  if (loading) return null
 
   return (
     <ErrorBoundary component="EditorPanel">
-      {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error/>}
-      {config.newViz && <Confirm/>}
-      <button className={displayPanel ? `editor-toggle` : `editor-toggle collapsed`}
-              title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}/>
-      <section className={displayPanel ? 'editor-panel' : 'hidden editor-panel'}>
-        <h2>Configure Waffle Chart</h2>
-        <section className="form-container">
-          <form>
-            <Accordion allowZeroExpanded={true}>
-              <AccordionItem> {/* General */}
-                <AccordionItemHeading>
-                  <AccordionItemButton>
-                    General
-                  </AccordionItemButton>
-                </AccordionItemHeading>
-                <AccordionItemPanel>
-                  <TextField value={config.title} fieldName="title" label="Title" placeholder="Waffle Chart Title"
-                             updateField={updateField}/>
-                  <TextField type="textarea" value={config.content} fieldName="content" label="Message"
-                             updateField={updateField}/>
-                  <TextField value={config.subtext} fieldName="subtext" label="Subtext/Citation"
-                             placeholder="Waffle Chart Subtext or Citation" updateField={updateField}/>
-                </AccordionItemPanel>
-              </AccordionItem>
-              <AccordionItem>
-                <AccordionItemHeading>
-                  <AccordionItemButton>
-                    Data
-                  </AccordionItemButton>
-                </AccordionItemHeading>
-                <AccordionItemPanel>
-                  <h4 style={{ fontWeight: '600' }}>Numerator</h4>
-                  <div className="accordion__panel-section">
-                    <Select value={config.dataColumn || ''} fieldName="dataColumn" label="Data Column"
-                            updateField={updateField} initial="Select" options={getColumns()}/>
-                    <Select value={config.dataFunction || ''} fieldName="dataFunction" label="Data Function"
-                            updateField={updateField} initial="Select" options={DATA_FUNCTIONS}/>
-                    <label><span className="edit-label">Data Conditional</span></label>
-                    <div className="accordion__panel-row accordion__small-inputs">
-                      <div className="accordion__panel-col">
-                        <Select value={config.dataConditionalColumn || ''} fieldName="dataConditionalColumn"
-                                updateField={updateField} initial="Select" options={getColumns()}/>
-                      </div>
-                      <div className="accordion__panel-col">
-                        <Select value={config.dataConditionalOperator || ''} fieldName="dataConditionalOperator"
-                                updateField={updateField} initial="Select" options={DATA_OPERATORS}/>
-                      </div>
-                      <div className="accordion__panel-col">
-                        <TextField value={config.dataConditionalComparate} fieldName={'dataConditionalComparate'}
-                                   updateField={updateField}
-                                   className={config.invalidComparate ? 'accordion__input-error' : ''}/>
-                      </div>
-                    </div>
-                    {config.invalidComparate &&
-                    <div className="accordion__panel-error">Non-numerical comparate values can only be used with = or
-                      ≠.</div>
-                    }
-                  </div>
-
-                  <div className="accordion__panel-row align-center">
-                    <div className="accordion__panel-col">
-                      <h4 style={{ fontWeight: '600' }}>Denominator</h4>
-                    </div>
-                    <div className="accordion__panel-col">
-                      <div className="d-flex justify-end">
-                        <label className={'accordion__panel-label--inline'}>Select from data</label>
-                        <div className={`accordion__panel-checkbox${config.customDenom ? ' checked' : ''}`}
-                             onClick={() => toggleCustomDenom()}/>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="accordion__panel-section">
-                    {!config.customDenom &&
-                    <div className="accordion__panel-row align-center">
-                      <div className="accordion__panel-col">
-                        <TextField value={config.dataDenom} fieldName="dataDenom" updateField={updateField}/>
-                      </div>
-                      <div className="accordion__panel-col">
-                        <label className={'accordion__panel-label--muted'}>default (100)</label>
-                      </div>
-                    </div>
-                    }
-                    {config.customDenom &&
-                    <>
-                      <Select value={config.dataDenomColumn || ''} fieldName="dataDenomColumn" label="Data Column"
-                              updateField={updateField} initial="Select" options={getColumns()}/>
-                      <Select value={config.dataDenomFunction || ''} fieldName="dataDenomFunction" label="Data Function"
-                              updateField={updateField} initial="Select" options={DATA_FUNCTIONS}/>
-                    </>
-                    }
-                  </div>
-                  <ul className="column-edit">
-                    <li className="three-col">
-                      <TextField value={config.prefix} fieldName="prefix" label="Prefix" updateField={updateField}/>
-                      <TextField value={config.suffix} fieldName="suffix" label="Suffix" updateField={updateField}/>
-                      <TextField type="number" value={config.roundToPlace} fieldName="roundToPlace" label="Round"
-                                 updateField={updateField}/>
-                    </li>
-                  </ul>
-                </AccordionItemPanel>
-              </AccordionItem>
-              <AccordionItem>
-                <AccordionItemHeading>
-                  <AccordionItemButton>
-                    Filters
-                  </AccordionItemButton>
-                </AccordionItemHeading>
-                <AccordionItemPanel>
-                  <ul className="filters-list">
-                    {config.filters && config.filters.map((filter, index) => (
-                        <fieldset className="edit-block" key={index}>
-                          <button type="button" className="remove-column" onClick={() => {
-                            removeFilter(index)
-                          }}>Remove
-                          </button>
-                          <label>
-                            <span className="edit-label column-heading">Column</span>
-                            <select value={filter.columnName} onChange={(e) => {
-                              updateFilterProp('columnName', index, e.target.value)
-                            }}>
-                              <option value="">- Select Option -</option>
-                              {getColumns().map((dataKey, index) => (
-                                <option value={dataKey} key={index}>{dataKey}</option>
-                              ))}
-                            </select>
-                          </label>
-                          <label>
-                            <span className="edit-label column-heading">Column Value</span>
-                            <select value={filter.columnValue} onChange={(e) => {
-                              updateFilterProp('columnValue', index, e.target.value)
-                            }}>
-                              <option value="">- Select Option -</option>
-                              {getFilterColumnValues(index).map((dataKey, index) => (
-                                <option value={dataKey} key={index}>{dataKey}</option>
-                              ))}
-                            </select>
-                          </label>
-                        </fieldset>
-                      )
-                    )}
-                  </ul>
-
-                  <button type="button" onClick={addNewFilter} className="btn btn-primary">Add Filter</button>
-                </AccordionItemPanel>
-              </AccordionItem>
-              <AccordionItem>
-                <AccordionItemHeading>
-                  <AccordionItemButton>
-                    Visual
-                  </AccordionItemButton>
-                </AccordionItemHeading>
-                <AccordionItemPanel>
-                  <Select value={config.shape} fieldName="shape" label="Shape"
-                          updateField={updateField} options={[ 'circle', 'square', 'person' ]}/>
-
-                  <div className="accordion__panel-row accordion__small-inputs" style={{marginTop: '1em'}}>
-                    <div className="accordion__panel-col">
-                      <TextField type="number" value={config.nodeWidth} fieldName="nodeWidth" label="Width" updateField={updateField}/>
-                    </div>
-                    <div className="accordion__panel-col">
-                      <TextField type="number" value={config.nodeSpacer} fieldName="nodeSpacer" label="Spacer" updateField={updateField}/>
-                    </div>
-                  </div>
-
-                  <Select value={config.orientation} fieldName="orientation" label="Layout"
-                          updateField={updateField} options={[ 'horizontal', 'vertical' ]}/>
-
-                  <label><span className="edit-label column-heading">Data Point Font Size</span></label>
-                  <div className="accordion__panel-row accordion__small-inputs align-center">
-                    <div className="accordion__panel-col">
-                      <TextField type="number" value={config.fontSize} fieldName="fontSize" updateField={updateField}/>
-                    </div>
-                    <div className="accordion__panel-col">
-                      <label className={'accordion__panel-label--muted'}>default (50px)</label>
-                    </div>
-                  </div>
-
-                  <Select value={config.overallFontSize} fieldName="overallFontSize" label="Overall Font Size"
-                          updateField={updateField} options={[ 'small', 'medium', 'large' ]}/>
-
-                  <label className="header">
-                    <span className="edit-label">Theme</span>
-                    <ul className="color-palette">
-                      {headerColors.map((palette) => (
-                        <li title={palette} key={palette} onClick={() => {
-                          updateConfig({ ...config, theme: palette })
-                        }} className={config.theme === palette ? 'selected ' + palette : palette}>
-                        </li>
-                      ))}
-                    </ul>
-                  </label>
-                </AccordionItemPanel>
-              </AccordionItem>
-            </Accordion>
-          </form>
+      <div className="cove-editor">
+        {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error/>}
+        {config.newViz && showConfigConfirm && <Confirm/>}
+        <button className={`cove-editor--toggle` + (!displayPanel ? ` collapsed` : ``)}
+                title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}/>
+        <section className={`cove-editor__panel` + (displayPanel ? `` : ' hidden')}>
+          <div className="cove-editor__panel-container">
+            <h2 className="cove-editor__heading">Configure Waffle Chart</h2>
+            <section className="cove-editor__content">
+              {editorContent}
+            </section>
+          </div>
         </section>
-      </section>
+        <div className="cove-editor__content">
+          <div className="cove-editor__content-wrap">
+            {props.children}
+          </div>
+        </div>
+      </div>
     </ErrorBoundary>
   )
 })