@cdc/map 4.24.12-2 → 4.25.1

package/src/components/Annotation/Annotation.Draggable.tsx

@@ -1,15 +1,9 @@
-import { useContext, useState, useEffect, useRef } from 'react'
-
-// helpers
-import { applyBandScaleOffset, handleConnectionHorizontalType, handleConnectionVerticalType, createPoints } from '@cdc/chart/src/components/Annotations/components/helpers'
+import { useContext, useState, useRef } from 'react'
 
 // visx
-import { HtmlLabel, CircleSubject, LineSubject, EditableAnnotation, Connector, Annotation as VisxAnnotation } from '@visx/annotation'
+import { HtmlLabel, CircleSubject, EditableAnnotation, Connector, Annotation as VisxAnnotation } from '@visx/annotation'
 import { Drag, raise } from '@visx/drag'
 import { MarkerArrow } from '@visx/marker'
-import { LinePath } from '@visx/shape'
-import * as allCurves from '@visx/curve'
-import { Annotation } from '@cdc/core/types/Annotation'
 
 // styles
 import './Annotation.Draggable.styles.css'
@@ -18,41 +12,18 @@ import { MapContext } from '../../types/MapContext'
 
 const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
   const [draggingItems, setDraggingItems] = useState([])
-  const { state: config, dimensions, setState: updateConfig, isEditor, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
+  const {
+    state: config,
+    setState: updateConfig,
+    isDraggingAnnotation,
+    isEditor,
+    dimensions
+  } = useContext<MapContext>(ConfigContext)
   const [width, height] = dimensions
   const { annotations } = config
-  // const { colorScale } = useColorScale()
   const prevDimensions = useRef(dimensions)
   const AnnotationComponent = isEditor ? EditableAnnotation : VisxAnnotation
 
-  const handleMobileXPosition = annotation => {
-    if (annotation.snapToNearestPoint) {
-      return Number(annotation.dx) + xScale(annotation.xKey) + (config.xAxis.type !== 'date-time' ? xScale.bandwidth() / 2 : 0) + Number(config.yAxis.size)
-    }
-    return Number(annotation.x) + Number(annotation.dx)
-  }
-
-  const handleMobileYPosition = annotation => {
-    if (annotation.snapToNearestPoint) {
-      return yScale(annotation.yKey) + Number(annotation.dy)
-    }
-    return Number(annotation.dy) + Number(annotation.y)
-  }
-
-  const handleTextX = annotation => {
-    if (annotation.snapToNearestPoint) {
-      return Number(annotation.dx) + Number(xScale(annotation.xKey)) + (config.xAxis.type !== 'date-time' ? xScale.bandwidth() / 2 : 0) + Number(config.yAxis.size) - 16 / 3
-    }
-    return Number(annotation.dx) + Number(annotation.x) - 16 / 3
-  }
-
-  const handleTextY = annotation => {
-    if (annotation.snapToNearestPoint) {
-      return yScale(annotation.yKey) + Number(annotation.dy) + 5
-    }
-    return Number(annotation.y) + Number(annotation.dy) + 16 / 3
-  }
-
   return (
     annotations &&
     annotations.map((annotation, index) => {
@@ -118,7 +89,9 @@ const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
                         style={{
                           padding: '10px',
                           borderRadius: 5, // Optional: set border radius
-                          backgroundColor: `rgba(255, 255, 255, ${annotation?.opacity ? Number(annotation?.opacity) / 100 : 1})`
+                          backgroundColor: `rgba(255, 255, 255, ${
+                            annotation?.opacity ? Number(annotation?.opacity) / 100 : 1
+                          })`
                         }}
                         role='presentation'
                         // ! IMPORTANT: Workaround for 508
@@ -131,13 +104,31 @@ const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
                       />
                     </HtmlLabel>
 
-                    {annotation.connectionType === 'line' && <Connector type='line' pathProps={{ markerStart: 'url(#marker-start)' }} />}
+                    {annotation.connectionType === 'line' && (
+                      <Connector type='line' pathProps={{ markerStart: 'url(#marker-start)' }} />
+                    )}
 
-                    {annotation.connectionType === 'elbow' && <Connector type='elbow' pathProps={{ markerStart: 'url(#marker-start)' }} />}
+                    {annotation.connectionType === 'elbow' && (
+                      <Connector type='elbow' pathProps={{ markerStart: 'url(#marker-start)' }} />
+                    )}
 
                     {/* MARKERS */}
-                    {annotation.marker === 'circle' && <CircleSubject className='circle-subject' stroke={'black'} radius={8} />}
-                    {annotation.marker === 'arrow' && <MarkerArrow fill='black' id='marker-start' x={annotation.x} y={annotation.dy} stroke='#333' markerWidth={10} size={10} strokeWidth={1} orient='auto-start-reverse' />}
+                    {annotation.marker === 'circle' && (
+                      <CircleSubject className='circle-subject' stroke={'black'} radius={8} />
+                    )}
+                    {annotation.marker === 'arrow' && (
+                      <MarkerArrow
+                        fill='black'
+                        id='marker-start'
+                        x={annotation.x}
+                        y={annotation.dy}
+                        stroke='#333'
+                        markerWidth={10}
+                        size={10}
+                        strokeWidth={1}
+                        orient='auto-start-reverse'
+                      />
+                    )}
                   </AnnotationComponent>
                 </>
               )

package/src/components/Annotation/AnnotationDropdown.tsx

@@ -2,14 +2,14 @@ import React, { useContext, useState } from 'react'
 import ConfigContext from '../../context'
 import './AnnotationDropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
-import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
+import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
 import AnnotationList from './AnnotationList'
 
 const AnnotationDropdown = () => {
-  const { currentViewport: viewport, state: config } = useContext(ConfigContext)
+  const { state: config, isEditor, currentViewport: viewport } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(false)
 
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[config?.fontSize]}px`
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${appFontSize}px`
 
   const annotations = config?.annotations || []
 
@@ -19,7 +19,7 @@ const AnnotationDropdown = () => {
   }
 
   const handleAccordionClassName = () => {
-    const classNames = ['data-table-heading', 'annotation__dropdown-list']
+    const classNames = ['data-table-heading', 'annotation__dropdown-list', 'p-3']
     if (!expanded) {
       classNames.push('collapsed')
     }

package/src/components/CityList.tsx

@@ -5,6 +5,7 @@ import { supportedCities } from '../data/supported-geos'
 import { scaleLinear } from 'd3-scale'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
 import { getFilterControllingStatePicked } from './UsaMap/helpers/map'
+import { titleCase } from '../helpers/titleCase'
 
 import ConfigContext from '../context'
 import { getGeoStrokeColor } from '../helpers/colors'
@@ -15,14 +16,13 @@ const CityList = ({
   applyTooltipsToGeo,
   displayGeoName,
   applyLegendToRow,
-  titleCase,
   setSharedFilterValue,
   isFilterValueSupported,
   tooltipId,
   projection
 }) => {
   const [citiesData, setCitiesData] = useState({})
-  const { scale, state, topoData, runtimeData, position } = useContext(ConfigContext)
+  const { state, topoData, runtimeData, position } = useContext(ConfigContext)
   if (!projection) return
 
   useEffect(() => {

package/src/components/DataTable.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, memo } from 'react'
+import React, { useEffect, useState, memo, useContext } from 'react'
 
 import Papa from 'papaparse'
 import ExternalIcon from '../images/external-link.svg' // TODO: Move to Icon component
@@ -10,6 +10,8 @@ import MediaControls from '@cdc/core/components/MediaControls'
 import SkipTo from '@cdc/core/components/elements/SkipTo'
 
 import Loading from '@cdc/core/components/Loading'
+import { navigationHandler } from '../helpers/navigationHandler'
+import ConfigContext from '../context'
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = props => {
@@ -26,18 +28,15 @@ const DataTable = props => {
     displayDataAsText,
     applyLegendToRow,
     displayGeoName,
-    navigationHandler,
-    viewport,
     formatLegendLocation,
     tabbingId,
     setFilteredCountryCode
   } = props
 
+  const { currentViewport: viewport } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(expandDataTable)
   const [sortBy, setSortBy] = useState({ column: 'geo', asc: false })
-
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
-
   const fileName = `${mapTitle || 'data-table'}.csv`
 
   // Catch all sorting method used on load by default but also on user click
@@ -118,14 +117,14 @@ const DataTable = props => {
     if (columns.navigate && row[columns.navigate.name]) {
       markup = (
         <span
-          onClick={() => navigationHandler(row[columns.navigate.name])}
+          onClick={() => navigationHandler(state.general.navigationTarget, row[columns.navigate.name])}
           className='table-link'
           title='Click for more information (Opens in a new window)'
           role='link'
           tabIndex='0'
           onKeyDown={e => {
             if (e.keyCode === 13) {
-              navigationHandler(row[columns.navigate.name])
+              navigationHandler(state.general.navigationTarget, row[columns.navigate.name])
             }
           }}
         >
@@ -192,7 +191,7 @@ const DataTable = props => {
 
   const TableMediaControls = ({ belowTable }) => {
     return (
-      <MediaControls.Section classes={['download-links'] + (belowTable ? 'below-table' : '')}>
+      <MediaControls.Section classes={['download-links']}>
         <MediaControls.Link config={state} />
         {state.general.showDownloadButton && <DownloadButton />}
       </MediaControls.Section>
@@ -345,7 +344,7 @@ const DataTable = props => {
                             </>
                           )
                         } else {
-                          cellValue = displayDataAsText(runtimeData[row][state.columns[column].name], column)
+                          cellValue = displayDataAsText(runtimeData[row][state.columns[column].name], column, state)
                         }
 
                         return (

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

@@ -44,12 +44,12 @@ import { MapContext } from '../../../types/MapContext.js'
 import { TextField } from './Inputs'
 import Alert from '@cdc/core/components/Alert'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
+import { Select } from '@cdc/core/components/EditorPanel/Inputs'
 
 // Todo: move to useReducer, seperate files out.
 const EditorPanel = ({ columnsRequiredChecker }) => {
   // prettier-ignore
   const {
-    columnsInData = [],
     isDashboard,
     isDebug,
     loadConfig,
@@ -67,6 +67,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   } = useContext<MapContext>(ConfigContext)
 
   const { general, columns, legend, table, tooltips } = state
+  const columnsInData = state?.data?.[0] ? Object.keys(state.data[0]) : []
 
   const [configTextboxValue, setConfigTextbox] = useState({}) // eslint-disable-line
 
@@ -231,6 +232,15 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
 
   const handleEditorChanges = async (property, value) => {
     switch (property) {
+      case 'navigationTarget':
+        setState({
+          ...state,
+          general: {
+            ...state.general,
+            navigationTarget: value
+          }
+        })
+        break
       // change these to be more generic.
       // updateVisualPropertyValue
       // updateGeneralPropertyValue, etc.
@@ -715,6 +725,14 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
               }
             })
             break
+          case 'google-map':
+            setState({
+              ...state,
+              general: {
+                ...state.general,
+                geoType: 'google-map'
+              }
+            })
           default:
             break
         }
@@ -1369,13 +1387,29 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
             </AccordionItemHeading>
             <AccordionItemPanel>
               {/* Geography */}
+              {/*<Select*/}
+              {/*  options={[*/}
+              {/*    { value: 'us', label: 'United States' },*/}
+              {/*    { value: 'us-region', label: 'U.S. Region' },*/}
+              {/*    { value: 'world', label: 'World' },*/}
+              {/*    { value: 'single-state', label: 'U.S. State' },*/}
+              {/*    { value: 'google-map', label: 'Google Map API' }*/}
+              {/*  ]}*/}
+              {/*  section={'general'}*/}
+              {/*  fieldName={'geoType'}*/}
+              {/*  label='Geography'*/}
+              {/*  updateField={updateField}*/}
+              {/*/>*/}
+
               <label>
                 <span className='edit-label column-heading'>
                   <span>Geography</span>
                 </span>
-                <ul className='geo-buttons'>
+                <ul className='geo-buttons d-grid' style={{ gridTemplateColumns: 'repeat(2, 1fr)', gap: '8px' }}>
                   <button
-                    className={state.general.geoType === 'us' || state.general.geoType === 'us-county' ? 'active' : ''}
+                    className={`${
+                      state.general.geoType === 'us' || state.general.geoType === 'us-county' ? 'active' : ''
+                    } full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'us')
@@ -1385,7 +1419,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <span>United States</span>
                   </button>
                   <button
-                    className={state.general.geoType === 'us-region' ? 'active' : ''}
+                    className={`${state.general.geoType === 'us-region' ? 'active' : ''} full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'us-region')
@@ -1395,7 +1429,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <span>U.S. Region</span>
                   </button>
                   <button
-                    className={state.general.geoType === 'world' ? 'active' : ''}
+                    className={`${state.general.geoType === 'world' ? 'active' : ''} full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'world')
@@ -1405,7 +1439,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <span>World</span>
                   </button>
                   <button
-                    className={state.general.geoType === 'single-state' ? 'active' : ''}
+                    className={`${state.general.geoType === 'single-state' ? 'active' : ''} full-width`}
                     onClick={e => {
                       e.preventDefault()
                       handleEditorChanges('geoType', 'single-state')
@@ -1414,6 +1448,16 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     <AlabamaGraphic />
                     <span>U.S. State</span>
                   </button>
+                  {/* <button
+                    className={`${state.general.geoType === 'google-map' ? 'active' : ''} full-width`}
+                    onClick={e => {
+                      e.preventDefault()
+                      handleEditorChanges('geoType', 'google-map')
+                    }}
+                  >
+                    <UsaGraphic />
+                    <span>Google Map Api</span>
+                  </button> */}
                 </ul>
               </label>
               {/* Select > State or County Map */}
@@ -1526,6 +1570,23 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   )}
                 </select>
               </label>
+
+              {/* Navigation Behavior */}
+              {(state.general.type === 'navigation' || state.general.type === 'data') && (
+                <label>
+                  <span className='edit-label column-heading'>Navigation Behavior</span>
+                  <select
+                    value={state.general.navigationTarget}
+                    onChange={event => {
+                      event.preventDefault()
+                      handleEditorChanges('navigationTarget', event.target.value)
+                    }}
+                  >
+                    <option value='_self'>Same Window</option>
+                    <option value='_blank'>New Window</option>
+                  </select>
+                </label>
+              )}
               <label>
                 <span className='edit-label'>Data Classification Type</span>
                 <div>
@@ -1567,7 +1628,17 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                         handleEditorChanges('displayStateLabels', event.target.checked)
                       }}
                     />
-                    <span className='edit-label'>Show state labels</span>
+                    <span className='edit-label'>
+                      Show state labels
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>Recommended set to display for Section 508 compliance.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    </span>
                   </label>
                 )}
             </AccordionItemPanel>
@@ -1685,16 +1756,6 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   </Tooltip>
                 }
               />
-              {'us' === state.general.geoType && (
-                <TextField
-                  value={general.territoriesLabel}
-                  updateField={updateField}
-                  section='general'
-                  fieldName='territoriesLabel'
-                  label='Territories Label'
-                  placeholder='Territories'
-                />
-              )}
               {'us' === state.general.geoType && (
                 <label className='checkbox'>
                   <input
@@ -3316,6 +3377,18 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   updateField={updateField}
                 />
               </label>
+              {/* Leaflet Map Type */}
+              {state.general.geoType === 'leaflet' && (
+                <>
+                  <Select
+                    label='Leaflet Theme'
+                    options={layerOptions}
+                    section={'leaflet'}
+                    fieldName='theme'
+                    updateField={updateField}
+                  />
+                </>
+              )}
             </AccordionItemPanel>
           </AccordionItem>
           <AccordionItem>

package/src/components/GoogleMap/components/GoogleMap.tsx

@@ -0,0 +1,67 @@
+import React, { useContext, useEffect, useRef } from 'react'
+import { Loader } from '@googlemaps/js-api-loader'
+import { MarkerClusterer } from '@googlemaps/markerclusterer'
+import ConfigContext from '../../../context'
+
+// center on USA
+const center = {
+  lat: 37.09024,
+  lng: -95.712891
+}
+
+type GoogleMapComponentProps = {
+  apiKey?: string
+}
+
+const GoogleMapComponent: React.FC<GoogleMapComponentProps> = ({ apiKey = '' }) => {
+  const mapRef = useRef(null)
+  const { state } = useContext(ConfigContext)
+
+  useEffect(() => {
+    const loader = new Loader({
+      apiKey: apiKey,
+      version: 'weekly'
+    })
+
+    loader
+      .load()
+      .then(() => {
+        if (mapRef.current) {
+          const map = new window.google.maps.Map(mapRef.current, {
+            center: center,
+            zoom: 4
+          })
+
+          const markers = state.data.map(d => {
+            const markerContent = document.createElement('div')
+            markerContent.style.backgroundColor = 'orange' // Set the background color
+            markerContent.style.width = '25px'
+            markerContent.style.height = '25px'
+            markerContent.style.borderRadius = '50%'
+            markerContent.style.display = 'flex'
+            markerContent.style.alignItems = 'center'
+            markerContent.style.justifyContent = 'center'
+            markerContent.style.color = 'white'
+            markerContent.innerText = d[state.columns.geo.name]
+
+            const marker = new google.maps.Marker({
+              position: { lat: Number(d[state.columns.latitude.name]), lng: Number(d[state.columns.longitude.name]) },
+              title: d[state.columns.geo.name],
+              map: map
+            })
+
+            return marker
+          })
+
+          new MarkerClusterer({ markers, map })
+        }
+      })
+      .catch(e => {
+        console.error('Error loading Google Maps API:', e)
+      })
+  }, [apiKey, state])
+
+  return <div ref={mapRef} style={{ height: '500px', width: '100%' }} />
+}
+
+export default GoogleMapComponent

package/src/components/GoogleMap/index.tsx

@@ -0,0 +1,3 @@
+import GoogleMap from './components/GoogleMap'
+
+export default GoogleMap

package/src/components/Legend/components/Legend.tsx

@@ -1,5 +1,5 @@
 //TODO: Move legends to core
-import { forwardRef, useContext, useId } from 'react'
+import { forwardRef, useContext } from 'react'
 import parse from 'html-react-parser'
 
 //types
@@ -17,8 +17,9 @@ import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
 import { Group } from '@visx/group'
 import './index.scss'
-import { ViewportSize } from '@cdc/chart/src/types/ChartConfig'
+import { type ViewPort } from '@cdc/core/types/ViewPort'
 import { isBelowBreakpoint, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
 
 const LEGEND_PADDING = 30
 
@@ -26,22 +27,22 @@ type LegendProps = {
   skipId: string
   dimensions: DimensionsType
   containerWidthPadding: number
-  currentViewport: ViewportSize
+  currentViewport: ViewPort
 }
 
 const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
-  const { skipId, dimensions, containerWidthPadding, currentViewport } = props
+  const { skipId, containerWidthPadding } = props
+  const { isEditor, dimensions, currentViewport } = useContext(ConfigContext)
 
   const {
     // prettier-ignore
-    displayDataAsText,
     resetLegendToggles,
     runtimeFilters,
     runtimeLegend,
     setAccessibleStatus,
     setRuntimeLegend,
     state,
-    viewport,
+    currentViewport: viewport,
     mapId
   } = useContext(ConfigContext)
 
@@ -75,9 +76,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   }
   const getFormattedLegendItems = () => {
     return runtimeLegend.map((entry, idx) => {
-      const entryMax = displayDataAsText(entry.max, 'primary')
+      const entryMax = displayDataAsText(entry.max, 'primary', state)
 
-      const entryMin = displayDataAsText(entry.min, 'primary')
+      const entryMin = displayDataAsText(entry.min, 'primary', state)
       let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`
 
       // If interval, add some formatting
@@ -86,7 +87,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
       }
 
       if (legend.type === 'category') {
-        formattedText = displayDataAsText(entry.value, 'primary')
+        formattedText = displayDataAsText(entry.value, 'primary', state)
       }
 
       if (entry.max === 0 && entry.min === 0) {
@@ -116,12 +117,14 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   const legendList = (patternsOnly = false) => {
     const formattedItems = patternsOnly ? [] : getFormattedLegendItems()
     const patternsOnlyFont = isMobileHeightViewport(currentViewport) ? '12px' : '14px'
+    const hasDisabledItems = formattedItems.some(item => item.disabled)
     let legendItems
 
     legendItems = formattedItems.map((item, idx) => {
       const handleListItemClass = () => {
         let classes = ['legend-container__li', 'd-flex', 'align-items-center']
         if (item.disabled) classes.push('legend-container__li--disabled')
+        else if (hasDisabledItems) classes.push('legend-container__li--not-disabled')
         if (item.special) classes.push('legend-container__li--special-class')
         return classes.join(' ')
       }
@@ -264,26 +267,33 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           ref={ref}
         >
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
-            {legend.title && <h3 className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</h3>}
-            {legend.dynamicDescription === false && legend.description && (
-              <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>
+            {(legend.title || legend.description || legend.dynamicDescription) && (
+              <div className='mb-3'>
+                {legend.title && <h3 className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</h3>}
+                {legend.dynamicDescription === false && legend.description && (
+                  <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>
+                )}
+                {legend.dynamicDescription === true &&
+                  runtimeFilters.map((filter, idx) => {
+                    const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
+
+                    // Do we have a custom description for this?
+                    const desc = legend.descriptions[lookupStr] || ''
+
+                    if (desc.length > 0) {
+                      return (
+                        <p
+                          key={`dynamic-description-${lookupStr}`}
+                          className={`dynamic-legend-description-${lookupStr} mt-2`}
+                        >
+                          {desc}
+                        </p>
+                      )
+                    }
+                    return true
+                  })}
+              </div>
             )}
-            {legend.dynamicDescription === true &&
-              runtimeFilters.map((filter, idx) => {
-                const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
-
-                // Do we have a custom description for this?
-                const desc = legend.descriptions[lookupStr] || ''
-
-                if (desc.length > 0) {
-                  return (
-                    <p key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
-                      {desc}
-                    </p>
-                  )
-                }
-                return true
-              })}
 
             <LegendGradient
               labels={getFormattedLegendItems().map(item => item?.label) ?? []}
@@ -334,8 +344,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
               </>
             )}
             {runtimeLegend.disabledAmt > 0 && (
-              <Button className={legendClasses.resetButton.join(' ')} onClick={handleReset}>
-                Reset
+              <Button className={legendClasses.showAllButton.join(' ')} onClick={handleReset}>
+                Show All
               </Button>
             )}
           </section>