@cdc/dashboard 4.23.5 → 4.23.7

package/src/CdcDashboard.jsx

@@ -31,10 +31,11 @@ import Header from './components/Header'
 import defaults from './data/initial-state'
 import Widget from './components/Widget'
 import DataTable from './components/DataTable'
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
 
 import './scss/main.scss'
 import '@cdc/core/styles/v2/main.scss'
+import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 
 /* eslint-disable react-hooks/exhaustive-deps */
 
@@ -75,7 +76,7 @@ const addVisualization = (type, subType) => {
   return newVisualizationConfig
 }
 
-const VisualizationsPanel = () => (
+const VisualizationsPanel = ({ loadConfig, config }) => (
   <div className='visualizations-panel'>
     <p style={{ fontSize: '14px' }}>Click and drag an item onto the grid to add it to your dashboard.</p>
     <span className='subheading-3'>Chart</span>
@@ -96,7 +97,10 @@ const VisualizationsPanel = () => (
       <Widget addVisualization={() => addVisualization('waffle-chart', '')} type='waffle-chart' />
       <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
       <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
+      <Widget addVisualization={() => addVisualization('filter-dropdowns', '')} type='filter-dropdowns' />
     </div>
+    <span className='subheading-3'>Advanced</span>
+    <AdvancedEditor loadConfig={loadConfig} state={config} />
   </div>
 )
 
@@ -268,7 +272,6 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
     }
 
     setData(datasets)
-
     updateConfig(newConfig, datasets)
     setLoading(false)
   }
@@ -281,6 +284,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
         let add = true
 
         filters.forEach(filter => {
+          // eslint-disable-next-line eqeqeq
           if (filter.type !== 'url' && row[filter.columnName] != filter.active) {
             add = false
           }
@@ -375,7 +379,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
         if (applicableFilters.length > 0) {
           const visualization = newConfig.visualizations[visualizationKey]
 
-          const formattedData = getFormattedData(visualization.data, visualization.dataDescription)
+          const formattedData = getFormattedData(newConfig.datasets[visualization.dataKey] && newConfig.datasets[visualization.dataKey].data ? newConfig.datasets[visualization.dataKey].data : visualization.data, visualization.dataDescription)
 
           newFilteredData[visualizationKey] = filterData(applicableFilters, formattedData || visualization.data || (dataOverride || data)[visualization.dataKey])
         }
@@ -414,7 +418,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
     setConfig(updatedConfig)
   }
 
-  const Filters = () => {
+  const Filters = ({hide}) => {
     const changeFilterActive = (index, value) => {
       let dashboardConfig = { ...config.dashboard }
 
@@ -435,15 +439,26 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
       })
 
       setFilteredData(newFilteredData)
+      if (dashboardConfig.sharedFilters[index].active === dashboardConfig.sharedFilters[index].resetLabel) {
+        setFilteredData(data)
+      }
     }
 
     const announceChange = text => {}
 
     return config.dashboard.sharedFilters.map((singleFilter, index) => {
-      if (singleFilter.type !== 'url' && !singleFilter.showDropdown) return <></>
+      if ((singleFilter.type !== 'url' && !singleFilter.showDropdown) || (hide && hide.indexOf(index) !== -1)) return <></>
 
       const values = []
 
+      if (singleFilter.resetLabel) {
+        values.push(
+          <option key={`${singleFilter.resetLabel}-option-${index}`} value={singleFilter.resetLabel}>
+            {singleFilter.resetLabel}
+          </option>
+        )
+      }
+
       singleFilter.values.forEach((filterOption, index) => {
         values.push(
           <option key={`${singleFilter.key}-option-${index}`} value={filterOption}>
@@ -453,21 +468,23 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
       })
 
       return (
-        <section className='dashboard-filters-section' key={`${singleFilter.key}-filtersection-${index}`}>
-          <label htmlFor={`filter-${index}`}>{singleFilter.key}</label>
-          <select
-            id={`filter-${index}`}
-            className='filter-select'
-            data-index='0'
-            value={singleFilter.active}
-            onChange={val => {
-              changeFilterActive(index, val.target.value)
-              announceChange(`Filter ${singleFilter.key} value has been changed to ${val.target.value}, please reference the data table to see updated values.`)
-            }}
-          >
-            {values}
-          </select>
-        </section>
+        <div className='cove-dashboard-filters'>
+          <section className='dashboard-filters-section' key={`${singleFilter.key}-filtersection-${index}`}>
+            <label htmlFor={`filter-${index}`}>{singleFilter.key}</label>
+            <select
+              id={`filter-${index}`}
+              className='filter-select'
+              data-index='0'
+              value={singleFilter.active}
+              onChange={val => {
+                changeFilterActive(index, val.target.value)
+                announceChange(`Filter ${singleFilter.key} value has been changed to ${val.target.value}, please reference the data table to see updated values.`)
+              }}
+            >
+              {values}
+            </select>
+          </section>
+        </div>
       )
     })
   }
@@ -538,7 +555,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
             body = (
               <>
                 <Header tabSelected={tabSelected} setTabSelected={setTabSelected} back={back} subEditor='Chart' />
-                <CdcChart key={visualizationKey} config={visualizationConfig} isEditor={true} isDebug={isDebug} setConfig={updateConfig} setSharedFilter={setsSharedFilter ? setSharedFilter : undefined} isDashboard={true} />
+                <CdcChart key={visualizationKey} config={visualizationConfig} isEditor={true} isDebug={isDebug} setConfig={updateConfig} setSharedFilter={setsSharedFilter ? setSharedFilter : undefined} setSharedFilterValue={setSharedFilterValue} dashboardConfig={config} isDashboard={true} />
               </>
             )
             break
@@ -583,6 +600,14 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
               </>
             )
             break
+          case 'filter-dropdowns':
+            body = (
+              <>
+                <Header tabSelected={tabSelected} setTabSelected={setTabSelected} back={back} subEditor='Filter Dropdowns' />
+                <Filters hide={visualizationConfig.hide} />
+              </>
+            )
+            break
           default:
             body = <></>
             break
@@ -595,7 +620,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
         <DndProvider backend={HTML5Backend}>
           <Header tabSelected={tabSelected} setTabSelected={setTabSelected} preview={preview} setPreview={setPreview} />
           <div className='layout-container'>
-            <VisualizationsPanel />
+            <VisualizationsPanel loadConfig={loadConfig} config={config} />
             <Grid />
           </div>
         </DndProvider>
@@ -615,11 +640,8 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
           {/* Description */}
           {description && <div className='subtext'>{parse(description)}</div>}
           {/* Filters */}
-          {config.dashboard.sharedFilters && (
-            <div className='cove-dashboard-filters'>
-              {' '}
-              <Filters />
-            </div>
+          {config.dashboard.sharedFilters && Object.keys(config.visualizations).filter(vizKey => config.visualizations[vizKey].visualizationType === 'filter-dropdowns').length === 0 && (
+            <Filters />
           )}
 
           {/* Visualizations */}
@@ -666,6 +688,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                                 <CdcChart
                                   key={col.widget}
                                   config={visualizationConfig}
+                                  dashboardConfig={config}
                                   isEditor={false}
                                   setConfig={newConfig => {
                                     updateChildConfig(col.widget, newConfig)
@@ -734,6 +757,9 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                                   isDashboard={true}
                                 />
                               )}
+                              {visualizationConfig.type === 'filter-dropdowns' && (
+                                <Filters hide={visualizationConfig.hide} />
+                              )}
                             </div>
                           </React.Fragment>
                         )
@@ -746,8 +772,8 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
 
           {/* Image or PDF Inserts */}
           <section className='download-buttons'>
-            {config.table.downloadImageButton && <CoveMediaControls.Button title='Download Dashboard as Image' type='image' state={config} text='Download Dashboard Image' elementToCapture={imageId} />}
-            {config.table.downloadPdfButton && <CoveMediaControls.Button title='Download Dashboard as PDF' type='pdf' state={config} text='Download Dashboard PDF' elementToCapture={imageId} />}
+            {config.table.downloadImageButton && <MediaControls.Button title='Download Dashboard as Image' type='image' state={config} text='Download Dashboard Image' elementToCapture={imageId} />}
+            {config.table.downloadPdfButton && <MediaControls.Button title='Download Dashboard as PDF' type='pdf' state={config} text='Download Dashboard PDF' elementToCapture={imageId} />}
           </section>
 
           {/* Data Table */}

package/src/components/DataTable.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useMemo, memo } from 'react'
 import { useTable, useSortBy, useResizeColumns, useBlockLayout } from 'react-table'
 import Papa from 'papaparse'
 import { Base64 } from 'js-base64'
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
 import Icon from '@cdc/core/components/ui/Icon'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -94,7 +94,7 @@ export default function DataTable(props) {
 
   return (
     <ErrorBoundary component='DataTable'>
-      <CoveMediaControls.Section classes={['download-links']}>
+      <MediaControls.Section classes={['download-links']}>
         {config.table.showDownloadUrl && dataFileSourceType === 'url' && (
           <a className='dashboard-download-link' href={config.datasets[datasetKey].dataFileName} title='Link to View Dataset' target='_blank'>
             {' '}
@@ -103,7 +103,7 @@ export default function DataTable(props) {
           </a>
         )}
         {config.table.download && <DownloadButton data={data} />}
-      </CoveMediaControls.Section>
+      </MediaControls.Section>
       {config.table.show && (
         <section className={`data-table-container`} aria-label={accessibilityLabel}>
           <div
@@ -119,7 +119,7 @@ export default function DataTable(props) {
               }
             }}
           >
-            <Icon display={tableExpanded ? 'minus' : 'plus'} base/>
+            <Icon display={tableExpanded ? 'minus' : 'plus'} base />
             {config.table.label}
             {datasetKey ? `: ${datasetKey}` : ''}
           </div>

package/src/components/Header.jsx

@@ -45,17 +45,31 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
 
   const removeFilter = index => {
     let dashboardConfig = { ...config.dashboard }
+    let visualizations = { ...config.visualizations }
 
     dashboardConfig.sharedFilters.splice(index, 1)
 
+    Object.keys(visualizations).forEach(vizKey => {
+      if(visualizations[vizKey].visualizationType === 'filter-dropdowns' && visualizations[vizKey].hide && visualizations[vizKey].hide.length > 0){
+        if(visualizations[vizKey].hide.indexOf(index) !== -1){
+          visualizations[vizKey].hide.splice(visualizations[vizKey].hide.indexOf(index), 1)
+        }
+        visualizations[vizKey].hide.forEach((hideIndex, i) => {
+          if(hideIndex > index){
+            visualizations[vizKey].hide[i] = hideIndex - 1
+          }
+        })
+      }
+    })
+
     // Ensures URL filters refresh after filter removal
-    if(dashboardConfig.datasets){
+    if (dashboardConfig.datasets) {
       Object.keys(dashboardConfig.datasets).forEach(datasetKey => {
         delete dashboardConfig.datasets[datasetKey].runtimeDataUrl
       })
     }
 
-    updateConfig({ ...config, dashboard: dashboardConfig })
+    updateConfig({ ...config, visualizations, dashboard: dashboardConfig })
 
     overlay?.actions.toggleOverlay()
   }
@@ -165,11 +179,10 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
 
       newLabels[value] = e.target.value
 
-
       updateFilterProp('labels', index, newLabels)
     }
 
-    const removeValue = (valueIndex) => {
+    const removeValue = valueIndex => {
       let newLabels = filter.labels || {}
       let newValues = filter.values || []
 
@@ -183,7 +196,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
       })
     }
 
-    const addNewValue = (e) => {
+    const addNewValue = e => {
       e.preventDefault()
       if (!filter.values || filter.values.indexOf(e.target[0].value) === -1) {
         let newValues = filter.values || []
@@ -216,146 +229,149 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
               Remove Filter
             </button>
             <label>
-                <span className='edit-label column-heading'>Filter Type:</span>
-                <select defaultValue={filter.type || 'data'} onChange={e => updateFilterProp('type', index, e.target.value)}>
-                  <option value="url">URL</option>
-                  <option value="data">Data</option>
-                </select>
-              </label>
-            {filter.type === 'url' && <>
-              <label>
-                <span className='edit-label column-heading'>Label: </span>
-                <input
-                  type='text'
-                  value={filter.key}
-                  onChange={e => {
-                    updateFilterProp('key', index, e.target.value)
-                  }}
-                />
-              </label>
-              <label>
-                <span className='edit-label column-heading'>URL to Filter: </span>
-                <select defaultValue={filter.datasetKey || ''} onChange={e => updateFilterProp('datasetKey', index, e.target.value)}> 
-                  <option value=''>- Select Option -</option>
-                  {Object.keys(config.datasets).map(datasetKey => {
-                    if(config.datasets[datasetKey].dataUrl){
-                      return <option key={datasetKey} value={datasetKey}>{(config.datasets[datasetKey].dataUrl).substring(0, 50)}</option>
-                    }
-                    return <React.Fragment key={datasetKey}></React.Fragment>;
-                  })}
-                </select>
-              </label>
-              <label>
-                <span className='edit-label column-heading'>Query string parameter</span>{' '}
-                <input
-                  type='text'
-                  defaultValue={filter.queryParameter}
-                  onChange={e => updateFilterProp('queryParameter', index, e.target.value)}
-                />
-              </label>
-              <span className='edit-label column-heading'>Values</span>{' '}
-              <ul className='value-list'>
-                {filter.values &&
-                  filter.values.map((value, valueIndex) => (
-                    <li>
-                      {value}
-                      <input
-                        type='text'
-                        value={filter.labels ? filter.labels[value] : undefined}
-                        onChange={(e) => updateLabel(e, value)}
-                      />
-                      <button
-                        onClick={() => removeValue(valueIndex)}
-                      >
-                        X
-                      </button>
-                    </li>
-                  ))}
-              </ul>
-              <form
-                onSubmit={addNewValue}
-              >
-                <input type='text' /> <button type='submit'>Add New Value</button>
-              </form>
-            </>}
-            {filter.type !== 'url' && <>
-              <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>
-                  {columns.map(dataKey => (
-                    <option value={dataKey} key={`filter-column-select-item-${dataKey}`}>
-                      {dataKey}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <label>
-                <span className='edit-label column-heading'>Label: </span>
-                <input
-                  type='text'
-                  value={filter.key}
-                  onChange={e => {
-                    updateFilterProp('key', index, e.target.value)
-                  }}
-                />
-              </label>
-              <label>
-                <span className='edit-label column-heading'>Show Dropdown</span>
-                <input
-                  type='checkbox'
-                  defaultChecked={filter.showDropdown === true}
-                  onChange={e => {
-                    updateFilterProp('showDropdown', index, !filter.showDropdown)
-                  }}
-                />
-              </label>
-              <label>
-                <span className='edit-label column-heading'>Set By: </span>
-                <select value={filter.setBy} onChange={e => updateFilterProp('setBy', index, e.target.value)}>
-                  <option value=''>- Select Option -</option>
-                  {Object.keys(config.visualizations).map(vizKey => (
-                    <option value={vizKey} key={`set-by-select-item-${vizKey}`}>
-                      {config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : config.visualizations[vizKey].title || vizKey}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <label>
-                <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>{' '}
-                        <button
-                          onClick={e => {
-                            e.preventDefault()
-                            removeFilterUsedBy(filter, index, vizKey)
-                          }}
-                        >
-                          X
-                        </button>
+              <span className='edit-label column-heading'>Filter Type:</span>
+              <select defaultValue={filter.type || 'data'} onChange={e => updateFilterProp('type', index, e.target.value)}>
+                <option value='url'>URL</option>
+                <option value='data'>Data</option>
+              </select>
+            </label>
+            {filter.type === 'url' && (
+              <>
+                <label>
+                  <span className='edit-label column-heading'>Label: </span>
+                  <input
+                    type='text'
+                    value={filter.key}
+                    onChange={e => {
+                      updateFilterProp('key', index, e.target.value)
+                    }}
+                  />
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>URL to Filter: </span>
+                  <select defaultValue={filter.datasetKey || ''} onChange={e => updateFilterProp('datasetKey', index, e.target.value)}>
+                    <option value=''>- Select Option -</option>
+                    {Object.keys(config.datasets).map(datasetKey => {
+                      if (config.datasets[datasetKey].dataUrl) {
+                        return (
+                          <option key={datasetKey} value={datasetKey}>
+                            {config.datasets[datasetKey].dataUrl.substring(0, 50)}
+                          </option>
+                        )
+                      }
+                      return <React.Fragment key={datasetKey}></React.Fragment>
+                    })}
+                  </select>
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>Query string parameter</span> <input type='text' defaultValue={filter.queryParameter} onChange={e => updateFilterProp('queryParameter', index, e.target.value)} />
+                </label>
+                <span className='edit-label column-heading'>Values</span>{' '}
+                <ul className='value-list'>
+                  {filter.values &&
+                    filter.values.map((value, valueIndex) => (
+                      <li>
+                        {value}
+                        <input type='text' value={filter.labels ? filter.labels[value] : undefined} onChange={e => updateLabel(e, value)} />
+                        <button onClick={() => removeValue(valueIndex)}>X</button>
                       </li>
                     ))}
                 </ul>
-                <select onChange={e => addFilterUsedBy(filter, index, 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}`}>
+                <form onSubmit={addNewValue}>
+                  <input type='text' /> <button type='submit'>Add New Value</button>
+                </form>
+              </>
+            )}
+            {filter.type !== 'url' && (
+              <>
+                <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>
+                    {columns.map(dataKey => (
+                      <option value={dataKey} key={`filter-column-select-item-${dataKey}`}>
+                        {dataKey}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>Label: </span>
+                  <input
+                    type='text'
+                    value={filter.key}
+                    onChange={e => {
+                      updateFilterProp('key', index, e.target.value)
+                    }}
+                  />
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>Show Dropdown</span>
+                  <input
+                    type='checkbox'
+                    defaultChecked={filter.showDropdown === true}
+                    onChange={e => {
+                      updateFilterProp('showDropdown', index, !filter.showDropdown)
+                    }}
+                  />
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>Set By: </span>
+                  <select value={filter.setBy} onChange={e => updateFilterProp('setBy', index, e.target.value)}>
+                    <option value=''>- Select Option -</option>
+                    {Object.keys(config.visualizations).map(vizKey => (
+                      <option value={vizKey} key={`set-by-select-item-${vizKey}`}>
                         {config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : config.visualizations[vizKey].title || vizKey}
                       </option>
                     ))}
-                </select>
-              </label>
-            </>}
+                  </select>
+                </label>
+                <label>
+                  <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>{' '}
+                          <button
+                            onClick={e => {
+                              e.preventDefault()
+                              removeFilterUsedBy(filter, index, vizKey)
+                            }}
+                          >
+                            X
+                          </button>
+                        </li>
+                      ))}
+                  </ul>
+                  <select onChange={e => addFilterUsedBy(filter, index, 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>
+                      ))}
+                  </select>
+                </label>
+                <label>
+                  <span className='edit-label column-heading'>Reset Label: </span>
+                  <input
+                    type='text'
+                    value={filter.resetLabel ? filter.resetLabel : ''}
+                    onChange={e => {
+                      updateFilterProp('resetLabel', index, e.target.value)
+                    }}
+                  />
+                </label>
+              </>
+            )}
           </fieldset>
           <button type='button' className='btn btn-primary' style={{ display: 'inline-block', 'margin-right': '1em' }} onClick={overlay?.actions.toggleOverlay}>
             Cancel
@@ -382,7 +398,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
         </div>
       )}
       {!subEditor && (
-        <div className="toggle-bar__wrapper">
+        <div className='toggle-bar__wrapper'>
           <ul className='toggle-bar'>
             <li
               className={tabSelected === 0 ? 'active' : 'inactive'}
@@ -441,17 +457,18 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
             )}
             {tabSelected === 2 && (
               <>
-
-                <div className="wrap">
+                <div className='wrap'>
                   <label>
                     <input type='checkbox' defaultChecked={config.table.show} onChange={e => changeConfigValue('table', 'show', e.target.checked)} />
                     Show Data Table(s)
-                  </label><br />
+                  </label>
+                  <br />
 
                   <label>
                     <input type='checkbox' defaultChecked={config.table.expanded} onChange={e => changeConfigValue('table', 'expanded', e.target.checked)} />
                     Expanded by Default
-                  </label><br />
+                  </label>
+                  <br />
                 </div>
 
                 {/* <div className="wrap">
@@ -465,7 +482,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
                   </label>
                 </div> */}
 
-                <div className="wrap">
+                <div className='wrap'>
                   <label>
                     <input type='checkbox' defaultChecked={config.table.limitHeight} onChange={e => changeConfigValue('table', 'limitHeight', e.target.checked)} />
                     Limit Table Height
@@ -473,7 +490,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
                   {config.table.limitHeight && <input class='table-height-input' type='text' placeholder='Height (px)' defaultValue={config.table.height} onChange={e => changeConfigValue('table', 'height', e.target.value)} />}
                 </div>
 
-                <div className="wrap">
+                <div className='wrap'>
                   <label>
                     <input type='checkbox' defaultChecked={config.table.download} onChange={e => changeConfigValue('table', 'download', e.target.checked)} />
                     Show Download CSV Link
@@ -486,10 +503,9 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
               </>
             )}
           </div>
-        </div >
-      )
-      }
-    </div >
+        </div>
+      )}
+    </div>
   )
 }