@cdc/dashboard 4.24.10 → 4.24.12-2

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -2,22 +2,31 @@ import React from 'react'
 import MultiSelect from '@cdc/core/components/MultiSelect'
 import { SharedFilter } from '../../types/SharedFilter'
 import { APIFilterDropdowns, DropdownOptions } from './DashboardFiltersWrapper'
-import NestedDropdown from '../../../../core/components/NestedDropdown/NestedDropdown'
 import { FILTER_STYLE } from '../../types/FilterStyles'
 import { NestedOptions, ValueTextPair } from '@cdc/core/components/NestedDropdown/nestedDropdownHelpers'
+import NestedDropdown from '@cdc/core/components/NestedDropdown'
+import { MouseEventHandler } from 'react'
+import Loader from '@cdc/core/components/Loader'
+import _ from 'lodash'
 
 type DashboardFilterProps = {
   show: number[]
   filters: SharedFilter[]
   apiFilterDropdowns: APIFilterDropdowns
   handleOnChange: (index: number, value: string | string[]) => void
+  showSubmit: boolean
+  applyFilters: MouseEventHandler<HTMLButtonElement>
+  applyFiltersButtonText?: string
 }
 
 const DashboardFilters: React.FC<DashboardFilterProps> = ({
   show,
   filters: sharedFilters,
   apiFilterDropdowns,
-  handleOnChange
+  handleOnChange,
+  showSubmit,
+  applyFilters,
+  applyFiltersButtonText
 }) => {
   const nullVal = (filter: SharedFilter) => {
     const val = filter.queuedActive || filter.active
@@ -38,29 +47,34 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
   }
 
   return (
-    <>
+    <form className='d-flex flex-wrap'>
       {sharedFilters.map((filter, filterIndex) => {
         const urlFilterType = filter.type === 'urlfilter'
+        const label = filter.key
 
         if (
           (!urlFilterType && !filter.showDropdown && filter.filterStyle !== FILTER_STYLE.nestedDropdown) ||
           (show && !show.includes(filterIndex))
         )
-          return <React.Fragment key={`${filter.key}-filtersection-${filterIndex}-option`} />
+          return <React.Fragment key={`${label}-filtersection-${filterIndex}-option`} />
         const values: JSX.Element[] = []
 
-        if (filter.resetLabel) {
-          values.push(
-            <option key={`${filter.resetLabel}-option`} value={filter.resetLabel}>
-              {filter.resetLabel}
-            </option>
-          )
-        }
-
         const _key = filter.apiFilter?.apiEndpoint
+        const loading = apiFilterDropdowns[_key] === null
 
         const multiValues: { value; label }[] = []
+        const nestedOptions: NestedOptions = Object.entries(filter?.subGrouping?.valuesLookup || {}).map(
+          ([key, data]) => [
+            [key, key], // Main option: [value, text]
+            Array.isArray(data?.values) ? data.values.map(value => [value, value]) : [] // Ensure `values` is an array
+          ]
+        )
 
+        const activeSubGroupValue = _.get(
+          filter?.subGrouping?.valuesLookup,
+          [filter?.active as string, 'values', 0],
+          null // Default to null if the path is invalid
+        )
         if (_key && apiFilterDropdowns[_key]) {
           // URL Filter
           if (filter.filterStyle !== FILTER_STYLE.nestedDropdown) {
@@ -77,59 +91,108 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
           // Data Filter
           filter.values?.forEach((filterOption, index) => {
             const labeledOpt = filter.labels && filter.labels[filterOption]
-            values.push(
-              <option key={`${filter.key}-option-${index}`} value={filterOption}>
-                {labeledOpt || filterOption}
-              </option>
-            )
+            const resetLabelHasMatch = (filterOption || labeledOpt) === filter.resetLabel
+
+            if (!resetLabelHasMatch) {
+              values.push(
+                <option key={`${filter.key}-option-${index}`} value={filterOption}>
+                  {labeledOpt || filterOption}
+                </option>
+              )
+            } else {
+              // add label to the front of list if it matches with reset label
+              values.unshift(
+                <option key={`${filter.key}-option-${index}`} value={filterOption}>
+                  {labeledOpt || filterOption}
+                </option>
+              )
+            }
+
             multiValues.push({ value: filterOption, label: labeledOpt || filterOption })
           })
         }
 
-        return filter.filterStyle === FILTER_STYLE.multiSelect ? (
-          <MultiSelect
-            key={`${filter.key}-filtersection-${filterIndex}`}
-            label={filter.key}
-            options={multiValues}
-            fieldName={filterIndex}
-            updateField={updateField}
-            selected={filter.active as string[]}
-            limit={filter.selectLimit || 5}
-          />
-        ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
-          <NestedDropdown
-            key={`${filter.key}-filtersection-${filterIndex}`}
-            activeGroup={filter.active as string}
-            activeSubGroup={filter.subGrouping?.active}
-            options={getNestedDropdownOptions(apiFilterDropdowns[_key])}
-            listLabel={filter.key}
-            handleSelectedItems={value => updateField(null, null, filterIndex, value)}
-          />
-        ) : (
-          <div className='cove-dashboard-filters' key={`${filter.key}-filtersection-${filterIndex}`}>
-            <section className='dashboard-filters-section'>
-              <label htmlFor={`filter-${filterIndex}`}>{filter.key}</label>
-              <select
-                id={`filter-${filterIndex}`}
-                className='filter-select'
-                data-index='0'
-                value={filter.queuedActive || filter.active}
-                onChange={val => {
-                  handleOnChange(filterIndex, val.target.value)
-                }}
-              >
-                {nullVal(filter) && !filter.resetLabel && (
-                  <option value='' key='select'>
-                    {'-Select-'}
-                  </option>
-                )}
-                {values}
-              </select>
-            </section>
+        const isDisabled = !values.length
+        // push reset label only if it does not includes in filter values  options
+        if (filter.resetLabel && !filter.values.includes(filter.resetLabel)) {
+          values.unshift(
+            <option key={`${filter.resetLabel}-option`} value={filter.resetLabel}>
+              {filter.resetLabel}
+            </option>
+          )
+        }
+
+        const formGroupClass = `form-group mr-3 mb-1${loading ? ' loading-filter' : ''}`
+
+        return (
+          <div className={formGroupClass} key={`${label}-filtersection-${filterIndex}`}>
+            {label && (
+              <label className='font-weight-bold mt-1 mb-0' htmlFor={`filter-${filterIndex}`}>
+                {label}
+              </label>
+            )}
+            {filter.filterStyle === FILTER_STYLE.multiSelect ? (
+              <MultiSelect
+                label={label}
+                options={multiValues}
+                fieldName={filterIndex}
+                updateField={updateField}
+                selected={filter.active as string[]}
+                limit={filter.selectLimit || 5}
+                loading={loading}
+              />
+            ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
+              <NestedDropdown
+                activeGroup={filter.active as string}
+                activeSubGroup={_key ? filter.subGrouping?.active : activeSubGroupValue}
+                filterIndex={filterIndex}
+                options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
+                listLabel={label}
+                handleSelectedItems={value => updateField(null, null, filterIndex, value)}
+                loading={loading}
+              />
+            ) : (
+              <>
+                <select
+                  id={`filter-${filterIndex}`}
+                  className='cove-form-select'
+                  data-index='0'
+                  value={loading ? 'Loading...' : filter.queuedActive || filter.active}
+                  onChange={val => {
+                    handleOnChange(filterIndex, val.target.value)
+                  }}
+                  disabled={loading || isDisabled}
+                >
+                  {loading && <option value='Loading...'>Loading...</option>}
+                  {nullVal(filter) && (
+                    <option key={`select`} value=''>
+                      {filter.resetLabel || '- Select -'}
+                    </option>
+                  )}
+                  {values}
+                </select>
+                {loading && <Loader spinnerType={'text-secondary'} />}
+              </>
+            )}
           </div>
         )
       })}
-    </>
+      {showSubmit && (
+        <button
+          className='btn btn-primary mb-1'
+          onClick={applyFilters}
+          disabled={show.some(filterIndex => {
+            const emptyFilterValues = [undefined, '', '- Select -']
+            return (
+              emptyFilterValues.includes(sharedFilters[filterIndex].queuedActive) &&
+              emptyFilterValues.includes(sharedFilters[filterIndex].active)
+            )
+          })}
+        >
+          {applyFiltersButtonText || 'GO!'}
+        </button>
+      )}
+    </form>
   )
 }
 

package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx

@@ -274,7 +274,9 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               </select>
             </label>
           ) : (
-            <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width'>
+
+            <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width mt-2'>
+
               Add Existing Dashboard Filter
             </button>
           )}

package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx

@@ -41,11 +41,10 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
       if (viz.type === 'dashboardFilters') return false
       const vizName = viz.general?.title || viz.title || vizKey
       nameLookup[vizKey] = vizName
-      const notAdded = !filter.usedBy || filter.usedBy.indexOf(vizKey) === -1
       const usesSharedFilter = viz.usesSharedFilter
       const rowIndex = vizLookup.row
       const dataConfiguredOnRow = config.rows[rowIndex].dataKey
-      return filter.setBy !== vizKey && notAdded && !usesSharedFilter && !dataConfiguredOnRow
+      return filter.setBy !== vizKey && !usesSharedFilter && !dataConfiguredOnRow
     })
     const rowOptions: number[] = []
 
@@ -363,20 +362,23 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
               {isNestedDropDown && <APIInputs isSubgroup={true} />}
 
               {!!parentFilters.length && (
-                <MultiSelect
-                  label='Parent Filter(s): '
-                  options={parentFilters.map(key => ({ value: key, label: key }))}
-                  fieldName='parents'
-                  selected={filter.parents}
-                  updateField={(_section, _subsection, _fieldname, newItems) => {
-                    updateFilterProp('parents', newItems)
-                  }}
-                />
+                <label>
+                  <span className='edit-label column-heading mt-1'>Parent Filter(s): </span>
+                  <MultiSelect
+                    label='Parent Filter(s): '
+                    options={parentFilters.map(key => ({ value: key, label: key }))}
+                    fieldName='parents'
+                    selected={filter.parents}
+                    updateField={(_section, _subsection, _fieldname, newItems) => {
+                      updateFilterProp('parents', newItems)
+                    }}
+                  />
+                </label>
               )}
 
-              <MultiSelect
-                label='Used By: (optional)'
-                tooltip={
+              <label>
+                <span className='edit-label column-heading mt-1'>
+                  Used By: (optional)
                   <Tooltip style={{ textTransform: 'none' }}>
                     <Tooltip.Target>
                       <Icon display='question' style={{ marginLeft: '0.5rem' }} />
@@ -388,17 +390,19 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                       </p>
                     </Tooltip.Content>
                   </Tooltip>
-                }
-                options={[...usedByOptions, ...(filter.usedBy || [])].map(opt => ({
-                  value: opt,
-                  label: usedByNameLookup[opt]
-                }))}
-                fieldName='usedBy'
-                selected={filter.usedBy}
-                updateField={(_section, _subsection, _fieldname, newItems) => {
-                  updateFilterProp('usedBy', newItems)
-                }}
-              />
+                </span>
+                <MultiSelect
+                  options={usedByOptions.map(opt => ({
+                    value: opt,
+                    label: usedByNameLookup[opt]
+                  }))}
+                  fieldName='usedBy'
+                  selected={filter.usedBy}
+                  updateField={(_section, _subsection, _fieldname, newItems) => {
+                    updateFilterProp('usedBy', newItems)
+                  }}
+                />
+              </label>
 
               <TextField
                 label='Reset Label: '
@@ -473,31 +477,31 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                 </select>
               </label>
               <label>
-                <span className='edit-label column-heading'>Used By: </span>
-                <ul>
-                  {filter.usedBy &&
-                    filter.usedBy.map(opt => (
-                      <li key={`used-by-list-item-${opt}`}>
-                        <span>{usedByNameLookup[opt] || opt}</span>{' '}
-                        <button
-                          onClick={e => {
-                            e.preventDefault()
-                            removeFilterUsedBy(filter, opt)
-                          }}
-                        >
-                          X
-                        </button>
-                      </li>
-                    ))}
-                </ul>
-                <select value='' onChange={e => addFilterUsedBy(filter, e.target.value)}>
-                  <option value=''>- Select Option -</option>
-                  {usedByOptions.map(opt => (
-                    <option value={opt} key={`used-by-select-item-${opt}`}>
-                      {usedByNameLookup[opt] || opt}
-                    </option>
-                  ))}
-                </select>
+                <span className='edit-label column-heading mt-1'>
+                  Used By: (optional)
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>
+                        Select if you would like specific visualizations or rows to use this filter. Otherwise the
+                        filter will be added to all api requests.
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                </span>
+                <MultiSelect
+                  options={usedByOptions.map(opt => ({
+                    value: opt,
+                    label: usedByNameLookup[opt]
+                  }))}
+                  fieldName='usedBy'
+                  selected={filter.usedBy}
+                  updateField={(_section, _subsection, _fieldname, newItems) => {
+                    updateFilterProp('usedBy', newItems)
+                  }}
+                />
               </label>
               <TextField
                 label='Reset Label: '

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -13,6 +13,7 @@ import { ViewPort } from '@cdc/core/types/ViewPort'
 import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavior'
 import * as apiFilterHelpers from '../../helpers/apiFilterHelpers'
 import { applyQueuedActive } from '@cdc/core/components/Filters/helpers/applyQueuedActive'
+import './dashboardfilter.styles.css'
 
 type SubOptions = { subOptions?: Record<'value' | 'text', string>[] }
 
@@ -30,6 +31,7 @@ type DashboardFiltersProps = {
   isEditor?: boolean
   setConfig: (config: DashboardFilters) => void
   currentViewport?: ViewPort
+  setAPILoading: (loading: boolean) => void
 }
 
 const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
@@ -40,10 +42,11 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
   isEditor = false
 }) => {
   const state = useContext(DashboardContext)
-  const { config: dashboardConfig, reloadURLData, loadAPIFilters, setAPIFilterDropdowns } = state
+  const { config: dashboardConfig, reloadURLData, loadAPIFilters, setAPIFilterDropdowns, setAPILoading } = state
   const dispatch = useContext(DashboardDispatchContext)
 
-  const applyFilters = () => {
+  const applyFilters = e => {
+    e.preventDefault() // prevent form submission
     const dashboardConfig = _.cloneDeep(state.config.dashboard)
     const nonAutoLoadFilterIndexes = Object.values(state.config.visualizations)
       .filter(v => v.type === 'dashboardFilters')
@@ -79,7 +82,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
           updateQueryString(queryParams)
         }
       }
-
+      setAPILoading(true)
       dispatch({ type: 'SET_SHARED_FILTERS', payload: dashboardConfig.sharedFilters })
       dispatch({ type: 'SET_FILTERED_DATA', payload: getFilteredData(_.cloneDeep(state)) })
       loadAPIFilters(dashboardConfig.sharedFilters, apiFilterDropdowns)
@@ -103,6 +106,9 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
       visualizationConfig
     )
 
+    // sets the active filter option that the user just selected.
+    dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+
     if (hasDashboardApplyBehavior(dashboardConfig.visualizations)) {
       const isAutoSelectFilter = visualizationConfig.autoLoad
       const missingFilterSelections = newConfig.dashboard.sharedFilters.some(f => !f.active)
@@ -171,7 +177,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
       {!displayNone && (
         <Layout.Responsive isEditor={isEditor}>
           <div
-            className={`cdc-dashboard-inner-container${
+            className={`${
               isEditor ? ' is-editor' : ''
             } cove-component__content col-12 cove-dashboard-filters-container`}
           >
@@ -180,10 +186,10 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
               filters={dashboardConfig.dashboard.sharedFilters || []}
               apiFilterDropdowns={apiFilterDropdowns}
               handleOnChange={handleOnChange}
+              showSubmit={visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad}
+              applyFilters={applyFilters}
+              applyFiltersButtonText={visualizationConfig.applyFiltersButtonText}
             />
-            {visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad && (
-              <button onClick={applyFilters}>{visualizationConfig.applyFiltersButtonText || 'GO!'}</button>
-            )}
           </div>
         </Layout.Responsive>
       )}

package/src/components/DashboardFilters/_stories/DashboardFilters.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react'
+import DashboardFilters from '../DashboardFilters'
+
+const meta: Meta<typeof DashboardFilters> = {
+  title: 'Components/Atoms/Inputs/DashboardFilters',
+  component: DashboardFilters
+}
+
+type Story = StoryObj<typeof DashboardFilters>
+
+export const Example_1: Story = {
+  args: {
+    filters: [
+      { type: 'datafilter', key: 'label here', values: [1, 2, 3, 4] },
+      { type: 'datafilter', key: 'something' }
+    ],
+    handleOnChange: () => {}
+  }
+}
+
+export default meta

package/src/components/DashboardFilters/dashboardfilter.styles.css

@@ -0,0 +1,27 @@
+.cove-dashboard-filters-container {
+  :is(label) {
+    margin-bottom: 0;
+    margin-top: 0.5rem;
+  }
+  .btn {
+    /* this is the height that is defined for the .form-control class in _forms.scss in bootstrap. */
+    height: calc(1.5em + 0.75rem + 2px);
+    align-self: flex-end;
+  }
+  .loading-filter {
+    position: relative;
+    .spinner-border {
+      position: absolute;
+      top: 55%;
+      right: 10%;
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+  :is(select):disabled {
+    background-color: var(--lightestGray);
+    & > :is(option) {
+      color: var(--darkGray);
+    }
+  }
+}

package/src/components/Grid.tsx

@@ -24,7 +24,7 @@ const Grid = () => {
       {(rows || []).map((row, idx) => (
         <Row row={row} idx={idx} uuid={row.uuid} key={idx} />
       ))}
-      <button className='btn add-row' onClick={addRow}>
+      <button className='btn btn-primary col' onClick={addRow}>
         Add Row
       </button>
     </div>

package/src/components/Header/Header.tsx

@@ -6,6 +6,7 @@ import './index.scss'
 import MultiConfigTabs from '../MultiConfigTabs'
 import { Tab } from '../../types/Tab'
 import _ from 'lodash'
+import { getVizRowColumnLocator } from '../../helpers/getVizRowColumnLocator'
 
 type HeaderProps = {
   back?: any
@@ -16,7 +17,7 @@ type HeaderProps = {
 const Header = (props: HeaderProps) => {
   const tabs: Tab[] = ['Dashboard Description', 'Data Table Settings', 'Dashboard Preview']
   const { visualizationKey, subEditor } = props
-  const { config, setParentConfig, tabSelected } = useContext(DashboardContext)
+  const { config, setParentConfig, tabSelected, data } = useContext(DashboardContext)
   if (!config) return null
   const dispatch = useContext(DashboardDispatchContext)
   const back = () => {
@@ -24,6 +25,22 @@ const Header = (props: HeaderProps) => {
     const newConfig = _.cloneDeep(config)
     newConfig.visualizations[visualizationKey].editing = false
     dispatch({ type: 'SET_CONFIG', payload: newConfig })
+
+    // the Widget component will do a data fetch if no data is available for the visualization
+    // this is intended to help visualization developers.
+    type SampleData = Record<string, { sample: boolean }> & Object[]
+    if (Object.values(data).some((d: SampleData) => d.sample)) {
+      const sampleDataRemoved = Object.keys(data).reduce((acc, key) => {
+        if ((data[key] as SampleData).sample) {
+          acc[key] = []
+        } else {
+          acc[key] = data[key]
+        }
+        return acc
+      }, {})
+
+      dispatch({ type: 'SET_DATA', payload: sampleDataRemoved })
+    }
   }
 
   const changeConfigValue = (parentObj, key, value) => {
@@ -81,10 +98,18 @@ const Header = (props: HeaderProps) => {
         <div className='heading-1'>
           Dashboard Editor{' '}
           <span className='small'>
-            <input type='checkbox' onChange={handleCheck} checked={multiInitialized} disabled={multiInitialized} /> make multidashboard
+            <input type='checkbox' onChange={handleCheck} checked={multiInitialized} disabled={multiInitialized} /> make
+            multidashboard
           </span>
           <br />
-          {<input type='text' placeholder='Enter Dashboard Name Here' defaultValue={config.dashboard?.title} onChange={e => changeConfigValue('dashboard', 'title', e.target.value)} />}
+          {
+            <input
+              type='text'
+              placeholder='Enter Dashboard Name Here'
+              defaultValue={config.dashboard?.title}
+              onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}
+            />
+          }
         </div>
       )}
       {!subEditor && (
@@ -106,18 +131,34 @@ const Header = (props: HeaderProps) => {
             })}
           </ul>
           <div className='heading-body'>
-            {tabSelected === 'Dashboard Description' && <input type='text' className='description-input' placeholder='Type a dashboard description here.' defaultValue={config.dashboard?.description} onChange={e => changeConfigValue('dashboard', 'description', e.target.value)} />}
+            {tabSelected === 'Dashboard Description' && (
+              <input
+                type='text'
+                className='description-input'
+                placeholder='Type a dashboard description here.'
+                defaultValue={config.dashboard?.description}
+                onChange={e => changeConfigValue('dashboard', 'description', e.target.value)}
+              />
+            )}
             {tabSelected === 'Data Table Settings' && (
               <>
                 <div className='wrap'>
                   <label>
-                    <input type='checkbox' defaultChecked={config.table.show} onChange={e => changeConfigValue('table', 'show', e.target.checked)} />
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.show}
+                      onChange={e => changeConfigValue('table', 'show', e.target.checked)}
+                    />
                     Show Data Table(s)
                   </label>
                   <br />
 
                   <label>
-                    <input type='checkbox' defaultChecked={config.table.expanded} onChange={e => changeConfigValue('table', 'expanded', e.target.checked)} />
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.expanded}
+                      onChange={e => changeConfigValue('table', 'expanded', e.target.checked)}
+                    />
                     Expanded by Default
                   </label>
                   <br />
@@ -125,19 +166,39 @@ const Header = (props: HeaderProps) => {
 
                 <div className='wrap'>
                   <label>
-                    <input type='checkbox' defaultChecked={config.table.limitHeight} onChange={e => changeConfigValue('table', 'limitHeight', e.target.checked)} />
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.limitHeight}
+                      onChange={e => changeConfigValue('table', 'limitHeight', e.target.checked)}
+                    />
                     Limit Table Height
                   </label>
-                  {config.table.limitHeight && <input className='table-height-input' type='text' placeholder='Height (px)' defaultValue={config.table.height} onChange={e => changeConfigValue('table', 'height', e.target.value)} />}
+                  {config.table.limitHeight && (
+                    <input
+                      className='table-height-input'
+                      type='text'
+                      placeholder='Height (px)'
+                      defaultValue={config.table.height}
+                      onChange={e => changeConfigValue('table', 'height', e.target.value)}
+                    />
+                  )}
                 </div>
 
                 <div className='wrap'>
                   <label>
-                    <input type='checkbox' defaultChecked={config.table.download} onChange={e => changeConfigValue('table', 'download', e.target.checked)} />
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.download}
+                      onChange={e => changeConfigValue('table', 'download', e.target.checked)}
+                    />
                     Show Download CSV Link
                   </label>
                   <label>
-                    <input type='checkbox' defaultChecked={config.table.showDownloadUrl} onChange={e => changeConfigValue('table', 'showDownloadUrl', e.target.checked)} />
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.showDownloadUrl}
+                      onChange={e => changeConfigValue('table', 'showDownloadUrl', e.target.checked)}
+                    />
                     Show URL to Automatically Updated Data
                   </label>
                 </div>