@cdc/dashboard 4.22.10-alpha.1 → 4.22.11

package/src/components/Grid.jsx

@@ -11,7 +11,7 @@ const Grid = () => {
       ...config,
       rows: [
         ...rows,
-        [ { width: 12 }, { equalHeight: false }, {}, {} ]
+        [{ width: 12 }, { equalHeight: false }, {}, {}]
         //[{width: 12}, {}, {}]      ],
       ],
       uuid: Date.now()
@@ -19,9 +19,13 @@ const Grid = () => {
   }
 
   return (
-    <div className="builder-grid">
-      {rows.map((row, idx) => <Row row={row} idx={idx} uuid={row.uuid} key={idx}/>)}
-      <button className="btn add-row" onClick={addRow}>Add Row</button>
+    <div className='builder-grid'>
+      {rows.map((row, idx) => (
+        <Row row={row} idx={idx} uuid={row.uuid} key={idx} />
+      ))}
+      <button className='btn add-row' onClick={addRow}>
+        Add Row
+      </button>
     </div>
   )
 }

package/src/components/Header.jsx

@@ -5,30 +5,24 @@ import ConfigContext from '../ConfigContext'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import Modal from '@cdc/core/components/ui/Modal'
 
-const Header = ({setPreview, tabSelected, setTabSelected, back, subEditor = null}) => {
-
-  const {
-    config,
-    updateConfig,
-    setParentConfig
-  } = useContext(ConfigContext);
+const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = null }) => {
+  const { config, updateConfig, setParentConfig } = useContext(ConfigContext)
 
   const { overlay } = useGlobalContext()
 
-  const [ columns, setColumns ] = useState([])
+  const [columns, setColumns] = useState([])
 
   const changeConfigValue = (parentObj, key, value) => {
-
-    let newConfig = {...config};
-    if(!newConfig[parentObj]) newConfig[parentObj] = {};
-    newConfig[parentObj][key] = value;
+    let newConfig = { ...config }
+    if (!newConfig[parentObj]) newConfig[parentObj] = {}
+    newConfig[parentObj][key] = value
 
     updateConfig(newConfig)
   }
 
-  const setTab = (index) => {
+  const setTab = index => {
     setTabSelected(index)
-    if(index === 3){
+    if (index === 3) {
       setPreview(true)
     } else {
       setPreview(false)
@@ -36,33 +30,32 @@ const Header = ({setPreview, tabSelected, setTabSelected, back, subEditor = null
   }
 
   const addNewFilter = () => {
-    let dashboardConfig = {...config.dashboard};
-
-    dashboardConfig.sharedFilters = dashboardConfig.sharedFilters || [];
+    let dashboardConfig = { ...config.dashboard }
 
-    dashboardConfig.sharedFilters.push({key: 'Dashboard Filter ' + (dashboardConfig.sharedFilters.length + 1), values: []});
+    dashboardConfig.sharedFilters = dashboardConfig.sharedFilters || []
 
-    updateConfig({...config, dashboard: dashboardConfig});
+    dashboardConfig.sharedFilters.push({ key: 'Dashboard Filter ' + (dashboardConfig.sharedFilters.length + 1), values: [] })
 
+    updateConfig({ ...config, dashboard: dashboardConfig })
   }
 
-  const removeFilter = (index) => {
-    let dashboardConfig = {...config.dashboard};
+  const removeFilter = index => {
+    let dashboardConfig = { ...config.dashboard }
 
-    dashboardConfig.sharedFilters.splice(index, 1);
+    dashboardConfig.sharedFilters.splice(index, 1)
 
-    updateConfig({...config, dashboard: dashboardConfig});
+    updateConfig({ ...config, dashboard: dashboardConfig })
 
-    overlay?.actions.toggleOverlay();
+    overlay?.actions.toggleOverlay()
   }
 
-  const convertStateToConfig = (type = "JSON") => {
+  const convertStateToConfig = (type = 'JSON') => {
     let strippedState = JSON.parse(JSON.stringify(config))
     delete strippedState.newViz
     delete strippedState.runtime
 
-    if(type === "JSON") {
-      return JSON.stringify( strippedState )
+    if (type === 'JSON') {
+      return JSON.stringify(strippedState)
     }
 
     return strippedState
@@ -72,40 +65,40 @@ const Header = ({setPreview, tabSelected, setTabSelected, back, subEditor = null
     const parsedData = convertStateToConfig()
 
     // Emit the data in a regular JS event so it can be consumed by anything.
-    const event = new CustomEvent('updateVizConfig', { detail: parsedData})
+    const event = new CustomEvent('updateVizConfig', { detail: parsedData })
 
     window.dispatchEvent(event)
 
     // Pass up to Editor if needed
-    if(setParentConfig) {
-      const newConfig = convertStateToConfig("object")
+    if (setParentConfig) {
+      const newConfig = convertStateToConfig('object')
       setParentConfig(newConfig)
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config]);
+  }, [config])
 
   useEffect(() => {
     const runSetColumns = async () => {
-      let columns = {};
-      let dataKeys = Object.keys(config.datasets);
+      let columns = {}
+      let dataKeys = Object.keys(config.datasets)
 
-      for(let i = 0; i < dataKeys.length; i++){
-        if(!config.datasets[dataKeys[i]].data && config.datasets[dataKeys[i]].dataUrl){
-          config.datasets[dataKeys[i]].data = await fetchRemoteData(config.datasets[dataKeys[i]].dataUrl);
-          if(config.datasets[dataKeys[i]].dataDescription) {
+      for (let i = 0; i < dataKeys.length; i++) {
+        if (!config.datasets[dataKeys[i]].data && config.datasets[dataKeys[i]].dataUrl) {
+          config.datasets[dataKeys[i]].data = await fetchRemoteData(config.datasets[dataKeys[i]].dataUrl)
+          if (config.datasets[dataKeys[i]].dataDescription) {
             try {
-              config.datasets[dataKeys[i]].data = transform.autoStandardize(config.datasets[dataKeys[i]].data);
-              config.datasets[dataKeys[i]].data = transform.developerStandardize(config.datasets[dataKeys[i]].data, config.datasets[dataKey].dataDescription);
-            } catch(e) {
+              config.datasets[dataKeys[i]].data = transform.autoStandardize(config.datasets[dataKeys[i]].data)
+              config.datasets[dataKeys[i]].data = transform.developerStandardize(config.datasets[dataKeys[i]].data, config.datasets[dataKey].dataDescription)
+            } catch (e) {
               //Data not able to be standardized, leave as is
             }
           }
         }
 
-        if(config.datasets[dataKeys[i]].data) {
+        if (config.datasets[dataKeys[i]].data) {
           config.datasets[dataKeys[i]].data.map(row => {
-            Object.keys(row).forEach(columnName => columns[columnName] = true)
+            Object.keys(row).forEach(columnName => (columns[columnName] = true))
           })
         }
       }
@@ -114,131 +107,229 @@ const Header = ({setPreview, tabSelected, setTabSelected, back, subEditor = null
     }
 
     runSetColumns()
-  }, [config.datasets]);
+  }, [config.datasets])
 
   const filterModal = (filter, index) => {
-
     const saveChanges = () => {
-      let tempConfig = {...config.dashboard};
-      tempConfig.sharedFilters[index] = filter;
+      let tempConfig = { ...config.dashboard }
+      tempConfig.sharedFilters[index] = filter
+
+      updateConfig({ ...config, dashboard: tempConfig })
 
-      updateConfig({...config, dashboard: tempConfig});
-  
       overlay?.actions.toggleOverlay()
     }
 
     const updateFilterProp = (name, index, value) => {
-      let newFilter = {...filter};
+      let newFilter = { ...filter }
 
-      newFilter[name] = value;
+      newFilter[name] = value
 
       overlay?.actions.openOverlay(filterModal(newFilter, index))
     }
 
     const addFilterUsedBy = (filter, index, value) => {
-      if(!filter.usedBy) filter.usedBy = [];
-      filter.usedBy.push(value);
-      updateFilterProp('usedBy', index, filter.usedBy);
+      if (!filter.usedBy) filter.usedBy = []
+      filter.usedBy.push(value)
+      updateFilterProp('usedBy', index, filter.usedBy)
     }
-  
+
     const removeFilterUsedBy = (filter, index, value) => {
-      let usedByIndex = filter.usedBy.indexOf(value);
-      if(usedByIndex !== -1){
-        filter.usedBy.splice(usedByIndex, 1);
-        updateFilterProp('usedBy', index, filter.usedBy);
+      let usedByIndex = filter.usedBy.indexOf(value)
+      if (usedByIndex !== -1) {
+        filter.usedBy.splice(usedByIndex, 1)
+        updateFilterProp('usedBy', index, filter.usedBy)
       }
-  
     }
-    
+
     return (
       <Modal>
         <Modal.Content>
           <h2>Dashboard Filter Settings</h2>
-          <fieldset className="shared-filter-modal" key={filter.columnName + index}>
-            <button type="button" className="btn btn-primary remove-column" onClick={() => {removeFilter(index)}}>Remove Filter</button>
+          <fieldset className='shared-filter-modal' key={filter.columnName + index}>
+            <button
+              type='button'
+              className='btn btn-primary remove-column'
+              onClick={() => {
+                removeFilter(index)
+              }}
+            >
+              Remove Filter
+            </button>
             <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>
+              <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)}}/>
+              <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)}}/>
+              <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>
+              <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>
+                <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>
+              <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>
-                ))}
+                {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>
-                ))}
+                <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>
           </fieldset>
-          <button type="button" className="btn btn-primary" style={{display: 'inline-block', 'margin-right': '1em'}} onClick={overlay?.actions.toggleOverlay}>Cancel</button>
-          <button type="button" className="btn btn-primary" style={{display: 'inline-block'}} onClick={saveChanges}>Save</button>
+          <button type='button' className='btn btn-primary' style={{ display: 'inline-block', 'margin-right': '1em' }} onClick={overlay?.actions.toggleOverlay}>
+            Cancel
+          </button>
+          <button type='button' className='btn btn-primary' style={{ display: 'inline-block' }} onClick={saveChanges}>
+            Save
+          </button>
         </Modal.Content>
       </Modal>
     )
   }
 
   return (
-    <div aria-level="2" role="heading" className={`editor-heading${subEditor ? ' sub-dashboard-viz' : ''}`}>
-      {subEditor ? <div className="heading-1 back-to" onClick={back} style={{cursor: 'pointer'}}><span>&#8592;</span> Back to Dashboard</div> : <div className="heading-1">Dashboard Editor<br/>{<input type="text" placeholder="Enter Dashboard Name Here" defaultValue={config.dashboard.title} onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}/>}</div>}
-      {!subEditor && <div>
-        <ul className="toggle-bar">
-          <li className={tabSelected === 0 ? 'active' : 'inactive'} onClick={() => {setTab(0)}}>Dashboard Description</li>
-          <li className={tabSelected === 1 ? 'active' : 'inactive'} onClick={() => {setTab(1)}}>Dashboard Filters</li>
-          <li className={tabSelected === 2 ? 'active' : 'inactive'} onClick={() => {setTab(2)}}>Data Table Settings</li>
-          <li className={tabSelected === 3 ? 'active' : 'inactive'} onClick={() => {setTab(3)}}>Dashboard Preview</li>
-        </ul>
-        <div className="heading-body">
-          {tabSelected === 0 && <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 === 1 && (
-            <>
-              {config.dashboard.sharedFilters && config.dashboard.sharedFilters.map((sharedFilter, index) => (
-                <span className="shared-filter-button" key={`shared-filter-${sharedFilter.key}`}>
-                  <a href="#" onClick={(e) => {e.preventDefault(); overlay?.actions.openOverlay(filterModal(sharedFilter, index))}}>{sharedFilter.key}</a>
-                  <button onClick={() => removeFilter(index)}>X</button>
-                </span>
-              ))}
-              <button onClick={addNewFilter}>Add New Filter</button></>
-          )}
-          {tabSelected === 2 && (
-            <>
-              <label>Show Table</label><input type="checkbox" defaultChecked={config.table.show} onChange={e => changeConfigValue('table', 'show', e.target.checked)}  />
-              <label>Expanded by Default</label><input type="checkbox" defaultChecked={config.table.expanded} onChange={e => changeConfigValue('table', 'expanded', e.target.checked)} />
-              <label>Display Download Button</label><input type="checkbox" defaultChecked={config.table.download} onChange={e => changeConfigValue('table', 'download', e.target.checked)} />
-              <label>Limit Table Height</label><input type="checkbox" defaultChecked={config.table.limitHeight} onChange={e => changeConfigValue('table', 'limitHeight', e.target.checked)} />
-              {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 aria-level='2' role='heading' className={`editor-heading${subEditor ? ' sub-dashboard-viz' : ''}`}>
+      {subEditor ? (
+        <div className='heading-1 back-to' onClick={back} style={{ cursor: 'pointer' }}>
+          <span>&#8592;</span> Back to Dashboard
+        </div>
+      ) : (
+        <div className='heading-1'>
+          Dashboard Editor
+          <br />
+          {<input type='text' placeholder='Enter Dashboard Name Here' defaultValue={config.dashboard.title} onChange={e => changeConfigValue('dashboard', 'title', e.target.value)} />}
+        </div>
+      )}
+      {!subEditor && (
+        <div>
+          <ul className='toggle-bar'>
+            <li
+              className={tabSelected === 0 ? 'active' : 'inactive'}
+              onClick={() => {
+                setTab(0)
+              }}
+            >
+              Dashboard Description
+            </li>
+            <li
+              className={tabSelected === 1 ? 'active' : 'inactive'}
+              onClick={() => {
+                setTab(1)
+              }}
+            >
+              Dashboard Filters
+            </li>
+            <li
+              className={tabSelected === 2 ? 'active' : 'inactive'}
+              onClick={() => {
+                setTab(2)
+              }}
+            >
+              Data Table Settings
+            </li>
+            <li
+              className={tabSelected === 3 ? 'active' : 'inactive'}
+              onClick={() => {
+                setTab(3)
+              }}
+            >
+              Dashboard Preview
+            </li>
+          </ul>
+          <div className='heading-body'>
+            {tabSelected === 0 && <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 === 1 && (
+              <>
+                {config.dashboard.sharedFilters &&
+                  config.dashboard.sharedFilters.map((sharedFilter, index) => (
+                    <span className='shared-filter-button' key={`shared-filter-${sharedFilter.key}`}>
+                      <a
+                        href='#'
+                        onClick={e => {
+                          e.preventDefault()
+                          overlay?.actions.openOverlay(filterModal(sharedFilter, index))
+                        }}
+                      >
+                        {sharedFilter.key}
+                      </a>
+                      <button onClick={() => removeFilter(index)}>X</button>
+                    </span>
+                  ))}
+                <button onClick={addNewFilter}>Add New Filter</button>
+              </>
+            )}
+            {tabSelected === 2 && (
+              <>
+                <label>Show Table</label>
+                <input type='checkbox' defaultChecked={config.table.show} onChange={e => changeConfigValue('table', 'show', e.target.checked)} />
+                <label>Expanded by Default</label>
+                <input type='checkbox' defaultChecked={config.table.expanded} onChange={e => changeConfigValue('table', 'expanded', e.target.checked)} />
+                <label>Display Download Button</label>
+                <input type='checkbox' defaultChecked={config.table.download} onChange={e => changeConfigValue('table', 'download', e.target.checked)} />
+                <label>Limit Table Height</label>
+                <input type='checkbox' defaultChecked={config.table.limitHeight} onChange={e => changeConfigValue('table', 'limitHeight', e.target.checked)} />
+                {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>
-      </div>}
+      )}
     </div>
   )
 }

package/src/components/Row.js

@@ -17,7 +17,7 @@ const RowMenu = ({ rowIdx, row }) => {
     let res = []
 
     for (let i = 0; i < row.length; i++) {
-      if(row[i].width) res.push(row[i].width)
+      if (row[i].width) res.push(row[i].width)
     }
 
     return res.join('')
@@ -25,7 +25,7 @@ const RowMenu = ({ rowIdx, row }) => {
 
   const [curr, setCurr] = useState(getCurr())
 
-  const setRowLayout = (layout) => {
+  const setRowLayout = layout => {
     const newRows = [...rows]
     const r = newRows[rowIdx]
 
@@ -33,7 +33,7 @@ const RowMenu = ({ rowIdx, row }) => {
       r[i].width = layout[i] ?? null
     }
 
-    updateConfig({ ...config, rows: newRows})
+    updateConfig({ ...config, rows: newRows })
     setCurr(layout.join(''))
   }
 
@@ -48,17 +48,17 @@ const RowMenu = ({ rowIdx, row }) => {
     rows[newIdx] = row
     rows[rowIdx] = temp
 
-    rows[newIdx].uuid = Date.now();
-    rows[rowIdx].uuid = Date.now();
+    rows[newIdx].uuid = Date.now()
+    rows[rowIdx].uuid = Date.now()
 
-    updateConfig({...config, rows})
+    updateConfig({ ...config, rows })
 
     // TODO: Migrate this animation to a React animation library once one is selected for COVE. This is pretty minor so can stay for now.
     let calcRowMove = dir === 'down' ? 202 : -202
     let calcRowMove2 = dir === 'down' ? -202 : 202
 
-    let rowEle = document.querySelector('[data-row-id=\'' + rowIdx + '\']')
-    let rowNewEle = document.querySelector('[data-row-id=\'' + newIdx + '\']')
+    let rowEle = document.querySelector("[data-row-id='" + rowIdx + "']")
+    let rowNewEle = document.querySelector("[data-row-id='" + newIdx + "']")
 
     rowEle.style.pointerEvents = 'none'
     rowNewEle.style.pointerEvents = 'none'
@@ -77,62 +77,63 @@ const RowMenu = ({ rowIdx, row }) => {
       rowNewEle.style = null
     }, 500)
   }
-  
+
   const deleteRow = () => {
     rows.splice(rowIdx, 1) // Just delete the row. Don't delete the instantiated widgets for now.
 
-    updateConfig({...config, rows})
+    updateConfig({ ...config, rows })
   }
 
   const layoutList = [
-    <li className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([ 12 ])} key="12" title="1 Column">
+    <li className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([12])} key='12' title='1 Column'>
       <OneColIcon />
     </li>,
-    <li className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([ 6, 6 ])} key="66" title="2 Columns">
+    <li className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([6, 6])} key='66' title='2 Columns'>
       <TwoColIcon />
     </li>,
-    <li className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([ 4, 4, 4 ])} key="444" title="3 Columns">
+    <li className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([4, 4, 4])} key='444' title='3 Columns'>
       <ThreeColIcon />
     </li>,
-    <li className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([ 4, 8 ])} key="48" title="2 Columns">
+    <li className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([4, 8])} key='48' title='2 Columns'>
       <FourEightColIcon />
     </li>,
-    <li className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([ 8, 4 ])} key="84" title="2 Columns">
+    <li className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([8, 4])} key='84' title='2 Columns'>
       <EightFourColIcon />
     </li>
   ]
 
   return (
-    <nav className="row-menu">
-      <div className="row-menu__btn">
-        <ul className="row-menu__flyout">
-          {layoutList}
-        </ul>
+    <nav className='row-menu'>
+      <div className='row-menu__btn'>
+        <ul className='row-menu__flyout'>{layoutList}</ul>
       </div>
-      <div className="spacer"></div>
-      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title="Move Row Up" onClick={() => moveRow('up')}>
+      <div className='spacer'></div>
+      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title='Move Row Up' onClick={() => moveRow('up')}>
         <RowUp />
       </button>
-      <button className={rowIdx + 1 === rows.length ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title="Move Row Down" onClick={() => moveRow('down')}>
+      <button className={rowIdx + 1 === rows.length ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title='Move Row Down' onClick={() => moveRow('down')}>
         <RowDown />
       </button>
-      <button className={rowIdx === 0 && rows.length === 1 ? 'row-menu__btn row-menu__btn--remove row-menu__btn-disabled' : 'row-menu__btn row-menu__btn--remove'} title="Delete Row" onClick={deleteRow}>
+      <button className={rowIdx === 0 && rows.length === 1 ? 'row-menu__btn row-menu__btn--remove row-menu__btn-disabled' : 'row-menu__btn row-menu__btn--remove'} title='Delete Row' onClick={deleteRow}>
         <CloseIcon />
       </button>
     </nav>
   )
 }
 
-const Row = ({ row, idx: rowIdx, uuid}) => {
+const Row = ({ row, idx: rowIdx, uuid }) => {
   return (
-    <div className="builder-row" data-row-id={rowIdx}>
+    <div className='builder-row' data-row-id={rowIdx}>
       <RowMenu rowIdx={rowIdx} row={row} />
-      <div className="column-container">
-        {row.filter(column => column.width).map((column, colIdx) => <Column data={column} key={`row-${uuid}-col-${colIdx}`} rowIdx={rowIdx} colIdx={colIdx} />)}
+      <div className='column-container'>
+        {row
+          .filter(column => column.width)
+          .map((column, colIdx) => (
+            <Column data={column} key={`row-${uuid}-col-${colIdx}`} rowIdx={rowIdx} colIdx={colIdx} />
+          ))}
       </div>
     </div>
   )
 }
 
 export default Row
-