@cdc/map 4.24.10 → 4.24.11

package/src/_stories/_mock/wastewater-map.json

@@ -0,0 +1,208 @@
+{
+	"annotations": [],
+	"general": {
+		"geoBorderColor": "darkGray",
+		"headerColor": "theme-blue",
+		"title": "",
+		"showTitle": true,
+		"showSidebar": true,
+		"showDownloadButton": true,
+		"showDownloadMediaButton": false,
+		"displayAsHex": false,
+		"displayStateLabels": false,
+		"territoriesLabel": "Territories",
+		"territoriesAlwaysShow": false,
+		"language": "en",
+		"geoType": "us",
+		"geoLabelOverride": "State/Territory",
+		"hasRegions": false,
+		"fullBorder": false,
+		"type": "map",
+		"convertFipsCodes": true,
+		"palette": { "isReversed": false },
+		"allowMapZoom": true,
+		"hideGeoColumnInTooltip": false,
+		"hidePrimaryColumnInTooltip": false,
+		"statePicked": { "fipsCode": "01", "stateName": "Alabama" },
+		"expandDataTable": false,
+		"annotationDropdownText": "Annotations",
+		"noStateFoundMessage": "Map Unavailable",
+		"subtext": "<div class=\"text-left\">Data last updated on <span data-timestamp=\"nwss_rsv_sc2_flua_combined_state_map:Data_as_of\"></span> and presented through <span data-timestamp=\"nwss_rsv_sc2_flua_combined_state_map:Data_Presented_Through\"></span>. "
+	},
+	"type": "map",
+	"color": "greenbluereverse",
+	"columns": {
+		"geo": {
+			"name": "State",
+			"label": "Location",
+			"tooltip": false,
+			"dataTable": true
+		},
+		"primary": {
+			"dataTable": true,
+			"tooltip": true,
+			"prefix": "",
+			"suffix": "",
+			"name": "activity_level_label",
+			"label": "Viral Activity Level",
+			"roundToPlace": 0
+		},
+		"navigate": { "name": "" },
+		"latitude": { "name": "" },
+		"longitude": { "name": "" },
+		"additionalColumn1": {
+			"label": "Sites Currently Reporting",
+			"dataTable": true,
+			"tooltips": false,
+			"prefix": "",
+			"suffix": "",
+			"name": "num_sites",
+			"tooltip": true
+		},
+		"additionalColumn2": {
+			"label": "Limited Coverage",
+			"dataTable": true,
+			"tooltips": false,
+			"prefix": "",
+			"suffix": "",
+			"tooltip": false,
+			"name": "hatch"
+		},
+		"additionalColumn3": {
+			"label": "",
+			"dataTable": false,
+			"tooltips": false,
+			"prefix": "",
+			"suffix": "",
+			"tooltip": true,
+			"useCommas": true,
+			"name": "hatch"
+		}
+	},
+	"legend": {
+		"descriptions": {},
+		"specialClasses": [],
+		"unified": false,
+		"singleColumn": false,
+		"singleRow": true,
+		"verticalSorted": false,
+		"showSpecialClassesLast": true,
+		"dynamicDescription": false,
+		"type": "category",
+		"numberOfItems": 8,
+		"position": "bottom",
+		"title": "Wastewater Viral Activity Level",
+		"categoryValuesOrder": [
+			"Very High",
+			"High",
+			"Moderate",
+			"Low",
+			"Minimal",
+			"No Data"
+		],
+		"additionalCategories": [
+			"No Data",
+			"Minimal",
+			"Low",
+			"Moderate",
+			"High",
+			"Very High"
+		],
+		"description": "",
+		"style": "gradient",
+		"subStyle": "linear blocks",
+		"tickRotation": "",
+		"singleColumnLegend": false,
+		"hideBorder": false
+	},
+	"filters": [
+		{
+			"order": "asc",
+			"label": "Select a virus from the dropdown:",
+			"columnName": "pathogen",
+			"values": ["COVID-19", "Influenza A", "RSV"],
+			"active": "COVID-19",
+			"filterStyle": "dropdown"
+		}
+	],
+	"table": {
+		"label": "Data Table",
+		"expanded": false,
+		"limitHeight": true,
+		"height": "500",
+		"caption": "",
+		"showDownloadUrl": true,
+		"showDataTableLink": true,
+		"showFullGeoNameInCSV": false,
+		"forceDisplay": true,
+		"download": true,
+		"indexLabel": "State/Territory",
+		"wrapColumns": false
+	},
+	"tooltips": {
+		"appearanceType": "hover",
+		"linkLabel": "Learn More",
+		"capitalizeLabels": true,
+		"opacity": 90
+	},
+	"visual": {
+		"minBubbleSize": 1,
+		"maxBubbleSize": 20,
+		"extraBubbleBorder": false,
+		"cityStyle": "circle",
+		"geoCodeCircleSize": 2,
+		"showBubbleZeros": false,
+		"cityStyleLabel": "",
+		"additionalCityStyles": []
+	},
+	"mapPosition": { "coordinates": [0, 30], "zoom": 1 },
+	"map": {
+		"layers": [],
+		"patterns": [
+			{
+				"dataKey": "hatch",
+				"pattern": "lines",
+				"dataValue": "Limited Coverage",
+				"label": "Limited Coverage*",
+				"size": "medium"
+			}
+		]
+	},
+	"hexMap": {
+		"type": "",
+		"shapeGroups": [
+			{
+				"legendTitle": "",
+				"legendDescription": "",
+				"items": [
+					{
+						"key": "",
+						"shape": "Arrow Up",
+						"column": "",
+						"operator": "=",
+						"value": ""
+					}
+				]
+			}
+		]
+	},
+	"filterBehavior": "Filter Change",
+	"customColors": [
+		"#34547B",
+		"#4B7F9B",
+		"#4B7F9B",
+		"#6BB0BD",
+		"#9FDAD0",
+		"#C8EFDA",
+		"#B4B4B4",
+		"#B4B4B4",
+		"#B4B4B4",
+		"#B4B4B4"
+	],
+	"datasets": {},
+	"dataFileName": "https://www.cdc.gov/wcms/vizdata/ncezid_didri/NWSSStateMapCombined.json",
+	"dataFileSourceType": "url",
+	"dataDescription": { "horizontal": false, "series": false },
+	"version": "4.24.9",
+	"dataUrl": "https://www.cdc.gov/wcms/vizdata/ncezid_didri/NWSSStateMapCombined.json"
+}

package/src/components/EditorPanel/components/EditorPanel.tsx

@@ -109,12 +109,18 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   } = useMapLayers(state, setState, false, tooltipId)
 
   const categoryMove = (idx1, idx2) => {
-    let categoryValuesOrder = [...state.legend.categoryValuesOrder]
+    let categoryValuesOrder = getCategoryValuesOrder()
 
     let [movedItem] = categoryValuesOrder.splice(idx1, 1)
 
     categoryValuesOrder.splice(idx2, 0, movedItem)
 
+    state.legend.categoryValuesOrder?.forEach(value => {
+      if(categoryValuesOrder.indexOf(value) === -1){
+        categoryValuesOrder.push(value)
+      }
+    })
+
     setState({
       ...state,
       legend: {
@@ -1219,40 +1225,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     columnsRequiredChecker()
   }, [state]) // eslint-disable-line
 
-  useEffect(() => {
-    //If a categorical map is used and the order is either not defined or incorrect, fix it
-    if ('category' === state.legend.type && runtimeLegend && runtimeLegend.runtimeDataHash) {
-      let valid = true
-      if (state.legend.categoryValuesOrder) {
-        runtimeLegend.forEach(item => {
-          if (!item.special && state.legend.categoryValuesOrder.indexOf(item.value) === -1) {
-            valid = false
-          }
-        })
-        let runtimeLegendKeys = runtimeLegend.map(item => item.value)
-        state.legend.categoryValuesOrder.forEach(category => {
-          if (runtimeLegendKeys.indexOf(category) === -1) {
-            valid = false
-          }
-        })
-      } else {
-        valid = false
-      }
-
-      if (!valid) {
-        let arr = runtimeLegend.filter(item => !item.special).map(({ value }) => value)
-
-        setState({
-          ...state,
-          legend: {
-            ...state.legend,
-            categoryValuesOrder: arr
-          }
-        })
-      }
-    }
-  }, [runtimeLegend]) // eslint-disable-line
-
   const columnsOptions = [
     <option value='' key={'Select Option'}>
       - Select Option -
@@ -1530,9 +1502,26 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
     ...draggableStyle
   })
 
+  const getCategoryValuesOrder = () => {
+    let values = runtimeLegend ? runtimeLegend.filter(item => !item.special).map(runtimeLegendItem => runtimeLegendItem.value) : []
+
+    if(state.legend.cateogryValuesOrder){
+      return values.sort((a, b) => {
+        let aVal = state.legend.cateogryValuesOrder.indexOf(a)
+        let bVal = state.legend.cateogryValuesOrder.indexOf(b)
+        if (aVal === bVal) return 0
+        if (aVal === -1) return 1
+        if (bVal === -1) return -1
+        return aVal - bVal
+      })
+    } else {
+      return values
+    }
+    
+  }
+
   const CategoryList = () => {
-    return state.legend.categoryValuesOrder ? (
-      state.legend.categoryValuesOrder.map((value, index) => (
+    return getCategoryValuesOrder().filter(item => !item.special).map((value, index) => (
         <Draggable key={value} draggableId={`item-${value}`} index={index}>
           {(provided, snapshot) => (
             <li style={{ position: 'relative' }}>
@@ -1548,10 +1537,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
             </li>
           )}
         </Draggable>
-      ))
-    ) : (
-      <></>
-    )
+    ))
   }
 
   const isLoadedFromUrl = state?.dataKey?.includes('http://') || state?.dataKey?.includes('https://')
@@ -2266,7 +2252,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </div>
                   ))}
                   <button
-                    className='btn full-width'
+                    className='btn btn-primary full-width'
                     onClick={e => {
                       e.preventDefault()
                       editColumn('primary', 'specialClassAdd', {})
@@ -2417,7 +2403,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     </fieldset>
                   ))}
                   <button
-                    className={'btn full-width'}
+                    className={'btn btn-primary full-width'}
                     onClick={event => {
                       event.preventDefault()
                       addAdditionalColumn(additionalColumns.length + 1)
@@ -2473,7 +2459,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </fieldset>
                     ))}
                   <button
-                    className={'btn full-width'}
+                    className={'btn btn-primary full-width'}
                     onClick={event => {
                       event.preventDefault()
                       const updatedAdditionaCategories = [...(state.legend.additionalCategories || [])]
@@ -2784,7 +2770,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                         )}
                       </Droppable>
                     </DragDropContext>
-                    {state.legend.categoryValuesOrder && state.legend.categoryValuesOrder.length >= 10 && (
+                    {runtimeLegend && runtimeLegend.length >= 10 && (
                       <section className='error-box my-2'>
                         <div>
                           <strong className='pt-1'>Warning</strong>
@@ -2911,7 +2897,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   <p style={{ textAlign: 'center' }}>There are currently no filters.</p>
                 )}
                 <button
-                  className={'btn full-width'}
+                  className={'btn btn-primary full-width'}
                   onClick={event => {
                     event.preventDefault()
                     changeFilter(null, 'addNew')
@@ -3527,7 +3513,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     )
                   })}
 
-                <button type='button' onClick={() => editCityStyles('add', 0, '', '')} className='btn full-width'>
+                <button
+                  type='button'
+                  onClick={() => editCityStyles('add', 0, '', '')}
+                  className='btn btn-primary full-width'
+                >
                   Add city style
                 </button>
               </>
@@ -3629,7 +3619,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   </>
                 )
               })}
-              <button className={'btn full-width'} onClick={handleAddLayer}>
+              <button className={'btn btn-primary full-width'} onClick={handleAddLayer}>
                 Add Map Layer
               </button>
               <p className='layer-purpose-details'>

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

@@ -11,7 +11,12 @@ import ConfigContext from '../../../../context'
 // styles
 
 const PanelAnnotate: React.FC = props => {
-  const { state: config, setState: updateConfig, dimensions, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
+  const {
+    state: config,
+    setState: updateConfig,
+    dimensions,
+    isDraggingAnnotation
+  } = useContext<MapContext>(ConfigContext)
   const getColumns = (filter = true) => {
     const columns = {}
     config.data.forEach(row => {
@@ -20,7 +25,10 @@ const PanelAnnotate: React.FC = props => {
 
     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))) {
+        if (
+          (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
+          (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))
+        ) {
           delete columns[key]
         }
       })
@@ -41,7 +49,9 @@ const PanelAnnotate: React.FC = props => {
   }
 
   const handleAddAnnotation = () => {
-    const svgContainer = document.querySelector('.map-container > section > svg, .map-container > section > canvas')?.getBoundingClientRect()
+    const svgContainer = document
+      .querySelector('.map-container > section > svg, .map-container > section > canvas')
+      ?.getBoundingClientRect()
     const newSvgDims = [svgContainer.width, svgContainer.height]
 
     const newAnnotation = {
@@ -139,11 +149,17 @@ const PanelAnnotate: React.FC = props => {
         {config?.annotations &&
           config?.annotations.map((annotation, index) => (
             <Accordion>
-              <Accordion.Section title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}>
+              <Accordion.Section
+                title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}
+              >
                 <div className='annotation-group'>
                   <label>
                     Annotation Text:
-                    <textarea rows={5} value={annotation.text} onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)} />
+                    <textarea
+                      rows={5}
+                      value={annotation.text}
+                      onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)}
+                    />
                   </label>
                   {/* <label>
                       Vertical Anchor
@@ -304,30 +320,18 @@ const PanelAnnotate: React.FC = props => {
                     </select>
                   </label>
 
-                  {/* <label>
-                    Snap to Nearest Point
-                    <input
-                      type='checkbox'
-                      checked={config?.annotations[index]?.snapToNearestPoint}
-                      onClick={e => {
-                        const updatedAnnotations = [...config?.annotations]
-                        updatedAnnotations[index].snapToNearestPoint = e.target.checked
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    />
-                  </label> */}
-
-                  <Button className='warn btn-warn btn btn-remove delete' onClick={() => handleRemoveAnnotation(index)}>
+                  <Button className='btn btn-danger' onClick={() => handleRemoveAnnotation(index)}>
                     Delete Annotation
                   </Button>
                 </div>
               </Accordion.Section>
             </Accordion>
           ))}
-        {config?.annotations?.length < 3 && <Button onClick={handleAddAnnotation}>Add Annotation</Button>}
+        {config?.annotations?.length < 3 && (
+          <button className='btn btn-primary full-width' onClick={handleAddAnnotation}>
+            Add Annotation
+          </button>
+        )}
       </Accordion.Section>
     </Accordion>
   )

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

@@ -1,5 +1,11 @@
 import { useContext } from 'react'
-import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import ConfigContext from '../../../../context'
 import { type MapContext } from '../../../../types/MapContext'
 import Button from '@cdc/core/components/elements/Button'
@@ -41,7 +47,11 @@ const PatternSettings = ({ name }: PanelProps) => {
   }
 
   /** Updates the map pattern at a given index */
-  const handleUpdateGeoPattern = (value: string, index: number, keyToUpdate: 'dataKey' | 'pattern' | 'dataValue' | 'size' | 'label' | 'color') => {
+  const handleUpdateGeoPattern = (
+    value: string,
+    index: number,
+    keyToUpdate: 'dataKey' | 'pattern' | 'dataValue' | 'size' | 'label' | 'color'
+  ) => {
     const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
     const updatedPatterns = [...state.map.patterns]
 
@@ -68,7 +78,9 @@ const PatternSettings = ({ name }: PanelProps) => {
 
         // Log a warning if the contrast check fails
         if (!contrastCheck) {
-          console.warn(`COVE: pattern contrast check failed on ${geoData?.[state.columns.geo.name]} for ${patternData.dataKey} with:
+          console.warn(`COVE: pattern contrast check failed on ${geoData?.[state.columns.geo.name]} for ${
+            patternData.dataKey
+          } with:
             pattern color: ${patternColor}
             contrast: ${getColorContrast(currentFill, patternColor)}
           `)
@@ -78,7 +90,9 @@ const PatternSettings = ({ name }: PanelProps) => {
       })
     })
 
-    const editorErrorMessage = updatedPatterns.some(pattern => pattern.contrastCheck === false) ? 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.' : ''
+    const editorErrorMessage = updatedPatterns.some(pattern => pattern.contrastCheck === false)
+      ? 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.'
+      : ''
 
     // Update the state with the new patterns and error message
     setState(prevState => ({
@@ -116,7 +130,12 @@ const PatternSettings = ({ name }: PanelProps) => {
         <AccordionItemButton>{name}</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
-        {patterns.length > 0 && <Alert type={checkPatternContrasts() ? 'success' : 'danger'} message='Pattern colors must comply with <br /> <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 3:1 contrast ratio.' />}
+        {patterns.length > 0 && (
+          <Alert
+            type={checkPatternContrasts() ? 'success' : 'danger'}
+            message='Pattern colors must comply with <br /> <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 3:1 contrast ratio.'
+          />
+        )}
         <br />
 
         {patterns &&
@@ -133,13 +152,26 @@ const PatternSettings = ({ name }: PanelProps) => {
               <Accordion allowZeroExpanded key={`accordion-pattern--${patternIndex}`}>
                 <AccordionItem>
                   <AccordionItemHeading>
-                    <AccordionItemButton>{pattern.dataKey ? `${pattern.dataKey}: ${pattern.dataValue ?? 'No Value'}` : 'Select Column'}</AccordionItemButton>
+                    <AccordionItemButton>
+                      {pattern.dataKey ? `${pattern.dataKey}: ${pattern.dataValue ?? 'No Value'}` : 'Select Column'}
+                    </AccordionItemButton>
                   </AccordionItemHeading>
                   <AccordionItemPanel>
                     <>
-                      {pattern.contrastCheck ?? true ? <Alert type='success' message='This pattern passes contrast checks' /> : <Alert type='danger' message='Error: <a href="https://webaim.org/resources/contrastchecker/" target="_blank"> Review Color Contrast</a>' />}{' '}
+                      {pattern.contrastCheck ?? true ? (
+                        <Alert type='success' message='This pattern passes contrast checks' />
+                      ) : (
+                        <Alert
+                          type='danger'
+                          message='Error: <a href="https://webaim.org/resources/contrastchecker/" target="_blank"> Review Color Contrast</a>'
+                        />
+                      )}{' '}
                       <label htmlFor={`pattern-dataKey--${patternIndex}`}>Data Key:</label>
-                      <select id={`pattern-dataKey--${patternIndex}`} value={pattern.dataKey !== '' ? pattern.dataKey : 'Select'} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataKey')}>
+                      <select
+                        id={`pattern-dataKey--${patternIndex}`}
+                        value={pattern.dataKey !== '' ? pattern.dataKey : 'Select'}
+                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataKey')}
+                      >
                         {/* TODO: sort these? */}
                         {dataKeyOptions.map((d, index) => {
                           return (
@@ -151,14 +183,28 @@ const PatternSettings = ({ name }: PanelProps) => {
                       </select>
                       <label htmlFor={`pattern-dataValue--${patternIndex}`}>
                         Data Value:
-                        <input type='text' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataValue')} id={`pattern-dataValue--${patternIndex}`} value={pattern.dataValue === '' ? '' : pattern.dataValue} />
+                        <input
+                          type='text'
+                          onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataValue')}
+                          id={`pattern-dataValue--${patternIndex}`}
+                          value={pattern.dataValue === '' ? '' : pattern.dataValue}
+                        />
                       </label>
                       <label htmlFor={`pattern-label--${patternIndex}`}>
                         Label (optional):
-                        <input type='text' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'label')} id={`pattern-dataValue--${patternIndex}`} value={pattern.label === '' ? '' : pattern.label} />
+                        <input
+                          type='text'
+                          onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'label')}
+                          id={`pattern-dataValue--${patternIndex}`}
+                          value={pattern.label === '' ? '' : pattern.label}
+                        />
                       </label>
                       <label htmlFor={`pattern-type--${patternIndex}`}>Pattern Type:</label>
-                      <select id={`pattern-type--${patternIndex}`} value={pattern?.pattern} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'pattern')}>
+                      <select
+                        id={`pattern-type--${patternIndex}`}
+                        value={pattern?.pattern}
+                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'pattern')}
+                      >
                         {patternTypes.map((patternName, index) => (
                           <option value={patternName} key={index}>
                             {patternName}
@@ -166,7 +212,11 @@ const PatternSettings = ({ name }: PanelProps) => {
                         ))}
                       </select>
                       <label htmlFor={`pattern-size--${patternIndex}`}>Pattern Size:</label>
-                      <select id={`pattern-size--${patternIndex}`} value={pattern?.size} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'size')}>
+                      <select
+                        id={`pattern-size--${patternIndex}`}
+                        value={pattern?.size}
+                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'size')}
+                      >
                         {['small', 'medium', 'large'].map((size, index) => (
                           <option value={size} key={index}>
                             {size}
@@ -178,16 +228,25 @@ const PatternSettings = ({ name }: PanelProps) => {
                           Pattern Color
                           <Tooltip style={{ textTransform: 'none' }}>
                             <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                              <Icon
+                                display='question'
+                                style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                              />
                             </Tooltip.Target>
                             <Tooltip.Content>
                               <p>{`If this setting is used, it is the reponsibility of the visualization author to verify the visualization colors meet WCAG 3:1 contrast ratios.`}</p>
                             </Tooltip.Content>
                           </Tooltip>
-                          <input type='text' value={pattern.color || ''} id='patternColor' name='patternColor' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'color')} />
+                          <input
+                            type='text'
+                            value={pattern.color || ''}
+                            id='patternColor'
+                            name='patternColor'
+                            onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'color')}
+                          />
                         </label>
                       </div>
-                      <Button onClick={e => handleRemovePattern(patternIndex)} className='btn btn--remove warn'>
+                      <Button onClick={e => handleRemovePattern(patternIndex)} className='btn btn-danger'>
                         Remove Pattern
                       </Button>
                     </>
@@ -196,7 +255,7 @@ const PatternSettings = ({ name }: PanelProps) => {
               </Accordion>
             )
           })}
-        <button className='btn full-width' onClick={handleAddGeoPattern}>
+        <button className='btn btn-primary full-width' onClick={handleAddGeoPattern}>
           Add Geo Pattern
         </button>
       </AccordionItemPanel>