@cdc/core 4.24.12 → 4.25.2-25

package/components/EditorPanel/FootnotesEditor.tsx

@@ -39,13 +39,40 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }
     <>
       <em>Dynamic Footnotes</em>
       <div className='row border p-2'>
-        <InputSelect label='Select a Footnote Dataset' value={config.dataKey} options={dataSetOptions} fieldName='dataKey' updateField={updateField} />
+        <InputSelect
+          label='Select a Footnote Dataset'
+          value={config.dataKey}
+          options={dataSetOptions}
+          fieldName='dataKey'
+          updateField={updateField}
+        />
 
         {config.dataKey && (
           <div className='p-3'>
-            <InputSelect label='Footnote Symbol Column' value={config.dynamicFootnotes?.symbolColumn} options={dataColumns} section='dynamicFootnotes' fieldName='symbolColumn' updateField={updateField} />
-            <InputSelect label='Footnote Text Column' value={config.dynamicFootnotes?.textColumn} options={dataColumns} section='dynamicFootnotes' fieldName='textColumn' updateField={updateField} />
-            <InputSelect label='Footnote Order Column' value={config.dynamicFootnotes?.orderColumn} options={dataColumns} section='dynamicFootnotes' fieldName='orderColumn' updateField={updateField} />
+            <InputSelect
+              label='Footnote Symbol Column'
+              value={config.dynamicFootnotes?.symbolColumn}
+              options={dataColumns}
+              section='dynamicFootnotes'
+              fieldName='symbolColumn'
+              updateField={updateField}
+            />
+            <InputSelect
+              label='Footnote Text Column'
+              value={config.dynamicFootnotes?.textColumn}
+              options={dataColumns}
+              section='dynamicFootnotes'
+              fieldName='textColumn'
+              updateField={updateField}
+            />
+            <InputSelect
+              label='Footnote Order Column'
+              value={config.dynamicFootnotes?.orderColumn}
+              options={dataColumns}
+              section='dynamicFootnotes'
+              fieldName='orderColumn'
+              updateField={updateField}
+            />
           </div>
         )}
       </div>
@@ -57,10 +84,25 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }
       {config.staticFootnotes?.map((note, index) => (
         <div key={index} className='row border p-2'>
           <div className='col-8'>
-            <InputSelect label='Symbol' value={note.symbol} options={[['', '--Select--'], ...footnotesSymbols]} fieldName='symbol' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, symbol: value })} />{' '}
-            <TextField label='Text' value={note.text} fieldName='text' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, text: value })} />
+            <InputSelect
+              label='Symbol'
+              value={note.symbol}
+              options={[['', '--Select--'], ...footnotesSymbols]}
+              fieldName='symbol'
+              updateField={(section, subsection, fieldName, value) =>
+                updateStaticFootnote(index, { ...note, symbol: value })
+              }
+            />{' '}
+            <TextField
+              label='Text'
+              value={note.text}
+              fieldName='text'
+              updateField={(section, subsection, fieldName, value) =>
+                updateStaticFootnote(index, { ...note, text: value })
+              }
+            />
           </div>
-          <div className='col-2 ml-4'>
+          <div className='col-2 ms-4'>
             <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
               Delete
             </button>

package/components/EditorPanel/Inputs.tsx

@@ -55,6 +55,10 @@ const TextField = memo((props: TextFieldProps) => {
     }
   }, [debouncedValue])
 
+  useEffect(() => {
+    setValue(stateValue) // Update local state when props change
+  }, [stateValue])
+
   let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
 
   const onChange = e => {

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -91,7 +91,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
     // Overwrite filterItem.values since thats what we map through in the editor panel
     filterItem.values = updatedValues
     filterItem.orderedValues = updatedValues
-    filterItem.active = updatedValues[0]
+    filterItem.active = filterItem.defaultValue ? filterItem.defaultValue : updatedValues[0]
 
     filterItem.order = 'cust'
 
@@ -230,9 +230,10 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         value={filter.order || 'asc'}
                         fieldName='order'
                         label='Filter Order'
-                        updateField={(_section, _subSection, _field, value) =>
+                        updateField={(_section, _subSection, _field, value) => {
                           updateFilterProp('order', filterIndex, value)
-                        }
+                          if (filter.orderColumn && value !== 'column') updateFilterProp('orderColumn', filterIndex, '')
+                        }}
                         options={filterOrderOptions}
                       />
                       {filter.order === 'cust' && (
@@ -241,6 +242,17 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                           handleFilterOrder={(index1, index2) => handleFilterOrder(index1, index2, filterIndex)}
                         />
                       )}
+                      {filter.order === 'column' && (
+                        <Select
+                          value={filter.orderColumn}
+                          fieldName='orderColumn'
+                          label='Order Column'
+                          updateField={(_section, _subSection, _field, value) =>
+                            updateFilterProp('orderColumn', filterIndex, value)
+                          }
+                          options={dataColumns}
+                        />
+                      )}
                     </>
                   ) : (
                     <NestedDropdownEditor
@@ -274,6 +286,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         updateFilterProp('parents', filterIndex, value)
                       }}
                       options={getParentFilterOptions(filterIndex)}
+                      selected={config.filters[filterIndex].parents}
                     />
                   </label>
                 </FieldSetWrapper>

package/components/Filters/Filters.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useMemo } from 'react'
-import { useId } from 'react'
+import { useState, useEffect, useMemo, useRef, useId } from 'react'
+import _ from 'lodash'
 
 // CDC
 import Button from '../elements/Button'
@@ -11,16 +11,17 @@ import { filterVizData } from '../../helpers/filterVizData'
 import { addValuesToFilters } from '../../helpers/addValuesToFilters'
 import { DimensionsType } from '../../types/Dimensions'
 import NestedDropdown from '../NestedDropdown'
-import _ from 'lodash'
 import { getNestedOptions } from './helpers/getNestedOptions'
 import { applyQueuedActive } from './helpers/applyQueuedActive'
 import { handleSorting } from './helpers/handleSorting'
+import { getWrappingStatuses } from './helpers/filterWrapping'
 
 export const VIZ_FILTER_STYLE = {
   dropdown: 'dropdown',
   nestedDropdown: 'nested-dropdown',
   pill: 'pill',
   tab: 'tab',
+  tabSimple: 'tab-simple',
   tabBar: 'tab bar',
   multiSelect: 'multi-select'
 } as const
@@ -41,18 +42,25 @@ export const filterOrderOptions: { label: string; value: OrderBy }[] = [
   {
     label: 'Custom',
     value: 'cust'
-  }
+  },
+  { label: 'Order By Data Column', value: 'column' }
 ]
 
-const hasStandardFilterBehavior = ['chart', 'table']
-
 export const useFilters = props => {
   const [showApplyButton, setShowApplyButton] = useState(false)
 
   // Desconstructing: notice, adding more descriptive visualizationConfig name over config
   // visualizationConfig feels more robust for all vis types so that its not confused with config/state/etc.
-  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, getUniqueValues } = props
-  const { type, data } = visualizationConfig
+  const {
+    config: visualizationConfig,
+    setConfig,
+    filteredData,
+    setFilteredData,
+    excludedData,
+    getUniqueValues,
+    standaloneMap
+  } = props
+  const { data } = visualizationConfig
 
   /**
    * Re-orders a filter based on two indices and updates the runtime filters array and filters state
@@ -72,21 +80,19 @@ export const useFilters = props => {
     const [movedItem] = updatedValues.splice(idx1, 1)
     updatedValues.splice(idx2, 0, movedItem)
 
-    const filtersCopy = hasStandardFilterBehavior.includes(visualizationConfig.type)
-      ? [...visualizationConfig.filters]
-      : [...filteredData]
+    const filtersCopy = !standaloneMap ? [...visualizationConfig.filters] : [...filteredData]
     const filterItem = { ...filtersCopy[filterIndex] }
 
     // Overwrite filterItem.values since thats what we map through in the editor panel
     filterItem.values = updatedValues
     filterItem.orderedValues = updatedValues
-    filterItem.active = updatedValues[0]
+    if (!filterItem.active) filterItem.active = filterItem.defaultValue ? filterItem.defaultValue : updatedValues[0]
     filterItem.order = 'cust'
 
     // Update the filters
     filtersCopy[filterIndex] = filterItem
 
-    if (visualizationConfig.type === 'map') {
+    if (standaloneMap) {
       setFilteredData(filtersCopy)
     }
 
@@ -94,13 +100,13 @@ export const useFilters = props => {
   }
 
   const changeFilterActive = (index, value) => {
-    let newFilters = visualizationConfig.type === 'map' ? [...filteredData] : [...visualizationConfig.filters]
+    let newFilters = standaloneMap ? [...filteredData] : [...visualizationConfig.filters]
 
+    const newFilter = newFilters[index]
     if (visualizationConfig.filterBehavior === 'Apply Button') {
-      newFilters[index].queuedActive = value
+      newFilter.queuedActive = value
       setShowApplyButton(true)
     } else {
-      const newFilter = newFilters[index]
       if (newFilter.filterStyle !== 'nested-dropdown') {
         newFilter.active = value
       } else {
@@ -120,7 +126,7 @@ export const useFilters = props => {
         queryParams[newFilter?.subGrouping?.setByQueryParameter] = newFilter.subGrouping.active
         updateQueryString(queryParams)
       }
-      setFilteredData(newFilters[index])
+      setFilteredData(newFilters)
     }
 
     if (!visualizationConfig.dynamicSeries) {
@@ -132,15 +138,12 @@ export const useFilters = props => {
     }
 
     // Used for setting active filter, fromHash breaks the filteredData functionality.
-    if (visualizationConfig.type === 'map' && visualizationConfig.filterBehavior === 'Filter Change') {
+    if (standaloneMap && visualizationConfig.filterBehavior === 'Filter Change') {
       setFilteredData(newFilters)
     }
 
     // If we're on a chart and not using the apply button
-    if (
-      hasStandardFilterBehavior.includes(visualizationConfig.type) &&
-      visualizationConfig.filterBehavior === 'Filter Change'
-    ) {
+    if (!standaloneMap && visualizationConfig.filterBehavior === 'Filter Change') {
       const newFilteredData = filterVizData(newFilters, excludedData)
       setFilteredData(newFilteredData)
 
@@ -204,11 +207,9 @@ export const useFilters = props => {
 
     setConfig({ ...visualizationConfig, filters: newFilters })
 
-    if (type === 'map') {
+    if (standaloneMap) {
       setFilteredData(newFilters, excludedData)
-    }
-
-    if (hasStandardFilterBehavior.includes(visualizationConfig.type)) {
+    } else {
       setFilteredData(filterVizData(newFilters, excludedData))
     }
 
@@ -226,6 +227,7 @@ export const useFilters = props => {
       if (!filter.values || filter.values.length === 0) {
         filter.values = getUniqueValues(data, filter.columnName)
       }
+
       newFilters[i].active = handleSorting(filter).values[0]
 
       if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== filter.active) {
@@ -240,7 +242,7 @@ export const useFilters = props => {
 
     setConfig({ ...visualizationConfig, filters: newFilters })
 
-    if (type === 'map') {
+    if (standaloneMap) {
       setFilteredData(newFilters, excludedData)
     } else {
       setFilteredData(filterVizData(newFilters, excludedData))
@@ -274,17 +276,25 @@ type FilterProps = {
   setFilteredData: Function
   // updating function for setting fitlerBehavior
   setConfig: Function
-  // exclusions
-  exclusions: any[]
+  standaloneMap?: boolean
 }
 
 const Filters = (props: FilterProps) => {
-  const { config: visualizationConfig, filteredData, dimensions } = props
-  const { filters, type, general, theme, filterBehavior } = visualizationConfig
+  const { config: visualizationConfig, filteredData, dimensions, standaloneMap } = props
+  const { filters, general, theme, filterBehavior } = visualizationConfig
   const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
   const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
+  const [wrappingFilters, setWrappingFilters] = useState({})
   const id = useId()
 
+  const wrappingFilterRefs = useRef({})
+  const filterWrappingStatusesToUpdate = getWrappingStatuses(wrappingFilterRefs, wrappingFilters, filters)
+
+  if (filterWrappingStatusesToUpdate.length) {
+    const validStatuses = filterWrappingStatusesToUpdate.filter(Boolean) as [string, any][]
+    setWrappingFilters({ ...wrappingFilters, ...Object.fromEntries(validStatuses) })
+  }
+
   // useFilters hook provides data and logic for handling various filter functions
   // prettier-ignore
   const {
@@ -298,13 +308,32 @@ const Filters = (props: FilterProps) => {
 
   useEffect(() => {
     if (!dimensions) return
-    if (Number(dimensions[0]) < 768 && filters?.length > 0) {
-      setMobileFilterStyle(true)
-    } else {
-      setMobileFilterStyle(false)
-    }
+    const [width] = dimensions
+
+    const isMobile = Number(width) < 768
+    const isTabSimple = filters?.some(filter => filter.filterStyle === VIZ_FILTER_STYLE.tabSimple)
+
+    const defaultToMobile = isMobile && filters?.length && !isTabSimple
+
+    setMobileFilterStyle(defaultToMobile)
   }, [dimensions])
 
+  useEffect(() => {
+    const noLongerTabSimple = Object.keys(wrappingFilters).filter(columnName => {
+      const filter = filters.find(filter => filter.columnName === columnName)
+      if (!filter) return false
+      return filter.filterStyle !== VIZ_FILTER_STYLE.tabSimple
+    })
+
+    if (!noLongerTabSimple.length) return
+
+    setWrappingFilters(
+      Object.fromEntries(
+        Object.entries(wrappingFilters).filter(([columnName]) => !noLongerTabSimple.includes(columnName))
+      )
+    )
+  }, [filters])
+
   useEffect(() => {
     if (selectedFilter) {
       const el = document.getElementById(selectedFilter.id)
@@ -363,7 +392,7 @@ const Filters = (props: FilterProps) => {
 
   const vizFiltersWithValues = useMemo(() => {
     // Here charts is using config.filters where maps is using a runtime value
-    let vizfilters = type === 'map' ? filteredData : filters
+    let vizfilters = standaloneMap ? filteredData : filters
     if (!vizfilters) return []
     if (vizfilters.fromHash) delete vizfilters.fromHash // support for Maps config
     return addValuesToFilters(vizfilters as VizFilter[], visualizationConfig.data)
@@ -377,13 +406,17 @@ const Filters = (props: FilterProps) => {
       const DropdownOptions = []
       const Pills = []
       const Tabs = []
+      const isTabSimple = singleFilter.filterStyle === 'tab-simple'
 
-      const { active, queuedActive, label, filterStyle } = singleFilter as VizFilter
+      const { active, queuedActive, label, filterStyle, columnName } = singleFilter as VizFilter
+      const { isDropdown } = wrappingFilters[columnName] || {}
 
       handleSorting(singleFilter)
       singleFilter.values?.forEach((filterOption, index) => {
-        const pillClassList = ['pill', active === filterOption ? 'pill--active' : null, theme && theme]
-        const tabClassList = ['tab', active === filterOption && 'tab--active', theme && theme]
+        const isActive = active === filterOption
+
+        const pillClassList = ['pill', isActive ? 'pill--active' : null, theme && theme]
+        const tabClassList = ['tab', isActive && 'tab--active', theme && theme, isTabSimple && 'tab--simple']
 
         Pills.push(
           <div className='pill__wrapper' key={`pill-${index}`}>
@@ -437,20 +470,31 @@ const Filters = (props: FilterProps) => {
 
       const classList = [
         'single-filters',
-        'form-group mr-3',
+        'form-group',
         mobileFilterStyle ? 'single-filters--dropdown' : `single-filters--${filterStyle}`
       ]
-      const mobileExempt = ['nested-dropdown', 'multi-select'].includes(filterStyle)
-      const showDefaultDropdown = (filterStyle === 'dropdown' || mobileFilterStyle) && !mobileExempt
+      const mobileExempt = ['nested-dropdown', 'multi-select', VIZ_FILTER_STYLE.tabSimple].includes(filterStyle)
+      const showDefaultDropdown = ((filterStyle === 'dropdown' || mobileFilterStyle) && !mobileExempt) || isDropdown
+      const [nestedActiveGroup, nestedActiveSubGroup] = useMemo<string[]>(() => {
+        if (filterStyle !== 'nested-dropdown') return []
+        return (singleFilter.queuedActive || [singleFilter.active, singleFilter.subGrouping?.active]) as [
+          string,
+          string
+        ]
+      }, [singleFilter])
+      const hideLabelMargin = isTabSimple && !showDefaultDropdown
       return (
-        <div className={classList.join(' ')} key={outerIndex}>
+        <div className={classList.join(' ')} key={outerIndex} ref={el => (wrappingFilterRefs.current[columnName] = el)}>
           <>
             {label && (
-              <label className='font-weight-bold mt-1 mb-0' htmlFor={`filter-${outerIndex}`}>
+              <label className={`font-weight-bold mb-${hideLabelMargin ? '0' : '2'}`} htmlFor={`filter-${outerIndex}`}>
                 {label}
               </label>
             )}
             {filterStyle === 'tab' && !mobileFilterStyle && Tabs}
+            {filterStyle === 'tab-simple' && !showDefaultDropdown && (
+              <div className='tab-simple-container d-flex w-100'>{Tabs}</div>
+            )}
             {filterStyle === 'pill' && !mobileFilterStyle && Pills}
             {filterStyle === 'tab bar' && !mobileFilterStyle && <TabBar filter={singleFilter} index={outerIndex} />}
             {filterStyle === 'multi-select' && (
@@ -464,8 +508,8 @@ const Filters = (props: FilterProps) => {
             )}
             {filterStyle === 'nested-dropdown' && (
               <NestedDropdown
-                activeGroup={(singleFilter.active as string) || (singleFilter.queuedActive || [])[0]}
-                activeSubGroup={(singleFilter.subGrouping?.active as string) || (singleFilter.queuedActive || [])[1]}
+                activeGroup={nestedActiveGroup}
+                activeSubGroup={nestedActiveSubGroup}
                 filterIndex={outerIndex}
                 options={getNestedOptions(singleFilter)}
                 listLabel={label}
@@ -492,18 +536,18 @@ const Filters = (props: FilterProps) => {
   const getClasses = () => {
     const { visualizationType, legend } = visualizationConfig || {}
     const baseClass = 'filters-section'
-    const conditionalClass = type === 'map' ? general.headerColor : visualizationType === 'Spark Line' ? null : theme
+    const conditionalClass = standaloneMap ? general.headerColor : visualizationType === 'Spark Line' ? null : theme
     const legendClass = legend && !legend.hide && legend.position === 'top' ? 'mb-0' : null
 
-    return [baseClass, conditionalClass, legendClass].filter(Boolean)
+    return [baseClass, conditionalClass, legendClass, 'w-100'].filter(Boolean)
   }
 
   return (
     <section className={getClasses().join(' ')}>
       {visualizationConfig.filterIntro && (
-        <p className='filters-section__intro-text'>{visualizationConfig.filterIntro}</p>
+        <p className='filters-section__intro-text mb-3'>{visualizationConfig.filterIntro}</p>
       )}
-      <div className='d-flex flex-wrap w-100 filters-section__wrapper'>
+      <div className='d-flex flex-wrap w-100 mb-4 pb-2 filters-section__wrapper align-items-end'>
         {' '}
         <>
           <Style />

package/components/Filters/helpers/filterWrapping.ts

@@ -0,0 +1,43 @@
+import { VIZ_FILTER_STYLE } from '../Filters'
+
+const WRAPPING_HEIGHT_THRESHOLD_NO_LABEL = 60
+const WRAPPING_HEIGHT_THRESHOLD_WITH_LABEL = 100
+export const getWrappingStatuses = (wrappingFilterRefs, wrappingFilters, allFilters) =>
+  Object.entries(wrappingFilterRefs.current)
+    .map(([columnValue, ref]) => {
+      if (!ref) return false
+
+      const filter = allFilters.find(filter => filter.columnName === columnValue)
+      const { filterStyle, label } = filter || {}
+
+      if (!filterStyle || filterStyle !== VIZ_FILTER_STYLE.tabSimple) return false
+
+      const filterStyleClass = (ref as HTMLElement).className
+        .split(' ')
+        .find(className => className.includes(filterStyle))
+        ?.split('single-filters--')[1]
+
+      const classMatchesStyle = filterStyleClass && filterStyleClass === filterStyle
+
+      if (!classMatchesStyle) return false
+
+      const wrappingState = wrappingFilters[columnValue]
+      const { height, width } = (ref as HTMLElement).getBoundingClientRect()
+      const wrappingThreshold = label ? WRAPPING_HEIGHT_THRESHOLD_WITH_LABEL : WRAPPING_HEIGHT_THRESHOLD_NO_LABEL
+      const isWrapped = height > wrappingThreshold
+
+      if (!wrappingState) return [columnValue, { highestWrappedWidth: isWrapped ? width : 0, isDropdown: isWrapped }]
+
+      const { highestWrappedWidth, isDropdown: wasDropdown } = wrappingState
+      const isDropdown = width <= highestWrappedWidth
+      const widthIsLarger = width > highestWrappedWidth
+      const largestWidth = Math.max(highestWrappedWidth, width)
+
+      if ((isDropdown || isWrapped) && !wasDropdown) {
+        return [columnValue, { highestWrappedWidth: largestWidth, isDropdown: true }]
+      }
+      if (wasDropdown && widthIsLarger) {
+        return [columnValue, { highestWrappedWidth, isDropdown: false }]
+      }
+    })
+    .filter(Boolean)

package/components/Filters/helpers/handleSorting.ts

@@ -7,12 +7,18 @@ export const handleSorting = singleFilter => {
     return singleFilter
   }
 
+  if (singleFilter.order === 'column') {
+    // sorting is done in the generateValuesForFilter function
+    return singleFilter
+  }
+
   const sort = (a, b) => {
     const asc = singleFilter.order !== 'desc'
     return String(asc ? a : b).localeCompare(String(asc ? b : a), 'en', { numeric: true })
   }
 
   singleFilter.values = singleFilterValues.sort(sort)
+  singleFilter.orderedValues = singleFilterValues.sort(sort)
 
   return singleFilter
 }

package/components/Filters/helpers/tests/handleSorting.test.ts

@@ -16,6 +16,32 @@ describe('handleSorting', () => {
     expect(result.values).toEqual(['value1', 'value2', 'value3'])
   })
 
+  it('should sort orderedValues in asc order if order is asc"', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      orderedValues: ['value2', 'value1', 'value3'],
+      order: 'asc',
+      filterStyle: 'nested-dropdown'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.orderedValues).toEqual(['value1', 'value2', 'value3'])
+  })
+
+  it('should sort orderedValues in desc order if order is desc"', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      orderedValues: ['value1', 'value2', 'value1'],
+      order: 'desc',
+      filterStyle: 'nested-dropdown'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.orderedValues).toEqual(['value3', 'value2', 'value1'])
+  })
+
   it('should sort values in ascending order by default', () => {
     const singleFilter = {
       values: ['value3', 'value1', 'value2'],

package/components/Footnotes/Footnotes.tsx

@@ -12,7 +12,7 @@ const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
         {footnotes.map((note, i) => {
           return (
             <li key={note.symbol + i} className='mb-1'>
-              {note.symbol && <span className='mr-1'>{note.symbol}</span>}
+              {note.symbol && <span className='me-1'>{note.symbol}</span>}
               {note.text}
             </li>
           )

package/components/Layout/components/Visualization/index.tsx

@@ -17,10 +17,17 @@ type VisualizationWrapper = {
 }
 
 const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) => {
-  const { config = {}, isEditor = false, currentViewport = 'lg', imageId = '', showEditorPanel = true, className } = props
+  const {
+    config = {},
+    isEditor = false,
+    currentViewport = 'lg',
+    imageId = '',
+    showEditorPanel = true,
+    className
+  } = props
 
   const getWrappingClasses = () => {
-    let classes = ['cdc-open-viz-module', `${currentViewport}`, `font-${config?.fontSize}`, `${config?.theme}`]
+    let classes = ['cdc-open-viz-module', `${currentViewport}`, `${config?.theme}`]
 
     if (className) {
       classes.push(className)
@@ -40,7 +47,7 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
     }
 
     if (config.type === 'filtered-text') {
-      classes.push('type-filtered-text')
+      classes.push('type-filtered-text', `font-${config.fontSize}`)
       classes = classes.filter(item => item !== 'cove-component__content')
       return classes
     }
@@ -67,7 +74,14 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
     }
 
     if (config.type === 'waffle-chart') {
-      classes.push('cove', 'cdc-open-viz-module', 'type-waffle-chart', currentViewport, config.theme, 'font-' + config.overallFontSize)
+      classes.push(
+        'cove',
+        'cdc-open-viz-module',
+        'type-waffle-chart',
+        currentViewport,
+        config.theme,
+        'font-' + config.overallFontSize
+      )
 
       if (isEditor) {
         classes.push('is-editor')

package/components/Layout/components/Visualization/visualizations.scss

@@ -1,6 +1,6 @@
 .cdc-open-viz-module {
   .cdc-chart-inner-container .cove-component__content {
-    padding: 25px 15px 25px 0 !important;
+    padding: 0 15px 27px 0 !important;
   }
   &.isEditor {
     overflow: auto;

package/components/Legend/Legend.Gradient.tsx

@@ -92,10 +92,7 @@ const LegendGradient = ({
 
   if (style === 'gradient') {
     return (
-      <svg
-        style={{ overflow: 'visible', width: '100%', marginTop: 10, marginBottom: hideBorder ? 10 : 0 }}
-        height={newHeight}
-      >
+      <svg className={'w-100 overflow-visible'} height={newHeight}>
         {/* background border*/}
         <rect x={0} y={0} width={legendWidth + MARGIN * 2} height={boxHeight + MARGIN * 2} fill='#d3d3d3' />
         {/* Define the gradient */}

package/components/Legend/index.tsx

@@ -28,7 +28,7 @@ const ResetButton = props => {
   if (config.runtime.disabledAmt === 0) return <></>
 
   return (
-    <button onClick={handleReset} className={legendClasses.resetButton.join(' ') || ''}>
+    <button onClick={handleReset} className={legendClasses.showAllButton.join(' ') || ''}>
       Reset
     </button>
   )

package/components/LegendShape.tsx

@@ -10,9 +10,8 @@ interface LegendShapeProps {
 const LegendShape: React.FC<LegendShapeProps> = props => {
   const { fill, borderColor, display = 'inline-block', shape = 'circle' } = props
   const dimensions = { width: '1em', height: '1em' }
-  const marginRight = ['circle', 'square'].includes(shape) ? '5px' : '0'
+  const isCircleOrSquare = ['circle', 'square'].includes(shape)
   const styles = {
-    marginRight: marginRight,
     borderRadius: shape === 'circle' ? '50%' : '0px',
     verticalAlign: 'middle',
     display: display,
@@ -22,7 +21,7 @@ const LegendShape: React.FC<LegendShapeProps> = props => {
     backgroundColor: fill
   }
 
-  return <span className='legend-item' style={styles} />
+  return <span className={`legend-item ${isCircleOrSquare ? 'me-2' : ''}`} style={styles} />
 }
 
 export default LegendShape