@cdc/chart 4.24.9 → 4.24.11

package/src/components/DeviationBar.jsx

@@ -6,13 +6,30 @@ import { Text } from '@visx/text'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import useIntersectionObserver from '../hooks/useIntersectionObserver'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 export default function DeviationBar({ height, xScale }) {
-  const { transformedData: data, config, formatNumber, twoColorPalette, getTextWidth, updateConfig, parseDate, formatDate, currentViewport } = useContext(ConfigContext)
+  const {
+    transformedData: data,
+    config,
+    formatNumber,
+    twoColorPalette,
+    updateConfig,
+    parseDate,
+    formatDate,
+    currentViewport
+  } = useContext(ConfigContext)
   const { barStyle, tipRounding, roundingStyle, twoColor } = config
   const barRefs = useRef([])
   const [windowWidth, setWindowWidth] = useState(window.innerWidth)
-  const radius = roundingStyle === 'standard' ? '8px' : roundingStyle === 'shallow' ? '5px' : roundingStyle === 'finger' ? '15px' : '0px'
+  const radius =
+    roundingStyle === 'standard'
+      ? '8px'
+      : roundingStyle === 'shallow'
+      ? '5px'
+      : roundingStyle === 'finger'
+      ? '15px'
+      : '0px'
   const fontSize = { small: 16, medium: 18, large: 20 }
   const isRounded = config.barStyle === 'rounded'
   const target = Number(config.xAxis.target)
@@ -148,7 +165,10 @@ export default function DeviationBar({ height, xScale }) {
           config.heights.horizontal = totalheight
 
           // text,labels postiions
-          const textWidth = getTextWidth(formatNumber(barValue, 'left'), `normal ${fontSize[config.fontSize]}px sans-serif`)
+          const textWidth = getTextWidth(
+            formatNumber(barValue, 'left'),
+            `normal ${fontSize[config.fontSize]}px sans-serif`
+          )
           const textFits = textWidth < barWidth - 6
           const textX = barBaseX
           const textY = barY + barHeight / 2
@@ -167,7 +187,10 @@ export default function DeviationBar({ height, xScale }) {
           let textProps = getTextProps(config.isLollipopChart, textFits, lollipopShapeSize, fill)
           // tooltips
           const xAxisValue = formatNumber(barValue, 'left')
-          const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[index][config.runtime.originalXAxis.dataKey])) : data[index][config.runtime.originalXAxis.dataKey]
+          const yAxisValue =
+            config.runtime.yAxis.type === 'date'
+              ? formatDate(parseDate(data[index][config.runtime.originalXAxis.dataKey]))
+              : data[index][config.runtime.originalXAxis.dataKey]
           let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
           let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
           const tooltip = `<div>
@@ -190,7 +213,15 @@ export default function DeviationBar({ height, xScale }) {
                 data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                 tabIndex={-1}
               >
-                <div style={{ width: barWidth, height: barHeight, border: `${borderWidth}px solid #333`, backgroundColor: barColor[barPosition], ...borderRadius }}></div>
+                <div
+                  style={{
+                    width: barWidth,
+                    height: barHeight,
+                    border: `${borderWidth}px solid #333`,
+                    backgroundColor: barColor[barPosition],
+                    ...borderRadius
+                  }}
+                ></div>
               </foreignObject>
               {config.yAxis.displayNumbersOnBar && (
                 <Text verticalAnchor='middle' x={textX} y={textY} {...textProps[barPosition]}>
@@ -198,8 +229,25 @@ export default function DeviationBar({ height, xScale }) {
                 </Text>
               )}
 
-              {config.isLollipopChart && config.lollipopShape === 'circle' && <circle cx={circleX} cy={circleY} r={lollipopShapeSize / 2} fill={barColor[barPosition]} style={{ filter: 'unset', opacity: 1 }} />}
-              {config.isLollipopChart && config.lollipopShape === 'square' && <rect x={squareX} y={squareY} width={lollipopShapeSize} height={lollipopShapeSize} fill={barColor[barPosition]} style={{ opacity: 1, filter: 'unset' }}></rect>}
+              {config.isLollipopChart && config.lollipopShape === 'circle' && (
+                <circle
+                  cx={circleX}
+                  cy={circleY}
+                  r={lollipopShapeSize / 2}
+                  fill={barColor[barPosition]}
+                  style={{ filter: 'unset', opacity: 1 }}
+                />
+              )}
+              {config.isLollipopChart && config.lollipopShape === 'square' && (
+                <rect
+                  x={squareX}
+                  y={squareY}
+                  width={lollipopShapeSize}
+                  height={lollipopShapeSize}
+                  fill={barColor[barPosition]}
+                  style={{ opacity: 1, filter: 'unset' }}
+                ></rect>
+              )}
             </Group>
           )
         })}
@@ -209,7 +257,9 @@ export default function DeviationBar({ height, xScale }) {
           </Text>
         )}
 
-        {shouldShowTargetLine && <Line from={{ x: targetX, y: 0 }} to={{ x: targetX, y: height }} stroke='#333' strokeWidth={2} />}
+        {shouldShowTargetLine && (
+          <Line from={{ x: targetX, y: 0 }} to={{ x: targetX, y: height }} stroke='#333' strokeWidth={2} />
+        )}
       </Group>
       <foreignObject y={height / 2} ref={targetRef}></foreignObject>
     </ErrorBoundary>

package/src/components/EditorPanel/EditorPanel.tsx

@@ -43,6 +43,7 @@ import { Anchor } from '@cdc/core/types/Axis'
 import EditorPanelContext from './EditorPanelContext'
 import _ from 'lodash'
 import { adjustedSymbols as symbolCodes } from '@cdc/core/helpers/footnoteSymbols'
+import { updateFieldRankByValue } from './helpers/updateFieldRankByValue'
 
 interface PreliminaryProps {
   config: ChartConfig
@@ -76,7 +77,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
   const getStyleOptions = type => {
     const options = Object.keys(lineCodes)
     if (type === 'suppression') {
-      return options.slice(0, -1)
+      return options.slice(0, -2)
     } else {
       return options
     }
@@ -170,7 +171,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
                 <p> {type === 'suppression' ? 'Suppressed' : 'Effect'} Data</p>
                 <button
                   type='button'
-                  className='remove-column'
+                  className='btn btn-danger'
                   onClick={event => {
                     event.preventDefault()
                     removeColumn(i)
@@ -449,7 +450,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
           }
         )}
 
-      <button type='button' onClick={addColumn} className='btn full-width'>
+      <button type='button' onClick={addColumn} className='btn btn-primary full-width'>
         {config.visualizationType === 'Line'
           ? 'Add Special Line'
           : config.visualizationType === 'Bar'
@@ -529,7 +530,7 @@ const CategoricalAxis: React.FC<CategoricalAxisProps> = ({ config, updateConfig,
               <p>Axis Category {i + 1}</p>
               <button
                 type='button'
-                className='remove-column'
+                className='btn btn-danger'
                 onClick={event => {
                   event.preventDefault()
                   removeColumn(i)
@@ -582,7 +583,7 @@ const CategoricalAxis: React.FC<CategoricalAxisProps> = ({ config, updateConfig,
           )
         })}
 
-      <button type='button' onClick={addColumn} className='btn full-width'>
+      <button type='button' onClick={addColumn} className='btn btn-primary full-width'>
         Add Axis Category
       </button>
     </>
@@ -618,52 +619,35 @@ const EditorPanel = () => {
   const { leftMax, rightMax } = useMinMax(properties)
 
   const {
-    headerColors,
-    visSupportsTooltipLines,
-    visSupportsNonSequentialPallete,
-    visSupportsSequentialPallete,
-    visSupportsReverseColorPalette,
-    visHasLabelOnData,
-    visHasNumbersOnBars,
     visHasAnchors,
-    visHasBarBorders,
-    visHasDataCutoff,
-    visHasSelectableLegendValues,
-    visCanAnimate,
+    visHasBrushChart,
+    visHasCategoricalAxis,
     visHasLegend,
     visHasLegendAxisAlign,
     visHasLegendColorCategory,
-    visHasBrushChart,
+    visHasSelectableLegendValues,
     visSupportsDateCategoryAxis,
-    visSupportsValueAxisMin,
-    visSupportsValueAxisMax,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
+    visSupportsDateCategoryAxisMax,
+    visSupportsDateCategoryAxisMin,
+    visSupportsDateCategoryAxisPadding,
     visSupportsDateCategoryAxisTicks,
-    visSupportsDateCategoryTickRotation,
+    visSupportsDateCategoryHeight,
     visSupportsDateCategoryNumTicks,
-    visSupportsDateCategoryAxisPadding,
-    visSupportsRegions,
+    visSupportsDateCategoryTickRotation,
+    visSupportsDynamicSeries,
     visSupportsFilters,
-    visSupportsPreliminaryData,
-    visSupportsValueAxisGridLines,
-    visSupportsValueAxisLine,
-    visSupportsValueAxisTicks,
-    visSupportsValueAxisLabels,
-    visSupportsBarSpace,
-    visSupportsBarThickness,
-    visSupportsFootnotes,
-    visSupportsSuperTitle,
-    visSupportsDataCutoff,
-    visSupportsChartHeight,
     visSupportsLeftValueAxis,
-    visSupportsTooltipOpacity,
+    visSupportsPreliminaryData,
     visSupportsRankByValue,
     visSupportsResponsiveTicks,
-    visSupportsDateCategoryHeight,
-    visHasDataSuppression,
-    visHasCategoricalAxis,
-    visSupportsDynamicSeries
+    visSupportsValueAxisGridLines,
+    visSupportsValueAxisLabels,
+    visSupportsValueAxisLine,
+    visSupportsValueAxisMax,
+    visSupportsValueAxisMin,
+    visSupportsValueAxisTicks
   } = useEditorPermissions()
 
   // when the visualization type changes we
@@ -742,7 +726,7 @@ const EditorPanel = () => {
       updatedConfig.orientation = 'vertical'
     }
     if (isDateScale(updatedConfig.xAxis) && !updatedConfig.xAxis.padding) {
-      updatedConfig.xAxis.padding = 6
+      updatedConfig.xAxis.padding = 0
     }
     // DEV-8008 - Remove Bar styling when Line is converted to Bar
     if (updatedConfig.visualizationType === 'Line') {
@@ -762,21 +746,7 @@ const EditorPanel = () => {
         newValue
       ) // eslint-disable-line
 
-    if (section === 'boxplot' && subsection === 'legend') {
-      updateConfig({
-        ...config,
-        [section]: {
-          ...config[section],
-          [subsection]: {
-            ...config.boxplot[subsection],
-            [fieldName]: newValue
-          }
-        }
-      })
-      return
-    }
-
-    if (section === 'boxplot' && subsection === 'labels') {
+    if (section === 'boxplot' && (subsection === 'legend' || subsection === 'labels')) {
       updateConfig({
         ...config,
         [section]: {
@@ -846,19 +816,6 @@ const EditorPanel = () => {
     return null
   }
 
-  useEffect(() => {
-    if (!config.general?.boxplot) return
-    if (!config.general.boxplot.firstQuartilePercentage) {
-      updateConfig({
-        ...config,
-        boxplot: {
-          ...config.boxplot,
-          firstQuartilePercentage: 25
-        }
-      })
-    }
-  }, [config])
-
   const setLollipopShape = shape => {
     updateConfig({
       ...config,
@@ -890,13 +847,6 @@ const EditorPanel = () => {
     updateConfig({ ...config, series: newSeries }) // left axis series keys
   }
 
-  const sortSeries = e => {
-    const series = config.series[0].dataKey
-    const sorted = data.sort((a, b) => a[series] - b[series])
-    const newData = e === 'asc' ? sorted : sorted.reverse()
-    updateConfig({ ...config }, newData)
-  }
-
   const addNewExclusion = exclusionKey => {
     let newExclusion = [...config.exclusions.keys]
     newExclusion.push(exclusionKey)
@@ -1407,7 +1357,6 @@ const EditorPanel = () => {
     handleSeriesChange,
     handleAddNewHighlightedBar,
     setCategoryAxis,
-    sortSeries,
     updateField,
     warningMsg,
     highlightedBarValues,
@@ -1448,14 +1397,15 @@ const EditorPanel = () => {
                     </AccordionItemButton>
                   </AccordionItemHeading>
                   <AccordionItemPanel>
-                    {visSupportsDynamicSeries() && (
+                    {/* FEATURE to be reintroduced by DEV-9747 */}
+                    {/* {visSupportsDynamicSeries() && (
                       <CheckBox
                         value={config.dynamicSeries}
                         fieldName='dynamicSeries'
                         label='Dynamically generate series'
                         updateField={updateField}
                       />
-                    )}
+                    )} */}
                     {config.dynamicSeries && config.visualizationType === 'Line' && (
                       <Select
                         fieldName='dynamicSeriesType'
@@ -1571,10 +1521,14 @@ const EditorPanel = () => {
                         )}
                         {visSupportsRankByValue() && config.series && config.series.length === 1 && (
                           <Select
-                            fieldName='visualizationType'
+                            value={config.rankByValue}
+                            fieldName='rankByValue'
                             label='Rank by Value'
                             initial='Select'
-                            onChange={e => sortSeries(e.target.value)}
+                            updateField={(_section, _subsection, _fieldName, value) => {
+                              const [newConfig, newData] = updateFieldRankByValue(config, value, data)
+                              updateConfig(newConfig, newData)
+                            }}
                             options={['asc', 'desc']}
                           />
                         )}
@@ -1803,6 +1757,17 @@ const EditorPanel = () => {
                           updateField={updateField}
                         />
                       )}
+                      {visSupportsValueAxisGridLines() && (
+                        <CheckBox
+                          value={config.yAxis.labelsAboveGridlines}
+                          section='yAxis'
+                          fieldName='labelsAboveGridlines'
+                          label='Tick labels above gridlines'
+                          updateField={updateField}
+                          disabled={!config.yAxis.gridLines}
+                          title={!config.yAxis.gridLines ? 'Show gridlines to enable' : ''}
+                        />
+                      )}
                       <CheckBox
                         value={config.yAxis.enablePadding}
                         section='yAxis'
@@ -2007,6 +1972,14 @@ const EditorPanel = () => {
                   ) : (
                     config.visualizationType !== 'Pie' && (
                       <>
+                        <CheckBox
+                          display={!visHasCategoricalAxis()}
+                          value={config.dataFormat.onlyShowTopPrefixSuffix}
+                          section='dataFormat'
+                          fieldName='onlyShowTopPrefixSuffix'
+                          label='Only Show Top Prefix/Suffix'
+                          updateField={updateField}
+                        />
                         <CheckBox
                           display={!visHasCategoricalAxis()}
                           value={config.yAxis.hideAxis}
@@ -2164,7 +2137,7 @@ const EditorPanel = () => {
                       </Accordion>
 
                       <button
-                        className='btn full-width'
+                        className='btn btn-primary full-width'
                         onClick={e => {
                           e.preventDefault()
                           const anchors = [...config.yAxis.anchors]
@@ -2290,7 +2263,7 @@ const EditorPanel = () => {
                       </Accordion>
 
                       <button
-                        className='btn full-width'
+                        className='btn btn-primary full-width'
                         onClick={e => {
                           e.preventDefault()
                           const anchors = [...config.xAxis.anchors]
@@ -2515,7 +2488,6 @@ const EditorPanel = () => {
                               )}
                             </select>
                           </label>
-
                           <CheckBox
                             value={config.xAxis.manual}
                             section='xAxis'
@@ -2523,6 +2495,14 @@ const EditorPanel = () => {
                             label='Manual Ticks'
                             updateField={updateField}
                           />
+                          <CheckBox
+                            display={config.xAxis.type !== 'categorical'}
+                            value={config.xAxis.sortByRecentDate}
+                            section='xAxis'
+                            fieldName='sortByRecentDate'
+                            label='Show dates newest to oldest'
+                            updateField={updateField}
+                          />
 
                           {visSupportsDateCategoryAxisPadding() && (
                             <TextField
@@ -2681,11 +2661,7 @@ const EditorPanel = () => {
                         <>
                           <p style={{ padding: '1.5em 0 0.5em', fontSize: '.9rem', lineHeight: '1rem' }}>
                             Format how charts should parse and display your dates using{' '}
-                            <a
-                              href='https://github.com/d3/d3-time-format#locale_format'
-                              target='_blank'
-                              rel='noreferrer'
-                            >
+                            <a href='https://d3js.org/d3-time-format#locale_format' target='_blank' rel='noreferrer'>
                               these guidelines
                             </a>
                             .
@@ -2816,6 +2792,29 @@ const EditorPanel = () => {
                         }
                         updateField={updateField}
                       />
+                      <CheckBox
+                        value={config.xAxis.showYearsOnce}
+                        section='xAxis'
+                        fieldName='showYearsOnce'
+                        label='Show years once'
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon
+                                display='question'
+                                style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                              />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>
+                                When this option is checked and the date format for the axis includes years, each year
+                                will only be shown once in the axis.
+                              </p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                        updateField={updateField}
+                      />
                       {visHasBrushChart() && (
                         <CheckBox
                           value={config.brush?.active}
@@ -3040,15 +3039,17 @@ const EditorPanel = () => {
                           updateField={updateField}
                         />
                       )}
-                      <TextField
-                        value={config.xAxis.labelOffset}
-                        section='xAxis'
-                        fieldName='labelOffset'
-                        label='Label offset'
-                        type='number'
-                        className='number-narrow'
-                        updateField={updateField}
-                      />
+                      {config.orientation === 'horizontal' && (
+                        <TextField
+                          value={config.xAxis.labelOffset}
+                          section='xAxis'
+                          fieldName='labelOffset'
+                          label='Label offset'
+                          type='number'
+                          className='number-narrow'
+                          updateField={updateField}
+                        />
+                      )}
 
                       {/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
                       {/* <TextField value={config.xAxis.axisPadding} type='number' max={10} min={0} section='xAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}
@@ -3187,7 +3188,7 @@ const EditorPanel = () => {
                             highlightedBarValues.map((highlightedBarValue, i) => (
                               <fieldset>
                                 <div className='edit-block' key={`highlighted-bar-${i}`}>
-                                  <button className='remove-column' onClick={e => handleRemoveHighlightedBar(e, i)}>
+                                  <button className='btn btn-danger' onClick={e => handleRemoveHighlightedBar(e, i)}>
                                     Remove
                                   </button>
                                   <p>Highlighted Bar {i + 1}</p>
@@ -3245,7 +3246,7 @@ const EditorPanel = () => {
                                 </div>
                               </fieldset>
                             ))}
-                          <button className='btn full-width' onClick={e => handleAddNewHighlightedBar(e)}>
+                          <button className='btn btn-primary full-width' onClick={e => handleAddNewHighlightedBar(e)}>
                             Add Highlighted Bar
                           </button>
                         </>
@@ -3305,6 +3306,30 @@ const EditorPanel = () => {
                     </>
                   )}
 
+                  {visSupportsDateCategoryAxisMin() && (
+                    <TextField
+                      value={config.xAxis.min}
+                      section='xAxis'
+                      fieldName='min'
+                      type='number'
+                      label='min value'
+                      placeholder='Auto'
+                      updateField={updateField}
+                    />
+                  )}
+
+                  {visSupportsDateCategoryAxisMax() && (
+                    <TextField
+                      value={config.xAxis.max}
+                      section='xAxis'
+                      fieldName='max'
+                      type='number'
+                      label='max value'
+                      placeholder='Auto'
+                      updateField={updateField}
+                    />
+                  )}
+
                   {/* anchors */}
                   {visHasAnchors() && config.orientation !== 'horizontal' && (
                     <div className='edit-block'>
@@ -3413,7 +3438,7 @@ const EditorPanel = () => {
                       </Accordion>
 
                       <button
-                        className='btn full-width'
+                        className='btn btn-primary full-width'
                         onClick={e => {
                           e.preventDefault()
                           const anchors = [...config.xAxis.anchors]
@@ -3542,7 +3567,7 @@ const EditorPanel = () => {
                       </Accordion>
 
                       <button
-                        className='btn full-width'
+                        className='btn btn-primary full-width'
                         onClick={e => {
                           e.preventDefault()
                           const anchors = [...config.yAxis.anchors]
@@ -3789,7 +3814,7 @@ const EditorPanel = () => {
                         config.legend.seriesHighlight.map((val, i) => (
                           <fieldset className='edit-block' key={`${val}-${i}`}>
                             <button
-                              className='remove-column'
+                              className='btn btn-danger'
                               onClick={event => {
                                 event.preventDefault()
                                 const updatedSeriesHighlight = [...config.legend.seriesHighlight]
@@ -3818,7 +3843,7 @@ const EditorPanel = () => {
                           </fieldset>
                         ))}
                       <button
-                        className={'btn full-width'}
+                        className={'btn btn-primary full-width'}
                         onClick={event => {
                           event.preventDefault()
                           const legendColumns = getLegendColumns()

package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx

@@ -12,31 +12,11 @@ import { type PanelProps } from './../PanelProps'
 import './../panels.scss'
 
 const PanelAnnotate: React.FC<PanelProps> = props => {
-  const { updateConfig, config, unfilteredData, dimensions, isDraggingAnnotation } = useContext(ConfigContext)
-
-  const getColumns = (filter = true) => {
-    const columns = {}
-    unfilteredData.forEach(row => {
-      Object.keys(row).forEach(columnName => (columns[columnName] = true))
-    })
-
-    if (filter) {
-      Object.keys(columns).forEach(key => {
-        if (
-          (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
-          (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))
-        ) {
-          delete columns[key]
-        }
-      })
-    }
-
-    return Object.keys(columns)
-  }
+  const { updateConfig, config, svgRef } = useContext(ConfigContext)
 
   const handleAnnotationUpdate = (value, property, index) => {
-    const svgContainer = document.querySelector('.chart-container > div > svg')?.getBoundingClientRect()
-    const newSvgDims = [svgContainer.width, svgContainer.height]
+    const svgContainer = document.querySelector('.chart-container  > svg')?.getBoundingClientRect()
+    const newSvgDims = [svgContainer?.width, svgContainer?.height]
     const annotations = [...config?.annotations]
     annotations[index][property] = value
     annotations[index].savedDimensions = newSvgDims
@@ -48,8 +28,11 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
   }
 
   const handleAddAnnotation = () => {
-    const svgContainer = document.querySelector('.chart-container svg')?.getBoundingClientRect()
-    const newSvgDims = [svgContainer.width, svgContainer.height]
+    // check if svg is animated svg or standard svg
+    const newSvgDims = [
+      svgRef?.current?.width?.baseVal?.value || svgRef?.current?.width,
+      svgRef?.current?.height?.baseVal?.value || svgRef?.current?.height
+    ]
 
     const newAnnotation = {
       text: 'New Annotation',
@@ -300,7 +283,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     </select>
                   </label>
 
-                  <Button className='warn btn-warn btn btn-remove delete' onClick={() => handleRemoveAnnotation(index)}>
+                  <Button className='btn btn-danger full-width' onClick={() => handleRemoveAnnotation(index)}>
                     Delete Annotation
                   </Button>
                 </div>
@@ -308,9 +291,9 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
             </Accordion>
           ))}
         {config?.annotations?.length < 3 && (
-          <Button onClick={handleAddAnnotation} className='mt-2'>
+          <button onClick={handleAddAnnotation} className='btn btn-primary mt-2 full-width'>
             Add Annotation
-          </Button>
+          </button>
         )}
       </Accordion.Section>
     </Accordion>