@cdc/map 4.24.12 → 4.25.1

package/src/data/initial-state.js

@@ -1,6 +1,7 @@
 export default {
   annotations: [],
   general: {
+    navigationTarget: '_self',
     noStateFoundMessage: 'Map Unavailable',
     annotationDropdownText: 'Annotations',
     geoBorderColor: 'darkGray',
@@ -11,8 +12,7 @@ export default {
     showDownloadButton: false,
     showDownloadMediaButton: false,
     displayAsHex: false,
-    displayStateLabels: false,
-    territoriesLabel: 'Territories',
+    displayStateLabels: true,
     territoriesAlwaysShow: false,
     language: 'en',
     geoType: 'single-state',

package/src/data/supported-geos.js

@@ -537,6 +537,9 @@ export const supportedTerritories = {
 // prettier-ignore
 export const supportedCities = {
   'ALASKA NATIVE TRIBAL HEALTH CONSORTIUM': [-149.8067, 61.1827],
+  'ALBANY, NEW YORK': [-73.9665676, 42.6679788],
+  'ALBANY, NY': [-73.9665676, 42.6679788],
+  'ALBANY': [-73.9665676, 42.6679788],
   'ALBUQUERQUE': [-106.650421, 35.084385],
   'ALEXANDRIA': [-77.0469, 38.8048],
   'AMERICAN INDIAN CANCER FOUNDATION': [-93.1777, 45.0119],
@@ -568,6 +571,7 @@ export const supportedCities = {
   'COLUMBUS': [-82.998795, 39.961178],
   'CORPUS CHRISTI': [-97.396378, 27.800583],
   'DALLAS': [-96.796989, 32.776665],
+  'DC': [-77.036873, 38.907192],
   'DENVER': [-104.990250, 39.739235],
   'DETROIT': [-83.045753, 42.331429],
   'DISTRICT OF COLUMBIA': [-77.036873, 38.907192],
@@ -601,10 +605,16 @@ export const supportedCities = {
   'IRVINE': [-117.826508, 33.684566],
   'IRVING': [-96.948891, 32.814018],
   'JACKSONVILLE': [-81.655647, 30.332184],
+  'JAMAICA PLAINS, MA': [-71.1382393, 42.308217],
+  'JAMAICA PLAINS, MARYLAND': [-71.1382393, 42.308217],
+  'JAMAICA PLAINS': [-71.1382393, 42.308217],
   'JERSEY CITY': [-74.077644, 40.728157],
   'KANSAS CITY': [-94.578568, 39.099728],
   'KAW NATION OF OKLAHOMA': [-96.8633, 36.7669],
   'LAKEVIEW': [-104.9903, 39.7392],
+  'LANSING, MI': [-84.6418571, 42.721154],
+  'LANSING, MICHIGAN': [-84.6418571, 42.721154],
+  'LANSING': [-84.6418571, 42.721154],
   'LAREDO': [-99.507553, 27.503561],
   'LAS VEGAS': [-115.139832, 36.169941],
   'LEXINGTON': [-84.503716, 38.040585],
@@ -638,6 +648,9 @@ export const supportedCities = {
   'NORTHWEST PORTLAND AREA INDIAN HEALTH BOARD': [-122.6863, 45.5076],
   'OAKLAND': [-122.271111, 37.804363],
   'OKLAHOMA CITY': [-97.516426, 35.467560],
+  'OLYMPIA, WA': [-122.9382403, 47.0394791],
+  'OLYMPIA, WASHINGTON': [-122.9382403, 47.0394791],
+  'OLYMPIA': [-122.9382403, 47.0394791],
   'OMAHA': [-95.934502, 41.256538],
   'ORLANDO': [-81.379234, 28.538336],
   'PASADENA':[-95.209099,29.691063],
@@ -650,7 +663,10 @@ export const supportedCities = {
   'PROVO, UTAH': [-111.6585, 40.2338],
   'RALEIGH': [-78.638176, 35.779591],
   'RENO': [-119.813805, 39.529633],
-  'RICHMOND': [-77.436050, 37.540726],
+  'RICHMOND, CA': [-122.4248668, 37.9559018],
+  'RICHMOND, CALIFORNIA': [-122.4248668, 37.9559018],
+  'RICHMOND, VA': [-77.436050, 37.540726],
+  'RICHMOND, VIRGINIA': [-77.436050, 37.540726],
   'RIVERSIDE': [-117.375496, 33.980602],
   'ROUND ROCK, TEXAS': [-97.6789, 30.5083],
   'ROUND ROCK, TX': [-97.6789, 30.5083],
@@ -663,7 +679,6 @@ export const supportedCities = {
   'SALEM, MASSACHUSETTS': [-70.8955, 42.5197],
   'SALEM, OR': [-123.0351, 44.9429],
   'SALEM, OREGON': [-123.0351, 44.9429],
-  'SALEM, OREGON': [-123.0351, 44.9429],
   'SALT LAKE CITY': [-112.0605644, 40.7767833],
   'SALUDA, VA': [-76.5950, 37.6064],
   'SALUDA, VIRGINIA': [-76.5950, 37.6064],
@@ -686,7 +701,13 @@ export const supportedCities = {
   'ST. PETERSBURG': [-82.640289, 27.767601],
   'STOCKTON': [-121.290779, 37.957703],
   'SYRACUSE': [-76.1742992, 43.0352913],
+  'TALLAHASSEE, FL': [-84.253917, 30.467056],
+  'TALLAHASSEE, FLORIDA': [-84.253917, 30.467056],
+  'TALLAHASSEE': [-84.253917, 30.467056],
   'TAMPA': [-82.457176, 27.950575],
+  'TAYLORSVILLE, UT': [-111.9702728, 40.658078],
+  'TAYLORSVILLE, UTAH': [-111.9702728, 40.658078],
+  'TAYLORSVILLE': [-111.9702728, 40.658078],
   'TOLEDO': [-83.537865, 41.652805],
   'TUCSON': [-110.974709, 32.222607],
   'TULSA': [-95.992775, 36.153980],
@@ -695,7 +716,6 @@ export const supportedCities = {
   'VIRGINIA BEACH': [-75.977982, 36.852924],
   'WARREN': [-80.8184, 41.2376],
   'WASHINGTON D.C.': [-77.036873, 38.907192],
-  'DC': [-77.036873, 38.907192],
   'WASHINGTON DC.': [-77.036873, 38.907192],
   'WASHINGTON DC': [-77.036873, 38.907192],
   'WICHITA': [-97.330055, 37.687176],

package/src/helpers/applyColorToLegend.ts

@@ -1,7 +1,7 @@
 import colorPalettes from '@cdc/core/data/colorPalettes'
 import chroma from 'chroma-js'
-import { isOlderVersion } from '@cdc/core/helpers/ver/versionNeedsUpdate'
 import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import isOlderVersion from '@cdc/core/helpers/isOlderVersion'
 
 /**
  * applyColorToLegend
@@ -45,7 +45,7 @@ export const applyColorToLegend = (legendIdx: number, config: ChartConfig, resul
 
     // Special Classes (No Data)
     if (result[legendIdx].special) {
-      if (isOlderVersion(config.version, '4.24.11')) {
+      if (!config?.migrations?.addColorMigration) {
         const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses)
         return specialClassColors[legendIdx]
       } else {
@@ -57,7 +57,7 @@ export const applyColorToLegend = (legendIdx: number, config: ChartConfig, resul
     if (config.color.includes('qualitative')) return mapColorPalette[colorIdx]
 
     // If the current version is newer than 4.24.10, use the color palette
-    if (!isOlderVersion(config.version, '4.24.12')) {
+    if (!config?.migrations?.addColorMigration) {
       if (config.customColors) return mapColorPalette[legendIdx - specialClasses.length]
     }
 

package/src/helpers/closeModal.ts

@@ -0,0 +1,9 @@
+export const closeModal = ({ target }, modal: string, setModal: Function) => {
+  if (
+    'string' === typeof target.className &&
+    (target.className.includes('modal-close') || target.className.includes('modal-background')) &&
+    null !== modal
+  ) {
+    setModal(null)
+  }
+}

package/src/helpers/handleMapAriaLabels.ts

@@ -0,0 +1,38 @@
+export const handleMapAriaLabels = (state: MapConfig = '', testing = false) => {
+  if (testing) console.log(`handleMapAriaLabels Testing On: ${state}`) // eslint-disable-line
+  try {
+    if (!state.general.geoType) throw Error('handleMapAriaLabels: no geoType found in state')
+    const {
+      general: { title, geoType, statePicked }
+    } = state
+    let ariaLabel = ''
+    switch (geoType) {
+      case 'world':
+        ariaLabel += 'World map'
+        break
+      case 'us':
+        ariaLabel += 'United States map'
+        break
+      case 'us-county':
+        ariaLabel += `United States county map`
+        break
+      case 'single-state':
+        ariaLabel += `${statePicked.stateName} county map`
+        break
+      case 'us-region':
+        ariaLabel += `United States HHS Region map`
+        break
+      default:
+        ariaLabel = 'Data visualization container'
+        break
+    }
+
+    if (title) {
+      ariaLabel += ` with the title: ${title}`
+    }
+
+    return ariaLabel
+  } catch (e) {
+    console.error('COVE: ', e.message) // eslint-disable-line
+  }
+}

package/src/helpers/indexOfIgnoreType.ts

@@ -0,0 +1,8 @@
+export const indexOfIgnoreType = (arr, item) => {
+  for (let i = 0; i < arr.length; i++) {
+    if (item === arr[i]) {
+      return i
+    }
+  }
+  return -1
+}

package/src/helpers/navigationHandler.ts

@@ -0,0 +1,21 @@
+export const navigationHandler = (
+  navigationTarget: '_self' | '_blank',
+  urlString: string,
+  customNavigationHandler?: Function
+): void => {
+  // Call custom navigation method if passed
+  if (customNavigationHandler) {
+    customNavigationHandler(urlString)
+    return
+  }
+
+  // Abort if value is blank
+  if (0 === urlString.length) {
+    throw Error('Blank string passed as URL. Navigation aborted.')
+  }
+
+  const urlObj = new URL(urlString, window.location.origin)
+
+  // Open constructed link in new tab/window
+  window.open(urlObj.toString(), navigationTarget)
+}

package/src/helpers/toTitleCase.ts

@@ -0,0 +1,44 @@
+// if city has a hyphen then in tooltip it ends up UPPER CASE instead of just regular Upper Case
+// - this function is used to prevent that and instead give the formatting that is wanted
+// Example:  Desired city display in tooltip on map: "Inter-Tribal Indian Reservation"
+export const titleCase = string => {
+  // guard clause else error in editor
+  if (!string) return
+
+  if (string !== undefined) {
+    const toTitleCase = word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()
+
+    if (string.toUpperCase().includes('U.S.') || string.toUpperCase().includes('US')) {
+      return string
+        .split(' ')
+        .map(word => {
+          if (word.toUpperCase() === 'U.S.' || word.toUpperCase() === 'US') {
+            return word.toUpperCase()
+          } else {
+            return toTitleCase(word)
+          }
+        })
+        .join(' ')
+    }
+    // if hyphen found, then split, uppercase each word, and put back together
+    if (string.includes('–') || string.includes('-')) {
+      let dashSplit = string.includes('–') ? string.split('–') : string.split('-') // determine hyphen or en dash to split on
+      let splitCharacter = string.includes('–') ? '–' : '-' // print hyphen or en dash later on.
+      let frontSplit = dashSplit[0]
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+        .join(' ')
+      let backSplit = dashSplit[1]
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+        .join(' ')
+      return frontSplit + splitCharacter + backSplit
+    } else {
+      // just return with each word uppercase
+      return string
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase())
+        .join(' ')
+    }
+  }
+}

package/src/helpers/validateFipsCodeLength.ts

@@ -0,0 +1,30 @@
+import { MapConfig } from '../types/MapConfig'
+
+/**
+ * Validates and ensures proper formatting of FIPS codes in the provided `MapConfig` object.
+ *
+ * - If the `geoType` is "us-county" or "us" with associated data:
+ *   - Iterates through each data entry in `newState.data`.
+ *   - Checks if the value in the `geo` column is numeric and has a length of 4.
+ *     - If so, prepends a `0` to ensure a valid 5-digit FIPS code.
+ *   - Converts the `geo` column value to a string for consistency.
+ *
+ * @param newState - The state object containing map data and configuration.
+ * @returns The updated state object with corrected FIPS code formatting.
+ */
+export const validateFipsCodeLength = (newState: MapConfig) => {
+  if (newState.general.geoType === 'us-county' || (newState.general.geoType === 'us' && newState?.data)) {
+    newState?.data.forEach(dataPiece => {
+      if (dataPiece[newState.columns.geo.name]) {
+        if (
+          !isNaN(parseInt(dataPiece[newState.columns.geo.name])) &&
+          dataPiece[newState.columns.geo.name].length === 4
+        ) {
+          dataPiece[newState.columns.geo.name] = 0 + dataPiece[newState.columns.geo.name]
+        }
+        dataPiece[newState.columns.geo.name] = dataPiece[newState.columns.geo.name].toString()
+      }
+    })
+  }
+  return newState
+}

package/src/hooks/useResizeObserver.ts

@@ -0,0 +1,42 @@
+import { useState, useCallback, useEffect } from 'react'
+import { type ViewPort } from '@cdc/core/types/ViewPort'
+import { type DimensionsType } from '@cdc/core/types/Dimensions'
+import getViewport from '@cdc/core/helpers/getViewport'
+import ResizeObserver from 'resize-observer-polyfill'
+
+export const useResizeObserver = (isEditor: boolean) => {
+  const [dimensions, setDimensions] = useState<DimensionsType>([0, 0])
+  const [currentViewport, setCurrentViewport] = useState<ViewPort>(null)
+  const [container, setContainer] = useState<HTMLElement | null>(null)
+
+  const resizeObserver = new ResizeObserver(entries => {
+    for (let entry of entries) {
+      let { width, height } = entry.contentRect
+      let newViewport = getViewport(entry.contentRect.width)
+
+      let editorWidth = 350
+
+      setCurrentViewport(newViewport)
+
+      if (isEditor) {
+        width = width - editorWidth
+      }
+      setDimensions([width, height])
+    }
+  })
+
+  const outerContainerRef = useCallback(node => {
+    if (node !== null) {
+      resizeObserver.observe(node)
+    }
+    setContainer(node)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
+  return { resizeObserver, dimensions, currentViewport, outerContainerRef, container }
+}
+
+export default useResizeObserver

package/src/hooks/useTooltip.ts

@@ -1,5 +1,7 @@
+import { displayDataAsText } from '../../../core/helpers/displayDataAsText'
+
 const useTooltip = props => {
-  const { state, displayGeoName, displayDataAsText, supportedStatesFipsCodes } = props
+  const { state, displayGeoName, supportedStatesFipsCodes } = props
 
   const config = state
 
@@ -105,7 +107,7 @@ const useTooltip = props => {
           let tooltipValue = handleTooltipSpecialClassText(specialClasses, column, row, '', columnKey)
 
           if (!tooltipValue) {
-            tooltipValue = row ? displayDataAsText(row[column.name], columnKey) : 'No Data'
+            tooltipValue = row ? displayDataAsText(row[column.name], columnKey, state) : 'No Data'
           }
 
           toolTipText += handleTooltipPrimaryColumn(tooltipValue, column)

package/src/index.jsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
 
 import CdcMap from './CdcMap'
 
+import '@cdc/core/styles/cove-main.scss'
 import 'react-tooltip/dist/react-tooltip.css'
 import './coreStyles_map.scss'
 

package/src/scss/editor-panel.scss

@@ -17,8 +17,9 @@
 .cdc-open-viz-module {
   .geo-buttons {
     list-style: none;
-    display: flex;
     color: var(--mediumGray);
+    display: grid;
+    button { width: 100% !important; }
     svg {
       display: block;
       max-width: 80px;

package/src/scss/filters.scss

@@ -12,7 +12,6 @@
     label {
       display: inherit;
       margin-bottom: 5px;
-      font-weight: 600;
       font-size: 16px;
     }
   }
@@ -22,10 +21,6 @@
     flex-wrap: wrap;
   }
 
-  label:not(:empty) {
-    margin-right: 0.4em;
-  }
-
   .single-filter {
     margin-bottom: 0.5em;
   }

package/src/scss/main.scss

@@ -48,7 +48,6 @@
 .cdc-map-inner-container {
   @import './map';
   flex-grow: 1;
-  text-rendering: geometricPrecision;
   color: #202020;
   border: 0;
   text-align: left;
@@ -81,10 +80,7 @@
         content: ' ';
         position: absolute;
         top: 0;
-        left: -1em;
-        right: -1em;
         bottom: 0;
-        background: rgba(0, 0, 0, 0.05);
         z-index: 7;
       }
       .modal-content {
@@ -94,71 +90,72 @@
         top: 50%;
         left: 50%;
         display: flex;
-        flex-direction: row;
-        border-radius: 5px;
+        flex-direction: column;
         transform: translate(-50%, -50%);
-        border: rgba(0, 0, 0, 0.3) 1px solid;
-        box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 7px;
-        opacity: 1;
-        line-height: 1.4em;
-        font-size: 1rem;
-        border-radius: 4px;
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        border-radius: 5px;
+        padding: 16px 40px;
         min-width: 250px;
-        padding: 16px 40px 16px 20px;
         width: auto;
-        .content {
-          flex-grow: 1;
-        }
-        .legend-item {
-          margin-right: 0.75em;
-          margin-top: 3px;
-          flex-shrink: 0;
-        }
-        @include breakpointClass(sm) {
-          transform: translate(-50%, -100%);
-        }
-        @include breakpointClass(md) {
-          transform: translate(-50%, -120%);
-        }
-        @include breakpointClass(lg) {
-          font-size: 0.9em;
-          min-width: 300px;
-          .legend-item {
-            height: 1.3em;
-            width: 1.3em;
-          }
-        }
-        strong {
-          font-weight: 600;
-          font-size: 1.2em;
-        }
-        .modal-close {
-          position: absolute;
-          right: 20px;
-          top: 18px;
-          cursor: pointer;
-          width: 1em;
-        }
-        a.navigation-link {
-          text-decoration: underline;
-          cursor: pointer;
-          color: #075290;
-          display: flex;
-          svg {
-            display: inline-block;
-            max-width: 13px;
-            margin-left: 0.5em;
-          }
-        }
-        &.capitalize p {
-          text-transform: capitalize;
+        max-height: 90vh; /* Constrain the modal's height to 90% of the viewport */
+        overflow-y: auto; /* Enable vertical scrolling if content overflows */
+        font-size: 1rem;
+        line-height: 1.4em;
+      }
+
+      .modal-content .content {
+        flex-grow: 1;
+      }
+
+      .modal-content .legend-item {
+        margin-right: 0.75em;
+        margin-top: 3px;
+        flex-shrink: 0;
+      }
+
+      .modal-content strong {
+        font-weight: 600;
+        font-size: 1.2em;
+      }
+
+      .modal-content .modal-close {
+        position: absolute;
+        right: 20px;
+        top: 18px;
+        cursor: pointer;
+        width: 1em;
+      }
+
+      .modal-content a.navigation-link {
+        text-decoration: underline;
+        cursor: pointer;
+        color: #075290;
+        display: flex;
+      }
+
+      .modal-content a.navigation-link svg {
+        display: inline-block;
+        max-width: 13px;
+        margin-left: 0.5em;
+      }
+
+      .modal-content.capitalize p {
+        text-transform: capitalize;
+      }
+
+      /* Responsive adjustments for smaller screens */
+      @media (max-width: 1048px) {
+        .modal-content {
+          width: 90%; /* Adjust width to fit smaller screens */
+          top: 10%; /* Offset from the top for better usability */
+          transform: translate(-50%, 0); /* Remove vertical centering */
         }
       }
     }
   }
 
   p.subtext {
-    font-size: 0.9em;
     em {
       font-style: italic;
     }
@@ -168,7 +165,6 @@
   }
 
   span.legend-item {
-    margin-right: 5px;
     border-radius: 300px;
     vertical-align: middle;
     display: inline-block;

package/src/scss/map.scss

@@ -75,7 +75,6 @@ $medium: 768px;
   position: relative;
   flex-grow: 1;
   width: 100%;
-  overflow: hidden;
   .geo-point {
     transition: 0.3s all;
     circle {
@@ -102,10 +101,7 @@ $medium: 768px;
 }
 
 .territories-label {
-  color: black;
-  font-size: 1.1em;
-  display: block;
-  margin-top: 15px;
+  font-size: 1em;
 }
 
 // Cities and Territories
@@ -194,7 +190,6 @@ $medium: 768px;
     transform: none;
   }
   .territories {
-    font-size: 1em;
     > span {
       margin-left: 0;
     }
@@ -327,10 +322,3 @@ canvas {
   pointer-events: none;
   display: none;
 }
-
-.data-table-container {
-  margin: 20px 0px 0px;
-  &.download-link-above {
-    margin-top: 0;
-  }
-}

package/src/types/MapConfig.ts

@@ -1,7 +1,8 @@
-import { ComponentThemes } from '@cdc/core/types/ComponentThemes'
-import { Visualization } from '@cdc/core/types/Visualization'
-import { EditorColumnProperties } from '@cdc/core/types/EditorColumnProperties'
-import { Version } from '@cdc/core/types/Version'
+import { type ComponentThemes } from '@cdc/core/types/ComponentThemes'
+import { type Visualization } from '@cdc/core/types/Visualization'
+import { type EditorColumnProperties } from '@cdc/core/types/EditorColumnProperties'
+import { type Version } from '@cdc/core/types/Version'
+import { type VizFilter } from '@cdc/core/types/VizFilter'
 
 export type MapVisualSettings = {
   /** minBubbleSize - Minimum Circle Size when the map has a type of bubble */
@@ -15,9 +16,8 @@ export type MapVisualSettings = {
   /** cityStyle - optional visual indicator of label on the Legend */
   cityStyleLabel: string
   /** geoCodeCircleSize - controls the size of the city style option (circle or pin) */
-
   geoCodeCircleSize: number
-  /** showBubbleZeros - shows circles on maps when the data is provided even if its a zero value */
+  /** showBubbleZeros - shows circles on maps when the data is provided even if it's a zero value */
   showBubbleZeros: boolean
   /** additionalCityStyles - shows Circle, Square, Triangle, Rhombus/Diamond, Star, Map Pin on maps when the additionalCityStyles is added */
   additionalCityStyles: [] | [{ label: string; column: string; value: string; shape: string }]
@@ -46,7 +46,7 @@ export type PrimaryColumnProperties = Pick<
   EditorColumnProperties,
   'dataTable' | 'label' | 'name' | 'prefix' | 'suffix' | 'tooltip'
 >
-export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
+
 export type LegendShapeItem = {
   column: string
   key: string
@@ -77,11 +77,11 @@ export type MapConfig = Visualization & {
     navigate: NavigateColumnProperties
     latitude: LatitudeColumnProperties
     longitude: LongitudeColumnProperties
-    categorical: { name }
+    categorical: { name: string }
   }
   dataUrl: string
   runtimeDataUrl: string
-  filters: any[]
+  filters: VizFilter[]
   general: {
     allowMapZoom: boolean
     convertFipsCodes: boolean
@@ -90,7 +90,16 @@ export type MapConfig = Visualization & {
     fullBorder: boolean
     geoBorderColor: string
     geoLabelOverride: string
-    geoType: 'us' | 'us-county' | 'world'
+    geoType:
+      | 'us'
+      | 'us-region'
+      | 'us-county'
+      | 'world'
+      | 'us-geocode'
+      | 'world-geocode'
+      | 'bubble'
+      | 'single-state'
+      | 'google-map'
     hasRegions: boolean
     headerColor: ComponentThemes
     hideGeoColumnInTooltip: boolean
@@ -150,7 +159,7 @@ export type MapConfig = Visualization & {
   tooltips: {
     appearanceType: 'hover' | 'click'
     linkLabel: string
-    capitalizeLabels: true
+    capitalizeLabels: boolean
     opacity: number
   }
   runtime: {