@cdc/map 4.23.3 → 4.23.5

package/src/components/EditorPanel.jsx

@@ -27,6 +27,9 @@ import AlabamaGraphic from '@cdc/core/assets/icon-map-alabama.svg'
 import worldDefaultConfig from '../../examples/default-world.json'
 import usaDefaultConfig from '../../examples/default-usa.json'
 import countyDefaultConfig from '../../examples/default-county.json'
+import useMapLayers from '../hooks/useMapLayers'
+
+import { useFilters } from '@cdc/core/components/Filters'
 
 const TextField = ({ label, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', tooltip, ...attributes }) => {
   const [value, setValue] = useState(stateValue)
@@ -65,9 +68,9 @@ const TextField = ({ label, section = null, subsection = null, fieldName, update
 }
 
 const EditorPanel = props => {
-  const { state, columnsInData = [], loadConfig, setState, isDashboard, setParentConfig, setRuntimeFilters, runtimeFilters, runtimeLegend, changeFilterActive } = props
+  const { state, columnsInData = [], loadConfig, setState, isDashboard, setParentConfig, runtimeFilters, runtimeLegend, changeFilterActive, isDebug, setRuntimeFilters } = props
 
-  const { general, columns, legend, dataTable, tooltips } = state
+  const { general, columns, legend, table, tooltips } = state
 
   const [requiredColumns, setRequiredColumns] = useState(null) // Simple state so we know if we need more information before parsing the map
 
@@ -79,8 +82,22 @@ const EditorPanel = props => {
 
   const [activeFilterValueForDescription, setActiveFilterValueForDescription] = useState([0, 0])
 
+  const { handleFilterOrder, filterOrderOptions, filterStyleOptions } = useFilters({ config: state, setConfig: setState, filteredData: runtimeFilters, setFilteredData: setRuntimeFilters })
+
   const headerColors = ['theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber']
 
+  const {
+    // prettier-ignore
+    MapLayerHandlers: {
+      handleAddLayer,
+      handleMapLayerName,
+      handleMapLayerUrl,
+      handleRemoveLayer,
+      handleMapLayerNamespace,
+      handleMapLayerTooltip
+    }
+  } = useMapLayers(state, setState, false, true)
+
   const categoryMove = (idx1, idx2) => {
     let categoryValuesOrder = [...state.legend.categoryValuesOrder]
 
@@ -119,7 +136,7 @@ const EditorPanel = props => {
   }
 
   const CheckBox = memo(({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
-    <label className='checkbox'>
+    <label className='checkbox column-heading'>
       <input
         type='checkbox'
         name={fieldName}
@@ -136,23 +153,6 @@ const EditorPanel = props => {
     </label>
   ))
 
-  const handleFilterOrder = (idx1, idx2, filterIndex, filter) => {
-    let filterOrder = filter.values
-    let [movedItem] = filterOrder.splice(idx1, 1)
-    filterOrder.splice(idx2, 0, movedItem)
-    let filters = [...runtimeFilters]
-    let filterItem = { ...runtimeFilters[filterIndex] }
-    filterItem.active = filter.values[0]
-    filterItem.values = filterOrder
-    filterItem.order = 'cust'
-    filters[filterIndex] = filterItem
-
-    setState({
-      ...state,
-      filters
-    })
-  }
-
   const DynamicDesc = ({ label, fieldName, value: stateValue, type = 'input', ...attributes }) => {
     const [value, setValue] = useState(stateValue)
 
@@ -201,6 +201,17 @@ const EditorPanel = props => {
           }
         })
         break
+
+      case 'toggleDataTableLink':
+        setState({
+          ...state,
+          table: {
+            ...state.table,
+            showDataTableLink: value
+          }
+        })
+        break
+
       case 'toggleDataUrl':
         setState({
           ...state,
@@ -276,9 +287,9 @@ const EditorPanel = props => {
       case 'expandDataTable':
         setState({
           ...state,
-          general: {
-            ...state.general,
-            expandDataTable: value
+          table: {
+            ...state.table,
+            expanded: value
           }
         })
         break
@@ -409,6 +420,11 @@ const EditorPanel = props => {
           general: {
             ...state.general,
             showDownloadButton: !state.general.showDownloadButton
+          },
+          table: {
+            // setting both bc DataTable new core needs it here
+            ...state.table,
+            download: !state.general.showDownloadButton
           }
         })
         break
@@ -498,7 +514,7 @@ const EditorPanel = props => {
             })
             break
           default:
-            console.warn('Map type not set')
+            console.warn('COVE: Map type not set') // eslint-disable-line
             break
         }
         break
@@ -528,8 +544,8 @@ const EditorPanel = props => {
                 geoType: 'us',
                 type: state.type === 'us-geocode' ? 'data' : state.type
               },
-              dataTable: {
-                ...state.dataTable,
+              table: {
+                ...state.table,
                 forceDisplay: true
               }
             })
@@ -541,8 +557,8 @@ const EditorPanel = props => {
                 ...state.general,
                 geoType: 'us-region'
               },
-              dataTable: {
-                ...state.dataTable,
+              table: {
+                ...state.table,
                 forceDisplay: true
               }
             })
@@ -554,8 +570,8 @@ const EditorPanel = props => {
                 ...state.general,
                 geoType: 'world'
               },
-              dataTable: {
-                ...state.dataTable,
+              table: {
+                ...state.table,
                 forceDisplay: true
               }
             })
@@ -565,11 +581,11 @@ const EditorPanel = props => {
               ...state,
               general: {
                 ...state.general,
-                geoType: 'us-county',
-                expandDataTable: false
+                geoType: 'us-county'
               },
-              dataTable: {
-                ...state.dataTable,
+              table: {
+                ...state.table,
+                expanded: false,
                 forceDisplay: true
               }
             })
@@ -579,11 +595,11 @@ const EditorPanel = props => {
               ...state,
               general: {
                 ...state.general,
-                geoType: 'single-state',
-                expandDataTable: false
+                geoType: 'single-state'
               },
-              dataTable: {
-                ...state.dataTable,
+              table: {
+                ...state.table,
+                expanded: false,
                 forceDisplay: true
               }
             })
@@ -687,8 +703,8 @@ const EditorPanel = props => {
       case 'showDataTable':
         setState({
           ...state,
-          dataTable: {
-            ...state.dataTable,
+          table: {
+            ...state.table,
             forceDisplay: value
           }
         })
@@ -696,8 +712,8 @@ const EditorPanel = props => {
       case 'limitDataTableHeight':
         setState({
           ...state,
-          dataTable: {
-            ...state.dataTable,
+          table: {
+            ...state.table,
             limitHeight: value
           }
         })
@@ -733,8 +749,14 @@ const EditorPanel = props => {
           }
         })
         break
+      case 'filterBehavior':
+        setState({
+          ...state,
+          filterBehavior: value
+        })
+        break
       default:
-        console.warn(`Did not recognize editor property.`)
+        console.warn(`COVE: Did not recognize editor property.`) // eslint-disable-line
         break
     }
   }
@@ -857,6 +879,10 @@ const EditorPanel = props => {
           newFilters.splice(idx, 1)
         }
         break
+      case 'filterStyle':
+        newFilters[idx] = { ...newFilters[idx] }
+        newFilters[idx].filterStyle = value
+        break
       case 'columnName':
         newFilters[idx] = { ...newFilters[idx] }
         newFilters[idx].columnName = value
@@ -889,6 +915,7 @@ const EditorPanel = props => {
     })
   }
 
+  // just adds a new column but not set to any data yet
   const addAdditionalColumn = number => {
     const columnKey = `additionalColumn${number}`
 
@@ -907,6 +934,33 @@ const EditorPanel = props => {
     })
   }
 
+  const MapFilters = () => {
+    return (
+      <>
+        <label>
+          Filter Behavior
+          <select
+            value={state.filterBehavior}
+            onChange={e => {
+              setState({
+                ...state,
+                filterBehavior: e.target.value
+              })
+            }}
+          >
+            <option key='Apply Button' value='Apply Button'>
+              Apply Button
+            </option>
+            <option key='Filter Change' value='Filter Change'>
+              Filter Change
+            </option>
+          </select>
+        </label>
+        {filtersJSX}
+      </>
+    )
+  }
+
   const removeAdditionalColumn = columnName => {
     const newColumns = state.columns
 
@@ -1008,7 +1062,7 @@ const EditorPanel = props => {
     if (!isReversed && state.color.endsWith('reverse')) {
       paletteName = state.color.slice(0, -7)
     }
-    if(paletteName){
+    if (paletteName) {
       handleEditorChanges('color', paletteName)
     }
   }, [isReversed])
@@ -1136,103 +1190,110 @@ const EditorPanel = props => {
   const usedFilterColumns = {}
 
   const filtersJSX = state.filters.map((filter, index) => {
+    if (filter.type === 'url') return <></>
+
     if (filter.columnName) {
       usedFilterColumns[filter.columnName] = true
     }
 
-    const filterOptions = [
-      {
-        label: 'Ascending Alphanumeric',
-        value: 'asc'
-      },
-      {
-        label: 'Descending Alphanumeric',
-        value: 'desc'
-      },
-      {
-        label: 'Custom',
-        value: 'cust'
-      }
-    ]
-
     return (
-      <fieldset className='edit-block' key={`filter-${index}`}>
-        <button
-          className='remove-column'
-          onClick={e => {
-            e.preventDefault()
-            changeFilter(index, 'remove')
-          }}
-        >
-          Remove
-        </button>
-        <TextField value={state.filters[index].label} section='filters' subsection={index} fieldName='label' label='Label' updateField={updateField} />
-        <label>
-          <span className='edit-label column-heading'>
-            Filter Column
-            <Tooltip style={{ textTransform: 'none' }}>
-              <Tooltip.Target>
-                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-              </Tooltip.Target>
-              <Tooltip.Content>
-                <p>Selecting a column will add a dropdown menu below the map legend and allow users to filter based on the values in this column.</p>
-              </Tooltip.Content>
-            </Tooltip>
-          </span>
-          <select
-            value={filter.columnName}
-            onChange={event => {
-              changeFilter(index, 'columnName', event.target.value)
-            }}
-          >
-            {columnsOptions.filter(({ key }) => undefined === usedFilterColumns[key] || filter.columnName === key)}
-          </select>
-        </label>
-
-        <label>
-          <span className='edit-filterOrder column-heading'>Filter Order</span>
-          <select
-            value={filter.order}
-            onChange={e => {
-              changeFilter(index, 'filterOrder', e.target.value)
-              changeFilterActive(index, filter.values[0])
+      <>
+        <fieldset className='edit-block' key={`filter-${index}`}>
+          <button
+            className='remove-column'
+            onClick={e => {
+              e.preventDefault()
+              changeFilter(index, 'remove')
             }}
           >
-            {filterOptions.map((option, index) => {
-              return (
-                <option value={option.value} key={`filter-${index}`}>
-                  {option.label}
-                </option>
-              )
-            })}
-          </select>
-        </label>
-
-        {filter.order === 'cust' && (
-          <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source.index, destination.index, index, runtimeFilters[index])}>
-            <Droppable droppableId='filter_order'>
-              {provided => (
-                <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
-                  {runtimeFilters[index]?.values.map((value, index) => {
-                    return (
-                      <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
-                        {(provided, snapshot) => (
-                          <li>
-                            <div className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-                              {value}
-                            </div>
-                          </li>
-                        )}
-                      </Draggable>
-                    )
-                  })}
-                  {provided.placeholder}
-                </ul>
-              )}
-            </Droppable>
-          </DragDropContext>
-        )}
-      </fieldset>
+            Remove
+          </button>
+          <TextField value={state.filters[index].label} section='filters' subsection={index} fieldName='label' label='Label' updateField={updateField} />
+          <label>
+            <span className='edit-label column-heading'>
+              Filter Column
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Selecting a column will add a dropdown menu below the map legend and allow users to filter based on the values in this column.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            </span>
+            <select
+              value={filter.columnName}
+              onChange={event => {
+                changeFilter(index, 'columnName', event.target.value)
+              }}
+            >
+              {columnsOptions.filter(({ key }) => undefined === usedFilterColumns[key] || filter.columnName === key)}
+            </select>
+          </label>
+
+          <label>
+            <span className='edit-filterOrder column-heading'>Filter Style</span>
+            <select
+              value={filter.filterStyle}
+              onChange={e => {
+                changeFilter(index, 'filterStyle', e.target.value)
+              }}
+            >
+              {filterStyleOptions.map((option, index) => {
+                return (
+                  <option value={option} key={`filter-${option}--${index}`}>
+                    {option}
+                  </option>
+                )
+              })}
+            </select>
+          </label>
+
+          <label>
+            <span className='edit-filterOrder column-heading'>Filter Order</span>
+            <select
+              value={filter.order}
+              onChange={e => {
+                changeFilter(index, 'filterOrder', e.target.value)
+                changeFilterActive(index, filter.values[0])
+              }}
+            >
+              {filterOrderOptions.map((option, index) => {
+                return (
+                  <option value={option.value} key={`filter-${index}`}>
+                    {option.label}
+                  </option>
+                )
+              })}
+            </select>
+          </label>
+
+          {filter.order === 'cust' && (
+            <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source.index, destination.index, index, state.filters[index])}>
+              <Droppable droppableId='filter_order'>
+                {provided => (
+                  <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
+                    {state.filters[index]?.values.map((value, index) => {
+                      return (
+                        <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
+                          {(provided, snapshot) => (
+                            <li>
+                              <div className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                                {value}
+                              </div>
+                            </li>
+                          )}
+                        </Draggable>
+                      )
+                    })}
+                    {provided.placeholder}
+                  </ul>
+                )}
+              </Droppable>
+            </DragDropContext>
+          )}
+        </fieldset>
+      </>
     )
   })
 
@@ -1315,6 +1376,24 @@ const EditorPanel = props => {
     )
   }
 
+  const isLoadedFromUrl = state?.dataKey?.includes('http://') || state?.dataKey?.includes('https://')
+
+  // if isDebug = true, then try to set the Geography Col and Data col to reduce clicking
+  const setGeoColumn = () => {
+    // only for debug mode
+    let geoColFound = columnsInData.includes(state.columns.geo.name)
+    if (undefined !== isDebug && isDebug && !geoColFound) {
+      // then try to set the x axis to appropriate value so we dont have to manually do it
+      let mapcols = columnsInData[0]
+      if (mapcols !== '') editColumn('geo', 'name', mapcols)
+
+      if (!state.columns.hasOwnProperty('primary') || undefined === state.columns.primary.name || '' === state.columns.primary.name || !state.columns.primary.name) {
+        editColumn('primary', 'name', columnsInData[1]) // blindly picks first value col
+      }
+    }
+  }
+  if (isDebug) setGeoColumn()
+
   return (
     <ErrorBoundary component='EditorPanel'>
       {state?.runtime?.editorErrorMessage.length > 0 && <Error />}
@@ -2131,6 +2210,7 @@ const EditorPanel = props => {
                       </label>
                     )}
                     {/* always show */}
+                    {/*
                     <label className='checkbox'>
                       <input
                         type='checkbox'
@@ -2140,7 +2220,7 @@ const EditorPanel = props => {
                         }}
                       />
                       <span className='edit-label'>Show Special Classes Last</span>
-                    </label>
+                    </label> */}
                     {'category' !== legend.type && (
                       <label className='checkbox'>
                         <input type='checkbox' checked={legend.separateZero || false} onChange={event => handleEditorChanges('separateZero', event.target.checked)} />
@@ -2158,7 +2238,6 @@ const EditorPanel = props => {
                       </label>
                     )}
                     {/* Temp Checkbox */}
-
                     {state.legend.type === 'equalnumber' && (
                       <label className='checkbox mt-4'>
                         <input
@@ -2322,7 +2401,7 @@ const EditorPanel = props => {
                     <AccordionItemButton>Filters</AccordionItemButton>
                   </AccordionItemHeading>
                   <AccordionItemPanel>
-                    {filtersJSX.length > 0 ? filtersJSX : <p style={{ textAlign: 'center' }}>There are currently no filters.</p>}
+                    {filtersJSX.length > 0 ? <MapFilters /> : <p style={{ textAlign: 'center' }}>There are currently no filters.</p>}
                     <button
                       className={'btn full-width'}
                       onClick={event => {
@@ -2344,10 +2423,10 @@ const EditorPanel = props => {
                   </AccordionItemHeading>
                   <AccordionItemPanel>
                     <TextField
-                      value={dataTable.title}
+                      value={table.label}
                       updateField={updateField}
-                      section='dataTable'
-                      fieldName='title'
+                      section='table'
+                      fieldName='label'
                       id='dataTableTitle'
                       label='Data Table Title'
                       placeholder='Data Table'
@@ -2365,16 +2444,16 @@ const EditorPanel = props => {
                     <label className='checkbox'>
                       <input
                         type='checkbox'
-                        checked={state.dataTable.forceDisplay !== undefined ? state.dataTable.forceDisplay : !isDashboard}
+                        checked={state.table.forceDisplay !== undefined ? state.table.forceDisplay : !isDashboard}
                         onChange={event => {
                           handleEditorChanges('showDataTable', event.target.checked)
                         }}
                       />
-                      <span className='edit-label'>
-                        Show Table
+                      <span className='edit-label column-heading'>
+                        Show Data Table
                         <Tooltip style={{ textTransform: 'none' }}>
                           <Tooltip.Target>
-                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
                           </Tooltip.Target>
                           <Tooltip.Content>
                             <p>Data tables are required for 508 compliance. When choosing to hide this data table, replace with your own version.</p>
@@ -2383,9 +2462,9 @@ const EditorPanel = props => {
                       </span>
                     </label>
                     <TextField
-                      value={dataTable.indexLabel || ''}
+                      value={table.indexLabel || ''}
                       updateField={updateField}
-                      section='dataTable'
+                      section='table'
                       fieldName='indexLabel'
                       label='Index Column Header'
                       placeholder='Location'
@@ -2401,9 +2480,9 @@ const EditorPanel = props => {
                       }
                     />
                     <TextField
-                      value={dataTable.caption}
+                      value={state.table.caption}
                       updateField={updateField}
-                      section='dataTable'
+                      section='table'
                       fieldName='caption'
                       label='Data Table Caption'
                       placeholder='Data Table'
@@ -2422,34 +2501,48 @@ const EditorPanel = props => {
                     <label className='checkbox'>
                       <input
                         type='checkbox'
-                        checked={state.dataTable.limitHeight}
+                        checked={state.table.limitHeight}
                         onChange={event => {
                           handleEditorChanges('limitDataTableHeight', event.target.checked)
                         }}
                       />
                       <span className='edit-label'>Limit Table Height</span>
                     </label>
-                    {state.dataTable.limitHeight && <TextField value={dataTable.height} updateField={updateField} section='dataTable' fieldName='height' label='Data Table Height' placeholder='Height(px)' type='number' min='0' max='500' />}
+                    {state.table.limitHeight && <TextField value={table.height} updateField={updateField} section='table' fieldName='height' label='Data Table Height' placeholder='Height(px)' type='number' min='0' max='500' />}
                     <label className='checkbox'>
                       <input
                         type='checkbox'
-                        checked={state.general.expandDataTable || false}
+                        checked={state.table.expanded || false}
                         onChange={event => {
                           handleEditorChanges('expandDataTable', event.target.checked)
                         }}
                       />
                       <span className='edit-label'>Map loads with data table expanded</span>
                     </label>
-                    <label className='checkbox'>
-                      <input
-                        type='checkbox'
-                        checked={state.table.showDownloadUrl}
-                        onChange={event => {
-                          handleEditorChanges('toggleDataUrl', event.target.checked)
-                        }}
-                      />
-                      <span className='edit-label'>Enable Link to Dataset</span>
-                    </label>
+                    {isDashboard && (
+                      <label className='checkbox'>
+                        <input
+                          type='checkbox'
+                          checked={state.table.showDataTableLink}
+                          onChange={event => {
+                            handleEditorChanges('toggleDataTableLink', event.target.checked)
+                          }}
+                        />
+                        <span className='edit-label'>Show Data Table Name & Link</span>
+                      </label>
+                    )}
+                    {isLoadedFromUrl && (
+                      <label className='checkbox'>
+                        <input
+                          type='checkbox'
+                          checked={state.table.showDownloadUrl}
+                          onChange={event => {
+                            handleEditorChanges('toggleDataUrl', event.target.checked)
+                          }}
+                        />
+                        <span className='edit-label'>Show URL to Automatically Updated Data</span>
+                      </label>
+                    )}
                     <label className='checkbox'>
                       <input
                         type='checkbox'
@@ -2458,7 +2551,7 @@ const EditorPanel = props => {
                           handleEditorChanges('toggleDownloadButton', event.target.checked)
                         }}
                       />
-                      <span className='edit-label'>Enable Download CSV Button</span>
+                      <span className='edit-label'>Show Download CSV Link</span>
                     </label>
                     {/* <label className='checkbox'>
                       <input
@@ -2722,6 +2815,44 @@ const EditorPanel = props => {
                     ))}
                 </AccordionItemPanel>
               </AccordionItem>
+              {/* <AccordionItem>
+                <AccordionItemHeading>
+                  <AccordionItemButton>Custom Map Layers</AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  {state.map.layers.length === 0 && <p>There are currently no layers.</p>}
+
+                  {state.map.layers.map((layer, index) => {
+                    return (
+                      <>
+                        <Accordion allowZeroExpanded>
+                          <AccordionItem className='series-item map-layers-list'>
+                            <AccordionItemHeading className='series-item__title map-layers-list--title'>
+                              <AccordionItemButton>{`Layer ${index + 1}: ${layer.name}`}</AccordionItemButton>
+                            </AccordionItemHeading>
+                            <AccordionItemPanel>
+                              <div className='map-layers-panel'>
+                                <label htmlFor='layerName'>Layer Name:</label>
+                                <input type='text' name='layerName' value={layer.name} onChange={e => handleMapLayerName(e, index)} />
+                                <label htmlFor='layerFilename'>File:</label>
+                                <input type='text' name='layerFilename' value={layer.url} onChange={e => handleMapLayerUrl(e, index)} />
+                                <label htmlFor='layerNamespace'>TOPOJSON Namespace:</label>
+                                <input type='text' name='layerNamespace' value={layer.namespace} onChange={e => handleMapLayerNamespace(e, index)} />
+                                <label htmlFor='layerTooltip'>Tooltip:</label>
+                                <textarea name='layerTooltip' value={layer.tooltip} onChange={e => handleMapLayerTooltip(e, index)}></textarea>
+                                <button onClick={e => handleRemoveLayer(e, index)}>Remove Layer</button>
+                              </div>
+                            </AccordionItemPanel>
+                          </AccordionItem>
+                        </Accordion>
+                      </>
+                    )
+                  })}
+                  <button className={'btn full-width'} onClick={handleAddLayer}>
+                    Add Map Layer
+                  </button>
+                </AccordionItemPanel>
+              </AccordionItem> */}
             </Accordion>
           </form>
           <AdvancedEditor loadConfig={loadConfig} state={state} convertStateToConfig={convertStateToConfig} />