@cdc/core 4.25.3-6 → 4.25.3

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -35,20 +35,22 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
   }, [config])
 
   const typeLookup = {
-    chart: ['Charts', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
-    dashboard: ['Dashboard', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
-    map: ['Maps', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html', <MapIcon />],
-    'markup-include': [
-      'Markup Include',
-      'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html',
-      <MarkupIncludeIcon />
-    ]
+    chart: ['Charts', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
+    dashboard: ['Dashboard', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
+    map: ['Maps', 'https://www.cdc.gov/cove/index.html', <MapIcon />],
+    'markup-include': ['Markup Include', 'https://www.cdc.gov/cove/index.html', <MarkupIncludeIcon />]
   }
 
   if (!config.type) return <></>
   return (
     <>
-      <a href={typeLookup[config.type][1]} target='_blank' rel='noopener noreferrer' className='guidance-link'>
+      <a
+        href={typeLookup[config.type][1]}
+        target='_blank'
+        rel='noopener noreferrer'
+        className='guidance-link'
+        style={{ cursor: 'pointer !important' }}
+      >
         {typeLookup[config.type][2]}
         <div>
           <span className='heading-3'>Get Help with {typeLookup[config.type][0]}</span>

package/components/DataTable/DataTable.tsx

@@ -11,7 +11,7 @@ import BoxplotHeader from './components/BoxplotHeader'
 import MapHeader from './components/MapHeader'
 import SkipTo from '../elements/SkipTo'
 import ExpandCollapse from './components/ExpandCollapse'
-import mapCellMatrix from './helpers/mapCellMatrix'
+import mapCellMatrix, { getMapRowData } from './helpers/mapCellMatrix'
 import Table from '../Table'
 import chartCellMatrix from './helpers/chartCellMatrix'
 import regionCellMatrix from './helpers/regionCellMatrix'
@@ -24,6 +24,7 @@ import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import isRightAlignedTableValue from '@cdc/core/helpers/isRightAlignedTableValue'
 import './data-table.css'
 import _ from 'lodash'
+import { getDataSeriesColumns } from './helpers/getDataSeriesColumns'
 
 export type DataTableProps = {
   applyLegendToRow?: Function
@@ -32,9 +33,9 @@ export type DataTableProps = {
   config: TableConfig
   dataConfig?: Object
   defaultSortBy?: string
-  displayGeoName?: Function
+  displayGeoName?: (row: string) => string
   expandDataTable: boolean
-  formatLegendLocation?: Function
+  formatLegendLocation?: (row: string) => string
   groupBy?: string
   headerColor?: string
   imageRef?: string
@@ -45,8 +46,7 @@ export type DataTableProps = {
   outerContainerRef?: Function
   rawData: Object[]
   runtimeData: Object[] & Record<string, Object>
-  setFilteredCountryCode?: Function // used for Maps only
-  showDownloadButton?: boolean
+  setFilteredCountryCode?: string // used for Maps only
   tabbingId: string
   tableTitle: string
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
@@ -61,6 +61,7 @@ const DataTable = (props: DataTableProps) => {
     config,
     dataConfig,
     defaultSortBy,
+    displayGeoName,
     tableTitle,
     vizTitle,
     rawData,
@@ -75,19 +76,15 @@ const DataTable = (props: DataTableProps) => {
   } = props
   const runtimeData = useMemo(() => {
     const data = removeNullColumns(parentRuntimeData)
-    if (config.table.pivot) {
+    const { columnName, valueColumns } = config.table.pivot || {}
+    if (columnName && valueColumns) {
       const excludeColumns = Object.values(config.columns || {})
         .filter(column => column.dataTable === false)
         .map(col => col.name)
-      const { columnName, valueColumns } = config.table.pivot
-      if (columnName && valueColumns) {
-        // remove excluded columns so that they aren't included in the pivot calculation
-        const _data = data.map(row => _.omit(row, excludeColumns))
-        return pivotData(_data, columnName, valueColumns)
-      }
+      return pivotData(data, columnName, valueColumns, excludeColumns)
     }
     return data
-  }, [parentRuntimeData, config.table.pivot?.columnName, config.table.pivot?.valueColumn])
+  }, [parentRuntimeData, config.table.pivot?.columnName, config.table.pivot?.valueColumns])
 
   const [expanded, setExpanded] = useState(expandDataTable)
   const [sortBy, setSortBy] = useState<any>({
@@ -208,13 +205,10 @@ const DataTable = (props: DataTableProps) => {
     [config.runtime?.seriesKeys]) // eslint-disable-line
 
   const hasNoData = runtimeData.length === 0
-
   const getClassNames = (): string => {
     const classes = ['data-table-container']
 
-    const hasDownloadLinkAbove =
-      (config.table.download || config.general?.showDownloadButton) && !config.table.showDownloadLinkBelow
-
+    const hasDownloadLinkAbove = config.table.download && !config.table.showDownloadLinkBelow
     const isStandaloneTable = config.type === 'table'
 
     if (!hasDownloadLinkAbove && !isStandaloneTable) {
@@ -233,12 +227,32 @@ const DataTable = (props: DataTableProps) => {
 
   if (config.visualizationType !== 'Box Plot') {
     const getDownloadData = () => {
+      const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
+      const sharedFilterColumns = config.table?.sharedFilterColumns || []
+      const vizFilterColumns = (config.filters || []).map(filter => filter.columnName)
+      const filterColumns = [...sharedFilterColumns, ...vizFilterColumns]
+      const visibleData =
+        config.type === 'map'
+          ? getMapRowData(
+              rows,
+              columns,
+              config,
+              formatLegendLocation,
+              runtimeData as Record<string, Object>,
+              displayGeoName,
+              filterColumns
+            )
+          : runtimeData.map(d => {
+              return _.pick(d, [...filterColumns, ...dataSeriesColumns])
+            })
+      const csvData = config.table?.downloadVisibleDataOnly ? visibleData : rawData
+
       // only use fullGeoName on County maps and no other
       if (config.general?.geoType === 'us-county') {
         // Add column for full Geo name along with State
-        return rawData.map(row => ({ FullGeoName: formatLegendLocation(row[config.columns.geo.name]), ...row }))
+        return csvData.map(row => ({ FullGeoName: formatLegendLocation(row[config.columns.geo.name]), ...row }))
       } else {
-        return rawData
+        return csvData
       }
     }
 
@@ -276,7 +290,7 @@ const DataTable = (props: DataTableProps) => {
       : {}
 
     const TableMediaControls = ({ belowTable }) => {
-      const hasDownloadLink = config.table.download || config.general?.showDownloadButton
+      const hasDownloadLink = config.table.download
       return (
         <MediaControls.Section classes={getMediaControlsClasses(belowTable, hasDownloadLink)}>
           <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />

package/components/DataTable/components/ChartHeader.tsx

@@ -54,7 +54,7 @@ const ChartHeader = ({
   }
 
   const ColumnHeadingText = ({ column, text, config }) => {
-    if (text === 'pivotColumn') return ''
+    if (text === '_pivotedFrom') return ''
     let notApplicableText = 'Not Applicable'
     if (text === '__series__' && config.table.indexLabel) return `${config.table.indexLabel} `
     if (text === '__series__' && !config.table.indexLabel)

package/components/DataTable/helpers/getChartCellValue.ts

@@ -2,16 +2,22 @@ import { parseDate, formatDate } from '@cdc/core/helpers/cove/date'
 import { formatNumber } from '../../../helpers/cove/number'
 import { TableConfig } from '../types/TableConfig'
 
+const isPivotColumn = (columnName, config) => {
+  const tableHasPivotColumnConfigured = config.table.pivot?.valueColumns?.length
+  const originalColumnNames = Object.keys(config.data?.[0] || {})
+  const columnIsPivot = originalColumnNames.length && !originalColumnNames.includes(columnName)
+  return tableHasPivotColumnConfigured && columnIsPivot
+}
+
 // if its additional column, return formatting params
-const isAdditionalColumn = (column, config) => {
-  let inthere = false
+const isAdditionalColumn = (column: string, config, rowData) => {
+  const columnName = isPivotColumn(column, config) ? rowData._pivotedFrom : column
   let formattingParams = {}
   const { columns } = config
   if (columns) {
     Object.keys(columns).forEach(keycol => {
       const col = columns[keycol]
-      if (col.name === column) {
-        inthere = true
+      if (col.name === columnName) {
         formattingParams = {
           addColPrefix: col.prefix,
           addColSuffix: col.suffix,
@@ -54,7 +60,7 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
       if (rightSeriesItem.dataKey === column) resolvedAxis = 'right'
     })
 
-    let addColParams = isAdditionalColumn(column, config)
+    let addColParams = isAdditionalColumn(column, config, rowObj)
     if (addColParams) {
       cellValue = config.dataFormat
         ? formatNumber(runtimeData[row][column], resolvedAxis, false, config, addColParams)

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -57,9 +57,13 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
   })
 
   tmpSeriesColumns.sort((a, b) => {
-    if (a === 'pivotColumn') return -1
-    if (b === 'pivotColumn') return 1
+    if (a === '_pivotedFrom') return -1
+    if (b === '_pivotedFrom') return 1
     return columnOrderingHash[a] - columnOrderingHash[b]
   })
-  return tmpSeriesColumns
+
+  return tmpSeriesColumns.filter(colName => {
+    // remove metadata added by pivotData function
+    return colName !== '_pivotedFrom'
+  })
 }

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -3,11 +3,70 @@ import CellAnchor from '../components/CellAnchor'
 import { DataTableProps } from '../DataTable'
 import { ReactNode } from 'react'
 import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
+import _ from 'lodash'
 
 type MapRowsProps = DataTableProps & {
   rows: string[]
 }
 
+const getGeoLabel = (config, row, formatLegendLocation, displayGeoName) => {
+  const { geoType, type } = config.general
+  let labelValue
+  if (!['single-state', 'us-county'].includes(geoType) || type === 'us-geocode') {
+    labelValue = displayGeoName(row)
+    labelValue = String(labelValue).startsWith('region') ? _.capitalize(labelValue) : labelValue
+  } else {
+    labelValue = formatLegendLocation(row)
+  }
+  return labelValue
+}
+
+const getDataValue = (config, rowData, column) => {
+  // check for special classes
+  let specialValFound = ''
+  let columnName = config.columns[column]?.name
+  const { specialClasses } = config.legend
+  if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
+    specialClasses.forEach(specialClass => {
+      if (specialClass.key === columnName) {
+        if (String(rowData[specialClass.key]) === specialClass.value) {
+          specialValFound = specialClass.label
+        }
+      }
+    })
+  }
+  return specialValFound || rowData[columnName]
+}
+
+export const getMapRowData = (
+  rows: string[],
+  columns: Record<string, { label; name?; dataTable }>,
+  config: Record<string, Object>,
+  formatLegendLocation: (row: string) => string,
+  runtimeData: Record<string, Object>,
+  displayGeoName: (row: string) => string,
+  filterColumns: string[]
+) => {
+  return rows.map((row: string) => {
+    const dataRow = {}
+    ;[
+      ...filterColumns,
+      ...Object.keys(columns).filter(column => columns[column].dataTable === true && columns[column].name)
+    ].map(column => {
+      const label = columns[column]?.label || columns[column]?.name || column
+      if (column === 'geo') {
+        dataRow[label] = getGeoLabel(config, row, formatLegendLocation, displayGeoName)
+      } else if (filterColumns.includes(column)) {
+        dataRow[label] = runtimeData[row][column]
+      } else {
+        const dataValue = getDataValue(config, runtimeData[row], column)
+        dataRow[label] = displayDataAsText(dataValue, column, config)
+      }
+    })
+    return dataRow
+  })
+}
+
 const mapCellArray = ({
   rows,
   columns,
@@ -23,30 +82,15 @@ const mapCellArray = ({
     Object.keys(columns)
       .filter(column => columns[column].dataTable === true && columns[column].name)
       .map(column => {
-        let cellValue
-
         if (column === 'geo') {
           const rowObj = runtimeData[row]
           const legendColor = applyLegendToRow(rowObj)
-
-          let labelValue
+          const labelValue = getGeoLabel(config, row, formatLegendLocation, displayGeoName)
           const mapZoomHandler =
             config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world'
               ? () => setFilteredCountryCode(row)
               : undefined
-          if (
-            (config.general.geoType !== 'single-state' && config.general.geoType !== 'us-county') ||
-            config.general.type === 'us-geocode'
-          ) {
-            const capitalize = str => {
-              return str.charAt(0).toUpperCase() + str.slice(1)
-            }
-            labelValue = displayGeoName(row)
-            labelValue = String(labelValue).startsWith('region') ? capitalize(labelValue) : labelValue
-          } else {
-            labelValue = formatLegendLocation(row)
-          }
-          cellValue = (
+          return (
             <div className='col-12'>
               <LegendShape fill={legendColor[0]} />
               <CellAnchor
@@ -59,23 +103,10 @@ const mapCellArray = ({
             </div>
           )
         } else {
-          // check for special classes
-          let specialValFound = ''
-          let columnName = config.columns[column].name
-          const { specialClasses } = config.legend
-          if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
-            specialClasses.forEach(specialClass => {
-              if (specialClass.key === columnName) {
-                if (String(runtimeData[row][specialClass.key]) === specialClass.value) {
-                  specialValFound = specialClass.label
-                }
-              }
-            })
-          }
-          cellValue = displayDataAsText(specialValFound || runtimeData[row][columnName], column, config)
+          const rowData = runtimeData[row]
+          const dataValue = getDataValue(config, rowData, column)
+          return displayDataAsText(dataValue, column, config)
         }
-
-        return cellValue
       })
   )
 }

package/components/DataTable/helpers/tests/mapCellMatrix.test.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect } from 'vitest'
+import { getMapRowData } from '../mapCellMatrix'
+
+describe('getMapRowData', () => {
+  const columns = {
+    geo: { dataTable: true, name: 'geo', label: 'Geo' },
+    column1: { dataTable: true, name: 'column1', label: 'Column 1' },
+    column2: { dataTable: true, name: 'column2', label: 'Column 2' }
+  }
+  const config = {
+    general: { geoType: 'us-state', type: 'map' },
+    columns: {
+      geo: { name: 'geo' },
+      column1: { name: 'column1' },
+      column2: { name: 'column2' }
+    },
+    legend: { specialClasses: [] }
+  }
+  const formatLegendLocation = row => row
+  const rows = ['row2', 'row1']
+  const runtimeData = {
+    row1: { geo: 'region1', column1: 'data1', column2: 'data2', somethingElse: 'data5' },
+    row2: { geo: 'region2', column1: 'data3', column2: 'data4', somethingElse: 'data6' }
+  }
+  const displayGeoName = row => `displayGeoName -> ${row}`
+  const sharedFilterColumns = ['somethingElse']
+
+  it('should map rows to data rows correctly', () => {
+    const result = getMapRowData(
+      rows,
+      columns,
+      config,
+      formatLegendLocation,
+      runtimeData,
+      displayGeoName,
+      sharedFilterColumns
+    )
+
+    expect(result).toEqual([
+      {
+        Geo: 'displayGeoName -> row2',
+        'Column 1': 'data3',
+        'Column 2': 'data4',
+        somethingElse: 'data6'
+      },
+      {
+        Geo: 'displayGeoName -> row1',
+        'Column 1': 'data1',
+        'Column 2': 'data2',
+        somethingElse: 'data5'
+      }
+    ])
+
+    config.general.geoType = 'us-county'
+    const result2 = getMapRowData(
+      rows,
+      columns,
+      config,
+      formatLegendLocation,
+      runtimeData,
+      displayGeoName,
+      sharedFilterColumns
+    )
+
+    expect(result2).toEqual([
+      {
+        Geo: 'row2',
+        'Column 1': 'data3',
+        'Column 2': 'data4',
+        somethingElse: 'data6'
+      },
+      {
+        Geo: 'row1',
+        'Column 1': 'data1',
+        'Column 2': 'data2',
+        somethingElse: 'data5'
+      }
+    ])
+  })
+})

package/components/EditorPanel/DataTableEditor.tsx

@@ -83,7 +83,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           </Tooltip>
         }
       />
-      {config.type !== 'table' ? (
+      {config.type !== 'table' && (
         <CheckBox
           value={config.table.show}
           fieldName='show'
@@ -108,15 +108,6 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
             </Tooltip>
           }
         />
-      ) : (
-        <CheckBox
-          value={config.general?.showDownloadButton}
-          fieldName='showDownloadButton'
-          label='Show Download CSV link'
-          section='general'
-          updateField={updateField}
-          className='column-heading'
-        />
       )}
 
       {config.visualizationType !== 'Box Plot' && config.type !== 'table' && (
@@ -234,6 +225,33 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           updateField={updateField}
         />
       )}
+      <CheckBox
+        value={config.table.download}
+        fieldName='download'
+        label='Show Download CSV Link'
+        section='table'
+        updateField={updateField}
+      />
+      {config.table.download && (
+        <>
+          <CheckBox
+            value={config.table.showDownloadLinkBelow}
+            fieldName='showDownloadLinkBelow'
+            className='ms-4'
+            label='Show Link Below Table'
+            section='table'
+            updateField={updateField}
+          />
+          <CheckBox
+            value={config.table.downloadVisibleDataOnly}
+            fieldName='downloadVisibleDataOnly'
+            className='ms-4'
+            label='Download only visible data'
+            section='table'
+            updateField={updateField}
+          />
+        </>
+      )}
       {isDashboard && config.type !== 'table' && (
         <CheckBox
           value={config.table.showDataTableLink}
@@ -261,14 +279,6 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           updateField={updateField}
         />
       )}
-
-      <CheckBox
-        value={config.table.showDownloadLinkBelow}
-        fieldName='showDownloadLinkBelow'
-        label='Show Download Link Below Table'
-        section='table'
-        updateField={updateField}
-      />
       <label>
         <span className='edit-label column-heading'>Table Cell Min Width</span>
         <input

package/components/EditorPanel/Inputs.tsx

@@ -1,5 +1,6 @@
 import { memo, useEffect, useState } from 'react'
 import { useDebounce } from 'use-debounce'
+import { DROPDOWN_STYLES } from '../Filters/Filters'
 
 export type Input = {
   label: string
@@ -194,7 +195,7 @@ const Select = memo((props: SelectProps) => {
         {tooltip}
       </span>
       <select
-        className={`cove-form-select ${required && !value ? 'warning' : ''}`}
+        className={`cove-form-select ${required && !value ? 'warning' : ''} ${DROPDOWN_STYLES}`}
         name={fieldName}
         value={value}
         onChange={event => {

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -37,6 +37,15 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
     updateField('filters', filterIndex, prop, value)
   }
 
+  const updateFilterDefaultValue = (index, value) => {
+    const filters = _.cloneDeep(config.filters)
+    const currentFilter = { ...filters[index], orderedValues: filters[index].values }
+    currentFilter.defaultValue = value
+    currentFilter.active = value
+    filters[index] = currentFilter
+    updateField(null, null, 'filters', filters)
+  }
+
   const updateFilterStyle = (index, style: VizFilterStyle) => {
     const filters = _.cloneDeep(config.filters)
     const currentFilter = { ...filters[index], orderedValues: filters[index].values }
@@ -160,6 +169,20 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                     options={filterStyleOptions}
                   />
 
+                  <Select
+                    value={filter.defaultValue}
+                    options={
+                      filter.resetLabel
+                        ? [filter.resetLabel, ...config.filters?.[filterIndex].values]
+                        : config.filters?.[filterIndex].values
+                    }
+                    updateField={(_section, _subSection, _key, value) => {
+                      updateFilterDefaultValue(filterIndex, value)
+                    }}
+                    label='Filter Default Value'
+                    initial='Select'
+                  />
+
                   {filter.filterStyle !== 'nested-dropdown' ? (
                     <>
                       <Select

package/components/Filters/Filters.tsx

@@ -26,6 +26,8 @@ export const VIZ_FILTER_STYLE = {
   multiSelect: 'multi-select'
 } as const
 
+export const DROPDOWN_STYLES = 'py-2 ps-2 w-100 d-block'
+
 export type VizFilterStyle = (typeof VIZ_FILTER_STYLE)[keyof typeof VIZ_FILTER_STYLE]
 
 export const filterStyleOptions = Object.values(VIZ_FILTER_STYLE)
@@ -49,7 +51,7 @@ export const filterOrderOptions: { label: string; value: OrderBy }[] = [
 export const useFilters = props => {
   const [showApplyButton, setShowApplyButton] = useState(false)
 
-  // Desconstructing: notice, adding more descriptive visualizationConfig name over config
+  // Deconstructing: 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,
@@ -250,8 +252,8 @@ export const useFilters = props => {
   }
 
   const filterConstants = {
-    buttonText: 'Apply Filters',
-    resetText: 'Reset All'
+    buttonText: 'Apply',
+    resetText: 'Clear Filters'
   }
 
   // prettier-ignore
@@ -285,6 +287,16 @@ const Filters = (props: FilterProps) => {
   const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
   const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
   const [wrappingFilters, setWrappingFilters] = useState({})
+  const [initialActiveFilters, setInitialActiveFilters] = useState([])
+
+  useEffect(() => {
+    if (!filteredData) return
+
+    setInitialActiveFilters(filters.map(filter => filter.active))
+  }, [])
+
+  const activeFilters = filters.map(filter => filter.active)
+  const initialFiltersActive = initialActiveFilters.every((filter, i) => activeFilters.includes(filter))
   const id = useId()
 
   const wrappingFilterRefs = useRef({})
@@ -378,7 +390,7 @@ const Filters = (props: FilterProps) => {
         id={`filter-${outerIndex}`}
         name={label}
         aria-label={`Filter by ${label}`}
-        className='cove-form-select'
+        className={`cove-form-select ${DROPDOWN_STYLES}`}
         data-index='0'
         value={active}
         onChange={e => {
@@ -547,7 +559,7 @@ const Filters = (props: FilterProps) => {
       {visualizationConfig.filterIntro && (
         <p className='filters-section__intro-text mb-3'>{visualizationConfig.filterIntro}</p>
       )}
-      <div className='d-flex flex-wrap w-100 mb-4 pb-2 filters-section__wrapper align-items-end'>
+      <div className='d-flex flex-wrap w-100 filters-section__wrapper align-items-end'>
         {' '}
         <>
           <Style />
@@ -558,13 +570,13 @@ const Filters = (props: FilterProps) => {
                   handleApplyButton(filters)
                 }}
                 disabled={!showApplyButton}
-                className={[general?.headerColor ? general.headerColor : theme, 'apply'].join(' ')}
+                className={[general?.headerColor ? general.headerColor : theme, 'apply', 'me-2'].join(' ')}
               >
                 {filterConstants.buttonText}
               </Button>
-              <a href='#!' role='button' onClick={handleReset}>
+              <Button secondary disabled={initialFiltersActive} onClick={handleReset}>
                 {filterConstants.resetText}
-              </a>
+              </Button>
             </div>
           ) : (
             <></>

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

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