@cdc/dashboard 4.24.3 → 4.24.5

package/src/components/Header/FilterModal.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 import { MultiDashboardConfig } from '../../types/MultiDashboard'
 import { SharedFilter } from '../../types/SharedFilter'
 import { DashboardDispatchContext } from '../../DashboardContext'
@@ -11,6 +11,8 @@ import Icon from '@cdc/core/components/ui/Icon'
 import Button from '@cdc/core/components/elements/Button'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import DataTransform from '@cdc/core/helpers/DataTransform'
+import { getVizRowColumnLocator } from '../../helpers/getVizRowColumnLocator'
+import _ from 'lodash'
 
 type ModalProps = {
   config: MultiDashboardConfig
@@ -26,9 +28,39 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
   const [columns, setColumns] = useState<string[]>([])
   const transform = new DataTransform()
 
+  const vizRowColumnLocator = getVizRowColumnLocator(config.rows)
+
+  const [usedByNameLookup, usedByOptions] = useMemo(() => {
+    const nameLookup = {}
+    const vizOptions = Object.keys(config.visualizations)
+      .filter(vizKey => {
+        const notAdded = !filter.usedBy || filter.usedBy.indexOf(vizKey) === -1
+        const usesSharedFilter = config.visualizations[vizKey].usesSharedFilter
+        const row = vizRowColumnLocator[vizKey].row
+        const dataConfiguredOnRow = config.rows[row].dataKey
+        return filter.setBy !== vizKey && notAdded && !usesSharedFilter && !dataConfiguredOnRow
+      })
+      .map(vizKey => {
+        const viz = config.visualizations[vizKey]
+        const vizName = viz.general?.title || viz.title || vizKey
+        nameLookup[vizKey] = vizName
+        return vizKey
+      })
+    const rowOptions: number[] = []
+
+    config.rows.forEach((row, rowIndex) => {
+      if (!!row.multiVizColumn) {
+        nameLookup[rowIndex] = `Row ${rowIndex + 1}`
+        rowOptions.push(rowIndex)
+      }
+    })
+
+    const rowsNotSelected = rowOptions.filter(row => !filter.usedBy || filter.usedBy.indexOf(row.toString()) === -1)
+    return [nameLookup, [...vizOptions, ...rowsNotSelected]]
+  }, [config.visualizations, filter.usedBy, filter.setBy, vizRowColumnLocator])
+
   useEffect(() => {
     const runSetColumns = async () => {
-      if (config.filterBehavior === FilterBehavior.Apply) return
       let columns = {}
       let dataKeys = Object.keys(config.datasets)
 
@@ -71,18 +103,13 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
   }
 
   const updateFilterProp = (name, value) => {
-    // @TODO this should be refactored into a reducer function.
-    // it's unsafe to directly set objects w/o guardrails
-    let newFilter = { ...filter }
-
-    newFilter[name] = value
-
-    console.log('newFilter', newFilter)
+    const newFilter = { ..._.cloneDeep(filter), [name]: value }
 
     setFilter(newFilter)
   }
 
   const addFilterUsedBy = (filter, value) => {
+    if (value === '') return
     if (!filter.usedBy) filter.usedBy = []
     filter.usedBy.push(value)
     updateFilterProp('usedBy', filter.usedBy)
@@ -97,9 +124,10 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
   }
 
   const updateAPIFilter = (key: keyof APIFilter, value: string | boolean) => {
-    const _filter = filter.apiFilter || { apiEndpoint: '', valueSelector: '', textSelector: '' }
+    const filterClone = _.cloneDeep(filter)
+    const _filter = filterClone.apiFilter || { apiEndpoint: '', valueSelector: '', textSelector: '' }
     const newAPIFilter: APIFilter = { ..._filter, [key]: value }
-    setFilter({ ...filter, apiFilter: newAPIFilter })
+    setFilter({ ...filterClone, apiFilter: newAPIFilter })
   }
 
   return (
@@ -341,6 +369,7 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
                   value={filter.pivot}
                   onChange={e => {
                     updateFilterProp('pivot', e.target.value)
+                    updateFilterProp('showDropdown', true)
                   }}
                 >
                   <option value=''>- Select Option -</option>
@@ -363,16 +392,19 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
                   }}
                 />
               </label>
-              <label>
-                <span className='edit-label column-heading'>Show Dropdown</span>
-                <input
-                  type='checkbox'
-                  defaultChecked={filter.showDropdown === true}
-                  onChange={e => {
-                    updateFilterProp('showDropdown', !filter.showDropdown)
-                  }}
-                />
-              </label>
+              {!filter.pivot && (
+                <label>
+                  <span className='edit-label column-heading'>Show Dropdown</span>
+                  <input
+                    type='checkbox'
+                    defaultChecked={filter.showDropdown === true}
+                    onChange={e => {
+                      updateFilterProp('showDropdown', !filter.showDropdown)
+                    }}
+                  />
+                </label>
+              )}
+
               <label>
                 <span className='edit-label column-heading'>Set By: </span>
                 <select value={filter.setBy} onChange={e => updateFilterProp('setBy', e.target.value)}>
@@ -388,13 +420,13 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
                 <span className='edit-label column-heading'>Used By: </span>
                 <ul>
                   {filter.usedBy &&
-                    filter.usedBy.map(vizKey => (
-                      <li key={`used-by-list-item-${vizKey}`}>
-                        <span>{config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : config.visualizations[vizKey].title || vizKey}</span>{' '}
+                    filter.usedBy.map(opt => (
+                      <li key={`used-by-list-item-${opt}`}>
+                        <span>{usedByNameLookup[opt] || opt}</span>{' '}
                         <button
                           onClick={e => {
                             e.preventDefault()
-                            removeFilterUsedBy(filter, vizKey)
+                            removeFilterUsedBy(filter, opt)
                           }}
                         >
                           X
@@ -402,15 +434,13 @@ const FilterModal: React.FC<ModalProps> = ({ config, filterState, index, removeF
                       </li>
                     ))}
                 </ul>
-                <select onChange={e => addFilterUsedBy(filter, e.target.value)}>
+                <select value='' onChange={e => addFilterUsedBy(filter, e.target.value)}>
                   <option value=''>- Select Option -</option>
-                  {Object.keys(config.visualizations)
-                    .filter(vizKey => filter.setBy !== vizKey && (!filter.usedBy || filter.usedBy.indexOf(vizKey) === -1) && !config.visualizations[vizKey].usesSharedFilter)
-                    .map(vizKey => (
-                      <option value={vizKey} key={`used-by-select-item-${vizKey}`}>
-                        {config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : config.visualizations[vizKey].title || vizKey}
-                      </option>
-                    ))}
+                  {usedByOptions.map(opt => (
+                    <option value={opt} key={`used-by-select-item-${opt}`}>
+                      {usedByNameLookup[opt] || opt}
+                    </option>
+                  ))}
                 </select>
               </label>
               <label>

package/src/components/MultiConfigTabs/MultiTabs.tsx

@@ -9,7 +9,8 @@ const MultiTabs = () => {
   const tabs = useMemo<string[]>(() => (config.multiDashboards || []).map(({ label }) => label), [config.multiDashboards])
   const activeTab = useMemo<number>(() => config.activeDashboard, [config.activeDashboard])
 
-  const load = (indexToSwitchTo: number) => {
+  const load = (indexToSwitchTo: number, e) => {
+    e.preventDefault() // some form wrapper is causing this to act as a submit button
     dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
   }
 
@@ -18,7 +19,7 @@ const MultiTabs = () => {
     <ul className='nav nav-tabs multi-config-tabs'>
       {tabs.map((tab, index) => (
         <li className='nav-item'>
-          <a className={`nav-link${activeTab === index ? ' active' : ''}`} aria-current={activeTab === index ? 'page' : null} href='#' onClick={() => load(index)}>
+          <a className={`nav-link${activeTab === index ? ' active' : ''}`} aria-current={activeTab === index ? 'page' : null} href='#' onClick={e => load(index, e)}>
             {tab}
           </a>
         </li>

package/src/components/Row.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useMemo, useState } from 'react'
 
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 
@@ -13,41 +13,53 @@ import FourEightColIcon from '../images/icon-col-4-8.svg'
 import EightFourColIcon from '../images/icon-col-8-4.svg'
 import ToggleIcon from '../images/icon-toggle.svg'
 import { ConfigRow } from '../types/ConfigRow'
+import { DataDesignerModal } from './DataDesignerModal'
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import { iconHash } from '../helpers/iconHash'
+import _ from 'lodash'
 
 type RowMenuProps = {
   rowIdx: number
-  row: ConfigRow
 }
 
-const RowMenu: React.FC<RowMenuProps> = ({ rowIdx, row }) => {
+const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
   const { config } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
-  const { rows } = config
+  const rows = _.cloneDeep(config.rows)
+  const row = config.rows[rowIdx]
 
   const updateConfig = config => dispatch({ type: 'UPDATE_CONFIG', payload: [config] })
-  const getCurr = () => {
-    if (row[0].toggle) return 'toggle'
-    return row.reduce((acc, curr) => {
+  const curr = useMemo(() => {
+    if (row.toggle) return 'toggle'
+    return row.columns.reduce((acc, curr) => {
       if (curr.width) {
         acc += curr.width
       }
       return acc
     }, '')
-  }
-
-  const [curr, setCurr] = useState(getCurr())
+  }, [row])
 
   const setRowLayout = (layout: number[], toggle = undefined) => {
-    const newRows = [...rows]
-    const row = newRows[rowIdx]
-
-    row.forEach((col, i) => {
-      col.width = layout[i] ?? null
-      col.toggle = toggle
-      if (!toggle) col.hide = undefined
-    })
+    const newRows = _.cloneDeep(rows)
+    newRows[rowIdx].toggle = toggle
+    const rowColumns = newRows[rowIdx].columns
+    const columnsWithWidgets = rowColumns.filter(c => c.widget)
+
+    const totalWidgets = columnsWithWidgets.length
+    if (totalWidgets > layout.length) {
+      // don't let them change to a smaller layout and lose viz config work
+      return
+    } else {
+      // a 3 column becoming a 2 column with only a VizConfig in the second column will maintain order
+      // a 2 column becoming a 1 column with only a VizConfig in the second column will move the VizConfig to the first column
+      const mapRow = rowColumns.length > layout.length ? columnsWithWidgets : rowColumns
+      newRows[rowIdx].columns = layout.map((width, colIndex) => {
+        const col = mapRow[colIndex]
+        return col ? { ...col, width } : { width }
+      })
+    }
+
     updateConfig({ ...config, rows: newRows })
-    setCurr(toggle ? 'toggle' : layout.join(''))
   }
 
   const moveRow = (dir = 'down') => {
@@ -138,15 +150,28 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx, row }) => {
 }
 
 const Row = ({ row, idx: rowIdx, uuid }) => {
+  const { overlay } = useGlobalContext()
   return (
     <div className='builder-row' data-row-id={rowIdx}>
-      <RowMenu rowIdx={rowIdx} row={row} />
+      <RowMenu rowIdx={rowIdx} />
       <div className='column-container'>
-        {row
-          .filter(column => column.width)
-          .map((column, colIdx) => (
-            <Column data={column} key={`row-${uuid}-col-${colIdx}`} rowIdx={rowIdx} colIdx={colIdx} />
-          ))}
+        <>
+          <button
+            title='Configure Data'
+            className='btn btn-configure-row'
+            onClick={() => {
+              overlay?.actions.openOverlay(<DataDesignerModal rowIndex={rowIdx} />)
+            }}
+          >
+            {iconHash['gear']}
+          </button>
+
+          {row.columns
+            .filter(column => column.width)
+            .map((column, colIdx) => (
+              <Column data={column} key={`row-${uuid}-col-${colIdx}`} rowIdx={rowIdx} colIdx={colIdx} />
+            ))}
+        </>
       </div>
     </div>
   )

package/src/components/Toggle/Toggle.tsx

@@ -7,23 +7,22 @@ import './toggle-style.css'
 import _ from 'lodash'
 
 type ToggleProps = {
+  active: number
   row: ConfigRow
-  rowIndex: number
   visualizations: Record<string, Visualization>
+  setToggled: (colIndex: number) => void
 }
-const Toggle: React.FC<ToggleProps> = ({ row, rowIndex, visualizations }) => {
-  const dispatch = useContext(DashboardDispatchContext)
-
+const Toggle: React.FC<ToggleProps> = ({ active, row, visualizations, setToggled }) => {
   const selectItem = (colIndex, e = null) => {
     if (e?.key && e.key !== 'Enter') return
-    dispatch({ type: 'TOGGLE_ROW', payload: { rowIndex, colIndex } })
+    setToggled(colIndex)
   }
   return (
     <div className='toggle-component'>
-      {row.map((col, colIndex) => {
+      {row.columns.map((col, colIndex) => {
         if (!col.widget) return null
         const type = visualizations[col.widget].type
-        const selected = col.hide !== undefined ? col.hide : colIndex === 0
+        const selected = colIndex === active
         return (
           <div role='radio' className={selected ? 'selected' : ''} key={colIndex} onClick={() => selectItem(colIndex)} onKeyUp={e => selectItem(colIndex, e)} aria-checked={selected} tabIndex={0} aria-label={`Toggle ${type}`}>
             {getIcon(visualizations[col.widget])} <span>{_.capitalize(type)}</span>

package/src/components/VisualizationRow.tsx

@@ -0,0 +1,183 @@
+import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
+import React, { MouseEventHandler, useContext, useMemo } from 'react'
+import Toggle from './Toggle'
+import _ from 'lodash'
+import { ConfigRow } from '../types/ConfigRow'
+import CdcMap from '@cdc/map'
+import CdcChart from '@cdc/chart'
+import CdcDataBite from '@cdc/data-bite'
+import CdcWaffleChart from '@cdc/waffle-chart'
+import CdcMarkupInclude from '@cdc/markup-include'
+import CdcFilteredText from '@cdc/filtered-text'
+import Filters, { APIFilterDropdowns } from './Filters'
+import { FilterBehavior } from './Header/Header'
+import { DashboardContext } from '../DashboardContext'
+import { ViewPort } from '@cdc/core/types/ViewPort'
+import { getVizConfig } from '../helpers/getVizConfig'
+import { TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
+
+type VizRowProps = {
+  filteredDataOverride?: Object[]
+  row: ConfigRow
+  rowIndex: number
+  setSharedFilter: Function
+  updateChildConfig: Function
+  applyFilters: MouseEventHandler<HTMLButtonElement>
+  apiFilterDropdowns: APIFilterDropdowns
+  handleOnChange: Function
+  currentViewport: ViewPort
+}
+
+const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, rowIndex: index, setSharedFilter, updateChildConfig, applyFilters, apiFilterDropdowns, handleOnChange, currentViewport }) => {
+  const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext)
+  const [show, setShow] = React.useState(row.columns.map((col, i) => i === 0))
+  const setToggled = (colIndex: number) => {
+    setShow(show.map((_, i) => i === colIndex))
+  }
+  const inNoDataState = useMemo(() => {
+    const vals = Object.values(rawData)
+    if (!vals.length) return true
+    return vals.some(val => val === undefined)
+  }, [rawData])
+  const GoButton = ({ autoLoad }: { autoLoad?: boolean }) => {
+    if (config.filterBehavior === FilterBehavior.Apply && !autoLoad) {
+      return <button onClick={applyFilters}>GO!</button>
+    }
+    return null
+  }
+  return (
+    <div className={`dashboard-row ${row.equalHeight ? 'equal-height' : ''} ${row.toggle ? 'toggle' : ''}`} key={`row__${index}`}>
+      {row.toggle && <Toggle row={row} visualizations={config.visualizations} active={show.indexOf(true)} setToggled={setToggled} />}
+      {row.columns.map((col, colIndex) => {
+        if (col.width) {
+          if (!col.widget) return <div key={`row__${index}__col__${colIndex}`} className={`dashboard-col dashboard-col-${col.width}`}></div>
+
+          const visualizationConfig = getVizConfig(col.widget, index, config, rawData, dashboardFilteredData)
+          if (filteredDataOverride) {
+            visualizationConfig.data = filteredDataOverride
+            if (visualizationConfig.formattedData) {
+              visualizationConfig.formattedData = filteredDataOverride
+            }
+          }
+
+          const setsSharedFilter = config.dashboard.sharedFilters && config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget).length > 0
+          const setSharedFilterValue = setsSharedFilter ? config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget)[0].active : undefined
+          const tableLink = (
+            <a href={`#data-table-${visualizationConfig.dataKey}`} className='margin-left-href'>
+              {visualizationConfig.dataKey} (Go to Table)
+            </a>
+          )
+          const hideFilter = visualizationConfig.autoLoad && inNoDataState
+
+          const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex])
+          return (
+            <React.Fragment key={`vis__${index}__${colIndex}`}>
+              <div className={`dashboard-col dashboard-col-${col.width} ${!shouldShow ? 'hidden-toggle' : ''}`}>
+                {visualizationConfig.type === 'chart' && (
+                  <CdcChart
+                    key={col.widget}
+                    config={visualizationConfig}
+                    dashboardConfig={config}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
+                    isDashboard={true}
+                    link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                    configUrl={undefined}
+                    setEditing={undefined}
+                    hostname={undefined}
+                    setSharedFilterValue={undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'map' && (
+                  <CdcMap
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    showLoader={false}
+                    setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
+                    setSharedFilterValue={setSharedFilterValue}
+                    isDashboard={true}
+                    link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'data-bite' && (
+                  <CdcDataBite
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    isDashboard={true}
+                  />
+                )}
+                {visualizationConfig.type === 'waffle-chart' && (
+                  <CdcWaffleChart
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    isDashboard={true}
+                    configUrl={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'markup-include' && (
+                  <CdcMarkupInclude
+                    key={col.widget}
+                    config={visualizationConfig}
+                    configUrl={undefined}
+                    isDashboard={true}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                  />
+                )}
+                {visualizationConfig.type === 'filtered-text' && (
+                  <CdcFilteredText
+                    key={col.widget}
+                    config={visualizationConfig}
+                    isEditor={false}
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    isDashboard={true}
+                    configUrl={undefined}
+                  />
+                )}
+                {visualizationConfig.type === 'filter-dropdowns' && !hideFilter && (
+                  <React.Fragment key={col.widget}>
+                    <Filters hide={visualizationConfig.hide} filters={config.dashboard.sharedFilters} apiFilterDropdowns={apiFilterDropdowns} handleOnChange={handleOnChange} />
+                    <GoButton autoLoad={visualizationConfig.autoLoad} />
+                  </React.Fragment>
+                )}
+                {visualizationConfig.type === 'table' && (
+                  <DataTableStandAlone
+                    key={col.widget}
+                    updateConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    visualizationKey={col.widget}
+                    config={visualizationConfig as TableConfig}
+                    viewport={currentViewport}
+                  />
+                )}
+              </div>
+            </React.Fragment>
+          )
+        }
+        return <React.Fragment key={`vis__${index}__${colIndex}`}></React.Fragment>
+      })}
+    </div>
+  )
+}
+
+export default VisualizationRow

package/src/components/VisualizationsPanel.tsx

@@ -7,6 +7,8 @@ import { Table } from '@cdc/core/types/Table'
 const addVisualization = (type, subType) => {
   const modalWillOpen = type !== 'markup-include'
   const newVisualizationConfig: Partial<Visualization> = {
+    filters: [],
+    filterBehavior: 'Filter Change',
     newViz: type !== 'table',
     openModal: modalWillOpen,
     uid: type + Date.now(),
@@ -21,15 +23,36 @@ const addVisualization = (type, subType) => {
       newVisualizationConfig.general = {}
       newVisualizationConfig.general.geoType = subType
       break
-    case 'data-bite' || 'waffle-chart' || 'markup-include' || 'filtered-text':
+    case 'data-bite' || 'waffle-chart' || 'filtered-text':
       newVisualizationConfig.visualizationType = type
       break
     case 'table':
-      const tableConfig: Table = { label: 'Data Table', show: true, showDownloadUrl: false, showVertical: true, expanded: true }
+      const tableConfig: Table = { label: 'Data Table', show: true, showDownloadUrl: false, showVertical: true, expanded: true, collapsible: true }
       newVisualizationConfig.table = tableConfig
       newVisualizationConfig.columns = {}
       newVisualizationConfig.dataFormat = {}
       newVisualizationConfig.visualizationType = type
+      break
+    case 'markup-include':
+      newVisualizationConfig.contentEditor = {
+        inlineHTML: '<h2>Inline HTML</h2>',
+        markupVariables: [],
+        showHeader: true,
+        srcUrl: '#example',
+        title: 'Markup Include',
+        useInlineHTML: true
+      }
+      newVisualizationConfig.theme = 'theme-blue'
+      newVisualizationConfig.visual = {
+        border: false,
+        accent: false,
+        background: false,
+        hideBackgroundColor: false,
+        borderColorTheme: false
+      }
+      newVisualizationConfig.showEditorPanel = true
+      newVisualizationConfig.visualizationType = type
+
       break
     default:
       newVisualizationConfig.visualizationType = type
@@ -65,7 +88,7 @@ const VisualizationsPanel = ({ loadConfig, config }) => (
       <Widget addVisualization={() => addVisualization('table', '')} type='table' />
     </div>
     <span className='subheading-3'>Advanced</span>
-    <AdvancedEditor loadConfig={loadConfig} state={config} convertStateToConfig={undefined} />
+    <AdvancedEditor loadConfig={loadConfig} state={config} convertStateToConfig={() => undefined} />
   </div>
 )